diff --git a/Dockerfile b/Dockerfile
index f1a48db7..2a9ca7eb 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -150,8 +150,8 @@ COPY --from=builder --chown=nextjs:nodejs /app/apps/web/package.json ./apps/web/
 # Set up environment
 WORKDIR /app/apps/web
 
-# Create data directory for SQLite database
-RUN mkdir -p data && chown nextjs:nodejs data
+# Create data directory for SQLite database and uploads
+RUN mkdir -p data/uploads && chown -R nextjs:nodejs data
 
 USER nextjs
 EXPOSE 3000
diff --git a/apps/web/.claude/WORKSHEET_GRADING_POSTMORTEM.md b/apps/web/.claude/WORKSHEET_GRADING_POSTMORTEM.md
new file mode 100644
index 00000000..fc79581e
--- /dev/null
+++ b/apps/web/.claude/WORKSHEET_GRADING_POSTMORTEM.md
@@ -0,0 +1,244 @@
+# Worksheet Grading System - Post-Mortem
+
+**Date:** 2025-11-10
+**Status:** Failed implementation - needs redesign
+
+## What Went Wrong
+
+### 1. **Built Too Much At Once**
+- Attempted to implement 7+ features simultaneously:
+  - OpenAI GPT-5 Responses API integration
+  - Server-Sent Events (SSE) streaming
+  - Socket.IO real-time progress
+  - Database schema for attempts/mastery
+  - Image upload handling
+  - Result extraction and validation
+  - Progress UI with phases
+
+**Problem:** No way to test each piece individually. When something broke, impossible to isolate the issue.
+
+### 2. **No Incremental Testing**
+- User had no way to test components as they were built
+- No debug UI or test harness
+- First time user saw anything was when the entire system was "done"
+- By then, too many layers of abstraction to debug
+
+### 3. **Insufficient Visibility**
+- No way to see raw API responses
+- No way to test socket connections independently
+- No way to verify event parsing
+- Logs were buried in server console
+
+### 4. **Wrong Development Order**
+Built from bottom-up instead of outside-in:
+1. Started with database schema
+2. Added API integration
+3. Added streaming/sockets
+4. Finally built UI
+
+**Should have been:**
+1. Build minimal UI with mock data
+2. Add real API calls (non-streaming)
+3. Add streaming/progress
+4. Add database persistence
+
+### 5. **API Response Structure Misunderstanding**
+- GPT-5 Responses API returns `output[0]` = reasoning, `output[1]` = message
+- Didn't discover this until after everything was "working"
+- Result was JSON string that needed parsing
+- These are fundamental issues that should have been caught early with a test harness
+
+### 6. **Scope Creep**
+Started with "grade a worksheet" and ended up with:
+- Mastery tracking system
+- Progression path logic
+- Retry mechanism with validation errors
+- Multiple upload modes (file/camera/QR)
+- Real-time streaming progress
+- Socket.IO infrastructure
+
+**Should have started with:** "Can we call OpenAI and get back problem grades?"
+
+## Root Cause
+
+**I built a production system without first proving the concept worked.**
+
+The user couldn't give feedback on each component because there was no way to interact with them individually. By the time integration was done, the feedback was "this is total garbage" because debugging was impossible.
+
+## What Should Have Happened
+
+### **Phase 1: Proof of Concept (Day 1)**
+**Goal:** Prove we can call OpenAI and get worksheet grades
+
+**Deliverable:** `/worksheets/debug/api-test` page with:
+- Upload image button
+- "Call OpenAI" button
+- Raw request display (with image truncated)
+- Raw response display
+- Parsed result display
+- Clear error messages
+
+**User can verify:**
+- ✅ Image uploads work
+- ✅ OpenAI API responds
+- ✅ Response structure is correct
+- ✅ We can extract problem grades
+
+**Exit criteria:** User uploads a real worksheet and sees correct grades displayed.
+
+---
+
+### **Phase 2: Result Validation (Day 2)**
+**Goal:** Ensure OpenAI returns valid, usable data
+
+**Add to debug page:**
+- Schema validation results
+- Field-by-field validation
+- Test multiple worksheets
+- Edge case handling (no problems visible, blurry, etc.)
+
+**User can verify:**
+- ✅ Validation logic works
+- ✅ Retry mechanism works
+- ✅ Error messages are helpful
+
+**Exit criteria:** 10 test worksheets all grade correctly with valid output.
+
+---
+
+### **Phase 3: Storage (Day 3)**
+**Goal:** Save grading results to database
+
+**Add:**
+- Database tables for attempts
+- API route to save results
+- Display saved results
+
+**Debug page shows:**
+- "Save to DB" button
+- Database insert confirmation
+- Link to view saved result
+
+**User can verify:**
+- ✅ Results persist correctly
+- ✅ Can retrieve and display saved grades
+
+**Exit criteria:** User can reload page and see their saved grading results.
+
+---
+
+### **Phase 4: Progress UI (Day 4)**
+**Goal:** Add streaming progress updates
+
+**First:** Add Socket.IO test page
+- Connect/disconnect buttons
+- Emit test events
+- Display all received events
+- Connection status
+
+**User can verify:**
+- ✅ Socket connections work
+- ✅ Events are received
+- ✅ Disconnections are handled
+
+**Then:** Add streaming to debug page
+- Toggle streaming on/off
+- Display events as they arrive
+- Compare streaming vs non-streaming
+
+**Exit criteria:** User sees token counts updating in real-time.
+
+---
+
+### **Phase 5: Production UI (Day 5+)**
+Only after all pieces work individually:
+- Build upload page
+- Add camera capture
+- Add results page
+- Add mastery tracking
+
+Each piece can reference working debug pages if something breaks.
+
+## Key Principles for Next Attempt
+
+### 1. **Build Testable Components**
+Every major component should have a dedicated test/debug page:
+- `/worksheets/debug/api-test` - OpenAI API calls
+- `/worksheets/debug/socket-test` - Socket.IO connections
+- `/worksheets/debug/upload-test` - Image upload handling
+- `/worksheets/debug/stream-test` - SSE stream parsing
+
+### 2. **Outside-In Development**
+Start with UI/UX and work backward:
+1. What does the user see?
+2. What API does that need?
+3. What database tables does that need?
+4. What external services does that need?
+
+### 3. **One Feature at a Time**
+Each PR should add exactly ONE user-facing capability:
+- "User can upload image and see raw API response"
+- "User can see parsed problem grades"
+- "User can save and reload grading results"
+- "User sees real-time progress updates"
+
+### 4. **Give User Control**
+Every test page should have buttons/controls for:
+- Triggering actions manually
+- Viewing raw data
+- Testing edge cases
+- Comparing approaches (streaming vs non-streaming)
+
+### 5. **Make Debugging Easy**
+- All API calls should be logged with request/response
+- Socket events should be visible in UI
+- Database queries should be logged
+- Error messages should include full context
+
+### 6. **Get Feedback Early**
+Show the user working pieces BEFORE integrating them:
+- "Here's the API response - does this look right?"
+- "Here's the socket connection - do you see events?"
+- "Here's the progress UI - is this what you wanted?"
+
+## Technical Lessons Learned
+
+### OpenAI GPT-5 Responses API
+- Response structure: `output[0]` = reasoning, `output[1]` = message
+- Message content is a JSON string that needs parsing
+- Streaming uses SSE with custom event types
+- `json_schema` with `strict: true` enforces exact schema match
+
+### Socket.IO with Next.js
+- Must specify correct path: `/api/socket`
+- Server and client must match paths
+- Events don't queue - client must connect before server emits
+
+### Streaming Challenges
+- Node.js fetch has default timeouts
+- Need AbortController for custom timeouts
+- SSE parsing library (eventsource-parser) has version-specific API
+- Variable scoping issues in async error handlers
+
+## Revised Specification for Next Attempt
+
+See `WORKSHEET_GRADING_SPEC_V2.md` (to be written)
+
+Key changes:
+- Start with non-streaming
+- Build debug pages first
+- One deliverable per phase
+- User tests each phase before next phase starts
+- No integration until all pieces work independently
+
+## Conclusion
+
+**The implementation failed because there was no way to test it incrementally.**
+
+The correct approach is to build small, testable pieces that the user can interact with and give feedback on. Only after each piece is proven to work should we integrate them together.
+
+Next time:
+1. Build a test page first
+2. Get user feedback
+3. Iterate on that page until it works perfectly
+4. Only then integrate into production
diff --git a/apps/web/.claude/WORKSHEET_GRADING_SPEC_V2.md b/apps/web/.claude/WORKSHEET_GRADING_SPEC_V2.md
new file mode 100644
index 00000000..c8a77eda
--- /dev/null
+++ b/apps/web/.claude/WORKSHEET_GRADING_SPEC_V2.md
@@ -0,0 +1,439 @@
+# Worksheet Grading System - Specification v2
+
+**Status:** Not implemented - awaiting future development
+**Created:** 2025-11-10
+**Replaces:** Failed v1 implementation
+
+## Core Goal
+
+**Enable teachers to upload photos of completed math worksheets and get automated grading with problem-by-problem feedback.**
+
+## Development Approach
+
+**Build test pages first, production pages second.**
+
+Every feature must have a debug/test page where the user can:
+- Trigger the feature manually
+- See raw data/responses
+- Test edge cases
+- Verify it works before integration
+
+## Phase 1: API Proof of Concept
+
+**Goal:** Prove OpenAI can grade worksheets
+
+### Deliverable: `/worksheets/debug/openai-test` page
+
+**UI Components:**
+- Image upload input
+- "Test OpenAI API" button
+- Toggle: "Streaming" vs "Simple"
+- Display sections:
+  - Request details (model, tokens, etc.)
+  - Raw API response (collapsible JSON)
+  - Parsed grades table
+  - Validation errors (if any)
+  - Timing information
+
+**Functionality:**
+```typescript
+// Non-streaming first
+async function testOpenAI(imageFile: File) {
+  const response = await fetch('/api/debug/test-openai', {
+    method: 'POST',
+    body: formData
+  })
+
+  // Display raw response
+  // Display parsed grades
+  // Display any errors
+}
+```
+
+**Success Criteria:**
+- User uploads worksheet photo
+- Sees raw OpenAI response
+- Sees parsed problem grades
+- All grades are correct
+- Edge cases handled (blurry, no problems, etc.)
+
+**Blocked by:** Nothing - can start immediately
+
+---
+
+## Phase 2: Socket.IO Infrastructure
+
+**Goal:** Prove real-time communication works
+
+### Deliverable: `/worksheets/debug/socket-test` page
+
+**UI Components:**
+- Connection status indicator
+- "Connect" / "Disconnect" buttons
+- "Send Test Event" button
+- Event log (scrollable, timestamped)
+- Latency meter
+
+**Functionality:**
+```typescript
+function SocketTest() {
+  const [events, setEvents] = useState([])
+  const [socket, setSocket] = useState(null)
+
+  function connect() {
+    const s = io({ path: '/api/socket' })
+    s.on('connect', () => addEvent('Connected'))
+    s.on('test-event', (data) => addEvent('Received', data))
+    setSocket(s)
+  }
+
+  function sendTest() {
+    socket.emit('test-event', {
+      timestamp: Date.now(),
+      message: 'Hello from client'
+    })
+  }
+}
+```
+
+**Success Criteria:**
+- Socket connects successfully
+- Test events are sent and received
+- Latency is acceptable (<100ms)
+- Reconnection works after disconnect
+- No events are lost
+
+**Blocked by:** Nothing - independent of Phase 1
+
+---
+
+## Phase 3: Streaming Progress
+
+**Goal:** Add real-time progress to OpenAI calls
+
+### Enhancement to Phase 1 page
+
+**Add to `/worksheets/debug/openai-test`:**
+- Progress bar with phases
+- Token counter (live updates)
+- Event log showing SSE events
+- Comparison: "With Progress" vs "Without Progress"
+
+**Functionality:**
+```typescript
+async function testStreamingOpenAI(imageFile: File) {
+  const response = await fetch('/api/debug/test-openai-stream', {
+    method: 'POST',
+    body: formData
+  })
+
+  const reader = response.body.getReader()
+  const decoder = new TextDecoder()
+
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+
+    const chunk = decoder.decode(value)
+    // Parse SSE events
+    // Update progress UI
+    // Display in event log
+  }
+}
+```
+
+**Success Criteria:**
+- User sees progress bar update in real-time
+- Token counts increase smoothly
+- All SSE event types are handled
+- Final result matches non-streaming result
+- No connection timeouts
+
+**Blocked by:** Phase 1 (need working OpenAI integration)
+
+---
+
+## Phase 4: Database Persistence
+
+**Goal:** Save and retrieve grading results
+
+### Deliverable: `/worksheets/debug/storage-test` page
+
+**UI Components:**
+- "Save Result to DB" button
+- Saved results list (with IDs)
+- "Load Result" button for each saved result
+- Display: saved vs current result comparison
+
+**Database Schema:**
+```sql
+CREATE TABLE worksheet_attempts (
+  id TEXT PRIMARY KEY,
+  user_id TEXT NOT NULL,
+  uploaded_image_url TEXT NOT NULL,
+  grading_status TEXT NOT NULL, -- 'pending', 'processing', 'completed', 'failed'
+  total_problems INTEGER,
+  correct_count INTEGER,
+  accuracy REAL,
+  error_patterns TEXT, -- JSON array
+  suggested_step_id TEXT,
+  ai_feedback TEXT,
+  graded_at TIMESTAMP,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE problem_attempts (
+  id TEXT PRIMARY KEY,
+  attempt_id TEXT NOT NULL REFERENCES worksheet_attempts(id),
+  problem_index INTEGER NOT NULL,
+  operand_a INTEGER NOT NULL,
+  operand_b INTEGER NOT NULL,
+  correct_answer INTEGER NOT NULL,
+  student_answer INTEGER,
+  is_correct BOOLEAN NOT NULL,
+  error_type TEXT, -- 'computation', 'carry', 'alignment', etc.
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+**Success Criteria:**
+- Results save to database
+- Can retrieve saved results by ID
+- Data integrity is maintained
+- Can query by user/date
+- No data loss
+
+**Blocked by:** Phase 1 (need working grades to save)
+
+---
+
+## Phase 5: Socket + Streaming Integration
+
+**Goal:** Combine real-time progress with Socket.IO
+
+### Enhancement to Phase 3
+
+**Modify `/worksheets/debug/openai-test`:**
+- Add "Use Socket.IO" checkbox
+- When enabled, progress updates emit via socket
+- Multiple browser tabs can watch same grading
+- Compare: HTTP streaming vs Socket.IO
+
+**Server logic:**
+```typescript
+// Server-side during grading
+io.emit('grading:progress', {
+  attemptId,
+  phase: 'analyzing',
+  inputTokens: 1234,
+  outputTokens: 567,
+  message: 'Analyzing problems...'
+})
+```
+
+**Client logic:**
+```typescript
+socket.on('grading:progress', (data) => {
+  if (data.attemptId === currentAttemptId) {
+    updateProgressUI(data)
+  }
+})
+```
+
+**Success Criteria:**
+- Socket progress updates work alongside SSE
+- Multiple clients can watch same grading
+- Progress is smooth and accurate
+- No race conditions
+- Handles client disconnect/reconnect
+
+**Blocked by:** Phases 2, 3 (need both working independently)
+
+---
+
+## Phase 6: Production Upload Page
+
+**Goal:** Real user-facing upload interface
+
+### Deliverable: `/worksheets/upload` page
+
+**UI Components:**
+- Three upload modes:
+  - File picker
+  - Camera capture
+  - QR code (advanced)
+- Preview of uploaded image
+- "Submit for Grading" button
+- Redirect to results page
+
+**Functionality:**
+- Validates image (size, format)
+- Uploads to server
+- Creates attempt record
+- Starts grading process
+- Redirects to `/worksheets/attempts/[id]`
+
+**Success Criteria:**
+- All three upload modes work
+- Image validation works
+- Error messages are clear
+- Loading states are shown
+- Mobile camera works
+
+**Blocked by:** Phases 1, 4 (need API and storage)
+
+---
+
+## Phase 7: Results Display Page
+
+**Goal:** Show grading results to user
+
+### Deliverable: `/worksheets/attempts/[attemptId]` page
+
+**UI Components:**
+- Overall stats (X/Y correct, accuracy %)
+- Problem-by-problem table:
+  - Problem (e.g., "45 + 27")
+  - Correct answer
+  - Student answer
+  - Status (✓ or ✗)
+  - Error type (if incorrect)
+- AI feedback text
+- Suggested next practice level
+- "Grade Another" button
+
+**Real-time Updates:**
+- Shows progress while grading
+- Updates when grading completes
+- Shows errors if grading fails
+
+**Success Criteria:**
+- Results display correctly
+- Real-time updates work
+- Can handle pending/processing states
+- Error states are clear
+- Links to suggested practice
+
+**Blocked by:** Phases 4, 5, 6 (need storage, progress, upload)
+
+---
+
+## Phase 8: Mastery Tracking (Optional)
+
+**Goal:** Track student progress over time
+
+### Deliverable: `/worksheets/progress` page
+
+**Features:**
+- List of all attempts
+- Progress chart over time
+- Skill breakdown
+- Weak areas identification
+
+**Database:**
+```sql
+CREATE TABLE mastery_profiles (
+  user_id TEXT PRIMARY KEY,
+  current_step_id TEXT NOT NULL,
+  mastery_score REAL NOT NULL,
+  attempts_at_step INTEGER DEFAULT 0,
+  updated_at TIMESTAMP
+);
+```
+
+**Success Criteria:**
+- Can view progress over time
+- Mastery score is accurate
+- Recommended next step is helpful
+
+**Blocked by:** Phases 1-7 (need full system working)
+
+---
+
+## Development Principles
+
+### 1. **Test Pages First**
+Every feature has a `/worksheets/debug/*` test page before production page.
+
+### 2. **One Phase at a Time**
+Complete each phase fully before starting the next. Get user approval before proceeding.
+
+### 3. **Independent Components**
+Each phase should work standalone. If Phase 5 breaks, Phases 1-4 still work.
+
+### 4. **Raw Data Visibility**
+All test pages show:
+- Raw requests
+- Raw responses
+- Parsed data
+- Validation results
+- Timing information
+
+### 5. **Manual Control**
+User can trigger every action manually from test pages. No automatic background processing until it's proven to work.
+
+### 6. **Clear Exit Criteria**
+Each phase has explicit success criteria. User must verify before moving on.
+
+## Technical Stack
+
+**Core Technologies:**
+- OpenAI GPT-5 Responses API (vision + reasoning)
+- Socket.IO for real-time updates
+- SSE for streaming progress
+- SQLite + Drizzle ORM for storage
+- Next.js App Router for UI
+
+**Key Libraries:**
+- `socket.io` / `socket.io-client` - Real-time communication
+- `eventsource-parser` (maybe) - SSE parsing if needed
+- Standard Next.js/React
+
+## Migration from V1
+
+**Files to keep:**
+- Database schema (worksheet_attempts, problem_attempts, mastery_profiles)
+- Basic OpenAI integration (non-streaming)
+
+**Files to remove/rewrite:**
+- Streaming implementation (too complex, not tested)
+- Socket progress system (built wrong order)
+- Results page (built before API worked)
+
+**Files to create:**
+- `/worksheets/debug/openai-test`
+- `/worksheets/debug/socket-test`
+- `/worksheets/debug/storage-test`
+
+## Success Metrics
+
+**After Phase 1:** User can grade a worksheet via test page
+**After Phase 4:** User can save and reload results
+**After Phase 7:** User can upload → grade → view results (full flow)
+**After Phase 8:** User can track progress over time
+
+## Timeline Estimate
+
+- Phase 1: 2-4 hours
+- Phase 2: 1-2 hours
+- Phase 3: 2-3 hours
+- Phase 4: 2-3 hours
+- Phase 5: 2-3 hours
+- Phase 6: 2-3 hours
+- Phase 7: 2-3 hours
+- Phase 8: 4-6 hours (optional)
+
+**Total:** ~15-25 hours for Phases 1-7
+
+**Key difference from V1:** Each phase is independently testable and verifiable.
+
+## Next Steps
+
+When ready to implement:
+1. User: "Start Phase 1"
+2. Claude: Builds `/worksheets/debug/openai-test` page
+3. User: Tests with real worksheets, provides feedback
+4. Iterate until Phase 1 works perfectly
+5. Move to Phase 2
+
+**Do not start Phase 2 until Phase 1 is approved by user.**
diff --git a/apps/web/.claude/WORKSHEET_GRADING_STATUS.md b/apps/web/.claude/WORKSHEET_GRADING_STATUS.md
new file mode 100644
index 00000000..651271e3
--- /dev/null
+++ b/apps/web/.claude/WORKSHEET_GRADING_STATUS.md
@@ -0,0 +1,79 @@
+# Worksheet Grading System - Current Status
+
+**Date:** 2025-11-10
+**Status:** ⚠️ INCOMPLETE - DO NOT USE
+
+## What Exists
+
+The following files/features were partially implemented but **do not work correctly**:
+
+### Database Tables
+- `worksheet_attempts` - Stores grading attempts
+- `problem_attempts` - Stores individual problem results
+- `mastery_profiles` - Tracks student progress
+- `worksheet_settings` - User preferences
+
+**Status:** Tables exist but grading logic is broken
+
+### API Routes
+- `/api/worksheets/upload` - Upload worksheet images
+- `/api/worksheets/attempts/[attemptId]` - Get grading results
+
+**Status:** Upload works, grading is broken
+
+### Library Files
+- `src/lib/ai/gradeWorksheet.ts` - OpenAI GPT-5 integration
+- `src/lib/grading/processAttempt.ts` - Grading orchestration
+- `src/lib/grading/updateMasteryProfile.ts` - Mastery tracking
+
+**Status:** Partially implemented, has bugs, incomplete
+
+### UI Pages
+- `/worksheets/attempts/[attemptId]` - View results
+
+**Status:** UI exists but backend doesn't work
+
+## What's Broken
+
+1. **OpenAI Response Parsing** - Wrong output index, JSON parsing issues
+2. **Streaming Progress** - Event parsing bugs, connection issues
+3. **Socket.IO Integration** - Path configuration, event handling
+4. **No Testing Infrastructure** - No way to test components independently
+5. **No Debug UI** - No visibility into what's happening
+
+## Why It Failed
+
+**Built too much at once without incremental testing.**
+
+See `WORKSHEET_GRADING_POSTMORTEM.md` for detailed analysis.
+
+## Next Steps
+
+**When ready to tackle this again:**
+
+1. Read `WORKSHEET_GRADING_SPEC_V2.md`
+2. Start with Phase 1: Build `/worksheets/debug/openai-test`
+3. Get that working perfectly with user feedback
+4. Only then move to Phase 2
+
+**Do not attempt to fix the existing implementation.** Start fresh following the new spec.
+
+## Files to Reference
+
+- `WORKSHEET_GRADING_POSTMORTEM.md` - What went wrong and why
+- `WORKSHEET_GRADING_SPEC_V2.md` - How to build it correctly next time
+- `WORKSHEET_GRADING_STATUS.md` - This file (current status)
+
+## Migrations to Keep
+
+Migrations 0017-0020 created the worksheet tables. These can stay but the application logic needs to be rebuilt from scratch following the new approach.
+
+## Recommendation
+
+**Leave the existing code in place** but don't use it. When ready to implement:
+1. Build test pages first (in `/worksheets/debug/`)
+2. Get each piece working independently
+3. Integrate only after all pieces work
+4. Replace the broken production pages
+
+This way we keep the database schema but rebuild the logic correctly.
diff --git a/apps/web/.claude/settings.local.json b/apps/web/.claude/settings.local.json
index 8a29869d..3713de7a 100644
--- a/apps/web/.claude/settings.local.json
+++ b/apps/web/.claude/settings.local.json
@@ -17,7 +17,26 @@
       "WebFetch(domain:platform.openai.com)",
       "Bash(git rev-parse:*)",
       "Bash(npx drizzle-kit:*)",
-      "Bash(npm run db:migrate:*)"
+      "Bash(npm run db:migrate:*)",
+      "Bash(ssh:*)",
+      "Bash(git log:*)",
+      "Bash(gh run list:*)",
+      "Bash(gh api:*)",
+      "Bash(curl:*)",
+      "Bash(gh run view:*)",
+      "Bash(npm install:*)",
+      "Bash(pnpm add:*)",
+      "WebFetch(domain:www.dynamsoft.com)",
+      "Bash(npm run format:*)",
+      "Bash(npm run lint:fix:*)",
+      "Bash(npm run lint)",
+      "Bash(find:*)",
+      "Bash(for i in {0..10})",
+      "Bash(do echo \"=== Checking stash@{$i} ===\")",
+      "Bash(done)",
+      "mcp__sqlite__list_tables",
+      "mcp__sqlite__describe_table",
+      "Bash(npm test:*)"
     ],
     "deny": [],
     "ask": []
diff --git a/apps/web/.storybook/main.ts b/apps/web/.storybook/main.ts
index 5bf8314a..b656de81 100644
--- a/apps/web/.storybook/main.ts
+++ b/apps/web/.storybook/main.ts
@@ -1,29 +1,29 @@
-import type { StorybookConfig } from "@storybook/nextjs";
+import type { StorybookConfig } from '@storybook/nextjs'
 
-import { dirname, join } 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.
  */
 function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, "package.json")));
+  return dirname(require.resolve(join(value, 'package.json')))
 }
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    getAbsolutePath("@storybook/addon-docs"),
-    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-onboarding'),
   ],
   framework: {
-    name: getAbsolutePath("@storybook/nextjs"),
+    name: getAbsolutePath('@storybook/nextjs'),
     options: {
-      nextConfigPath: "../next.config.js",
+      nextConfigPath: '../next.config.js',
     },
   },
-  staticDirs: ["../public"],
+  staticDirs: ['../public'],
   typescript: {
-    reactDocgen: "react-docgen-typescript",
+    reactDocgen: 'react-docgen-typescript',
   },
   webpackFinal: async (config) => {
     // Handle PandaCSS styled-system imports
@@ -31,25 +31,13 @@ const config: StorybookConfig = {
       config.resolve.alias = {
         ...config.resolve.alias,
         // Map styled-system imports to the actual directory
-        "../../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/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'),
+      }
     }
-    return config;
+    return config
   },
-};
-export default config;
+}
+export default config
diff --git a/apps/web/.storybook/preview.ts b/apps/web/.storybook/preview.ts
index 9a0a464d..2823e176 100644
--- a/apps/web/.storybook/preview.ts
+++ b/apps/web/.storybook/preview.ts
@@ -1,5 +1,5 @@
-import type { Preview } from "@storybook/nextjs";
-import "../styled-system/styles.css";
+import type { Preview } from '@storybook/nextjs'
+import '../styled-system/styles.css'
 
 const preview: Preview = {
   parameters: {
@@ -10,6 +10,6 @@ const preview: Preview = {
       },
     },
   },
-};
+}
 
-export default preview;
+export default preview
diff --git a/apps/web/__tests__/api-abacus-settings.e2e.test.ts b/apps/web/__tests__/api-abacus-settings.e2e.test.ts
index 74d6a2de..eac66291 100644
--- 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 { eq } from "drizzle-orm";
-import { afterEach, beforeEach, describe, expect, it } 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
@@ -12,155 +12,152 @@ import { db, schema } from "../src/db";
  * These tests verify the abacus-settings API endpoints work correctly.
  */
 
-describe("Abacus Settings API", () => {
-  let testUserId: string;
-  let testGuestId: string;
+describe('Abacus Settings API', () => {
+  let testUserId: string
+  let testGuestId: string
 
   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();
-    testUserId = user.id;
-  });
+    testGuestId = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
+    const [user] = await db.insert(schema.users).values({ guestId: testGuestId }).returning()
+    testUserId = user.id
+  })
 
   afterEach(async () => {
     // Clean up: delete test user (cascade deletes settings)
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId));
-  });
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId))
+  })
 
-  describe("GET /api/abacus-settings", () => {
-    it("creates settings with defaults if none exist", async () => {
+  describe('GET /api/abacus-settings', () => {
+    it('creates settings with defaults if none exist', async () => {
       const [settings] = await db
         .insert(schema.abacusSettings)
         .values({ userId: testUserId })
-        .returning();
+        .returning()
 
-      expect(settings).toBeDefined();
-      expect(settings.colorScheme).toBe("place-value");
-      expect(settings.beadShape).toBe("diamond");
-      expect(settings.colorPalette).toBe("default");
-      expect(settings.hideInactiveBeads).toBe(false);
-      expect(settings.coloredNumerals).toBe(false);
-      expect(settings.scaleFactor).toBe(1.0);
-      expect(settings.showNumbers).toBe(true);
-      expect(settings.animated).toBe(true);
-      expect(settings.interactive).toBe(false);
-      expect(settings.gestures).toBe(false);
-      expect(settings.soundEnabled).toBe(true);
-      expect(settings.soundVolume).toBe(0.8);
-    });
+      expect(settings).toBeDefined()
+      expect(settings.colorScheme).toBe('place-value')
+      expect(settings.beadShape).toBe('diamond')
+      expect(settings.colorPalette).toBe('default')
+      expect(settings.hideInactiveBeads).toBe(false)
+      expect(settings.coloredNumerals).toBe(false)
+      expect(settings.scaleFactor).toBe(1.0)
+      expect(settings.showNumbers).toBe(true)
+      expect(settings.animated).toBe(true)
+      expect(settings.interactive).toBe(false)
+      expect(settings.gestures).toBe(false)
+      expect(settings.soundEnabled).toBe(true)
+      expect(settings.soundVolume).toBe(0.8)
+    })
 
-    it("returns existing settings", async () => {
+    it('returns existing settings', async () => {
       // Create settings
       await db.insert(schema.abacusSettings).values({
         userId: testUserId,
-        colorScheme: "monochrome",
-        beadShape: "circle",
+        colorScheme: 'monochrome',
+        beadShape: 'circle',
         soundEnabled: false,
         soundVolume: 0.5,
-      });
+      })
 
       const settings = await db.query.abacusSettings.findFirst({
         where: eq(schema.abacusSettings.userId, testUserId),
-      });
+      })
 
-      expect(settings).toBeDefined();
-      expect(settings?.colorScheme).toBe("monochrome");
-      expect(settings?.beadShape).toBe("circle");
-      expect(settings?.soundEnabled).toBe(false);
-      expect(settings?.soundVolume).toBe(0.5);
-    });
-  });
+      expect(settings).toBeDefined()
+      expect(settings?.colorScheme).toBe('monochrome')
+      expect(settings?.beadShape).toBe('circle')
+      expect(settings?.soundEnabled).toBe(false)
+      expect(settings?.soundVolume).toBe(0.5)
+    })
+  })
 
-  describe("PATCH /api/abacus-settings", () => {
-    it("creates new settings if none exist", async () => {
+  describe('PATCH /api/abacus-settings', () => {
+    it('creates new settings if none exist', async () => {
       const [settings] = await db
         .insert(schema.abacusSettings)
         .values({
           userId: testUserId,
           soundEnabled: false,
         })
-        .returning();
+        .returning()
 
-      expect(settings).toBeDefined();
-      expect(settings.soundEnabled).toBe(false);
-    });
+      expect(settings).toBeDefined()
+      expect(settings.soundEnabled).toBe(false)
+    })
 
-    it("updates existing settings", async () => {
+    it('updates existing settings', async () => {
       // Create initial settings
       await db.insert(schema.abacusSettings).values({
         userId: testUserId,
-        colorScheme: "place-value",
-        beadShape: "diamond",
-      });
+        colorScheme: 'place-value',
+        beadShape: 'diamond',
+      })
 
       // Update
       const [updated] = await db
         .update(schema.abacusSettings)
         .set({
-          colorScheme: "heaven-earth",
-          beadShape: "square",
+          colorScheme: 'heaven-earth',
+          beadShape: 'square',
         })
         .where(eq(schema.abacusSettings.userId, testUserId))
-        .returning();
+        .returning()
 
-      expect(updated.colorScheme).toBe("heaven-earth");
-      expect(updated.beadShape).toBe("square");
-    });
+      expect(updated.colorScheme).toBe('heaven-earth')
+      expect(updated.beadShape).toBe('square')
+    })
 
-    it("updates only provided fields", async () => {
+    it('updates only provided fields', async () => {
       // Create initial settings
       await db.insert(schema.abacusSettings).values({
         userId: testUserId,
-        colorScheme: "place-value",
+        colorScheme: 'place-value',
         soundEnabled: true,
         soundVolume: 0.8,
-      });
+      })
 
       // Update only soundEnabled
       const [updated] = await db
         .update(schema.abacusSettings)
         .set({ soundEnabled: false })
         .where(eq(schema.abacusSettings.userId, testUserId))
-        .returning();
+        .returning()
 
-      expect(updated.soundEnabled).toBe(false);
-      expect(updated.colorScheme).toBe("place-value"); // unchanged
-      expect(updated.soundVolume).toBe(0.8); // unchanged
-    });
+      expect(updated.soundEnabled).toBe(false)
+      expect(updated.colorScheme).toBe('place-value') // unchanged
+      expect(updated.soundVolume).toBe(0.8) // unchanged
+    })
 
-    it("prevents setting invalid userId via foreign key constraint", async () => {
+    it('prevents setting invalid userId via foreign key constraint', async () => {
       // Create initial settings
       await db.insert(schema.abacusSettings).values({
         userId: testUserId,
-      });
+      })
 
       // Try to update with invalid userId - should fail
       await expect(async () => {
         await db
           .update(schema.abacusSettings)
           .set({
-            userId: "HACKER_ID_INVALID",
+            userId: 'HACKER_ID_INVALID',
             soundEnabled: false,
           })
-          .where(eq(schema.abacusSettings.userId, testUserId));
-      }).rejects.toThrow();
-    });
+          .where(eq(schema.abacusSettings.userId, testUserId))
+      }).rejects.toThrow()
+    })
 
-    it("allows updating all display settings", async () => {
+    it('allows updating all display settings', async () => {
       await db.insert(schema.abacusSettings).values({
         userId: testUserId,
-      });
+      })
 
       const [updated] = await db
         .update(schema.abacusSettings)
         .set({
-          colorScheme: "alternating",
-          beadShape: "circle",
-          colorPalette: "colorblind",
+          colorScheme: 'alternating',
+          beadShape: 'circle',
+          colorPalette: 'colorblind',
           hideInactiveBeads: true,
           coloredNumerals: true,
           scaleFactor: 1.5,
@@ -172,127 +169,124 @@ describe("Abacus Settings API", () => {
           soundVolume: 0.3,
         })
         .where(eq(schema.abacusSettings.userId, testUserId))
-        .returning();
+        .returning()
 
-      expect(updated.colorScheme).toBe("alternating");
-      expect(updated.beadShape).toBe("circle");
-      expect(updated.colorPalette).toBe("colorblind");
-      expect(updated.hideInactiveBeads).toBe(true);
-      expect(updated.coloredNumerals).toBe(true);
-      expect(updated.scaleFactor).toBe(1.5);
-      expect(updated.showNumbers).toBe(false);
-      expect(updated.animated).toBe(false);
-      expect(updated.interactive).toBe(true);
-      expect(updated.gestures).toBe(true);
-      expect(updated.soundEnabled).toBe(false);
-      expect(updated.soundVolume).toBe(0.3);
-    });
-  });
+      expect(updated.colorScheme).toBe('alternating')
+      expect(updated.beadShape).toBe('circle')
+      expect(updated.colorPalette).toBe('colorblind')
+      expect(updated.hideInactiveBeads).toBe(true)
+      expect(updated.coloredNumerals).toBe(true)
+      expect(updated.scaleFactor).toBe(1.5)
+      expect(updated.showNumbers).toBe(false)
+      expect(updated.animated).toBe(false)
+      expect(updated.interactive).toBe(true)
+      expect(updated.gestures).toBe(true)
+      expect(updated.soundEnabled).toBe(false)
+      expect(updated.soundVolume).toBe(0.3)
+    })
+  })
 
-  describe("Cascade delete behavior", () => {
-    it("deletes settings when user is deleted", async () => {
+  describe('Cascade delete behavior', () => {
+    it('deletes settings when user is deleted', async () => {
       // Create settings
       await db.insert(schema.abacusSettings).values({
         userId: testUserId,
         soundEnabled: false,
-      });
+      })
 
       // Verify settings exist
       let settings = await db.query.abacusSettings.findFirst({
         where: eq(schema.abacusSettings.userId, testUserId),
-      });
-      expect(settings).toBeDefined();
+      })
+      expect(settings).toBeDefined()
 
       // Delete user
-      await db.delete(schema.users).where(eq(schema.users.id, testUserId));
+      await db.delete(schema.users).where(eq(schema.users.id, testUserId))
 
       // Verify settings are gone
       settings = await db.query.abacusSettings.findFirst({
         where: eq(schema.abacusSettings.userId, testUserId),
-      });
-      expect(settings).toBeUndefined();
-    });
-  });
+      })
+      expect(settings).toBeUndefined()
+    })
+  })
 
-  describe("Data isolation", () => {
-    it("ensures settings are isolated per user", async () => {
+  describe('Data isolation', () => {
+    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 testGuestId2 = `test-guest-2-${Date.now()}-${Math.random().toString(36).slice(2)}`
+      const [user2] = await db.insert(schema.users).values({ guestId: testGuestId2 }).returning()
 
       try {
         // Create settings for both users
         await db.insert(schema.abacusSettings).values({
           userId: testUserId,
-          colorScheme: "monochrome",
-        });
+          colorScheme: 'monochrome',
+        })
 
         await db.insert(schema.abacusSettings).values({
           userId: user2.id,
-          colorScheme: "place-value",
-        });
+          colorScheme: 'place-value',
+        })
 
         // Verify isolation
         const settings1 = await db.query.abacusSettings.findFirst({
           where: eq(schema.abacusSettings.userId, testUserId),
-        });
+        })
         const settings2 = await db.query.abacusSettings.findFirst({
           where: eq(schema.abacusSettings.userId, user2.id),
-        });
+        })
 
-        expect(settings1?.colorScheme).toBe("monochrome");
-        expect(settings2?.colorScheme).toBe("place-value");
+        expect(settings1?.colorScheme).toBe('monochrome')
+        expect(settings2?.colorScheme).toBe('place-value')
       } finally {
         // Clean up second user
-        await db.delete(schema.users).where(eq(schema.users.id, user2.id));
+        await db.delete(schema.users).where(eq(schema.users.id, user2.id))
       }
-    });
-  });
+    })
+  })
 
-  describe("Security: userId injection prevention", () => {
-    it("rejects attempts to update settings with non-existent userId", async () => {
+  describe('Security: userId injection prevention', () => {
+    it('rejects attempts to update settings with non-existent userId', async () => {
       // Create initial settings
       await db.insert(schema.abacusSettings).values({
         userId: testUserId,
         soundEnabled: true,
-      });
+      })
 
       // Attempt to inject a fake userId
       await expect(async () => {
         await db
           .update(schema.abacusSettings)
           .set({
-            userId: "HACKER_ID_NON_EXISTENT",
+            userId: 'HACKER_ID_NON_EXISTENT',
             soundEnabled: false,
           })
-          .where(eq(schema.abacusSettings.userId, testUserId));
-      }).rejects.toThrow(/FOREIGN KEY constraint failed/);
-    });
+          .where(eq(schema.abacusSettings.userId, testUserId))
+      }).rejects.toThrow(/FOREIGN KEY constraint failed/)
+    })
 
     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 victimGuestId = `victim-${Date.now()}-${Math.random().toString(36).slice(2)}`
       const [victimUser] = await db
         .insert(schema.users)
         .values({ guestId: victimGuestId })
-        .returning();
+        .returning()
 
       try {
         // Create settings for both users
         await db.insert(schema.abacusSettings).values({
           userId: testUserId,
-          colorScheme: "monochrome",
+          colorScheme: 'monochrome',
           soundEnabled: true,
-        });
+        })
 
         await db.insert(schema.abacusSettings).values({
           userId: victimUser.id,
-          colorScheme: "place-value",
+          colorScheme: 'place-value',
           soundEnabled: true,
-        });
+        })
 
         // Attacker tries to change userId to victim's ID
         // This is rejected because userId is PRIMARY KEY (UNIQUE constraint)
@@ -303,27 +297,27 @@ describe("Abacus Settings API", () => {
               userId: victimUser.id, // Trying to inject victim's ID
               soundEnabled: false,
             })
-            .where(eq(schema.abacusSettings.userId, testUserId));
-        }).rejects.toThrow(/UNIQUE constraint failed/);
+            .where(eq(schema.abacusSettings.userId, testUserId))
+        }).rejects.toThrow(/UNIQUE constraint failed/)
 
         // Verify victim's settings are unchanged
         const victimSettings = await db.query.abacusSettings.findFirst({
           where: eq(schema.abacusSettings.userId, victimUser.id),
-        });
-        expect(victimSettings?.soundEnabled).toBe(true);
-        expect(victimSettings?.colorScheme).toBe("place-value");
+        })
+        expect(victimSettings?.soundEnabled).toBe(true)
+        expect(victimSettings?.colorScheme).toBe('place-value')
       } finally {
-        await db.delete(schema.users).where(eq(schema.users.id, victimUser.id));
+        await db.delete(schema.users).where(eq(schema.users.id, victimUser.id))
       }
-    });
+    })
 
-    it("prevents creating settings for another user via userId injection", async () => {
+    it('prevents creating settings for another user via userId injection', async () => {
       // Create victim user
-      const victimGuestId = `victim-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      const victimGuestId = `victim-${Date.now()}-${Math.random().toString(36).slice(2)}`
       const [victimUser] = await db
         .insert(schema.users)
         .values({ guestId: victimGuestId })
-        .returning();
+        .returning()
 
       try {
         // Try to create settings for victim with attacker's data
@@ -333,18 +327,18 @@ describe("Abacus Settings API", () => {
           .insert(schema.abacusSettings)
           .values({
             userId: victimUser.id,
-            colorScheme: "alternating", // Attacker's preference
+            colorScheme: 'alternating', // Attacker's preference
           })
-          .returning();
+          .returning()
 
         // This test shows that at the DB level, we CAN insert for any valid userId
         // The security comes from the API layer filtering userId from request body
         // and deriving it from the session cookie instead
-        expect(maliciousSettings.userId).toBe(victimUser.id);
-        expect(maliciousSettings.colorScheme).toBe("alternating");
+        expect(maliciousSettings.userId).toBe(victimUser.id)
+        expect(maliciousSettings.colorScheme).toBe('alternating')
       } finally {
-        await db.delete(schema.users).where(eq(schema.users.id, victimUser.id));
+        await db.delete(schema.users).where(eq(schema.users.id, victimUser.id))
       }
-    });
-  });
-});
+    })
+  })
+})
diff --git a/apps/web/__tests__/api-arcade-rooms.e2e.test.ts b/apps/web/__tests__/api-arcade-rooms.e2e.test.ts
index 11a21151..04f8d469 100644
--- a/apps/web/__tests__/api-arcade-rooms.e2e.test.ts
+++ b/apps/web/__tests__/api-arcade-rooms.e2e.test.ts
@@ -2,11 +2,11 @@
  * @vitest-environment node
  */
 
-import { eq } from "drizzle-orm";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { db, schema } from "../src/db";
-import { createRoom } from "../src/lib/arcade/room-manager";
-import { addRoomMember } from "../src/lib/arcade/room-membership";
+import { eq } from 'drizzle-orm'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { db, schema } from '../src/db'
+import { createRoom } from '../src/lib/arcade/room-manager'
+import { addRoomMember } from '../src/lib/arcade/room-membership'
 
 /**
  * Arcade Rooms API E2E Tests
@@ -18,458 +18,438 @@ import { addRoomMember } from "../src/lib/arcade/room-membership";
  * - Room code lookups
  */
 
-describe("Arcade Rooms API", () => {
-  let testUserId1: string;
-  let testUserId2: string;
-  let testGuestId1: string;
-  let testGuestId2: string;
-  let testRoomId: string;
+describe('Arcade Rooms API', () => {
+  let testUserId1: string
+  let testUserId2: string
+  let testGuestId1: string
+  let testGuestId2: string
+  let testRoomId: string
 
   beforeEach(async () => {
     // Create test users
-    testGuestId1 = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-    testGuestId2 = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    testGuestId1 = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
+    testGuestId2 = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
 
-    const [user1] = await db
-      .insert(schema.users)
-      .values({ guestId: testGuestId1 })
-      .returning();
-    const [user2] = await db
-      .insert(schema.users)
-      .values({ guestId: testGuestId2 })
-      .returning();
+    const [user1] = await db.insert(schema.users).values({ guestId: testGuestId1 }).returning()
+    const [user2] = await db.insert(schema.users).values({ guestId: testGuestId2 }).returning()
 
-    testUserId1 = user1.id;
-    testUserId2 = user2.id;
-  });
+    testUserId1 = user1.id
+    testUserId2 = user2.id
+  })
 
   afterEach(async () => {
     // Clean up rooms (cascade deletes members)
     if (testRoomId) {
-      await db
-        .delete(schema.arcadeRooms)
-        .where(eq(schema.arcadeRooms.id, testRoomId));
+      await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, testRoomId))
     }
 
     // Clean up users
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId1));
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId2));
-  });
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId1))
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId2))
+  })
 
-  describe("Room Creation", () => {
-    it("creates a room with valid data", async () => {
+  describe('Room Creation', () => {
+    it('creates a room with valid data', async () => {
       const room = await createRoom({
-        name: "Test Room",
+        name: 'Test Room',
         createdBy: testGuestId1,
-        creatorName: "Test User",
-        gameName: "matching",
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: { difficulty: 6 },
-      });
+      })
 
-      testRoomId = room.id;
+      testRoomId = room.id
 
-      expect(room).toBeDefined();
-      expect(room.name).toBe("Test Room");
-      expect(room.createdBy).toBe(testGuestId1);
-      expect(room.gameName).toBe("matching");
-      expect(room.status).toBe("lobby");
-      expect(room.accessMode).toBe("open");
-      expect(room.ttlMinutes).toBe(60);
-      expect(room.code).toMatch(/^[A-Z0-9]{6}$/);
-    });
+      expect(room).toBeDefined()
+      expect(room.name).toBe('Test Room')
+      expect(room.createdBy).toBe(testGuestId1)
+      expect(room.gameName).toBe('matching')
+      expect(room.status).toBe('lobby')
+      expect(room.accessMode).toBe('open')
+      expect(room.ttlMinutes).toBe(60)
+      expect(room.code).toMatch(/^[A-Z0-9]{6}$/)
+    })
 
-    it("creates room with custom TTL", async () => {
+    it('creates room with custom TTL', async () => {
       const room = await createRoom({
-        name: "Custom TTL Room",
+        name: 'Custom TTL Room',
         createdBy: testGuestId1,
-        creatorName: "Test User",
-        gameName: "matching",
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: {},
         ttlMinutes: 120,
-      });
+      })
 
-      testRoomId = room.id;
+      testRoomId = room.id
 
-      expect(room.ttlMinutes).toBe(120);
-    });
+      expect(room.ttlMinutes).toBe(120)
+    })
 
-    it("generates unique room codes", async () => {
+    it('generates unique room codes', async () => {
       const room1 = await createRoom({
-        name: "Room 1",
+        name: 'Room 1',
         createdBy: testGuestId1,
-        creatorName: "User 1",
-        gameName: "matching",
+        creatorName: 'User 1',
+        gameName: 'matching',
         gameConfig: {},
-      });
+      })
 
       const room2 = await createRoom({
-        name: "Room 2",
+        name: 'Room 2',
         createdBy: testGuestId2,
-        creatorName: "User 2",
-        gameName: "matching",
+        creatorName: 'User 2',
+        gameName: 'matching',
         gameConfig: {},
-      });
+      })
 
       // Clean up both rooms
-      testRoomId = room1.id;
-      await db
-        .delete(schema.arcadeRooms)
-        .where(eq(schema.arcadeRooms.id, room2.id));
+      testRoomId = room1.id
+      await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, room2.id))
 
-      expect(room1.code).not.toBe(room2.code);
-    });
-  });
+      expect(room1.code).not.toBe(room2.code)
+    })
+  })
 
-  describe("Room Retrieval", () => {
+  describe('Room Retrieval', () => {
     beforeEach(async () => {
       // Create a test room
       const room = await createRoom({
-        name: "Retrieval Test Room",
+        name: 'Retrieval Test Room',
         createdBy: testGuestId1,
-        creatorName: "Test User",
-        gameName: "matching",
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: {},
-      });
-      testRoomId = room.id;
-    });
+      })
+      testRoomId = room.id
+    })
 
-    it("retrieves room by ID", async () => {
+    it('retrieves room by ID', async () => {
       const room = await db.query.arcadeRooms.findFirst({
         where: eq(schema.arcadeRooms.id, testRoomId),
-      });
+      })
 
-      expect(room).toBeDefined();
-      expect(room?.id).toBe(testRoomId);
-      expect(room?.name).toBe("Retrieval Test Room");
-    });
+      expect(room).toBeDefined()
+      expect(room?.id).toBe(testRoomId)
+      expect(room?.name).toBe('Retrieval Test Room')
+    })
 
-    it("retrieves room by code", async () => {
+    it('retrieves room by code', async () => {
       const createdRoom = await db.query.arcadeRooms.findFirst({
         where: eq(schema.arcadeRooms.id, testRoomId),
-      });
+      })
 
       const room = await db.query.arcadeRooms.findFirst({
         where: eq(schema.arcadeRooms.code, createdRoom!.code),
-      });
+      })
 
-      expect(room).toBeDefined();
-      expect(room?.id).toBe(testRoomId);
-    });
+      expect(room).toBeDefined()
+      expect(room?.id).toBe(testRoomId)
+    })
 
-    it("returns undefined for non-existent room", async () => {
+    it('returns undefined for non-existent room', async () => {
       const room = await db.query.arcadeRooms.findFirst({
-        where: eq(schema.arcadeRooms.id, "nonexistent-room-id"),
-      });
+        where: eq(schema.arcadeRooms.id, 'nonexistent-room-id'),
+      })
 
-      expect(room).toBeUndefined();
-    });
-  });
+      expect(room).toBeUndefined()
+    })
+  })
 
-  describe("Room Updates", () => {
+  describe('Room Updates', () => {
     beforeEach(async () => {
       const room = await createRoom({
-        name: "Update Test Room",
+        name: 'Update Test Room',
         createdBy: testGuestId1,
-        creatorName: "Test User",
-        gameName: "matching",
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: {},
-      });
-      testRoomId = room.id;
-    });
+      })
+      testRoomId = room.id
+    })
 
-    it("updates room name", async () => {
+    it('updates room name', async () => {
       const [updated] = await db
         .update(schema.arcadeRooms)
-        .set({ name: "Updated Name" })
+        .set({ name: 'Updated Name' })
         .where(eq(schema.arcadeRooms.id, testRoomId))
-        .returning();
+        .returning()
 
-      expect(updated.name).toBe("Updated Name");
-    });
+      expect(updated.name).toBe('Updated Name')
+    })
 
-    it("locks room", async () => {
+    it('locks room', async () => {
       const [updated] = await db
         .update(schema.arcadeRooms)
-        .set({ accessMode: "locked" })
+        .set({ accessMode: 'locked' })
         .where(eq(schema.arcadeRooms.id, testRoomId))
-        .returning();
+        .returning()
 
-      expect(updated.accessMode).toBe("locked");
-    });
+      expect(updated.accessMode).toBe('locked')
+    })
 
-    it("updates room status", async () => {
+    it('updates room status', async () => {
       const [updated] = await db
         .update(schema.arcadeRooms)
-        .set({ status: "playing" })
+        .set({ status: 'playing' })
         .where(eq(schema.arcadeRooms.id, testRoomId))
-        .returning();
+        .returning()
 
-      expect(updated.status).toBe("playing");
-    });
+      expect(updated.status).toBe('playing')
+    })
 
-    it("updates lastActivity on any change", async () => {
+    it('updates lastActivity on any change', async () => {
       const originalRoom = await db.query.arcadeRooms.findFirst({
         where: eq(schema.arcadeRooms.id, testRoomId),
-      });
+      })
 
       // Wait a bit to ensure different timestamp (at least 1 second for SQLite timestamp resolution)
-      await new Promise((resolve) => setTimeout(resolve, 1100));
+      await new Promise((resolve) => setTimeout(resolve, 1100))
 
       const [updated] = await db
         .update(schema.arcadeRooms)
-        .set({ name: "Activity Test", lastActivity: new Date() })
+        .set({ name: 'Activity Test', lastActivity: new Date() })
         .where(eq(schema.arcadeRooms.id, testRoomId))
-        .returning();
+        .returning()
 
-      expect(updated.lastActivity.getTime()).toBeGreaterThan(
-        originalRoom!.lastActivity.getTime(),
-      );
-    });
-  });
+      expect(updated.lastActivity.getTime()).toBeGreaterThan(originalRoom!.lastActivity.getTime())
+    })
+  })
 
-  describe("Room Deletion", () => {
-    it("deletes room", async () => {
+  describe('Room Deletion', () => {
+    it('deletes room', async () => {
       const room = await createRoom({
-        name: "Delete Test Room",
+        name: 'Delete Test Room',
         createdBy: testGuestId1,
-        creatorName: "Test User",
-        gameName: "matching",
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: {},
-      });
+      })
 
-      await db
-        .delete(schema.arcadeRooms)
-        .where(eq(schema.arcadeRooms.id, room.id));
+      await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, room.id))
 
       const deleted = await db.query.arcadeRooms.findFirst({
         where: eq(schema.arcadeRooms.id, room.id),
-      });
+      })
 
-      expect(deleted).toBeUndefined();
-    });
+      expect(deleted).toBeUndefined()
+    })
 
-    it("cascades delete to room members", async () => {
+    it('cascades delete to room members', async () => {
       const room = await createRoom({
-        name: "Cascade Test Room",
+        name: 'Cascade Test Room',
         createdBy: testGuestId1,
-        creatorName: "Test User",
-        gameName: "matching",
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: {},
-      });
+      })
 
       // Add member
       await addRoomMember({
         roomId: room.id,
         userId: testGuestId1,
-        displayName: "Test User",
-      });
+        displayName: 'Test User',
+      })
 
       // Verify member exists
       const membersBefore = await db.query.roomMembers.findMany({
         where: eq(schema.roomMembers.roomId, room.id),
-      });
-      expect(membersBefore).toHaveLength(1);
+      })
+      expect(membersBefore).toHaveLength(1)
 
       // Delete room
-      await db
-        .delete(schema.arcadeRooms)
-        .where(eq(schema.arcadeRooms.id, room.id));
+      await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, room.id))
 
       // Verify members deleted
       const membersAfter = await db.query.roomMembers.findMany({
         where: eq(schema.roomMembers.roomId, room.id),
-      });
-      expect(membersAfter).toHaveLength(0);
-    });
-  });
+      })
+      expect(membersAfter).toHaveLength(0)
+    })
+  })
 
-  describe("Room Members", () => {
+  describe('Room Members', () => {
     beforeEach(async () => {
       const room = await createRoom({
-        name: "Members Test Room",
+        name: 'Members Test Room',
         createdBy: testGuestId1,
-        creatorName: "Test User 1",
-        gameName: "matching",
+        creatorName: 'Test User 1',
+        gameName: 'matching',
         gameConfig: {},
-      });
-      testRoomId = room.id;
-    });
+      })
+      testRoomId = room.id
+    })
 
-    it("adds member to room", async () => {
+    it('adds member to room', async () => {
       const result = await addRoomMember({
         roomId: testRoomId,
         userId: testGuestId1,
-        displayName: "Test User 1",
+        displayName: 'Test User 1',
         isCreator: true,
-      });
+      })
 
-      expect(result.member).toBeDefined();
-      expect(result.member.roomId).toBe(testRoomId);
-      expect(result.member.userId).toBe(testGuestId1);
-      expect(result.member.displayName).toBe("Test User 1");
-      expect(result.member.isCreator).toBe(true);
-      expect(result.member.isOnline).toBe(true);
-    });
+      expect(result.member).toBeDefined()
+      expect(result.member.roomId).toBe(testRoomId)
+      expect(result.member.userId).toBe(testGuestId1)
+      expect(result.member.displayName).toBe('Test User 1')
+      expect(result.member.isCreator).toBe(true)
+      expect(result.member.isOnline).toBe(true)
+    })
 
-    it("adds multiple members to room", async () => {
+    it('adds multiple members to room', async () => {
       await addRoomMember({
         roomId: testRoomId,
         userId: testGuestId1,
-        displayName: "User 1",
-      });
+        displayName: 'User 1',
+      })
 
       await addRoomMember({
         roomId: testRoomId,
         userId: testGuestId2,
-        displayName: "User 2",
-      });
+        displayName: 'User 2',
+      })
 
       const members = await db.query.roomMembers.findMany({
         where: eq(schema.roomMembers.roomId, testRoomId),
-      });
+      })
 
-      expect(members).toHaveLength(2);
-    });
+      expect(members).toHaveLength(2)
+    })
 
-    it("updates existing member instead of creating duplicate", async () => {
+    it('updates existing member instead of creating duplicate', async () => {
       // Add member first time
       await addRoomMember({
         roomId: testRoomId,
         userId: testGuestId1,
-        displayName: "First Time",
-      });
+        displayName: 'First Time',
+      })
 
       // Add same member again
       await addRoomMember({
         roomId: testRoomId,
         userId: testGuestId1,
-        displayName: "Second Time",
-      });
+        displayName: 'Second Time',
+      })
 
       const members = await db.query.roomMembers.findMany({
         where: eq(schema.roomMembers.roomId, testRoomId),
-      });
+      })
 
       // Should still only have 1 member
-      expect(members).toHaveLength(1);
-    });
+      expect(members).toHaveLength(1)
+    })
 
-    it("removes member from room", async () => {
+    it('removes member from room', async () => {
       const result = await addRoomMember({
         roomId: testRoomId,
         userId: testGuestId1,
-        displayName: "Test User",
-      });
+        displayName: 'Test User',
+      })
 
-      await db
-        .delete(schema.roomMembers)
-        .where(eq(schema.roomMembers.id, result.member.id));
+      await db.delete(schema.roomMembers).where(eq(schema.roomMembers.id, result.member.id))
 
       const members = await db.query.roomMembers.findMany({
         where: eq(schema.roomMembers.roomId, testRoomId),
-      });
+      })
 
-      expect(members).toHaveLength(0);
-    });
+      expect(members).toHaveLength(0)
+    })
 
-    it("tracks online status", async () => {
+    it('tracks online status', async () => {
       const result = await addRoomMember({
         roomId: testRoomId,
         userId: testGuestId1,
-        displayName: "Test User",
-      });
+        displayName: 'Test User',
+      })
 
-      expect(result.member.isOnline).toBe(true);
+      expect(result.member.isOnline).toBe(true)
 
       // Set offline
       const [updated] = await db
         .update(schema.roomMembers)
         .set({ isOnline: false })
         .where(eq(schema.roomMembers.id, result.member.id))
-        .returning();
+        .returning()
 
-      expect(updated.isOnline).toBe(false);
-    });
-  });
+      expect(updated.isOnline).toBe(false)
+    })
+  })
 
-  describe("Access Control", () => {
+  describe('Access Control', () => {
     beforeEach(async () => {
       const room = await createRoom({
-        name: "Access Test Room",
+        name: 'Access Test Room',
         createdBy: testGuestId1,
-        creatorName: "Creator",
-        gameName: "matching",
+        creatorName: 'Creator',
+        gameName: 'matching',
         gameConfig: {},
-      });
-      testRoomId = room.id;
-    });
+      })
+      testRoomId = room.id
+    })
 
-    it("identifies room creator correctly", async () => {
+    it('identifies room creator correctly', async () => {
       const room = await db.query.arcadeRooms.findFirst({
         where: eq(schema.arcadeRooms.id, testRoomId),
-      });
+      })
 
-      expect(room?.createdBy).toBe(testGuestId1);
-    });
+      expect(room?.createdBy).toBe(testGuestId1)
+    })
 
-    it("distinguishes creator from other users", async () => {
+    it('distinguishes creator from other users', async () => {
       const room = await db.query.arcadeRooms.findFirst({
         where: eq(schema.arcadeRooms.id, testRoomId),
-      });
+      })
 
-      expect(room?.createdBy).not.toBe(testGuestId2);
-    });
-  });
+      expect(room?.createdBy).not.toBe(testGuestId2)
+    })
+  })
 
-  describe("Room Listing", () => {
+  describe('Room Listing', () => {
     beforeEach(async () => {
       // Create multiple test rooms
       const room1 = await createRoom({
-        name: "Matching Room",
+        name: 'Matching Room',
         createdBy: testGuestId1,
-        creatorName: "User 1",
-        gameName: "matching",
+        creatorName: 'User 1',
+        gameName: 'matching',
         gameConfig: {},
-      });
+      })
 
       const room2 = await createRoom({
-        name: "Memory Quiz Room",
+        name: 'Memory Quiz Room',
         createdBy: testGuestId2,
-        creatorName: "User 2",
-        gameName: "memory-quiz",
+        creatorName: 'User 2',
+        gameName: 'memory-quiz',
         gameConfig: {},
-      });
+      })
 
-      testRoomId = room1.id;
+      testRoomId = room1.id
 
       // Clean up room2 after test
       afterEach(async () => {
-        await db
-          .delete(schema.arcadeRooms)
-          .where(eq(schema.arcadeRooms.id, room2.id));
-      });
-    });
+        await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, room2.id))
+      })
+    })
 
-    it("lists all active rooms", async () => {
+    it('lists all active rooms', async () => {
       const rooms = await db.query.arcadeRooms.findMany({
-        where: eq(schema.arcadeRooms.status, "lobby"),
-      });
+        where: eq(schema.arcadeRooms.status, 'lobby'),
+      })
 
-      expect(rooms.length).toBeGreaterThanOrEqual(2);
-    });
+      expect(rooms.length).toBeGreaterThanOrEqual(2)
+    })
 
-    it("excludes locked rooms from listing", async () => {
+    it('excludes locked rooms from listing', async () => {
       // Lock one room
       await db
         .update(schema.arcadeRooms)
-        .set({ accessMode: "locked" })
-        .where(eq(schema.arcadeRooms.id, testRoomId));
+        .set({ accessMode: 'locked' })
+        .where(eq(schema.arcadeRooms.id, testRoomId))
 
       const openRooms = await db.query.arcadeRooms.findMany({
-        where: eq(schema.arcadeRooms.accessMode, "open"),
-      });
+        where: eq(schema.arcadeRooms.accessMode, 'open'),
+      })
 
-      expect(openRooms.every((r) => r.accessMode === "open")).toBe(true);
-    });
-  });
-});
+      expect(openRooms.every((r) => r.accessMode === 'open')).toBe(true)
+    })
+  })
+})
diff --git a/apps/web/__tests__/api-players.e2e.test.ts b/apps/web/__tests__/api-players.e2e.test.ts
index 20a3285e..bd768d67 100644
--- 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 { eq } from "drizzle-orm";
-import { afterEach, beforeEach, describe, expect, it } 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
@@ -13,33 +13,30 @@ import { db, schema } from "../src/db";
  * They use the actual database and test the full request/response cycle.
  */
 
-describe("Players API", () => {
-  let testUserId: string;
-  let testGuestId: string;
+describe('Players API', () => {
+  let testUserId: string
+  let testGuestId: string
 
   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();
-    testUserId = user.id;
-  });
+    testGuestId = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
+    const [user] = await db.insert(schema.users).values({ guestId: testGuestId }).returning()
+    testUserId = user.id
+  })
 
   afterEach(async () => {
     // Clean up: delete test user (cascade deletes players)
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId));
-  });
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId))
+  })
 
-  describe("POST /api/players", () => {
-    it("creates a player with valid data", async () => {
+  describe('POST /api/players', () => {
+    it('creates a player with valid data', async () => {
       const playerData = {
-        name: "Test Player",
-        emoji: "😀",
-        color: "#3b82f6",
+        name: 'Test Player',
+        emoji: '😀',
+        color: '#3b82f6',
         isActive: true,
-      };
+      }
 
       // Simulate creating via DB (API would do this)
       const [player] = await db
@@ -48,428 +45,422 @@ describe("Players API", () => {
           userId: testUserId,
           ...playerData,
         })
-        .returning();
+        .returning()
 
-      expect(player).toBeDefined();
-      expect(player.name).toBe(playerData.name);
-      expect(player.emoji).toBe(playerData.emoji);
-      expect(player.color).toBe(playerData.color);
-      expect(player.isActive).toBe(true);
-      expect(player.userId).toBe(testUserId);
-    });
+      expect(player).toBeDefined()
+      expect(player.name).toBe(playerData.name)
+      expect(player.emoji).toBe(playerData.emoji)
+      expect(player.color).toBe(playerData.color)
+      expect(player.isActive).toBe(true)
+      expect(player.userId).toBe(testUserId)
+    })
 
-    it("sets isActive to false by default", async () => {
+    it('sets isActive to false by default', async () => {
       const [player] = await db
         .insert(schema.players)
         .values({
           userId: testUserId,
-          name: "Inactive Player",
-          emoji: "😴",
-          color: "#999999",
+          name: 'Inactive Player',
+          emoji: '😴',
+          color: '#999999',
         })
-        .returning();
+        .returning()
 
-      expect(player.isActive).toBe(false);
-    });
-  });
+      expect(player.isActive).toBe(false)
+    })
+  })
 
-  describe("GET /api/players", () => {
-    it("returns all players for a user", async () => {
+  describe('GET /api/players', () => {
+    it('returns all players for a user', async () => {
       // Create multiple players
       await db.insert(schema.players).values([
         {
           userId: testUserId,
-          name: "Player 1",
-          emoji: "😀",
-          color: "#3b82f6",
+          name: 'Player 1',
+          emoji: '😀',
+          color: '#3b82f6',
         },
         {
           userId: testUserId,
-          name: "Player 2",
-          emoji: "😎",
-          color: "#8b5cf6",
+          name: 'Player 2',
+          emoji: '😎',
+          color: '#8b5cf6',
         },
-      ]);
+      ])
 
       const players = await db.query.players.findMany({
         where: eq(schema.players.userId, testUserId),
-      });
+      })
 
-      expect(players).toHaveLength(2);
-      expect(players[0].name).toBe("Player 1");
-      expect(players[1].name).toBe("Player 2");
-    });
+      expect(players).toHaveLength(2)
+      expect(players[0].name).toBe('Player 1')
+      expect(players[1].name).toBe('Player 2')
+    })
 
-    it("returns empty array for user with no players", async () => {
+    it('returns empty array for user with no players', async () => {
       const players = await db.query.players.findMany({
         where: eq(schema.players.userId, testUserId),
-      });
+      })
 
-      expect(players).toHaveLength(0);
-    });
-  });
+      expect(players).toHaveLength(0)
+    })
+  })
 
-  describe("PATCH /api/players/[id]", () => {
-    it("updates player fields", async () => {
+  describe('PATCH /api/players/[id]', () => {
+    it('updates player fields', async () => {
       const [player] = await db
         .insert(schema.players)
         .values({
           userId: testUserId,
-          name: "Original Name",
-          emoji: "😀",
-          color: "#3b82f6",
+          name: 'Original Name',
+          emoji: '😀',
+          color: '#3b82f6',
         })
-        .returning();
+        .returning()
 
       const [updated] = await db
         .update(schema.players)
         .set({
-          name: "Updated Name",
-          emoji: "🎉",
+          name: 'Updated Name',
+          emoji: '🎉',
         })
         .where(eq(schema.players.id, player.id))
-        .returning();
+        .returning()
 
-      expect(updated.name).toBe("Updated Name");
-      expect(updated.emoji).toBe("🎉");
-      expect(updated.color).toBe("#3b82f6"); // unchanged
-    });
+      expect(updated.name).toBe('Updated Name')
+      expect(updated.emoji).toBe('🎉')
+      expect(updated.color).toBe('#3b82f6') // unchanged
+    })
 
-    it("toggles isActive status", async () => {
+    it('toggles isActive status', async () => {
       const [player] = await db
         .insert(schema.players)
         .values({
           userId: testUserId,
-          name: "Test Player",
-          emoji: "😀",
-          color: "#3b82f6",
+          name: 'Test Player',
+          emoji: '😀',
+          color: '#3b82f6',
           isActive: false,
         })
-        .returning();
+        .returning()
 
       const [updated] = await db
         .update(schema.players)
         .set({ isActive: true })
         .where(eq(schema.players.id, player.id))
-        .returning();
+        .returning()
 
-      expect(updated.isActive).toBe(true);
-    });
-  });
+      expect(updated.isActive).toBe(true)
+    })
+  })
 
-  describe("DELETE /api/players/[id]", () => {
-    it("deletes a player", async () => {
+  describe('DELETE /api/players/[id]', () => {
+    it('deletes a player', async () => {
       const [player] = await db
         .insert(schema.players)
         .values({
           userId: testUserId,
-          name: "To Delete",
-          emoji: "👋",
-          color: "#ef4444",
+          name: 'To Delete',
+          emoji: '👋',
+          color: '#ef4444',
         })
-        .returning();
+        .returning()
 
       const [deleted] = await db
         .delete(schema.players)
         .where(eq(schema.players.id, player.id))
-        .returning();
+        .returning()
 
-      expect(deleted).toBeDefined();
-      expect(deleted.id).toBe(player.id);
+      expect(deleted).toBeDefined()
+      expect(deleted.id).toBe(player.id)
 
       // Verify it's gone
       const found = await db.query.players.findFirst({
         where: eq(schema.players.id, player.id),
-      });
-      expect(found).toBeUndefined();
-    });
-  });
+      })
+      expect(found).toBeUndefined()
+    })
+  })
 
-  describe("Cascade delete behavior", () => {
-    it("deletes players when user is deleted", async () => {
+  describe('Cascade delete behavior', () => {
+    it('deletes players when user is deleted', async () => {
       // Create players
       await db.insert(schema.players).values([
         {
           userId: testUserId,
-          name: "Player 1",
-          emoji: "😀",
-          color: "#3b82f6",
+          name: 'Player 1',
+          emoji: '😀',
+          color: '#3b82f6',
         },
         {
           userId: testUserId,
-          name: "Player 2",
-          emoji: "😎",
-          color: "#8b5cf6",
+          name: 'Player 2',
+          emoji: '😎',
+          color: '#8b5cf6',
         },
-      ]);
+      ])
 
       // Verify players exist
       let players = await db.query.players.findMany({
         where: eq(schema.players.userId, testUserId),
-      });
-      expect(players).toHaveLength(2);
+      })
+      expect(players).toHaveLength(2)
 
       // Delete user
-      await db.delete(schema.users).where(eq(schema.users.id, testUserId));
+      await db.delete(schema.users).where(eq(schema.users.id, testUserId))
 
       // Verify players are gone
       players = await db.query.players.findMany({
         where: eq(schema.players.userId, testUserId),
-      });
-      expect(players).toHaveLength(0);
-    });
-  });
+      })
+      expect(players).toHaveLength(0)
+    })
+  })
 
-  describe("Arcade Session: isActive Modification Restrictions", () => {
-    it("prevents isActive changes when user has an active arcade session", async () => {
+  describe('Arcade Session: isActive Modification Restrictions', () => {
+    it('prevents isActive changes when user has an active arcade session', async () => {
       // Create a player
       const [player] = await db
         .insert(schema.players)
         .values({
           userId: testUserId,
-          name: "Test Player",
-          emoji: "😀",
-          color: "#3b82f6",
+          name: 'Test Player',
+          emoji: '😀',
+          color: '#3b82f6',
           isActive: false,
         })
-        .returning();
+        .returning()
 
       // Create a test room for the session
       const [testRoom] = await db
         .insert(schema.arcadeRooms)
         .values({
           code: `TEST-${Date.now()}`,
-          name: "Test Room",
-          gameName: "matching",
+          name: 'Test Room',
+          gameName: 'matching',
           gameConfig: JSON.stringify({}),
-          status: "lobby",
+          status: 'lobby',
           createdBy: testUserId,
-          creatorName: "Test User",
+          creatorName: 'Test User',
           ttlMinutes: 60,
           createdAt: new Date(),
         })
-        .returning();
+        .returning()
 
       // Create an active arcade session
-      const now = new Date();
+      const now = new Date()
       await db.insert(schema.arcadeSessions).values({
         roomId: testRoom.id,
         userId: testUserId,
-        currentGame: "matching",
-        gameUrl: "/arcade/matching",
+        currentGame: 'matching',
+        gameUrl: '/arcade/matching',
         gameState: JSON.stringify({}),
         activePlayers: JSON.stringify([player.id]),
         startedAt: now,
         lastActivityAt: now,
         expiresAt: new Date(now.getTime() + 3600000), // 1 hour from now
         version: 1,
-      });
+      })
 
       // Attempt to update isActive should be prevented at API level
       // This test validates the logic that the API route implements
       const activeSession = await db.query.arcadeSessions.findFirst({
         where: eq(schema.arcadeSessions.roomId, testRoom.id),
-      });
+      })
 
-      expect(activeSession).toBeDefined();
-      expect(activeSession?.currentGame).toBe("matching");
+      expect(activeSession).toBeDefined()
+      expect(activeSession?.currentGame).toBe('matching')
 
       // Clean up session
-      await db
-        .delete(schema.arcadeSessions)
-        .where(eq(schema.arcadeSessions.roomId, testRoom.id));
-    });
+      await db.delete(schema.arcadeSessions).where(eq(schema.arcadeSessions.roomId, testRoom.id))
+    })
 
-    it("allows isActive changes when user has no active arcade session", async () => {
+    it('allows isActive changes when user has no active arcade session', async () => {
       // Create a player
       const [player] = await db
         .insert(schema.players)
         .values({
           userId: testUserId,
-          name: "Test Player",
-          emoji: "😀",
-          color: "#3b82f6",
+          name: 'Test Player',
+          emoji: '😀',
+          color: '#3b82f6',
           isActive: false,
         })
-        .returning();
+        .returning()
 
       // Verify no active session for this user
       const activeSession = await db.query.arcadeSessions.findFirst({
         where: eq(schema.arcadeSessions.userId, testUserId),
-      });
+      })
 
-      expect(activeSession).toBeUndefined();
+      expect(activeSession).toBeUndefined()
 
       // Should be able to update isActive
       const [updated] = await db
         .update(schema.players)
         .set({ isActive: true })
         .where(eq(schema.players.id, player.id))
-        .returning();
+        .returning()
 
-      expect(updated.isActive).toBe(true);
-    });
+      expect(updated.isActive).toBe(true)
+    })
 
-    it("allows non-isActive changes even with active session", async () => {
+    it('allows non-isActive changes even with active session', async () => {
       // Create a player
       const [player] = await db
         .insert(schema.players)
         .values({
           userId: testUserId,
-          name: "Test Player",
-          emoji: "😀",
-          color: "#3b82f6",
+          name: 'Test Player',
+          emoji: '😀',
+          color: '#3b82f6',
           isActive: true,
         })
-        .returning();
+        .returning()
 
       // Create a test room for the session
       const [testRoom] = await db
         .insert(schema.arcadeRooms)
         .values({
           code: `TEST-${Date.now()}`,
-          name: "Test Room",
-          gameName: "matching",
+          name: 'Test Room',
+          gameName: 'matching',
           gameConfig: JSON.stringify({}),
-          status: "lobby",
+          status: 'lobby',
           createdBy: testUserId,
-          creatorName: "Test User",
+          creatorName: 'Test User',
           ttlMinutes: 60,
           createdAt: new Date(),
         })
-        .returning();
+        .returning()
 
       // Create an active arcade session
-      const now = new Date();
+      const now = new Date()
       await db.insert(schema.arcadeSessions).values({
         roomId: testRoom.id,
         userId: testUserId,
-        currentGame: "matching",
-        gameUrl: "/arcade/matching",
+        currentGame: 'matching',
+        gameUrl: '/arcade/matching',
         gameState: JSON.stringify({}),
         activePlayers: JSON.stringify([player.id]),
         startedAt: now,
         lastActivityAt: now,
         expiresAt: new Date(now.getTime() + 3600000), // 1 hour from now
         version: 1,
-      });
+      })
 
       try {
         // Should be able to update name, emoji, color (non-isActive fields)
         const [updated] = await db
           .update(schema.players)
           .set({
-            name: "Updated Name",
-            emoji: "🎉",
-            color: "#ff0000",
+            name: 'Updated Name',
+            emoji: '🎉',
+            color: '#ff0000',
           })
           .where(eq(schema.players.id, player.id))
-          .returning();
+          .returning()
 
-        expect(updated.name).toBe("Updated Name");
-        expect(updated.emoji).toBe("🎉");
-        expect(updated.color).toBe("#ff0000");
-        expect(updated.isActive).toBe(true); // Unchanged
+        expect(updated.name).toBe('Updated Name')
+        expect(updated.emoji).toBe('🎉')
+        expect(updated.color).toBe('#ff0000')
+        expect(updated.isActive).toBe(true) // Unchanged
       } finally {
         // Clean up session
-        await db
-          .delete(schema.arcadeSessions)
-          .where(eq(schema.arcadeSessions.roomId, testRoom.id));
+        await db.delete(schema.arcadeSessions).where(eq(schema.arcadeSessions.roomId, testRoom.id))
       }
-    });
+    })
 
-    it("session ends, then isActive changes are allowed again", async () => {
+    it('session ends, then isActive changes are allowed again', async () => {
       // Create a player
       const [player] = await db
         .insert(schema.players)
         .values({
           userId: testUserId,
-          name: "Test Player",
-          emoji: "😀",
-          color: "#3b82f6",
+          name: 'Test Player',
+          emoji: '😀',
+          color: '#3b82f6',
           isActive: true,
         })
-        .returning();
+        .returning()
 
       // Create a test room for the session
       const [testRoom] = await db
         .insert(schema.arcadeRooms)
         .values({
           code: `TEST-${Date.now()}`,
-          name: "Test Room",
-          gameName: "matching",
+          name: 'Test Room',
+          gameName: 'matching',
           gameConfig: JSON.stringify({}),
-          status: "lobby",
+          status: 'lobby',
           createdBy: testUserId,
-          creatorName: "Test User",
+          creatorName: 'Test User',
           ttlMinutes: 60,
           createdAt: new Date(),
         })
-        .returning();
+        .returning()
 
       // Create an active arcade session
-      const now = new Date();
+      const now = new Date()
       await db.insert(schema.arcadeSessions).values({
         roomId: testRoom.id,
         userId: testUserId,
-        currentGame: "matching",
-        gameUrl: "/arcade/matching",
+        currentGame: 'matching',
+        gameUrl: '/arcade/matching',
         gameState: JSON.stringify({}),
         activePlayers: JSON.stringify([player.id]),
         startedAt: now,
         lastActivityAt: now,
         expiresAt: new Date(now.getTime() + 3600000), // 1 hour from now
         version: 1,
-      });
+      })
 
       // Verify session exists
       let activeSession = await db.query.arcadeSessions.findFirst({
         where: eq(schema.arcadeSessions.roomId, testRoom.id),
-      });
-      expect(activeSession).toBeDefined();
+      })
+      expect(activeSession).toBeDefined()
 
       // End the session
-      await db
-        .delete(schema.arcadeSessions)
-        .where(eq(schema.arcadeSessions.roomId, testRoom.id));
+      await db.delete(schema.arcadeSessions).where(eq(schema.arcadeSessions.roomId, testRoom.id))
 
       // Verify session is gone
       activeSession = await db.query.arcadeSessions.findFirst({
         where: eq(schema.arcadeSessions.roomId, testRoom.id),
-      });
-      expect(activeSession).toBeUndefined();
+      })
+      expect(activeSession).toBeUndefined()
 
       // Now should be able to update isActive
       const [updated] = await db
         .update(schema.players)
         .set({ isActive: false })
         .where(eq(schema.players.id, player.id))
-        .returning();
+        .returning()
 
-      expect(updated.isActive).toBe(false);
-    });
-  });
+      expect(updated.isActive).toBe(false)
+    })
+  })
 
-  describe("Security: userId injection prevention", () => {
-    it("rejects creating player with non-existent userId", async () => {
+  describe('Security: userId injection prevention', () => {
+    it('rejects creating player with non-existent userId', async () => {
       // Attempt to create a player with a fake userId
       await expect(async () => {
         await db.insert(schema.players).values({
-          userId: "HACKER_ID_NON_EXISTENT",
-          name: "Hacker Player",
-          emoji: "🦹",
-          color: "#ff0000",
-        });
-      }).rejects.toThrow(/FOREIGN KEY constraint failed/);
-    });
+          userId: 'HACKER_ID_NON_EXISTENT',
+          name: 'Hacker Player',
+          emoji: '🦹',
+          color: '#ff0000',
+        })
+      }).rejects.toThrow(/FOREIGN KEY constraint failed/)
+    })
 
     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 victimGuestId = `victim-${Date.now()}-${Math.random().toString(36).slice(2)}`
       const [victimUser] = await db
         .insert(schema.users)
         .values({ guestId: victimGuestId })
-        .returning();
+        .returning()
 
       try {
         // Create attacker's player
@@ -477,22 +468,22 @@ describe("Players API", () => {
           .insert(schema.players)
           .values({
             userId: testUserId,
-            name: "Attacker Player",
-            emoji: "😈",
-            color: "#ff0000",
+            name: 'Attacker Player',
+            emoji: '😈',
+            color: '#ff0000',
           })
-          .returning();
+          .returning()
 
         const [_victimPlayer] = await db
           .insert(schema.players)
           .values({
             userId: victimUser.id,
-            name: "Victim Player",
-            emoji: "👤",
-            color: "#00ff00",
+            name: 'Victim Player',
+            emoji: '👤',
+            color: '#00ff00',
             isActive: true,
           })
-          .returning();
+          .returning()
 
         // IMPORTANT: At the DB level, changing userId to another valid userId SUCCEEDS
         // This is why API layer MUST filter userId from request body!
@@ -500,64 +491,61 @@ describe("Players API", () => {
           .update(schema.players)
           .set({
             userId: victimUser.id, // This WILL succeed at DB level!
-            name: "Stolen Player",
+            name: 'Stolen Player',
           })
           .where(eq(schema.players.id, attackerPlayer.id))
-          .returning();
+          .returning()
 
         // The update succeeded - the player now belongs to victim!
-        expect(updated.userId).toBe(victimUser.id);
-        expect(updated.name).toBe("Stolen Player");
+        expect(updated.userId).toBe(victimUser.id)
+        expect(updated.name).toBe('Stolen Player')
 
         // This test demonstrates why the API route MUST:
         // 1. Strip userId from request body
         // 2. Derive userId from session cookie
         // 3. Use WHERE clause to scope updates to current user's data only
       } finally {
-        await db.delete(schema.users).where(eq(schema.users.id, victimUser.id));
+        await db.delete(schema.users).where(eq(schema.users.id, victimUser.id))
       }
-    });
+    })
 
-    it("ensures players are isolated per user", async () => {
+    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 user2GuestId = `user2-${Date.now()}-${Math.random().toString(36).slice(2)}`
+      const [user2] = await db.insert(schema.users).values({ guestId: user2GuestId }).returning()
 
       try {
         // Create players for both users
         await db.insert(schema.players).values({
           userId: testUserId,
-          name: "User 1 Player",
-          emoji: "🎮",
-          color: "#0000ff",
-        });
+          name: 'User 1 Player',
+          emoji: '🎮',
+          color: '#0000ff',
+        })
 
         await db.insert(schema.players).values({
           userId: user2.id,
-          name: "User 2 Player",
-          emoji: "🎯",
-          color: "#ff00ff",
-        });
+          name: 'User 2 Player',
+          emoji: '🎯',
+          color: '#ff00ff',
+        })
 
         // Verify each user only sees their own players
         const user1Players = await db.query.players.findMany({
           where: eq(schema.players.userId, testUserId),
-        });
+        })
         const user2Players = await db.query.players.findMany({
           where: eq(schema.players.userId, user2.id),
-        });
+        })
 
-        expect(user1Players).toHaveLength(1);
-        expect(user1Players[0].name).toBe("User 1 Player");
+        expect(user1Players).toHaveLength(1)
+        expect(user1Players[0].name).toBe('User 1 Player')
 
-        expect(user2Players).toHaveLength(1);
-        expect(user2Players[0].name).toBe("User 2 Player");
+        expect(user2Players).toHaveLength(1)
+        expect(user2Players[0].name).toBe('User 2 Player')
       } finally {
-        await db.delete(schema.users).where(eq(schema.users.id, user2.id));
+        await db.delete(schema.users).where(eq(schema.users.id, user2.id))
       }
-    });
-  });
-});
+    })
+  })
+})
diff --git a/apps/web/__tests__/api-user-stats.e2e.test.ts b/apps/web/__tests__/api-user-stats.e2e.test.ts
index 423a1536..56add776 100644
--- 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 { eq } from "drizzle-orm";
-import { afterEach, beforeEach, describe, expect, it } 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
@@ -12,66 +12,60 @@ import { db, schema } from "../src/db";
  * These tests verify the user-stats API endpoints work correctly.
  */
 
-describe("User Stats API", () => {
-  let testUserId: string;
-  let testGuestId: string;
+describe('User Stats API', () => {
+  let testUserId: string
+  let testGuestId: string
 
   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();
-    testUserId = user.id;
-  });
+    testGuestId = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
+    const [user] = await db.insert(schema.users).values({ guestId: testGuestId }).returning()
+    testUserId = user.id
+  })
 
   afterEach(async () => {
     // Clean up: delete test user (cascade deletes stats)
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId));
-  });
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId))
+  })
 
-  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();
+  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()
 
-      expect(stats).toBeDefined();
-      expect(stats.gamesPlayed).toBe(0);
-      expect(stats.totalWins).toBe(0);
-      expect(stats.favoriteGameType).toBeNull();
-      expect(stats.bestTime).toBeNull();
-      expect(stats.highestAccuracy).toBe(0);
-    });
+      expect(stats).toBeDefined()
+      expect(stats.gamesPlayed).toBe(0)
+      expect(stats.totalWins).toBe(0)
+      expect(stats.favoriteGameType).toBeNull()
+      expect(stats.bestTime).toBeNull()
+      expect(stats.highestAccuracy).toBe(0)
+    })
 
-    it("returns existing stats", async () => {
+    it('returns existing stats', async () => {
       // Create stats
       await db.insert(schema.userStats).values({
         userId: testUserId,
         gamesPlayed: 10,
         totalWins: 7,
-        favoriteGameType: "abacus-numeral",
+        favoriteGameType: 'abacus-numeral',
         bestTime: 5000,
         highestAccuracy: 0.95,
-      });
+      })
 
       const stats = await db.query.userStats.findFirst({
         where: eq(schema.userStats.userId, testUserId),
-      });
+      })
 
-      expect(stats).toBeDefined();
-      expect(stats?.gamesPlayed).toBe(10);
-      expect(stats?.totalWins).toBe(7);
-      expect(stats?.favoriteGameType).toBe("abacus-numeral");
-      expect(stats?.bestTime).toBe(5000);
-      expect(stats?.highestAccuracy).toBe(0.95);
-    });
-  });
+      expect(stats).toBeDefined()
+      expect(stats?.gamesPlayed).toBe(10)
+      expect(stats?.totalWins).toBe(7)
+      expect(stats?.favoriteGameType).toBe('abacus-numeral')
+      expect(stats?.bestTime).toBe(5000)
+      expect(stats?.highestAccuracy).toBe(0.95)
+    })
+  })
 
-  describe("PATCH /api/user-stats", () => {
-    it("creates new stats if none exist", async () => {
+  describe('PATCH /api/user-stats', () => {
+    it('creates new stats if none exist', async () => {
       const [stats] = await db
         .insert(schema.userStats)
         .values({
@@ -79,20 +73,20 @@ describe("User Stats API", () => {
           gamesPlayed: 1,
           totalWins: 1,
         })
-        .returning();
+        .returning()
 
-      expect(stats).toBeDefined();
-      expect(stats.gamesPlayed).toBe(1);
-      expect(stats.totalWins).toBe(1);
-    });
+      expect(stats).toBeDefined()
+      expect(stats.gamesPlayed).toBe(1)
+      expect(stats.totalWins).toBe(1)
+    })
 
-    it("updates existing stats", async () => {
+    it('updates existing stats', async () => {
       // Create initial stats
       await db.insert(schema.userStats).values({
         userId: testUserId,
         gamesPlayed: 5,
         totalWins: 3,
-      });
+      })
 
       // Update
       const [updated] = await db
@@ -100,55 +94,55 @@ describe("User Stats API", () => {
         .set({
           gamesPlayed: 6,
           totalWins: 4,
-          favoriteGameType: "complement-pairs",
+          favoriteGameType: 'complement-pairs',
         })
         .where(eq(schema.userStats.userId, testUserId))
-        .returning();
+        .returning()
 
-      expect(updated.gamesPlayed).toBe(6);
-      expect(updated.totalWins).toBe(4);
-      expect(updated.favoriteGameType).toBe("complement-pairs");
-    });
+      expect(updated.gamesPlayed).toBe(6)
+      expect(updated.totalWins).toBe(4)
+      expect(updated.favoriteGameType).toBe('complement-pairs')
+    })
 
-    it("updates only provided fields", async () => {
+    it('updates only provided fields', async () => {
       // Create initial stats
       await db.insert(schema.userStats).values({
         userId: testUserId,
         gamesPlayed: 10,
         totalWins: 5,
         bestTime: 3000,
-      });
+      })
 
       // Update only gamesPlayed
       const [updated] = await db
         .update(schema.userStats)
         .set({ gamesPlayed: 11 })
         .where(eq(schema.userStats.userId, testUserId))
-        .returning();
+        .returning()
 
-      expect(updated.gamesPlayed).toBe(11);
-      expect(updated.totalWins).toBe(5); // unchanged
-      expect(updated.bestTime).toBe(3000); // unchanged
-    });
+      expect(updated.gamesPlayed).toBe(11)
+      expect(updated.totalWins).toBe(5) // unchanged
+      expect(updated.bestTime).toBe(3000) // unchanged
+    })
 
-    it("allows setting favoriteGameType", async () => {
+    it('allows setting favoriteGameType', async () => {
       await db.insert(schema.userStats).values({
         userId: testUserId,
-      });
+      })
 
       const [updated] = await db
         .update(schema.userStats)
-        .set({ favoriteGameType: "abacus-numeral" })
+        .set({ favoriteGameType: 'abacus-numeral' })
         .where(eq(schema.userStats.userId, testUserId))
-        .returning();
+        .returning()
 
-      expect(updated.favoriteGameType).toBe("abacus-numeral");
-    });
+      expect(updated.favoriteGameType).toBe('abacus-numeral')
+    })
 
-    it("allows setting bestTime and highestAccuracy", async () => {
+    it('allows setting bestTime and highestAccuracy', async () => {
       await db.insert(schema.userStats).values({
         userId: testUserId,
-      });
+      })
 
       const [updated] = await db
         .update(schema.userStats)
@@ -157,36 +151,36 @@ describe("User Stats API", () => {
           highestAccuracy: 0.98,
         })
         .where(eq(schema.userStats.userId, testUserId))
-        .returning();
+        .returning()
 
-      expect(updated.bestTime).toBe(2500);
-      expect(updated.highestAccuracy).toBe(0.98);
-    });
-  });
+      expect(updated.bestTime).toBe(2500)
+      expect(updated.highestAccuracy).toBe(0.98)
+    })
+  })
 
-  describe("Cascade delete behavior", () => {
-    it("deletes stats when user is deleted", async () => {
+  describe('Cascade delete behavior', () => {
+    it('deletes stats when user is deleted', async () => {
       // Create stats
       await db.insert(schema.userStats).values({
         userId: testUserId,
         gamesPlayed: 10,
         totalWins: 5,
-      });
+      })
 
       // Verify stats exist
       let stats = await db.query.userStats.findFirst({
         where: eq(schema.userStats.userId, testUserId),
-      });
-      expect(stats).toBeDefined();
+      })
+      expect(stats).toBeDefined()
 
       // Delete user
-      await db.delete(schema.users).where(eq(schema.users.id, testUserId));
+      await db.delete(schema.users).where(eq(schema.users.id, testUserId))
 
       // Verify stats are gone
       stats = await db.query.userStats.findFirst({
         where: eq(schema.userStats.userId, testUserId),
-      });
-      expect(stats).toBeUndefined();
-    });
-  });
-});
+      })
+      expect(stats).toBeUndefined()
+    })
+  })
+})
diff --git a/apps/web/__tests__/join-invitation-acceptance.e2e.test.ts b/apps/web/__tests__/join-invitation-acceptance.e2e.test.ts
index 71616ba0..c0cc5760 100644
--- a/apps/web/__tests__/join-invitation-acceptance.e2e.test.ts
+++ b/apps/web/__tests__/join-invitation-acceptance.e2e.test.ts
@@ -2,15 +2,12 @@
  * @vitest-environment node
  */
 
-import { eq } from "drizzle-orm";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { db, schema } from "../src/db";
-import { createRoom } from "../src/lib/arcade/room-manager";
-import {
-  createInvitation,
-  getInvitation,
-} from "../src/lib/arcade/room-invitations";
-import { addRoomMember } from "../src/lib/arcade/room-membership";
+import { eq } from 'drizzle-orm'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { db, schema } from '../src/db'
+import { createRoom } from '../src/lib/arcade/room-manager'
+import { createInvitation, getInvitation } from '../src/lib/arcade/room-invitations'
+import { addRoomMember } from '../src/lib/arcade/room-membership'
 
 /**
  * Join Flow with Invitation Acceptance E2E Tests
@@ -23,440 +20,418 @@ import { addRoomMember } from "../src/lib/arcade/room-membership";
  * Regression test for the bug where invitations stayed "pending" forever.
  */
 
-describe("Join Flow: Invitation Acceptance", () => {
-  let hostUserId: string;
-  let guestUserId: string;
-  let hostGuestId: string;
-  let guestGuestId: string;
-  let roomId: string;
+describe('Join Flow: Invitation Acceptance', () => {
+  let hostUserId: string
+  let guestUserId: string
+  let hostGuestId: string
+  let guestGuestId: string
+  let roomId: string
 
   beforeEach(async () => {
     // Create test users
-    hostGuestId = `test-host-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-    guestGuestId = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    hostGuestId = `test-host-${Date.now()}-${Math.random().toString(36).slice(2)}`
+    guestGuestId = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
 
-    const [host] = await db
-      .insert(schema.users)
-      .values({ guestId: hostGuestId })
-      .returning();
-    const [guest] = await db
-      .insert(schema.users)
-      .values({ guestId: guestGuestId })
-      .returning();
+    const [host] = await db.insert(schema.users).values({ guestId: hostGuestId }).returning()
+    const [guest] = await db.insert(schema.users).values({ guestId: guestGuestId }).returning()
 
-    hostUserId = host.id;
-    guestUserId = guest.id;
-  });
+    hostUserId = host.id
+    guestUserId = guest.id
+  })
 
   afterEach(async () => {
     // Clean up invitations
     if (roomId) {
-      await db
-        .delete(schema.roomInvitations)
-        .where(eq(schema.roomInvitations.roomId, roomId));
+      await db.delete(schema.roomInvitations).where(eq(schema.roomInvitations.roomId, roomId))
     }
 
     // Clean up room
     if (roomId) {
-      await db
-        .delete(schema.arcadeRooms)
-        .where(eq(schema.arcadeRooms.id, roomId));
+      await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, roomId))
     }
 
     // Clean up users
-    await db.delete(schema.users).where(eq(schema.users.id, hostUserId));
-    await db.delete(schema.users).where(eq(schema.users.id, guestUserId));
-  });
+    await db.delete(schema.users).where(eq(schema.users.id, hostUserId))
+    await db.delete(schema.users).where(eq(schema.users.id, guestUserId))
+  })
 
-  describe("BUG FIX: Invitation marked as accepted after join", () => {
-    it("marks invitation as accepted when guest joins restricted room", async () => {
+  describe('BUG FIX: Invitation marked as accepted after join', () => {
+    it('marks invitation as accepted when guest joins restricted room', async () => {
       // 1. Host creates a restricted room
       const room = await createRoom({
-        name: "Restricted Room",
+        name: 'Restricted Room',
         createdBy: hostGuestId,
-        creatorName: "Host User",
-        gameName: "rithmomachia",
+        creatorName: 'Host User',
+        gameName: 'rithmomachia',
         gameConfig: {},
-        accessMode: "restricted", // Requires invitation
-      });
-      roomId = room.id;
+        accessMode: 'restricted', // Requires invitation
+      })
+      roomId = room.id
 
       // 2. Host invites guest
       const invitation = await createInvitation({
         roomId,
         userId: guestUserId,
-        userName: "Guest User",
+        userName: 'Guest User',
         invitedBy: hostUserId,
-        invitedByName: "Host User",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host User',
+        invitationType: 'manual',
+      })
 
       // 3. Verify invitation is pending
-      expect(invitation.status).toBe("pending");
+      expect(invitation.status).toBe('pending')
 
       // 4. Guest joins the room (simulating the join API flow)
       // In the real API, it checks the invitation and then adds the member
-      const invitationCheck = await getInvitation(roomId, guestUserId);
-      expect(invitationCheck?.status).toBe("pending");
+      const invitationCheck = await getInvitation(roomId, guestUserId)
+      expect(invitationCheck?.status).toBe('pending')
 
       // Simulate what the join API does: add member
       await addRoomMember({
         roomId,
         userId: guestGuestId,
-        displayName: "Guest User",
+        displayName: 'Guest User',
         isCreator: false,
-      });
+      })
 
       // 5. BUG: Before fix, invitation would still be "pending" here
       // AFTER FIX: The join API now explicitly marks it as "accepted"
 
       // Simulate the fix from join API
-      const { acceptInvitation } = await import(
-        "../src/lib/arcade/room-invitations"
-      );
-      await acceptInvitation(invitation.id);
+      const { acceptInvitation } = await import('../src/lib/arcade/room-invitations')
+      await acceptInvitation(invitation.id)
 
       // 6. Verify invitation is now marked as accepted
-      const updatedInvitation = await getInvitation(roomId, guestUserId);
-      expect(updatedInvitation?.status).toBe("accepted");
-      expect(updatedInvitation?.respondedAt).toBeDefined();
-    });
+      const updatedInvitation = await getInvitation(roomId, guestUserId)
+      expect(updatedInvitation?.status).toBe('accepted')
+      expect(updatedInvitation?.respondedAt).toBeDefined()
+    })
 
-    it("prevents showing the same invitation again after accepting", async () => {
+    it('prevents showing the same invitation again after accepting', async () => {
       // This tests the exact bug scenario from the issue:
       // "even if I accept the invite and join the room,
       //  if I try to join room SFK3GD again, then I'm shown the same invite notice"
 
       // 1. Create Room A and Room B
       const roomA = await createRoom({
-        name: "Room KHS3AE",
+        name: 'Room KHS3AE',
         createdBy: hostGuestId,
-        creatorName: "Host",
-        gameName: "rithmomachia",
+        creatorName: 'Host',
+        gameName: 'rithmomachia',
         gameConfig: {},
-        accessMode: "restricted",
-      });
+        accessMode: 'restricted',
+      })
 
       const roomB = await createRoom({
-        name: "Room SFK3GD",
+        name: 'Room SFK3GD',
         createdBy: hostGuestId,
-        creatorName: "Host",
-        gameName: "rithmomachia",
+        creatorName: 'Host',
+        gameName: 'rithmomachia',
         gameConfig: {},
-        accessMode: "open", // Guest can join without invitation
-      });
+        accessMode: 'open', // Guest can join without invitation
+      })
 
-      roomId = roomA.id; // For cleanup
+      roomId = roomA.id // For cleanup
 
       // 2. Invite guest to Room A
       const invitationA = await createInvitation({
         roomId: roomA.id,
         userId: guestUserId,
-        userName: "Guest",
+        userName: 'Guest',
         invitedBy: hostUserId,
-        invitedByName: "Host",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host',
+        invitationType: 'manual',
+      })
 
       // 3. Guest sees invitation to Room A
-      const { getUserPendingInvitations } = await import(
-        "../src/lib/arcade/room-invitations"
-      );
-      let pendingInvites = await getUserPendingInvitations(guestUserId);
-      expect(pendingInvites).toHaveLength(1);
-      expect(pendingInvites[0].roomId).toBe(roomA.id);
+      const { getUserPendingInvitations } = await import('../src/lib/arcade/room-invitations')
+      let pendingInvites = await getUserPendingInvitations(guestUserId)
+      expect(pendingInvites).toHaveLength(1)
+      expect(pendingInvites[0].roomId).toBe(roomA.id)
 
       // 4. Guest accepts and joins Room A
-      const { acceptInvitation } = await import(
-        "../src/lib/arcade/room-invitations"
-      );
-      await acceptInvitation(invitationA.id);
+      const { acceptInvitation } = await import('../src/lib/arcade/room-invitations')
+      await acceptInvitation(invitationA.id)
 
       await addRoomMember({
         roomId: roomA.id,
         userId: guestGuestId,
-        displayName: "Guest",
+        displayName: 'Guest',
         isCreator: false,
-      });
+      })
 
       // 5. Guest tries to visit Room B link (/join/SFK3GD)
       // BUG: Before fix, they'd see Room A invitation again because it's still "pending"
       // FIX: Invitation is now "accepted", so it won't show in pending list
 
-      pendingInvites = await getUserPendingInvitations(guestUserId);
-      expect(pendingInvites).toHaveLength(0); // ✅ No longer shows Room A
+      pendingInvites = await getUserPendingInvitations(guestUserId)
+      expect(pendingInvites).toHaveLength(0) // ✅ No longer shows Room A
 
       // 6. Guest can successfully join Room B without being interrupted
       await addRoomMember({
         roomId: roomB.id,
         userId: guestGuestId,
-        displayName: "Guest",
+        displayName: 'Guest',
         isCreator: false,
-      });
+      })
 
       // Clean up
-      await db
-        .delete(schema.arcadeRooms)
-        .where(eq(schema.arcadeRooms.id, roomB.id));
-    });
-  });
+      await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, roomB.id))
+    })
+  })
 
-  describe("Invitation flow with multiple rooms", () => {
-    it("only shows pending invitations, not accepted ones", async () => {
+  describe('Invitation flow with multiple rooms', () => {
+    it('only shows pending invitations, not accepted ones', async () => {
       // Create 3 rooms, invite to all of them
       const room1 = await createRoom({
-        name: "Room 1",
+        name: 'Room 1',
         createdBy: hostGuestId,
-        creatorName: "Host",
-        gameName: "rithmomachia",
+        creatorName: 'Host',
+        gameName: 'rithmomachia',
         gameConfig: {},
-        accessMode: "restricted",
-      });
+        accessMode: 'restricted',
+      })
 
       const room2 = await createRoom({
-        name: "Room 2",
+        name: 'Room 2',
         createdBy: hostGuestId,
-        creatorName: "Host",
-        gameName: "rithmomachia",
+        creatorName: 'Host',
+        gameName: 'rithmomachia',
         gameConfig: {},
-        accessMode: "restricted",
-      });
+        accessMode: 'restricted',
+      })
 
       const room3 = await createRoom({
-        name: "Room 3",
+        name: 'Room 3',
         createdBy: hostGuestId,
-        creatorName: "Host",
-        gameName: "rithmomachia",
+        creatorName: 'Host',
+        gameName: 'rithmomachia',
         gameConfig: {},
-        accessMode: "restricted",
-      });
+        accessMode: 'restricted',
+      })
 
-      roomId = room1.id; // For cleanup
+      roomId = room1.id // For cleanup
 
       // Invite to all 3
       const inv1 = await createInvitation({
         roomId: room1.id,
         userId: guestUserId,
-        userName: "Guest",
+        userName: 'Guest',
         invitedBy: hostUserId,
-        invitedByName: "Host",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host',
+        invitationType: 'manual',
+      })
 
       const inv2 = await createInvitation({
         roomId: room2.id,
         userId: guestUserId,
-        userName: "Guest",
+        userName: 'Guest',
         invitedBy: hostUserId,
-        invitedByName: "Host",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host',
+        invitationType: 'manual',
+      })
 
       const inv3 = await createInvitation({
         roomId: room3.id,
         userId: guestUserId,
-        userName: "Guest",
+        userName: 'Guest',
         invitedBy: hostUserId,
-        invitedByName: "Host",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host',
+        invitationType: 'manual',
+      })
 
       // All 3 should be pending
       const { getUserPendingInvitations, acceptInvitation } = await import(
-        "../src/lib/arcade/room-invitations"
-      );
-      let pending = await getUserPendingInvitations(guestUserId);
-      expect(pending).toHaveLength(3);
+        '../src/lib/arcade/room-invitations'
+      )
+      let pending = await getUserPendingInvitations(guestUserId)
+      expect(pending).toHaveLength(3)
 
       // Accept invitation 1 and join
-      await acceptInvitation(inv1.id);
+      await acceptInvitation(inv1.id)
 
       // Now only 2 should be pending
-      pending = await getUserPendingInvitations(guestUserId);
-      expect(pending).toHaveLength(2);
-      expect(pending.map((p) => p.roomId)).not.toContain(room1.id);
+      pending = await getUserPendingInvitations(guestUserId)
+      expect(pending).toHaveLength(2)
+      expect(pending.map((p) => p.roomId)).not.toContain(room1.id)
 
       // Clean up
-      await db
-        .delete(schema.arcadeRooms)
-        .where(eq(schema.arcadeRooms.id, room2.id));
-      await db
-        .delete(schema.arcadeRooms)
-        .where(eq(schema.arcadeRooms.id, room3.id));
-    });
-  });
+      await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, room2.id))
+      await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, room3.id))
+    })
+  })
 
-  describe("Host re-joining their own restricted room", () => {
-    it("host can rejoin without invitation (no acceptance needed)", async () => {
+  describe('Host re-joining their own restricted room', () => {
+    it('host can rejoin without invitation (no acceptance needed)', async () => {
       // Create restricted room as host
       const room = await createRoom({
-        name: "Host Room",
+        name: 'Host Room',
         createdBy: hostGuestId,
-        creatorName: "Host User",
-        gameName: "rithmomachia",
+        creatorName: 'Host User',
+        gameName: 'rithmomachia',
         gameConfig: {},
-        accessMode: "restricted",
-      });
-      roomId = room.id;
+        accessMode: 'restricted',
+      })
+      roomId = room.id
 
       // Host joins their own room
       await addRoomMember({
         roomId,
         userId: hostGuestId,
-        displayName: "Host User",
+        displayName: 'Host User',
         isCreator: true,
-      });
+      })
 
       // No invitation needed, no acceptance
       // This should not create any invitation records
-      const invitation = await getInvitation(roomId, hostUserId);
-      expect(invitation).toBeUndefined();
-    });
-  });
+      const invitation = await getInvitation(roomId, hostUserId)
+      expect(invitation).toBeUndefined()
+    })
+  })
 
-  describe("Edge cases", () => {
-    it("handles multiple invitations from same host to same guest (updates, not duplicates)", async () => {
+  describe('Edge cases', () => {
+    it('handles multiple invitations from same host to same guest (updates, not duplicates)', async () => {
       const room = await createRoom({
-        name: "Test Room",
+        name: 'Test Room',
         createdBy: hostGuestId,
-        creatorName: "Host",
-        gameName: "rithmomachia",
+        creatorName: 'Host',
+        gameName: 'rithmomachia',
         gameConfig: {},
-        accessMode: "restricted",
-      });
-      roomId = room.id;
+        accessMode: 'restricted',
+      })
+      roomId = room.id
 
       // Send first invitation
       const inv1 = await createInvitation({
         roomId,
         userId: guestUserId,
-        userName: "Guest",
+        userName: 'Guest',
         invitedBy: hostUserId,
-        invitedByName: "Host",
-        invitationType: "manual",
-        message: "First message",
-      });
+        invitedByName: 'Host',
+        invitationType: 'manual',
+        message: 'First message',
+      })
 
       // Send second invitation (should update, not create new)
       const inv2 = await createInvitation({
         roomId,
         userId: guestUserId,
-        userName: "Guest",
+        userName: 'Guest',
         invitedBy: hostUserId,
-        invitedByName: "Host",
-        invitationType: "manual",
-        message: "Second message",
-      });
+        invitedByName: 'Host',
+        invitationType: 'manual',
+        message: 'Second message',
+      })
 
       // Should be same invitation (same ID)
-      expect(inv1.id).toBe(inv2.id);
-      expect(inv2.message).toBe("Second message");
+      expect(inv1.id).toBe(inv2.id)
+      expect(inv2.message).toBe('Second message')
 
       // Should only have 1 invitation in database
       const allInvitations = await db
         .select()
         .from(schema.roomInvitations)
-        .where(eq(schema.roomInvitations.roomId, roomId));
+        .where(eq(schema.roomInvitations.roomId, roomId))
 
-      expect(allInvitations).toHaveLength(1);
-    });
+      expect(allInvitations).toHaveLength(1)
+    })
 
-    it("re-sends invitation after previous was declined", async () => {
+    it('re-sends invitation after previous was declined', async () => {
       const room = await createRoom({
-        name: "Test Room",
+        name: 'Test Room',
         createdBy: hostGuestId,
-        creatorName: "Host",
-        gameName: "rithmomachia",
+        creatorName: 'Host',
+        gameName: 'rithmomachia',
         gameConfig: {},
-        accessMode: "restricted",
-      });
-      roomId = room.id;
+        accessMode: 'restricted',
+      })
+      roomId = room.id
 
       // First invitation
       const inv1 = await createInvitation({
         roomId,
         userId: guestUserId,
-        userName: "Guest",
+        userName: 'Guest',
         invitedBy: hostUserId,
-        invitedByName: "Host",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host',
+        invitationType: 'manual',
+      })
 
       // Guest declines
       const { declineInvitation, getUserPendingInvitations } = await import(
-        "../src/lib/arcade/room-invitations"
-      );
-      await declineInvitation(inv1.id);
+        '../src/lib/arcade/room-invitations'
+      )
+      await declineInvitation(inv1.id)
 
       // Should not be in pending list
-      let pending = await getUserPendingInvitations(guestUserId);
-      expect(pending).toHaveLength(0);
+      let pending = await getUserPendingInvitations(guestUserId)
+      expect(pending).toHaveLength(0)
 
       // Host sends new invitation (should reset to pending)
       await createInvitation({
         roomId,
         userId: guestUserId,
-        userName: "Guest",
+        userName: 'Guest',
         invitedBy: hostUserId,
-        invitedByName: "Host",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host',
+        invitationType: 'manual',
+      })
 
       // Should now be in pending list again
-      pending = await getUserPendingInvitations(guestUserId);
-      expect(pending).toHaveLength(1);
-      expect(pending[0].status).toBe("pending");
-    });
+      pending = await getUserPendingInvitations(guestUserId)
+      expect(pending).toHaveLength(1)
+      expect(pending[0].status).toBe('pending')
+    })
 
-    it("accepts invitations to OPEN rooms (not just restricted)", async () => {
+    it('accepts invitations to OPEN rooms (not just restricted)', async () => {
       // This tests the root cause of the bug:
       // Invitations to OPEN rooms were never being marked as accepted
 
       const openRoom = await createRoom({
-        name: "Open Room",
+        name: 'Open Room',
         createdBy: hostGuestId,
-        creatorName: "Host",
-        gameName: "rithmomachia",
+        creatorName: 'Host',
+        gameName: 'rithmomachia',
         gameConfig: {},
-        accessMode: "open", // Open access - no invitation required to join
-      });
-      roomId = openRoom.id;
+        accessMode: 'open', // Open access - no invitation required to join
+      })
+      roomId = openRoom.id
 
       // Host sends invitation anyway (e.g., to notify guest about the room)
       const inv = await createInvitation({
         roomId: openRoom.id,
         userId: guestUserId,
-        userName: "Guest",
+        userName: 'Guest',
         invitedBy: hostUserId,
-        invitedByName: "Host",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host',
+        invitationType: 'manual',
+      })
 
       // Guest should see pending invitation
       const { getUserPendingInvitations, acceptInvitation } = await import(
-        "../src/lib/arcade/room-invitations"
-      );
-      let pending = await getUserPendingInvitations(guestUserId);
-      expect(pending).toHaveLength(1);
+        '../src/lib/arcade/room-invitations'
+      )
+      let pending = await getUserPendingInvitations(guestUserId)
+      expect(pending).toHaveLength(1)
 
       // Guest joins the open room (invitation not required, but present)
       await addRoomMember({
         roomId: openRoom.id,
         userId: guestGuestId,
-        displayName: "Guest",
+        displayName: 'Guest',
         isCreator: false,
-      });
+      })
 
       // Simulate the join API accepting the invitation
-      await acceptInvitation(inv.id);
+      await acceptInvitation(inv.id)
 
       // BUG FIX: Invitation should now be accepted, not stuck in pending
-      pending = await getUserPendingInvitations(guestUserId);
-      expect(pending).toHaveLength(0); // ✅ No longer pending
+      pending = await getUserPendingInvitations(guestUserId)
+      expect(pending).toHaveLength(0) // ✅ No longer pending
 
       // Verify it's marked as accepted
-      const acceptedInv = await getInvitation(openRoom.id, guestUserId);
-      expect(acceptedInv?.status).toBe("accepted");
-    });
-  });
-});
+      const acceptedInv = await getInvitation(openRoom.id, guestUserId)
+      expect(acceptedInv?.status).toBe('accepted')
+    })
+  })
+})
diff --git a/apps/web/__tests__/middleware.e2e.test.ts b/apps/web/__tests__/middleware.e2e.test.ts
index 4aee1c81..1a2635c0 100644
--- a/apps/web/__tests__/middleware.e2e.test.ts
+++ b/apps/web/__tests__/middleware.e2e.test.ts
@@ -2,135 +2,135 @@
  * @vitest-environment node
  */
 
-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 { 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'
 
-describe("Middleware E2E", () => {
+describe('Middleware E2E', () => {
   beforeEach(() => {
-    process.env.AUTH_SECRET = "test-secret-for-middleware";
-  });
+    process.env.AUTH_SECRET = 'test-secret-for-middleware'
+  })
 
-  it("sets guest cookie on first request", async () => {
-    const req = new NextRequest("http://localhost:3000/");
-    const res = await middleware(req);
+  it('sets guest cookie on first request', async () => {
+    const req = new NextRequest('http://localhost:3000/')
+    const res = await middleware(req)
 
-    const cookie = res.cookies.get(GUEST_COOKIE_NAME);
+    const cookie = res.cookies.get(GUEST_COOKIE_NAME)
 
-    expect(cookie).toBeDefined();
-    expect(cookie?.value).toBeDefined();
-    expect(cookie?.httpOnly).toBe(true);
-    expect(cookie?.sameSite).toBe("lax");
-    expect(cookie?.path).toBe("/");
-  });
+    expect(cookie).toBeDefined()
+    expect(cookie?.value).toBeDefined()
+    expect(cookie?.httpOnly).toBe(true)
+    expect(cookie?.sameSite).toBe('lax')
+    expect(cookie?.path).toBe('/')
+  })
 
-  it("creates valid guest token", async () => {
-    const req = new NextRequest("http://localhost:3000/");
-    const res = await middleware(req);
+  it('creates valid guest token', async () => {
+    const req = new NextRequest('http://localhost:3000/')
+    const res = await middleware(req)
 
-    const cookie = res.cookies.get(GUEST_COOKIE_NAME);
-    expect(cookie).toBeDefined();
+    const cookie = res.cookies.get(GUEST_COOKIE_NAME)
+    expect(cookie).toBeDefined()
 
     // Verify the token is valid
-    const verified = await verifyGuestToken(cookie!.value);
-    expect(verified.sid).toBeDefined();
-    expect(typeof verified.sid).toBe("string");
-  });
+    const verified = await verifyGuestToken(cookie!.value)
+    expect(verified.sid).toBeDefined()
+    expect(typeof verified.sid).toBe('string')
+  })
 
-  it("preserves existing guest cookie", async () => {
+  it('preserves existing guest cookie', async () => {
     // First request - creates cookie
-    const req1 = new NextRequest("http://localhost:3000/");
-    const res1 = await middleware(req1);
-    const cookie1 = res1.cookies.get(GUEST_COOKIE_NAME);
+    const req1 = new NextRequest('http://localhost:3000/')
+    const res1 = await middleware(req1)
+    const cookie1 = res1.cookies.get(GUEST_COOKIE_NAME)
 
     // Second request - with existing cookie
-    const req2 = new NextRequest("http://localhost:3000/");
-    req2.cookies.set(GUEST_COOKIE_NAME, cookie1!.value);
-    const res2 = await middleware(req2);
+    const req2 = new NextRequest('http://localhost:3000/')
+    req2.cookies.set(GUEST_COOKIE_NAME, cookie1!.value)
+    const res2 = await middleware(req2)
 
-    const cookie2 = res2.cookies.get(GUEST_COOKIE_NAME);
+    const cookie2 = res2.cookies.get(GUEST_COOKIE_NAME)
 
     // Cookie should not be set again (preserves existing)
-    expect(cookie2).toBeUndefined();
-  });
+    expect(cookie2).toBeUndefined()
+  })
 
-  it("sets different guest IDs for different visitors", async () => {
-    const req1 = new NextRequest("http://localhost:3000/");
-    const req2 = new NextRequest("http://localhost:3000/");
+  it('sets different guest IDs for different visitors', async () => {
+    const req1 = new NextRequest('http://localhost:3000/')
+    const req2 = new NextRequest('http://localhost:3000/')
 
-    const res1 = await middleware(req1);
-    const res2 = await middleware(req2);
+    const res1 = await middleware(req1)
+    const res2 = await middleware(req2)
 
-    const cookie1 = res1.cookies.get(GUEST_COOKIE_NAME);
-    const cookie2 = res2.cookies.get(GUEST_COOKIE_NAME);
+    const cookie1 = res1.cookies.get(GUEST_COOKIE_NAME)
+    const cookie2 = res2.cookies.get(GUEST_COOKIE_NAME)
 
-    const verified1 = await verifyGuestToken(cookie1!.value);
-    const verified2 = await verifyGuestToken(cookie2!.value);
+    const verified1 = await verifyGuestToken(cookie1!.value)
+    const verified2 = await verifyGuestToken(cookie2!.value)
 
     // Different visitors get different guest IDs
-    expect(verified1.sid).not.toBe(verified2.sid);
-  });
+    expect(verified1.sid).not.toBe(verified2.sid)
+  })
 
-  it("sets secure flag in production", async () => {
-    const originalEnv = process.env.NODE_ENV;
-    Object.defineProperty(process.env, "NODE_ENV", {
-      value: "production",
+  it('sets secure flag in production', async () => {
+    const originalEnv = process.env.NODE_ENV
+    Object.defineProperty(process.env, 'NODE_ENV', {
+      value: 'production',
       configurable: true,
-    });
+    })
 
-    const req = new NextRequest("http://localhost:3000/");
-    const res = await middleware(req);
+    const req = new NextRequest('http://localhost:3000/')
+    const res = await middleware(req)
 
-    const cookie = res.cookies.get(GUEST_COOKIE_NAME);
-    expect(cookie?.secure).toBe(true);
+    const cookie = res.cookies.get(GUEST_COOKIE_NAME)
+    expect(cookie?.secure).toBe(true)
 
-    Object.defineProperty(process.env, "NODE_ENV", {
+    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;
-    Object.defineProperty(process.env, "NODE_ENV", {
-      value: "development",
+  it('does not set secure flag in development', async () => {
+    const originalEnv = process.env.NODE_ENV
+    Object.defineProperty(process.env, 'NODE_ENV', {
+      value: 'development',
       configurable: true,
-    });
+    })
 
-    const req = new NextRequest("http://localhost:3000/");
-    const res = await middleware(req);
+    const req = new NextRequest('http://localhost:3000/')
+    const res = await middleware(req)
 
-    const cookie = res.cookies.get(GUEST_COOKIE_NAME);
-    expect(cookie?.secure).toBe(false);
+    const cookie = res.cookies.get(GUEST_COOKIE_NAME)
+    expect(cookie?.secure).toBe(false)
 
-    Object.defineProperty(process.env, "NODE_ENV", {
+    Object.defineProperty(process.env, 'NODE_ENV', {
       value: originalEnv,
       configurable: true,
-    });
-  });
+    })
+  })
 
-  it("sets maxAge correctly", async () => {
-    const req = new NextRequest("http://localhost:3000/");
-    const res = await middleware(req);
+  it('sets maxAge correctly', async () => {
+    const req = new NextRequest('http://localhost:3000/')
+    const res = await middleware(req)
 
-    const cookie = res.cookies.get(GUEST_COOKIE_NAME);
-    expect(cookie?.maxAge).toBe(60 * 60 * 24 * 30); // 30 days
-  });
+    const cookie = res.cookies.get(GUEST_COOKIE_NAME)
+    expect(cookie?.maxAge).toBe(60 * 60 * 24 * 30) // 30 days
+  })
 
-  it("runs on valid paths", async () => {
+  it('runs on valid paths', async () => {
     const paths = [
-      "http://localhost:3000/",
-      "http://localhost:3000/games",
-      "http://localhost:3000/tutorial-editor",
-      "http://localhost:3000/some/deep/path",
-    ];
+      'http://localhost:3000/',
+      'http://localhost:3000/games',
+      'http://localhost:3000/tutorial-editor',
+      'http://localhost:3000/some/deep/path',
+    ]
 
     for (const path of paths) {
-      const req = new NextRequest(path);
-      const res = await middleware(req);
-      const cookie = res.cookies.get(GUEST_COOKIE_NAME);
-      expect(cookie).toBeDefined();
+      const req = new NextRequest(path)
+      const res = await middleware(req)
+      const cookie = res.cookies.get(GUEST_COOKIE_NAME)
+      expect(cookie).toBeDefined()
     }
-  });
-});
+  })
+})
diff --git a/apps/web/__tests__/orphaned-session.e2e.test.ts b/apps/web/__tests__/orphaned-session.e2e.test.ts
index ed2fd89f..2d0422ae 100644
--- a/apps/web/__tests__/orphaned-session.e2e.test.ts
+++ b/apps/web/__tests__/orphaned-session.e2e.test.ts
@@ -1,14 +1,8 @@
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { eq } from "drizzle-orm";
-import { db, schema } from "../src/db";
-import {
-  createArcadeSession,
-  getArcadeSession,
-} from "../src/lib/arcade/session-manager";
-import {
-  cleanupExpiredRooms,
-  createRoom,
-} from "../src/lib/arcade/room-manager";
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { eq } from 'drizzle-orm'
+import { db, schema } from '../src/db'
+import { createArcadeSession, getArcadeSession } from '../src/lib/arcade/session-manager'
+import { cleanupExpiredRooms, createRoom } from '../src/lib/arcade/room-manager'
 
 /**
  * E2E Test: Orphaned Session After Room TTL Deletion
@@ -20,10 +14,10 @@ import {
  * 4. System should NOT redirect to the orphaned game
  * 5. User should see the arcade lobby normally
  */
-describe("E2E: Orphaned Session Cleanup on Navigation", () => {
-  const testUserId = "e2e-user-id";
-  const testGuestId = "e2e-guest-id";
-  let testRoomId: string;
+describe('E2E: Orphaned Session Cleanup on Navigation', () => {
+  const testUserId = 'e2e-user-id'
+  const testGuestId = 'e2e-guest-id'
+  let testRoomId: string
 
   beforeEach(async () => {
     // Create test user (simulating new or returning visitor)
@@ -34,63 +28,59 @@ describe("E2E: Orphaned Session Cleanup on Navigation", () => {
         guestId: testGuestId,
         createdAt: new Date(),
       })
-      .onConflictDoNothing();
-  });
+      .onConflictDoNothing()
+  })
 
   afterEach(async () => {
     // Clean up test data
-    await db
-      .delete(schema.arcadeSessions)
-      .where(eq(schema.arcadeSessions.userId, testUserId));
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId));
+    await db.delete(schema.arcadeSessions).where(eq(schema.arcadeSessions.userId, testUserId))
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId))
     if (testRoomId) {
       try {
-        await db
-          .delete(schema.arcadeRooms)
-          .where(eq(schema.arcadeRooms.id, testRoomId));
+        await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, testRoomId))
       } catch {
         // Room may already be deleted
       }
     }
-  });
+  })
 
-  it("should not redirect user to orphaned game after room TTL cleanup", async () => {
+  it('should not redirect user to orphaned game after room TTL cleanup', async () => {
     // === SETUP PHASE ===
     // User creates or joins a room
     const room = await createRoom({
-      name: "My Game Room",
+      name: 'My Game Room',
       createdBy: testGuestId,
-      creatorName: "Test Player",
-      gameName: "matching",
-      gameConfig: { difficulty: 6, gameType: "abacus-numeral", turnTimer: 30 },
+      creatorName: 'Test Player',
+      gameName: 'matching',
+      gameConfig: { difficulty: 6, gameType: 'abacus-numeral', turnTimer: 30 },
       ttlMinutes: 1, // Short TTL for testing
-    });
-    testRoomId = room.id;
+    })
+    testRoomId = room.id
 
     // User starts a game session
     const session = await createArcadeSession({
       userId: testGuestId,
-      gameName: "matching",
-      gameUrl: "/arcade/matching",
+      gameName: 'matching',
+      gameUrl: '/arcade/matching',
       initialState: {
-        gamePhase: "playing",
+        gamePhase: 'playing',
         cards: [],
         gameCards: [],
         flippedCards: [],
         matchedPairs: 0,
         totalPairs: 6,
-        currentPlayer: "player-1",
+        currentPlayer: 'player-1',
         difficulty: 6,
-        gameType: "abacus-numeral",
+        gameType: 'abacus-numeral',
         turnTimer: 30,
       },
-      activePlayers: ["player-1"],
+      activePlayers: ['player-1'],
       roomId: room.id,
-    });
+    })
 
     // Verify session was created
-    expect(session).toBeDefined();
-    expect(session.roomId).toBe(room.id);
+    expect(session).toBeDefined()
+    expect(session.roomId).toBe(room.id)
 
     // === TTL EXPIRATION PHASE ===
     // Simulate time passing - room's TTL expires
@@ -100,118 +90,114 @@ describe("E2E: Orphaned Session Cleanup on Navigation", () => {
       .set({
         lastActivity: new Date(Date.now() - 2 * 60 * 1000), // 2 minutes ago
       })
-      .where(eq(schema.arcadeRooms.id, room.id));
+      .where(eq(schema.arcadeRooms.id, room.id))
 
     // Run cleanup (simulating background cleanup job)
-    const deletedCount = await cleanupExpiredRooms();
-    expect(deletedCount).toBeGreaterThan(0); // Room should be deleted
+    const deletedCount = await cleanupExpiredRooms()
+    expect(deletedCount).toBeGreaterThan(0) // Room should be deleted
 
     // === USER NAVIGATION PHASE ===
     // User navigates to /arcade (arcade lobby)
     // Client checks for active session
-    const activeSession = await getArcadeSession(testGuestId);
+    const activeSession = await getArcadeSession(testGuestId)
 
     // === ASSERTION PHASE ===
     // Expected behavior: NO active session returned
     // This prevents redirect to /arcade/matching which would be broken
-    expect(activeSession).toBeUndefined();
+    expect(activeSession).toBeUndefined()
 
     // Verify the orphaned session was cleaned up from database
     const [orphanedSessionCheck] = await db
       .select()
       .from(schema.arcadeSessions)
       .where(eq(schema.arcadeSessions.userId, testUserId))
-      .limit(1);
+      .limit(1)
 
-    expect(orphanedSessionCheck).toBeUndefined();
-  });
+    expect(orphanedSessionCheck).toBeUndefined()
+  })
 
-  it("should allow user to start new game after orphaned session cleanup", async () => {
+  it('should allow user to start new game after orphaned session cleanup', async () => {
     // === SETUP: Create and orphan a session ===
     const oldRoom = await createRoom({
-      name: "Old Room",
+      name: 'Old Room',
       createdBy: testGuestId,
-      creatorName: "Test Player",
-      gameName: "matching",
+      creatorName: 'Test Player',
+      gameName: 'matching',
       gameConfig: { difficulty: 6 },
       ttlMinutes: 1,
-    });
+    })
 
     await createArcadeSession({
       userId: testGuestId,
-      gameName: "matching",
-      gameUrl: "/arcade/matching",
-      initialState: { gamePhase: "setup" },
-      activePlayers: ["player-1"],
+      gameName: 'matching',
+      gameUrl: '/arcade/matching',
+      initialState: { gamePhase: 'setup' },
+      activePlayers: ['player-1'],
       roomId: oldRoom.id,
-    });
+    })
 
     // Delete room (TTL cleanup)
-    await db
-      .delete(schema.arcadeRooms)
-      .where(eq(schema.arcadeRooms.id, oldRoom.id));
+    await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, oldRoom.id))
 
     // === ACTION: User tries to access arcade ===
-    const orphanedSession = await getArcadeSession(testGuestId);
-    expect(orphanedSession).toBeUndefined(); // Orphan cleaned up
+    const orphanedSession = await getArcadeSession(testGuestId)
+    expect(orphanedSession).toBeUndefined() // Orphan cleaned up
 
     // === ACTION: User creates new room and session ===
     const newRoom = await createRoom({
-      name: "New Room",
+      name: 'New Room',
       createdBy: testGuestId,
-      creatorName: "Test Player",
-      gameName: "matching",
+      creatorName: 'Test Player',
+      gameName: 'matching',
       gameConfig: { difficulty: 8 },
       ttlMinutes: 60,
-    });
-    testRoomId = newRoom.id;
+    })
+    testRoomId = newRoom.id
 
     const newSession = await createArcadeSession({
       userId: testGuestId,
-      gameName: "matching",
-      gameUrl: "/arcade/matching",
-      initialState: { gamePhase: "setup" },
-      activePlayers: ["player-1", "player-2"],
+      gameName: 'matching',
+      gameUrl: '/arcade/matching',
+      initialState: { gamePhase: 'setup' },
+      activePlayers: ['player-1', 'player-2'],
       roomId: newRoom.id,
-    });
+    })
 
     // === ASSERTION: New session works correctly ===
-    expect(newSession).toBeDefined();
-    expect(newSession.roomId).toBe(newRoom.id);
+    expect(newSession).toBeDefined()
+    expect(newSession.roomId).toBe(newRoom.id)
 
-    const activeSession = await getArcadeSession(testGuestId);
-    expect(activeSession).toBeDefined();
-    expect(activeSession?.roomId).toBe(newRoom.id);
-  });
+    const activeSession = await getArcadeSession(testGuestId)
+    expect(activeSession).toBeDefined()
+    expect(activeSession?.roomId).toBe(newRoom.id)
+  })
 
-  it("should handle race condition: getArcadeSession called while room is being deleted", async () => {
+  it('should handle race condition: getArcadeSession called while room is being deleted', async () => {
     // Create room and session
     const room = await createRoom({
-      name: "Race Condition Room",
+      name: 'Race Condition Room',
       createdBy: testGuestId,
-      creatorName: "Test Player",
-      gameName: "matching",
+      creatorName: 'Test Player',
+      gameName: 'matching',
       gameConfig: { difficulty: 6 },
       ttlMinutes: 60,
-    });
-    testRoomId = room.id;
+    })
+    testRoomId = room.id
 
     await createArcadeSession({
       userId: testGuestId,
-      gameName: "matching",
-      gameUrl: "/arcade/matching",
-      initialState: { gamePhase: "setup" },
-      activePlayers: ["player-1"],
+      gameName: 'matching',
+      gameUrl: '/arcade/matching',
+      initialState: { gamePhase: 'setup' },
+      activePlayers: ['player-1'],
       roomId: room.id,
-    });
+    })
 
     // Simulate race: delete room while getArcadeSession is checking
-    await db
-      .delete(schema.arcadeRooms)
-      .where(eq(schema.arcadeRooms.id, room.id));
+    await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, room.id))
 
     // Should gracefully handle and return undefined
-    const result = await getArcadeSession(testGuestId);
-    expect(result).toBeUndefined();
-  });
-});
+    const result = await getArcadeSession(testGuestId)
+    expect(result).toBeUndefined()
+  })
+})
diff --git a/apps/web/__tests__/room-realtime-updates.e2e.test.ts b/apps/web/__tests__/room-realtime-updates.e2e.test.ts
index 0c5285b3..20d520fa 100644
--- a/apps/web/__tests__/room-realtime-updates.e2e.test.ts
+++ b/apps/web/__tests__/room-realtime-updates.e2e.test.ts
@@ -2,23 +2,15 @@
  * @vitest-environment node
  */
 
-import { createServer } from "http";
-import { eq } from "drizzle-orm";
-import { io as ioClient, type Socket } from "socket.io-client";
-import {
-  afterEach,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  afterAll,
-  beforeAll,
-} from "vitest";
-import { db, schema } from "../src/db";
-import { createRoom } from "../src/lib/arcade/room-manager";
-import { addRoomMember } from "../src/lib/arcade/room-membership";
-import { initializeSocketServer } from "../src/socket-server";
-import type { Server as SocketIOServerType } from "socket.io";
+import { createServer } from 'http'
+import { eq } from 'drizzle-orm'
+import { io as ioClient, type Socket } from 'socket.io-client'
+import { afterEach, beforeEach, describe, expect, it, afterAll, beforeAll } from 'vitest'
+import { db, schema } from '../src/db'
+import { createRoom } from '../src/lib/arcade/room-manager'
+import { addRoomMember } from '../src/lib/arcade/room-membership'
+import { initializeSocketServer } from '../src/socket-server'
+import type { Server as SocketIOServerType } from 'socket.io'
 
 /**
  * Real-time Room Updates E2E Tests
@@ -27,385 +19,353 @@ import type { Server as SocketIOServerType } from "socket.io";
  * Simulates multiple connected users and verifies they receive real-time updates.
  */
 
-describe("Room Real-time Updates", () => {
-  let testUserId1: string;
-  let testUserId2: string;
-  let testGuestId1: string;
-  let testGuestId2: string;
-  let testRoomId: string;
-  let socket1: Socket;
-  let httpServer: any;
-  let io: SocketIOServerType;
-  let serverPort: number;
+describe('Room Real-time Updates', () => {
+  let testUserId1: string
+  let testUserId2: string
+  let testGuestId1: string
+  let testGuestId2: string
+  let testRoomId: string
+  let socket1: Socket
+  let httpServer: any
+  let io: SocketIOServerType
+  let serverPort: number
 
   beforeAll(async () => {
     // Create HTTP server and initialize Socket.IO for testing
-    httpServer = createServer();
-    io = initializeSocketServer(httpServer);
+    httpServer = createServer()
+    io = initializeSocketServer(httpServer)
 
     // Find an available port
     await new Promise<void>((resolve) => {
       httpServer.listen(0, () => {
-        serverPort = (httpServer.address() as any).port;
-        console.log(`Test socket server listening on port ${serverPort}`);
-        resolve();
-      });
-    });
-  });
+        serverPort = (httpServer.address() as any).port
+        console.log(`Test socket server listening on port ${serverPort}`)
+        resolve()
+      })
+    })
+  })
 
   afterAll(async () => {
     // Close all socket connections
     if (io) {
-      io.close();
+      io.close()
     }
     if (httpServer) {
       await new Promise<void>((resolve) => {
-        httpServer.close(() => resolve());
-      });
+        httpServer.close(() => resolve())
+      })
     }
-  });
+  })
 
   beforeEach(async () => {
     // Create test users
-    testGuestId1 = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-    testGuestId2 = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    testGuestId1 = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
+    testGuestId2 = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
 
-    const [user1] = await db
-      .insert(schema.users)
-      .values({ guestId: testGuestId1 })
-      .returning();
-    const [user2] = await db
-      .insert(schema.users)
-      .values({ guestId: testGuestId2 })
-      .returning();
+    const [user1] = await db.insert(schema.users).values({ guestId: testGuestId1 }).returning()
+    const [user2] = await db.insert(schema.users).values({ guestId: testGuestId2 }).returning()
 
-    testUserId1 = user1.id;
-    testUserId2 = user2.id;
+    testUserId1 = user1.id
+    testUserId2 = user2.id
 
     // Create a test room
     const room = await createRoom({
-      name: "Realtime Test Room",
+      name: 'Realtime Test Room',
       createdBy: testGuestId1,
-      creatorName: "User 1",
-      gameName: "matching",
+      creatorName: 'User 1',
+      gameName: 'matching',
       gameConfig: { difficulty: 6 },
       ttlMinutes: 60,
-    });
-    testRoomId = room.id;
-  });
+    })
+    testRoomId = room.id
+  })
 
   afterEach(async () => {
     // Disconnect sockets
     if (socket1?.connected) {
-      socket1.disconnect();
+      socket1.disconnect()
     }
 
     // Clean up room members
-    await db
-      .delete(schema.roomMembers)
-      .where(eq(schema.roomMembers.roomId, testRoomId));
+    await db.delete(schema.roomMembers).where(eq(schema.roomMembers.roomId, testRoomId))
 
     // Clean up rooms
     if (testRoomId) {
-      await db
-        .delete(schema.arcadeRooms)
-        .where(eq(schema.arcadeRooms.id, testRoomId));
+      await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, testRoomId))
     }
 
     // Clean up users
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId1));
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId2));
-  });
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId1))
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId2))
+  })
 
-  it("should broadcast member-joined when a user joins via API", async () => {
+  it('should broadcast member-joined when a user joins via API', async () => {
     // User 1 joins the room via API first (this is what happens when they click "Join Room")
     await addRoomMember({
       roomId: testRoomId,
       userId: testGuestId1,
-      displayName: "User 1",
+      displayName: 'User 1',
       isCreator: false,
-    });
+    })
 
     // User 1 connects to socket
     socket1 = ioClient(`http://localhost:${serverPort}`, {
-      path: "/api/socket",
-      transports: ["websocket"],
-    });
+      path: '/api/socket',
+      transports: ['websocket'],
+    })
 
     // Wait for socket to connect
     await new Promise<void>((resolve, reject) => {
-      socket1.on("connect", () => resolve());
-      socket1.on("connect_error", (err) => reject(err));
-      setTimeout(() => reject(new Error("Connection timeout")), 2000);
-    });
+      socket1.on('connect', () => resolve())
+      socket1.on('connect_error', (err) => reject(err))
+      setTimeout(() => reject(new Error('Connection timeout')), 2000)
+    })
 
     // Small delay to ensure event handlers are set up
-    await new Promise((resolve) => setTimeout(resolve, 50));
+    await new Promise((resolve) => setTimeout(resolve, 50))
 
     // Set up listener for room-joined BEFORE emitting
     const roomJoinedPromise = new Promise<void>((resolve, reject) => {
-      socket1.on("room-joined", () => resolve());
-      socket1.on("room-error", (err) => reject(new Error(err.error)));
-      setTimeout(() => reject(new Error("Room-joined timeout")), 3000);
-    });
+      socket1.on('room-joined', () => resolve())
+      socket1.on('room-error', (err) => reject(new Error(err.error)))
+      setTimeout(() => reject(new Error('Room-joined timeout')), 3000)
+    })
 
     // Now emit the join-room event
-    socket1.emit("join-room", { roomId: testRoomId, userId: testGuestId1 });
+    socket1.emit('join-room', { roomId: testRoomId, userId: testGuestId1 })
 
     // Wait for confirmation
-    await roomJoinedPromise;
+    await roomJoinedPromise
 
     // Set up listener for member-joined event BEFORE User 2 joins
     const memberJoinedPromise = new Promise<any>((resolve, reject) => {
-      socket1.on("member-joined", (data) => {
-        resolve(data);
-      });
-      setTimeout(
-        () => reject(new Error("Timeout waiting for member-joined event")),
-        3000,
-      );
-    });
+      socket1.on('member-joined', (data) => {
+        resolve(data)
+      })
+      setTimeout(() => reject(new Error('Timeout waiting for member-joined event')), 3000)
+    })
 
     // User 2 joins the room via addRoomMember
     const { member: newMember } = await addRoomMember({
       roomId: testRoomId,
       userId: testGuestId2,
-      displayName: "User 2",
+      displayName: 'User 2',
       isCreator: false,
-    });
+    })
 
     // Manually trigger the broadcast (this is what the API route SHOULD do)
-    const { getRoomMembers } = await import(
-      "../src/lib/arcade/room-membership"
-    );
-    const { getRoomActivePlayers } = await import(
-      "../src/lib/arcade/player-manager"
-    );
+    const { getRoomMembers } = await import('../src/lib/arcade/room-membership')
+    const { getRoomActivePlayers } = await import('../src/lib/arcade/player-manager')
 
-    const members = await getRoomMembers(testRoomId);
-    const memberPlayers = await getRoomActivePlayers(testRoomId);
+    const members = await getRoomMembers(testRoomId)
+    const memberPlayers = await getRoomActivePlayers(testRoomId)
 
-    const memberPlayersObj: Record<string, any[]> = {};
+    const memberPlayersObj: Record<string, any[]> = {}
     for (const [uid, players] of memberPlayers.entries()) {
-      memberPlayersObj[uid] = players;
+      memberPlayersObj[uid] = players
     }
 
-    io.to(`room:${testRoomId}`).emit("member-joined", {
+    io.to(`room:${testRoomId}`).emit('member-joined', {
       roomId: testRoomId,
       userId: testGuestId2,
       members,
       memberPlayers: memberPlayersObj,
-    });
+    })
 
     // Wait for the socket broadcast with timeout
-    const data = await memberJoinedPromise;
+    const data = await memberJoinedPromise
 
     // Verify the broadcast data
-    expect(data).toBeDefined();
-    expect(data.roomId).toBe(testRoomId);
-    expect(data.userId).toBe(testGuestId2);
-    expect(data.members).toBeDefined();
-    expect(Array.isArray(data.members)).toBe(true);
+    expect(data).toBeDefined()
+    expect(data.roomId).toBe(testRoomId)
+    expect(data.userId).toBe(testGuestId2)
+    expect(data.members).toBeDefined()
+    expect(Array.isArray(data.members)).toBe(true)
 
     // Verify both users are in the members list
-    const memberUserIds = data.members.map((m: any) => m.userId);
-    expect(memberUserIds).toContain(testGuestId1);
-    expect(memberUserIds).toContain(testGuestId2);
+    const memberUserIds = data.members.map((m: any) => m.userId)
+    expect(memberUserIds).toContain(testGuestId1)
+    expect(memberUserIds).toContain(testGuestId2)
 
     // Verify the new member details
-    const addedMember = data.members.find(
-      (m: any) => m.userId === testGuestId2,
-    );
-    expect(addedMember).toBeDefined();
-    expect(addedMember.displayName).toBe("User 2");
-    expect(addedMember.roomId).toBe(testRoomId);
-  });
+    const addedMember = data.members.find((m: any) => m.userId === testGuestId2)
+    expect(addedMember).toBeDefined()
+    expect(addedMember.displayName).toBe('User 2')
+    expect(addedMember.roomId).toBe(testRoomId)
+  })
 
-  it("should broadcast member-left when a user leaves via API", async () => {
+  it('should broadcast member-left when a user leaves via API', async () => {
     // User 1 joins the room first
     await addRoomMember({
       roomId: testRoomId,
       userId: testGuestId1,
-      displayName: "User 1",
+      displayName: 'User 1',
       isCreator: false,
-    });
+    })
 
     // User 2 joins the room
     await addRoomMember({
       roomId: testRoomId,
       userId: testGuestId2,
-      displayName: "User 2",
+      displayName: 'User 2',
       isCreator: false,
-    });
+    })
 
     // User 1 connects to socket
     socket1 = ioClient(`http://localhost:${serverPort}`, {
-      path: "/api/socket",
-      transports: ["websocket"],
-    });
+      path: '/api/socket',
+      transports: ['websocket'],
+    })
 
     await new Promise<void>((resolve) => {
-      socket1.on("connect", () => resolve());
-    });
+      socket1.on('connect', () => resolve())
+    })
 
-    socket1.emit("join-room", { roomId: testRoomId, userId: testGuestId1 });
+    socket1.emit('join-room', { roomId: testRoomId, userId: testGuestId1 })
 
     await new Promise<void>((resolve) => {
-      socket1.on("room-joined", () => resolve());
-    });
+      socket1.on('room-joined', () => resolve())
+    })
 
     // Set up listener for member-left event
     const memberLeftPromise = new Promise<any>((resolve) => {
-      socket1.on("member-left", (data) => {
-        resolve(data);
-      });
-    });
+      socket1.on('member-left', (data) => {
+        resolve(data)
+      })
+    })
 
     // User 2 leaves the room via API
-    await db
-      .delete(schema.roomMembers)
-      .where(eq(schema.roomMembers.userId, testGuestId2));
+    await db.delete(schema.roomMembers).where(eq(schema.roomMembers.userId, testGuestId2))
 
     // Manually trigger the leave broadcast (simulating what the API does)
-    const { getSocketIO } = await import("../src/lib/socket-io");
-    const io = await getSocketIO();
+    const { getSocketIO } = await import('../src/lib/socket-io')
+    const io = await getSocketIO()
     if (io) {
-      const { getRoomMembers } = await import(
-        "../src/lib/arcade/room-membership"
-      );
-      const { getRoomActivePlayers } = await import(
-        "../src/lib/arcade/player-manager"
-      );
+      const { getRoomMembers } = await import('../src/lib/arcade/room-membership')
+      const { getRoomActivePlayers } = await import('../src/lib/arcade/player-manager')
 
-      const members = await getRoomMembers(testRoomId);
-      const memberPlayers = await getRoomActivePlayers(testRoomId);
+      const members = await getRoomMembers(testRoomId)
+      const memberPlayers = await getRoomActivePlayers(testRoomId)
 
-      const memberPlayersObj: Record<string, any[]> = {};
+      const memberPlayersObj: Record<string, any[]> = {}
       for (const [uid, players] of memberPlayers.entries()) {
-        memberPlayersObj[uid] = players;
+        memberPlayersObj[uid] = players
       }
 
-      io.to(`room:${testRoomId}`).emit("member-left", {
+      io.to(`room:${testRoomId}`).emit('member-left', {
         roomId: testRoomId,
         userId: testGuestId2,
         members,
         memberPlayers: memberPlayersObj,
-      });
+      })
     }
 
     // Wait for the socket broadcast with timeout
     const data = await Promise.race([
       memberLeftPromise,
       new Promise((_, reject) =>
-        setTimeout(
-          () => reject(new Error("Timeout waiting for member-left event")),
-          2000,
-        ),
+        setTimeout(() => reject(new Error('Timeout waiting for member-left event')), 2000)
       ),
-    ]);
+    ])
 
     // Verify the broadcast data
-    expect(data).toBeDefined();
-    expect(data.roomId).toBe(testRoomId);
-    expect(data.userId).toBe(testGuestId2);
-    expect(data.members).toBeDefined();
-    expect(Array.isArray(data.members)).toBe(true);
+    expect(data).toBeDefined()
+    expect(data.roomId).toBe(testRoomId)
+    expect(data.userId).toBe(testGuestId2)
+    expect(data.members).toBeDefined()
+    expect(Array.isArray(data.members)).toBe(true)
 
     // Verify User 2 is no longer in the members list
-    const memberUserIds = data.members.map((m: any) => m.userId);
-    expect(memberUserIds).toContain(testGuestId1);
-    expect(memberUserIds).not.toContain(testGuestId2);
-  });
+    const memberUserIds = data.members.map((m: any) => m.userId)
+    expect(memberUserIds).toContain(testGuestId1)
+    expect(memberUserIds).not.toContain(testGuestId2)
+  })
 
-  it("should update both members and players lists in member-joined broadcast", async () => {
+  it('should update both members and players lists in member-joined broadcast', async () => {
     // Create an active player for User 2
     const [player2] = await db
       .insert(schema.players)
       .values({
         userId: testUserId2,
-        name: "Player 2",
-        emoji: "🎮",
-        color: "#3b82f6",
+        name: 'Player 2',
+        emoji: '🎮',
+        color: '#3b82f6',
         isActive: true,
       })
-      .returning();
+      .returning()
 
     // User 1 connects and joins room
     socket1 = ioClient(`http://localhost:${serverPort}`, {
-      path: "/api/socket",
-      transports: ["websocket"],
-    });
+      path: '/api/socket',
+      transports: ['websocket'],
+    })
 
     await new Promise<void>((resolve) => {
-      socket1.on("connect", () => resolve());
-    });
+      socket1.on('connect', () => resolve())
+    })
 
-    socket1.emit("join-room", { roomId: testRoomId, userId: testGuestId1 });
+    socket1.emit('join-room', { roomId: testRoomId, userId: testGuestId1 })
 
     await new Promise<void>((resolve) => {
-      socket1.on("room-joined", () => resolve());
-    });
+      socket1.on('room-joined', () => resolve())
+    })
 
     const memberJoinedPromise = new Promise<any>((resolve) => {
-      socket1.on("member-joined", (data) => {
-        resolve(data);
-      });
-    });
+      socket1.on('member-joined', (data) => {
+        resolve(data)
+      })
+    })
 
     // User 2 joins via API
     await addRoomMember({
       roomId: testRoomId,
       userId: testGuestId2,
-      displayName: "User 2",
+      displayName: 'User 2',
       isCreator: false,
-    });
+    })
 
     // Manually trigger the broadcast (simulating what the API does)
-    const { getRoomMembers: getRoomMembers3 } = await import(
-      "../src/lib/arcade/room-membership"
-    );
+    const { getRoomMembers: getRoomMembers3 } = await import('../src/lib/arcade/room-membership')
     const { getRoomActivePlayers: getRoomActivePlayers3 } = await import(
-      "../src/lib/arcade/player-manager"
-    );
+      '../src/lib/arcade/player-manager'
+    )
 
-    const members2 = await getRoomMembers3(testRoomId);
-    const memberPlayers2 = await getRoomActivePlayers3(testRoomId);
+    const members2 = await getRoomMembers3(testRoomId)
+    const memberPlayers2 = await getRoomActivePlayers3(testRoomId)
 
-    const memberPlayersObj2: Record<string, any[]> = {};
+    const memberPlayersObj2: Record<string, any[]> = {}
     for (const [uid, players] of memberPlayers2.entries()) {
-      memberPlayersObj2[uid] = players;
+      memberPlayersObj2[uid] = players
     }
 
-    io.to(`room:${testRoomId}`).emit("member-joined", {
+    io.to(`room:${testRoomId}`).emit('member-joined', {
       roomId: testRoomId,
       userId: testGuestId2,
       members: members2,
       memberPlayers: memberPlayersObj2,
-    });
+    })
 
     const data = await Promise.race([
       memberJoinedPromise,
-      new Promise((_, reject) =>
-        setTimeout(() => reject(new Error("Timeout")), 2000),
-      ),
-    ]);
+      new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), 2000)),
+    ])
 
     // Verify members list is updated
-    expect(data.members).toBeDefined();
-    const memberUserIds = data.members.map((m: any) => m.userId);
-    expect(memberUserIds).toContain(testGuestId2);
+    expect(data.members).toBeDefined()
+    const memberUserIds = data.members.map((m: any) => m.userId)
+    expect(memberUserIds).toContain(testGuestId2)
 
     // Verify players list is updated
-    expect(data.memberPlayers).toBeDefined();
-    expect(data.memberPlayers[testGuestId2]).toBeDefined();
-    expect(Array.isArray(data.memberPlayers[testGuestId2])).toBe(true);
+    expect(data.memberPlayers).toBeDefined()
+    expect(data.memberPlayers[testGuestId2]).toBeDefined()
+    expect(Array.isArray(data.memberPlayers[testGuestId2])).toBe(true)
 
     // User 2's players should include the active player we created
-    const user2Players = data.memberPlayers[testGuestId2];
-    expect(user2Players.length).toBeGreaterThan(0);
-    expect(user2Players.some((p: any) => p.id === player2.id)).toBe(true);
+    const user2Players = data.memberPlayers[testGuestId2]
+    expect(user2Players.length).toBeGreaterThan(0)
+    expect(user2Players.some((p: any) => p.id === player2.id)).toBe(true)
 
     // Clean up player
-    await db.delete(schema.players).where(eq(schema.players.id, player2.id));
-  });
-});
+    await db.delete(schema.players).where(eq(schema.players.id, player2.id))
+  })
+})
diff --git a/apps/web/biome.jsonc b/apps/web/biome.jsonc
index bb5b18d7..e1b33f1e 100644
--- a/apps/web/biome.jsonc
+++ b/apps/web/biome.jsonc
@@ -4,7 +4,7 @@
     "enabled": true,
     "indentStyle": "space",
     "indentWidth": 2,
-    "lineWidth": 100,
+    "lineWidth": 100
   },
   "linter": {
     "enabled": true,
@@ -16,19 +16,19 @@
         "noLabelWithoutControl": "off",
         "noStaticElementInteractions": "off",
         "useKeyWithClickEvents": "off",
-        "useSemanticElements": "off",
+        "useSemanticElements": "off"
       },
       "suspicious": {
         "noExplicitAny": "off",
         "noArrayIndexKey": "off",
         "noImplicitAnyLet": "off",
         "noAssignInExpressions": "off",
-        "useIterableCallbackReturn": "off",
+        "useIterableCallbackReturn": "off"
       },
       "style": {
         "useNodejsImportProtocol": "off",
         "noNonNullAssertion": "off",
-        "noDescendingSpecificity": "off",
+        "noDescendingSpecificity": "off"
       },
       "correctness": {
         "noUnusedVariables": "off",
@@ -39,31 +39,31 @@
         "noInvalidUseBeforeDeclaration": "off",
         "useHookAtTopLevel": "off",
         "noNestedComponentDefinitions": "off",
-        "noUnreachable": "off",
+        "noUnreachable": "off"
       },
       "security": {
-        "noDangerouslySetInnerHtml": "off",
+        "noDangerouslySetInnerHtml": "off"
       },
       "performance": {
-        "noAccumulatingSpread": "off",
-      },
-    },
+        "noAccumulatingSpread": "off"
+      }
+    }
   },
   "files": {
-    "ignoreUnknown": true,
+    "ignoreUnknown": true
   },
   "vcs": {
     "enabled": true,
     "clientKind": "git",
     "useIgnoreFile": true,
-    "defaultBranch": "main",
+    "defaultBranch": "main"
   },
   "javascript": {
     "formatter": {
       "quoteStyle": "single",
       "jsxQuoteStyle": "double",
       "semicolons": "asNeeded",
-      "trailingCommas": "es5",
-    },
-  },
+      "trailingCommas": "es5"
+    }
+  }
 }
diff --git a/apps/web/data/uploads/1b18daa4-e6fb-44c8-8d3d-c96c9f5afa01.jpg b/apps/web/data/uploads/1b18daa4-e6fb-44c8-8d3d-c96c9f5afa01.jpg
new file mode 100644
index 00000000..87fd9a31
Binary files /dev/null and b/apps/web/data/uploads/1b18daa4-e6fb-44c8-8d3d-c96c9f5afa01.jpg differ
diff --git a/apps/web/data/uploads/39ed57c6-fadd-4845-8caf-67189c97ddc1.jpg b/apps/web/data/uploads/39ed57c6-fadd-4845-8caf-67189c97ddc1.jpg
new file mode 100644
index 00000000..5e8ee7d2
Binary files /dev/null and b/apps/web/data/uploads/39ed57c6-fadd-4845-8caf-67189c97ddc1.jpg differ
diff --git a/apps/web/data/uploads/5c5bdde8-ad09-42cc-841d-1358032a061d.jpg b/apps/web/data/uploads/5c5bdde8-ad09-42cc-841d-1358032a061d.jpg
new file mode 100644
index 00000000..7fcd3cd3
Binary files /dev/null and b/apps/web/data/uploads/5c5bdde8-ad09-42cc-841d-1358032a061d.jpg differ
diff --git a/apps/web/data/uploads/788e16eb-81c7-48a3-981b-a6ed631c7485.jpg b/apps/web/data/uploads/788e16eb-81c7-48a3-981b-a6ed631c7485.jpg
new file mode 100644
index 00000000..d9c1c510
Binary files /dev/null and b/apps/web/data/uploads/788e16eb-81c7-48a3-981b-a6ed631c7485.jpg differ
diff --git a/apps/web/data/uploads/7ba7f6bd-dae7-4d9f-ad35-724b058397a8.jpg b/apps/web/data/uploads/7ba7f6bd-dae7-4d9f-ad35-724b058397a8.jpg
new file mode 100644
index 00000000..6d8f16b1
Binary files /dev/null and b/apps/web/data/uploads/7ba7f6bd-dae7-4d9f-ad35-724b058397a8.jpg differ
diff --git a/apps/web/data/uploads/86a7312f-da59-4b94-a377-f8ea94192c4e.jpg b/apps/web/data/uploads/86a7312f-da59-4b94-a377-f8ea94192c4e.jpg
new file mode 100644
index 00000000..a8213cd4
Binary files /dev/null and b/apps/web/data/uploads/86a7312f-da59-4b94-a377-f8ea94192c4e.jpg differ
diff --git a/apps/web/data/uploads/88bf1d94-795b-4093-a691-d11f29769d22.jpg b/apps/web/data/uploads/88bf1d94-795b-4093-a691-d11f29769d22.jpg
new file mode 100644
index 00000000..e25f80ba
Binary files /dev/null and b/apps/web/data/uploads/88bf1d94-795b-4093-a691-d11f29769d22.jpg differ
diff --git a/apps/web/data/uploads/8e3f6ed1-f8ac-45af-9205-84eed4686087.jpg b/apps/web/data/uploads/8e3f6ed1-f8ac-45af-9205-84eed4686087.jpg
new file mode 100644
index 00000000..05651ef9
Binary files /dev/null and b/apps/web/data/uploads/8e3f6ed1-f8ac-45af-9205-84eed4686087.jpg differ
diff --git a/apps/web/data/uploads/901726bb-2e72-4888-a576-7e62d8a48167.jpg b/apps/web/data/uploads/901726bb-2e72-4888-a576-7e62d8a48167.jpg
new file mode 100644
index 00000000..7f4d0268
Binary files /dev/null and b/apps/web/data/uploads/901726bb-2e72-4888-a576-7e62d8a48167.jpg differ
diff --git a/apps/web/data/uploads/9063c46b-a336-4ea7-be15-47b353d02132.jpg b/apps/web/data/uploads/9063c46b-a336-4ea7-be15-47b353d02132.jpg
new file mode 100644
index 00000000..d93bafad
Binary files /dev/null and b/apps/web/data/uploads/9063c46b-a336-4ea7-be15-47b353d02132.jpg differ
diff --git a/apps/web/data/uploads/9fc2f199-ec4d-46b0-bf2b-8c760a1d958b.jpg b/apps/web/data/uploads/9fc2f199-ec4d-46b0-bf2b-8c760a1d958b.jpg
new file mode 100644
index 00000000..91b1168e
Binary files /dev/null and b/apps/web/data/uploads/9fc2f199-ec4d-46b0-bf2b-8c760a1d958b.jpg differ
diff --git a/apps/web/data/uploads/b4d2ed4d-9773-4153-9209-616f37d359f8.jpg b/apps/web/data/uploads/b4d2ed4d-9773-4153-9209-616f37d359f8.jpg
new file mode 100644
index 00000000..1e229722
Binary files /dev/null and b/apps/web/data/uploads/b4d2ed4d-9773-4153-9209-616f37d359f8.jpg differ
diff --git a/apps/web/data/uploads/e1d38f96-8988-4bbf-8a90-51ba9cf17826.jpg b/apps/web/data/uploads/e1d38f96-8988-4bbf-8a90-51ba9cf17826.jpg
new file mode 100644
index 00000000..cafc6c26
Binary files /dev/null and b/apps/web/data/uploads/e1d38f96-8988-4bbf-8a90-51ba9cf17826.jpg differ
diff --git a/apps/web/data/uploads/e80fd031-c8ea-4faa-ba3e-5981c58bcc78.jpg b/apps/web/data/uploads/e80fd031-c8ea-4faa-ba3e-5981c58bcc78.jpg
new file mode 100644
index 00000000..e284a7db
Binary files /dev/null and b/apps/web/data/uploads/e80fd031-c8ea-4faa-ba3e-5981c58bcc78.jpg differ
diff --git a/apps/web/drizzle.config.ts b/apps/web/drizzle.config.ts
index ccca8b3c..c7176122 100644
--- a/apps/web/drizzle.config.ts
+++ b/apps/web/drizzle.config.ts
@@ -1,12 +1,12 @@
-import type { Config } from "drizzle-kit";
+import type { Config } from 'drizzle-kit'
 
 export default {
-  schema: "./src/db/schema/index.ts",
-  out: "./drizzle",
-  dialect: "sqlite",
+  schema: './src/db/schema/index.ts',
+  out: './drizzle',
+  dialect: 'sqlite',
   dbCredentials: {
-    url: process.env.DATABASE_URL || "./data/sqlite.db",
+    url: process.env.DATABASE_URL || './data/sqlite.db',
   },
   verbose: true,
   strict: true,
-} satisfies Config;
+} satisfies Config
diff --git a/apps/web/drizzle/meta/0020_snapshot.json b/apps/web/drizzle/meta/0020_snapshot.json
index f0fe507b..d25c8942 100644
--- a/apps/web/drizzle/meta/0020_snapshot.json
+++ b/apps/web/drizzle/meta/0020_snapshot.json
@@ -116,13 +116,9 @@
         "abacus_settings_user_id_users_id_fk": {
           "name": "abacus_settings_user_id_users_id_fk",
           "tableFrom": "abacus_settings",
-          "columnsFrom": [
-            "user_id"
-          ],
+          "columnsFrom": ["user_id"],
           "tableTo": "users",
-          "columnsTo": [
-            "id"
-          ],
+          "columnsTo": ["id"],
           "onUpdate": "no action",
           "onDelete": "cascade"
         }
@@ -240,9 +236,7 @@
       "indexes": {
         "arcade_rooms_code_unique": {
           "name": "arcade_rooms_code_unique",
-          "columns": [
-            "code"
-          ],
+          "columns": ["code"],
           "isUnique": true
         }
       },
@@ -339,26 +333,18 @@
         "arcade_sessions_room_id_arcade_rooms_id_fk": {
           "name": "arcade_sessions_room_id_arcade_rooms_id_fk",
           "tableFrom": "arcade_sessions",
-          "columnsFrom": [
-            "room_id"
-          ],
+          "columnsFrom": ["room_id"],
           "tableTo": "arcade_rooms",
-          "columnsTo": [
-            "id"
-          ],
+          "columnsTo": ["id"],
           "onUpdate": "no action",
           "onDelete": "cascade"
         },
         "arcade_sessions_user_id_users_id_fk": {
           "name": "arcade_sessions_user_id_users_id_fk",
           "tableFrom": "arcade_sessions",
-          "columnsFrom": [
-            "user_id"
-          ],
+          "columnsFrom": ["user_id"],
           "tableTo": "users",
-          "columnsTo": [
-            "id"
-          ],
+          "columnsTo": ["id"],
           "onUpdate": "no action",
           "onDelete": "cascade"
         }
@@ -424,9 +410,7 @@
       "indexes": {
         "players_user_id_idx": {
           "name": "players_user_id_idx",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": false
         }
       },
@@ -434,13 +418,9 @@
         "players_user_id_users_id_fk": {
           "name": "players_user_id_users_id_fk",
           "tableFrom": "players",
-          "columnsFrom": [
-            "user_id"
-          ],
+          "columnsFrom": ["user_id"],
           "tableTo": "users",
-          "columnsTo": [
-            "id"
-          ],
+          "columnsTo": ["id"],
           "onUpdate": "no action",
           "onDelete": "cascade"
         }
@@ -514,9 +494,7 @@
       "indexes": {
         "idx_room_members_user_id_unique": {
           "name": "idx_room_members_user_id_unique",
-          "columns": [
-            "user_id"
-          ],
+          "columns": ["user_id"],
           "isUnique": true
         }
       },
@@ -524,13 +502,9 @@
         "room_members_room_id_arcade_rooms_id_fk": {
           "name": "room_members_room_id_arcade_rooms_id_fk",
           "tableFrom": "room_members",
-          "columnsFrom": [
-            "room_id"
-          ],
+          "columnsFrom": ["room_id"],
           "tableTo": "arcade_rooms",
-          "columnsTo": [
-            "id"
-          ],
+          "columnsTo": ["id"],
           "onUpdate": "no action",
           "onDelete": "cascade"
         }
@@ -605,13 +579,9 @@
         "room_member_history_room_id_arcade_rooms_id_fk": {
           "name": "room_member_history_room_id_arcade_rooms_id_fk",
           "tableFrom": "room_member_history",
-          "columnsFrom": [
-            "room_id"
-          ],
+          "columnsFrom": ["room_id"],
           "tableTo": "arcade_rooms",
-          "columnsTo": [
-            "id"
-          ],
+          "columnsTo": ["id"],
           "onUpdate": "no action",
           "onDelete": "cascade"
         }
@@ -713,10 +683,7 @@
       "indexes": {
         "idx_room_invitations_user_room": {
           "name": "idx_room_invitations_user_room",
-          "columns": [
-            "user_id",
-            "room_id"
-          ],
+          "columns": ["user_id", "room_id"],
           "isUnique": true
         }
       },
@@ -724,13 +691,9 @@
         "room_invitations_room_id_arcade_rooms_id_fk": {
           "name": "room_invitations_room_id_arcade_rooms_id_fk",
           "tableFrom": "room_invitations",
-          "columnsFrom": [
-            "room_id"
-          ],
+          "columnsFrom": ["room_id"],
           "tableTo": "arcade_rooms",
-          "columnsTo": [
-            "id"
-          ],
+          "columnsTo": ["id"],
           "onUpdate": "no action",
           "onDelete": "cascade"
         }
@@ -833,13 +796,9 @@
         "room_reports_room_id_arcade_rooms_id_fk": {
           "name": "room_reports_room_id_arcade_rooms_id_fk",
           "tableFrom": "room_reports",
-          "columnsFrom": [
-            "room_id"
-          ],
+          "columnsFrom": ["room_id"],
           "tableTo": "arcade_rooms",
-          "columnsTo": [
-            "id"
-          ],
+          "columnsTo": ["id"],
           "onUpdate": "no action",
           "onDelete": "cascade"
         }
@@ -918,10 +877,7 @@
       "indexes": {
         "idx_room_bans_user_room": {
           "name": "idx_room_bans_user_room",
-          "columns": [
-            "user_id",
-            "room_id"
-          ],
+          "columns": ["user_id", "room_id"],
           "isUnique": true
         }
       },
@@ -929,13 +885,9 @@
         "room_bans_room_id_arcade_rooms_id_fk": {
           "name": "room_bans_room_id_arcade_rooms_id_fk",
           "tableFrom": "room_bans",
-          "columnsFrom": [
-            "room_id"
-          ],
+          "columnsFrom": ["room_id"],
           "tableTo": "arcade_rooms",
-          "columnsTo": [
-            "id"
-          ],
+          "columnsTo": ["id"],
           "onUpdate": "no action",
           "onDelete": "cascade"
         }
@@ -998,13 +950,9 @@
         "user_stats_user_id_users_id_fk": {
           "name": "user_stats_user_id_users_id_fk",
           "tableFrom": "user_stats",
-          "columnsFrom": [
-            "user_id"
-          ],
+          "columnsFrom": ["user_id"],
           "tableTo": "users",
-          "columnsTo": [
-            "id"
-          ],
+          "columnsTo": ["id"],
           "onUpdate": "no action",
           "onDelete": "cascade"
         }
@@ -1062,16 +1010,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
         }
       },
@@ -1091,4 +1035,4 @@
   "internal": {
     "indexes": {}
   }
-}
\ No newline at end of file
+}
diff --git a/apps/web/drizzle/meta/_journal.json b/apps/web/drizzle/meta/_journal.json
index cc30afba..d7b23fb8 100644
--- a/apps/web/drizzle/meta/_journal.json
+++ b/apps/web/drizzle/meta/_journal.json
@@ -150,4 +150,4 @@
       "breakpoints": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/apps/web/e2e/arcade-modal-session.spec.ts b/apps/web/e2e/arcade-modal-session.spec.ts
index 8fb99df6..73bcd3ea 100644
--- a/apps/web/e2e/arcade-modal-session.spec.ts
+++ b/apps/web/e2e/arcade-modal-session.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from '@playwright/test'
 
 /**
  * Arcade Modal Session E2E Tests
@@ -10,363 +10,329 @@ import { expect, test } from "@playwright/test";
  * - "Return to Arcade" button properly ends sessions
  */
 
-test.describe("Arcade Modal Session - Redirects", () => {
+test.describe('Arcade Modal Session - Redirects', () => {
   test.beforeEach(async ({ page }) => {
     // Clear arcade session before each test
-    await page.goto("/arcade");
-    await page.waitForLoadState("networkidle");
+    await page.goto('/arcade')
+    await page.waitForLoadState('networkidle')
 
     // Click "Return to Arcade" button if it exists (to clear any existing session)
-    const returnButton = page.locator('button:has-text("Return to Arcade")');
+    const returnButton = page.locator('button:has-text("Return to Arcade")')
     if (await returnButton.isVisible({ timeout: 1000 }).catch(() => false)) {
-      await returnButton.click();
-      await page.waitForLoadState("networkidle");
+      await returnButton.click()
+      await page.waitForLoadState('networkidle')
     }
-  });
+  })
 
-  test("should stay on arcade lobby when no active session", async ({
-    page,
-  }) => {
-    await page.goto("/arcade");
-    await page.waitForLoadState("networkidle");
+  test('should stay on arcade lobby when no active session', async ({ page }) => {
+    await page.goto('/arcade')
+    await page.waitForLoadState('networkidle')
 
     // Should see "Champion Arena" title
-    const title = page.locator('h1:has-text("Champion Arena")');
-    await expect(title).toBeVisible();
+    const title = page.locator('h1:has-text("Champion Arena")')
+    await expect(title).toBeVisible()
 
     // Should be able to select players
-    const playerSection = page.locator("text=/Player|Select|Add/i");
-    await expect(playerSection.first()).toBeVisible();
-  });
+    const playerSection = page.locator('text=/Player|Select|Add/i')
+    await expect(playerSection.first()).toBeVisible()
+  })
 
-  test("should redirect from arcade to active game when session exists", async ({
-    page,
-  }) => {
+  test('should redirect from arcade to active game when session exists', async ({ page }) => {
     // Start a game to create a session
-    await page.goto("/arcade");
-    await page.waitForLoadState("networkidle");
+    await page.goto('/arcade')
+    await page.waitForLoadState('networkidle')
 
     // Find and click a player card to activate
-    const playerCard = page.locator('[data-testid="player-card"]').first();
+    const playerCard = page.locator('[data-testid="player-card"]').first()
     if (await playerCard.isVisible({ timeout: 2000 }).catch(() => false)) {
-      await playerCard.click();
-      await page.waitForTimeout(500);
+      await playerCard.click()
+      await page.waitForTimeout(500)
     }
 
     // Navigate to matching game to create session
-    await page.goto("/arcade/matching");
-    await page.waitForLoadState("networkidle");
+    await page.goto('/arcade/matching')
+    await page.waitForLoadState('networkidle')
 
     // Start the game (click Start button if visible)
-    const startButton = page.locator('button:has-text("Start")');
+    const startButton = page.locator('button:has-text("Start")')
     if (await startButton.isVisible({ timeout: 2000 }).catch(() => false)) {
-      await startButton.click();
-      await page.waitForTimeout(1000);
+      await startButton.click()
+      await page.waitForTimeout(1000)
     }
 
     // Try to navigate back to arcade lobby
-    await page.goto("/arcade");
-    await page.waitForTimeout(2000); // Give time for redirect
+    await page.goto('/arcade')
+    await page.waitForTimeout(2000) // Give time for redirect
 
     // Should be redirected back to the game
-    await expect(page).toHaveURL(/\/arcade\/matching/);
-    const gameTitle = page.locator('h1:has-text("Memory Pairs")');
-    await expect(gameTitle).toBeVisible();
-  });
+    await expect(page).toHaveURL(/\/arcade\/matching/)
+    const gameTitle = page.locator('h1:has-text("Memory Pairs")')
+    await expect(gameTitle).toBeVisible()
+  })
 
-  test("should redirect to correct game when navigating to wrong game", async ({
-    page,
-  }) => {
+  test('should redirect to correct game when navigating to wrong game', async ({ page }) => {
     // Create a session with matching game
-    await page.goto("/arcade");
-    await page.waitForLoadState("networkidle");
+    await page.goto('/arcade')
+    await page.waitForLoadState('networkidle')
 
     // Activate a player
-    const addPlayerButton = page.locator(
-      'button:has-text("Add Player"), button:has-text("+")',
-    );
+    const addPlayerButton = page.locator('button:has-text("Add Player"), button:has-text("+")')
     if (
       await addPlayerButton
         .first()
         .isVisible({ timeout: 2000 })
         .catch(() => false)
     ) {
-      await addPlayerButton.first().click();
-      await page.waitForTimeout(500);
+      await addPlayerButton.first().click()
+      await page.waitForTimeout(500)
     }
 
     // Go to matching game
-    await page.goto("/arcade/matching");
-    await page.waitForLoadState("networkidle");
+    await page.goto('/arcade/matching')
+    await page.waitForLoadState('networkidle')
 
     // Start game if needed
-    const startButton = page.locator('button:has-text("Start")');
+    const startButton = page.locator('button:has-text("Start")')
     if (await startButton.isVisible({ timeout: 2000 }).catch(() => false)) {
-      await startButton.click();
-      await page.waitForTimeout(1000);
+      await startButton.click()
+      await page.waitForTimeout(1000)
     }
 
     // Try to navigate to a different game
-    await page.goto("/arcade/memory-quiz");
-    await page.waitForTimeout(2000); // Give time for redirect
+    await page.goto('/arcade/memory-quiz')
+    await page.waitForTimeout(2000) // Give time for redirect
 
     // Should be redirected back to matching
-    await expect(page).toHaveURL(/\/arcade\/matching/);
-  });
+    await expect(page).toHaveURL(/\/arcade\/matching/)
+  })
 
-  test("should NOT redirect when on correct game page", async ({ page }) => {
+  test('should NOT redirect when on correct game page', async ({ page }) => {
     // Navigate to matching game
-    await page.goto("/arcade/matching");
-    await page.waitForLoadState("networkidle");
+    await page.goto('/arcade/matching')
+    await page.waitForLoadState('networkidle')
 
     // Should stay on matching page
-    await expect(page).toHaveURL(/\/arcade\/matching/);
-    const gameTitle = page.locator('h1:has-text("Memory Pairs")');
-    await expect(gameTitle).toBeVisible();
-  });
-});
+    await expect(page).toHaveURL(/\/arcade\/matching/)
+    const gameTitle = page.locator('h1:has-text("Memory Pairs")')
+    await expect(gameTitle).toBeVisible()
+  })
+})
 
-test.describe("Arcade Modal Session - Player Modification Blocking", () => {
+test.describe('Arcade Modal Session - Player Modification Blocking', () => {
   test.beforeEach(async ({ page }) => {
     // Clear session
-    await page.goto("/arcade");
-    await page.waitForLoadState("networkidle");
+    await page.goto('/arcade')
+    await page.waitForLoadState('networkidle')
 
-    const returnButton = page.locator('button:has-text("Return to Arcade")');
+    const returnButton = page.locator('button:has-text("Return to Arcade")')
     if (await returnButton.isVisible({ timeout: 1000 }).catch(() => false)) {
-      await returnButton.click();
-      await page.waitForLoadState("networkidle");
+      await returnButton.click()
+      await page.waitForLoadState('networkidle')
     }
-  });
+  })
 
-  test("should allow player modification in arcade lobby with no session", async ({
-    page,
-  }) => {
-    await page.goto("/arcade");
-    await page.waitForLoadState("networkidle");
+  test('should allow player modification in arcade lobby with no session', async ({ page }) => {
+    await page.goto('/arcade')
+    await page.waitForLoadState('networkidle')
 
     // Look for add player button (should be enabled)
-    const addPlayerButton = page.locator(
-      'button:has-text("Add Player"), button:has-text("+")',
-    );
-    const firstButton = addPlayerButton.first();
+    const addPlayerButton = page.locator('button:has-text("Add Player"), button:has-text("+")')
+    const firstButton = addPlayerButton.first()
 
     if (await firstButton.isVisible({ timeout: 2000 }).catch(() => false)) {
       // Should be clickable
-      await expect(firstButton).toBeEnabled();
+      await expect(firstButton).toBeEnabled()
 
       // Try to click it
-      await firstButton.click();
-      await page.waitForTimeout(500);
+      await firstButton.click()
+      await page.waitForTimeout(500)
 
       // Should see player added
-      const activePlayer = page.locator('[data-testid="active-player"]');
-      await expect(activePlayer.first()).toBeVisible({ timeout: 3000 });
+      const activePlayer = page.locator('[data-testid="active-player"]')
+      await expect(activePlayer.first()).toBeVisible({ timeout: 3000 })
     }
-  });
+  })
 
-  test("should block player modification during active game", async ({
-    page,
-  }) => {
+  test('should block player modification during active game', async ({ page }) => {
     // Start a game
-    await page.goto("/arcade/matching");
-    await page.waitForLoadState("networkidle");
+    await page.goto('/arcade/matching')
+    await page.waitForLoadState('networkidle')
 
     // Start game
-    const startButton = page.locator('button:has-text("Start")');
+    const startButton = page.locator('button:has-text("Start")')
     if (await startButton.isVisible({ timeout: 2000 }).catch(() => false)) {
-      await startButton.click();
-      await page.waitForTimeout(1000);
+      await startButton.click()
+      await page.waitForTimeout(1000)
     }
 
     // Look for player modification controls
     // They should be disabled or have reduced opacity
-    const playerControls = page.locator(
-      '[data-testid="player-controls"], .player-list',
-    );
+    const playerControls = page.locator('[data-testid="player-controls"], .player-list')
     if (await playerControls.isVisible({ timeout: 1000 }).catch(() => false)) {
       // Check if controls have pointer-events: none or low opacity
       const opacity = await playerControls.evaluate((el) => {
-        return window.getComputedStyle(el).opacity;
-      });
+        return window.getComputedStyle(el).opacity
+      })
 
       // If controls are visible, they should be dimmed (opacity < 1)
       if (parseFloat(opacity) < 1) {
-        expect(parseFloat(opacity)).toBeLessThan(1);
+        expect(parseFloat(opacity)).toBeLessThan(1)
       }
     }
 
     // "Add Player" button should not be visible during game
-    const addPlayerButton = page.locator('button:has-text("Add Player")');
+    const addPlayerButton = page.locator('button:has-text("Add Player")')
     if (await addPlayerButton.isVisible({ timeout: 500 }).catch(() => false)) {
       // If visible, should be disabled
-      const isDisabled = await addPlayerButton.isDisabled();
-      expect(isDisabled).toBe(true);
+      const isDisabled = await addPlayerButton.isDisabled()
+      expect(isDisabled).toBe(true)
     }
-  });
+  })
 
-  test('should show "Return to Arcade" button during game', async ({
-    page,
-  }) => {
+  test('should show "Return to Arcade" button during game', async ({ page }) => {
     // Start a game
-    await page.goto("/arcade/matching");
-    await page.waitForLoadState("networkidle");
+    await page.goto('/arcade/matching')
+    await page.waitForLoadState('networkidle')
 
     // Look for "Return to Arcade" button
-    const returnButton = page.locator('button:has-text("Return to Arcade")');
+    const returnButton = page.locator('button:has-text("Return to Arcade")')
 
     // During game setup, might see "Setup" button instead
-    const setupButton = page.locator('button:has-text("Setup")');
+    const setupButton = page.locator('button:has-text("Setup")')
 
     // One of these should be visible
-    const hasReturnButton = await returnButton
-      .isVisible({ timeout: 2000 })
-      .catch(() => false);
-    const hasSetupButton = await setupButton
-      .isVisible({ timeout: 2000 })
-      .catch(() => false);
+    const hasReturnButton = await returnButton.isVisible({ timeout: 2000 }).catch(() => false)
+    const hasSetupButton = await setupButton.isVisible({ timeout: 2000 }).catch(() => false)
 
-    expect(hasReturnButton || hasSetupButton).toBe(true);
-  });
+    expect(hasReturnButton || hasSetupButton).toBe(true)
+  })
 
-  test('should NOT show "Setup" button in arcade lobby with no session', async ({
-    page,
-  }) => {
-    await page.goto("/arcade");
-    await page.waitForLoadState("networkidle");
+  test('should NOT show "Setup" button in arcade lobby with no session', async ({ page }) => {
+    await page.goto('/arcade')
+    await page.waitForLoadState('networkidle')
 
     // Should NOT see "Return to Arcade" or "Setup" button in lobby
-    const returnButton = page.locator('button:has-text("Return to Arcade")');
-    const setupButton = page.locator('button:has-text("Setup")');
+    const returnButton = page.locator('button:has-text("Return to Arcade")')
+    const setupButton = page.locator('button:has-text("Setup")')
 
-    const hasReturnButton = await returnButton
-      .isVisible({ timeout: 1000 })
-      .catch(() => false);
-    const hasSetupButton = await setupButton
-      .isVisible({ timeout: 1000 })
-      .catch(() => false);
+    const hasReturnButton = await returnButton.isVisible({ timeout: 1000 }).catch(() => false)
+    const hasSetupButton = await setupButton.isVisible({ timeout: 1000 }).catch(() => false)
 
     // Neither should be visible in empty lobby
-    expect(hasReturnButton).toBe(false);
-    expect(hasSetupButton).toBe(false);
-  });
-});
+    expect(hasReturnButton).toBe(false)
+    expect(hasSetupButton).toBe(false)
+  })
+})
 
-test.describe("Arcade Modal Session - Return to Arcade Button", () => {
+test.describe('Arcade Modal Session - Return to Arcade Button', () => {
   test.beforeEach(async ({ page }) => {
     // Clear session
-    await page.goto("/arcade");
-    await page.waitForLoadState("networkidle");
-  });
+    await page.goto('/arcade')
+    await page.waitForLoadState('networkidle')
+  })
 
   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");
+    await page.goto('/arcade/matching')
+    await page.waitForLoadState('networkidle')
 
     // Start game if needed
-    const startButton = page.locator('button:has-text("Start")');
+    const startButton = page.locator('button:has-text("Start")')
     if (await startButton.isVisible({ timeout: 2000 }).catch(() => false)) {
-      await startButton.click();
-      await page.waitForTimeout(1000);
+      await startButton.click()
+      await page.waitForTimeout(1000)
     }
 
     // Find and click "Return to Arcade" button
-    const returnButton = page.locator('button:has-text("Return to Arcade")');
+    const returnButton = page.locator('button:has-text("Return to Arcade")')
     if (await returnButton.isVisible({ timeout: 2000 }).catch(() => false)) {
-      await returnButton.click();
-      await page.waitForTimeout(1000);
+      await returnButton.click()
+      await page.waitForTimeout(1000)
 
       // Should be redirected to arcade lobby
-      await expect(page).toHaveURL(/\/arcade\/?$/);
+      await expect(page).toHaveURL(/\/arcade\/?$/)
 
       // Should see arcade lobby title
-      const title = page.locator('h1:has-text("Champion Arena")');
-      await expect(title).toBeVisible();
+      const title = page.locator('h1:has-text("Champion Arena")')
+      await expect(title).toBeVisible()
 
       // Now should be able to modify players again
-      const addPlayerButton = page.locator(
-        'button:has-text("Add Player"), button:has-text("+")',
-      );
+      const addPlayerButton = page.locator('button:has-text("Add Player"), button:has-text("+")')
       if (
         await addPlayerButton
           .first()
           .isVisible({ timeout: 2000 })
           .catch(() => false)
       ) {
-        await expect(addPlayerButton.first()).toBeEnabled();
+        await expect(addPlayerButton.first()).toBeEnabled()
       }
     }
-  });
+  })
 
-  test("should allow navigating to different game after returning to arcade", async ({
-    page,
-  }) => {
+  test('should allow navigating to different game after returning to arcade', async ({ page }) => {
     // Start matching game
-    await page.goto("/arcade/matching");
-    await page.waitForLoadState("networkidle");
+    await page.goto('/arcade/matching')
+    await page.waitForLoadState('networkidle')
 
     // Return to arcade
     const returnButton = page.locator(
-      'button:has-text("Return to Arcade"), button:has-text("Setup")',
-    );
+      '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);
+      await returnButton.first().click()
+      await page.waitForTimeout(1000)
     }
 
     // Should be in arcade lobby
-    await expect(page).toHaveURL(/\/arcade\/?$/);
+    await expect(page).toHaveURL(/\/arcade\/?$/)
 
     // Now navigate to different game - should NOT redirect back to matching
-    await page.goto("/arcade/memory-quiz");
-    await page.waitForTimeout(2000);
+    await page.goto('/arcade/memory-quiz')
+    await page.waitForTimeout(2000)
 
     // Should stay on memory-quiz (not redirect back to matching)
-    await expect(page).toHaveURL(/\/arcade\/memory-quiz/);
+    await expect(page).toHaveURL(/\/arcade\/memory-quiz/)
 
     // Should see memory quiz title
-    const title = page.locator('h1:has-text("Memory Lightning")');
-    await expect(title).toBeVisible({ timeout: 3000 });
-  });
-});
+    const title = page.locator('h1:has-text("Memory Lightning")')
+    await expect(title).toBeVisible({ timeout: 3000 })
+  })
+})
 
-test.describe("Arcade Modal Session - Session Persistence", () => {
-  test("should maintain active session across page reloads", async ({
-    page,
-  }) => {
+test.describe('Arcade Modal Session - Session Persistence', () => {
+  test('should maintain active session across page reloads', async ({ page }) => {
     // Start a game
-    await page.goto("/arcade/matching");
-    await page.waitForLoadState("networkidle");
+    await page.goto('/arcade/matching')
+    await page.waitForLoadState('networkidle')
 
     // Start game
-    const startButton = page.locator('button:has-text("Start")');
+    const startButton = page.locator('button:has-text("Start")')
     if (await startButton.isVisible({ timeout: 2000 }).catch(() => false)) {
-      await startButton.click();
-      await page.waitForTimeout(1000);
+      await startButton.click()
+      await page.waitForTimeout(1000)
     }
 
     // Reload the page
-    await page.reload();
-    await page.waitForLoadState("networkidle");
+    await page.reload()
+    await page.waitForLoadState('networkidle')
 
     // Should still be on matching game
-    await expect(page).toHaveURL(/\/arcade\/matching/);
-    const gameTitle = page.locator('h1:has-text("Memory Pairs")');
-    await expect(gameTitle).toBeVisible();
+    await expect(page).toHaveURL(/\/arcade\/matching/)
+    const gameTitle = page.locator('h1:has-text("Memory Pairs")')
+    await expect(gameTitle).toBeVisible()
 
     // Try to navigate to arcade
-    await page.goto("/arcade");
-    await page.waitForTimeout(2000);
+    await page.goto('/arcade')
+    await page.waitForTimeout(2000)
 
     // Should be redirected back to matching
-    await expect(page).toHaveURL(/\/arcade\/matching/);
-  });
-});
+    await expect(page).toHaveURL(/\/arcade\/matching/)
+  })
+})
diff --git a/apps/web/e2e/join-room-flow.spec.ts b/apps/web/e2e/join-room-flow.spec.ts
index 6cb300fa..fbb2719d 100644
--- a/apps/web/e2e/join-room-flow.spec.ts
+++ b/apps/web/e2e/join-room-flow.spec.ts
@@ -1,333 +1,296 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from '@playwright/test'
 
-test.describe("Join Room Flow", () => {
-  test.describe("Room Creation", () => {
-    test("should create a room from the game page", async ({ page }) => {
+test.describe('Join Room Flow', () => {
+  test.describe('Room Creation', () => {
+    test('should create a room from the game page', async ({ page }) => {
       // Navigate to a game
-      await page.goto("/games/matching");
-      await page.waitForLoadState("networkidle");
+      await page.goto('/games/matching')
+      await page.waitForLoadState('networkidle')
 
       // Click the (+) Add Player button to open the popover
-      const addPlayerButton = page.locator('button[title="Add player"]');
-      await expect(addPlayerButton).toBeVisible();
-      await addPlayerButton.click();
+      const addPlayerButton = page.locator('button[title="Add player"]')
+      await expect(addPlayerButton).toBeVisible()
+      await addPlayerButton.click()
 
       // Wait for popover to appear
-      await page.waitForTimeout(300);
+      await page.waitForTimeout(300)
 
       // Click the "Play Online" or "Invite Players" tab
-      const onlineTab = page.locator(
-        'button:has-text("Play Online"), button:has-text("Invite")',
-      );
-      await expect(onlineTab.first()).toBeVisible();
-      await onlineTab.first().click();
+      const onlineTab = page.locator('button:has-text("Play Online"), button:has-text("Invite")')
+      await expect(onlineTab.first()).toBeVisible()
+      await onlineTab.first().click()
 
       // Click "Create New Room" button
-      const createRoomButton = page.locator(
-        'button:has-text("Create New Room")',
-      );
-      await expect(createRoomButton).toBeVisible();
-      await createRoomButton.click();
+      const createRoomButton = page.locator('button:has-text("Create New Room")')
+      await expect(createRoomButton).toBeVisible()
+      await createRoomButton.click()
 
       // Wait for room creation to complete
-      await page.waitForTimeout(1000);
+      await page.waitForTimeout(1000)
 
       // Verify we're now in a room - should see room info in nav
-      const roomInfo = page.locator("text=/Room|Code/i");
-      await expect(roomInfo).toBeVisible({ timeout: 5000 });
-    });
-  });
+      const roomInfo = page.locator('text=/Room|Code/i')
+      await expect(roomInfo).toBeVisible({ timeout: 5000 })
+    })
+  })
 
-  test.describe("Join Room by Code", () => {
-    let roomCode: string;
+  test.describe('Join Room by Code', () => {
+    let roomCode: string
 
     test.beforeEach(async ({ page }) => {
       // Create a room first
-      await page.goto("/games/matching");
-      await page.waitForLoadState("networkidle");
+      await page.goto('/games/matching')
+      await page.waitForLoadState('networkidle')
 
-      const addPlayerButton = page.locator('button[title="Add player"]');
-      await addPlayerButton.click();
-      await page.waitForTimeout(300);
+      const addPlayerButton = page.locator('button[title="Add player"]')
+      await addPlayerButton.click()
+      await page.waitForTimeout(300)
 
-      const onlineTab = page.locator(
-        'button:has-text("Play Online"), button:has-text("Invite")',
-      );
-      await onlineTab.first().click();
+      const onlineTab = page.locator('button:has-text("Play Online"), button:has-text("Invite")')
+      await onlineTab.first().click()
 
-      const createRoomButton = page.locator(
-        'button:has-text("Create New Room")',
-      );
-      await createRoomButton.click();
-      await page.waitForTimeout(1000);
+      const createRoomButton = page.locator('button:has-text("Create New Room")')
+      await createRoomButton.click()
+      await page.waitForTimeout(1000)
 
       // Extract the room code from the page
-      const roomCodeElement = page.locator("text=/[A-Z]{3}-[0-9]{3}/");
-      await expect(roomCodeElement).toBeVisible({ timeout: 5000 });
-      const roomCodeText = await roomCodeElement.textContent();
-      roomCode = roomCodeText?.match(/[A-Z]{3}-[0-9]{3}/)?.[0] || "";
-      expect(roomCode).toMatch(/[A-Z]{3}-[0-9]{3}/);
-    });
+      const roomCodeElement = page.locator('text=/[A-Z]{3}-[0-9]{3}/')
+      await expect(roomCodeElement).toBeVisible({ timeout: 5000 })
+      const roomCodeText = await roomCodeElement.textContent()
+      roomCode = roomCodeText?.match(/[A-Z]{3}-[0-9]{3}/)?.[0] || ''
+      expect(roomCode).toMatch(/[A-Z]{3}-[0-9]{3}/)
+    })
 
-    test("should join room via direct URL", async ({ page, context }) => {
+    test('should join room via direct URL', async ({ page, context }) => {
       // Open a new page (simulating a different user)
-      const newPage = await context.newPage();
+      const newPage = await context.newPage()
 
       // Navigate to the join URL
-      await newPage.goto(`/join/${roomCode}`);
-      await newPage.waitForLoadState("networkidle");
+      await newPage.goto(`/join/${roomCode}`)
+      await newPage.waitForLoadState('networkidle')
 
       // Should show "Joining room..." or redirect to game
-      await newPage.waitForTimeout(1000);
+      await newPage.waitForTimeout(1000)
 
       // Should now be in the room
-      const url = newPage.url();
-      expect(url).toContain("/arcade");
-    });
+      const url = newPage.url()
+      expect(url).toContain('/arcade')
+    })
 
-    test("should show error for invalid room code", async ({
-      page,
-      context,
-    }) => {
-      const newPage = await context.newPage();
+    test('should show error for invalid room code', async ({ page, context }) => {
+      const newPage = await context.newPage()
 
       // Try to join with invalid code
-      await newPage.goto("/join/INVALID");
-      await newPage.waitForLoadState("networkidle");
+      await newPage.goto('/join/INVALID')
+      await newPage.waitForLoadState('networkidle')
 
       // Should show error message
-      const errorMessage = newPage.locator("text=/not found|failed/i");
-      await expect(errorMessage).toBeVisible({ timeout: 5000 });
-    });
+      const errorMessage = newPage.locator('text=/not found|failed/i')
+      await expect(errorMessage).toBeVisible({ timeout: 5000 })
+    })
 
-    test("should show confirmation when switching rooms", async ({ page }) => {
+    test('should show confirmation when switching rooms', async ({ page }) => {
       // User is already in a room from beforeEach
 
       // Try to join a different room (we'll create another one)
-      const addPlayerButton = page.locator('button[title="Add player"]');
-      await addPlayerButton.click();
-      await page.waitForTimeout(300);
+      const addPlayerButton = page.locator('button[title="Add player"]')
+      await addPlayerButton.click()
+      await page.waitForTimeout(300)
 
-      const onlineTab = page.locator(
-        'button:has-text("Play Online"), button:has-text("Invite")',
-      );
-      await onlineTab.first().click();
+      const onlineTab = page.locator('button:has-text("Play Online"), button:has-text("Invite")')
+      await onlineTab.first().click()
 
-      const createRoomButton = page.locator(
-        'button:has-text("Create New Room")',
-      );
-      await createRoomButton.click();
-      await page.waitForTimeout(1000);
+      const createRoomButton = page.locator('button:has-text("Create New Room")')
+      await createRoomButton.click()
+      await page.waitForTimeout(1000)
 
       // Get the new room code
-      const newRoomCodeElement = page.locator("text=/[A-Z]{3}-[0-9]{3}/");
-      await expect(newRoomCodeElement).toBeVisible({ timeout: 5000 });
-      const newRoomCodeText = await newRoomCodeElement.textContent();
-      const newRoomCode =
-        newRoomCodeText?.match(/[A-Z]{3}-[0-9]{3}/)?.[0] || "";
+      const newRoomCodeElement = page.locator('text=/[A-Z]{3}-[0-9]{3}/')
+      await expect(newRoomCodeElement).toBeVisible({ timeout: 5000 })
+      const newRoomCodeText = await newRoomCodeElement.textContent()
+      const newRoomCode = newRoomCodeText?.match(/[A-Z]{3}-[0-9]{3}/)?.[0] || ''
 
       // Navigate to join the new room
-      await page.goto(`/join/${newRoomCode}`);
-      await page.waitForLoadState("networkidle");
+      await page.goto(`/join/${newRoomCode}`)
+      await page.waitForLoadState('networkidle')
 
       // Should show room switch confirmation
-      const confirmationDialog = page.locator(
-        "text=/Switch Rooms?|already in another room/i",
-      );
-      await expect(confirmationDialog).toBeVisible({ timeout: 3000 });
+      const confirmationDialog = page.locator('text=/Switch Rooms?|already in another room/i')
+      await expect(confirmationDialog).toBeVisible({ timeout: 3000 })
 
       // Should show both room codes
-      await expect(page.locator(`text=${roomCode}`)).toBeVisible();
-      await expect(page.locator(`text=${newRoomCode}`)).toBeVisible();
+      await expect(page.locator(`text=${roomCode}`)).toBeVisible()
+      await expect(page.locator(`text=${newRoomCode}`)).toBeVisible()
 
       // Click "Switch Rooms" button
-      const switchButton = page.locator('button:has-text("Switch Rooms")');
-      await expect(switchButton).toBeVisible();
-      await switchButton.click();
+      const switchButton = page.locator('button:has-text("Switch Rooms")')
+      await expect(switchButton).toBeVisible()
+      await switchButton.click()
 
       // Should navigate to the new room
-      await page.waitForTimeout(1000);
-      const url = page.url();
-      expect(url).toContain("/arcade");
-    });
+      await page.waitForTimeout(1000)
+      const url = page.url()
+      expect(url).toContain('/arcade')
+    })
 
-    test("should stay in current room when canceling switch", async ({
-      page,
-    }) => {
+    test('should stay in current room when canceling switch', async ({ page }) => {
       // User is already in a room from beforeEach
-      const originalRoomCode = roomCode;
+      const originalRoomCode = roomCode
 
       // Create another room to try switching to
-      const addPlayerButton = page.locator('button[title="Add player"]');
-      await addPlayerButton.click();
-      await page.waitForTimeout(300);
+      const addPlayerButton = page.locator('button[title="Add player"]')
+      await addPlayerButton.click()
+      await page.waitForTimeout(300)
 
-      const onlineTab = page.locator(
-        'button:has-text("Play Online"), button:has-text("Invite")',
-      );
-      await onlineTab.first().click();
+      const onlineTab = page.locator('button:has-text("Play Online"), button:has-text("Invite")')
+      await onlineTab.first().click()
 
-      const createRoomButton = page.locator(
-        'button:has-text("Create New Room")',
-      );
-      await createRoomButton.click();
-      await page.waitForTimeout(1000);
+      const createRoomButton = page.locator('button:has-text("Create New Room")')
+      await createRoomButton.click()
+      await page.waitForTimeout(1000)
 
-      const newRoomCodeElement = page.locator("text=/[A-Z]{3}-[0-9]{3}/");
-      const newRoomCodeText = await newRoomCodeElement.textContent();
-      const newRoomCode =
-        newRoomCodeText?.match(/[A-Z]{3}-[0-9]{3}/)?.[0] || "";
+      const newRoomCodeElement = page.locator('text=/[A-Z]{3}-[0-9]{3}/')
+      const newRoomCodeText = await newRoomCodeElement.textContent()
+      const newRoomCode = newRoomCodeText?.match(/[A-Z]{3}-[0-9]{3}/)?.[0] || ''
 
       // Navigate to join the new room
-      await page.goto(`/join/${newRoomCode}`);
-      await page.waitForLoadState("networkidle");
+      await page.goto(`/join/${newRoomCode}`)
+      await page.waitForLoadState('networkidle')
 
       // Should show confirmation
-      const confirmationDialog = page.locator("text=/Switch Rooms?/i");
-      await expect(confirmationDialog).toBeVisible({ timeout: 3000 });
+      const confirmationDialog = page.locator('text=/Switch Rooms?/i')
+      await expect(confirmationDialog).toBeVisible({ timeout: 3000 })
 
       // Click "Cancel"
-      const cancelButton = page.locator('button:has-text("Cancel")');
-      await expect(cancelButton).toBeVisible();
-      await cancelButton.click();
+      const cancelButton = page.locator('button:has-text("Cancel")')
+      await expect(cancelButton).toBeVisible()
+      await cancelButton.click()
 
       // Should stay on original room
-      await page.waitForTimeout(500);
-      const url = page.url();
-      expect(url).toContain("/arcade");
+      await page.waitForTimeout(500)
+      const url = page.url()
+      expect(url).toContain('/arcade')
 
       // Should still see original room code
-      await expect(page.locator(`text=${originalRoomCode}`)).toBeVisible();
-    });
-  });
+      await expect(page.locator(`text=${originalRoomCode}`)).toBeVisible()
+    })
+  })
 
-  test.describe("Join Room Input Validation", () => {
-    test("should format room code as user types", async ({ page }) => {
-      await page.goto("/games/matching");
-      await page.waitForLoadState("networkidle");
+  test.describe('Join Room Input Validation', () => {
+    test('should format room code as user types', async ({ page }) => {
+      await page.goto('/games/matching')
+      await page.waitForLoadState('networkidle')
 
       // Open the add player popover
-      const addPlayerButton = page.locator('button[title="Add player"]');
-      await addPlayerButton.click();
-      await page.waitForTimeout(300);
+      const addPlayerButton = page.locator('button[title="Add player"]')
+      await addPlayerButton.click()
+      await page.waitForTimeout(300)
 
       // Switch to Play Online tab
-      const onlineTab = page.locator('button:has-text("Play Online")');
+      const onlineTab = page.locator('button:has-text("Play Online")')
       if (await onlineTab.isVisible()) {
-        await onlineTab.click();
+        await onlineTab.click()
       }
 
       // Find the room code input
-      const codeInput = page.locator('input[placeholder*="ABC"]');
-      await expect(codeInput).toBeVisible({ timeout: 3000 });
+      const codeInput = page.locator('input[placeholder*="ABC"]')
+      await expect(codeInput).toBeVisible({ timeout: 3000 })
 
       // Type a room code
-      await codeInput.fill("abc123");
+      await codeInput.fill('abc123')
 
       // Should be formatted as ABC-123
-      const inputValue = await codeInput.inputValue();
-      expect(inputValue).toBe("ABC-123");
-    });
+      const inputValue = await codeInput.inputValue()
+      expect(inputValue).toBe('ABC-123')
+    })
 
-    test("should validate room code in real-time", async ({ page }) => {
-      await page.goto("/games/matching");
-      await page.waitForLoadState("networkidle");
+    test('should validate room code in real-time', async ({ page }) => {
+      await page.goto('/games/matching')
+      await page.waitForLoadState('networkidle')
 
-      const addPlayerButton = page.locator('button[title="Add player"]');
-      await addPlayerButton.click();
-      await page.waitForTimeout(300);
+      const addPlayerButton = page.locator('button[title="Add player"]')
+      await addPlayerButton.click()
+      await page.waitForTimeout(300)
 
-      const onlineTab = page.locator('button:has-text("Play Online")');
+      const onlineTab = page.locator('button:has-text("Play Online")')
       if (await onlineTab.isVisible()) {
-        await onlineTab.click();
+        await onlineTab.click()
       }
 
-      const codeInput = page.locator('input[placeholder*="ABC"]');
-      await expect(codeInput).toBeVisible({ timeout: 3000 });
+      const codeInput = page.locator('input[placeholder*="ABC"]')
+      await expect(codeInput).toBeVisible({ timeout: 3000 })
 
       // Type an invalid code
-      await codeInput.fill("INVALID");
+      await codeInput.fill('INVALID')
 
       // Should show validation icon (❌)
-      await page.waitForTimeout(500);
-      const validationIcon = page.locator("text=/❌|Room not found/i");
-      await expect(validationIcon).toBeVisible({ timeout: 3000 });
-    });
-  });
+      await page.waitForTimeout(500)
+      const validationIcon = page.locator('text=/❌|Room not found/i')
+      await expect(validationIcon).toBeVisible({ timeout: 3000 })
+    })
+  })
 
-  test.describe("Recent Rooms List", () => {
-    test("should show recently joined rooms", async ({ page }) => {
+  test.describe('Recent Rooms List', () => {
+    test('should show recently joined rooms', async ({ page }) => {
       // Create and join a room
-      await page.goto("/games/matching");
-      await page.waitForLoadState("networkidle");
+      await page.goto('/games/matching')
+      await page.waitForLoadState('networkidle')
 
-      const addPlayerButton = page.locator('button[title="Add player"]');
-      await addPlayerButton.click();
-      await page.waitForTimeout(300);
+      const addPlayerButton = page.locator('button[title="Add player"]')
+      await addPlayerButton.click()
+      await page.waitForTimeout(300)
 
-      const onlineTab = page.locator(
-        'button:has-text("Play Online"), button:has-text("Invite")',
-      );
-      await onlineTab.first().click();
+      const onlineTab = page.locator('button:has-text("Play Online"), button:has-text("Invite")')
+      await onlineTab.first().click()
 
-      const createRoomButton = page.locator(
-        'button:has-text("Create New Room")',
-      );
-      await createRoomButton.click();
-      await page.waitForTimeout(1000);
+      const createRoomButton = page.locator('button:has-text("Create New Room")')
+      await createRoomButton.click()
+      await page.waitForTimeout(1000)
 
       // Leave the room
-      const leaveButton = page.locator(
-        'button:has-text("Leave"), button:has-text("Quit")',
-      );
+      const leaveButton = page.locator('button:has-text("Leave"), button:has-text("Quit")')
       if (await leaveButton.isVisible()) {
-        await leaveButton.click();
-        await page.waitForTimeout(500);
+        await leaveButton.click()
+        await page.waitForTimeout(500)
       }
 
       // Open the popover again
-      await addPlayerButton.click();
-      await page.waitForTimeout(300);
+      await addPlayerButton.click()
+      await page.waitForTimeout(300)
 
-      await onlineTab.first().click();
+      await onlineTab.first().click()
 
       // Should see "Recent Rooms" section
-      const recentRoomsSection = page.locator("text=/Recent Rooms/i");
-      await expect(recentRoomsSection).toBeVisible({ timeout: 3000 });
+      const recentRoomsSection = page.locator('text=/Recent Rooms/i')
+      await expect(recentRoomsSection).toBeVisible({ timeout: 3000 })
 
       // Should see at least one room in the list
-      const roomListItem = page.locator("text=/[A-Z]{3}-[0-9]{3}/");
-      await expect(roomListItem.first()).toBeVisible();
-    });
-  });
+      const roomListItem = page.locator('text=/[A-Z]{3}-[0-9]{3}/')
+      await expect(roomListItem.first()).toBeVisible()
+    })
+  })
 
-  test.describe("Room Ownership", () => {
-    test("creator should see room controls", async ({ page }) => {
+  test.describe('Room Ownership', () => {
+    test('creator should see room controls', async ({ page }) => {
       // Create a room
-      await page.goto("/games/matching");
-      await page.waitForLoadState("networkidle");
+      await page.goto('/games/matching')
+      await page.waitForLoadState('networkidle')
 
-      const addPlayerButton = page.locator('button[title="Add player"]');
-      await addPlayerButton.click();
-      await page.waitForTimeout(300);
+      const addPlayerButton = page.locator('button[title="Add player"]')
+      await addPlayerButton.click()
+      await page.waitForTimeout(300)
 
-      const onlineTab = page.locator(
-        'button:has-text("Play Online"), button:has-text("Invite")',
-      );
-      await onlineTab.first().click();
+      const onlineTab = page.locator('button:has-text("Play Online"), button:has-text("Invite")')
+      await onlineTab.first().click()
 
-      const createRoomButton = page.locator(
-        'button:has-text("Create New Room")',
-      );
-      await createRoomButton.click();
-      await page.waitForTimeout(1000);
+      const createRoomButton = page.locator('button:has-text("Create New Room")')
+      await createRoomButton.click()
+      await page.waitForTimeout(1000)
 
       // Creator should see room management controls
       // (e.g., leave room, room settings, etc.)
-      const roomControls = page.locator(
-        'button:has-text("Leave"), button:has-text("Settings")',
-      );
-      await expect(roomControls.first()).toBeVisible({ timeout: 3000 });
-    });
-  });
-});
+      const roomControls = page.locator('button:has-text("Leave"), button:has-text("Settings")')
+      await expect(roomControls.first()).toBeVisible({ timeout: 3000 })
+    })
+  })
+})
diff --git a/apps/web/e2e/mini-nav-persistence.spec.ts b/apps/web/e2e/mini-nav-persistence.spec.ts
index 98d448e0..ec0f9082 100644
--- a/apps/web/e2e/mini-nav-persistence.spec.ts
+++ b/apps/web/e2e/mini-nav-persistence.spec.ts
@@ -1,117 +1,115 @@
-import { expect, test } 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 ({
+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,
   }) => {
     // Override baseURL for this test to match running dev server
-    const baseURL = "http://localhost:3000";
+    const baseURL = 'http://localhost:3000'
 
     // Start at home page
-    await page.goto(baseURL);
+    await page.goto(baseURL)
 
     // Navigate to games page - should not have game name in mini nav
-    await page.click('a[href="/games"]');
-    await page.waitForURL("/games");
+    await page.click('a[href="/games"]')
+    await page.waitForURL('/games')
 
     // Check that mini nav doesn't show game name initially
-    const initialGameName = page.locator('[data-testid="mini-nav-game-name"]');
-    await expect(initialGameName).not.toBeVisible();
+    const initialGameName = page.locator('[data-testid="mini-nav-game-name"]')
+    await expect(initialGameName).not.toBeVisible()
 
     // Navigate to Memory Pairs game
-    await page.click('a[href="/games/matching"]');
-    await page.waitForURL("/games/matching");
+    await page.click('a[href="/games/matching"]')
+    await page.waitForURL('/games/matching')
 
     // Verify game name appears in mini nav
-    const memoryPairsName = page.locator("text=🧩 Memory Pairs");
-    await expect(memoryPairsName).toBeVisible();
+    const memoryPairsName = page.locator('text=🧩 Memory Pairs')
+    await expect(memoryPairsName).toBeVisible()
 
     // Navigate back to games page using mini nav
-    await page.click('a[href="/games"]');
-    await page.waitForURL("/games");
+    await page.click('a[href="/games"]')
+    await page.waitForURL('/games')
 
     // BUG: Game name should disappear but it persists
     // This test should FAIL initially, demonstrating the bug
-    await expect(memoryPairsName).not.toBeVisible();
+    await expect(memoryPairsName).not.toBeVisible()
 
     // Also test with Memory Lightning game
-    await page.click('a[href="/games/memory-quiz"]');
-    await page.waitForURL("/games/memory-quiz");
+    await page.click('a[href="/games/memory-quiz"]')
+    await page.waitForURL('/games/memory-quiz')
 
     // Verify Memory Lightning name appears
-    const memoryLightningName = page.locator("text=🧠 Memory Lightning");
-    await expect(memoryLightningName).toBeVisible();
+    const memoryLightningName = page.locator('text=🧠 Memory Lightning')
+    await expect(memoryLightningName).toBeVisible()
 
     // Navigate back to games page
-    await page.click('a[href="/games"]');
-    await page.waitForURL("/games");
+    await page.click('a[href="/games"]')
+    await page.waitForURL('/games')
 
     // Game name should disappear
-    await expect(memoryLightningName).not.toBeVisible();
-  });
+    await expect(memoryLightningName).not.toBeVisible()
+  })
 
-  test("should show correct game name when switching between different games", async ({
-    page,
-  }) => {
+  test('should show correct game name when switching between different games', async ({ page }) => {
     // Override baseURL for this test to match running dev server
-    const baseURL = "http://localhost:3000";
+    const baseURL = 'http://localhost:3000'
 
     // Start at Memory Pairs
-    await page.goto(`${baseURL}/games/matching`);
-    await expect(page.locator("text=🧩 Memory Pairs")).toBeVisible();
+    await page.goto(`${baseURL}/games/matching`)
+    await expect(page.locator('text=🧩 Memory Pairs')).toBeVisible()
 
     // Switch to Memory Lightning
-    await page.click('a[href="/games/memory-quiz"]');
-    await page.waitForURL("/games/memory-quiz");
+    await page.click('a[href="/games/memory-quiz"]')
+    await page.waitForURL('/games/memory-quiz')
 
     // Should show Memory Lightning and NOT Memory Pairs
-    await expect(page.locator("text=🧠 Memory Lightning")).toBeVisible();
-    await expect(page.locator("text=🧩 Memory Pairs")).not.toBeVisible();
+    await expect(page.locator('text=🧠 Memory Lightning')).toBeVisible()
+    await expect(page.locator('text=🧩 Memory Pairs')).not.toBeVisible()
 
     // Switch back to Memory Pairs
-    await page.click('a[href="/games/matching"]');
-    await page.waitForURL("/games/matching");
+    await page.click('a[href="/games/matching"]')
+    await page.waitForURL('/games/matching')
 
     // Should show Memory Pairs and NOT Memory Lightning
-    await expect(page.locator("text=🧩 Memory Pairs")).toBeVisible();
-    await expect(page.locator("text=🧠 Memory Lightning")).not.toBeVisible();
-  });
+    await expect(page.locator('text=🧩 Memory Pairs')).toBeVisible()
+    await expect(page.locator('text=🧠 Memory Lightning')).not.toBeVisible()
+  })
 
-  test("should not persist game name when navigating through intermediate pages", async ({
+  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";
+    const baseURL = 'http://localhost:3000'
 
     // Start at Memory Pairs game - should show game name
-    await page.goto(`${baseURL}/games/matching`);
-    const memoryPairsName = page.locator("text=🧩 Memory Pairs");
-    await expect(memoryPairsName).toBeVisible();
+    await page.goto(`${baseURL}/games/matching`)
+    const memoryPairsName = page.locator('text=🧩 Memory Pairs')
+    await expect(memoryPairsName).toBeVisible()
 
     // Navigate to Guide page - game name should disappear
-    await page.click('a[href="/guide"]');
-    await page.waitForURL("/guide");
-    await expect(memoryPairsName).not.toBeVisible();
+    await page.click('a[href="/guide"]')
+    await page.waitForURL('/guide')
+    await expect(memoryPairsName).not.toBeVisible()
 
     // Navigate to Games page - game name should still be gone
-    await page.click('a[href="/games"]');
-    await page.waitForURL("/games");
-    await expect(memoryPairsName).not.toBeVisible();
+    await page.click('a[href="/games"]')
+    await page.waitForURL('/games')
+    await expect(memoryPairsName).not.toBeVisible()
 
     // Test another path: Game -> Create -> Games
-    await page.goto(`${baseURL}/games/memory-quiz`);
-    const memoryLightningName = page.locator("text=🧠 Memory Lightning");
-    await expect(memoryLightningName).toBeVisible();
+    await page.goto(`${baseURL}/games/memory-quiz`)
+    const memoryLightningName = page.locator('text=🧠 Memory Lightning')
+    await expect(memoryLightningName).toBeVisible()
 
     // Navigate to Create page
-    await page.click('a[href="/create"]');
-    await page.waitForURL("/create");
-    await expect(memoryLightningName).not.toBeVisible();
+    await page.click('a[href="/create"]')
+    await page.waitForURL('/create')
+    await expect(memoryLightningName).not.toBeVisible()
 
     // Navigate to Games page - should not show any game name
-    await page.click('a[href="/games"]');
-    await page.waitForURL("/games");
-    await expect(memoryLightningName).not.toBeVisible();
-    await expect(memoryPairsName).not.toBeVisible();
-  });
-});
+    await page.click('a[href="/games"]')
+    await page.waitForURL('/games')
+    await expect(memoryLightningName).not.toBeVisible()
+    await expect(memoryPairsName).not.toBeVisible()
+  })
+})
diff --git a/apps/web/e2e/nav-slot.spec.ts b/apps/web/e2e/nav-slot.spec.ts
index 8e616c17..69e612a6 100644
--- a/apps/web/e2e/nav-slot.spec.ts
+++ b/apps/web/e2e/nav-slot.spec.ts
@@ -1,87 +1,77 @@
-import { expect, test } 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 ({
+test.describe('Game navigation slots', () => {
+  test('should show Memory Pairs game name in nav when navigating to matching game', async ({
     page,
   }) => {
-    await page.goto("/games/matching");
+    await page.goto('/games/matching')
 
     // Wait for the page to load
-    await page.waitForLoadState("networkidle");
+    await page.waitForLoadState('networkidle')
 
     // Look for the game name in the navigation
-    const gameNav = page.locator(
-      '[data-testid="nav-slot"], h1:has-text("Memory Pairs")',
-    );
-    await expect(gameNav).toBeVisible();
-    await expect(gameNav).toContainText("Memory Pairs");
-  });
+    const gameNav = page.locator('[data-testid="nav-slot"], h1:has-text("Memory Pairs")')
+    await expect(gameNav).toBeVisible()
+    await expect(gameNav).toContainText('Memory Pairs')
+  })
 
-  test("should show Memory Lightning game name in nav when navigating to memory quiz", async ({
+  test('should show Memory Lightning game name in nav when navigating to memory quiz', async ({
     page,
   }) => {
-    await page.goto("/games/memory-quiz");
+    await page.goto('/games/memory-quiz')
 
     // Wait for the page to load
-    await page.waitForLoadState("networkidle");
+    await page.waitForLoadState('networkidle')
 
     // Look for the game name in the navigation
-    const gameNav = page.locator(
-      '[data-testid="nav-slot"], h1:has-text("Memory Lightning")',
-    );
-    await expect(gameNav).toBeVisible();
-    await expect(gameNav).toContainText("Memory Lightning");
-  });
+    const gameNav = page.locator('[data-testid="nav-slot"], h1:has-text("Memory Lightning")')
+    await expect(gameNav).toBeVisible()
+    await expect(gameNav).toContainText('Memory Lightning')
+  })
 
-  test("should maintain game name in nav after page reload", async ({
-    page,
-  }) => {
+  test('should maintain game name in nav after page reload', async ({ page }) => {
     // Navigate to matching game
-    await page.goto("/games/matching");
-    await page.waitForLoadState("networkidle");
+    await page.goto('/games/matching')
+    await page.waitForLoadState('networkidle')
 
     // Verify game name appears
-    const gameNav = page.locator('h1:has-text("Memory Pairs")');
-    await expect(gameNav).toBeVisible();
+    const gameNav = page.locator('h1:has-text("Memory Pairs")')
+    await expect(gameNav).toBeVisible()
 
     // Reload the page
-    await page.reload();
-    await page.waitForLoadState("networkidle");
+    await page.reload()
+    await page.waitForLoadState('networkidle')
 
     // Verify game name still appears after reload
-    await expect(gameNav).toBeVisible();
-    await expect(gameNav).toContainText("Memory Pairs");
-  });
+    await expect(gameNav).toBeVisible()
+    await expect(gameNav).toContainText('Memory Pairs')
+  })
 
-  test("should show different game names when navigating between games", async ({
-    page,
-  }) => {
+  test('should show different game names when navigating between games', async ({ page }) => {
     // Start with matching game
-    await page.goto("/games/matching");
-    await page.waitForLoadState("networkidle");
+    await page.goto('/games/matching')
+    await page.waitForLoadState('networkidle')
 
-    const matchingNav = page.locator('h1:has-text("Memory Pairs")');
-    await expect(matchingNav).toBeVisible();
+    const matchingNav = page.locator('h1:has-text("Memory Pairs")')
+    await expect(matchingNav).toBeVisible()
 
     // Navigate to memory quiz
-    await page.goto("/games/memory-quiz");
-    await page.waitForLoadState("networkidle");
+    await page.goto('/games/memory-quiz')
+    await page.waitForLoadState('networkidle')
 
-    const quizNav = page.locator('h1:has-text("Memory Lightning")');
-    await expect(quizNav).toBeVisible();
+    const quizNav = page.locator('h1:has-text("Memory Lightning")')
+    await expect(quizNav).toBeVisible()
 
     // Verify the matching game name is gone
-    await expect(matchingNav).not.toBeVisible();
-  });
+    await expect(matchingNav).not.toBeVisible()
+  })
 
-  test("should not show game name on non-game pages", async ({ page }) => {
-    await page.goto("/");
-    await page.waitForLoadState("networkidle");
+  test('should not show game name on non-game pages', async ({ page }) => {
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
 
     // Should not see any game names on the home page
-    const gameNavs = page.locator(
-      'h1:has-text("Memory Pairs"), h1:has-text("Memory Lightning")',
-    );
-    await expect(gameNavs).toHaveCount(0);
-  });
-});
+    const gameNavs = page.locator('h1:has-text("Memory Pairs"), h1:has-text("Memory Lightning")')
+    await expect(gameNavs).toHaveCount(0)
+  })
+})
diff --git a/apps/web/e2e/sound-settings-persistence.spec.ts b/apps/web/e2e/sound-settings-persistence.spec.ts
index 5e636446..df774e6e 100644
--- a/apps/web/e2e/sound-settings-persistence.spec.ts
+++ b/apps/web/e2e/sound-settings-persistence.spec.ts
@@ -1,19 +1,17 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from '@playwright/test'
 
-test.describe("Sound Settings Persistence", () => {
+test.describe('Sound Settings Persistence', () => {
   test.beforeEach(async ({ page }) => {
     // Clear localStorage before each test
-    await page.goto("/");
-    await page.evaluate(() => localStorage.clear());
-  });
+    await page.goto('/')
+    await page.evaluate(() => localStorage.clear())
+  })
 
-  test("should persist sound enabled setting to localStorage", async ({
-    page,
-  }) => {
-    await page.goto("/games/memory-quiz");
+  test('should persist sound enabled setting to localStorage', async ({ page }) => {
+    await page.goto('/games/memory-quiz')
 
     // Open style dropdown
-    await page.getByRole("button", { name: /style/i }).click();
+    await page.getByRole('button', { name: /style/i }).click()
 
     // Find and toggle the sound switch (should be off by default)
     const soundSwitch = page
@@ -21,109 +19,103 @@ test.describe("Sound Settings Persistence", () => {
       .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();
+      .or(page.locator('button').filter({ hasText: /sound/i }))
+      .first()
 
-    await soundSwitch.click();
+    await soundSwitch.click()
 
     // Check localStorage was updated
     const storedConfig = await page.evaluate(() => {
-      const stored = localStorage.getItem("soroban-abacus-display-config");
-      return stored ? JSON.parse(stored) : null;
-    });
+      const stored = localStorage.getItem('soroban-abacus-display-config')
+      return stored ? JSON.parse(stored) : null
+    })
 
-    expect(storedConfig).toBeTruthy();
-    expect(storedConfig.soundEnabled).toBe(true);
+    expect(storedConfig).toBeTruthy()
+    expect(storedConfig.soundEnabled).toBe(true)
 
     // Reload page and verify setting persists
-    await page.reload();
-    await page.getByRole("button", { name: /style/i }).click();
+    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();
+      .or(page.locator('button').filter({ hasText: /sound/i }))
+      .first()
 
-    await expect(soundSwitchAfterReload).toBeChecked();
-  });
+    await expect(soundSwitchAfterReload).toBeChecked()
+  })
 
-  test("should persist sound volume setting to localStorage", async ({
-    page,
-  }) => {
-    await page.goto("/games/memory-quiz");
+  test('should persist sound volume setting to localStorage', async ({ page }) => {
+    await page.goto('/games/memory-quiz')
 
     // Open style dropdown
-    await page.getByRole("button", { name: /style/i }).click();
+    await page.getByRole('button', { name: /style/i }).click()
 
     // Find volume slider
     const volumeSlider = page
       .locator('input[type="range"]')
       .or(page.locator('[role="slider"]'))
-      .first();
+      .first()
 
     // Set volume to a specific value (e.g., 0.6)
-    await volumeSlider.fill("60"); // Assuming 0-100 range
+    await volumeSlider.fill('60') // Assuming 0-100 range
 
     // Check localStorage was updated
     const storedConfig = await page.evaluate(() => {
-      const stored = localStorage.getItem("soroban-abacus-display-config");
-      return stored ? JSON.parse(stored) : null;
-    });
+      const stored = localStorage.getItem('soroban-abacus-display-config')
+      return stored ? JSON.parse(stored) : null
+    })
 
-    expect(storedConfig).toBeTruthy();
-    expect(storedConfig.soundVolume).toBeCloseTo(0.6, 1);
+    expect(storedConfig).toBeTruthy()
+    expect(storedConfig.soundVolume).toBeCloseTo(0.6, 1)
 
     // Reload page and verify setting persists
-    await page.reload();
-    await page.getByRole("button", { name: /style/i }).click();
+    await page.reload()
+    await page.getByRole('button', { name: /style/i }).click()
 
     const volumeSliderAfterReload = page
       .locator('input[type="range"]')
       .or(page.locator('[role="slider"]'))
-      .first();
+      .first()
 
-    const volumeValue = await volumeSliderAfterReload.inputValue();
-    expect(parseFloat(volumeValue)).toBeCloseTo(60, 0); // Allow for some variance
-  });
+    const volumeValue = await volumeSliderAfterReload.inputValue()
+    expect(parseFloat(volumeValue)).toBeCloseTo(60, 0) // Allow for some variance
+  })
 
-  test("should load default sound settings when localStorage is empty", async ({
-    page,
-  }) => {
-    await page.goto("/games/memory-quiz");
+  test('should load default sound settings when localStorage is empty', async ({ page }) => {
+    await page.goto('/games/memory-quiz')
 
     // Check that default settings are loaded
     const storedConfig = await page.evaluate(() => {
-      const stored = localStorage.getItem("soroban-abacus-display-config");
-      return stored ? JSON.parse(stored) : null;
-    });
+      const stored = localStorage.getItem('soroban-abacus-display-config')
+      return stored ? JSON.parse(stored) : null
+    })
 
     // Should have default values: soundEnabled: true, soundVolume: 0.8
-    expect(storedConfig).toBeTruthy();
-    expect(storedConfig.soundEnabled).toBe(true);
-    expect(storedConfig.soundVolume).toBe(0.8);
-  });
+    expect(storedConfig).toBeTruthy()
+    expect(storedConfig.soundEnabled).toBe(true)
+    expect(storedConfig.soundVolume).toBe(0.8)
+  })
 
-  test("should handle invalid localStorage data gracefully", async ({
-    page,
-  }) => {
+  test('should handle invalid localStorage data gracefully', async ({ page }) => {
     // Set invalid localStorage data
-    await page.goto("/");
+    await page.goto('/')
     await page.evaluate(() => {
-      localStorage.setItem("soroban-abacus-display-config", "invalid-json");
-    });
+      localStorage.setItem('soroban-abacus-display-config', 'invalid-json')
+    })
 
-    await page.goto("/games/memory-quiz");
+    await page.goto('/games/memory-quiz')
 
     // Should fall back to defaults and not crash
     const storedConfig = await page.evaluate(() => {
-      const stored = localStorage.getItem("soroban-abacus-display-config");
-      return stored ? JSON.parse(stored) : null;
-    });
+      const stored = localStorage.getItem('soroban-abacus-display-config')
+      return stored ? JSON.parse(stored) : null
+    })
 
-    expect(storedConfig.soundEnabled).toBe(true);
-    expect(storedConfig.soundVolume).toBe(0.8);
-  });
-});
+    expect(storedConfig.soundEnabled).toBe(true)
+    expect(storedConfig.soundVolume).toBe(0.8)
+  })
+})
diff --git a/apps/web/eslint.config.js b/apps/web/eslint.config.js
index 472bba8a..043112d5 100644
--- a/apps/web/eslint.config.js
+++ b/apps/web/eslint.config.js
@@ -1,51 +1,44 @@
 // Minimal ESLint flat config ONLY for react-hooks rules
 
-import tsParser from "@typescript-eslint/parser";
-import reactHooks from "eslint-plugin-react-hooks";
+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",
-    ],
+    ignores: ['dist', '.next', 'coverage', 'node_modules', 'styled-system', 'storybook-static'],
   },
   {
-    files: ["**/*.tsx", "**/*.ts", "**/*.jsx", "**/*.js"],
+    files: ['**/*.tsx', '**/*.ts', '**/*.jsx', '**/*.js'],
     languageOptions: {
       parser: tsParser,
       ecmaVersion: 2022,
-      sourceType: "module",
+      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",
+        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,
+      'react-hooks': reactHooks,
     },
     rules: {
-      "react-hooks/rules-of-hooks": "error",
-      "react-hooks/exhaustive-deps": "off",
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'off',
     },
   },
-];
+]
 
-export default config;
+export default config
diff --git a/apps/web/panda.config.ts b/apps/web/panda.config.ts
index 77e20f36..292b7b88 100644
--- a/apps/web/panda.config.ts
+++ b/apps/web/panda.config.ts
@@ -1,192 +1,188 @@
-import { defineConfig } from "@pandacss/dev";
+import { defineConfig } from '@pandacss/dev'
 
 export default defineConfig({
   // Whether to use css reset
   preflight: true,
 
   // Where to look for your css declarations
-  include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
+  include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
 
   // Files to exclude
   exclude: [],
 
   // The output directory for your css system
-  outdir: "styled-system",
+  outdir: 'styled-system',
 
   // The JSX framework to use
-  jsxFramework: "react",
+  jsxFramework: 'react',
 
   theme: {
     extend: {
       tokens: {
         colors: {
           brand: {
-            50: { value: "#f0f9ff" },
-            100: { value: "#e0f2fe" },
-            200: { value: "#bae6fd" },
-            300: { value: "#7dd3fc" },
-            400: { value: "#38bdf8" },
-            500: { value: "#0ea5e9" },
-            600: { value: "#0284c7" },
-            700: { value: "#0369a1" },
-            800: { value: "#075985" },
-            900: { value: "#0c4a6e" },
+            50: { value: '#f0f9ff' },
+            100: { value: '#e0f2fe' },
+            200: { value: '#bae6fd' },
+            300: { value: '#7dd3fc' },
+            400: { value: '#38bdf8' },
+            500: { value: '#0ea5e9' },
+            600: { value: '#0284c7' },
+            700: { value: '#0369a1' },
+            800: { value: '#075985' },
+            900: { value: '#0c4a6e' },
           },
           soroban: {
-            wood: { value: "#8B4513" },
-            bead: { value: "#2C1810" },
-            inactive: { value: "#D3D3D3" },
-            bar: { value: "#654321" },
+            wood: { value: '#8B4513' },
+            bead: { value: '#2C1810' },
+            inactive: { value: '#D3D3D3' },
+            bar: { value: '#654321' },
           },
         },
         fonts: {
           body: {
-            value:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+            value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
           },
           heading: {
-            value:
-              'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+            value: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
           },
           mono: {
-            value:
-              'Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace',
+            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)",
+            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)
-          shake: { value: "shake 0.5s ease-in-out" },
+          shake: { value: 'shake 0.5s ease-in-out' },
           // Pulse animation for success feedback (line 2004)
-          successPulse: { value: "successPulse 0.5s ease" },
-          pulse: { value: "pulse 2s infinite" },
+          successPulse: { value: 'successPulse 0.5s ease' },
+          pulse: { value: 'pulse 2s infinite' },
           // Error shake with larger amplitude (line 2009)
-          errorShake: { value: "errorShake 0.5s ease" },
+          errorShake: { value: 'errorShake 0.5s ease' },
           // Bounce animations (line 6271, 5065)
-          bounce: { value: "bounce 1s infinite alternate" },
-          bounceIn: { value: "bounceIn 1s ease-out" },
+          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' },
         },
       },
       // Semantic color tokens for light/dark theme support
       semanticTokens: {
         colors: {
           // Background colors
-          "bg.canvas": {
+          'bg.canvas': {
             value: {
-              base: "#ffffff",
-              _dark: "#0f172a",
+              base: '#ffffff',
+              _dark: '#0f172a',
             },
           },
-          "bg.surface": {
+          'bg.surface': {
             value: {
-              base: "#f8fafc",
-              _dark: "#1e293b",
+              base: '#f8fafc',
+              _dark: '#1e293b',
             },
           },
-          "bg.subtle": {
+          'bg.subtle': {
             value: {
-              base: "#f1f5f9",
-              _dark: "#334155",
+              base: '#f1f5f9',
+              _dark: '#334155',
             },
           },
-          "bg.muted": {
+          'bg.muted': {
             value: {
-              base: "#e2e8f0",
-              _dark: "#475569",
+              base: '#e2e8f0',
+              _dark: '#475569',
             },
           },
 
           // Text colors
-          "text.primary": {
+          'text.primary': {
             value: {
-              base: "#0f172a",
-              _dark: "#f1f5f9",
+              base: '#0f172a',
+              _dark: '#f1f5f9',
             },
           },
-          "text.secondary": {
+          'text.secondary': {
             value: {
-              base: "#475569",
-              _dark: "#cbd5e1",
+              base: '#475569',
+              _dark: '#cbd5e1',
             },
           },
-          "text.muted": {
+          'text.muted': {
             value: {
-              base: "#64748b",
-              _dark: "#94a3b8",
+              base: '#64748b',
+              _dark: '#94a3b8',
             },
           },
-          "text.inverse": {
+          'text.inverse': {
             value: {
-              base: "#ffffff",
-              _dark: "#0f172a",
+              base: '#ffffff',
+              _dark: '#0f172a',
             },
           },
 
           // Border colors
-          "border.default": {
+          'border.default': {
             value: {
-              base: "#e2e8f0",
-              _dark: "#334155",
+              base: '#e2e8f0',
+              _dark: '#334155',
             },
           },
-          "border.muted": {
+          'border.muted': {
             value: {
-              base: "#f1f5f9",
-              _dark: "#1e293b",
+              base: '#f1f5f9',
+              _dark: '#1e293b',
             },
           },
-          "border.emphasis": {
+          'border.emphasis': {
             value: {
-              base: "#cbd5e1",
-              _dark: "#475569",
+              base: '#cbd5e1',
+              _dark: '#475569',
             },
           },
 
           // Accent colors (purple theme)
-          "accent.default": {
+          'accent.default': {
             value: {
-              base: "#7c3aed",
-              _dark: "#a78bfa",
+              base: '#7c3aed',
+              _dark: '#a78bfa',
             },
           },
-          "accent.emphasis": {
+          'accent.emphasis': {
             value: {
-              base: "#6d28d9",
-              _dark: "#c4b5fd",
+              base: '#6d28d9',
+              _dark: '#c4b5fd',
             },
           },
-          "accent.muted": {
+          'accent.muted': {
             value: {
-              base: "#f5f3ff",
-              _dark: "rgba(139, 92, 246, 0.15)",
+              base: '#f5f3ff',
+              _dark: 'rgba(139, 92, 246, 0.15)',
             },
           },
-          "accent.subtle": {
+          'accent.subtle': {
             value: {
-              base: "#ede9fe",
-              _dark: "rgba(139, 92, 246, 0.1)",
+              base: '#ede9fe',
+              _dark: 'rgba(139, 92, 246, 0.1)',
             },
           },
 
           // Interactive states
-          "interactive.hover": {
+          'interactive.hover': {
             value: {
-              base: "#f8fafc",
-              _dark: "#334155",
+              base: '#f8fafc',
+              _dark: '#334155',
             },
           },
-          "interactive.active": {
+          'interactive.active': {
             value: {
-              base: "#f1f5f9",
-              _dark: "#475569",
+              base: '#f1f5f9',
+              _dark: '#475569',
             },
           },
         },
@@ -194,43 +190,42 @@ export default defineConfig({
       keyframes: {
         // Shake - horizontal oscillation for errors (line 3419)
         shake: {
-          "0%, 100%": { transform: "translateX(0)" },
-          "25%": { transform: "translateX(-5px)" },
-          "75%": { transform: "translateX(5px)" },
+          '0%, 100%': { transform: 'translateX(0)' },
+          '25%': { 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)" },
+          '0%, 100%': { transform: 'scale(1)' },
+          '50%': { transform: 'scale(1.05)' },
         },
         // Pulse - continuous breathing effect (line 6255)
         pulse: {
-          "0%, 100%": { transform: "scale(1)" },
-          "50%": { transform: "scale(1.05)" },
+          '0%, 100%': { transform: 'scale(1)' },
+          '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)" },
+          '0%, 100%': { transform: 'translateX(0)' },
+          '25%': { transform: 'translateX(-10px)' },
+          '75%': { transform: 'translateX(10px)' },
         },
         // Bounce - vertical oscillation (line 6271)
         bounce: {
-          "0%, 100%": { transform: "translateY(0)" },
-          "50%": { transform: "translateY(-10px)" },
+          '0%, 100%': { transform: 'translateY(0)' },
+          '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" },
+          '0%': { transform: 'scale(0.3) rotate(-10deg)', opacity: '0' },
+          '50%': { transform: 'scale(1.1) rotate(5deg)' },
+          '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)",
+          '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)',
           },
         },
       },
@@ -244,4 +239,4 @@ export default defineConfig({
       light: '[data-theme="light"] &, .light &',
     },
   },
-});
+})
diff --git a/apps/web/playwright.config.ts b/apps/web/playwright.config.ts
index 5bf9f84b..1dd7d53d 100644
--- a/apps/web/playwright.config.ts
+++ b/apps/web/playwright.config.ts
@@ -1,27 +1,27 @@
-import { defineConfig, devices } from "@playwright/test";
+import { defineConfig, devices } from '@playwright/test'
 
 export default defineConfig({
-  testDir: "./e2e",
+  testDir: './e2e',
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
-  reporter: "html",
+  reporter: 'html',
   use: {
-    baseURL: "http://localhost:3002",
-    trace: "on-first-retry",
+    baseURL: 'http://localhost:3002',
+    trace: 'on-first-retry',
   },
 
   projects: [
     {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
     },
   ],
 
   webServer: {
-    command: "pnpm dev",
-    url: "http://localhost:3002",
+    command: 'pnpm dev',
+    url: 'http://localhost:3002',
     reuseExistingServer: !process.env.CI,
   },
-});
+})
diff --git a/apps/web/scripts/generate-build-info.js b/apps/web/scripts/generate-build-info.js
index cc56edf9..8b52762e 100755
--- a/apps/web/scripts/generate-build-info.js
+++ b/apps/web/scripts/generate-build-info.js
@@ -5,34 +5,29 @@
  * 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();
+    return execSync(command, { encoding: 'utf-8' }).trim()
   } catch (_error) {
-    return null;
+    return null
   }
 }
 
 function getBuildInfo() {
   // Try to get git info from environment variables first (for Docker builds)
   // Fall back to git commands (for local development)
-  const gitCommit = process.env.GIT_COMMIT || exec("git rev-parse HEAD");
-  const gitCommitShort =
-    process.env.GIT_COMMIT_SHORT || exec("git rev-parse --short HEAD");
-  const gitBranch =
-    process.env.GIT_BRANCH || exec("git rev-parse --abbrev-ref HEAD");
-  const gitTag =
-    process.env.GIT_TAG ||
-    exec("git describe --tags --exact-match 2>/dev/null");
+  const gitCommit = process.env.GIT_COMMIT || exec('git rev-parse HEAD')
+  const gitCommitShort = process.env.GIT_COMMIT_SHORT || exec('git rev-parse --short HEAD')
+  const gitBranch = process.env.GIT_BRANCH || exec('git rev-parse --abbrev-ref HEAD')
+  const gitTag = process.env.GIT_TAG || exec('git describe --tags --exact-match 2>/dev/null')
   const gitDirty =
-    process.env.GIT_DIRTY === "true" ||
-    exec('git diff --quiet || echo "dirty"') === "dirty";
+    process.env.GIT_DIRTY === 'true' || exec('git diff --quiet || echo "dirty"') === 'dirty'
 
-  const packageJson = require("../package.json");
+  const packageJson = require('../package.json')
 
   return {
     version: packageJson.version,
@@ -45,28 +40,22 @@ function getBuildInfo() {
       tag: gitTag,
       isDirty: gitDirty,
     },
-    environment: process.env.NODE_ENV || "development",
+    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))
diff --git a/apps/web/scripts/generateAbacusIcons.tsx b/apps/web/scripts/generateAbacusIcons.tsx
index 8bcf09b8..4e85281e 100644
--- a/apps/web/scripts/generateAbacusIcons.tsx
+++ b/apps/web/scripts/generateAbacusIcons.tsx
@@ -7,20 +7,20 @@
  * SVG output as the interactive client-side version (without animations).
  */
 
-import React from "react";
-import { renderToStaticMarkup } from "react-dom/server";
-import { writeFileSync } from "fs";
-import { join } from "path";
-import { AbacusReact } from "@soroban/abacus-react";
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { writeFileSync } from 'fs'
+import { join } from 'path'
+import { AbacusReact } from '@soroban/abacus-react'
 
 // Extract just the SVG element content from rendered output
 function extractSvgContent(markup: string): string {
   // Find the opening <svg and closing </svg> tags
-  const svgMatch = markup.match(/<svg[^>]*>([\s\S]*?)<\/svg>/);
+  const svgMatch = markup.match(/<svg[^>]*>([\s\S]*?)<\/svg>/)
   if (!svgMatch) {
-    throw new Error("No SVG element found in rendered output");
+    throw new Error('No SVG element found in rendered output')
   }
-  return svgMatch[1]; // Return just the inner content
+  return svgMatch[1] // Return just the inner content
 }
 
 // Generate the favicon (icon.svg) - single column showing value 5
@@ -34,27 +34,27 @@ function generateFavicon(): string {
       interactive={false}
       showNumbers={false}
       customStyles={{
-        heavenBeads: { fill: "#7c2d12", stroke: "#451a03", strokeWidth: 1 },
-        earthBeads: { fill: "#7c2d12", stroke: "#451a03", strokeWidth: 1 },
+        heavenBeads: { fill: '#7c2d12', stroke: '#451a03', strokeWidth: 1 },
+        earthBeads: { fill: '#7c2d12', stroke: '#451a03', strokeWidth: 1 },
         columnPosts: {
-          fill: "#451a03",
-          stroke: "#292524",
+          fill: '#451a03',
+          stroke: '#292524',
           strokeWidth: 2,
         },
         reckoningBar: {
-          fill: "#292524",
-          stroke: "#292524",
+          fill: '#292524',
+          stroke: '#292524',
           strokeWidth: 3,
         },
       }}
-    />,
-  );
+    />
+  )
 
   // Extract just the SVG content (without div wrapper)
-  let svgContent = extractSvgContent(abacusMarkup);
+  let svgContent = extractSvgContent(abacusMarkup)
 
   // Remove !important from CSS (production code policy)
-  svgContent = svgContent.replace(/\s*!important/g, "");
+  svgContent = svgContent.replace(/\s*!important/g, '')
 
   // Wrap in SVG with proper viewBox for favicon sizing
   // AbacusReact with 1 column + scaleFactor 1.0 = ~25×120px
@@ -68,7 +68,7 @@ function generateFavicon(): string {
     ${svgContent}
   </g>
 </svg>
-`;
+`
 }
 
 // Generate the Open Graph image (og-image.svg)
@@ -83,46 +83,46 @@ function generateOGImage(): string {
       showNumbers={false}
       customStyles={{
         columnPosts: {
-          fill: "rgb(255, 255, 255)",
-          stroke: "rgb(200, 200, 200)",
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(200, 200, 200)',
           strokeWidth: 2,
         },
         reckoningBar: {
-          fill: "rgb(255, 255, 255)",
-          stroke: "rgb(200, 200, 200)",
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(200, 200, 200)',
           strokeWidth: 3,
         },
         columns: {
           0: {
             // Ones place (rightmost) - Blue
-            heavenBeads: { fill: "#60a5fa", stroke: "#3b82f6", strokeWidth: 1 },
-            earthBeads: { fill: "#60a5fa", stroke: "#3b82f6", strokeWidth: 1 },
+            heavenBeads: { fill: '#60a5fa', stroke: '#3b82f6', strokeWidth: 1 },
+            earthBeads: { fill: '#60a5fa', stroke: '#3b82f6', strokeWidth: 1 },
           },
           1: {
             // Tens place - Green
-            heavenBeads: { fill: "#4ade80", stroke: "#22c55e", strokeWidth: 1 },
-            earthBeads: { fill: "#4ade80", stroke: "#22c55e", strokeWidth: 1 },
+            heavenBeads: { fill: '#4ade80', stroke: '#22c55e', strokeWidth: 1 },
+            earthBeads: { fill: '#4ade80', stroke: '#22c55e', strokeWidth: 1 },
           },
           2: {
             // Hundreds place - Yellow/Gold
-            heavenBeads: { fill: "#fbbf24", stroke: "#f59e0b", strokeWidth: 1 },
-            earthBeads: { fill: "#fbbf24", stroke: "#f59e0b", strokeWidth: 1 },
+            heavenBeads: { fill: '#fbbf24', stroke: '#f59e0b', strokeWidth: 1 },
+            earthBeads: { fill: '#fbbf24', stroke: '#f59e0b', strokeWidth: 1 },
           },
           3: {
             // Thousands place (leftmost) - Purple
-            heavenBeads: { fill: "#c084fc", stroke: "#a855f7", strokeWidth: 1 },
-            earthBeads: { fill: "#c084fc", stroke: "#a855f7", strokeWidth: 1 },
+            heavenBeads: { fill: '#c084fc', stroke: '#a855f7', strokeWidth: 1 },
+            earthBeads: { fill: '#c084fc', stroke: '#a855f7', strokeWidth: 1 },
           },
         },
       }}
-    />,
-  );
+    />
+  )
 
   // Extract just the SVG content (without div wrapper)
-  let svgContent = extractSvgContent(abacusMarkup);
+  let svgContent = extractSvgContent(abacusMarkup)
 
   // Remove !important from CSS (production code policy)
-  svgContent = svgContent.replace(/\s*!important/g, "");
+  svgContent = svgContent.replace(/\s*!important/g, '')
 
   return `<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
   <!-- Dark background like homepage -->
@@ -199,24 +199,22 @@ function generateOGImage(): string {
     </linearGradient>
   </defs>
 </svg>
-`;
+`
 }
 
 // Main execution
-const appDir = __dirname.replace("/scripts", "");
+const appDir = __dirname.replace('/scripts', '')
 
 try {
-  console.log("Generating Open Graph image from AbacusReact...");
-  const ogImageSvg = generateOGImage();
-  writeFileSync(join(appDir, "public", "og-image.svg"), ogImageSvg);
-  console.log("✓ Generated public/og-image.svg");
+  console.log('Generating Open Graph image from AbacusReact...')
+  const ogImageSvg = generateOGImage()
+  writeFileSync(join(appDir, 'public', 'og-image.svg'), ogImageSvg)
+  console.log('✓ Generated public/og-image.svg')
 
-  console.log("\n✅ Icon generated successfully!");
-  console.log(
-    "\nNote: Day-of-month favicons are generated on-demand by src/app/icon/route.tsx",
-  );
-  console.log("which calls scripts/generateDayIcon.tsx as a subprocess.");
+  console.log('\n✅ Icon generated successfully!')
+  console.log('\nNote: Day-of-month favicons are generated on-demand by src/app/icon/route.tsx')
+  console.log('which calls scripts/generateDayIcon.tsx as a subprocess.')
 } catch (error) {
-  console.error("❌ Error generating icons:", error);
-  process.exit(1);
+  console.error('❌ Error generating icons:', error)
+  process.exit(1)
 }
diff --git a/apps/web/scripts/generateAllDayIcons.tsx b/apps/web/scripts/generateAllDayIcons.tsx
index d33d6fca..c3ea0156 100644
--- a/apps/web/scripts/generateAllDayIcons.tsx
+++ b/apps/web/scripts/generateAllDayIcons.tsx
@@ -8,19 +8,19 @@
  */
 
 // biome-ignore lint/correctness/noUnusedImports: React is required for JSX transform
-import React from "react";
-import { renderToStaticMarkup } from "react-dom/server";
-import { writeFileSync, mkdirSync } from "fs";
-import { join } from "path";
-import { AbacusStatic } from "@soroban/abacus-react";
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { writeFileSync, mkdirSync } from 'fs'
+import { join } from 'path'
+import { AbacusStatic } from '@soroban/abacus-react'
 
 // Extract just the SVG element from rendered output
 function extractSvgElement(markup: string): string {
-  const svgMatch = markup.match(/<svg[^>]*>[\s\S]*?<\/svg>/);
+  const svgMatch = markup.match(/<svg[^>]*>[\s\S]*?<\/svg>/)
   if (!svgMatch) {
-    throw new Error("No SVG element found in rendered output");
+    throw new Error('No SVG element found in rendered output')
   }
-  return svgMatch[0];
+  return svgMatch[0]
 }
 
 // Generate a single day icon
@@ -44,97 +44,95 @@ function generateDayIcon(day: number): string {
       }}
       customStyles={{
         columnPosts: {
-          fill: "#1c1917",
-          stroke: "#0c0a09",
+          fill: '#1c1917',
+          stroke: '#0c0a09',
           strokeWidth: 2,
         },
         reckoningBar: {
-          fill: "#1c1917",
-          stroke: "#0c0a09",
+          fill: '#1c1917',
+          stroke: '#0c0a09',
           strokeWidth: 3,
         },
         columns: {
           0: {
             // Ones place - Gold (royal theme)
-            heavenBeads: { fill: "#fbbf24", stroke: "#f59e0b", strokeWidth: 2 },
-            earthBeads: { fill: "#fbbf24", stroke: "#f59e0b", strokeWidth: 2 },
+            heavenBeads: { fill: '#fbbf24', stroke: '#f59e0b', strokeWidth: 2 },
+            earthBeads: { fill: '#fbbf24', stroke: '#f59e0b', strokeWidth: 2 },
           },
           1: {
             // Tens place - Purple (royal theme)
-            heavenBeads: { fill: "#a855f7", stroke: "#7e22ce", strokeWidth: 2 },
-            earthBeads: { fill: "#a855f7", stroke: "#7e22ce", strokeWidth: 2 },
+            heavenBeads: { fill: '#a855f7', stroke: '#7e22ce', strokeWidth: 2 },
+            earthBeads: { fill: '#a855f7', stroke: '#7e22ce', strokeWidth: 2 },
           },
         },
       }}
-    />,
-  );
+    />
+  )
 
   // Extract the cropped SVG
-  let croppedSvg = extractSvgElement(abacusMarkup);
+  let croppedSvg = extractSvgElement(abacusMarkup)
 
   // Remove !important from CSS (production code policy)
-  croppedSvg = croppedSvg.replace(/\s*!important/g, "");
+  croppedSvg = croppedSvg.replace(/\s*!important/g, '')
 
   // Parse width and height from the cropped SVG
-  const widthMatch = croppedSvg.match(/width="([^"]+)"/);
-  const heightMatch = croppedSvg.match(/height="([^"]+)"/);
+  const widthMatch = croppedSvg.match(/width="([^"]+)"/)
+  const heightMatch = croppedSvg.match(/height="([^"]+)"/)
 
   if (!widthMatch || !heightMatch) {
-    throw new Error("Could not parse dimensions from cropped SVG");
+    throw new Error('Could not parse dimensions from cropped SVG')
   }
 
-  const croppedWidth = parseFloat(widthMatch[1]);
-  const croppedHeight = parseFloat(heightMatch[1]);
+  const croppedWidth = parseFloat(widthMatch[1])
+  const croppedHeight = parseFloat(heightMatch[1])
 
   // Calculate scale to fit cropped region into 96x96 (leaving room for border)
-  const targetSize = 96;
-  const scale = Math.min(targetSize / croppedWidth, targetSize / croppedHeight);
+  const targetSize = 96
+  const scale = Math.min(targetSize / croppedWidth, targetSize / croppedHeight)
 
   // Center in 100x100 canvas
-  const scaledWidth = croppedWidth * scale;
-  const scaledHeight = croppedHeight * scale;
-  const offsetX = (100 - scaledWidth) / 2;
-  const offsetY = (100 - scaledHeight) / 2;
+  const scaledWidth = croppedWidth * scale
+  const scaledHeight = croppedHeight * scale
+  const offsetX = (100 - scaledWidth) / 2
+  const offsetY = (100 - scaledHeight) / 2
 
   // Wrap in 100x100 SVG canvas for favicon
   // Extract viewBox from cropped SVG to preserve it
-  const viewBoxMatch = croppedSvg.match(/viewBox="([^"]+)"/);
-  const viewBox = viewBoxMatch
-    ? viewBoxMatch[1]
-    : `0 0 ${croppedWidth} ${croppedHeight}`;
+  const viewBoxMatch = croppedSvg.match(/viewBox="([^"]+)"/)
+  const viewBox = viewBoxMatch ? viewBoxMatch[1] : `0 0 ${croppedWidth} ${croppedHeight}`
 
   return `<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- Abacus showing day ${day.toString().padStart(2, "0")} (US Central Time) - cropped to active beads -->
+  <!-- Abacus showing day ${day.toString().padStart(2, '0')} (US Central Time) - cropped to active beads -->
   <svg x="${offsetX}" y="${offsetY}" width="${scaledWidth}" height="${scaledHeight}"
        viewBox="${viewBox}">
-    ${croppedSvg.match(/<svg[^>]*>([\s\S]*?)<\/svg>/)?.[1] || ""}
+    ${croppedSvg.match(/<svg[^>]*>([\s\S]*?)<\/svg>/)?.[1] || ''}
   </svg>
 </svg>
-`;
+`
 }
 
 // Main execution
-const publicDir = join(__dirname, "..", "public");
-const iconsDir = join(publicDir, "icons");
+const publicDir = join(__dirname, '..', 'public')
+const iconsDir = join(publicDir, 'icons')
 
 try {
   // Ensure icons directory exists
-  mkdirSync(iconsDir, { recursive: true });
+  mkdirSync(iconsDir, { recursive: true })
 
-  console.log("Generating all 31 day-of-month favicons...\n");
+  console.log('Generating all 31 day-of-month favicons...\n')
 
   // Generate all 31 days
   for (let day = 1; day <= 31; day++) {
-    const svg = generateDayIcon(day);
-    const filename = `icon-day-${day.toString().padStart(2, "0")}.svg`;
-    const filepath = join(iconsDir, filename);
-    writeFileSync(filepath, svg);
-    console.log(`✓ Generated ${filename}`);
+    const svg = generateDayIcon(day)
+    const filename = `icon-day-${day.toString().padStart(2, '0')}.svg`
+    const filepath = join(iconsDir, filename)
+    writeFileSync(filepath, svg)
+    console.log(`✓ Generated ${filename}`)
   }
 
-  console.log("\n✅ All day icons generated successfully!");
-  console.log(`   Location: public/icons/icon-day-*.svg`);
+  console.log('\n✅ All day icons generated successfully!')
+  console.log(`   Location: public/icons/icon-day-*.svg`)
 } catch (error) {
-  console.error("❌ Error generating day icons:", error);
-  process.exit(1);
+  console.error('❌ Error generating day icons:', error)
+  process.exit(1)
 }
diff --git a/apps/web/scripts/generateBlogExamples.ts b/apps/web/scripts/generateBlogExamples.ts
index b006328e..d0e1ce7a 100644
--- a/apps/web/scripts/generateBlogExamples.ts
+++ b/apps/web/scripts/generateBlogExamples.ts
@@ -1,102 +1,97 @@
 // Script to generate example worksheet images for the blog post
 // Shows different scaffolding levels for the 2D difficulty blog post
 
-import fs from "fs";
-import path from "path";
-import { generateWorksheetPreview } from "../src/app/create/worksheets/addition/generatePreview";
-import { DIFFICULTY_PROFILES } from "../src/app/create/worksheets/addition/difficultyProfiles";
+import fs from 'fs'
+import path from 'path'
+import { generateWorksheetPreview } from '../src/app/create/worksheets/addition/generatePreview'
+import { DIFFICULTY_PROFILES } from '../src/app/create/worksheets/addition/difficultyProfiles'
 
 // Output directory
-const outputDir = path.join(
-  process.cwd(),
-  "public",
-  "blog",
-  "difficulty-examples",
-);
+const outputDir = path.join(process.cwd(), 'public', 'blog', 'difficulty-examples')
 
 // Ensure output directory exists
 if (!fs.existsSync(outputDir)) {
-  fs.mkdirSync(outputDir, { recursive: true });
+  fs.mkdirSync(outputDir, { recursive: true })
 }
 
 // Generate examples with SAME regrouping level but different scaffolding
 // This clearly shows how scaffolding changes while keeping problem complexity constant
 const examples = [
   {
-    name: "full-scaffolding",
-    filename: "full-scaffolding.svg",
-    description: "Full Scaffolding: Maximum visual support",
+    name: 'full-scaffolding',
+    filename: 'full-scaffolding.svg',
+    description: 'Full Scaffolding: Maximum visual support',
     // Use medium regrouping with full scaffolding
     config: {
       pAllStart: 0.3,
       pAnyStart: 0.7,
       displayRules: {
-        carryBoxes: "always" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "always" as const,
-        tenFrames: "always" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'always' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'always' as const,
+        tenFrames: 'always' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
     },
   },
   {
-    name: "medium-scaffolding",
-    filename: "medium-scaffolding.svg",
-    description: "Medium Scaffolding: Strategic support",
+    name: 'medium-scaffolding',
+    filename: 'medium-scaffolding.svg',
+    description: 'Medium Scaffolding: Strategic support',
     config: {
       pAllStart: 0.3,
       pAnyStart: 0.7,
       displayRules: {
-        carryBoxes: "whenRegrouping" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "when3PlusDigits" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'whenRegrouping' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'when3PlusDigits' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
     },
   },
   {
-    name: "minimal-scaffolding",
-    filename: "minimal-scaffolding.svg",
-    description: "Minimal Scaffolding: Carry boxes only",
+    name: 'minimal-scaffolding',
+    filename: 'minimal-scaffolding.svg',
+    description: 'Minimal Scaffolding: Carry boxes only',
     config: {
       pAllStart: 0.3,
       pAnyStart: 0.7,
       displayRules: {
-        carryBoxes: "whenMultipleRegroups" as const,
-        answerBoxes: "never" as const,
-        placeValueColors: "never" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'whenMultipleRegroups' as const,
+        answerBoxes: 'never' as const,
+        placeValueColors: 'never' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
     },
   },
   {
-    name: "no-scaffolding",
-    filename: "no-scaffolding.svg",
-    description: "No Scaffolding: Students work independently",
+    name: 'no-scaffolding',
+    filename: 'no-scaffolding.svg',
+    description: 'No Scaffolding: Students work independently',
     config: {
       pAllStart: 0.3,
       pAnyStart: 0.7,
       displayRules: {
-        carryBoxes: "never" as const,
-        answerBoxes: "never" as const,
-        placeValueColors: "never" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'never' as const,
+        answerBoxes: 'never' as const,
+        placeValueColors: 'never' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
     },
   },
-] as const;
+] as const
 
-console.log("Generating blog example worksheets...\n");
+console.log('Generating blog example worksheets...\n')
 
 for (const example of examples) {
-  console.log(`Generating ${example.description}...`);
+  console.log(`Generating ${example.description}...`)
 
   const config = {
     pAllStart: example.config.pAllStart,
@@ -105,28 +100,28 @@ for (const example of examples) {
     problemsPerPage: 4,
     pages: 1,
     cols: 2,
-  };
+  }
 
   try {
-    const result = generateWorksheetPreview(config);
+    const result = generateWorksheetPreview(config)
 
     if (!result.success || !result.pages || result.pages.length === 0) {
-      console.error(`Failed to generate ${example.name}:`, result.error);
-      continue;
+      console.error(`Failed to generate ${example.name}:`, result.error)
+      continue
     }
 
     // Get the first page's SVG
-    const svg = result.pages[0];
+    const svg = result.pages[0]
 
     // Save to file
-    const outputPath = path.join(outputDir, example.filename);
-    fs.writeFileSync(outputPath, svg, "utf-8");
+    const outputPath = path.join(outputDir, example.filename)
+    fs.writeFileSync(outputPath, svg, 'utf-8')
 
-    console.log(`  ✓ Saved to ${outputPath}`);
+    console.log(`  ✓ Saved to ${outputPath}`)
   } catch (error) {
-    console.error(`  ✗ Error generating ${example.name}:`, error);
+    console.error(`  ✗ Error generating ${example.name}:`, error)
   }
 }
 
-console.log("\nDone! Example worksheets generated.");
-console.log(`\nFiles saved to: ${outputDir}`);
+console.log('\nDone! Example worksheets generated.')
+console.log(`\nFiles saved to: ${outputDir}`)
diff --git a/apps/web/scripts/generateDayIcon.tsx b/apps/web/scripts/generateDayIcon.tsx
index f2f9cb4d..ae97bb29 100644
--- a/apps/web/scripts/generateDayIcon.tsx
+++ b/apps/web/scripts/generateDayIcon.tsx
@@ -6,26 +6,26 @@
  * Example: npx tsx scripts/generateDayIcon.tsx 15
  */
 
-import React from "react";
-import { renderToStaticMarkup } from "react-dom/server";
-import { AbacusStatic } from "@soroban/abacus-react";
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { AbacusStatic } from '@soroban/abacus-react'
 
 // Extract just the SVG element from rendered output
 function extractSvgElement(markup: string): string {
-  const svgMatch = markup.match(/<svg[^>]*>[\s\S]*?<\/svg>/);
+  const svgMatch = markup.match(/<svg[^>]*>[\s\S]*?<\/svg>/)
   if (!svgMatch) {
-    throw new Error("No SVG element found in rendered output");
+    throw new Error('No SVG element found in rendered output')
   }
-  return svgMatch[0];
+  return svgMatch[0]
 }
 
 // Get day from command line argument
-const day = parseInt(process.argv[2], 10);
+const day = parseInt(process.argv[2], 10)
 
 if (!day || day < 1 || day > 31) {
-  console.error("Usage: npx tsx scripts/generateDayIcon.tsx <day>");
-  console.error("Example: npx tsx scripts/generateDayIcon.tsx 15");
-  process.exit(1);
+  console.error('Usage: npx tsx scripts/generateDayIcon.tsx <day>')
+  console.error('Example: npx tsx scripts/generateDayIcon.tsx 15')
+  process.exit(1)
 }
 
 // Render 2-column abacus showing day of month
@@ -48,73 +48,71 @@ const abacusMarkup = renderToStaticMarkup(
     }}
     customStyles={{
       columnPosts: {
-        fill: "#1c1917",
-        stroke: "#0c0a09",
+        fill: '#1c1917',
+        stroke: '#0c0a09',
         strokeWidth: 2,
       },
       reckoningBar: {
-        fill: "#1c1917",
-        stroke: "#0c0a09",
+        fill: '#1c1917',
+        stroke: '#0c0a09',
         strokeWidth: 3,
       },
       columns: {
         0: {
           // Ones place - Gold (royal theme)
-          heavenBeads: { fill: "#fbbf24", stroke: "#f59e0b", strokeWidth: 2 },
-          earthBeads: { fill: "#fbbf24", stroke: "#f59e0b", strokeWidth: 2 },
+          heavenBeads: { fill: '#fbbf24', stroke: '#f59e0b', strokeWidth: 2 },
+          earthBeads: { fill: '#fbbf24', stroke: '#f59e0b', strokeWidth: 2 },
         },
         1: {
           // Tens place - Purple (royal theme)
-          heavenBeads: { fill: "#a855f7", stroke: "#7e22ce", strokeWidth: 2 },
-          earthBeads: { fill: "#a855f7", stroke: "#7e22ce", strokeWidth: 2 },
+          heavenBeads: { fill: '#a855f7', stroke: '#7e22ce', strokeWidth: 2 },
+          earthBeads: { fill: '#a855f7', stroke: '#7e22ce', strokeWidth: 2 },
         },
       },
     }}
-  />,
-);
+  />
+)
 
 // Extract the cropped SVG
-let croppedSvg = extractSvgElement(abacusMarkup);
+let croppedSvg = extractSvgElement(abacusMarkup)
 
 // Remove !important from CSS (production code policy)
-croppedSvg = croppedSvg.replace(/\s*!important/g, "");
+croppedSvg = croppedSvg.replace(/\s*!important/g, '')
 
 // Parse width and height from the cropped SVG
-const widthMatch = croppedSvg.match(/width="([^"]+)"/);
-const heightMatch = croppedSvg.match(/height="([^"]+)"/);
+const widthMatch = croppedSvg.match(/width="([^"]+)"/)
+const heightMatch = croppedSvg.match(/height="([^"]+)"/)
 
 if (!widthMatch || !heightMatch) {
-  throw new Error("Could not parse dimensions from cropped SVG");
+  throw new Error('Could not parse dimensions from cropped SVG')
 }
 
-const croppedWidth = parseFloat(widthMatch[1]);
-const croppedHeight = parseFloat(heightMatch[1]);
+const croppedWidth = parseFloat(widthMatch[1])
+const croppedHeight = parseFloat(heightMatch[1])
 
 // Calculate scale to fit cropped region into 96x96 (leaving room for border)
-const targetSize = 96;
-const scale = Math.min(targetSize / croppedWidth, targetSize / croppedHeight);
+const targetSize = 96
+const scale = Math.min(targetSize / croppedWidth, targetSize / croppedHeight)
 
 // Center in 100x100 canvas
-const scaledWidth = croppedWidth * scale;
-const scaledHeight = croppedHeight * scale;
-const offsetX = (100 - scaledWidth) / 2;
-const offsetY = (100 - scaledHeight) / 2;
+const scaledWidth = croppedWidth * scale
+const scaledHeight = croppedHeight * scale
+const offsetX = (100 - scaledWidth) / 2
+const offsetY = (100 - scaledHeight) / 2
 
 // Wrap in 100x100 SVG canvas for favicon
 // Extract viewBox from cropped SVG to preserve it
-const viewBoxMatch = croppedSvg.match(/viewBox="([^"]+)"/);
-const viewBox = viewBoxMatch
-  ? viewBoxMatch[1]
-  : `0 0 ${croppedWidth} ${croppedHeight}`;
+const viewBoxMatch = croppedSvg.match(/viewBox="([^"]+)"/)
+const viewBox = viewBoxMatch ? viewBoxMatch[1] : `0 0 ${croppedWidth} ${croppedHeight}`
 
 const svg = `<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- Abacus showing day ${day.toString().padStart(2, "0")} (US Central Time) - cropped to active beads -->
+  <!-- Abacus showing day ${day.toString().padStart(2, '0')} (US Central Time) - cropped to active beads -->
   <svg x="${offsetX}" y="${offsetY}" width="${scaledWidth}" height="${scaledHeight}"
        viewBox="${viewBox}">
-    ${croppedSvg.match(/<svg[^>]*>([\s\S]*?)<\/svg>/)?.[1] || ""}
+    ${croppedSvg.match(/<svg[^>]*>([\s\S]*?)<\/svg>/)?.[1] || ''}
   </svg>
 </svg>
-`;
+`
 
 // Output to stdout so parent process can capture it
-process.stdout.write(svg);
+process.stdout.write(svg)
diff --git a/apps/web/scripts/generateMultiDigitExamples.ts b/apps/web/scripts/generateMultiDigitExamples.ts
index bbf47477..ac1ddc4b 100644
--- a/apps/web/scripts/generateMultiDigitExamples.ts
+++ b/apps/web/scripts/generateMultiDigitExamples.ts
@@ -1,42 +1,37 @@
 // Script to generate multi-digit (>2 digits) worksheet examples for the blog post
 // Shows how scaffolding adapts to different digit ranges
 
-import fs from "fs";
-import path from "path";
-import { generateWorksheetPreview } from "../src/app/create/worksheets/addition/generatePreview";
+import fs from 'fs'
+import path from 'path'
+import { generateWorksheetPreview } from '../src/app/create/worksheets/addition/generatePreview'
 
 // Output directory
-const outputDir = path.join(
-  process.cwd(),
-  "public",
-  "blog",
-  "multi-digit-examples",
-);
+const outputDir = path.join(process.cwd(), 'public', 'blog', 'multi-digit-examples')
 
 // Ensure output directory exists
 if (!fs.existsSync(outputDir)) {
-  fs.mkdirSync(outputDir, { recursive: true });
+  fs.mkdirSync(outputDir, { recursive: true })
 }
 
 // Generate examples showing different digit ranges and adaptive scaffolding
 const examples = [
   {
-    name: "two-digit-addition",
-    filename: "two-digit.svg",
-    description: "2-digit addition (baseline)",
+    name: 'two-digit-addition',
+    filename: 'two-digit.svg',
+    description: '2-digit addition (baseline)',
     config: {
-      operator: "addition" as const,
+      operator: 'addition' as const,
       pAllStart: 0.0,
       pAnyStart: 0.5,
       digitRange: { min: 2, max: 2 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "always" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "never" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'always' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'never' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: false,
       showBorrowingHints: false,
@@ -44,22 +39,22 @@ const examples = [
     },
   },
   {
-    name: "three-digit-with-colors",
-    filename: "three-digit-colors.svg",
-    description: "3-digit addition with place value colors",
+    name: 'three-digit-with-colors',
+    filename: 'three-digit-colors.svg',
+    description: '3-digit addition with place value colors',
     config: {
-      operator: "addition" as const,
+      operator: 'addition' as const,
       pAllStart: 0.0,
       pAnyStart: 0.5,
       digitRange: { min: 3, max: 3 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "always" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "always" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'always' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'always' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: false,
       showBorrowingHints: false,
@@ -68,22 +63,22 @@ const examples = [
     },
   },
   {
-    name: "four-digit-addition",
-    filename: "four-digit.svg",
-    description: "4-digit addition with adaptive scaffolding",
+    name: 'four-digit-addition',
+    filename: 'four-digit.svg',
+    description: '4-digit addition with adaptive scaffolding',
     config: {
-      operator: "addition" as const,
+      operator: 'addition' as const,
       pAllStart: 0.0,
       pAnyStart: 0.6,
       digitRange: { min: 4, max: 4 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "always" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "always" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'always' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'always' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: false,
       showBorrowingHints: false,
@@ -92,22 +87,22 @@ const examples = [
     },
   },
   {
-    name: "five-digit-addition",
-    filename: "five-digit.svg",
-    description: "5-digit addition (maximum complexity)",
+    name: 'five-digit-addition',
+    filename: 'five-digit.svg',
+    description: '5-digit addition (maximum complexity)',
     config: {
-      operator: "addition" as const,
+      operator: 'addition' as const,
       pAllStart: 0.3,
       pAnyStart: 0.8,
       digitRange: { min: 5, max: 5 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "always" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "always" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'always' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'always' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: false,
       showBorrowingHints: false,
@@ -116,22 +111,22 @@ const examples = [
     },
   },
   {
-    name: "mixed-digit-range",
-    filename: "mixed-range.svg",
-    description: "Mixed problem sizes (2-4 digits)",
+    name: 'mixed-digit-range',
+    filename: 'mixed-range.svg',
+    description: 'Mixed problem sizes (2-4 digits)',
     config: {
-      operator: "addition" as const,
+      operator: 'addition' as const,
       pAllStart: 0.0,
       pAnyStart: 0.5,
       digitRange: { min: 2, max: 4 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "always" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "always" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'always' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'always' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: false,
       showBorrowingHints: false,
@@ -140,33 +135,33 @@ const examples = [
     },
   },
   {
-    name: "three-digit-subtraction",
-    filename: "three-digit-subtraction.svg",
-    description: "3-digit subtraction with borrowing",
+    name: 'three-digit-subtraction',
+    filename: 'three-digit-subtraction.svg',
+    description: '3-digit subtraction with borrowing',
     config: {
-      operator: "subtraction" as const,
+      operator: 'subtraction' as const,
       pAllStart: 0.0,
       pAnyStart: 0.8,
       digitRange: { min: 3, max: 3 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "never" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "always" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'never' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'always' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: true,
       showBorrowingHints: false,
     },
   },
-] as const;
+] as const
 
-console.log("Generating multi-digit example worksheets...\n");
+console.log('Generating multi-digit example worksheets...\n')
 
 for (const example of examples) {
-  console.log(`Generating ${example.description}...`);
+  console.log(`Generating ${example.description}...`)
 
   const config = {
     ...example.config,
@@ -174,29 +169,29 @@ for (const example of examples) {
     pages: 1,
     cols: 2,
     seed: 54321, // Fixed seed for consistent examples
-  };
+  }
 
   try {
-    const result = generateWorksheetPreview(config);
+    const result = generateWorksheetPreview(config)
 
     if (!result.success || !result.pages || result.pages.length === 0) {
-      console.error(`Failed to generate ${example.name}:`, result.error);
-      console.error(`Details:`, result.details);
-      continue;
+      console.error(`Failed to generate ${example.name}:`, result.error)
+      console.error(`Details:`, result.details)
+      continue
     }
 
     // Get the first page's SVG
-    const svg = result.pages[0];
+    const svg = result.pages[0]
 
     // Save to file
-    const outputPath = path.join(outputDir, example.filename);
-    fs.writeFileSync(outputPath, svg, "utf-8");
+    const outputPath = path.join(outputDir, example.filename)
+    fs.writeFileSync(outputPath, svg, 'utf-8')
 
-    console.log(`  ✓ Saved to ${outputPath}`);
+    console.log(`  ✓ Saved to ${outputPath}`)
   } catch (error) {
-    console.error(`  ✗ Error generating ${example.name}:`, error);
+    console.error(`  ✗ Error generating ${example.name}:`, error)
   }
 }
 
-console.log("\nDone! Multi-digit example worksheets generated.");
-console.log(`\nFiles saved to: ${outputDir}`);
+console.log('\nDone! Multi-digit example worksheets generated.')
+console.log(`\nFiles saved to: ${outputDir}`)
diff --git a/apps/web/scripts/generateSubtractionExamples.ts b/apps/web/scripts/generateSubtractionExamples.ts
index 03c8ec0f..1519c65c 100644
--- a/apps/web/scripts/generateSubtractionExamples.ts
+++ b/apps/web/scripts/generateSubtractionExamples.ts
@@ -1,174 +1,169 @@
 // Script to generate subtraction worksheet examples for the blog post
 // Shows different scaffolding levels for subtraction problems
 
-import fs from "fs";
-import path from "path";
-import { generateWorksheetPreview } from "../src/app/create/worksheets/addition/generatePreview";
+import fs from 'fs'
+import path from 'path'
+import { generateWorksheetPreview } from '../src/app/create/worksheets/addition/generatePreview'
 
 // Output directory
-const outputDir = path.join(
-  process.cwd(),
-  "public",
-  "blog",
-  "subtraction-examples",
-);
+const outputDir = path.join(process.cwd(), 'public', 'blog', 'subtraction-examples')
 
 // Ensure output directory exists
 if (!fs.existsSync(outputDir)) {
-  fs.mkdirSync(outputDir, { recursive: true });
+  fs.mkdirSync(outputDir, { recursive: true })
 }
 
 // Generate examples showing different subtraction scaffolding options
 const examples = [
   {
-    name: "subtraction-no-borrowing",
-    filename: "no-borrowing.svg",
-    description: "Simple subtraction (no borrowing needed)",
+    name: 'subtraction-no-borrowing',
+    filename: 'no-borrowing.svg',
+    description: 'Simple subtraction (no borrowing needed)',
     config: {
-      operator: "subtraction" as const,
+      operator: 'subtraction' as const,
       pAllStart: 0.0, // No borrowing problems
       pAnyStart: 0.0,
       digitRange: { min: 2, max: 2 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "never" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "never" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'never' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'never' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: false,
       showBorrowingHints: false,
     },
   },
   {
-    name: "subtraction-with-borrow-notation",
-    filename: "with-borrow-notation.svg",
-    description: "Subtraction with borrow notation boxes",
+    name: 'subtraction-with-borrow-notation',
+    filename: 'with-borrow-notation.svg',
+    description: 'Subtraction with borrow notation boxes',
     config: {
-      operator: "subtraction" as const,
+      operator: 'subtraction' as const,
       pAllStart: 0.0,
       pAnyStart: 1.0, // Some borrowing
       digitRange: { min: 2, max: 2 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "never" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "always" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'never' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'always' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: true,
       showBorrowingHints: false,
     },
   },
   {
-    name: "subtraction-with-hints",
-    filename: "with-borrowing-hints.svg",
-    description: "Subtraction with borrow notation and hints",
+    name: 'subtraction-with-hints',
+    filename: 'with-borrowing-hints.svg',
+    description: 'Subtraction with borrow notation and hints',
     config: {
-      operator: "subtraction" as const,
+      operator: 'subtraction' as const,
       pAllStart: 0.0,
       pAnyStart: 1.0, // Some borrowing
       digitRange: { min: 2, max: 2 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "never" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "always" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'never' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'always' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: true,
       showBorrowingHints: true,
     },
   },
   {
-    name: "subtraction-multiple-borrows",
-    filename: "multiple-borrows.svg",
-    description: "Complex subtraction with multiple borrows",
+    name: 'subtraction-multiple-borrows',
+    filename: 'multiple-borrows.svg',
+    description: 'Complex subtraction with multiple borrows',
     config: {
-      operator: "subtraction" as const,
+      operator: 'subtraction' as const,
       pAllStart: 1.0, // All problems require borrowing
       pAnyStart: 1.0,
       digitRange: { min: 3, max: 3 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "never" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "always" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'never' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'always' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: true,
       showBorrowingHints: false,
     },
   },
   {
-    name: "subtraction-single-borrow",
-    filename: "single-borrow-ones.svg",
-    description: "Single borrow in ones place only",
+    name: 'subtraction-single-borrow',
+    filename: 'single-borrow-ones.svg',
+    description: 'Single borrow in ones place only',
     config: {
-      operator: "subtraction" as const,
+      operator: 'subtraction' as const,
       pAllStart: 0.0,
       pAnyStart: 1.0, // Some borrowing
       digitRange: { min: 2, max: 2 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "never" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "always" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'never' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'always' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: true,
       showBorrowingHints: false,
     },
   },
   {
-    name: "subtraction-comparison-no-notation",
-    filename: "comparison-no-notation.svg",
-    description: "Borrowing problems WITHOUT notation boxes",
+    name: 'subtraction-comparison-no-notation',
+    filename: 'comparison-no-notation.svg',
+    description: 'Borrowing problems WITHOUT notation boxes',
     config: {
-      operator: "subtraction" as const,
+      operator: 'subtraction' as const,
       pAllStart: 0.0,
       pAnyStart: 1.0,
       digitRange: { min: 2, max: 2 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "never" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "never" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'never' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'never' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: false,
       showBorrowingHints: false,
     },
   },
   {
-    name: "subtraction-comparison-with-notation",
-    filename: "comparison-with-notation.svg",
-    description: "Same problems WITH notation boxes",
+    name: 'subtraction-comparison-with-notation',
+    filename: 'comparison-with-notation.svg',
+    description: 'Same problems WITH notation boxes',
     config: {
-      operator: "subtraction" as const,
+      operator: 'subtraction' as const,
       pAllStart: 0.0,
       pAnyStart: 1.0,
       digitRange: { min: 2, max: 2 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "never" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "never" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'never' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'never' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: true,
       showBorrowingHints: false,
@@ -176,44 +171,44 @@ const examples = [
     },
   },
   {
-    name: "subtraction-cascading-borrows",
-    filename: "cascading-borrows.svg",
-    description: "Cascading borrows across multiple places",
+    name: 'subtraction-cascading-borrows',
+    filename: 'cascading-borrows.svg',
+    description: 'Cascading borrows across multiple places',
     config: {
-      operator: "subtraction" as const,
+      operator: 'subtraction' as const,
       pAllStart: 1.0,
       pAnyStart: 1.0,
       digitRange: { min: 4, max: 4 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "never" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "always" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'never' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'always' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: true,
       showBorrowingHints: false,
     },
   },
   {
-    name: "subtraction-hints-detail",
-    filename: "hints-detail.svg",
-    description: "Detailed view of borrowing hints",
+    name: 'subtraction-hints-detail',
+    filename: 'hints-detail.svg',
+    description: 'Detailed view of borrowing hints',
     config: {
-      operator: "subtraction" as const,
+      operator: 'subtraction' as const,
       pAllStart: 0.0,
       pAnyStart: 1.0,
       digitRange: { min: 3, max: 3 },
-      mode: "manual" as const,
+      mode: 'manual' as const,
       displayRules: {
-        carryBoxes: "never" as const,
-        answerBoxes: "always" as const,
-        placeValueColors: "always" as const,
-        tenFrames: "never" as const,
-        problemNumbers: "always" as const,
-        cellBorders: "always" as const,
+        carryBoxes: 'never' as const,
+        answerBoxes: 'always' as const,
+        placeValueColors: 'always' as const,
+        tenFrames: 'never' as const,
+        problemNumbers: 'always' as const,
+        cellBorders: 'always' as const,
       },
       showBorrowNotation: true,
       showBorrowingHints: true,
@@ -221,12 +216,12 @@ const examples = [
       cols: 1,
     },
   },
-] as const;
+] as const
 
-console.log("Generating subtraction example worksheets...\n");
+console.log('Generating subtraction example worksheets...\n')
 
 for (const example of examples) {
-  console.log(`Generating ${example.description}...`);
+  console.log(`Generating ${example.description}...`)
 
   const config = {
     problemsPerPage: 4,
@@ -234,29 +229,29 @@ for (const example of examples) {
     cols: 2,
     seed: 12345, // Fixed seed for consistent examples
     ...example.config, // Spread example config last so it can override defaults
-  };
+  }
 
   try {
-    const result = generateWorksheetPreview(config);
+    const result = generateWorksheetPreview(config)
 
     if (!result.success || !result.pages || result.pages.length === 0) {
-      console.error(`Failed to generate ${example.name}:`, result.error);
-      console.error(`Details:`, result.details);
-      continue;
+      console.error(`Failed to generate ${example.name}:`, result.error)
+      console.error(`Details:`, result.details)
+      continue
     }
 
     // Get the first page's SVG
-    const svg = result.pages[0];
+    const svg = result.pages[0]
 
     // Save to file
-    const outputPath = path.join(outputDir, example.filename);
-    fs.writeFileSync(outputPath, svg, "utf-8");
+    const outputPath = path.join(outputDir, example.filename)
+    fs.writeFileSync(outputPath, svg, 'utf-8')
 
-    console.log(`  ✓ Saved to ${outputPath}`);
+    console.log(`  ✓ Saved to ${outputPath}`)
   } catch (error) {
-    console.error(`  ✗ Error generating ${example.name}:`, error);
+    console.error(`  ✗ Error generating ${example.name}:`, error)
   }
 }
 
-console.log("\nDone! Subtraction example worksheets generated.");
-console.log(`\nFiles saved to: ${outputDir}`);
+console.log('\nDone! Subtraction example worksheets generated.')
+console.log(`\nFiles saved to: ${outputDir}`)
diff --git a/apps/web/scripts/generateTenFrameExamples.ts b/apps/web/scripts/generateTenFrameExamples.ts
index f50d8d4c..329bf684 100644
--- a/apps/web/scripts/generateTenFrameExamples.ts
+++ b/apps/web/scripts/generateTenFrameExamples.ts
@@ -13,37 +13,32 @@
 // 3. Compile to SVG using typst
 // 4. Save to public/blog/[your-post-name]/
 
-import fs from "fs";
-import path from "path";
-import { execSync } from "child_process";
+import fs from 'fs'
+import path from 'path'
+import { execSync } from 'child_process'
 import {
   generateTypstHelpers,
   generateProblemStackFunction,
-} from "../src/app/create/worksheets/addition/typstHelpers";
+} from '../src/app/create/worksheets/addition/typstHelpers'
 
 // Output directory
-const outputDir = path.join(
-  process.cwd(),
-  "public",
-  "blog",
-  "ten-frame-examples",
-);
+const outputDir = path.join(process.cwd(), 'public', 'blog', 'ten-frame-examples')
 
 // Ensure output directory exists
 if (!fs.existsSync(outputDir)) {
-  fs.mkdirSync(outputDir, { recursive: true });
+  fs.mkdirSync(outputDir, { recursive: true })
 }
 
 interface ExampleOptions {
-  showCarryBoxes?: boolean;
-  showAnswerBoxes?: boolean;
-  showPlaceValueColors?: boolean;
-  showTenFrames?: boolean;
-  showProblemNumbers?: boolean;
-  transparentBackground?: boolean;
-  fontSize?: number;
-  addend1: number;
-  addend2: number;
+  showCarryBoxes?: boolean
+  showAnswerBoxes?: boolean
+  showPlaceValueColors?: boolean
+  showTenFrames?: boolean
+  showProblemNumbers?: boolean
+  transparentBackground?: boolean
+  fontSize?: number
+  addend1: number
+  addend2: number
 }
 
 /**
@@ -52,26 +47,26 @@ interface ExampleOptions {
  * Extracted here so we can generate static examples for blog posts
  */
 function generateExampleTypst(config: ExampleOptions): string {
-  const a = config.addend1;
-  const b = config.addend2;
-  const fontSize = config.fontSize || 16;
-  const cellSize = 0.45; // Slightly larger for blog examples vs UI previews (0.35)
+  const a = config.addend1
+  const b = config.addend2
+  const fontSize = config.fontSize || 16
+  const cellSize = 0.45 // Slightly larger for blog examples vs UI previews (0.35)
 
   // Boolean flags matching worksheet generator
-  const showCarries = config.showCarryBoxes ?? false;
-  const showAnswers = config.showAnswerBoxes ?? false;
-  const showColors = config.showPlaceValueColors ?? false;
-  const showNumbers = config.showProblemNumbers ?? false;
-  const showTenFrames = config.showTenFrames ?? false;
-  const showTenFramesForAll = false; // Not used for blog examples
-  const transparentBg = config.transparentBackground ?? false;
+  const showCarries = config.showCarryBoxes ?? false
+  const showAnswers = config.showAnswerBoxes ?? false
+  const showColors = config.showPlaceValueColors ?? false
+  const showNumbers = config.showProblemNumbers ?? false
+  const showTenFrames = config.showTenFrames ?? false
+  const showTenFramesForAll = false // Not used for blog examples
+  const transparentBg = config.transparentBackground ?? false
 
   return String.raw`
-#set page(width: auto, height: auto, margin: 12pt, fill: ${transparentBg ? "none" : "white"})
+#set page(width: auto, height: auto, margin: 12pt, fill: ${transparentBg ? 'none' : 'white'})
 #set text(size: ${fontSize}pt, font: "New Computer Modern Math")
 
 #let heavy-stroke = 0.8pt
-#let show-ten-frames-for-all = ${showTenFramesForAll ? "true" : "false"}
+#let show-ten-frames-for-all = ${showTenFramesForAll ? 'true' : 'false'}
 
 ${generateTypstHelpers(cellSize)}
 
@@ -87,7 +82,7 @@ ${generateProblemStackFunction(cellSize)}
 #align(center + horizon)[
   #problem-stack(
     a, b, aT, aO, bT, bO,
-    ${showNumbers ? "0" : "none"},
+    ${showNumbers ? '0' : 'none'},
     ${showCarries},
     ${showAnswers},
     ${showColors},
@@ -95,16 +90,16 @@ ${generateProblemStackFunction(cellSize)}
     ${showNumbers}
   )
 ]
-`;
+`
 }
 
 // Generate examples showing ten-frames in action
 // Use problems that WILL have regrouping to show ten-frames
 const examples = [
   {
-    name: "with-ten-frames",
-    filename: "with-ten-frames.svg",
-    description: "With Ten-Frames: Visual scaffolding for regrouping",
+    name: 'with-ten-frames',
+    filename: 'with-ten-frames.svg',
+    description: 'With Ten-Frames: Visual scaffolding for regrouping',
     options: {
       addend1: 47,
       addend2: 38, // 7+8=15 requires regrouping, will show ten-frames
@@ -117,9 +112,9 @@ const examples = [
     },
   },
   {
-    name: "without-ten-frames",
-    filename: "without-ten-frames.svg",
-    description: "Without Ten-Frames: Abstract representation",
+    name: 'without-ten-frames',
+    filename: 'without-ten-frames.svg',
+    description: 'Without Ten-Frames: Abstract representation',
     options: {
       addend1: 47,
       addend2: 38, // Same problem, no ten-frames
@@ -132,9 +127,9 @@ const examples = [
     },
   },
   {
-    name: "beginner-with-ten-frames",
-    filename: "beginner-ten-frames.svg",
-    description: "Beginner: Learning regrouping with ten-frames",
+    name: 'beginner-with-ten-frames',
+    filename: 'beginner-ten-frames.svg',
+    description: 'Beginner: Learning regrouping with ten-frames',
     options: {
       addend1: 28,
       addend2: 15, // 8+5=13 requires regrouping
@@ -147,9 +142,9 @@ const examples = [
     },
   },
   {
-    name: "ten-frames-both-columns",
-    filename: "ten-frames-both-columns.svg",
-    description: "Ten-frames in both columns: Double regrouping",
+    name: 'ten-frames-both-columns',
+    filename: 'ten-frames-both-columns.svg',
+    description: 'Ten-frames in both columns: Double regrouping',
     options: {
       addend1: 57,
       addend2: 68, // Both ones (7+8=15) and tens (5+6+1=12) regroup
@@ -161,22 +156,22 @@ const examples = [
       transparentBackground: true,
     },
   },
-] as const;
+] as const
 
-console.log("Generating ten-frame example images (single problems)...\n");
+console.log('Generating ten-frame example images (single problems)...\n')
 
 for (const example of examples) {
-  console.log(`Generating ${example.description}...`);
+  console.log(`Generating ${example.description}...`)
 
   try {
-    const typstSource = generateExampleTypst(example.options);
+    const typstSource = generateExampleTypst(example.options)
 
     // Compile to SVG
-    let svg = execSync("typst compile --format svg - -", {
+    let svg = execSync('typst compile --format svg - -', {
       input: typstSource,
-      encoding: "utf8",
+      encoding: 'utf8',
       maxBuffer: 2 * 1024 * 1024,
-    });
+    })
 
     // Post-process: Make SVG visible on dark background
     // - Digits on white cells should stay BLACK
@@ -184,23 +179,23 @@ for (const example of examples) {
     // - Structural elements (borders, bars) should be WHITE
     svg = svg
       .replace(/stroke="#000000"/g, 'stroke="rgba(255, 255, 255, 0.8)"')
-      .replace(/stroke="#0000004d"/g, 'stroke="rgba(255, 255, 255, 0.4)"');
+      .replace(/stroke="#0000004d"/g, 'stroke="rgba(255, 255, 255, 0.4)"')
 
     // Replace operator (+) fill specifically to white
     svg = svg.replace(
       /(<use xlink:href="#gCFEF70472F9D2AA9AC128F96529819DA"[^>]*fill=")#000000/g,
-      "$1rgba(255, 255, 255, 0.9)",
-    );
+      '$1rgba(255, 255, 255, 0.9)'
+    )
 
     // Save to file
-    const outputPath = path.join(outputDir, example.filename);
-    fs.writeFileSync(outputPath, svg, "utf-8");
+    const outputPath = path.join(outputDir, example.filename)
+    fs.writeFileSync(outputPath, svg, 'utf-8')
 
-    console.log(`  ✓ Saved to ${outputPath}`);
+    console.log(`  ✓ Saved to ${outputPath}`)
   } catch (error) {
-    console.error(`  ✗ Error generating ${example.name}:`, error);
+    console.error(`  ✗ Error generating ${example.name}:`, error)
   }
 }
 
-console.log("\nDone! Ten-frame example images generated.");
-console.log(`\nFiles saved to: ${outputDir}`);
+console.log('\nDone! Ten-frame example images generated.')
+console.log(`\nFiles saved to: ${outputDir}`)
diff --git a/apps/web/scripts/parseBoardCSV.js b/apps/web/scripts/parseBoardCSV.js
index ffc001f4..aeeffefc 100644
--- a/apps/web/scripts/parseBoardCSV.js
+++ b/apps/web/scripts/parseBoardCSV.js
@@ -4,83 +4,83 @@
  * Test script to parse the Rithmomachia board CSV and verify the layout.
  */
 
-const fs = require("fs");
-const path = require("path");
+const fs = require('fs')
+const path = require('path')
 
 const csvPath = path.join(
   process.env.HOME,
-  "Downloads",
-  "rithmomachia board setup - Sheet1 (1).csv",
-);
+  'Downloads',
+  'rithmomachia board setup - Sheet1 (1).csv'
+)
 
 function parseCSV(csvContent) {
-  const lines = csvContent.trim().split("\n");
-  const pieces = [];
+  const lines = csvContent.trim().split('\n')
+  const pieces = []
 
   // Process in triplets (color, shape, number)
   for (let rankIndex = 0; rankIndex < 16; rankIndex++) {
-    const colorRowIndex = rankIndex * 3;
-    const shapeRowIndex = rankIndex * 3 + 1;
-    const numberRowIndex = rankIndex * 3 + 2;
+    const colorRowIndex = rankIndex * 3
+    const shapeRowIndex = rankIndex * 3 + 1
+    const numberRowIndex = rankIndex * 3 + 2
 
-    if (numberRowIndex >= lines.length) break;
+    if (numberRowIndex >= lines.length) break
 
-    const colorRow = lines[colorRowIndex].split(",");
-    const shapeRow = lines[shapeRowIndex].split(",");
-    const numberRow = lines[numberRowIndex].split(",");
+    const colorRow = lines[colorRowIndex].split(',')
+    const shapeRow = lines[shapeRowIndex].split(',')
+    const numberRow = lines[numberRowIndex].split(',')
 
     // Process each column (8 total)
     for (let colIndex = 0; colIndex < 8; colIndex++) {
-      const color = colorRow[colIndex]?.trim();
-      const shape = shapeRow[colIndex]?.trim();
-      const numberStr = numberRow[colIndex]?.trim();
+      const color = colorRow[colIndex]?.trim()
+      const shape = shapeRow[colIndex]?.trim()
+      const numberStr = numberRow[colIndex]?.trim()
 
       // Skip empty cells (but allow empty number for Pyramids)
-      if (!color || !shape) continue;
+      if (!color || !shape) continue
 
       // Map CSV position to game square
       // CSV column → game row (1-8)
       // CSV rank → game column (A-P)
-      const gameRow = colIndex + 1; // CSV col 0 → row 1, col 7 → row 8
-      const gameCol = String.fromCharCode(65 + rankIndex); // rank 0 → A, rank 15 → P
-      const square = `${gameCol}${gameRow}`;
+      const gameRow = colIndex + 1 // CSV col 0 → row 1, col 7 → row 8
+      const gameCol = String.fromCharCode(65 + rankIndex) // rank 0 → A, rank 15 → P
+      const square = `${gameCol}${gameRow}`
 
       // Parse color
-      const pieceColor = color.toLowerCase() === "black" ? "B" : "W";
+      const pieceColor = color.toLowerCase() === 'black' ? 'B' : 'W'
 
       // Parse type
-      let pieceType;
-      const shapeLower = shape.toLowerCase();
-      if (shapeLower === "circle") pieceType = "C";
-      else if (shapeLower === "triangle" || shapeLower === "traingle")
-        pieceType = "T"; // Handle typo
-      else if (shapeLower === "square") pieceType = "S";
-      else if (shapeLower === "pyramid") pieceType = "P";
+      let pieceType
+      const shapeLower = shape.toLowerCase()
+      if (shapeLower === 'circle') pieceType = 'C'
+      else if (shapeLower === 'triangle' || shapeLower === 'traingle')
+        pieceType = 'T' // Handle typo
+      else if (shapeLower === 'square') pieceType = 'S'
+      else if (shapeLower === 'pyramid') pieceType = 'P'
       else {
-        console.warn(`Unknown shape "${shape}" at ${square}`);
-        continue;
+        console.warn(`Unknown shape "${shape}" at ${square}`)
+        continue
       }
 
       // Parse value/pyramid faces
-      if (pieceType === "P") {
+      if (pieceType === 'P') {
         // Pyramid - number cell should be empty, use default faces
         pieces.push({
           color: pieceColor,
           type: pieceType,
-          pyramidFaces: pieceColor === "B" ? [36, 25, 16, 4] : [64, 49, 36, 25],
+          pyramidFaces: pieceColor === 'B' ? [36, 25, 16, 4] : [64, 49, 36, 25],
           square,
-        });
+        })
       } else {
         // Regular piece needs a number
         if (!numberStr) {
-          console.warn(`Missing number for non-Pyramid ${shape} at ${square}`);
-          continue;
+          console.warn(`Missing number for non-Pyramid ${shape} at ${square}`)
+          continue
         }
 
-        const value = parseInt(numberStr, 10);
+        const value = parseInt(numberStr, 10)
         if (isNaN(value)) {
-          console.warn(`Invalid number "${numberStr}" at ${square}`);
-          continue;
+          console.warn(`Invalid number "${numberStr}" at ${square}`)
+          continue
         }
 
         pieces.push({
@@ -88,120 +88,119 @@ function parseCSV(csvContent) {
           type: pieceType,
           value,
           square,
-        });
+        })
       }
     }
   }
 
-  return pieces;
+  return pieces
 }
 
 function generateBoardDisplay(pieces) {
-  const lines = [];
+  const lines = []
 
-  lines.push("\n=== Board Layout (Game Orientation) ===");
-  lines.push("BLACK (top)\n");
+  lines.push('\n=== Board Layout (Game Orientation) ===')
+  lines.push('BLACK (top)\n')
   lines.push(
-    "    A      B      C      D      E      F      G      H      I      J      K      L      M      N      O      P",
-  );
+    '    A      B      C      D      E      F      G      H      I      J      K      L      M      N      O      P'
+  )
 
   for (let row = 8; row >= 1; row--) {
-    let line = `${row}  `;
+    let line = `${row}  `
     for (let colCode = 65; colCode <= 80; colCode++) {
-      const col = String.fromCharCode(colCode);
-      const square = `${col}${row}`;
-      const piece = pieces.find((p) => p.square === square);
+      const col = String.fromCharCode(colCode)
+      const square = `${col}${row}`
+      const piece = pieces.find((p) => p.square === square)
 
       if (piece) {
-        const val =
-          piece.type === "P" ? "  P" : piece.value.toString().padStart(3, " ");
-        line += ` ${piece.color}${piece.type}${val} `;
+        const val = piece.type === 'P' ? '  P' : piece.value.toString().padStart(3, ' ')
+        line += ` ${piece.color}${piece.type}${val} `
       } else {
-        line += "  ----  ";
+        line += '  ----  '
       }
     }
-    lines.push(line);
+    lines.push(line)
   }
 
-  lines.push("\nWHITE (bottom)\n");
+  lines.push('\nWHITE (bottom)\n')
 
-  return lines.join("\n");
+  return lines.join('\n')
 }
 
 function generateColumnSummaries(pieces) {
-  const lines = [];
+  const lines = []
 
-  lines.push("\n=== Column-by-Column Summary ===\n");
+  lines.push('\n=== Column-by-Column Summary ===\n')
 
   for (let colCode = 65; colCode <= 80; colCode++) {
-    const col = String.fromCharCode(colCode);
+    const col = String.fromCharCode(colCode)
     const columnPieces = pieces
       .filter((p) => p.square[0] === col)
       .sort((a, b) => {
-        const rowA = parseInt(a.square.substring(1));
-        const rowB = parseInt(b.square.substring(1));
-        return rowA - rowB;
-      });
+        const rowA = parseInt(a.square.substring(1))
+        const rowB = parseInt(b.square.substring(1))
+        return rowA - rowB
+      })
 
-    if (columnPieces.length === 0) continue;
+    if (columnPieces.length === 0) continue
 
-    const color = columnPieces[0].color === "B" ? "BLACK" : "WHITE";
-    lines.push(`Column ${col} (${color}):`);
+    const color = columnPieces[0].color === 'B' ? 'BLACK' : 'WHITE'
+    lines.push(`Column ${col} (${color}):`)
     for (const piece of columnPieces) {
-      const val = piece.type === "P" ? "P[36,25,16,4]" : piece.value;
-      lines.push(`  ${piece.square}: ${piece.type}(${val})`);
+      const val = piece.type === 'P' ? 'P[36,25,16,4]' : piece.value
+      lines.push(`  ${piece.square}: ${piece.type}(${val})`)
     }
-    lines.push("");
+    lines.push('')
   }
 
-  return lines.join("\n");
+  return lines.join('\n')
 }
 
 function countPieces(pieces) {
-  const blackPieces = pieces.filter((p) => p.color === "B");
-  const whitePieces = pieces.filter((p) => p.color === "W");
+  const blackPieces = pieces.filter((p) => p.color === 'B')
+  const whitePieces = pieces.filter((p) => p.color === 'W')
 
   const countByType = (pieces) => {
-    const counts = { C: 0, T: 0, S: 0, P: 0 };
-    for (const p of pieces) counts[p.type]++;
-    return counts;
-  };
+    const counts = { C: 0, T: 0, S: 0, P: 0 }
+    for (const p of pieces) counts[p.type]++
+    return counts
+  }
 
-  const blackCounts = countByType(blackPieces);
-  const whiteCounts = countByType(whitePieces);
+  const blackCounts = countByType(blackPieces)
+  const whiteCounts = countByType(whitePieces)
 
-  console.log("\n=== Piece Counts ===");
+  console.log('\n=== Piece Counts ===')
   console.log(
-    `Black: ${blackPieces.length} total (C:${blackCounts.C}, T:${blackCounts.T}, S:${blackCounts.S}, P:${blackCounts.P})`,
-  );
+    `Black: ${blackPieces.length} total (C:${blackCounts.C}, T:${blackCounts.T}, S:${blackCounts.S}, P:${blackCounts.P})`
+  )
   console.log(
-    `White: ${whitePieces.length} total (C:${whiteCounts.C}, T:${whiteCounts.T}, S:${whiteCounts.S}, P:${whiteCounts.P})`,
-  );
+    `White: ${whitePieces.length} total (C:${whiteCounts.C}, T:${whiteCounts.T}, S:${whiteCounts.S}, P:${whiteCounts.P})`
+  )
 }
 
 // Main
 try {
-  const csvContent = fs.readFileSync(csvPath, "utf-8");
-  const pieces = parseCSV(csvContent);
+  const csvContent = fs.readFileSync(csvPath, 'utf-8')
+  const pieces = parseCSV(csvContent)
 
-  console.log(`\nParsed ${pieces.length} pieces from CSV`);
-  console.log(generateBoardDisplay(pieces));
-  console.log(generateColumnSummaries(pieces));
-  countPieces(pieces);
+  console.log(`\nParsed ${pieces.length} pieces from CSV`)
+  console.log(generateBoardDisplay(pieces))
+  console.log(generateColumnSummaries(pieces))
+  countPieces(pieces)
 
   // Save parsed data
   const outputPath = path.join(
     __dirname,
-    "..",
-    "src",
-    "arcade-games",
-    "rithmomachia",
-    "utils",
-    "parsedBoard.json",
-  );
-  fs.writeFileSync(outputPath, JSON.stringify(pieces, null, 2));
-  console.log(`\n✅ Saved parsed board to: ${outputPath}`);
+    '..',
+    'src',
+    'arcade-games',
+    'rithmomachia',
+    'utils',
+    'parsedBoard.json'
+  )
+  fs.writeFileSync(outputPath, JSON.stringify(pieces, null, 2))
+  console.log(`\n✅ Saved parsed board to: ${outputPath}`)
 } catch (error) {
-  console.error("Error:", error.message);
-  process.exit(1);
+  console.error('Error:', error.message)
+  process.exit(1)
 }
diff --git a/apps/web/scripts/traceDifficultyPath.ts b/apps/web/scripts/traceDifficultyPath.ts
index 2ebea71d..83af2e68 100644
--- a/apps/web/scripts/traceDifficultyPath.ts
+++ b/apps/web/scripts/traceDifficultyPath.ts
@@ -6,104 +6,102 @@ import {
   findScaffoldingIndex,
   REGROUPING_PROGRESSION,
   SCAFFOLDING_PROGRESSION,
-} from "../src/app/create/worksheets/addition/difficultyProfiles";
+} from '../src/app/create/worksheets/addition/difficultyProfiles'
 
 // Start from beginner
 let state = {
   pAnyStart: DIFFICULTY_PROFILES.beginner.regrouping.pAnyStart,
   pAllStart: DIFFICULTY_PROFILES.beginner.regrouping.pAllStart,
   displayRules: DIFFICULTY_PROFILES.beginner.displayRules,
-};
+}
 
-console.log("=== MAKE HARDER PATH ===\n");
-console.log("Format: (regroupingIdx, scaffoldingIdx) - description\n");
+console.log('=== MAKE HARDER PATH ===\n')
+console.log('Format: (regroupingIdx, scaffoldingIdx) - description\n')
 
-const harderPath: Array<{ r: number; s: number; desc: string }> = [];
+const harderPath: Array<{ r: number; s: number; desc: string }> = []
 
 // Record starting point
-let rIdx = findRegroupingIndex(state.pAnyStart, state.pAllStart);
-let sIdx = findScaffoldingIndex(state.displayRules);
-harderPath.push({ r: rIdx, s: sIdx, desc: "START (beginner)" });
-console.log(`(${rIdx}, ${sIdx}) - START (beginner)`);
+let rIdx = findRegroupingIndex(state.pAnyStart, state.pAllStart)
+let sIdx = findScaffoldingIndex(state.displayRules)
+harderPath.push({ r: rIdx, s: sIdx, desc: 'START (beginner)' })
+console.log(`(${rIdx}, ${sIdx}) - START (beginner)`)
 
 // Click "Make Harder" 30 times or until max
 for (let i = 0; i < 30; i++) {
-  const result = makeHarder(state);
+  const result = makeHarder(state)
 
-  const newR = findRegroupingIndex(result.pAnyStart, result.pAllStart);
-  const newS = findScaffoldingIndex(result.displayRules);
+  const newR = findRegroupingIndex(result.pAnyStart, result.pAllStart)
+  const newS = findScaffoldingIndex(result.displayRules)
 
   if (newR === rIdx && newS === sIdx) {
-    console.log(`\n(${newR}, ${newS}) - ${result.changeDescription} (STOPPED)`);
-    break;
+    console.log(`\n(${newR}, ${newS}) - ${result.changeDescription} (STOPPED)`)
+    break
   }
 
-  rIdx = newR;
-  sIdx = newS;
-  state = result;
+  rIdx = newR
+  sIdx = newS
+  state = result
 
-  harderPath.push({ r: rIdx, s: sIdx, desc: result.changeDescription });
-  console.log(`(${rIdx}, ${sIdx}) - ${result.changeDescription}`);
+  harderPath.push({ r: rIdx, s: sIdx, desc: result.changeDescription })
+  console.log(`(${rIdx}, ${sIdx}) - ${result.changeDescription}`)
 }
 
-console.log("\n\n=== PATH VISUALIZATION ===\n");
-console.log("Regrouping Index →");
-console.log("Scaffolding ↓\n");
+console.log('\n\n=== PATH VISUALIZATION ===\n')
+console.log('Regrouping Index →')
+console.log('Scaffolding ↓\n')
 
 // Create 2D grid visualization
-const grid: string[][] = [];
+const grid: string[][] = []
 for (let s = 0; s <= 12; s++) {
-  grid[s] = [];
+  grid[s] = []
   for (let r = 0; r <= 18; r++) {
-    grid[s][r] = "  ·";
+    grid[s][r] = '  ·'
   }
 }
 
 // Mark path
 harderPath.forEach((point, idx) => {
   if (idx === 0) {
-    grid[point.s][point.r] = "  S"; // Start
+    grid[point.s][point.r] = '  S' // Start
   } else if (idx === harderPath.length - 1) {
-    grid[point.s][point.r] = "  E"; // End
+    grid[point.s][point.r] = '  E' // End
   } else {
-    grid[point.s][point.r] = `${idx.toString().padStart(3)}`;
+    grid[point.s][point.r] = `${idx.toString().padStart(3)}`
   }
-});
+})
 
 // Mark presets
 const presets = [
-  { label: "BEG", profile: DIFFICULTY_PROFILES.beginner },
-  { label: "EAR", profile: DIFFICULTY_PROFILES.earlyLearner },
-  { label: "INT", profile: DIFFICULTY_PROFILES.intermediate },
-  { label: "ADV", profile: DIFFICULTY_PROFILES.advanced },
-  { label: "EXP", profile: DIFFICULTY_PROFILES.expert },
-];
+  { label: 'BEG', profile: DIFFICULTY_PROFILES.beginner },
+  { label: 'EAR', profile: DIFFICULTY_PROFILES.earlyLearner },
+  { label: 'INT', profile: DIFFICULTY_PROFILES.intermediate },
+  { label: 'ADV', profile: DIFFICULTY_PROFILES.advanced },
+  { label: 'EXP', profile: DIFFICULTY_PROFILES.expert },
+]
 
 presets.forEach((preset) => {
   const r = findRegroupingIndex(
     preset.profile.regrouping.pAnyStart,
-    preset.profile.regrouping.pAllStart,
-  );
-  const s = findScaffoldingIndex(preset.profile.displayRules);
+    preset.profile.regrouping.pAllStart
+  )
+  const s = findScaffoldingIndex(preset.profile.displayRules)
 
   // Only mark if not already part of path
-  const onPath = harderPath.some((p) => p.r === r && p.s === s);
+  const onPath = harderPath.some((p) => p.r === r && p.s === s)
   if (!onPath) {
-    grid[s][r] = preset.label;
+    grid[s][r] = preset.label
   }
-});
+})
 
 // Print grid (inverted so scaffolding increases upward)
-console.log(
-  "     0   1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16  17  18",
-);
+console.log('     0   1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16  17  18')
 for (let s = 12; s >= 0; s--) {
-  console.log(`${s.toString().padStart(2)} ${grid[s].join("")}`);
+  console.log(`${s.toString().padStart(2)} ${grid[s].join('')}`)
 }
 
-console.log("\nLegend:");
-console.log("  S = Start (beginner)");
-console.log("  E = End (maximum)");
-console.log("  1-29 = Step number");
-console.log("  BEG/EAR/INT/ADV/EXP = Preset profiles");
-console.log("  · = Not visited");
+console.log('\nLegend:')
+console.log('  S = Start (beginner)')
+console.log('  E = End (maximum)')
+console.log('  1-29 = Step number')
+console.log('  BEG/EAR/INT/ADV/EXP = Preset profiles')
+console.log('  · = Not visited')
diff --git a/apps/web/scripts/validateTypstRefactoring.ts b/apps/web/scripts/validateTypstRefactoring.ts
index 386f2cfe..12f7fcfb 100644
--- a/apps/web/scripts/validateTypstRefactoring.ts
+++ b/apps/web/scripts/validateTypstRefactoring.ts
@@ -6,98 +6,93 @@
  * produces identical Typst output to ensure no regressions.
  */
 
-import { generateSubtractionProblemStackFunction } from "../src/app/create/worksheets/addition/typstHelpers";
-import { generateTypstHelpers } from "../src/app/create/worksheets/addition/typstHelpers";
-import { generatePlaceValueColors } from "../src/app/create/worksheets/addition/typstHelpers";
+import { generateSubtractionProblemStackFunction } from '../src/app/create/worksheets/addition/typstHelpers'
+import { generateTypstHelpers } from '../src/app/create/worksheets/addition/typstHelpers'
+import { generatePlaceValueColors } from '../src/app/create/worksheets/addition/typstHelpers'
 
-console.log("🔍 Validating typstHelpers refactoring...\n");
+console.log('🔍 Validating typstHelpers refactoring...\n')
 
 // Test 1: Check that functions are exported and callable
-console.log("✓ Test 1: Functions are exported");
+console.log('✓ Test 1: Functions are exported')
 console.log(
-  `  - generateSubtractionProblemStackFunction: ${typeof generateSubtractionProblemStackFunction}`,
-);
-console.log(`  - generateTypstHelpers: ${typeof generateTypstHelpers}`);
-console.log(`  - generatePlaceValueColors: ${typeof generatePlaceValueColors}`);
+  `  - generateSubtractionProblemStackFunction: ${typeof generateSubtractionProblemStackFunction}`
+)
+console.log(`  - generateTypstHelpers: ${typeof generateTypstHelpers}`)
+console.log(`  - generatePlaceValueColors: ${typeof generatePlaceValueColors}`)
 
-if (typeof generateSubtractionProblemStackFunction !== "function") {
-  console.error(
-    "❌ generateSubtractionProblemStackFunction is not a function!",
-  );
-  process.exit(1);
+if (typeof generateSubtractionProblemStackFunction !== 'function') {
+  console.error('❌ generateSubtractionProblemStackFunction is not a function!')
+  process.exit(1)
 }
 
 // Test 2: Generate sample Typst code
-console.log("\n✓ Test 2: Generate sample Typst code");
-const cellSize = 0.55;
-const maxDigits = 3;
+console.log('\n✓ Test 2: Generate sample Typst code')
+const cellSize = 0.55
+const maxDigits = 3
 
-const helpers = generateTypstHelpers(cellSize);
-console.log(`  - Helper functions: ${helpers.length} characters`);
+const helpers = generateTypstHelpers(cellSize)
+console.log(`  - Helper functions: ${helpers.length} characters`)
 
-const colors = generatePlaceValueColors();
-console.log(`  - Color definitions: ${colors.length} characters`);
+const colors = generatePlaceValueColors()
+console.log(`  - Color definitions: ${colors.length} characters`)
 
-const problemStack = generateSubtractionProblemStackFunction(
-  cellSize,
-  maxDigits,
-);
-console.log(`  - Problem stack function: ${problemStack.length} characters`);
+const problemStack = generateSubtractionProblemStackFunction(cellSize, maxDigits)
+console.log(`  - Problem stack function: ${problemStack.length} characters`)
 
 // Test 3: Verify key features are present
-console.log("\n✓ Test 3: Verify key features in generated Typst");
+console.log('\n✓ Test 3: Verify key features in generated Typst')
 
 const checks = [
-  { name: "Borrow boxes row", pattern: /Borrow boxes row/ },
-  { name: "Minuend row", pattern: /Minuend row/ },
-  { name: "Subtrahend row", pattern: /Subtrahend row/ },
-  { name: "Answer boxes", pattern: /Answer boxes/ },
-  { name: "Ten-frames", pattern: /Ten-frames row/ },
-  { name: "Borrowing hints", pattern: /show-borrowing-hints/ },
-  { name: "Arrow rendering", pattern: /path\(/ },
-  { name: "Place value colors", pattern: /place-colors/ },
-  { name: "Scratch work boxes", pattern: /dotted.*paint: gray/ },
-];
+  { name: 'Borrow boxes row', pattern: /Borrow boxes row/ },
+  { name: 'Minuend row', pattern: /Minuend row/ },
+  { name: 'Subtrahend row', pattern: /Subtrahend row/ },
+  { name: 'Answer boxes', pattern: /Answer boxes/ },
+  { name: 'Ten-frames', pattern: /Ten-frames row/ },
+  { name: 'Borrowing hints', pattern: /show-borrowing-hints/ },
+  { name: 'Arrow rendering', pattern: /path\(/ },
+  { name: 'Place value colors', pattern: /place-colors/ },
+  { name: 'Scratch work boxes', pattern: /dotted.*paint: gray/ },
+]
 
-let allPassed = true;
+let allPassed = true
 for (const check of checks) {
-  const found = check.pattern.test(problemStack);
+  const found = check.pattern.test(problemStack)
   if (found) {
-    console.log(`  ✓ ${check.name}`);
+    console.log(`  ✓ ${check.name}`)
   } else {
-    console.log(`  ❌ ${check.name} - NOT FOUND`);
-    allPassed = false;
+    console.log(`  ❌ ${check.name} - NOT FOUND`)
+    allPassed = false
   }
 }
 
 // Test 4: Verify structure
-console.log("\n✓ Test 4: Verify Typst structure");
+console.log('\n✓ Test 4: Verify Typst structure')
 const structureChecks = [
-  { name: "Function definition", pattern: /#let subtraction-problem-stack\(/ },
-  { name: "Grid structure", pattern: /grid\(/ },
-  { name: "Stack structure", pattern: /stack\(/ },
-  { name: "Problem number display", pattern: /problem-number-display/ },
-];
+  { name: 'Function definition', pattern: /#let subtraction-problem-stack\(/ },
+  { name: 'Grid structure', pattern: /grid\(/ },
+  { name: 'Stack structure', pattern: /stack\(/ },
+  { name: 'Problem number display', pattern: /problem-number-display/ },
+]
 
 for (const check of structureChecks) {
-  const found = check.pattern.test(problemStack);
+  const found = check.pattern.test(problemStack)
   if (found) {
-    console.log(`  ✓ ${check.name}`);
+    console.log(`  ✓ ${check.name}`)
   } else {
-    console.log(`  ❌ ${check.name} - NOT FOUND`);
-    allPassed = false;
+    console.log(`  ❌ ${check.name} - NOT FOUND`)
+    allPassed = false
   }
 }
 
 // Summary
-console.log("\n" + "=".repeat(60));
+console.log('\n' + '='.repeat(60))
 if (allPassed) {
-  console.log("✅ All validation checks passed!");
-  console.log("\nThe refactored code generates valid Typst output with all");
-  console.log("expected features present.");
-  process.exit(0);
+  console.log('✅ All validation checks passed!')
+  console.log('\nThe refactored code generates valid Typst output with all')
+  console.log('expected features present.')
+  process.exit(0)
 } else {
-  console.log("❌ Some validation checks failed!");
-  console.log("\nPlease review the output above for details.");
-  process.exit(1);
+  console.log('❌ Some validation checks failed!')
+  console.log('\nPlease review the output above for details.')
+  process.exit(1)
 }
diff --git a/apps/web/server.js b/apps/web/server.js
index 43271652..3c9703d2 100644
--- a/apps/web/server.js
+++ b/apps/web/server.js
@@ -1,77 +1,75 @@
-const { createServer } = require("http");
-const { parse } = require("url");
-const next = require("next");
+const { createServer } = require('http')
+const { parse } = require('url')
+const next = require('next')
 
-const dev = process.env.NODE_ENV !== "production";
-const hostname = "localhost";
-const port = parseInt(process.env.PORT || "3000", 10);
+const dev = process.env.NODE_ENV !== 'production'
+const hostname = 'localhost'
+const port = parseInt(process.env.PORT || '3000', 10)
 
-const app = next({ dev, hostname, port });
-const handle = app.getRequestHandler();
+const app = next({ dev, hostname, port })
+const handle = app.getRequestHandler()
 
 // Run migrations before starting server
-console.log("🔄 Running database migrations...");
-const { migrate } = require("drizzle-orm/better-sqlite3/migrator");
-const { db } = require("./dist/db/index");
+console.log('🔄 Running database migrations...')
+const { migrate } = require('drizzle-orm/better-sqlite3/migrator')
+const { db } = require('./dist/db/index')
 
 try {
-  migrate(db, { migrationsFolder: "./drizzle" });
-  console.log("✅ Migrations complete");
+  migrate(db, { migrationsFolder: './drizzle' })
+  console.log('✅ Migrations complete')
 } catch (error) {
-  console.error("❌ Migration failed:", error);
-  process.exit(1);
+  console.error('❌ Migration failed:', error)
+  process.exit(1)
 }
 
 app.prepare().then(() => {
   const server = createServer(async (req, res) => {
     try {
-      const parsedUrl = parse(req.url, true);
-      await handle(req, res, parsedUrl);
+      const parsedUrl = parse(req.url, true)
+      await handle(req, res, parsedUrl)
     } catch (err) {
-      console.error("Error occurred handling", req.url, err);
-      res.statusCode = 500;
-      res.end("internal server error");
+      console.error('Error occurred handling', req.url, err)
+      res.statusCode = 500
+      res.end('internal server error')
     }
-  });
+  })
 
   // Debug: Check upgrade handlers at each stage
-  console.log("📊 Stage 1 - After server creation:");
-  console.log(`   Upgrade handlers: ${server.listeners("upgrade").length}`);
+  console.log('📊 Stage 1 - After server creation:')
+  console.log(`   Upgrade handlers: ${server.listeners('upgrade').length}`)
 
   // Initialize Socket.IO
-  const { initializeSocketServer } = require("./dist/socket-server");
+  const { initializeSocketServer } = require('./dist/socket-server')
 
-  console.log("📊 Stage 2 - Before initializeSocketServer:");
-  console.log(`   Upgrade handlers: ${server.listeners("upgrade").length}`);
+  console.log('📊 Stage 2 - Before initializeSocketServer:')
+  console.log(`   Upgrade handlers: ${server.listeners('upgrade').length}`)
 
-  initializeSocketServer(server);
+  initializeSocketServer(server)
 
-  console.log("📊 Stage 3 - After initializeSocketServer:");
-  const allHandlers = server.listeners("upgrade");
-  console.log(`   Upgrade handlers: ${allHandlers.length}`);
+  console.log('📊 Stage 3 - After initializeSocketServer:')
+  const allHandlers = server.listeners('upgrade')
+  console.log(`   Upgrade handlers: ${allHandlers.length}`)
   allHandlers.forEach((handler, i) => {
-    console.log(
-      `   [${i}] ${handler.name || "anonymous"} (length: ${handler.length} params)`,
-    );
-  });
+    console.log(`   [${i}] ${handler.name || 'anonymous'} (length: ${handler.length} params)`)
+  })
 
   // Log all upgrade requests to see handler execution order
-  const originalEmit = server.emit.bind(server);
+  const originalEmit = server.emit.bind(server)
   server.emit = (event, ...args) => {
-    if (event === "upgrade") {
-      const req = args[0];
-      console.log(`\n🔄 UPGRADE REQUEST: ${req.url}`);
-      console.log(`   ${allHandlers.length} handlers will be called`);
+    if (event === 'upgrade') {
+      const req = args[0]
+      console.log(`\n🔄 UPGRADE REQUEST: ${req.url}`)
+      console.log(`   ${allHandlers.length} handlers will be called`)
     }
-    return originalEmit(event, ...args);
-  };
+    return originalEmit(event, ...args)
+  }
 
   server
-    .once("error", (err) => {
-      console.error(err);
-      process.exit(1);
+    .once('error', (err) => {
+      console.error(err)
+      process.exit(1)
     })
     .listen(port, () => {
-      console.log(`> Ready on http://${hostname}:${port}`);
-    });
-});
+      console.log(`> Ready on http://${hostname}:${port}`)
+    })
+})
diff --git a/apps/web/src/app/__tests__/layout.nav.test.tsx b/apps/web/src/app/__tests__/layout.nav.test.tsx
index 6f777cea..a4df87ff 100644
--- a/apps/web/src/app/__tests__/layout.nav.test.tsx
+++ b/apps/web/src/app/__tests__/layout.nav.test.tsx
@@ -1,33 +1,33 @@
-import { render, screen } from "@testing-library/react";
-import RootLayout from "../layout";
+import { render, screen } from '@testing-library/react'
+import RootLayout from '../layout'
 
 // Mock ClientProviders
-vi.mock("../../components/ClientProviders", () => ({
+vi.mock('../../components/ClientProviders', () => ({
   ClientProviders: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="client-providers">{children}</div>
   ),
-}));
+}))
 
-describe("RootLayout", () => {
-  it("renders children with ClientProviders", () => {
-    const pageContent = <div>Page content</div>;
+describe('RootLayout', () => {
+  it('renders children with ClientProviders', () => {
+    const pageContent = <div>Page content</div>
 
-    render(<RootLayout>{pageContent}</RootLayout>);
+    render(<RootLayout>{pageContent}</RootLayout>)
 
-    expect(screen.getByTestId("client-providers")).toBeInTheDocument();
-    expect(screen.getByText("Page content")).toBeInTheDocument();
-  });
+    expect(screen.getByTestId('client-providers')).toBeInTheDocument()
+    expect(screen.getByText('Page content')).toBeInTheDocument()
+  })
 
-  it("renders html and body tags", () => {
-    const pageContent = <div>Test content</div>;
+  it('renders html and body tags', () => {
+    const pageContent = <div>Test content</div>
 
-    const { container } = render(<RootLayout>{pageContent}</RootLayout>);
+    const { container } = render(<RootLayout>{pageContent}</RootLayout>)
 
-    const html = container.querySelector("html");
-    const body = container.querySelector("body");
+    const html = container.querySelector('html')
+    const body = container.querySelector('body')
 
-    expect(html).toBeInTheDocument();
-    expect(html).toHaveAttribute("lang", "en");
-    expect(body).toBeInTheDocument();
-  });
-});
+    expect(html).toBeInTheDocument()
+    expect(html).toHaveAttribute('lang', 'en')
+    expect(body).toBeInTheDocument()
+  })
+})
diff --git a/apps/web/src/app/abacus-test/page.tsx b/apps/web/src/app/abacus-test/page.tsx
index 12a9b314..2aac91a4 100644
--- a/apps/web/src/app/abacus-test/page.tsx
+++ b/apps/web/src/app/abacus-test/page.tsx
@@ -1,48 +1,48 @@
-"use client";
+'use client'
 
-import { AbacusReact } from "@soroban/abacus-react";
-import { useState } from "react";
-import { css } from "../../../styled-system/css";
+import { AbacusReact } from '@soroban/abacus-react'
+import { useState } from 'react'
+import { css } from '../../../styled-system/css'
 
 export default function AbacusTestPage() {
-  const [value, setValue] = useState(0);
-  const [debugInfo, setDebugInfo] = useState<string>("");
+  const [value, setValue] = useState(0)
+  const [debugInfo, setDebugInfo] = useState<string>('')
 
   const handleValueChange = (newValue: number) => {
-    setValue(newValue);
-    setDebugInfo(`Value changed to: ${newValue}`);
-    console.log("Abacus value:", newValue);
-  };
+    setValue(newValue)
+    setDebugInfo(`Value changed to: ${newValue}`)
+    console.log('Abacus value:', newValue)
+  }
 
   return (
     <div
       className={css({
-        position: "fixed",
+        position: 'fixed',
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        bg: "gray.50",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "4",
+        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",
+          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>
@@ -50,14 +50,14 @@ export default function AbacusTestPage() {
         <button
           onClick={() => setValue(0)}
           className={css({
-            mt: "2",
-            px: "2",
-            py: "1",
-            bg: "blue.500",
-            color: "white",
-            rounded: "sm",
-            fontSize: "xs",
-            cursor: "pointer",
+            mt: '2',
+            px: '2',
+            py: '1',
+            bg: 'blue.500',
+            color: 'white',
+            rounded: 'sm',
+            fontSize: 'xs',
+            cursor: 'pointer',
           })}
         >
           Reset to 0
@@ -65,14 +65,14 @@ export default function AbacusTestPage() {
         <button
           onClick={() => setValue(12345)}
           className={css({
-            mt: "1",
-            px: "2",
-            py: "1",
-            bg: "green.500",
-            color: "white",
-            rounded: "sm",
-            fontSize: "xs",
-            cursor: "pointer",
+            mt: '1',
+            px: '2',
+            py: '1',
+            bg: 'green.500',
+            color: 'white',
+            rounded: 'sm',
+            fontSize: 'xs',
+            cursor: 'pointer',
           })}
         >
           Set to 12345
@@ -81,11 +81,11 @@ export default function AbacusTestPage() {
 
       <div
         style={{
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
         }}
       >
         <AbacusReact
@@ -102,5 +102,5 @@ export default function AbacusTestPage() {
         />
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/api/abacus-settings/route.ts b/apps/web/src/app/api/abacus-settings/route.ts
index 21d3aaf7..11e1c09d 100644
--- a/apps/web/src/app/api/abacus-settings/route.ts
+++ b/apps/web/src/app/api/abacus-settings/route.ts
@@ -1,8 +1,8 @@
-import { eq } from "drizzle-orm";
-import { type NextRequest, NextResponse } from "next/server";
-import { db } from "@/db";
-import * as schema from "@/db/schema";
-import { getViewerId } from "@/lib/viewer";
+import { eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { db } from '@/db'
+import * as schema from '@/db/schema'
+import { getViewerId } from '@/lib/viewer'
 
 /**
  * GET /api/abacus-settings
@@ -10,30 +10,27 @@ import { getViewerId } from "@/lib/viewer";
  */
 export async function GET() {
   try {
-    const viewerId = await getViewerId();
-    const user = await getOrCreateUser(viewerId);
+    const viewerId = await getViewerId()
+    const user = await getOrCreateUser(viewerId)
 
     // Find or create abacus settings
     let settings = await db.query.abacusSettings.findFirst({
       where: eq(schema.abacusSettings.userId, user.id),
-    });
+    })
 
     // If no settings exist, create with defaults
     if (!settings) {
       const [newSettings] = await db
         .insert(schema.abacusSettings)
         .values({ userId: user.id })
-        .returning();
-      settings = newSettings;
+        .returning()
+      settings = newSettings
     }
 
-    return NextResponse.json({ settings });
+    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 },
-    );
+    console.error('Failed to fetch abacus settings:', error)
+    return NextResponse.json({ error: 'Failed to fetch abacus settings' }, { status: 500 })
   }
 }
 
@@ -43,26 +40,26 @@ export async function GET() {
  */
 export async function PATCH(req: NextRequest) {
   try {
-    const viewerId = await getViewerId();
-    const body = await req.json();
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
     // Security: Strip userId from request body - it must come from session only
-    const { userId: _, ...updates } = body;
+    const { userId: _, ...updates } = body
 
-    const user = await getOrCreateUser(viewerId);
+    const user = await getOrCreateUser(viewerId)
 
     // Ensure settings exist
     const existingSettings = await db.query.abacusSettings.findFirst({
       where: eq(schema.abacusSettings.userId, user.id),
-    });
+    })
 
     if (!existingSettings) {
       // Create new settings with updates
       const [newSettings] = await db
         .insert(schema.abacusSettings)
         .values({ userId: user.id, ...updates })
-        .returning();
-      return NextResponse.json({ settings: newSettings });
+        .returning()
+      return NextResponse.json({ settings: newSettings })
     }
 
     // Update existing settings
@@ -70,15 +67,12 @@ export async function PATCH(req: NextRequest) {
       .update(schema.abacusSettings)
       .set(updates)
       .where(eq(schema.abacusSettings.userId, user.id))
-      .returning();
+      .returning()
 
-    return NextResponse.json({ settings: updatedSettings });
+    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 },
-    );
+    console.error('Failed to update abacus settings:', error)
+    return NextResponse.json({ error: 'Failed to update abacus settings' }, { status: 500 })
   }
 }
 
@@ -89,7 +83,7 @@ async function getOrCreateUser(viewerId: string) {
   // Try to find existing user by guest ID
   let user = await db.query.users.findFirst({
     where: eq(schema.users.guestId, viewerId),
-  });
+  })
 
   // If no user exists, create one
   if (!user) {
@@ -98,10 +92,10 @@ async function getOrCreateUser(viewerId: string) {
       .values({
         guestId: viewerId,
       })
-      .returning();
+      .returning()
 
-    user = newUser;
+    user = newUser
   }
 
-  return user;
+  return user
 }
diff --git a/apps/web/src/app/api/arcade-session/__tests__/route.test.ts b/apps/web/src/app/api/arcade-session/__tests__/route.test.ts
index 56e3af10..51405980 100644
--- 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,14 +1,14 @@
-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";
+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";
-  const testGuestId = "test-guest-id-api-routes";
-  const baseUrl = "http://localhost:3000";
+describe('Arcade Session API Routes', () => {
+  const testUserId = 'test-user-for-api-routes'
+  const testGuestId = 'test-guest-id-api-routes'
+  const baseUrl = 'http://localhost:3000'
 
   beforeEach(async () => {
     // Create test user
@@ -19,167 +19,158 @@ describe("Arcade Session API Routes", () => {
         guestId: testGuestId,
         createdAt: new Date(),
       })
-      .onConflictDoNothing();
-  });
+      .onConflictDoNothing()
+  })
 
   afterEach(async () => {
     // Clean up
-    await deleteArcadeSession(testUserId);
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId));
-  });
+    await deleteArcadeSession(testUserId)
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId))
+  })
 
-  describe("POST /api/arcade-session", () => {
-    it("should create a new session", async () => {
+  describe('POST /api/arcade-session', () => {
+    it('should create a new session', async () => {
       const request = new NextRequest(`${baseUrl}/api/arcade-session`, {
-        method: "POST",
+        method: 'POST',
         body: JSON.stringify({
           userId: testUserId,
-          gameName: "matching",
-          gameUrl: "/arcade/matching",
-          initialState: { test: "state" },
+          gameName: 'matching',
+          gameUrl: '/arcade/matching',
+          initialState: { test: 'state' },
           activePlayers: [1],
         }),
-      });
+      })
 
-      const response = await POST(request);
-      const data = await response.json();
+      const response = await POST(request)
+      const data = await response.json()
 
-      expect(response.status).toBe(200);
-      expect(data.session).toBeDefined();
-      expect(data.session.currentGame).toBe("matching");
-      expect(data.session.version).toBe(1);
-    });
+      expect(response.status).toBe(200)
+      expect(data.session).toBeDefined()
+      expect(data.session.currentGame).toBe('matching')
+      expect(data.session.version).toBe(1)
+    })
 
-    it("should return 400 for missing fields", async () => {
+    it('should return 400 for missing fields', async () => {
       const request = new NextRequest(`${baseUrl}/api/arcade-session`, {
-        method: "POST",
+        method: 'POST',
         body: JSON.stringify({
           userId: testUserId,
           // Missing required fields
         }),
-      });
+      })
 
-      const response = await POST(request);
-      const data = await response.json();
+      const response = await POST(request)
+      const data = await response.json()
 
-      expect(response.status).toBe(400);
-      expect(data.error).toBe("Missing required fields");
-    });
+      expect(response.status).toBe(400)
+      expect(data.error).toBe('Missing required fields')
+    })
 
-    it("should return 500 for non-existent user (foreign key constraint)", async () => {
+    it('should return 500 for non-existent user (foreign key constraint)', async () => {
       const request = new NextRequest(`${baseUrl}/api/arcade-session`, {
-        method: "POST",
+        method: 'POST',
         body: JSON.stringify({
-          userId: "non-existent-user",
-          gameName: "matching",
-          gameUrl: "/arcade/matching",
+          userId: 'non-existent-user',
+          gameName: 'matching',
+          gameUrl: '/arcade/matching',
           initialState: {},
           activePlayers: [1],
         }),
-      });
+      })
 
-      const response = await POST(request);
+      const response = await POST(request)
 
-      expect(response.status).toBe(500);
-    });
-  });
+      expect(response.status).toBe(500)
+    })
+  })
 
-  describe("GET /api/arcade-session", () => {
-    it("should retrieve an existing session", async () => {
+  describe('GET /api/arcade-session', () => {
+    it('should retrieve an existing session', async () => {
       // Create session first
       const createRequest = new NextRequest(`${baseUrl}/api/arcade-session`, {
-        method: "POST",
+        method: 'POST',
         body: JSON.stringify({
           userId: testUserId,
-          gameName: "matching",
-          gameUrl: "/arcade/matching",
-          initialState: { test: "state" },
+          gameName: 'matching',
+          gameUrl: '/arcade/matching',
+          initialState: { test: 'state' },
           activePlayers: [1],
         }),
-      });
-      await POST(createRequest);
+      })
+      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();
+      const response = await GET(request)
+      const data = await response.json()
 
-      expect(response.status).toBe(200);
-      expect(data.session).toBeDefined();
-      expect(data.session.currentGame).toBe("matching");
-    });
+      expect(response.status).toBe(200)
+      expect(data.session).toBeDefined()
+      expect(data.session.currentGame).toBe('matching')
+    })
 
-    it("should return 404 for non-existent session", async () => {
-      const request = new NextRequest(
-        `${baseUrl}/api/arcade-session?userId=non-existent`,
-      );
+    it('should return 404 for non-existent session', async () => {
+      const request = new NextRequest(`${baseUrl}/api/arcade-session?userId=non-existent`)
 
-      const response = await GET(request);
+      const response = await GET(request)
 
-      expect(response.status).toBe(404);
-    });
+      expect(response.status).toBe(404)
+    })
 
-    it("should return 400 for missing userId", async () => {
-      const request = new NextRequest(`${baseUrl}/api/arcade-session`);
+    it('should return 400 for missing userId', async () => {
+      const request = new NextRequest(`${baseUrl}/api/arcade-session`)
 
-      const response = await GET(request);
-      const data = await response.json();
+      const response = await GET(request)
+      const data = await response.json()
 
-      expect(response.status).toBe(400);
-      expect(data.error).toBe("userId required");
-    });
-  });
+      expect(response.status).toBe(400)
+      expect(data.error).toBe('userId required')
+    })
+  })
 
-  describe("DELETE /api/arcade-session", () => {
-    it("should delete an existing session", async () => {
+  describe('DELETE /api/arcade-session', () => {
+    it('should delete an existing session', async () => {
       // Create session first
       const createRequest = new NextRequest(`${baseUrl}/api/arcade-session`, {
-        method: "POST",
+        method: 'POST',
         body: JSON.stringify({
           userId: testUserId,
-          gameName: "matching",
-          gameUrl: "/arcade/matching",
+          gameName: 'matching',
+          gameUrl: '/arcade/matching',
           initialState: {},
           activePlayers: [1],
         }),
-      });
-      await POST(createRequest);
+      })
+      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();
+      const response = await DELETE(request)
+      const data = await response.json()
 
-      expect(response.status).toBe(200);
-      expect(data.success).toBe(true);
+      expect(response.status).toBe(200)
+      expect(data.success).toBe(true)
 
       // Verify it's deleted
-      const getRequest = new NextRequest(
-        `${baseUrl}/api/arcade-session?userId=${testUserId}`,
-      );
-      const getResponse = await GET(getRequest);
-      expect(getResponse.status).toBe(404);
-    });
+      const getRequest = new NextRequest(`${baseUrl}/api/arcade-session?userId=${testUserId}`)
+      const getResponse = await GET(getRequest)
+      expect(getResponse.status).toBe(404)
+    })
 
-    it("should return 400 for missing userId", async () => {
+    it('should return 400 for missing userId', async () => {
       const request = new NextRequest(`${baseUrl}/api/arcade-session`, {
-        method: "DELETE",
-      });
+        method: 'DELETE',
+      })
 
-      const response = await DELETE(request);
-      const data = await response.json();
+      const response = await DELETE(request)
+      const data = await response.json()
 
-      expect(response.status).toBe(400);
-      expect(data.error).toBe("userId required");
-    });
-  });
-});
+      expect(response.status).toBe(400)
+      expect(data.error).toBe('userId required')
+    })
+  })
+})
diff --git a/apps/web/src/app/api/arcade-session/route.ts b/apps/web/src/app/api/arcade-session/route.ts
index 2a683ce3..d0fd2946 100644
--- a/apps/web/src/app/api/arcade-session/route.ts
+++ b/apps/web/src/app/api/arcade-session/route.ts
@@ -1,10 +1,10 @@
-import { type NextRequest, NextResponse } from "next/server";
+import { type NextRequest, NextResponse } from 'next/server'
 import {
   createArcadeSession,
   deleteArcadeSession,
   getArcadeSession,
-} from "@/lib/arcade/session-manager";
-import type { GameName } from "@/lib/arcade/validation";
+} from '@/lib/arcade/session-manager'
+import type { GameName } from '@/lib/arcade/validation'
 
 /**
  * GET /api/arcade-session?userId=xxx
@@ -12,16 +12,16 @@ import type { GameName } from "@/lib/arcade/validation";
  */
 export async function GET(request: NextRequest) {
   try {
-    const userId = request.nextUrl.searchParams.get("userId");
+    const userId = request.nextUrl.searchParams.get('userId')
 
     if (!userId) {
-      return NextResponse.json({ error: "userId required" }, { status: 400 });
+      return NextResponse.json({ error: 'userId required' }, { status: 400 })
     }
 
-    const session = await getArcadeSession(userId);
+    const session = await getArcadeSession(userId)
 
     if (!session) {
-      return NextResponse.json({ error: "No active session" }, { status: 404 });
+      return NextResponse.json({ error: 'No active session' }, { status: 404 })
     }
 
     return NextResponse.json({
@@ -33,13 +33,10 @@ export async function GET(request: NextRequest) {
         version: session.version,
         expiresAt: session.expiresAt,
       },
-    });
+    })
   } catch (error) {
-    console.error("Error fetching arcade session:", error);
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 },
-    );
+    console.error('Error fetching arcade session:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
   }
 }
 
@@ -49,25 +46,17 @@ export async function GET(request: NextRequest) {
  */
 export async function POST(request: NextRequest) {
   try {
-    const body = await request.json();
-    const { userId, gameName, gameUrl, initialState, activePlayers, roomId } =
-      body;
+    const body = await request.json()
+    const { userId, gameName, gameUrl, initialState, activePlayers, roomId } = body
 
-    if (
-      !userId ||
-      !gameName ||
-      !gameUrl ||
-      !initialState ||
-      !activePlayers ||
-      !roomId
-    ) {
+    if (!userId || !gameName || !gameUrl || !initialState || !activePlayers || !roomId) {
       return NextResponse.json(
         {
           error:
-            "Missing required fields (userId, gameName, gameUrl, initialState, activePlayers, roomId)",
+            'Missing required fields (userId, gameName, gameUrl, initialState, activePlayers, roomId)',
         },
-        { status: 400 },
-      );
+        { status: 400 }
+      )
     }
 
     const session = await createArcadeSession({
@@ -77,7 +66,7 @@ export async function POST(request: NextRequest) {
       initialState,
       activePlayers,
       roomId,
-    });
+    })
 
     return NextResponse.json({
       session: {
@@ -88,13 +77,10 @@ export async function POST(request: NextRequest) {
         version: session.version,
         expiresAt: session.expiresAt,
       },
-    });
+    })
   } catch (error) {
-    console.error("Error creating arcade session:", error);
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 },
-    );
+    console.error('Error creating arcade session:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
   }
 }
 
@@ -104,20 +90,17 @@ export async function POST(request: NextRequest) {
  */
 export async function DELETE(request: NextRequest) {
   try {
-    const userId = request.nextUrl.searchParams.get("userId");
+    const userId = request.nextUrl.searchParams.get('userId')
 
     if (!userId) {
-      return NextResponse.json({ error: "userId required" }, { status: 400 });
+      return NextResponse.json({ error: 'userId required' }, { status: 400 })
     }
 
-    await deleteArcadeSession(userId);
+    await deleteArcadeSession(userId)
 
-    return NextResponse.json({ success: true });
+    return NextResponse.json({ success: true })
   } catch (error) {
-    console.error("Error deleting arcade session:", error);
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 },
-    );
+    console.error('Error deleting arcade session:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade-session/types.ts b/apps/web/src/app/api/arcade-session/types.ts
index c3c43ac6..5694fbb8 100644
--- a/apps/web/src/app/api/arcade-session/types.ts
+++ b/apps/web/src/app/api/arcade-session/types.ts
@@ -4,15 +4,15 @@
 
 export interface ArcadeSessionResponse {
   session: {
-    currentGame: string;
-    gameUrl: string;
-    gameState: unknown;
-    activePlayers: number[];
-    version: number;
-    expiresAt: Date | string;
-  };
+    currentGame: string
+    gameUrl: string
+    gameState: unknown
+    activePlayers: number[]
+    version: number
+    expiresAt: Date | string
+  }
 }
 
 export interface ArcadeSessionErrorResponse {
-  error: string;
+  error: string
 }
diff --git a/apps/web/src/app/api/arcade/invitations/pending/route.ts b/apps/web/src/app/api/arcade/invitations/pending/route.ts
index 206d858c..65976413 100644
--- a/apps/web/src/app/api/arcade/invitations/pending/route.ts
+++ b/apps/web/src/app/api/arcade/invitations/pending/route.ts
@@ -1,7 +1,7 @@
-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'
+import { type NextRequest, NextResponse } from 'next/server'
+import { db, schema } from '@/db'
+import { getViewerId } from '@/lib/viewer'
 
 /**
  * GET /api/arcade/invitations/pending
@@ -10,7 +10,7 @@ import { getViewerId } from "@/lib/viewer";
  */
 export async function GET(req: NextRequest) {
   try {
-    const viewerId = await getViewerId();
+    const viewerId = await getViewerId()
 
     // Get pending invitations with room details
     const invitations = await db
@@ -30,35 +30,26 @@ export async function GET(req: NextRequest) {
         expiresAt: schema.roomInvitations.expiresAt,
       })
       .from(schema.roomInvitations)
-      .innerJoin(
-        schema.arcadeRooms,
-        eq(schema.roomInvitations.roomId, schema.arcadeRooms.id),
-      )
+      .innerJoin(schema.arcadeRooms, eq(schema.roomInvitations.roomId, schema.arcadeRooms.id))
       .where(eq(schema.roomInvitations.userId, viewerId))
-      .orderBy(schema.roomInvitations.createdAt);
+      .orderBy(schema.roomInvitations.createdAt)
 
     // Get all active bans for this user (bans are deleted when unbanned, so any existing ban is active)
     const activeBans = await db
       .select({ roomId: schema.roomBans.roomId })
       .from(schema.roomBans)
-      .where(eq(schema.roomBans.userId, viewerId));
+      .where(eq(schema.roomBans.userId, viewerId))
 
-    const bannedRoomIds = new Set(activeBans.map((ban) => ban.roomId));
+    const bannedRoomIds = new Set(activeBans.map((ban) => ban.roomId))
 
     // Filter to only pending invitations, excluding banned rooms
     const pendingInvitations = invitations.filter(
-      (inv) => inv.status === "pending" && !bannedRoomIds.has(inv.roomId),
-    );
+      (inv) => inv.status === 'pending' && !bannedRoomIds.has(inv.roomId)
+    )
 
-    return NextResponse.json(
-      { invitations: pendingInvitations },
-      { status: 200 },
-    );
+    return NextResponse.json({ invitations: pendingInvitations }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to get pending invitations:", error);
-    return NextResponse.json(
-      { error: "Failed to get pending invitations" },
-      { status: 500 },
-    );
+    console.error('Failed to get pending invitations:', error)
+    return NextResponse.json({ error: 'Failed to get pending invitations' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/ban/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/ban/route.ts
index 3d700054..6f6918b1 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/ban/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/ban/route.ts
@@ -1,19 +1,15 @@
-import { type NextRequest, NextResponse } from "next/server";
-import {
-  banUserFromRoom,
-  getRoomBans,
-  unbanUserFromRoom,
-} from "@/lib/arcade/room-moderation";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import { getRoomActivePlayers } from "@/lib/arcade/player-manager";
-import { getUserRoomHistory } from "@/lib/arcade/room-member-history";
-import { createInvitation } from "@/lib/arcade/room-invitations";
-import { getViewerId } from "@/lib/viewer";
-import { getSocketIO } from "@/lib/socket-io";
+import { type NextRequest, NextResponse } from 'next/server'
+import { banUserFromRoom, getRoomBans, unbanUserFromRoom } from '@/lib/arcade/room-moderation'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getRoomActivePlayers } from '@/lib/arcade/player-manager'
+import { getUserRoomHistory } from '@/lib/arcade/room-member-history'
+import { createInvitation } from '@/lib/arcade/room-invitations'
+import { getViewerId } from '@/lib/viewer'
+import { getSocketIO } from '@/lib/socket-io'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * POST /api/arcade/rooms/:roomId/ban
@@ -25,60 +21,44 @@ type RouteContext = {
  */
 export async function POST(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
-    const body = await req.json();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
     // Validate required fields
     if (!body.userId || !body.reason) {
       return NextResponse.json(
-        { error: "Missing required fields: userId, reason" },
-        { status: 400 },
-      );
+        { error: 'Missing required fields: userId, reason' },
+        { status: 400 }
+      )
     }
 
     // Validate reason
-    const validReasons = [
-      "harassment",
-      "cheating",
-      "inappropriate-name",
-      "spam",
-      "afk",
-      "other",
-    ];
+    const validReasons = ['harassment', 'cheating', 'inappropriate-name', 'spam', 'afk', 'other']
     if (!validReasons.includes(body.reason)) {
-      return NextResponse.json({ error: "Invalid reason" }, { status: 400 });
+      return NextResponse.json({ error: 'Invalid reason' }, { status: 400 })
     }
 
     // Check if user is the host
-    const members = await getRoomMembers(roomId);
-    const currentMember = members.find((m) => m.userId === viewerId);
+    const members = await getRoomMembers(roomId)
+    const currentMember = members.find((m) => m.userId === viewerId)
 
     if (!currentMember) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     if (!currentMember.isCreator) {
-      return NextResponse.json(
-        { error: "Only the host can ban users" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'Only the host can ban users' }, { status: 403 })
     }
 
     // Can't ban yourself
     if (body.userId === viewerId) {
-      return NextResponse.json(
-        { error: "Cannot ban yourself" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Cannot ban yourself' }, { status: 400 })
     }
 
     // Get the user to ban (they might not be in the room anymore)
-    const targetUser = members.find((m) => m.userId === body.userId);
-    const userName = targetUser?.displayName || body.userId.slice(-4);
+    const targetUser = members.find((m) => m.userId === body.userId)
+    const userName = targetUser?.displayName || body.userId.slice(-4)
 
     // Ban the user
     await banUserFromRoom({
@@ -89,48 +69,48 @@ export async function POST(req: NextRequest, context: RouteContext) {
       bannedByName: currentMember.displayName,
       reason: body.reason,
       notes: body.notes,
-    });
+    })
 
     // Broadcast updates via socket
-    const io = await getSocketIO();
+    const io = await getSocketIO()
     if (io) {
       try {
         // Get updated member list
-        const updatedMembers = await getRoomMembers(roomId);
-        const memberPlayers = await getRoomActivePlayers(roomId);
+        const updatedMembers = await getRoomMembers(roomId)
+        const memberPlayers = await getRoomActivePlayers(roomId)
 
         // Convert memberPlayers Map to object for JSON serialization
-        const memberPlayersObj: Record<string, any[]> = {};
+        const memberPlayersObj: Record<string, any[]> = {}
         for (const [uid, players] of memberPlayers.entries()) {
-          memberPlayersObj[uid] = players;
+          memberPlayersObj[uid] = players
         }
 
         // Tell the banned user they've been removed
-        io.to(`user:${body.userId}`).emit("banned-from-room", {
+        io.to(`user:${body.userId}`).emit('banned-from-room', {
           roomId,
           bannedBy: currentMember.displayName,
           reason: body.reason,
-        });
+        })
 
         // Notify everyone else in the room
-        io.to(`room:${roomId}`).emit("member-left", {
+        io.to(`room:${roomId}`).emit('member-left', {
           roomId,
           userId: body.userId,
           members: updatedMembers,
           memberPlayers: memberPlayersObj,
-          reason: "banned",
-        });
+          reason: 'banned',
+        })
 
-        console.log(`[Ban API] User ${body.userId} banned from room ${roomId}`);
+        console.log(`[Ban API] User ${body.userId} banned from room ${roomId}`)
       } catch (socketError) {
-        console.error("[Ban API] Failed to broadcast ban:", socketError);
+        console.error('[Ban API] Failed to broadcast ban:', socketError)
       }
     }
 
-    return NextResponse.json({ success: true }, { status: 200 });
+    return NextResponse.json({ success: true }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to ban user:", error);
-    return NextResponse.json({ error: "Failed to ban user" }, { status: 500 });
+    console.error('Failed to ban user:', error)
+    return NextResponse.json({ error: 'Failed to ban user' }, { status: 500 })
   }
 }
 
@@ -142,41 +122,32 @@ export async function POST(req: NextRequest, context: RouteContext) {
  */
 export async function DELETE(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
-    const body = await req.json();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
     // Validate required fields
     if (!body.userId) {
-      return NextResponse.json(
-        { error: "Missing required field: userId" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Missing required field: userId' }, { status: 400 })
     }
 
     // Check if user is the host
-    const members = await getRoomMembers(roomId);
-    const currentMember = members.find((m) => m.userId === viewerId);
+    const members = await getRoomMembers(roomId)
+    const currentMember = members.find((m) => m.userId === viewerId)
 
     if (!currentMember) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     if (!currentMember.isCreator) {
-      return NextResponse.json(
-        { error: "Only the host can unban users" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'Only the host can unban users' }, { status: 403 })
     }
 
     // Unban the user
-    await unbanUserFromRoom(roomId, body.userId);
+    await unbanUserFromRoom(roomId, body.userId)
 
     // Auto-invite the unbanned user back to the room
-    const history = await getUserRoomHistory(roomId, body.userId);
+    const history = await getUserRoomHistory(roomId, body.userId)
     if (history) {
       const invitation = await createInvitation({
         roomId,
@@ -184,15 +155,15 @@ export async function DELETE(req: NextRequest, context: RouteContext) {
         userName: history.displayName,
         invitedBy: viewerId,
         invitedByName: currentMember.displayName,
-        invitationType: "auto-unban",
-        message: "You have been unbanned and are welcome to rejoin.",
-      });
+        invitationType: 'auto-unban',
+        message: 'You have been unbanned and are welcome to rejoin.',
+      })
 
       // Broadcast invitation via socket
-      const io = await getSocketIO();
+      const io = await getSocketIO()
       if (io) {
         try {
-          io.to(`user:${body.userId}`).emit("room-invitation-received", {
+          io.to(`user:${body.userId}`).emit('room-invitation-received', {
             invitation: {
               id: invitation.id,
               roomId: invitation.roomId,
@@ -200,29 +171,23 @@ export async function DELETE(req: NextRequest, context: RouteContext) {
               invitedByName: invitation.invitedByName,
               message: invitation.message,
               createdAt: invitation.createdAt,
-              invitationType: "auto-unban",
+              invitationType: 'auto-unban',
             },
-          });
+          })
 
           console.log(
-            `[Unban API] Auto-invited user ${body.userId} after unban from room ${roomId}`,
-          );
+            `[Unban API] Auto-invited user ${body.userId} after unban from room ${roomId}`
+          )
         } catch (socketError) {
-          console.error(
-            "[Unban API] Failed to broadcast invitation:",
-            socketError,
-          );
+          console.error('[Unban API] Failed to broadcast invitation:', socketError)
         }
       }
     }
 
-    return NextResponse.json({ success: true }, { status: 200 });
+    return NextResponse.json({ success: true }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to unban user:", error);
-    return NextResponse.json(
-      { error: "Failed to unban user" },
-      { status: 500 },
-    );
+    console.error('Failed to unban user:', error)
+    return NextResponse.json({ error: 'Failed to unban user' }, { status: 500 })
   }
 }
 
@@ -232,33 +197,27 @@ export async function DELETE(req: NextRequest, context: RouteContext) {
  */
 export async function GET(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
 
     // Check if user is the host
-    const members = await getRoomMembers(roomId);
-    const currentMember = members.find((m) => m.userId === viewerId);
+    const members = await getRoomMembers(roomId)
+    const currentMember = members.find((m) => m.userId === viewerId)
 
     if (!currentMember) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     if (!currentMember.isCreator) {
-      return NextResponse.json(
-        { error: "Only the host can view bans" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'Only the host can view bans' }, { status: 403 })
     }
 
     // Get all bans
-    const bans = await getRoomBans(roomId);
+    const bans = await getRoomBans(roomId)
 
-    return NextResponse.json({ bans }, { status: 200 });
+    return NextResponse.json({ bans }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to get bans:", error);
-    return NextResponse.json({ error: "Failed to get bans" }, { status: 500 });
+    console.error('Failed to get bans:', error)
+    return NextResponse.json({ error: 'Failed to get bans' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/deactivate-player/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/deactivate-player/route.ts
index a4e120ee..1a382974 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/deactivate-player/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/deactivate-player/route.ts
@@ -1,16 +1,12 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import {
-  getPlayer,
-  getRoomActivePlayers,
-  setPlayerActiveStatus,
-} from "@/lib/arcade/player-manager";
-import { getViewerId } from "@/lib/viewer";
-import { getSocketIO } from "@/lib/socket-io";
+import { type NextRequest, NextResponse } from 'next/server'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getPlayer, getRoomActivePlayers, setPlayerActiveStatus } from '@/lib/arcade/player-manager'
+import { getViewerId } from '@/lib/viewer'
+import { getSocketIO } from '@/lib/socket-io'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * POST /api/arcade/rooms/:roomId/deactivate-player
@@ -19,135 +15,109 @@ type RouteContext = {
  *   - playerId: string - The player to deactivate
  */
 export async function POST(req: NextRequest, context: RouteContext) {
-  console.log("[Deactivate Player API] POST request received");
+  console.log('[Deactivate Player API] POST request received')
 
   try {
-    const { roomId } = await context.params;
-    console.log("[Deactivate Player API] roomId:", roomId);
+    const { roomId } = await context.params
+    console.log('[Deactivate Player API] roomId:', roomId)
 
-    const viewerId = await getViewerId();
-    console.log("[Deactivate Player API] viewerId:", viewerId);
+    const viewerId = await getViewerId()
+    console.log('[Deactivate Player API] viewerId:', viewerId)
 
-    const body = await req.json();
-    console.log("[Deactivate Player API] body:", body);
+    const body = await req.json()
+    console.log('[Deactivate Player API] body:', body)
 
     // Validate required fields
     if (!body.playerId) {
-      console.log("[Deactivate Player API] Missing playerId in body");
-      return NextResponse.json(
-        { error: "Missing required field: playerId" },
-        { status: 400 },
-      );
+      console.log('[Deactivate Player API] Missing playerId in body')
+      return NextResponse.json({ error: 'Missing required field: playerId' }, { status: 400 })
     }
 
     // Check if user is the host
-    console.log(
-      "[Deactivate Player API] Fetching room members for roomId:",
-      roomId,
-    );
-    const members = await getRoomMembers(roomId);
-    console.log("[Deactivate Player API] members count:", members.length);
+    console.log('[Deactivate Player API] Fetching room members for roomId:', roomId)
+    const members = await getRoomMembers(roomId)
+    console.log('[Deactivate Player API] members count:', members.length)
 
-    const currentMember = members.find((m) => m.userId === viewerId);
-    console.log("[Deactivate Player API] currentMember:", currentMember);
+    const currentMember = members.find((m) => m.userId === viewerId)
+    console.log('[Deactivate Player API] currentMember:', currentMember)
 
     if (!currentMember) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     if (!currentMember.isCreator) {
-      return NextResponse.json(
-        { error: "Only the host can deactivate players" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'Only the host can deactivate players' }, { status: 403 })
     }
 
     // Get the player
-    console.log(
-      "[Deactivate Player API] Looking up player with ID:",
-      body.playerId,
-    );
-    const player = await getPlayer(body.playerId);
-    console.log("[Deactivate Player API] Player found:", player);
+    console.log('[Deactivate Player API] Looking up player with ID:', body.playerId)
+    const player = await getPlayer(body.playerId)
+    console.log('[Deactivate Player API] Player found:', player)
 
     if (!player) {
-      console.log("[Deactivate Player API] Player not found in database");
-      return NextResponse.json({ error: "Player not found" }, { status: 404 });
+      console.log('[Deactivate Player API] Player not found in database')
+      return NextResponse.json({ error: 'Player not found' }, { status: 404 })
     }
 
-    console.log("[Deactivate Player API] Player userId:", player.userId);
+    console.log('[Deactivate Player API] Player userId:', player.userId)
     console.log(
-      "[Deactivate Player API] Room member userIds:",
-      members.map((m) => m.userId),
-    );
+      '[Deactivate Player API] Room member userIds:',
+      members.map((m) => m.userId)
+    )
 
     // Can't deactivate your own players (use the regular player controls for that)
     if (player.userId === viewerId) {
-      console.log(
-        "[Deactivate Player API] ERROR: Cannot deactivate your own players",
-      );
+      console.log('[Deactivate Player API] ERROR: Cannot deactivate your own players')
       return NextResponse.json(
         {
-          error:
-            "Cannot deactivate your own players. Use the player controls in the nav.",
+          error: 'Cannot deactivate your own players. Use the player controls in the nav.',
         },
-        { status: 400 },
-      );
+        { status: 400 }
+      )
     }
 
     // Note: We don't check if the player belongs to a current room member
     // because players from users who have left the room may still need to be cleaned up
-    console.log(
-      "[Deactivate Player API] Player validation passed, proceeding with deactivation",
-    );
+    console.log('[Deactivate Player API] Player validation passed, proceeding with deactivation')
 
     // Deactivate the player
-    await setPlayerActiveStatus(body.playerId, false);
+    await setPlayerActiveStatus(body.playerId, false)
 
     // Broadcast updates via socket
-    const io = await getSocketIO();
+    const io = await getSocketIO()
     if (io) {
       try {
         // Get updated player list
-        const memberPlayers = await getRoomActivePlayers(roomId);
+        const memberPlayers = await getRoomActivePlayers(roomId)
 
         // Convert memberPlayers Map to object for JSON serialization
-        const memberPlayersObj: Record<string, any[]> = {};
+        const memberPlayersObj: Record<string, any[]> = {}
         for (const [uid, players] of memberPlayers.entries()) {
-          memberPlayersObj[uid] = players;
+          memberPlayersObj[uid] = players
         }
 
         // Notify everyone in the room about the player update
-        io.to(`room:${roomId}`).emit("player-deactivated", {
+        io.to(`room:${roomId}`).emit('player-deactivated', {
           roomId,
           playerId: body.playerId,
           playerName: player.name,
           deactivatedBy: currentMember.displayName,
           memberPlayers: memberPlayersObj,
-        });
+        })
 
         console.log(
-          `[Deactivate Player API] Player ${body.playerId} (${player.name}) deactivated by host in room ${roomId}`,
-        );
+          `[Deactivate Player API] Player ${body.playerId} (${player.name}) deactivated by host in room ${roomId}`
+        )
       } catch (socketError) {
-        console.error(
-          "[Deactivate Player API] Failed to broadcast deactivation:",
-          socketError,
-        );
+        console.error('[Deactivate Player API] Failed to broadcast deactivation:', socketError)
       }
     }
 
-    console.log("[Deactivate Player API] Success - returning 200");
-    return NextResponse.json({ success: true }, { status: 200 });
+    console.log('[Deactivate Player API] Success - returning 200')
+    return NextResponse.json({ success: true }, { status: 200 })
   } catch (error: any) {
-    console.error("[Deactivate Player API] ERROR:", error);
-    console.error("[Deactivate Player API] Error stack:", error.stack);
-    return NextResponse.json(
-      { error: "Failed to deactivate player" },
-      { status: 500 },
-    );
+    console.error('[Deactivate Player API] ERROR:', error)
+    console.error('[Deactivate Player API] Error stack:', error.stack)
+    return NextResponse.json({ error: 'Failed to deactivate player' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/history/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/history/route.ts
index 26e30b0e..39b7f2d7 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/history/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/history/route.ts
@@ -1,11 +1,11 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import { getRoomHistoricalMembersWithStatus } from "@/lib/arcade/room-member-history";
-import { getViewerId } from "@/lib/viewer";
+import { type NextRequest, NextResponse } from 'next/server'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getRoomHistoricalMembersWithStatus } from '@/lib/arcade/room-member-history'
+import { getViewerId } from '@/lib/viewer'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * GET /api/arcade/rooms/:roomId/history
@@ -14,36 +14,27 @@ type RouteContext = {
  */
 export async function GET(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
 
     // Check if user is the host
-    const members = await getRoomMembers(roomId);
-    const currentMember = members.find((m) => m.userId === viewerId);
+    const members = await getRoomMembers(roomId)
+    const currentMember = members.find((m) => m.userId === viewerId)
 
     if (!currentMember) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     if (!currentMember.isCreator) {
-      return NextResponse.json(
-        { error: "Only the host can view room history" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'Only the host can view room history' }, { status: 403 })
     }
 
     // Get all historical members with status
-    const historicalMembers = await getRoomHistoricalMembersWithStatus(roomId);
+    const historicalMembers = await getRoomHistoricalMembersWithStatus(roomId)
 
-    return NextResponse.json({ historicalMembers }, { status: 200 });
+    return NextResponse.json({ historicalMembers }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to get room history:", error);
-    return NextResponse.json(
-      { error: "Failed to get room history" },
-      { status: 500 },
-    );
+    console.error('Failed to get room history:', error)
+    return NextResponse.json({ error: 'Failed to get room history' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/invite/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/invite/route.ts
index 05b32fc9..92edb170 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/invite/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/invite/route.ts
@@ -1,18 +1,18 @@
-import { type NextRequest, NextResponse } from "next/server";
+import { type NextRequest, NextResponse } from 'next/server'
 import {
   createInvitation,
   declineInvitation,
   getInvitation,
   getRoomInvitations,
-} from "@/lib/arcade/room-invitations";
-import { getRoomById } from "@/lib/arcade/room-manager";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import { getSocketIO } from "@/lib/socket-io";
-import { getViewerId } from "@/lib/viewer";
+} from '@/lib/arcade/room-invitations'
+import { getRoomById } from '@/lib/arcade/room-manager'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getSocketIO } from '@/lib/socket-io'
+import { getViewerId } from '@/lib/viewer'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * POST /api/arcade/rooms/:roomId/invite
@@ -24,65 +24,53 @@ type RouteContext = {
  */
 export async function POST(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
-    const body = await req.json();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
     // Validate required fields
     if (!body.userId || !body.userName) {
       return NextResponse.json(
-        { error: "Missing required fields: userId, userName" },
-        { status: 400 },
-      );
+        { error: 'Missing required fields: userId, userName' },
+        { status: 400 }
+      )
     }
 
     // Get room to check access mode
-    const room = await getRoomById(roomId);
+    const room = await getRoomById(roomId)
     if (!room) {
-      return NextResponse.json({ error: "Room not found" }, { status: 404 });
+      return NextResponse.json({ error: 'Room not found' }, { status: 404 })
     }
 
     // Cannot invite to retired rooms
-    if (room.accessMode === "retired") {
+    if (room.accessMode === 'retired') {
       return NextResponse.json(
-        { error: "Cannot send invitations to retired rooms" },
-        { status: 403 },
-      );
+        { error: 'Cannot send invitations to retired rooms' },
+        { status: 403 }
+      )
     }
 
     // Check if user is the host
-    const members = await getRoomMembers(roomId);
-    const currentMember = members.find((m) => m.userId === viewerId);
+    const members = await getRoomMembers(roomId)
+    const currentMember = members.find((m) => m.userId === viewerId)
 
     if (!currentMember) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     if (!currentMember.isCreator) {
-      return NextResponse.json(
-        { error: "Only the host can send invitations" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'Only the host can send invitations' }, { status: 403 })
     }
 
     // Can't invite yourself
     if (body.userId === viewerId) {
-      return NextResponse.json(
-        { error: "Cannot invite yourself" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Cannot invite yourself' }, { status: 400 })
     }
 
     // Can't invite someone who's already in the room
-    const targetUser = members.find((m) => m.userId === body.userId);
+    const targetUser = members.find((m) => m.userId === body.userId)
     if (targetUser) {
-      return NextResponse.json(
-        { error: "User is already in this room" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'User is already in this room' }, { status: 400 })
     }
 
     // Create invitation
@@ -92,16 +80,16 @@ export async function POST(req: NextRequest, context: RouteContext) {
       userName: body.userName,
       invitedBy: viewerId,
       invitedByName: currentMember.displayName,
-      invitationType: "manual",
+      invitationType: 'manual',
       message: body.message,
-    });
+    })
 
     // Broadcast invitation via socket
-    const io = await getSocketIO();
+    const io = await getSocketIO()
     if (io) {
       try {
         // Send to the invited user's channel
-        io.to(`user:${body.userId}`).emit("room-invitation-received", {
+        io.to(`user:${body.userId}`).emit('room-invitation-received', {
           invitation: {
             id: invitation.id,
             roomId: invitation.roomId,
@@ -110,26 +98,18 @@ export async function POST(req: NextRequest, context: RouteContext) {
             message: invitation.message,
             createdAt: invitation.createdAt,
           },
-        });
+        })
 
-        console.log(
-          `[Invite API] Sent invitation to user ${body.userId} for room ${roomId}`,
-        );
+        console.log(`[Invite API] Sent invitation to user ${body.userId} for room ${roomId}`)
       } catch (socketError) {
-        console.error(
-          "[Invite API] Failed to broadcast invitation:",
-          socketError,
-        );
+        console.error('[Invite API] Failed to broadcast invitation:', socketError)
       }
     }
 
-    return NextResponse.json({ invitation }, { status: 200 });
+    return NextResponse.json({ invitation }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to send invitation:", error);
-    return NextResponse.json(
-      { error: "Failed to send invitation" },
-      { status: 500 },
-    );
+    console.error('Failed to send invitation:', error)
+    return NextResponse.json({ error: 'Failed to send invitation' }, { status: 500 })
   }
 }
 
@@ -139,37 +119,28 @@ export async function POST(req: NextRequest, context: RouteContext) {
  */
 export async function GET(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
 
     // Check if user is the host
-    const members = await getRoomMembers(roomId);
-    const currentMember = members.find((m) => m.userId === viewerId);
+    const members = await getRoomMembers(roomId)
+    const currentMember = members.find((m) => m.userId === viewerId)
 
     if (!currentMember) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     if (!currentMember.isCreator) {
-      return NextResponse.json(
-        { error: "Only the host can view invitations" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'Only the host can view invitations' }, { status: 403 })
     }
 
     // Get all invitations
-    const invitations = await getRoomInvitations(roomId);
+    const invitations = await getRoomInvitations(roomId)
 
-    return NextResponse.json({ invitations }, { status: 200 });
+    return NextResponse.json({ invitations }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to get invitations:", error);
-    return NextResponse.json(
-      { error: "Failed to get invitations" },
-      { status: 500 },
-    );
+    console.error('Failed to get invitations:', error)
+    return NextResponse.json({ error: 'Failed to get invitations' }, { status: 500 })
   }
 }
 
@@ -179,35 +150,26 @@ export async function GET(req: NextRequest, context: RouteContext) {
  */
 export async function DELETE(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
 
     // Check if there's an invitation for this user
-    const invitation = await getInvitation(roomId, viewerId);
+    const invitation = await getInvitation(roomId, viewerId)
 
     if (!invitation) {
-      return NextResponse.json(
-        { error: "No invitation found for this room" },
-        { status: 404 },
-      );
+      return NextResponse.json({ error: 'No invitation found for this room' }, { status: 404 })
     }
 
-    if (invitation.status !== "pending") {
-      return NextResponse.json(
-        { error: "Invitation is not pending" },
-        { status: 400 },
-      );
+    if (invitation.status !== 'pending') {
+      return NextResponse.json({ error: 'Invitation is not pending' }, { status: 400 })
     }
 
     // Decline the invitation
-    await declineInvitation(invitation.id);
+    await declineInvitation(invitation.id)
 
-    return NextResponse.json({ success: true }, { status: 200 });
+    return NextResponse.json({ success: true }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to decline invitation:", error);
-    return NextResponse.json(
-      { error: "Failed to decline invitation" },
-      { status: 500 },
-    );
+    console.error('Failed to decline invitation:', error)
+    return NextResponse.json({ error: 'Failed to decline invitation' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/join-request/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/join-request/route.ts
index 346a5fd8..a26f46dc 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/join-request/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/join-request/route.ts
@@ -1,17 +1,14 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { db, schema } from "@/db";
-import { eq } from "drizzle-orm";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import {
-  createJoinRequest,
-  getJoinRequest,
-} from "@/lib/arcade/room-join-requests";
-import { getViewerId } from "@/lib/viewer";
-import { getSocketIO } from "@/lib/socket-io";
+import { type NextRequest, NextResponse } from 'next/server'
+import { db, schema } from '@/db'
+import { eq } from 'drizzle-orm'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { createJoinRequest, getJoinRequest } from '@/lib/arcade/room-join-requests'
+import { getViewerId } from '@/lib/viewer'
+import { getSocketIO } from '@/lib/socket-io'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * POST /api/arcade/rooms/:roomId/join-request
@@ -21,16 +18,13 @@ type RouteContext = {
  */
 export async function POST(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
-    const body = await req.json();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
     // Validate required fields
     if (!body.userName) {
-      return NextResponse.json(
-        { error: "Missing required field: userName" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Missing required field: userName' }, { status: 400 })
     }
 
     // Get room details
@@ -38,37 +32,34 @@ export async function POST(req: NextRequest, context: RouteContext) {
       .select()
       .from(schema.arcadeRooms)
       .where(eq(schema.arcadeRooms.id, roomId))
-      .limit(1);
+      .limit(1)
 
     if (!room) {
-      return NextResponse.json({ error: "Room not found" }, { status: 404 });
+      return NextResponse.json({ error: 'Room not found' }, { status: 404 })
     }
 
     // Check if room is approval-only
-    if (room.accessMode !== "approval-only") {
+    if (room.accessMode !== 'approval-only') {
       return NextResponse.json(
-        { error: "This room does not require approval to join" },
-        { status: 400 },
-      );
+        { error: 'This room does not require approval to join' },
+        { status: 400 }
+      )
     }
 
     // Check if user is already in the room
-    const members = await getRoomMembers(roomId);
-    const existingMember = members.find((m) => m.userId === viewerId);
+    const members = await getRoomMembers(roomId)
+    const existingMember = members.find((m) => m.userId === viewerId)
     if (existingMember) {
-      return NextResponse.json(
-        { error: "You are already in this room" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'You are already in this room' }, { status: 400 })
     }
 
     // Check if user already has a pending request
-    const existingRequest = await getJoinRequest(roomId, viewerId);
-    if (existingRequest && existingRequest.status === "pending") {
+    const existingRequest = await getJoinRequest(roomId, viewerId)
+    if (existingRequest && existingRequest.status === 'pending') {
       return NextResponse.json(
-        { error: "You already have a pending join request" },
-        { status: 400 },
-      );
+        { error: 'You already have a pending join request' },
+        { status: 400 }
+      )
     }
 
     // Create join request
@@ -76,16 +67,16 @@ export async function POST(req: NextRequest, context: RouteContext) {
       roomId,
       userId: viewerId,
       userName: body.userName,
-    });
+    })
 
     // Broadcast to host via socket
-    const io = await getSocketIO();
+    const io = await getSocketIO()
     if (io) {
       try {
         // Get host user ID
-        const host = members.find((m) => m.isCreator);
+        const host = members.find((m) => m.isCreator)
         if (host) {
-          io.to(`user:${host.userId}`).emit("join-request-received", {
+          io.to(`user:${host.userId}`).emit('join-request-received', {
             roomId,
             request: {
               id: request.id,
@@ -93,26 +84,18 @@ export async function POST(req: NextRequest, context: RouteContext) {
               userName: request.userName,
               requestedAt: request.requestedAt,
             },
-          });
+          })
         }
 
-        console.log(
-          `[Join Request API] User ${viewerId} requested to join room ${roomId}`,
-        );
+        console.log(`[Join Request API] User ${viewerId} requested to join room ${roomId}`)
       } catch (socketError) {
-        console.error(
-          "[Join Request API] Failed to broadcast request:",
-          socketError,
-        );
+        console.error('[Join Request API] Failed to broadcast request:', socketError)
       }
     }
 
-    return NextResponse.json({ request }, { status: 200 });
+    return NextResponse.json({ request }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to create join request:", error);
-    return NextResponse.json(
-      { error: "Failed to create join request" },
-      { status: 500 },
-    );
+    console.error('Failed to create join request:', error)
+    return NextResponse.json({ error: 'Failed to create join request' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/[requestId]/approve/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/[requestId]/approve/route.ts
index b0296088..383c2c87 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/[requestId]/approve/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/[requestId]/approve/route.ts
@@ -1,14 +1,14 @@
-import { eq } from "drizzle-orm";
-import { type NextRequest, NextResponse } from "next/server";
-import { db, schema } from "@/db";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import { approveJoinRequest } from "@/lib/arcade/room-join-requests";
-import { getViewerId } from "@/lib/viewer";
-import { getSocketIO } from "@/lib/socket-io";
+import { eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { db, schema } from '@/db'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { approveJoinRequest } from '@/lib/arcade/room-join-requests'
+import { getViewerId } from '@/lib/viewer'
+import { getSocketIO } from '@/lib/socket-io'
 
 type RouteContext = {
-  params: Promise<{ roomId: string; requestId: string }>;
-};
+  params: Promise<{ roomId: string; requestId: string }>
+}
 
 /**
  * POST /api/arcade/rooms/:roomId/join-requests/:requestId/approve
@@ -16,25 +16,22 @@ type RouteContext = {
  */
 export async function POST(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId, requestId } = await context.params;
-    const viewerId = await getViewerId();
+    const { roomId, requestId } = await context.params
+    const viewerId = await getViewerId()
 
     // Check if user is the host
-    const members = await getRoomMembers(roomId);
-    const currentMember = members.find((m) => m.userId === viewerId);
+    const members = await getRoomMembers(roomId)
+    const currentMember = members.find((m) => m.userId === viewerId)
 
     if (!currentMember) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     if (!currentMember.isCreator) {
       return NextResponse.json(
-        { error: "Only the host can approve join requests" },
-        { status: 403 },
-      );
+        { error: 'Only the host can approve join requests' },
+        { status: 403 }
+      )
     }
 
     // Get the request
@@ -42,56 +39,40 @@ export async function POST(req: NextRequest, context: RouteContext) {
       .select()
       .from(schema.roomJoinRequests)
       .where(eq(schema.roomJoinRequests.id, requestId))
-      .limit(1);
+      .limit(1)
 
     if (!request) {
-      return NextResponse.json(
-        { error: "Join request not found" },
-        { status: 404 },
-      );
+      return NextResponse.json({ error: 'Join request not found' }, { status: 404 })
     }
 
-    if (request.status !== "pending") {
-      return NextResponse.json(
-        { error: "Join request is not pending" },
-        { status: 400 },
-      );
+    if (request.status !== 'pending') {
+      return NextResponse.json({ error: 'Join request is not pending' }, { status: 400 })
     }
 
     // Approve the request
-    const approvedRequest = await approveJoinRequest(
-      requestId,
-      viewerId,
-      currentMember.displayName,
-    );
+    const approvedRequest = await approveJoinRequest(requestId, viewerId, currentMember.displayName)
 
     // Notify the requesting user via socket
-    const io = await getSocketIO();
+    const io = await getSocketIO()
     if (io) {
       try {
-        io.to(`user:${request.userId}`).emit("join-request-approved", {
+        io.to(`user:${request.userId}`).emit('join-request-approved', {
           roomId,
           requestId,
           approvedBy: currentMember.displayName,
-        });
+        })
 
         console.log(
-          `[Approve Join Request API] Request ${requestId} approved for user ${request.userId} to join room ${roomId}`,
-        );
+          `[Approve Join Request API] Request ${requestId} approved for user ${request.userId} to join room ${roomId}`
+        )
       } catch (socketError) {
-        console.error(
-          "[Approve Join Request API] Failed to broadcast approval:",
-          socketError,
-        );
+        console.error('[Approve Join Request API] Failed to broadcast approval:', socketError)
       }
     }
 
-    return NextResponse.json({ request: approvedRequest }, { status: 200 });
+    return NextResponse.json({ request: approvedRequest }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to approve join request:", error);
-    return NextResponse.json(
-      { error: "Failed to approve join request" },
-      { status: 500 },
-    );
+    console.error('Failed to approve join request:', error)
+    return NextResponse.json({ error: 'Failed to approve join request' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/[requestId]/deny/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/[requestId]/deny/route.ts
index d87c9f7b..18f82b2a 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/[requestId]/deny/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/[requestId]/deny/route.ts
@@ -1,14 +1,14 @@
-import { eq } from "drizzle-orm";
-import { type NextRequest, NextResponse } from "next/server";
-import { db, schema } from "@/db";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import { denyJoinRequest } from "@/lib/arcade/room-join-requests";
-import { getViewerId } from "@/lib/viewer";
-import { getSocketIO } from "@/lib/socket-io";
+import { eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { db, schema } from '@/db'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { denyJoinRequest } from '@/lib/arcade/room-join-requests'
+import { getViewerId } from '@/lib/viewer'
+import { getSocketIO } from '@/lib/socket-io'
 
 type RouteContext = {
-  params: Promise<{ roomId: string; requestId: string }>;
-};
+  params: Promise<{ roomId: string; requestId: string }>
+}
 
 /**
  * POST /api/arcade/rooms/:roomId/join-requests/:requestId/deny
@@ -16,25 +16,19 @@ type RouteContext = {
  */
 export async function POST(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId, requestId } = await context.params;
-    const viewerId = await getViewerId();
+    const { roomId, requestId } = await context.params
+    const viewerId = await getViewerId()
 
     // Check if user is the host
-    const members = await getRoomMembers(roomId);
-    const currentMember = members.find((m) => m.userId === viewerId);
+    const members = await getRoomMembers(roomId)
+    const currentMember = members.find((m) => m.userId === viewerId)
 
     if (!currentMember) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     if (!currentMember.isCreator) {
-      return NextResponse.json(
-        { error: "Only the host can deny join requests" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'Only the host can deny join requests' }, { status: 403 })
     }
 
     // Get the request
@@ -42,56 +36,40 @@ export async function POST(req: NextRequest, context: RouteContext) {
       .select()
       .from(schema.roomJoinRequests)
       .where(eq(schema.roomJoinRequests.id, requestId))
-      .limit(1);
+      .limit(1)
 
     if (!request) {
-      return NextResponse.json(
-        { error: "Join request not found" },
-        { status: 404 },
-      );
+      return NextResponse.json({ error: 'Join request not found' }, { status: 404 })
     }
 
-    if (request.status !== "pending") {
-      return NextResponse.json(
-        { error: "Join request is not pending" },
-        { status: 400 },
-      );
+    if (request.status !== 'pending') {
+      return NextResponse.json({ error: 'Join request is not pending' }, { status: 400 })
     }
 
     // Deny the request
-    const deniedRequest = await denyJoinRequest(
-      requestId,
-      viewerId,
-      currentMember.displayName,
-    );
+    const deniedRequest = await denyJoinRequest(requestId, viewerId, currentMember.displayName)
 
     // Notify the requesting user via socket
-    const io = await getSocketIO();
+    const io = await getSocketIO()
     if (io) {
       try {
-        io.to(`user:${request.userId}`).emit("join-request-denied", {
+        io.to(`user:${request.userId}`).emit('join-request-denied', {
           roomId,
           requestId,
           deniedBy: currentMember.displayName,
-        });
+        })
 
         console.log(
-          `[Deny Join Request API] Request ${requestId} denied for user ${request.userId} to join room ${roomId}`,
-        );
+          `[Deny Join Request API] Request ${requestId} denied for user ${request.userId} to join room ${roomId}`
+        )
       } catch (socketError) {
-        console.error(
-          "[Deny Join Request API] Failed to broadcast denial:",
-          socketError,
-        );
+        console.error('[Deny Join Request API] Failed to broadcast denial:', socketError)
       }
     }
 
-    return NextResponse.json({ request: deniedRequest }, { status: 200 });
+    return NextResponse.json({ request: deniedRequest }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to deny join request:", error);
-    return NextResponse.json(
-      { error: "Failed to deny join request" },
-      { status: 500 },
-    );
+    console.error('Failed to deny join request:', error)
+    return NextResponse.json({ error: 'Failed to deny join request' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/route.ts
index 1d2a6b09..53556b24 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/route.ts
@@ -1,16 +1,13 @@
-import { type NextRequest, NextResponse } from "next/server";
-import {
-  createJoinRequest,
-  getPendingJoinRequests,
-} from "@/lib/arcade/room-join-requests";
-import { getRoomById } from "@/lib/arcade/room-manager";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import { getSocketIO } from "@/lib/socket-io";
-import { getViewerId } from "@/lib/viewer";
+import { type NextRequest, NextResponse } from 'next/server'
+import { createJoinRequest, getPendingJoinRequests } from '@/lib/arcade/room-join-requests'
+import { getRoomById } from '@/lib/arcade/room-manager'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getSocketIO } from '@/lib/socket-io'
+import { getViewerId } from '@/lib/viewer'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * GET /api/arcade/rooms/:roomId/join-requests
@@ -18,37 +15,28 @@ type RouteContext = {
  */
 export async function GET(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
 
     // Check if user is the host
-    const members = await getRoomMembers(roomId);
-    const currentMember = members.find((m) => m.userId === viewerId);
+    const members = await getRoomMembers(roomId)
+    const currentMember = members.find((m) => m.userId === viewerId)
 
     if (!currentMember) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     if (!currentMember.isCreator) {
-      return NextResponse.json(
-        { error: "Only the host can view join requests" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'Only the host can view join requests' }, { status: 403 })
     }
 
     // Get all pending requests
-    const requests = await getPendingJoinRequests(roomId);
+    const requests = await getPendingJoinRequests(roomId)
 
-    return NextResponse.json({ requests }, { status: 200 });
+    return NextResponse.json({ requests }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to get join requests:", error);
-    return NextResponse.json(
-      { error: "Failed to get join requests" },
-      { status: 500 },
-    );
+    console.error('Failed to get join requests:', error)
+    return NextResponse.json({ error: 'Failed to get join requests' }, { status: 500 })
   }
 }
 
@@ -60,33 +48,33 @@ export async function GET(req: NextRequest, context: RouteContext) {
  */
 export async function POST(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
-    const body = await req.json().catch(() => ({}));
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
+    const body = await req.json().catch(() => ({}))
 
     // Get room to verify it exists
-    const room = await getRoomById(roomId);
+    const room = await getRoomById(roomId)
     if (!room) {
-      return NextResponse.json({ error: "Room not found" }, { status: 404 });
+      return NextResponse.json({ error: 'Room not found' }, { status: 404 })
     }
 
     // Verify room is approval-only
-    if (room.accessMode !== "approval-only") {
+    if (room.accessMode !== 'approval-only') {
       return NextResponse.json(
-        { error: "This room does not require approval to join" },
-        { status: 400 },
-      );
+        { error: 'This room does not require approval to join' },
+        { status: 400 }
+      )
     }
 
     // Get or generate display name
-    const displayName = body.displayName || `Guest ${viewerId.slice(-4)}`;
+    const displayName = body.displayName || `Guest ${viewerId.slice(-4)}`
 
     // Validate display name length
     if (displayName.length > 50) {
       return NextResponse.json(
-        { error: "Display name too long (max 50 characters)" },
-        { status: 400 },
-      );
+        { error: 'Display name too long (max 50 characters)' },
+        { status: 400 }
+      )
     }
 
     // Create join request
@@ -94,18 +82,18 @@ export async function POST(req: NextRequest, context: RouteContext) {
       roomId,
       userId: viewerId,
       userName: displayName,
-    });
+    })
 
     console.log(
-      `[Join Requests] Created request for user ${viewerId} (${displayName}) to join room ${roomId}`,
-    );
+      `[Join Requests] Created request for user ${viewerId} (${displayName}) to join room ${roomId}`
+    )
 
     // Broadcast to the room host (creator) only via socket
-    const io = await getSocketIO();
+    const io = await getSocketIO()
     if (io) {
       try {
         // Send notification only to the room creator's user channel
-        io.to(`user:${room.createdBy}`).emit("join-request-submitted", {
+        io.to(`user:${room.createdBy}`).emit('join-request-submitted', {
           roomId,
           request: {
             id: request.id,
@@ -113,26 +101,20 @@ export async function POST(req: NextRequest, context: RouteContext) {
             userName: request.userName,
             createdAt: request.requestedAt,
           },
-        });
+        })
 
         console.log(
-          `[Join Requests] Broadcasted join-request-submitted to room creator ${room.createdBy}`,
-        );
+          `[Join Requests] Broadcasted join-request-submitted to room creator ${room.createdBy}`
+        )
       } catch (socketError) {
         // Log but don't fail the request if socket broadcast fails
-        console.error(
-          "[Join Requests] Failed to broadcast join-request-submitted:",
-          socketError,
-        );
+        console.error('[Join Requests] Failed to broadcast join-request-submitted:', socketError)
       }
     }
 
-    return NextResponse.json({ request }, { status: 201 });
+    return NextResponse.json({ request }, { status: 201 })
   } catch (error: any) {
-    console.error("Failed to create join request:", error);
-    return NextResponse.json(
-      { error: "Failed to create join request" },
-      { status: 500 },
-    );
+    console.error('Failed to create join request:', error)
+    return NextResponse.json({ error: 'Failed to create join request' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/join/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/join/route.ts
index 71cc9ec7..e37ebf6f 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/join/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/join/route.ts
@@ -1,20 +1,17 @@
-import bcrypt from "bcryptjs";
-import { type NextRequest, NextResponse } from "next/server";
-import {
-  getActivePlayers,
-  getRoomActivePlayers,
-} from "@/lib/arcade/player-manager";
-import { getInvitation, acceptInvitation } from "@/lib/arcade/room-invitations";
-import { getJoinRequest } from "@/lib/arcade/room-join-requests";
-import { getRoomById, touchRoom } from "@/lib/arcade/room-manager";
-import { addRoomMember, getRoomMembers } from "@/lib/arcade/room-membership";
-import { isUserBanned } from "@/lib/arcade/room-moderation";
-import { getSocketIO } from "@/lib/socket-io";
-import { getViewerId } from "@/lib/viewer";
+import bcrypt from 'bcryptjs'
+import { type NextRequest, NextResponse } from 'next/server'
+import { getActivePlayers, getRoomActivePlayers } from '@/lib/arcade/player-manager'
+import { getInvitation, acceptInvitation } from '@/lib/arcade/room-invitations'
+import { getJoinRequest } from '@/lib/arcade/room-join-requests'
+import { getRoomById, touchRoom } from '@/lib/arcade/room-manager'
+import { addRoomMember, getRoomMembers } from '@/lib/arcade/room-membership'
+import { isUserBanned } from '@/lib/arcade/room-moderation'
+import { getSocketIO } from '@/lib/socket-io'
+import { getViewerId } from '@/lib/viewer'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * POST /api/arcade/rooms/:roomId/join
@@ -25,162 +22,139 @@ type RouteContext = {
  */
 export async function POST(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
-    const body = await req.json().catch(() => ({}));
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
+    const body = await req.json().catch(() => ({}))
 
-    console.log(
-      `[Join API] User ${viewerId} attempting to join room ${roomId}`,
-    );
+    console.log(`[Join API] User ${viewerId} attempting to join room ${roomId}`)
 
     // Get room
-    const room = await getRoomById(roomId);
+    const room = await getRoomById(roomId)
     if (!room) {
-      console.log(`[Join API] Room ${roomId} not found`);
-      return NextResponse.json({ error: "Room not found" }, { status: 404 });
+      console.log(`[Join API] Room ${roomId} not found`)
+      return NextResponse.json({ error: 'Room not found' }, { status: 404 })
     }
 
     console.log(
-      `[Join API] Room ${roomId} found: name="${room.name}" accessMode="${room.accessMode}" game="${room.gameName}"`,
-    );
+      `[Join API] Room ${roomId} found: name="${room.name}" accessMode="${room.accessMode}" game="${room.gameName}"`
+    )
 
     // Check if user is banned
-    const banned = await isUserBanned(roomId, viewerId);
+    const banned = await isUserBanned(roomId, viewerId)
     if (banned) {
-      return NextResponse.json(
-        { error: "You are banned from this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are banned from this room' }, { status: 403 })
     }
 
     // Check if user is already a member (for locked/retired room access)
-    const members = await getRoomMembers(roomId);
-    const isExistingMember = members.some((m) => m.userId === viewerId);
-    const isRoomCreator = room.createdBy === viewerId;
+    const members = await getRoomMembers(roomId)
+    const isExistingMember = members.some((m) => m.userId === viewerId)
+    const isRoomCreator = room.createdBy === viewerId
 
     // Track invitation/join request to mark as accepted after successful join
-    let invitationToAccept: string | null = null;
-    let joinRequestToAccept: string | null = null;
+    let invitationToAccept: string | null = null
+    let joinRequestToAccept: string | null = null
 
     // Check for pending invitation (regardless of access mode)
     // This ensures invitations are marked as accepted when user joins ANY room type
-    const invitation = await getInvitation(roomId, viewerId);
-    if (invitation && invitation.status === "pending") {
-      invitationToAccept = invitation.id;
+    const invitation = await getInvitation(roomId, viewerId)
+    if (invitation && invitation.status === 'pending') {
+      invitationToAccept = invitation.id
       console.log(
-        `[Join API] Found pending invitation ${invitation.id} for user ${viewerId} in room ${roomId}`,
-      );
+        `[Join API] Found pending invitation ${invitation.id} for user ${viewerId} in room ${roomId}`
+      )
     }
 
     // Validate access mode
     switch (room.accessMode) {
-      case "locked":
+      case 'locked':
         // Allow existing members to continue using the room, but block new members
         if (!isExistingMember) {
           return NextResponse.json(
-            { error: "This room is locked and not accepting new members" },
-            { status: 403 },
-          );
+            { error: 'This room is locked and not accepting new members' },
+            { status: 403 }
+          )
         }
-        break;
+        break
 
-      case "retired":
+      case 'retired':
         // Only the room creator can access retired rooms
         if (!isRoomCreator) {
           return NextResponse.json(
             {
-              error:
-                "This room has been retired and is only accessible to the owner",
+              error: 'This room has been retired and is only accessible to the owner',
             },
-            { status: 410 },
-          );
+            { status: 410 }
+          )
         }
-        break;
+        break
 
-      case "password": {
+      case 'password': {
         if (!body.password) {
           return NextResponse.json(
-            { error: "Password required to join this room" },
-            { status: 401 },
-          );
+            { error: 'Password required to join this room' },
+            { status: 401 }
+          )
         }
         if (!room.password) {
-          return NextResponse.json(
-            { error: "Room password not configured" },
-            { status: 500 },
-          );
+          return NextResponse.json({ error: 'Room password not configured' }, { status: 500 })
         }
-        const passwordMatch = await bcrypt.compare(
-          body.password,
-          room.password,
-        );
+        const passwordMatch = await bcrypt.compare(body.password, room.password)
         if (!passwordMatch) {
-          return NextResponse.json(
-            { error: "Incorrect password" },
-            { status: 401 },
-          );
+          return NextResponse.json({ error: 'Incorrect password' }, { status: 401 })
         }
-        break;
+        break
       }
 
-      case "restricted": {
-        console.log(
-          `[Join API] Room is restricted, checking invitation for user ${viewerId}`,
-        );
+      case 'restricted': {
+        console.log(`[Join API] Room is restricted, checking invitation for user ${viewerId}`)
         // Room creator can always rejoin their own room
         if (!isRoomCreator) {
           // For restricted rooms, invitation is REQUIRED
           if (!invitationToAccept) {
-            console.log(
-              `[Join API] No valid pending invitation, rejecting join`,
-            );
+            console.log(`[Join API] No valid pending invitation, rejecting join`)
             return NextResponse.json(
-              { error: "You need a valid invitation to join this room" },
-              { status: 403 },
-            );
+              { error: 'You need a valid invitation to join this room' },
+              { status: 403 }
+            )
           }
-          console.log(
-            `[Join API] Valid invitation found, will accept after member added`,
-          );
+          console.log(`[Join API] Valid invitation found, will accept after member added`)
         } else {
-          console.log(
-            `[Join API] User is room creator, skipping invitation check`,
-          );
+          console.log(`[Join API] User is room creator, skipping invitation check`)
         }
-        break;
+        break
       }
 
-      case "approval-only": {
+      case 'approval-only': {
         // Room creator can always rejoin their own room without approval
         if (!isRoomCreator) {
           // Check for approved join request
-          const joinRequest = await getJoinRequest(roomId, viewerId);
-          if (!joinRequest || joinRequest.status !== "approved") {
+          const joinRequest = await getJoinRequest(roomId, viewerId)
+          if (!joinRequest || joinRequest.status !== 'approved') {
             return NextResponse.json(
-              { error: "Your join request must be approved by the host" },
-              { status: 403 },
-            );
+              { error: 'Your join request must be approved by the host' },
+              { status: 403 }
+            )
           }
           // Note: Join request stays in "approved" status after join
           // (No need to update it - "approved" indicates they were allowed in)
-          joinRequestToAccept = joinRequest.id;
+          joinRequestToAccept = joinRequest.id
         }
-        break;
+        break
       }
       default:
         // No additional checks needed
-        break;
+        break
     }
 
     // Get or generate display name
-    const displayName = body.displayName || `Guest ${viewerId.slice(-4)}`;
+    const displayName = body.displayName || `Guest ${viewerId.slice(-4)}`
 
     // Validate display name length
     if (displayName.length > 50) {
       return NextResponse.json(
-        { error: "Display name too long (max 50 characters)" },
-        { status: 400 },
-      );
+        { error: 'Display name too long (max 50 characters)' },
+        { status: 400 }
+      )
     }
 
     // Add member (with auto-leave logic for modal room enforcement)
@@ -189,60 +163,53 @@ export async function POST(req: NextRequest, context: RouteContext) {
       userId: viewerId,
       displayName,
       isCreator: false,
-    });
+    })
 
     // Mark invitation as accepted (if applicable)
     if (invitationToAccept) {
-      await acceptInvitation(invitationToAccept);
-      console.log(
-        `[Join API] Accepted invitation ${invitationToAccept} for user ${viewerId}`,
-      );
+      await acceptInvitation(invitationToAccept)
+      console.log(`[Join API] Accepted invitation ${invitationToAccept} for user ${viewerId}`)
     }
     // Note: Join requests stay in "approved" status (no need to update)
 
     // Fetch user's active players (these will participate in the game)
-    const activePlayers = await getActivePlayers(viewerId);
+    const activePlayers = await getActivePlayers(viewerId)
 
     // Update room activity to refresh TTL
-    await touchRoom(roomId);
+    await touchRoom(roomId)
 
     // Broadcast to all users in the room via socket
-    const io = await getSocketIO();
+    const io = await getSocketIO()
     if (io) {
       try {
-        const members = await getRoomMembers(roomId);
-        const memberPlayers = await getRoomActivePlayers(roomId);
+        const members = await getRoomMembers(roomId)
+        const memberPlayers = await getRoomActivePlayers(roomId)
 
         // Convert memberPlayers Map to object for JSON serialization
-        const memberPlayersObj: Record<string, any[]> = {};
+        const memberPlayersObj: Record<string, any[]> = {}
         for (const [uid, players] of memberPlayers.entries()) {
-          memberPlayersObj[uid] = players;
+          memberPlayersObj[uid] = players
         }
 
         // Broadcast to all users in this room
-        io.to(`room:${roomId}`).emit("member-joined", {
+        io.to(`room:${roomId}`).emit('member-joined', {
           roomId,
           userId: viewerId,
           members,
           memberPlayers: memberPlayersObj,
-        });
+        })
 
-        console.log(
-          `[Join API] Broadcasted member-joined for user ${viewerId} in room ${roomId}`,
-        );
+        console.log(`[Join API] Broadcasted member-joined for user ${viewerId} in room ${roomId}`)
       } catch (socketError) {
         // Log but don't fail the request if socket broadcast fails
-        console.error(
-          "[Join API] Failed to broadcast member-joined:",
-          socketError,
-        );
+        console.error('[Join API] Failed to broadcast member-joined:', socketError)
       }
     }
 
     // Build response with auto-leave info if applicable
     console.log(
-      `[Join API] Successfully added user ${viewerId} to room ${roomId} (invitation=${invitationToAccept ? "accepted" : "N/A"})`,
-    );
+      `[Join API] Successfully added user ${viewerId} to room ${roomId} (invitation=${invitationToAccept ? 'accepted' : 'N/A'})`
+    )
 
     return NextResponse.json(
       {
@@ -257,27 +224,27 @@ export async function POST(req: NextRequest, context: RouteContext) {
             }
           : undefined,
       },
-      { status: 201 },
-    );
+      { status: 201 }
+    )
   } catch (error: any) {
-    console.error("Failed to join room:", error);
+    console.error('Failed to join room:', error)
 
     // Handle specific constraint violation error
-    if (error.message?.includes("ROOM_MEMBERSHIP_CONFLICT")) {
+    if (error.message?.includes('ROOM_MEMBERSHIP_CONFLICT')) {
       return NextResponse.json(
         {
-          error: "You are already in another room",
-          code: "ROOM_MEMBERSHIP_CONFLICT",
+          error: 'You are already in another room',
+          code: 'ROOM_MEMBERSHIP_CONFLICT',
           message:
-            "You can only be in one room at a time. Please leave your current room before joining a new one.",
+            'You can only be in one room at a time. Please leave your current room before joining a new one.',
           userMessage:
-            "⚠️ Already in Another Room\n\nYou can only be in one room at a time. Please refresh the page and try again.",
+            '⚠️ Already in Another Room\n\nYou can only be in one room at a time. Please refresh the page and try again.',
         },
-        { status: 409 }, // 409 Conflict
-      );
+        { status: 409 } // 409 Conflict
+      )
     }
 
     // Generic error
-    return NextResponse.json({ error: "Failed to join room" }, { status: 500 });
+    return NextResponse.json({ error: 'Failed to join room' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/kick/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/kick/route.ts
index b19996dd..fdf285ec 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/kick/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/kick/route.ts
@@ -1,13 +1,13 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { kickUserFromRoom } from "@/lib/arcade/room-moderation";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import { getRoomActivePlayers } from "@/lib/arcade/player-manager";
-import { getViewerId } from "@/lib/viewer";
-import { getSocketIO } from "@/lib/socket-io";
+import { type NextRequest, NextResponse } from 'next/server'
+import { kickUserFromRoom } from '@/lib/arcade/room-moderation'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getRoomActivePlayers } from '@/lib/arcade/player-manager'
+import { getViewerId } from '@/lib/viewer'
+import { getSocketIO } from '@/lib/socket-io'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * POST /api/arcade/rooms/:roomId/kick
@@ -17,96 +17,79 @@ type RouteContext = {
  */
 export async function POST(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
-    const body = await req.json();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
     // Validate required fields
     if (!body.userId) {
-      return NextResponse.json(
-        { error: "Missing required field: userId" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Missing required field: userId' }, { status: 400 })
     }
 
     // Check if user is the host
-    const members = await getRoomMembers(roomId);
-    const currentMember = members.find((m) => m.userId === viewerId);
+    const members = await getRoomMembers(roomId)
+    const currentMember = members.find((m) => m.userId === viewerId)
 
     if (!currentMember) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     if (!currentMember.isCreator) {
-      return NextResponse.json(
-        { error: "Only the host can kick users" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'Only the host can kick users' }, { status: 403 })
     }
 
     // Can't kick yourself
     if (body.userId === viewerId) {
-      return NextResponse.json(
-        { error: "Cannot kick yourself" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Cannot kick yourself' }, { status: 400 })
     }
 
     // Verify the user to kick is in the room
-    const targetUser = members.find((m) => m.userId === body.userId);
+    const targetUser = members.find((m) => m.userId === body.userId)
     if (!targetUser) {
-      return NextResponse.json(
-        { error: "User is not in this room" },
-        { status: 404 },
-      );
+      return NextResponse.json({ error: 'User is not in this room' }, { status: 404 })
     }
 
     // Kick the user
-    await kickUserFromRoom(roomId, body.userId);
+    await kickUserFromRoom(roomId, body.userId)
 
     // Broadcast updates via socket
-    const io = await getSocketIO();
+    const io = await getSocketIO()
     if (io) {
       try {
         // Get updated member list
-        const updatedMembers = await getRoomMembers(roomId);
-        const memberPlayers = await getRoomActivePlayers(roomId);
+        const updatedMembers = await getRoomMembers(roomId)
+        const memberPlayers = await getRoomActivePlayers(roomId)
 
         // Convert memberPlayers Map to object for JSON serialization
-        const memberPlayersObj: Record<string, any[]> = {};
+        const memberPlayersObj: Record<string, any[]> = {}
         for (const [uid, players] of memberPlayers.entries()) {
-          memberPlayersObj[uid] = players;
+          memberPlayersObj[uid] = players
         }
 
         // Tell the kicked user they've been removed
-        io.to(`user:${body.userId}`).emit("kicked-from-room", {
+        io.to(`user:${body.userId}`).emit('kicked-from-room', {
           roomId,
           kickedBy: currentMember.displayName,
-        });
+        })
 
         // Notify everyone else in the room
-        io.to(`room:${roomId}`).emit("member-left", {
+        io.to(`room:${roomId}`).emit('member-left', {
           roomId,
           userId: body.userId,
           members: updatedMembers,
           memberPlayers: memberPlayersObj,
-          reason: "kicked",
-        });
+          reason: 'kicked',
+        })
 
-        console.log(
-          `[Kick API] User ${body.userId} kicked from room ${roomId}`,
-        );
+        console.log(`[Kick API] User ${body.userId} kicked from room ${roomId}`)
       } catch (socketError) {
-        console.error("[Kick API] Failed to broadcast kick:", socketError);
+        console.error('[Kick API] Failed to broadcast kick:', socketError)
       }
     }
 
-    return NextResponse.json({ success: true }, { status: 200 });
+    return NextResponse.json({ success: true }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to kick user:", error);
-    return NextResponse.json({ error: "Failed to kick user" }, { status: 500 });
+    console.error('Failed to kick user:', error)
+    return NextResponse.json({ error: 'Failed to kick user' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/leave/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/leave/route.ts
index 5d97bf91..1f9571d5 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/leave/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/leave/route.ts
@@ -1,17 +1,13 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { getRoomById } from "@/lib/arcade/room-manager";
-import {
-  getRoomMembers,
-  isMember,
-  removeMember,
-} from "@/lib/arcade/room-membership";
-import { getRoomActivePlayers } from "@/lib/arcade/player-manager";
-import { getViewerId } from "@/lib/viewer";
-import { getSocketIO } from "@/lib/socket-io";
+import { type NextRequest, NextResponse } from 'next/server'
+import { getRoomById } from '@/lib/arcade/room-manager'
+import { getRoomMembers, isMember, removeMember } from '@/lib/arcade/room-membership'
+import { getRoomActivePlayers } from '@/lib/arcade/player-manager'
+import { getViewerId } from '@/lib/viewer'
+import { getSocketIO } from '@/lib/socket-io'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * POST /api/arcade/rooms/:roomId/leave
@@ -19,66 +15,55 @@ type RouteContext = {
  */
 export async function POST(_req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
 
     // Get room
-    const room = await getRoomById(roomId);
+    const room = await getRoomById(roomId)
     if (!room) {
-      return NextResponse.json({ error: "Room not found" }, { status: 404 });
+      return NextResponse.json({ error: 'Room not found' }, { status: 404 })
     }
 
     // Check if member
-    const isMemberOfRoom = await isMember(roomId, viewerId);
+    const isMemberOfRoom = await isMember(roomId, viewerId)
     if (!isMemberOfRoom) {
-      return NextResponse.json(
-        { error: "Not a member of this room" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Not a member of this room' }, { status: 400 })
     }
 
     // Remove member
-    await removeMember(roomId, viewerId);
+    await removeMember(roomId, viewerId)
 
     // Broadcast to all remaining users in the room via socket
-    const io = await getSocketIO();
+    const io = await getSocketIO()
     if (io) {
       try {
-        const members = await getRoomMembers(roomId);
-        const memberPlayers = await getRoomActivePlayers(roomId);
+        const members = await getRoomMembers(roomId)
+        const memberPlayers = await getRoomActivePlayers(roomId)
 
         // Convert memberPlayers Map to object for JSON serialization
-        const memberPlayersObj: Record<string, any[]> = {};
+        const memberPlayersObj: Record<string, any[]> = {}
         for (const [uid, players] of memberPlayers.entries()) {
-          memberPlayersObj[uid] = players;
+          memberPlayersObj[uid] = players
         }
 
         // Broadcast to all users in this room
-        io.to(`room:${roomId}`).emit("member-left", {
+        io.to(`room:${roomId}`).emit('member-left', {
           roomId,
           userId: viewerId,
           members,
           memberPlayers: memberPlayersObj,
-        });
+        })
 
-        console.log(
-          `[Leave API] Broadcasted member-left for user ${viewerId} in room ${roomId}`,
-        );
+        console.log(`[Leave API] Broadcasted member-left for user ${viewerId} in room ${roomId}`)
       } catch (socketError) {
         // Log but don't fail the request if socket broadcast fails
-        console.error(
-          "[Leave API] Failed to broadcast member-left:",
-          socketError,
-        );
+        console.error('[Leave API] Failed to broadcast member-left:', socketError)
       }
     }
 
-    return NextResponse.json({ success: true });
+    return NextResponse.json({ success: true })
   } catch (error) {
-    console.error("Failed to leave room:", error);
-    return NextResponse.json(
-      { error: "Failed to leave room" },
-      { status: 500 },
-    );
+    console.error('Failed to leave room:', error)
+    return NextResponse.json({ error: 'Failed to leave room' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/members/[userId]/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/members/[userId]/route.ts
index dcdafa7b..1e732ce9 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/members/[userId]/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/members/[userId]/route.ts
@@ -1,11 +1,11 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { getRoomById, isRoomCreator } from "@/lib/arcade/room-manager";
-import { isMember, removeMember } from "@/lib/arcade/room-membership";
-import { getViewerId } from "@/lib/viewer";
+import { type NextRequest, NextResponse } from 'next/server'
+import { getRoomById, isRoomCreator } from '@/lib/arcade/room-manager'
+import { isMember, removeMember } from '@/lib/arcade/room-membership'
+import { getViewerId } from '@/lib/viewer'
 
 type RouteContext = {
-  params: Promise<{ roomId: string; userId: string }>;
-};
+  params: Promise<{ roomId: string; userId: string }>
+}
 
 /**
  * DELETE /api/arcade/rooms/:roomId/members/:userId
@@ -13,50 +13,38 @@ type RouteContext = {
  */
 export async function DELETE(_req: NextRequest, context: RouteContext) {
   try {
-    const { roomId, userId } = await context.params;
-    const viewerId = await getViewerId();
+    const { roomId, userId } = await context.params
+    const viewerId = await getViewerId()
 
     // Get room
-    const room = await getRoomById(roomId);
+    const room = await getRoomById(roomId)
     if (!room) {
-      return NextResponse.json({ error: "Room not found" }, { status: 404 });
+      return NextResponse.json({ error: 'Room not found' }, { status: 404 })
     }
 
     // Check if requester is room creator
-    const isCreator = await isRoomCreator(roomId, viewerId);
+    const isCreator = await isRoomCreator(roomId, viewerId)
     if (!isCreator) {
-      return NextResponse.json(
-        { error: "Only room creator can kick members" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'Only room creator can kick members' }, { status: 403 })
     }
 
     // Cannot kick self
     if (userId === viewerId) {
-      return NextResponse.json(
-        { error: "Cannot kick yourself" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Cannot kick yourself' }, { status: 400 })
     }
 
     // Check if target user is a member
-    const isTargetMember = await isMember(roomId, userId);
+    const isTargetMember = await isMember(roomId, userId)
     if (!isTargetMember) {
-      return NextResponse.json(
-        { error: "User is not a member of this room" },
-        { status: 404 },
-      );
+      return NextResponse.json({ error: 'User is not a member of this room' }, { status: 404 })
     }
 
     // Remove member
-    await removeMember(roomId, userId);
+    await removeMember(roomId, userId)
 
-    return NextResponse.json({ success: true });
+    return NextResponse.json({ success: true })
   } catch (error) {
-    console.error("Failed to kick member:", error);
-    return NextResponse.json(
-      { error: "Failed to kick member" },
-      { status: 500 },
-    );
+    console.error('Failed to kick member:', error)
+    return NextResponse.json({ error: 'Failed to kick member' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/members/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/members/route.ts
index b8acc09c..1fe6d856 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/members/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/members/route.ts
@@ -1,13 +1,10 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { getRoomById } from "@/lib/arcade/room-manager";
-import {
-  getOnlineMemberCount,
-  getRoomMembers,
-} from "@/lib/arcade/room-membership";
+import { type NextRequest, NextResponse } from 'next/server'
+import { getRoomById } from '@/lib/arcade/room-manager'
+import { getOnlineMemberCount, getRoomMembers } from '@/lib/arcade/room-membership'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * GET /api/arcade/rooms/:roomId/members
@@ -15,27 +12,24 @@ type RouteContext = {
  */
 export async function GET(_req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
+    const { roomId } = await context.params
 
     // Get room
-    const room = await getRoomById(roomId);
+    const room = await getRoomById(roomId)
     if (!room) {
-      return NextResponse.json({ error: "Room not found" }, { status: 404 });
+      return NextResponse.json({ error: 'Room not found' }, { status: 404 })
     }
 
     // Get members
-    const members = await getRoomMembers(roomId);
-    const onlineCount = await getOnlineMemberCount(roomId);
+    const members = await getRoomMembers(roomId)
+    const onlineCount = await getOnlineMemberCount(roomId)
 
     return NextResponse.json({
       members,
       onlineCount,
-    });
+    })
   } catch (error) {
-    console.error("Failed to fetch members:", error);
-    return NextResponse.json(
-      { error: "Failed to fetch members" },
-      { status: 500 },
-    );
+    console.error('Failed to fetch members:', error)
+    return NextResponse.json({ error: 'Failed to fetch members' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/report/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/report/route.ts
index 7322dec4..8d8e468f 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/report/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/report/route.ts
@@ -1,12 +1,12 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { createReport } from "@/lib/arcade/room-moderation";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import { getViewerId } from "@/lib/viewer";
-import { getSocketIO } from "@/lib/socket-io";
+import { type NextRequest, NextResponse } from 'next/server'
+import { createReport } from '@/lib/arcade/room-moderation'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getViewerId } from '@/lib/viewer'
+import { getSocketIO } from '@/lib/socket-io'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * POST /api/arcade/rooms/:roomId/report
@@ -18,56 +18,40 @@ type RouteContext = {
  */
 export async function POST(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
-    const body = await req.json();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
     // Validate required fields
     if (!body.reportedUserId || !body.reason) {
       return NextResponse.json(
-        { error: "Missing required fields: reportedUserId, reason" },
-        { status: 400 },
-      );
+        { error: 'Missing required fields: reportedUserId, reason' },
+        { status: 400 }
+      )
     }
 
     // Validate reason
-    const validReasons = [
-      "harassment",
-      "cheating",
-      "inappropriate-name",
-      "spam",
-      "afk",
-      "other",
-    ];
+    const validReasons = ['harassment', 'cheating', 'inappropriate-name', 'spam', 'afk', 'other']
     if (!validReasons.includes(body.reason)) {
-      return NextResponse.json({ error: "Invalid reason" }, { status: 400 });
+      return NextResponse.json({ error: 'Invalid reason' }, { status: 400 })
     }
 
     // Can't report yourself
     if (body.reportedUserId === viewerId) {
-      return NextResponse.json(
-        { error: "Cannot report yourself" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Cannot report yourself' }, { status: 400 })
     }
 
     // Get room members to verify both users are in the room and get names
-    const members = await getRoomMembers(roomId);
-    const reporter = members.find((m) => m.userId === viewerId);
-    const reported = members.find((m) => m.userId === body.reportedUserId);
+    const members = await getRoomMembers(roomId)
+    const reporter = members.find((m) => m.userId === viewerId)
+    const reported = members.find((m) => m.userId === body.reportedUserId)
 
     if (!reporter) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     if (!reported) {
-      return NextResponse.json(
-        { error: "Reported user is not in this room" },
-        { status: 404 },
-      );
+      return NextResponse.json({ error: 'Reported user is not in this room' }, { status: 404 })
     }
 
     // Create report
@@ -79,16 +63,16 @@ export async function POST(req: NextRequest, context: RouteContext) {
       reportedUserName: reported.displayName,
       reason: body.reason,
       details: body.details,
-    });
+    })
 
     // Notify host via socket (find the host)
-    const host = members.find((m) => m.isCreator);
+    const host = members.find((m) => m.isCreator)
     if (host) {
-      const io = await getSocketIO();
+      const io = await getSocketIO()
       if (io) {
         try {
           // Send notification only to the host
-          io.to(`user:${host.userId}`).emit("report-submitted", {
+          io.to(`user:${host.userId}`).emit('report-submitted', {
             roomId,
             report: {
               id: report.id,
@@ -98,19 +82,16 @@ export async function POST(req: NextRequest, context: RouteContext) {
               reason: report.reason,
               createdAt: report.createdAt,
             },
-          });
+          })
         } catch (socketError) {
-          console.error("[Report API] Failed to notify host:", socketError);
+          console.error('[Report API] Failed to notify host:', socketError)
         }
       }
     }
 
-    return NextResponse.json({ success: true, report }, { status: 201 });
+    return NextResponse.json({ success: true, report }, { status: 201 })
   } catch (error: any) {
-    console.error("Failed to submit report:", error);
-    return NextResponse.json(
-      { error: "Failed to submit report" },
-      { status: 500 },
-    );
+    console.error('Failed to submit report:', error)
+    return NextResponse.json({ error: 'Failed to submit report' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/reports/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/reports/route.ts
index 9005651d..1cd70354 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/reports/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/reports/route.ts
@@ -1,11 +1,11 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { getAllReports } from "@/lib/arcade/room-moderation";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import { getViewerId } from "@/lib/viewer";
+import { type NextRequest, NextResponse } from 'next/server'
+import { getAllReports } from '@/lib/arcade/room-moderation'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getViewerId } from '@/lib/viewer'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * GET /api/arcade/rooms/:roomId/reports
@@ -13,36 +13,27 @@ type RouteContext = {
  */
 export async function GET(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
 
     // Check if user is the host
-    const members = await getRoomMembers(roomId);
-    const currentMember = members.find((m) => m.userId === viewerId);
+    const members = await getRoomMembers(roomId)
+    const currentMember = members.find((m) => m.userId === viewerId)
 
     if (!currentMember) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     if (!currentMember.isCreator) {
-      return NextResponse.json(
-        { error: "Only the host can view reports" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'Only the host can view reports' }, { status: 403 })
     }
 
     // Get all reports
-    const reports = await getAllReports(roomId);
+    const reports = await getAllReports(roomId)
 
-    return NextResponse.json({ reports }, { status: 200 });
+    return NextResponse.json({ reports }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to get reports:", error);
-    return NextResponse.json(
-      { error: "Failed to get reports" },
-      { status: 500 },
-    );
+    console.error('Failed to get reports:', error)
+    return NextResponse.json({ error: 'Failed to get reports' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/route.ts
index b623937b..3e448695 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/route.ts
@@ -1,18 +1,18 @@
-import { type NextRequest, NextResponse } from "next/server";
+import { type NextRequest, NextResponse } from 'next/server'
 import {
   deleteRoom,
   getRoomById,
   isRoomCreator,
   touchRoom,
   updateRoom,
-} from "@/lib/arcade/room-manager";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import { getActivePlayers } from "@/lib/arcade/player-manager";
-import { getViewerId } from "@/lib/viewer";
+} from '@/lib/arcade/room-manager'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getActivePlayers } from '@/lib/arcade/player-manager'
+import { getViewerId } from '@/lib/viewer'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * GET /api/arcade/rooms/:roomId
@@ -20,45 +20,42 @@ type RouteContext = {
  */
 export async function GET(_req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
 
-    const room = await getRoomById(roomId);
+    const room = await getRoomById(roomId)
     if (!room) {
-      return NextResponse.json({ error: "Room not found" }, { status: 404 });
+      return NextResponse.json({ error: 'Room not found' }, { status: 404 })
     }
 
-    const members = await getRoomMembers(roomId);
-    const canModerate = await isRoomCreator(roomId, viewerId);
+    const members = await getRoomMembers(roomId)
+    const canModerate = await isRoomCreator(roomId, viewerId)
 
     // Fetch active players for each member
     // This creates a map of userId -> Player[]
-    const memberPlayers: Record<string, any[]> = {};
+    const memberPlayers: Record<string, any[]> = {}
     for (const member of members) {
-      const activePlayers = await getActivePlayers(member.userId);
-      memberPlayers[member.userId] = activePlayers;
+      const activePlayers = await getActivePlayers(member.userId)
+      memberPlayers[member.userId] = activePlayers
     }
 
     // Update room activity when viewing (keeps active rooms fresh)
-    await touchRoom(roomId);
+    await touchRoom(roomId)
 
     // Prepare room data - include displayPassword only for room creator
     const roomData = canModerate
       ? room // Creator gets full room data including displayPassword
-      : { ...room, displayPassword: undefined }; // Others don't see displayPassword
+      : { ...room, displayPassword: undefined } // Others don't see displayPassword
 
     return NextResponse.json({
       room: roomData,
       members,
       memberPlayers, // Map of userId -> active Player[] for each member
       canModerate,
-    });
+    })
   } catch (error) {
-    console.error("Failed to fetch room:", error);
-    return NextResponse.json(
-      { error: "Failed to fetch room" },
-      { status: 500 },
-    );
+    console.error('Failed to fetch room:', error)
+    return NextResponse.json({ error: 'Failed to fetch room' }, { status: 500 })
   }
 }
 
@@ -73,56 +70,44 @@ export async function GET(_req: NextRequest, context: RouteContext) {
  */
 export async function PATCH(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
-    const body = await req.json();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
     // Check if user is room creator
-    const isCreator = await isRoomCreator(roomId, viewerId);
+    const isCreator = await isRoomCreator(roomId, viewerId)
     if (!isCreator) {
-      return NextResponse.json(
-        { error: "Only room creator can update room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'Only room creator can update room' }, { status: 403 })
     }
 
     // Validate name length if provided
     if (body.name && body.name.length > 50) {
-      return NextResponse.json(
-        { error: "Room name too long (max 50 characters)" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Room name too long (max 50 characters)' }, { status: 400 })
     }
 
     // Validate status if provided
-    if (
-      body.status &&
-      !["lobby", "playing", "finished"].includes(body.status)
-    ) {
-      return NextResponse.json({ error: "Invalid status" }, { status: 400 });
+    if (body.status && !['lobby', 'playing', 'finished'].includes(body.status)) {
+      return NextResponse.json({ error: 'Invalid status' }, { status: 400 })
     }
 
     const updates: {
-      name?: string;
-      status?: "lobby" | "playing" | "finished";
-    } = {};
+      name?: string
+      status?: 'lobby' | 'playing' | 'finished'
+    } = {}
 
-    if (body.name !== undefined) updates.name = body.name;
-    if (body.status !== undefined) updates.status = body.status;
+    if (body.name !== undefined) updates.name = body.name
+    if (body.status !== undefined) updates.status = body.status
 
-    const room = await updateRoom(roomId, updates);
+    const room = await updateRoom(roomId, updates)
 
     if (!room) {
-      return NextResponse.json({ error: "Room not found" }, { status: 404 });
+      return NextResponse.json({ error: 'Room not found' }, { status: 404 })
     }
 
-    return NextResponse.json({ room });
+    return NextResponse.json({ room })
   } catch (error) {
-    console.error("Failed to update room:", error);
-    return NextResponse.json(
-      { error: "Failed to update room" },
-      { status: 500 },
-    );
+    console.error('Failed to update room:', error)
+    return NextResponse.json({ error: 'Failed to update room' }, { status: 500 })
   }
 }
 
@@ -132,26 +117,20 @@ export async function PATCH(req: NextRequest, context: RouteContext) {
  */
 export async function DELETE(_req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
 
     // Check if user is room creator
-    const isCreator = await isRoomCreator(roomId, viewerId);
+    const isCreator = await isRoomCreator(roomId, viewerId)
     if (!isCreator) {
-      return NextResponse.json(
-        { error: "Only room creator can delete room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'Only room creator can delete room' }, { status: 403 })
     }
 
-    await deleteRoom(roomId);
+    await deleteRoom(roomId)
 
-    return NextResponse.json({ success: true });
+    return NextResponse.json({ success: true })
   } catch (error) {
-    console.error("Failed to delete room:", error);
-    return NextResponse.json(
-      { error: "Failed to delete room" },
-      { status: 500 },
-    );
+    console.error('Failed to delete room:', error)
+    return NextResponse.json({ error: 'Failed to delete room' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/settings/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/settings/route.ts
index f24971bc..55d83787 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/settings/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/settings/route.ts
@@ -1,22 +1,19 @@
-import bcrypt from "bcryptjs";
-import { and, eq } from "drizzle-orm";
-import { type NextRequest, NextResponse } from "next/server";
-import { db, schema } from "@/db";
-import { getRoomActivePlayers } from "@/lib/arcade/player-manager";
-import { recordRoomMemberHistory } from "@/lib/arcade/room-member-history";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import { getSocketIO } from "@/lib/socket-io";
-import { getViewerId } from "@/lib/viewer";
-import {
-  getAllGameConfigs,
-  setGameConfig,
-} from "@/lib/arcade/game-config-helpers";
-import { isValidGameName } from "@/lib/arcade/validators";
-import type { GameName } from "@/lib/arcade/validators";
+import bcrypt from 'bcryptjs'
+import { and, eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { db, schema } from '@/db'
+import { getRoomActivePlayers } from '@/lib/arcade/player-manager'
+import { recordRoomMemberHistory } from '@/lib/arcade/room-member-history'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getSocketIO } from '@/lib/socket-io'
+import { getViewerId } from '@/lib/viewer'
+import { getAllGameConfigs, setGameConfig } from '@/lib/arcade/game-config-helpers'
+import { isValidGameName } from '@/lib/arcade/validators'
+import type { GameName } from '@/lib/arcade/validators'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * PATCH /api/arcade/rooms/:roomId/settings
@@ -37,49 +34,46 @@ type RouteContext = {
  */
 export async function PATCH(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
-    const body = await req.json();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
     console.log(
-      "[Settings API] PATCH request received:",
+      '[Settings API] PATCH request received:',
       JSON.stringify(
         {
           roomId,
           body,
         },
         null,
-        2,
-      ),
-    );
+        2
+      )
+    )
 
     // Read current room state from database BEFORE any changes
     const [currentRoom] = await db
       .select()
       .from(schema.arcadeRooms)
-      .where(eq(schema.arcadeRooms.id, roomId));
+      .where(eq(schema.arcadeRooms.id, roomId))
 
     console.log(
-      "[Settings API] Current room state in database BEFORE update:",
+      '[Settings API] Current room state in database BEFORE update:',
       JSON.stringify(
         {
           gameName: currentRoom?.gameName,
           gameConfig: currentRoom?.gameConfig,
         },
         null,
-        2,
-      ),
-    );
+        2
+      )
+    )
 
     // Check if user is a room member
-    const members = await getRoomMembers(roomId);
-    const currentMember = members.find((m) => m.userId === viewerId);
+    const members = await getRoomMembers(roomId)
+    const currentMember = members.find((m) => m.userId === viewerId)
 
     if (!currentMember) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     // Determine which settings are being changed
@@ -89,42 +83,38 @@ export async function PATCH(req: NextRequest, context: RouteContext) {
       body.gameName !== undefined ||
       body.name !== undefined ||
       body.description !== undefined
-    );
+    )
 
     // Only gameConfig can be changed by any member
     // All other settings require host privileges
     if (changingRoomSettings && !currentMember.isCreator) {
       return NextResponse.json(
         {
-          error:
-            "Only the host can change room settings (name, access mode, game selection, etc.)",
+          error: 'Only the host can change room settings (name, access mode, game selection, etc.)',
         },
-        { status: 403 },
-      );
+        { status: 403 }
+      )
     }
 
     // Validate accessMode if provided
     const validAccessModes = [
-      "open",
-      "locked",
-      "retired",
-      "password",
-      "restricted",
-      "approval-only",
-    ];
+      'open',
+      'locked',
+      'retired',
+      'password',
+      'restricted',
+      'approval-only',
+    ]
     if (body.accessMode && !validAccessModes.includes(body.accessMode)) {
-      return NextResponse.json(
-        { error: "Invalid access mode" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Invalid access mode' }, { status: 400 })
     }
 
     // Validate password requirements
-    if (body.accessMode === "password" && !body.password) {
+    if (body.accessMode === 'password' && !body.password) {
       return NextResponse.json(
-        { error: "Password is required for password-protected rooms" },
-        { status: 400 },
-      );
+        { error: 'Password is required for password-protected rooms' },
+        { status: 400 }
+      )
     }
 
     // Validate gameName if provided - check against validator registry at runtime
@@ -134,33 +124,33 @@ export async function PATCH(req: NextRequest, context: RouteContext) {
           {
             error: `Invalid game name: ${body.gameName}. Game must have a registered validator.`,
           },
-          { status: 400 },
-        );
+          { status: 400 }
+        )
       }
     }
 
     // Prepare update data
-    const updateData: Record<string, any> = {};
+    const updateData: Record<string, any> = {}
 
     if (body.accessMode !== undefined) {
-      updateData.accessMode = body.accessMode;
+      updateData.accessMode = body.accessMode
     }
 
     // Hash password if provided
     if (body.password !== undefined) {
-      if (body.password === null || body.password === "") {
-        updateData.password = null; // Clear password
-        updateData.displayPassword = null; // Also clear display password
+      if (body.password === null || body.password === '') {
+        updateData.password = null // Clear password
+        updateData.displayPassword = null // Also clear display password
       } else {
-        const hashedPassword = await bcrypt.hash(body.password, 10);
-        updateData.password = hashedPassword;
-        updateData.displayPassword = body.password; // Store plain text for display
+        const hashedPassword = await bcrypt.hash(body.password, 10)
+        updateData.password = hashedPassword
+        updateData.displayPassword = body.password // Store plain text for display
       }
     }
 
     // Update game selection if provided
     if (body.gameName !== undefined) {
-      updateData.gameName = body.gameName;
+      updateData.gameName = body.gameName
     }
 
     // Handle game config updates - write to new room_game_configs table
@@ -168,87 +158,76 @@ export async function PATCH(req: NextRequest, context: RouteContext) {
       // body.gameConfig is expected to be nested by game name: { matching: {...}, memory-quiz: {...} }
       // Extract each game's config and write to the new table
       for (const [gameName, config] of Object.entries(body.gameConfig)) {
-        if (config && typeof config === "object") {
-          await setGameConfig(roomId, gameName as GameName, config);
-          console.log(
-            `[Settings API] Wrote ${gameName} config to room_game_configs table`,
-          );
+        if (config && typeof config === 'object') {
+          await setGameConfig(roomId, gameName as GameName, config)
+          console.log(`[Settings API] Wrote ${gameName} config to room_game_configs table`)
         }
       }
     }
 
     console.log(
-      "[Settings API] Update data to be written to database:",
-      JSON.stringify(updateData, null, 2),
-    );
+      '[Settings API] Update data to be written to database:',
+      JSON.stringify(updateData, null, 2)
+    )
 
     // If game is being changed (or cleared), delete the existing arcade session
     // This ensures a fresh session will be created with the new game settings
     if (body.gameName !== undefined) {
-      console.log(
-        `[Settings API] Deleting existing arcade session for room ${roomId}`,
-      );
-      await db
-        .delete(schema.arcadeSessions)
-        .where(eq(schema.arcadeSessions.roomId, roomId));
+      console.log(`[Settings API] Deleting existing arcade session for room ${roomId}`)
+      await db.delete(schema.arcadeSessions).where(eq(schema.arcadeSessions.roomId, roomId))
     }
 
     // Update room settings (only if there's something to update)
-    let updatedRoom = currentRoom;
+    let updatedRoom = currentRoom
     if (Object.keys(updateData).length > 0) {
-      [updatedRoom] = await db
+      ;[updatedRoom] = await db
         .update(schema.arcadeRooms)
         .set(updateData)
         .where(eq(schema.arcadeRooms.id, roomId))
-        .returning();
+        .returning()
     }
 
     // Get aggregated game configs from new table
-    const gameConfig = await getAllGameConfigs(roomId);
+    const gameConfig = await getAllGameConfigs(roomId)
 
     console.log(
-      "[Settings API] Room state in database AFTER update:",
+      '[Settings API] Room state in database AFTER update:',
       JSON.stringify(
         {
           gameName: updatedRoom.gameName,
           gameConfig,
         },
         null,
-        2,
-      ),
-    );
+        2
+      )
+    )
 
     // Broadcast game change to all room members
     if (body.gameName !== undefined) {
-      const io = await getSocketIO();
+      const io = await getSocketIO()
       if (io) {
         try {
-          console.log(
-            `[Settings API] Broadcasting game change to room ${roomId}: ${body.gameName}`,
-          );
+          console.log(`[Settings API] Broadcasting game change to room ${roomId}: ${body.gameName}`)
           const broadcastData: {
-            roomId: string;
-            gameName: string | null;
-            gameConfig?: Record<string, unknown>;
+            roomId: string
+            gameName: string | null
+            gameConfig?: Record<string, unknown>
           } = {
             roomId,
             gameName: body.gameName,
             gameConfig, // Include aggregated configs from new table
-          };
+          }
 
-          io.to(`room:${roomId}`).emit("room-game-changed", broadcastData);
+          io.to(`room:${roomId}`).emit('room-game-changed', broadcastData)
         } catch (socketError) {
-          console.error(
-            "[Settings API] Failed to broadcast game change:",
-            socketError,
-          );
+          console.error('[Settings API] Failed to broadcast game change:', socketError)
         }
       }
     }
 
     // If setting to retired, expel all non-owner members
-    if (body.accessMode === "retired") {
-      const nonOwnerMembers = members.filter((m) => !m.isCreator);
+    if (body.accessMode === 'retired') {
+      const nonOwnerMembers = members.filter((m) => !m.isCreator)
 
       if (nonOwnerMembers.length > 0) {
         // Remove all non-owner members from the room
@@ -256,9 +235,9 @@ export async function PATCH(req: NextRequest, context: RouteContext) {
           and(
             eq(schema.roomMembers.roomId, roomId),
             // Delete all members except the creator
-            eq(schema.roomMembers.isCreator, false),
-          ),
-        );
+            eq(schema.roomMembers.isCreator, false)
+          )
+        )
 
         // Record in history for each expelled member
         for (const member of nonOwnerMembers) {
@@ -266,50 +245,47 @@ export async function PATCH(req: NextRequest, context: RouteContext) {
             roomId,
             userId: member.userId,
             displayName: member.displayName,
-            action: "left",
-          });
+            action: 'left',
+          })
         }
 
         // Broadcast updates via socket
-        const io = await getSocketIO();
+        const io = await getSocketIO()
         if (io) {
           try {
             // Get updated member list (should only be the owner now)
-            const updatedMembers = await getRoomMembers(roomId);
-            const memberPlayers = await getRoomActivePlayers(roomId);
+            const updatedMembers = await getRoomMembers(roomId)
+            const memberPlayers = await getRoomActivePlayers(roomId)
 
             // Convert memberPlayers Map to object for JSON serialization
-            const memberPlayersObj: Record<string, any[]> = {};
+            const memberPlayersObj: Record<string, any[]> = {}
             for (const [uid, players] of memberPlayers.entries()) {
-              memberPlayersObj[uid] = players;
+              memberPlayersObj[uid] = players
             }
 
             // Notify each expelled member
             for (const member of nonOwnerMembers) {
-              io.to(`user:${member.userId}`).emit("kicked-from-room", {
+              io.to(`user:${member.userId}`).emit('kicked-from-room', {
                 roomId,
                 kickedBy: currentMember.displayName,
-                reason: "Room has been retired",
-              });
+                reason: 'Room has been retired',
+              })
             }
 
             // Notify the owner that members were expelled
-            io.to(`room:${roomId}`).emit("member-left", {
+            io.to(`room:${roomId}`).emit('member-left', {
               roomId,
               userId: nonOwnerMembers.map((m) => m.userId),
               members: updatedMembers,
               memberPlayers: memberPlayersObj,
-              reason: "room-retired",
-            });
+              reason: 'room-retired',
+            })
 
             console.log(
-              `[Settings API] Expelled ${nonOwnerMembers.length} members from retired room ${roomId}`,
-            );
+              `[Settings API] Expelled ${nonOwnerMembers.length} members from retired room ${roomId}`
+            )
           } catch (socketError) {
-            console.error(
-              "[Settings API] Failed to broadcast member expulsion:",
-              socketError,
-            );
+            console.error('[Settings API] Failed to broadcast member expulsion:', socketError)
           }
         }
       }
@@ -322,13 +298,10 @@ export async function PATCH(req: NextRequest, context: RouteContext) {
           gameConfig, // Include aggregated configs from new table
         },
       },
-      { status: 200 },
-    );
+      { status: 200 }
+    )
   } catch (error: any) {
-    console.error("Failed to update room settings:", error);
-    return NextResponse.json(
-      { error: "Failed to update room settings" },
-      { status: 500 },
-    );
+    console.error('Failed to update room settings:', error)
+    return NextResponse.json({ error: 'Failed to update room settings' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/[roomId]/transfer-ownership/route.ts b/apps/web/src/app/api/arcade/rooms/[roomId]/transfer-ownership/route.ts
index 33801822..6dc4b9a9 100644
--- a/apps/web/src/app/api/arcade/rooms/[roomId]/transfer-ownership/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/[roomId]/transfer-ownership/route.ts
@@ -1,13 +1,13 @@
-import { eq } from "drizzle-orm";
-import { type NextRequest, NextResponse } from "next/server";
-import { db, schema } from "@/db";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import { getViewerId } from "@/lib/viewer";
-import { getSocketIO } from "@/lib/socket-io";
+import { eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { db, schema } from '@/db'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getViewerId } from '@/lib/viewer'
+import { getSocketIO } from '@/lib/socket-io'
 
 type RouteContext = {
-  params: Promise<{ roomId: string }>;
-};
+  params: Promise<{ roomId: string }>
+}
 
 /**
  * POST /api/arcade/rooms/:roomId/transfer-ownership
@@ -17,64 +17,52 @@ type RouteContext = {
  */
 export async function POST(req: NextRequest, context: RouteContext) {
   try {
-    const { roomId } = await context.params;
-    const viewerId = await getViewerId();
-    const body = await req.json();
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
     // Validate required fields
     if (!body.newOwnerId) {
-      return NextResponse.json(
-        { error: "Missing required field: newOwnerId" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Missing required field: newOwnerId' }, { status: 400 })
     }
 
     // Check if user is the current host
-    const members = await getRoomMembers(roomId);
-    const currentMember = members.find((m) => m.userId === viewerId);
+    const members = await getRoomMembers(roomId)
+    const currentMember = members.find((m) => m.userId === viewerId)
 
     if (!currentMember) {
-      return NextResponse.json(
-        { error: "You are not in this room" },
-        { status: 403 },
-      );
+      return NextResponse.json({ error: 'You are not in this room' }, { status: 403 })
     }
 
     if (!currentMember.isCreator) {
       return NextResponse.json(
-        { error: "Only the current host can transfer ownership" },
-        { status: 403 },
-      );
+        { error: 'Only the current host can transfer ownership' },
+        { status: 403 }
+      )
     }
 
     // Can't transfer to yourself
     if (body.newOwnerId === viewerId) {
-      return NextResponse.json(
-        { error: "You are already the owner" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'You are already the owner' }, { status: 400 })
     }
 
     // Verify new owner is in the room
-    const newOwner = members.find((m) => m.userId === body.newOwnerId);
+    const newOwner = members.find((m) => m.userId === body.newOwnerId)
     if (!newOwner) {
-      return NextResponse.json(
-        { error: "New owner must be a member of the room" },
-        { status: 404 },
-      );
+      return NextResponse.json({ error: 'New owner must be a member of the room' }, { status: 404 })
     }
 
     // Remove isCreator from current owner
     await db
       .update(schema.roomMembers)
       .set({ isCreator: false })
-      .where(eq(schema.roomMembers.id, currentMember.id));
+      .where(eq(schema.roomMembers.id, currentMember.id))
 
     // Set isCreator on new owner
     await db
       .update(schema.roomMembers)
       .set({ isCreator: true })
-      .where(eq(schema.roomMembers.id, newOwner.id));
+      .where(eq(schema.roomMembers.id, newOwner.id))
 
     // Update room createdBy field
     await db
@@ -83,39 +71,33 @@ export async function POST(req: NextRequest, context: RouteContext) {
         createdBy: body.newOwnerId,
         creatorName: newOwner.displayName,
       })
-      .where(eq(schema.arcadeRooms.id, roomId));
+      .where(eq(schema.arcadeRooms.id, roomId))
 
     // Broadcast ownership transfer via socket
-    const io = await getSocketIO();
+    const io = await getSocketIO()
     if (io) {
       try {
-        const updatedMembers = await getRoomMembers(roomId);
+        const updatedMembers = await getRoomMembers(roomId)
 
-        io.to(`room:${roomId}`).emit("ownership-transferred", {
+        io.to(`room:${roomId}`).emit('ownership-transferred', {
           roomId,
           oldOwnerId: viewerId,
           newOwnerId: body.newOwnerId,
           newOwnerName: newOwner.displayName,
           members: updatedMembers,
-        });
+        })
 
         console.log(
-          `[Ownership Transfer] Room ${roomId} ownership transferred from ${viewerId} to ${body.newOwnerId}`,
-        );
+          `[Ownership Transfer] Room ${roomId} ownership transferred from ${viewerId} to ${body.newOwnerId}`
+        )
       } catch (socketError) {
-        console.error(
-          "[Ownership Transfer] Failed to broadcast transfer:",
-          socketError,
-        );
+        console.error('[Ownership Transfer] Failed to broadcast transfer:', socketError)
       }
     }
 
-    return NextResponse.json({ success: true }, { status: 200 });
+    return NextResponse.json({ success: true }, { status: 200 })
   } catch (error: any) {
-    console.error("Failed to transfer ownership:", error);
-    return NextResponse.json(
-      { error: "Failed to transfer ownership" },
-      { status: 500 },
-    );
+    console.error('Failed to transfer ownership:', error)
+    return NextResponse.json({ error: 'Failed to transfer ownership' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/code/[code]/route.ts b/apps/web/src/app/api/arcade/rooms/code/[code]/route.ts
index 388a638d..e2a5f657 100644
--- a/apps/web/src/app/api/arcade/rooms/code/[code]/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/code/[code]/route.ts
@@ -1,10 +1,10 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { getRoomByCode } from "@/lib/arcade/room-manager";
-import { normalizeRoomCode } from "@/lib/arcade/room-code";
+import { type NextRequest, NextResponse } from 'next/server'
+import { getRoomByCode } from '@/lib/arcade/room-manager'
+import { normalizeRoomCode } from '@/lib/arcade/room-code'
 
 type RouteContext = {
-  params: Promise<{ code: string }>;
-};
+  params: Promise<{ code: string }>
+}
 
 /**
  * GET /api/arcade/rooms/code/:code
@@ -12,31 +12,28 @@ type RouteContext = {
  */
 export async function GET(_req: NextRequest, context: RouteContext) {
   try {
-    const { code } = await context.params;
+    const { code } = await context.params
 
     // Normalize the code (uppercase, remove spaces/dashes)
-    const normalizedCode = normalizeRoomCode(code);
+    const normalizedCode = normalizeRoomCode(code)
 
     // Get room
-    const room = await getRoomByCode(normalizedCode);
+    const room = await getRoomByCode(normalizedCode)
     if (!room) {
-      return NextResponse.json({ error: "Room not found" }, { status: 404 });
+      return NextResponse.json({ error: 'Room not found' }, { status: 404 })
     }
 
     // Generate redirect URL
-    const baseUrl = process.env.NEXT_PUBLIC_URL || "http://localhost:3000";
-    const redirectUrl = `${baseUrl}/arcade/rooms/${room.id}`;
+    const baseUrl = process.env.NEXT_PUBLIC_URL || 'http://localhost:3000'
+    const redirectUrl = `${baseUrl}/arcade/rooms/${room.id}`
 
     return NextResponse.json({
       roomId: room.id,
       redirectUrl,
       room,
-    });
+    })
   } catch (error) {
-    console.error("Failed to find room by code:", error);
-    return NextResponse.json(
-      { error: "Failed to find room by code" },
-      { status: 500 },
-    );
+    console.error('Failed to find room by code:', error)
+    return NextResponse.json({ error: 'Failed to find room by code' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/current/route.ts b/apps/web/src/app/api/arcade/rooms/current/route.ts
index f2e91038..4a085e65 100644
--- a/apps/web/src/app/api/arcade/rooms/current/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/current/route.ts
@@ -1,10 +1,10 @@
-import { NextResponse } from "next/server";
-import { getUserRooms } from "@/lib/arcade/room-membership";
-import { getRoomById } from "@/lib/arcade/room-manager";
-import { getRoomMembers } from "@/lib/arcade/room-membership";
-import { getRoomActivePlayers } from "@/lib/arcade/player-manager";
-import { getViewerId } from "@/lib/viewer";
-import { getAllGameConfigs } from "@/lib/arcade/game-config-helpers";
+import { NextResponse } from 'next/server'
+import { getUserRooms } from '@/lib/arcade/room-membership'
+import { getRoomById } from '@/lib/arcade/room-manager'
+import { getRoomMembers } from '@/lib/arcade/room-membership'
+import { getRoomActivePlayers } from '@/lib/arcade/player-manager'
+import { getViewerId } from '@/lib/viewer'
+import { getAllGameConfigs } from '@/lib/arcade/game-config-helpers'
 
 /**
  * GET /api/arcade/rooms/current
@@ -12,28 +12,28 @@ import { getAllGameConfigs } from "@/lib/arcade/game-config-helpers";
  */
 export async function GET() {
   try {
-    const userId = await getViewerId();
+    const userId = await getViewerId()
 
     // Get all rooms user is in (should be at most 1 due to modal room enforcement)
-    const roomIds = await getUserRooms(userId);
+    const roomIds = await getUserRooms(userId)
 
     if (roomIds.length === 0) {
-      return NextResponse.json({ room: null }, { status: 200 });
+      return NextResponse.json({ room: null }, { status: 200 })
     }
 
-    const roomId = roomIds[0];
+    const roomId = roomIds[0]
 
     // Get room data
-    const room = await getRoomById(roomId);
+    const room = await getRoomById(roomId)
     if (!room) {
-      return NextResponse.json({ error: "Room not found" }, { status: 404 });
+      return NextResponse.json({ error: 'Room not found' }, { status: 404 })
     }
 
     // Get game configs from new room_game_configs table
-    const gameConfig = await getAllGameConfigs(roomId);
+    const gameConfig = await getAllGameConfigs(roomId)
 
     console.log(
-      "[Current Room API] Room data READ from database:",
+      '[Current Room API] Room data READ from database:',
       JSON.stringify(
         {
           roomId,
@@ -41,20 +41,20 @@ export async function GET() {
           gameConfig,
         },
         null,
-        2,
-      ),
-    );
+        2
+      )
+    )
 
     // Get members
-    const members = await getRoomMembers(roomId);
+    const members = await getRoomMembers(roomId)
 
     // Get active players for all members
-    const memberPlayers = await getRoomActivePlayers(roomId);
+    const memberPlayers = await getRoomActivePlayers(roomId)
 
     // Convert Map to object for JSON serialization
-    const memberPlayersObj: Record<string, any[]> = {};
+    const memberPlayersObj: Record<string, any[]> = {}
     for (const [uid, players] of memberPlayers.entries()) {
-      memberPlayersObj[uid] = players;
+      memberPlayersObj[uid] = players
     }
 
     return NextResponse.json({
@@ -64,12 +64,9 @@ export async function GET() {
       },
       members,
       memberPlayers: memberPlayersObj,
-    });
+    })
   } catch (error) {
-    console.error("[Current Room API] Error:", error);
-    return NextResponse.json(
-      { error: "Failed to fetch current room" },
-      { status: 500 },
-    );
+    console.error('[Current Room API] Error:', error)
+    return NextResponse.json({ error: 'Failed to fetch current room' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/arcade/rooms/route.ts b/apps/web/src/app/api/arcade/rooms/route.ts
index c1bb32c9..8e34b438 100644
--- a/apps/web/src/app/api/arcade/rooms/route.ts
+++ b/apps/web/src/app/api/arcade/rooms/route.ts
@@ -1,13 +1,9 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { createRoom, listActiveRooms } from "@/lib/arcade/room-manager";
-import {
-  addRoomMember,
-  getRoomMembers,
-  isMember,
-} from "@/lib/arcade/room-membership";
-import { getRoomActivePlayers } from "@/lib/arcade/player-manager";
-import { getViewerId } from "@/lib/viewer";
-import { hasValidator, type GameName } from "@/lib/arcade/validators";
+import { type NextRequest, NextResponse } from 'next/server'
+import { createRoom, listActiveRooms } from '@/lib/arcade/room-manager'
+import { addRoomMember, getRoomMembers, isMember } from '@/lib/arcade/room-membership'
+import { getRoomActivePlayers } from '@/lib/arcade/player-manager'
+import { getViewerId } from '@/lib/viewer'
+import { hasValidator, type GameName } from '@/lib/arcade/validators'
 
 /**
  * GET /api/arcade/rooms
@@ -17,22 +13,22 @@ import { hasValidator, type GameName } from "@/lib/arcade/validators";
  */
 export async function GET(req: NextRequest) {
   try {
-    const { searchParams } = new URL(req.url);
-    const gameName = searchParams.get("gameName") as GameName | null;
+    const { searchParams } = new URL(req.url)
+    const gameName = searchParams.get('gameName') as GameName | null
 
-    const viewerId = await getViewerId();
-    const rooms = await listActiveRooms(gameName || undefined);
+    const viewerId = await getViewerId()
+    const rooms = await listActiveRooms(gameName || undefined)
 
     // Enrich with member counts, player counts, and membership status
     const roomsWithCounts = await Promise.all(
       rooms.map(async (room) => {
-        const members = await getRoomMembers(room.id);
-        const playerMap = await getRoomActivePlayers(room.id);
-        const userIsMember = await isMember(room.id, viewerId);
+        const members = await getRoomMembers(room.id)
+        const playerMap = await getRoomActivePlayers(room.id)
+        const userIsMember = await isMember(room.id, viewerId)
 
-        let totalPlayers = 0;
+        let totalPlayers = 0
         for (const players of playerMap.values()) {
-          totalPlayers += players.length;
+          totalPlayers += players.length
         }
 
         return {
@@ -47,17 +43,14 @@ export async function GET(req: NextRequest) {
           memberCount: members.length,
           playerCount: totalPlayers,
           isMember: userIsMember,
-        };
-      }),
-    );
+        }
+      })
+    )
 
-    return NextResponse.json({ rooms: roomsWithCounts });
+    return NextResponse.json({ rooms: roomsWithCounts })
   } catch (error) {
-    console.error("Failed to fetch rooms:", error);
-    return NextResponse.json(
-      { error: "Failed to fetch rooms" },
-      { status: 500 },
-    );
+    console.error('Failed to fetch rooms:', error)
+    return NextResponse.json({ error: 'Failed to fetch rooms' }, { status: 500 })
   }
 }
 
@@ -74,58 +67,49 @@ export async function GET(req: NextRequest) {
  */
 export async function POST(req: NextRequest) {
   try {
-    const viewerId = await getViewerId();
-    const body = await req.json();
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
     // Validate game name if provided (gameName is now optional)
     if (body.gameName) {
       if (!hasValidator(body.gameName)) {
-        return NextResponse.json(
-          { error: "Invalid game name" },
-          { status: 400 },
-        );
+        return NextResponse.json({ error: 'Invalid game name' }, { status: 400 })
       }
     }
 
     // Validate name length (if provided)
     if (body.name && body.name.length > 50) {
-      return NextResponse.json(
-        { error: "Room name too long (max 50 characters)" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Room name too long (max 50 characters)' }, { status: 400 })
     }
 
     // Normalize empty name to null
-    const roomName = body.name?.trim() || null;
+    const roomName = body.name?.trim() || null
 
     // Validate access mode
     if (body.accessMode) {
       const validAccessModes = [
-        "open",
-        "password",
-        "approval-only",
-        "restricted",
-        "locked",
-        "retired",
-      ];
+        'open',
+        'password',
+        'approval-only',
+        'restricted',
+        'locked',
+        'retired',
+      ]
       if (!validAccessModes.includes(body.accessMode)) {
-        return NextResponse.json(
-          { error: "Invalid access mode" },
-          { status: 400 },
-        );
+        return NextResponse.json({ error: 'Invalid access mode' }, { status: 400 })
       }
     }
 
     // Validate password if provided
-    if (body.accessMode === "password" && !body.password) {
+    if (body.accessMode === 'password' && !body.password) {
       return NextResponse.json(
-        { error: "Password is required for password-protected rooms" },
-        { status: 400 },
-      );
+        { error: 'Password is required for password-protected rooms' },
+        { status: 400 }
+      )
     }
 
     // Get display name from body or generate from viewerId
-    const displayName = body.creatorName || `Guest ${viewerId.slice(-4)}`;
+    const displayName = body.creatorName || `Guest ${viewerId.slice(-4)}`
 
     // Create room
     const room = await createRoom({
@@ -137,7 +121,7 @@ export async function POST(req: NextRequest) {
       ttlMinutes: body.ttlMinutes,
       accessMode: body.accessMode,
       password: body.password,
-    });
+    })
 
     // Add creator as first member
     await addRoomMember({
@@ -145,21 +129,21 @@ export async function POST(req: NextRequest) {
       userId: viewerId,
       displayName,
       isCreator: true,
-    });
+    })
 
     // Get members and active players for the response
-    const members = await getRoomMembers(room.id);
-    const memberPlayers = await getRoomActivePlayers(room.id);
+    const members = await getRoomMembers(room.id)
+    const memberPlayers = await getRoomActivePlayers(room.id)
 
     // Convert Map to object for JSON serialization
-    const memberPlayersObj: Record<string, any[]> = {};
+    const memberPlayersObj: Record<string, any[]> = {}
     for (const [uid, players] of memberPlayers.entries()) {
-      memberPlayersObj[uid] = players;
+      memberPlayersObj[uid] = players
     }
 
     // Generate join URL
-    const baseUrl = process.env.NEXT_PUBLIC_URL || "http://localhost:3000";
-    const joinUrl = `${baseUrl}/arcade/rooms/${room.id}`;
+    const baseUrl = process.env.NEXT_PUBLIC_URL || 'http://localhost:3000'
+    const joinUrl = `${baseUrl}/arcade/rooms/${room.id}`
 
     return NextResponse.json(
       {
@@ -168,13 +152,10 @@ export async function POST(req: NextRequest) {
         memberPlayers: memberPlayersObj,
         joinUrl,
       },
-      { status: 201 },
-    );
+      { status: 201 }
+    )
   } catch (error) {
-    console.error("Failed to create room:", error);
-    return NextResponse.json(
-      { error: "Failed to create room" },
-      { status: 500 },
-    );
+    console.error('Failed to create room:', error)
+    return NextResponse.json({ error: 'Failed to create room' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/auth/[...nextauth]/route.ts b/apps/web/src/app/api/auth/[...nextauth]/route.ts
index 69dce348..17ccc4f8 100644
--- a/apps/web/src/app/api/auth/[...nextauth]/route.ts
+++ b/apps/web/src/app/api/auth/[...nextauth]/route.ts
@@ -12,6 +12,6 @@
  * - etc.
  */
 
-import { handlers } from "@/auth";
+import { handlers } from '@/auth'
 
-export const { GET, POST } = handlers;
+export const { GET, POST } = handlers
diff --git a/apps/web/src/app/api/blog/featured/route.ts b/apps/web/src/app/api/blog/featured/route.ts
index 3b566235..ce71c475 100644
--- a/apps/web/src/app/api/blog/featured/route.ts
+++ b/apps/web/src/app/api/blog/featured/route.ts
@@ -1,15 +1,12 @@
-import { NextResponse } from "next/server";
-import { getFeaturedPosts } from "@/lib/blog";
+import { NextResponse } from 'next/server'
+import { getFeaturedPosts } from '@/lib/blog'
 
 export async function GET() {
   try {
-    const posts = await getFeaturedPosts();
-    return NextResponse.json(posts);
+    const posts = await getFeaturedPosts()
+    return NextResponse.json(posts)
   } catch (error) {
-    console.error("Error fetching featured posts:", error);
-    return NextResponse.json(
-      { error: "Failed to fetch featured posts" },
-      { status: 500 },
-    );
+    console.error('Error fetching featured posts:', error)
+    return NextResponse.json({ error: 'Failed to fetch featured posts' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/build-info/route.ts b/apps/web/src/app/api/build-info/route.ts
index fdaddcf3..e3a22f7b 100644
--- a/apps/web/src/app/api/build-info/route.ts
+++ b/apps/web/src/app/api/build-info/route.ts
@@ -1,6 +1,6 @@
-import { NextResponse } from "next/server";
-import buildInfo from "@/generated/build-info.json";
+import { NextResponse } from 'next/server'
+import buildInfo from '@/generated/build-info.json'
 
 export async function GET() {
-  return NextResponse.json(buildInfo);
+  return NextResponse.json(buildInfo)
 }
diff --git a/apps/web/src/app/api/create/calendar/generate/route.ts b/apps/web/src/app/api/create/calendar/generate/route.ts
index fc9003c9..9b692fab 100644
--- a/apps/web/src/app/api/create/calendar/generate/route.ts
+++ b/apps/web/src/app/api/create/calendar/generate/route.ts
@@ -1,62 +1,55 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { writeFileSync, mkdirSync, rmSync } from "fs";
-import { tmpdir } from "os";
-import { join } from "path";
-import { execSync } from "child_process";
-import {
-  generateMonthlyTypst,
-  generateDailyTypst,
-  getDaysInMonth,
-} from "../utils/typstGenerator";
-import type { AbacusConfig } from "@soroban/abacus-react";
-import { generateCalendarComposite } from "@/utils/calendar/generateCalendarComposite";
-import { generateAbacusElement } from "@/utils/calendar/generateCalendarAbacus";
+import { type NextRequest, NextResponse } from 'next/server'
+import { writeFileSync, mkdirSync, rmSync } from 'fs'
+import { tmpdir } from 'os'
+import { join } from 'path'
+import { execSync } from 'child_process'
+import { generateMonthlyTypst, generateDailyTypst, getDaysInMonth } from '../utils/typstGenerator'
+import type { AbacusConfig } from '@soroban/abacus-react'
+import { generateCalendarComposite } from '@/utils/calendar/generateCalendarComposite'
+import { generateAbacusElement } from '@/utils/calendar/generateCalendarAbacus'
 
 interface CalendarRequest {
-  month: number;
-  year: number;
-  format: "monthly" | "daily";
-  paperSize: "us-letter" | "a4" | "a3" | "tabloid";
-  abacusConfig?: AbacusConfig;
+  month: number
+  year: number
+  format: 'monthly' | 'daily'
+  paperSize: 'us-letter' | 'a4' | 'a3' | 'tabloid'
+  abacusConfig?: AbacusConfig
 }
 
 export async function POST(request: NextRequest) {
-  let tempDir: string | null = null;
+  let tempDir: string | null = null
 
   try {
     // Dynamic import to avoid Next.js bundler issues with react-dom/server
-    const { renderToStaticMarkup } = await import("react-dom/server");
+    const { renderToStaticMarkup } = await import('react-dom/server')
 
-    const body: CalendarRequest = await request.json();
-    const { month, year, format, paperSize, abacusConfig } = body;
+    const body: CalendarRequest = await request.json()
+    const { month, year, format, paperSize, abacusConfig } = body
 
     // Validate inputs
     if (!month || month < 1 || month > 12 || !year || year < 1 || year > 9999) {
-      return NextResponse.json(
-        { error: "Invalid month or year" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Invalid month or year' }, { status: 400 })
     }
 
     // Create temp directory for SVG files
-    tempDir = join(tmpdir(), `calendar-${Date.now()}-${Math.random()}`);
-    mkdirSync(tempDir, { recursive: true });
+    tempDir = join(tmpdir(), `calendar-${Date.now()}-${Math.random()}`)
+    mkdirSync(tempDir, { recursive: true })
 
     // Generate and write SVG files
-    const daysInMonth = getDaysInMonth(year, month);
-    let typstContent: string;
+    const daysInMonth = getDaysInMonth(year, month)
+    let typstContent: string
 
-    if (format === "monthly") {
+    if (format === 'monthly') {
       // Generate single composite SVG for monthly calendar
       const calendarSvg = generateCalendarComposite({
         month,
         year,
         renderToString: renderToStaticMarkup,
-      });
+      })
       if (!calendarSvg || calendarSvg.trim().length === 0) {
-        throw new Error("Generated empty composite calendar SVG");
+        throw new Error('Generated empty composite calendar SVG')
       }
-      writeFileSync(join(tempDir, "calendar.svg"), calendarSvg);
+      writeFileSync(join(tempDir, 'calendar.svg'), calendarSvg)
 
       // Generate Typst document
       typstContent = generateMonthlyTypst({
@@ -64,26 +57,24 @@ export async function POST(request: NextRequest) {
         year,
         paperSize,
         daysInMonth,
-      });
+      })
     } else {
       // Daily format: generate individual SVGs for each day
       for (let day = 1; day <= daysInMonth; day++) {
-        const svg = renderToStaticMarkup(generateAbacusElement(day, 2));
+        const svg = renderToStaticMarkup(generateAbacusElement(day, 2))
         if (!svg || svg.trim().length === 0) {
-          throw new Error(`Generated empty SVG for day ${day}`);
+          throw new Error(`Generated empty SVG for day ${day}`)
         }
-        writeFileSync(join(tempDir, `day-${day}.svg`), svg);
+        writeFileSync(join(tempDir, `day-${day}.svg`), svg)
       }
 
       // Generate year SVG
-      const yearColumns = Math.max(1, Math.ceil(Math.log10(year + 1)));
-      const yearSvg = renderToStaticMarkup(
-        generateAbacusElement(year, yearColumns),
-      );
+      const yearColumns = Math.max(1, Math.ceil(Math.log10(year + 1)))
+      const yearSvg = renderToStaticMarkup(generateAbacusElement(year, yearColumns))
       if (!yearSvg || yearSvg.trim().length === 0) {
-        throw new Error(`Generated empty SVG for year ${year}`);
+        throw new Error(`Generated empty SVG for year ${year}`)
       }
-      writeFileSync(join(tempDir, "year.svg"), yearSvg);
+      writeFileSync(join(tempDir, 'year.svg'), yearSvg)
 
       // Generate Typst document
       typstContent = generateDailyTypst({
@@ -91,57 +82,57 @@ export async function POST(request: NextRequest) {
         year,
         paperSize,
         daysInMonth,
-      });
+      })
     }
 
     // Compile with Typst: stdin for .typ content, stdout for PDF output
-    let pdfBuffer: Buffer;
+    let pdfBuffer: Buffer
     try {
-      pdfBuffer = execSync("typst compile --format pdf - -", {
+      pdfBuffer = execSync('typst compile --format pdf - -', {
         input: typstContent,
         cwd: tempDir, // Run in temp dir so relative paths work
         maxBuffer: 50 * 1024 * 1024, // 50MB limit for large calendars
-      });
+      })
     } catch (error) {
-      console.error("Typst compilation error:", error);
+      console.error('Typst compilation error:', error)
       return NextResponse.json(
-        { error: "Failed to compile PDF. Is Typst installed?" },
-        { status: 500 },
-      );
+        { error: 'Failed to compile PDF. Is Typst installed?' },
+        { status: 500 }
+      )
     }
 
     // Clean up temp directory
-    rmSync(tempDir, { recursive: true, force: true });
-    tempDir = null;
+    rmSync(tempDir, { recursive: true, force: true })
+    tempDir = null
 
     // Return JSON with PDF
     return NextResponse.json({
-      pdf: pdfBuffer.toString("base64"),
-      filename: `calendar-${year}-${String(month).padStart(2, "0")}.pdf`,
-    });
+      pdf: pdfBuffer.toString('base64'),
+      filename: `calendar-${year}-${String(month).padStart(2, '0')}.pdf`,
+    })
   } catch (error) {
-    console.error("Error generating calendar:", error);
+    console.error('Error generating calendar:', error)
 
     // Clean up temp directory if it exists
     if (tempDir) {
       try {
-        rmSync(tempDir, { recursive: true, force: true });
+        rmSync(tempDir, { recursive: true, force: true })
       } catch (cleanupError) {
-        console.error("Failed to clean up temp directory:", cleanupError);
+        console.error('Failed to clean up temp directory:', cleanupError)
       }
     }
 
     // Surface the actual error for debugging
-    const errorMessage = error instanceof Error ? error.message : String(error);
-    const errorStack = error instanceof Error ? error.stack : undefined;
+    const errorMessage = error instanceof Error ? error.message : String(error)
+    const errorStack = error instanceof Error ? error.stack : undefined
 
     return NextResponse.json(
       {
-        error: "Failed to generate calendar",
+        error: 'Failed to generate calendar',
         message: errorMessage,
-        ...(process.env.NODE_ENV === "development" && { stack: errorStack }),
+        ...(process.env.NODE_ENV === 'development' && { stack: errorStack }),
       },
-      { status: 500 },
-    );
+      { status: 500 }
+    )
   }
 }
diff --git a/apps/web/src/app/api/create/calendar/preview/route.ts b/apps/web/src/app/api/create/calendar/preview/route.ts
index 20ced4d5..997cb7fd 100644
--- a/apps/web/src/app/api/create/calendar/preview/route.ts
+++ b/apps/web/src/app/api/create/calendar/preview/route.ts
@@ -1,115 +1,103 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { writeFileSync, mkdirSync, rmSync } from "fs";
-import { tmpdir } from "os";
-import { join } from "path";
-import { execSync } from "child_process";
-import { generateMonthlyTypst, getDaysInMonth } from "../utils/typstGenerator";
-import { generateCalendarComposite } from "@/utils/calendar/generateCalendarComposite";
-import { generateAbacusElement } from "@/utils/calendar/generateCalendarAbacus";
+import { type NextRequest, NextResponse } from 'next/server'
+import { writeFileSync, mkdirSync, rmSync } from 'fs'
+import { tmpdir } from 'os'
+import { join } from 'path'
+import { execSync } from 'child_process'
+import { generateMonthlyTypst, getDaysInMonth } from '../utils/typstGenerator'
+import { generateCalendarComposite } from '@/utils/calendar/generateCalendarComposite'
+import { generateAbacusElement } from '@/utils/calendar/generateCalendarAbacus'
 
 interface PreviewRequest {
-  month: number;
-  year: number;
-  format: "monthly" | "daily";
+  month: number
+  year: number
+  format: 'monthly' | 'daily'
 }
 
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic'
 
 export async function POST(request: NextRequest) {
-  let tempDir: string | null = null;
+  let tempDir: string | null = null
 
   try {
-    const body: PreviewRequest = await request.json();
-    const { month, year, format } = body;
+    const body: PreviewRequest = await request.json()
+    const { month, year, format } = body
 
     // Validate inputs
     if (!month || month < 1 || month > 12 || !year || year < 1 || year > 9999) {
-      return NextResponse.json(
-        { error: "Invalid month or year" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Invalid month or year' }, { status: 400 })
     }
 
     // Dynamic import to avoid Next.js bundler issues
-    const { renderToStaticMarkup } = await import("react-dom/server");
+    const { renderToStaticMarkup } = await import('react-dom/server')
 
     // Create temp directory for SVG file(s)
-    tempDir = join(tmpdir(), `calendar-preview-${Date.now()}-${Math.random()}`);
-    mkdirSync(tempDir, { recursive: true });
+    tempDir = join(tmpdir(), `calendar-preview-${Date.now()}-${Math.random()}`)
+    mkdirSync(tempDir, { recursive: true })
 
     // Generate Typst document content
-    const daysInMonth = getDaysInMonth(year, month);
-    let typstContent: string;
+    const daysInMonth = getDaysInMonth(year, month)
+    let typstContent: string
 
-    if (format === "monthly") {
+    if (format === 'monthly') {
       // Generate and write composite SVG
       const calendarSvg = generateCalendarComposite({
         month,
         year,
         renderToString: renderToStaticMarkup,
-      });
-      writeFileSync(join(tempDir, "calendar.svg"), calendarSvg);
+      })
+      writeFileSync(join(tempDir, 'calendar.svg'), calendarSvg)
 
       typstContent = generateMonthlyTypst({
         month,
         year,
-        paperSize: "us-letter",
+        paperSize: 'us-letter',
         daysInMonth,
-      });
+      })
     } else {
       // Daily format: Create a SINGLE composite SVG (like monthly) to avoid multi-image export issue
 
       // Generate individual abacus SVGs
-      const daySvg = renderToStaticMarkup(generateAbacusElement(1, 2));
+      const daySvg = renderToStaticMarkup(generateAbacusElement(1, 2))
       if (!daySvg || daySvg.trim().length === 0) {
-        throw new Error("Generated empty SVG for day 1");
+        throw new Error('Generated empty SVG for day 1')
       }
 
-      const yearColumns = Math.max(1, Math.ceil(Math.log10(year + 1)));
-      const yearSvg = renderToStaticMarkup(
-        generateAbacusElement(year, yearColumns),
-      );
+      const yearColumns = Math.max(1, Math.ceil(Math.log10(year + 1)))
+      const yearSvg = renderToStaticMarkup(generateAbacusElement(year, yearColumns))
       if (!yearSvg || yearSvg.trim().length === 0) {
-        throw new Error(`Generated empty SVG for year ${year}`);
+        throw new Error(`Generated empty SVG for year ${year}`)
       }
 
       // Create composite SVG with both year and day abacus
       const monthName = [
-        "January",
-        "February",
-        "March",
-        "April",
-        "May",
-        "June",
-        "July",
-        "August",
-        "September",
-        "October",
-        "November",
-        "December",
-      ][month - 1];
-      const dayOfWeek = new Date(year, month - 1, 1).toLocaleDateString(
-        "en-US",
-        {
-          weekday: "long",
-        },
-      );
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+      ][month - 1]
+      const dayOfWeek = new Date(year, month - 1, 1).toLocaleDateString('en-US', {
+        weekday: 'long',
+      })
 
       // Extract SVG content (remove outer <svg> tags)
-      const yearSvgContent = yearSvg
-        .replace(/<svg[^>]*>/, "")
-        .replace(/<\/svg>$/, "");
-      const daySvgContent = daySvg
-        .replace(/<svg[^>]*>/, "")
-        .replace(/<\/svg>$/, "");
+      const yearSvgContent = yearSvg.replace(/<svg[^>]*>/, '').replace(/<\/svg>$/, '')
+      const daySvgContent = daySvg.replace(/<svg[^>]*>/, '').replace(/<\/svg>$/, '')
 
       // Create composite SVG (850x1100 = US Letter aspect ratio)
-      const compositeWidth = 850;
-      const compositeHeight = 1100;
-      const yearAbacusWidth = 120; // Natural width at scale 1
-      const yearAbacusHeight = 230;
-      const dayAbacusWidth = 120;
-      const dayAbacusHeight = 230;
+      const compositeWidth = 850
+      const compositeHeight = 1100
+      const yearAbacusWidth = 120 // Natural width at scale 1
+      const yearAbacusHeight = 230
+      const dayAbacusWidth = 120
+      const dayAbacusHeight = 230
 
       const compositeSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${compositeWidth}" height="${compositeHeight}" viewBox="0 0 ${compositeWidth} ${compositeHeight}">
   <!-- Background -->
@@ -155,9 +143,9 @@ export async function POST(request: NextRequest) {
   <line x1="90" y1="980" x2="${compositeWidth - 90}" y2="980" stroke="#ca8a04" stroke-width="1"/>
   <line x1="90" y1="1005" x2="${compositeWidth - 90}" y2="1005" stroke="#ca8a04" stroke-width="1"/>
   <line x1="90" y1="1030" x2="${compositeWidth - 90}" y2="1030" stroke="#ca8a04" stroke-width="1"/>
-</svg>`;
+</svg>`
 
-      writeFileSync(join(tempDir, "daily-preview.svg"), compositeSvg);
+      writeFileSync(join(tempDir, 'daily-preview.svg'), compositeSvg)
 
       // Use single composite image (like monthly)
       typstContent = `#set page(
@@ -168,46 +156,46 @@ export async function POST(request: NextRequest) {
 #align(center + horizon)[
   #image("daily-preview.svg", width: 100%, fit: "contain")
 ]
-`;
+`
     }
 
     // Compile with Typst: stdin for .typ content, stdout for SVG output
-    let svg: string;
+    let svg: string
     try {
-      svg = execSync("typst compile --format svg - -", {
+      svg = execSync('typst compile --format svg - -', {
         input: typstContent,
-        encoding: "utf8",
+        encoding: 'utf8',
         cwd: tempDir, // Run in temp dir so relative paths work
-      });
+      })
     } catch (error) {
-      console.error("Typst compilation error:", error);
+      console.error('Typst compilation error:', error)
       return NextResponse.json(
-        { error: "Failed to compile preview. Is Typst installed?" },
-        { status: 500 },
-      );
+        { error: 'Failed to compile preview. Is Typst installed?' },
+        { status: 500 }
+      )
     }
 
     // Clean up temp directory
-    rmSync(tempDir, { recursive: true, force: true });
-    tempDir = null;
+    rmSync(tempDir, { recursive: true, force: true })
+    tempDir = null
 
-    return NextResponse.json({ svg });
+    return NextResponse.json({ svg })
   } catch (error) {
-    console.error("Error generating preview:", error);
+    console.error('Error generating preview:', error)
 
     // Clean up temp directory if it exists
     if (tempDir) {
       try {
-        rmSync(tempDir, { recursive: true, force: true });
+        rmSync(tempDir, { recursive: true, force: true })
       } catch (cleanupError) {
-        console.error("Failed to clean up temp directory:", cleanupError);
+        console.error('Failed to clean up temp directory:', cleanupError)
       }
     }
 
-    const errorMessage = error instanceof Error ? error.message : String(error);
+    const errorMessage = error instanceof Error ? error.message : String(error)
     return NextResponse.json(
-      { error: "Failed to generate preview", message: errorMessage },
-      { status: 500 },
-    );
+      { error: 'Failed to generate preview', message: errorMessage },
+      { status: 500 }
+    )
   }
 }
diff --git a/apps/web/src/app/api/create/calendar/utils/typstGenerator.ts b/apps/web/src/app/api/create/calendar/utils/typstGenerator.ts
index 3fdf25f7..98ee086c 100644
--- a/apps/web/src/app/api/create/calendar/utils/typstGenerator.ts
+++ b/apps/web/src/app/api/create/calendar/utils/typstGenerator.ts
@@ -1,70 +1,70 @@
 interface TypstMonthlyConfig {
-  month: number;
-  year: number;
-  paperSize: "us-letter" | "a4" | "a3" | "tabloid";
-  daysInMonth: number;
+  month: number
+  year: number
+  paperSize: 'us-letter' | 'a4' | 'a3' | 'tabloid'
+  daysInMonth: number
 }
 
 interface TypstDailyConfig {
-  month: number;
-  year: number;
-  paperSize: "us-letter" | "a4" | "a3" | "tabloid";
-  daysInMonth: number;
+  month: number
+  year: number
+  paperSize: 'us-letter' | 'a4' | 'a3' | 'tabloid'
+  daysInMonth: number
 }
 
 const MONTH_NAMES = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December",
-];
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
 
 export function getDaysInMonth(year: number, month: number): number {
-  return new Date(year, month, 0).getDate();
+  return new Date(year, month, 0).getDate()
 }
 
 function getFirstDayOfWeek(year: number, month: number): number {
-  return new Date(year, month - 1, 1).getDay(); // 0 = Sunday
+  return new Date(year, month - 1, 1).getDay() // 0 = Sunday
 }
 
 function getDayOfWeek(year: number, month: number, day: number): string {
-  const date = new Date(year, month - 1, day);
-  return date.toLocaleDateString("en-US", { weekday: "long" });
+  const date = new Date(year, month - 1, day)
+  return date.toLocaleDateString('en-US', { weekday: 'long' })
 }
 
-type PaperSize = "us-letter" | "a4" | "a3" | "tabloid";
+type PaperSize = 'us-letter' | 'a4' | 'a3' | 'tabloid'
 
 interface PaperConfig {
-  typstName: string;
-  marginX: string;
-  marginY: string;
+  typstName: string
+  marginX: string
+  marginY: string
 }
 
 function getPaperConfig(size: string): PaperConfig {
   const configs: Record<PaperSize, PaperConfig> = {
     // Tight margins to maximize space for calendar grid
-    "us-letter": { typstName: "us-letter", marginX: "0.5in", marginY: "0.5in" },
+    'us-letter': { typstName: 'us-letter', marginX: '0.5in', marginY: '0.5in' },
     // A4 is slightly taller/narrower than US Letter - adjust margins proportionally
-    a4: { typstName: "a4", marginX: "1.3cm", marginY: "1.3cm" },
+    a4: { typstName: 'a4', marginX: '1.3cm', marginY: '1.3cm' },
     // A3 is 2x area of A4 - can use same margins but will scale content larger
-    a3: { typstName: "a3", marginX: "1.5cm", marginY: "1.5cm" },
+    a3: { typstName: 'a3', marginX: '1.5cm', marginY: '1.5cm' },
     // Tabloid (11" × 17") is larger - can use more margin
-    tabloid: { typstName: "us-tabloid", marginX: "0.75in", marginY: "0.75in" },
-  };
-  return configs[size as PaperSize] || configs["us-letter"];
+    tabloid: { typstName: 'us-tabloid', marginX: '0.75in', marginY: '0.75in' },
+  }
+  return configs[size as PaperSize] || configs['us-letter']
 }
 
 export function generateMonthlyTypst(config: TypstMonthlyConfig): string {
-  const { paperSize } = config;
-  const paperConfig = getPaperConfig(paperSize);
+  const { paperSize } = config
+  const paperConfig = getPaperConfig(paperSize)
 
   // Single-page design: use one composite SVG that scales to fit
   // This prevents overflow - Typst will scale the image to fit available space
@@ -77,18 +77,18 @@ export function generateMonthlyTypst(config: TypstMonthlyConfig): string {
 #align(center + horizon)[
   #image("calendar.svg", width: 100%, fit: "contain")
 ]
-`;
+`
 }
 
 export function generateDailyTypst(config: TypstDailyConfig): string {
-  const { month, year, paperSize, daysInMonth } = config;
-  const paperConfig = getPaperConfig(paperSize);
-  const monthName = MONTH_NAMES[month - 1];
+  const { month, year, paperSize, daysInMonth } = config
+  const paperConfig = getPaperConfig(paperSize)
+  const monthName = MONTH_NAMES[month - 1]
 
-  let pages = "";
+  let pages = ''
 
   for (let day = 1; day <= daysInMonth; day++) {
-    const dayOfWeek = getDayOfWeek(year, month, day);
+    const dayOfWeek = getDayOfWeek(year, month, day)
 
     pages += `
 #page(
@@ -184,12 +184,12 @@ export function generateDailyTypst(config: TypstDailyConfig): string {
   ]
 ]
 
-${day < daysInMonth ? "" : ""}`;
+${day < daysInMonth ? '' : ''}`
 
     if (day < daysInMonth) {
-      pages += "\n";
+      pages += '\n'
     }
   }
 
-  return pages;
+  return pages
 }
diff --git a/apps/web/src/app/api/create/flashcards/preview/route.ts b/apps/web/src/app/api/create/flashcards/preview/route.ts
index b6ee2e47..21aafeec 100644
--- a/apps/web/src/app/api/create/flashcards/preview/route.ts
+++ b/apps/web/src/app/api/create/flashcards/preview/route.ts
@@ -1,80 +1,70 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { writeFileSync, mkdirSync, rmSync } from "fs";
-import { tmpdir } from "os";
-import { join } from "path";
-import { execSync } from "child_process";
-import type { FlashcardFormState } from "@/app/create/flashcards/page";
+import { type NextRequest, NextResponse } from 'next/server'
+import { writeFileSync, mkdirSync, rmSync } from 'fs'
+import { tmpdir } from 'os'
+import { join } from 'path'
+import { execSync } from 'child_process'
+import type { FlashcardFormState } from '@/app/create/flashcards/page'
 import {
   generateFlashcardFront,
   generateFlashcardBack,
-} from "@/utils/flashcards/generateFlashcardSvgs";
+} from '@/utils/flashcards/generateFlashcardSvgs'
 
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic'
 
 /**
  * Parse range string to get numbers for preview (first page only)
  */
-function parseRangeForPreview(
-  range: string,
-  step: number,
-  cardsPerPage: number,
-): number[] {
-  const numbers: number[] = [];
+function parseRangeForPreview(range: string, step: number, cardsPerPage: number): number[] {
+  const numbers: number[] = []
 
-  if (range.includes("-")) {
-    const [start, end] = range.split("-").map((n) => parseInt(n, 10));
+  if (range.includes('-')) {
+    const [start, end] = range.split('-').map((n) => parseInt(n, 10))
     for (let i = start; i <= end && numbers.length < cardsPerPage; i += step) {
-      numbers.push(i);
+      numbers.push(i)
     }
-  } else if (range.includes(",")) {
-    const parts = range.split(",").map((n) => parseInt(n.trim(), 10));
-    numbers.push(...parts.slice(0, cardsPerPage));
+  } else if (range.includes(',')) {
+    const parts = range.split(',').map((n) => parseInt(n.trim(), 10))
+    numbers.push(...parts.slice(0, cardsPerPage))
   } else {
-    numbers.push(parseInt(range, 10));
+    numbers.push(parseInt(range, 10))
   }
 
-  return numbers.slice(0, cardsPerPage);
+  return numbers.slice(0, cardsPerPage)
 }
 
 export async function POST(request: NextRequest) {
-  let tempDir: string | null = null;
+  let tempDir: string | null = null
 
   try {
-    const body: FlashcardFormState = await request.json();
+    const body: FlashcardFormState = await request.json()
     const {
-      range = "0-99",
+      range = '0-99',
       step = 1,
       cardsPerPage = 6,
-      paperSize = "us-letter",
-      orientation = "portrait",
-      beadShape = "diamond",
-      colorScheme = "place-value",
-      colorPalette = "default",
+      paperSize = 'us-letter',
+      orientation = 'portrait',
+      beadShape = 'diamond',
+      colorScheme = 'place-value',
+      colorPalette = 'default',
       hideInactiveBeads = false,
       showEmptyColumns = false,
-      columns = "auto",
+      columns = 'auto',
       scaleFactor = 0.9,
       coloredNumerals = false,
-    } = body;
+    } = body
 
     // Dynamic import to avoid Next.js bundler issues
-    const { renderToStaticMarkup } = await import("react-dom/server");
+    const { renderToStaticMarkup } = await import('react-dom/server')
 
     // Create temp directory for SVG files
-    tempDir = join(
-      tmpdir(),
-      `flashcards-preview-${Date.now()}-${Math.random()}`,
-    );
-    mkdirSync(tempDir, { recursive: true });
+    tempDir = join(tmpdir(), `flashcards-preview-${Date.now()}-${Math.random()}`)
+    mkdirSync(tempDir, { recursive: true })
 
     // Get numbers for first page only
-    const numbers = parseRangeForPreview(range, step, cardsPerPage);
+    const numbers = parseRangeForPreview(range, step, cardsPerPage)
 
     if (numbers.length === 0) {
-      return NextResponse.json(
-        { error: "No valid numbers in range" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'No valid numbers in range' }, { status: 400 })
     }
 
     // Generate SVG files for each card (front and back)
@@ -84,58 +74,54 @@ export async function POST(request: NextRequest) {
       colorPalette,
       hideInactiveBeads,
       showEmptyColumns,
-      columns: (columns === "auto" ? "auto" : Number(columns)) as
-        | number
-        | "auto",
+      columns: (columns === 'auto' ? 'auto' : Number(columns)) as number | 'auto',
       scaleFactor,
       coloredNumerals,
-    };
+    }
 
     for (let i = 0; i < numbers.length; i++) {
-      const num = numbers[i];
+      const num = numbers[i]
 
       // Generate front (abacus)
-      const frontElement = generateFlashcardFront(num, config);
-      const frontSvg = renderToStaticMarkup(frontElement);
-      writeFileSync(join(tempDir, `card_${i}_front.svg`), frontSvg);
+      const frontElement = generateFlashcardFront(num, config)
+      const frontSvg = renderToStaticMarkup(frontElement)
+      writeFileSync(join(tempDir, `card_${i}_front.svg`), frontSvg)
 
       // Generate back (numeral)
-      const backElement = generateFlashcardBack(num, config);
-      const backSvg = renderToStaticMarkup(backElement);
-      writeFileSync(join(tempDir, `card_${i}_back.svg`), backSvg);
+      const backElement = generateFlashcardBack(num, config)
+      const backSvg = renderToStaticMarkup(backElement)
+      writeFileSync(join(tempDir, `card_${i}_back.svg`), backSvg)
     }
 
     // Calculate card dimensions based on paper size and orientation
     const paperDimensions = {
-      "us-letter": { width: 8.5, height: 11 },
+      'us-letter': { width: 8.5, height: 11 },
       a4: { width: 8.27, height: 11.69 },
       a3: { width: 11.69, height: 16.54 },
       a5: { width: 5.83, height: 8.27 },
-    };
+    }
 
-    const paper = paperDimensions[paperSize] || paperDimensions["us-letter"];
+    const paper = paperDimensions[paperSize] || paperDimensions['us-letter']
     const [pageWidth, pageHeight] =
-      orientation === "landscape"
-        ? [paper.height, paper.width]
-        : [paper.width, paper.height];
+      orientation === 'landscape' ? [paper.height, paper.width] : [paper.width, paper.height]
 
     // Calculate grid layout (2 columns × 3 rows for 6 cards per page typically)
-    const cols = 2;
-    const rows = Math.ceil(cardsPerPage / cols);
-    const margin = 0.5; // inches
-    const gutter = 0.2; // inches between cards
+    const cols = 2
+    const rows = Math.ceil(cardsPerPage / cols)
+    const margin = 0.5 // inches
+    const gutter = 0.2 // inches between cards
 
-    const availableWidth = pageWidth - 2 * margin - gutter * (cols - 1);
-    const availableHeight = pageHeight - 2 * margin - gutter * (rows - 1);
-    const cardWidth = availableWidth / cols;
-    const cardHeight = availableHeight / rows;
+    const availableWidth = pageWidth - 2 * margin - gutter * (cols - 1)
+    const availableHeight = pageHeight - 2 * margin - gutter * (rows - 1)
+    const cardWidth = availableWidth / cols
+    const cardHeight = availableHeight / rows
 
     // Generate Typst document with card grid
     const typstContent = `
 #set page(
   paper: "${paperSize}",
   margin: (x: ${margin}in, y: ${margin}in),
-  flipped: ${orientation === "landscape"},
+  flipped: ${orientation === 'landscape'},
 )
 
 // Grid layout for flashcards preview (first page only)
@@ -146,9 +132,9 @@ export async function POST(request: NextRequest) {
   row-gutter: ${gutter}in,
   ${numbers
     .map((_, i) => {
-      return `  image("card_${i}_front.svg", width: ${cardWidth}in, height: ${cardHeight}in, fit: "contain"),`;
+      return `  image("card_${i}_front.svg", width: ${cardWidth}in, height: ${cardHeight}in, fit: "contain"),`
     })
-    .join("\n")}
+    .join('\n')}
 )
 
 // Add preview label
@@ -158,45 +144,45 @@ export async function POST(request: NextRequest) {
   dy: 0.25in,
   text(10pt, fill: gray)[Preview (first ${numbers.length} cards)]
 )
-`;
+`
 
     // Compile with Typst: stdin for .typ content, stdout for SVG output
-    let svg: string;
+    let svg: string
     try {
-      svg = execSync("typst compile --format svg - -", {
+      svg = execSync('typst compile --format svg - -', {
         input: typstContent,
-        encoding: "utf8",
+        encoding: 'utf8',
         cwd: tempDir, // Run in temp dir so relative paths work
-      });
+      })
     } catch (error) {
-      console.error("Typst compilation error:", error);
+      console.error('Typst compilation error:', error)
       return NextResponse.json(
-        { error: "Failed to compile preview. Is Typst installed?" },
-        { status: 500 },
-      );
+        { error: 'Failed to compile preview. Is Typst installed?' },
+        { status: 500 }
+      )
     }
 
     // Clean up temp directory
-    rmSync(tempDir, { recursive: true, force: true });
-    tempDir = null;
+    rmSync(tempDir, { recursive: true, force: true })
+    tempDir = null
 
-    return NextResponse.json({ svg });
+    return NextResponse.json({ svg })
   } catch (error) {
-    console.error("Error generating preview:", error);
+    console.error('Error generating preview:', error)
 
     // Clean up temp directory if it exists
     if (tempDir) {
       try {
-        rmSync(tempDir, { recursive: true, force: true });
+        rmSync(tempDir, { recursive: true, force: true })
       } catch (cleanupError) {
-        console.error("Failed to clean up temp directory:", cleanupError);
+        console.error('Failed to clean up temp directory:', cleanupError)
       }
     }
 
-    const errorMessage = error instanceof Error ? error.message : String(error);
+    const errorMessage = error instanceof Error ? error.message : String(error)
     return NextResponse.json(
-      { error: "Failed to generate preview", message: errorMessage },
-      { status: 500 },
-    );
+      { error: 'Failed to generate preview', message: errorMessage },
+      { status: 500 }
+    )
   }
 }
diff --git a/apps/web/src/app/api/create/worksheets/addition/example/route.ts b/apps/web/src/app/api/create/worksheets/addition/example/route.ts
index 1ae56b06..1e0bfb16 100644
--- a/apps/web/src/app/api/create/worksheets/addition/example/route.ts
+++ b/apps/web/src/app/api/create/worksheets/addition/example/route.ts
@@ -8,40 +8,40 @@
 // This ensures blog post examples use the EXACT same rendering as the live UI preview,
 // maintaining consistency between what users see in documentation vs. the actual tool.
 
-import { execSync } from "child_process";
-import { type NextRequest, NextResponse } from "next/server";
+import { execSync } from 'child_process'
+import { type NextRequest, NextResponse } from 'next/server'
 import {
   generateProblems,
   generateSubtractionProblems,
-} from "@/app/create/worksheets/addition/problemGenerator";
-import type { WorksheetOperator } from "@/app/create/worksheets/addition/types";
+} from '@/app/create/worksheets/addition/problemGenerator'
+import type { WorksheetOperator } from '@/app/create/worksheets/addition/types'
 import {
   generateProblemStackFunction,
   generateSubtractionProblemStackFunction,
   generateTypstHelpers,
   generatePlaceValueColors,
-} from "@/app/create/worksheets/addition/typstHelpers";
+} from '@/app/create/worksheets/addition/typstHelpers'
 
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic'
 
 interface ExampleRequest {
-  showCarryBoxes?: boolean;
-  showAnswerBoxes?: boolean;
-  showPlaceValueColors?: boolean;
-  showProblemNumbers?: boolean;
-  showCellBorder?: boolean;
-  showTenFrames?: boolean;
-  showTenFramesForAll?: boolean;
-  showBorrowNotation?: boolean;
-  showBorrowingHints?: boolean;
-  fontSize?: number;
-  operator?: WorksheetOperator;
+  showCarryBoxes?: boolean
+  showAnswerBoxes?: boolean
+  showPlaceValueColors?: boolean
+  showProblemNumbers?: boolean
+  showCellBorder?: boolean
+  showTenFrames?: boolean
+  showTenFramesForAll?: boolean
+  showBorrowNotation?: boolean
+  showBorrowingHints?: boolean
+  fontSize?: number
+  operator?: WorksheetOperator
   // For addition
-  addend1?: number;
-  addend2?: number;
+  addend1?: number
+  addend2?: number
   // For subtraction
-  minuend?: number;
-  subtrahend?: number;
+  minuend?: number
+  subtrahend?: number
 }
 
 /**
@@ -49,34 +49,34 @@ interface ExampleRequest {
  * Uses the EXACT same Typst structure as the full worksheet generator
  */
 function generateExampleTypst(config: ExampleRequest): string {
-  const operator = config.operator ?? "addition";
-  const fontSize = config.fontSize || 14;
-  const cellSize = 0.35; // Compact cell size for examples
+  const operator = config.operator ?? 'addition'
+  const fontSize = config.fontSize || 14
+  const cellSize = 0.35 // Compact cell size for examples
 
   // Boolean flags matching worksheet generator
-  const showCarries = config.showCarryBoxes ?? false;
-  const showAnswers = config.showAnswerBoxes ?? false;
-  const showColors = config.showPlaceValueColors ?? false;
-  const showNumbers = config.showProblemNumbers ?? false;
-  const showTenFrames = config.showTenFrames ?? false;
-  const showTenFramesForAll = config.showTenFramesForAll ?? false;
-  const showBorrowNotation = config.showBorrowNotation ?? true;
-  const showBorrowingHints = config.showBorrowingHints ?? false;
+  const showCarries = config.showCarryBoxes ?? false
+  const showAnswers = config.showAnswerBoxes ?? false
+  const showColors = config.showPlaceValueColors ?? false
+  const showNumbers = config.showProblemNumbers ?? false
+  const showTenFrames = config.showTenFrames ?? false
+  const showTenFramesForAll = config.showTenFramesForAll ?? false
+  const showBorrowNotation = config.showBorrowNotation ?? true
+  const showBorrowingHints = config.showBorrowingHints ?? false
 
-  if (operator === "addition") {
+  if (operator === 'addition') {
     // Use custom addends if provided, otherwise generate a problem
-    let a: number;
-    let b: number;
+    let a: number
+    let b: number
 
     if (config.addend1 !== undefined && config.addend2 !== undefined) {
-      a = config.addend1;
-      b = config.addend2;
+      a = config.addend1
+      b = config.addend2
     } else {
       // Generate a simple 2-digit + 2-digit problem with carries
-      const problems = generateProblems(1, 0.8, 0.5, false, 12345);
-      const problem = problems[0];
-      a = problem.a;
-      b = problem.b;
+      const problems = generateProblems(1, 0.8, 0.5, false, 12345)
+      const problem = problems[0]
+      a = problem.a
+      b = problem.b
     }
 
     return String.raw`
@@ -84,12 +84,12 @@ function generateExampleTypst(config: ExampleRequest): string {
 #set text(size: ${fontSize}pt, font: "New Computer Modern Math")
 
 #let heavy-stroke = 0.8pt
-#let show-carries = ${showCarries ? "true" : "false"}
-#let show-answers = ${showAnswers ? "true" : "false"}
-#let show-colors = ${showColors ? "true" : "false"}
-#let show-numbers = ${showNumbers ? "true" : "false"}
-#let show-ten-frames = ${showTenFrames ? "true" : "false"}
-#let show-ten-frames-for-all = ${showTenFramesForAll ? "true" : "false"}
+#let show-carries = ${showCarries ? 'true' : 'false'}
+#let show-answers = ${showAnswers ? 'true' : 'false'}
+#let show-colors = ${showColors ? 'true' : 'false'}
+#let show-numbers = ${showNumbers ? 'true' : 'false'}
+#let show-ten-frames = ${showTenFrames ? 'true' : 'false'}
+#let show-ten-frames-for-all = ${showTenFramesForAll ? 'true' : 'false'}
 
 ${generatePlaceValueColors()}
 
@@ -103,29 +103,22 @@ ${generateProblemStackFunction(cellSize, 3)}
 #align(center + horizon)[
   #problem-stack(a, b, if show-numbers { 0 } else { none }, show-carries, show-answers, show-colors, show-ten-frames, show-numbers)
 ]
-`;
+`
   } else {
     // Subtraction
-    let minuend: number;
-    let subtrahend: number;
+    let minuend: number
+    let subtrahend: number
 
     if (config.minuend !== undefined && config.subtrahend !== undefined) {
-      minuend = config.minuend;
-      subtrahend = config.subtrahend;
+      minuend = config.minuend
+      subtrahend = config.subtrahend
     } else {
       // Generate a simple 2-digit - 2-digit problem with borrows
-      const digitRange = { min: 2, max: 2 };
-      const problems = generateSubtractionProblems(
-        1,
-        digitRange,
-        0.8,
-        0.5,
-        false,
-        12345,
-      );
-      const problem = problems[0];
-      minuend = problem.minuend;
-      subtrahend = problem.subtrahend;
+      const digitRange = { min: 2, max: 2 }
+      const problems = generateSubtractionProblems(1, digitRange, 0.8, 0.5, false, 12345)
+      const problem = problems[0]
+      minuend = problem.minuend
+      subtrahend = problem.subtrahend
     }
 
     return String.raw`
@@ -133,14 +126,14 @@ ${generateProblemStackFunction(cellSize, 3)}
 #set text(size: ${fontSize}pt, font: "New Computer Modern Math")
 
 #let heavy-stroke = 0.8pt
-#let show-borrows = ${showCarries ? "true" : "false"}
-#let show-answers = ${showAnswers ? "true" : "false"}
-#let show-colors = ${showColors ? "true" : "false"}
-#let show-numbers = ${showNumbers ? "true" : "false"}
-#let show-ten-frames = ${showTenFrames ? "true" : "false"}
-#let show-ten-frames-for-all = ${showTenFramesForAll ? "true" : "false"}
-#let show-borrow-notation = ${showBorrowNotation ? "true" : "false"}
-#let show-borrowing-hints = ${showBorrowingHints ? "true" : "false"}
+#let show-borrows = ${showCarries ? 'true' : 'false'}
+#let show-answers = ${showAnswers ? 'true' : 'false'}
+#let show-colors = ${showColors ? 'true' : 'false'}
+#let show-numbers = ${showNumbers ? 'true' : 'false'}
+#let show-ten-frames = ${showTenFrames ? 'true' : 'false'}
+#let show-ten-frames-for-all = ${showTenFramesForAll ? 'true' : 'false'}
+#let show-borrow-notation = ${showBorrowNotation ? 'true' : 'false'}
+#let show-borrowing-hints = ${showBorrowingHints ? 'true' : 'false'}
 
 ${generatePlaceValueColors()}
 
@@ -154,36 +147,36 @@ ${generateSubtractionProblemStackFunction(cellSize, 3)}
 #align(center + horizon)[
   #subtraction-problem-stack(minuend, subtrahend, if show-numbers { 0 } else { none }, show-borrows, show-answers, show-colors, show-ten-frames, show-numbers, show-borrow-notation, show-borrowing-hints)
 ]
-`;
+`
   }
 }
 
 export async function POST(request: NextRequest) {
   try {
-    const body: ExampleRequest = await request.json();
+    const body: ExampleRequest = await request.json()
 
     // Generate Typst source with all display options
-    const typstSource = generateExampleTypst(body);
+    const typstSource = generateExampleTypst(body)
 
     // Compile to SVG
-    const svg = execSync("typst compile --format svg - -", {
+    const svg = execSync('typst compile --format svg - -', {
       input: typstSource,
-      encoding: "utf8",
+      encoding: 'utf8',
       maxBuffer: 2 * 1024 * 1024,
-    });
+    })
 
-    return NextResponse.json({ svg });
+    return NextResponse.json({ svg })
   } catch (error) {
-    console.error("Error generating example:", error);
+    console.error('Error generating example:', error)
 
-    const errorMessage = error instanceof Error ? error.message : String(error);
+    const errorMessage = error instanceof Error ? error.message : String(error)
 
     return NextResponse.json(
       {
-        error: "Failed to generate example",
+        error: 'Failed to generate example',
         message: errorMessage,
       },
-      { status: 500 },
-    );
+      { status: 500 }
+    )
   }
 }
diff --git a/apps/web/src/app/api/create/worksheets/addition/preview/route.ts b/apps/web/src/app/api/create/worksheets/addition/preview/route.ts
index 871d8450..2363dd1e 100644
--- a/apps/web/src/app/api/create/worksheets/addition/preview/route.ts
+++ b/apps/web/src/app/api/create/worksheets/addition/preview/route.ts
@@ -1,17 +1,17 @@
 // API route for generating addition worksheet previews (SVG)
 
-import { type NextRequest, NextResponse } from "next/server";
-import { generateWorksheetPreview } from "@/app/create/worksheets/addition/generatePreview";
-import type { WorksheetFormState } from "@/app/create/worksheets/addition/types";
+import { type NextRequest, NextResponse } from 'next/server'
+import { generateWorksheetPreview } from '@/app/create/worksheets/addition/generatePreview'
+import type { WorksheetFormState } from '@/app/create/worksheets/addition/types'
 
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic'
 
 export async function POST(request: NextRequest) {
   try {
-    const body: WorksheetFormState = await request.json();
+    const body: WorksheetFormState = await request.json()
 
     // Generate preview using shared logic
-    const result = generateWorksheetPreview(body);
+    const result = generateWorksheetPreview(body)
 
     if (!result.success) {
       return NextResponse.json(
@@ -19,23 +19,23 @@ export async function POST(request: NextRequest) {
           error: result.error,
           details: result.details,
         },
-        { status: 400 },
-      );
+        { status: 400 }
+      )
     }
 
     // Return pages as JSON
-    return NextResponse.json({ pages: result.pages });
+    return NextResponse.json({ pages: result.pages })
   } catch (error) {
-    console.error("Error generating preview:", error);
+    console.error('Error generating preview:', error)
 
-    const errorMessage = error instanceof Error ? error.message : String(error);
+    const errorMessage = error instanceof Error ? error.message : String(error)
 
     return NextResponse.json(
       {
-        error: "Failed to generate preview",
+        error: 'Failed to generate preview',
         message: errorMessage,
       },
-      { status: 500 },
-    );
+      { status: 500 }
+    )
   }
 }
diff --git a/apps/web/src/app/api/create/worksheets/addition/route.ts b/apps/web/src/app/api/create/worksheets/addition/route.ts
index 23685eaf..f802ff14 100644
--- a/apps/web/src/app/api/create/worksheets/addition/route.ts
+++ b/apps/web/src/app/api/create/worksheets/addition/route.ts
@@ -1,54 +1,51 @@
 // API route for generating addition worksheets
 
-import { type NextRequest, NextResponse } from "next/server";
-import { execSync } from "child_process";
-import { validateWorksheetConfig } from "@/app/create/worksheets/addition/validation";
+import { type NextRequest, NextResponse } from 'next/server'
+import { execSync } from 'child_process'
+import { validateWorksheetConfig } from '@/app/create/worksheets/addition/validation'
 import {
   generateProblems,
   generateSubtractionProblems,
   generateMixedProblems,
-} from "@/app/create/worksheets/addition/problemGenerator";
-import { generateTypstSource } from "@/app/create/worksheets/addition/typstGenerator";
-import type {
-  WorksheetFormState,
-  WorksheetProblem,
-} from "@/app/create/worksheets/addition/types";
+} from '@/app/create/worksheets/addition/problemGenerator'
+import { generateTypstSource } from '@/app/create/worksheets/addition/typstGenerator'
+import type { WorksheetFormState, WorksheetProblem } from '@/app/create/worksheets/addition/types'
 
 export async function POST(request: NextRequest) {
   try {
-    const body: WorksheetFormState = await request.json();
+    const body: WorksheetFormState = await request.json()
 
     // Validate configuration
-    const validation = validateWorksheetConfig(body);
+    const validation = validateWorksheetConfig(body)
     if (!validation.isValid || !validation.config) {
       return NextResponse.json(
-        { error: "Invalid configuration", errors: validation.errors },
-        { status: 400 },
-      );
+        { error: 'Invalid configuration', errors: validation.errors },
+        { status: 400 }
+      )
     }
 
-    const config = validation.config;
+    const config = validation.config
 
     // Generate problems based on operator type
-    let problems: WorksheetProblem[];
-    if (config.operator === "addition") {
+    let problems: WorksheetProblem[]
+    if (config.operator === 'addition') {
       problems = generateProblems(
         config.total,
         config.pAnyStart,
         config.pAllStart,
         config.interpolate,
         config.seed,
-        config.digitRange,
-      );
-    } else if (config.operator === "subtraction") {
+        config.digitRange
+      )
+    } else if (config.operator === 'subtraction') {
       problems = generateSubtractionProblems(
         config.total,
         config.digitRange,
         config.pAnyStart,
         config.pAllStart,
         config.interpolate,
-        config.seed,
-      );
+        config.seed
+      )
     } else {
       // mixed
       problems = generateMixedProblems(
@@ -57,65 +54,64 @@ export async function POST(request: NextRequest) {
         config.pAnyStart,
         config.pAllStart,
         config.interpolate,
-        config.seed,
-      );
+        config.seed
+      )
     }
 
     // Generate Typst sources (one per page)
-    const typstSources = generateTypstSource(config, problems);
+    const typstSources = generateTypstSource(config, problems)
 
     // Join pages with pagebreak for PDF
-    const typstSource = typstSources.join("\n\n#pagebreak()\n\n");
+    const typstSource = typstSources.join('\n\n#pagebreak()\n\n')
 
     // Compile with Typst: stdin → stdout
-    let pdfBuffer: Buffer;
+    let pdfBuffer: Buffer
     try {
-      pdfBuffer = execSync("typst compile --format pdf - -", {
+      pdfBuffer = execSync('typst compile --format pdf - -', {
         input: typstSource,
         maxBuffer: 10 * 1024 * 1024, // 10MB limit
-      });
+      })
     } catch (error) {
-      console.error("Typst compilation error:", error);
+      console.error('Typst compilation error:', error)
 
       // Extract the actual Typst error message
       const stderr =
-        error instanceof Error && "stderr" in error
+        error instanceof Error && 'stderr' in error
           ? String((error as any).stderr)
-          : "Unknown compilation error";
+          : 'Unknown compilation error'
 
       return NextResponse.json(
         {
-          error: "Failed to compile worksheet PDF",
+          error: 'Failed to compile worksheet PDF',
           details: stderr,
-          ...(process.env.NODE_ENV === "development" && {
-            typstSource:
-              typstSource.split("\n").slice(0, 20).join("\n") + "\n...",
+          ...(process.env.NODE_ENV === 'development' && {
+            typstSource: typstSource.split('\n').slice(0, 20).join('\n') + '\n...',
           }),
         },
-        { status: 500 },
-      );
+        { status: 500 }
+      )
     }
 
     // Return binary PDF directly
     return new Response(pdfBuffer as unknown as BodyInit, {
       headers: {
-        "Content-Type": "application/pdf",
-        "Content-Disposition": `attachment; filename="addition-worksheet-${Date.now()}.pdf"`,
+        'Content-Type': 'application/pdf',
+        'Content-Disposition': `attachment; filename="addition-worksheet-${Date.now()}.pdf"`,
       },
-    });
+    })
   } catch (error) {
-    console.error("Error generating worksheet:", error);
+    console.error('Error generating worksheet:', error)
 
-    const errorMessage = error instanceof Error ? error.message : String(error);
-    const errorStack = error instanceof Error ? error.stack : undefined;
+    const errorMessage = error instanceof Error ? error.message : String(error)
+    const errorStack = error instanceof Error ? error.stack : undefined
 
     return NextResponse.json(
       {
-        error: "Failed to generate worksheet",
+        error: 'Failed to generate worksheet',
         message: errorMessage,
-        ...(process.env.NODE_ENV === "development" && { stack: errorStack }),
+        ...(process.env.NODE_ENV === 'development' && { stack: errorStack }),
       },
-      { status: 500 },
-    );
+      { status: 500 }
+    )
   }
 }
diff --git a/apps/web/src/app/api/debug/active-players/route.ts b/apps/web/src/app/api/debug/active-players/route.ts
index 937d74f0..04dd3a9b 100644
--- a/apps/web/src/app/api/debug/active-players/route.ts
+++ b/apps/web/src/app/api/debug/active-players/route.ts
@@ -1,11 +1,11 @@
-import { NextResponse } from "next/server";
-import { getViewerId } from "@/lib/viewer";
-import { getActivePlayers } from "@/lib/arcade/player-manager";
-import { db, schema } from "@/db";
-import { eq } from "drizzle-orm";
+import { NextResponse } from 'next/server'
+import { getViewerId } from '@/lib/viewer'
+import { getActivePlayers } from '@/lib/arcade/player-manager'
+import { db, schema } from '@/db'
+import { eq } from 'drizzle-orm'
 
 // Force dynamic rendering - this route uses headers()
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic'
 
 /**
  * GET /api/debug/active-players
@@ -13,27 +13,24 @@ export const dynamic = "force-dynamic";
  */
 export async function GET() {
   try {
-    const viewerId = await getViewerId();
+    const viewerId = await getViewerId()
 
     // Get user record
     const user = await db.query.users.findFirst({
       where: eq(schema.users.guestId, viewerId),
-    });
+    })
 
     if (!user) {
-      return NextResponse.json(
-        { error: "User not found", viewerId },
-        { status: 404 },
-      );
+      return NextResponse.json({ error: 'User not found', viewerId }, { status: 404 })
     }
 
     // Get ALL players for this user
     const allPlayers = await db.query.players.findMany({
       where: eq(schema.players.userId, user.id),
-    });
+    })
 
     // Get active players using the helper
-    const activePlayers = await getActivePlayers(viewerId);
+    const activePlayers = await getActivePlayers(viewerId)
 
     return NextResponse.json({
       viewerId,
@@ -52,12 +49,12 @@ export async function GET() {
       })),
       activeCount: activePlayers.length,
       totalCount: allPlayers.length,
-    });
+    })
   } catch (error) {
-    console.error("Failed to fetch active players:", error);
+    console.error('Failed to fetch active players:', error)
     return NextResponse.json(
-      { error: "Failed to fetch active players", details: String(error) },
-      { status: 500 },
-    );
+      { error: 'Failed to fetch active players', details: String(error) },
+      { status: 500 }
+    )
   }
 }
diff --git a/apps/web/src/app/api/download/[id]/route.ts b/apps/web/src/app/api/download/[id]/route.ts
index 8578b587..98b95e6e 100644
--- a/apps/web/src/app/api/download/[id]/route.ts
+++ b/apps/web/src/app/api/download/[id]/route.ts
@@ -1,49 +1,46 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { assetStore } from "@/lib/asset-store";
+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 { id } = params
 
-    console.log("🔍 Looking for asset:", id);
-    console.log("📦 Available assets:", await assetStore.keys());
+    console.log('🔍 Looking for asset:', id)
+    console.log('📦 Available assets:', await assetStore.keys())
 
     // Get asset from store
-    const asset = await assetStore.get(id);
+    const asset = await assetStore.get(id)
     if (!asset) {
-      console.log("❌ Asset not found in store");
+      console.log('❌ Asset not found in store')
       return NextResponse.json(
         {
-          error: "Asset not found or expired",
+          error: 'Asset not found or expired',
         },
-        { status: 404 },
-      );
+        { status: 404 }
+      )
     }
 
-    console.log("✅ Asset found, serving download");
+    console.log('✅ Asset found, serving download')
 
     // Return file with appropriate headers
     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",
+        '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',
       },
-    });
+    })
   } catch (error) {
-    console.error("❌ Download failed:", error);
+    console.error('❌ Download failed:', error)
     return NextResponse.json(
       {
-        error: "Failed to download file",
+        error: 'Failed to download file',
       },
-      { status: 500 },
-    );
+      { status: 500 }
+    )
   }
 }
diff --git a/apps/web/src/app/api/download/assets/[id]/route.ts b/apps/web/src/app/api/download/assets/[id]/route.ts
index 38c2e7e5..9fc2a8fd 100644
--- a/apps/web/src/app/api/download/assets/[id]/route.ts
+++ b/apps/web/src/app/api/download/assets/[id]/route.ts
@@ -1,37 +1,28 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { assetStore } from "@/lib/asset-store";
+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 { id } = params
 
-    const asset = await assetStore.get(id);
+    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
-    const headers = new Headers();
-    headers.set("Content-Type", asset.mimeType);
-    headers.set(
-      "Content-Disposition",
-      `attachment; filename="${asset.filename}"`,
-    );
-    headers.set("Content-Length", asset.data.length.toString());
-    headers.set("Cache-Control", "no-cache, no-store, must-revalidate");
+    const headers = new Headers()
+    headers.set('Content-Type', asset.mimeType)
+    headers.set('Content-Disposition', `attachment; filename="${asset.filename}"`)
+    headers.set('Content-Length', asset.data.length.toString())
+    headers.set('Cache-Control', 'no-cache, no-store, must-revalidate')
 
     return new NextResponse(new Uint8Array(asset.data), {
       status: 200,
       headers,
-    });
+    })
   } catch (error) {
-    console.error("Asset download error:", error);
-    return NextResponse.json(
-      { error: "Failed to download asset" },
-      { status: 500 },
-    );
+    console.error('Asset download error:', error)
+    return NextResponse.json({ error: 'Failed to download asset' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/generate/route.ts b/apps/web/src/app/api/generate/route.ts
index 5f37eb8b..b79e1f7e 100644
--- a/apps/web/src/app/api/generate/route.ts
+++ b/apps/web/src/app/api/generate/route.ts
@@ -1,50 +1,50 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { writeFileSync, mkdirSync, rmSync } from "fs";
-import { tmpdir } from "os";
-import { join } from "path";
-import { execSync } from "child_process";
-import type { FlashcardConfig } from "@/app/create/flashcards/page";
+import { type NextRequest, NextResponse } from 'next/server'
+import { writeFileSync, mkdirSync, rmSync } from 'fs'
+import { tmpdir } from 'os'
+import { join } from 'path'
+import { execSync } from 'child_process'
+import type { FlashcardConfig } from '@/app/create/flashcards/page'
 import {
   generateFlashcardFront,
   generateFlashcardBack,
-} from "@/utils/flashcards/generateFlashcardSvgs";
+} from '@/utils/flashcards/generateFlashcardSvgs'
 
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic'
 
 /**
  * Parse range string to get all numbers
  */
 function parseRange(range: string, step: number): number[] {
-  const numbers: number[] = [];
+  const numbers: number[] = []
 
-  if (range.includes("-")) {
-    const [start, end] = range.split("-").map((n) => parseInt(n, 10));
+  if (range.includes('-')) {
+    const [start, end] = range.split('-').map((n) => parseInt(n, 10))
     for (let i = start; i <= end; i += step) {
-      numbers.push(i);
+      numbers.push(i)
     }
-  } else if (range.includes(",")) {
-    const parts = range.split(",").map((n) => parseInt(n.trim(), 10));
-    numbers.push(...parts);
+  } else if (range.includes(',')) {
+    const parts = range.split(',').map((n) => parseInt(n.trim(), 10))
+    numbers.push(...parts)
   } else {
-    numbers.push(parseInt(range, 10));
+    numbers.push(parseInt(range, 10))
   }
 
-  return numbers;
+  return numbers
 }
 
 /**
  * Shuffle array with seed for reproducibility
  */
 function shuffleWithSeed<T>(array: T[], seed?: number): T[] {
-  const shuffled = [...array];
-  const rng = seed !== undefined ? seededRandom(seed) : Math.random;
+  const shuffled = [...array]
+  const rng = seed !== undefined ? seededRandom(seed) : Math.random
 
   for (let i = shuffled.length - 1; i > 0; i--) {
-    const j = Math.floor(rng() * (i + 1));
-    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    const j = Math.floor(rng() * (i + 1))
+    ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
   }
 
-  return shuffled;
+  return shuffled
 }
 
 /**
@@ -52,61 +52,58 @@ function shuffleWithSeed<T>(array: T[], seed?: number): T[] {
  */
 function seededRandom(seed: number) {
   return () => {
-    seed = (seed + 0x6d2b79f5) | 0;
-    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
-    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-  };
+    seed = (seed + 0x6d2b79f5) | 0
+    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed)
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
 }
 
 export async function POST(request: NextRequest) {
-  let tempDir: string | null = null;
+  let tempDir: string | null = null
 
   try {
-    const config: FlashcardConfig = await request.json();
+    const config: FlashcardConfig = await request.json()
     const {
-      range = "0-99",
+      range = '0-99',
       step = 1,
       cardsPerPage = 6,
-      paperSize = "us-letter",
-      orientation = "portrait",
+      paperSize = 'us-letter',
+      orientation = 'portrait',
       margins,
-      gutter = "5mm",
+      gutter = '5mm',
       shuffle = false,
       seed,
       showCutMarks = false,
       showRegistration = false,
-      beadShape = "diamond",
-      colorScheme = "place-value",
-      colorPalette = "default",
+      beadShape = 'diamond',
+      colorScheme = 'place-value',
+      colorPalette = 'default',
       hideInactiveBeads = false,
       showEmptyColumns = false,
-      columns = "auto",
+      columns = 'auto',
       scaleFactor = 0.9,
       coloredNumerals = false,
-      format = "pdf",
-    } = config;
+      format = 'pdf',
+    } = config
 
     // Dynamic import to avoid Next.js bundler issues
-    const { renderToStaticMarkup } = await import("react-dom/server");
+    const { renderToStaticMarkup } = await import('react-dom/server')
 
     // Create temp directory for SVG files
-    tempDir = join(tmpdir(), `flashcards-${Date.now()}-${Math.random()}`);
-    mkdirSync(tempDir, { recursive: true });
+    tempDir = join(tmpdir(), `flashcards-${Date.now()}-${Math.random()}`)
+    mkdirSync(tempDir, { recursive: true })
 
     // Get all numbers
-    let numbers = parseRange(range, step);
+    let numbers = parseRange(range, step)
 
     // Apply shuffle if requested
     if (shuffle) {
-      numbers = shuffleWithSeed(numbers, seed);
+      numbers = shuffleWithSeed(numbers, seed)
     }
 
     if (numbers.length === 0) {
-      return NextResponse.json(
-        { error: "No valid numbers in range" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'No valid numbers in range' }, { status: 400 })
     }
 
     // Generate SVG files for each card (front and back)
@@ -116,84 +113,78 @@ export async function POST(request: NextRequest) {
       colorPalette,
       hideInactiveBeads,
       showEmptyColumns,
-      columns: (columns === "auto" ? "auto" : Number(columns)) as
-        | number
-        | "auto",
+      columns: (columns === 'auto' ? 'auto' : Number(columns)) as number | 'auto',
       scaleFactor,
       coloredNumerals,
-    };
+    }
 
     for (let i = 0; i < numbers.length; i++) {
-      const num = numbers[i];
+      const num = numbers[i]
 
       // Generate front (abacus)
-      const frontElement = generateFlashcardFront(num, svgConfig);
-      const frontSvg = renderToStaticMarkup(frontElement);
-      writeFileSync(join(tempDir, `card_${i}_front.svg`), frontSvg);
+      const frontElement = generateFlashcardFront(num, svgConfig)
+      const frontSvg = renderToStaticMarkup(frontElement)
+      writeFileSync(join(tempDir, `card_${i}_front.svg`), frontSvg)
 
       // Generate back (numeral)
-      const backElement = generateFlashcardBack(num, svgConfig);
-      const backSvg = renderToStaticMarkup(backElement);
-      writeFileSync(join(tempDir, `card_${i}_back.svg`), backSvg);
+      const backElement = generateFlashcardBack(num, svgConfig)
+      const backSvg = renderToStaticMarkup(backElement)
+      writeFileSync(join(tempDir, `card_${i}_back.svg`), backSvg)
     }
 
     // Calculate paper dimensions and layout
     const paperDimensions = {
-      "us-letter": { width: 8.5, height: 11 },
+      'us-letter': { width: 8.5, height: 11 },
       a4: { width: 8.27, height: 11.69 },
       a3: { width: 11.69, height: 16.54 },
       a5: { width: 5.83, height: 8.27 },
-    };
+    }
 
-    const paper = paperDimensions[paperSize] || paperDimensions["us-letter"];
+    const paper = paperDimensions[paperSize] || paperDimensions['us-letter']
     const [pageWidth, pageHeight] =
-      orientation === "landscape"
-        ? [paper.height, paper.width]
-        : [paper.width, paper.height];
+      orientation === 'landscape' ? [paper.height, paper.width] : [paper.width, paper.height]
 
     // Calculate grid layout (typically 2 columns × 3 rows for 6 cards)
-    const cols = 2;
-    const rows = Math.ceil(cardsPerPage / cols);
+    const cols = 2
+    const rows = Math.ceil(cardsPerPage / cols)
 
     // Use provided margins or defaults
     const margin = {
-      top: margins?.top || "0.5in",
-      bottom: margins?.bottom || "0.5in",
-      left: margins?.left || "0.5in",
-      right: margins?.right || "0.5in",
-    };
+      top: margins?.top || '0.5in',
+      bottom: margins?.bottom || '0.5in',
+      left: margins?.left || '0.5in',
+      right: margins?.right || '0.5in',
+    }
 
     // Parse gutter (convert from string like "5mm" to inches for calculation)
-    const gutterInches = parseFloat(gutter) / 25.4; // Rough mm to inch conversion
+    const gutterInches = parseFloat(gutter) / 25.4 // Rough mm to inch conversion
 
     // Calculate available space (approximate, Typst will handle exact layout)
-    const marginInches = 0.5; // Simplified for now
-    const availableWidth =
-      pageWidth - 2 * marginInches - gutterInches * (cols - 1);
-    const availableHeight =
-      pageHeight - 2 * marginInches - gutterInches * (rows - 1);
-    const cardWidth = availableWidth / cols;
-    const cardHeight = availableHeight / rows;
+    const marginInches = 0.5 // Simplified for now
+    const availableWidth = pageWidth - 2 * marginInches - gutterInches * (cols - 1)
+    const availableHeight = pageHeight - 2 * marginInches - gutterInches * (rows - 1)
+    const cardWidth = availableWidth / cols
+    const cardHeight = availableHeight / rows
 
     // Generate pages
-    const totalPages = Math.ceil(numbers.length / cardsPerPage);
-    const pages: string[] = [];
+    const totalPages = Math.ceil(numbers.length / cardsPerPage)
+    const pages: string[] = []
 
     for (let pageNum = 0; pageNum < totalPages; pageNum++) {
-      const startIdx = pageNum * cardsPerPage;
-      const endIdx = Math.min(startIdx + cardsPerPage, numbers.length);
-      const pageCards = [];
+      const startIdx = pageNum * cardsPerPage
+      const endIdx = Math.min(startIdx + cardsPerPage, numbers.length)
+      const pageCards = []
 
       for (let i = startIdx; i < endIdx; i++) {
         pageCards.push(
-          `  image("card_${i}_front.svg", width: ${cardWidth}in, height: ${cardHeight}in, fit: "contain")`,
-        );
+          `  image("card_${i}_front.svg", width: ${cardWidth}in, height: ${cardHeight}in, fit: "contain")`
+        )
       }
 
       // Fill remaining slots with empty cells if needed
-      const remaining = cardsPerPage - pageCards.length;
+      const remaining = cardsPerPage - pageCards.length
       for (let i = 0; i < remaining; i++) {
-        pageCards.push(`  []`); // Empty cell
+        pageCards.push(`  []`) // Empty cell
       }
 
       pages.push(`#grid(
@@ -201,8 +192,8 @@ export async function POST(request: NextRequest) {
   rows: ${rows},
   column-gutter: ${gutter},
   row-gutter: ${gutter},
-${pageCards.join(",\n")}
-)`);
+${pageCards.join(',\n')}
+)`)
     }
 
     // Generate Typst document
@@ -210,60 +201,60 @@ ${pageCards.join(",\n")}
 #set page(
   paper: "${paperSize}",
   margin: (x: ${margin.left}, y: ${margin.top}),
-  flipped: ${orientation === "landscape"},
+  flipped: ${orientation === 'landscape'},
 )
 
-${pages.join("\n\n#pagebreak()\n\n")}
-`;
+${pages.join('\n\n#pagebreak()\n\n')}
+`
 
     // Compile with Typst
-    let pdfBuffer: Buffer;
+    let pdfBuffer: Buffer
     try {
-      pdfBuffer = execSync("typst compile --format pdf - -", {
+      pdfBuffer = execSync('typst compile --format pdf - -', {
         input: typstContent,
         cwd: tempDir, // Run in temp dir so relative paths work
         maxBuffer: 100 * 1024 * 1024, // 100MB limit for large sets
-      });
+      })
     } catch (error) {
-      console.error("Typst compilation error:", error);
+      console.error('Typst compilation error:', error)
       return NextResponse.json(
-        { error: "Failed to compile PDF. Is Typst installed?" },
-        { status: 500 },
-      );
+        { error: 'Failed to compile PDF. Is Typst installed?' },
+        { status: 500 }
+      )
     }
 
     // Clean up temp directory
-    rmSync(tempDir, { recursive: true, force: true });
-    tempDir = null;
+    rmSync(tempDir, { recursive: true, force: true })
+    tempDir = null
 
     // Create filename for download
-    const filename = `soroban-flashcards-${range}.pdf`;
+    const filename = `soroban-flashcards-${range}.pdf`
 
     // Return PDF directly as download
     return new NextResponse(new Uint8Array(pdfBuffer), {
       headers: {
-        "Content-Type": "application/pdf",
-        "Content-Disposition": `attachment; filename="${filename}"`,
-        "Content-Length": pdfBuffer.length.toString(),
+        'Content-Type': 'application/pdf',
+        'Content-Disposition': `attachment; filename="${filename}"`,
+        'Content-Length': pdfBuffer.length.toString(),
       },
-    });
+    })
   } catch (error) {
-    console.error("Error generating flashcards:", error);
+    console.error('Error generating flashcards:', error)
 
     // Clean up temp directory if it exists
     if (tempDir) {
       try {
-        rmSync(tempDir, { recursive: true, force: true });
+        rmSync(tempDir, { recursive: true, force: true })
       } catch (cleanupError) {
-        console.error("Failed to clean up temp directory:", cleanupError);
+        console.error('Failed to clean up temp directory:', cleanupError)
       }
     }
 
-    const errorMessage = error instanceof Error ? error.message : String(error);
+    const errorMessage = error instanceof Error ? error.message : String(error)
     return NextResponse.json(
-      { error: "Failed to generate flashcards", message: errorMessage },
-      { status: 500 },
-    );
+      { error: 'Failed to generate flashcards', message: errorMessage },
+      { status: 500 }
+    )
   }
 }
 
@@ -271,24 +262,24 @@ ${pages.join("\n\n#pagebreak()\n\n")}
 export async function GET() {
   try {
     // Check if Typst is available
-    execSync("typst --version", { encoding: "utf8" });
+    execSync('typst --version', { encoding: 'utf8' })
 
     return NextResponse.json({
-      status: "healthy",
-      generator: "typescript-typst",
+      status: 'healthy',
+      generator: 'typescript-typst',
       dependencies: {
         typst: true,
         python: false, // No longer needed!
       },
-    });
+    })
   } catch (error) {
     return NextResponse.json(
       {
-        status: "unhealthy",
-        error: "Typst not available",
-        message: error instanceof Error ? error.message : "Unknown error",
+        status: 'unhealthy',
+        error: 'Typst not available',
+        message: error instanceof Error ? error.message : 'Unknown error',
       },
-      { status: 500 },
-    );
+      { status: 500 }
+    )
   }
 }
diff --git a/apps/web/src/app/api/player-stats/[playerId]/route.ts b/apps/web/src/app/api/player-stats/[playerId]/route.ts
index 1948164d..c20df36e 100644
--- a/apps/web/src/app/api/player-stats/[playerId]/route.ts
+++ b/apps/web/src/app/api/player-stats/[playerId]/route.ts
@@ -1,31 +1,25 @@
-import { eq } from "drizzle-orm";
-import { NextResponse } from "next/server";
-import { db } from "@/db";
-import type { GameStatsBreakdown } from "@/db/schema/player-stats";
-import { playerStats } from "@/db/schema/player-stats";
-import { players } from "@/db/schema/players";
-import type {
-  GetPlayerStatsResponse,
-  PlayerStatsData,
-} from "@/lib/arcade/stats/types";
-import { getViewerId } from "@/lib/viewer";
+import { eq } from 'drizzle-orm'
+import { NextResponse } from 'next/server'
+import { db } from '@/db'
+import type { GameStatsBreakdown } from '@/db/schema/player-stats'
+import { playerStats } from '@/db/schema/player-stats'
+import { players } from '@/db/schema/players'
+import type { GetPlayerStatsResponse, PlayerStatsData } from '@/lib/arcade/stats/types'
+import { getViewerId } from '@/lib/viewer'
 
 /**
  * GET /api/player-stats/[playerId]
  *
  * Fetches stats for a specific player (must be owned by current user).
  */
-export async function GET(
-  _request: Request,
-  { params }: { params: { playerId: string } },
-) {
+export async function GET(_request: Request, { params }: { params: { playerId: string } }) {
   try {
-    const { playerId } = params;
+    const { playerId } = params
 
     // 1. Authenticate user
-    const viewerId = await getViewerId();
+    const viewerId = await getViewerId()
     if (!viewerId) {
-      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }
 
     // 2. Verify player belongs to user
@@ -34,17 +28,17 @@ export async function GET(
       .from(players)
       .where(eq(players.id, playerId))
       .limit(1)
-      .then((rows) => rows[0]);
+      .then((rows) => rows[0])
 
     if (!player) {
-      return NextResponse.json({ error: "Player not found" }, { status: 404 });
+      return NextResponse.json({ error: 'Player not found' }, { status: 404 })
     }
 
     if (player.userId !== viewerId) {
       return NextResponse.json(
-        { error: "Forbidden: player belongs to another user" },
-        { status: 403 },
-      );
+        { error: 'Forbidden: player belongs to another user' },
+        { status: 403 }
+      )
     }
 
     // 3. Fetch player stats
@@ -53,36 +47,34 @@ export async function GET(
       .from(playerStats)
       .where(eq(playerStats.playerId, playerId))
       .limit(1)
-      .then((rows) => rows[0]);
+      .then((rows) => rows[0])
 
     const playerStatsData: PlayerStatsData = stats
       ? convertToPlayerStatsData(stats)
-      : createDefaultPlayerStats(playerId);
+      : createDefaultPlayerStats(playerId)
 
     // 4. Return response
     const response: GetPlayerStatsResponse = {
       stats: playerStatsData,
-    };
+    }
 
-    return NextResponse.json(response);
+    return NextResponse.json(response)
   } catch (error) {
-    console.error("❌ Failed to fetch player stats:", error);
+    console.error('❌ Failed to fetch player stats:', error)
     return NextResponse.json(
       {
-        error: "Failed to fetch player stats",
+        error: 'Failed to fetch player stats',
         details: error instanceof Error ? error.message : String(error),
       },
-      { status: 500 },
-    );
+      { status: 500 }
+    )
   }
 }
 
 /**
  * Convert DB record to PlayerStatsData
  */
-function convertToPlayerStatsData(
-  dbStats: typeof playerStats.$inferSelect,
-): PlayerStatsData {
+function convertToPlayerStatsData(dbStats: typeof playerStats.$inferSelect): PlayerStatsData {
   return {
     playerId: dbStats.playerId,
     gamesPlayed: dbStats.gamesPlayed,
@@ -95,14 +87,14 @@ function convertToPlayerStatsData(
     lastPlayedAt: dbStats.lastPlayedAt,
     createdAt: dbStats.createdAt,
     updatedAt: dbStats.updatedAt,
-  };
+  }
 }
 
 /**
  * Create default player stats for new player
  */
 function createDefaultPlayerStats(playerId: string): PlayerStatsData {
-  const now = new Date();
+  const now = new Date()
   return {
     playerId,
     gamesPlayed: 0,
@@ -115,5 +107,5 @@ function createDefaultPlayerStats(playerId: string): PlayerStatsData {
     lastPlayedAt: null,
     createdAt: now,
     updatedAt: now,
-  };
+  }
 }
diff --git a/apps/web/src/app/api/player-stats/record-game/route.ts b/apps/web/src/app/api/player-stats/record-game/route.ts
index 1bb4f297..c51dbf2b 100644
--- a/apps/web/src/app/api/player-stats/record-game/route.ts
+++ b/apps/web/src/app/api/player-stats/record-game/route.ts
@@ -1,8 +1,8 @@
-import { eq } from "drizzle-orm";
-import { NextResponse } from "next/server";
-import { db } from "@/db";
-import type { GameStatsBreakdown } from "@/db/schema/player-stats";
-import { playerStats } from "@/db/schema/player-stats";
+import { eq } from 'drizzle-orm'
+import { NextResponse } from 'next/server'
+import { db } from '@/db'
+import type { GameStatsBreakdown } from '@/db/schema/player-stats'
+import { playerStats } from '@/db/schema/player-stats'
 import type {
   GameResult,
   PlayerGameResult,
@@ -10,8 +10,8 @@ import type {
   RecordGameRequest,
   RecordGameResponse,
   StatsUpdate,
-} from "@/lib/arcade/stats/types";
-import { getViewerId } from "@/lib/viewer";
+} from '@/lib/arcade/stats/types'
+import { getViewerId } from '@/lib/viewer'
 
 /**
  * POST /api/player-stats/record-game
@@ -22,57 +22,50 @@ import { getViewerId } from "@/lib/viewer";
 export async function POST(request: Request) {
   try {
     // 1. Authenticate user
-    const viewerId = await getViewerId();
+    const viewerId = await getViewerId()
     if (!viewerId) {
-      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }
 
     // 2. Parse and validate request
-    const body: RecordGameRequest = await request.json();
-    const { gameResult } = body;
+    const body: RecordGameRequest = await request.json()
+    const { gameResult } = body
 
-    if (
-      !gameResult ||
-      !gameResult.playerResults ||
-      gameResult.playerResults.length === 0
-    ) {
+    if (!gameResult || !gameResult.playerResults || gameResult.playerResults.length === 0) {
       return NextResponse.json(
-        { error: "Invalid game result: playerResults required" },
-        { status: 400 },
-      );
+        { error: 'Invalid game result: playerResults required' },
+        { status: 400 }
+      )
     }
 
     if (!gameResult.gameType) {
-      return NextResponse.json(
-        { error: "Invalid game result: gameType required" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Invalid game result: gameType required' }, { status: 400 })
     }
 
     // 3. Process each player's result
-    const updates: StatsUpdate[] = [];
+    const updates: StatsUpdate[] = []
 
     for (const playerResult of gameResult.playerResults) {
-      const update = await recordPlayerResult(gameResult, playerResult);
-      updates.push(update);
+      const update = await recordPlayerResult(gameResult, playerResult)
+      updates.push(update)
     }
 
     // 4. Return success response
     const response: RecordGameResponse = {
       success: true,
       updates,
-    };
+    }
 
-    return NextResponse.json(response);
+    return NextResponse.json(response)
   } catch (error) {
-    console.error("❌ Failed to record game result:", error);
+    console.error('❌ Failed to record game result:', error)
     return NextResponse.json(
       {
-        error: "Failed to record game result",
+        error: 'Failed to record game result',
         details: error instanceof Error ? error.message : String(error),
       },
-      { status: 500 },
-    );
+      { status: 500 }
+    )
   }
 }
 
@@ -81,9 +74,9 @@ export async function POST(request: Request) {
  */
 async function recordPlayerResult(
   gameResult: GameResult,
-  playerResult: PlayerGameResult,
+  playerResult: PlayerGameResult
 ): Promise<StatsUpdate> {
-  const { playerId } = playerResult;
+  const { playerId } = playerResult
 
   // 1. Fetch or create player stats
   const existingStats = await db
@@ -91,52 +84,49 @@ async function recordPlayerResult(
     .from(playerStats)
     .where(eq(playerStats.playerId, playerId))
     .limit(1)
-    .then((rows) => rows[0]);
+    .then((rows) => rows[0])
 
   const previousStats: PlayerStatsData = existingStats
     ? convertToPlayerStatsData(existingStats)
-    : createDefaultPlayerStats(playerId);
+    : createDefaultPlayerStats(playerId)
 
   // 2. Calculate new stats
-  const newStats: PlayerStatsData = { ...previousStats };
+  const newStats: PlayerStatsData = { ...previousStats }
 
   // Always increment games played
-  newStats.gamesPlayed++;
+  newStats.gamesPlayed++
 
   // Handle wins/losses (cooperative vs competitive)
   if (gameResult.metadata?.isTeamVictory !== undefined) {
     // Cooperative game: all players share outcome
     if (playerResult.won) {
-      newStats.totalWins++;
+      newStats.totalWins++
     } else {
-      newStats.totalLosses++;
+      newStats.totalLosses++
     }
   } else {
     // Competitive/Solo: individual outcome
     if (playerResult.won) {
-      newStats.totalWins++;
+      newStats.totalWins++
     } else {
-      newStats.totalLosses++;
+      newStats.totalLosses++
     }
   }
 
   // Update best time (if provided and improved)
   if (playerResult.completionTime) {
     if (!newStats.bestTime || playerResult.completionTime < newStats.bestTime) {
-      newStats.bestTime = playerResult.completionTime;
+      newStats.bestTime = playerResult.completionTime
     }
   }
 
   // Update highest accuracy (if provided and improved)
-  if (
-    playerResult.accuracy !== undefined &&
-    playerResult.accuracy > newStats.highestAccuracy
-  ) {
-    newStats.highestAccuracy = playerResult.accuracy;
+  if (playerResult.accuracy !== undefined && playerResult.accuracy > newStats.highestAccuracy) {
+    newStats.highestAccuracy = playerResult.accuracy
   }
 
   // Update per-game stats (JSON)
-  const gameType = gameResult.gameType;
+  const gameType = gameResult.gameType
   const currentGameStats: GameStatsBreakdown = newStats.gameStats[gameType] || {
     gamesPlayed: 0,
     wins: 0,
@@ -145,22 +135,19 @@ async function recordPlayerResult(
     highestAccuracy: 0,
     averageScore: 0,
     lastPlayed: 0,
-  };
+  }
 
-  currentGameStats.gamesPlayed++;
+  currentGameStats.gamesPlayed++
   if (playerResult.won) {
-    currentGameStats.wins++;
+    currentGameStats.wins++
   } else {
-    currentGameStats.losses++;
+    currentGameStats.losses++
   }
 
   // Update game-specific best time
   if (playerResult.completionTime) {
-    if (
-      !currentGameStats.bestTime ||
-      playerResult.completionTime < currentGameStats.bestTime
-    ) {
-      currentGameStats.bestTime = playerResult.completionTime;
+    if (!currentGameStats.bestTime || playerResult.completionTime < currentGameStats.bestTime) {
+      currentGameStats.bestTime = playerResult.completionTime
     }
   }
 
@@ -169,27 +156,26 @@ async function recordPlayerResult(
     playerResult.accuracy !== undefined &&
     playerResult.accuracy > currentGameStats.highestAccuracy
   ) {
-    currentGameStats.highestAccuracy = playerResult.accuracy;
+    currentGameStats.highestAccuracy = playerResult.accuracy
   }
 
   // Update average score
   if (playerResult.score !== undefined) {
-    const previousTotal =
-      currentGameStats.averageScore * (currentGameStats.gamesPlayed - 1);
+    const previousTotal = currentGameStats.averageScore * (currentGameStats.gamesPlayed - 1)
     currentGameStats.averageScore =
-      (previousTotal + playerResult.score) / currentGameStats.gamesPlayed;
+      (previousTotal + playerResult.score) / currentGameStats.gamesPlayed
   }
 
-  currentGameStats.lastPlayed = gameResult.completedAt;
+  currentGameStats.lastPlayed = gameResult.completedAt
 
-  newStats.gameStats[gameType] = currentGameStats;
+  newStats.gameStats[gameType] = currentGameStats
 
   // Update favorite game type (most played)
-  newStats.favoriteGameType = getMostPlayedGame(newStats.gameStats);
+  newStats.favoriteGameType = getMostPlayedGame(newStats.gameStats)
 
   // Update timestamps
-  newStats.lastPlayedAt = new Date(gameResult.completedAt);
-  newStats.updatedAt = new Date();
+  newStats.lastPlayedAt = new Date(gameResult.completedAt)
+  newStats.updatedAt = new Date()
 
   // 3. Save to database
   if (existingStats) {
@@ -207,7 +193,7 @@ async function recordPlayerResult(
         lastPlayedAt: newStats.lastPlayedAt,
         updatedAt: newStats.updatedAt,
       })
-      .where(eq(playerStats.playerId, playerId));
+      .where(eq(playerStats.playerId, playerId))
   } else {
     // Insert new record
     await db.insert(playerStats).values({
@@ -222,7 +208,7 @@ async function recordPlayerResult(
       lastPlayedAt: newStats.lastPlayedAt,
       createdAt: newStats.createdAt,
       updatedAt: newStats.updatedAt,
-    });
+    })
   }
 
   // 4. Return update summary
@@ -235,15 +221,13 @@ async function recordPlayerResult(
       wins: newStats.totalWins - previousStats.totalWins,
       losses: newStats.totalLosses - previousStats.totalLosses,
     },
-  };
+  }
 }
 
 /**
  * Convert DB record to PlayerStatsData
  */
-function convertToPlayerStatsData(
-  dbStats: typeof playerStats.$inferSelect,
-): PlayerStatsData {
+function convertToPlayerStatsData(dbStats: typeof playerStats.$inferSelect): PlayerStatsData {
   return {
     playerId: dbStats.playerId,
     gamesPlayed: dbStats.gamesPlayed,
@@ -256,14 +240,14 @@ function convertToPlayerStatsData(
     lastPlayedAt: dbStats.lastPlayedAt,
     createdAt: dbStats.createdAt,
     updatedAt: dbStats.updatedAt,
-  };
+  }
 }
 
 /**
  * Create default player stats for new player
  */
 function createDefaultPlayerStats(playerId: string): PlayerStatsData {
-  const now = new Date();
+  const now = new Date()
   return {
     playerId,
     gamesPlayed: 0,
@@ -276,22 +260,18 @@ function createDefaultPlayerStats(playerId: string): PlayerStatsData {
     lastPlayedAt: null,
     createdAt: now,
     updatedAt: now,
-  };
+  }
 }
 
 /**
  * Determine most-played game from game stats
  */
-function getMostPlayedGame(
-  gameStats: Record<string, GameStatsBreakdown>,
-): string | null {
-  const games = Object.entries(gameStats);
-  if (games.length === 0) return null;
+function getMostPlayedGame(gameStats: Record<string, GameStatsBreakdown>): string | null {
+  const games = Object.entries(gameStats)
+  if (games.length === 0) return null
 
   return games.reduce((mostPlayed, [gameType, stats]) => {
-    const mostPlayedStats = gameStats[mostPlayed];
-    return stats.gamesPlayed > (mostPlayedStats?.gamesPlayed || 0)
-      ? gameType
-      : mostPlayed;
-  }, games[0][0]);
+    const mostPlayedStats = gameStats[mostPlayed]
+    return stats.gamesPlayed > (mostPlayedStats?.gamesPlayed || 0) ? gameType : mostPlayed
+  }, games[0][0])
 }
diff --git a/apps/web/src/app/api/player-stats/route.ts b/apps/web/src/app/api/player-stats/route.ts
index 31d1018f..4008e583 100644
--- a/apps/web/src/app/api/player-stats/route.ts
+++ b/apps/web/src/app/api/player-stats/route.ts
@@ -1,17 +1,14 @@
-import { eq } from "drizzle-orm";
-import { NextResponse } from "next/server";
-import { db } from "@/db";
-import type { GameStatsBreakdown } from "@/db/schema/player-stats";
-import { playerStats } from "@/db/schema/player-stats";
-import { players } from "@/db/schema/players";
-import type {
-  GetAllPlayerStatsResponse,
-  PlayerStatsData,
-} from "@/lib/arcade/stats/types";
-import { getViewerId } from "@/lib/viewer";
+import { eq } from 'drizzle-orm'
+import { NextResponse } from 'next/server'
+import { db } from '@/db'
+import type { GameStatsBreakdown } from '@/db/schema/player-stats'
+import { playerStats } from '@/db/schema/player-stats'
+import { players } from '@/db/schema/players'
+import type { GetAllPlayerStatsResponse, PlayerStatsData } from '@/lib/arcade/stats/types'
+import { getViewerId } from '@/lib/viewer'
 
 // Force dynamic rendering - this route uses headers()
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic'
 
 /**
  * GET /api/player-stats
@@ -21,21 +18,18 @@ export const dynamic = "force-dynamic";
 export async function GET() {
   try {
     // 1. Authenticate user
-    const viewerId = await getViewerId();
+    const viewerId = await getViewerId()
     if (!viewerId) {
-      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }
 
     // 2. Fetch all user's players
-    const userPlayers = await db
-      .select()
-      .from(players)
-      .where(eq(players.userId, viewerId));
+    const userPlayers = await db.select().from(players).where(eq(players.userId, viewerId))
 
-    const playerIds = userPlayers.map((p) => p.id);
+    const playerIds = userPlayers.map((p) => p.id)
 
     // 3. Fetch stats for all players
-    const allStats: PlayerStatsData[] = [];
+    const allStats: PlayerStatsData[] = []
 
     for (const playerId of playerIds) {
       const stats = await db
@@ -43,40 +37,38 @@ export async function GET() {
         .from(playerStats)
         .where(eq(playerStats.playerId, playerId))
         .limit(1)
-        .then((rows) => rows[0]);
+        .then((rows) => rows[0])
 
       if (stats) {
-        allStats.push(convertToPlayerStatsData(stats));
+        allStats.push(convertToPlayerStatsData(stats))
       } else {
         // Player exists but has no stats yet
-        allStats.push(createDefaultPlayerStats(playerId));
+        allStats.push(createDefaultPlayerStats(playerId))
       }
     }
 
     // 4. Return response
     const response: GetAllPlayerStatsResponse = {
       playerStats: allStats,
-    };
+    }
 
-    return NextResponse.json(response);
+    return NextResponse.json(response)
   } catch (error) {
-    console.error("❌ Failed to fetch player stats:", error);
+    console.error('❌ Failed to fetch player stats:', error)
     return NextResponse.json(
       {
-        error: "Failed to fetch player stats",
+        error: 'Failed to fetch player stats',
         details: error instanceof Error ? error.message : String(error),
       },
-      { status: 500 },
-    );
+      { status: 500 }
+    )
   }
 }
 
 /**
  * Convert DB record to PlayerStatsData
  */
-function convertToPlayerStatsData(
-  dbStats: typeof playerStats.$inferSelect,
-): PlayerStatsData {
+function convertToPlayerStatsData(dbStats: typeof playerStats.$inferSelect): PlayerStatsData {
   return {
     playerId: dbStats.playerId,
     gamesPlayed: dbStats.gamesPlayed,
@@ -89,14 +81,14 @@ function convertToPlayerStatsData(
     lastPlayedAt: dbStats.lastPlayedAt,
     createdAt: dbStats.createdAt,
     updatedAt: dbStats.updatedAt,
-  };
+  }
 }
 
 /**
  * Create default player stats for new player
  */
 function createDefaultPlayerStats(playerId: string): PlayerStatsData {
-  const now = new Date();
+  const now = new Date()
   return {
     playerId,
     gamesPlayed: 0,
@@ -109,5 +101,5 @@ function createDefaultPlayerStats(playerId: string): PlayerStatsData {
     lastPlayedAt: null,
     createdAt: now,
     updatedAt: now,
-  };
+  }
 }
diff --git a/apps/web/src/app/api/players/[id]/route.ts b/apps/web/src/app/api/players/[id]/route.ts
index 1df05ca7..475abd19 100644
--- a/apps/web/src/app/api/players/[id]/route.ts
+++ b/apps/web/src/app/api/players/[id]/route.ts
@@ -1,27 +1,24 @@
-import { and, eq } from "drizzle-orm";
-import { type NextRequest, NextResponse } from "next/server";
-import { db, schema } from "@/db";
-import { getViewerId } from "@/lib/viewer";
+import { and, eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { db, schema } from '@/db'
+import { getViewerId } from '@/lib/viewer'
 
 /**
  * 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();
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
     // Get user record (must exist if player exists)
     const user = await db.query.users.findFirst({
       where: eq(schema.users.guestId, viewerId),
-    });
+    })
 
     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
@@ -29,17 +26,17 @@ export async function PATCH(
     if (body.isActive !== undefined) {
       const activeSession = await db.query.arcadeSessions.findFirst({
         where: eq(schema.arcadeSessions.userId, viewerId),
-      });
+      })
 
       if (activeSession) {
         return NextResponse.json(
           {
-            error: "Cannot modify active players during an active game session",
+            error: 'Cannot modify active players during an active game session',
             activeGame: activeSession.currentGame,
             gameUrl: activeSession.gameUrl,
           },
-          { status: 403 },
-        );
+          { status: 403 }
+        )
       }
     }
 
@@ -54,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),
-        ),
-      )
-      .returning();
+      .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 });
+    return NextResponse.json({ player: updatedPlayer })
   } catch (error) {
-    console.error("Failed to update player:", error);
-    return NextResponse.json(
-      { error: "Failed to update player" },
-      { status: 500 },
-    );
+    console.error('Failed to update player:', error)
+    return NextResponse.json({ error: 'Failed to update player' }, { status: 500 })
   }
 }
 
@@ -83,46 +69,32 @@ 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();
+    const viewerId = await getViewerId()
 
     // Get user record (must exist if player exists)
     const user = await db.query.users.findFirst({
       where: eq(schema.users.guestId, viewerId),
-    });
+    })
 
     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),
-        ),
-      )
-      .returning();
+      .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 });
+    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 },
-    );
+    console.error('Failed to delete player:', error)
+    return NextResponse.json({ error: 'Failed to delete player' }, { status: 500 })
   }
 }
diff --git 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
index 3735735f..16e94fe0 100644
--- 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 { eq } from "drizzle-orm";
-import { NextRequest } from "next/server";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { db, schema } from "../../../../db";
-import { PATCH } from "../[id]/route";
+import { eq } from 'drizzle-orm'
+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
@@ -15,336 +15,309 @@ import { PATCH } from "../[id]/route";
  * correctly prevents isActive changes when user has an active arcade session.
  */
 
-describe("PATCH /api/players/[id] - Arcade Session Validation", () => {
-  let testUserId: string;
-  let testGuestId: string;
-  let testPlayerId: string;
+describe('PATCH /api/players/[id] - Arcade Session Validation', () => {
+  let testUserId: string
+  let testGuestId: string
+  let testPlayerId: string
 
   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();
-    testUserId = user.id;
+    testGuestId = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
+    const [user] = await db.insert(schema.users).values({ guestId: testGuestId }).returning()
+    testUserId = user.id
 
     // Create a test player
     const [player] = await db
       .insert(schema.players)
       .values({
         userId: testUserId,
-        name: "Test Player",
-        emoji: "😀",
-        color: "#3b82f6",
+        name: 'Test Player',
+        emoji: '😀',
+        color: '#3b82f6',
         isActive: false,
       })
-      .returning();
-    testPlayerId = player.id;
-  });
+      .returning()
+    testPlayerId = player.id
+  })
 
   afterEach(async () => {
     // Clean up: delete test arcade session (if exists)
-    await db
-      .delete(schema.arcadeSessions)
-      .where(eq(schema.arcadeSessions.userId, testGuestId));
+    await db.delete(schema.arcadeSessions).where(eq(schema.arcadeSessions.userId, testGuestId))
     // Clean up: delete test user (cascade deletes players)
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId));
-  });
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId))
+  })
 
-  it("should return 403 when trying to change isActive with active arcade session", async () => {
+  it('should return 403 when trying to change isActive with active arcade session', async () => {
     // Create an arcade room first
     const [room] = await db
       .insert(schema.arcadeRooms)
       .values({
-        code: "TEST01",
+        code: 'TEST01',
         createdBy: testGuestId,
-        creatorName: "Test User",
-        gameName: "matching",
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: JSON.stringify({
           difficulty: 6,
-          gameType: "abacus-numeral",
+          gameType: 'abacus-numeral',
           turnTimer: 30,
         }),
       })
-      .returning();
+      .returning()
 
     // Create an active arcade session
-    const now = new Date();
+    const now = new Date()
     await db.insert(schema.arcadeSessions).values({
       roomId: room.id,
       userId: testGuestId,
-      currentGame: "matching",
-      gameUrl: "/arcade/matching",
+      currentGame: 'matching',
+      gameUrl: '/arcade/matching',
       gameState: JSON.stringify({}),
       activePlayers: JSON.stringify([testPlayerId]),
       startedAt: now,
       lastActivityAt: now,
       expiresAt: new Date(now.getTime() + 3600000), // 1 hour from now
       version: 1,
-    });
+    })
 
     // 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 } });
-    const data = await response.json();
+    const response = await PATCH(mockRequest, { params: { id: testPlayerId } })
+    const data = await response.json()
 
     // Should be rejected with 403
-    expect(response.status).toBe(403);
-    expect(data.error).toContain(
-      "Cannot modify active players during an active game session",
-    );
-    expect(data.activeGame).toBe("matching");
-    expect(data.gameUrl).toBe("/arcade/matching");
+    expect(response.status).toBe(403)
+    expect(data.error).toContain('Cannot modify active players during an active game session')
+    expect(data.activeGame).toBe('matching')
+    expect(data.gameUrl).toBe('/arcade/matching')
 
     // Verify player isActive was NOT changed
     const player = await db.query.players.findFirst({
       where: eq(schema.players.id, testPlayerId),
-    });
-    expect(player?.isActive).toBe(false); // Still false
-  });
+    })
+    expect(player?.isActive).toBe(false) // Still false
+  })
 
-  it("should allow isActive change when no active arcade session", async () => {
+  it('should allow isActive change when no active arcade session', async () => {
     // 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();
+    const response = await PATCH(mockRequest, { params: { id: testPlayerId } })
+    const data = await response.json()
 
     // Should succeed
-    expect(response.status).toBe(200);
-    expect(data.player.isActive).toBe(true);
+    expect(response.status).toBe(200)
+    expect(data.player.isActive).toBe(true)
 
     // Verify player isActive was changed
     const player = await db.query.players.findFirst({
       where: eq(schema.players.id, testPlayerId),
-    });
-    expect(player?.isActive).toBe(true);
-  });
+    })
+    expect(player?.isActive).toBe(true)
+  })
 
-  it("should allow non-isActive changes even with active arcade session", async () => {
+  it('should allow non-isActive changes even with active arcade session', async () => {
     // Create an arcade room first
     const [room] = await db
       .insert(schema.arcadeRooms)
       .values({
-        code: "TEST02",
+        code: 'TEST02',
         createdBy: testGuestId,
-        creatorName: "Test User",
-        gameName: "matching",
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: JSON.stringify({
           difficulty: 6,
-          gameType: "abacus-numeral",
+          gameType: 'abacus-numeral',
           turnTimer: 30,
         }),
       })
-      .returning();
+      .returning()
 
     // Create an active arcade session
-    const now = new Date();
+    const now = new Date()
     await db.insert(schema.arcadeSessions).values({
       roomId: room.id,
       userId: testGuestId,
-      currentGame: "matching",
-      gameUrl: "/arcade/matching",
+      currentGame: 'matching',
+      gameUrl: '/arcade/matching',
       gameState: JSON.stringify({}),
       activePlayers: JSON.stringify([testPlayerId]),
       startedAt: now,
       lastActivityAt: now,
       expiresAt: new Date(now.getTime() + 3600000), // 1 hour from now
       version: 1,
-    });
+    })
 
     // 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();
+    const response = await PATCH(mockRequest, { params: { id: testPlayerId } })
+    const data = await response.json()
 
     // Should succeed
-    expect(response.status).toBe(200);
-    expect(data.player.name).toBe("Updated Name");
-    expect(data.player.emoji).toBe("🎉");
-    expect(data.player.color).toBe("#ff0000");
+    expect(response.status).toBe(200)
+    expect(data.player.name).toBe('Updated Name')
+    expect(data.player.emoji).toBe('🎉')
+    expect(data.player.color).toBe('#ff0000')
 
     // Verify changes were applied
     const player = await db.query.players.findFirst({
       where: eq(schema.players.id, testPlayerId),
-    });
-    expect(player?.name).toBe("Updated Name");
-    expect(player?.emoji).toBe("🎉");
-    expect(player?.color).toBe("#ff0000");
-  });
+    })
+    expect(player?.name).toBe('Updated Name')
+    expect(player?.emoji).toBe('🎉')
+    expect(player?.color).toBe('#ff0000')
+  })
 
-  it("should allow isActive change after arcade session ends", async () => {
+  it('should allow isActive change after arcade session ends', async () => {
     // Create an arcade room first
     const [room] = await db
       .insert(schema.arcadeRooms)
       .values({
-        code: "TEST03",
+        code: 'TEST03',
         createdBy: testGuestId,
-        creatorName: "Test User",
-        gameName: "matching",
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: JSON.stringify({
           difficulty: 6,
-          gameType: "abacus-numeral",
+          gameType: 'abacus-numeral',
           turnTimer: 30,
         }),
       })
-      .returning();
+      .returning()
 
     // Create an active arcade session
-    const now = new Date();
+    const now = new Date()
     await db.insert(schema.arcadeSessions).values({
       roomId: room.id,
       userId: testGuestId,
-      currentGame: "matching",
-      gameUrl: "/arcade/matching",
+      currentGame: 'matching',
+      gameUrl: '/arcade/matching',
       gameState: JSON.stringify({}),
       activePlayers: JSON.stringify([testPlayerId]),
       startedAt: now,
       lastActivityAt: now,
       expiresAt: new Date(now.getTime() + 3600000), // 1 hour from now
       version: 1,
-    });
+    })
 
     // End the session
-    await db
-      .delete(schema.arcadeSessions)
-      .where(eq(schema.arcadeSessions.roomId, room.id));
+    await db.delete(schema.arcadeSessions).where(eq(schema.arcadeSessions.roomId, room.id))
 
     // 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();
+    const response = await PATCH(mockRequest, { params: { id: testPlayerId } })
+    const data = await response.json()
 
     // Should succeed
-    expect(response.status).toBe(200);
-    expect(data.player.isActive).toBe(true);
-  });
+    expect(response.status).toBe(200)
+    expect(data.player.isActive).toBe(true)
+  })
 
-  it("should handle multiple players with different isActive states", async () => {
+  it('should handle multiple players with different isActive states', async () => {
     // Create additional players
     const [player2] = await db
       .insert(schema.players)
       .values({
         userId: testUserId,
-        name: "Player 2",
-        emoji: "😎",
-        color: "#8b5cf6",
+        name: 'Player 2',
+        emoji: '😎',
+        color: '#8b5cf6',
         isActive: true,
       })
-      .returning();
+      .returning()
 
     // Create an arcade room first
     const [room] = await db
       .insert(schema.arcadeRooms)
       .values({
-        code: "TEST04",
+        code: 'TEST04',
         createdBy: testGuestId,
-        creatorName: "Test User",
-        gameName: "matching",
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: JSON.stringify({
           difficulty: 6,
-          gameType: "abacus-numeral",
+          gameType: 'abacus-numeral',
           turnTimer: 30,
         }),
       })
-      .returning();
+      .returning()
 
     // Create arcade session
-    const now2 = new Date();
+    const now2 = new Date()
     await db.insert(schema.arcadeSessions).values({
       roomId: room.id,
       userId: testGuestId,
-      currentGame: "matching",
-      gameUrl: "/arcade/matching",
+      currentGame: 'matching',
+      gameUrl: '/arcade/matching',
       gameState: JSON.stringify({}),
       activePlayers: JSON.stringify([testPlayerId, player2.id]),
       startedAt: now2,
       lastActivityAt: now2,
       expiresAt: new Date(now2.getTime() + 3600000), // 1 hour from now
       version: 1,
-    });
+    })
 
     // 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);
+    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);
-  });
-});
+    const response2 = await PATCH(request2, { params: { id: player2.id } })
+    expect(response2.status).toBe(403)
+  })
+})
diff --git a/apps/web/src/app/api/players/route.ts b/apps/web/src/app/api/players/route.ts
index ffdb777b..6a3aa98b 100644
--- a/apps/web/src/app/api/players/route.ts
+++ b/apps/web/src/app/api/players/route.ts
@@ -1,7 +1,7 @@
-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'
+import { type NextRequest, NextResponse } from 'next/server'
+import { db, schema } from '@/db'
+import { getViewerId } from '@/lib/viewer'
 
 /**
  * GET /api/players
@@ -9,24 +9,21 @@ import { getViewerId } from "@/lib/viewer";
  */
 export async function GET() {
   try {
-    const viewerId = await getViewerId();
+    const viewerId = await getViewerId()
 
     // Get or create user record
-    const user = await getOrCreateUser(viewerId);
+    const user = await getOrCreateUser(viewerId)
 
     // Get all players for this user
     const players = await db.query.players.findMany({
       where: eq(schema.players.userId, user.id),
       orderBy: (players, { desc }) => [desc(players.createdAt)],
-    });
+    })
 
-    return NextResponse.json({ players });
+    return NextResponse.json({ players })
   } catch (error) {
-    console.error("Failed to fetch players:", error);
-    return NextResponse.json(
-      { error: "Failed to fetch players" },
-      { status: 500 },
-    );
+    console.error('Failed to fetch players:', error)
+    return NextResponse.json({ error: 'Failed to fetch players' }, { status: 500 })
   }
 }
 
@@ -36,19 +33,19 @@ export async function GET() {
  */
 export async function POST(req: NextRequest) {
   try {
-    const viewerId = await getViewerId();
-    const body = await req.json();
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
     // Validate required fields
     if (!body.name || !body.emoji || !body.color) {
       return NextResponse.json(
-        { error: "Missing required fields: name, emoji, color" },
-        { status: 400 },
-      );
+        { error: 'Missing required fields: name, emoji, color' },
+        { status: 400 }
+      )
     }
 
     // Get or create user record
-    const user = await getOrCreateUser(viewerId);
+    const user = await getOrCreateUser(viewerId)
 
     // Create player
     const [player] = await db
@@ -60,15 +57,12 @@ export async function POST(req: NextRequest) {
         color: body.color,
         isActive: body.isActive ?? false,
       })
-      .returning();
+      .returning()
 
-    return NextResponse.json({ player }, { status: 201 });
+    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 },
-    );
+    console.error('Failed to create player:', error)
+    return NextResponse.json({ error: 'Failed to create player' }, { status: 500 })
   }
 }
 
@@ -79,7 +73,7 @@ async function getOrCreateUser(viewerId: string) {
   // Try to find existing user by guest ID
   let user = await db.query.users.findFirst({
     where: eq(schema.users.guestId, viewerId),
-  });
+  })
 
   // If no user exists, create one
   if (!user) {
@@ -88,10 +82,10 @@ async function getOrCreateUser(viewerId: string) {
       .values({
         guestId: viewerId,
       })
-      .returning();
+      .returning()
 
-    user = newUser;
+    user = newUser
   }
 
-  return user;
+  return user
 }
diff --git a/apps/web/src/app/api/user-stats/route.ts b/apps/web/src/app/api/user-stats/route.ts
index 5ef6b5d1..be5be675 100644
--- 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 { 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'
+import { type NextRequest, NextResponse } from 'next/server'
+import { db, schema } from '@/db'
+import { getViewerId } from '@/lib/viewer'
 
 /**
  * GET /api/user-stats
@@ -9,12 +9,12 @@ import { getViewerId } from "@/lib/viewer";
  */
 export async function GET() {
   try {
-    const viewerId = await getViewerId();
+    const viewerId = await getViewerId()
 
     // Get user record
     const user = await db.query.users.findFirst({
       where: eq(schema.users.guestId, viewerId),
-    });
+    })
 
     if (!user) {
       // No user yet, return default stats
@@ -26,13 +26,13 @@ export async function GET() {
           bestTime: null,
           highestAccuracy: 0,
         },
-      });
+      })
     }
 
     // Get stats record
     let stats = await db.query.userStats.findFirst({
       where: eq(schema.userStats.userId, user.id),
-    });
+    })
 
     // If no stats record exists, create one with defaults
     if (!stats) {
@@ -41,18 +41,15 @@ export async function GET() {
         .values({
           userId: user.id,
         })
-        .returning();
+        .returning()
 
-      stats = newStats;
+      stats = newStats
     }
 
-    return NextResponse.json({ stats });
+    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 },
-    );
+    console.error('Failed to fetch user stats:', error)
+    return NextResponse.json({ error: 'Failed to fetch user stats' }, { status: 500 })
   }
 }
 
@@ -62,13 +59,13 @@ export async function GET() {
  */
 export async function PATCH(req: NextRequest) {
   try {
-    const viewerId = await getViewerId();
-    const body = await req.json();
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
     // Get or create user record
     let user = await db.query.users.findFirst({
       where: eq(schema.users.guestId, viewerId),
-    });
+    })
 
     if (!user) {
       // Create user if it doesn't exist
@@ -77,25 +74,23 @@ export async function PATCH(req: NextRequest) {
         .values({
           guestId: viewerId,
         })
-        .returning();
+        .returning()
 
-      user = newUser;
+      user = newUser
     }
 
     // Get existing stats
     const stats = await db.query.userStats.findFirst({
       where: eq(schema.userStats.userId, user.id),
-    });
+    })
 
     // Prepare update values
-    const updates: any = {};
-    if (body.gamesPlayed !== undefined) updates.gamesPlayed = body.gamesPlayed;
-    if (body.totalWins !== undefined) updates.totalWins = body.totalWins;
-    if (body.favoriteGameType !== undefined)
-      updates.favoriteGameType = body.favoriteGameType;
-    if (body.bestTime !== undefined) updates.bestTime = body.bestTime;
-    if (body.highestAccuracy !== undefined)
-      updates.highestAccuracy = body.highestAccuracy;
+    const updates: any = {}
+    if (body.gamesPlayed !== undefined) updates.gamesPlayed = body.gamesPlayed
+    if (body.totalWins !== undefined) updates.totalWins = body.totalWins
+    if (body.favoriteGameType !== undefined) updates.favoriteGameType = body.favoriteGameType
+    if (body.bestTime !== undefined) updates.bestTime = body.bestTime
+    if (body.highestAccuracy !== undefined) updates.highestAccuracy = body.highestAccuracy
 
     if (stats) {
       // Update existing stats
@@ -103,9 +98,9 @@ export async function PATCH(req: NextRequest) {
         .update(schema.userStats)
         .set(updates)
         .where(eq(schema.userStats.userId, user.id))
-        .returning();
+        .returning()
 
-      return NextResponse.json({ stats: updatedStats });
+      return NextResponse.json({ stats: updatedStats })
     } else {
       // Create new stats record
       const [newStats] = await db
@@ -114,15 +109,12 @@ export async function PATCH(req: NextRequest) {
           userId: user.id,
           ...updates,
         })
-        .returning();
+        .returning()
 
-      return NextResponse.json({ stats: newStats }, { status: 201 });
+      return NextResponse.json({ stats: newStats }, { status: 201 })
     }
   } catch (error) {
-    console.error("Failed to update user stats:", error);
-    return NextResponse.json(
-      { error: "Failed to update user stats" },
-      { status: 500 },
-    );
+    console.error('Failed to update user stats:', error)
+    return NextResponse.json({ error: 'Failed to update user stats' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/api/viewer/route.ts b/apps/web/src/app/api/viewer/route.ts
index 136e8dc8..e6ab8eb3 100644
--- a/apps/web/src/app/api/viewer/route.ts
+++ b/apps/web/src/app/api/viewer/route.ts
@@ -1,5 +1,5 @@
-import { NextResponse } from "next/server";
-import { getViewerId } from "@/lib/viewer";
+import { NextResponse } from 'next/server'
+import { getViewerId } from '@/lib/viewer'
 
 /**
  * GET /api/viewer
@@ -8,12 +8,9 @@ import { getViewerId } from "@/lib/viewer";
  */
 export async function GET() {
   try {
-    const viewerId = await getViewerId();
-    return NextResponse.json({ viewerId });
+    const viewerId = await getViewerId()
+    return NextResponse.json({ viewerId })
   } catch (_error) {
-    return NextResponse.json(
-      { error: "No valid viewer session found" },
-      { status: 401 },
-    );
+    return NextResponse.json({ error: 'No valid viewer session found' }, { status: 401 })
   }
 }
diff --git a/apps/web/src/app/api/worksheets/settings/route.ts b/apps/web/src/app/api/worksheets/settings/route.ts
index da158efe..47167326 100644
--- a/apps/web/src/app/api/worksheets/settings/route.ts
+++ b/apps/web/src/app/api/worksheets/settings/route.ts
@@ -1,12 +1,12 @@
-import { eq, and } 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'
+import { type NextRequest, NextResponse } from 'next/server'
+import { db, schema } from '@/db'
+import { getViewerId } from '@/lib/viewer'
 import {
   parseAdditionConfig,
   serializeAdditionConfig,
   defaultAdditionConfig,
-} from "@/app/create/worksheets/config-schemas";
+} from '@/app/create/worksheets/config-schemas'
 
 /**
  * GET /api/worksheets/settings?type=addition
@@ -21,23 +21,20 @@ import {
  */
 export async function GET(req: NextRequest) {
   try {
-    const viewerId = await getViewerId();
-    const { searchParams } = new URL(req.url);
-    const worksheetType = searchParams.get("type");
+    const viewerId = await getViewerId()
+    const { searchParams } = new URL(req.url)
+    const worksheetType = searchParams.get('type')
 
     if (!worksheetType) {
-      return NextResponse.json(
-        { error: "Missing type parameter" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Missing type parameter' }, { status: 400 })
     }
 
     // Only 'addition' is supported for now
-    if (worksheetType !== "addition") {
+    if (worksheetType !== 'addition') {
       return NextResponse.json(
         { error: `Unsupported worksheet type: ${worksheetType}` },
-        { status: 400 },
-      );
+        { status: 400 }
+      )
     }
 
     // Look up user's saved settings
@@ -47,32 +44,29 @@ export async function GET(req: NextRequest) {
       .where(
         and(
           eq(schema.worksheetSettings.userId, viewerId),
-          eq(schema.worksheetSettings.worksheetType, worksheetType),
-        ),
+          eq(schema.worksheetSettings.worksheetType, worksheetType)
+        )
       )
-      .limit(1);
+      .limit(1)
 
     if (!row) {
       // No saved settings, return defaults
       return NextResponse.json({
         config: defaultAdditionConfig,
         exists: false,
-      });
+      })
     }
 
     // Parse and validate config (auto-migrates to latest version)
-    const config = parseAdditionConfig(row.config);
+    const config = parseAdditionConfig(row.config)
 
     return NextResponse.json({
       config,
       exists: true,
-    });
+    })
   } catch (error: any) {
-    console.error("Failed to load worksheet settings:", error);
-    return NextResponse.json(
-      { error: "Failed to load worksheet settings" },
-      { status: 500 },
-    );
+    console.error('Failed to load worksheet settings:', error)
+    return NextResponse.json({ error: 'Failed to load worksheet settings' }, { status: 500 })
   }
 }
 
@@ -90,35 +84,29 @@ export async function GET(req: NextRequest) {
  */
 export async function POST(req: NextRequest) {
   try {
-    const viewerId = await getViewerId();
-    const body = await req.json();
+    const viewerId = await getViewerId()
+    const body = await req.json()
 
-    const { type: worksheetType, config } = body;
+    const { type: worksheetType, config } = body
 
     if (!worksheetType) {
-      return NextResponse.json(
-        { error: "Missing type field" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Missing type field' }, { status: 400 })
     }
 
     if (!config) {
-      return NextResponse.json(
-        { error: "Missing config field" },
-        { status: 400 },
-      );
+      return NextResponse.json({ error: 'Missing config field' }, { status: 400 })
     }
 
     // Only 'addition' is supported for now
-    if (worksheetType !== "addition") {
+    if (worksheetType !== 'addition') {
       return NextResponse.json(
         { error: `Unsupported worksheet type: ${worksheetType}` },
-        { status: 400 },
-      );
+        { status: 400 }
+      )
     }
 
     // Serialize config (adds version automatically)
-    const configJson = serializeAdditionConfig(config);
+    const configJson = serializeAdditionConfig(config)
 
     // Check if user already has settings for this type
     const [existing] = await db
@@ -127,12 +115,12 @@ export async function POST(req: NextRequest) {
       .where(
         and(
           eq(schema.worksheetSettings.userId, viewerId),
-          eq(schema.worksheetSettings.worksheetType, worksheetType),
-        ),
+          eq(schema.worksheetSettings.worksheetType, worksheetType)
+        )
       )
-      .limit(1);
+      .limit(1)
 
-    const now = new Date();
+    const now = new Date()
 
     if (existing) {
       // Update existing row
@@ -142,15 +130,15 @@ export async function POST(req: NextRequest) {
           config: configJson,
           updatedAt: now,
         })
-        .where(eq(schema.worksheetSettings.id, existing.id));
+        .where(eq(schema.worksheetSettings.id, existing.id))
 
       return NextResponse.json({
         success: true,
         id: existing.id,
-      });
+      })
     } else {
       // Insert new row
-      const id = crypto.randomUUID();
+      const id = crypto.randomUUID()
       await db.insert(schema.worksheetSettings).values({
         id,
         userId: viewerId,
@@ -158,18 +146,15 @@ export async function POST(req: NextRequest) {
         config: configJson,
         createdAt: now,
         updatedAt: now,
-      });
+      })
 
       return NextResponse.json({
         success: true,
         id,
-      });
+      })
     }
   } catch (error: any) {
-    console.error("Failed to save worksheet settings:", error);
-    return NextResponse.json(
-      { error: "Failed to save worksheet settings" },
-      { status: 500 },
-    );
+    console.error('Failed to save worksheet settings:', error)
+    return NextResponse.json({ error: 'Failed to save worksheet settings' }, { status: 500 })
   }
 }
diff --git a/apps/web/src/app/arcade-rooms/[roomId]/page.tsx b/apps/web/src/app/arcade-rooms/[roomId]/page.tsx
index 88b8a972..cfb2b7bf 100644
--- a/apps/web/src/app/arcade-rooms/[roomId]/page.tsx
+++ b/apps/web/src/app/arcade-rooms/[roomId]/page.tsx
@@ -1,253 +1,242 @@
-"use client";
+'use client'
 
-import { useEffect, useState } from "react";
-import { useParams, useRouter } from "next/navigation";
-import { io, type Socket } from "socket.io-client";
-import { css } from "../../../../styled-system/css";
-import { useToast } from "@/components/common/ToastContext";
-import { PageWithNav } from "@/components/PageWithNav";
-import { useViewerId } from "@/hooks/useViewerId";
-import { getRoomDisplayWithEmoji } from "@/utils/room-display";
+import { useEffect, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { io, type Socket } from 'socket.io-client'
+import { css } from '../../../../styled-system/css'
+import { useToast } from '@/components/common/ToastContext'
+import { PageWithNav } from '@/components/PageWithNav'
+import { useViewerId } from '@/hooks/useViewerId'
+import { getRoomDisplayWithEmoji } from '@/utils/room-display'
 
 interface Room {
-  id: string;
-  code: string;
-  name: string | null;
-  gameName: string;
-  status: "lobby" | "playing" | "finished";
-  createdBy: string;
-  creatorName: string;
-  isLocked: boolean;
+  id: string
+  code: string
+  name: string | null
+  gameName: string
+  status: 'lobby' | 'playing' | 'finished'
+  createdBy: string
+  creatorName: string
+  isLocked: boolean
 }
 
 interface Member {
-  id: string;
-  userId: string;
-  displayName: string;
-  isCreator: boolean;
-  isOnline: boolean;
-  joinedAt: Date;
+  id: string
+  userId: string
+  displayName: string
+  isCreator: boolean
+  isOnline: boolean
+  joinedAt: Date
 }
 
 interface Player {
-  id: string;
-  userId: string;
-  name: string;
-  emoji: string;
-  color: string;
-  isActive: boolean;
+  id: string
+  userId: string
+  name: string
+  emoji: string
+  color: string
+  isActive: boolean
 }
 
 export default function RoomDetailPage() {
-  const params = useParams();
-  const router = useRouter();
-  const { showError } = useToast();
-  const roomId = params.roomId as string;
-  const { data: guestId } = useViewerId();
+  const params = useParams()
+  const router = useRouter()
+  const { showError } = useToast()
+  const roomId = params.roomId as string
+  const { data: guestId } = useViewerId()
 
-  const [room, setRoom] = useState<Room | null>(null);
-  const [members, setMembers] = useState<Member[]>([]);
-  const [memberPlayers, setMemberPlayers] = useState<Record<string, Player[]>>(
-    {},
-  );
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [socket, setSocket] = useState<Socket | null>(null);
-  const [isConnected, setIsConnected] = useState(false);
+  const [room, setRoom] = useState<Room | null>(null)
+  const [members, setMembers] = useState<Member[]>([])
+  const [memberPlayers, setMemberPlayers] = useState<Record<string, Player[]>>({})
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [socket, setSocket] = useState<Socket | null>(null)
+  const [isConnected, setIsConnected] = useState(false)
 
   useEffect(() => {
-    fetchRoom();
-  }, [roomId]);
+    fetchRoom()
+  }, [roomId])
 
   useEffect(() => {
-    if (!guestId || !roomId) return;
+    if (!guestId || !roomId) return
 
     // Connect to socket
-    const sock = io({ path: "/api/socket" });
-    setSocket(sock);
+    const sock = io({ path: '/api/socket' })
+    setSocket(sock)
 
-    sock.on("connect", () => {
-      setIsConnected(true);
+    sock.on('connect', () => {
+      setIsConnected(true)
       // Join the room
-      sock.emit("join-room", { roomId, userId: guestId });
-    });
+      sock.emit('join-room', { roomId, userId: guestId })
+    })
 
-    sock.on("disconnect", () => {
-      setIsConnected(false);
-    });
+    sock.on('disconnect', () => {
+      setIsConnected(false)
+    })
 
-    sock.on("room-joined", (data) => {
-      console.log("Joined room:", data);
+    sock.on('room-joined', (data) => {
+      console.log('Joined room:', data)
       if (data.members) {
-        setMembers(data.members);
+        setMembers(data.members)
       }
       if (data.memberPlayers) {
-        setMemberPlayers(data.memberPlayers);
+        setMemberPlayers(data.memberPlayers)
       }
-    });
+    })
 
-    sock.on("member-joined", (data) => {
-      console.log("Member joined:", data);
+    sock.on('member-joined', (data) => {
+      console.log('Member joined:', data)
       if (data.members) {
-        setMembers(data.members);
+        setMembers(data.members)
       }
       if (data.memberPlayers) {
-        setMemberPlayers(data.memberPlayers);
+        setMemberPlayers(data.memberPlayers)
       }
-    });
+    })
 
-    sock.on("member-left", (data) => {
-      console.log("Member left:", data);
+    sock.on('member-left', (data) => {
+      console.log('Member left:', data)
       if (data.members) {
-        setMembers(data.members);
+        setMembers(data.members)
       }
       if (data.memberPlayers) {
-        setMemberPlayers(data.memberPlayers);
+        setMemberPlayers(data.memberPlayers)
       }
-    });
+    })
 
-    sock.on("room-error", (error) => {
-      console.error("Room error:", error);
-      setError(error.error);
-    });
+    sock.on('room-error', (error) => {
+      console.error('Room error:', error)
+      setError(error.error)
+    })
 
-    sock.on("room-players-updated", (data) => {
-      console.log("Room players updated:", data);
+    sock.on('room-players-updated', (data) => {
+      console.log('Room players updated:', data)
       if (data.memberPlayers) {
-        setMemberPlayers(data.memberPlayers);
+        setMemberPlayers(data.memberPlayers)
       }
-    });
+    })
 
     return () => {
-      sock.emit("leave-room", { roomId, userId: guestId });
-      sock.disconnect();
-    };
-  }, [roomId, guestId]);
+      sock.emit('leave-room', { roomId, userId: guestId })
+      sock.disconnect()
+    }
+  }, [roomId, guestId])
 
   // Notify room when window regains focus (user might have changed players in another tab)
   useEffect(() => {
-    if (!socket || !guestId || !roomId) return;
+    if (!socket || !guestId || !roomId) return
 
     const handleFocus = () => {
-      console.log("Window focused, notifying room of potential player changes");
-      socket.emit("players-updated", { roomId, userId: guestId });
-    };
+      console.log('Window focused, notifying room of potential player changes')
+      socket.emit('players-updated', { roomId, userId: guestId })
+    }
 
-    window.addEventListener("focus", handleFocus);
-    return () => window.removeEventListener("focus", handleFocus);
-  }, [socket, roomId, guestId]);
+    window.addEventListener('focus', handleFocus)
+    return () => window.removeEventListener('focus', handleFocus)
+  }, [socket, roomId, guestId])
 
   const fetchRoom = async () => {
     try {
-      setLoading(true);
-      const response = await fetch(`/api/arcade/rooms/${roomId}`);
+      setLoading(true)
+      const response = await fetch(`/api/arcade/rooms/${roomId}`)
       if (!response.ok) {
-        throw new Error(`HTTP ${response.status}`);
+        throw new Error(`HTTP ${response.status}`)
       }
-      const data = await response.json();
-      setRoom(data.room);
-      setMembers(data.members || []);
-      setMemberPlayers(data.memberPlayers || {});
-      setError(null);
+      const data = await response.json()
+      setRoom(data.room)
+      setMembers(data.members || [])
+      setMemberPlayers(data.memberPlayers || {})
+      setError(null)
     } catch (err) {
-      console.error("Failed to fetch room:", err);
-      setError("Failed to load room");
+      console.error('Failed to fetch room:', err)
+      setError('Failed to load room')
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
   const startGame = () => {
-    if (!room) return;
+    if (!room) return
     // Navigate to the room game page
-    router.push("/arcade");
-  };
+    router.push('/arcade')
+  }
 
   const joinRoom = async () => {
     try {
       const response = await fetch(`/api/arcade/rooms/${roomId}/join`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ displayName: "Player" }),
-      });
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ displayName: 'Player' }),
+      })
 
       if (!response.ok) {
-        const errorData = await response.json();
+        const errorData = await response.json()
 
         // Handle specific room membership conflict
-        if (errorData.code === "ROOM_MEMBERSHIP_CONFLICT") {
-          showError(
-            "Already in Another Room",
-            errorData.userMessage || errorData.message,
-          );
+        if (errorData.code === 'ROOM_MEMBERSHIP_CONFLICT') {
+          showError('Already in Another Room', errorData.userMessage || errorData.message)
           // Refresh the page to update room state
-          await fetchRoom();
-          return;
+          await fetchRoom()
+          return
         }
 
-        throw new Error(errorData.error || `HTTP ${response.status}`);
+        throw new Error(errorData.error || `HTTP ${response.status}`)
       }
 
-      const data = await response.json();
+      const data = await response.json()
 
       // Show notification if user was auto-removed from other rooms
       if (data.autoLeave) {
-        console.log(`[Room Join] ${data.autoLeave.message}`);
+        console.log(`[Room Join] ${data.autoLeave.message}`)
         // Could show a toast notification here in the future
       }
 
       // Refresh room data to update membership UI
-      await fetchRoom();
+      await fetchRoom()
     } catch (err) {
-      console.error("Failed to join room:", err);
-      showError(
-        "Failed to join room",
-        err instanceof Error ? err.message : undefined,
-      );
+      console.error('Failed to join room:', err)
+      showError('Failed to join room', err instanceof Error ? err.message : undefined)
     }
-  };
+  }
 
   const leaveRoom = async () => {
     try {
       const response = await fetch(`/api/arcade/rooms/${roomId}/leave`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-      });
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      })
 
       if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || `HTTP ${response.status}`);
+        const errorData = await response.json()
+        throw new Error(errorData.error || `HTTP ${response.status}`)
       }
 
       // Navigate to arcade home after successfully leaving
-      router.push("/arcade");
+      router.push('/arcade')
     } catch (err) {
-      console.error("Failed to leave room:", err);
-      showError(
-        "Failed to leave room",
-        err instanceof Error ? err.message : undefined,
-      );
+      console.error('Failed to leave room:', err)
+      showError('Failed to leave room', err instanceof Error ? err.message : undefined)
     }
-  };
+  }
 
   if (loading) {
     return (
       <PageWithNav>
         <div
           className={css({
-            minH: "calc(100vh - 80px)",
-            bg: "linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            color: "white",
-            fontSize: "xl",
+            minH: 'calc(100vh - 80px)',
+            bg: 'linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            fontSize: 'xl',
           })}
         >
           Loading room...
         </div>
       </PageWithNav>
-    );
+    )
   }
 
   if (error || !room) {
@@ -255,39 +244,39 @@ export default function RoomDetailPage() {
       <PageWithNav>
         <div
           className={css({
-            minH: "calc(100vh - 80px)",
-            bg: "linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            p: "8",
+            minH: 'calc(100vh - 80px)',
+            bg: 'linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            p: '8',
           })}
         >
           <div
             className={css({
-              bg: "rgba(255, 255, 255, 0.05)",
-              backdropFilter: "blur(10px)",
-              border: "1px solid rgba(255, 255, 255, 0.1)",
-              rounded: "lg",
-              p: "12",
-              textAlign: "center",
-              maxW: "500px",
+              bg: 'rgba(255, 255, 255, 0.05)',
+              backdropFilter: 'blur(10px)',
+              border: '1px solid rgba(255, 255, 255, 0.1)',
+              rounded: 'lg',
+              p: '12',
+              textAlign: 'center',
+              maxW: '500px',
             })}
           >
-            <p className={css({ fontSize: "xl", color: "white", mb: "4" })}>
-              {error || "Room not found"}
+            <p className={css({ fontSize: 'xl', color: 'white', mb: '4' })}>
+              {error || 'Room not found'}
             </p>
             <button
-              onClick={() => router.push("/arcade-rooms")}
+              onClick={() => router.push('/arcade-rooms')}
               className={css({
-                px: "6",
-                py: "3",
-                bg: "#3b82f6",
-                color: "white",
-                rounded: "lg",
-                fontWeight: "600",
-                cursor: "pointer",
-                _hover: { bg: "#2563eb" },
+                px: '6',
+                py: '3',
+                bg: '#3b82f6',
+                color: 'white',
+                rounded: 'lg',
+                fontWeight: '600',
+                cursor: 'pointer',
+                _hover: { bg: '#2563eb' },
               })}
             >
               Back to Rooms
@@ -295,23 +284,23 @@ export default function RoomDetailPage() {
           </div>
         </div>
       </PageWithNav>
-    );
+    )
   }
 
-  const onlineMembers = members.filter((m) => m.isOnline);
+  const onlineMembers = members.filter((m) => m.isOnline)
 
   // Check if current user is a member
-  const isMember = members.some((m) => m.userId === guestId);
+  const isMember = members.some((m) => m.userId === guestId)
 
   // Calculate union of all active players in the room
-  const allPlayers: Player[] = [];
-  const playerIds = new Set<string>();
+  const allPlayers: Player[] = []
+  const playerIds = new Set<string>()
 
   for (const userId in memberPlayers) {
     for (const player of memberPlayers[userId]) {
       if (!playerIds.has(player.id)) {
-        playerIds.add(player.id);
-        allPlayers.push(player);
+        playerIds.add(player.id)
+        allPlayers.push(player)
       }
     }
   }
@@ -320,35 +309,35 @@ export default function RoomDetailPage() {
     <PageWithNav>
       <div
         className={css({
-          minH: "calc(100vh - 80px)",
-          bg: "linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)",
-          p: "8",
+          minH: 'calc(100vh - 80px)',
+          bg: 'linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)',
+          p: '8',
         })}
       >
-        <div className={css({ maxW: "1000px", mx: "auto" })}>
+        <div className={css({ maxW: '1000px', mx: 'auto' })}>
           {/* Header */}
           <div
             className={css({
-              bg: "rgba(255, 255, 255, 0.05)",
-              backdropFilter: "blur(10px)",
-              border: "1px solid rgba(255, 255, 255, 0.1)",
-              rounded: "lg",
-              p: "8",
-              mb: "6",
+              bg: 'rgba(255, 255, 255, 0.05)',
+              backdropFilter: 'blur(10px)',
+              border: '1px solid rgba(255, 255, 255, 0.1)',
+              rounded: 'lg',
+              p: '8',
+              mb: '6',
             })}
           >
-            <div className={css({ mb: "4" })}>
+            <div className={css({ mb: '4' })}>
               <button
-                onClick={() => router.push("/arcade-rooms")}
+                onClick={() => router.push('/arcade-rooms')}
                 className={css({
-                  display: "inline-flex",
-                  alignItems: "center",
-                  gap: "2",
-                  color: "#a0a0ff",
-                  fontSize: "sm",
-                  cursor: "pointer",
-                  _hover: { color: "#60a5fa" },
-                  mb: "3",
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '2',
+                  color: '#a0a0ff',
+                  fontSize: 'sm',
+                  cursor: 'pointer',
+                  _hover: { color: '#60a5fa' },
+                  mb: '3',
                 })}
               >
                 ← Back to Rooms
@@ -356,19 +345,19 @@ export default function RoomDetailPage() {
             </div>
             <div
               className={css({
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                mb: "4",
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                mb: '4',
               })}
             >
               <div>
                 <h1
                   className={css({
-                    fontSize: "3xl",
-                    fontWeight: "bold",
-                    color: "white",
-                    mb: "2",
+                    fontSize: '3xl',
+                    fontWeight: 'bold',
+                    color: 'white',
+                    mb: '2',
                   })}
                 >
                   {getRoomDisplayWithEmoji({
@@ -379,23 +368,23 @@ export default function RoomDetailPage() {
                 </h1>
                 <div
                   className={css({
-                    display: "flex",
-                    gap: "4",
-                    color: "#a0a0ff",
-                    fontSize: "sm",
+                    display: 'flex',
+                    gap: '4',
+                    color: '#a0a0ff',
+                    fontSize: 'sm',
                   })}
                 >
                   <span>🎮 {room.gameName}</span>
                   <span>👤 Host: {room.creatorName}</span>
                   <span
                     className={css({
-                      px: "3",
-                      py: "1",
-                      bg: "rgba(255, 255, 255, 0.1)",
-                      color: "#fbbf24",
-                      rounded: "full",
-                      fontWeight: "600",
-                      fontFamily: "monospace",
+                      px: '3',
+                      py: '1',
+                      bg: 'rgba(255, 255, 255, 0.1)',
+                      color: '#fbbf24',
+                      rounded: 'full',
+                      fontWeight: '600',
+                      fontFamily: 'monospace',
                     })}
                   >
                     Code: {room.code}
@@ -404,40 +393,38 @@ export default function RoomDetailPage() {
               </div>
               <div
                 className={css({
-                  display: "flex",
-                  gap: "3",
-                  alignItems: "center",
+                  display: 'flex',
+                  gap: '3',
+                  alignItems: 'center',
                 })}
               >
                 <div
                   className={css({
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "2",
-                    px: "3",
-                    py: "2",
-                    bg: isConnected
-                      ? "rgba(16, 185, 129, 0.2)"
-                      : "rgba(239, 68, 68, 0.2)",
-                    border: `1px solid ${isConnected ? "#10b981" : "#ef4444"}`,
-                    rounded: "full",
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '2',
+                    px: '3',
+                    py: '2',
+                    bg: isConnected ? 'rgba(16, 185, 129, 0.2)' : 'rgba(239, 68, 68, 0.2)',
+                    border: `1px solid ${isConnected ? '#10b981' : '#ef4444'}`,
+                    rounded: 'full',
                   })}
                 >
                   <div
                     className={css({
-                      w: "2",
-                      h: "2",
-                      bg: isConnected ? "#10b981" : "#ef4444",
-                      rounded: "full",
+                      w: '2',
+                      h: '2',
+                      bg: isConnected ? '#10b981' : '#ef4444',
+                      rounded: 'full',
                     })}
                   />
                   <span
                     className={css({
-                      color: isConnected ? "#10b981" : "#ef4444",
-                      fontSize: "sm",
+                      color: isConnected ? '#10b981' : '#ef4444',
+                      fontSize: 'sm',
                     })}
                   >
-                    {isConnected ? "Connected" : "Disconnected"}
+                    {isConnected ? 'Connected' : 'Disconnected'}
                   </span>
                 </div>
               </div>
@@ -447,50 +434,46 @@ export default function RoomDetailPage() {
           {/* Game Players - Union of all active players */}
           <div
             className={css({
-              bg: "rgba(255, 255, 255, 0.05)",
-              backdropFilter: "blur(10px)",
-              border: "1px solid rgba(255, 255, 255, 0.1)",
-              rounded: "lg",
-              p: "8",
-              mb: "6",
+              bg: 'rgba(255, 255, 255, 0.05)',
+              backdropFilter: 'blur(10px)',
+              border: '1px solid rgba(255, 255, 255, 0.1)',
+              rounded: 'lg',
+              p: '8',
+              mb: '6',
             })}
           >
             <h2
               className={css({
-                fontSize: "2xl",
-                fontWeight: "bold",
-                color: "white",
-                mb: "2",
+                fontSize: '2xl',
+                fontWeight: 'bold',
+                color: 'white',
+                mb: '2',
               })}
             >
               🎯 Game Players ({allPlayers.length})
             </h2>
-            <p className={css({ color: "#a0a0ff", fontSize: "sm", mb: "4" })}>
+            <p className={css({ color: '#a0a0ff', fontSize: 'sm', mb: '4' })}>
               These players will participate when the game starts
             </p>
             {allPlayers.length > 0 ? (
-              <div
-                className={css({ display: "flex", gap: "2", flexWrap: "wrap" })}
-              >
+              <div className={css({ display: 'flex', gap: '2', flexWrap: 'wrap' })}>
                 {allPlayers.map((player) => (
                   <div
                     key={player.id}
                     className={css({
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "2",
-                      px: "3",
-                      py: "2",
-                      bg: "rgba(59, 130, 246, 0.15)",
-                      border: "2px solid rgba(59, 130, 246, 0.4)",
-                      rounded: "lg",
-                      color: "#60a5fa",
-                      fontWeight: "600",
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '2',
+                      px: '3',
+                      py: '2',
+                      bg: 'rgba(59, 130, 246, 0.15)',
+                      border: '2px solid rgba(59, 130, 246, 0.4)',
+                      rounded: 'lg',
+                      color: '#60a5fa',
+                      fontWeight: '600',
                     })}
                   >
-                    <span className={css({ fontSize: "xl" })}>
-                      {player.emoji}
-                    </span>
+                    <span className={css({ fontSize: 'xl' })}>{player.emoji}</span>
                     <span>{player.name}</span>
                   </div>
                 ))}
@@ -498,10 +481,10 @@ export default function RoomDetailPage() {
             ) : (
               <div
                 className={css({
-                  color: "#6b7280",
-                  fontStyle: "italic",
-                  textAlign: "center",
-                  py: "4",
+                  color: '#6b7280',
+                  fontStyle: 'italic',
+                  textAlign: 'center',
+                  py: '4',
                 })}
               >
                 No active players yet. Members need to set up their players.
@@ -512,107 +495,103 @@ export default function RoomDetailPage() {
           {/* Members List */}
           <div
             className={css({
-              bg: "rgba(255, 255, 255, 0.05)",
-              backdropFilter: "blur(10px)",
-              border: "1px solid rgba(255, 255, 255, 0.1)",
-              rounded: "lg",
-              p: "8",
-              mb: "6",
+              bg: 'rgba(255, 255, 255, 0.05)',
+              backdropFilter: 'blur(10px)',
+              border: '1px solid rgba(255, 255, 255, 0.1)',
+              rounded: 'lg',
+              p: '8',
+              mb: '6',
             })}
           >
             <h2
               className={css({
-                fontSize: "2xl",
-                fontWeight: "bold",
-                color: "white",
-                mb: "2",
+                fontSize: '2xl',
+                fontWeight: 'bold',
+                color: 'white',
+                mb: '2',
               })}
             >
               👥 Room Members ({onlineMembers.length}/{members.length})
             </h2>
-            <p className={css({ color: "#a0a0ff", fontSize: "sm", mb: "4" })}>
+            <p className={css({ color: '#a0a0ff', fontSize: 'sm', mb: '4' })}>
               Users in this room and their active players
             </p>
-            <div className={css({ display: "grid", gap: "3" })}>
+            <div className={css({ display: 'grid', gap: '3' })}>
               {members.map((member) => {
-                const players = memberPlayers[member.userId] || [];
+                const players = memberPlayers[member.userId] || []
                 return (
                   <div
                     key={member.id}
                     className={css({
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: "2",
-                      p: "4",
-                      bg: "rgba(255, 255, 255, 0.05)",
-                      border: "1px solid rgba(255, 255, 255, 0.1)",
-                      rounded: "lg",
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '2',
+                      p: '4',
+                      bg: 'rgba(255, 255, 255, 0.05)',
+                      border: '1px solid rgba(255, 255, 255, 0.1)',
+                      rounded: 'lg',
                       opacity: member.isOnline ? 1 : 0.5,
                     })}
                   >
                     <div
                       className={css({
-                        display: "flex",
-                        justifyContent: "space-between",
-                        alignItems: "center",
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
                       })}
                     >
                       <div
                         className={css({
-                          display: "flex",
-                          alignItems: "center",
-                          gap: "3",
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '3',
                         })}
                       >
                         <div
                           className={css({
-                            w: "3",
-                            h: "3",
-                            bg: member.isOnline ? "#10b981" : "#6b7280",
-                            rounded: "full",
+                            w: '3',
+                            h: '3',
+                            bg: member.isOnline ? '#10b981' : '#6b7280',
+                            rounded: 'full',
                           })}
                         />
-                        <span
-                          className={css({ color: "white", fontWeight: "600" })}
-                        >
+                        <span className={css({ color: 'white', fontWeight: '600' })}>
                           {member.displayName}
                         </span>
                         {member.isCreator && (
                           <span
                             className={css({
-                              px: "2",
-                              py: "1",
-                              bg: "rgba(251, 191, 36, 0.2)",
-                              color: "#fbbf24",
-                              rounded: "full",
-                              fontSize: "xs",
-                              fontWeight: "600",
+                              px: '2',
+                              py: '1',
+                              bg: 'rgba(251, 191, 36, 0.2)',
+                              color: '#fbbf24',
+                              rounded: 'full',
+                              fontSize: 'xs',
+                              fontWeight: '600',
                             })}
                           >
                             HOST
                           </span>
                         )}
                       </div>
-                      <span
-                        className={css({ color: "#a0a0ff", fontSize: "sm" })}
-                      >
-                        {member.isOnline ? "🟢 Online" : "⚫ Offline"}
+                      <span className={css({ color: '#a0a0ff', fontSize: 'sm' })}>
+                        {member.isOnline ? '🟢 Online' : '⚫ Offline'}
                       </span>
                     </div>
                     {players.length > 0 && (
                       <div
                         className={css({
-                          display: "flex",
-                          gap: "2",
-                          flexWrap: "wrap",
-                          ml: "6",
+                          display: 'flex',
+                          gap: '2',
+                          flexWrap: 'wrap',
+                          ml: '6',
                         })}
                       >
                         <span
                           className={css({
-                            color: "#a0a0ff",
-                            fontSize: "xs",
-                            mr: "1",
+                            color: '#a0a0ff',
+                            fontSize: 'xs',
+                            mr: '1',
                           })}
                         >
                           Players:
@@ -621,14 +600,14 @@ export default function RoomDetailPage() {
                           <span
                             key={player.id}
                             className={css({
-                              px: "2",
-                              py: "1",
-                              bg: "rgba(59, 130, 246, 0.2)",
-                              color: "#60a5fa",
-                              border: "1px solid rgba(59, 130, 246, 0.3)",
-                              rounded: "full",
-                              fontSize: "xs",
-                              fontWeight: "600",
+                              px: '2',
+                              py: '1',
+                              bg: 'rgba(59, 130, 246, 0.2)',
+                              color: '#60a5fa',
+                              border: '1px solid rgba(59, 130, 246, 0.3)',
+                              rounded: 'full',
+                              fontSize: 'xs',
+                              fontWeight: '600',
                             })}
                           >
                             {player.emoji} {player.name}
@@ -639,37 +618,37 @@ export default function RoomDetailPage() {
                     {players.length === 0 && (
                       <div
                         className={css({
-                          ml: "6",
-                          color: "#6b7280",
-                          fontSize: "xs",
-                          fontStyle: "italic",
+                          ml: '6',
+                          color: '#6b7280',
+                          fontSize: 'xs',
+                          fontStyle: 'italic',
                         })}
                       >
                         No active players
                       </div>
                     )}
                   </div>
-                );
+                )
               })}
             </div>
           </div>
 
           {/* Actions */}
-          <div className={css({ display: "flex", gap: "4" })}>
+          <div className={css({ display: 'flex', gap: '4' })}>
             {isMember ? (
               <>
                 <button
                   onClick={leaveRoom}
                   className={css({
                     flex: 1,
-                    px: "6",
-                    py: "4",
-                    bg: "rgba(255, 255, 255, 0.1)",
-                    color: "white",
-                    rounded: "lg",
-                    fontWeight: "600",
-                    cursor: "pointer",
-                    _hover: { bg: "rgba(255, 255, 255, 0.15)" },
+                    px: '6',
+                    py: '4',
+                    bg: 'rgba(255, 255, 255, 0.1)',
+                    color: 'white',
+                    rounded: 'lg',
+                    fontWeight: '600',
+                    cursor: 'pointer',
+                    _hover: { bg: 'rgba(255, 255, 255, 0.15)' },
                   })}
                 >
                   Leave Room
@@ -679,37 +658,37 @@ export default function RoomDetailPage() {
                   disabled={allPlayers.length < 1}
                   className={css({
                     flex: 2,
-                    px: "6",
-                    py: "4",
-                    bg: allPlayers.length < 1 ? "#6b7280" : "#10b981",
-                    color: "white",
-                    rounded: "lg",
-                    fontSize: "xl",
-                    fontWeight: "600",
-                    cursor: allPlayers.length < 1 ? "not-allowed" : "pointer",
+                    px: '6',
+                    py: '4',
+                    bg: allPlayers.length < 1 ? '#6b7280' : '#10b981',
+                    color: 'white',
+                    rounded: 'lg',
+                    fontSize: 'xl',
+                    fontWeight: '600',
+                    cursor: allPlayers.length < 1 ? 'not-allowed' : 'pointer',
                     opacity: allPlayers.length < 1 ? 0.5 : 1,
-                    _hover: allPlayers.length < 1 ? {} : { bg: "#059669" },
+                    _hover: allPlayers.length < 1 ? {} : { bg: '#059669' },
                   })}
                 >
                   {allPlayers.length < 1
-                    ? "Waiting for players..."
+                    ? 'Waiting for players...'
                     : `🎮 Start Game (${allPlayers.length} players)`}
                 </button>
               </>
             ) : (
               <>
                 <button
-                  onClick={() => router.push("/arcade-rooms")}
+                  onClick={() => router.push('/arcade-rooms')}
                   className={css({
                     flex: 1,
-                    px: "6",
-                    py: "4",
-                    bg: "rgba(255, 255, 255, 0.1)",
-                    color: "white",
-                    rounded: "lg",
-                    fontWeight: "600",
-                    cursor: "pointer",
-                    _hover: { bg: "rgba(255, 255, 255, 0.15)" },
+                    px: '6',
+                    py: '4',
+                    bg: 'rgba(255, 255, 255, 0.1)',
+                    color: 'white',
+                    rounded: 'lg',
+                    fontWeight: '600',
+                    cursor: 'pointer',
+                    _hover: { bg: 'rgba(255, 255, 255, 0.15)' },
                   })}
                 >
                   Back to Rooms
@@ -719,19 +698,19 @@ export default function RoomDetailPage() {
                   disabled={room.isLocked}
                   className={css({
                     flex: 2,
-                    px: "6",
-                    py: "4",
-                    bg: room.isLocked ? "#6b7280" : "#3b82f6",
-                    color: "white",
-                    rounded: "lg",
-                    fontSize: "xl",
-                    fontWeight: "600",
-                    cursor: room.isLocked ? "not-allowed" : "pointer",
+                    px: '6',
+                    py: '4',
+                    bg: room.isLocked ? '#6b7280' : '#3b82f6',
+                    color: 'white',
+                    rounded: 'lg',
+                    fontSize: 'xl',
+                    fontWeight: '600',
+                    cursor: room.isLocked ? 'not-allowed' : 'pointer',
                     opacity: room.isLocked ? 0.5 : 1,
-                    _hover: room.isLocked ? {} : { bg: "#2563eb" },
+                    _hover: room.isLocked ? {} : { bg: '#2563eb' },
                   })}
                 >
-                  {room.isLocked ? "🔒 Room Locked" : "Join Room"}
+                  {room.isLocked ? '🔒 Room Locked' : 'Join Room'}
                 </button>
               </>
             )}
@@ -739,5 +718,5 @@ export default function RoomDetailPage() {
         </div>
       </div>
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade-rooms/page.tsx b/apps/web/src/app/arcade-rooms/page.tsx
index 3cb70328..b1dde4f9 100644
--- a/apps/web/src/app/arcade-rooms/page.tsx
+++ b/apps/web/src/app/arcade-rooms/page.tsx
@@ -1,212 +1,195 @@
-"use client";
+'use client'
 
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import { css } from "../../../styled-system/css";
-import { useToast } from "@/components/common/ToastContext";
-import { PageWithNav } from "@/components/PageWithNav";
-import { getRoomDisplayWithEmoji } from "@/utils/room-display";
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { css } from '../../../styled-system/css'
+import { useToast } from '@/components/common/ToastContext'
+import { PageWithNav } from '@/components/PageWithNav'
+import { getRoomDisplayWithEmoji } from '@/utils/room-display'
 
 interface Room {
-  id: string;
-  code: string;
-  name: string | null;
-  gameName: string;
-  status: "lobby" | "playing" | "finished";
-  createdAt: Date;
-  creatorName: string;
-  isLocked: boolean;
-  accessMode:
-    | "open"
-    | "password"
-    | "approval-only"
-    | "restricted"
-    | "locked"
-    | "retired";
-  memberCount?: number;
-  playerCount?: number;
-  isMember?: boolean;
+  id: string
+  code: string
+  name: string | null
+  gameName: string
+  status: 'lobby' | 'playing' | 'finished'
+  createdAt: Date
+  creatorName: string
+  isLocked: boolean
+  accessMode: 'open' | 'password' | 'approval-only' | 'restricted' | 'locked' | 'retired'
+  memberCount?: number
+  playerCount?: number
+  isMember?: boolean
 }
 
 export default function RoomBrowserPage() {
-  const router = useRouter();
-  const { showError, showInfo } = useToast();
-  const [rooms, setRooms] = useState<Room[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [showCreateModal, setShowCreateModal] = useState(false);
+  const router = useRouter()
+  const { showError, showInfo } = useToast()
+  const [rooms, setRooms] = useState<Room[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [showCreateModal, setShowCreateModal] = useState(false)
 
   useEffect(() => {
-    fetchRooms();
-  }, []);
+    fetchRooms()
+  }, [])
 
   const fetchRooms = async () => {
     try {
-      setLoading(true);
-      const response = await fetch("/api/arcade/rooms");
+      setLoading(true)
+      const response = await fetch('/api/arcade/rooms')
       if (!response.ok) {
-        throw new Error(`HTTP ${response.status}`);
+        throw new Error(`HTTP ${response.status}`)
       }
-      const data = await response.json();
-      setRooms(data.rooms);
-      setError(null);
+      const data = await response.json()
+      setRooms(data.rooms)
+      setError(null)
     } catch (err) {
-      console.error("Failed to fetch rooms:", err);
-      setError("Failed to load rooms");
+      console.error('Failed to fetch rooms:', err)
+      setError('Failed to load rooms')
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
   const createRoom = async (name: string | null, gameName: string) => {
     try {
-      const response = await fetch("/api/arcade/rooms", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+      const response = await fetch('/api/arcade/rooms', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           name,
           gameName,
-          creatorName: "Player",
+          creatorName: 'Player',
           gameConfig: { difficulty: 6 },
         }),
-      });
+      })
 
       if (!response.ok) {
-        throw new Error(`HTTP ${response.status}`);
+        throw new Error(`HTTP ${response.status}`)
       }
 
-      const data = await response.json();
-      router.push(`/join/${data.room.code}`);
+      const data = await response.json()
+      router.push(`/join/${data.room.code}`)
     } catch (err) {
-      console.error("Failed to create room:", err);
-      showError(
-        "Failed to create room",
-        err instanceof Error ? err.message : undefined,
-      );
+      console.error('Failed to create room:', err)
+      showError('Failed to create room', err instanceof Error ? err.message : undefined)
     }
-  };
+  }
 
   const joinRoom = async (room: Room) => {
     try {
       // Check access mode
-      if (room.accessMode === "password") {
-        const password = prompt(
-          `Enter password for ${room.name || `Room ${room.code}`}:`,
-        );
-        if (!password) return; // User cancelled
+      if (room.accessMode === 'password') {
+        const password = prompt(`Enter password for ${room.name || `Room ${room.code}`}:`)
+        if (!password) return // User cancelled
 
         const response = await fetch(`/api/arcade/rooms/${room.id}/join`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ displayName: "Player", password }),
-        });
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ displayName: 'Player', password }),
+        })
 
         if (!response.ok) {
-          const errorData = await response.json();
-          showError("Failed to join room", errorData.error);
-          return;
+          const errorData = await response.json()
+          showError('Failed to join room', errorData.error)
+          return
         }
 
-        router.push(`/arcade-rooms/${room.id}`);
-        return;
+        router.push(`/arcade-rooms/${room.id}`)
+        return
       }
 
-      if (room.accessMode === "approval-only") {
+      if (room.accessMode === 'approval-only') {
         showInfo(
-          "Approval Required",
-          "This room requires host approval. Please use the Join Room modal to request access.",
-        );
-        return;
+          'Approval Required',
+          'This room requires host approval. Please use the Join Room modal to request access.'
+        )
+        return
       }
 
-      if (room.accessMode === "restricted") {
+      if (room.accessMode === 'restricted') {
         showInfo(
-          "Invitation Only",
-          "This room is invitation-only. Please ask the host for an invitation.",
-        );
-        return;
+          'Invitation Only',
+          'This room is invitation-only. Please ask the host for an invitation.'
+        )
+        return
       }
 
       // For open rooms
       const response = await fetch(`/api/arcade/rooms/${room.id}/join`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ displayName: "Player" }),
-      });
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ displayName: 'Player' }),
+      })
 
       if (!response.ok) {
-        const errorData = await response.json();
+        const errorData = await response.json()
 
         // Handle specific room membership conflict
-        if (errorData.code === "ROOM_MEMBERSHIP_CONFLICT") {
-          showError(
-            "Already in Another Room",
-            errorData.userMessage || errorData.message,
-          );
+        if (errorData.code === 'ROOM_MEMBERSHIP_CONFLICT') {
+          showError('Already in Another Room', errorData.userMessage || errorData.message)
           // Refresh the page to update room list state
-          await fetchRooms();
-          return;
+          await fetchRooms()
+          return
         }
 
-        throw new Error(errorData.error || `HTTP ${response.status}`);
+        throw new Error(errorData.error || `HTTP ${response.status}`)
       }
 
-      const data = await response.json();
+      const data = await response.json()
 
       // Show notification if user was auto-removed from other rooms
       if (data.autoLeave) {
-        console.log(`[Room Join] ${data.autoLeave.message}`);
+        console.log(`[Room Join] ${data.autoLeave.message}`)
         // Could show a toast notification here in the future
       }
 
-      router.push(`/arcade-rooms/${room.id}`);
+      router.push(`/arcade-rooms/${room.id}`)
     } catch (err) {
-      console.error("Failed to join room:", err);
-      showError(
-        "Failed to join room",
-        err instanceof Error ? err.message : undefined,
-      );
+      console.error('Failed to join room:', err)
+      showError('Failed to join room', err instanceof Error ? err.message : undefined)
     }
-  };
+  }
 
   return (
     <PageWithNav>
       <div
         className={css({
-          minH: "calc(100vh - 80px)",
-          bg: "linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)",
-          p: "8",
+          minH: 'calc(100vh - 80px)',
+          bg: 'linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)',
+          p: '8',
         })}
       >
-        <div className={css({ maxW: "1200px", mx: "auto" })}>
+        <div className={css({ maxW: '1200px', mx: 'auto' })}>
           {/* Header */}
-          <div className={css({ mb: "8", textAlign: "center" })}>
+          <div className={css({ mb: '8', textAlign: 'center' })}>
             <h1
               className={css({
-                fontSize: "4xl",
-                fontWeight: "bold",
-                color: "white",
-                mb: "4",
+                fontSize: '4xl',
+                fontWeight: 'bold',
+                color: 'white',
+                mb: '4',
               })}
             >
               🎮 Multiplayer Rooms
             </h1>
-            <p className={css({ color: "#a0a0ff", fontSize: "lg", mb: "6" })}>
+            <p className={css({ color: '#a0a0ff', fontSize: 'lg', mb: '6' })}>
               Join a room or create your own to play with friends
             </p>
             <button
               onClick={() => setShowCreateModal(true)}
               className={css({
-                px: "6",
-                py: "3",
-                bg: "#10b981",
-                color: "white",
-                rounded: "lg",
-                fontSize: "lg",
-                fontWeight: "600",
-                cursor: "pointer",
-                _hover: { bg: "#059669" },
-                transition: "all 0.2s",
+                px: '6',
+                py: '3',
+                bg: '#10b981',
+                color: 'white',
+                rounded: 'lg',
+                fontSize: 'lg',
+                fontWeight: '600',
+                cursor: 'pointer',
+                _hover: { bg: '#059669' },
+                transition: 'all 0.2s',
               })}
             >
               + Create New Room
@@ -215,9 +198,7 @@ export default function RoomBrowserPage() {
 
           {/* Room List */}
           {loading && (
-            <div
-              className={css({ textAlign: "center", color: "white", py: "12" })}
-            >
+            <div className={css({ textAlign: 'center', color: 'white', py: '12' })}>
               Loading rooms...
             </div>
           )}
@@ -225,12 +206,12 @@ export default function RoomBrowserPage() {
           {error && (
             <div
               className={css({
-                bg: "#fef2f2",
-                border: "1px solid #fecaca",
-                color: "#991b1b",
-                p: "4",
-                rounded: "lg",
-                textAlign: "center",
+                bg: '#fef2f2',
+                border: '1px solid #fecaca',
+                color: '#991b1b',
+                p: '4',
+                rounded: 'lg',
+                textAlign: 'center',
               })}
             >
               {error}
@@ -240,66 +221,62 @@ export default function RoomBrowserPage() {
           {!loading && !error && rooms.length === 0 && (
             <div
               className={css({
-                bg: "rgba(255, 255, 255, 0.05)",
-                backdropFilter: "blur(10px)",
-                border: "1px solid rgba(255, 255, 255, 0.1)",
-                rounded: "lg",
-                p: "12",
-                textAlign: "center",
-                color: "white",
+                bg: 'rgba(255, 255, 255, 0.05)',
+                backdropFilter: 'blur(10px)',
+                border: '1px solid rgba(255, 255, 255, 0.1)',
+                rounded: 'lg',
+                p: '12',
+                textAlign: 'center',
+                color: 'white',
               })}
             >
-              <p className={css({ fontSize: "xl", mb: "2" })}>
-                No rooms available
-              </p>
-              <p className={css({ color: "#a0a0ff" })}>
-                Be the first to create one!
-              </p>
+              <p className={css({ fontSize: 'xl', mb: '2' })}>No rooms available</p>
+              <p className={css({ color: '#a0a0ff' })}>Be the first to create one!</p>
             </div>
           )}
 
           {!loading && !error && rooms.length > 0 && (
-            <div className={css({ display: "grid", gap: "4" })}>
+            <div className={css({ display: 'grid', gap: '4' })}>
               {rooms.map((room) => (
                 <div
                   key={room.id}
                   className={css({
-                    bg: "rgba(255, 255, 255, 0.05)",
-                    backdropFilter: "blur(10px)",
-                    border: "1px solid rgba(255, 255, 255, 0.1)",
-                    rounded: "lg",
-                    p: "6",
-                    transition: "all 0.2s",
+                    bg: 'rgba(255, 255, 255, 0.05)',
+                    backdropFilter: 'blur(10px)',
+                    border: '1px solid rgba(255, 255, 255, 0.1)',
+                    rounded: 'lg',
+                    p: '6',
+                    transition: 'all 0.2s',
                     _hover: {
-                      bg: "rgba(255, 255, 255, 0.08)",
-                      borderColor: "rgba(255, 255, 255, 0.2)",
+                      bg: 'rgba(255, 255, 255, 0.08)',
+                      borderColor: 'rgba(255, 255, 255, 0.2)',
                     },
                   })}
                 >
                   <div
                     className={css({
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "center",
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
                     })}
                   >
                     <div
                       onClick={() => router.push(`/arcade-rooms/${room.id}`)}
-                      className={css({ flex: 1, cursor: "pointer" })}
+                      className={css({ flex: 1, cursor: 'pointer' })}
                     >
                       <div
                         className={css({
-                          display: "flex",
-                          alignItems: "center",
-                          gap: "3",
-                          mb: "2",
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '3',
+                          mb: '2',
                         })}
                       >
                         <h3
                           className={css({
-                            fontSize: "2xl",
-                            fontWeight: "bold",
-                            color: "white",
+                            fontSize: '2xl',
+                            fontWeight: 'bold',
+                            color: 'white',
                           })}
                         >
                           {getRoomDisplayWithEmoji({
@@ -310,14 +287,14 @@ export default function RoomBrowserPage() {
                         </h3>
                         <span
                           className={css({
-                            px: "3",
-                            py: "1",
-                            bg: "rgba(255, 255, 255, 0.1)",
-                            color: "#fbbf24",
-                            rounded: "full",
-                            fontSize: "sm",
-                            fontWeight: "600",
-                            fontFamily: "monospace",
+                            px: '3',
+                            py: '1',
+                            bg: 'rgba(255, 255, 255, 0.1)',
+                            color: '#fbbf24',
+                            rounded: 'full',
+                            fontSize: 'sm',
+                            fontWeight: '600',
+                            fontFamily: 'monospace',
                           })}
                         >
                           {room.code}
@@ -325,8 +302,8 @@ export default function RoomBrowserPage() {
                         {room.isLocked && (
                           <span
                             className={css({
-                              color: "#f87171",
-                              fontSize: "sm",
+                              color: '#f87171',
+                              fontSize: 'sm',
                             })}
                           >
                             🔒 Locked
@@ -335,11 +312,11 @@ export default function RoomBrowserPage() {
                       </div>
                       <div
                         className={css({
-                          display: "flex",
-                          gap: "4",
-                          color: "#a0a0ff",
-                          fontSize: "sm",
-                          flexWrap: "wrap",
+                          display: 'flex',
+                          gap: '4',
+                          color: '#a0a0ff',
+                          fontSize: 'sm',
+                          flexWrap: 'wrap',
                         })}
                       >
                         <span>👤 Host: {room.creatorName}</span>
@@ -347,46 +324,45 @@ export default function RoomBrowserPage() {
                         {room.memberCount !== undefined && (
                           <span>
                             👥 {room.memberCount} member
-                            {room.memberCount !== 1 ? "s" : ""}
+                            {room.memberCount !== 1 ? 's' : ''}
+                          </span>
+                        )}
+                        {room.playerCount !== undefined && room.playerCount > 0 && (
+                          <span>
+                            🎯 {room.playerCount} player
+                            {room.playerCount !== 1 ? 's' : ''}
                           </span>
                         )}
-                        {room.playerCount !== undefined &&
-                          room.playerCount > 0 && (
-                            <span>
-                              🎯 {room.playerCount} player
-                              {room.playerCount !== 1 ? "s" : ""}
-                            </span>
-                          )}
                         <span
                           className={css({
                             color:
-                              room.status === "lobby"
-                                ? "#10b981"
-                                : room.status === "playing"
-                                  ? "#fbbf24"
-                                  : "#6b7280",
+                              room.status === 'lobby'
+                                ? '#10b981'
+                                : room.status === 'playing'
+                                  ? '#fbbf24'
+                                  : '#6b7280',
                           })}
                         >
-                          {room.status === "lobby"
-                            ? "⏳ Waiting"
-                            : room.status === "playing"
-                              ? "🎮 Playing"
-                              : "✓ Finished"}
+                          {room.status === 'lobby'
+                            ? '⏳ Waiting'
+                            : room.status === 'playing'
+                              ? '🎮 Playing'
+                              : '✓ Finished'}
                         </span>
                       </div>
                     </div>
                     {room.isMember ? (
                       <div
                         className={css({
-                          px: "6",
-                          py: "3",
-                          bg: "#10b981",
-                          color: "white",
-                          rounded: "lg",
-                          fontWeight: "600",
-                          display: "flex",
-                          alignItems: "center",
-                          gap: "2",
+                          px: '6',
+                          py: '3',
+                          bg: '#10b981',
+                          color: 'white',
+                          rounded: 'lg',
+                          fontWeight: '600',
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '2',
                         })}
                       >
                         ✓ Joined
@@ -394,54 +370,52 @@ export default function RoomBrowserPage() {
                     ) : (
                       <button
                         onClick={(e) => {
-                          e.stopPropagation();
-                          joinRoom(room);
+                          e.stopPropagation()
+                          joinRoom(room)
                         }}
                         disabled={
                           room.isLocked ||
-                          room.accessMode === "locked" ||
-                          room.accessMode === "retired"
+                          room.accessMode === 'locked' ||
+                          room.accessMode === 'retired'
                         }
                         className={css({
-                          px: "6",
-                          py: "3",
+                          px: '6',
+                          py: '3',
                           bg:
                             room.isLocked ||
-                            room.accessMode === "locked" ||
-                            room.accessMode === "retired"
-                              ? "#6b7280"
-                              : room.accessMode === "password"
-                                ? "#f59e0b"
-                                : "#3b82f6",
-                          color: "white",
-                          rounded: "lg",
-                          fontWeight: "600",
+                            room.accessMode === 'locked' ||
+                            room.accessMode === 'retired'
+                              ? '#6b7280'
+                              : room.accessMode === 'password'
+                                ? '#f59e0b'
+                                : '#3b82f6',
+                          color: 'white',
+                          rounded: 'lg',
+                          fontWeight: '600',
                           cursor:
                             room.isLocked ||
-                            room.accessMode === "locked" ||
-                            room.accessMode === "retired"
-                              ? "not-allowed"
-                              : "pointer",
+                            room.accessMode === 'locked' ||
+                            room.accessMode === 'retired'
+                              ? 'not-allowed'
+                              : 'pointer',
                           opacity:
                             room.isLocked ||
-                            room.accessMode === "locked" ||
-                            room.accessMode === "retired"
+                            room.accessMode === 'locked' ||
+                            room.accessMode === 'retired'
                               ? 0.5
                               : 1,
                           _hover:
                             room.isLocked ||
-                            room.accessMode === "locked" ||
-                            room.accessMode === "retired"
+                            room.accessMode === 'locked' ||
+                            room.accessMode === 'retired'
                               ? {}
-                              : room.accessMode === "password"
-                                ? { bg: "#d97706" }
-                                : { bg: "#2563eb" },
-                          transition: "all 0.2s",
+                              : room.accessMode === 'password'
+                                ? { bg: '#d97706' }
+                                : { bg: '#2563eb' },
+                          transition: 'all 0.2s',
                         })}
                       >
-                        {room.accessMode === "password"
-                          ? "🔑 Join with Password"
-                          : "Join Room"}
+                        {room.accessMode === 'password' ? '🔑 Join with Password' : 'Join Room'}
                       </button>
                     )}
                   </div>
@@ -455,88 +429,84 @@ export default function RoomBrowserPage() {
         {showCreateModal && (
           <div
             className={css({
-              position: "fixed",
+              position: 'fixed',
               top: 0,
               left: 0,
               right: 0,
               bottom: 0,
-              bg: "rgba(0, 0, 0, 0.7)",
-              backdropFilter: "blur(4px)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
+              bg: 'rgba(0, 0, 0, 0.7)',
+              backdropFilter: 'blur(4px)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
               zIndex: 50,
             })}
             onClick={() => setShowCreateModal(false)}
           >
             <div
               className={css({
-                bg: "white",
-                rounded: "xl",
-                p: "8",
-                maxW: "500px",
-                w: "full",
-                mx: "4",
+                bg: 'white',
+                rounded: 'xl',
+                p: '8',
+                maxW: '500px',
+                w: 'full',
+                mx: '4',
               })}
               onClick={(e) => e.stopPropagation()}
             >
               <h2
                 className={css({
-                  fontSize: "2xl",
-                  fontWeight: "bold",
-                  mb: "6",
+                  fontSize: '2xl',
+                  fontWeight: 'bold',
+                  mb: '6',
                 })}
               >
                 Create New Room
               </h2>
               <form
                 onSubmit={(e) => {
-                  e.preventDefault();
-                  const formData = new FormData(e.currentTarget);
-                  const nameValue = formData.get("name") as string;
-                  const gameName = formData.get("gameName") as string;
+                  e.preventDefault()
+                  const formData = new FormData(e.currentTarget)
+                  const nameValue = formData.get('name') as string
+                  const gameName = formData.get('gameName') as string
                   // Treat empty name as null
-                  const name = nameValue?.trim() || null;
+                  const name = nameValue?.trim() || null
                   if (gameName) {
-                    createRoom(name, gameName);
+                    createRoom(name, gameName)
                   }
                 }}
               >
-                <div className={css({ mb: "4" })}>
+                <div className={css({ mb: '4' })}>
                   <label
                     className={css({
-                      display: "block",
-                      mb: "2",
-                      fontWeight: "600",
+                      display: 'block',
+                      mb: '2',
+                      fontWeight: '600',
                     })}
                   >
-                    Room Name{" "}
-                    <span
-                      className={css({ fontWeight: "400", color: "#9ca3af" })}
-                    >
-                      (optional)
-                    </span>
+                    Room Name{' '}
+                    <span className={css({ fontWeight: '400', color: '#9ca3af' })}>(optional)</span>
                   </label>
                   <input
                     name="name"
                     type="text"
                     placeholder="e.g., Friday Night Games (defaults to: 🎮 CODE)"
                     className={css({
-                      w: "full",
-                      px: "4",
-                      py: "3",
-                      border: "1px solid #d1d5db",
-                      rounded: "lg",
-                      _focus: { outline: "none", borderColor: "#3b82f6" },
+                      w: 'full',
+                      px: '4',
+                      py: '3',
+                      border: '1px solid #d1d5db',
+                      rounded: 'lg',
+                      _focus: { outline: 'none', borderColor: '#3b82f6' },
                     })}
                   />
                 </div>
-                <div className={css({ mb: "6" })}>
+                <div className={css({ mb: '6' })}>
                   <label
                     className={css({
-                      display: "block",
-                      mb: "2",
-                      fontWeight: "600",
+                      display: 'block',
+                      mb: '2',
+                      fontWeight: '600',
                     })}
                   >
                     Game
@@ -545,12 +515,12 @@ export default function RoomBrowserPage() {
                     name="gameName"
                     required
                     className={css({
-                      w: "full",
-                      px: "4",
-                      py: "3",
-                      border: "1px solid #d1d5db",
-                      rounded: "lg",
-                      _focus: { outline: "none", borderColor: "#3b82f6" },
+                      w: 'full',
+                      px: '4',
+                      py: '3',
+                      border: '1px solid #d1d5db',
+                      rounded: 'lg',
+                      _focus: { outline: 'none', borderColor: '#3b82f6' },
                     })}
                   >
                     <option value="matching">Memory Matching</option>
@@ -558,20 +528,20 @@ export default function RoomBrowserPage() {
                     <option value="complement-race">Complement Race</option>
                   </select>
                 </div>
-                <div className={css({ display: "flex", gap: "3" })}>
+                <div className={css({ display: 'flex', gap: '3' })}>
                   <button
                     type="button"
                     onClick={() => setShowCreateModal(false)}
                     className={css({
                       flex: 1,
-                      px: "6",
-                      py: "3",
-                      bg: "#e5e7eb",
-                      color: "#374151",
-                      rounded: "lg",
-                      fontWeight: "600",
-                      cursor: "pointer",
-                      _hover: { bg: "#d1d5db" },
+                      px: '6',
+                      py: '3',
+                      bg: '#e5e7eb',
+                      color: '#374151',
+                      rounded: 'lg',
+                      fontWeight: '600',
+                      cursor: 'pointer',
+                      _hover: { bg: '#d1d5db' },
                     })}
                   >
                     Cancel
@@ -580,14 +550,14 @@ export default function RoomBrowserPage() {
                     type="submit"
                     className={css({
                       flex: 1,
-                      px: "6",
-                      py: "3",
-                      bg: "#10b981",
-                      color: "white",
-                      rounded: "lg",
-                      fontWeight: "600",
-                      cursor: "pointer",
-                      _hover: { bg: "#059669" },
+                      px: '6',
+                      py: '3',
+                      bg: '#10b981',
+                      color: 'white',
+                      rounded: 'lg',
+                      fontWeight: '600',
+                      cursor: 'pointer',
+                      _hover: { bg: '#059669' },
                     })}
                   >
                     Create Room
@@ -599,5 +569,5 @@ export default function RoomBrowserPage() {
         )}
       </div>
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/AISystem/SpeechBubble.tsx b/apps/web/src/app/arcade/complement-race/components/AISystem/SpeechBubble.tsx
index 905bbd76..1c61a87b 100644
--- a/apps/web/src/app/arcade/complement-race/components/AISystem/SpeechBubble.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/AISystem/SpeechBubble.tsx
@@ -1,62 +1,62 @@
-"use client";
+'use client'
 
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
 
 interface SpeechBubbleProps {
-  message: string;
-  onHide: () => void;
+  message: string
+  onHide: () => void
 }
 
 export function SpeechBubble({ message, onHide }: SpeechBubbleProps) {
-  const [isVisible, setIsVisible] = useState(true);
+  const [isVisible, setIsVisible] = useState(true)
 
   useEffect(() => {
     // Auto-hide after 3.5s (line 11749-11752)
     const timer = setTimeout(() => {
-      setIsVisible(false);
-      setTimeout(onHide, 300); // Wait for fade-out animation
-    }, 3500);
+      setIsVisible(false)
+      setTimeout(onHide, 300) // Wait for fade-out animation
+    }, 3500)
 
-    return () => clearTimeout(timer);
-  }, [onHide]);
+    return () => clearTimeout(timer)
+  }, [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",
+        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",
+        transition: 'opacity 0.3s ease',
         zIndex: 10,
-        pointerEvents: "none",
-        maxWidth: "250px",
-        textAlign: "center",
+        pointerEvents: 'none',
+        maxWidth: '250px',
+        textAlign: 'center',
       }}
     >
       {message}
       {/* Tail pointing down */}
       <div
         style={{
-          position: "absolute",
-          bottom: "-8px",
-          left: "50%",
-          transform: "translateX(-50%)",
+          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))",
+          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>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/AISystem/aiCommentary.ts b/apps/web/src/app/arcade/complement-race/components/AISystem/aiCommentary.ts
index 55b6bcf0..04f140ee 100644
--- a/apps/web/src/app/arcade/complement-race/components/AISystem/aiCommentary.ts
+++ b/apps/web/src/app/arcade/complement-race/components/AISystem/aiCommentary.ts
@@ -1,156 +1,154 @@
-import type { AIRacer } from "../../lib/gameTypes";
+import type { AIRacer } from '../../lib/gameTypes'
 
 export type CommentaryContext =
-  | "ahead"
-  | "behind"
-  | "adaptive_struggle"
-  | "adaptive_mastery"
-  | "player_passed"
-  | "ai_passed"
-  | "lapped"
-  | "desperate_catchup";
+  | 'ahead'
+  | 'behind'
+  | 'adaptive_struggle'
+  | 'adaptive_mastery'
+  | 'player_passed'
+  | 'ai_passed'
+  | 'lapped'
+  | 'desperate_catchup'
 
 // 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!",
   ],
   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!",
+    '💢 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!",
   ],
-};
+}
 
 // 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!",
   ],
   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!",
+    '🔬 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!",
+    '🤖 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,
+  _aiProgress: number
 ): string | null {
   // Check cooldown (line 11759-11761)
-  const now = Date.now();
+  const now = Date.now()
   if (now - racer.lastComment < racer.commentCooldown) {
-    return null;
+    return null
   }
 
   // Select message set based on personality and context
   const messages =
-    racer.personality === "competitive"
-      ? swiftAICommentary[context]
-      : mathBotCommentary[context];
+    racer.personality === 'competitive' ? swiftAICommentary[context] : mathBotCommentary[context]
 
-  if (!messages || messages.length === 0) return null;
+  if (!messages || messages.length === 0) return null
 
   // Return random message
-  return messages[Math.floor(Math.random() * messages.length)];
+  return messages[Math.floor(Math.random() * messages.length)]
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/AbacusTarget.tsx b/apps/web/src/app/arcade/complement-race/components/AbacusTarget.tsx
index 2dc9c2d1..c8ab7d46 100644
--- a/apps/web/src/app/arcade/complement-race/components/AbacusTarget.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/AbacusTarget.tsx
@@ -1,9 +1,9 @@
-"use client";
+'use client'
 
-import { AbacusReact } from "@soroban/abacus-react";
+import { AbacusReact } from '@soroban/abacus-react'
 
 interface AbacusTargetProps {
-  number: number; // The complement number to display
+  number: number // The complement number to display
 }
 
 /**
@@ -14,9 +14,9 @@ export function AbacusTarget({ number }: AbacusTargetProps) {
   return (
     <div
       style={{
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
         lineHeight: 0,
       }}
     >
@@ -30,5 +30,5 @@ export function AbacusTarget({ number }: AbacusTargetProps) {
         scaleFactor={0.72}
       />
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/ComplementRaceGame.tsx b/apps/web/src/app/arcade/complement-race/components/ComplementRaceGame.tsx
index fb95e5df..1eebfdda 100644
--- a/apps/web/src/app/arcade/complement-race/components/ComplementRaceGame.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/ComplementRaceGame.tsx
@@ -1,42 +1,42 @@
-"use client";
+'use client'
 
 // Use modular game provider for multiplayer support
-import { useComplementRace } from "@/arcade-games/complement-race/Provider";
-import { GameControls } from "./GameControls";
-import { GameCountdown } from "./GameCountdown";
-import { GameDisplay } from "./GameDisplay";
-import { GameIntro } from "./GameIntro";
-import { GameResults } from "./GameResults";
+import { useComplementRace } from '@/arcade-games/complement-race/Provider'
+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();
+  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",
+        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",
+          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" && (
+      {state.style !== 'sprint' && (
         <div
           style={{
-            position: "absolute",
+            position: 'absolute',
             inset: 0,
-            overflow: "hidden",
-            pointerEvents: "none",
+            overflow: 'hidden',
+            pointerEvents: 'none',
             zIndex: 0,
             opacity: 0.15,
           }}
@@ -52,15 +52,7 @@ export function ComplementRaceGame() {
                 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="2" y1="5" x2="8" y2="5" stroke="#2d5016" strokeWidth="1" opacity="0.3" />
                 <line
                   x1="15"
                   y1="8"
@@ -123,214 +115,206 @@ export function ComplementRaceGame() {
       )}
 
       {/* Subtle tree clusters around edges - top-down view with gentle sway */}
-      {state.style !== "sprint" && (
+      {state.style !== 'sprint' && (
         <div
           style={{
-            position: "absolute",
+            position: 'absolute',
             inset: 0,
-            overflow: "hidden",
-            pointerEvents: "none",
+            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%)",
+              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",
+              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%)",
+              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",
+              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%)",
+              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",
+              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%)",
+              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",
+              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%)",
+              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",
+              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%)",
+              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",
+              filter: 'blur(4px)',
+              animation: 'treeSway2 8.5s ease-in-out infinite reverse',
             }}
           />
         </div>
       )}
 
       {/* Flying bird shadows - very subtle from aerial view */}
-      {state.style !== "sprint" && (
+      {state.style !== 'sprint' && (
         <div
           style={{
-            position: "absolute",
+            position: 'absolute',
             inset: 0,
-            overflow: "hidden",
-            pointerEvents: "none",
+            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",
+              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",
+              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",
+              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" && (
+      {state.style !== 'sprint' && (
         <div
           style={{
-            position: "absolute",
+            position: 'absolute',
             inset: 0,
-            overflow: "hidden",
-            pointerEvents: "none",
+            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",
+              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",
+              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>
@@ -370,21 +354,21 @@ export function ComplementRaceGame() {
 
       <div
         style={{
-          maxWidth: "100%",
-          margin: "0 auto",
+          maxWidth: '100%',
+          margin: '0 auto',
           flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          position: "relative",
+          display: 'flex',
+          flexDirection: 'column',
+          position: 'relative',
           zIndex: 1,
         }}
       >
-        {state.gamePhase === "intro" && <GameIntro />}
-        {state.gamePhase === "controls" && <GameControls />}
-        {state.gamePhase === "countdown" && <GameCountdown />}
-        {state.gamePhase === "playing" && <GameDisplay />}
-        {state.gamePhase === "results" && <GameResults />}
+        {state.gamePhase === 'intro' && <GameIntro />}
+        {state.gamePhase === 'controls' && <GameControls />}
+        {state.gamePhase === 'countdown' && <GameCountdown />}
+        {state.gamePhase === 'playing' && <GameDisplay />}
+        {state.gamePhase === 'results' && <GameResults />}
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/GameControls.tsx b/apps/web/src/app/arcade/complement-race/components/GameControls.tsx
index a4bf27be..08f0a6a7 100644
--- a/apps/web/src/app/arcade/complement-race/components/GameControls.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/GameControls.tsx
@@ -1,80 +1,74 @@
-"use client";
+'use client'
 
-import { useComplementRace } from "@/arcade-games/complement-race/Provider";
-import type {
-  ComplementDisplay,
-  GameMode,
-  GameStyle,
-  TimeoutSetting,
-} from "../lib/gameTypes";
-import { AbacusTarget } from "./AbacusTarget";
+import { useComplementRace } from '@/arcade-games/complement-race/Provider'
+import type { ComplementDisplay, GameMode, GameStyle, TimeoutSetting } from '../lib/gameTypes'
+import { AbacusTarget } from './AbacusTarget'
 
 export function GameControls() {
-  const { state, dispatch } = useComplementRace();
+  const { state, dispatch } = useComplementRace()
 
   const handleModeSelect = (mode: GameMode) => {
-    dispatch({ type: "SET_MODE", mode });
-  };
+    dispatch({ type: 'SET_MODE', mode })
+  }
 
   const handleStyleSelect = (style: GameStyle) => {
-    dispatch({ type: "SET_STYLE", style });
+    dispatch({ type: 'SET_STYLE', style })
     // Start the game immediately - no navigation needed
-    if (style === "sprint") {
-      dispatch({ type: "BEGIN_GAME" });
+    if (style === 'sprint') {
+      dispatch({ type: 'BEGIN_GAME' })
     } else {
-      dispatch({ type: "START_COUNTDOWN" });
+      dispatch({ type: 'START_COUNTDOWN' })
     }
-  };
+  }
 
   const handleTimeoutSelect = (timeout: TimeoutSetting) => {
-    dispatch({ type: "SET_TIMEOUT", timeout });
-  };
+    dispatch({ type: 'SET_TIMEOUT', timeout })
+  }
 
   return (
     <div
       style={{
-        height: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        background:
-          "linear-gradient(to bottom, #0f172a 0%, #1e293b 50%, #334155 100%)",
-        overflow: "hidden",
-        position: "relative",
+        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",
+          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",
+            '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",
+          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",
+            fontSize: '32px',
+            fontWeight: 'bold',
+            background: 'linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%)',
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            backgroundClip: 'text',
             margin: 0,
-            letterSpacing: "-0.5px",
+            letterSpacing: '-0.5px',
           }}
         >
           Complement Race
@@ -84,73 +78,73 @@ export function GameControls() {
       {/* Settings Bar */}
       <div
         style={{
-          padding: "0 20px 16px",
-          display: "flex",
-          flexDirection: "column",
-          gap: "12px",
-          position: "relative",
+          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)",
+            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",
+              display: 'flex',
+              gap: '20px',
+              flexWrap: 'wrap',
+              alignItems: 'center',
             }}
           >
             {/* Number Mode Pills */}
             <div
               style={{
-                display: "flex",
-                gap: "8px",
-                alignItems: "center",
+                display: 'flex',
+                gap: '8px',
+                alignItems: 'center',
                 flex: 1,
-                minWidth: "200px",
+                minWidth: '200px',
               }}
             >
               <span
                 style={{
-                  fontSize: "13px",
-                  color: "#94a3b8",
-                  fontWeight: "600",
-                  marginRight: "4px",
+                  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: 'friends5' as GameMode, label: '5' },
+                { mode: 'friends10' as GameMode, label: '10' },
+                { mode: 'mixed' as GameMode, label: 'Mix' },
               ].map(({ mode, label }) => (
                 <button
                   key={mode}
                   onClick={() => handleModeSelect(mode)}
                   style={{
-                    padding: "8px 16px",
-                    borderRadius: "20px",
-                    border: "none",
+                    padding: '8px 16px',
+                    borderRadius: '20px',
+                    border: 'none',
                     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",
+                        ? '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',
                   }}
                 >
                   {label}
@@ -161,117 +155,106 @@ export function GameControls() {
             {/* Complement Display Pills */}
             <div
               style={{
-                display: "flex",
-                gap: "8px",
-                alignItems: "center",
+                display: 'flex',
+                gap: '8px',
+                alignItems: 'center',
                 flex: 1,
-                minWidth: "200px",
+                minWidth: '200px',
               }}
             >
               <span
                 style={{
-                  fontSize: "13px",
-                  color: "#94a3b8",
-                  fontWeight: "600",
-                  marginRight: "4px",
+                  fontSize: '13px',
+                  color: '#94a3b8',
+                  fontWeight: '600',
+                  marginRight: '4px',
                 }}
               >
                 Show:
               </span>
-              {(["number", "abacus", "random"] as ComplementDisplay[]).map(
-                (displayMode) => (
-                  <button
-                    key={displayMode}
-                    onClick={() =>
-                      dispatch({
-                        type: "SET_COMPLEMENT_DISPLAY",
-                        display: displayMode,
-                      })
-                    }
-                    style={{
-                      padding: "8px 16px",
-                      borderRadius: "20px",
-                      border: "none",
-                      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",
-                    }}
-                  >
-                    {displayMode === "number"
-                      ? "123"
-                      : displayMode === "abacus"
-                        ? "🧮"
-                        : "🎲"}
-                  </button>
-                ),
-              )}
+              {(['number', 'abacus', 'random'] as ComplementDisplay[]).map((displayMode) => (
+                <button
+                  key={displayMode}
+                  onClick={() =>
+                    dispatch({
+                      type: 'SET_COMPLEMENT_DISPLAY',
+                      display: displayMode,
+                    })
+                  }
+                  style={{
+                    padding: '8px 16px',
+                    borderRadius: '20px',
+                    border: 'none',
+                    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',
+                  }}
+                >
+                  {displayMode === 'number' ? '123' : displayMode === 'abacus' ? '🧮' : '🎲'}
+                </button>
+              ))}
             </div>
 
             {/* Speed Pills */}
             <div
               style={{
-                display: "flex",
-                gap: "6px",
-                alignItems: "center",
+                display: 'flex',
+                gap: '6px',
+                alignItems: 'center',
                 flex: 1,
-                minWidth: "200px",
-                flexWrap: "wrap",
+                minWidth: '200px',
+                flexWrap: 'wrap',
               }}
             >
               <span
                 style={{
-                  fontSize: "13px",
-                  color: "#94a3b8",
-                  fontWeight: "600",
-                  marginRight: "4px",
+                  fontSize: '13px',
+                  color: '#94a3b8',
+                  fontWeight: '600',
+                  marginRight: '4px',
                 }}
               >
                 Speed:
               </span>
               {(
                 [
-                  "preschool",
-                  "kindergarten",
-                  "relaxed",
-                  "slow",
-                  "normal",
-                  "fast",
-                  "expert",
+                  'preschool',
+                  'kindergarten',
+                  'relaxed',
+                  'slow',
+                  'normal',
+                  'fast',
+                  'expert',
                 ] as TimeoutSetting[]
               ).map((timeout) => (
                 <button
                   key={timeout}
                   onClick={() => handleTimeoutSelect(timeout)}
                   style={{
-                    padding: "6px 12px",
-                    borderRadius: "16px",
-                    border: "none",
+                    padding: '6px 12px',
+                    borderRadius: '16px',
+                    border: 'none',
                     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",
+                        ? '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',
                   }}
                 >
-                  {timeout === "preschool"
-                    ? "Pre"
-                    : timeout === "kindergarten"
-                      ? "K"
+                  {timeout === 'preschool'
+                    ? 'Pre'
+                    : timeout === 'kindergarten'
+                      ? 'K'
                       : timeout.charAt(0).toUpperCase()}
                 </button>
               ))}
@@ -281,59 +264,51 @@ export function GameControls() {
           {/* 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",
+              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>
+            <span style={{ fontSize: '11px', color: '#94a3b8', fontWeight: '600' }}>Preview:</span>
             <div
               style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "10px",
-                fontSize: "20px",
-                fontWeight: "bold",
-                color: "white",
+                display: 'flex',
+                alignItems: 'center',
+                gap: '10px',
+                fontSize: '20px',
+                fontWeight: 'bold',
+                color: 'white',
               }}
             >
               <div
                 style={{
-                  background: "linear-gradient(135deg, #3b82f6, #8b5cf6)",
-                  color: "white",
-                  padding: "2px 10px",
-                  borderRadius: "6px",
+                  background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
+                  color: 'white',
+                  padding: '2px 10px',
+                  borderRadius: '6px',
                 }}
               >
                 ?
               </div>
-              <span style={{ fontSize: "16px", color: "#64748b" }}>+</span>
-              {state.complementDisplay === "number" ? (
+              <span style={{ fontSize: '16px', color: '#64748b' }}>+</span>
+              {state.complementDisplay === 'number' ? (
                 <span>3</span>
-              ) : state.complementDisplay === "abacus" ? (
-                <div style={{ transform: "scale(0.8)" }}>
+              ) : state.complementDisplay === 'abacus' ? (
+                <div style={{ transform: 'scale(0.8)' }}>
                   <AbacusTarget number={3} />
                 </div>
               ) : (
-                <span style={{ fontSize: "14px" }}>🎲</span>
+                <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 style={{ fontSize: '16px', color: '#64748b' }}>=</span>
+              <span style={{ color: '#10b981' }}>
+                {state.mode === 'friends5' ? '5' : state.mode === 'friends10' ? '10' : '?'}
               </span>
             </div>
           </div>
@@ -345,173 +320,161 @@ export function GameControls() {
         data-component="race-cards-container"
         style={{
           flex: 1,
-          padding: "0 20px 20px",
-          display: "flex",
-          flexDirection: "column",
-          gap: "16px",
-          position: "relative",
+          padding: '0 20px 20px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '16px',
+          position: 'relative',
           zIndex: 1,
-          overflow: "auto",
+          overflow: 'auto',
         }}
       >
         {[
           {
-            style: "practice" as GameStyle,
-            emoji: "🏁",
-            title: "Practice Race",
-            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",
+            style: 'practice' as GameStyle,
+            emoji: '🏁',
+            title: 'Practice Race',
+            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',
           },
           {
-            style: "sprint" as GameStyle,
-            emoji: "🚂",
-            title: "Steam Sprint",
-            desc: "High-speed 60-second train journey",
-            gradient: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
-            shadowColor: "rgba(245, 158, 11, 0.5)",
-            accentColor: "#fbbf24",
+            style: 'sprint' as GameStyle,
+            emoji: '🚂',
+            title: 'Steam Sprint',
+            desc: 'High-speed 60-second train journey',
+            gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
+            shadowColor: 'rgba(245, 158, 11, 0.5)',
+            accentColor: '#fbbf24',
           },
           {
-            style: "survival" as GameStyle,
-            emoji: "🔄",
-            title: "Survival Circuit",
-            desc: "Endless laps - beat your best time",
-            gradient: "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
-            shadowColor: "rgba(139, 92, 246, 0.5)",
-            accentColor: "#a78bfa",
+            style: 'survival' as GameStyle,
+            emoji: '🔄',
+            title: 'Survival Circuit',
+            desc: 'Endless laps - beat your best time',
+            gradient: 'linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)',
+            shadowColor: 'rgba(139, 92, 246, 0.5)',
+            accentColor: '#a78bfa',
           },
-        ].map(
-          ({
-            style,
-            emoji,
-            title,
-            desc,
-            gradient,
-            shadowColor,
-            accentColor,
-          }) => (
-            <button
-              key={style}
-              onClick={() => handleStyleSelect(style)}
+        ].map(({ style, emoji, title, desc, gradient, shadowColor, accentColor }) => (
+          <button
+            key={style}
+            onClick={() => handleStyleSelect(style)}
+            style={{
+              position: 'relative',
+              padding: '0',
+              border: 'none',
+              borderRadius: '24px',
+              background: gradient,
+              cursor: 'pointer',
+              transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+              boxShadow: `0 10px 40px ${shadowColor}, 0 0 0 1px rgba(255, 255, 255, 0.1)`,
+              transform: 'translateY(0)',
+              flex: 1,
+              minHeight: '140px',
+              overflow: 'hidden',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.transform = 'translateY(-8px) scale(1.02)'
+              e.currentTarget.style.boxShadow = `0 20px 60px ${shadowColor}, 0 0 0 2px ${accentColor}`
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.transform = 'translateY(0) scale(1)'
+              e.currentTarget.style.boxShadow = `0 10px 40px ${shadowColor}, 0 0 0 1px rgba(255, 255, 255, 0.1)`
+            }}
+          >
+            {/* Shine effect overlay */}
+            <div
               style={{
-                position: "relative",
-                padding: "0",
-                border: "none",
-                borderRadius: "24px",
-                background: gradient,
-                cursor: "pointer",
-                transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                boxShadow: `0 10px 40px ${shadowColor}, 0 0 0 1px rgba(255, 255, 255, 0.1)`,
-                transform: "translateY(0)",
-                flex: 1,
-                minHeight: "140px",
-                overflow: "hidden",
+                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',
               }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.transform =
-                  "translateY(-8px) scale(1.02)";
-                e.currentTarget.style.boxShadow = `0 20px 60px ${shadowColor}, 0 0 0 2px ${accentColor}`;
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.transform = "translateY(0) scale(1)";
-                e.currentTarget.style.boxShadow = `0 10px 40px ${shadowColor}, 0 0 0 1px rgba(255, 255, 255, 0.1)`;
+            />
+
+            <div
+              style={{
+                padding: '28px 32px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                position: 'relative',
+                zIndex: 1,
               }}
             >
-              {/* 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={{
-                  padding: "28px 32px",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  position: "relative",
-                  zIndex: 1,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '20px',
+                  flex: 1,
                 }}
               >
                 <div
                   style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "20px",
-                    flex: 1,
+                    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: "64px",
-                      lineHeight: 1,
-                      filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.3))",
+                      fontSize: '28px',
+                      fontWeight: 'bold',
+                      color: 'white',
+                      marginBottom: '6px',
+                      textShadow: '0 2px 8px rgba(0,0,0,0.3)',
                     }}
                   >
-                    {emoji}
+                    {title}
                   </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)",
-                      }}
-                    >
-                      {title}
-                    </div>
-                    <div
-                      style={{
-                        fontSize: "15px",
-                        color: "rgba(255, 255, 255, 0.9)",
-                        textShadow: "0 1px 4px rgba(0,0,0,0.2)",
-                      }}
-                    >
-                      {desc}
-                    </div>
+                  <div
+                    style={{
+                      fontSize: '15px',
+                      color: 'rgba(255, 255, 255, 0.9)',
+                      textShadow: '0 1px 4px rgba(0,0,0,0.2)',
+                    }}
+                  >
+                    {desc}
                   </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",
-                  }}
-                >
-                  <span>PLAY</span>
-                  <span style={{ fontSize: "24px" }}>▶</span>
-                </div>
               </div>
-            </button>
-          ),
-        )}
+
+              {/* 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',
+                }}
+              >
+                <span>PLAY</span>
+                <span style={{ fontSize: '24px' }}>▶</span>
+              </div>
+            </div>
+          </button>
+        ))}
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/GameCountdown.tsx b/apps/web/src/app/arcade/complement-race/components/GameCountdown.tsx
index fde98797..f38f7aba 100644
--- a/apps/web/src/app/arcade/complement-race/components/GameCountdown.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/GameCountdown.tsx
@@ -1,83 +1,83 @@
-"use client";
+'use client'
 
-import { useEffect, useState } from "react";
-import { useComplementRace } from "@/arcade-games/complement-race/Provider";
-import { useSoundEffects } from "../hooks/useSoundEffects";
+import { useEffect, useState } from 'react'
+import { useComplementRace } from '@/arcade-games/complement-race/Provider'
+import { useSoundEffects } from '../hooks/useSoundEffects'
 
 export function GameCountdown() {
-  const { dispatch } = useComplementRace();
-  const { playSound } = useSoundEffects();
-  const [count, setCount] = useState(3);
-  const [showGo, setShowGo] = useState(false);
+  const { dispatch } = useComplementRace()
+  const { playSound } = useSoundEffects()
+  const [count, setCount] = useState(3)
+  const [showGo, setShowGo] = useState(false)
 
   useEffect(() => {
     const countdownInterval = setInterval(() => {
       setCount((prevCount) => {
         if (prevCount > 1) {
           // Play countdown beep (volume 0.4)
-          playSound("countdown", 0.4);
-          return prevCount - 1;
+          playSound('countdown', 0.4)
+          return prevCount - 1
         } else if (prevCount === 1) {
           // Show GO!
-          setShowGo(true);
+          setShowGo(true)
           // Play race start fanfare (volume 0.6)
-          playSound("race_start", 0.6);
-          return 0;
+          playSound('race_start', 0.6)
+          return 0
         }
-        return prevCount;
-      });
-    }, 1000);
+        return prevCount
+      })
+    }, 1000)
 
-    return () => clearInterval(countdownInterval);
-  }, [playSound]);
+    return () => clearInterval(countdownInterval)
+  }, [playSound])
 
   useEffect(() => {
     if (showGo) {
       // Hide countdown and start game after GO animation
       const timer = setTimeout(() => {
-        dispatch({ type: "BEGIN_GAME" });
-      }, 1000);
+        dispatch({ type: 'BEGIN_GAME' })
+      }, 1000)
 
-      return () => clearTimeout(timer);
+      return () => clearTimeout(timer)
     }
-  }, [showGo, dispatch]);
+  }, [showGo, dispatch])
 
   return (
     <div
       style={{
-        position: "fixed",
+        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)",
+        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",
+          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}
+        {showGo ? 'GO!' : count}
       </div>
 
       {!showGo && (
         <div
           style={{
-            marginTop: "32px",
-            fontSize: "24px",
-            color: "rgba(255, 255, 255, 0.8)",
-            fontWeight: "500",
+            marginTop: '32px',
+            fontSize: '24px',
+            color: 'rgba(255, 255, 255, 0.8)',
+            fontWeight: '500',
           }}
         >
           Get Ready!
@@ -100,5 +100,5 @@ export function GameCountdown() {
         }}
       />
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/GameDisplay.tsx b/apps/web/src/app/arcade/complement-race/components/GameDisplay.tsx
index f51a761f..090b2c41 100644
--- a/apps/web/src/app/arcade/complement-race/components/GameDisplay.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/GameDisplay.tsx
@@ -1,72 +1,63 @@
-"use client";
+'use client'
 
-import { useEffect, useState } from "react";
-import { useComplementRace } from "@/arcade-games/complement-race/Provider";
-import { useAdaptiveDifficulty } from "../hooks/useAdaptiveDifficulty";
-import { useAIRacers } from "../hooks/useAIRacers";
-import { useSoundEffects } from "../hooks/useSoundEffects";
-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 { useEffect, useState } from 'react'
+import { useComplementRace } from '@/arcade-games/complement-race/Provider'
+import { useAdaptiveDifficulty } from '../hooks/useAdaptiveDifficulty'
+import { useAIRacers } from '../hooks/useAIRacers'
+import { useSoundEffects } from '../hooks/useSoundEffects'
+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'
 
-type FeedbackAnimation = "correct" | "incorrect" | null;
+type FeedbackAnimation = 'correct' | 'incorrect' | null
 
 export function GameDisplay() {
-  const { state, dispatch, boostMomentum } = useComplementRace();
-  useAIRacers(); // Activate AI racer updates (not used in sprint mode)
-  const { trackPerformance, getAdaptiveFeedbackMessage } =
-    useAdaptiveDifficulty();
-  const { playSound } = useSoundEffects();
-  const [feedbackAnimation, setFeedbackAnimation] =
-    useState<FeedbackAnimation>(null);
+  const { state, dispatch, boostMomentum } = useComplementRace()
+  useAIRacers() // Activate AI racer updates (not used in sprint mode)
+  const { trackPerformance, getAdaptiveFeedbackMessage } = useAdaptiveDifficulty()
+  const { playSound } = useSoundEffects()
+  const [feedbackAnimation, setFeedbackAnimation] = useState<FeedbackAnimation>(null)
 
   // Clear feedback animation after it plays (line 1996, 2001)
   useEffect(() => {
     if (feedbackAnimation) {
       const timer = setTimeout(() => {
-        setFeedbackAnimation(null);
-      }, 500); // Match animation duration
-      return () => clearTimeout(timer);
+        setFeedbackAnimation(null)
+      }, 500) // Match animation duration
+      return () => clearTimeout(timer)
     }
-  }, [feedbackAnimation]);
+  }, [feedbackAnimation])
 
   // Show adaptive feedback with auto-hide
   useEffect(() => {
     if (state.adaptiveFeedback) {
       const timer = setTimeout(() => {
-        dispatch({ type: "CLEAR_ADAPTIVE_FEEDBACK" });
-      }, 3000);
-      return () => clearTimeout(timer);
+        dispatch({ type: 'CLEAR_ADAPTIVE_FEEDBACK' })
+      }, 3000)
+      return () => clearTimeout(timer)
     }
-  }, [state.adaptiveFeedback, dispatch]);
+  }, [state.adaptiveFeedback, dispatch])
 
   // Check for finish line (player reaches race goal) - only for practice mode
   useEffect(() => {
     if (
       state.correctAnswers >= state.raceGoal &&
       state.isGameActive &&
-      state.style === "practice"
+      state.style === 'practice'
     ) {
       // Play celebration sound (line 14182)
-      playSound("celebration");
+      playSound('celebration')
       // End the game
-      dispatch({ type: "END_RACE" });
+      dispatch({ type: 'END_RACE' })
       // Show results after a short delay
       setTimeout(() => {
-        dispatch({ type: "SHOW_RESULTS" });
-      }, 1500);
+        dispatch({ type: 'SHOW_RESULTS' })
+      }, 1500)
     }
-  }, [
-    state.correctAnswers,
-    state.raceGoal,
-    state.isGameActive,
-    state.style,
-    dispatch,
-    playSound,
-  ]);
+  }, [state.correctAnswers, state.raceGoal, state.isGameActive, state.style, dispatch, playSound])
 
   // For survival mode (endless circuit), track laps but never end
   // For sprint mode (steam sprint), end after 60 seconds (will implement later)
@@ -76,114 +67,106 @@ export function GameDisplay() {
     const handleKeyPress = (e: KeyboardEvent) => {
       // Only process number keys
       if (/^[0-9]$/.test(e.key)) {
-        const newInput = state.currentInput + e.key;
-        dispatch({ type: "UPDATE_INPUT", input: newInput });
+        const newInput = state.currentInput + e.key
+        dispatch({ type: 'UPDATE_INPUT', input: newInput })
 
         // Check if answer is complete
         if (state.currentQuestion) {
-          const answer = parseInt(newInput, 10);
-          const correctAnswer = state.currentQuestion.correctAnswer;
+          const answer = parseInt(newInput, 10)
+          const correctAnswer = state.currentQuestion.correctAnswer
 
           // If we have enough digits to match the answer, submit
           if (newInput.length >= correctAnswer.toString().length) {
-            const responseTime = Date.now() - state.questionStartTime;
-            const isCorrect = answer === correctAnswer;
-            const pairKey = `${state.currentQuestion.number}_${state.currentQuestion.correctAnswer}_${state.currentQuestion.targetSum}`;
+            const responseTime = Date.now() - state.questionStartTime
+            const isCorrect = answer === correctAnswer
+            const pairKey = `${state.currentQuestion.number}_${state.currentQuestion.correctAnswer}_${state.currentQuestion.targetSum}`
 
             if (isCorrect) {
               // Correct answer
-              dispatch({ type: "SUBMIT_ANSWER", answer });
-              trackPerformance(true, responseTime);
+              dispatch({ type: 'SUBMIT_ANSWER', answer })
+              trackPerformance(true, responseTime)
 
               // Trigger correct answer animation (line 1996)
-              setFeedbackAnimation("correct");
+              setFeedbackAnimation('correct')
 
               // Play appropriate sound based on performance (from web_generator.py lines 11530-11542)
-              const newStreak = state.streak + 1;
+              const newStreak = state.streak + 1
               if (newStreak > 0 && newStreak % 5 === 0) {
                 // Epic streak sound for every 5th correct answer
-                playSound("streak");
+                playSound('streak')
               } else if (responseTime < 800) {
                 // Whoosh sound for very fast responses (under 800ms)
-                playSound("whoosh");
+                playSound('whoosh')
               } else if (responseTime < 1200 && state.streak >= 3) {
                 // Combo sound for rapid answers while on a streak
-                playSound("combo");
+                playSound('combo')
               } else {
                 // Regular correct sound
-                playSound("correct");
+                playSound('correct')
               }
 
               // Boost momentum for sprint mode
-              if (state.style === "sprint") {
-                boostMomentum(true);
+              if (state.style === 'sprint') {
+                boostMomentum(true)
 
                 // Play train whistle for milestones in sprint mode (line 13222-13235)
                 if (newStreak >= 5 && newStreak % 3 === 0) {
                   // Major milestone - play train whistle
                   setTimeout(() => {
-                    playSound("train_whistle", 0.4);
-                  }, 200);
+                    playSound('train_whistle', 0.4)
+                  }, 200)
                 } else if (state.momentum >= 90) {
                   // High momentum celebration - occasional whistle
                   if (Math.random() < 0.3) {
                     setTimeout(() => {
-                      playSound("train_whistle", 0.25);
-                    }, 150);
+                      playSound('train_whistle', 0.25)
+                    }, 150)
                   }
                 }
               }
 
               // Show adaptive feedback
-              const feedback = getAdaptiveFeedbackMessage(
-                pairKey,
-                true,
-                responseTime,
-              );
+              const feedback = getAdaptiveFeedbackMessage(pairKey, true, responseTime)
               if (feedback) {
-                dispatch({ type: "SHOW_ADAPTIVE_FEEDBACK", feedback });
+                dispatch({ type: 'SHOW_ADAPTIVE_FEEDBACK', feedback })
               }
 
-              dispatch({ type: "NEXT_QUESTION" });
+              dispatch({ type: 'NEXT_QUESTION' })
             } else {
               // Incorrect answer
-              trackPerformance(false, responseTime);
+              trackPerformance(false, responseTime)
 
               // Trigger incorrect answer animation (line 2001)
-              setFeedbackAnimation("incorrect");
+              setFeedbackAnimation('incorrect')
 
               // Play incorrect sound (from web_generator.py line 11589)
-              playSound("incorrect");
+              playSound('incorrect')
 
               // Reduce momentum for sprint mode
-              if (state.style === "sprint") {
-                boostMomentum(false);
+              if (state.style === 'sprint') {
+                boostMomentum(false)
               }
 
               // Show adaptive feedback
-              const feedback = getAdaptiveFeedbackMessage(
-                pairKey,
-                false,
-                responseTime,
-              );
+              const feedback = getAdaptiveFeedbackMessage(pairKey, false, responseTime)
               if (feedback) {
-                dispatch({ type: "SHOW_ADAPTIVE_FEEDBACK", feedback });
+                dispatch({ type: 'SHOW_ADAPTIVE_FEEDBACK', feedback })
               }
 
-              dispatch({ type: "UPDATE_INPUT", input: "" });
+              dispatch({ type: 'UPDATE_INPUT', input: '' })
             }
           }
         }
-      } else if (e.key === "Backspace") {
+      } else if (e.key === 'Backspace') {
         dispatch({
-          type: "UPDATE_INPUT",
+          type: 'UPDATE_INPUT',
           input: state.currentInput.slice(0, -1),
-        });
+        })
       }
-    };
+    }
 
-    window.addEventListener("keydown", handleKeyPress);
-    return () => window.removeEventListener("keydown", handleKeyPress);
+    window.addEventListener('keydown', handleKeyPress)
+    return () => window.removeEventListener('keydown', handleKeyPress)
   }, [
     state.currentInput,
     state.currentQuestion,
@@ -196,34 +179,34 @@ export function GameDisplay() {
     boostMomentum,
     playSound,
     state.momentum,
-  ]);
+  ])
 
   // Handle route celebration continue
   const handleContinueToNextRoute = () => {
-    const nextRoute = state.currentRoute + 1;
+    const nextRoute = state.currentRoute + 1
 
     // Start new route (this also hides celebration)
     dispatch({
-      type: "START_NEW_ROUTE",
+      type: 'START_NEW_ROUTE',
       routeNumber: nextRoute,
       stations: state.stations, // Keep same stations for now
-    });
+    })
 
     // Generate new passengers
-    const newPassengers = generatePassengers(state.stations);
-    dispatch({ type: "GENERATE_PASSENGERS", passengers: newPassengers });
-  };
+    const newPassengers = generatePassengers(state.stations)
+    dispatch({ type: 'GENERATE_PASSENGERS', passengers: newPassengers })
+  }
 
-  if (!state.currentQuestion) return null;
+  if (!state.currentQuestion) return null
 
   return (
     <div
       data-component="game-display"
       style={{
         flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        width: "100%",
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
       }}
     >
       {/* Adaptive Feedback */}
@@ -231,21 +214,21 @@ export function GameDisplay() {
         <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",
+            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",
+            animation: 'slideDown 0.3s ease-out',
+            maxWidth: '600px',
+            textAlign: 'center',
           }}
         >
           {state.adaptiveFeedback.message}
@@ -253,84 +236,84 @@ export function GameDisplay() {
       )}
 
       {/* Stats Header - constrained width, hidden for sprint mode */}
-      {state.style !== "sprint" && (
+      {state.style !== 'sprint' && (
         <div
           data-component="stats-container"
           style={{
-            maxWidth: "1200px",
-            margin: "0 auto",
-            width: "100%",
-            padding: "0 20px",
-            marginTop: "10px",
+            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)",
+              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 data-stat="score" style={{ textAlign: 'center' }}>
               <div
                 style={{
-                  color: "#6b7280",
-                  fontSize: "14px",
-                  marginBottom: "4px",
+                  color: '#6b7280',
+                  fontSize: '14px',
+                  marginBottom: '4px',
                 }}
               >
                 Score
               </div>
               <div
                 style={{
-                  fontWeight: "bold",
-                  fontSize: "24px",
-                  color: "#3b82f6",
+                  fontWeight: 'bold',
+                  fontSize: '24px',
+                  color: '#3b82f6',
                 }}
               >
                 {state.score}
               </div>
             </div>
-            <div data-stat="streak" style={{ textAlign: "center" }}>
+            <div data-stat="streak" style={{ textAlign: 'center' }}>
               <div
                 style={{
-                  color: "#6b7280",
-                  fontSize: "14px",
-                  marginBottom: "4px",
+                  color: '#6b7280',
+                  fontSize: '14px',
+                  marginBottom: '4px',
                 }}
               >
                 Streak
               </div>
               <div
                 style={{
-                  fontWeight: "bold",
-                  fontSize: "24px",
-                  color: "#10b981",
+                  fontWeight: 'bold',
+                  fontSize: '24px',
+                  color: '#10b981',
                 }}
               >
                 {state.streak} 🔥
               </div>
             </div>
-            <div data-stat="progress" style={{ textAlign: "center" }}>
+            <div data-stat="progress" style={{ textAlign: 'center' }}>
               <div
                 style={{
-                  color: "#6b7280",
-                  fontSize: "14px",
-                  marginBottom: "4px",
+                  color: '#6b7280',
+                  fontSize: '14px',
+                  marginBottom: '4px',
                 }}
               >
                 Progress
               </div>
               <div
                 style={{
-                  fontWeight: "bold",
-                  fontSize: "24px",
-                  color: "#f59e0b",
+                  fontWeight: 'bold',
+                  fontSize: '24px',
+                  color: '#f59e0b',
                 }}
               >
                 {state.correctAnswers}/{state.raceGoal}
@@ -344,28 +327,28 @@ export function GameDisplay() {
       <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",
+          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" ? (
+        {state.style === 'survival' ? (
           <CircularTrack
             playerProgress={state.correctAnswers}
             playerLap={state.playerLap}
             aiRacers={state.aiRacers}
             aiLaps={state.aiLaps}
           />
-        ) : state.style === "sprint" ? (
+        ) : state.style === 'sprint' ? (
           <SteamTrainJourney
             momentum={state.momentum}
             trainPosition={state.trainPosition}
@@ -385,67 +368,66 @@ export function GameDisplay() {
       </div>
 
       {/* Question Display - only for non-sprint modes */}
-      {state.style !== "sprint" && (
+      {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",
+            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)",
+              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",
+                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)",
+                  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 || "?"}
+                {state.currentInput || '?'}
               </span>
-              <span style={{ color: "#6b7280" }}>+</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",
+                    transform: 'scale(2.4) translateY(8%)',
+                    transformOrigin: 'center center',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
                   }}
                 >
                   <AbacusTarget number={state.currentQuestion.number} />
@@ -453,17 +435,15 @@ export function GameDisplay() {
               ) : (
                 <span>{state.currentQuestion.number}</span>
               )}
-              <span style={{ color: "#6b7280" }}>=</span>
-              <span style={{ color: "#10b981" }}>
-                {state.currentQuestion.targetSum}
-              </span>
+              <span style={{ color: '#6b7280' }}>=</span>
+              <span style={{ color: '#10b981' }}>{state.currentQuestion.targetSum}</span>
             </div>
           </div>
         </div>
       )}
 
       {/* Route Celebration Modal */}
-      {state.showRouteCelebration && state.style === "sprint" && (
+      {state.showRouteCelebration && state.style === 'sprint' && (
         <RouteCelebration
           completedRouteNumber={state.currentRoute}
           nextRouteNumber={state.currentRoute + 1}
@@ -471,5 +451,5 @@ export function GameDisplay() {
         />
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/GameIntro.tsx b/apps/web/src/app/arcade/complement-race/components/GameIntro.tsx
index 34cb378a..847ae931 100644
--- a/apps/web/src/app/arcade/complement-race/components/GameIntro.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/GameIntro.tsx
@@ -1,32 +1,32 @@
-"use client";
+'use client'
 
-import { useComplementRace } from "@/arcade-games/complement-race/Provider";
+import { useComplementRace } from '@/arcade-games/complement-race/Provider'
 
 export function GameIntro() {
-  const { dispatch } = useComplementRace();
+  const { dispatch } = useComplementRace()
 
   const handleStartClick = () => {
-    dispatch({ type: "SHOW_CONTROLS" });
-  };
+    dispatch({ type: 'SHOW_CONTROLS' })
+  }
 
   return (
     <div
       style={{
-        textAlign: "center",
-        padding: "40px 20px",
-        maxWidth: "800px",
-        margin: "20px auto 0",
+        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",
+          fontSize: '48px',
+          fontWeight: 'bold',
+          marginBottom: '16px',
+          background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+          backgroundClip: 'text',
         }}
       >
         Speed Complement Race
@@ -34,32 +34,32 @@ export function GameIntro() {
 
       <p
         style={{
-          fontSize: "18px",
-          color: "#6b7280",
-          marginBottom: "32px",
-          lineHeight: "1.6",
+          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.
+        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",
+          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",
+            fontSize: '24px',
+            fontWeight: 'bold',
+            marginBottom: '16px',
+            color: '#1f2937',
           }}
         >
           How to Play
@@ -67,35 +67,35 @@ export function GameIntro() {
 
         <ul
           style={{
-            listStyle: "none",
+            listStyle: 'none',
             padding: 0,
             margin: 0,
-            display: "flex",
-            flexDirection: "column",
-            gap: "12px",
+            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" }}>
+          <li style={{ display: 'flex', gap: '12px', alignItems: 'start' }}>
+            <span style={{ fontSize: '24px' }}>🎯</span>
+            <span style={{ color: '#4b5563', lineHeight: '1.6' }}>
               Find the complement number to reach the target sum
             </span>
           </li>
-          <li style={{ display: "flex", gap: "12px", alignItems: "start" }}>
-            <span style={{ fontSize: "24px" }}>⚡</span>
-            <span style={{ color: "#4b5563", lineHeight: "1.6" }}>
+          <li style={{ display: 'flex', gap: '12px', alignItems: 'start' }}>
+            <span style={{ fontSize: '24px' }}>⚡</span>
+            <span style={{ color: '#4b5563', lineHeight: '1.6' }}>
               Type your answer quickly to move forward in the race
             </span>
           </li>
-          <li style={{ display: "flex", gap: "12px", alignItems: "start" }}>
-            <span style={{ fontSize: "24px" }}>🤖</span>
-            <span style={{ color: "#4b5563", lineHeight: "1.6" }}>
+          <li style={{ display: 'flex', gap: '12px', alignItems: 'start' }}>
+            <span style={{ fontSize: '24px' }}>🤖</span>
+            <span style={{ color: '#4b5563', lineHeight: '1.6' }}>
               Compete against Swift AI and Math Bot with unique personalities
             </span>
           </li>
-          <li style={{ display: "flex", gap: "12px", alignItems: "start" }}>
-            <span style={{ fontSize: "24px" }}>🏆</span>
-            <span style={{ color: "#4b5563", lineHeight: "1.6" }}>
+          <li style={{ display: 'flex', gap: '12px', alignItems: 'start' }}>
+            <span style={{ fontSize: '24px' }}>🏆</span>
+            <span style={{ color: '#4b5563', lineHeight: '1.6' }}>
               Earn points for correct answers and build up your streak
             </span>
           </li>
@@ -105,30 +105,28 @@ export function GameIntro() {
       <button
         onClick={handleStartClick}
         style={{
-          background: "linear-gradient(135deg, #10b981, #059669)",
-          color: "white",
-          border: "none",
-          borderRadius: "12px",
-          padding: "16px 48px",
-          fontSize: "20px",
-          fontWeight: "bold",
-          cursor: "pointer",
-          boxShadow: "0 4px 12px rgba(16, 185, 129, 0.3)",
-          transition: "all 0.2s ease",
+          background: 'linear-gradient(135deg, #10b981, #059669)',
+          color: 'white',
+          border: 'none',
+          borderRadius: '12px',
+          padding: '16px 48px',
+          fontSize: '20px',
+          fontWeight: 'bold',
+          cursor: 'pointer',
+          boxShadow: '0 4px 12px rgba(16, 185, 129, 0.3)',
+          transition: 'all 0.2s ease',
         }}
         onMouseEnter={(e) => {
-          e.currentTarget.style.transform = "translateY(-2px)";
-          e.currentTarget.style.boxShadow =
-            "0 6px 16px rgba(16, 185, 129, 0.4)";
+          e.currentTarget.style.transform = 'translateY(-2px)'
+          e.currentTarget.style.boxShadow = '0 6px 16px rgba(16, 185, 129, 0.4)'
         }}
         onMouseLeave={(e) => {
-          e.currentTarget.style.transform = "translateY(0)";
-          e.currentTarget.style.boxShadow =
-            "0 4px 12px rgba(16, 185, 129, 0.3)";
+          e.currentTarget.style.transform = 'translateY(0)'
+          e.currentTarget.style.boxShadow = '0 4px 12px rgba(16, 185, 129, 0.3)'
         }}
       >
         Start Racing!
       </button>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/GameResults.tsx b/apps/web/src/app/arcade/complement-race/components/GameResults.tsx
index e5cbd978..798b7753 100644
--- a/apps/web/src/app/arcade/complement-race/components/GameResults.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/GameResults.tsx
@@ -1,182 +1,161 @@
-"use client";
+'use client'
 
-import { useComplementRace } from "@/arcade-games/complement-race/Provider";
+import { useComplementRace } from '@/arcade-games/complement-race/Provider'
 
 export function GameResults() {
-  const { state, dispatch } = useComplementRace();
+  const { state, dispatch } = useComplementRace()
 
   // Determine race outcome
-  const playerWon = state.aiRacers.every(
-    (racer) => state.correctAnswers > racer.position,
-  );
+  const playerWon = state.aiRacers.every((racer) => state.correctAnswers > racer.position)
   const playerPosition =
-    state.aiRacers.filter((racer) => racer.position >= state.correctAnswers)
-      .length + 1;
+    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",
+        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",
+          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",
+            fontSize: '64px',
+            marginBottom: '16px',
           }}
         >
-          {playerWon
-            ? "🏆"
-            : playerPosition === 2
-              ? "🥈"
-              : playerPosition === 3
-                ? "🥉"
-                : "🎯"}
+          {playerWon ? '🏆' : playerPosition === 2 ? '🥈' : playerPosition === 3 ? '🥉' : '🎯'}
         </div>
 
         <h1
           style={{
-            fontSize: "36px",
-            fontWeight: "bold",
-            color: "#1f2937",
-            marginBottom: "8px",
+            fontSize: '36px',
+            fontWeight: 'bold',
+            color: '#1f2937',
+            marginBottom: '8px',
           }}
         >
-          {playerWon
-            ? "Victory!"
-            : `${playerPosition}${getOrdinalSuffix(playerPosition)} Place`}
+          {playerWon ? 'Victory!' : `${playerPosition}${getOrdinalSuffix(playerPosition)} Place`}
         </h1>
 
         <p
           style={{
-            fontSize: "18px",
-            color: "#6b7280",
-            marginBottom: "32px",
+            fontSize: '18px',
+            color: '#6b7280',
+            marginBottom: '32px',
           }}
         >
-          {playerWon ? "You beat all the AI racers!" : `You finished the race!`}
+          {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",
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, 1fr)',
+            gap: '16px',
+            marginBottom: '32px',
           }}
         >
           <div
             style={{
-              background: "#f3f4f6",
-              borderRadius: "12px",
-              padding: "16px",
+              background: '#f3f4f6',
+              borderRadius: '12px',
+              padding: '16px',
             }}
           >
             <div
               style={{
-                color: "#6b7280",
-                fontSize: "14px",
-                marginBottom: "4px",
+                color: '#6b7280',
+                fontSize: '14px',
+                marginBottom: '4px',
               }}
             >
               Final Score
             </div>
-            <div
-              style={{ fontSize: "28px", fontWeight: "bold", color: "#3b82f6" }}
-            >
+            <div style={{ fontSize: '28px', fontWeight: 'bold', color: '#3b82f6' }}>
               {state.score}
             </div>
           </div>
 
           <div
             style={{
-              background: "#f3f4f6",
-              borderRadius: "12px",
-              padding: "16px",
+              background: '#f3f4f6',
+              borderRadius: '12px',
+              padding: '16px',
             }}
           >
             <div
               style={{
-                color: "#6b7280",
-                fontSize: "14px",
-                marginBottom: "4px",
+                color: '#6b7280',
+                fontSize: '14px',
+                marginBottom: '4px',
               }}
             >
               Best Streak
             </div>
-            <div
-              style={{ fontSize: "28px", fontWeight: "bold", color: "#10b981" }}
-            >
+            <div style={{ fontSize: '28px', fontWeight: 'bold', color: '#10b981' }}>
               {state.bestStreak} 🔥
             </div>
           </div>
 
           <div
             style={{
-              background: "#f3f4f6",
-              borderRadius: "12px",
-              padding: "16px",
+              background: '#f3f4f6',
+              borderRadius: '12px',
+              padding: '16px',
             }}
           >
             <div
               style={{
-                color: "#6b7280",
-                fontSize: "14px",
-                marginBottom: "4px",
+                color: '#6b7280',
+                fontSize: '14px',
+                marginBottom: '4px',
               }}
             >
               Total Questions
             </div>
-            <div
-              style={{ fontSize: "28px", fontWeight: "bold", color: "#f59e0b" }}
-            >
+            <div style={{ fontSize: '28px', fontWeight: 'bold', color: '#f59e0b' }}>
               {state.totalQuestions}
             </div>
           </div>
 
           <div
             style={{
-              background: "#f3f4f6",
-              borderRadius: "12px",
-              padding: "16px",
+              background: '#f3f4f6',
+              borderRadius: '12px',
+              padding: '16px',
             }}
           >
             <div
               style={{
-                color: "#6b7280",
-                fontSize: "14px",
-                marginBottom: "4px",
+                color: '#6b7280',
+                fontSize: '14px',
+                marginBottom: '4px',
               }}
             >
               Accuracy
             </div>
-            <div
-              style={{ fontSize: "28px", fontWeight: "bold", color: "#8b5cf6" }}
-            >
+            <div style={{ fontSize: '28px', fontWeight: 'bold', color: '#8b5cf6' }}>
               {state.totalQuestions > 0
-                ? Math.round(
-                    (state.correctAnswers / state.totalQuestions) * 100,
-                  )
+                ? Math.round((state.correctAnswers / state.totalQuestions) * 100)
                 : 0}
               %
             </div>
@@ -186,23 +165,23 @@ export function GameResults() {
         {/* Final Standings */}
         <div
           style={{
-            marginBottom: "32px",
-            textAlign: "left",
+            marginBottom: '32px',
+            textAlign: 'left',
           }}
         >
           <h3
             style={{
-              fontSize: "18px",
-              fontWeight: "bold",
-              color: "#1f2937",
-              marginBottom: "12px",
+              fontSize: '18px',
+              fontWeight: 'bold',
+              color: '#1f2937',
+              marginBottom: '12px',
             }}
           >
             Final Standings
           </h3>
 
           {[
-            { name: "You", position: state.correctAnswers, icon: "👤" },
+            { name: 'You', position: state.correctAnswers, icon: '👤' },
             ...state.aiRacers.map((racer) => ({
               name: racer.name,
               position: racer.position,
@@ -214,33 +193,31 @@ export function GameResults() {
               <div
                 key={racer.name}
                 style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  padding: "12px",
-                  background: racer.name === "You" ? "#eff6ff" : "#f9fafb",
-                  borderRadius: "8px",
-                  marginBottom: "8px",
-                  border: racer.name === "You" ? "2px solid #3b82f6" : "none",
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '12px',
+                  background: racer.name === 'You' ? '#eff6ff' : '#f9fafb',
+                  borderRadius: '8px',
+                  marginBottom: '8px',
+                  border: racer.name === 'You' ? '2px solid #3b82f6' : 'none',
                 }}
               >
-                <div
-                  style={{ display: "flex", alignItems: "center", gap: "12px" }}
-                >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                   <div
                     style={{
-                      fontSize: "24px",
-                      fontWeight: "bold",
-                      color: "#9ca3af",
-                      minWidth: "32px",
+                      fontSize: '24px',
+                      fontWeight: 'bold',
+                      color: '#9ca3af',
+                      minWidth: '32px',
                     }}
                   >
                     #{index + 1}
                   </div>
-                  <div style={{ fontSize: "20px" }}>{racer.icon}</div>
+                  <div style={{ fontSize: '20px' }}>{racer.icon}</div>
                   <div
                     style={{
-                      fontWeight: racer.name === "You" ? "bold" : "normal",
+                      fontWeight: racer.name === 'You' ? 'bold' : 'normal',
                     }}
                   >
                     {racer.name}
@@ -248,9 +225,9 @@ export function GameResults() {
                 </div>
                 <div
                   style={{
-                    fontSize: "18px",
-                    fontWeight: "bold",
-                    color: "#6b7280",
+                    fontSize: '18px',
+                    fontWeight: 'bold',
+                    color: '#6b7280',
                   }}
                 >
                   {Math.floor(racer.position)}
@@ -262,30 +239,30 @@ export function GameResults() {
         {/* Buttons */}
         <div
           style={{
-            display: "flex",
-            gap: "12px",
+            display: 'flex',
+            gap: '12px',
           }}
         >
           <button
-            onClick={() => dispatch({ type: "RESET_GAME" })}
+            onClick={() => dispatch({ type: 'RESET_GAME' })}
             style={{
               flex: 1,
-              background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-              color: "white",
-              padding: "16px 32px",
-              borderRadius: "12px",
-              fontSize: "18px",
-              fontWeight: "bold",
-              border: "none",
-              cursor: "pointer",
-              transition: "transform 0.2s",
-              boxShadow: "0 4px 12px rgba(102, 126, 234, 0.4)",
+              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+              color: 'white',
+              padding: '16px 32px',
+              borderRadius: '12px',
+              fontSize: '18px',
+              fontWeight: 'bold',
+              border: 'none',
+              cursor: 'pointer',
+              transition: 'transform 0.2s',
+              boxShadow: '0 4px 12px rgba(102, 126, 234, 0.4)',
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.transform = "translateY(-2px)";
+              e.currentTarget.style.transform = 'translateY(-2px)'
             }}
             onMouseLeave={(e) => {
-              e.currentTarget.style.transform = "translateY(0)";
+              e.currentTarget.style.transform = 'translateY(0)'
             }}
           >
             Race Again
@@ -293,12 +270,12 @@ export function GameResults() {
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 function getOrdinalSuffix(num: number): string {
-  if (num === 1) return "st";
-  if (num === 2) return "nd";
-  if (num === 3) return "rd";
-  return "th";
+  if (num === 1) return 'st'
+  if (num === 2) return 'nd'
+  if (num === 3) return 'rd'
+  return 'th'
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/PassengerCard.tsx b/apps/web/src/app/arcade/complement-race/components/PassengerCard.tsx
index 63ceeadf..8c554ca9 100644
--- a/apps/web/src/app/arcade/complement-race/components/PassengerCard.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/PassengerCard.tsx
@@ -1,12 +1,12 @@
-"use client";
+'use client'
 
-import { memo } from "react";
-import type { Passenger, Station } from "@/arcade-games/complement-race/types";
+import { memo } from 'react'
+import type { Passenger, Station } from '@/arcade-games/complement-race/types'
 
 interface PassengerCardProps {
-  passenger: Passenger;
-  originStation: Station | undefined;
-  destinationStation: Station | undefined;
+  passenger: Passenger
+  originStation: Station | undefined
+  destinationStation: Station | undefined
 }
 
 export const PassengerCard = memo(function PassengerCard({
@@ -14,84 +14,83 @@ export const PassengerCard = memo(function PassengerCard({
   originStation,
   destinationStation,
 }: PassengerCardProps) {
-  if (!destinationStation || !originStation) return null;
+  if (!destinationStation || !originStation) return null
 
   // Vintage train station colors
   // Arcade room multiplayer uses claimedBy/deliveredBy instead of isBoarded/isDelivered
-  const isBoarded = passenger.claimedBy !== null;
-  const isDelivered = passenger.deliveredBy !== null;
+  const isBoarded = passenger.claimedBy !== null
+  const isDelivered = passenger.deliveredBy !== null
 
   const bgColor = isDelivered
-    ? "#1a3a1a" // Dark green for delivered
+    ? '#1a3a1a' // Dark green for delivered
     : !isBoarded
-      ? "#2a2419" // Dark brown/sepia for waiting
+      ? '#2a2419' // Dark brown/sepia for waiting
       : passenger.isUrgent
-        ? "#3a2419" // Dark red-brown for urgent
-        : "#1a2a3a"; // Dark blue for aboard
+        ? '#3a2419' // Dark red-brown for urgent
+        : '#1a2a3a' // Dark blue for aboard
 
   const accentColor = isDelivered
-    ? "#4ade80" // Green
+    ? '#4ade80' // Green
     : !isBoarded
-      ? "#d4af37" // Gold for waiting
+      ? '#d4af37' // Gold for waiting
       : passenger.isUrgent
-        ? "#ff6b35" // Orange-red for urgent
-        : "#60a5fa"; // Blue for aboard
+        ? '#ff6b35' // Orange-red for urgent
+        : '#60a5fa' // Blue for aboard
 
-  const borderColor =
-    passenger.isUrgent && isBoarded && !isDelivered ? "#ff6b35" : "#d4af37";
+  const borderColor = passenger.isUrgent && isBoarded && !isDelivered ? '#ff6b35' : '#d4af37'
 
   return (
     <div
       style={{
         background: bgColor,
         border: `2px solid ${borderColor}`,
-        borderRadius: "4px",
-        padding: "8px 10px",
-        minWidth: "220px",
-        maxWidth: "280px",
+        borderRadius: '4px',
+        padding: '8px 10px',
+        minWidth: '220px',
+        maxWidth: '280px',
         boxShadow:
           passenger.isUrgent && !isDelivered && isBoarded
-            ? "0 0 16px rgba(255, 107, 53, 0.5)"
-            : "0 4px 12px rgba(0, 0, 0, 0.4)",
-        position: "relative",
+            ? '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 && !isDelivered && isBoarded
-            ? "urgentFlicker 1.5s ease-in-out infinite"
-            : "none",
-        transition: "all 0.3s ease",
+            ? '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",
+          display: 'flex',
+          alignItems: 'flex-start',
+          justifyContent: 'space-between',
+          marginBottom: '6px',
           borderBottom: `1px solid ${accentColor}33`,
-          paddingBottom: "4px",
-          paddingRight: "42px", // Make room for points badge
+          paddingBottom: '4px',
+          paddingRight: '42px', // Make room for points badge
         }}
       >
         <div
           style={{
-            display: "flex",
-            alignItems: "center",
-            gap: "6px",
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
             flex: 1,
           }}
         >
-          <div style={{ fontSize: "20px", lineHeight: "1" }}>
-            {isDelivered ? "✅" : passenger.avatar}
+          <div style={{ fontSize: '20px', lineHeight: '1' }}>
+            {isDelivered ? '✅' : passenger.avatar}
           </div>
           <div
             style={{
-              fontSize: "11px",
-              fontWeight: "bold",
+              fontSize: '11px',
+              fontWeight: 'bold',
               color: accentColor,
-              letterSpacing: "0.5px",
-              textTransform: "uppercase",
+              letterSpacing: '0.5px',
+              textTransform: 'uppercase',
             }}
           >
             {passenger.name}
@@ -101,59 +100,57 @@ export const PassengerCard = memo(function PassengerCard({
         {/* Status indicator */}
         <div
           style={{
-            fontSize: "9px",
+            fontSize: '9px',
             color: accentColor,
-            fontWeight: "bold",
-            letterSpacing: "0.5px",
+            fontWeight: 'bold',
+            letterSpacing: '0.5px',
             background: `${accentColor}22`,
-            padding: "2px 6px",
-            borderRadius: "2px",
+            padding: '2px 6px',
+            borderRadius: '2px',
             border: `1px solid ${accentColor}66`,
-            whiteSpace: "nowrap",
-            marginTop: "0",
+            whiteSpace: 'nowrap',
+            marginTop: '0',
           }}
         >
-          {isDelivered ? "DLVRD" : isBoarded ? "BOARD" : "WAIT"}
+          {isDelivered ? 'DLVRD' : isBoarded ? 'BOARD' : 'WAIT'}
         </div>
       </div>
 
       {/* Route information */}
       <div
         style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "3px",
-          fontSize: "10px",
-          color: "#e8d4a0",
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '3px',
+          fontSize: '10px',
+          color: '#e8d4a0',
         }}
       >
         {/* From station */}
         <div
           style={{
-            display: "flex",
-            alignItems: "center",
-            gap: "6px",
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
           }}
         >
           <span
             style={{
               color: accentColor,
-              fontSize: "8px",
-              fontWeight: "bold",
-              width: "28px",
-              letterSpacing: "0.3px",
+              fontSize: '8px',
+              fontWeight: 'bold',
+              width: '28px',
+              letterSpacing: '0.3px',
             }}
           >
             FROM:
           </span>
-          <span style={{ fontSize: "14px", lineHeight: "1" }}>
-            {originStation.icon}
-          </span>
+          <span style={{ fontSize: '14px', lineHeight: '1' }}>{originStation.icon}</span>
           <span
             style={{
-              fontWeight: "600",
-              fontSize: "10px",
-              letterSpacing: "0.3px",
+              fontWeight: '600',
+              fontSize: '10px',
+              letterSpacing: '0.3px',
             }}
           >
             {originStation.name}
@@ -163,30 +160,28 @@ export const PassengerCard = memo(function PassengerCard({
         {/* To station */}
         <div
           style={{
-            display: "flex",
-            alignItems: "center",
-            gap: "6px",
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
           }}
         >
           <span
             style={{
               color: accentColor,
-              fontSize: "8px",
-              fontWeight: "bold",
-              width: "28px",
-              letterSpacing: "0.3px",
+              fontSize: '8px',
+              fontWeight: 'bold',
+              width: '28px',
+              letterSpacing: '0.3px',
             }}
           >
             TO:
           </span>
-          <span style={{ fontSize: "14px", lineHeight: "1" }}>
-            {destinationStation.icon}
-          </span>
+          <span style={{ fontSize: '14px', lineHeight: '1' }}>{destinationStation.icon}</span>
           <span
             style={{
-              fontWeight: "600",
-              fontSize: "10px",
-              letterSpacing: "0.3px",
+              fontWeight: '600',
+              fontSize: '10px',
+              letterSpacing: '0.3px',
             }}
           >
             {destinationStation.name}
@@ -198,20 +193,20 @@ export const PassengerCard = memo(function PassengerCard({
       {!isDelivered && (
         <div
           style={{
-            position: "absolute",
-            top: "6px",
-            right: "6px",
+            position: 'absolute',
+            top: '6px',
+            right: '6px',
             background: `${accentColor}33`,
             border: `1px solid ${accentColor}`,
-            borderRadius: "2px",
-            padding: "2px 6px",
-            fontSize: "10px",
-            fontWeight: "bold",
+            borderRadius: '2px',
+            padding: '2px 6px',
+            fontSize: '10px',
+            fontWeight: 'bold',
             color: accentColor,
-            letterSpacing: "0.5px",
+            letterSpacing: '0.5px',
           }}
         >
-          {passenger.isUrgent ? "+20" : "+10"}
+          {passenger.isUrgent ? '+20' : '+10'}
         </div>
       )}
 
@@ -219,12 +214,12 @@ export const PassengerCard = memo(function PassengerCard({
       {passenger.isUrgent && !isDelivered && 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))",
+            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))',
           }}
         >
           ⚠️
@@ -253,5 +248,5 @@ export const PassengerCard = memo(function PassengerCard({
         }
       `}</style>
     </div>
-  );
-});
+  )
+})
diff --git a/apps/web/src/app/arcade/complement-race/components/PressureGauge.tsx b/apps/web/src/app/arcade/complement-race/components/PressureGauge.tsx
index e01d0885..a50d4ff3 100644
--- a/apps/web/src/app/arcade/complement-race/components/PressureGauge.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/PressureGauge.tsx
@@ -1,18 +1,18 @@
-"use client";
+'use client'
 
-import { animated, useSpring } from "@react-spring/web";
-import { AbacusReact } from "@soroban/abacus-react";
-import { useAbacusSettings } from "@/hooks/useAbacusSettings";
+import { animated, useSpring } from '@react-spring/web'
+import { AbacusReact } from '@soroban/abacus-react'
+import { useAbacusSettings } from '@/hooks/useAbacusSettings'
 
 interface PressureGaugeProps {
-  pressure: number; // 0-150 PSI
+  pressure: number // 0-150 PSI
 }
 
 export function PressureGauge({ pressure }: PressureGaugeProps) {
   // Get native abacus numbers setting
-  const { data: abacusSettings } = useAbacusSettings();
-  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false;
-  const maxPressure = 150;
+  const { data: abacusSettings } = useAbacusSettings()
+  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false
+  const maxPressure = 150
 
   // Animate pressure value smoothly with spring physics
   const spring = useSpring({
@@ -22,38 +22,38 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
       friction: 14,
       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) => {
-    if (p < 50) return "#ef4444"; // Red (low)
-    if (p < 100) return "#f59e0b"; // Orange (medium)
-    return "#10b981"; // Green (high)
-  });
+    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)",
+        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",
+          fontSize: '12px',
+          color: '#6b7280',
+          marginBottom: '8px',
+          fontWeight: 'bold',
+          textAlign: 'center',
         }}
       >
         PRESSURE
@@ -63,9 +63,9 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
       <svg
         viewBox="-40 -20 280 170"
         style={{
-          width: "100%",
-          height: "auto",
-          marginBottom: "8px",
+          width: '100%',
+          height: 'auto',
+          marginBottom: '8px',
         }}
       >
         {/* Background arc - semicircle from left to right (bottom half) */}
@@ -80,16 +80,16 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
         {/* Tick marks */}
         {[0, 50, 100, 150].map((psi, index) => {
           // Angle from 180° (left) to 0° (right)
-          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 x2 = 100 + Math.cos(tickRad) * 80;
-          const y2 = 100 - Math.sin(tickRad) * 80; // Subtract for SVG coords
+          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 x2 = 100 + Math.cos(tickRad) * 80
+          const y2 = 100 - Math.sin(tickRad) * 80 // Subtract for SVG coords
 
           // Position for abacus label
-          const labelX = 100 + Math.cos(tickRad) * 112;
-          const labelY = 100 - Math.sin(tickRad) * 112;
+          const labelX = 100 + Math.cos(tickRad) * 112
+          const labelY = 100 - Math.sin(tickRad) * 112
 
           return (
             <g key={`tick-${index}`}>
@@ -102,17 +102,12 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
                 strokeWidth="2"
                 strokeLinecap="round"
               />
-              <foreignObject
-                x={labelX - 30}
-                y={labelY - 25}
-                width="60"
-                height="100"
-              >
+              <foreignObject x={labelX - 30} y={labelY - 25} width="60" height="100">
                 <div
                   style={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
                     lineHeight: 0,
                   }}
                 >
@@ -131,9 +126,9 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
                   ) : (
                     <div
                       style={{
-                        fontSize: "14px",
-                        fontWeight: "bold",
-                        color: "#1f2937",
+                        fontSize: '14px',
+                        fontWeight: 'bold',
+                        color: '#1f2937',
                       }}
                     >
                       {psi}
@@ -142,7 +137,7 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
                 </div>
               </foreignObject>
             </g>
-          );
+          )
         })}
 
         {/* Center pivot */}
@@ -166,21 +161,21 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
       {/* Pressure readout */}
       <div
         style={{
-          textAlign: "center",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: "8px",
-          minHeight: "32px",
+          textAlign: 'center',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '8px',
+          minHeight: '32px',
         }}
       >
         {useNativeAbacusNumbers ? (
           <>
             <div
               style={{
-                display: "inline-flex",
-                alignItems: "center",
-                justifyContent: "center",
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
                 lineHeight: 0,
               }}
             >
@@ -196,21 +191,14 @@ export function PressureGauge({ pressure }: PressureGaugeProps) {
                 }}
               />
             </div>
-            <span
-              style={{ fontSize: "12px", color: "#6b7280", fontWeight: "bold" }}
-            >
-              PSI
-            </span>
+            <span style={{ fontSize: '12px', color: '#6b7280', fontWeight: 'bold' }}>PSI</span>
           </>
         ) : (
-          <div
-            style={{ fontSize: "20px", fontWeight: "bold", color: "#1f2937" }}
-          >
-            {Math.round(pressure)}{" "}
-            <span style={{ fontSize: "12px", color: "#6b7280" }}>PSI</span>
+          <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#1f2937' }}>
+            {Math.round(pressure)} <span style={{ fontSize: '12px', color: '#6b7280' }}>PSI</span>
           </div>
         )}
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/RaceTrack/CircularTrack.tsx b/apps/web/src/app/arcade/complement-race/components/RaceTrack/CircularTrack.tsx
index f8731ac2..ec5cc864 100644
--- 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,206 +1,192 @@
-"use client";
+'use client'
 
-import { useEffect, useState } from "react";
-import { useGameMode } from "@/contexts/GameModeContext";
-import { useUserProfile } from "@/contexts/UserProfileContext";
-import { useComplementRace } from "@/arcade-games/complement-race/Provider";
-import { useSoundEffects } from "../../hooks/useSoundEffects";
-import type { AIRacer } from "../../lib/gameTypes";
-import { SpeechBubble } from "../AISystem/SpeechBubble";
+import { useEffect, useState } from 'react'
+import { useGameMode } from '@/contexts/GameModeContext'
+import { useUserProfile } from '@/contexts/UserProfileContext'
+import { useComplementRace } from '@/arcade-games/complement-race/Provider'
+import { useSoundEffects } from '../../hooks/useSoundEffects'
+import type { AIRacer } from '../../lib/gameTypes'
+import { SpeechBubble } from '../AISystem/SpeechBubble'
 
 interface CircularTrackProps {
-  playerProgress: number;
-  playerLap: number;
-  aiRacers: AIRacer[];
-  aiLaps: Map<string, number>;
+  playerProgress: number
+  playerLap: number
+  aiRacers: AIRacer[]
+  aiLaps: Map<string, number>
 }
 
-export function CircularTrack({
-  playerProgress,
-  playerLap,
-  aiRacers,
-  aiLaps,
-}: CircularTrackProps) {
-  const { state, dispatch } = useComplementRace();
-  const { players, activePlayers } = useGameMode();
-  const { profile: _profile } = useUserProfile();
-  const { playSound } = useSoundEffects();
-  const [celebrationCooldown, setCelebrationCooldown] = useState<Set<string>>(
-    new Set(),
-  );
+export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: CircularTrackProps) {
+  const { state, dispatch } = useComplementRace()
+  const { players, activePlayers } = useGameMode()
+  const { profile: _profile } = useUserProfile()
+  const { playSound } = useSoundEffects()
+  const [celebrationCooldown, setCelebrationCooldown] = useState<Set<string>>(new Set())
 
   // Get the current user's active local players (consistent with navbar pattern)
   const activeLocalPlayers = Array.from(activePlayers)
     .map((id) => players.get(id))
-    .filter(
-      (p): p is NonNullable<typeof p> => p !== undefined && p.isLocal !== false,
-    );
-  const playerEmoji = activeLocalPlayers[0]?.emoji ?? "👤";
-  const [dimensions, setDimensions] = useState({ width: 600, height: 400 });
+    .filter((p): p is NonNullable<typeof p> => p !== undefined && p.isLocal !== false)
+  const playerEmoji = activeLocalPlayers[0]?.emoji ?? '👤'
+  const [dimensions, setDimensions] = useState({ width: 600, height: 400 })
 
   // Update dimensions on mount and resize
   useEffect(() => {
     const updateDimensions = () => {
-      const vw = window.innerWidth;
-      const vh = window.innerHeight;
-      const isLandscape = vw > vh;
+      const vw = window.innerWidth
+      const vh = window.innerHeight
+      const isLandscape = vw > vh
 
       if (isLandscape) {
         // Landscape: wider track (emphasize horizontal straights)
-        const width = Math.min(vw * 0.75, 800);
-        const height = Math.min(vh * 0.5, 350);
-        setDimensions({ width, height });
+        const width = Math.min(vw * 0.75, 800)
+        const height = Math.min(vh * 0.5, 350)
+        setDimensions({ width, height })
       } else {
         // Portrait: taller track (emphasize vertical straights)
-        const width = Math.min(vw * 0.85, 350);
-        const height = Math.min(vh * 0.5, 550);
-        setDimensions({ width, height });
-      }
-    };
-
-    updateDimensions();
-    window.addEventListener("resize", updateDimensions);
-    return () => window.removeEventListener("resize", updateDimensions);
-  }, []);
-
-  const padding = 40;
-  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);
-  const radius = Math.min(trackWidth, trackHeight) / 2;
-  const isHorizontal = trackWidth > trackHeight;
-
-  // Calculate position on rounded rectangle track
-  const getCircularPosition = (progress: number) => {
-    const progressPerLap = 50;
-    const normalizedProgress = (progress % progressPerLap) / progressPerLap;
-
-    // Track perimeter consists of: 2 straights + 2 semicircles
-    const straightPerim = straightLength;
-    const curvePerim = Math.PI * radius;
-    const totalPerim = 2 * straightPerim + 2 * curvePerim;
-
-    const distanceAlongTrack = normalizedProgress * totalPerim;
-
-    const centerX = dimensions.width / 2;
-    const centerY = dimensions.height / 2;
-
-    let x: number, y: number, angle: number;
-
-    if (isHorizontal) {
-      // Horizontal track: straight sections on top/bottom, curves on left/right
-      const topStraightEnd = straightPerim;
-      const rightCurveEnd = topStraightEnd + curvePerim;
-      const bottomStraightEnd = rightCurveEnd + straightPerim;
-      const _leftCurveEnd = bottomStraightEnd + curvePerim;
-
-      if (distanceAlongTrack < topStraightEnd) {
-        // Top straight (moving right)
-        const t = distanceAlongTrack / straightPerim;
-        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;
-      } else if (distanceAlongTrack < bottomStraightEnd) {
-        // Bottom straight (moving left)
-        const t = (distanceAlongTrack - rightCurveEnd) / straightPerim;
-        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;
-      }
-    } 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;
-
-      if (distanceAlongTrack < leftStraightEnd) {
-        // Left straight (moving down)
-        const t = distanceAlongTrack / straightPerim;
-        x = centerX - radius;
-        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;
-      } else if (distanceAlongTrack < rightStraightEnd) {
-        // Right straight (moving up)
-        const t = (distanceAlongTrack - bottomCurveEnd) / straightPerim;
-        x = centerX + radius;
-        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);
-        angle = curveProgress * 180;
+        const width = Math.min(vw * 0.85, 350)
+        const height = Math.min(vh * 0.5, 550)
+        setDimensions({ width, height })
       }
     }
 
-    return { x, y, angle };
-  };
+    updateDimensions()
+    window.addEventListener('resize', updateDimensions)
+    return () => window.removeEventListener('resize', updateDimensions)
+  }, [])
+
+  const padding = 40
+  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)
+  const radius = Math.min(trackWidth, trackHeight) / 2
+  const isHorizontal = trackWidth > trackHeight
+
+  // Calculate position on rounded rectangle track
+  const getCircularPosition = (progress: number) => {
+    const progressPerLap = 50
+    const normalizedProgress = (progress % progressPerLap) / progressPerLap
+
+    // Track perimeter consists of: 2 straights + 2 semicircles
+    const straightPerim = straightLength
+    const curvePerim = Math.PI * radius
+    const totalPerim = 2 * straightPerim + 2 * curvePerim
+
+    const distanceAlongTrack = normalizedProgress * totalPerim
+
+    const centerX = dimensions.width / 2
+    const centerY = dimensions.height / 2
+
+    let x: number, y: number, angle: number
+
+    if (isHorizontal) {
+      // Horizontal track: straight sections on top/bottom, curves on left/right
+      const topStraightEnd = straightPerim
+      const rightCurveEnd = topStraightEnd + curvePerim
+      const bottomStraightEnd = rightCurveEnd + straightPerim
+      const _leftCurveEnd = bottomStraightEnd + curvePerim
+
+      if (distanceAlongTrack < topStraightEnd) {
+        // Top straight (moving right)
+        const t = distanceAlongTrack / straightPerim
+        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
+      } else if (distanceAlongTrack < bottomStraightEnd) {
+        // Bottom straight (moving left)
+        const t = (distanceAlongTrack - rightCurveEnd) / straightPerim
+        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
+      }
+    } 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
+
+      if (distanceAlongTrack < leftStraightEnd) {
+        // Left straight (moving down)
+        const t = distanceAlongTrack / straightPerim
+        x = centerX - radius
+        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
+      } else if (distanceAlongTrack < rightStraightEnd) {
+        // Right straight (moving up)
+        const t = (distanceAlongTrack - bottomCurveEnd) / straightPerim
+        x = centerX + radius
+        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)
+        angle = curveProgress * 180
+      }
+    }
+
+    return { x, y, angle }
+  }
 
   // Check for lap completions and show celebrations
   useEffect(() => {
     // Check player lap
-    const playerCurrentLap = Math.floor(playerProgress / 50);
-    if (playerCurrentLap > playerLap && !celebrationCooldown.has("player")) {
-      dispatch({ type: "COMPLETE_LAP", racerId: "player" });
+    const playerCurrentLap = Math.floor(playerProgress / 50)
+    if (playerCurrentLap > playerLap && !celebrationCooldown.has('player')) {
+      dispatch({ type: 'COMPLETE_LAP', racerId: 'player' })
       // Play celebration sound (line 12801)
-      playSound("lap_celebration", 0.6);
-      setCelebrationCooldown((prev) => new Set(prev).add("player"));
+      playSound('lap_celebration', 0.6)
+      setCelebrationCooldown((prev) => new Set(prev).add('player'))
       setTimeout(() => {
         setCelebrationCooldown((prev) => {
-          const next = new Set(prev);
-          next.delete("player");
-          return next;
-        });
-      }, 2000);
+          const next = new Set(prev)
+          next.delete('player')
+          return next
+        })
+      }, 2000)
     }
 
     // Check AI laps
     aiRacers.forEach((racer) => {
-      const aiCurrentLap = Math.floor(racer.position / 50);
-      const aiPreviousLap = aiLaps.get(racer.id) || 0;
+      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));
+        dispatch({ type: 'COMPLETE_LAP', racerId: racer.id })
+        setCelebrationCooldown((prev) => new Set(prev).add(racer.id))
         setTimeout(() => {
           setCelebrationCooldown((prev) => {
-            const next = new Set(prev);
-            next.delete(racer.id);
-            return next;
-          });
-        }, 2000);
+            const next = new Set(prev)
+            next.delete(racer.id)
+            return next
+          })
+        }, 2000)
       }
-    });
+    })
   }, [
     playerProgress,
     playerLap,
@@ -209,28 +195,25 @@ export function CircularTrack({
     celebrationCooldown,
     dispatch, // Play celebration sound (line 12801)
     playSound,
-  ]);
+  ])
 
-  const playerPos = getCircularPosition(playerProgress);
+  const playerPos = getCircularPosition(playerProgress)
 
   // Create rounded rectangle path with wider curves (banking effect)
-  const createRoundedRectPath = (
-    radiusOffset: number,
-    isOuter: boolean = false,
-  ) => {
-    const centerX = dimensions.width / 2;
-    const centerY = dimensions.height / 2;
+  const createRoundedRectPath = (radiusOffset: number, isOuter: boolean = false) => {
+    const centerX = dimensions.width / 2
+    const centerY = dimensions.height / 2
 
     // Make curves wider by increasing radius more on outer edges
-    const curveWidthBonus = isOuter ? radiusOffset * 0.15 : radiusOffset * -0.1;
-    const r = radius + radiusOffset + curveWidthBonus;
+    const curveWidthBonus = isOuter ? radiusOffset * 0.15 : radiusOffset * -0.1
+    const r = radius + radiusOffset + curveWidthBonus
 
     if (isHorizontal) {
       // Horizontal track - curved ends on left/right
-      const leftCenterX = centerX - straightLength / 2;
-      const rightCenterX = centerX + straightLength / 2;
-      const curveTopY = centerY - r;
-      const curveBottomY = centerY + r;
+      const leftCenterX = centerX - straightLength / 2
+      const rightCenterX = centerX + straightLength / 2
+      const curveTopY = centerY - r
+      const curveBottomY = centerY + r
 
       return `
         M ${leftCenterX} ${curveTopY}
@@ -239,13 +222,13 @@ export function CircularTrack({
         L ${leftCenterX} ${curveBottomY}
         A ${r} ${r} 0 0 1 ${leftCenterX} ${curveTopY}
         Z
-      `;
+      `
     } else {
       // Vertical track - curved ends on top/bottom
-      const topCenterY = centerY - straightLength / 2;
-      const bottomCenterY = centerY + straightLength / 2;
-      const curveLeftX = centerX - r;
-      const curveRightX = centerX + r;
+      const topCenterY = centerY - straightLength / 2
+      const bottomCenterY = centerY + straightLength / 2
+      const curveLeftX = centerX - r
+      const curveRightX = centerX + r
 
       return `
         M ${curveLeftX} ${topCenterY}
@@ -254,18 +237,18 @@ export function CircularTrack({
         L ${curveRightX} ${topCenterY}
         A ${r} ${r} 0 0 0 ${curveLeftX} ${topCenterY}
         Z
-      `;
+      `
     }
-  };
+  }
 
   return (
     <div
       data-component="circular-track"
       style={{
-        position: "relative",
+        position: 'relative',
         width: `${dimensions.width}px`,
         height: `${dimensions.height}px`,
-        margin: "0 auto",
+        margin: '0 auto',
       }}
     >
       {/* SVG Track */}
@@ -274,40 +257,22 @@ export function CircularTrack({
         width={dimensions.width}
         height={dimensions.height}
         style={{
-          position: "absolute",
+          position: 'absolute',
           top: 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) => (
@@ -324,16 +289,16 @@ export function CircularTrack({
 
         {/* Start/Finish line - checkered flag pattern */}
         {(() => {
-          const centerX = dimensions.width / 2;
-          const centerY = dimensions.height / 2;
-          const trackThickness = 35; // Track width from inner to outer edge
+          const centerX = dimensions.width / 2
+          const centerY = dimensions.height / 2
+          const trackThickness = 35 // Track width from inner to outer edge
 
           if (isHorizontal) {
             // Horizontal track: vertical finish line crossing the top straight
-            const x = centerX;
-            const yStart = centerY - radius - 18; // Outer edge
-            const squareSize = trackThickness / 6;
-            const lineWidth = 12;
+            const x = centerX
+            const yStart = centerY - radius - 18 // Outer edge
+            const squareSize = trackThickness / 6
+            const lineWidth = 12
             return (
               <g>
                 {/* Checkered pattern - vertical line */}
@@ -344,17 +309,17 @@ export function CircularTrack({
                     y={yStart + squareSize * i}
                     width={lineWidth}
                     height={squareSize}
-                    fill={i % 2 === 0 ? "black" : "white"}
+                    fill={i % 2 === 0 ? 'black' : 'white'}
                   />
                 ))}
               </g>
-            );
+            )
           } else {
             // Vertical track: horizontal finish line crossing the left straight
-            const xStart = centerX - radius - 18; // Outer edge
-            const y = centerY;
-            const squareSize = trackThickness / 6;
-            const lineWidth = 12;
+            const xStart = centerX - radius - 18 // Outer edge
+            const y = centerY
+            const squareSize = trackThickness / 6
+            const lineWidth = 12
             return (
               <g>
                 {/* Checkered pattern - horizontal line */}
@@ -365,23 +330,23 @@ export function CircularTrack({
                     y={y - lineWidth / 2}
                     width={squareSize}
                     height={lineWidth}
-                    fill={i % 2 === 0 ? "black" : "white"}
+                    fill={i % 2 === 0 ? 'black' : 'white'}
                   />
                 ))}
               </g>
-            );
+            )
           }
         })()}
 
         {/* Distance markers (quarter points) */}
         {[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 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)
           return (
             <line
               key={fraction}
@@ -393,21 +358,21 @@ export function CircularTrack({
               strokeWidth="3"
               strokeLinecap="round"
             />
-          );
+          )
         })}
       </svg>
 
       {/* Player racer */}
       <div
         style={{
-          position: "absolute",
+          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))",
+          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",
+          transition: 'left 0.3s ease-out, top 0.3s ease-out',
         }}
       >
         {playerEmoji}
@@ -415,89 +380,87 @@ export function CircularTrack({
 
       {/* AI racers */}
       {aiRacers.map((racer, _index) => {
-        const aiPos = getCircularPosition(racer.position);
-        const activeBubble = state.activeSpeechBubbles.get(racer.id);
+        const aiPos = getCircularPosition(racer.position)
+        const activeBubble = state.activeSpeechBubbles.get(racer.id)
 
         return (
           <div
             key={racer.id}
             style={{
-              position: "absolute",
+              position: 'absolute',
               left: `${aiPos.x}px`,
               top: `${aiPos.y}px`,
               transform: `translate(-50%, -50%) rotate(${aiPos.angle}deg)`,
-              fontSize: "28px",
-              filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))",
+              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={{
-                  position: "absolute",
-                  bottom: "100%", // Position above the AI racer
-                  left: "50%",
+                  position: 'absolute',
+                  bottom: '100%', // Position above the AI racer
+                  left: '50%',
                   transform: `translate(-50%, -15px) rotate(${-aiPos.angle}deg)`, // Offset 15px above, counter-rotate bubble
                   zIndex: 20, // Above player (10) and AI racers (5)
                 }}
               >
                 <SpeechBubble
                   message={activeBubble}
-                  onHide={() =>
-                    dispatch({ type: "CLEAR_AI_COMMENT", racerId: racer.id })
-                  }
+                  onHide={() => dispatch({ type: 'CLEAR_AI_COMMENT', racerId: racer.id })}
                 />
               </div>
             )}
           </div>
-        );
+        )
       })}
 
       {/* 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",
+          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",
+            fontSize: '14px',
+            color: '#6b7280',
+            marginBottom: '4px',
+            fontWeight: 'bold',
           }}
         >
           Lap
         </div>
         <div
           style={{
-            fontSize: "36px",
-            fontWeight: "bold",
-            color: "#3b82f6",
+            fontSize: '36px',
+            fontWeight: 'bold',
+            color: '#3b82f6',
           }}
         >
           {playerLap + 1}
         </div>
         <div
           style={{
-            fontSize: "12px",
-            color: "#9ca3af",
-            marginTop: "4px",
+            fontSize: '12px',
+            color: '#9ca3af',
+            marginTop: '4px',
           }}
         >
           {Math.floor(((playerProgress % 50) / 50) * 100)}%
@@ -505,21 +468,21 @@ export function CircularTrack({
       </div>
 
       {/* Lap celebration */}
-      {celebrationCooldown.has("player") && (
+      {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",
+            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,
           }}
         >
@@ -527,5 +490,5 @@ export function CircularTrack({
         </div>
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/RaceTrack/GameHUD.tsx b/apps/web/src/app/arcade/complement-race/components/RaceTrack/GameHUD.tsx
index b5d76914..40f64900 100644
--- 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,27 +1,27 @@
-"use client";
+'use client'
 
-import { memo } from "react";
-import type { ComplementQuestion } from "../../lib/gameTypes";
-import type { Passenger, Station } from "@/arcade-games/complement-race/types";
-import { AbacusTarget } from "../AbacusTarget";
-import { PassengerCard } from "../PassengerCard";
-import { PressureGauge } from "../PressureGauge";
+import { memo } from 'react'
+import type { ComplementQuestion } from '../../lib/gameTypes'
+import type { Passenger, Station } from '@/arcade-games/complement-race/types'
+import { AbacusTarget } from '../AbacusTarget'
+import { PassengerCard } from '../PassengerCard'
+import { PressureGauge } from '../PressureGauge'
 
 interface RouteTheme {
-  emoji: string;
-  name: string;
+  emoji: string
+  name: string
 }
 
 interface GameHUDProps {
-  routeTheme: RouteTheme;
-  currentRoute: number;
-  periodName: string;
-  timeRemaining: number;
-  pressure: number;
-  nonDeliveredPassengers: Passenger[];
-  stations: Station[];
-  currentQuestion: ComplementQuestion | null;
-  currentInput: string;
+  routeTheme: RouteTheme
+  currentRoute: number
+  periodName: string
+  timeRemaining: number
+  pressure: number
+  nonDeliveredPassengers: Passenger[]
+  stations: Station[]
+  currentQuestion: ComplementQuestion | null
+  currentInput: string
 }
 
 export const GameHUD = memo(
@@ -42,51 +42,47 @@ export const GameHUD = memo(
         <div
           data-component="route-info"
           style={{
-            position: "absolute",
-            top: "10px",
-            left: "10px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "8px",
+            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",
+              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>
+            <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 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)",
+              background: 'rgba(0, 0, 0, 0.3)',
+              color: 'white',
+              padding: '6px 12px',
+              borderRadius: '8px',
+              fontSize: '14px',
+              fontWeight: 'bold',
+              backdropFilter: 'blur(4px)',
             }}
           >
             {periodName}
@@ -97,16 +93,16 @@ export const GameHUD = memo(
         <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)",
+            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,
           }}
         >
@@ -117,11 +113,11 @@ export const GameHUD = memo(
         <div
           data-component="pressure-gauge-container"
           style={{
-            position: "fixed",
-            bottom: "20px",
-            left: "20px",
+            position: 'fixed',
+            bottom: '20px',
+            left: '20px',
             zIndex: 1000,
-            width: "120px",
+            width: '120px',
           }}
         >
           <PressureGauge pressure={pressure} />
@@ -132,27 +128,23 @@ export const GameHUD = memo(
           <div
             data-component="passenger-list"
             style={{
-              position: "fixed",
-              bottom: "20px",
-              right: "20px",
-              display: "flex",
-              flexDirection: "column-reverse",
-              gap: "8px",
+              position: 'fixed',
+              bottom: '20px',
+              right: '20px',
+              display: 'flex',
+              flexDirection: 'column-reverse',
+              gap: '8px',
               zIndex: 1000,
-              maxHeight: "calc(100vh - 40px)",
-              overflowY: "auto",
+              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,
-                )}
+                originStation={stations.find((s) => s.id === passenger.originStationId)}
+                destinationStation={stations.find((s) => s.id === passenger.destinationStationId)}
               />
             ))}
           </div>
@@ -163,17 +155,16 @@ export const GameHUD = memo(
           <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)",
+              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,
             }}
           >
@@ -181,38 +172,38 @@ export const GameHUD = memo(
             <div
               data-element="sprint-question-equation"
               style={{
-                fontSize: "96px",
-                fontWeight: "bold",
-                color: "#1f2937",
-                lineHeight: "1.1",
-                display: "flex",
-                alignItems: "center",
-                gap: "20px",
-                justifyContent: "center",
+                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)",
+                  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 || "?"}
+                {currentInput || '?'}
               </span>
-              <span style={{ color: "#6b7280" }}>+</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",
+                    transform: 'scale(2.4) translateY(8%)',
+                    transformOrigin: 'center center',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
                   }}
                 >
                   <AbacusTarget number={currentQuestion.number} />
@@ -220,16 +211,14 @@ export const GameHUD = memo(
               ) : (
                 <span>{currentQuestion.number}</span>
               )}
-              <span style={{ color: "#6b7280" }}>=</span>
-              <span style={{ color: "#10b981" }}>
-                {currentQuestion.targetSum}
-              </span>
+              <span style={{ color: '#6b7280' }}>=</span>
+              <span style={{ color: '#10b981' }}>{currentQuestion.targetSum}</span>
             </div>
           </div>
         )}
       </>
-    );
-  },
-);
+    )
+  }
+)
 
-GameHUD.displayName = "GameHUD";
+GameHUD.displayName = 'GameHUD'
diff --git a/apps/web/src/app/arcade/complement-race/components/RaceTrack/GhostTrain.tsx b/apps/web/src/app/arcade/complement-race/components/RaceTrack/GhostTrain.tsx
index 93d8e9fe..6633b8b7 100644
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/GhostTrain.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/GhostTrain.tsx
@@ -1,49 +1,44 @@
-"use client";
+'use client'
 
-import { useSpring, useSprings, animated, to } from "@react-spring/web";
-import { useMemo, useRef } from "react";
-import type { PlayerState } from "@/arcade-games/complement-race/types";
-import type { RailroadTrackGenerator } from "../../lib/RailroadTrackGenerator";
+import { useSpring, useSprings, animated, to } from '@react-spring/web'
+import { useMemo, useRef } from 'react'
+import type { PlayerState } from '@/arcade-games/complement-race/types'
+import type { RailroadTrackGenerator } from '../../lib/RailroadTrackGenerator'
 
 // Overlap threshold: if ghost car is within this distance of any local car, make it ghostly
-const OVERLAP_THRESHOLD = 20; // % of track length
-const GHOST_OPACITY = 0.35; // Opacity when overlapping
-const SOLID_OPACITY = 1.0; // Opacity when separated
+const OVERLAP_THRESHOLD = 20 // % of track length
+const GHOST_OPACITY = 0.35 // Opacity when overlapping
+const SOLID_OPACITY = 1.0 // Opacity when separated
 
 interface GhostTrainProps {
-  player: PlayerState;
-  trainPosition: number;
-  localTrainCarPositions: number[]; // [locomotive, car1, car2, car3]
-  maxCars: number;
-  carSpacing: number;
-  trackGenerator: RailroadTrackGenerator;
-  pathRef: React.RefObject<SVGPathElement>;
+  player: PlayerState
+  trainPosition: number
+  localTrainCarPositions: number[] // [locomotive, car1, car2, car3]
+  maxCars: number
+  carSpacing: number
+  trackGenerator: RailroadTrackGenerator
+  pathRef: React.RefObject<SVGPathElement>
 }
 
 interface CarTransform {
-  x: number;
-  y: number;
-  rotation: number;
-  opacity: number;
-  position: number;
+  x: number
+  y: number
+  rotation: number
+  opacity: number
+  position: number
 }
 
 /**
  * Calculate opacity for a ghost car based on distance to nearest local car
  */
-function calculateCarOpacity(
-  ghostCarPosition: number,
-  localCarPositions: number[],
-): number {
+function calculateCarOpacity(ghostCarPosition: number, localCarPositions: number[]): number {
   // Find minimum distance to any local car
   const minDistance = Math.min(
-    ...localCarPositions.map((localPos) =>
-      Math.abs(ghostCarPosition - localPos),
-    ),
-  );
+    ...localCarPositions.map((localPos) => Math.abs(ghostCarPosition - localPos))
+  )
 
   // If within threshold, use ghost opacity; otherwise solid
-  return minDistance < OVERLAP_THRESHOLD ? GHOST_OPACITY : SOLID_OPACITY;
+  return minDistance < OVERLAP_THRESHOLD ? GHOST_OPACITY : SOLID_OPACITY
 }
 
 /**
@@ -60,25 +55,24 @@ export function GhostTrain({
   trackGenerator,
   pathRef,
 }: GhostTrainProps) {
-  const ghostRef = useRef<SVGGElement>(null);
+  const ghostRef = useRef<SVGGElement>(null)
 
   // Calculate target transform for locomotive (used by spring animation)
   const locomotiveTarget = useMemo<CarTransform | null>(() => {
     if (!pathRef.current) {
-      return null;
+      return null
     }
 
-    const pathLength = pathRef.current.getTotalLength();
-    const targetDistance = (trainPosition / 100) * pathLength;
-    const point = pathRef.current.getPointAtLength(targetDistance);
+    const pathLength = pathRef.current.getTotalLength()
+    const targetDistance = (trainPosition / 100) * pathLength
+    const point = pathRef.current.getPointAtLength(targetDistance)
 
     // Calculate tangent for rotation
-    const tangentDelta = 1;
-    const tangentDistance = Math.min(targetDistance + tangentDelta, pathLength);
-    const tangentPoint = pathRef.current.getPointAtLength(tangentDistance);
+    const tangentDelta = 1
+    const tangentDistance = Math.min(targetDistance + tangentDelta, pathLength)
+    const tangentPoint = pathRef.current.getPointAtLength(tangentDistance)
     const rotation =
-      (Math.atan2(tangentPoint.y - point.y, tangentPoint.x - point.x) * 180) /
-      Math.PI;
+      (Math.atan2(tangentPoint.y - point.y, tangentPoint.x - point.x) * 180) / Math.PI
 
     return {
       x: point.x,
@@ -86,8 +80,8 @@ export function GhostTrain({
       rotation,
       position: trainPosition,
       opacity: calculateCarOpacity(trainPosition, localTrainCarPositions),
-    };
-  }, [trainPosition, localTrainCarPositions, pathRef]);
+    }
+  }, [trainPosition, localTrainCarPositions, pathRef])
 
   // Animated spring for smooth locomotive movement
   const locomotiveSpring = useSpring({
@@ -96,32 +90,28 @@ export function GhostTrain({
     rotation: locomotiveTarget?.rotation ?? 0,
     opacity: locomotiveTarget?.opacity ?? 1,
     config: { tension: 280, friction: 60 }, // Smooth but responsive
-  });
+  })
 
   // Calculate target transforms for cars (used by spring animations)
   const carTargets = useMemo<CarTransform[]>(() => {
     if (!pathRef.current) {
-      return [];
+      return []
     }
 
-    const pathLength = pathRef.current.getTotalLength();
-    const cars: CarTransform[] = [];
+    const pathLength = pathRef.current.getTotalLength()
+    const cars: CarTransform[] = []
 
     for (let i = 0; i < maxCars; i++) {
-      const carPosition = Math.max(0, trainPosition - (i + 1) * carSpacing);
-      const targetDistance = (carPosition / 100) * pathLength;
-      const point = pathRef.current.getPointAtLength(targetDistance);
+      const carPosition = Math.max(0, trainPosition - (i + 1) * carSpacing)
+      const targetDistance = (carPosition / 100) * pathLength
+      const point = pathRef.current.getPointAtLength(targetDistance)
 
       // Calculate tangent for rotation
-      const tangentDelta = 1;
-      const tangentDistance = Math.min(
-        targetDistance + tangentDelta,
-        pathLength,
-      );
-      const tangentPoint = pathRef.current.getPointAtLength(tangentDistance);
+      const tangentDelta = 1
+      const tangentDistance = Math.min(targetDistance + tangentDelta, pathLength)
+      const tangentPoint = pathRef.current.getPointAtLength(tangentDistance)
       const rotation =
-        (Math.atan2(tangentPoint.y - point.y, tangentPoint.x - point.x) * 180) /
-        Math.PI;
+        (Math.atan2(tangentPoint.y - point.y, tangentPoint.x - point.x) * 180) / Math.PI
 
       cars.push({
         x: point.x,
@@ -129,11 +119,11 @@ export function GhostTrain({
         rotation,
         position: carPosition,
         opacity: calculateCarOpacity(carPosition, localTrainCarPositions),
-      });
+      })
     }
 
-    return cars;
-  }, [trainPosition, maxCars, carSpacing, localTrainCarPositions, pathRef]);
+    return cars
+  }, [trainPosition, maxCars, carSpacing, localTrainCarPositions, pathRef])
 
   // Animated springs for smooth car movement (useSprings for multiple cars)
   const carSprings = useSprings(
@@ -144,12 +134,12 @@ export function GhostTrain({
       rotation: target.rotation,
       opacity: target.opacity,
       config: { tension: 280, friction: 60 },
-    })),
-  );
+    }))
+  )
 
   // Don't render if position data isn't ready
   if (!locomotiveTarget) {
-    return null;
+    return null
   }
 
   return (
@@ -158,7 +148,7 @@ export function GhostTrain({
       <animated.g
         transform={to(
           [locomotiveSpring.x, locomotiveSpring.y, locomotiveSpring.rotation],
-          (x, y, rot) => `translate(${x}, ${y}) rotate(${rot}) scale(-1, 1)`,
+          (x, y, rot) => `translate(${x}, ${y}) rotate(${rot}) scale(-1, 1)`
         )}
         opacity={locomotiveSpring.opacity}
       >
@@ -168,9 +158,9 @@ export function GhostTrain({
           y={0}
           textAnchor="middle"
           style={{
-            fontSize: "100px",
-            filter: `drop-shadow(0 2px 8px ${player.color || "rgba(100, 100, 255, 0.6)"})`,
-            pointerEvents: "none",
+            fontSize: '100px',
+            filter: `drop-shadow(0 2px 8px ${player.color || 'rgba(100, 100, 255, 0.6)'})`,
+            pointerEvents: 'none',
           }}
         >
           🚂
@@ -183,12 +173,12 @@ export function GhostTrain({
           y={-60}
           textAnchor="middle"
           style={{
-            fontSize: "18px",
-            fontWeight: "bold",
-            fill: player.color || "#6366f1",
-            filter: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))",
-            pointerEvents: "none",
-            transform: "scaleX(-1)", // Counter the parent's scaleX(-1)
+            fontSize: '18px',
+            fontWeight: 'bold',
+            fill: player.color || '#6366f1',
+            filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))',
+            pointerEvents: 'none',
+            transform: 'scaleX(-1)', // Counter the parent's scaleX(-1)
           }}
         >
           {player.name || `Player ${player.id.slice(0, 4)}`}
@@ -201,12 +191,12 @@ export function GhostTrain({
           y={50}
           textAnchor="middle"
           style={{
-            fontSize: "14px",
-            fontWeight: "bold",
-            fill: "rgba(255, 255, 255, 0.9)",
-            filter: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))",
-            pointerEvents: "none",
-            transform: "scaleX(-1)", // Counter the parent's scaleX(-1)
+            fontSize: '14px',
+            fontWeight: 'bold',
+            fill: 'rgba(255, 255, 255, 0.9)',
+            filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))',
+            pointerEvents: 'none',
+            transform: 'scaleX(-1)', // Counter the parent's scaleX(-1)
           }}
         >
           {player.score}
@@ -219,7 +209,7 @@ export function GhostTrain({
           key={`car-${index}`}
           transform={to(
             [spring.x, spring.y, spring.rotation],
-            (x, y, rot) => `translate(${x}, ${y}) rotate(${rot}) scale(-1, 1)`,
+            (x, y, rot) => `translate(${x}, ${y}) rotate(${rot}) scale(-1, 1)`
           )}
           opacity={spring.opacity}
         >
@@ -229,9 +219,9 @@ export function GhostTrain({
             y={0}
             textAnchor="middle"
             style={{
-              fontSize: "85px",
-              filter: `drop-shadow(0 2px 6px ${player.color || "rgba(100, 100, 255, 0.4)"})`,
-              pointerEvents: "none",
+              fontSize: '85px',
+              filter: `drop-shadow(0 2px 6px ${player.color || 'rgba(100, 100, 255, 0.4)'})`,
+              pointerEvents: 'none',
             }}
           >
             🚃
@@ -239,5 +229,5 @@ export function GhostTrain({
         </animated.g>
       ))}
     </g>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/RaceTrack/LinearTrack.tsx b/apps/web/src/app/arcade/complement-race/components/RaceTrack/LinearTrack.tsx
index a2d93010..1ac2862c 100644
--- 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,16 +1,16 @@
-"use client";
+'use client'
 
-import { useGameMode } from "@/contexts/GameModeContext";
-import { useUserProfile } from "@/contexts/UserProfileContext";
-import { useComplementRace } from "@/arcade-games/complement-race/Provider";
-import type { AIRacer } from "../../lib/gameTypes";
-import { SpeechBubble } from "../AISystem/SpeechBubble";
+import { useGameMode } from '@/contexts/GameModeContext'
+import { useUserProfile } from '@/contexts/UserProfileContext'
+import { useComplementRace } from '@/arcade-games/complement-race/Provider'
+import type { AIRacer } from '../../lib/gameTypes'
+import { SpeechBubble } from '../AISystem/SpeechBubble'
 
 interface LinearTrackProps {
-  playerProgress: number;
-  aiRacers: AIRacer[];
-  raceGoal: number;
-  showFinishLine?: boolean;
+  playerProgress: number
+  aiRacers: AIRacer[]
+  raceGoal: number
+  showFinishLine?: boolean
 }
 
 export function LinearTrack({
@@ -19,75 +19,73 @@ export function LinearTrack({
   raceGoal,
   showFinishLine = true,
 }: LinearTrackProps) {
-  const { state, dispatch } = useComplementRace();
-  const { players, activePlayers } = useGameMode();
-  const { profile: _profile } = useUserProfile();
+  const { state, dispatch } = useComplementRace()
+  const { players, activePlayers } = useGameMode()
+  const { profile: _profile } = useUserProfile()
 
   // Get the current user's active local players (consistent with navbar pattern)
   const activeLocalPlayers = Array.from(activePlayers)
     .map((id) => players.get(id))
-    .filter(
-      (p): p is NonNullable<typeof p> => p !== undefined && p.isLocal !== false,
-    );
-  const playerEmoji = activeLocalPlayers[0]?.emoji ?? "👤";
+    .filter((p): p is NonNullable<typeof p> => p !== undefined && p.isLocal !== false)
+  const playerEmoji = activeLocalPlayers[0]?.emoji ?? '👤'
 
   // Position calculation: leftPercent = Math.min(98, (progress / raceGoal) * 96 + 2)
   // 2% minimum (start), 98% maximum (near finish), 96% range for race
   const getPosition = (progress: number) => {
-    return Math.min(98, (progress / raceGoal) * 96 + 2);
-  };
+    return Math.min(98, (progress / raceGoal) * 96 + 2)
+  }
 
-  const playerPosition = getPosition(playerProgress);
+  const playerPosition = getPosition(playerProgress)
 
   return (
     <div
       data-component="linear-track"
       style={{
-        position: "relative",
-        width: "100%",
-        height: "200px",
+        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",
+          '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%",
+          position: 'absolute',
+          top: '50%',
           left: 0,
           right: 0,
-          height: "2px",
-          background: "rgba(0, 0, 0, 0.1)",
-          transform: "translateY(-50%)",
+          height: '2px',
+          background: 'rgba(0, 0, 0, 0.1)',
+          transform: 'translateY(-50%)',
         }}
       />
 
       <div
         style={{
-          position: "absolute",
-          top: "40%",
+          position: 'absolute',
+          top: '40%',
           left: 0,
           right: 0,
-          height: "1px",
-          background: "rgba(0, 0, 0, 0.05)",
-          transform: "translateY(-50%)",
+          height: '1px',
+          background: 'rgba(0, 0, 0, 0.05)',
+          transform: 'translateY(-50%)',
         }}
       />
 
       <div
         style={{
-          position: "absolute",
-          top: "60%",
+          position: 'absolute',
+          top: '60%',
           left: 0,
           right: 0,
-          height: "1px",
-          background: "rgba(0, 0, 0, 0.05)",
-          transform: "translateY(-50%)",
+          height: '1px',
+          background: 'rgba(0, 0, 0, 0.05)',
+          transform: 'translateY(-50%)',
         }}
       />
 
@@ -95,14 +93,14 @@ export function LinearTrack({
       {showFinishLine && (
         <div
           style={{
-            position: "absolute",
-            right: "2%",
+            position: 'absolute',
+            right: '2%',
             top: 0,
             bottom: 0,
-            width: "4px",
+            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)",
+              'repeating-linear-gradient(0deg, black 0px, black 10px, white 10px, white 20px)',
+            boxShadow: '0 0 10px rgba(0, 0, 0, 0.3)',
           }}
         />
       )}
@@ -110,13 +108,13 @@ export function LinearTrack({
       {/* Player racer */}
       <div
         style={{
-          position: "absolute",
+          position: 'absolute',
           left: `${playerPosition}%`,
-          top: "50%",
-          transform: "translate(-50%, -50%) scaleX(-1)",
-          fontSize: "32px",
-          transition: "left 0.3s ease-out",
-          filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))",
+          top: '50%',
+          transform: 'translate(-50%, -50%) scaleX(-1)',
+          fontSize: '32px',
+          transition: 'left 0.3s ease-out',
+          filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
           zIndex: 10,
         }}
       >
@@ -125,20 +123,20 @@ export function LinearTrack({
 
       {/* AI racers */}
       {aiRacers.map((racer, index) => {
-        const aiPosition = getPosition(racer.position);
-        const activeBubble = state.activeSpeechBubbles.get(racer.id);
+        const aiPosition = getPosition(racer.position)
+        const activeBubble = state.activeSpeechBubbles.get(racer.id)
 
         return (
           <div
             key={racer.id}
             style={{
-              position: "absolute",
+              position: 'absolute',
               left: `${aiPosition}%`,
               top: `${35 + index * 15}%`,
-              transform: "translate(-50%, -50%) scaleX(-1)",
-              fontSize: "28px",
-              transition: "left 0.2s linear",
-              filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))",
+              transform: 'translate(-50%, -50%) scaleX(-1)',
+              fontSize: '28px',
+              transition: 'left 0.2s linear',
+              filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
               zIndex: 5,
             }}
           >
@@ -146,42 +144,40 @@ export function LinearTrack({
             {activeBubble && (
               <div
                 style={{
-                  position: "absolute",
-                  bottom: "100%", // Position above the AI racer
-                  left: "50%",
-                  transform: "translate(-50%, -15px) scaleX(-1)", // Offset 15px above, counter-flip bubble
+                  position: 'absolute',
+                  bottom: '100%', // Position above the AI racer
+                  left: '50%',
+                  transform: 'translate(-50%, -15px) scaleX(-1)', // Offset 15px above, counter-flip bubble
                   zIndex: 20, // Above player (10) and AI racers (5)
                 }}
               >
                 <SpeechBubble
                   message={activeBubble}
-                  onHide={() =>
-                    dispatch({ type: "CLEAR_AI_COMMENT", racerId: racer.id })
-                  }
+                  onHide={() => dispatch({ type: 'CLEAR_AI_COMMENT', racerId: racer.id })}
                 />
               </div>
             )}
           </div>
-        );
+        )
       })}
 
       {/* 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)",
+          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>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/RaceTrack/RailroadTrackPath.tsx b/apps/web/src/app/arcade/complement-race/components/RaceTrack/RailroadTrackPath.tsx
index a74265df..5ed7e147 100644
--- 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,24 +1,24 @@
-"use client";
+'use client'
 
-import { memo } from "react";
-import type { Passenger, Station } from "@/arcade-games/complement-race/types";
-import type { Landmark } from "../../lib/landmarks";
+import { memo } from 'react'
+import type { Passenger, Station } from '@/arcade-games/complement-race/types'
+import type { Landmark } from '../../lib/landmarks'
 
 interface RailroadTrackPathProps {
   tiesAndRails: {
-    ties: Array<{ x1: number; y1: number; x2: number; y2: number }>;
-    leftRailPath: string;
-    rightRailPath: string;
-  } | null;
-  referencePath: string;
-  pathRef: React.RefObject<SVGPathElement>;
-  landmarkPositions: Array<{ x: number; y: number }>;
-  landmarks: Landmark[];
-  stationPositions: Array<{ x: number; y: number }>;
-  stations: Station[];
-  passengers: Passenger[];
-  boardingAnimations: Map<string, unknown>;
-  disembarkingAnimations: Map<string, unknown>;
+    ties: Array<{ x1: number; y1: number; x2: number; y2: number }>
+    leftRailPath: string
+    rightRailPath: string
+  } | null
+  referencePath: string
+  pathRef: React.RefObject<SVGPathElement>
+  landmarkPositions: Array<{ x: number; y: number }>
+  landmarks: Landmark[]
+  stationPositions: Array<{ x: number; y: number }>
+  stations: Station[]
+  passengers: Passenger[]
+  boardingAnimations: Map<string, unknown>
+  disembarkingAnimations: Map<string, unknown>
 }
 
 export const RailroadTrackPath = memo(
@@ -76,13 +76,7 @@ export const RailroadTrackPath = memo(
         )}
 
         {/* Reference path (invisible, used for positioning) */}
-        <path
-          ref={pathRef}
-          d={referencePath}
-          fill="none"
-          stroke="transparent"
-          strokeWidth="2"
-        />
+        <path ref={pathRef} d={referencePath} fill="none" stroke="transparent" strokeWidth="2" />
 
         {/* Landmarks - background scenery */}
         {landmarkPositions.map((pos, index) => (
@@ -93,9 +87,9 @@ export const RailroadTrackPath = memo(
             textAnchor="middle"
             style={{
               fontSize: `${(landmarks[index]?.size || 24) * 2.0}px`,
-              pointerEvents: "none",
+              pointerEvents: 'none',
               opacity: 0.7,
-              filter: "drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2))",
+              filter: 'drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2))',
             }}
           >
             {landmarks[index]?.emoji}
@@ -104,7 +98,7 @@ export const RailroadTrackPath = memo(
 
         {/* Station markers */}
         {stationPositions.map((pos, index) => {
-          const station = stations[index];
+          const station = stations[index]
           // Find passengers waiting at this station (exclude currently boarding)
           // Arcade room multiplayer uses claimedBy/deliveredBy instead of isBoarded/isDelivered
           const waitingPassengers = passengers.filter(
@@ -112,15 +106,15 @@ export const RailroadTrackPath = memo(
               p.originStationId === station?.id &&
               p.claimedBy === null &&
               p.deliveredBy === null &&
-              !boardingAnimations.has(p.id),
-          );
+              !boardingAnimations.has(p.id)
+          )
           // Find passengers delivered at this station (exclude currently disembarking)
           const deliveredPassengers = passengers.filter(
             (p) =>
               p.destinationStationId === station?.id &&
               p.deliveredBy !== null &&
-              !disembarkingAnimations.has(p.id),
-          );
+              !disembarkingAnimations.has(p.id)
+          )
 
           return (
             <g key={`station-${index}`}>
@@ -139,7 +133,7 @@ export const RailroadTrackPath = memo(
                 y={pos.y - 40}
                 textAnchor="middle"
                 fontSize="48"
-                style={{ pointerEvents: "none" }}
+                style={{ pointerEvents: 'none' }}
               >
                 {station?.icon}
               </text>
@@ -154,12 +148,11 @@ export const RailroadTrackPath = memo(
                 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",
+                  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}
@@ -173,11 +166,11 @@ export const RailroadTrackPath = memo(
                   y={pos.y - 30}
                   textAnchor="middle"
                   style={{
-                    fontSize: "55px",
-                    pointerEvents: "none",
+                    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))",
+                      ? 'drop-shadow(0 0 8px rgba(245, 158, 11, 0.8))'
+                      : 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))',
                   }}
                 >
                   {passenger.avatar}
@@ -188,27 +181,25 @@ export const RailroadTrackPath = memo(
               {deliveredPassengers.map((passenger, pIndex) => (
                 <text
                   key={`delivered-${passenger.id}`}
-                  x={
-                    pos.x + (pIndex - deliveredPassengers.length / 2 + 0.5) * 28
-                  }
+                  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",
+                    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";
+RailroadTrackPath.displayName = 'RailroadTrackPath'
diff --git a/apps/web/src/app/arcade/complement-race/components/RaceTrack/SteamTrainJourney.tsx b/apps/web/src/app/arcade/complement-race/components/RaceTrack/SteamTrainJourney.tsx
index 708526c0..f448ba1e 100644
--- 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,55 +1,53 @@
-"use client";
+'use client'
 
-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 { useComplementRace } from "@/arcade-games/complement-race/Provider";
+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 { useComplementRace } from '@/arcade-games/complement-race/Provider'
 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 { RailroadTrackGenerator } from "../../lib/RailroadTrackGenerator";
-import { getRouteTheme } from "../../lib/routeThemes";
-import { GameHUD } from "./GameHUD";
-import { RailroadTrackPath } from "./RailroadTrackPath";
-import { TrainAndCars } from "./TrainAndCars";
-import { TrainTerrainBackground } from "./TrainTerrainBackground";
-import { GhostTrain } from "./GhostTrain";
+} 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 { RailroadTrackGenerator } from '../../lib/RailroadTrackGenerator'
+import { getRouteTheme } from '../../lib/routeThemes'
+import { GameHUD } from './GameHUD'
+import { RailroadTrackPath } from './RailroadTrackPath'
+import { TrainAndCars } from './TrainAndCars'
+import { TrainTerrainBackground } from './TrainTerrainBackground'
+import { GhostTrain } from './GhostTrain'
 
-const BoardingPassengerAnimation = memo(
-  ({ animation }: { animation: BoardingAnimation }) => {
-    const spring = useSpring({
-      from: { x: animation.fromX, y: animation.fromY, opacity: 1 },
-      to: { x: animation.toX, y: animation.toY, opacity: 1 },
-      config: { tension: 120, friction: 14 },
-    });
+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 },
+  })
 
-    return (
-      <animated.text
-        x={spring.x}
-        y={spring.y}
-        textAnchor="middle"
-        opacity={spring.opacity}
-        style={{
-          fontSize: "55px",
-          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))",
-        }}
-      >
-        {animation.passenger.avatar}
-      </animated.text>
-    );
-  },
-);
-BoardingPassengerAnimation.displayName = "BoardingPassengerAnimation";
+  return (
+    <animated.text
+      x={spring.x}
+      y={spring.y}
+      textAnchor="middle"
+      opacity={spring.opacity}
+      style={{
+        fontSize: '55px',
+        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))',
+      }}
+    >
+      {animation.passenger.avatar}
+    </animated.text>
+  )
+})
+BoardingPassengerAnimation.displayName = 'BoardingPassengerAnimation'
 
 const DisembarkingPassengerAnimation = memo(
   ({ animation }: { animation: DisembarkingAnimation }) => {
@@ -57,7 +55,7 @@ const DisembarkingPassengerAnimation = memo(
       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
@@ -66,25 +64,25 @@ const DisembarkingPassengerAnimation = memo(
         textAnchor="middle"
         opacity={spring.opacity}
         style={{
-          fontSize: "55px",
-          pointerEvents: "none",
-          filter: "drop-shadow(0 0 12px rgba(16, 185, 129, 0.8))",
+          fontSize: '55px',
+          pointerEvents: 'none',
+          filter: 'drop-shadow(0 0 12px rgba(16, 185, 129, 0.8))',
         }}
       >
         {animation.passenger.avatar}
       </animated.text>
-    );
-  },
-);
-DisembarkingPassengerAnimation.displayName = "DisembarkingPassengerAnimation";
+    )
+  }
+)
+DisembarkingPassengerAnimation.displayName = 'DisembarkingPassengerAnimation'
 
 interface SteamTrainJourneyProps {
-  momentum: number;
-  trainPosition: number;
-  pressure: number;
-  elapsedTime: number;
-  currentQuestion: ComplementQuestion | null;
-  currentInput: string;
+  momentum: number
+  trainPosition: number
+  pressure: number
+  elapsedTime: number
+  currentQuestion: ComplementQuestion | null
+  currentInput: string
 }
 
 export function SteamTrainJourney({
@@ -95,28 +93,28 @@ export function SteamTrainJourney({
   currentQuestion,
   currentInput,
 }: SteamTrainJourneyProps) {
-  const { state, multiplayerState, localPlayerId } = useComplementRace();
+  const { state, multiplayerState, localPlayerId } = useComplementRace()
 
-  const { getSkyGradient, getTimeOfDayPeriod } = useSteamJourney();
-  const _skyGradient = getSkyGradient();
-  const period = getTimeOfDayPeriod();
-  const { players } = useGameMode();
-  const { profile: _profile } = useUserProfile();
+  const { getSkyGradient, getTimeOfDayPeriod } = useSteamJourney()
+  const _skyGradient = getSkyGradient()
+  const period = getTimeOfDayPeriod()
+  const { players } = useGameMode()
+  const { profile: _profile } = useUserProfile()
 
   // Get the LOCAL player's emoji (not just the first player!)
-  const activePlayers = Array.from(players.values()).filter((p) => p.isActive);
-  const localPlayer = activePlayers.find((p) => p.isLocal);
-  const playerEmoji = localPlayer?.emoji ?? "👤";
+  const activePlayers = Array.from(players.values()).filter((p) => p.isActive)
+  const localPlayer = activePlayers.find((p) => p.isLocal)
+  const playerEmoji = localPlayer?.emoji ?? '👤'
 
-  const svgRef = useRef<SVGSVGElement>(null);
-  const pathRef = useRef<SVGPathElement>(null);
-  const [trackGenerator] = useState(() => new RailroadTrackGenerator(800, 600));
+  const svgRef = useRef<SVGSVGElement>(null)
+  const pathRef = useRef<SVGPathElement>(null)
+  const [trackGenerator] = useState(() => new RailroadTrackGenerator(800, 600))
 
   // Use server's authoritative maxConcurrentPassengers calculation
   // This ensures visual display matches game logic and console logs
-  const maxCars = Math.max(1, state.maxConcurrentPassengers || 3);
+  const maxCars = Math.max(1, state.maxConcurrentPassengers || 3)
 
-  const carSpacing = 7; // Distance between cars (in % of track)
+  const carSpacing = 7 // Distance between cars (in % of track)
 
   // Train transforms (extracted to hook)
   const { trainTransform, trainCars, locomotiveOpacity } = useTrainTransforms({
@@ -125,7 +123,7 @@ export function SteamTrainJourney({
     pathRef,
     maxCars,
     carSpacing,
-  });
+  })
 
   // Track management (extracted to hook)
   const {
@@ -144,35 +142,26 @@ export function SteamTrainJourney({
     passengers: state.passengers,
     maxCars,
     carSpacing,
-  });
+  })
 
   // Passenger animations (extracted to hook)
-  const { boardingAnimations, disembarkingAnimations } = usePassengerAnimations(
-    {
-      passengers: state.passengers,
-      stations: state.stations,
-      stationPositions,
-      trainPosition,
-      trackGenerator,
-      pathRef,
-    },
-  );
+  const { boardingAnimations, disembarkingAnimations } = usePassengerAnimations({
+    passengers: state.passengers,
+    stations: state.stations,
+    stationPositions,
+    trainPosition,
+    trackGenerator,
+    pathRef,
+  })
 
   // Time remaining (60 seconds total)
-  const timeRemaining = Math.max(0, 60 - Math.floor(elapsedTime / 1000));
+  const timeRemaining = Math.max(0, 60 - Math.floor(elapsedTime / 1000))
 
   // Period names for display
-  const periodNames = [
-    "Dawn",
-    "Morning",
-    "Midday",
-    "Afternoon",
-    "Dusk",
-    "Night",
-  ];
+  const periodNames = ['Dawn', 'Morning', 'Midday', 'Afternoon', 'Dusk', 'Night']
 
   // Get current route theme
-  const routeTheme = getRouteTheme(state.currentRoute);
+  const routeTheme = getRouteTheme(state.currentRoute)
 
   // Memoize filtered passenger lists to avoid recalculating on every render
   // Arcade room multiplayer uses claimedBy/deliveredBy instead of isBoarded/isDelivered
@@ -180,18 +169,15 @@ export function SteamTrainJourney({
   const boardedPassengers = useMemo(
     () =>
       displayPassengers.filter(
-        (p) =>
-          p.claimedBy === localPlayer?.id &&
-          p.claimedBy !== null &&
-          p.deliveredBy === null,
+        (p) => p.claimedBy === localPlayer?.id && p.claimedBy !== null && p.deliveredBy === null
       ),
-    [displayPassengers, localPlayer?.id],
-  );
+    [displayPassengers, localPlayer?.id]
+  )
 
   const nonDeliveredPassengers = useMemo(
     () => displayPassengers.filter((p) => p.deliveredBy === null),
-    [displayPassengers],
-  );
+    [displayPassengers]
+  )
 
   // Memoize ground texture circles to avoid recreating on every render
   const groundTextureCircles = useMemo(
@@ -202,48 +188,46 @@ export function SteamTrainJourney({
         cy: 140 + (i % 5) * 60,
         r: 2 + (i % 3),
       })),
-    [],
-  );
+    []
+  )
 
   // Calculate local train car positions for ghost train overlap detection
   // Array includes locomotive + all cars: [locomotive, car1, car2, car3]
   const localTrainCarPositions = useMemo(() => {
-    const positions = [trainPosition]; // Locomotive at front
+    const positions = [trainPosition] // Locomotive at front
     for (let i = 0; i < maxCars; i++) {
-      positions.push(Math.max(0, trainPosition - (i + 1) * carSpacing));
+      positions.push(Math.max(0, trainPosition - (i + 1) * carSpacing))
     }
-    return positions;
-  }, [trainPosition, maxCars, carSpacing]);
+    return positions
+  }, [trainPosition, maxCars, carSpacing])
 
   // Get other players for ghost trains (filter out local player)
   const otherPlayers = useMemo(() => {
     if (!multiplayerState?.players || !localPlayerId) {
-      return [];
+      return []
     }
 
     const filtered = Object.entries(multiplayerState.players)
-      .filter(
-        ([playerId, player]) => playerId !== localPlayerId && player.isActive,
-      )
-      .map(([_, player]) => player);
+      .filter(([playerId, player]) => playerId !== localPlayerId && player.isActive)
+      .map(([_, player]) => player)
 
-    return filtered;
-  }, [multiplayerState?.players, localPlayerId]);
+    return filtered
+  }, [multiplayerState?.players, localPlayerId])
 
-  if (!trackData) return null;
+  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",
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        background: 'transparent',
+        overflow: 'visible',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'stretch',
       }}
     >
       {/* Game HUD - overlays and UI elements */}
@@ -265,10 +249,10 @@ export function SteamTrainJourney({
         ref={svgRef}
         viewBox="-50 -50 900 700"
         style={{
-          width: "100%",
-          height: "auto",
-          aspectRatio: "800 / 600",
-          overflow: "visible",
+          width: '100%',
+          height: 'auto',
+          aspectRatio: '800 / 600',
+          overflow: 'visible',
         }}
       >
         {/* Terrain background - ground, mountains, and tunnels */}
@@ -370,5 +354,5 @@ export function SteamTrainJourney({
         }
       `}</style>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/components/RaceTrack/TrainAndCars.tsx b/apps/web/src/app/arcade/complement-race/components/RaceTrack/TrainAndCars.tsx
index 05f93a8b..58c22a95 100644
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/TrainAndCars.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/TrainAndCars.tsx
@@ -1,41 +1,38 @@
-"use client";
+'use client'
 
-import { memo } from "react";
-import type {
-  BoardingAnimation,
-  DisembarkingAnimation,
-} from "../../hooks/usePassengerAnimations";
-import type { Passenger } from "@/arcade-games/complement-race/types";
+import { memo } from 'react'
+import type { BoardingAnimation, DisembarkingAnimation } from '../../hooks/usePassengerAnimations'
+import type { Passenger } from '@/arcade-games/complement-race/types'
 
 interface TrainCarTransform {
-  x: number;
-  y: number;
-  rotation: number;
-  position: number;
-  opacity: number;
+  x: number
+  y: number
+  rotation: number
+  position: number
+  opacity: number
 }
 
 interface TrainTransform {
-  x: number;
-  y: number;
-  rotation: number;
+  x: number
+  y: number
+  rotation: number
 }
 
 interface TrainAndCarsProps {
-  boardingAnimations: Map<string, BoardingAnimation>;
-  disembarkingAnimations: Map<string, DisembarkingAnimation>;
+  boardingAnimations: Map<string, BoardingAnimation>
+  disembarkingAnimations: Map<string, DisembarkingAnimation>
   BoardingPassengerAnimation: React.ComponentType<{
-    animation: BoardingAnimation;
-  }>;
+    animation: BoardingAnimation
+  }>
   DisembarkingPassengerAnimation: React.ComponentType<{
-    animation: DisembarkingAnimation;
-  }>;
-  trainCars: TrainCarTransform[];
-  boardedPassengers: Passenger[];
-  trainTransform: TrainTransform;
-  locomotiveOpacity: number;
-  playerEmoji: string;
-  momentum: number;
+    animation: DisembarkingAnimation
+  }>
+  trainCars: TrainCarTransform[]
+  boardedPassengers: Passenger[]
+  trainTransform: TrainTransform
+  locomotiveOpacity: number
+  playerEmoji: string
+  momentum: number
 }
 
 export const TrainAndCars = memo(
@@ -72,7 +69,7 @@ export const TrainAndCars = memo(
         {/* 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];
+          const passenger = boardedPassengers[carIndex]
 
           return (
             <g
@@ -81,7 +78,7 @@ export const TrainAndCars = memo(
               transform={`translate(${carTransform.x}, ${carTransform.y}) rotate(${carTransform.rotation}) scale(-1, 1)`}
               opacity={carTransform.opacity}
               style={{
-                transition: "opacity 0.5s ease-in",
+                transition: 'opacity 0.5s ease-in',
               }}
             >
               {/* Train car */}
@@ -91,9 +88,9 @@ export const TrainAndCars = memo(
                 y={0}
                 textAnchor="middle"
                 style={{
-                  fontSize: "65px",
-                  filter: "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',
                 }}
               >
                 🚃
@@ -107,18 +104,18 @@ export const TrainAndCars = memo(
                   y={0}
                   textAnchor="middle"
                   style={{
-                    fontSize: "42px",
+                    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",
+                      ? '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 */}
@@ -127,7 +124,7 @@ export const TrainAndCars = memo(
           transform={`translate(${trainTransform.x}, ${trainTransform.y}) rotate(${trainTransform.rotation}) scale(-1, 1)`}
           opacity={locomotiveOpacity}
           style={{
-            transition: "opacity 0.5s ease-in",
+            transition: 'opacity 0.5s ease-in',
           }}
         >
           {/* Train locomotive */}
@@ -137,9 +134,9 @@ export const TrainAndCars = memo(
             y={0}
             textAnchor="middle"
             style={{
-              fontSize: "100px",
-              filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))",
-              pointerEvents: "none",
+              fontSize: '100px',
+              filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))',
+              pointerEvents: 'none',
             }}
           >
             🚂
@@ -152,9 +149,9 @@ export const TrainAndCars = memo(
             y={0}
             textAnchor="middle"
             style={{
-              fontSize: "70px",
-              filter: "drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))",
-              pointerEvents: "none",
+              fontSize: '70px',
+              filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))',
+              pointerEvents: 'none',
             }}
           >
             {playerEmoji}
@@ -170,10 +167,10 @@ export const TrainAndCars = memo(
                 r="10"
                 fill="rgba(255, 255, 255, 0.6)"
                 style={{
-                  filter: "blur(4px)",
+                  filter: 'blur(4px)',
                   animation: `steamPuffSVG 2s ease-out infinite`,
                   animationDelay: `${delay}s`,
-                  pointerEvents: "none",
+                  pointerEvents: 'none',
                 }}
               />
             ))}
@@ -188,16 +185,16 @@ export const TrainAndCars = memo(
                 r="3"
                 fill="#2c2c2c"
                 style={{
-                  animation: "coalFallingSVG 1.2s ease-out infinite",
+                  animation: 'coalFallingSVG 1.2s ease-out infinite',
                   animationDelay: `${delay}s`,
-                  pointerEvents: "none",
+                  pointerEvents: 'none',
                 }}
               />
             ))}
         </g>
       </>
-    );
-  },
-);
+    )
+  }
+)
 
-TrainAndCars.displayName = "TrainAndCars";
+TrainAndCars.displayName = 'TrainAndCars'
diff --git a/apps/web/src/app/arcade/complement-race/components/RaceTrack/TrainTerrainBackground.tsx b/apps/web/src/app/arcade/complement-race/components/RaceTrack/TrainTerrainBackground.tsx
index abfd3262..53ae8baf 100644
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/TrainTerrainBackground.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/TrainTerrainBackground.tsx
@@ -1,15 +1,15 @@
-"use client";
+'use client'
 
-import { memo } from "react";
+import { memo } from 'react'
 
 interface TrainTerrainBackgroundProps {
-  ballastPath: string;
+  ballastPath: string
   groundTextureCircles: Array<{
-    key: string;
-    cx: number;
-    cy: number;
-    r: number;
-  }>;
+    key: string
+    cx: number
+    cy: number
+    r: number
+  }>
 }
 
 export const TrainTerrainBackground = memo(
@@ -18,55 +18,19 @@ export const TrainTerrainBackground = memo(
       <>
         {/* 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 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 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 }}
-            />
+            <stop offset="0%" style={{ stopColor: '#6a8759', stopOpacity: 0.3 }} />
+            <stop offset="100%" style={{ stopColor: '#8B7355', stopOpacity: 0 }} />
           </linearGradient>
         </defs>
 
@@ -74,13 +38,7 @@ export const TrainTerrainBackground = memo(
         <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)"
-        />
+        <rect x="-50" y="120" width="900" height="60" fill="url(#groundGradient)" />
 
         {/* Ground texture - scattered rocks/pebbles */}
         {groundTextureCircles.map((circle) => (
@@ -95,13 +53,7 @@ export const TrainTerrainBackground = memo(
         ))}
 
         {/* Railroad ballast (gravel bed) */}
-        <path
-          d={ballastPath}
-          fill="none"
-          stroke="#8B7355"
-          strokeWidth="40"
-          strokeLinecap="round"
-        />
+        <path d={ballastPath} fill="none" stroke="#8B7355" strokeWidth="40" strokeLinecap="round" />
 
         {/* Left mountain and tunnel */}
         <g data-element="left-tunnel">
@@ -112,10 +64,7 @@ export const TrainTerrainBackground = memo(
           <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)"
-          />
+          <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" />
@@ -156,10 +105,7 @@ export const TrainTerrainBackground = memo(
           <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)"
-          />
+          <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" />
@@ -191,8 +137,8 @@ export const TrainTerrainBackground = memo(
           />
         </g>
       </>
-    );
-  },
-);
+    )
+  }
+)
 
-TrainTerrainBackground.displayName = "TrainTerrainBackground";
+TrainTerrainBackground.displayName = 'TrainTerrainBackground'
diff --git 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
index 83161bd9..64bf78a9 100644
--- 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,61 +1,61 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, test, vi } from "vitest";
-import type { Passenger, Station } from "@/arcade-games/complement-race/types";
-import { GameHUD } from "../GameHUD";
+import { render, screen } from '@testing-library/react'
+import { describe, expect, test, vi } from 'vitest'
+import type { Passenger, Station } from '@/arcade-games/complement-race/types'
+import { GameHUD } from '../GameHUD'
 
 // Mock child components
-vi.mock("../../PassengerCard", () => ({
+vi.mock('../../PassengerCard', () => ({
   PassengerCard: ({ passenger }: { passenger: Passenger }) => (
     <div data-testid="passenger-card">{passenger.avatar}</div>
   ),
-}));
+}))
 
-vi.mock("../../PressureGauge", () => ({
+vi.mock('../../PressureGauge', () => ({
   PressureGauge: ({ pressure }: { pressure: number }) => (
     <div data-testid="pressure-gauge">{pressure}</div>
   ),
-}));
+}))
 
-describe("GameHUD", () => {
+describe('GameHUD', () => {
   const mockRouteTheme = {
-    emoji: "🚂",
-    name: "Mountain Pass",
-  };
+    emoji: '🚂',
+    name: 'Mountain Pass',
+  }
 
   const mockStations: Station[] = [
     {
-      id: "station-1",
-      name: "Station 1",
+      id: 'station-1',
+      name: 'Station 1',
       position: 20,
-      icon: "🏭",
-      emoji: "🏭",
+      icon: '🏭',
+      emoji: '🏭',
     },
     {
-      id: "station-2",
-      name: "Station 2",
+      id: 'station-2',
+      name: 'Station 2',
       position: 60,
-      icon: "🏛️",
-      emoji: "🏛️",
+      icon: '🏛️',
+      emoji: '🏛️',
     },
-  ];
+  ]
 
   const mockPassenger: Passenger = {
-    id: "passenger-1",
-    name: "Test Passenger",
-    avatar: "👨",
-    originStationId: "station-1",
-    destinationStationId: "station-2",
+    id: 'passenger-1',
+    name: 'Test Passenger',
+    avatar: '👨',
+    originStationId: 'station-1',
+    destinationStationId: 'station-2',
     isUrgent: false,
     claimedBy: null,
     deliveredBy: null,
     carIndex: null,
     timestamp: Date.now(),
-  };
+  }
 
   const defaultProps = {
     routeTheme: mockRouteTheme,
     currentRoute: 1,
-    periodName: "🌅 Dawn",
+    periodName: '🌅 Dawn',
     timeRemaining: 45,
     pressure: 75,
     nonDeliveredPassengers: [],
@@ -66,118 +66,116 @@ describe("GameHUD", () => {
       correctAnswer: 7,
       showAsAbacus: false,
     },
-    currentInput: "7",
-  };
+    currentInput: '7',
+  }
 
-  test("renders route information", () => {
-    render(<GameHUD {...defaultProps} />);
+  test('renders route information', () => {
+    render(<GameHUD {...defaultProps} />)
 
-    expect(screen.getByText("Route 1")).toBeInTheDocument();
-    expect(screen.getByText("Mountain Pass")).toBeInTheDocument();
-    expect(screen.getByText("🚂")).toBeInTheDocument();
-  });
+    expect(screen.getByText('Route 1')).toBeInTheDocument()
+    expect(screen.getByText('Mountain Pass')).toBeInTheDocument()
+    expect(screen.getByText('🚂')).toBeInTheDocument()
+  })
 
-  test("renders time of day period", () => {
-    render(<GameHUD {...defaultProps} />);
+  test('renders time of day period', () => {
+    render(<GameHUD {...defaultProps} />)
 
-    expect(screen.getByText("🌅 Dawn")).toBeInTheDocument();
-  });
+    expect(screen.getByText('🌅 Dawn')).toBeInTheDocument()
+  })
 
-  test("renders time remaining", () => {
-    render(<GameHUD {...defaultProps} />);
+  test('renders time remaining', () => {
+    render(<GameHUD {...defaultProps} />)
 
-    expect(screen.getByText(/45s/)).toBeInTheDocument();
-  });
+    expect(screen.getByText(/45s/)).toBeInTheDocument()
+  })
 
-  test("renders pressure gauge", () => {
-    render(<GameHUD {...defaultProps} />);
+  test('renders pressure gauge', () => {
+    render(<GameHUD {...defaultProps} />)
 
-    expect(screen.getByTestId("pressure-gauge")).toBeInTheDocument();
-    expect(screen.getByText("75")).toBeInTheDocument();
-  });
+    expect(screen.getByTestId('pressure-gauge')).toBeInTheDocument()
+    expect(screen.getByText('75')).toBeInTheDocument()
+  })
 
-  test("renders passenger list when passengers exist", () => {
-    render(
-      <GameHUD {...defaultProps} nonDeliveredPassengers={[mockPassenger]} />,
-    );
+  test('renders passenger list when passengers exist', () => {
+    render(<GameHUD {...defaultProps} nonDeliveredPassengers={[mockPassenger]} />)
 
-    expect(screen.getByTestId("passenger-card")).toBeInTheDocument();
-    expect(screen.getByText("👨")).toBeInTheDocument();
-  });
+    expect(screen.getByTestId('passenger-card')).toBeInTheDocument()
+    expect(screen.getByText('👨')).toBeInTheDocument()
+  })
 
-  test("does not render passenger list when empty", () => {
-    render(<GameHUD {...defaultProps} nonDeliveredPassengers={[]} />);
+  test('does not render passenger list when empty', () => {
+    render(<GameHUD {...defaultProps} nonDeliveredPassengers={[]} />)
 
-    expect(screen.queryByTestId("passenger-card")).not.toBeInTheDocument();
-  });
+    expect(screen.queryByTestId('passenger-card')).not.toBeInTheDocument()
+  })
 
-  test("renders current question when provided", () => {
-    render(<GameHUD {...defaultProps} />);
+  test('renders current question when provided', () => {
+    render(<GameHUD {...defaultProps} />)
 
-    expect(screen.getByText("7")).toBeInTheDocument(); // currentInput
-    expect(screen.getByText("3")).toBeInTheDocument(); // question.number
-    expect(screen.getByText("10")).toBeInTheDocument(); // targetSum
-    expect(screen.getByText("+")).toBeInTheDocument();
-    expect(screen.getByText("=")).toBeInTheDocument();
-  });
+    expect(screen.getByText('7')).toBeInTheDocument() // currentInput
+    expect(screen.getByText('3')).toBeInTheDocument() // question.number
+    expect(screen.getByText('10')).toBeInTheDocument() // targetSum
+    expect(screen.getByText('+')).toBeInTheDocument()
+    expect(screen.getByText('=')).toBeInTheDocument()
+  })
 
-  test("shows question mark when no input", () => {
-    render(<GameHUD {...defaultProps} currentInput="" />);
+  test('shows question mark when no input', () => {
+    render(<GameHUD {...defaultProps} currentInput="" />)
 
-    expect(screen.getByText("?")).toBeInTheDocument();
-  });
+    expect(screen.getByText('?')).toBeInTheDocument()
+  })
 
-  test("does not render question display when currentQuestion is null", () => {
-    render(<GameHUD {...defaultProps} currentQuestion={null} />);
+  test('does not render question display when currentQuestion is null', () => {
+    render(<GameHUD {...defaultProps} currentQuestion={null} />)
 
-    expect(screen.queryByText("+")).not.toBeInTheDocument();
-    expect(screen.queryByText("=")).not.toBeInTheDocument();
-  });
+    expect(screen.queryByText('+')).not.toBeInTheDocument()
+    expect(screen.queryByText('=')).not.toBeInTheDocument()
+  })
 
-  test("renders multiple passengers", () => {
+  test('renders multiple passengers', () => {
     const passengers = [
       mockPassenger,
-      { ...mockPassenger, id: "passenger-2", avatar: "👩" },
-      { ...mockPassenger, id: "passenger-3", avatar: "👧" },
-    ];
+      { ...mockPassenger, id: 'passenger-2', avatar: '👩' },
+      { ...mockPassenger, id: 'passenger-3', avatar: '👧' },
+    ]
 
-    render(<GameHUD {...defaultProps} nonDeliveredPassengers={passengers} />);
+    render(<GameHUD {...defaultProps} nonDeliveredPassengers={passengers} />)
 
-    expect(screen.getAllByTestId("passenger-card")).toHaveLength(3);
-    expect(screen.getByText("👨")).toBeInTheDocument();
-    expect(screen.getByText("👩")).toBeInTheDocument();
-    expect(screen.getByText("👧")).toBeInTheDocument();
-  });
+    expect(screen.getAllByTestId('passenger-card')).toHaveLength(3)
+    expect(screen.getByText('👨')).toBeInTheDocument()
+    expect(screen.getByText('👩')).toBeInTheDocument()
+    expect(screen.getByText('👧')).toBeInTheDocument()
+  })
 
-  test("updates when route changes", () => {
-    const { rerender } = render(<GameHUD {...defaultProps} />);
+  test('updates when route changes', () => {
+    const { rerender } = render(<GameHUD {...defaultProps} />)
 
-    expect(screen.getByText("Route 1")).toBeInTheDocument();
+    expect(screen.getByText('Route 1')).toBeInTheDocument()
 
-    rerender(<GameHUD {...defaultProps} currentRoute={2} />);
+    rerender(<GameHUD {...defaultProps} currentRoute={2} />)
 
-    expect(screen.getByText("Route 2")).toBeInTheDocument();
-  });
+    expect(screen.getByText('Route 2')).toBeInTheDocument()
+  })
 
-  test("updates when time remaining changes", () => {
-    const { rerender } = render(<GameHUD {...defaultProps} />);
+  test('updates when time remaining changes', () => {
+    const { rerender } = render(<GameHUD {...defaultProps} />)
 
-    expect(screen.getByText(/45s/)).toBeInTheDocument();
+    expect(screen.getByText(/45s/)).toBeInTheDocument()
 
-    rerender(<GameHUD {...defaultProps} timeRemaining={30} />);
+    rerender(<GameHUD {...defaultProps} timeRemaining={30} />)
 
-    expect(screen.getByText(/30s/)).toBeInTheDocument();
-  });
+    expect(screen.getByText(/30s/)).toBeInTheDocument()
+  })
 
-  test("memoization: same props do not cause re-render", () => {
-    const { rerender, container } = render(<GameHUD {...defaultProps} />);
+  test('memoization: same props do not cause re-render', () => {
+    const { rerender, container } = render(<GameHUD {...defaultProps} />)
 
-    const initialHTML = container.innerHTML;
+    const initialHTML = container.innerHTML
 
     // Rerender with same props
-    rerender(<GameHUD {...defaultProps} />);
+    rerender(<GameHUD {...defaultProps} />)
 
     // Should be memoized (same HTML)
-    expect(container.innerHTML).toBe(initialHTML);
-  });
-});
+    expect(container.innerHTML).toBe(initialHTML)
+  })
+})
diff --git 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
index 6ab4bfdb..4b7426e6 100644
--- 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,189 +1,179 @@
-import { render } from "@testing-library/react";
-import { describe, expect, test } from "vitest";
-import { TrainTerrainBackground } from "../TrainTerrainBackground";
+import { render } from '@testing-library/react'
+import { describe, expect, test } from 'vitest'
+import { TrainTerrainBackground } from '../TrainTerrainBackground'
 
-describe("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-1', cx: 10, cy: 150, r: 2 },
+    { key: 'ground-2', cx: 40, cy: 180, r: 3 },
+  ]
 
-  test("renders without crashing", () => {
+  test('renders without crashing', () => {
     const { container } = render(
       <svg>
         <TrainTerrainBackground
           ballastPath="M 0 300 L 800 300"
           groundTextureCircles={mockGroundCircles}
         />
-      </svg>,
-    );
+      </svg>
+    )
 
-    expect(container).toBeTruthy();
-  });
+    expect(container).toBeTruthy()
+  })
 
-  test("renders gradient definitions", () => {
+  test('renders gradient definitions', () => {
     const { container } = render(
       <svg>
         <TrainTerrainBackground
           ballastPath="M 0 300 L 800 300"
           groundTextureCircles={mockGroundCircles}
         />
-      </svg>,
-    );
+      </svg>
+    )
 
-    const defs = container.querySelector("defs");
-    expect(defs).toBeTruthy();
+    const defs = container.querySelector('defs')
+    expect(defs).toBeTruthy()
 
     // Check for gradient IDs
-    expect(container.querySelector("#mountainGradientLeft")).toBeTruthy();
-    expect(container.querySelector("#mountainGradientRight")).toBeTruthy();
-    expect(container.querySelector("#groundGradient")).toBeTruthy();
-  });
+    expect(container.querySelector('#mountainGradientLeft')).toBeTruthy()
+    expect(container.querySelector('#mountainGradientRight')).toBeTruthy()
+    expect(container.querySelector('#groundGradient')).toBeTruthy()
+  })
 
-  test("renders ground layer rects", () => {
+  test('renders ground layer rects', () => {
     const { container } = render(
       <svg>
         <TrainTerrainBackground
           ballastPath="M 0 300 L 800 300"
           groundTextureCircles={mockGroundCircles}
         />
-      </svg>,
-    );
+      </svg>
+    )
 
-    const rects = container.querySelectorAll("rect");
-    expect(rects.length).toBeGreaterThan(0);
+    const rects = container.querySelectorAll('rect')
+    expect(rects.length).toBeGreaterThan(0)
 
     // Check for ground base layer
     const groundRect = Array.from(rects).find(
-      (rect) =>
-        rect.getAttribute("fill") === "#8B7355" &&
-        rect.getAttribute("width") === "900",
-    );
-    expect(groundRect).toBeTruthy();
-  });
+      (rect) => rect.getAttribute('fill') === '#8B7355' && rect.getAttribute('width') === '900'
+    )
+    expect(groundRect).toBeTruthy()
+  })
 
-  test("renders ground texture circles", () => {
+  test('renders ground texture circles', () => {
     const { container } = render(
       <svg>
         <TrainTerrainBackground
           ballastPath="M 0 300 L 800 300"
           groundTextureCircles={mockGroundCircles}
         />
-      </svg>,
-    );
+      </svg>
+    )
 
-    const circles = container.querySelectorAll("circle");
-    expect(circles.length).toBeGreaterThanOrEqual(2);
+    const circles = container.querySelectorAll('circle')
+    expect(circles.length).toBeGreaterThanOrEqual(2)
 
     // Verify circle attributes
-    const firstCircle = circles[0];
-    expect(firstCircle.getAttribute("cx")).toBe("10");
-    expect(firstCircle.getAttribute("cy")).toBe("150");
-    expect(firstCircle.getAttribute("r")).toBe("2");
-  });
+    const firstCircle = circles[0]
+    expect(firstCircle.getAttribute('cx')).toBe('10')
+    expect(firstCircle.getAttribute('cy')).toBe('150')
+    expect(firstCircle.getAttribute('r')).toBe('2')
+  })
 
-  test("renders ballast path with correct attributes", () => {
+  test('renders ballast path with correct attributes', () => {
     const { container } = render(
       <svg>
         <TrainTerrainBackground
           ballastPath="M 0 300 L 800 300"
           groundTextureCircles={mockGroundCircles}
         />
-      </svg>,
-    );
+      </svg>
+    )
 
-    const ballastPath = Array.from(container.querySelectorAll("path")).find(
+    const ballastPath = Array.from(container.querySelectorAll('path')).find(
       (path) =>
-        path.getAttribute("d") === "M 0 300 L 800 300" &&
-        path.getAttribute("stroke") === "#8B7355",
-    );
-    expect(ballastPath).toBeTruthy();
-    expect(ballastPath?.getAttribute("stroke-width")).toBe("40");
-  });
+        path.getAttribute('d') === 'M 0 300 L 800 300' && path.getAttribute('stroke') === '#8B7355'
+    )
+    expect(ballastPath).toBeTruthy()
+    expect(ballastPath?.getAttribute('stroke-width')).toBe('40')
+  })
 
-  test("renders left tunnel structure", () => {
+  test('renders left tunnel structure', () => {
     const { container } = render(
       <svg>
         <TrainTerrainBackground
           ballastPath="M 0 300 L 800 300"
           groundTextureCircles={mockGroundCircles}
         />
-      </svg>,
-    );
+      </svg>
+    )
 
-    const leftTunnel = container.querySelector('[data-element="left-tunnel"]');
-    expect(leftTunnel).toBeTruthy();
+    const leftTunnel = container.querySelector('[data-element="left-tunnel"]')
+    expect(leftTunnel).toBeTruthy()
 
     // Check for tunnel elements
-    const ellipses = leftTunnel?.querySelectorAll("ellipse");
-    expect(ellipses?.length).toBeGreaterThan(0);
-  });
+    const ellipses = leftTunnel?.querySelectorAll('ellipse')
+    expect(ellipses?.length).toBeGreaterThan(0)
+  })
 
-  test("renders right tunnel structure", () => {
+  test('renders right tunnel structure', () => {
     const { container } = render(
       <svg>
         <TrainTerrainBackground
           ballastPath="M 0 300 L 800 300"
           groundTextureCircles={mockGroundCircles}
         />
-      </svg>,
-    );
+      </svg>
+    )
 
-    const rightTunnel = container.querySelector(
-      '[data-element="right-tunnel"]',
-    );
-    expect(rightTunnel).toBeTruthy();
+    const rightTunnel = container.querySelector('[data-element="right-tunnel"]')
+    expect(rightTunnel).toBeTruthy()
 
     // Check for tunnel elements
-    const ellipses = rightTunnel?.querySelectorAll("ellipse");
-    expect(ellipses?.length).toBeGreaterThan(0);
-  });
+    const ellipses = rightTunnel?.querySelectorAll('ellipse')
+    expect(ellipses?.length).toBeGreaterThan(0)
+  })
 
-  test("renders mountains with gradient fills", () => {
+  test('renders mountains with gradient fills', () => {
     const { container } = render(
       <svg>
         <TrainTerrainBackground
           ballastPath="M 0 300 L 800 300"
           groundTextureCircles={mockGroundCircles}
         />
-      </svg>,
-    );
+      </svg>
+    )
 
     // Check for paths with gradient fills
-    const gradientPaths = Array.from(container.querySelectorAll("path")).filter(
-      (path) => path.getAttribute("fill")?.includes("url(#mountainGradient"),
-    );
-    expect(gradientPaths.length).toBeGreaterThanOrEqual(2);
-  });
+    const gradientPaths = Array.from(container.querySelectorAll('path')).filter((path) =>
+      path.getAttribute('fill')?.includes('url(#mountainGradient')
+    )
+    expect(gradientPaths.length).toBeGreaterThanOrEqual(2)
+  })
 
-  test("handles empty groundTextureCircles array", () => {
+  test('handles empty groundTextureCircles array', () => {
     const { container } = render(
       <svg>
-        <TrainTerrainBackground
-          ballastPath="M 0 300 L 800 300"
-          groundTextureCircles={[]}
-        />
-      </svg>,
-    );
+        <TrainTerrainBackground ballastPath="M 0 300 L 800 300" groundTextureCircles={[]} />
+      </svg>
+    )
 
     // Should still render other elements
-    expect(container.querySelector("defs")).toBeTruthy();
-    expect(
-      container.querySelector('[data-element="left-tunnel"]'),
-    ).toBeTruthy();
-  });
+    expect(container.querySelector('defs')).toBeTruthy()
+    expect(container.querySelector('[data-element="left-tunnel"]')).toBeTruthy()
+  })
 
-  test("memoization: does not re-render with same props", () => {
+  test('memoization: does not re-render with same props', () => {
     const { rerender, container } = render(
       <svg>
         <TrainTerrainBackground
           ballastPath="M 0 300 L 800 300"
           groundTextureCircles={mockGroundCircles}
         />
-      </svg>,
-    );
+      </svg>
+    )
 
-    const initialHTML = container.innerHTML;
+    const initialHTML = container.innerHTML
 
     // Rerender with same props
     rerender(
@@ -192,10 +182,10 @@ describe("TrainTerrainBackground", () => {
           ballastPath="M 0 300 L 800 300"
           groundTextureCircles={mockGroundCircles}
         />
-      </svg>,
-    );
+      </svg>
+    )
 
     // HTML should be identical (component memoized)
-    expect(container.innerHTML).toBe(initialHTML);
-  });
-});
+    expect(container.innerHTML).toBe(initialHTML)
+  })
+})
diff --git a/apps/web/src/app/arcade/complement-race/components/RouteCelebration.tsx b/apps/web/src/app/arcade/complement-race/components/RouteCelebration.tsx
index 6902d9c9..965e3b75 100644
--- a/apps/web/src/app/arcade/complement-race/components/RouteCelebration.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RouteCelebration.tsx
@@ -1,11 +1,11 @@
-"use client";
+'use client'
 
-import { getRouteTheme } from "../lib/routeThemes";
+import { getRouteTheme } from '../lib/routeThemes'
 
 interface RouteCelebrationProps {
-  completedRouteNumber: number;
-  nextRouteNumber: number;
-  onContinue: () => void;
+  completedRouteNumber: number
+  nextRouteNumber: number
+  onContinue: () => void
 }
 
 export function RouteCelebration({
@@ -13,43 +13,43 @@ export function RouteCelebration({
   nextRouteNumber,
   onContinue,
 }: RouteCelebrationProps) {
-  const completedTheme = getRouteTheme(completedRouteNumber);
-  const nextTheme = getRouteTheme(nextRouteNumber);
+  const completedTheme = getRouteTheme(completedRouteNumber)
+  const nextTheme = getRouteTheme(nextRouteNumber)
 
   return (
     <div
       style={{
-        position: "fixed",
+        position: 'fixed',
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        background: "rgba(0, 0, 0, 0.7)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        background: 'rgba(0, 0, 0, 0.7)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
         zIndex: 9999,
-        animation: "fadeIn 0.3s ease-out",
+        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",
+          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",
+            fontSize: '64px',
+            marginBottom: '20px',
+            animation: 'bounce 1s ease-in-out infinite',
           }}
         >
           🎉
@@ -57,10 +57,10 @@ export function RouteCelebration({
 
         <h2
           style={{
-            fontSize: "32px",
-            fontWeight: "bold",
-            marginBottom: "16px",
-            textShadow: "0 2px 10px rgba(0, 0, 0, 0.3)",
+            fontSize: '32px',
+            fontWeight: 'bold',
+            marginBottom: '16px',
+            textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)',
           }}
         >
           Route Complete!
@@ -69,19 +69,15 @@ export function RouteCelebration({
         {/* Completed route info */}
         <div
           style={{
-            background: "rgba(255, 255, 255, 0.2)",
-            borderRadius: "12px",
-            padding: "16px",
-            marginBottom: "24px",
+            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" }}>
+          <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>
@@ -89,29 +85,25 @@ export function RouteCelebration({
         {/* Next route preview */}
         <div
           style={{
-            fontSize: "14px",
+            fontSize: '14px',
             opacity: 0.9,
-            marginBottom: "8px",
+            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)",
+            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" }}>
+          <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>
         </div>
@@ -120,24 +112,24 @@ export function RouteCelebration({
         <button
           onClick={onContinue}
           style={{
-            background: "white",
-            color: "#667eea",
-            border: "none",
-            borderRadius: "12px",
-            padding: "16px 32px",
-            fontSize: "18px",
-            fontWeight: "bold",
-            cursor: "pointer",
-            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)",
-            transition: "transform 0.2s ease, box-shadow 0.2s ease",
+            background: 'white',
+            color: '#667eea',
+            border: 'none',
+            borderRadius: '12px',
+            padding: '16px 32px',
+            fontSize: '18px',
+            fontWeight: 'bold',
+            cursor: 'pointer',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
+            transition: 'transform 0.2s ease, box-shadow 0.2s ease',
           }}
           onMouseEnter={(e) => {
-            e.currentTarget.style.transform = "translateY(-2px)";
-            e.currentTarget.style.boxShadow = "0 6px 16px rgba(0, 0, 0, 0.3)";
+            e.currentTarget.style.transform = 'translateY(-2px)'
+            e.currentTarget.style.boxShadow = '0 6px 16px rgba(0, 0, 0, 0.3)'
           }}
           onMouseLeave={(e) => {
-            e.currentTarget.style.transform = "translateY(0)";
-            e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.2)";
+            e.currentTarget.style.transform = 'translateY(0)'
+            e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.2)'
           }}
         >
           Continue Journey 🚂
@@ -175,5 +167,5 @@ export function RouteCelebration({
         }
       `}</style>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/context/ComplementRaceContext.tsx b/apps/web/src/app/arcade/complement-race/context/ComplementRaceContext.tsx
index 4242bc1e..fe4603eb 100644
--- a/apps/web/src/app/arcade/complement-race/context/ComplementRaceContext.tsx
+++ b/apps/web/src/app/arcade/complement-race/context/ComplementRaceContext.tsx
@@ -1,14 +1,8 @@
-"use client";
+'use client'
 
-import type React from "react";
-import { createContext, type ReactNode, useContext, useReducer } from "react";
-import type {
-  AIRacer,
-  DifficultyTracker,
-  GameAction,
-  GameState,
-  Station,
-} 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(),
@@ -19,60 +13,60 @@ const initialDifficultyTracker: DifficultyTracker = {
   consecutiveIncorrect: 0,
   learningMode: true,
   adaptationRate: 0.1,
-};
+}
 
 const initialAIRacers: AIRacer[] = [
   {
-    id: "ai-racer-1",
+    id: 'ai-racer-1',
     position: 0,
     speed: 0.32, // Balanced speed for good challenge
-    name: "Swift AI",
-    personality: "competitive",
-    icon: "🏃‍♂️",
+    name: 'Swift AI',
+    personality: 'competitive',
+    icon: '🏃‍♂️',
     lastComment: 0,
     commentCooldown: 0,
     previousPosition: 0,
   },
   {
-    id: "ai-racer-2",
+    id: 'ai-racer-2',
     position: 0,
     speed: 0.2, // Balanced speed for good challenge
-    name: "Math Bot",
-    personality: "analytical",
-    icon: "🏃",
+    name: 'Math Bot',
+    personality: 'analytical',
+    icon: '🏃',
     lastComment: 0,
     commentCooldown: 0,
     previousPosition: 0,
   },
-];
+]
 
 const initialStations: Station[] = [
-  { id: "station-0", name: "Depot", position: 0, icon: "🏭", emoji: "🏭" },
-  { id: "station-1", name: "Riverside", position: 20, icon: "🌊", emoji: "🌊" },
-  { id: "station-2", name: "Hillside", position: 40, icon: "⛰️", emoji: "⛰️" },
+  { id: 'station-0', name: 'Depot', position: 0, icon: '🏭', emoji: '🏭' },
+  { id: 'station-1', name: 'Riverside', position: 20, icon: '🌊', emoji: '🌊' },
+  { id: 'station-2', name: 'Hillside', position: 40, icon: '⛰️', emoji: '⛰️' },
   {
-    id: "station-3",
-    name: "Canyon View",
+    id: 'station-3',
+    name: 'Canyon View',
     position: 60,
-    icon: "🏜️",
-    emoji: "🏜️",
+    icon: '🏜️',
+    emoji: '🏜️',
   },
-  { id: "station-4", name: "Meadows", position: 80, icon: "🌾", emoji: "🌾" },
+  { id: 'station-4', name: 'Meadows', position: 80, icon: '🌾', emoji: '🌾' },
   {
-    id: "station-5",
-    name: "Grand Central",
+    id: 'station-5',
+    name: 'Grand Central',
     position: 100,
-    icon: "🏛️",
-    emoji: "🏛️",
+    icon: '🏛️',
+    emoji: '🏛️',
   },
-];
+]
 
 const initialState: GameState = {
   // Game configuration
-  mode: "friends5",
-  style: "practice",
-  timeoutSetting: "normal",
-  complementDisplay: "abacus", // Default to showing abacus
+  mode: 'friends5',
+  style: 'practice',
+  timeoutSetting: 'normal',
+  complementDisplay: 'abacus', // Default to showing abacus
 
   // Current question
   currentQuestion: null,
@@ -88,7 +82,7 @@ const initialState: GameState = {
   // Game status
   isGameActive: false,
   isPaused: false,
-  gamePhase: "controls",
+  gamePhase: 'controls',
 
   // Timing
   gameStartTime: null,
@@ -122,142 +116,140 @@ const initialState: GameState = {
   showRouteCelebration: false,
 
   // Input
-  currentInput: "",
+  currentInput: '',
 
   // UI state
   showScoreModal: false,
   activeSpeechBubbles: new Map(),
   adaptiveFeedback: null,
-};
+}
 
 function gameReducer(state: GameState, action: GameAction): GameState {
   switch (action.type) {
-    case "SET_MODE":
-      return { ...state, mode: action.mode };
+    case 'SET_MODE':
+      return { ...state, mode: action.mode }
 
-    case "SET_STYLE":
-      return { ...state, style: action.style };
+    case 'SET_STYLE':
+      return { ...state, style: action.style }
 
-    case "SET_TIMEOUT":
-      return { ...state, timeoutSetting: action.timeout };
+    case 'SET_TIMEOUT':
+      return { ...state, timeoutSetting: action.timeout }
 
-    case "SET_COMPLEMENT_DISPLAY":
-      return { ...state, complementDisplay: action.display };
+    case 'SET_COMPLEMENT_DISPLAY':
+      return { ...state, complementDisplay: action.display }
 
-    case "SHOW_CONTROLS":
-      return { ...state, gamePhase: "controls" };
+    case 'SHOW_CONTROLS':
+      return { ...state, gamePhase: 'controls' }
 
-    case "START_COUNTDOWN":
-      return { ...state, gamePhase: "countdown" };
+    case 'START_COUNTDOWN':
+      return { ...state, gamePhase: 'countdown' }
 
-    case "BEGIN_GAME": {
+    case 'BEGIN_GAME': {
       // Generate first question when game starts
       const generateFirstQuestion = () => {
-        let targetSum: number;
-        if (state.mode === "friends5") {
-          targetSum = 5;
-        } else if (state.mode === "friends10") {
-          targetSum = 10;
+        let targetSum: number
+        if (state.mode === 'friends5') {
+          targetSum = 5
+        } else if (state.mode === 'friends10') {
+          targetSum = 10
         } else {
-          targetSum = Math.random() > 0.5 ? 5 : 10;
+          targetSum = Math.random() > 0.5 ? 5 : 10
         }
 
         const newNumber =
-          targetSum === 5
-            ? Math.floor(Math.random() * 5)
-            : Math.floor(Math.random() * 10);
+          targetSum === 5 ? Math.floor(Math.random() * 5) : Math.floor(Math.random() * 10)
 
         // Decide once whether to show as abacus
         const showAsAbacus =
-          state.complementDisplay === "abacus" ||
-          (state.complementDisplay === "random" && Math.random() < 0.5);
+          state.complementDisplay === 'abacus' ||
+          (state.complementDisplay === 'random' && Math.random() < 0.5)
 
         return {
           number: newNumber,
           targetSum,
           correctAnswer: targetSum - newNumber,
           showAsAbacus,
-        };
-      };
+        }
+      }
 
       return {
         ...state,
-        gamePhase: "playing",
+        gamePhase: 'playing',
         isGameActive: true,
         gameStartTime: Date.now(),
         questionStartTime: Date.now(),
         currentQuestion: generateFirstQuestion(),
-      };
+      }
     }
 
-    case "NEXT_QUESTION": {
+    case 'NEXT_QUESTION': {
       // Generate new question based on mode
       const generateQuestion = () => {
-        let targetSum: number;
-        if (state.mode === "friends5") {
-          targetSum = 5;
-        } else if (state.mode === "friends10") {
-          targetSum = 10;
+        let targetSum: number
+        if (state.mode === 'friends5') {
+          targetSum = 5
+        } else if (state.mode === 'friends10') {
+          targetSum = 10
         } else {
-          targetSum = Math.random() > 0.5 ? 5 : 10;
+          targetSum = Math.random() > 0.5 ? 5 : 10
         }
 
-        let newNumber: number;
-        let attempts = 0;
+        let newNumber: number
+        let attempts = 0
 
         do {
           if (targetSum === 5) {
-            newNumber = Math.floor(Math.random() * 5);
+            newNumber = Math.floor(Math.random() * 5)
           } else {
-            newNumber = Math.floor(Math.random() * 10);
+            newNumber = Math.floor(Math.random() * 10)
           }
-          attempts++;
+          attempts++
         } while (
           state.currentQuestion &&
           state.currentQuestion.number === newNumber &&
           state.currentQuestion.targetSum === targetSum &&
           attempts < 10
-        );
+        )
 
         // Decide once whether to show as abacus
         const showAsAbacus =
-          state.complementDisplay === "abacus" ||
-          (state.complementDisplay === "random" && Math.random() < 0.5);
+          state.complementDisplay === 'abacus' ||
+          (state.complementDisplay === 'random' && Math.random() < 0.5)
 
         return {
           number: newNumber,
           targetSum,
           correctAnswer: targetSum - newNumber,
           showAsAbacus,
-        };
-      };
+        }
+      }
 
       return {
         ...state,
         previousQuestion: state.currentQuestion,
         currentQuestion: generateQuestion(),
         questionStartTime: Date.now(),
-        currentInput: "",
-      };
+        currentInput: '',
+      }
     }
 
-    case "UPDATE_INPUT":
-      return { ...state, currentInput: action.input };
+    case 'UPDATE_INPUT':
+      return { ...state, currentInput: action.input }
 
-    case "SUBMIT_ANSWER": {
-      if (!state.currentQuestion) return state;
+    case 'SUBMIT_ANSWER': {
+      if (!state.currentQuestion) return state
 
-      const isCorrect = action.answer === state.currentQuestion.correctAnswer;
-      const responseTime = Date.now() - state.questionStartTime;
+      const isCorrect = action.answer === state.currentQuestion.correctAnswer
+      const responseTime = Date.now() - state.questionStartTime
 
       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 newStreak = state.streak + 1
+        const newCorrectAnswers = state.correctAnswers + 1
+        const newScore = state.score + 100 + newStreak * 50 + speedBonus
 
         return {
           ...state,
@@ -266,69 +258,69 @@ function gameReducer(state: GameState, action: GameAction): GameState {
           bestStreak: Math.max(state.bestStreak, newStreak),
           score: Math.round(newScore),
           totalQuestions: state.totalQuestions + 1,
-        };
+        }
       } else {
         // Incorrect answer - reset streak but keep score
         return {
           ...state,
           streak: 0,
           totalQuestions: state.totalQuestions + 1,
-        };
+        }
       }
     }
 
-    case "UPDATE_AI_POSITIONS":
+    case 'UPDATE_AI_POSITIONS':
       return {
         ...state,
         aiRacers: state.aiRacers.map((racer) => {
-          const update = action.positions.find((p) => p.id === racer.id);
+          const update = action.positions.find((p) => p.id === racer.id)
           return update
             ? {
                 ...racer,
                 previousPosition: racer.position,
                 position: update.position,
               }
-            : racer;
+            : racer
         }),
-      };
+      }
 
-    case "UPDATE_MOMENTUM":
-      return { ...state, momentum: action.momentum };
+    case 'UPDATE_MOMENTUM':
+      return { ...state, momentum: action.momentum }
 
-    case "UPDATE_TRAIN_POSITION":
-      return { ...state, trainPosition: action.position };
+    case 'UPDATE_TRAIN_POSITION':
+      return { ...state, trainPosition: action.position }
 
-    case "UPDATE_STEAM_JOURNEY":
+    case 'UPDATE_STEAM_JOURNEY':
       return {
         ...state,
         momentum: action.momentum,
         trainPosition: action.trainPosition,
         pressure: action.pressure,
         elapsedTime: action.elapsedTime,
-      };
-
-    case "COMPLETE_LAP":
-      if (action.racerId === "player") {
-        return { ...state, playerLap: state.playerLap + 1 };
-      } else {
-        const newAILaps = new Map(state.aiLaps);
-        newAILaps.set(action.racerId, (newAILaps.get(action.racerId) || 0) + 1);
-        return { ...state, aiLaps: newAILaps };
       }
 
-    case "PAUSE_RACE":
-      return { ...state, isPaused: true };
+    case 'COMPLETE_LAP':
+      if (action.racerId === 'player') {
+        return { ...state, playerLap: state.playerLap + 1 }
+      } else {
+        const newAILaps = new Map(state.aiLaps)
+        newAILaps.set(action.racerId, (newAILaps.get(action.racerId) || 0) + 1)
+        return { ...state, aiLaps: newAILaps }
+      }
 
-    case "RESUME_RACE":
-      return { ...state, isPaused: false };
+    case 'PAUSE_RACE':
+      return { ...state, isPaused: true }
 
-    case "END_RACE":
-      return { ...state, isGameActive: false };
+    case 'RESUME_RACE':
+      return { ...state, isPaused: false }
 
-    case "SHOW_RESULTS":
-      return { ...state, gamePhase: "results", showScoreModal: true };
+    case 'END_RACE':
+      return { ...state, isGameActive: false }
 
-    case "RESET_GAME":
+    case 'SHOW_RESULTS':
+      return { ...state, gamePhase: 'results', showScoreModal: true }
+
+    case 'RESET_GAME':
       return {
         ...initialState,
         // Preserve configuration settings
@@ -336,12 +328,12 @@ function gameReducer(state: GameState, action: GameAction): GameState {
         style: state.style,
         timeoutSetting: state.timeoutSetting,
         complementDisplay: state.complementDisplay,
-        gamePhase: "controls",
-      };
+        gamePhase: 'controls',
+      }
 
-    case "TRIGGER_AI_COMMENTARY": {
-      const newBubbles = new Map(state.activeSpeechBubbles);
-      newBubbles.set(action.racerId, action.message);
+    case 'TRIGGER_AI_COMMENTARY': {
+      const newBubbles = new Map(state.activeSpeechBubbles)
+      newBubbles.set(action.racerId, action.message)
       return {
         ...state,
         activeSpeechBubbles: newBubbles,
@@ -353,69 +345,69 @@ function gameReducer(state: GameState, action: GameAction): GameState {
                 lastComment: Date.now(),
                 commentCooldown: Math.random() * 4000 + 2000, // 2-6 seconds
               }
-            : racer,
+            : racer
         ),
-      };
+      }
     }
 
-    case "CLEAR_AI_COMMENT": {
-      const clearedBubbles = new Map(state.activeSpeechBubbles);
-      clearedBubbles.delete(action.racerId);
+    case 'CLEAR_AI_COMMENT': {
+      const clearedBubbles = new Map(state.activeSpeechBubbles)
+      clearedBubbles.delete(action.racerId)
       return {
         ...state,
         activeSpeechBubbles: clearedBubbles,
-      };
+      }
     }
 
-    case "UPDATE_DIFFICULTY_TRACKER":
+    case 'UPDATE_DIFFICULTY_TRACKER':
       return {
         ...state,
         difficultyTracker: action.tracker,
-      };
+      }
 
-    case "UPDATE_AI_SPEEDS":
+    case 'UPDATE_AI_SPEEDS':
       return {
         ...state,
         aiRacers: action.racers,
-      };
+      }
 
-    case "SHOW_ADAPTIVE_FEEDBACK":
+    case 'SHOW_ADAPTIVE_FEEDBACK':
       return {
         ...state,
         adaptiveFeedback: action.feedback,
-      };
+      }
 
-    case "CLEAR_ADAPTIVE_FEEDBACK":
+    case 'CLEAR_ADAPTIVE_FEEDBACK':
       return {
         ...state,
         adaptiveFeedback: null,
-      };
+      }
 
-    case "GENERATE_PASSENGERS":
+    case 'GENERATE_PASSENGERS':
       return {
         ...state,
         passengers: action.passengers,
-      };
+      }
 
-    case "BOARD_PASSENGER":
+    case 'BOARD_PASSENGER':
       return {
         ...state,
         passengers: state.passengers.map((p) =>
-          p.id === action.passengerId ? { ...p, isBoarded: true } : p,
+          p.id === action.passengerId ? { ...p, isBoarded: true } : p
         ),
-      };
+      }
 
-    case "DELIVER_PASSENGER":
+    case 'DELIVER_PASSENGER':
       return {
         ...state,
         passengers: state.passengers.map((p) =>
-          p.id === action.passengerId ? { ...p, isDelivered: true } : p,
+          p.id === action.passengerId ? { ...p, isDelivered: true } : p
         ),
         deliveredPassengers: state.deliveredPassengers + 1,
         score: state.score + action.points,
-      };
+      }
 
-    case "START_NEW_ROUTE":
+    case 'START_NEW_ROUTE':
       return {
         ...state,
         currentRoute: action.routeNumber,
@@ -425,64 +417,57 @@ function gameReducer(state: GameState, action: GameAction): GameState {
         showRouteCelebration: false,
         momentum: 50, // Give some starting momentum for the new route
         pressure: 50,
-      };
+      }
 
-    case "COMPLETE_ROUTE":
+    case 'COMPLETE_ROUTE':
       return {
         ...state,
         cumulativeDistance: state.cumulativeDistance + 100,
         showRouteCelebration: true,
-      };
+      }
 
-    case "HIDE_ROUTE_CELEBRATION":
+    case 'HIDE_ROUTE_CELEBRATION':
       return {
         ...state,
         showRouteCelebration: false,
-      };
+      }
 
     default:
-      return state;
+      return state
   }
 }
 
 interface ComplementRaceContextType {
-  state: GameState;
-  dispatch: React.Dispatch<GameAction>;
+  state: GameState
+  dispatch: React.Dispatch<GameAction>
 }
 
-const ComplementRaceContext = createContext<
-  ComplementRaceContextType | undefined
->(undefined);
+const ComplementRaceContext = createContext<ComplementRaceContextType | undefined>(undefined)
 
 interface ComplementRaceProviderProps {
-  children: ReactNode;
-  initialStyle?: "practice" | "sprint" | "survival";
+  children: ReactNode
+  initialStyle?: 'practice' | 'sprint' | 'survival'
 }
 
-export function ComplementRaceProvider({
-  children,
-  initialStyle,
-}: ComplementRaceProviderProps) {
+export function ComplementRaceProvider({ children, initialStyle }: ComplementRaceProviderProps) {
   const [state, dispatch] = useReducer(gameReducer, {
     ...initialState,
     style: initialStyle || initialState.style,
-  });
+  })
 
   return (
     <ComplementRaceContext.Provider value={{ state, dispatch }}>
       {children}
     </ComplementRaceContext.Provider>
-  );
+  )
 }
 
 export function useComplementRace() {
-  const context = useContext(ComplementRaceContext);
+  const context = useContext(ComplementRaceContext)
   if (context === undefined) {
-    throw new Error(
-      "useComplementRace must be used within ComplementRaceProvider",
-    );
+    throw new Error('useComplementRace must be used within ComplementRaceProvider')
   }
-  return context;
+  return context
 }
 
 // Re-export modular game provider for arcade room play
@@ -490,4 +475,4 @@ export function useComplementRace() {
 export {
   ComplementRaceProvider as RoomComplementRaceProvider,
   useComplementRace as useRoomComplementRace,
-} from "@/arcade-games/complement-race/Provider";
+} from '@/arcade-games/complement-race/Provider'
diff --git 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
index a14b2336..8eb6b09b 100644
--- 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,24 +1,21 @@
-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 { usePassengerAnimations } from "../usePassengerAnimations";
+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 { usePassengerAnimations } from '../usePassengerAnimations'
 
-describe("usePassengerAnimations", () => {
-  let mockPathRef: React.RefObject<SVGPathElement>;
-  let mockTrackGenerator: RailroadTrackGenerator;
-  let mockStation1: Station;
-  let mockStation2: Station;
-  let mockPassenger1: Passenger;
-  let mockPassenger2: Passenger;
+describe('usePassengerAnimations', () => {
+  let mockPathRef: React.RefObject<SVGPathElement>
+  let mockTrackGenerator: RailroadTrackGenerator
+  let mockStation1: Station
+  let mockStation2: Station
+  let mockPassenger1: Passenger
+  let mockPassenger2: Passenger
 
   beforeEach(() => {
     // Create mock path element
-    const mockPath = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path",
-    );
-    mockPathRef = { current: mockPath };
+    const mockPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    mockPathRef = { current: mockPath }
 
     // Mock track generator
     mockTrackGenerator = {
@@ -27,52 +24,52 @@ describe("usePassengerAnimations", () => {
         y: 300,
         rotation: 0,
       })),
-    } as unknown as RailroadTrackGenerator;
+    } as unknown as RailroadTrackGenerator
 
     // Create mock stations
     mockStation1 = {
-      id: "station-1",
-      name: "Station 1",
+      id: 'station-1',
+      name: 'Station 1',
       position: 20,
-      icon: "🏭",
-      emoji: "🏭",
-    };
+      icon: '🏭',
+      emoji: '🏭',
+    }
 
     mockStation2 = {
-      id: "station-2",
-      name: "Station 2",
+      id: 'station-2',
+      name: 'Station 2',
       position: 60,
-      icon: "🏛️",
-      emoji: "🏛️",
-    };
+      icon: '🏛️',
+      emoji: '🏛️',
+    }
 
     // Create mock passengers
     mockPassenger1 = {
-      id: "passenger-1",
-      name: "Passenger 1",
-      avatar: "👨",
-      originStationId: "station-1",
-      destinationStationId: "station-2",
+      id: 'passenger-1',
+      name: 'Passenger 1',
+      avatar: '👨',
+      originStationId: 'station-1',
+      destinationStationId: 'station-2',
       isBoarded: false,
       isDelivered: false,
       isUrgent: false,
-    };
+    }
 
     mockPassenger2 = {
-      id: "passenger-2",
-      name: "Passenger 2",
-      avatar: "👩",
-      originStationId: "station-1",
-      destinationStationId: "station-2",
+      id: 'passenger-2',
+      name: 'Passenger 2',
+      avatar: '👩',
+      originStationId: 'station-1',
+      destinationStationId: 'station-2',
       isBoarded: false,
       isDelivered: false,
       isUrgent: true,
-    };
+    }
 
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
-  test("initializes with empty animation maps", () => {
+  test('initializes with empty animation maps', () => {
     const { result } = renderHook(() =>
       usePassengerAnimations({
         passengers: [],
@@ -84,14 +81,14 @@ describe("usePassengerAnimations", () => {
         trainPosition: 0,
         trackGenerator: mockTrackGenerator,
         pathRef: mockPathRef,
-      }),
-    );
+      })
+    )
 
-    expect(result.current.boardingAnimations.size).toBe(0);
-    expect(result.current.disembarkingAnimations.size).toBe(0);
-  });
+    expect(result.current.boardingAnimations.size).toBe(0)
+    expect(result.current.disembarkingAnimations.size).toBe(0)
+  })
 
-  test("creates boarding animation when passenger boards", () => {
+  test('creates boarding animation when passenger boards', () => {
     const { result, rerender } = renderHook(
       ({ passengers }) =>
         usePassengerAnimations({
@@ -109,30 +106,30 @@ describe("usePassengerAnimations", () => {
         initialProps: {
           passengers: [mockPassenger1],
         },
-      },
-    );
+      }
+    )
 
     // Initially no boarding animations
-    expect(result.current.boardingAnimations.size).toBe(0);
+    expect(result.current.boardingAnimations.size).toBe(0)
 
     // Passenger boards
-    const boardedPassenger = { ...mockPassenger1, isBoarded: true };
-    rerender({ passengers: [boardedPassenger] });
+    const boardedPassenger = { ...mockPassenger1, isBoarded: true }
+    rerender({ passengers: [boardedPassenger] })
 
     // Should create boarding animation
-    expect(result.current.boardingAnimations.size).toBe(1);
-    expect(result.current.boardingAnimations.has("passenger-1")).toBe(true);
+    expect(result.current.boardingAnimations.size).toBe(1)
+    expect(result.current.boardingAnimations.has('passenger-1')).toBe(true)
 
-    const animation = result.current.boardingAnimations.get("passenger-1");
-    expect(animation).toBeDefined();
-    expect(animation?.passenger).toEqual(boardedPassenger);
-    expect(animation?.fromX).toBe(100); // Station position
-    expect(animation?.fromY).toBe(270); // Station position - 30
-    expect(mockTrackGenerator.getTrainTransform).toHaveBeenCalled();
-  });
+    const animation = result.current.boardingAnimations.get('passenger-1')
+    expect(animation).toBeDefined()
+    expect(animation?.passenger).toEqual(boardedPassenger)
+    expect(animation?.fromX).toBe(100) // Station position
+    expect(animation?.fromY).toBe(270) // Station position - 30
+    expect(mockTrackGenerator.getTrainTransform).toHaveBeenCalled()
+  })
 
-  test("creates disembarking animation when passenger is delivered", () => {
-    const boardedPassenger = { ...mockPassenger1, isBoarded: true };
+  test('creates disembarking animation when passenger is delivered', () => {
+    const boardedPassenger = { ...mockPassenger1, isBoarded: true }
 
     const { result, rerender } = renderHook(
       ({ passengers }) =>
@@ -151,28 +148,28 @@ describe("usePassengerAnimations", () => {
         initialProps: {
           passengers: [boardedPassenger],
         },
-      },
-    );
+      }
+    )
 
     // Initially no disembarking animations
-    expect(result.current.disembarkingAnimations.size).toBe(0);
+    expect(result.current.disembarkingAnimations.size).toBe(0)
 
     // Passenger is delivered
-    const deliveredPassenger = { ...boardedPassenger, isDelivered: true };
-    rerender({ passengers: [deliveredPassenger] });
+    const deliveredPassenger = { ...boardedPassenger, isDelivered: true }
+    rerender({ passengers: [deliveredPassenger] })
 
     // Should create disembarking animation
-    expect(result.current.disembarkingAnimations.size).toBe(1);
-    expect(result.current.disembarkingAnimations.has("passenger-1")).toBe(true);
+    expect(result.current.disembarkingAnimations.size).toBe(1)
+    expect(result.current.disembarkingAnimations.has('passenger-1')).toBe(true)
 
-    const animation = result.current.disembarkingAnimations.get("passenger-1");
-    expect(animation).toBeDefined();
-    expect(animation?.passenger).toEqual(deliveredPassenger);
-    expect(animation?.toX).toBe(500); // Destination station position
-    expect(animation?.toY).toBe(270); // Station position - 30
-  });
+    const animation = result.current.disembarkingAnimations.get('passenger-1')
+    expect(animation).toBeDefined()
+    expect(animation?.passenger).toEqual(deliveredPassenger)
+    expect(animation?.toX).toBe(500) // Destination station position
+    expect(animation?.toY).toBe(270) // Station position - 30
+  })
 
-  test("handles multiple passengers boarding simultaneously", () => {
+  test('handles multiple passengers boarding simultaneously', () => {
     const { result, rerender } = renderHook(
       ({ passengers }) =>
         usePassengerAnimations({
@@ -190,24 +187,24 @@ describe("usePassengerAnimations", () => {
         initialProps: {
           passengers: [mockPassenger1, mockPassenger2],
         },
-      },
-    );
+      }
+    )
 
     // Both passengers board
     const boardedPassengers = [
       { ...mockPassenger1, isBoarded: true },
       { ...mockPassenger2, isBoarded: true },
-    ];
-    rerender({ passengers: boardedPassengers });
+    ]
+    rerender({ passengers: boardedPassengers })
 
     // Should create boarding animations for both
-    expect(result.current.boardingAnimations.size).toBe(2);
-    expect(result.current.boardingAnimations.has("passenger-1")).toBe(true);
-    expect(result.current.boardingAnimations.has("passenger-2")).toBe(true);
-  });
+    expect(result.current.boardingAnimations.size).toBe(2)
+    expect(result.current.boardingAnimations.has('passenger-1')).toBe(true)
+    expect(result.current.boardingAnimations.has('passenger-2')).toBe(true)
+  })
 
-  test("does not create animation if passenger already boarded in previous state", () => {
-    const boardedPassenger = { ...mockPassenger1, isBoarded: true };
+  test('does not create animation if passenger already boarded in previous state', () => {
+    const boardedPassenger = { ...mockPassenger1, isBoarded: true }
 
     const { result } = renderHook(() =>
       usePassengerAnimations({
@@ -220,15 +217,15 @@ describe("usePassengerAnimations", () => {
         trainPosition: 20,
         trackGenerator: mockTrackGenerator,
         pathRef: mockPathRef,
-      }),
-    );
+      })
+    )
 
     // No animation since passenger was already boarded
-    expect(result.current.boardingAnimations.size).toBe(0);
-  });
+    expect(result.current.boardingAnimations.size).toBe(0)
+  })
 
-  test("returns empty animations when pathRef is null", () => {
-    const nullPathRef: React.RefObject<SVGPathElement> = { current: null };
+  test('returns empty animations when pathRef is null', () => {
+    const nullPathRef: React.RefObject<SVGPathElement> = { current: null }
 
     const { result, rerender } = renderHook(
       ({ passengers }) =>
@@ -247,18 +244,18 @@ describe("usePassengerAnimations", () => {
         initialProps: {
           passengers: [mockPassenger1],
         },
-      },
-    );
+      }
+    )
 
     // Passenger boards
-    const boardedPassenger = { ...mockPassenger1, isBoarded: true };
-    rerender({ passengers: [boardedPassenger] });
+    const boardedPassenger = { ...mockPassenger1, isBoarded: true }
+    rerender({ passengers: [boardedPassenger] })
 
     // Should not create animation without path
-    expect(result.current.boardingAnimations.size).toBe(0);
-  });
+    expect(result.current.boardingAnimations.size).toBe(0)
+  })
 
-  test("returns empty animations when stationPositions is empty", () => {
+  test('returns empty animations when stationPositions is empty', () => {
     const { result, rerender } = renderHook(
       ({ passengers }) =>
         usePassengerAnimations({
@@ -273,14 +270,14 @@ describe("usePassengerAnimations", () => {
         initialProps: {
           passengers: [mockPassenger1],
         },
-      },
-    );
+      }
+    )
 
     // Passenger boards
-    const boardedPassenger = { ...mockPassenger1, isBoarded: true };
-    rerender({ passengers: [boardedPassenger] });
+    const boardedPassenger = { ...mockPassenger1, isBoarded: true }
+    rerender({ passengers: [boardedPassenger] })
 
     // Should not create animation without station positions
-    expect(result.current.boardingAnimations.size).toBe(0);
-  });
-});
+    expect(result.current.boardingAnimations.size).toBe(0)
+  })
+})
diff --git 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
index 03d3ca39..02d5c76a 100644
--- 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,11 +1,11 @@
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 
 // Mock sound effects
-vi.mock("../useSoundEffects", () => ({
+vi.mock('../useSoundEffects', () => ({
   useSoundEffects: () => ({
     playSound: vi.fn(),
   }),
-}));
+}))
 
 /**
  * Boarding Logic Tests
@@ -15,41 +15,41 @@ vi.mock("../useSoundEffects", () => ({
  */
 
 interface Passenger {
-  id: string;
-  name: string;
-  avatar: string;
-  originStationId: string;
-  destinationStationId: string;
-  isBoarded: boolean;
-  isDelivered: boolean;
-  isUrgent: boolean;
+  id: string
+  name: string
+  avatar: string
+  originStationId: string
+  destinationStationId: string
+  isBoarded: boolean
+  isDelivered: boolean
+  isUrgent: boolean
 }
 
 interface Station {
-  id: string;
-  name: string;
-  icon: string;
-  position: number;
+  id: string
+  name: string
+  icon: string
+  position: number
 }
 
-describe("useSteamJourney - Boarding Logic", () => {
-  const CAR_SPACING = 7;
-  let stations: Station[];
-  let passengers: Passenger[];
+describe('useSteamJourney - Boarding Logic', () => {
+  const CAR_SPACING = 7
+  let stations: Station[]
+  let passengers: Passenger[]
 
   beforeEach(() => {
     stations = [
-      { id: "s1", name: "Station 1", icon: "🏠", position: 20 },
-      { id: "s2", name: "Station 2", icon: "🏢", position: 50 },
-      { id: "s3", name: "Station 3", icon: "🏪", position: 80 },
-    ];
+      { id: 's1', name: 'Station 1', icon: '🏠', position: 20 },
+      { id: 's2', name: 'Station 2', icon: '🏢', position: 50 },
+      { id: 's3', name: 'Station 3', icon: '🏪', position: 80 },
+    ]
 
-    vi.useFakeTimers();
-  });
+    vi.useFakeTimers()
+  })
 
   afterEach(() => {
-    vi.useRealTimers();
-  });
+    vi.useRealTimers()
+  })
 
   /**
    * Simulate the boarding logic from useSteamJourney (with fix)
@@ -58,305 +58,296 @@ describe("useSteamJourney - Boarding Logic", () => {
     trainPosition: number,
     passengers: Passenger[],
     stations: Station[],
-    maxCars: number,
+    maxCars: number
   ): Passenger[] {
-    const updatedPassengers = [...passengers];
-    const currentBoardedPassengers = updatedPassengers.filter(
-      (p) => p.isBoarded && !p.isDelivered,
-    );
+    const updatedPassengers = [...passengers]
+    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>();
+    const carsAssignedThisFrame = new Set<number>()
 
     // Simulate the boarding logic
     updatedPassengers.forEach((passenger, passengerIndex) => {
-      if (passenger.isBoarded || passenger.isDelivered) return;
+      if (passenger.isBoarded || passenger.isDelivered) return
 
-      const station = stations.find((s) => s.id === passenger.originStationId);
-      if (!station) return;
+      const station = stations.find((s) => s.id === passenger.originStationId)
+      if (!station) return
 
       // Check if any empty car is at this station
       for (let carIndex = 0; carIndex < maxCars; carIndex++) {
         // Skip if this car already has a passenger OR was assigned this frame
-        if (
-          currentBoardedPassengers[carIndex] ||
-          carsAssignedThisFrame.has(carIndex)
-        )
-          continue;
+        if (currentBoardedPassengers[carIndex] || carsAssignedThisFrame.has(carIndex)) continue
 
-        const carPosition = Math.max(
-          0,
-          trainPosition - (carIndex + 1) * CAR_SPACING,
-        );
-        const distance = Math.abs(carPosition - station.position);
+        const carPosition = Math.max(0, trainPosition - (carIndex + 1) * CAR_SPACING)
+        const distance = Math.abs(carPosition - station.position)
 
         // If car is at station (within 3% tolerance), board this passenger
         if (distance < 3) {
-          updatedPassengers[passengerIndex] = { ...passenger, isBoarded: true };
+          updatedPassengers[passengerIndex] = { ...passenger, isBoarded: true }
           // Mark this car as assigned in this frame
-          carsAssignedThisFrame.add(carIndex);
-          return; // Board this passenger and move on
+          carsAssignedThisFrame.add(carIndex)
+          return // Board this passenger and move on
         }
       }
-    });
+    })
 
-    return updatedPassengers;
+    return updatedPassengers
   }
 
-  test("single passenger at station boards when car arrives", () => {
+  test('single passenger at station boards when car arrives', () => {
     passengers = [
       {
-        id: "p1",
-        name: "Alice",
-        avatar: "👩",
-        originStationId: "s1",
-        destinationStationId: "s2",
+        id: 'p1',
+        name: 'Alice',
+        avatar: '👩',
+        originStationId: 's1',
+        destinationStationId: 's2',
         isBoarded: false,
         isDelivered: false,
         isUrgent: false,
       },
-    ];
+    ]
 
     // Train at position 27%, first car at position 20% (station 1)
-    const result = simulateBoardingAtPosition(27, passengers, stations, 1);
+    const result = simulateBoardingAtPosition(27, passengers, stations, 1)
 
-    expect(result[0].isBoarded).toBe(true);
-  });
+    expect(result[0].isBoarded).toBe(true)
+  })
 
-  test("EDGE CASE: multiple passengers at same station with enough cars", () => {
+  test('EDGE CASE: multiple passengers at same station with enough cars', () => {
     passengers = [
       {
-        id: "p1",
-        name: "Alice",
-        avatar: "👩",
-        originStationId: "s1",
-        destinationStationId: "s2",
+        id: 'p1',
+        name: 'Alice',
+        avatar: '👩',
+        originStationId: 's1',
+        destinationStationId: 's2',
         isBoarded: false,
         isDelivered: false,
         isUrgent: false,
       },
       {
-        id: "p2",
-        name: "Bob",
-        avatar: "👨",
-        originStationId: "s1",
-        destinationStationId: "s2",
+        id: 'p2',
+        name: 'Bob',
+        avatar: '👨',
+        originStationId: 's1',
+        destinationStationId: 's2',
         isBoarded: false,
         isDelivered: false,
         isUrgent: false,
       },
       {
-        id: "p3",
-        name: "Charlie",
-        avatar: "👴",
-        originStationId: "s1",
-        destinationStationId: "s2",
+        id: 'p3',
+        name: 'Charlie',
+        avatar: '👴',
+        originStationId: 's1',
+        destinationStationId: 's2',
         isBoarded: false,
         isDelivered: false,
         isUrgent: false,
       },
-    ];
+    ]
 
     // Train at position 34%, cars at: 27%, 20%, 13%
     // Car 1 (27%): 7% away from station (too far)
     // Car 2 (20%): 0% away from station (at station!)
     // Car 3 (13%): 7% away from station (too far)
-    let result = simulateBoardingAtPosition(34, passengers, stations, 3);
+    let result = simulateBoardingAtPosition(34, passengers, stations, 3)
 
     // First iteration: car 2 is at station, should board first passenger
-    expect(result[0].isBoarded).toBe(true);
+    expect(result[0].isBoarded).toBe(true)
 
     // But what about the other passengers? They should board on subsequent frames
     // Let's simulate the train advancing slightly
-    result = simulateBoardingAtPosition(35, result, stations, 3);
+    result = simulateBoardingAtPosition(35, result, stations, 3)
 
     // Now car 1 is at 28% (still too far), car 2 at 21% (still close), car 3 at 14% (too far)
     // Passenger 2 should still not board yet
 
     // Advance more - when does car 1 reach the station?
-    result = simulateBoardingAtPosition(27, result, stations, 3);
+    result = simulateBoardingAtPosition(27, result, stations, 3)
     // Car 1 at 20% (at station!)
-    expect(result[1].isBoarded).toBe(true);
+    expect(result[1].isBoarded).toBe(true)
 
     // What about passenger 3? Need car 3 to reach station
     // Car 3 position = trainPosition - (3 * 7) = trainPosition - 21
     // For car 3 to be at 20%, need trainPosition = 41
-    result = simulateBoardingAtPosition(41, result, stations, 3);
+    result = simulateBoardingAtPosition(41, result, stations, 3)
     // Car 3 at 20% (at station!)
-    expect(result[2].isBoarded).toBe(true);
-  });
+    expect(result[2].isBoarded).toBe(true)
+  })
 
-  test("EDGE CASE: passengers left behind when train moves too fast", () => {
+  test('EDGE CASE: passengers left behind when train moves too fast', () => {
     passengers = [
       {
-        id: "p1",
-        name: "Alice",
-        avatar: "👩",
-        originStationId: "s1",
-        destinationStationId: "s2",
+        id: 'p1',
+        name: 'Alice',
+        avatar: '👩',
+        originStationId: 's1',
+        destinationStationId: 's2',
         isBoarded: false,
         isDelivered: false,
         isUrgent: false,
       },
       {
-        id: "p2",
-        name: "Bob",
-        avatar: "👨",
-        originStationId: "s1",
-        destinationStationId: "s2",
+        id: 'p2',
+        name: 'Bob',
+        avatar: '👨',
+        originStationId: 's1',
+        destinationStationId: 's2',
         isBoarded: false,
         isDelivered: false,
         isUrgent: false,
       },
-    ];
+    ]
 
     // Simulate train speeding through station
     // Only 2 cars, but 2 passengers at same station
 
     // Frame 1: Train at 27%, car 1 at 20%, car 2 at 13%
-    let result = simulateBoardingAtPosition(27, passengers, stations, 2);
-    expect(result[0].isBoarded).toBe(true);
-    expect(result[1].isBoarded).toBe(false);
+    let result = simulateBoardingAtPosition(27, passengers, stations, 2)
+    expect(result[0].isBoarded).toBe(true)
+    expect(result[1].isBoarded).toBe(false)
 
     // Frame 2: Train jumps to 35% (high momentum)
     // Car 1 at 28%, car 2 at 21%
-    result = simulateBoardingAtPosition(35, result, stations, 2);
+    result = simulateBoardingAtPosition(35, result, stations, 2)
     // Car 2 is at 21%, within 1% of station at 20%
-    expect(result[1].isBoarded).toBe(true);
+    expect(result[1].isBoarded).toBe(true)
 
     // Frame 3: Train at 45% - both cars past station
-    result = simulateBoardingAtPosition(45, result, stations, 2);
+    result = simulateBoardingAtPosition(45, result, stations, 2)
     // 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", () => {
+  test('EDGE CASE: passenger left behind when boarding window is missed', () => {
     passengers = [
       {
-        id: "p1",
-        name: "Alice",
-        avatar: "👩",
-        originStationId: "s1",
-        destinationStationId: "s2",
+        id: 'p1',
+        name: 'Alice',
+        avatar: '👩',
+        originStationId: 's1',
+        destinationStationId: 's2',
         isBoarded: false,
         isDelivered: false,
         isUrgent: false,
       },
       {
-        id: "p2",
-        name: "Bob",
-        avatar: "👨",
-        originStationId: "s1",
-        destinationStationId: "s2",
+        id: 'p2',
+        name: 'Bob',
+        avatar: '👨',
+        originStationId: 's1',
+        destinationStationId: 's2',
         isBoarded: false,
         isDelivered: false,
         isUrgent: false,
       },
-    ];
+    ]
 
     // Only 1 car, 2 passengers
     // Frame 1: Train at 27%, car at 20%
-    let result = simulateBoardingAtPosition(27, passengers, stations, 1);
-    expect(result[0].isBoarded).toBe(true);
-    expect(result[1].isBoarded).toBe(false); // Second passenger waiting
+    let result = simulateBoardingAtPosition(27, passengers, stations, 1)
+    expect(result[0].isBoarded).toBe(true)
+    expect(result[1].isBoarded).toBe(false) // Second passenger waiting
 
     // Frame 2: Train jumps way past (very high momentum)
-    result = simulateBoardingAtPosition(50, result, stations, 1);
+    result = simulateBoardingAtPosition(50, result, stations, 1)
     // Car at 43% - way past station at 20%
 
     // Second passenger SHOULD BE LEFT BEHIND!
-    expect(result[1].isBoarded).toBe(false);
-  });
+    expect(result[1].isBoarded).toBe(false)
+  })
 
-  test("EDGE CASE: only one passenger boards per car per frame", () => {
+  test('EDGE CASE: only one passenger boards per car per frame', () => {
     passengers = [
       {
-        id: "p1",
-        name: "Alice",
-        avatar: "👩",
-        originStationId: "s1",
-        destinationStationId: "s2",
+        id: 'p1',
+        name: 'Alice',
+        avatar: '👩',
+        originStationId: 's1',
+        destinationStationId: 's2',
         isBoarded: false,
         isDelivered: false,
         isUrgent: false,
       },
       {
-        id: "p2",
-        name: "Bob",
-        avatar: "👨",
-        originStationId: "s1",
-        destinationStationId: "s2",
+        id: 'p2',
+        name: 'Bob',
+        avatar: '👨',
+        originStationId: 's1',
+        destinationStationId: 's2',
         isBoarded: false,
         isDelivered: false,
         isUrgent: false,
       },
-    ];
+    ]
 
     // Only 1 car, both passengers at same station
     // With the fix, only first passenger should board in this frame
-    const result = simulateBoardingAtPosition(27, passengers, stations, 1);
+    const result = simulateBoardingAtPosition(27, passengers, stations, 1)
 
     // First passenger boards
-    expect(result[0].isBoarded).toBe(true);
+    expect(result[0].isBoarded).toBe(true)
     // Second passenger does NOT board (car already assigned this frame)
-    expect(result[1].isBoarded).toBe(false);
-  });
+    expect(result[1].isBoarded).toBe(false)
+  })
 
-  test("all passengers board before train completely passes station", () => {
+  test('all passengers board before train completely passes station', () => {
     passengers = [
       {
-        id: "p1",
-        name: "Alice",
-        avatar: "👩",
-        originStationId: "s1",
-        destinationStationId: "s2",
+        id: 'p1',
+        name: 'Alice',
+        avatar: '👩',
+        originStationId: 's1',
+        destinationStationId: 's2',
         isBoarded: false,
         isDelivered: false,
         isUrgent: false,
       },
       {
-        id: "p2",
-        name: "Bob",
-        avatar: "👨",
-        originStationId: "s1",
-        destinationStationId: "s2",
+        id: 'p2',
+        name: 'Bob',
+        avatar: '👨',
+        originStationId: 's1',
+        destinationStationId: 's2',
         isBoarded: false,
         isDelivered: false,
         isUrgent: false,
       },
       {
-        id: "p3",
-        name: "Charlie",
-        avatar: "👴",
-        originStationId: "s1",
-        destinationStationId: "s2",
+        id: 'p3',
+        name: 'Charlie',
+        avatar: '👴',
+        originStationId: 's1',
+        destinationStationId: 's2',
         isBoarded: false,
         isDelivered: false,
         isUrgent: false,
       },
-    ];
+    ]
 
     // 3 passengers, 3 cars
     // Simulate train moving through station frame by frame
-    let result = passengers;
+    let result = passengers
 
     // Train approaching station
     for (let pos = 13; pos <= 40; pos += 1) {
-      result = simulateBoardingAtPosition(pos, result, stations, 3);
+      result = simulateBoardingAtPosition(pos, result, stations, 3)
     }
 
     // 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);
+    expect(allBoarded).toBe(true)
     if (!allBoarded) {
       console.log(
-        "Passengers left behind:",
-        leftBehind.map((p) => p.name),
-      );
+        'Passengers left behind:',
+        leftBehind.map((p) => p.name)
+      )
     }
-  });
-});
+  })
+})
diff --git a/apps/web/src/app/arcade/complement-race/hooks/__tests__/useSteamJourney.delivery-thrashing.test.ts b/apps/web/src/app/arcade/complement-race/hooks/__tests__/useSteamJourney.delivery-thrashing.test.ts
index e12268b7..2834efd1 100644
--- a/apps/web/src/app/arcade/complement-race/hooks/__tests__/useSteamJourney.delivery-thrashing.test.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/__tests__/useSteamJourney.delivery-thrashing.test.ts
@@ -7,27 +7,27 @@
  * which rejects all but the first one.
  */
 
-import { describe, expect, test } from "vitest";
+import { describe, expect, test } from 'vitest'
 
 interface Passenger {
-  id: string;
-  name: string;
-  claimedBy: string | null;
-  deliveredBy: string | null;
-  carIndex: number | null;
-  destinationStationId: string;
-  isUrgent: boolean;
+  id: string
+  name: string
+  claimedBy: string | null
+  deliveredBy: string | null
+  carIndex: number | null
+  destinationStationId: string
+  isUrgent: boolean
 }
 
 interface Station {
-  id: string;
-  name: string;
-  emoji: string;
-  position: number;
+  id: string
+  name: string
+  emoji: string
+  position: number
 }
 
-describe("useSteamJourney - Delivery Thrashing Reproduction", () => {
-  const CAR_SPACING = 7;
+describe('useSteamJourney - Delivery Thrashing Reproduction', () => {
+  const CAR_SPACING = 7
 
   /**
    * Simulate the delivery logic from useSteamJourney
@@ -37,98 +37,81 @@ describe("useSteamJourney - Delivery Thrashing Reproduction", () => {
     trainPosition: number,
     passengers: Passenger[],
     stations: Station[],
-    pendingDeliveryRef: Set<string>,
+    pendingDeliveryRef: Set<string>
   ): { deliveryAttempts: number; deliveredPassengerIds: string[] } {
-    let deliveryAttempts = 0;
-    const deliveredPassengerIds: string[] = [];
+    let deliveryAttempts = 0
+    const deliveredPassengerIds: string[] = []
 
     const currentBoardedPassengers = passengers.filter(
-      (p) => p.claimedBy !== null && p.deliveredBy === null,
-    );
+      (p) => p.claimedBy !== null && p.deliveredBy === null
+    )
 
     // PRIORITY 1: Process deliveries FIRST (dispatch DELIVER moves before BOARD moves)
     currentBoardedPassengers.forEach((passenger) => {
-      if (
-        !passenger ||
-        passenger.deliveredBy !== null ||
-        passenger.carIndex === null
-      )
-        return;
+      if (!passenger || passenger.deliveredBy !== null || passenger.carIndex === null) return
 
       // Skip if already has a pending delivery request
-      if (pendingDeliveryRef.has(passenger.id)) return;
+      if (pendingDeliveryRef.has(passenger.id)) return
 
-      const station = stations.find(
-        (s) => s.id === passenger.destinationStationId,
-      );
-      if (!station) return;
+      const station = stations.find((s) => s.id === passenger.destinationStationId)
+      if (!station) return
 
       // Calculate this passenger's car position using PHYSICAL carIndex
-      const carPosition = Math.max(
-        0,
-        trainPosition - (passenger.carIndex + 1) * CAR_SPACING,
-      );
-      const distance = Math.abs(carPosition - station.position);
+      const carPosition = Math.max(0, trainPosition - (passenger.carIndex + 1) * CAR_SPACING)
+      const distance = Math.abs(carPosition - station.position)
 
       // If this car is at the destination station (within 5% tolerance), deliver
       if (distance < 5) {
         // Mark as pending BEFORE dispatch to prevent duplicate delivery attempts across frames
-        pendingDeliveryRef.add(passenger.id);
-        deliveryAttempts++;
-        deliveredPassengerIds.push(passenger.id);
+        pendingDeliveryRef.add(passenger.id)
+        deliveryAttempts++
+        deliveredPassengerIds.push(passenger.id)
       }
-    });
+    })
 
-    return { deliveryAttempts, deliveredPassengerIds };
+    return { deliveryAttempts, deliveredPassengerIds }
   }
 
-  test("WITHOUT fix: multiple frames at same position cause thrashing", () => {
+  test('WITHOUT fix: multiple frames at same position cause thrashing', () => {
     const stations: Station[] = [
-      { id: "s1", name: "Start", emoji: "🏠", position: 20 },
-      { id: "s2", name: "Middle", emoji: "🏢", position: 40 },
-      { id: "s3", name: "End", emoji: "🏁", position: 80 },
-    ];
+      { id: 's1', name: 'Start', emoji: '🏠', position: 20 },
+      { id: 's2', name: 'Middle', emoji: '🏢', position: 40 },
+      { id: 's3', name: 'End', emoji: '🏁', position: 80 },
+    ]
 
     // Passenger "Bob" is in Car 1, heading to station s2 at position 40
     const passengers: Passenger[] = [
       {
-        id: "bob",
-        name: "Bob",
-        claimedBy: "player1",
+        id: 'bob',
+        name: 'Bob',
+        claimedBy: 'player1',
         deliveredBy: null, // Not yet delivered
         carIndex: 1, // In car 1 (second car)
-        destinationStationId: "s2",
+        destinationStationId: 's2',
         isUrgent: false,
       },
-    ];
+    ]
 
     // NO pending delivery tracking (simulating the bug)
-    const noPendingRef = new Set<string>();
+    const noPendingRef = new Set<string>()
 
     // Train position where Car 1 is at station s2 (position 40)
     // Car 1 position = trainPosition - (carIndex + 1) * CAR_SPACING
     // Car 1 position = trainPosition - 2 * 7 = trainPosition - 14
     // For Car 1 to be at position 40: trainPosition = 40 + 14 = 54
-    const trainPosition = 53.9;
+    const trainPosition = 53.9
 
-    const carPosition = Math.max(0, trainPosition - (1 + 1) * CAR_SPACING);
-    console.log(
-      `Train at ${trainPosition}, Car 1 at ${carPosition}, Station at 40`,
-    );
-    expect(Math.abs(carPosition - 40)).toBeLessThan(5); // Verify we're in delivery range
+    const carPosition = Math.max(0, trainPosition - (1 + 1) * CAR_SPACING)
+    console.log(`Train at ${trainPosition}, Car 1 at ${carPosition}, Station at 40`)
+    expect(Math.abs(carPosition - 40)).toBeLessThan(5) // Verify we're in delivery range
 
-    let totalAttempts = 0;
+    let totalAttempts = 0
 
     // Simulate 10 frames (50ms each = 500ms total) at the same position
     // This mimics what happens when the train is near/at a station
     for (let frame = 0; frame < 10; frame++) {
-      const result = simulateDeliveryAtPosition(
-        trainPosition,
-        passengers,
-        stations,
-        noPendingRef,
-      );
-      totalAttempts += result.deliveryAttempts;
+      const result = simulateDeliveryAtPosition(trainPosition, passengers, stations, noPendingRef)
+      totalAttempts += result.deliveryAttempts
 
       // WITHOUT the pendingDeliveryRef fix, every frame triggers a delivery attempt
       // because the optimistic update hasn't propagated yet
@@ -136,35 +119,35 @@ describe("useSteamJourney - Delivery Thrashing Reproduction", () => {
 
     // Without the fix, we expect 10 delivery attempts (one per frame)
     // because nothing prevents duplicate attempts
-    console.log(`Total delivery attempts without fix: ${totalAttempts}`);
-    expect(totalAttempts).toBe(10); // This demonstrates the bug!
-  });
+    console.log(`Total delivery attempts without fix: ${totalAttempts}`)
+    expect(totalAttempts).toBe(10) // This demonstrates the bug!
+  })
 
-  test("WITH fix: pendingDeliveryRef prevents thrashing", () => {
+  test('WITH fix: pendingDeliveryRef prevents thrashing', () => {
     const stations: Station[] = [
-      { id: "s1", name: "Start", emoji: "🏠", position: 20 },
-      { id: "s2", name: "Middle", emoji: "🏢", position: 40 },
-      { id: "s3", name: "End", emoji: "🏁", position: 80 },
-    ];
+      { id: 's1', name: 'Start', emoji: '🏠', position: 20 },
+      { id: 's2', name: 'Middle', emoji: '🏢', position: 40 },
+      { id: 's3', name: 'End', emoji: '🏁', position: 80 },
+    ]
 
     const passengers: Passenger[] = [
       {
-        id: "bob",
-        name: "Bob",
-        claimedBy: "player1",
+        id: 'bob',
+        name: 'Bob',
+        claimedBy: 'player1',
         deliveredBy: null,
         carIndex: 1,
-        destinationStationId: "s2",
+        destinationStationId: 's2',
         isUrgent: false,
       },
-    ];
+    ]
 
     // WITH pending delivery tracking (the fix)
-    const pendingDeliveryRef = new Set<string>();
+    const pendingDeliveryRef = new Set<string>()
 
-    const trainPosition = 53.9;
+    const trainPosition = 53.9
 
-    let totalAttempts = 0;
+    let totalAttempts = 0
 
     // Simulate 10 frames at the same position
     for (let frame = 0; frame < 10; frame++) {
@@ -172,62 +155,62 @@ describe("useSteamJourney - Delivery Thrashing Reproduction", () => {
         trainPosition,
         passengers,
         stations,
-        pendingDeliveryRef,
-      );
-      totalAttempts += result.deliveryAttempts;
+        pendingDeliveryRef
+      )
+      totalAttempts += result.deliveryAttempts
     }
 
     // With the fix, only the FIRST frame should attempt delivery
     // All subsequent frames skip because passenger.id is in pendingDeliveryRef
-    console.log(`Total delivery attempts with fix: ${totalAttempts}`);
-    expect(totalAttempts).toBe(1); // Only one attempt! ✅
-  });
+    console.log(`Total delivery attempts with fix: ${totalAttempts}`)
+    expect(totalAttempts).toBe(1) // Only one attempt! ✅
+  })
 
-  test("EDGE CASE: multiple passengers at same station", () => {
+  test('EDGE CASE: multiple passengers at same station', () => {
     const stations: Station[] = [
-      { id: "s1", name: "Start", emoji: "🏠", position: 20 },
-      { id: "s2", name: "Middle", emoji: "🏢", position: 40 },
-      { id: "s3", name: "End", emoji: "🏁", position: 80 },
-    ];
+      { id: 's1', name: 'Start', emoji: '🏠', position: 20 },
+      { id: 's2', name: 'Middle', emoji: '🏢', position: 40 },
+      { id: 's3', name: 'End', emoji: '🏁', position: 80 },
+    ]
 
     // Two passengers in different cars, both going to station s2
     const passengers: Passenger[] = [
       {
-        id: "alice",
-        name: "Alice",
-        claimedBy: "player1",
+        id: 'alice',
+        name: 'Alice',
+        claimedBy: 'player1',
         deliveredBy: null,
         carIndex: 0, // Car 0
-        destinationStationId: "s2",
+        destinationStationId: 's2',
         isUrgent: false,
       },
       {
-        id: "bob",
-        name: "Bob",
-        claimedBy: "player1",
+        id: 'bob',
+        name: 'Bob',
+        claimedBy: 'player1',
         deliveredBy: null,
         carIndex: 1, // Car 1
-        destinationStationId: "s2",
+        destinationStationId: 's2',
         isUrgent: false,
       },
-    ];
+    ]
 
-    const pendingDeliveryRef = new Set<string>();
+    const pendingDeliveryRef = new Set<string>()
 
     // Position where both cars are near station s2 (position 40)
     // Car 0 at position 40: trainPosition = 40 + 7 = 47
     // Car 1 at position 40: trainPosition = 40 + 14 = 54
     // Let's use 50 so Car 0 is at 43 and Car 1 is at 36 (both within 5 of 40)
-    const trainPosition = 46.5;
+    const trainPosition = 46.5
 
     // Debug: Check car positions
-    const car0Pos = Math.max(0, trainPosition - (0 + 1) * CAR_SPACING);
-    const car1Pos = Math.max(0, trainPosition - (1 + 1) * CAR_SPACING);
+    const car0Pos = Math.max(0, trainPosition - (0 + 1) * CAR_SPACING)
+    const car1Pos = Math.max(0, trainPosition - (1 + 1) * CAR_SPACING)
     console.log(
-      `Train at ${trainPosition}, Car 0 at ${car0Pos} (dist ${Math.abs(car0Pos - 40)}), Car 1 at ${car1Pos} (dist ${Math.abs(car1Pos - 40)})`,
-    );
+      `Train at ${trainPosition}, Car 0 at ${car0Pos} (dist ${Math.abs(car0Pos - 40)}), Car 1 at ${car1Pos} (dist ${Math.abs(car1Pos - 40)})`
+    )
 
-    let totalAttempts = 0;
+    let totalAttempts = 0
 
     // Simulate 5 frames
     for (let frame = 0; frame < 5; frame++) {
@@ -235,18 +218,16 @@ describe("useSteamJourney - Delivery Thrashing Reproduction", () => {
         trainPosition,
         passengers,
         stations,
-        pendingDeliveryRef,
-      );
-      totalAttempts += result.deliveryAttempts;
+        pendingDeliveryRef
+      )
+      totalAttempts += result.deliveryAttempts
       if (result.deliveryAttempts > 0) {
-        console.log(
-          `Frame ${frame}: Delivered ${result.deliveredPassengerIds.join(", ")}`,
-        );
+        console.log(`Frame ${frame}: Delivered ${result.deliveredPassengerIds.join(', ')}`)
       }
     }
 
     // Should deliver BOTH passengers exactly once (2 total attempts)
-    console.log(`Total delivery attempts for 2 passengers: ${totalAttempts}`);
-    expect(totalAttempts).toBe(2); // Alice once, Bob once ✅
-  });
-});
+    console.log(`Total delivery attempts for 2 passengers: ${totalAttempts}`)
+    expect(totalAttempts).toBe(2) // Alice once, Bob once ✅
+  })
+})
diff --git 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
index a378d1bf..3f25cf3b 100644
--- 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,28 +8,23 @@
  * 4. Passengers are delivered to the correct destination
  */
 
-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";
+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
-vi.mock("../useSoundEffects", () => ({
+vi.mock('../useSoundEffects', () => ({
   useSoundEffects: () => ({
     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
 const createPassenger = (
@@ -37,277 +32,261 @@ const createPassenger = (
   originStationId: string,
   destinationStationId: string,
   isBoarded = false,
-  isDelivered = false,
+  isDelivered = false
 ): Passenger => ({
   id,
   name: `Passenger ${id}`,
-  avatar: "👤",
+  avatar: '👤',
   originStationId,
   destinationStationId,
   isUrgent: false,
   isBoarded,
   isDelivered,
-});
+})
 
 // Test stations
 const _testStations: Station[] = [
-  { id: "station-0", name: "Start", position: 0, icon: "🏁", emoji: "🏁" },
-  { id: "station-1", name: "Middle", position: 50, icon: "🏢", emoji: "🏢" },
-  { id: "station-2", name: "End", position: 100, icon: "🏁", emoji: "🏁" },
-];
+  { id: 'station-0', name: 'Start', position: 0, icon: '🏁', emoji: '🏁' },
+  { id: 'station-1', name: 'Middle', position: 50, icon: '🏢', emoji: '🏢' },
+  { id: 'station-2', name: 'End', position: 100, icon: '🏁', emoji: '🏁' },
+]
 
-describe("useSteamJourney - Passenger Boarding", () => {
+describe('useSteamJourney - Passenger Boarding', () => {
   beforeEach(() => {
-    vi.useFakeTimers();
-  });
+    vi.useFakeTimers()
+  })
 
   afterEach(() => {
-    vi.runOnlyPendingTimers();
-    vi.useRealTimers();
-  });
+    vi.runOnlyPendingTimers()
+    vi.useRealTimers()
+  })
 
-  test("passenger boards when train reaches their origin station", () => {
+  test('passenger boards when train reaches their origin station', () => {
     const { result } = renderHook(
       () => {
-        const journey = useSteamJourney();
-        const race = useComplementRace();
-        return { journey, race };
+        const journey = useSteamJourney()
+        const race = useComplementRace()
+        return { journey, race }
       },
-      { wrapper },
-    );
+      { wrapper }
+    )
 
     // Setup: Add passenger waiting at station-1 (position 50)
-    const passenger = createPassenger("p1", "station-1", "station-2");
+    const passenger = createPassenger('p1', 'station-1', 'station-2')
 
     act(() => {
-      result.current.race.dispatch({ type: "BEGIN_GAME" });
+      result.current.race.dispatch({ type: 'BEGIN_GAME' })
       result.current.race.dispatch({
-        type: "GENERATE_PASSENGERS",
+        type: 'GENERATE_PASSENGERS',
         passengers: [passenger],
-      });
+      })
       // Set train position just before station-1
       result.current.race.dispatch({
-        type: "UPDATE_STEAM_JOURNEY",
+        type: 'UPDATE_STEAM_JOURNEY',
         momentum: 50,
         trainPosition: 40, // First car will be at ~33 (40 - 7)
         pressure: 75,
         elapsedTime: 1000,
-      });
-    });
+      })
+    })
 
     // Verify passenger is waiting
-    expect(result.current.race.state.passengers[0].isBoarded).toBe(false);
+    expect(result.current.race.state.passengers[0].isBoarded).toBe(false)
 
     // Move train to station-1 position
     act(() => {
       result.current.race.dispatch({
-        type: "UPDATE_STEAM_JOURNEY",
+        type: 'UPDATE_STEAM_JOURNEY',
         momentum: 50,
         trainPosition: 57, // First car at position 50 (57 - 7)
         pressure: 75,
         elapsedTime: 2000,
-      });
-    });
+      })
+    })
 
     // Advance timers to trigger the interval
     act(() => {
-      vi.advanceTimersByTime(100);
-    });
+      vi.advanceTimersByTime(100)
+    })
 
     // Verify passenger boarded
-    const boardedPassenger = result.current.race.state.passengers.find(
-      (p) => p.id === "p1",
-    );
-    expect(boardedPassenger?.isBoarded).toBe(true);
-  });
+    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", () => {
+  test('multiple passengers can board at the same station on different cars', () => {
     const { result } = renderHook(
       () => {
-        const journey = useSteamJourney();
-        const race = useComplementRace();
-        return { journey, race };
+        const journey = useSteamJourney()
+        const race = useComplementRace()
+        return { journey, race }
       },
-      { wrapper },
-    );
+      { 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('p1', 'station-1', 'station-2'),
+      createPassenger('p2', 'station-1', 'station-2'),
+      createPassenger('p3', 'station-1', 'station-2'),
+    ]
 
     act(() => {
-      result.current.race.dispatch({ type: "BEGIN_GAME" });
+      result.current.race.dispatch({ type: 'BEGIN_GAME' })
       result.current.race.dispatch({
-        type: "GENERATE_PASSENGERS",
+        type: 'GENERATE_PASSENGERS',
         passengers,
-      });
+      })
       // Set train with 3 empty cars approaching station-1 (position 50)
       // Cars at: 50 (57-7), 43 (57-14), 36 (57-21)
       result.current.race.dispatch({
-        type: "UPDATE_STEAM_JOURNEY",
+        type: 'UPDATE_STEAM_JOURNEY',
         momentum: 60,
         trainPosition: 57,
         pressure: 90,
         elapsedTime: 1000,
-      });
-    });
+      })
+    })
 
     // Advance timers
     act(() => {
-      vi.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;
-    expect(boardedCount).toBe(3);
-  });
+    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", () => {
+  test('passenger is not left behind when train passes quickly', () => {
     const { result } = renderHook(
       () => {
-        const journey = useSteamJourney();
-        const race = useComplementRace();
-        return { journey, race };
+        const journey = useSteamJourney()
+        const race = useComplementRace()
+        return { journey, race }
       },
-      { wrapper },
-    );
+      { wrapper }
+    )
 
-    const passenger = createPassenger("p1", "station-1", "station-2");
+    const passenger = createPassenger('p1', 'station-1', 'station-2')
 
     act(() => {
-      result.current.race.dispatch({ type: "BEGIN_GAME" });
+      result.current.race.dispatch({ type: 'BEGIN_GAME' })
       result.current.race.dispatch({
-        type: "GENERATE_PASSENGERS",
+        type: 'GENERATE_PASSENGERS',
         passengers: [passenger],
-      });
-    });
+      })
+    })
 
     // Simulate train passing through station quickly
-    const positions = [40, 45, 50, 52, 54, 56, 58, 60, 65, 70];
+    const positions = [40, 45, 50, 52, 54, 56, 58, 60, 65, 70]
 
     for (const pos of positions) {
       act(() => {
         result.current.race.dispatch({
-          type: "UPDATE_STEAM_JOURNEY",
+          type: 'UPDATE_STEAM_JOURNEY',
           momentum: 80,
           trainPosition: pos,
           pressure: 120,
           elapsedTime: 1000 + pos * 50,
-        });
-        vi.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;
+        return
       }
     }
 
     // If we get here, passenger was left behind
-    const boardedPassenger = result.current.race.state.passengers.find(
-      (p) => p.id === "p1",
-    );
-    expect(boardedPassenger?.isBoarded).toBe(true);
-  });
+    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", () => {
+  test('passenger boards on correct car based on availability', () => {
     const { result } = renderHook(
       () => {
-        const journey = useSteamJourney();
-        const race = useComplementRace();
-        return { journey, race };
+        const journey = useSteamJourney()
+        const race = useComplementRace()
+        return { journey, race }
       },
-      { wrapper },
-    );
+      { 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('p1', 'station-0', 'station-2', true, false), // Already boarded on car 0
+      createPassenger('p2', 'station-1', 'station-2'), // Waiting at station-1
+    ]
 
     act(() => {
-      result.current.race.dispatch({ type: "BEGIN_GAME" });
+      result.current.race.dispatch({ type: 'BEGIN_GAME' })
       result.current.race.dispatch({
-        type: "GENERATE_PASSENGERS",
+        type: 'GENERATE_PASSENGERS',
         passengers,
-      });
+      })
       // Train at station-1, car 0 occupied, car 1 empty
       result.current.race.dispatch({
-        type: "UPDATE_STEAM_JOURNEY",
+        type: 'UPDATE_STEAM_JOURNEY',
         momentum: 50,
         trainPosition: 57, // Car 0 at 50, Car 1 at 43
         pressure: 75,
         elapsedTime: 2000,
-      });
-    });
+      })
+    })
 
     act(() => {
-      vi.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");
-    expect(p2?.isBoarded).toBe(true);
+    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");
-    expect(p1?.isBoarded).toBe(true);
-    expect(p1?.isDelivered).toBe(false);
-  });
+    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", () => {
+  test('passenger is delivered when their car reaches destination', () => {
     const { result } = renderHook(
       () => {
-        const journey = useSteamJourney();
-        const race = useComplementRace();
-        return { journey, race };
+        const journey = useSteamJourney()
+        const race = useComplementRace()
+        return { journey, race }
       },
-      { wrapper },
-    );
+      { wrapper }
+    )
 
     // Setup: Passenger already boarded, heading to station-2 (position 100)
-    const passenger = createPassenger(
-      "p1",
-      "station-0",
-      "station-2",
-      true,
-      false,
-    );
+    const passenger = createPassenger('p1', 'station-0', 'station-2', true, false)
 
     act(() => {
-      result.current.race.dispatch({ type: "BEGIN_GAME" });
+      result.current.race.dispatch({ type: 'BEGIN_GAME' })
       result.current.race.dispatch({
-        type: "GENERATE_PASSENGERS",
+        type: 'GENERATE_PASSENGERS',
         passengers: [passenger],
-      });
+      })
       // Move train so car 0 reaches station-2
       result.current.race.dispatch({
-        type: "UPDATE_STEAM_JOURNEY",
+        type: 'UPDATE_STEAM_JOURNEY',
         momentum: 50,
         trainPosition: 107, // Car 0 at position 100 (107 - 7)
         pressure: 75,
         elapsedTime: 5000,
-      });
-    });
+      })
+    })
 
     act(() => {
-      vi.advanceTimersByTime(100);
-    });
+      vi.advanceTimersByTime(100)
+    })
 
     // Passenger should be delivered
-    const deliveredPassenger = result.current.race.state.passengers.find(
-      (p) => p.id === "p1",
-    );
-    expect(deliveredPassenger?.isDelivered).toBe(true);
-  });
-});
+    const deliveredPassenger = result.current.race.state.passengers.find((p) => p.id === 'p1')
+    expect(deliveredPassenger?.isDelivered).toBe(true)
+  })
+})
diff --git 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
index d24b2dcf..59c59336 100644
--- 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,22 +1,19 @@
-import { renderHook } from "@testing-library/react";
-import { beforeEach, describe, expect, test, vi } from "vitest";
-import type { Passenger, Station } from "@/arcade-games/complement-race/types";
-import type { RailroadTrackGenerator } from "../../lib/RailroadTrackGenerator";
-import { useTrackManagement } from "../useTrackManagement";
+import { renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+import type { Passenger, Station } from '@/arcade-games/complement-race/types'
+import type { RailroadTrackGenerator } from '../../lib/RailroadTrackGenerator'
+import { useTrackManagement } from '../useTrackManagement'
 
-describe("useTrackManagement - Passenger Display", () => {
-  let mockPathRef: React.RefObject<SVGPathElement>;
-  let mockTrackGenerator: RailroadTrackGenerator;
-  let mockStations: Station[];
-  let mockPassengers: Passenger[];
+describe('useTrackManagement - Passenger Display', () => {
+  let mockPathRef: React.RefObject<SVGPathElement>
+  let mockTrackGenerator: RailroadTrackGenerator
+  let mockStations: Station[]
+  let mockPassengers: Passenger[]
 
   beforeEach(() => {
     // Create mock path element
-    const mockPath = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path",
-    );
-    mockPath.getTotalLength = vi.fn(() => 1000);
+    const mockPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    mockPath.getTotalLength = vi.fn(() => 1000)
     mockPath.getPointAtLength = vi.fn((distance: number) => ({
       x: distance,
       y: 300,
@@ -24,58 +21,58 @@ describe("useTrackManagement - Passenger Display", () => {
       z: 0,
       matrixTransform: () => new DOMPoint(),
       toJSON: () => ({ x: distance, y: 300, w: 1, z: 0 }),
-    })) as any;
-    mockPathRef = { current: mockPath };
+    })) as any
+    mockPathRef = { current: mockPath }
 
     // Mock track generator
     mockTrackGenerator = {
       generateTrack: vi.fn(() => ({
-        ballastPath: "M 0 0",
-        referencePath: "M 0 0",
+        ballastPath: 'M 0 0',
+        referencePath: 'M 0 0',
         ties: [],
-        leftRailPath: "M 0 0",
-        rightRailPath: "M 0 0",
+        leftRailPath: 'M 0 0',
+        rightRailPath: 'M 0 0',
       })),
       generateTiesAndRails: vi.fn(() => ({
         ties: [],
-        leftRailPath: "M 0 0",
-        rightRailPath: "M 0 0",
+        leftRailPath: 'M 0 0',
+        rightRailPath: 'M 0 0',
       })),
-    } as unknown as RailroadTrackGenerator;
+    } as unknown as RailroadTrackGenerator
 
     // Mock stations
     mockStations = [
       {
-        id: "station1",
-        name: "Station 1",
-        icon: "🏠",
-        emoji: "🏠",
+        id: 'station1',
+        name: 'Station 1',
+        icon: '🏠',
+        emoji: '🏠',
         position: 20,
       },
       {
-        id: "station2",
-        name: "Station 2",
-        icon: "🏢",
-        emoji: "🏢",
+        id: 'station2',
+        name: 'Station 2',
+        icon: '🏢',
+        emoji: '🏢',
         position: 50,
       },
       {
-        id: "station3",
-        name: "Station 3",
-        icon: "🏪",
-        emoji: "🏪",
+        id: 'station3',
+        name: 'Station 3',
+        icon: '🏪',
+        emoji: '🏪',
         position: 80,
       },
-    ];
+    ]
 
     // Mock passengers - initial set (multiplayer format)
     mockPassengers = [
       {
-        id: "p1",
-        name: "Alice",
-        avatar: "👩",
-        originStationId: "station1",
-        destinationStationId: "station2",
+        id: 'p1',
+        name: 'Alice',
+        avatar: '👩',
+        originStationId: 'station1',
+        destinationStationId: 'station2',
         isUrgent: false,
         claimedBy: null,
         deliveredBy: null,
@@ -83,23 +80,23 @@ describe("useTrackManagement - Passenger Display", () => {
         timestamp: Date.now(),
       },
       {
-        id: "p2",
-        name: "Bob",
-        avatar: "👨",
-        originStationId: "station2",
-        destinationStationId: "station3",
+        id: 'p2',
+        name: 'Bob',
+        avatar: '👨',
+        originStationId: 'station2',
+        destinationStationId: 'station3',
         isUrgent: false,
         claimedBy: null,
         deliveredBy: null,
         carIndex: null,
         timestamp: Date.now(),
       },
-    ];
+    ]
 
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
-  test("initial passengers are displayed", () => {
+  test('initial passengers are displayed', () => {
     const { result } = renderHook(() =>
       useTrackManagement({
         currentRoute: 1,
@@ -110,15 +107,15 @@ describe("useTrackManagement - Passenger Display", () => {
         passengers: mockPassengers,
         maxCars: 3,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
-    expect(result.current.displayPassengers).toHaveLength(2);
-    expect(result.current.displayPassengers[0].id).toBe("p1");
-    expect(result.current.displayPassengers[1].id).toBe("p2");
-  });
+    expect(result.current.displayPassengers).toHaveLength(2)
+    expect(result.current.displayPassengers[0].id).toBe('p1')
+    expect(result.current.displayPassengers[1].id).toBe('p2')
+  })
 
-  test("passengers update when boarded (same route gameplay)", () => {
+  test('passengers update when boarded (same route gameplay)', () => {
     const { result, rerender } = renderHook(
       ({ passengers, position }) =>
         useTrackManagement({
@@ -131,26 +128,26 @@ describe("useTrackManagement - Passenger Display", () => {
           maxCars: 3,
           carSpacing: 7,
         }),
-      { initialProps: { passengers: mockPassengers, position: 25 } },
-    );
+      { initialProps: { passengers: mockPassengers, position: 25 } }
+    )
 
     // Initially 2 passengers
-    expect(result.current.displayPassengers).toHaveLength(2);
-    expect(result.current.displayPassengers[0].claimedBy).toBe(null);
+    expect(result.current.displayPassengers).toHaveLength(2)
+    expect(result.current.displayPassengers[0].claimedBy).toBe(null)
 
     // Board first passenger
     const boardedPassengers = mockPassengers.map((p) =>
-      p.id === "p1" ? { ...p, claimedBy: "player1", carIndex: 0 } : p,
-    );
+      p.id === 'p1' ? { ...p, claimedBy: 'player1', carIndex: 0 } : p
+    )
 
-    rerender({ passengers: boardedPassengers, position: 25 });
+    rerender({ passengers: boardedPassengers, position: 25 })
 
     // Should show updated passengers
-    expect(result.current.displayPassengers).toHaveLength(2);
-    expect(result.current.displayPassengers[0].claimedBy).toBe("player1");
-  });
+    expect(result.current.displayPassengers).toHaveLength(2)
+    expect(result.current.displayPassengers[0].claimedBy).toBe('player1')
+  })
 
-  test("passengers do NOT update during route transition (train moving)", () => {
+  test('passengers do NOT update during route transition (train moving)', () => {
     const { result, rerender } = renderHook(
       ({ route, passengers, position }) =>
         useTrackManagement({
@@ -163,39 +160,39 @@ describe("useTrackManagement - Passenger Display", () => {
           maxCars: 3,
           carSpacing: 7,
         }),
-      { initialProps: { route: 1, passengers: mockPassengers, position: 50 } },
-    );
+      { initialProps: { route: 1, passengers: mockPassengers, position: 50 } }
+    )
 
     // Initially route 1 passengers
-    expect(result.current.displayPassengers).toHaveLength(2);
-    expect(result.current.displayPassengers[0].id).toBe("p1");
+    expect(result.current.displayPassengers).toHaveLength(2)
+    expect(result.current.displayPassengers[0].id).toBe('p1')
 
     // Generate new passengers for route 2
     const newPassengers: Passenger[] = [
       {
-        id: "p3",
-        name: "Charlie",
-        avatar: "👴",
-        originStationId: "station1",
-        destinationStationId: "station3",
+        id: 'p3',
+        name: 'Charlie',
+        avatar: '👴',
+        originStationId: 'station1',
+        destinationStationId: 'station3',
         isUrgent: false,
         claimedBy: null,
         deliveredBy: null,
         carIndex: null,
         timestamp: Date.now(),
       },
-    ];
+    ]
 
     // Change route but train still moving
-    rerender({ route: 2, passengers: newPassengers, position: 60 });
+    rerender({ route: 2, passengers: newPassengers, position: 60 })
 
     // Should STILL show old passengers (route 1)
-    expect(result.current.displayPassengers).toHaveLength(2);
-    expect(result.current.displayPassengers[0].id).toBe("p1");
-    expect(result.current.displayPassengers[0].name).toBe("Alice");
-  });
+    expect(result.current.displayPassengers).toHaveLength(2)
+    expect(result.current.displayPassengers[0].id).toBe('p1')
+    expect(result.current.displayPassengers[0].name).toBe('Alice')
+  })
 
-  test("passengers update when train resets to start (negative position)", () => {
+  test('passengers update when train resets to start (negative position)', () => {
     const { result, rerender } = renderHook(
       ({ route, passengers, position }) =>
         useTrackManagement({
@@ -208,39 +205,39 @@ describe("useTrackManagement - Passenger Display", () => {
           maxCars: 3,
           carSpacing: 7,
         }),
-      { initialProps: { route: 1, passengers: mockPassengers, position: 50 } },
-    );
+      { initialProps: { route: 1, passengers: mockPassengers, position: 50 } }
+    )
 
     // Initially route 1 passengers
-    expect(result.current.displayPassengers).toHaveLength(2);
-    expect(result.current.displayPassengers[0].id).toBe("p1");
+    expect(result.current.displayPassengers).toHaveLength(2)
+    expect(result.current.displayPassengers[0].id).toBe('p1')
 
     // Generate new passengers for route 2
     const newPassengers: Passenger[] = [
       {
-        id: "p3",
-        name: "Charlie",
-        avatar: "👴",
-        originStationId: "station1",
-        destinationStationId: "station3",
+        id: 'p3',
+        name: 'Charlie',
+        avatar: '👴',
+        originStationId: 'station1',
+        destinationStationId: 'station3',
         isUrgent: false,
         claimedBy: null,
         deliveredBy: null,
         carIndex: null,
         timestamp: Date.now(),
       },
-    ];
+    ]
 
     // Change route and train resets
-    rerender({ route: 2, passengers: newPassengers, position: -5 });
+    rerender({ route: 2, passengers: newPassengers, position: -5 })
 
     // Should now show NEW passengers (route 2)
-    expect(result.current.displayPassengers).toHaveLength(1);
-    expect(result.current.displayPassengers[0].id).toBe("p3");
-    expect(result.current.displayPassengers[0].name).toBe("Charlie");
-  });
+    expect(result.current.displayPassengers).toHaveLength(1)
+    expect(result.current.displayPassengers[0].id).toBe('p3')
+    expect(result.current.displayPassengers[0].name).toBe('Charlie')
+  })
 
-  test("passengers do NOT flash when transitioning through 100%", () => {
+  test('passengers do NOT flash when transitioning through 100%', () => {
     const { result, rerender } = renderHook(
       ({ route, passengers, position }) =>
         useTrackManagement({
@@ -253,52 +250,52 @@ describe("useTrackManagement - Passenger Display", () => {
           maxCars: 3,
           carSpacing: 7,
         }),
-      { initialProps: { route: 1, passengers: mockPassengers, position: 95 } },
-    );
+      { initialProps: { route: 1, passengers: mockPassengers, position: 95 } }
+    )
 
     // At 95% - show route 1 passengers
-    expect(result.current.displayPassengers).toHaveLength(2);
-    expect(result.current.displayPassengers[0].id).toBe("p1");
+    expect(result.current.displayPassengers).toHaveLength(2)
+    expect(result.current.displayPassengers[0].id).toBe('p1')
 
     // Generate new passengers for route 2
     const newPassengers: Passenger[] = [
       {
-        id: "p3",
-        name: "Charlie",
-        avatar: "👴",
-        originStationId: "station1",
-        destinationStationId: "station3",
+        id: 'p3',
+        name: 'Charlie',
+        avatar: '👴',
+        originStationId: 'station1',
+        destinationStationId: 'station3',
         isUrgent: false,
         claimedBy: null,
         deliveredBy: null,
         carIndex: null,
         timestamp: Date.now(),
       },
-    ];
+    ]
 
     // Train exits (105%) but route hasn't changed yet
-    rerender({ route: 1, passengers: mockPassengers, position: 105 });
+    rerender({ route: 1, passengers: mockPassengers, position: 105 })
 
     // Should STILL show route 1 passengers
-    expect(result.current.displayPassengers).toHaveLength(2);
-    expect(result.current.displayPassengers[0].id).toBe("p1");
+    expect(result.current.displayPassengers).toHaveLength(2)
+    expect(result.current.displayPassengers[0].id).toBe('p1')
 
     // Now route changes to 2, but train still at 105%
-    rerender({ route: 2, passengers: newPassengers, position: 105 });
+    rerender({ route: 2, passengers: newPassengers, position: 105 })
 
     // Should STILL show route 1 passengers (old ones)
-    expect(result.current.displayPassengers).toHaveLength(2);
-    expect(result.current.displayPassengers[0].id).toBe("p1");
+    expect(result.current.displayPassengers).toHaveLength(2)
+    expect(result.current.displayPassengers[0].id).toBe('p1')
 
     // Train resets to start
-    rerender({ route: 2, passengers: newPassengers, position: -5 });
+    rerender({ route: 2, passengers: newPassengers, position: -5 })
 
     // NOW should show route 2 passengers
-    expect(result.current.displayPassengers).toHaveLength(1);
-    expect(result.current.displayPassengers[0].id).toBe("p3");
-  });
+    expect(result.current.displayPassengers).toHaveLength(1)
+    expect(result.current.displayPassengers[0].id).toBe('p3')
+  })
 
-  test("passengers do NOT update when array reference changes but same route", () => {
+  test('passengers do NOT update when array reference changes but same route', () => {
     const { result, rerender } = renderHook(
       ({ passengers, position }) =>
         useTrackManagement({
@@ -311,25 +308,25 @@ describe("useTrackManagement - Passenger Display", () => {
           maxCars: 3,
           carSpacing: 7,
         }),
-      { initialProps: { passengers: mockPassengers, position: 50 } },
-    );
+      { initialProps: { passengers: mockPassengers, position: 50 } }
+    )
 
     // Initially route 1 passengers
-    expect(result.current.displayPassengers).toHaveLength(2);
-    expect(result.current.displayPassengers[0].id).toBe("p1");
+    expect(result.current.displayPassengers).toHaveLength(2)
+    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 });
+    rerender({ passengers: samePassengersNewRef, position: 50 })
 
     // Display should update because it's the same route (gameplay update)
-    expect(result.current.displayPassengers).toHaveLength(2);
-    expect(result.current.displayPassengers[0].id).toBe("p1");
-  });
+    expect(result.current.displayPassengers).toHaveLength(2)
+    expect(result.current.displayPassengers[0].id).toBe('p1')
+  })
 
-  test("delivered passengers update immediately (same route)", () => {
+  test('delivered passengers update immediately (same route)', () => {
     const { result, rerender } = renderHook(
       ({ passengers, position }) =>
         useTrackManagement({
@@ -342,28 +339,26 @@ describe("useTrackManagement - Passenger Display", () => {
           maxCars: 3,
           carSpacing: 7,
         }),
-      { initialProps: { passengers: mockPassengers, position: 25 } },
-    );
+      { initialProps: { passengers: mockPassengers, position: 25 } }
+    )
 
     // Initially 2 passengers, neither delivered
-    expect(result.current.displayPassengers).toHaveLength(2);
-    expect(result.current.displayPassengers[0].deliveredBy).toBe(null);
+    expect(result.current.displayPassengers).toHaveLength(2)
+    expect(result.current.displayPassengers[0].deliveredBy).toBe(null)
 
     // Deliver first passenger
     const deliveredPassengers = mockPassengers.map((p) =>
-      p.id === "p1"
-        ? { ...p, claimedBy: "player1", carIndex: 0, deliveredBy: "player1" }
-        : p,
-    );
+      p.id === 'p1' ? { ...p, claimedBy: 'player1', carIndex: 0, deliveredBy: 'player1' } : p
+    )
 
-    rerender({ passengers: deliveredPassengers, position: 55 });
+    rerender({ passengers: deliveredPassengers, position: 55 })
 
     // Should show updated passengers immediately
-    expect(result.current.displayPassengers).toHaveLength(2);
-    expect(result.current.displayPassengers[0].deliveredBy).toBe("player1");
-  });
+    expect(result.current.displayPassengers).toHaveLength(2)
+    expect(result.current.displayPassengers[0].deliveredBy).toBe('player1')
+  })
 
-  test("multiple rapid passenger updates during same route", () => {
+  test('multiple rapid passenger updates during same route', () => {
     const { result, rerender } = renderHook(
       ({ passengers, position }) =>
         useTrackManagement({
@@ -376,41 +371,37 @@ describe("useTrackManagement - Passenger Display", () => {
           maxCars: 3,
           carSpacing: 7,
         }),
-      { initialProps: { passengers: mockPassengers, position: 25 } },
-    );
+      { initialProps: { passengers: mockPassengers, position: 25 } }
+    )
 
     // Initially 2 passengers
-    expect(result.current.displayPassengers).toHaveLength(2);
+    expect(result.current.displayPassengers).toHaveLength(2)
 
     // Board p1
     let updated = mockPassengers.map((p) =>
-      p.id === "p1" ? { ...p, claimedBy: "player1", carIndex: 0 } : p,
-    );
-    rerender({ passengers: updated, position: 26 });
-    expect(result.current.displayPassengers[0].claimedBy).toBe("player1");
+      p.id === 'p1' ? { ...p, claimedBy: 'player1', carIndex: 0 } : p
+    )
+    rerender({ passengers: updated, position: 26 })
+    expect(result.current.displayPassengers[0].claimedBy).toBe('player1')
 
     // Board p2
-    updated = updated.map((p) =>
-      p.id === "p2" ? { ...p, claimedBy: "player1", carIndex: 1 } : p,
-    );
-    rerender({ passengers: updated, position: 52 });
-    expect(result.current.displayPassengers[1].claimedBy).toBe("player1");
+    updated = updated.map((p) => (p.id === 'p2' ? { ...p, claimedBy: 'player1', carIndex: 1 } : p))
+    rerender({ passengers: updated, position: 52 })
+    expect(result.current.displayPassengers[1].claimedBy).toBe('player1')
 
     // Deliver p1
-    updated = updated.map((p) =>
-      p.id === "p1" ? { ...p, deliveredBy: "player1" } : p,
-    );
-    rerender({ passengers: updated, position: 53 });
-    expect(result.current.displayPassengers[0].deliveredBy).toBe("player1");
+    updated = updated.map((p) => (p.id === 'p1' ? { ...p, deliveredBy: 'player1' } : p))
+    rerender({ passengers: updated, position: 53 })
+    expect(result.current.displayPassengers[0].deliveredBy).toBe('player1')
 
     // All updates should have been reflected
-    expect(result.current.displayPassengers[0].claimedBy).toBe("player1");
-    expect(result.current.displayPassengers[0].deliveredBy).toBe("player1");
-    expect(result.current.displayPassengers[1].claimedBy).toBe("player1");
-    expect(result.current.displayPassengers[1].deliveredBy).toBe(null);
-  });
+    expect(result.current.displayPassengers[0].claimedBy).toBe('player1')
+    expect(result.current.displayPassengers[0].deliveredBy).toBe('player1')
+    expect(result.current.displayPassengers[1].claimedBy).toBe('player1')
+    expect(result.current.displayPassengers[1].deliveredBy).toBe(null)
+  })
 
-  test("EDGE CASE: new passengers at position 0 with old route", () => {
+  test('EDGE CASE: new passengers at position 0 with old route', () => {
     const { result, rerender } = renderHook(
       ({ route, passengers, position }) =>
         useTrackManagement({
@@ -423,43 +414,43 @@ describe("useTrackManagement - Passenger Display", () => {
           maxCars: 3,
           carSpacing: 7,
         }),
-      { initialProps: { route: 1, passengers: mockPassengers, position: 95 } },
-    );
+      { initialProps: { route: 1, passengers: mockPassengers, position: 95 } }
+    )
 
     // At 95% - route 1 passengers
-    expect(result.current.displayPassengers[0].id).toBe("p1");
+    expect(result.current.displayPassengers[0].id).toBe('p1')
 
     // Train exits tunnel
-    rerender({ route: 1, passengers: mockPassengers, position: 110 });
-    expect(result.current.displayPassengers[0].id).toBe("p1");
+    rerender({ route: 1, passengers: mockPassengers, position: 110 })
+    expect(result.current.displayPassengers[0].id).toBe('p1')
 
     // New passengers generated but route hasn't changed yet, position resets to 0
     const newPassengers: Passenger[] = [
       {
-        id: "p3",
-        name: "Charlie",
-        avatar: "👴",
-        originStationId: "station1",
-        destinationStationId: "station3",
+        id: 'p3',
+        name: 'Charlie',
+        avatar: '👴',
+        originStationId: 'station1',
+        destinationStationId: 'station3',
         isUrgent: false,
         claimedBy: null,
         deliveredBy: null,
         carIndex: null,
         timestamp: Date.now(),
       },
-    ];
+    ]
 
     // CRITICAL: New passengers, old route, position = 0
     // This could trigger the second useEffect if not handled carefully
-    rerender({ route: 1, passengers: newPassengers, position: 0 });
+    rerender({ route: 1, passengers: newPassengers, position: 0 })
 
     // Should NOT show new passengers yet (route hasn't changed)
     // But position is 0-100, so second effect might fire
-    expect(result.current.displayPassengers[0].id).toBe("p1");
-    expect(result.current.displayPassengers[0].name).toBe("Alice");
-  });
+    expect(result.current.displayPassengers[0].id).toBe('p1')
+    expect(result.current.displayPassengers[0].name).toBe('Alice')
+  })
 
-  test("EDGE CASE: passengers regenerated at position 5%", () => {
+  test('EDGE CASE: passengers regenerated at position 5%', () => {
     const { result, rerender } = renderHook(
       ({ route, passengers, position }) =>
         useTrackManagement({
@@ -472,36 +463,36 @@ describe("useTrackManagement - Passenger Display", () => {
           maxCars: 3,
           carSpacing: 7,
         }),
-      { initialProps: { route: 1, passengers: mockPassengers, position: 95 } },
-    );
+      { initialProps: { route: 1, passengers: mockPassengers, position: 95 } }
+    )
 
     // At 95% - route 1 passengers
-    expect(result.current.displayPassengers[0].id).toBe("p1");
+    expect(result.current.displayPassengers[0].id).toBe('p1')
 
     // New passengers generated while train is at 5%
     const newPassengers: Passenger[] = [
       {
-        id: "p3",
-        name: "Charlie",
-        avatar: "👴",
-        originStationId: "station1",
-        destinationStationId: "station3",
+        id: 'p3',
+        name: 'Charlie',
+        avatar: '👴',
+        originStationId: 'station1',
+        destinationStationId: 'station3',
         isUrgent: false,
         claimedBy: null,
         deliveredBy: null,
         carIndex: null,
         timestamp: Date.now(),
       },
-    ];
+    ]
 
     // CRITICAL: New passengers array, same route, position within 0-100
-    rerender({ route: 1, passengers: newPassengers, position: 5 });
+    rerender({ route: 1, passengers: newPassengers, position: 5 })
 
     // Should NOT show new passengers (different array reference, route hasn't changed properly)
-    expect(result.current.displayPassengers[0].id).toBe("p1");
-  });
+    expect(result.current.displayPassengers[0].id).toBe('p1')
+  })
 
-  test("EDGE CASE: rapid route increment with position oscillation", () => {
+  test('EDGE CASE: rapid route increment with position oscillation', () => {
     const { result, rerender } = renderHook(
       ({ route, passengers, position }) =>
         useTrackManagement({
@@ -514,36 +505,36 @@ describe("useTrackManagement - Passenger Display", () => {
           maxCars: 3,
           carSpacing: 7,
         }),
-      { initialProps: { route: 1, passengers: mockPassengers, position: 50 } },
-    );
+      { initialProps: { route: 1, passengers: mockPassengers, position: 50 } }
+    )
 
-    expect(result.current.displayPassengers[0].id).toBe("p1");
+    expect(result.current.displayPassengers[0].id).toBe('p1')
 
     const route2Passengers: Passenger[] = [
       {
-        id: "p3",
-        name: "Charlie",
-        avatar: "👴",
-        originStationId: "station1",
-        destinationStationId: "station3",
+        id: 'p3',
+        name: 'Charlie',
+        avatar: '👴',
+        originStationId: 'station1',
+        destinationStationId: 'station3',
         isUrgent: false,
         claimedBy: null,
         deliveredBy: null,
         carIndex: null,
         timestamp: Date.now(),
       },
-    ];
+    ]
 
     // Route changes, position goes positive briefly before negative
-    rerender({ route: 2, passengers: route2Passengers, position: 2 });
+    rerender({ route: 2, passengers: route2Passengers, position: 2 })
 
     // Should still show old passengers
-    expect(result.current.displayPassengers[0].id).toBe("p1");
+    expect(result.current.displayPassengers[0].id).toBe('p1')
 
     // Position goes negative
-    rerender({ route: 2, passengers: route2Passengers, position: -3 });
+    rerender({ route: 2, passengers: route2Passengers, position: -3 })
 
     // NOW should show new passengers
-    expect(result.current.displayPassengers[0].id).toBe("p3");
-  });
-});
+    expect(result.current.displayPassengers[0].id).toBe('p3')
+  })
+})
diff --git 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
index 30b04474..8ed3ae81 100644
--- 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,30 +1,27 @@
-import { renderHook } from "@testing-library/react";
-import { beforeEach, describe, expect, test, vi } from "vitest";
-import type { Passenger, Station } from "@/arcade-games/complement-race/types";
-import type { RailroadTrackGenerator } from "../../lib/RailroadTrackGenerator";
-import { useTrackManagement } from "../useTrackManagement";
+import { renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+import type { Passenger, Station } from '@/arcade-games/complement-race/types'
+import type { RailroadTrackGenerator } from '../../lib/RailroadTrackGenerator'
+import { useTrackManagement } from '../useTrackManagement'
 
 // Mock the landmarks module
-vi.mock("../../lib/landmarks", () => ({
+vi.mock('../../lib/landmarks', () => ({
   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: 30, offset: { x: 0, y: -50 }, size: 24 },
+    { emoji: '🏔️', position: 70, offset: { x: 0, y: -80 }, size: 32 },
   ]),
-}));
+}))
 
-describe("useTrackManagement", () => {
-  let mockPathRef: React.RefObject<SVGPathElement>;
-  let mockTrackGenerator: RailroadTrackGenerator;
-  let mockStations: Station[];
-  let mockPassengers: Passenger[];
+describe('useTrackManagement', () => {
+  let mockPathRef: React.RefObject<SVGPathElement>
+  let mockTrackGenerator: RailroadTrackGenerator
+  let mockStations: Station[]
+  let mockPassengers: Passenger[]
 
   beforeEach(() => {
     // Create mock path element
-    const mockPath = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path",
-    );
-    mockPath.getTotalLength = vi.fn(() => 1000);
+    const mockPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    mockPath.getTotalLength = vi.fn(() => 1000)
     mockPath.getPointAtLength = vi.fn((distance: number) => ({
       x: distance,
       y: 300,
@@ -32,8 +29,8 @@ describe("useTrackManagement", () => {
       z: 0,
       matrixTransform: () => new DOMPoint(),
       toJSON: () => ({ x: distance, y: 300, w: 1, z: 0 }),
-    })) as any;
-    mockPathRef = { current: mockPath };
+    })) as any
+    mockPathRef = { current: mockPath }
 
     // Mock track generator
     mockTrackGenerator = {
@@ -46,47 +43,47 @@ describe("useTrackManagement", () => {
           { x1: 0, y1: 300, x2: 10, y2: 300 },
           { x1: 20, y1: 300, x2: 30, y2: 300 },
         ],
-        leftRailPoints: ["0,295", "100,295"],
-        rightRailPoints: ["0,305", "100,305"],
+        leftRailPoints: ['0,295', '100,295'],
+        rightRailPoints: ['0,305', '100,305'],
       })),
-    } as unknown as RailroadTrackGenerator;
+    } as unknown as RailroadTrackGenerator
 
     mockStations = [
       {
-        id: "station-1",
-        name: "Station 1",
+        id: 'station-1',
+        name: 'Station 1',
         position: 20,
-        icon: "🏭",
-        emoji: "🏭",
+        icon: '🏭',
+        emoji: '🏭',
       },
       {
-        id: "station-2",
-        name: "Station 2",
+        id: 'station-2',
+        name: 'Station 2',
         position: 60,
-        icon: "🏛️",
-        emoji: "🏛️",
+        icon: '🏛️',
+        emoji: '🏛️',
       },
-    ];
+    ]
 
     mockPassengers = [
       {
-        id: "passenger-1",
-        name: "Passenger 1",
-        avatar: "👨",
-        originStationId: "station-1",
-        destinationStationId: "station-2",
+        id: 'passenger-1',
+        name: 'Passenger 1',
+        avatar: '👨',
+        originStationId: 'station-1',
+        destinationStationId: 'station-2',
         isUrgent: false,
         claimedBy: null,
         deliveredBy: null,
         carIndex: null,
         timestamp: Date.now(),
       },
-    ];
+    ]
 
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
-  test("initializes with null trackData", () => {
+  test('initializes with null trackData', () => {
     const { result } = renderHook(() =>
       useTrackManagement({
         currentRoute: 1,
@@ -97,15 +94,15 @@ describe("useTrackManagement", () => {
         passengers: mockPassengers,
         maxCars: 3,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
     // Track data should be generated
-    expect(result.current.trackData).toBeDefined();
-    expect(mockTrackGenerator.generateTrack).toHaveBeenCalledWith(1);
-  });
+    expect(result.current.trackData).toBeDefined()
+    expect(mockTrackGenerator.generateTrack).toHaveBeenCalledWith(1)
+  })
 
-  test("generates landmarks for current route", () => {
+  test('generates landmarks for current route', () => {
     const { result } = renderHook(() =>
       useTrackManagement({
         currentRoute: 1,
@@ -116,15 +113,15 @@ describe("useTrackManagement", () => {
         passengers: mockPassengers,
         maxCars: 3,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
-    expect(result.current.landmarks).toHaveLength(2);
-    expect(result.current.landmarks[0].emoji).toBe("🌲");
-    expect(result.current.landmarks[1].emoji).toBe("🏔️");
-  });
+    expect(result.current.landmarks).toHaveLength(2)
+    expect(result.current.landmarks[0].emoji).toBe('🌲')
+    expect(result.current.landmarks[1].emoji).toBe('🏔️')
+  })
 
-  test("generates ties and rails when path is ready", () => {
+  test('generates ties and rails when path is ready', () => {
     const { result } = renderHook(() =>
       useTrackManagement({
         currentRoute: 1,
@@ -135,14 +132,14 @@ describe("useTrackManagement", () => {
         passengers: mockPassengers,
         maxCars: 3,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
-    expect(result.current.tiesAndRails).toBeDefined();
-    expect(result.current.tiesAndRails?.ties).toHaveLength(2);
-  });
+    expect(result.current.tiesAndRails).toBeDefined()
+    expect(result.current.tiesAndRails?.ties).toHaveLength(2)
+  })
 
-  test("calculates station positions along path", () => {
+  test('calculates station positions along path', () => {
     const { result } = renderHook(() =>
       useTrackManagement({
         currentRoute: 1,
@@ -153,17 +150,17 @@ describe("useTrackManagement", () => {
         passengers: mockPassengers,
         maxCars: 3,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
-    expect(result.current.stationPositions).toHaveLength(2);
+    expect(result.current.stationPositions).toHaveLength(2)
     // Station 1 at 20% of 1000 = 200
-    expect(result.current.stationPositions[0].x).toBe(200);
+    expect(result.current.stationPositions[0].x).toBe(200)
     // Station 2 at 60% of 1000 = 600
-    expect(result.current.stationPositions[1].x).toBe(600);
-  });
+    expect(result.current.stationPositions[1].x).toBe(600)
+  })
 
-  test("calculates landmark positions along path", () => {
+  test('calculates landmark positions along path', () => {
     const { result } = renderHook(() =>
       useTrackManagement({
         currentRoute: 1,
@@ -174,16 +171,16 @@ describe("useTrackManagement", () => {
         passengers: mockPassengers,
         maxCars: 3,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
-    expect(result.current.landmarkPositions).toHaveLength(2);
+    expect(result.current.landmarkPositions).toHaveLength(2)
     // First landmark at 30% + offset
-    expect(result.current.landmarkPositions[0].x).toBe(300); // 30% of 1000
-    expect(result.current.landmarkPositions[0].y).toBe(250); // 300 + (-50)
-  });
+    expect(result.current.landmarkPositions[0].x).toBe(300) // 30% of 1000
+    expect(result.current.landmarkPositions[0].y).toBe(250) // 300 + (-50)
+  })
 
-  test("delays track update when changing routes mid-journey", () => {
+  test('delays track update when changing routes mid-journey', () => {
     const { result, rerender } = renderHook(
       ({ route, position }) =>
         useTrackManagement({
@@ -198,20 +195,20 @@ describe("useTrackManagement", () => {
         }),
       {
         initialProps: { route: 1, position: 0 },
-      },
-    );
+      }
+    )
 
-    const initialTrackData = result.current.trackData;
+    const initialTrackData = result.current.trackData
 
     // Change route while train is mid-journey (position > 0)
-    rerender({ route: 2, position: 50 });
+    rerender({ route: 2, position: 50 })
 
     // Track should NOT update yet (pending)
-    expect(result.current.trackData).toBe(initialTrackData);
-    expect(mockTrackGenerator.generateTrack).toHaveBeenCalledWith(2);
-  });
+    expect(result.current.trackData).toBe(initialTrackData)
+    expect(mockTrackGenerator.generateTrack).toHaveBeenCalledWith(2)
+  })
 
-  test("applies pending track when train resets to beginning", () => {
+  test('applies pending track when train resets to beginning', () => {
     const { result, rerender } = renderHook(
       ({ route, position }) =>
         useTrackManagement({
@@ -226,21 +223,21 @@ describe("useTrackManagement", () => {
         }),
       {
         initialProps: { route: 1, position: 0 },
-      },
-    );
+      }
+    )
 
     // Change route while train is mid-journey
-    rerender({ route: 2, position: 50 });
-    const trackDataBeforeReset = result.current.trackData;
+    rerender({ route: 2, position: 50 })
+    const trackDataBeforeReset = result.current.trackData
 
     // Train resets to beginning (position < 0)
-    rerender({ route: 2, position: -5 });
+    rerender({ route: 2, position: -5 })
 
     // Track should now update
-    expect(result.current.trackData).not.toBe(trackDataBeforeReset);
-  });
+    expect(result.current.trackData).not.toBe(trackDataBeforeReset)
+  })
 
-  test("immediately applies new track when train is at start", () => {
+  test('immediately applies new track when train is at start', () => {
     const { result, rerender } = renderHook(
       ({ route, position }) =>
         useTrackManagement({
@@ -255,33 +252,33 @@ describe("useTrackManagement", () => {
         }),
       {
         initialProps: { route: 1, position: -5 },
-      },
-    );
+      }
+    )
 
-    const initialTrackData = result.current.trackData;
+    const initialTrackData = result.current.trackData
 
     // Change route while train is at start (position < 0)
-    rerender({ route: 2, position: -5 });
+    rerender({ route: 2, position: -5 })
 
     // Track should update immediately
-    expect(result.current.trackData).not.toBe(initialTrackData);
-  });
+    expect(result.current.trackData).not.toBe(initialTrackData)
+  })
 
-  test("delays passenger display update until all cars exit", () => {
+  test('delays passenger display update until all cars exit', () => {
     const newPassengers: Passenger[] = [
       {
-        id: "passenger-2",
-        name: "Passenger 2",
-        avatar: "👩",
-        originStationId: "station-1",
-        destinationStationId: "station-2",
+        id: 'passenger-2',
+        name: 'Passenger 2',
+        avatar: '👩',
+        originStationId: 'station-1',
+        destinationStationId: 'station-2',
         isUrgent: false,
         claimedBy: null,
         deliveredBy: null,
         carIndex: null,
         timestamp: Date.now(),
       },
-    ];
+    ]
 
     const { result, rerender } = renderHook(
       ({ passengers, position }) =>
@@ -297,34 +294,34 @@ describe("useTrackManagement", () => {
         }),
       {
         initialProps: { passengers: mockPassengers, position: 50 },
-      },
-    );
+      }
+    )
 
-    expect(result.current.displayPassengers).toBe(mockPassengers);
+    expect(result.current.displayPassengers).toBe(mockPassengers)
 
     // Change passengers while train is mid-journey
     // Locomotive at 100%, but last car at 100 - (5*7) = 65%
-    rerender({ passengers: newPassengers, position: 100 });
+    rerender({ passengers: newPassengers, position: 100 })
 
     // Display passengers should NOT update yet (last car hasn't exited)
-    expect(result.current.displayPassengers).toBe(mockPassengers);
-  });
+    expect(result.current.displayPassengers).toBe(mockPassengers)
+  })
 
-  test("does not update passenger display until train resets", () => {
+  test('does not update passenger display until train resets', () => {
     const newPassengers: Passenger[] = [
       {
-        id: "passenger-2",
-        name: "Passenger 2",
-        avatar: "👩",
-        originStationId: "station-1",
-        destinationStationId: "station-2",
+        id: 'passenger-2',
+        name: 'Passenger 2',
+        avatar: '👩',
+        originStationId: 'station-1',
+        destinationStationId: 'station-2',
         isUrgent: false,
         claimedBy: null,
         deliveredBy: null,
         carIndex: null,
         timestamp: Date.now(),
       },
-    ];
+    ]
 
     const { result, rerender } = renderHook(
       ({ passengers, position }) =>
@@ -340,27 +337,27 @@ describe("useTrackManagement", () => {
         }),
       {
         initialProps: { passengers: mockPassengers, position: 50 },
-      },
-    );
+      }
+    )
 
     // Change passengers, locomotive at position where all cars have exited
     // Last car exits at position 97%, so locomotive at 132%
-    rerender({ passengers: newPassengers, position: 132 });
+    rerender({ passengers: newPassengers, position: 132 })
 
     // Display passengers should NOT update yet (waiting for train reset)
-    expect(result.current.displayPassengers).toBe(mockPassengers);
+    expect(result.current.displayPassengers).toBe(mockPassengers)
 
     // Now train resets to beginning
-    rerender({ passengers: newPassengers, position: -5 });
+    rerender({ passengers: newPassengers, position: -5 })
 
     // Display passengers should update now (train reset)
-    expect(result.current.displayPassengers).toBe(newPassengers);
-  });
+    expect(result.current.displayPassengers).toBe(newPassengers)
+  })
 
-  test("updates passengers immediately during same route", () => {
+  test('updates passengers immediately during same route', () => {
     const updatedPassengers: Passenger[] = [
-      { ...mockPassengers[0], claimedBy: "player1", carIndex: 0 },
-    ];
+      { ...mockPassengers[0], claimedBy: 'player1', carIndex: 0 },
+    ]
 
     const { result, rerender } = renderHook(
       ({ passengers, position }) =>
@@ -376,21 +373,21 @@ describe("useTrackManagement", () => {
         }),
       {
         initialProps: { passengers: mockPassengers, position: 50 },
-      },
-    );
+      }
+    )
 
     // Update passengers (boarding) during same route
-    rerender({ passengers: updatedPassengers, position: 55 });
+    rerender({ passengers: updatedPassengers, position: 55 })
 
     // Display passengers should update immediately (same route, gameplay update)
-    expect(result.current.displayPassengers).toBe(updatedPassengers);
-  });
+    expect(result.current.displayPassengers).toBe(updatedPassengers)
+  })
 
-  test("returns null when no track data", () => {
+  test('returns null when no track data', () => {
     // Create a hook where trackGenerator returns null
     const nullTrackGenerator = {
       generateTrack: vi.fn(() => null),
-    } as unknown as RailroadTrackGenerator;
+    } as unknown as RailroadTrackGenerator
 
     const { result } = renderHook(() =>
       useTrackManagement({
@@ -402,9 +399,9 @@ describe("useTrackManagement", () => {
         passengers: mockPassengers,
         maxCars: 3,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
-    expect(result.current.trackData).toBeNull();
-  });
-});
+    expect(result.current.trackData).toBeNull()
+  })
+})
diff --git 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
index dc24d2aa..be108ee2 100644
--- 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,19 +1,16 @@
-import { renderHook } from "@testing-library/react";
-import { beforeEach, describe, expect, test, vi } from "vitest";
-import type { RailroadTrackGenerator } from "../../lib/RailroadTrackGenerator";
-import { useTrainTransforms } from "../useTrainTransforms";
+import { renderHook } from '@testing-library/react'
+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>;
-  let mockTrackGenerator: RailroadTrackGenerator;
+describe('useTrainTransforms', () => {
+  let mockPathRef: React.RefObject<SVGPathElement>
+  let mockTrackGenerator: RailroadTrackGenerator
 
   beforeEach(() => {
     // Create mock path element
-    const mockPath = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "path",
-    );
-    mockPathRef = { current: mockPath };
+    const mockPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    mockPathRef = { current: mockPath }
 
     // Mock track generator
     mockTrackGenerator = {
@@ -22,13 +19,13 @@ describe("useTrainTransforms", () => {
         y: 300,
         rotation: position / 10,
       })),
-    } as unknown as RailroadTrackGenerator;
+    } as unknown as RailroadTrackGenerator
 
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
-  test("returns default transform when pathRef is null", () => {
-    const nullPathRef: React.RefObject<SVGPathElement> = { current: null };
+  test('returns default transform when pathRef is null', () => {
+    const nullPathRef: React.RefObject<SVGPathElement> = { current: null }
 
     const { result } = renderHook(() =>
       useTrainTransforms({
@@ -37,18 +34,18 @@ describe("useTrainTransforms", () => {
         pathRef: nullPathRef,
         maxCars: 5,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
     expect(result.current.trainTransform).toEqual({
       x: 50,
       y: 300,
       rotation: 0,
-    });
-    expect(result.current.trainCars).toHaveLength(5);
-  });
+    })
+    expect(result.current.trainCars).toHaveLength(5)
+  })
 
-  test("calculates train transform at given position", () => {
+  test('calculates train transform at given position', () => {
     const { result } = renderHook(() =>
       useTrainTransforms({
         trainPosition: 50,
@@ -56,17 +53,17 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 5,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
     expect(result.current.trainTransform).toEqual({
       x: 500, // 50 * 10
       y: 300,
       rotation: 5, // 50 / 10
-    });
-  });
+    })
+  })
 
-  test("updates transform when train position changes", () => {
+  test('updates transform when train position changes', () => {
     const { result, rerender } = renderHook(
       ({ position }) =>
         useTrainTransforms({
@@ -76,16 +73,16 @@ describe("useTrainTransforms", () => {
           maxCars: 5,
           carSpacing: 7,
         }),
-      { initialProps: { position: 20 } },
-    );
+      { initialProps: { position: 20 } }
+    )
 
-    expect(result.current.trainTransform.x).toBe(200);
+    expect(result.current.trainTransform.x).toBe(200)
 
-    rerender({ position: 60 });
-    expect(result.current.trainTransform.x).toBe(600);
-  });
+    rerender({ position: 60 })
+    expect(result.current.trainTransform.x).toBe(600)
+  })
 
-  test("calculates correct number of train cars", () => {
+  test('calculates correct number of train cars', () => {
     const { result } = renderHook(() =>
       useTrainTransforms({
         trainPosition: 50,
@@ -93,13 +90,13 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 5,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
-    expect(result.current.trainCars).toHaveLength(5);
-  });
+    expect(result.current.trainCars).toHaveLength(5)
+  })
 
-  test("respects custom maxCars parameter", () => {
+  test('respects custom maxCars parameter', () => {
     const { result } = renderHook(() =>
       useTrainTransforms({
         trainPosition: 50,
@@ -107,13 +104,13 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 3,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
-    expect(result.current.trainCars).toHaveLength(3);
-  });
+    expect(result.current.trainCars).toHaveLength(3)
+  })
 
-  test("respects custom carSpacing parameter", () => {
+  test('respects custom carSpacing parameter', () => {
     const { result } = renderHook(() =>
       useTrainTransforms({
         trainPosition: 50,
@@ -121,14 +118,14 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 5,
         carSpacing: 10,
-      }),
-    );
+      })
+    )
 
     // First car should be at position 50 - 10 = 40
-    expect(result.current.trainCars[0].position).toBe(40);
-  });
+    expect(result.current.trainCars[0].position).toBe(40)
+  })
 
-  test("positions cars behind locomotive with correct spacing", () => {
+  test('positions cars behind locomotive with correct spacing', () => {
     const { result } = renderHook(() =>
       useTrainTransforms({
         trainPosition: 50,
@@ -136,15 +133,15 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 3,
         carSpacing: 10,
-      }),
-    );
+      })
+    )
 
-    expect(result.current.trainCars[0].position).toBe(40); // 50 - 1*10
-    expect(result.current.trainCars[1].position).toBe(30); // 50 - 2*10
-    expect(result.current.trainCars[2].position).toBe(20); // 50 - 3*10
-  });
+    expect(result.current.trainCars[0].position).toBe(40) // 50 - 1*10
+    expect(result.current.trainCars[1].position).toBe(30) // 50 - 2*10
+    expect(result.current.trainCars[2].position).toBe(20) // 50 - 3*10
+  })
 
-  test("calculates locomotive opacity correctly during fade in", () => {
+  test('calculates locomotive opacity correctly during fade in', () => {
     // Fade in range: 3-8%
     const { result: result1 } = renderHook(() =>
       useTrainTransforms({
@@ -153,9 +150,9 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 5,
         carSpacing: 7,
-      }),
-    );
-    expect(result1.current.locomotiveOpacity).toBe(0);
+      })
+    )
+    expect(result1.current.locomotiveOpacity).toBe(0)
 
     const { result: result2 } = renderHook(() =>
       useTrainTransforms({
@@ -164,9 +161,9 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 5,
         carSpacing: 7,
-      }),
-    );
-    expect(result2.current.locomotiveOpacity).toBe(0.5);
+      })
+    )
+    expect(result2.current.locomotiveOpacity).toBe(0.5)
 
     const { result: result3 } = renderHook(() =>
       useTrainTransforms({
@@ -175,12 +172,12 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 5,
         carSpacing: 7,
-      }),
-    );
-    expect(result3.current.locomotiveOpacity).toBe(1);
-  });
+      })
+    )
+    expect(result3.current.locomotiveOpacity).toBe(1)
+  })
 
-  test("calculates locomotive opacity correctly during fade out", () => {
+  test('calculates locomotive opacity correctly during fade out', () => {
     // Fade out range: 92-97%
     const { result: result1 } = renderHook(() =>
       useTrainTransforms({
@@ -189,9 +186,9 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 5,
         carSpacing: 7,
-      }),
-    );
-    expect(result1.current.locomotiveOpacity).toBe(1);
+      })
+    )
+    expect(result1.current.locomotiveOpacity).toBe(1)
 
     const { result: result2 } = renderHook(() =>
       useTrainTransforms({
@@ -200,9 +197,9 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 5,
         carSpacing: 7,
-      }),
-    );
-    expect(result2.current.locomotiveOpacity).toBe(0.5);
+      })
+    )
+    expect(result2.current.locomotiveOpacity).toBe(0.5)
 
     const { result: result3 } = renderHook(() =>
       useTrainTransforms({
@@ -211,12 +208,12 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 5,
         carSpacing: 7,
-      }),
-    );
-    expect(result3.current.locomotiveOpacity).toBe(0);
-  });
+      })
+    )
+    expect(result3.current.locomotiveOpacity).toBe(0)
+  })
 
-  test("locomotive is fully visible in middle of track", () => {
+  test('locomotive is fully visible in middle of track', () => {
     const { result } = renderHook(() =>
       useTrainTransforms({
         trainPosition: 50,
@@ -224,13 +221,13 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 5,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
-    expect(result.current.locomotiveOpacity).toBe(1);
-  });
+    expect(result.current.locomotiveOpacity).toBe(1)
+  })
 
-  test("calculates car opacity independently for each car", () => {
+  test('calculates car opacity independently for each car', () => {
     const { result } = renderHook(() =>
       useTrainTransforms({
         trainPosition: 10, // Locomotive at 10%, first car at 3% (fading in)
@@ -238,19 +235,19 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 2,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
     // First car at position 3 should be starting to fade in
-    expect(result.current.trainCars[0].position).toBe(3);
-    expect(result.current.trainCars[0].opacity).toBe(0);
+    expect(result.current.trainCars[0].position).toBe(3)
+    expect(result.current.trainCars[0].opacity).toBe(0)
 
     // Second car at position -4 should be invisible (not yet entered)
-    expect(result.current.trainCars[1].position).toBe(0); // clamped to 0
-    expect(result.current.trainCars[1].opacity).toBe(0);
-  });
+    expect(result.current.trainCars[1].position).toBe(0) // clamped to 0
+    expect(result.current.trainCars[1].opacity).toBe(0)
+  })
 
-  test("car positions cannot go below zero", () => {
+  test('car positions cannot go below zero', () => {
     const { result } = renderHook(() =>
       useTrainTransforms({
         trainPosition: 5,
@@ -258,16 +255,16 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 3,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
     // First car at 5 - 7 = -2, should be clamped to 0
-    expect(result.current.trainCars[0].position).toBe(0);
+    expect(result.current.trainCars[0].position).toBe(0)
     // Second car at 5 - 14 = -9, should be clamped to 0
-    expect(result.current.trainCars[1].position).toBe(0);
-  });
+    expect(result.current.trainCars[1].position).toBe(0)
+  })
 
-  test("cars fade out completely past 97%", () => {
+  test('cars fade out completely past 97%', () => {
     const { result } = renderHook(() =>
       useTrainTransforms({
         trainPosition: 104, // Last car at 104 - 35 = 69% (5 cars * 7 spacing)
@@ -275,15 +272,15 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 5,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
-    const lastCar = result.current.trainCars[4];
-    expect(lastCar.position).toBe(69);
-    expect(lastCar.opacity).toBe(1); // Still visible, not past 97%
-  });
+    const lastCar = result.current.trainCars[4]
+    expect(lastCar.position).toBe(69)
+    expect(lastCar.opacity).toBe(1) // Still visible, not past 97%
+  })
 
-  test("memoizes car transforms to avoid recalculation on same inputs", () => {
+  test('memoizes car transforms to avoid recalculation on same inputs', () => {
     const { result, rerender } = renderHook(() =>
       useTrainTransforms({
         trainPosition: 50,
@@ -291,15 +288,15 @@ describe("useTrainTransforms", () => {
         pathRef: mockPathRef,
         maxCars: 5,
         carSpacing: 7,
-      }),
-    );
+      })
+    )
 
-    const firstCars = result.current.trainCars;
+    const firstCars = result.current.trainCars
 
     // Rerender with same props
-    rerender();
+    rerender()
 
     // Should be the exact same array reference (memoized)
-    expect(result.current.trainCars).toBe(firstCars);
-  });
-});
+    expect(result.current.trainCars).toBe(firstCars)
+  })
+})
diff --git a/apps/web/src/app/arcade/complement-race/hooks/useAIRacers.ts b/apps/web/src/app/arcade/complement-race/hooks/useAIRacers.ts
index cca4af94..4a821ad5 100644
--- a/apps/web/src/app/arcade/complement-race/hooks/useAIRacers.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/useAIRacers.ts
@@ -1,126 +1,114 @@
-import { useEffect } from "react";
-import {
-  type CommentaryContext,
-  getAICommentary,
-} from "../components/AISystem/aiCommentary";
-import { useComplementRace } from "@/arcade-games/complement-race/Provider";
-import { useSoundEffects } from "./useSoundEffects";
+import { useEffect } from 'react'
+import { type CommentaryContext, getAICommentary } from '../components/AISystem/aiCommentary'
+import { useComplementRace } from '@/arcade-games/complement-race/Provider'
+import { useSoundEffects } from './useSoundEffects'
 
 export function useAIRacers() {
-  const { state, dispatch } = useComplementRace();
-  const { playSound } = useSoundEffects();
+  const { state, dispatch } = useComplementRace()
+  const { playSound } = useSoundEffects()
 
   useEffect(() => {
-    if (!state.isGameActive) return;
+    if (!state.isGameActive) return
 
     // Update AI positions every 200ms (line 11690)
     const aiUpdateInterval = setInterval(() => {
       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;
+        const variance = Math.random() * 0.8 + 0.6
+        let speed = racer.speed * variance * state.speedMultiplier
 
         // Rubber-banding: AI speeds up 2x when >10 units behind player (line 11697-11699)
-        const distanceBehind = state.correctAnswers - racer.position;
+        const distanceBehind = state.correctAnswers - racer.position
         if (distanceBehind > 10) {
-          speed *= 2;
+          speed *= 2
         }
 
         // Update position
-        const newPosition = racer.position + speed;
+        const newPosition = racer.position + speed
 
         return {
           id: racer.id,
           position: newPosition,
-        };
-      });
+        }
+      })
 
-      dispatch({ type: "UPDATE_AI_POSITIONS", positions: newPositions });
+      dispatch({ type: 'UPDATE_AI_POSITIONS', positions: newPositions })
 
       // Check for AI win in practice mode (line 14151)
-      if (state.style === "practice" && state.isGameActive) {
+      if (state.style === 'practice' && state.isGameActive) {
         const winningAI = state.aiRacers.find((racer, index) => {
-          const updatedPosition =
-            newPositions[index]?.position || racer.position;
-          return updatedPosition >= state.raceGoal;
-        });
+          const updatedPosition = newPositions[index]?.position || racer.position
+          return updatedPosition >= state.raceGoal
+        })
 
         if (winningAI) {
           // Play game over sound (line 14193)
-          playSound("gameOver");
+          playSound('gameOver')
           // End the game
-          dispatch({ type: "END_RACE" });
+          dispatch({ type: 'END_RACE' })
           // Show results after a short delay
           setTimeout(() => {
-            dispatch({ type: "SHOW_RESULTS" });
-          }, 1500);
-          return; // Exit early to prevent further updates
+            dispatch({ type: 'SHOW_RESULTS' })
+          }, 1500)
+          return // Exit early to prevent further updates
         }
       }
 
       // Check for commentary triggers after position updates
       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;
+          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;
+          racer.previousPosition > state.correctAnswers && updatedPosition < state.correctAnswers
         const aiJustPassed =
-          racer.previousPosition < state.correctAnswers &&
-          updatedPosition > state.correctAnswers;
+          racer.previousPosition < state.correctAnswers && updatedPosition > state.correctAnswers
 
         // Determine commentary context
-        let context: CommentaryContext | null = null;
+        let context: CommentaryContext | null = null
 
         if (playerJustPassed) {
-          context = "player_passed";
+          context = 'player_passed'
         } else if (aiJustPassed) {
-          context = "ai_passed";
+          context = 'ai_passed'
         } else if (distanceBehind > 20) {
           // Player has lapped the AI (more than 20 units behind)
-          context = "lapped";
+          context = 'lapped'
         } else if (distanceBehind > 10) {
           // AI is desperate to catch up (rubber-banding active)
-          context = "desperate_catchup";
+          context = 'desperate_catchup'
         } else if (distanceAhead > 5) {
           // AI is significantly ahead
-          context = "ahead";
+          context = 'ahead'
         } else if (distanceBehind > 3) {
           // AI is behind
-          context = "behind";
+          context = 'behind'
         }
 
         // Trigger commentary if context is valid
         if (context) {
-          const message = getAICommentary(
-            racer,
-            context,
-            state.correctAnswers,
-            updatedPosition,
-          );
+          const message = getAICommentary(racer, context, state.correctAnswers, updatedPosition)
           if (message) {
             dispatch({
-              type: "TRIGGER_AI_COMMENTARY",
+              type: 'TRIGGER_AI_COMMENTARY',
               racerId: racer.id,
               message,
               context,
-            });
+            })
 
             // Play special turbo sound when AI goes desperate (line 11941)
-            if (context === "desperate_catchup") {
-              playSound("ai_turbo", 0.12);
+            if (context === 'desperate_catchup') {
+              playSound('ai_turbo', 0.12)
             }
           }
         }
-      });
-    }, 200);
+      })
+    }, 200)
 
-    return () => clearInterval(aiUpdateInterval);
+    return () => clearInterval(aiUpdateInterval)
   }, [
     state.isGameActive,
     state.aiRacers,
@@ -130,9 +118,9 @@ export function useAIRacers() {
     playSound,
     state.raceGoal,
     state.style,
-  ]);
+  ])
 
   return {
     aiRacers: state.aiRacers,
-  };
+  }
 }
diff --git a/apps/web/src/app/arcade/complement-race/hooks/useAdaptiveDifficulty.ts b/apps/web/src/app/arcade/complement-race/hooks/useAdaptiveDifficulty.ts
index aabf6348..64fda521 100644
--- a/apps/web/src/app/arcade/complement-race/hooks/useAdaptiveDifficulty.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/useAdaptiveDifficulty.ts
@@ -1,314 +1,297 @@
-import { useComplementRace } from "@/arcade-games/complement-race/Provider";
-import type { PairPerformance } from "../lib/gameTypes";
+import { useComplementRace } from '@/arcade-games/complement-race/Provider'
+import type { PairPerformance } from '../lib/gameTypes'
 
 export function useAdaptiveDifficulty() {
-  const { state, dispatch } = useComplementRace();
+  const { state, dispatch } = useComplementRace()
 
   // Track performance after each answer (lines 14495-14553)
   const trackPerformance = (isCorrect: boolean, responseTime: number) => {
-    if (!state.currentQuestion) return;
+    if (!state.currentQuestion) return
 
-    const pairKey = `${state.currentQuestion.number}_${state.currentQuestion.correctAnswer}_${state.currentQuestion.targetSum}`;
+    const pairKey = `${state.currentQuestion.number}_${state.currentQuestion.correctAnswer}_${state.currentQuestion.targetSum}`
 
     // Get or create performance data for this pair
-    const pairData: PairPerformance =
-      state.difficultyTracker.pairPerformance.get(pairKey) || {
-        attempts: 0,
-        correct: 0,
-        avgTime: 0,
-        difficulty: 1,
-      };
+    const pairData: PairPerformance = state.difficultyTracker.pairPerformance.get(pairKey) || {
+      attempts: 0,
+      correct: 0,
+      avgTime: 0,
+      difficulty: 1,
+    }
 
     // Update performance data
-    pairData.attempts++;
+    pairData.attempts++
     if (isCorrect) {
-      pairData.correct++;
+      pairData.correct++
     }
 
     // Update average time (rolling average)
-    const totalTime = pairData.avgTime * (pairData.attempts - 1) + responseTime;
-    pairData.avgTime = totalTime / pairData.attempts;
+    const totalTime = pairData.avgTime * (pairData.attempts - 1) + responseTime
+    pairData.avgTime = totalTime / pairData.attempts
 
     // Calculate pair-specific difficulty (lines 14555-14576)
     if (pairData.attempts >= 2) {
-      const accuracyRate = pairData.correct / pairData.attempts;
-      const avgTime = pairData.avgTime;
+      const accuracyRate = pairData.correct / pairData.attempts
+      const avgTime = pairData.avgTime
 
-      let difficulty = 1;
+      let difficulty = 1
       if (accuracyRate >= 0.9 && avgTime < 1500) {
-        difficulty = 1; // Very easy
+        difficulty = 1 // Very easy
       } else if (accuracyRate >= 0.8 && avgTime < 2000) {
-        difficulty = 2; // Easy
+        difficulty = 2 // Easy
       } else if (accuracyRate >= 0.7 || avgTime < 2500) {
-        difficulty = 3; // Medium
+        difficulty = 3 // Medium
       } else if (accuracyRate >= 0.5 || avgTime < 3500) {
-        difficulty = 4; // Hard
+        difficulty = 4 // Hard
       } else {
-        difficulty = 5; // Very hard
+        difficulty = 5 // Very hard
       }
 
-      pairData.difficulty = difficulty;
+      pairData.difficulty = difficulty
     }
 
     // Update difficulty tracker in state
-    const newPairPerformance = new Map(state.difficultyTracker.pairPerformance);
-    newPairPerformance.set(pairKey, pairData);
+    const newPairPerformance = new Map(state.difficultyTracker.pairPerformance)
+    newPairPerformance.set(pairKey, pairData)
 
     // Update consecutive counters
     const newTracker = {
       ...state.difficultyTracker,
       pairPerformance: newPairPerformance,
-      consecutiveCorrect: isCorrect
-        ? state.difficultyTracker.consecutiveCorrect + 1
-        : 0,
-      consecutiveIncorrect: !isCorrect
-        ? state.difficultyTracker.consecutiveIncorrect + 1
-        : 0,
-    };
+      consecutiveCorrect: isCorrect ? state.difficultyTracker.consecutiveCorrect + 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 - 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 + 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);
+        0
+      ) / Math.max(1, newTracker.pairPerformance.size)
 
-    newTracker.difficultyLevel = Math.round(avgDifficulty);
+    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,
-      )
+      Array.from(newTracker.pairPerformance.values()).some((data) => data.attempts >= 3)
     ) {
-      newTracker.learningMode = false;
+      newTracker.learningMode = false
     }
 
     // Dispatch update
-    dispatch({ type: "UPDATE_DIFFICULTY_TRACKER", tracker: newTracker });
+    dispatch({ type: 'UPDATE_DIFFICULTY_TRACKER', tracker: newTracker })
 
     // Adapt AI speeds based on player performance
-    adaptAISpeeds(newTracker);
-  };
+    adaptAISpeeds(newTracker)
+  }
 
   // Calculate recent success rate (lines 14685-14693)
   const calculateRecentSuccessRate = (): number => {
-    const recentQuestions = Math.min(10, state.totalQuestions);
-    if (recentQuestions === 0) return 0.5; // Default for first question
+    const recentQuestions = Math.min(10, state.totalQuestions)
+    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),
-    );
-    return recentCorrect / recentQuestions;
-  };
+      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(),
-    )
+    const recentPairs = Array.from(state.difficultyTracker.pairPerformance.values())
       .filter((data) => data.attempts >= 1)
-      .slice(-5); // Last 5 different pairs encountered
+      .slice(-5) // Last 5 different pairs encountered
 
-    if (recentPairs.length === 0) return 3000; // Default for learning mode
+    if (recentPairs.length === 0) return 3000 // Default for learning mode
 
-    const totalTime = recentPairs.reduce((sum, data) => sum + data.avgTime, 0);
-    return totalTime / recentPairs.length;
-  };
+    const totalTime = recentPairs.reduce((sum, data) => sum + data.avgTime, 0)
+    return totalTime / recentPairs.length
+  }
 
   // Adapt AI speeds based on performance (lines 14607-14683)
   const adaptAISpeeds = (tracker: typeof state.difficultyTracker) => {
     // Don't adapt during learning mode
-    if (tracker.learningMode) return;
+    if (tracker.learningMode) return
 
-    const playerSuccessRate = calculateRecentSuccessRate();
-    const avgResponseTime = calculateAverageResponseTime();
+    const playerSuccessRate = calculateRecentSuccessRate()
+    const avgResponseTime = calculateAverageResponseTime()
 
     // Base speed multipliers for each race mode
-    let baseSpeedMultiplier: number;
+    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;
+      case 'practice':
+        baseSpeedMultiplier = 0.7
+        break
+      case 'sprint':
+        baseSpeedMultiplier = 0.9
+        break
+      case 'survival':
+        baseSpeedMultiplier = state.speedMultiplier * state.survivalMultiplier
+        break
       default:
-        baseSpeedMultiplier = 0.7;
+        baseSpeedMultiplier = 0.7
     }
 
     // Calculate adaptive multiplier based on player performance
-    let adaptiveMultiplier = 1.0;
+    let adaptiveMultiplier = 1.0
 
     // Success rate factor (0.5x to 1.6x based on success rate)
     if (playerSuccessRate > 0.85) {
-      adaptiveMultiplier *= 1.6; // Player doing great - speed up AI significantly
+      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
+      adaptiveMultiplier *= 1.3 // Player doing well - speed up AI moderately
     } else if (playerSuccessRate > 0.6) {
-      adaptiveMultiplier *= 1.0; // Player doing okay - keep AI at base speed
+      adaptiveMultiplier *= 1.0 // Player doing okay - keep AI at base speed
     } else if (playerSuccessRate > 0.45) {
-      adaptiveMultiplier *= 0.75; // Player struggling - slow down AI
+      adaptiveMultiplier *= 0.75 // Player struggling - slow down AI
     } else {
-      adaptiveMultiplier *= 0.5; // Player really struggling - significantly slow AI
+      adaptiveMultiplier *= 0.5 // Player really struggling - significantly slow AI
     }
 
     // Response time factor - faster players get faster AI
     if (avgResponseTime < 1500) {
-      adaptiveMultiplier *= 1.2; // Very fast player
+      adaptiveMultiplier *= 1.2 // Very fast player
     } else if (avgResponseTime < 2500) {
-      adaptiveMultiplier *= 1.1; // Fast player
+      adaptiveMultiplier *= 1.1 // Fast player
     } else if (avgResponseTime > 4000) {
-      adaptiveMultiplier *= 0.9; // Slow player
+      adaptiveMultiplier *= 0.9 // Slow player
     }
 
     // Streak bonus - players on hot streaks get more challenge
     if (state.streak >= 8) {
-      adaptiveMultiplier *= 1.3;
+      adaptiveMultiplier *= 1.3
     } else if (state.streak >= 5) {
-      adaptiveMultiplier *= 1.15;
+      adaptiveMultiplier *= 1.15
     }
 
     // Apply bounds to prevent extreme values
-    adaptiveMultiplier = Math.max(0.3, Math.min(2.0, adaptiveMultiplier));
+    adaptiveMultiplier = Math.max(0.3, Math.min(2.0, adaptiveMultiplier))
 
     // Update AI speeds with adaptive multiplier
-    const finalSpeedMultiplier = baseSpeedMultiplier * adaptiveMultiplier;
+    const finalSpeedMultiplier = baseSpeedMultiplier * adaptiveMultiplier
 
     // Update AI racer speeds
     const updatedRacers = state.aiRacers.map((racer, index) => {
       if (index === 0) {
         // Swift AI (more aggressive)
-        return { ...racer, speed: 0.32 * finalSpeedMultiplier };
+        return { ...racer, speed: 0.32 * finalSpeedMultiplier }
       } else {
         // Math Bot (more consistent)
-        return { ...racer, speed: 0.2 * finalSpeedMultiplier };
+        return { ...racer, speed: 0.2 * finalSpeedMultiplier }
       }
-    });
+    })
 
-    dispatch({ type: "UPDATE_AI_SPEEDS", racers: updatedRacers });
+    dispatch({ type: 'UPDATE_AI_SPEEDS', racers: updatedRacers })
 
     // Debug logging for AI adaptation (every 5 questions)
     if (state.totalQuestions % 5 === 0) {
-      console.log("🤖 AI Speed Adaptation:", {
+      console.log('🤖 AI Speed Adaptation:', {
         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,
-      });
+        swiftAISpeed: updatedRacers[0] ? Math.round(updatedRacers[0].speed * 1000) / 1000 : 0,
+        mathBotSpeed: updatedRacers[1] ? Math.round(updatedRacers[1].speed * 1000) / 1000 : 0,
+      })
     }
-  };
+  }
 
   // Get adaptive time limit for current question (lines 14740-14763)
   const getAdaptiveTimeLimit = (): number => {
-    if (!state.currentQuestion) return 3000;
+    if (!state.currentQuestion) return 3000
 
-    let adaptiveTime: number;
+    let adaptiveTime: number
 
     if (state.difficultyTracker.learningMode) {
-      adaptiveTime = Math.max(2000, state.difficultyTracker.currentTimeLimit);
+      adaptiveTime = Math.max(2000, state.difficultyTracker.currentTimeLimit)
     } else {
-      const pairKey = `${state.currentQuestion.number}_${state.currentQuestion.correctAnswer}_${state.currentQuestion.targetSum}`;
-      const pairData = state.difficultyTracker.pairPerformance.get(pairKey);
+      const pairKey = `${state.currentQuestion.number}_${state.currentQuestion.correctAnswer}_${state.currentQuestion.targetSum}`
+      const pairData = state.difficultyTracker.pairPerformance.get(pairKey)
 
       if (pairData && pairData.attempts >= 2) {
         // Use pair-specific difficulty
-        const baseTime = state.difficultyTracker.baseTimeLimit;
-        const difficultyMultiplier = (6 - pairData.difficulty) / 5; // Invert: difficulty 1 = more time
-        adaptiveTime = Math.max(1000, baseTime * difficultyMultiplier);
+        const baseTime = state.difficultyTracker.baseTimeLimit
+        const difficultyMultiplier = (6 - pairData.difficulty) / 5 // Invert: difficulty 1 = more time
+        adaptiveTime = Math.max(1000, baseTime * difficultyMultiplier)
       } else {
         // Default for new pairs
-        adaptiveTime = state.difficultyTracker.currentTimeLimit;
+        adaptiveTime = state.difficultyTracker.currentTimeLimit
       }
     }
 
     // Apply user timeout setting override (lines 14765-14785)
-    return applyTimeoutSetting(adaptiveTime);
-  };
+    return applyTimeoutSetting(adaptiveTime)
+  }
 
   // Apply timeout setting multiplier (lines 14765-14785)
   const applyTimeoutSetting = (baseTime: number): number => {
     switch (state.timeoutSetting) {
-      case "preschool":
-        return Math.max(baseTime * 4, 20000); // At least 20 seconds
-      case "kindergarten":
-        return Math.max(baseTime * 3, 15000); // At least 15 seconds
-      case "relaxed":
-        return Math.max(baseTime * 2.4, 12000); // At least 12 seconds
-      case "slow":
-        return Math.max(baseTime * 1.6, 8000); // At least 8 seconds
-      case "normal":
-        return Math.max(baseTime, 5000); // At least 5 seconds
-      case "fast":
-        return Math.max(baseTime * 0.6, 3000); // At least 3 seconds
-      case "expert":
-        return Math.max(baseTime * 0.4, 2000); // At least 2 seconds
+      case 'preschool':
+        return Math.max(baseTime * 4, 20000) // At least 20 seconds
+      case 'kindergarten':
+        return Math.max(baseTime * 3, 15000) // At least 15 seconds
+      case 'relaxed':
+        return Math.max(baseTime * 2.4, 12000) // At least 12 seconds
+      case 'slow':
+        return Math.max(baseTime * 1.6, 8000) // At least 8 seconds
+      case 'normal':
+        return Math.max(baseTime, 5000) // At least 5 seconds
+      case 'fast':
+        return Math.max(baseTime * 0.6, 3000) // At least 3 seconds
+      case 'expert':
+        return Math.max(baseTime * 0.4, 2000) // At least 2 seconds
       default:
-        return baseTime;
+        return baseTime
     }
-  };
+  }
 
   // Get adaptive feedback message (lines 11655-11721)
   const getAdaptiveFeedbackMessage = (
     pairKey: string,
     _isCorrect: boolean,
-    _responseTime: number,
+    _responseTime: number
   ): {
-    message: string;
-    type: "learning" | "struggling" | "mastered" | "adapted";
+    message: string
+    type: 'learning' | 'struggling' | 'mastered' | 'adapted'
   } | null => {
-    const pairData = state.difficultyTracker.pairPerformance.get(pairKey);
-    const [num1, num2, _sum] = pairKey.split("_").map(Number);
+    const pairData = state.difficultyTracker.pairPerformance.get(pairKey)
+    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",
-      };
+        message: encouragements[Math.floor(Math.random() * encouragements.length)],
+        type: 'learning',
+      }
     }
 
     // After learning - provide specific feedback
     if (pairData && pairData.attempts >= 3) {
-      const accuracy = pairData.correct / pairData.attempts;
-      const avgTime = pairData.avgTime;
+      const accuracy = pairData.correct / pairData.attempts
+      const avgTime = pairData.avgTime
 
       // Struggling pairs (< 60% accuracy)
       if (accuracy < 0.6) {
@@ -317,14 +300,11 @@ export function useAdaptiveDifficulty() {
           `🎯 Working on ${num1}+${num2} - you've got this!`,
           `⏰ Taking it slower with ${num1}+${num2} - no rush!`,
           `🧩 ${num1}+${num2} is getting special attention from me!`,
-        ];
+        ]
         return {
-          message:
-            strugglingMessages[
-              Math.floor(Math.random() * strugglingMessages.length)
-            ],
-          type: "struggling",
-        };
+          message: strugglingMessages[Math.floor(Math.random() * strugglingMessages.length)],
+          type: 'struggling',
+        }
       }
 
       // Mastered pairs (> 85% accuracy and fast)
@@ -334,14 +314,11 @@ export function useAdaptiveDifficulty() {
           `🔥 You've conquered ${num1}+${num2} - speeding it up!`,
           `🏆 ${num1}+${num2} expert detected! Challenge mode ON!`,
           `⭐ ${num1}+${num2} is your superpower! Going faster!`,
-        ];
+        ]
         return {
-          message:
-            masteredMessages[
-              Math.floor(Math.random() * masteredMessages.length)
-            ],
-          type: "mastered",
-        };
+          message: masteredMessages[Math.floor(Math.random() * masteredMessages.length)],
+          type: 'mastered',
+        }
       }
     }
 
@@ -349,17 +326,17 @@ 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',
+      }
     }
 
-    return null;
-  };
+    return null
+  }
 
   return {
     trackPerformance,
@@ -367,5 +344,5 @@ export function useAdaptiveDifficulty() {
     calculateRecentSuccessRate,
     calculateAverageResponseTime,
     getAdaptiveFeedbackMessage,
-  };
+  }
 }
diff --git a/apps/web/src/app/arcade/complement-race/hooks/useGameLoop.ts b/apps/web/src/app/arcade/complement-race/hooks/useGameLoop.ts
index a6cff2b9..43a8cade 100644
--- a/apps/web/src/app/arcade/complement-race/hooks/useGameLoop.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/useGameLoop.ts
@@ -1,69 +1,69 @@
-import { useCallback, useEffect } from "react";
-import { useComplementRace } from "@/arcade-games/complement-race/Provider";
+import { useCallback, useEffect } from 'react'
+import { useComplementRace } from '@/arcade-games/complement-race/Provider'
 
 export function useGameLoop() {
-  const { state, dispatch } = useComplementRace();
+  const { state, dispatch } = useComplementRace()
 
   // Generate first question when game begins
   useEffect(() => {
-    if (state.gamePhase === "playing" && !state.currentQuestion) {
-      dispatch({ type: "NEXT_QUESTION" });
+    if (state.gamePhase === 'playing' && !state.currentQuestion) {
+      dispatch({ type: 'NEXT_QUESTION' })
     }
-  }, [state.gamePhase, state.currentQuestion, dispatch]);
+  }, [state.gamePhase, state.currentQuestion, dispatch])
 
   const nextQuestion = useCallback(() => {
-    if (!state.isGameActive) return;
-    dispatch({ type: "NEXT_QUESTION" });
-  }, [state.isGameActive, dispatch]);
+    if (!state.isGameActive) return
+    dispatch({ type: 'NEXT_QUESTION' })
+  }, [state.isGameActive, dispatch])
 
   const submitAnswer = useCallback(
     (answer: number) => {
-      if (!state.currentQuestion) return;
+      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 });
+        dispatch({ type: 'SUBMIT_ANSWER', answer })
 
         // Move to next question
-        dispatch({ type: "NEXT_QUESTION" });
+        dispatch({ type: 'NEXT_QUESTION' })
       } else {
         // Reset streak
         // TODO: Will implement incorrect answer handling
-        dispatch({ type: "SUBMIT_ANSWER", answer });
+        dispatch({ type: 'SUBMIT_ANSWER', answer })
       }
     },
-    [state.currentQuestion, dispatch],
-  );
+    [state.currentQuestion, dispatch]
+  )
 
   const startCountdown = useCallback(() => {
     // Trigger countdown phase
-    dispatch({ type: "START_COUNTDOWN" });
+    dispatch({ type: 'START_COUNTDOWN' })
 
     // Start 3-2-1-GO countdown (lines 11163-11211)
-    let count = 3;
+    let count = 3
     const countdownInterval = setInterval(() => {
       if (count > 0) {
         // TODO: Play countdown sound
-        count--;
+        count--
       } else {
         // GO!
         // TODO: Play start sound
-        clearInterval(countdownInterval);
+        clearInterval(countdownInterval)
 
         // Start the actual game after GO animation (1 second delay)
         setTimeout(() => {
-          dispatch({ type: "BEGIN_GAME" });
-        }, 1000);
+          dispatch({ type: 'BEGIN_GAME' })
+        }, 1000)
       }
-    }, 1000);
-  }, [dispatch]);
+    }, 1000)
+  }, [dispatch])
 
   return {
     nextQuestion,
     submitAnswer,
     startCountdown,
-  };
+  }
 }
diff --git a/apps/web/src/app/arcade/complement-race/hooks/usePassengerAnimations.ts b/apps/web/src/app/arcade/complement-race/hooks/usePassengerAnimations.ts
index 2bc69f0a..d49b8a0d 100644
--- a/apps/web/src/app/arcade/complement-race/hooks/usePassengerAnimations.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/usePassengerAnimations.ts
@@ -1,33 +1,33 @@
-import { useEffect, useRef, useState } from "react";
-import type { Passenger, Station } from "../lib/gameTypes";
-import type { RailroadTrackGenerator } from "../lib/RailroadTrackGenerator";
+import { useEffect, useRef, useState } from 'react'
+import type { Passenger, Station } from '../lib/gameTypes'
+import type { RailroadTrackGenerator } from '../lib/RailroadTrackGenerator'
 
 export interface BoardingAnimation {
-  passenger: Passenger;
-  fromX: number;
-  fromY: number;
-  toX: number;
-  toY: number;
-  carIndex: number;
-  startTime: number;
+  passenger: Passenger
+  fromX: number
+  fromY: number
+  toX: number
+  toY: number
+  carIndex: number
+  startTime: number
 }
 
 export interface DisembarkingAnimation {
-  passenger: Passenger;
-  fromX: number;
-  fromY: number;
-  toX: number;
-  toY: number;
-  startTime: number;
+  passenger: Passenger
+  fromX: number
+  fromY: number
+  toX: number
+  toY: number
+  startTime: number
 }
 
 interface UsePassengerAnimationsParams {
-  passengers: Passenger[];
-  stations: Station[];
-  stationPositions: Array<{ x: number; y: number }>;
-  trainPosition: number;
-  trackGenerator: RailroadTrackGenerator;
-  pathRef: React.RefObject<SVGPathElement>;
+  passengers: Passenger[]
+  stations: Station[]
+  stationPositions: Array<{ x: number; y: number }>
+  trainPosition: number
+  trackGenerator: RailroadTrackGenerator
+  pathRef: React.RefObject<SVGPathElement>
 }
 
 export function usePassengerAnimations({
@@ -38,57 +38,50 @@ export function usePassengerAnimations({
   trackGenerator,
   pathRef,
 }: UsePassengerAnimationsParams) {
-  const [boardingAnimations, setBoardingAnimations] = useState<
-    Map<string, BoardingAnimation>
-  >(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);
+  >(new Map())
+  const previousPassengersRef = useRef<Passenger[]>(passengers)
 
   // Detect passengers boarding/disembarking and start animations
   useEffect(() => {
-    if (!pathRef.current || stationPositions.length === 0) return;
+    if (!pathRef.current || stationPositions.length === 0) return
 
-    const previousPassengers = previousPassengersRef.current;
-    const currentPassengers = passengers;
+    const previousPassengers = previousPassengersRef.current
+    const currentPassengers = passengers
 
     // Find newly boarded passengers
     const newlyBoarded = currentPassengers.filter((curr) => {
-      const prev = previousPassengers.find((p) => p.id === curr.id);
-      return curr.isBoarded && prev && !prev.isBoarded;
-    });
+      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);
-      return curr.isDelivered && prev && !prev.isDelivered;
-    });
+      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) => {
       // Find origin station
-      const originStation = stations.find(
-        (s) => s.id === passenger.originStationId,
-      );
-      if (!originStation) return;
+      const originStation = stations.find((s) => s.id === passenger.originStationId)
+      if (!originStation) return
 
-      const stationIndex = stations.indexOf(originStation);
-      const stationPos = stationPositions[stationIndex];
-      if (!stationPos) return;
+      const stationIndex = stations.indexOf(originStation)
+      const stationPos = stationPositions[stationIndex]
+      if (!stationPos) return
 
       // Find which car this passenger will be in
-      const boardedPassengers = currentPassengers.filter(
-        (p) => p.isBoarded && !p.isDelivered,
-      );
-      const carIndex = boardedPassengers.indexOf(passenger);
+      const boardedPassengers = currentPassengers.filter((p) => p.isBoarded && !p.isDelivered)
+      const carIndex = boardedPassengers.indexOf(passenger)
 
       // Calculate train car position
-      const carPosition = Math.max(0, trainPosition - (carIndex + 1) * 7); // 7% spacing
-      const carTransform = trackGenerator.getTrainTransform(
-        pathRef.current!,
-        carPosition,
-      );
+      const carPosition = Math.max(0, trainPosition - (carIndex + 1) * 7) // 7% spacing
+      const carTransform = trackGenerator.getTrainTransform(pathRef.current!, carPosition)
 
       // Create boarding animation
       const animation: BoardingAnimation = {
@@ -99,51 +92,42 @@ export function usePassengerAnimations({
         toY: carTransform.y,
         carIndex,
         startTime: Date.now(),
-      };
+      }
 
       setBoardingAnimations((prev) => {
-        const next = new Map(prev);
-        next.set(passenger.id, animation);
-        return next;
-      });
+        const next = new Map(prev)
+        next.set(passenger.id, animation)
+        return next
+      })
 
       // Remove animation after 800ms
       setTimeout(() => {
         setBoardingAnimations((prev) => {
-          const next = new Map(prev);
-          next.delete(passenger.id);
-          return next;
-        });
-      }, 800);
-    });
+          const next = new Map(prev)
+          next.delete(passenger.id)
+          return next
+        })
+      }, 800)
+    })
 
     // Start animation for each newly delivered passenger
     newlyDelivered.forEach((passenger) => {
       // Find destination station
-      const destinationStation = stations.find(
-        (s) => s.id === passenger.destinationStationId,
-      );
-      if (!destinationStation) return;
+      const destinationStation = stations.find((s) => s.id === passenger.destinationStationId)
+      if (!destinationStation) return
 
-      const stationIndex = stations.indexOf(destinationStation);
-      const stationPos = stationPositions[stationIndex];
-      if (!stationPos) return;
+      const stationIndex = stations.indexOf(destinationStation)
+      const stationPos = stationPositions[stationIndex]
+      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,
-      );
-      if (carIndex === -1) return;
+      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
-      const carPosition = Math.max(0, trainPosition - (carIndex + 1) * 7); // 7% spacing
-      const carTransform = trackGenerator.getTrainTransform(
-        pathRef.current!,
-        carPosition,
-      );
+      const carPosition = Math.max(0, trainPosition - (carIndex + 1) * 7) // 7% spacing
+      const carTransform = trackGenerator.getTrainTransform(pathRef.current!, carPosition)
 
       // Create disembarking animation (from car to station)
       const animation: DisembarkingAnimation = {
@@ -153,37 +137,30 @@ export function usePassengerAnimations({
         toX: stationPos.x,
         toY: stationPos.y - 30,
         startTime: Date.now(),
-      };
+      }
 
       setDisembarkingAnimations((prev) => {
-        const next = new Map(prev);
-        next.set(passenger.id, animation);
-        return next;
-      });
+        const next = new Map(prev)
+        next.set(passenger.id, animation)
+        return next
+      })
 
       // Remove animation after 800ms
       setTimeout(() => {
         setDisembarkingAnimations((prev) => {
-          const next = new Map(prev);
-          next.delete(passenger.id);
-          return next;
-        });
-      }, 800);
-    });
+          const next = new Map(prev)
+          next.delete(passenger.id)
+          return next
+        })
+      }, 800)
+    })
 
     // Update ref
-    previousPassengersRef.current = currentPassengers;
-  }, [
-    passengers,
-    stations,
-    stationPositions,
-    trainPosition,
-    trackGenerator,
-    pathRef,
-  ]);
+    previousPassengersRef.current = currentPassengers
+  }, [passengers, stations, stationPositions, trainPosition, trackGenerator, pathRef])
 
   return {
     boardingAnimations,
     disembarkingAnimations,
-  };
+  }
 }
diff --git a/apps/web/src/app/arcade/complement-race/hooks/useSoundEffects.ts b/apps/web/src/app/arcade/complement-race/hooks/useSoundEffects.ts
index ae429e9b..3ccf7cc6 100644
--- a/apps/web/src/app/arcade/complement-race/hooks/useSoundEffects.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/useSoundEffects.ts
@@ -1,5 +1,5 @@
-import { useCallback, useContext, useRef } from "react";
-import { PreviewModeContext } from "@/components/GamePreview";
+import { useCallback, useContext, useRef } from 'react'
+import { PreviewModeContext } from '@/components/GamePreview'
 
 /**
  * Web Audio API sound effects system
@@ -9,14 +9,14 @@ import { PreviewModeContext } from "@/components/GamePreview";
  */
 
 interface Note {
-  freq: number;
-  time: number;
-  duration: number;
+  freq: number
+  time: number
+  duration: number
 }
 
 export function useSoundEffects() {
-  const audioContextsRef = useRef<AudioContext[]>([]);
-  const previewMode = useContext(PreviewModeContext);
+  const audioContextsRef = useRef<AudioContext[]>([])
+  const previewMode = useContext(PreviewModeContext)
 
   /**
    * Helper function to play multi-note 90s arcade sounds
@@ -26,67 +26,61 @@ export function useSoundEffects() {
       audioContext: AudioContext,
       notes: Note[],
       volume: number = 0.15,
-      waveType: OscillatorType = "sine",
+      waveType: OscillatorType = 'sine'
     ) => {
       notes.forEach((note) => {
-        const oscillator = audioContext.createOscillator();
-        const gainNode = audioContext.createGain();
-        const filterNode = audioContext.createBiquadFilter();
+        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);
+        oscillator.connect(filterNode)
+        filterNode.connect(gainNode)
+        gainNode.connect(audioContext.destination)
 
         // Set wave type for that retro flavor
-        oscillator.type = waveType;
+        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);
+        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") {
+        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,
-          );
+            audioContext.currentTime + note.time + note.duration * 0.5
+          )
           oscillator.frequency.exponentialRampToValueAtTime(
             note.freq,
-            audioContext.currentTime + note.time + note.duration,
-          );
+            audioContext.currentTime + note.time + note.duration
+          )
         }
 
         // Classic arcade envelope - quick attack, moderate decay
-        gainNode.gain.setValueAtTime(0, audioContext.currentTime + note.time);
+        gainNode.gain.setValueAtTime(0, audioContext.currentTime + note.time)
         gainNode.gain.exponentialRampToValueAtTime(
           volume,
-          audioContext.currentTime + note.time + 0.01,
-        );
+          audioContext.currentTime + note.time + 0.01
+        )
         gainNode.gain.exponentialRampToValueAtTime(
           volume * 0.7,
-          audioContext.currentTime + note.time + note.duration * 0.7,
-        );
+          audioContext.currentTime + note.time + note.duration * 0.7
+        )
         gainNode.gain.exponentialRampToValueAtTime(
           0.001,
-          audioContext.currentTime + note.time + note.duration,
-        );
+          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
@@ -96,39 +90,38 @@ export function useSoundEffects() {
   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,
+        | '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
     ) => {
       // Disable all audio in preview mode
       if (previewMode?.isPreview) {
-        return;
+        return
       }
 
       try {
-        const audioContext = new (window.AudioContext ||
-          (window as any).webkitAudioContext)();
+        const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
 
         // Track audio contexts for cleanup
-        audioContextsRef.current.push(audioContext);
+        audioContextsRef.current.push(audioContext)
 
         switch (type) {
-          case "correct":
+          case 'correct':
             // Classic 90s "power-up" sound - ascending beeps
             play90sSound(
               audioContext,
@@ -138,11 +131,11 @@ export function useSoundEffects() {
                 { freq: 784, time: 0.16, duration: 0.12 }, // G5
               ],
               volume,
-              "sawtooth",
-            );
-            break;
+              'sawtooth'
+            )
+            break
 
-          case "incorrect":
+          case 'incorrect':
             // Classic arcade "error" sound - descending buzz
             play90sSound(
               audioContext,
@@ -152,11 +145,11 @@ export function useSoundEffects() {
                 { freq: 200, time: 0.1, duration: 0.2 },
               ],
               volume * 0.8,
-              "square",
-            );
-            break;
+              'square'
+            )
+            break
 
-          case "timeout":
+          case 'timeout':
             // Classic "time's up" alarm
             play90sSound(
               audioContext,
@@ -167,21 +160,21 @@ export function useSoundEffects() {
                 { freq: 600, time: 0.3, duration: 0.15 },
               ],
               volume,
-              "square",
-            );
-            break;
+              'square'
+            )
+            break
 
-          case "countdown":
+          case 'countdown':
             // Classic arcade countdown beep
             play90sSound(
               audioContext,
               [{ freq: 800, time: 0, duration: 0.15 }],
               volume * 0.6,
-              "sine",
-            );
-            break;
+              'sine'
+            )
+            break
 
-          case "race_start":
+          case 'race_start':
             // Epic race start fanfare
             play90sSound(
               audioContext,
@@ -192,11 +185,11 @@ export function useSoundEffects() {
                 { freq: 1046, time: 0.3, duration: 0.3 }, // C6 - triumphant!
               ],
               volume * 1.2,
-              "sawtooth",
-            );
-            break;
+              'sawtooth'
+            )
+            break
 
-          case "celebration":
+          case 'celebration':
             // Classic victory fanfare - like completing a level
             play90sSound(
               audioContext,
@@ -208,11 +201,11 @@ export function useSoundEffects() {
                 { freq: 1318, time: 0.6, duration: 0.3 }, // E6 - epic finish!
               ],
               volume * 1.5,
-              "sawtooth",
-            );
-            break;
+              'sawtooth'
+            )
+            break
 
-          case "lap_celebration":
+          case 'lap_celebration':
             // Radical "bonus achieved" sound
             play90sSound(
               audioContext,
@@ -223,11 +216,11 @@ export function useSoundEffects() {
                 { freq: 2093, time: 0.24, duration: 0.15 }, // C7 - totally rad!
               ],
               volume * 1.3,
-              "sawtooth",
-            );
-            break;
+              'sawtooth'
+            )
+            break
 
-          case "gameOver":
+          case 'gameOver':
             // Classic "game over" descending tones
             play90sSound(
               audioContext,
@@ -239,11 +232,11 @@ export function useSoundEffects() {
                 { freq: 200, time: 0.9, duration: 0.4 },
               ],
               volume,
-              "triangle",
-            );
-            break;
+              'triangle'
+            )
+            break
 
-          case "ai_turbo":
+          case 'ai_turbo':
             // Sound when AI goes into turbo mode
             play90sSound(
               audioContext,
@@ -254,11 +247,11 @@ export function useSoundEffects() {
                 { freq: 800, time: 0.15, duration: 0.1 },
               ],
               volume * 0.7,
-              "sawtooth",
-            );
-            break;
+              'sawtooth'
+            )
+            break
 
-          case "milestone":
+          case 'milestone':
             // Rad milestone sound - like collecting a power-up
             play90sSound(
               audioContext,
@@ -269,11 +262,11 @@ export function useSoundEffects() {
                 { freq: 1046, time: 0.3, duration: 0.15 }, // C6 - awesome!
               ],
               volume * 1.1,
-              "sawtooth",
-            );
-            break;
+              'sawtooth'
+            )
+            break
 
-          case "streak":
+          case 'streak':
             // Epic streak sound - getting hot!
             play90sSound(
               audioContext,
@@ -284,11 +277,11 @@ export function useSoundEffects() {
                 { freq: 1760, time: 0.2, duration: 0.1 }, // A6 - on fire!
               ],
               volume * 1.2,
-              "sawtooth",
-            );
-            break;
+              'sawtooth'
+            )
+            break
 
-          case "combo":
+          case 'combo':
             // Gnarly combo sound - for rapid correct answers
             play90sSound(
               audioContext,
@@ -299,97 +292,73 @@ export function useSoundEffects() {
                 { freq: 1480, time: 0.12, duration: 0.06 }, // F#6
               ],
               volume * 0.9,
-              "square",
-            );
-            break;
+              'square'
+            )
+            break
 
-          case "whoosh": {
+          case 'whoosh': {
             // Cool whoosh sound for fast responses
-            const whooshOsc = audioContext.createOscillator();
-            const whooshGain = audioContext.createGain();
-            const whooshFilter = audioContext.createBiquadFilter();
+            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.setValueAtTime(0, audioContext.currentTime)
             whooshGain.gain.exponentialRampToValueAtTime(
               volume * 0.6,
-              audioContext.currentTime + 0.02,
-            );
-            whooshGain.gain.exponentialRampToValueAtTime(
-              0.001,
-              audioContext.currentTime + 0.3,
-            );
+              audioContext.currentTime + 0.02
+            )
+            whooshGain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.3)
 
-            whooshOsc.start(audioContext.currentTime);
-            whooshOsc.stop(audioContext.currentTime + 0.3);
-            break;
+            whooshOsc.start(audioContext.currentTime)
+            whooshOsc.stop(audioContext.currentTime + 0.3)
+            break
           }
 
-          case "train_chuff": {
+          case 'train_chuff': {
             // Realistic steam train chuffing sound
-            const chuffOsc = audioContext.createOscillator();
-            const chuffGain = audioContext.createGain();
-            const chuffFilter = audioContext.createBiquadFilter();
+            const chuffOsc = audioContext.createOscillator()
+            const chuffGain = audioContext.createGain()
+            const chuffFilter = audioContext.createBiquadFilter()
 
-            chuffOsc.connect(chuffFilter);
-            chuffFilter.connect(chuffGain);
-            chuffGain.connect(audioContext.destination);
+            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.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,
-            );
+            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.setValueAtTime(0, audioContext.currentTime)
             chuffGain.gain.exponentialRampToValueAtTime(
               volume * 0.8,
-              audioContext.currentTime + 0.01,
-            );
-            chuffGain.gain.exponentialRampToValueAtTime(
-              0.001,
-              audioContext.currentTime + 0.2,
-            );
+              audioContext.currentTime + 0.01
+            )
+            chuffGain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.2)
 
-            chuffOsc.start(audioContext.currentTime);
-            chuffOsc.stop(audioContext.currentTime + 0.2);
-            break;
+            chuffOsc.start(audioContext.currentTime)
+            chuffOsc.stop(audioContext.currentTime + 0.2)
+            break
           }
 
-          case "train_whistle":
+          case 'train_whistle':
             // Classic steam train whistle
             play90sSound(
               audioContext,
@@ -399,102 +368,85 @@ export function useSoundEffects() {
                 { freq: 523, time: 0.3, duration: 0.2 }, // C5 - fade out
               ],
               volume * 1.2,
-              "sine",
-            );
-            break;
+              'sine'
+            )
+            break
 
-          case "coal_spill": {
+          case 'coal_spill': {
             // Coal chunks spilling sound effect
-            const coalOsc = audioContext.createOscillator();
-            const coalGain = audioContext.createGain();
-            const coalFilter = audioContext.createBiquadFilter();
+            const coalOsc = audioContext.createOscillator()
+            const coalGain = audioContext.createGain()
+            const coalFilter = audioContext.createBiquadFilter()
 
-            coalOsc.connect(coalFilter);
-            coalFilter.connect(coalGain);
-            coalGain.connect(audioContext.destination);
+            coalOsc.connect(coalFilter)
+            coalFilter.connect(coalGain)
+            coalGain.connect(audioContext.destination)
 
-            coalOsc.type = "square";
-            coalFilter.type = "lowpass";
-            coalFilter.frequency.setValueAtTime(300, audioContext.currentTime);
+            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.setValueAtTime(200 + Math.random() * 100, audioContext.currentTime)
             coalOsc.frequency.exponentialRampToValueAtTime(
               100 + Math.random() * 50,
-              audioContext.currentTime + 0.1,
-            );
+              audioContext.currentTime + 0.1
+            )
             coalOsc.frequency.exponentialRampToValueAtTime(
               80 + Math.random() * 40,
-              audioContext.currentTime + 0.3,
-            );
+              audioContext.currentTime + 0.3
+            )
 
-            coalGain.gain.setValueAtTime(0, audioContext.currentTime);
+            coalGain.gain.setValueAtTime(0, audioContext.currentTime)
             coalGain.gain.exponentialRampToValueAtTime(
               volume * 0.6,
-              audioContext.currentTime + 0.01,
-            );
+              audioContext.currentTime + 0.01
+            )
             coalGain.gain.exponentialRampToValueAtTime(
               volume * 0.3,
-              audioContext.currentTime + 0.15,
-            );
-            coalGain.gain.exponentialRampToValueAtTime(
-              0.001,
-              audioContext.currentTime + 0.4,
-            );
+              audioContext.currentTime + 0.15
+            )
+            coalGain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.4)
 
-            coalOsc.start(audioContext.currentTime);
-            coalOsc.stop(audioContext.currentTime + 0.4);
-            break;
+            coalOsc.start(audioContext.currentTime)
+            coalOsc.stop(audioContext.currentTime + 0.4)
+            break
           }
 
-          case "steam_hiss": {
+          case 'steam_hiss': {
             // Steam hissing sound for locomotive
-            const steamOsc = audioContext.createOscillator();
-            const steamGain = audioContext.createGain();
-            const steamFilter = audioContext.createBiquadFilter();
+            const steamOsc = audioContext.createOscillator()
+            const steamGain = audioContext.createGain()
+            const steamFilter = audioContext.createBiquadFilter()
 
-            steamOsc.connect(steamFilter);
-            steamFilter.connect(steamGain);
-            steamGain.connect(audioContext.destination);
+            steamOsc.connect(steamFilter)
+            steamFilter.connect(steamGain)
+            steamGain.connect(audioContext.destination)
 
-            steamOsc.type = "triangle";
-            steamFilter.type = "highpass";
-            steamFilter.frequency.setValueAtTime(
-              2000,
-              audioContext.currentTime,
-            );
+            steamOsc.type = 'triangle'
+            steamFilter.type = 'highpass'
+            steamFilter.frequency.setValueAtTime(2000, audioContext.currentTime)
 
-            steamOsc.frequency.setValueAtTime(
-              4000 + Math.random() * 1000,
-              audioContext.currentTime,
-            );
+            steamOsc.frequency.setValueAtTime(4000 + Math.random() * 1000, audioContext.currentTime)
 
-            steamGain.gain.setValueAtTime(0, 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,
-            );
+              audioContext.currentTime + 0.02
+            )
+            steamGain.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.6)
 
-            steamOsc.start(audioContext.currentTime);
-            steamOsc.stop(audioContext.currentTime + 0.6);
-            break;
+            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!",
-        );
+        console.log('🎵 Web Audio not supported - missing out on rad 90s sounds!')
       }
     },
-    [play90sSound, previewMode],
-  );
+    [play90sSound, previewMode]
+  )
 
   /**
    * Stop all currently playing sounds
@@ -504,20 +456,20 @@ export function useSoundEffects() {
       if (audioContextsRef.current.length > 0) {
         audioContextsRef.current.forEach((context) => {
           try {
-            context.close();
+            context.close()
           } catch (_e) {
             // Ignore errors
           }
-        });
-        audioContextsRef.current = [];
+        })
+        audioContextsRef.current = []
       }
     } catch (e) {
-      console.log("🔇 Sound cleanup error:", e);
+      console.log('🔇 Sound cleanup error:', e)
     }
-  }, []);
+  }, [])
 
   return {
     playSound,
     stopAllSounds,
-  };
+  }
 }
diff --git a/apps/web/src/app/arcade/complement-race/hooks/useSteamJourney.ts b/apps/web/src/app/arcade/complement-race/hooks/useSteamJourney.ts
index 106221c9..bd875381 100644
--- 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 } from "react";
-import { useComplementRace } from "@/arcade-games/complement-race/Provider";
-import { useSoundEffects } from "./useSoundEffects";
+import { useEffect, useRef } from 'react'
+import { useComplementRace } from '@/arcade-games/complement-race/Provider'
+import { useSoundEffects } from './useSoundEffects'
 
 /**
  * Steam Sprint momentum system (Infinite Mode)
@@ -30,50 +30,41 @@ const MOMENTUM_DECAY_RATES = {
   normal: 9.0,
   fast: 11.0,
   expert: 13.0,
-};
+}
 
-const MOMENTUM_GAIN_PER_CORRECT = 15; // Momentum added for each correct answer
-const SPEED_MULTIPLIER = 0.15; // Convert momentum to speed (% per second at momentum=100)
-const UPDATE_INTERVAL = 50; // Update every 50ms (~20 fps)
-const GAME_DURATION = 60000; // 60 seconds in milliseconds
+const MOMENTUM_GAIN_PER_CORRECT = 15 // Momentum added for each correct answer
+const SPEED_MULTIPLIER = 0.15 // Convert momentum to speed (% per second at momentum=100)
+const UPDATE_INTERVAL = 50 // Update every 50ms (~20 fps)
+const GAME_DURATION = 60000 // 60 seconds in milliseconds
 
 export function useSteamJourney() {
-  const { state, dispatch } = useComplementRace();
-  const { playSound } = useSoundEffects();
-  const gameStartTimeRef = useRef<number>(0);
-  const lastUpdateRef = useRef<number>(0);
-  const routeExitThresholdRef = useRef<number>(107); // Default for 1 car: 100 + 7
-  const missedPassengersRef = useRef<Set<string>>(new Set()); // Track which passengers have been logged as missed
-  const pendingBoardingRef = useRef<Set<string>>(new Set()); // Track passengers with pending boarding requests across frames
-  const pendingDeliveryRef = useRef<Set<string>>(new Set()); // Track passengers with pending delivery requests across frames
-  const previousTrainPositionRef = useRef<number>(0); // Track previous position to detect threshold crossings
+  const { state, dispatch } = useComplementRace()
+  const { playSound } = useSoundEffects()
+  const gameStartTimeRef = useRef<number>(0)
+  const lastUpdateRef = useRef<number>(0)
+  const routeExitThresholdRef = useRef<number>(107) // Default for 1 car: 100 + 7
+  const missedPassengersRef = useRef<Set<string>>(new Set()) // Track which passengers have been logged as missed
+  const pendingBoardingRef = useRef<Set<string>>(new Set()) // Track passengers with pending boarding requests across frames
+  const pendingDeliveryRef = useRef<Set<string>>(new Set()) // Track passengers with pending delivery requests across frames
+  const previousTrainPositionRef = useRef<number>(0) // Track previous position to detect threshold crossings
 
   // Initialize game start time
   useEffect(() => {
-    if (
-      state.isGameActive &&
-      state.style === "sprint" &&
-      gameStartTimeRef.current === 0
-    ) {
-      gameStartTimeRef.current = Date.now();
-      lastUpdateRef.current = Date.now();
+    if (state.isGameActive && state.style === 'sprint' && gameStartTimeRef.current === 0) {
+      gameStartTimeRef.current = Date.now()
+      lastUpdateRef.current = Date.now()
     }
-  }, [state.isGameActive, state.style, state.stations, state.passengers]);
+  }, [state.isGameActive, state.style, state.stations, state.passengers])
 
   // Calculate exit threshold when route changes or config updates
   useEffect(() => {
     if (state.passengers.length > 0 && state.stations.length > 0) {
-      const CAR_SPACING = 7;
+      const CAR_SPACING = 7
       // Use server-calculated maxConcurrentPassengers
-      const maxCars = Math.max(1, state.maxConcurrentPassengers || 3);
-      routeExitThresholdRef.current = 100 + maxCars * CAR_SPACING;
+      const maxCars = Math.max(1, state.maxConcurrentPassengers || 3)
+      routeExitThresholdRef.current = 100 + maxCars * CAR_SPACING
     }
-  }, [
-    state.currentRoute,
-    state.passengers,
-    state.stations,
-    state.maxConcurrentPassengers,
-  ]);
+  }, [state.currentRoute, state.passengers, state.stations, state.maxConcurrentPassengers])
 
   // Clean up pendingBoardingRef when passengers are claimed/delivered
   // NOTE: We do NOT clean up pendingDeliveryRef here because delivery should only happen once per route
@@ -81,270 +72,224 @@ export function useSteamJourney() {
     // Remove passengers from pending boarding set if they've been claimed or delivered
     state.passengers.forEach((passenger) => {
       if (passenger.claimedBy !== null || passenger.deliveredBy !== null) {
-        pendingBoardingRef.current.delete(passenger.id);
+        pendingBoardingRef.current.delete(passenger.id)
       }
-    });
-  }, [state.passengers]);
+    })
+  }, [state.passengers])
 
   // Clear all pending boarding and delivery requests when route changes
   useEffect(() => {
-    pendingBoardingRef.current.clear();
-    pendingDeliveryRef.current.clear();
-    missedPassengersRef.current.clear();
-    previousTrainPositionRef.current = 0; // Reset previous position for new route
-  }, [state.currentRoute]);
+    pendingBoardingRef.current.clear()
+    pendingDeliveryRef.current.clear()
+    missedPassengersRef.current.clear()
+    previousTrainPositionRef.current = 0 // Reset previous position for new route
+  }, [state.currentRoute])
 
   // Momentum decay and position update loop
   useEffect(() => {
-    if (!state.isGameActive || state.style !== "sprint") return;
+    if (!state.isGameActive || state.style !== 'sprint') return
 
     const interval = setInterval(() => {
-      const now = Date.now();
-      const elapsed = now - gameStartTimeRef.current;
-      const deltaTime = now - lastUpdateRef.current;
-      lastUpdateRef.current = now;
+      const now = Date.now()
+      const elapsed = now - gameStartTimeRef.current
+      const deltaTime = now - lastUpdateRef.current
+      lastUpdateRef.current = now
 
       // Steam Sprint is infinite - no time limit
 
       // Train position, momentum, and pressure are all managed by the Provider's game loop
       // This hook only reads those values and handles game logic (boarding, delivery, route completion)
-      const trainPosition = state.trainPosition;
+      const trainPosition = state.trainPosition
 
       // Check for passengers that should board
       // Passengers board when an EMPTY car reaches their station
-      const CAR_SPACING = 7; // Must match SteamTrainJourney component
+      const CAR_SPACING = 7 // Must match SteamTrainJourney component
       // Use server-calculated maxConcurrentPassengers (updates per route based on passenger layout)
-      const maxCars = Math.max(1, state.maxConcurrentPassengers || 3);
+      const maxCars = Math.max(1, state.maxConcurrentPassengers || 3)
 
       // Debug: Log train configuration at start (only once per route)
       if (trainPosition < 1 && state.passengers.length > 0) {
-        const lastLoggedRoute = (window as any).__lastLoggedRoute || 0;
+        const lastLoggedRoute = (window as any).__lastLoggedRoute || 0
         if (lastLoggedRoute !== state.currentRoute) {
           console.log(
-            `\n🚆 ROUTE ${state.currentRoute} START - Train has ${maxCars} cars (server maxConcurrentPassengers: ${state.maxConcurrentPassengers}) for ${state.passengers.length} passengers`,
-          );
+            `\n🚆 ROUTE ${state.currentRoute} START - Train has ${maxCars} cars (server maxConcurrentPassengers: ${state.maxConcurrentPassengers}) for ${state.passengers.length} passengers`
+          )
           state.passengers.forEach((p) => {
-            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(
-              `  📍 ${p.name}: ${origin?.emoji} ${origin?.name} (${origin?.position}) → ${dest?.emoji} ${dest?.name} (${dest?.position}) ${p.isUrgent ? "⚡" : ""}`,
-            );
-          });
-          console.log(""); // Blank line for readability
-          (window as any).__lastLoggedRoute = state.currentRoute;
+              `  📍 ${p.name}: ${origin?.emoji} ${origin?.name} (${origin?.position}) → ${dest?.emoji} ${dest?.name} (${dest?.position}) ${p.isUrgent ? '⚡' : ''}`
+            )
+          })
+          console.log('') // Blank line for readability
+          ;(window as any).__lastLoggedRoute = state.currentRoute
         }
       }
       const currentBoardedPassengers = state.passengers.filter(
-        (p) => p.claimedBy !== null && p.deliveredBy === null,
-      );
+        (p) => p.claimedBy !== null && p.deliveredBy === null
+      )
 
       // FIRST: Identify which passengers will be delivered in this frame
-      const passengersToDeliver = new Set<string>();
+      const passengersToDeliver = new Set<string>()
       currentBoardedPassengers.forEach((passenger) => {
-        if (
-          !passenger ||
-          passenger.deliveredBy !== null ||
-          passenger.carIndex === null
-        )
-          return;
+        if (!passenger || passenger.deliveredBy !== null || passenger.carIndex === null) return
 
-        const station = state.stations.find(
-          (s) => s.id === passenger.destinationStationId,
-        );
-        if (!station) return;
+        const station = state.stations.find((s) => s.id === passenger.destinationStationId)
+        if (!station) return
 
         // Calculate this passenger's car position using PHYSICAL carIndex
-        const carPosition = Math.max(
-          0,
-          trainPosition - (passenger.carIndex + 1) * CAR_SPACING,
-        );
-        const distance = Math.abs(carPosition - station.position);
+        const carPosition = Math.max(0, trainPosition - (passenger.carIndex + 1) * CAR_SPACING)
+        const distance = Math.abs(carPosition - station.position)
 
         // If this car is at the destination station (within 5% tolerance), mark for delivery
         if (distance < 5) {
-          passengersToDeliver.add(passenger.id);
+          passengersToDeliver.add(passenger.id)
         }
-      });
+      })
 
       // Build a map of which cars are occupied (using PHYSICAL car index, not array index!)
       // This is critical: passenger.carIndex stores the physical car (0-N) they're seated in
-      const occupiedCars = new Map<
-        number,
-        (typeof currentBoardedPassengers)[0]
-      >();
+      const occupiedCars = new Map<number, (typeof currentBoardedPassengers)[0]>()
       currentBoardedPassengers.forEach((passenger) => {
         // Don't count a car as occupied if its passenger is being delivered this frame
-        if (
-          !passengersToDeliver.has(passenger.id) &&
-          passenger.carIndex !== null
-        ) {
-          occupiedCars.set(passenger.carIndex, passenger); // Use physical carIndex, NOT array index!
+        if (!passengersToDeliver.has(passenger.id) && passenger.carIndex !== null) {
+          occupiedCars.set(passenger.carIndex, passenger) // Use physical carIndex, NOT array index!
         }
-      });
+      })
 
       // PRIORITY 1: Process deliveries FIRST (dispatch DELIVER moves before BOARD moves)
       // This ensures the server frees up cars before processing new boarding requests
       currentBoardedPassengers.forEach((passenger) => {
-        if (
-          !passenger ||
-          passenger.deliveredBy !== null ||
-          passenger.carIndex === null
-        )
-          return;
+        if (!passenger || passenger.deliveredBy !== null || passenger.carIndex === null) return
 
         // Skip if already has a pending delivery request
-        if (pendingDeliveryRef.current.has(passenger.id)) return;
+        if (pendingDeliveryRef.current.has(passenger.id)) return
 
-        const station = state.stations.find(
-          (s) => s.id === passenger.destinationStationId,
-        );
-        if (!station) return;
+        const station = state.stations.find((s) => s.id === passenger.destinationStationId)
+        if (!station) return
 
         // Calculate this passenger's car position using PHYSICAL carIndex
-        const carPosition = Math.max(
-          0,
-          trainPosition - (passenger.carIndex + 1) * CAR_SPACING,
-        );
-        const distance = Math.abs(carPosition - station.position);
+        const carPosition = Math.max(0, trainPosition - (passenger.carIndex + 1) * CAR_SPACING)
+        const distance = Math.abs(carPosition - station.position)
 
         // If this car is at the destination station (within 5% tolerance), deliver
         if (distance < 5) {
-          const points = passenger.isUrgent ? 20 : 10;
+          const points = passenger.isUrgent ? 20 : 10
           console.log(
-            `🎯 DELIVERY: ${passenger.name} delivered from Car ${passenger.carIndex} to ${station.emoji} ${station.name} (+${points} pts) (trainPos=${trainPosition.toFixed(1)}, carPos=${carPosition.toFixed(1)}, stationPos=${station.position})`,
-          );
+            `🎯 DELIVERY: ${passenger.name} delivered from Car ${passenger.carIndex} to ${station.emoji} ${station.name} (+${points} pts) (trainPos=${trainPosition.toFixed(1)}, carPos=${carPosition.toFixed(1)}, stationPos=${station.position})`
+          )
 
           // Mark as pending BEFORE dispatch to prevent duplicate delivery attempts across frames
-          pendingDeliveryRef.current.add(passenger.id);
+          pendingDeliveryRef.current.add(passenger.id)
 
           dispatch({
-            type: "DELIVER_PASSENGER",
+            type: 'DELIVER_PASSENGER',
             passengerId: passenger.id,
             points,
-          });
+          })
         }
-      });
+      })
 
       // Debug: Log car states periodically at stations
-      const isAtStation = state.stations.some(
-        (s) => Math.abs(trainPosition - s.position) < 3,
-      );
-      if (
-        isAtStation &&
-        Math.floor(trainPosition) !== Math.floor(state.trainPosition)
-      ) {
-        const nearStation = state.stations.find(
-          (s) => Math.abs(trainPosition - s.position) < 3,
-        );
+      const isAtStation = state.stations.some((s) => Math.abs(trainPosition - s.position) < 3)
+      if (isAtStation && Math.floor(trainPosition) !== Math.floor(state.trainPosition)) {
+        const nearStation = state.stations.find((s) => Math.abs(trainPosition - s.position) < 3)
         console.log(
-          `\n🚃 Train arriving at ${nearStation?.emoji} ${nearStation?.name} (trainPos=${trainPosition.toFixed(1)}) - ${maxCars} cars total:`,
-        );
+          `\n🚃 Train arriving at ${nearStation?.emoji} ${nearStation?.name} (trainPos=${trainPosition.toFixed(1)}) - ${maxCars} cars total:`
+        )
         for (let i = 0; i < maxCars; i++) {
-          const carPos = Math.max(0, trainPosition - (i + 1) * CAR_SPACING);
-          const occupant = occupiedCars.get(i);
+          const carPos = Math.max(0, trainPosition - (i + 1) * CAR_SPACING)
+          const occupant = occupiedCars.get(i)
           if (occupant) {
-            const dest = state.stations.find(
-              (s) => s.id === occupant.destinationStationId,
-            );
+            const dest = state.stations.find((s) => s.id === occupant.destinationStationId)
             console.log(
-              `  Car ${i}: @ ${carPos.toFixed(1)}% - ${occupant.name} → ${dest?.emoji} ${dest?.name}`,
-            );
+              `  Car ${i}: @ ${carPos.toFixed(1)}% - ${occupant.name} → ${dest?.emoji} ${dest?.name}`
+            )
           } else {
-            console.log(`  Car ${i}: @ ${carPos.toFixed(1)}% - EMPTY`);
+            console.log(`  Car ${i}: @ ${carPos.toFixed(1)}% - EMPTY`)
           }
         }
       }
 
       // Track which cars are assigned in THIS frame to prevent double-boarding
-      const carsAssignedThisFrame = new Set<number>();
+      const carsAssignedThisFrame = new Set<number>()
       // Track which passengers are assigned in THIS frame to prevent same passenger boarding multiple cars
-      const passengersAssignedThisFrame = new Set<string>();
+      const passengersAssignedThisFrame = new Set<string>()
 
       // PRIORITY 2: Process boardings AFTER deliveries
 
       // Find waiting passengers whose origin station has an empty car nearby
       state.passengers.forEach((passenger) => {
         // Skip if already claimed or delivered (optimistic update marks immediately)
-        if (passenger.claimedBy !== null || passenger.deliveredBy !== null)
-          return;
+        if (passenger.claimedBy !== null || passenger.deliveredBy !== null) return
 
         // Skip if already assigned in this frame OR has a pending boarding request from previous frames
         if (
           passengersAssignedThisFrame.has(passenger.id) ||
           pendingBoardingRef.current.has(passenger.id)
         )
-          return;
+          return
 
-        const station = state.stations.find(
-          (s) => s.id === passenger.originStationId,
-        );
-        if (!station) return;
+        const station = state.stations.find((s) => s.id === passenger.originStationId)
+        if (!station) return
 
         // Don't allow boarding if locomotive has passed too far beyond this station
         // Station stays open until the LAST car has passed (accounting for train length)
-        const STATION_CLOSURE_BUFFER = 10; // Extra buffer beyond the last car
-        const lastCarOffset = maxCars * CAR_SPACING; // Distance from locomotive to last car
-        const stationClosureThreshold = lastCarOffset + STATION_CLOSURE_BUFFER;
+        const STATION_CLOSURE_BUFFER = 10 // Extra buffer beyond the last car
+        const lastCarOffset = maxCars * CAR_SPACING // Distance from locomotive to last car
+        const stationClosureThreshold = lastCarOffset + STATION_CLOSURE_BUFFER
 
         if (trainPosition > station.position + stationClosureThreshold) {
           console.log(
-            `❌ MISSED: ${passenger.name} at ${station.emoji} ${station.name} - train too far past (trainPos=${trainPosition.toFixed(1)}, station=${station.position}, threshold=${stationClosureThreshold})`,
-          );
-          return;
+            `❌ MISSED: ${passenger.name} at ${station.emoji} ${station.name} - train too far past (trainPos=${trainPosition.toFixed(1)}, station=${station.position}, threshold=${stationClosureThreshold})`
+          )
+          return
         }
 
         // Check if any empty car is at this station
         // Cars are at positions: trainPosition - 7, trainPosition - 14, etc.
-        let closestCarDistance = 999;
-        let closestCarReason = "";
+        let closestCarDistance = 999
+        let closestCarReason = ''
 
         for (let carIndex = 0; carIndex < maxCars; carIndex++) {
-          const carPosition = Math.max(
-            0,
-            trainPosition - (carIndex + 1) * CAR_SPACING,
-          );
-          const distance = Math.abs(carPosition - station.position);
+          const carPosition = Math.max(0, trainPosition - (carIndex + 1) * CAR_SPACING)
+          const distance = Math.abs(carPosition - station.position)
 
           if (distance < closestCarDistance) {
-            closestCarDistance = distance;
+            closestCarDistance = distance
             if (occupiedCars.has(carIndex)) {
-              const occupant = occupiedCars.get(carIndex);
-              closestCarReason = `Car ${carIndex} occupied by ${occupant?.name}`;
+              const occupant = occupiedCars.get(carIndex)
+              closestCarReason = `Car ${carIndex} occupied by ${occupant?.name}`
             } else if (carsAssignedThisFrame.has(carIndex)) {
-              closestCarReason = `Car ${carIndex} just assigned`;
+              closestCarReason = `Car ${carIndex} just assigned`
             } else if (distance >= 5) {
-              closestCarReason = `Car ${carIndex} too far (dist=${distance.toFixed(1)})`;
+              closestCarReason = `Car ${carIndex} too far (dist=${distance.toFixed(1)})`
             } else {
-              closestCarReason = "available";
+              closestCarReason = 'available'
             }
           }
 
           // Skip if this car already has a passenger OR was assigned this frame
-          if (occupiedCars.has(carIndex) || carsAssignedThisFrame.has(carIndex))
-            continue;
+          if (occupiedCars.has(carIndex) || carsAssignedThisFrame.has(carIndex)) continue
 
           // If car is at or near station (within 5% tolerance for fast trains), board this passenger
           if (distance < 5) {
             console.log(
-              `🚂 BOARDING: ${passenger.name} boarding Car ${carIndex} at ${station.emoji} ${station.name} (trainPos=${trainPosition.toFixed(1)}, carPos=${carPosition.toFixed(1)}, stationPos=${station.position})`,
-            );
+              `🚂 BOARDING: ${passenger.name} boarding Car ${carIndex} at ${station.emoji} ${station.name} (trainPos=${trainPosition.toFixed(1)}, carPos=${carPosition.toFixed(1)}, stationPos=${station.position})`
+            )
 
             // Mark as pending BEFORE dispatch to prevent duplicate boarding attempts across frames
-            pendingBoardingRef.current.add(passenger.id);
+            pendingBoardingRef.current.add(passenger.id)
 
             dispatch({
-              type: "BOARD_PASSENGER",
+              type: 'BOARD_PASSENGER',
               passengerId: passenger.id,
               carIndex, // Pass physical car index to server
-            });
+            })
             // Mark this car and passenger as assigned in this frame
-            carsAssignedThisFrame.add(carIndex);
-            passengersAssignedThisFrame.add(passenger.id);
-            return; // Board this passenger and move on
+            carsAssignedThisFrame.add(carIndex)
+            passengersAssignedThisFrame.add(passenger.id)
+            return // Board this passenger and move on
           }
         }
 
@@ -352,105 +297,96 @@ export function useSteamJourney() {
         if (closestCarDistance < 10) {
           // Only log if train is somewhat near
           console.log(
-            `⏸️  WAITING: ${passenger.name} at ${station.emoji} ${station.name} - ${closestCarReason} (trainPos=${trainPosition.toFixed(1)}, maxCars=${maxCars})`,
-          );
+            `⏸️  WAITING: ${passenger.name} at ${station.emoji} ${station.name} - ${closestCarReason} (trainPos=${trainPosition.toFixed(1)}, maxCars=${maxCars})`
+          )
         }
-      });
+      })
 
       // Check for route completion (entire train exits tunnel)
-      const ENTIRE_TRAIN_EXIT_THRESHOLD = routeExitThresholdRef.current;
-      const previousPosition = previousTrainPositionRef.current;
+      const ENTIRE_TRAIN_EXIT_THRESHOLD = routeExitThresholdRef.current
+      const previousPosition = previousTrainPositionRef.current
 
       if (
         trainPosition >= ENTIRE_TRAIN_EXIT_THRESHOLD &&
         previousPosition < ENTIRE_TRAIN_EXIT_THRESHOLD
       ) {
         // Play celebration whistle
-        playSound("train_whistle", 0.6);
+        playSound('train_whistle', 0.6)
         setTimeout(() => {
-          playSound("celebration", 0.4);
-        }, 800);
+          playSound('celebration', 0.4)
+        }, 800)
 
         // Auto-advance to next route
-        const nextRoute = state.currentRoute + 1;
+        const nextRoute = state.currentRoute + 1
         console.log(
-          `🏁 ROUTE COMPLETE: Train crossed exit threshold (${trainPosition.toFixed(1)} >= ${ENTIRE_TRAIN_EXIT_THRESHOLD}). Advancing to Route ${nextRoute}`,
-        );
+          `🏁 ROUTE COMPLETE: Train crossed exit threshold (${trainPosition.toFixed(1)} >= ${ENTIRE_TRAIN_EXIT_THRESHOLD}). Advancing to Route ${nextRoute}`
+        )
         dispatch({
-          type: "START_NEW_ROUTE",
+          type: 'START_NEW_ROUTE',
           routeNumber: nextRoute,
           stations: state.stations,
-        });
+        })
 
         // Note: New passengers will be generated by the server when it handles START_NEW_ROUTE
       }
 
       // Update previous position for next frame
-      previousTrainPositionRef.current = trainPosition;
-    }, UPDATE_INTERVAL);
+      previousTrainPositionRef.current = trainPosition
+    }, UPDATE_INTERVAL)
 
-    return () => clearInterval(interval);
-  }, [
-    state.isGameActive,
-    state.style,
-    state.timeoutSetting,
-    dispatch,
-    playSound,
-  ]);
+    return () => clearInterval(interval)
+  }, [state.isGameActive, state.style, state.timeoutSetting, dispatch, playSound])
 
   // Add momentum on correct answer
   useEffect(() => {
     // Only for sprint mode
-    if (state.style !== "sprint") return;
+    if (state.style !== 'sprint') return
 
     // This effect triggers when correctAnswers increases
     // We use a ref to track previous value to detect changes
-  }, [state.style]);
+  }, [state.style])
 
   // Function to boost momentum (called when answer is correct)
   const boostMomentum = () => {
-    if (state.style !== "sprint") return;
+    if (state.style !== 'sprint') return
 
-    const newMomentum = Math.min(
-      100,
-      state.momentum + MOMENTUM_GAIN_PER_CORRECT,
-    );
+    const newMomentum = Math.min(100, state.momentum + MOMENTUM_GAIN_PER_CORRECT)
     dispatch({
-      type: "UPDATE_STEAM_JOURNEY",
+      type: 'UPDATE_STEAM_JOURNEY',
       momentum: newMomentum,
       trainPosition: state.trainPosition, // Keep current position
       pressure: state.pressure,
       elapsedTime: state.elapsedTime,
-    });
-  };
+    })
+  }
 
   // Calculate time of day period (0-5 for 6 periods, cycles infinitely)
   const getTimeOfDayPeriod = (): number => {
-    if (state.elapsedTime === 0) return 0;
-    const periodDuration = GAME_DURATION / 6;
-    return Math.floor(state.elapsedTime / periodDuration) % 6;
-  };
+    if (state.elapsedTime === 0) return 0
+    const periodDuration = GAME_DURATION / 6
+    return Math.floor(state.elapsedTime / periodDuration) % 6
+  }
 
   // Get sky gradient colors based on time of day
   const getSkyGradient = (): { top: string; bottom: string } => {
-    const period = getTimeOfDayPeriod();
+    const period = getTimeOfDayPeriod()
 
     // 6 periods over 60 seconds: dawn → morning → midday → afternoon → dusk → night
     const gradients = [
-      { top: "#1e3a8a", bottom: "#f59e0b" }, // Dawn - deep blue to orange
-      { top: "#3b82f6", bottom: "#fbbf24" }, // Morning - blue to yellow
-      { 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: '#1e3a8a', bottom: '#f59e0b' }, // Dawn - deep blue to orange
+      { top: '#3b82f6', bottom: '#fbbf24' }, // Morning - blue to yellow
+      { 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
+    ]
 
-    return gradients[period] || gradients[0];
-  };
+    return gradients[period] || gradients[0]
+  }
 
   return {
     boostMomentum,
     getTimeOfDayPeriod,
     getSkyGradient,
-  };
+  }
 }
diff --git a/apps/web/src/app/arcade/complement-race/hooks/useTrackManagement.ts b/apps/web/src/app/arcade/complement-race/hooks/useTrackManagement.ts
index 76e098ba..fce9cdfc 100644
--- a/apps/web/src/app/arcade/complement-race/hooks/useTrackManagement.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/useTrackManagement.ts
@@ -1,17 +1,17 @@
-import { useEffect, useRef, useState } from "react";
-import type { Passenger, Station } from "@/arcade-games/complement-race/types";
-import { generateLandmarks, type Landmark } from "../lib/landmarks";
-import type { RailroadTrackGenerator } from "../lib/RailroadTrackGenerator";
+import { useEffect, useRef, useState } from 'react'
+import type { Passenger, Station } from '@/arcade-games/complement-race/types'
+import { generateLandmarks, type Landmark } from '../lib/landmarks'
+import type { RailroadTrackGenerator } from '../lib/RailroadTrackGenerator'
 
 interface UseTrackManagementParams {
-  currentRoute: number;
-  trainPosition: number;
-  trackGenerator: RailroadTrackGenerator;
-  pathRef: React.RefObject<SVGPathElement>;
-  stations: Station[];
-  passengers: Passenger[];
-  maxCars: number;
-  carSpacing: number;
+  currentRoute: number
+  trainPosition: number
+  trackGenerator: RailroadTrackGenerator
+  pathRef: React.RefObject<SVGPathElement>
+  stations: Station[]
+  passengers: Passenger[]
+  maxCars: number
+  carSpacing: number
 }
 
 export function useTrackManagement({
@@ -26,128 +26,122 @@ export function useTrackManagement({
 }: UseTrackManagementParams) {
   const [trackData, setTrackData] = useState<ReturnType<
     typeof trackGenerator.generateTrack
-  > | null>(null);
+  > | null>(null)
   const [tiesAndRails, setTiesAndRails] = useState<{
-    ties: Array<{ x1: number; y1: number; x2: number; y2: number }>;
-    leftRailPath: string;
-    rightRailPath: string;
-  } | null>(null);
-  const [stationPositions, setStationPositions] = useState<
-    Array<{ x: number; y: number }>
-  >([]);
-  const [landmarks, setLandmarks] = useState<Landmark[]>([]);
-  const [landmarkPositions, setLandmarkPositions] = useState<
-    Array<{ x: number; y: number }>
-  >([]);
-  const [displayPassengers, setDisplayPassengers] =
-    useState<Passenger[]>(passengers);
+    ties: Array<{ x1: number; y1: number; x2: number; y2: number }>
+    leftRailPath: string
+    rightRailPath: string
+  } | null>(null)
+  const [stationPositions, setStationPositions] = useState<Array<{ x: number; y: number }>>([])
+  const [landmarks, setLandmarks] = useState<Landmark[]>([])
+  const [landmarkPositions, setLandmarkPositions] = useState<Array<{ x: number; y: number }>>([])
+  const [displayPassengers, setDisplayPassengers] = useState<Passenger[]>(passengers)
 
   // Track previous route data to maintain visuals during transition
-  const previousRouteRef = useRef(currentRoute);
+  const previousRouteRef = useRef(currentRoute)
   const [pendingTrackData, setPendingTrackData] = useState<ReturnType<
     typeof trackGenerator.generateTrack
-  > | null>(null);
-  const displayRouteRef = useRef(currentRoute); // Track which route's passengers are being displayed
+  > | null>(null)
+  const displayRouteRef = useRef(currentRoute) // Track which route's passengers are being displayed
 
   // Generate landmarks when route changes
   useEffect(() => {
-    const newLandmarks = generateLandmarks(currentRoute);
-    setLandmarks(newLandmarks);
-  }, [currentRoute]);
+    const newLandmarks = generateLandmarks(currentRoute)
+    setLandmarks(newLandmarks)
+  }, [currentRoute])
 
   // Generate track on mount and when route changes
   useEffect(() => {
-    const track = trackGenerator.generateTrack(currentRoute);
+    const track = trackGenerator.generateTrack(currentRoute)
 
     // If we're in the middle of a route (position > 0), store as pending
     // Only apply new track when position resets to beginning (< 0)
     if (trainPosition > 0 && previousRouteRef.current !== currentRoute) {
-      setPendingTrackData(track);
+      setPendingTrackData(track)
     } else {
-      setTrackData(track);
-      previousRouteRef.current = currentRoute;
-      setPendingTrackData(null);
+      setTrackData(track)
+      previousRouteRef.current = currentRoute
+      setPendingTrackData(null)
     }
-  }, [trackGenerator, currentRoute, trainPosition]);
+  }, [trackGenerator, currentRoute, trainPosition])
 
   // Apply pending track when train resets to beginning
   useEffect(() => {
     if (pendingTrackData && trainPosition <= 0) {
-      setTrackData(pendingTrackData);
-      previousRouteRef.current = currentRoute;
-      setPendingTrackData(null);
+      setTrackData(pendingTrackData)
+      previousRouteRef.current = currentRoute
+      setPendingTrackData(null)
     }
-  }, [pendingTrackData, trainPosition, currentRoute]);
+  }, [pendingTrackData, trainPosition, currentRoute])
 
   // Manage passenger display during route transitions
   useEffect(() => {
     // Only switch to new passengers when:
     // 1. Train has reset to start position (<= 0) - track has changed, OR
     // 2. Same route AND (in middle of track OR passengers have changed state)
-    const trainReset = trainPosition <= 0;
-    const sameRoute = currentRoute === displayRouteRef.current;
-    const inMiddleOfTrack = trainPosition >= 10 && trainPosition < 90; // Avoid start/end transition zones
+    const trainReset = trainPosition <= 0
+    const sameRoute = currentRoute === displayRouteRef.current
+    const inMiddleOfTrack = trainPosition >= 10 && trainPosition < 90 // Avoid start/end transition zones
 
     // Detect if passenger states have changed (boarding or delivery)
     // This allows updates even when train is past 90% threshold
     const passengerStatesChanged =
       sameRoute &&
       passengers.some((p) => {
-        const oldPassenger = displayPassengers.find((dp) => dp.id === p.id);
+        const oldPassenger = displayPassengers.find((dp) => dp.id === p.id)
         return (
           oldPassenger &&
-          (oldPassenger.claimedBy !== p.claimedBy ||
-            oldPassenger.deliveredBy !== p.deliveredBy)
-        );
-      });
+          (oldPassenger.claimedBy !== p.claimedBy || oldPassenger.deliveredBy !== p.deliveredBy)
+        )
+      })
 
     if (trainReset) {
       // Train reset - update to new route's passengers
-      setDisplayPassengers(passengers);
-      displayRouteRef.current = currentRoute;
+      setDisplayPassengers(passengers)
+      displayRouteRef.current = currentRoute
     } else if (sameRoute && (inMiddleOfTrack || passengerStatesChanged)) {
       // Same route and either in middle of track OR passenger states changed - update for gameplay
-      setDisplayPassengers(passengers);
+      setDisplayPassengers(passengers)
     }
     // Otherwise, keep displaying old passengers until train resets
-  }, [passengers, displayPassengers, trainPosition, currentRoute]);
+  }, [passengers, displayPassengers, trainPosition, currentRoute])
 
   // Generate ties and rails when path is ready
   useEffect(() => {
     if (pathRef.current && trackData) {
-      const result = trackGenerator.generateTiesAndRails(pathRef.current);
-      setTiesAndRails(result);
+      const result = trackGenerator.generateTiesAndRails(pathRef.current)
+      setTiesAndRails(result)
     }
-  }, [trackData, trackGenerator, pathRef]);
+  }, [trackData, trackGenerator, pathRef])
 
   // Calculate station positions when path is ready
   useEffect(() => {
     if (pathRef.current) {
       const positions = stations.map((station) => {
-        const pathLength = pathRef.current!.getTotalLength();
-        const distance = (station.position / 100) * pathLength;
-        const point = pathRef.current!.getPointAtLength(distance);
-        return { x: point.x, y: point.y };
-      });
-      setStationPositions(positions);
+        const pathLength = pathRef.current!.getTotalLength()
+        const distance = (station.position / 100) * pathLength
+        const point = pathRef.current!.getPointAtLength(distance)
+        return { x: point.x, y: point.y }
+      })
+      setStationPositions(positions)
     }
-  }, [stations, pathRef]);
+  }, [stations, pathRef])
 
   // Calculate landmark positions when path is ready
   useEffect(() => {
     if (pathRef.current && landmarks.length > 0) {
       const positions = landmarks.map((landmark) => {
-        const pathLength = pathRef.current!.getTotalLength();
-        const distance = (landmark.position / 100) * pathLength;
-        const point = pathRef.current!.getPointAtLength(distance);
+        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,
-        };
-      });
-      setLandmarkPositions(positions);
+        }
+      })
+      setLandmarkPositions(positions)
     }
-  }, [landmarks, pathRef]);
+  }, [landmarks, pathRef])
 
   return {
     trackData,
@@ -156,5 +150,5 @@ export function useTrackManagement({
     landmarks,
     landmarkPositions,
     displayPassengers,
-  };
+  }
 }
diff --git a/apps/web/src/app/arcade/complement-race/hooks/useTrainTransforms.ts b/apps/web/src/app/arcade/complement-race/hooks/useTrainTransforms.ts
index 1cacd5d6..a13cbd4b 100644
--- a/apps/web/src/app/arcade/complement-race/hooks/useTrainTransforms.ts
+++ b/apps/web/src/app/arcade/complement-race/hooks/useTrainTransforms.ts
@@ -1,23 +1,23 @@
-import { useEffect, useMemo, useState } from "react";
-import type { RailroadTrackGenerator } from "../lib/RailroadTrackGenerator";
+import { useEffect, useMemo, useState } from 'react'
+import type { RailroadTrackGenerator } from '../lib/RailroadTrackGenerator'
 
 interface TrainTransform {
-  x: number;
-  y: number;
-  rotation: number;
+  x: number
+  y: number
+  rotation: number
 }
 
 interface TrainCarTransform extends TrainTransform {
-  position: number;
-  opacity: number;
+  position: number
+  opacity: number
 }
 
 interface UseTrainTransformsParams {
-  trainPosition: number;
-  trackGenerator: RailroadTrackGenerator;
-  pathRef: React.RefObject<SVGPathElement>;
-  maxCars: number;
-  carSpacing: number;
+  trainPosition: number
+  trackGenerator: RailroadTrackGenerator
+  pathRef: React.RefObject<SVGPathElement>
+  maxCars: number
+  carSpacing: number
 }
 
 export function useTrainTransforms({
@@ -31,18 +31,15 @@ export function useTrainTransforms({
     x: 50,
     y: 300,
     rotation: 0,
-  });
+  })
 
   // Update train position and rotation
   useEffect(() => {
     if (pathRef.current) {
-      const transform = trackGenerator.getTrainTransform(
-        pathRef.current,
-        trainPosition,
-      );
-      setTrainTransform(transform);
+      const transform = trackGenerator.getTrainTransform(pathRef.current, trainPosition)
+      setTrainTransform(transform)
     }
-  }, [trainPosition, trackGenerator, pathRef]);
+  }, [trainPosition, trackGenerator, pathRef])
 
   // Calculate train car transforms (each car follows behind the locomotive)
   const trainCars = useMemo((): TrainCarTransform[] => {
@@ -53,72 +50,68 @@ export function useTrainTransforms({
         rotation: 0,
         position: 0,
         opacity: 0,
-      }));
+      }))
     }
 
     return Array.from({ length: maxCars }).map((_, carIndex) => {
       // Calculate position for this car (behind the locomotive)
-      const carPosition = Math.max(
-        0,
-        trainPosition - (carIndex + 1) * carSpacing,
-      );
+      const carPosition = Math.max(0, trainPosition - (carIndex + 1) * carSpacing)
 
       // Calculate opacity: fade in at left tunnel (3-8%), fade out at right tunnel (92-97%)
-      const fadeInStart = 3;
-      const fadeInEnd = 8;
-      const fadeOutStart = 92;
-      const fadeOutEnd = 97;
+      const fadeInStart = 3
+      const fadeInEnd = 8
+      const fadeOutStart = 92
+      const fadeOutEnd = 97
 
-      let opacity = 1; // Default to fully visible
+      let opacity = 1 // Default to fully visible
 
       // Fade in from left tunnel
       if (carPosition <= fadeInStart) {
-        opacity = 0;
+        opacity = 0
       } else if (carPosition < fadeInEnd) {
-        opacity = (carPosition - fadeInStart) / (fadeInEnd - fadeInStart);
+        opacity = (carPosition - fadeInStart) / (fadeInEnd - fadeInStart)
       }
       // Fade out into right tunnel
       else if (carPosition >= fadeOutEnd) {
-        opacity = 0;
+        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,
-      };
-    });
-  }, [trainPosition, trackGenerator, pathRef, maxCars, carSpacing]);
+      }
+    })
+  }, [trainPosition, trackGenerator, pathRef, maxCars, carSpacing])
 
   // Calculate locomotive opacity (fade in/out through tunnels)
   const locomotiveOpacity = useMemo(() => {
-    const fadeInStart = 3;
-    const fadeInEnd = 8;
-    const fadeOutStart = 92;
-    const fadeOutEnd = 97;
+    const fadeInStart = 3
+    const fadeInEnd = 8
+    const fadeOutStart = 92
+    const fadeOutEnd = 97
 
     // Fade in from left tunnel
     if (trainPosition <= fadeInStart) {
-      return 0;
+      return 0
     } else if (trainPosition < fadeInEnd) {
-      return (trainPosition - fadeInStart) / (fadeInEnd - fadeInStart);
+      return (trainPosition - fadeInStart) / (fadeInEnd - fadeInStart)
     }
     // Fade out into right tunnel
     else if (trainPosition >= fadeOutEnd) {
-      return 0;
+      return 0
     } else if (trainPosition > fadeOutStart) {
-      return 1 - (trainPosition - fadeOutStart) / (fadeOutEnd - fadeOutStart);
+      return 1 - (trainPosition - fadeOutStart) / (fadeOutEnd - fadeOutStart)
     }
 
-    return 1; // Default to fully visible
-  }, [trainPosition]);
+    return 1 // Default to fully visible
+  }, [trainPosition])
 
   return {
     trainTransform,
     trainCars,
     locomotiveOpacity,
-  };
+  }
 }
diff --git a/apps/web/src/app/arcade/complement-race/lib/RailroadTrackGenerator.ts b/apps/web/src/app/arcade/complement-race/lib/RailroadTrackGenerator.ts
index e5e5fbd0..d4886e38 100644
--- a/apps/web/src/app/arcade/complement-race/lib/RailroadTrackGenerator.ts
+++ b/apps/web/src/app/arcade/complement-race/lib/RailroadTrackGenerator.ts
@@ -6,49 +6,49 @@
  */
 
 export interface Waypoint {
-  x: number;
-  y: number;
+  x: number
+  y: number
 }
 
 export interface TrackElements {
-  ballastPath: string;
-  referencePath: string;
-  ties: Array<{ x1: number; y1: number; x2: number; y2: number }>;
-  leftRailPath: string;
-  rightRailPath: string;
+  ballastPath: string
+  referencePath: string
+  ties: Array<{ x1: number; y1: number; x2: number; y2: number }>
+  leftRailPath: string
+  rightRailPath: string
 }
 
 export class RailroadTrackGenerator {
-  private viewWidth: number;
-  private viewHeight: number;
+  private viewWidth: number
+  private viewHeight: number
 
   constructor(viewWidth = 800, viewHeight = 600) {
-    this.viewWidth = viewWidth;
-    this.viewHeight = viewHeight;
+    this.viewWidth = viewWidth
+    this.viewHeight = viewHeight
   }
 
   /**
    * Generate complete track elements for rendering
    */
   generateTrack(routeNumber: number = 1): TrackElements {
-    const waypoints = this.generateTrackWaypoints(routeNumber);
-    const pathData = this.generateSmoothPath(waypoints);
+    const waypoints = this.generateTrackWaypoints(routeNumber)
+    const pathData = this.generateSmoothPath(waypoints)
 
     return {
       ballastPath: pathData,
       referencePath: pathData,
       ties: [],
-      leftRailPath: "",
-      rightRailPath: "",
-    };
+      leftRailPath: '',
+      rightRailPath: '',
+    }
   }
 
   /**
    * Seeded random number generator for deterministic randomness
    */
   private seededRandom(seed: number): number {
-    const x = Math.sin(seed) * 10000;
-    return x - Math.floor(x);
+    const x = Math.sin(seed) * 10000
+    return x - Math.floor(x)
   }
 
   /**
@@ -66,52 +66,52 @@ export class RailroadTrackGenerator {
       { 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)
     return baseWaypoints.map((point, index) => {
       if (index === 0 || index === baseWaypoints.length - 1) {
-        return point; // Keep start/end points fixed
+        return point // Keep start/end points fixed
       }
 
       // Use seeded randomness for consistent track per route
-      const seed1 = routeNumber * 12.9898 + index * 78.233;
-      const seed2 = routeNumber * 43.789 + index * 67.123;
-      const randomX = (this.seededRandom(seed1) - 0.5) * 60; // ±30 pixels
-      const randomY = (this.seededRandom(seed2) - 0.5) * 80; // ±40 pixels
+      const seed1 = routeNumber * 12.9898 + index * 78.233
+      const seed2 = routeNumber * 43.789 + index * 67.123
+      const randomX = (this.seededRandom(seed1) - 0.5) * 60 // ±30 pixels
+      const randomY = (this.seededRandom(seed2) - 0.5) * 80 // ±40 pixels
 
       return {
         x: point.x + randomX,
         y: point.y + randomY,
-      };
-    });
+      }
+    })
   }
 
   /**
    * Generate smooth cubic bezier curves through waypoints
    */
   private generateSmoothPath(waypoints: Waypoint[]): string {
-    if (waypoints.length < 2) return "";
+    if (waypoints.length < 2) return ''
 
-    let pathData = `M ${waypoints[0].x} ${waypoints[0].y}`;
+    let pathData = `M ${waypoints[0].x} ${waypoints[0].y}`
 
     for (let i = 1; i < waypoints.length; i++) {
-      const current = waypoints[i];
-      const previous = waypoints[i - 1];
+      const current = waypoints[i]
+      const previous = waypoints[i - 1]
 
       // Calculate control points for smooth curves
-      const dx = current.x - previous.x;
-      const dy = current.y - previous.y;
+      const dx = current.x - previous.x
+      const dy = current.y - previous.y
 
-      const cp1x = previous.x + dx * 0.3;
-      const cp1y = previous.y + dy * 0.2;
-      const cp2x = current.x - dx * 0.3;
-      const cp2y = current.y - dy * 0.2;
+      const cp1x = previous.x + dx * 0.3
+      const cp1y = previous.y + dy * 0.2
+      const cp2x = current.x - dx * 0.3
+      const cp2y = current.y - dy * 0.2
 
-      pathData += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${current.x} ${current.y}`;
+      pathData += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${current.x} ${current.y}`
     }
 
-    return pathData;
+    return pathData
   }
 
   /**
@@ -119,27 +119,27 @@ export class RailroadTrackGenerator {
    * Uses very gentle control points to avoid wobbles in straight sections
    */
   private generateGentlePath(waypoints: Waypoint[]): string {
-    if (waypoints.length < 2) return "";
+    if (waypoints.length < 2) return ''
 
-    let pathData = `M ${waypoints[0].x} ${waypoints[0].y}`;
+    let pathData = `M ${waypoints[0].x} ${waypoints[0].y}`
 
     for (let i = 1; i < waypoints.length; i++) {
-      const current = waypoints[i];
-      const previous = waypoints[i - 1];
+      const current = waypoints[i]
+      const previous = waypoints[i - 1]
 
       // Use extremely gentle control points for very dense sampling
-      const dx = current.x - previous.x;
-      const dy = current.y - previous.y;
+      const dx = current.x - previous.x
+      const dy = current.y - previous.y
 
-      const cp1x = previous.x + dx * 0.33;
-      const cp1y = previous.y + dy * 0.33;
-      const cp2x = current.x - dx * 0.33;
-      const cp2y = current.y - dy * 0.33;
+      const cp1x = previous.x + dx * 0.33
+      const cp1y = previous.y + dy * 0.33
+      const cp2x = current.x - dx * 0.33
+      const cp2y = current.y - dy * 0.33
 
-      pathData += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${current.x} ${current.y}`;
+      pathData += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${current.x} ${current.y}`
     }
 
-    return pathData;
+    return pathData
   }
 
   /**
@@ -147,71 +147,71 @@ export class RailroadTrackGenerator {
    * This requires an SVG path element to measure
    */
   generateTiesAndRails(pathElement: SVGPathElement): {
-    ties: Array<{ x1: number; y1: number; x2: number; y2: number }>;
-    leftRailPath: string;
-    rightRailPath: string;
+    ties: Array<{ x1: number; y1: number; x2: number; y2: number }>
+    leftRailPath: string
+    rightRailPath: string
   } {
-    const pathLength = pathElement.getTotalLength();
-    const tieSpacing = 12; // Distance between ties in pixels
-    const gaugeWidth = 15; // Standard gauge (tie extends 15px each side)
-    const tieCount = Math.floor(pathLength / tieSpacing);
+    const pathLength = pathElement.getTotalLength()
+    const tieSpacing = 12 // Distance between ties in pixels
+    const gaugeWidth = 15 // Standard gauge (tie extends 15px each side)
+    const tieCount = Math.floor(pathLength / tieSpacing)
 
-    const ties: Array<{ x1: number; y1: number; x2: number; y2: number }> = [];
+    const ties: Array<{ x1: number; y1: number; x2: number; y2: number }> = []
 
     // Generate ties at normal spacing
     for (let i = 0; i < tieCount; i++) {
-      const distance = i * tieSpacing;
-      const point = pathElement.getPointAtLength(distance);
+      const distance = i * tieSpacing
+      const point = pathElement.getPointAtLength(distance)
 
       // Calculate perpendicular angle for tie orientation
-      const nextDistance = Math.min(distance + 2, pathLength);
-      const nextPoint = pathElement.getPointAtLength(nextDistance);
-      const angle = Math.atan2(nextPoint.y - point.y, nextPoint.x - point.x);
-      const perpAngle = angle + Math.PI / 2;
+      const nextDistance = Math.min(distance + 2, pathLength)
+      const nextPoint = pathElement.getPointAtLength(nextDistance)
+      const angle = Math.atan2(nextPoint.y - point.y, nextPoint.x - point.x)
+      const perpAngle = angle + Math.PI / 2
 
       // Calculate tie end points
-      const leftX = point.x + Math.cos(perpAngle) * gaugeWidth;
-      const leftY = point.y + Math.sin(perpAngle) * gaugeWidth;
-      const rightX = point.x - Math.cos(perpAngle) * gaugeWidth;
-      const rightY = point.y - Math.sin(perpAngle) * gaugeWidth;
+      const leftX = point.x + Math.cos(perpAngle) * gaugeWidth
+      const leftY = point.y + Math.sin(perpAngle) * gaugeWidth
+      const rightX = point.x - Math.cos(perpAngle) * gaugeWidth
+      const rightY = point.y - Math.sin(perpAngle) * gaugeWidth
 
       // Store tie
-      ties.push({ x1: leftX, y1: leftY, x2: rightX, y2: rightY });
+      ties.push({ x1: leftX, y1: leftY, x2: rightX, y2: rightY })
     }
 
     // Generate rail paths as smooth curves (not polylines)
     // Sample points along the path and create offset waypoints
-    const railSampling = 2; // Sample every 2 pixels for waypoints (very dense sampling for smooth curves)
-    const sampleCount = Math.floor(pathLength / railSampling);
+    const railSampling = 2 // Sample every 2 pixels for waypoints (very dense sampling for smooth curves)
+    const sampleCount = Math.floor(pathLength / railSampling)
 
-    const leftRailWaypoints: Waypoint[] = [];
-    const rightRailWaypoints: Waypoint[] = [];
+    const leftRailWaypoints: Waypoint[] = []
+    const rightRailWaypoints: Waypoint[] = []
 
     for (let i = 0; i <= sampleCount; i++) {
-      const distance = Math.min(i * railSampling, pathLength);
-      const point = pathElement.getPointAtLength(distance);
+      const distance = Math.min(i * railSampling, pathLength)
+      const point = pathElement.getPointAtLength(distance)
 
       // Calculate perpendicular angle with longer lookahead for smoother curves
-      const nextDistance = Math.min(distance + 8, pathLength);
-      const nextPoint = pathElement.getPointAtLength(nextDistance);
-      const angle = Math.atan2(nextPoint.y - point.y, nextPoint.x - point.x);
-      const perpAngle = angle + Math.PI / 2;
+      const nextDistance = Math.min(distance + 8, pathLength)
+      const nextPoint = pathElement.getPointAtLength(nextDistance)
+      const angle = Math.atan2(nextPoint.y - point.y, nextPoint.x - point.x)
+      const perpAngle = angle + Math.PI / 2
 
       // Calculate offset positions for rails
-      const leftX = point.x + Math.cos(perpAngle) * gaugeWidth;
-      const leftY = point.y + Math.sin(perpAngle) * gaugeWidth;
-      const rightX = point.x - Math.cos(perpAngle) * gaugeWidth;
-      const rightY = point.y - Math.sin(perpAngle) * gaugeWidth;
+      const leftX = point.x + Math.cos(perpAngle) * gaugeWidth
+      const leftY = point.y + Math.sin(perpAngle) * gaugeWidth
+      const rightX = point.x - Math.cos(perpAngle) * gaugeWidth
+      const rightY = point.y - Math.sin(perpAngle) * gaugeWidth
 
-      leftRailWaypoints.push({ x: leftX, y: leftY });
-      rightRailWaypoints.push({ x: rightX, y: rightY });
+      leftRailWaypoints.push({ x: leftX, y: leftY })
+      rightRailWaypoints.push({ x: rightX, y: rightY })
     }
 
     // Generate smooth curved paths through the rail waypoints with gentle control points
-    const leftRailPath = this.generateGentlePath(leftRailWaypoints);
-    const rightRailPath = this.generateGentlePath(rightRailWaypoints);
+    const leftRailPath = this.generateGentlePath(leftRailWaypoints)
+    const rightRailPath = this.generateGentlePath(rightRailWaypoints)
 
-    return { ties, leftRailPath, rightRailPath };
+    return { ties, leftRailPath, rightRailPath }
   }
 
   /**
@@ -219,30 +219,28 @@ export class RailroadTrackGenerator {
    */
   getTrainTransform(
     pathElement: SVGPathElement,
-    progress: number, // 0-100%
+    progress: number // 0-100%
   ): { x: number; y: number; rotation: number } {
-    const pathLength = pathElement.getTotalLength();
-    const targetLength = (progress / 100) * pathLength;
+    const pathLength = pathElement.getTotalLength()
+    const targetLength = (progress / 100) * pathLength
 
     // Get exact point on curved path
-    const point = pathElement.getPointAtLength(targetLength);
+    const point = pathElement.getPointAtLength(targetLength)
 
     // Calculate rotation based on path direction
-    const lookAheadDistance = Math.min(5, pathLength - targetLength);
-    const nextPoint = pathElement.getPointAtLength(
-      targetLength + lookAheadDistance,
-    );
+    const lookAheadDistance = Math.min(5, pathLength - targetLength)
+    const nextPoint = pathElement.getPointAtLength(targetLength + lookAheadDistance)
 
     // Calculate angle between current and next point
-    const deltaX = nextPoint.x - point.x;
-    const deltaY = nextPoint.y - point.y;
-    const angleRadians = Math.atan2(deltaY, deltaX);
-    const angleDegrees = angleRadians * (180 / Math.PI);
+    const deltaX = nextPoint.x - point.x
+    const deltaY = nextPoint.y - point.y
+    const angleRadians = Math.atan2(deltaY, deltaX)
+    const angleDegrees = angleRadians * (180 / Math.PI)
 
     return {
       x: point.x,
       y: point.y,
       rotation: angleDegrees,
-    };
+    }
   }
 }
diff --git a/apps/web/src/app/arcade/complement-race/lib/gameTypes.ts b/apps/web/src/app/arcade/complement-race/lib/gameTypes.ts
index 905a228e..2349847b 100644
--- a/apps/web/src/app/arcade/complement-race/lib/gameTypes.ts
+++ b/apps/web/src/app/arcade/complement-race/lib/gameTypes.ts
@@ -1,181 +1,181 @@
-export type GameMode = "friends5" | "friends10" | "mixed";
-export type GameStyle = "practice" | "sprint" | "survival";
+export type GameMode = 'friends5' | 'friends10' | 'mixed'
+export type GameStyle = 'practice' | 'sprint' | 'survival'
 export type TimeoutSetting =
-  | "preschool"
-  | "kindergarten"
-  | "relaxed"
-  | "slow"
-  | "normal"
-  | "fast"
-  | "expert";
-export type ComplementDisplay = "number" | "abacus" | "random"; // How to display the complement number
+  | 'preschool'
+  | 'kindergarten'
+  | 'relaxed'
+  | 'slow'
+  | 'normal'
+  | 'fast'
+  | 'expert'
+export type ComplementDisplay = 'number' | 'abacus' | 'random' // How to display the complement number
 
 export interface ComplementQuestion {
-  number: number;
-  targetSum: number;
-  correctAnswer: number;
-  showAsAbacus: boolean; // For random mode, this is decided once per question
+  number: number
+  targetSum: number
+  correctAnswer: number
+  showAsAbacus: boolean // For random mode, this is decided once per question
 }
 
 export interface AIRacer {
-  id: string;
-  position: number;
-  speed: number;
-  name: string;
-  personality: "competitive" | "analytical";
-  icon: string;
-  lastComment: number;
-  commentCooldown: number;
-  previousPosition: number;
+  id: string
+  position: number
+  speed: number
+  name: string
+  personality: 'competitive' | 'analytical'
+  icon: string
+  lastComment: number
+  commentCooldown: number
+  previousPosition: number
 }
 
 export interface DifficultyTracker {
-  pairPerformance: Map<string, PairPerformance>;
-  baseTimeLimit: number;
-  currentTimeLimit: number;
-  difficultyLevel: number;
-  consecutiveCorrect: number;
-  consecutiveIncorrect: number;
-  learningMode: boolean;
-  adaptationRate: number;
+  pairPerformance: Map<string, PairPerformance>
+  baseTimeLimit: number
+  currentTimeLimit: number
+  difficultyLevel: number
+  consecutiveCorrect: number
+  consecutiveIncorrect: number
+  learningMode: boolean
+  adaptationRate: number
 }
 
 export interface PairPerformance {
-  attempts: number;
-  correct: number;
-  avgTime: number;
-  difficulty: number;
+  attempts: number
+  correct: number
+  avgTime: number
+  difficulty: number
 }
 
 export interface Station {
-  id: string;
-  name: string;
-  position: number; // 0-100% along track
-  icon: string;
-  emoji: string; // Alias for icon (for backward compatibility)
+  id: string
+  name: string
+  position: number // 0-100% along track
+  icon: string
+  emoji: string // Alias for icon (for backward compatibility)
 }
 
 export interface Passenger {
-  id: string;
-  name: string;
-  avatar: string;
-  originStationId: string;
-  destinationStationId: string;
-  isUrgent: boolean;
-  isBoarded: boolean;
-  isDelivered: boolean;
+  id: string
+  name: string
+  avatar: string
+  originStationId: string
+  destinationStationId: string
+  isUrgent: boolean
+  isBoarded: boolean
+  isDelivered: boolean
 }
 
 export interface GameState {
   // Game configuration
-  mode: GameMode;
-  style: GameStyle;
-  timeoutSetting: TimeoutSetting;
-  complementDisplay: ComplementDisplay; // How to display the complement number
+  mode: GameMode
+  style: GameStyle
+  timeoutSetting: TimeoutSetting
+  complementDisplay: ComplementDisplay // How to display the complement number
 
   // Current question
-  currentQuestion: ComplementQuestion | null;
-  previousQuestion: ComplementQuestion | null;
+  currentQuestion: ComplementQuestion | null
+  previousQuestion: ComplementQuestion | null
 
   // Game progress
-  score: number;
-  streak: number;
-  bestStreak: number;
-  totalQuestions: number;
-  correctAnswers: number;
+  score: number
+  streak: number
+  bestStreak: number
+  totalQuestions: number
+  correctAnswers: number
 
   // Game status
-  isGameActive: boolean;
-  isPaused: boolean;
-  gamePhase: "intro" | "controls" | "countdown" | "playing" | "results";
+  isGameActive: boolean
+  isPaused: boolean
+  gamePhase: 'intro' | 'controls' | 'countdown' | 'playing' | 'results'
 
   // Timing
-  gameStartTime: number | null;
-  questionStartTime: number;
+  gameStartTime: number | null
+  questionStartTime: number
 
   // Race mechanics
-  raceGoal: number;
-  timeLimit: number | null;
-  speedMultiplier: number;
-  aiRacers: AIRacer[];
+  raceGoal: number
+  timeLimit: number | null
+  speedMultiplier: number
+  aiRacers: AIRacer[]
 
   // Adaptive difficulty
-  difficultyTracker: DifficultyTracker;
+  difficultyTracker: DifficultyTracker
 
   // Survival mode specific
-  playerLap: number;
-  aiLaps: Map<string, number>;
-  survivalMultiplier: number;
+  playerLap: number
+  aiLaps: Map<string, number>
+  survivalMultiplier: number
 
   // Sprint mode specific
-  momentum: number;
-  trainPosition: number;
-  pressure: number; // 0-150 PSI
-  elapsedTime: number; // milliseconds elapsed in 60-second journey
-  lastCorrectAnswerTime: number;
-  currentRoute: number;
-  stations: Station[];
-  passengers: Passenger[];
-  deliveredPassengers: number;
-  cumulativeDistance: number; // Total distance across all routes
-  showRouteCelebration: boolean;
+  momentum: number
+  trainPosition: number
+  pressure: number // 0-150 PSI
+  elapsedTime: number // milliseconds elapsed in 60-second journey
+  lastCorrectAnswerTime: number
+  currentRoute: number
+  stations: Station[]
+  passengers: Passenger[]
+  deliveredPassengers: number
+  cumulativeDistance: number // Total distance across all routes
+  showRouteCelebration: boolean
 
   // Input
-  currentInput: string;
+  currentInput: string
 
   // UI state
-  showScoreModal: boolean;
-  activeSpeechBubbles: Map<string, string>; // racerId -> message
-  adaptiveFeedback: { message: string; type: string } | null;
+  showScoreModal: boolean
+  activeSpeechBubbles: Map<string, string> // racerId -> message
+  adaptiveFeedback: { message: string; type: string } | null
 }
 
 export type GameAction =
-  | { type: "SET_MODE"; mode: GameMode }
-  | { type: "SET_STYLE"; style: GameStyle }
-  | { type: "SET_TIMEOUT"; timeout: TimeoutSetting }
-  | { type: "SET_COMPLEMENT_DISPLAY"; display: ComplementDisplay }
-  | { type: "SHOW_CONTROLS" }
-  | { type: "START_COUNTDOWN" }
-  | { type: "BEGIN_GAME" }
-  | { type: "NEXT_QUESTION" }
-  | { type: "SUBMIT_ANSWER"; answer: number }
-  | { type: "UPDATE_INPUT"; input: string }
+  | { type: 'SET_MODE'; mode: GameMode }
+  | { type: 'SET_STYLE'; style: GameStyle }
+  | { type: 'SET_TIMEOUT'; timeout: TimeoutSetting }
+  | { type: 'SET_COMPLEMENT_DISPLAY'; display: ComplementDisplay }
+  | { type: 'SHOW_CONTROLS' }
+  | { type: 'START_COUNTDOWN' }
+  | { type: 'BEGIN_GAME' }
+  | { 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: 'TRIGGER_AI_COMMENTARY'
+      racerId: string
+      message: string
+      context: string
     }
-  | { type: "CLEAR_AI_COMMENT"; racerId: string }
-  | { type: "UPDATE_DIFFICULTY_TRACKER"; tracker: DifficultyTracker }
-  | { type: "UPDATE_AI_SPEEDS"; racers: AIRacer[] }
+  | { type: 'CLEAR_AI_COMMENT'; racerId: string }
+  | { type: 'UPDATE_DIFFICULTY_TRACKER'; tracker: DifficultyTracker }
+  | { type: 'UPDATE_AI_SPEEDS'; racers: AIRacer[] }
   | {
-      type: "SHOW_ADAPTIVE_FEEDBACK";
-      feedback: { message: string; type: string };
+      type: 'SHOW_ADAPTIVE_FEEDBACK'
+      feedback: { message: string; type: string }
     }
-  | { type: "CLEAR_ADAPTIVE_FEEDBACK" }
-  | { type: "UPDATE_MOMENTUM"; momentum: number }
-  | { type: "UPDATE_TRAIN_POSITION"; position: number }
+  | { 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" }
-  | { type: "END_RACE" }
-  | { type: "SHOW_RESULTS" }
-  | { type: "RESET_GAME" }
-  | { type: "GENERATE_PASSENGERS"; passengers: Passenger[] }
-  | { type: "BOARD_PASSENGER"; passengerId: string }
-  | { type: "DELIVER_PASSENGER"; passengerId: string; points: number }
-  | { type: "START_NEW_ROUTE"; routeNumber: number; stations: Station[] }
-  | { type: "COMPLETE_ROUTE" }
-  | { type: "HIDE_ROUTE_CELEBRATION" };
+  | { type: 'COMPLETE_LAP'; racerId: string }
+  | { type: 'PAUSE_RACE' }
+  | { type: 'RESUME_RACE' }
+  | { type: 'END_RACE' }
+  | { type: 'SHOW_RESULTS' }
+  | { type: 'RESET_GAME' }
+  | { type: 'GENERATE_PASSENGERS'; passengers: Passenger[] }
+  | { type: 'BOARD_PASSENGER'; passengerId: string }
+  | { type: 'DELIVER_PASSENGER'; passengerId: string; points: number }
+  | { type: 'START_NEW_ROUTE'; routeNumber: number; stations: Station[] }
+  | { type: 'COMPLETE_ROUTE' }
+  | { type: 'HIDE_ROUTE_CELEBRATION' }
diff --git a/apps/web/src/app/arcade/complement-race/lib/landmarks.ts b/apps/web/src/app/arcade/complement-race/lib/landmarks.ts
index 13d9bbb1..fe52a970 100644
--- a/apps/web/src/app/arcade/complement-race/lib/landmarks.ts
+++ b/apps/web/src/app/arcade/complement-race/lib/landmarks.ts
@@ -4,10 +4,10 @@
  */
 
 export interface Landmark {
-  emoji: string;
-  position: number; // 0-100% along track
-  offset: { x: number; y: number }; // Offset from track position
-  size: number; // Font size multiplier
+  emoji: string
+  position: number // 0-100% along track
+  offset: { x: number; y: number } // Offset from track position
+  size: number // Font size multiplier
 }
 
 /**
@@ -15,77 +15,77 @@ export interface Landmark {
  * Different route themes have different landmark types
  */
 export function generateLandmarks(routeNumber: number): Landmark[] {
-  const seed = routeNumber * 456.789;
+  const seed = routeNumber * 456.789
 
   // Deterministic randomness for landmark placement
   const random = (index: number) => {
-    return Math.abs(Math.sin(seed + index * 2.7));
-  };
+    return Math.abs(Math.sin(seed + index * 2.7))
+  }
 
-  const landmarks: Landmark[] = [];
+  const landmarks: Landmark[] = []
 
   // Route theme determines landmark types
-  const themeIndex = (routeNumber - 1) % 10;
+  const themeIndex = (routeNumber - 1) % 10
 
   // Generate 4-6 landmarks along the route
-  const landmarkCount = Math.floor(random(0) * 3) + 4;
+  const landmarkCount = Math.floor(random(0) * 3) + 4
 
   for (let i = 0; i < landmarkCount; i++) {
-    const position = (i + 1) * (100 / (landmarkCount + 1));
-    const offsetSide = random(i) > 0.5 ? 1 : -1;
-    const offsetDistance = 30 + random(i + 10) * 40;
+    const position = (i + 1) * (100 / (landmarkCount + 1))
+    const offsetSide = random(i) > 0.5 ? 1 : -1
+    const offsetDistance = 30 + random(i + 10) * 40
 
-    let emoji = "🌳"; // Default tree
-    let size = 24;
+    let emoji = '🌳' // Default tree
+    let size = 24
 
     // Choose emoji based on theme and position
     switch (themeIndex) {
       case 0: // Prairie Express
-        emoji = random(i) > 0.6 ? "🌾" : "🌻";
-        size = 20;
-        break;
+        emoji = random(i) > 0.6 ? '🌾' : '🌻'
+        size = 20
+        break
       case 1: // Mountain Climb
-        emoji = random(i) > 0.5 ? "⛰️" : "🗻";
-        size = 32;
-        break;
+        emoji = random(i) > 0.5 ? '⛰️' : '🗻'
+        size = 32
+        break
       case 2: // Coastal Run
-        emoji = random(i) > 0.7 ? "🌊" : random(i) > 0.4 ? "🏖️" : "⛵";
-        size = 24;
-        break;
+        emoji = random(i) > 0.7 ? '🌊' : random(i) > 0.4 ? '🏖️' : '⛵'
+        size = 24
+        break
       case 3: // Desert Crossing
-        emoji = random(i) > 0.6 ? "🌵" : "🏜️";
-        size = 28;
-        break;
+        emoji = random(i) > 0.6 ? '🌵' : '🏜️'
+        size = 28
+        break
       case 4: // Forest Trail
-        emoji = random(i) > 0.7 ? "🌲" : random(i) > 0.4 ? "🌳" : "🦌";
-        size = 26;
-        break;
+        emoji = random(i) > 0.7 ? '🌲' : random(i) > 0.4 ? '🌳' : '🦌'
+        size = 26
+        break
       case 5: // Canyon Route
-        emoji = random(i) > 0.5 ? "🏞️" : "🪨";
-        size = 30;
-        break;
+        emoji = random(i) > 0.5 ? '🏞️' : '🪨'
+        size = 30
+        break
       case 6: // River Valley
-        emoji = random(i) > 0.6 ? "🌊" : random(i) > 0.3 ? "🌳" : "🦆";
-        size = 24;
-        break;
+        emoji = random(i) > 0.6 ? '🌊' : random(i) > 0.3 ? '🌳' : '🦆'
+        size = 24
+        break
       case 7: // Highland Pass
-        emoji = random(i) > 0.6 ? "🗻" : "☁️";
-        size = 28;
-        break;
+        emoji = random(i) > 0.6 ? '🗻' : '☁️'
+        size = 28
+        break
       case 8: // Lakeside Journey
-        emoji = random(i) > 0.7 ? "🏞️" : random(i) > 0.4 ? "🌳" : "🦢";
-        size = 26;
-        break;
+        emoji = random(i) > 0.7 ? '🏞️' : random(i) > 0.4 ? '🌳' : '🦢'
+        size = 26
+        break
       case 9: // Grand Circuit
-        emoji = random(i) > 0.7 ? "🎪" : random(i) > 0.4 ? "🎡" : "🎠";
-        size = 28;
-        break;
+        emoji = random(i) > 0.7 ? '🎪' : random(i) > 0.4 ? '🎡' : '🎠'
+        size = 28
+        break
     }
 
     // Add bridges at specific positions (around 40-60%)
     if (position > 40 && position < 60 && random(i + 20) > 0.7) {
-      emoji = "🌉";
-      size = 36;
+      emoji = '🌉'
+      size = 36
     }
 
     landmarks.push({
@@ -96,8 +96,8 @@ export function generateLandmarks(routeNumber: number): Landmark[] {
         y: random(i + 5) * 20 - 10,
       },
       size,
-    });
+    })
   }
 
-  return landmarks;
+  return landmarks
 }
diff --git a/apps/web/src/app/arcade/complement-race/lib/passengerGenerator.ts b/apps/web/src/app/arcade/complement-race/lib/passengerGenerator.ts
index 5795fbb8..d069b950 100644
--- a/apps/web/src/app/arcade/complement-race/lib/passengerGenerator.ts
+++ b/apps/web/src/app/arcade/complement-race/lib/passengerGenerator.ts
@@ -1,217 +1,212 @@
-import type { Passenger, Station } from "./gameTypes";
+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
  * 30% chance of urgent passengers
  */
 export function generatePassengers(stations: Station[]): Passenger[] {
-  const count = Math.floor(Math.random() * 3) + 3; // 3-5 passengers
-  const passengers: Passenger[] = [];
-  const usedCombos = new Set<string>();
+  const count = Math.floor(Math.random() * 3) + 3 // 3-5 passengers
+  const passengers: Passenger[] = []
+  const usedCombos = new Set<string>()
 
   for (let i = 0; i < count; i++) {
-    let name: string;
-    let avatar: string;
-    let comboKey: string;
+    let name: string
+    let avatar: string
+    let comboKey: string
 
     // Keep trying until we get a unique name/avatar combo
     do {
       // Randomly choose a gender category
-      const genderRoll = Math.random();
-      let namePool: string[];
-      let avatarPool: string[];
+      const genderRoll = Math.random()
+      let namePool: string[]
+      let avatarPool: string[]
 
       if (genderRoll < 0.45) {
         // 45% masculine
-        namePool = MASCULINE_NAMES;
-        avatarPool = MASCULINE_AVATARS;
+        namePool = MASCULINE_NAMES
+        avatarPool = MASCULINE_AVATARS
       } else if (genderRoll < 0.9) {
         // 45% feminine
-        namePool = FEMININE_NAMES;
-        avatarPool = FEMININE_AVATARS;
+        namePool = FEMININE_NAMES
+        avatarPool = FEMININE_AVATARS
       } else {
         // 10% neutral
-        namePool = GENDER_NEUTRAL_NAMES;
-        avatarPool = NEUTRAL_AVATARS;
+        namePool = GENDER_NEUTRAL_NAMES
+        avatarPool = NEUTRAL_AVATARS
       }
 
       // Pick from the chosen category
-      name = namePool[Math.floor(Math.random() * namePool.length)];
-      avatar = avatarPool[Math.floor(Math.random() * avatarPool.length)];
-      comboKey = `${name}-${avatar}`;
-    } while (usedCombos.has(comboKey) && usedCombos.size < 100); // Prevent infinite loop
+      name = namePool[Math.floor(Math.random() * namePool.length)]
+      avatar = avatarPool[Math.floor(Math.random() * avatarPool.length)]
+      comboKey = `${name}-${avatar}`
+    } while (usedCombos.has(comboKey) && usedCombos.size < 100) // Prevent infinite loop
 
-    usedCombos.add(comboKey);
+    usedCombos.add(comboKey)
 
     // Pick random origin and destination stations (must be different)
     // Destination must be ahead of origin (higher position on track)
     // 40% chance to start at depot, 60% chance to start at other stations
-    let originStation: Station;
-    let destination: Station;
+    let originStation: Station
+    let destination: Station
 
     if (Math.random() < 0.4 || stations.length < 3) {
       // Start at depot (first station)
-      originStation = stations[0];
+      originStation = stations[0]
       // Pick any station ahead as destination
-      const stationsAhead = stations.slice(1);
-      destination =
-        stationsAhead[Math.floor(Math.random() * stationsAhead.length)];
+      const stationsAhead = stations.slice(1)
+      destination = stationsAhead[Math.floor(Math.random() * stationsAhead.length)]
     } else {
       // Start at a random non-depot, non-final station
-      const nonDepotStations = stations.slice(1, -1); // Exclude depot and final station
-      originStation =
-        nonDepotStations[Math.floor(Math.random() * nonDepotStations.length)];
+      const nonDepotStations = stations.slice(1, -1) // Exclude depot and final station
+      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,
-      );
-      destination =
-        stationsAhead[Math.floor(Math.random() * stationsAhead.length)];
+      const stationsAhead = stations.filter((s) => s.position > originStation.position)
+      destination = stationsAhead[Math.floor(Math.random() * stationsAhead.length)]
     }
 
     // 30% chance of urgent
-    const isUrgent = Math.random() < 0.3;
+    const isUrgent = Math.random() < 0.3
 
     passengers.push({
       id: `passenger-${Date.now()}-${i}`,
@@ -222,20 +217,17 @@ export function generatePassengers(stations: Station[]): Passenger[] {
       isUrgent,
       isBoarded: false,
       isDelivered: false,
-    });
+    })
   }
 
-  return passengers;
+  return passengers
 }
 
 /**
  * Check if train is at a station (within 3% tolerance)
  */
-export function isTrainAtStation(
-  trainPosition: number,
-  stationPosition: number,
-): boolean {
-  return Math.abs(trainPosition - stationPosition) < 3;
+export function isTrainAtStation(trainPosition: number, stationPosition: number): boolean {
+  return Math.abs(trainPosition - stationPosition) < 3
 }
 
 /**
@@ -244,23 +236,23 @@ export function isTrainAtStation(
 export function findBoardablePassengers(
   passengers: Passenger[],
   stations: Station[],
-  trainPosition: number,
+  trainPosition: number
 ): Passenger[] {
-  const boardable: Passenger[] = [];
+  const boardable: Passenger[] = []
 
   for (const passenger of passengers) {
     // Skip if already boarded or delivered
-    if (passenger.isBoarded || passenger.isDelivered) continue;
+    if (passenger.isBoarded || passenger.isDelivered) continue
 
-    const station = stations.find((s) => s.id === passenger.originStationId);
-    if (!station) continue;
+    const station = stations.find((s) => s.id === passenger.originStationId)
+    if (!station) continue
 
     if (isTrainAtStation(trainPosition, station.position)) {
-      boardable.push(passenger);
+      boardable.push(passenger)
     }
   }
 
-  return boardable;
+  return boardable
 }
 
 /**
@@ -269,30 +261,28 @@ export function findBoardablePassengers(
 export function findDeliverablePassengers(
   passengers: Passenger[],
   stations: Station[],
-  trainPosition: number,
+  trainPosition: number
 ): Array<{ passenger: Passenger; station: Station; points: number }> {
   const deliverable: Array<{
-    passenger: Passenger;
-    station: Station;
-    points: number;
-  }> = [];
+    passenger: Passenger
+    station: Station
+    points: number
+  }> = []
 
   for (const passenger of passengers) {
     // Only check boarded passengers
-    if (!passenger.isBoarded || passenger.isDelivered) continue;
+    if (!passenger.isBoarded || passenger.isDelivered) continue
 
-    const station = stations.find(
-      (s) => s.id === passenger.destinationStationId,
-    );
-    if (!station) continue;
+    const station = stations.find((s) => s.id === passenger.destinationStationId)
+    if (!station) continue
 
     if (isTrainAtStation(trainPosition, station.position)) {
-      const points = passenger.isUrgent ? 20 : 10;
-      deliverable.push({ passenger, station, points });
+      const points = passenger.isUrgent ? 20 : 10
+      deliverable.push({ passenger, station, points })
     }
   }
 
-  return deliverable;
+  return deliverable
 }
 
 /**
@@ -301,49 +291,45 @@ export function findDeliverablePassengers(
  */
 export function calculateMaxConcurrentPassengers(
   passengers: Passenger[],
-  stations: Station[],
+  stations: Station[]
 ): number {
   // Create events for boarding and delivery
   interface StationEvent {
-    position: number;
-    isBoarding: boolean; // true = board, false = delivery
+    position: number
+    isBoarding: boolean // true = board, false = delivery
   }
 
-  const events: StationEvent[] = [];
+  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 });
-      events.push({ position: destStation.position, isBoarding: false });
+      events.push({ position: originStation.position, isBoarding: true })
+      events.push({ position: destStation.position, isBoarding: false })
     }
   }
 
   // Sort events by position, with deliveries before boardings at the same position
   events.sort((a, b) => {
-    if (a.position !== b.position) return a.position - b.position;
+    if (a.position !== b.position) return a.position - b.position
     // At same position, deliveries happen before boarding
-    return a.isBoarding ? 1 : -1;
-  });
+    return a.isBoarding ? 1 : -1
+  })
 
   // Track current passenger count and maximum
-  let currentCount = 0;
-  let maxCount = 0;
+  let currentCount = 0
+  let maxCount = 0
 
   for (const event of events) {
     if (event.isBoarding) {
-      currentCount++;
-      maxCount = Math.max(maxCount, currentCount);
+      currentCount++
+      maxCount = Math.max(maxCount, currentCount)
     } else {
-      currentCount--;
+      currentCount--
     }
   }
 
-  return maxCount;
+  return maxCount
 }
diff --git a/apps/web/src/app/arcade/complement-race/lib/routeThemes.ts b/apps/web/src/app/arcade/complement-race/lib/routeThemes.ts
index 5fef3bb8..82524787 100644
--- a/apps/web/src/app/arcade/complement-race/lib/routeThemes.ts
+++ b/apps/web/src/app/arcade/complement-race/lib/routeThemes.ts
@@ -4,26 +4,26 @@
  */
 
 export const ROUTE_THEMES = [
-  { name: "Prairie Express", emoji: "🌾" },
-  { name: "Mountain Climb", emoji: "⛰️" },
-  { name: "Coastal Run", emoji: "🌊" },
-  { name: "Desert Crossing", emoji: "🏜️" },
-  { name: "Forest Trail", emoji: "🌲" },
-  { name: "Canyon Route", emoji: "🏞️" },
-  { name: "River Valley", emoji: "🏞️" },
-  { name: "Highland Pass", emoji: "🗻" },
-  { name: "Lakeside Journey", emoji: "🏔️" },
-  { name: "Grand Circuit", emoji: "🎪" },
-];
+  { name: 'Prairie Express', emoji: '🌾' },
+  { name: 'Mountain Climb', emoji: '⛰️' },
+  { name: 'Coastal Run', emoji: '🌊' },
+  { name: 'Desert Crossing', emoji: '🏜️' },
+  { name: 'Forest Trail', emoji: '🌲' },
+  { name: 'Canyon Route', emoji: '🏞️' },
+  { name: 'River Valley', emoji: '🏞️' },
+  { name: 'Highland Pass', emoji: '🗻' },
+  { name: 'Lakeside Journey', emoji: '🏔️' },
+  { name: 'Grand Circuit', emoji: '🎪' },
+]
 
 /**
  * Get route theme for a given route number
  * Cycles through themes if route number exceeds available themes
  */
 export function getRouteTheme(routeNumber: number): {
-  name: string;
-  emoji: string;
+  name: string
+  emoji: string
 } {
-  const index = (routeNumber - 1) % ROUTE_THEMES.length;
-  return ROUTE_THEMES[index];
+  const index = (routeNumber - 1) % ROUTE_THEMES.length
+  return ROUTE_THEMES[index]
 }
diff --git a/apps/web/src/app/arcade/complement-race/page.tsx b/apps/web/src/app/arcade/complement-race/page.tsx
index b0d5d6a8..3aef2b81 100644
--- 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";
+'use client'
 
-import { PageWithNav } from "@/components/PageWithNav";
-import { ComplementRaceGame } from "./components/ComplementRaceGame";
-import { ComplementRaceProvider } from "@/arcade-games/complement-race/Provider";
+import { PageWithNav } from '@/components/PageWithNav'
+import { ComplementRaceGame } from './components/ComplementRaceGame'
+import { ComplementRaceProvider } from '@/arcade-games/complement-race/Provider'
 
 export default function ComplementRacePage() {
   return (
@@ -11,5 +11,5 @@ export default function ComplementRacePage() {
         <ComplementRaceGame />
       </ComplementRaceProvider>
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/practice/page.tsx b/apps/web/src/app/arcade/complement-race/practice/page.tsx
index 245b35dd..9398a986 100644
--- 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";
+'use client'
 
-import { PageWithNav } from "@/components/PageWithNav";
-import { ComplementRaceGame } from "../components/ComplementRaceGame";
-import { ComplementRaceProvider } from "@/arcade-games/complement-race/Provider";
+import { PageWithNav } from '@/components/PageWithNav'
+import { ComplementRaceGame } from '../components/ComplementRaceGame'
+import { ComplementRaceProvider } from '@/arcade-games/complement-race/Provider'
 
 export default function PracticeModePage() {
   return (
@@ -11,5 +11,5 @@ export default function PracticeModePage() {
         <ComplementRaceGame />
       </ComplementRaceProvider>
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/sprint/page.tsx b/apps/web/src/app/arcade/complement-race/sprint/page.tsx
index 6d805162..a7f40dd6 100644
--- 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";
+'use client'
 
-import { PageWithNav } from "@/components/PageWithNav";
-import { ComplementRaceGame } from "../components/ComplementRaceGame";
-import { ComplementRaceProvider } from "@/arcade-games/complement-race/Provider";
+import { PageWithNav } from '@/components/PageWithNav'
+import { ComplementRaceGame } from '../components/ComplementRaceGame'
+import { ComplementRaceProvider } from '@/arcade-games/complement-race/Provider'
 
 export default function SprintModePage() {
   return (
@@ -11,5 +11,5 @@ export default function SprintModePage() {
         <ComplementRaceGame />
       </ComplementRaceProvider>
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/complement-race/survival/page.tsx b/apps/web/src/app/arcade/complement-race/survival/page.tsx
index 6ed2828e..6ba300c3 100644
--- 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";
+'use client'
 
-import { PageWithNav } from "@/components/PageWithNav";
-import { ComplementRaceGame } from "../components/ComplementRaceGame";
-import { ComplementRaceProvider } from "@/arcade-games/complement-race/Provider";
+import { PageWithNav } from '@/components/PageWithNav'
+import { ComplementRaceGame } from '../components/ComplementRaceGame'
+import { ComplementRaceProvider } from '@/arcade-games/complement-race/Provider'
 
 export default function SurvivalModePage() {
   return (
@@ -11,5 +11,5 @@ export default function SurvivalModePage() {
         <ComplementRaceGame />
       </ComplementRaceProvider>
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/memory-quiz/page.tsx b/apps/web/src/app/arcade/memory-quiz/page.tsx
index 22538934..54675149 100644
--- a/apps/web/src/app/arcade/memory-quiz/page.tsx
+++ b/apps/web/src/app/arcade/memory-quiz/page.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client'
 
-import { useEffect } from "react";
-import { useRouter } from "next/navigation";
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
 
 /**
  * Memory Quiz redirect page
@@ -15,50 +15,50 @@ import { useRouter } from "next/navigation";
  * 3. Play in multiplayer or solo (single-player room)
  */
 export default function MemoryQuizRedirectPage() {
-  const router = useRouter();
+  const router = useRouter()
 
   useEffect(() => {
     // Redirect to arcade
-    router.replace("/arcade");
-  }, [router]);
+    router.replace('/arcade')
+  }, [router])
 
   return (
     <div
       style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        minHeight: "100vh",
-        padding: "20px",
-        background: "linear-gradient(135deg, #f8fafc, #e2e8f0)",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        padding: '20px',
+        background: 'linear-gradient(135deg, #f8fafc, #e2e8f0)',
       }}
     >
       <div
         style={{
-          fontSize: "48px",
-          marginBottom: "20px",
+          fontSize: '48px',
+          marginBottom: '20px',
         }}
       >
         🧠
       </div>
       <h1
         style={{
-          fontSize: "24px",
-          fontWeight: "bold",
-          marginBottom: "12px",
-          color: "#1f2937",
-          textAlign: "center",
+          fontSize: '24px',
+          fontWeight: 'bold',
+          marginBottom: '12px',
+          color: '#1f2937',
+          textAlign: 'center',
         }}
       >
         Redirecting to Champion Arena...
       </h1>
       <p
         style={{
-          fontSize: "16px",
-          color: "#6b7280",
-          textAlign: "center",
-          maxWidth: "500px",
+          fontSize: '16px',
+          color: '#6b7280',
+          textAlign: 'center',
+          maxWidth: '500px',
         }}
       >
         Memory Lightning is now part of the Champion Arena.
@@ -66,5 +66,5 @@ export default function MemoryQuizRedirectPage() {
         You'll be able to play solo or with friends in multiplayer mode!
       </p>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/page.tsx b/apps/web/src/app/arcade/page.tsx
index 50b7b19f..be929a0f 100644
--- a/apps/web/src/app/arcade/page.tsx
+++ b/apps/web/src/app/arcade/page.tsx
@@ -1,18 +1,14 @@
-"use client";
+'use client'
 
-import { useRouter } from "next/navigation";
-import { useState, useEffect } from "react";
-import {
-  useRoomData,
-  useSetRoomGame,
-  useCreateRoom,
-} from "@/hooks/useRoomData";
-import { useViewerId } from "@/hooks/useViewerId";
-import { GAMES_CONFIG } from "@/components/GameSelector";
-import type { GameType } from "@/components/GameSelector";
-import { PageWithNav } from "@/components/PageWithNav";
-import { css } from "../../../styled-system/css";
-import { getAllGames, getGame, hasGame } from "@/lib/arcade/game-registry";
+import { useRouter } from 'next/navigation'
+import { useState, useEffect } from 'react'
+import { useRoomData, useSetRoomGame, useCreateRoom } from '@/hooks/useRoomData'
+import { useViewerId } from '@/hooks/useViewerId'
+import { GAMES_CONFIG } from '@/components/GameSelector'
+import type { GameType } from '@/components/GameSelector'
+import { PageWithNav } from '@/components/PageWithNav'
+import { css } from '../../../styled-system/css'
+import { getAllGames, getGame, hasGame } from '@/lib/arcade/game-registry'
 
 /**
  * /arcade - Renders the game for the user's current room
@@ -30,12 +26,12 @@ import { getAllGames, getGame, hasGame } from "@/lib/arcade/game-registry";
  * Test: Verifying compose-updater automatic deployment cycle
  */
 export default function RoomPage() {
-  const router = useRouter();
-  const { roomData, isLoading } = useRoomData();
-  const { data: viewerId } = useViewerId();
-  const { mutate: setRoomGame } = useSetRoomGame();
-  const { mutate: createRoom, isPending: isCreatingRoom } = useCreateRoom();
-  const [permissionError, setPermissionError] = useState<string | null>(null);
+  const router = useRouter()
+  const { roomData, isLoading } = useRoomData()
+  const { data: viewerId } = useViewerId()
+  const { mutate: setRoomGame } = useSetRoomGame()
+  const { mutate: createRoom, isPending: isCreatingRoom } = useCreateRoom()
+  const [permissionError, setPermissionError] = useState<string | null>(null)
 
   // Auto-create room when user has no room
   // This happens when:
@@ -43,46 +39,43 @@ export default function RoomPage() {
   // 2. After leaving a room
   useEffect(() => {
     if (!isLoading && !roomData && viewerId && !isCreatingRoom) {
-      console.log(
-        "[RoomPage] No room found, auto-creating room for user:",
-        viewerId,
-      );
+      console.log('[RoomPage] No room found, auto-creating room for user:', viewerId)
 
       createRoom(
         {
-          name: "My Room",
+          name: 'My Room',
           gameName: null, // No game selected yet
           gameConfig: undefined, // No game config since no game selected
-          accessMode: "open" as const, // Open by default - user can change settings later
+          accessMode: 'open' as const, // Open by default - user can change settings later
         },
         {
           onSuccess: (newRoom) => {
-            console.log("[RoomPage] Successfully created room:", newRoom.id);
+            console.log('[RoomPage] Successfully created room:', newRoom.id)
           },
           onError: (error) => {
-            console.error("[RoomPage] Failed to auto-create room:", error);
+            console.error('[RoomPage] Failed to auto-create room:', error)
           },
-        },
-      );
+        }
+      )
     }
-  }, [isLoading, roomData, viewerId, isCreatingRoom, createRoom]);
+  }, [isLoading, roomData, viewerId, isCreatingRoom, createRoom])
 
   // Show loading state (includes both initial load and room creation)
   if (isLoading || isCreatingRoom) {
     return (
       <div
         style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100vh",
-          fontSize: "18px",
-          color: "token(colors.text.secondary)",
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          fontSize: '18px',
+          color: 'token(colors.text.secondary)',
         }}
       >
-        {isCreatingRoom ? "Creating solo room..." : "Loading room..."}
+        {isCreatingRoom ? 'Creating solo room...' : 'Loading room...'}
       </div>
-    );
+    )
   }
 
   // If still no room after loading and creation attempt, show fallback
@@ -91,61 +84,54 @@ export default function RoomPage() {
     return (
       <div
         style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100vh",
-          fontSize: "18px",
-          color: "token(colors.text.secondary)",
-          gap: "1rem",
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          fontSize: '18px',
+          color: 'token(colors.text.secondary)',
+          gap: '1rem',
         }}
       >
         <div>Unable to create room</div>
-        <div style={{ fontSize: "14px", color: "#999" }}>
-          Please try refreshing the page
-        </div>
+        <div style={{ fontSize: '14px', color: '#999' }}>Please try refreshing the page</div>
       </div>
-    );
+    )
   }
 
   // Show game selection if no game is set
   if (!roomData.gameName) {
     // Determine if current user is the host
-    const currentMember = roomData.members.find((m) => m.userId === viewerId);
-    const isHost = currentMember?.isCreator === true;
-    const hostMember = roomData.members.find((m) => m.isCreator);
+    const currentMember = roomData.members.find((m) => m.userId === viewerId)
+    const isHost = currentMember?.isCreator === true
+    const hostMember = roomData.members.find((m) => m.isCreator)
 
     const handleGameSelect = (gameType: GameType) => {
-      console.log(
-        "[RoomPage] handleGameSelect called with gameType:",
-        gameType,
-      );
+      console.log('[RoomPage] handleGameSelect called with gameType:', gameType)
 
       // Check if user is host before allowing selection
       if (!isHost) {
         setPermissionError(
-          `Only the room host can select a game. Ask ${hostMember?.displayName || "the host"} to choose.`,
-        );
+          `Only the room host can select a game. Ask ${hostMember?.displayName || 'the host'} to choose.`
+        )
         // Clear error after 5 seconds
-        setTimeout(() => setPermissionError(null), 5000);
-        return;
+        setTimeout(() => setPermissionError(null), 5000)
+        return
       }
 
       // Clear any previous errors
-      setPermissionError(null);
+      setPermissionError(null)
 
       // All games are now in the registry
       if (hasGame(gameType)) {
-        const gameDef = getGame(gameType);
+        const gameDef = getGame(gameType)
         if (!gameDef?.manifest.available) {
-          console.log(
-            "[RoomPage] Registry game not available, blocking selection",
-          );
-          return;
+          console.log('[RoomPage] Registry game not available, blocking selection')
+          return
         }
 
-        console.log("[RoomPage] Selecting registry game:", gameType);
+        console.log('[RoomPage] Selecting registry game:', gameType)
         setRoomGame(
           {
             roomId: roomData.id,
@@ -153,47 +139,45 @@ export default function RoomPage() {
           },
           {
             onError: (error: any) => {
-              console.error("[RoomPage] Failed to set game:", error);
+              console.error('[RoomPage] Failed to set game:', error)
               setPermissionError(
-                error.message ||
-                  "Failed to select game. Only the host can change games.",
-              );
-              setTimeout(() => setPermissionError(null), 5000);
+                error.message || 'Failed to select game. Only the host can change games.'
+              )
+              setTimeout(() => setPermissionError(null), 5000)
             },
-          },
-        );
-        return;
+          }
+        )
+        return
       }
 
-      console.log("[RoomPage] Unknown game type:", gameType);
-    };
+      console.log('[RoomPage] Unknown game type:', gameType)
+    }
 
     return (
       <PageWithNav
         navTitle="Choose Game"
         navEmoji="🎮"
         emphasizePlayerSelection={true}
-        onExitSession={() => router.push("/arcade")}
+        onExitSession={() => router.push('/arcade')}
       >
         <div
           className={css({
-            minHeight: "100vh",
-            background:
-              "linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: "4",
+            minHeight: '100vh',
+            background: 'linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '4',
           })}
         >
           <h1
             className={css({
-              fontSize: { base: "2xl", md: "3xl" },
-              fontWeight: "bold",
-              color: "text.inverse",
-              mb: "4",
-              textAlign: "center",
+              fontSize: { base: '2xl', md: '3xl' },
+              fontWeight: 'bold',
+              color: 'text.inverse',
+              mb: '4',
+              textAlign: 'center',
             })}
           >
             Choose a Game
@@ -202,21 +186,21 @@ export default function RoomPage() {
           {/* Host info and permission messaging */}
           <div
             className={css({
-              maxWidth: "800px",
-              width: "100%",
-              mb: "6",
+              maxWidth: '800px',
+              width: '100%',
+              mb: '6',
             })}
           >
             {isHost ? (
               <div
                 className={css({
-                  background: "rgba(34, 197, 94, 0.1)",
-                  border: "1px solid rgba(34, 197, 94, 0.3)",
-                  borderRadius: "8px",
-                  padding: "12px 16px",
-                  color: "#86efac",
-                  fontSize: "sm",
-                  textAlign: "center",
+                  background: 'rgba(34, 197, 94, 0.1)',
+                  border: '1px solid rgba(34, 197, 94, 0.3)',
+                  borderRadius: '8px',
+                  padding: '12px 16px',
+                  color: '#86efac',
+                  fontSize: 'sm',
+                  textAlign: 'center',
                 })}
               >
                 👑 You're the room host. Select a game to start playing.
@@ -224,17 +208,16 @@ export default function RoomPage() {
             ) : (
               <div
                 className={css({
-                  background: "rgba(234, 179, 8, 0.1)",
-                  border: "1px solid rgba(234, 179, 8, 0.3)",
-                  borderRadius: "8px",
-                  padding: "12px 16px",
-                  color: "#fde047",
-                  fontSize: "sm",
-                  textAlign: "center",
+                  background: 'rgba(234, 179, 8, 0.1)',
+                  border: '1px solid rgba(234, 179, 8, 0.3)',
+                  borderRadius: '8px',
+                  padding: '12px 16px',
+                  color: '#fde047',
+                  fontSize: 'sm',
+                  textAlign: 'center',
                 })}
               >
-                ⏳ Waiting for {hostMember?.displayName || "the host"} to select
-                a game...
+                ⏳ Waiting for {hostMember?.displayName || 'the host'} to select a game...
               </div>
             )}
 
@@ -242,14 +225,14 @@ export default function RoomPage() {
             {permissionError && (
               <div
                 className={css({
-                  background: "rgba(239, 68, 68, 0.1)",
-                  border: "1px solid rgba(239, 68, 68, 0.3)",
-                  borderRadius: "8px",
-                  padding: "12px 16px",
-                  color: "#fca5a5",
-                  fontSize: "sm",
-                  textAlign: "center",
-                  mt: "3",
+                  background: 'rgba(239, 68, 68, 0.1)',
+                  border: '1px solid rgba(239, 68, 68, 0.3)',
+                  borderRadius: '8px',
+                  padding: '12px 16px',
+                  color: '#fca5a5',
+                  fontSize: 'sm',
+                  textAlign: 'center',
+                  mt: '3',
                 })}
               >
                 ⚠️ {permissionError}
@@ -259,76 +242,73 @@ export default function RoomPage() {
 
           <div
             className={css({
-              display: "grid",
-              gridTemplateColumns: { base: "1fr", md: "repeat(2, 1fr)" },
-              gap: "4",
-              maxWidth: "800px",
-              width: "100%",
+              display: 'grid',
+              gridTemplateColumns: { base: '1fr', md: 'repeat(2, 1fr)' },
+              gap: '4',
+              maxWidth: '800px',
+              width: '100%',
             })}
           >
             {/* Legacy games */}
-            {Object.entries(GAMES_CONFIG).map(
-              ([gameType, config]: [string, any]) => {
-                const isAvailable =
-                  !("available" in config) || config.available !== false;
-                const isDisabled = !isHost || !isAvailable;
-                return (
-                  <button
-                    key={gameType}
-                    onClick={() => handleGameSelect(gameType as GameType)}
-                    disabled={isDisabled}
+            {Object.entries(GAMES_CONFIG).map(([gameType, config]: [string, any]) => {
+              const isAvailable = !('available' in config) || config.available !== false
+              const isDisabled = !isHost || !isAvailable
+              return (
+                <button
+                  key={gameType}
+                  onClick={() => handleGameSelect(gameType as GameType)}
+                  disabled={isDisabled}
+                  className={css({
+                    background: config.gradient,
+                    border: '2px solid',
+                    borderColor: config.borderColor || 'blue.200',
+                    borderRadius: '2xl',
+                    padding: '6',
+                    cursor: isDisabled ? 'not-allowed' : 'pointer',
+                    opacity: isDisabled ? 0.4 : 1,
+                    transition: 'all 0.3s ease',
+                    _hover: isDisabled
+                      ? {}
+                      : {
+                          transform: 'translateY(-4px) scale(1.02)',
+                          boxShadow: '0 20px 40px rgba(59, 130, 246, 0.2)',
+                        },
+                  })}
+                >
+                  <div
                     className={css({
-                      background: config.gradient,
-                      border: "2px solid",
-                      borderColor: config.borderColor || "blue.200",
-                      borderRadius: "2xl",
-                      padding: "6",
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      opacity: isDisabled ? 0.4 : 1,
-                      transition: "all 0.3s ease",
-                      _hover: isDisabled
-                        ? {}
-                        : {
-                            transform: "translateY(-4px) scale(1.02)",
-                            boxShadow: "0 20px 40px rgba(59, 130, 246, 0.2)",
-                          },
+                      fontSize: '4xl',
+                      mb: '2',
                     })}
                   >
-                    <div
-                      className={css({
-                        fontSize: "4xl",
-                        mb: "2",
-                      })}
-                    >
-                      {config.icon}
-                    </div>
-                    <h3
-                      className={css({
-                        fontSize: "xl",
-                        fontWeight: "bold",
-                        color: "text.primary",
-                        mb: "2",
-                      })}
-                    >
-                      {config.name}
-                    </h3>
-                    <p
-                      className={css({
-                        fontSize: "sm",
-                        color: "text.secondary",
-                      })}
-                    >
-                      {config.description}
-                    </p>
-                  </button>
-                );
-              },
-            )}
+                    {config.icon}
+                  </div>
+                  <h3
+                    className={css({
+                      fontSize: 'xl',
+                      fontWeight: 'bold',
+                      color: 'text.primary',
+                      mb: '2',
+                    })}
+                  >
+                    {config.name}
+                  </h3>
+                  <p
+                    className={css({
+                      fontSize: 'sm',
+                      color: 'text.secondary',
+                    })}
+                  >
+                    {config.description}
+                  </p>
+                </button>
+              )
+            })}
 
             {/* Registry games */}
             {getAllGames().map((gameDef) => {
-              const isAvailable = gameDef.manifest.available;
-              const isDisabled = !isHost || !isAvailable;
+              const isAvailable = gameDef.manifest.available
+              const isDisabled = !isHost || !isAvailable
               return (
                 <button
                   key={gameDef.manifest.name}
@@ -339,89 +319,89 @@ export default function RoomPage() {
                     borderColor: gameDef.manifest.borderColor,
                   }}
                   className={css({
-                    border: "2px solid",
-                    borderRadius: "2xl",
-                    padding: "6",
-                    cursor: isDisabled ? "not-allowed" : "pointer",
+                    border: '2px solid',
+                    borderRadius: '2xl',
+                    padding: '6',
+                    cursor: isDisabled ? 'not-allowed' : 'pointer',
                     opacity: isDisabled ? 0.4 : 1,
-                    transition: "all 0.3s ease",
+                    transition: 'all 0.3s ease',
                     _hover: isDisabled
                       ? {}
                       : {
-                          transform: "translateY(-4px) scale(1.02)",
-                          boxShadow: "0 20px 40px rgba(59, 130, 246, 0.2)",
+                          transform: 'translateY(-4px) scale(1.02)',
+                          boxShadow: '0 20px 40px rgba(59, 130, 246, 0.2)',
                         },
                   })}
                 >
                   <div
                     className={css({
-                      fontSize: "4xl",
-                      mb: "2",
+                      fontSize: '4xl',
+                      mb: '2',
                     })}
                   >
                     {gameDef.manifest.icon}
                   </div>
                   <h3
                     className={css({
-                      fontSize: "xl",
-                      fontWeight: "bold",
-                      color: "text.primary",
-                      mb: "2",
+                      fontSize: 'xl',
+                      fontWeight: 'bold',
+                      color: 'text.primary',
+                      mb: '2',
                     })}
                   >
                     {gameDef.manifest.displayName}
                   </h3>
                   <p
                     className={css({
-                      fontSize: "sm",
-                      color: "text.secondary",
+                      fontSize: 'sm',
+                      color: 'text.secondary',
                     })}
                   >
                     {gameDef.manifest.description}
                   </p>
                 </button>
-              );
+              )
             })}
           </div>
         </div>
       </PageWithNav>
-    );
+    )
   }
 
   // Check if this is a registry game first
   if (hasGame(roomData.gameName)) {
-    const gameDef = getGame(roomData.gameName);
+    const gameDef = getGame(roomData.gameName)
     if (!gameDef) {
       return (
         <PageWithNav
           navTitle="Game Not Found"
           navEmoji="⚠️"
           emphasizePlayerSelection={true}
-          onExitSession={() => router.push("/arcade")}
+          onExitSession={() => router.push('/arcade')}
         >
           <div
             style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              height: "100vh",
-              fontSize: "18px",
-              color: "token(colors.text.secondary)",
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '100vh',
+              fontSize: '18px',
+              color: 'token(colors.text.secondary)',
             }}
           >
             Game "{roomData.gameName}" not found in registry
           </div>
         </PageWithNav>
-      );
+      )
     }
 
     // Render registry game dynamically
-    const { Provider, GameComponent } = gameDef;
+    const { Provider, GameComponent } = gameDef
     return (
       <Provider>
         <GameComponent />
       </Provider>
-    );
+    )
   }
 
   // Render legacy games based on room's gameName
@@ -433,21 +413,21 @@ export default function RoomPage() {
           navTitle="Game Not Available"
           navEmoji="⚠️"
           emphasizePlayerSelection={true}
-          onExitSession={() => router.push("/arcade")}
+          onExitSession={() => router.push('/arcade')}
         >
           <div
             style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              height: "100vh",
-              fontSize: "18px",
-              color: "token(colors.text.secondary)",
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '100vh',
+              fontSize: '18px',
+              color: 'token(colors.text.secondary)',
             }}
           >
             Game "{roomData.gameName}" not yet supported
           </div>
         </PageWithNav>
-      );
+      )
   }
 }
diff --git a/apps/web/src/app/arcade/rithmomachia/guide/page.tsx b/apps/web/src/app/arcade/rithmomachia/guide/page.tsx
index 5bad181d..1a854b21 100644
--- a/apps/web/src/app/arcade/rithmomachia/guide/page.tsx
+++ b/apps/web/src/app/arcade/rithmomachia/guide/page.tsx
@@ -1,26 +1,22 @@
-"use client";
+'use client'
 
-import { useState } from "react";
-import { PlayingGuideModal } from "@/arcade-games/rithmomachia/components/PlayingGuideModal";
+import { useState } from 'react'
+import { PlayingGuideModal } from '@/arcade-games/rithmomachia/components/PlayingGuideModal'
 
 export default function RithmomachiaGuidePage() {
   // Guide is always open in this standalone page
-  const [isOpen] = useState(true);
+  const [isOpen] = useState(true)
 
   return (
     <div
       style={{
-        width: "100vw",
-        height: "100vh",
-        overflow: "hidden",
-        background: "#f3f4f6",
+        width: '100vw',
+        height: '100vh',
+        overflow: 'hidden',
+        background: '#f3f4f6',
       }}
     >
-      <PlayingGuideModal
-        isOpen={isOpen}
-        onClose={() => window.close()}
-        standalone={true}
-      />
+      <PlayingGuideModal isOpen={isOpen} onClose={() => window.close()} standalone={true} />
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/arcade/rithmomachia/page.tsx b/apps/web/src/app/arcade/rithmomachia/page.tsx
index 40f6cf9e..7cf602ff 100644
--- a/apps/web/src/app/arcade/rithmomachia/page.tsx
+++ b/apps/web/src/app/arcade/rithmomachia/page.tsx
@@ -1,16 +1,16 @@
-"use client";
+'use client'
 
-import { rithmomachiaGame } from "@/arcade-games/rithmomachia";
+import { rithmomachiaGame } from '@/arcade-games/rithmomachia'
 
 // Force dynamic rendering to avoid build-time initialization errors
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic'
 
-const { Provider, GameComponent } = rithmomachiaGame;
+const { Provider, GameComponent } = rithmomachiaGame
 
 export default function RithmomachiaPage() {
   return (
     <Provider>
       <GameComponent />
     </Provider>
-  );
+  )
 }
diff --git a/apps/web/src/app/auto-instruction-demo/page.tsx b/apps/web/src/app/auto-instruction-demo/page.tsx
index 99fb2a72..7987f793 100644
--- a/apps/web/src/app/auto-instruction-demo/page.tsx
+++ b/apps/web/src/app/auto-instruction-demo/page.tsx
@@ -1,17 +1,17 @@
-"use client";
+'use client'
 
-import { AutoInstructionDemo } from "../../components/tutorial/AutoInstructionDemo";
+import { AutoInstructionDemo } from '../../components/tutorial/AutoInstructionDemo'
 
 export default function AutoInstructionDemoPage() {
   return (
     <div
       style={{
-        minHeight: "100vh",
-        backgroundColor: "#f9fafb",
-        padding: "20px",
+        minHeight: '100vh',
+        backgroundColor: '#f9fafb',
+        padding: '20px',
       }}
     >
       <AutoInstructionDemo />
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/blog/[slug]/page.tsx b/apps/web/src/app/blog/[slug]/page.tsx
index b8c35459..0fab0094 100644
--- a/apps/web/src/app/blog/[slug]/page.tsx
+++ b/apps/web/src/app/blog/[slug]/page.tsx
@@ -1,27 +1,27 @@
-import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-import Link from "next/link";
-import { getPostBySlug, getAllPostSlugs } from "@/lib/blog";
-import { css } from "../../../../styled-system/css";
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import { getPostBySlug, getAllPostSlugs } from '@/lib/blog'
+import { css } from '../../../../styled-system/css'
 
 interface Props {
   params: {
-    slug: string;
-  };
+    slug: string
+  }
 }
 
 // Generate static params for all blog posts
 export async function generateStaticParams() {
-  const slugs = getAllPostSlugs();
-  return slugs.map((slug) => ({ slug }));
+  const slugs = getAllPostSlugs()
+  return slugs.map((slug) => ({ slug }))
 }
 
 // Generate metadata for SEO
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const post = await getPostBySlug(params.slug);
+  const post = await getPostBySlug(params.slug)
 
-  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://abaci.one";
-  const postUrl = `${siteUrl}/blog/${params.slug}`;
+  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://abaci.one'
+  const postUrl = `${siteUrl}/blog/${params.slug}`
 
   return {
     title: `${post.title} | Abaci.one Blog`,
@@ -31,95 +31,95 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
       title: post.title,
       description: post.description,
       url: postUrl,
-      siteName: "Abaci.one",
-      type: "article",
+      siteName: 'Abaci.one',
+      type: 'article',
       publishedTime: post.publishedAt,
       modifiedTime: post.updatedAt,
       authors: [post.author],
       tags: post.tags,
     },
     twitter: {
-      card: "summary_large_image",
+      card: 'summary_large_image',
       title: post.title,
       description: post.description,
     },
     alternates: {
       canonical: postUrl,
     },
-  };
+  }
 }
 
 export default async function BlogPost({ params }: Props) {
-  let post;
+  let post
   try {
-    post = await getPostBySlug(params.slug);
+    post = await getPostBySlug(params.slug)
   } catch {
-    notFound();
+    notFound()
   }
 
   // Format date for display
-  const publishedDate = new Date(post.publishedAt).toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  });
+  const publishedDate = new Date(post.publishedAt).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
 
-  const updatedDate = new Date(post.updatedAt).toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  });
+  const updatedDate = new Date(post.updatedAt).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
 
-  const showUpdatedDate = post.publishedAt !== post.updatedAt;
+  const showUpdatedDate = post.publishedAt !== post.updatedAt
 
   return (
     <div
       data-component="blog-post-page"
       className={css({
-        minH: "100vh",
-        bg: "bg.canvas",
-        pt: "var(--app-nav-height-full)",
+        minH: '100vh',
+        bg: 'bg.canvas',
+        pt: 'var(--app-nav-height-full)',
       })}
     >
       {/* Background pattern */}
       <div
         className={css({
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
           opacity: 0.05,
           backgroundImage:
-            "radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)",
-          backgroundSize: "40px 40px",
-          pointerEvents: "none",
+            'radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)',
+          backgroundSize: '40px 40px',
+          pointerEvents: 'none',
           zIndex: 0,
         })}
       />
 
       <div
         className={css({
-          position: "relative",
+          position: 'relative',
           zIndex: 1,
-          maxW: "48rem",
-          mx: "auto",
-          px: { base: "1rem", md: "2rem" },
-          py: { base: "2rem", md: "4rem" },
+          maxW: '48rem',
+          mx: 'auto',
+          px: { base: '1rem', md: '2rem' },
+          py: { base: '2rem', md: '4rem' },
         })}
       >
         {/* Back link */}
         <Link
           href="/blog"
           className={css({
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "0.5rem",
-            mb: "2rem",
-            color: "accent.default",
-            fontSize: "0.875rem",
-            fontWeight: "500",
-            textDecoration: "none",
-            transition: "color 0.2s",
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+            mb: '2rem',
+            color: 'accent.default',
+            fontSize: '0.875rem',
+            fontWeight: '500',
+            textDecoration: 'none',
+            transition: 'color 0.2s',
             _hover: {
-              color: "accent.emphasis",
+              color: 'accent.emphasis',
             },
           })}
         >
@@ -132,19 +132,19 @@ export default async function BlogPost({ params }: Props) {
           <header
             data-section="article-header"
             className={css({
-              mb: "3rem",
-              pb: "2rem",
-              borderBottom: "1px solid",
-              borderColor: "border.muted",
+              mb: '3rem',
+              pb: '2rem',
+              borderBottom: '1px solid',
+              borderColor: 'border.muted',
             })}
           >
             <h1
               className={css({
-                fontSize: { base: "2rem", md: "2.5rem", lg: "3rem" },
-                fontWeight: "bold",
-                lineHeight: "1.2",
-                mb: "1rem",
-                color: "text.primary",
+                fontSize: { base: '2rem', md: '2.5rem', lg: '3rem' },
+                fontWeight: 'bold',
+                lineHeight: '1.2',
+                mb: '1rem',
+                color: 'text.primary',
               })}
             >
               {post.title}
@@ -152,10 +152,10 @@ export default async function BlogPost({ params }: Props) {
 
             <p
               className={css({
-                fontSize: { base: "1.125rem", md: "1.25rem" },
-                color: "text.secondary",
-                lineHeight: "1.6",
-                mb: "1.5rem",
+                fontSize: { base: '1.125rem', md: '1.25rem' },
+                color: 'text.secondary',
+                lineHeight: '1.6',
+                mb: '1.5rem',
               })}
             >
               {post.description}
@@ -164,12 +164,12 @@ export default async function BlogPost({ params }: Props) {
             <div
               data-element="article-meta"
               className={css({
-                display: "flex",
-                flexWrap: "wrap",
-                gap: "1rem",
-                alignItems: "center",
-                fontSize: "0.875rem",
-                color: "text.muted",
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '1rem',
+                alignItems: 'center',
+                fontSize: '0.875rem',
+                color: 'text.muted',
               })}
             >
               <span data-element="author">{post.author}</span>
@@ -187,23 +187,23 @@ export default async function BlogPost({ params }: Props) {
               <div
                 data-element="tags"
                 className={css({
-                  display: "flex",
-                  flexWrap: "wrap",
-                  gap: "0.5rem",
-                  mt: "1rem",
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: '0.5rem',
+                  mt: '1rem',
                 })}
               >
                 {post.tags.map((tag) => (
                   <span
                     key={tag}
                     className={css({
-                      px: "0.75rem",
-                      py: "0.25rem",
-                      bg: "accent.muted",
-                      color: "accent.emphasis",
-                      borderRadius: "0.25rem",
-                      fontSize: "0.875rem",
-                      fontWeight: "500",
+                      px: '0.75rem',
+                      py: '0.25rem',
+                      bg: 'accent.muted',
+                      color: 'accent.emphasis',
+                      borderRadius: '0.25rem',
+                      fontSize: '0.875rem',
+                      fontWeight: '500',
                     })}
                   >
                     {tag}
@@ -217,123 +217,123 @@ export default async function BlogPost({ params }: Props) {
           <div
             data-section="article-content"
             className={css({
-              fontSize: { base: "1rem", md: "1.125rem" },
-              lineHeight: "1.75",
-              color: "text.primary",
+              fontSize: { base: '1rem', md: '1.125rem' },
+              lineHeight: '1.75',
+              color: 'text.primary',
 
               // Typography styles for markdown content
-              "& h1": {
-                fontSize: { base: "1.875rem", md: "2.25rem" },
-                fontWeight: "bold",
-                mt: "2.5rem",
-                mb: "1rem",
-                lineHeight: "1.25",
-                color: "text.primary",
+              '& h1': {
+                fontSize: { base: '1.875rem', md: '2.25rem' },
+                fontWeight: 'bold',
+                mt: '2.5rem',
+                mb: '1rem',
+                lineHeight: '1.25',
+                color: 'text.primary',
               },
-              "& h2": {
-                fontSize: { base: "1.5rem", md: "1.875rem" },
-                fontWeight: "bold",
-                mt: "2rem",
-                mb: "0.875rem",
-                lineHeight: "1.3",
-                color: "accent.emphasis",
+              '& h2': {
+                fontSize: { base: '1.5rem', md: '1.875rem' },
+                fontWeight: 'bold',
+                mt: '2rem',
+                mb: '0.875rem',
+                lineHeight: '1.3',
+                color: 'accent.emphasis',
               },
-              "& h3": {
-                fontSize: { base: "1.25rem", md: "1.5rem" },
-                fontWeight: "600",
-                mt: "1.75rem",
-                mb: "0.75rem",
-                lineHeight: "1.4",
-                color: "accent.default",
+              '& h3': {
+                fontSize: { base: '1.25rem', md: '1.5rem' },
+                fontWeight: '600',
+                mt: '1.75rem',
+                mb: '0.75rem',
+                lineHeight: '1.4',
+                color: 'accent.default',
               },
-              "& p": {
-                mb: "1.25rem",
+              '& p': {
+                mb: '1.25rem',
               },
-              "& strong": {
-                fontWeight: "600",
-                color: "text.primary",
+              '& strong': {
+                fontWeight: '600',
+                color: 'text.primary',
               },
-              "& a": {
-                color: "accent.emphasis",
-                textDecoration: "underline",
+              '& a': {
+                color: 'accent.emphasis',
+                textDecoration: 'underline',
                 _hover: {
-                  color: "accent.default",
+                  color: 'accent.default',
                 },
               },
-              "& ul, & ol": {
-                pl: "1.5rem",
-                mb: "1.25rem",
+              '& ul, & ol': {
+                pl: '1.5rem',
+                mb: '1.25rem',
               },
-              "& li": {
-                mb: "0.5rem",
+              '& li': {
+                mb: '0.5rem',
               },
-              "& code": {
-                bg: "bg.muted",
-                px: "0.375rem",
-                py: "0.125rem",
-                borderRadius: "0.25rem",
-                fontSize: "0.875em",
-                fontFamily: "monospace",
-                color: "accent.emphasis",
-                border: "1px solid",
-                borderColor: "accent.default",
+              '& code': {
+                bg: 'bg.muted',
+                px: '0.375rem',
+                py: '0.125rem',
+                borderRadius: '0.25rem',
+                fontSize: '0.875em',
+                fontFamily: 'monospace',
+                color: 'accent.emphasis',
+                border: '1px solid',
+                borderColor: 'accent.default',
               },
-              "& pre": {
-                bg: "bg.surface",
-                border: "1px solid",
-                borderColor: "border.default",
-                color: "text.primary",
-                p: "1rem",
-                borderRadius: "0.5rem",
-                overflow: "auto",
-                mb: "1.25rem",
+              '& pre': {
+                bg: 'bg.surface',
+                border: '1px solid',
+                borderColor: 'border.default',
+                color: 'text.primary',
+                p: '1rem',
+                borderRadius: '0.5rem',
+                overflow: 'auto',
+                mb: '1.25rem',
               },
-              "& pre code": {
-                bg: "transparent",
-                p: "0",
-                border: "none",
-                color: "inherit",
-                fontSize: "0.875rem",
+              '& pre code': {
+                bg: 'transparent',
+                p: '0',
+                border: 'none',
+                color: 'inherit',
+                fontSize: '0.875rem',
               },
-              "& blockquote": {
-                borderLeft: "4px solid",
-                borderColor: "accent.default",
-                pl: "1rem",
-                py: "0.5rem",
-                my: "1.5rem",
-                color: "text.secondary",
-                fontStyle: "italic",
-                bg: "accent.subtle",
-                borderRadius: "0 0.25rem 0.25rem 0",
+              '& blockquote': {
+                borderLeft: '4px solid',
+                borderColor: 'accent.default',
+                pl: '1rem',
+                py: '0.5rem',
+                my: '1.5rem',
+                color: 'text.secondary',
+                fontStyle: 'italic',
+                bg: 'accent.subtle',
+                borderRadius: '0 0.25rem 0.25rem 0',
               },
-              "& hr": {
-                my: "2rem",
-                borderColor: "border.muted",
+              '& hr': {
+                my: '2rem',
+                borderColor: 'border.muted',
               },
-              "& table": {
-                width: "100%",
-                mb: "1.25rem",
-                borderCollapse: "collapse",
+              '& table': {
+                width: '100%',
+                mb: '1.25rem',
+                borderCollapse: 'collapse',
               },
-              "& th": {
-                bg: "accent.muted",
-                px: "1rem",
-                py: "0.75rem",
-                textAlign: "left",
-                fontWeight: "600",
-                borderBottom: "2px solid",
-                borderColor: "accent.default",
-                color: "accent.emphasis",
+              '& th': {
+                bg: 'accent.muted',
+                px: '1rem',
+                py: '0.75rem',
+                textAlign: 'left',
+                fontWeight: '600',
+                borderBottom: '2px solid',
+                borderColor: 'accent.default',
+                color: 'accent.emphasis',
               },
-              "& td": {
-                px: "1rem",
-                py: "0.75rem",
-                borderBottom: "1px solid",
-                borderColor: "border.muted",
-                color: "text.secondary",
+              '& td': {
+                px: '1rem',
+                py: '0.75rem',
+                borderBottom: '1px solid',
+                borderColor: 'border.muted',
+                color: 'text.secondary',
               },
-              "& tr:hover td": {
-                bg: "accent.subtle",
+              '& tr:hover td': {
+                bg: 'accent.subtle',
               },
             })}
             dangerouslySetInnerHTML={{ __html: post.html }}
@@ -345,21 +345,21 @@ export default async function BlogPost({ params }: Props) {
           type="application/ld+json"
           dangerouslySetInnerHTML={{
             __html: JSON.stringify({
-              "@context": "https://schema.org",
-              "@type": "BlogPosting",
+              '@context': 'https://schema.org',
+              '@type': 'BlogPosting',
               headline: post.title,
               description: post.description,
               author: {
-                "@type": "Person",
+                '@type': 'Person',
                 name: post.author,
               },
               datePublished: post.publishedAt,
               dateModified: post.updatedAt,
-              keywords: post.tags.join(", "),
+              keywords: post.tags.join(', '),
             }),
           }}
         />
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/blog/layout.tsx b/apps/web/src/app/blog/layout.tsx
index a3c5d162..5f889243 100644
--- a/apps/web/src/app/blog/layout.tsx
+++ b/apps/web/src/app/blog/layout.tsx
@@ -1,16 +1,12 @@
-"use client";
+'use client'
 
-import { AppNavBar } from "@/components/AppNavBar";
+import { AppNavBar } from '@/components/AppNavBar'
 
-export default function BlogLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function BlogLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <AppNavBar />
       {children}
     </>
-  );
+  )
 }
diff --git a/apps/web/src/app/blog/page.tsx b/apps/web/src/app/blog/page.tsx
index e668fa14..db43071b 100644
--- a/apps/web/src/app/blog/page.tsx
+++ b/apps/web/src/app/blog/page.tsx
@@ -1,90 +1,89 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { getAllPostsMetadata, getFeaturedPosts } from "@/lib/blog";
-import { css } from "../../../styled-system/css";
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { getAllPostsMetadata, getFeaturedPosts } from '@/lib/blog'
+import { css } from '../../../styled-system/css'
 
 export const metadata: Metadata = {
-  title: "Blog | Abaci.one",
+  title: 'Blog | Abaci.one',
   description:
-    "Articles about educational technology, pedagogy, and innovative approaches to learning with the abacus.",
+    'Articles about educational technology, pedagogy, and innovative approaches to learning with the abacus.',
   openGraph: {
-    title: "Abaci.one Blog",
+    title: 'Abaci.one Blog',
     description:
-      "Articles about educational technology, pedagogy, and innovative approaches to learning with the abacus.",
-    url: `${process.env.NEXT_PUBLIC_SITE_URL || "https://abaci.one"}/blog`,
-    siteName: "Abaci.one",
-    type: "website",
+      'Articles about educational technology, pedagogy, and innovative approaches to learning with the abacus.',
+    url: `${process.env.NEXT_PUBLIC_SITE_URL || 'https://abaci.one'}/blog`,
+    siteName: 'Abaci.one',
+    type: 'website',
   },
-};
+}
 
 export default async function BlogIndex() {
-  const featuredPosts = await getFeaturedPosts();
-  const allPosts = await getAllPostsMetadata();
+  const featuredPosts = await getFeaturedPosts()
+  const allPosts = await getAllPostsMetadata()
 
   return (
     <div
       data-component="blog-index-page"
       className={css({
-        minH: "100vh",
-        bg: "bg.canvas",
-        pt: "var(--app-nav-height-full)",
+        minH: '100vh',
+        bg: 'bg.canvas',
+        pt: 'var(--app-nav-height-full)',
       })}
     >
       {/* Background pattern */}
       <div
         className={css({
-          position: "fixed",
+          position: 'fixed',
           inset: 0,
           opacity: 0.05,
           backgroundImage:
-            "radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)",
-          backgroundSize: "40px 40px",
-          pointerEvents: "none",
+            'radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)',
+          backgroundSize: '40px 40px',
+          pointerEvents: 'none',
           zIndex: 0,
         })}
       />
 
       <div
         className={css({
-          position: "relative",
+          position: 'relative',
           zIndex: 1,
-          maxW: "64rem",
-          mx: "auto",
-          px: { base: "1rem", md: "2rem" },
-          py: { base: "2rem", md: "4rem" },
+          maxW: '64rem',
+          mx: 'auto',
+          px: { base: '1rem', md: '2rem' },
+          py: { base: '2rem', md: '4rem' },
         })}
       >
         {/* Page Header */}
         <header
           data-section="page-header"
           className={css({
-            mb: "3rem",
-            textAlign: "center",
+            mb: '3rem',
+            textAlign: 'center',
           })}
         >
           <h1
             className={css({
-              fontSize: { base: "2.5rem", md: "3.5rem" },
-              fontWeight: "bold",
-              mb: "1rem",
+              fontSize: { base: '2.5rem', md: '3.5rem' },
+              fontWeight: 'bold',
+              mb: '1rem',
               background:
-                "linear-gradient(135deg, token(colors.amber.400) 0%, token(colors.amber.500) 50%, token(colors.amber.400) 100%)",
-              backgroundClip: "text",
-              color: "transparent",
+                'linear-gradient(135deg, token(colors.amber.400) 0%, token(colors.amber.500) 50%, token(colors.amber.400) 100%)',
+              backgroundClip: 'text',
+              color: 'transparent',
             })}
           >
             Blog
           </h1>
           <p
             className={css({
-              fontSize: { base: "1.125rem", md: "1.25rem" },
-              color: "text.secondary",
-              maxW: "42rem",
-              mx: "auto",
+              fontSize: { base: '1.125rem', md: '1.25rem' },
+              color: 'text.secondary',
+              maxW: '42rem',
+              mx: 'auto',
             })}
           >
-            Exploring educational technology, pedagogy, and innovative
-            approaches to learning.
+            Exploring educational technology, pedagogy, and innovative approaches to learning.
           </p>
         </header>
 
@@ -93,37 +92,35 @@ export default async function BlogIndex() {
           <section
             data-section="featured-posts"
             className={css({
-              mb: "4rem",
+              mb: '4rem',
             })}
           >
             <h2
               className={css({
-                fontSize: { base: "1.5rem", md: "1.875rem" },
-                fontWeight: "bold",
-                mb: "1.5rem",
-                color: "accent.emphasis",
+                fontSize: { base: '1.5rem', md: '1.875rem' },
+                fontWeight: 'bold',
+                mb: '1.5rem',
+                color: 'accent.emphasis',
               })}
             >
               Featured
             </h2>
             <div
               className={css({
-                display: "grid",
+                display: 'grid',
                 gridTemplateColumns: {
-                  base: "1fr",
-                  md: "repeat(auto-fit, minmax(300px, 1fr))",
+                  base: '1fr',
+                  md: 'repeat(auto-fit, minmax(300px, 1fr))',
                 },
-                gap: "1.5rem",
+                gap: '1.5rem',
               })}
             >
               {featuredPosts.map((post) => {
-                const publishedDate = new Date(
-                  post.publishedAt,
-                ).toLocaleDateString("en-US", {
-                  year: "numeric",
-                  month: "long",
-                  day: "numeric",
-                });
+                const publishedDate = new Date(post.publishedAt).toLocaleDateString('en-US', {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric',
+                })
 
                 return (
                   <Link
@@ -131,49 +128,49 @@ export default async function BlogIndex() {
                     href={`/blog/${post.slug}`}
                     data-action="view-featured-post"
                     className={css({
-                      display: "block",
-                      p: "1.5rem",
-                      bg: "accent.subtle",
-                      backdropFilter: "blur(10px)",
-                      borderRadius: "0.75rem",
-                      border: "1px solid",
-                      borderColor: "accent.default",
-                      transition: "all 0.3s",
+                      display: 'block',
+                      p: '1.5rem',
+                      bg: 'accent.subtle',
+                      backdropFilter: 'blur(10px)',
+                      borderRadius: '0.75rem',
+                      border: '1px solid',
+                      borderColor: 'accent.default',
+                      transition: 'all 0.3s',
                       _hover: {
-                        bg: "accent.muted",
-                        borderColor: "accent.emphasis",
-                        transform: "translateY(-4px)",
-                        boxShadow: "0 8px 24px token(colors.accent.muted)",
+                        bg: 'accent.muted',
+                        borderColor: 'accent.emphasis',
+                        transform: 'translateY(-4px)',
+                        boxShadow: '0 8px 24px token(colors.accent.muted)',
                       },
                     })}
                   >
                     <h3
                       className={css({
-                        fontSize: { base: "1.25rem", md: "1.5rem" },
-                        fontWeight: "600",
-                        mb: "0.5rem",
-                        color: "text.primary",
+                        fontSize: { base: '1.25rem', md: '1.5rem' },
+                        fontWeight: '600',
+                        mb: '0.5rem',
+                        color: 'text.primary',
                       })}
                     >
                       {post.title}
                     </h3>
                     <p
                       className={css({
-                        color: "text.secondary",
-                        mb: "1rem",
-                        lineHeight: "1.6",
+                        color: 'text.secondary',
+                        mb: '1rem',
+                        lineHeight: '1.6',
                       })}
                     >
                       {post.excerpt || post.description}
                     </p>
                     <div
                       className={css({
-                        display: "flex",
-                        flexWrap: "wrap",
-                        gap: "0.75rem",
-                        alignItems: "center",
-                        fontSize: "0.875rem",
-                        color: "text.muted",
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        gap: '0.75rem',
+                        alignItems: 'center',
+                        fontSize: '0.875rem',
+                        color: 'text.muted',
                       })}
                     >
                       <span>{post.author}</span>
@@ -183,23 +180,23 @@ export default async function BlogIndex() {
                     {post.tags.length > 0 && (
                       <div
                         className={css({
-                          display: "flex",
-                          flexWrap: "wrap",
-                          gap: "0.5rem",
-                          mt: "1rem",
+                          display: 'flex',
+                          flexWrap: 'wrap',
+                          gap: '0.5rem',
+                          mt: '1rem',
                         })}
                       >
                         {post.tags.slice(0, 3).map((tag) => (
                           <span
                             key={tag}
                             className={css({
-                              px: "0.5rem",
-                              py: "0.125rem",
-                              bg: "accent.muted",
-                              color: "accent.emphasis",
-                              borderRadius: "0.25rem",
-                              fontSize: "0.75rem",
-                              fontWeight: "500",
+                              px: '0.5rem',
+                              py: '0.125rem',
+                              bg: 'accent.muted',
+                              color: 'accent.emphasis',
+                              borderRadius: '0.25rem',
+                              fontSize: '0.75rem',
+                              fontWeight: '500',
                             })}
                           >
                             {tag}
@@ -208,7 +205,7 @@ export default async function BlogIndex() {
                       </div>
                     )}
                   </Link>
-                );
+                )
               })}
             </div>
           </section>
@@ -218,40 +215,38 @@ export default async function BlogIndex() {
         <section data-section="all-posts">
           <h2
             className={css({
-              fontSize: { base: "1.5rem", md: "1.875rem" },
-              fontWeight: "bold",
-              mb: "1.5rem",
-              color: "accent.emphasis",
+              fontSize: { base: '1.5rem', md: '1.875rem' },
+              fontWeight: 'bold',
+              mb: '1.5rem',
+              color: 'accent.emphasis',
             })}
           >
             All Posts
           </h2>
           <div
             className={css({
-              display: "flex",
-              flexDirection: "column",
-              gap: "2rem",
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '2rem',
             })}
           >
             {allPosts.map((post) => {
-              const publishedDate = new Date(
-                post.publishedAt,
-              ).toLocaleDateString("en-US", {
-                year: "numeric",
-                month: "long",
-                day: "numeric",
-              });
+              const publishedDate = new Date(post.publishedAt).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+              })
 
               return (
                 <article
                   key={post.slug}
                   data-element="post-preview"
                   className={css({
-                    pb: "2rem",
-                    borderBottom: "1px solid",
-                    borderColor: "border.muted",
+                    pb: '2rem',
+                    borderBottom: '1px solid',
+                    borderColor: 'border.muted',
                     _last: {
-                      borderBottom: "none",
+                      borderBottom: 'none',
                     },
                   })}
                 >
@@ -259,21 +254,21 @@ export default async function BlogIndex() {
                     href={`/blog/${post.slug}`}
                     data-action="view-post"
                     className={css({
-                      display: "block",
+                      display: 'block',
                       _hover: {
-                        "& h3": {
-                          color: "accent.emphasis",
+                        '& h3': {
+                          color: 'accent.emphasis',
                         },
                       },
                     })}
                   >
                     <h3
                       className={css({
-                        fontSize: { base: "1.5rem", md: "1.875rem" },
-                        fontWeight: "600",
-                        mb: "0.5rem",
-                        color: "text.primary",
-                        transition: "color 0.2s",
+                        fontSize: { base: '1.5rem', md: '1.875rem' },
+                        fontWeight: '600',
+                        mb: '0.5rem',
+                        color: 'text.primary',
+                        transition: 'color 0.2s',
                       })}
                     >
                       {post.title}
@@ -282,13 +277,13 @@ export default async function BlogIndex() {
 
                   <div
                     className={css({
-                      display: "flex",
-                      flexWrap: "wrap",
-                      gap: "0.75rem",
-                      alignItems: "center",
-                      fontSize: "0.875rem",
-                      color: "text.muted",
-                      mb: "1rem",
+                      display: 'flex',
+                      flexWrap: 'wrap',
+                      gap: '0.75rem',
+                      alignItems: 'center',
+                      fontSize: '0.875rem',
+                      color: 'text.muted',
+                      mb: '1rem',
                     })}
                   >
                     <span>{post.author}</span>
@@ -298,9 +293,9 @@ export default async function BlogIndex() {
 
                   <p
                     className={css({
-                      color: "text.secondary",
-                      lineHeight: "1.6",
-                      mb: "1rem",
+                      color: 'text.secondary',
+                      lineHeight: '1.6',
+                      mb: '1rem',
                     })}
                   >
                     {post.excerpt || post.description}
@@ -309,22 +304,22 @@ export default async function BlogIndex() {
                   {post.tags.length > 0 && (
                     <div
                       className={css({
-                        display: "flex",
-                        flexWrap: "wrap",
-                        gap: "0.5rem",
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        gap: '0.5rem',
                       })}
                     >
                       {post.tags.map((tag) => (
                         <span
                           key={tag}
                           className={css({
-                            px: "0.5rem",
-                            py: "0.125rem",
-                            bg: "bg.muted",
-                            color: "text.secondary",
-                            borderRadius: "0.25rem",
-                            fontSize: "0.75rem",
-                            fontWeight: "500",
+                            px: '0.5rem',
+                            py: '0.125rem',
+                            bg: 'bg.muted',
+                            color: 'text.secondary',
+                            borderRadius: '0.25rem',
+                            fontSize: '0.75rem',
+                            fontWeight: '500',
                           })}
                         >
                           {tag}
@@ -333,11 +328,11 @@ export default async function BlogIndex() {
                     </div>
                   )}
                 </article>
-              );
+              )
             })}
           </div>
         </section>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/calendar/components/CalendarConfigPanel.tsx b/apps/web/src/app/create/calendar/components/CalendarConfigPanel.tsx
index 6f1541fc..1f2a3419 100644
--- a/apps/web/src/app/create/calendar/components/CalendarConfigPanel.tsx
+++ b/apps/web/src/app/create/calendar/components/CalendarConfigPanel.tsx
@@ -1,21 +1,21 @@
-"use client";
+'use client'
 
-import { useTranslations } from "next-intl";
-import { css } from "../../../../../styled-system/css";
-import { AbacusReact, useAbacusConfig } from "@soroban/abacus-react";
-import { AbacusDisplayDropdown } from "@/components/AbacusDisplayDropdown";
+import { useTranslations } from 'next-intl'
+import { css } from '../../../../../styled-system/css'
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import { AbacusDisplayDropdown } from '@/components/AbacusDisplayDropdown'
 
 interface CalendarConfigPanelProps {
-  month: number;
-  year: number;
-  format: "monthly" | "daily";
-  paperSize: "us-letter" | "a4" | "a3" | "tabloid";
-  isGenerating: boolean;
-  onMonthChange: (month: number) => void;
-  onYearChange: (year: number) => void;
-  onFormatChange: (format: "monthly" | "daily") => void;
-  onPaperSizeChange: (size: "us-letter" | "a4" | "a3" | "tabloid") => void;
-  onGenerate: () => void;
+  month: number
+  year: number
+  format: 'monthly' | 'daily'
+  paperSize: 'us-letter' | 'a4' | 'a3' | 'tabloid'
+  isGenerating: boolean
+  onMonthChange: (month: number) => void
+  onYearChange: (year: number) => void
+  onFormatChange: (format: 'monthly' | 'daily') => void
+  onPaperSizeChange: (size: 'us-letter' | 'a4' | 'a3' | 'tabloid') => void
+  onGenerate: () => void
 }
 
 export function CalendarConfigPanel({
@@ -30,109 +30,105 @@ export function CalendarConfigPanel({
   onPaperSizeChange,
   onGenerate,
 }: CalendarConfigPanelProps) {
-  const t = useTranslations("calendar");
-  const abacusConfig = useAbacusConfig();
+  const t = useTranslations('calendar')
+  const abacusConfig = useAbacusConfig()
 
   const MONTHS = [
-    t("months.january"),
-    t("months.february"),
-    t("months.march"),
-    t("months.april"),
-    t("months.may"),
-    t("months.june"),
-    t("months.july"),
-    t("months.august"),
-    t("months.september"),
-    t("months.october"),
-    t("months.november"),
-    t("months.december"),
-  ];
+    t('months.january'),
+    t('months.february'),
+    t('months.march'),
+    t('months.april'),
+    t('months.may'),
+    t('months.june'),
+    t('months.july'),
+    t('months.august'),
+    t('months.september'),
+    t('months.october'),
+    t('months.november'),
+    t('months.december'),
+  ]
 
   return (
     <div
       data-component="calendar-config-panel"
       className={css({
-        bg: "bg.muted",
-        borderRadius: "12px",
-        padding: "1.5rem",
-        display: "flex",
-        flexDirection: "column",
-        gap: "1.5rem",
+        bg: 'bg.muted',
+        borderRadius: '12px',
+        padding: '1.5rem',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1.5rem',
       })}
     >
       {/* Format Selection */}
       <fieldset
         data-section="format-selection"
         className={css({
-          border: "none",
-          padding: "0",
-          margin: "0",
+          border: 'none',
+          padding: '0',
+          margin: '0',
         })}
       >
         <legend
           className={css({
-            fontSize: "1.125rem",
-            fontWeight: "600",
-            marginBottom: "0.75rem",
-            color: "accent.emphasis",
+            fontSize: '1.125rem',
+            fontWeight: '600',
+            marginBottom: '0.75rem',
+            color: 'accent.emphasis',
           })}
         >
-          {t("format.title")}
+          {t('format.title')}
         </legend>
         <div
           className={css({
-            display: "flex",
-            flexDirection: "column",
-            gap: "0.5rem",
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.5rem',
           })}
         >
           <label
             className={css({
-              display: "flex",
-              alignItems: "center",
-              gap: "0.5rem",
-              cursor: "pointer",
-              padding: "0.5rem",
-              borderRadius: "6px",
-              _hover: { bg: "bg.subtle" },
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.5rem',
+              cursor: 'pointer',
+              padding: '0.5rem',
+              borderRadius: '6px',
+              _hover: { bg: 'bg.subtle' },
             })}
           >
             <input
               type="radio"
               value="monthly"
-              checked={format === "monthly"}
-              onChange={(e) =>
-                onFormatChange(e.target.value as "monthly" | "daily")
-              }
+              checked={format === 'monthly'}
+              onChange={(e) => onFormatChange(e.target.value as 'monthly' | 'daily')}
               className={css({
-                cursor: "pointer",
+                cursor: 'pointer',
               })}
             />
-            <span>{t("format.monthly")}</span>
+            <span>{t('format.monthly')}</span>
           </label>
           <label
             className={css({
-              display: "flex",
-              alignItems: "center",
-              gap: "0.5rem",
-              cursor: "pointer",
-              padding: "0.5rem",
-              borderRadius: "6px",
-              _hover: { bg: "bg.subtle" },
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.5rem',
+              cursor: 'pointer',
+              padding: '0.5rem',
+              borderRadius: '6px',
+              _hover: { bg: 'bg.subtle' },
             })}
           >
             <input
               type="radio"
               value="daily"
-              checked={format === "daily"}
-              onChange={(e) =>
-                onFormatChange(e.target.value as "monthly" | "daily")
-              }
+              checked={format === 'daily'}
+              onChange={(e) => onFormatChange(e.target.value as 'monthly' | 'daily')}
               className={css({
-                cursor: "pointer",
+                cursor: 'pointer',
               })}
             />
-            <span>{t("format.daily")}</span>
+            <span>{t('format.daily')}</span>
           </label>
         </div>
       </fieldset>
@@ -141,25 +137,25 @@ export function CalendarConfigPanel({
       <fieldset
         data-section="date-selection"
         className={css({
-          border: "none",
-          padding: "0",
-          margin: "0",
+          border: 'none',
+          padding: '0',
+          margin: '0',
         })}
       >
         <legend
           className={css({
-            fontSize: "1.125rem",
-            fontWeight: "600",
-            marginBottom: "0.75rem",
-            color: "accent.emphasis",
+            fontSize: '1.125rem',
+            fontWeight: '600',
+            marginBottom: '0.75rem',
+            color: 'accent.emphasis',
           })}
         >
-          {t("date.title")}
+          {t('date.title')}
         </legend>
         <div
           className={css({
-            display: "flex",
-            gap: "0.5rem",
+            display: 'flex',
+            gap: '0.5rem',
           })}
         >
           <select
@@ -167,15 +163,15 @@ export function CalendarConfigPanel({
             value={month}
             onChange={(e) => onMonthChange(Number(e.target.value))}
             className={css({
-              flex: "1",
-              padding: "0.5rem",
-              borderRadius: "6px",
-              bg: "bg.subtle",
-              color: "text.primary",
-              border: "1px solid",
-              borderColor: "border.default",
-              cursor: "pointer",
-              _hover: { borderColor: "border.emphasized" },
+              flex: '1',
+              padding: '0.5rem',
+              borderRadius: '6px',
+              bg: 'bg.subtle',
+              color: 'text.primary',
+              border: '1px solid',
+              borderColor: 'border.default',
+              cursor: 'pointer',
+              _hover: { borderColor: 'border.emphasized' },
             })}
           >
             {MONTHS.map((monthName, index) => (
@@ -192,14 +188,14 @@ export function CalendarConfigPanel({
             min={1}
             max={9999}
             className={css({
-              width: "100px",
-              padding: "0.5rem",
-              borderRadius: "6px",
-              bg: "bg.subtle",
-              color: "text.primary",
-              border: "1px solid",
-              borderColor: "border.default",
-              _hover: { borderColor: "border.emphasized" },
+              width: '100px',
+              padding: '0.5rem',
+              borderRadius: '6px',
+              bg: 'bg.subtle',
+              color: 'text.primary',
+              border: '1px solid',
+              borderColor: 'border.default',
+              _hover: { borderColor: 'border.emphasized' },
             })}
           />
         </div>
@@ -209,45 +205,43 @@ export function CalendarConfigPanel({
       <fieldset
         data-section="paper-size"
         className={css({
-          border: "none",
-          padding: "0",
-          margin: "0",
+          border: 'none',
+          padding: '0',
+          margin: '0',
         })}
       >
         <legend
           className={css({
-            fontSize: "1.125rem",
-            fontWeight: "600",
-            marginBottom: "0.75rem",
-            color: "accent.emphasis",
+            fontSize: '1.125rem',
+            fontWeight: '600',
+            marginBottom: '0.75rem',
+            color: 'accent.emphasis',
           })}
         >
-          {t("paperSize.title")}
+          {t('paperSize.title')}
         </legend>
         <select
           data-element="paper-size-select"
           value={paperSize}
           onChange={(e) =>
-            onPaperSizeChange(
-              e.target.value as "us-letter" | "a4" | "a3" | "tabloid",
-            )
+            onPaperSizeChange(e.target.value as 'us-letter' | 'a4' | 'a3' | 'tabloid')
           }
           className={css({
-            width: "100%",
-            padding: "0.5rem",
-            borderRadius: "6px",
-            bg: "bg.subtle",
-            color: "text.primary",
-            border: "1px solid",
-            borderColor: "border.default",
-            cursor: "pointer",
-            _hover: { borderColor: "border.emphasized" },
+            width: '100%',
+            padding: '0.5rem',
+            borderRadius: '6px',
+            bg: 'bg.subtle',
+            color: 'text.primary',
+            border: '1px solid',
+            borderColor: 'border.default',
+            cursor: 'pointer',
+            _hover: { borderColor: 'border.emphasized' },
           })}
         >
-          <option value="us-letter">{t("paperSize.usLetter")}</option>
-          <option value="a4">{t("paperSize.a4")}</option>
-          <option value="a3">{t("paperSize.a3")}</option>
-          <option value="tabloid">{t("paperSize.tabloid")}</option>
+          <option value="us-letter">{t('paperSize.usLetter')}</option>
+          <option value="a4">{t('paperSize.a4')}</option>
+          <option value="a3">{t('paperSize.a3')}</option>
+          <option value="tabloid">{t('paperSize.tabloid')}</option>
         </select>
       </fieldset>
 
@@ -255,25 +249,25 @@ export function CalendarConfigPanel({
       <div
         data-section="styling-info"
         className={css({
-          padding: "1rem",
-          bg: "bg.subtle",
-          borderRadius: "8px",
+          padding: '1rem',
+          bg: 'bg.subtle',
+          borderRadius: '8px',
         })}
       >
         <p
           className={css({
-            fontSize: "0.875rem",
-            marginBottom: "0.75rem",
-            color: "text.secondary",
+            fontSize: '0.875rem',
+            marginBottom: '0.75rem',
+            color: 'text.secondary',
           })}
         >
-          {t("styling.preview")}
+          {t('styling.preview')}
         </p>
         <div
           className={css({
-            display: "flex",
-            justifyContent: "center",
-            marginBottom: "0.75rem",
+            display: 'flex',
+            justifyContent: 'center',
+            marginBottom: '0.75rem',
           })}
         >
           <AbacusReact
@@ -286,8 +280,8 @@ export function CalendarConfigPanel({
         </div>
         <div
           className={css({
-            display: "flex",
-            justifyContent: "center",
+            display: 'flex',
+            justifyContent: 'center',
           })}
         >
           <AbacusDisplayDropdown />
@@ -301,27 +295,27 @@ export function CalendarConfigPanel({
         onClick={onGenerate}
         disabled={isGenerating}
         className={css({
-          padding: "1rem",
-          bg: "accent.default",
-          color: "accent.fg",
-          fontWeight: "600",
-          fontSize: "1.125rem",
-          borderRadius: "8px",
-          border: "none",
-          cursor: "pointer",
-          transition: "all 0.2s",
+          padding: '1rem',
+          bg: 'accent.default',
+          color: 'accent.fg',
+          fontWeight: '600',
+          fontSize: '1.125rem',
+          borderRadius: '8px',
+          border: 'none',
+          cursor: 'pointer',
+          transition: 'all 0.2s',
           _hover: {
-            bg: "accent.emphasis",
+            bg: 'accent.emphasis',
           },
           _disabled: {
-            bg: "bg.disabled",
-            color: "text.disabled",
-            cursor: "not-allowed",
+            bg: 'bg.disabled',
+            color: 'text.disabled',
+            cursor: 'not-allowed',
           },
         })}
       >
-        {isGenerating ? t("generate.generating") : t("generate.button")}
+        {isGenerating ? t('generate.generating') : t('generate.button')}
       </button>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/calendar/components/CalendarPreview.tsx b/apps/web/src/app/create/calendar/components/CalendarPreview.tsx
index 19afb8c7..f5718aff 100644
--- a/apps/web/src/app/create/calendar/components/CalendarPreview.tsx
+++ b/apps/web/src/app/create/calendar/components/CalendarPreview.tsx
@@ -1,54 +1,47 @@
-"use client";
+'use client'
 
-import { useQuery } from "@tanstack/react-query";
-import { useTranslations } from "next-intl";
-import { css } from "../../../../../styled-system/css";
+import { useQuery } from '@tanstack/react-query'
+import { useTranslations } from 'next-intl'
+import { css } from '../../../../../styled-system/css'
 
 interface CalendarPreviewProps {
-  month: number;
-  year: number;
-  format: "monthly" | "daily";
-  previewSvg: string | null;
+  month: number
+  year: number
+  format: 'monthly' | 'daily'
+  previewSvg: string | null
 }
 
 async function fetchTypstPreview(
   month: number,
   year: number,
-  format: string,
+  format: string
 ): Promise<string | null> {
-  const response = await fetch("/api/create/calendar/preview", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
+  const response = await fetch('/api/create/calendar/preview', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ month, year, format }),
-  });
+  })
 
   if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    throw new Error(
-      errorData.error || errorData.message || "Failed to fetch preview",
-    );
+    const errorData = await response.json().catch(() => ({}))
+    throw new Error(errorData.error || errorData.message || 'Failed to fetch preview')
   }
 
-  const data = await response.json();
-  return data.svg;
+  const data = await response.json()
+  return data.svg
 }
 
-export function CalendarPreview({
-  month,
-  year,
-  format,
-  previewSvg,
-}: CalendarPreviewProps) {
-  const t = useTranslations("calendar");
+export function CalendarPreview({ month, year, format, previewSvg }: CalendarPreviewProps) {
+  const t = useTranslations('calendar')
   // Use React Query to fetch Typst-generated preview (client-side only)
   const { data: typstPreviewSvg, isLoading } = useQuery({
-    queryKey: ["calendar-typst-preview", month, year, format],
+    queryKey: ['calendar-typst-preview', month, year, format],
     queryFn: () => fetchTypstPreview(month, year, format),
-    enabled: typeof window !== "undefined", // Run on client for both formats
-  });
+    enabled: typeof window !== 'undefined', // Run on client for both formats
+  })
 
   // Use generated PDF SVG if available, otherwise use Typst live preview
-  const displaySvg = previewSvg || typstPreviewSvg;
+  const displaySvg = previewSvg || typstPreviewSvg
 
   // Show loading state while fetching preview
   if (isLoading || !displaySvg) {
@@ -56,66 +49,66 @@ export function CalendarPreview({
       <div
         data-component="calendar-preview"
         className={css({
-          bg: "gray.800",
-          borderRadius: "12px",
-          padding: "2rem",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          minHeight: "600px",
+          bg: 'gray.800',
+          borderRadius: '12px',
+          padding: '2rem',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '600px',
         })}
       >
         <p
           className={css({
-            fontSize: "1.25rem",
-            color: "gray.400",
-            textAlign: "center",
+            fontSize: '1.25rem',
+            color: 'gray.400',
+            textAlign: 'center',
           })}
         >
-          {isLoading ? t("preview.loading") : t("preview.noPreview")}
+          {isLoading ? t('preview.loading') : t('preview.noPreview')}
         </p>
       </div>
-    );
+    )
   }
 
   return (
     <div
       data-component="calendar-preview"
       className={css({
-        bg: "gray.800",
-        borderRadius: "12px",
-        padding: "2rem",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
+        bg: 'gray.800',
+        borderRadius: '12px',
+        padding: '2rem',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
       })}
     >
       <p
         className={css({
-          fontSize: "1.125rem",
-          color: "yellow.400",
-          marginBottom: "1rem",
-          textAlign: "center",
-          fontWeight: "bold",
+          fontSize: '1.125rem',
+          color: 'yellow.400',
+          marginBottom: '1rem',
+          textAlign: 'center',
+          fontWeight: 'bold',
         })}
       >
         {previewSvg
-          ? t("preview.generatedPdf")
-          : format === "daily"
-            ? t("preview.livePreviewFirstDay")
-            : t("preview.livePreview")}
+          ? t('preview.generatedPdf')
+          : format === 'daily'
+            ? t('preview.livePreviewFirstDay')
+            : t('preview.livePreview')}
       </p>
       <div
         className={css({
-          bg: "white",
-          borderRadius: "8px",
-          padding: "1rem",
-          maxWidth: "100%",
-          overflow: "auto",
+          bg: 'white',
+          borderRadius: '8px',
+          padding: '1rem',
+          maxWidth: '100%',
+          overflow: 'auto',
         })}
         dangerouslySetInnerHTML={{ __html: displaySvg }}
       />
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/calendar/page.tsx b/apps/web/src/app/create/calendar/page.tsx
index acc011e2..14cfdd68 100644
--- a/apps/web/src/app/create/calendar/page.tsx
+++ b/apps/web/src/app/create/calendar/page.tsx
@@ -1,48 +1,44 @@
-"use client";
+'use client'
 
-import { useState, useEffect } from "react";
-import { useTranslations } from "next-intl";
-import { css } from "../../../../styled-system/css";
-import { useAbacusConfig } from "@soroban/abacus-react";
-import { PageWithNav } from "@/components/PageWithNav";
-import { CalendarConfigPanel } from "./components/CalendarConfigPanel";
-import { CalendarPreview } from "./components/CalendarPreview";
+import { useState, useEffect } from 'react'
+import { useTranslations } from 'next-intl'
+import { css } from '../../../../styled-system/css'
+import { useAbacusConfig } from '@soroban/abacus-react'
+import { PageWithNav } from '@/components/PageWithNav'
+import { CalendarConfigPanel } from './components/CalendarConfigPanel'
+import { CalendarPreview } from './components/CalendarPreview'
 
 export default function CalendarCreatorPage() {
-  const t = useTranslations("calendar");
-  const currentDate = new Date();
-  const abacusConfig = useAbacusConfig();
-  const [month, setMonth] = useState(currentDate.getMonth() + 1); // 1-12
-  const [year, setYear] = useState(currentDate.getFullYear());
-  const [format, setFormat] = useState<"monthly" | "daily">("monthly");
-  const [paperSize, setPaperSize] = useState<
-    "us-letter" | "a4" | "a3" | "tabloid"
-  >("us-letter");
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [previewSvg, setPreviewSvg] = useState<string | null>(null);
+  const t = useTranslations('calendar')
+  const currentDate = new Date()
+  const abacusConfig = useAbacusConfig()
+  const [month, setMonth] = useState(currentDate.getMonth() + 1) // 1-12
+  const [year, setYear] = useState(currentDate.getFullYear())
+  const [format, setFormat] = useState<'monthly' | 'daily'>('monthly')
+  const [paperSize, setPaperSize] = useState<'us-letter' | 'a4' | 'a3' | 'tabloid'>('us-letter')
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [previewSvg, setPreviewSvg] = useState<string | null>(null)
 
   // Detect default paper size based on user's locale (client-side only)
   useEffect(() => {
     // Get user's locale
-    const locale = navigator.language || navigator.languages?.[0] || "en-US";
-    const country = locale.split("-")[1]?.toUpperCase();
+    const locale = navigator.language || navigator.languages?.[0] || 'en-US'
+    const country = locale.split('-')[1]?.toUpperCase()
 
     // Countries that use US Letter (8.5" × 11")
-    const letterCountries = ["US", "CA", "MX", "GT", "PA", "DO", "PR", "PH"];
+    const letterCountries = ['US', 'CA', 'MX', 'GT', 'PA', 'DO', 'PR', 'PH']
 
-    const detectedSize = letterCountries.includes(country || "")
-      ? "us-letter"
-      : "a4";
-    setPaperSize(detectedSize);
-  }, []);
+    const detectedSize = letterCountries.includes(country || '') ? 'us-letter' : 'a4'
+    setPaperSize(detectedSize)
+  }, [])
 
   const handleGenerate = async () => {
-    setIsGenerating(true);
+    setIsGenerating(true)
     try {
-      const response = await fetch("/api/create/calendar/generate", {
-        method: "POST",
+      const response = await fetch('/api/create/calendar/generate', {
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
         body: JSON.stringify({
           month,
@@ -51,87 +47,87 @@ export default function CalendarCreatorPage() {
           paperSize,
           abacusConfig,
         }),
-      });
+      })
 
       if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.message || "Failed to generate calendar");
+        const errorData = await response.json().catch(() => ({}))
+        throw new Error(errorData.message || 'Failed to generate calendar')
       }
 
-      const data = await response.json();
+      const data = await response.json()
 
       // Convert base64 PDF to blob and trigger download
-      const pdfBytes = Uint8Array.from(atob(data.pdf), (c) => c.charCodeAt(0));
-      const blob = new Blob([pdfBytes], { type: "application/pdf" });
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = data.filename;
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(a);
+      const pdfBytes = Uint8Array.from(atob(data.pdf), (c) => c.charCodeAt(0))
+      const blob = new Blob([pdfBytes], { type: 'application/pdf' })
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = data.filename
+      document.body.appendChild(a)
+      a.click()
+      window.URL.revokeObjectURL(url)
+      document.body.removeChild(a)
     } catch (error) {
-      console.error("Error generating calendar:", error);
+      console.error('Error generating calendar:', error)
       alert(
-        `Failed to generate calendar: ${error instanceof Error ? error.message : "Unknown error"}`,
-      );
+        `Failed to generate calendar: ${error instanceof Error ? error.message : 'Unknown error'}`
+      )
     } finally {
-      setIsGenerating(false);
+      setIsGenerating(false)
     }
-  };
+  }
 
   return (
     <PageWithNav navTitle="Create" navEmoji="📅">
       <div
         data-component="calendar-creator"
         className={`with-fixed-nav ${css({
-          minHeight: "100vh",
-          bg: "bg.canvas",
-          color: "text.primary",
-          padding: "2rem",
+          minHeight: '100vh',
+          bg: 'bg.canvas',
+          color: 'text.primary',
+          padding: '2rem',
         })}`}
       >
         <div
           className={css({
-            maxWidth: "1400px",
-            margin: "0 auto",
+            maxWidth: '1400px',
+            margin: '0 auto',
           })}
         >
           {/* Header */}
           <header
             data-section="page-header"
             className={css({
-              textAlign: "center",
-              marginBottom: "3rem",
+              textAlign: 'center',
+              marginBottom: '3rem',
             })}
           >
             <h1
               className={css({
-                fontSize: "2.5rem",
-                fontWeight: "bold",
-                marginBottom: "0.5rem",
-                color: "accent.emphasis",
+                fontSize: '2.5rem',
+                fontWeight: 'bold',
+                marginBottom: '0.5rem',
+                color: 'accent.emphasis',
               })}
             >
-              {t("pageTitle")}
+              {t('pageTitle')}
             </h1>
             <p
               className={css({
-                fontSize: "1.125rem",
-                color: "text.secondary",
+                fontSize: '1.125rem',
+                color: 'text.secondary',
               })}
             >
-              {t("pageSubtitle")}
+              {t('pageSubtitle')}
             </p>
           </header>
 
           {/* Main Content */}
           <div
             className={css({
-              display: "grid",
-              gridTemplateColumns: { base: "1fr", lg: "350px 1fr" },
-              gap: "2rem",
+              display: 'grid',
+              gridTemplateColumns: { base: '1fr', lg: '350px 1fr' },
+              gap: '2rem',
             })}
           >
             {/* Configuration Panel */}
@@ -149,15 +145,10 @@ export default function CalendarCreatorPage() {
             />
 
             {/* Preview */}
-            <CalendarPreview
-              month={month}
-              year={year}
-              format={format}
-              previewSvg={previewSvg}
-            />
+            <CalendarPreview month={month} year={year} format={format} previewSvg={previewSvg} />
           </div>
         </div>
       </div>
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/flashcards/page.tsx b/apps/web/src/app/create/flashcards/page.tsx
index 636570df..1cedb7c2 100644
--- a/apps/web/src/app/create/flashcards/page.tsx
+++ b/apps/web/src/app/create/flashcards/page.tsx
@@ -1,139 +1,131 @@
-"use client";
+'use client'
 
-import { useAbacusConfig } from "@soroban/abacus-react";
-import { useForm } from "@tanstack/react-form";
-import { useTranslations } from "next-intl";
-import { useState } from "react";
-import { ConfigurationFormWithoutGenerate } from "@/components/ConfigurationFormWithoutGenerate";
-import { GenerationProgress } from "@/components/GenerationProgress";
-import { FlashcardPreview } from "@/components/FlashcardPreview";
-import { PageWithNav } from "@/components/PageWithNav";
-import { StyleControls } from "@/components/StyleControls";
-import { css } from "../../../../styled-system/css";
-import {
-  container,
-  grid,
-  hstack,
-  stack,
-} from "../../../../styled-system/patterns";
+import { useAbacusConfig } from '@soroban/abacus-react'
+import { useForm } from '@tanstack/react-form'
+import { useTranslations } from 'next-intl'
+import { useState } from 'react'
+import { ConfigurationFormWithoutGenerate } from '@/components/ConfigurationFormWithoutGenerate'
+import { GenerationProgress } from '@/components/GenerationProgress'
+import { FlashcardPreview } from '@/components/FlashcardPreview'
+import { PageWithNav } from '@/components/PageWithNav'
+import { StyleControls } from '@/components/StyleControls'
+import { css } from '../../../../styled-system/css'
+import { container, grid, hstack, stack } from '../../../../styled-system/patterns'
 
 // Complete, validated configuration ready for generation
 export interface FlashcardConfig {
-  range: string;
-  step?: number;
-  cardsPerPage?: number;
-  paperSize?: "us-letter" | "a4" | "a3" | "a5";
-  orientation?: "portrait" | "landscape";
+  range: string
+  step?: number
+  cardsPerPage?: number
+  paperSize?: 'us-letter' | 'a4' | 'a3' | 'a5'
+  orientation?: 'portrait' | 'landscape'
   margins?: {
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-  };
-  gutter?: string;
-  shuffle?: boolean;
-  seed?: number;
-  showCutMarks?: boolean;
-  showRegistration?: boolean;
-  fontFamily?: string;
-  fontSize?: string;
-  columns?: string | number;
-  showEmptyColumns?: boolean;
-  hideInactiveBeads?: boolean;
-  beadShape?: "diamond" | "circle" | "square";
-  colorScheme?: "monochrome" | "place-value" | "heaven-earth" | "alternating";
-  colorPalette?: "default" | "pastel" | "vibrant" | "earth-tones";
-  coloredNumerals?: boolean;
-  scaleFactor?: number;
-  format?: "pdf" | "html" | "png" | "svg";
+    top?: string
+    bottom?: string
+    left?: string
+    right?: string
+  }
+  gutter?: string
+  shuffle?: boolean
+  seed?: number
+  showCutMarks?: boolean
+  showRegistration?: boolean
+  fontFamily?: string
+  fontSize?: string
+  columns?: string | number
+  showEmptyColumns?: boolean
+  hideInactiveBeads?: boolean
+  beadShape?: 'diamond' | 'circle' | 'square'
+  colorScheme?: 'monochrome' | 'place-value' | 'heaven-earth' | 'alternating'
+  colorPalette?: 'default' | 'pastel' | 'vibrant' | 'earth-tones'
+  coloredNumerals?: boolean
+  scaleFactor?: number
+  format?: 'pdf' | 'html' | 'png' | 'svg'
 }
 
 // Partial form state during editing (may have undefined values)
 export interface FlashcardFormState {
-  range?: string;
-  step?: number;
-  cardsPerPage?: number;
-  paperSize?: "us-letter" | "a4" | "a3" | "a5";
-  orientation?: "portrait" | "landscape";
+  range?: string
+  step?: number
+  cardsPerPage?: number
+  paperSize?: 'us-letter' | 'a4' | 'a3' | 'a5'
+  orientation?: 'portrait' | 'landscape'
   margins?: {
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-  };
-  gutter?: string;
-  shuffle?: boolean;
-  seed?: number;
-  showCutMarks?: boolean;
-  showRegistration?: boolean;
-  fontFamily?: string;
-  fontSize?: string;
-  columns?: string | number;
-  showEmptyColumns?: boolean;
-  hideInactiveBeads?: boolean;
-  beadShape?: "diamond" | "circle" | "square";
-  colorScheme?: "monochrome" | "place-value" | "heaven-earth" | "alternating";
-  colorPalette?: "default" | "pastel" | "vibrant" | "earth-tones";
-  coloredNumerals?: boolean;
-  scaleFactor?: number;
-  format?: "pdf" | "html" | "png" | "svg";
+    top?: string
+    bottom?: string
+    left?: string
+    right?: string
+  }
+  gutter?: string
+  shuffle?: boolean
+  seed?: number
+  showCutMarks?: boolean
+  showRegistration?: boolean
+  fontFamily?: string
+  fontSize?: string
+  columns?: string | number
+  showEmptyColumns?: boolean
+  hideInactiveBeads?: boolean
+  beadShape?: 'diamond' | 'circle' | 'square'
+  colorScheme?: 'monochrome' | 'place-value' | 'heaven-earth' | 'alternating'
+  colorPalette?: 'default' | 'pastel' | 'vibrant' | 'earth-tones'
+  coloredNumerals?: boolean
+  scaleFactor?: number
+  format?: 'pdf' | 'html' | 'png' | 'svg'
 }
 
 // Validation function to convert form state to complete config
-function validateAndCompleteConfig(
-  formState: FlashcardFormState,
-): FlashcardConfig {
+function validateAndCompleteConfig(formState: FlashcardFormState): FlashcardConfig {
   return {
     // Required fields with defaults
-    range: formState.range || "0-99",
+    range: formState.range || '0-99',
 
     // Optional fields with defaults
     step: formState.step ?? 1,
     cardsPerPage: formState.cardsPerPage ?? 6,
-    paperSize: formState.paperSize ?? "us-letter",
-    orientation: formState.orientation ?? "portrait",
-    gutter: formState.gutter ?? "5mm",
+    paperSize: formState.paperSize ?? 'us-letter',
+    orientation: formState.orientation ?? 'portrait',
+    gutter: formState.gutter ?? '5mm',
     shuffle: formState.shuffle ?? false,
     seed: formState.seed,
     showCutMarks: formState.showCutMarks ?? false,
     showRegistration: formState.showRegistration ?? false,
-    fontFamily: formState.fontFamily ?? "DejaVu Sans",
-    fontSize: formState.fontSize ?? "48pt",
-    columns: formState.columns ?? "auto",
+    fontFamily: formState.fontFamily ?? 'DejaVu Sans',
+    fontSize: formState.fontSize ?? '48pt',
+    columns: formState.columns ?? 'auto',
     showEmptyColumns: formState.showEmptyColumns ?? false,
     hideInactiveBeads: formState.hideInactiveBeads ?? false,
-    beadShape: formState.beadShape ?? "diamond",
-    colorScheme: formState.colorScheme ?? "place-value",
+    beadShape: formState.beadShape ?? 'diamond',
+    colorScheme: formState.colorScheme ?? 'place-value',
     coloredNumerals: formState.coloredNumerals ?? false,
     scaleFactor: formState.scaleFactor ?? 0.9,
-    format: formState.format ?? "pdf",
+    format: formState.format ?? 'pdf',
     margins: formState.margins,
-  };
+  }
 }
 
-type GenerationStatus = "idle" | "generating" | "error";
+type GenerationStatus = 'idle' | 'generating' | 'error'
 
 export default function CreatePage() {
-  const t = useTranslations("create.flashcards");
-  const [generationStatus, setGenerationStatus] =
-    useState<GenerationStatus>("idle");
-  const [error, setError] = useState<string | null>(null);
-  const globalConfig = useAbacusConfig();
+  const t = useTranslations('create.flashcards')
+  const [generationStatus, setGenerationStatus] = useState<GenerationStatus>('idle')
+  const [error, setError] = useState<string | null>(null)
+  const globalConfig = useAbacusConfig()
 
   const form = useForm<FlashcardFormState>({
     defaultValues: {
-      range: "0-99",
+      range: '0-99',
       step: 1,
       cardsPerPage: 6,
-      paperSize: "us-letter",
-      orientation: "portrait",
-      gutter: "5mm",
+      paperSize: 'us-letter',
+      orientation: 'portrait',
+      gutter: '5mm',
       shuffle: false,
       showCutMarks: false,
       showRegistration: false,
-      fontFamily: "DejaVu Sans",
-      fontSize: "48pt",
-      columns: "auto",
+      fontFamily: 'DejaVu Sans',
+      fontSize: '48pt',
+      columns: 'auto',
       showEmptyColumns: false,
       // Use global config for abacus display settings
       hideInactiveBeads: globalConfig.hideInactiveBeads,
@@ -141,83 +133,83 @@ export default function CreatePage() {
       colorScheme: globalConfig.colorScheme,
       coloredNumerals: globalConfig.coloredNumerals,
       scaleFactor: globalConfig.scaleFactor,
-      format: "pdf",
+      format: 'pdf',
     },
-  });
+  })
 
   const handleGenerate = async (formState: FlashcardFormState) => {
-    setGenerationStatus("generating");
-    setError(null);
+    setGenerationStatus('generating')
+    setError(null)
 
     try {
       // Validate and complete the configuration
-      const config = validateAndCompleteConfig(formState);
+      const config = validateAndCompleteConfig(formState)
 
-      const response = await fetch("/api/generate", {
-        method: "POST",
+      const response = await fetch('/api/generate', {
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
         body: JSON.stringify(config),
-      });
+      })
 
       if (!response.ok) {
         // Handle error response (should be JSON)
-        const errorResult = await response.json();
-        throw new Error(errorResult.error || "Generation failed");
+        const errorResult = await response.json()
+        throw new Error(errorResult.error || 'Generation failed')
       }
 
       // Success - response is binary PDF data, trigger download
-      const blob = await response.blob();
-      const filename = `soroban-flashcards-${config.range || "cards"}.pdf`;
+      const blob = await response.blob()
+      const filename = `soroban-flashcards-${config.range || 'cards'}.pdf`
 
       // Create download link and trigger download
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.style.display = "none";
-      a.href = url;
-      a.download = filename;
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(a);
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.style.display = 'none'
+      a.href = url
+      a.download = filename
+      document.body.appendChild(a)
+      a.click()
+      window.URL.revokeObjectURL(url)
+      document.body.removeChild(a)
 
-      setGenerationStatus("idle"); // Reset to idle after successful download
+      setGenerationStatus('idle') // Reset to idle after successful download
     } catch (err) {
-      console.error("Generation error:", err);
-      setError(err instanceof Error ? err.message : "Unknown error occurred");
-      setGenerationStatus("error");
+      console.error('Generation error:', err)
+      setError(err instanceof Error ? err.message : 'Unknown error occurred')
+      setGenerationStatus('error')
     }
-  };
+  }
 
   const handleNewGeneration = () => {
-    setGenerationStatus("idle");
-    setError(null);
-  };
+    setGenerationStatus('idle')
+    setError(null)
+  }
 
   return (
-    <PageWithNav navTitle={t("navTitle")} navEmoji="✨">
-      <div className={css({ minHeight: "100vh", bg: "bg.canvas" })}>
+    <PageWithNav navTitle={t('navTitle')} navEmoji="✨">
+      <div className={css({ minHeight: '100vh', bg: 'bg.canvas' })}>
         {/* Main Content */}
-        <div className={container({ maxW: "7xl", px: "4", py: "8" })}>
-          <div className={stack({ gap: "6", mb: "8" })}>
-            <div className={stack({ gap: "2", textAlign: "center" })}>
+        <div className={container({ maxW: '7xl', px: '4', py: '8' })}>
+          <div className={stack({ gap: '6', mb: '8' })}>
+            <div className={stack({ gap: '2', textAlign: 'center' })}>
               <h1
                 className={css({
-                  fontSize: "3xl",
-                  fontWeight: "bold",
-                  color: "text.primary",
+                  fontSize: '3xl',
+                  fontWeight: 'bold',
+                  color: 'text.primary',
                 })}
               >
-                {t("pageTitle")}
+                {t('pageTitle')}
               </h1>
               <p
                 className={css({
-                  fontSize: "lg",
-                  color: "text.secondary",
+                  fontSize: 'lg',
+                  color: 'text.secondary',
                 })}
               >
-                {t("pageSubtitle")}
+                {t('pageSubtitle')}
               </p>
             </div>
           </div>
@@ -226,17 +218,17 @@ export default function CreatePage() {
           <div
             className={grid({
               columns: { base: 1, lg: 3 },
-              gap: "8",
-              alignItems: "start",
+              gap: '8',
+              alignItems: 'start',
             })}
           >
             {/* Main Configuration Panel */}
             <div
               className={css({
-                bg: "bg.default",
-                rounded: "2xl",
-                shadow: "card",
-                p: "8",
+                bg: 'bg.default',
+                rounded: '2xl',
+                shadow: 'card',
+                p: '8',
               })}
             >
               <ConfigurationFormWithoutGenerate form={form} />
@@ -245,30 +237,30 @@ export default function CreatePage() {
             {/* Style Controls Panel */}
             <div
               className={css({
-                bg: "bg.default",
-                rounded: "2xl",
-                shadow: "card",
-                p: "6",
+                bg: 'bg.default',
+                rounded: '2xl',
+                shadow: 'card',
+                p: '6',
               })}
             >
-              <div className={stack({ gap: "4" })}>
-                <div className={stack({ gap: "1" })}>
+              <div className={stack({ gap: '4' })}>
+                <div className={stack({ gap: '1' })}>
                   <h3
                     className={css({
-                      fontSize: "lg",
-                      fontWeight: "bold",
-                      color: "text.primary",
+                      fontSize: 'lg',
+                      fontWeight: 'bold',
+                      color: 'text.primary',
                     })}
                   >
-                    {t("stylePanel.title")}
+                    {t('stylePanel.title')}
                   </h3>
                   <p
                     className={css({
-                      fontSize: "sm",
-                      color: "text.secondary",
+                      fontSize: 'sm',
+                      color: 'text.secondary',
                     })}
                   >
-                    {t("stylePanel.subtitle")}
+                    {t('stylePanel.subtitle')}
                   </p>
                 </div>
 
@@ -282,84 +274,79 @@ export default function CreatePage() {
             {/* Live Preview Panel */}
             <div
               className={css({
-                bg: "bg.default",
-                rounded: "2xl",
-                shadow: "card",
-                p: "6",
+                bg: 'bg.default',
+                rounded: '2xl',
+                shadow: 'card',
+                p: '6',
               })}
             >
-              <div className={stack({ gap: "6" })}>
+              <div className={stack({ gap: '6' })}>
                 <form.Subscribe
                   selector={(state) => state}
-                  children={(state) => (
-                    <FlashcardPreview config={state.values} />
-                  )}
+                  children={(state) => <FlashcardPreview config={state.values} />}
                 />
 
                 {/* Generate Button within Preview */}
                 <div
                   className={css({
-                    borderTop: "1px solid",
-                    borderColor: "border.default",
-                    pt: "6",
+                    borderTop: '1px solid',
+                    borderColor: 'border.default',
+                    pt: '6',
                   })}
                 >
                   {/* Generation Status */}
-                  {generationStatus === "generating" && (
-                    <div className={css({ mb: "4" })}>
+                  {generationStatus === 'generating' && (
+                    <div className={css({ mb: '4' })}>
                       <GenerationProgress config={form.state.values} />
                     </div>
                   )}
 
                   <button
                     onClick={() => handleGenerate(form.state.values)}
-                    disabled={generationStatus === "generating"}
+                    disabled={generationStatus === 'generating'}
                     className={css({
-                      w: "full",
-                      px: "6",
-                      py: "4",
-                      bg: "accent.default",
-                      color: "accent.fg",
-                      fontSize: "lg",
-                      fontWeight: "semibold",
-                      rounded: "xl",
-                      shadow: "card",
-                      transition: "all",
-                      cursor:
-                        generationStatus === "generating"
-                          ? "not-allowed"
-                          : "pointer",
-                      opacity: generationStatus === "generating" ? "0.7" : "1",
+                      w: 'full',
+                      px: '6',
+                      py: '4',
+                      bg: 'accent.default',
+                      color: 'accent.fg',
+                      fontSize: 'lg',
+                      fontWeight: 'semibold',
+                      rounded: 'xl',
+                      shadow: 'card',
+                      transition: 'all',
+                      cursor: generationStatus === 'generating' ? 'not-allowed' : 'pointer',
+                      opacity: generationStatus === 'generating' ? '0.7' : '1',
                       _hover:
-                        generationStatus === "generating"
+                        generationStatus === 'generating'
                           ? {}
                           : {
-                              bg: "accent.emphasis",
-                              transform: "translateY(-1px)",
-                              shadow: "modal",
+                              bg: 'accent.emphasis',
+                              transform: 'translateY(-1px)',
+                              shadow: 'modal',
                             },
                     })}
                   >
-                    <span className={hstack({ gap: "3", justify: "center" })}>
-                      {generationStatus === "generating" ? (
+                    <span className={hstack({ gap: '3', justify: 'center' })}>
+                      {generationStatus === 'generating' ? (
                         <>
                           <div
                             className={css({
-                              w: "5",
-                              h: "5",
-                              border: "2px solid",
-                              borderColor: "accent.fg",
-                              borderTopColor: "transparent",
-                              rounded: "full",
-                              animation: "spin 1s linear infinite",
+                              w: '5',
+                              h: '5',
+                              border: '2px solid',
+                              borderColor: 'accent.fg',
+                              borderTopColor: 'transparent',
+                              rounded: 'full',
+                              animation: 'spin 1s linear infinite',
                             })}
                           />
-                          {t("generate.generating")}
+                          {t('generate.generating')}
                         </>
                       ) : (
                         <>
-                          <div className={css({ fontSize: "xl" })}>✨</div>
-                          {t("generate.button")}
+                          <div className={css({ fontSize: 'xl' })}>✨</div>
+                          {t('generate.button')}
                         </>
                       )}
                     </span>
@@ -370,34 +357,34 @@ export default function CreatePage() {
           </div>
 
           {/* Error Display - moved to global level */}
-          {generationStatus === "error" && error && (
+          {generationStatus === 'error' && error && (
             <div
               className={css({
-                bg: "red.50",
-                border: "1px solid",
-                borderColor: "red.200",
-                rounded: "2xl",
-                p: "8",
-                mt: "8",
+                bg: 'red.50',
+                border: '1px solid',
+                borderColor: 'red.200',
+                rounded: '2xl',
+                p: '8',
+                mt: '8',
               })}
             >
-              <div className={stack({ gap: "4" })}>
-                <div className={hstack({ gap: "3", alignItems: "center" })}>
-                  <div className={css({ fontSize: "2xl" })}>❌</div>
+              <div className={stack({ gap: '4' })}>
+                <div className={hstack({ gap: '3', alignItems: 'center' })}>
+                  <div className={css({ fontSize: '2xl' })}>❌</div>
                   <h3
                     className={css({
-                      fontSize: "xl",
-                      fontWeight: "semibold",
-                      color: "red.900",
+                      fontSize: 'xl',
+                      fontWeight: 'semibold',
+                      color: 'red.900',
                     })}
                   >
-                    {t("error.title")}
+                    {t('error.title')}
                   </h3>
                 </div>
                 <p
                   className={css({
-                    color: "red.800",
-                    lineHeight: "relaxed",
+                    color: 'red.800',
+                    lineHeight: 'relaxed',
                   })}
                 >
                   {error}
@@ -405,18 +392,18 @@ export default function CreatePage() {
                 <button
                   onClick={handleNewGeneration}
                   className={css({
-                    alignSelf: "start",
-                    px: "4",
-                    py: "2",
-                    bg: "red.700",
-                    color: "white",
-                    fontWeight: "medium",
-                    rounded: "lg",
-                    transition: "all",
-                    _hover: { bg: "red.800" },
+                    alignSelf: 'start',
+                    px: '4',
+                    py: '2',
+                    bg: 'red.700',
+                    color: 'white',
+                    fontWeight: 'medium',
+                    rounded: 'lg',
+                    transition: 'all',
+                    _hover: { bg: 'red.800' },
                   })}
                 >
-                  {t("error.tryAgain")}
+                  {t('error.tryAgain')}
                 </button>
               </div>
             </div>
@@ -424,5 +411,5 @@ export default function CreatePage() {
         </div>
       </div>
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/page.tsx b/apps/web/src/app/create/page.tsx
index 9c0f4acb..45577018 100644
--- a/apps/web/src/app/create/page.tsx
+++ b/apps/web/src/app/create/page.tsx
@@ -1,84 +1,84 @@
-"use client";
+'use client'
 
-import Link from "next/link";
-import { useTranslations } from "next-intl";
-import { PageWithNav } from "@/components/PageWithNav";
-import { css } from "../../../styled-system/css";
+import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+import { PageWithNav } from '@/components/PageWithNav'
+import { css } from '../../../styled-system/css'
 
 export default function CreateHubPage() {
-  const t = useTranslations("create.hub");
+  const t = useTranslations('create.hub')
 
   return (
     <PageWithNav navTitle="Create" navEmoji="✨">
       <div
         data-component="create-hub"
         className={css({
-          minHeight: "100vh",
-          bg: "bg.canvas",
+          minHeight: '100vh',
+          bg: 'bg.canvas',
           pt: 24,
           pb: 16,
-          position: "relative",
-          overflow: "hidden",
+          position: 'relative',
+          overflow: 'hidden',
         })}
       >
         <div
           className={css({
-            maxWidth: "1200px",
-            mx: "auto",
+            maxWidth: '1200px',
+            mx: 'auto',
             px: 6,
-            position: "relative",
+            position: 'relative',
             zIndex: 1,
           })}
         >
           {/* Header */}
           <div
             className={css({
-              textAlign: "center",
+              textAlign: 'center',
               mb: 16,
             })}
           >
             <div
               className={css({
-                fontSize: "6xl",
+                fontSize: '6xl',
                 mb: 4,
-                animation: "float 3s ease-in-out infinite",
+                animation: 'float 3s ease-in-out infinite',
               })}
             >
               ✨
             </div>
             <h1
               className={css({
-                fontSize: { base: "3xl", md: "5xl" },
-                fontWeight: "extrabold",
+                fontSize: { base: '3xl', md: '5xl' },
+                fontWeight: 'extrabold',
                 mb: 5,
-                color: "text.primary",
-                letterSpacing: "tight",
+                color: 'text.primary',
+                letterSpacing: 'tight',
               })}
             >
-              {t("pageTitle")}
+              {t('pageTitle')}
             </h1>
             <p
               className={css({
-                fontSize: { base: "lg", md: "xl" },
-                color: "text.secondary",
-                maxWidth: "2xl",
-                mx: "auto",
-                lineHeight: "1.8",
+                fontSize: { base: 'lg', md: 'xl' },
+                color: 'text.secondary',
+                maxWidth: '2xl',
+                mx: 'auto',
+                lineHeight: '1.8',
               })}
             >
-              {t("pageSubtitle")}
+              {t('pageSubtitle')}
             </p>
           </div>
 
           {/* Creator Cards */}
           <div
             className={css({
-              display: "grid",
+              display: 'grid',
               gridTemplateColumns: {
-                base: "1fr",
-                md: "1fr 1fr",
-                lg: "repeat(2, 1fr)",
-                xl: "repeat(4, 1fr)",
+                base: '1fr',
+                md: '1fr 1fr',
+                lg: 'repeat(2, 1fr)',
+                xl: 'repeat(4, 1fr)',
               },
               gap: 8,
             })}
@@ -88,48 +88,45 @@ export default function CreateHubPage() {
               <div
                 data-element="flashcards-card"
                 className={css({
-                  bg: "bg.surface",
-                  borderRadius: "3xl",
+                  bg: 'bg.surface',
+                  borderRadius: '3xl',
                   p: 8,
-                  border: "1px solid",
-                  borderColor: "border.default",
-                  boxShadow: "0 20px 60px rgba(0,0,0,0.25)",
-                  cursor: "pointer",
-                  transition:
-                    "all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-                  position: "relative",
-                  overflow: "hidden",
+                  border: '1px solid',
+                  borderColor: 'border.default',
+                  boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
+                  cursor: 'pointer',
+                  transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+                  position: 'relative',
+                  overflow: 'hidden',
                   _hover: {
-                    transform: "translateY(-12px) scale(1.02)",
-                    boxShadow: "0 30px 80px rgba(0,0,0,0.35)",
-                    borderColor: "border.emphasized",
+                    transform: 'translateY(-12px) scale(1.02)',
+                    boxShadow: '0 30px 80px rgba(0,0,0,0.35)',
+                    borderColor: 'border.emphasized',
                   },
                   _before: {
                     content: '""',
-                    position: "absolute",
+                    position: 'absolute',
                     top: 0,
                     left: 0,
                     right: 0,
-                    height: "6px",
-                    background:
-                      "linear-gradient(90deg, #667eea 0%, #764ba2 100%)",
+                    height: '6px',
+                    background: 'linear-gradient(90deg, #667eea 0%, #764ba2 100%)',
                   },
                 })}
               >
                 {/* Icon with gradient background */}
                 <div
                   className={css({
-                    display: "inline-flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    fontSize: "4xl",
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '4xl',
                     mb: 5,
-                    width: "80px",
-                    height: "80px",
-                    borderRadius: "2xl",
-                    background:
-                      "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-                    boxShadow: "0 8px 24px rgba(102, 126, 234, 0.4)",
+                    width: '80px',
+                    height: '80px',
+                    borderRadius: '2xl',
+                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                    boxShadow: '0 8px 24px rgba(102, 126, 234, 0.4)',
                   })}
                 >
                   🃏
@@ -138,117 +135,117 @@ export default function CreateHubPage() {
                 {/* Title */}
                 <h2
                   className={css({
-                    fontSize: "2xl",
-                    fontWeight: "extrabold",
+                    fontSize: '2xl',
+                    fontWeight: 'extrabold',
                     mb: 3,
-                    color: "text.primary",
-                    letterSpacing: "tight",
+                    color: 'text.primary',
+                    letterSpacing: 'tight',
                   })}
                 >
-                  {t("flashcards.title")}
+                  {t('flashcards.title')}
                 </h2>
 
                 {/* Description */}
                 <p
                   className={css({
-                    fontSize: "md",
-                    color: "text.secondary",
+                    fontSize: 'md',
+                    color: 'text.secondary',
                     mb: 5,
-                    lineHeight: "1.7",
+                    lineHeight: '1.7',
                   })}
                 >
-                  {t("flashcards.description")}
+                  {t('flashcards.description')}
                 </p>
 
                 {/* Features */}
                 <ul
                   className={css({
-                    listStyle: "none",
-                    display: "flex",
-                    flexDirection: "column",
+                    listStyle: 'none',
+                    display: 'flex',
+                    flexDirection: 'column',
                     gap: 3,
                   })}
                 >
                   <li
                     className={css({
-                      display: "flex",
-                      alignItems: "center",
+                      display: 'flex',
+                      alignItems: 'center',
                       gap: 3,
-                      fontSize: "sm",
-                      color: "text.secondary",
+                      fontSize: 'sm',
+                      color: 'text.secondary',
                     })}
                   >
                     <span
                       className={css({
-                        display: "inline-flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "20px",
-                        height: "20px",
-                        borderRadius: "full",
-                        bg: "purple.100",
-                        color: "purple.600",
-                        fontSize: "xs",
-                        fontWeight: "bold",
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '20px',
+                        height: '20px',
+                        borderRadius: 'full',
+                        bg: 'purple.100',
+                        color: 'purple.600',
+                        fontSize: 'xs',
+                        fontWeight: 'bold',
                       })}
                     >
                       ✓
                     </span>
-                    {t("flashcards.feature1")}
+                    {t('flashcards.feature1')}
                   </li>
                   <li
                     className={css({
-                      display: "flex",
-                      alignItems: "center",
+                      display: 'flex',
+                      alignItems: 'center',
                       gap: 3,
-                      fontSize: "sm",
-                      color: "text.secondary",
+                      fontSize: 'sm',
+                      color: 'text.secondary',
                     })}
                   >
                     <span
                       className={css({
-                        display: "inline-flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "20px",
-                        height: "20px",
-                        borderRadius: "full",
-                        bg: "purple.100",
-                        color: "purple.600",
-                        fontSize: "xs",
-                        fontWeight: "bold",
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '20px',
+                        height: '20px',
+                        borderRadius: 'full',
+                        bg: 'purple.100',
+                        color: 'purple.600',
+                        fontSize: 'xs',
+                        fontWeight: 'bold',
                       })}
                     >
                       ✓
                     </span>
-                    {t("flashcards.feature2")}
+                    {t('flashcards.feature2')}
                   </li>
                   <li
                     className={css({
-                      display: "flex",
-                      alignItems: "center",
+                      display: 'flex',
+                      alignItems: 'center',
                       gap: 3,
-                      fontSize: "sm",
-                      color: "text.secondary",
+                      fontSize: 'sm',
+                      color: 'text.secondary',
                     })}
                   >
                     <span
                       className={css({
-                        display: "inline-flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "20px",
-                        height: "20px",
-                        borderRadius: "full",
-                        bg: "purple.100",
-                        color: "purple.600",
-                        fontSize: "xs",
-                        fontWeight: "bold",
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '20px',
+                        height: '20px',
+                        borderRadius: 'full',
+                        bg: 'purple.100',
+                        color: 'purple.600',
+                        fontSize: 'xs',
+                        fontWeight: 'bold',
                       })}
                     >
                       ✓
                     </span>
-                    {t("flashcards.feature3")}
+                    {t('flashcards.feature3')}
                   </li>
                 </ul>
 
@@ -260,27 +257,26 @@ export default function CreateHubPage() {
                 >
                   <div
                     className={css({
-                      display: "inline-flex",
-                      alignItems: "center",
+                      display: 'inline-flex',
+                      alignItems: 'center',
                       gap: 2,
                       px: 6,
                       py: 3,
-                      borderRadius: "xl",
-                      background:
-                        "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-                      color: "white",
-                      fontWeight: "bold",
-                      fontSize: "md",
-                      boxShadow: "0 4px 15px rgba(102, 126, 234, 0.4)",
-                      transition: "all 0.3s",
+                      borderRadius: 'xl',
+                      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                      color: 'white',
+                      fontWeight: 'bold',
+                      fontSize: 'md',
+                      boxShadow: '0 4px 15px rgba(102, 126, 234, 0.4)',
+                      transition: 'all 0.3s',
                       _hover: {
-                        boxShadow: "0 6px 20px rgba(102, 126, 234, 0.5)",
-                        transform: "translateX(4px)",
+                        boxShadow: '0 6px 20px rgba(102, 126, 234, 0.5)',
+                        transform: 'translateX(4px)',
                       },
                     })}
                   >
-                    <span>{t("flashcards.button")}</span>
-                    <span className={css({ fontSize: "lg" })}>→</span>
+                    <span>{t('flashcards.button')}</span>
+                    <span className={css({ fontSize: 'lg' })}>→</span>
                   </div>
                 </div>
               </div>
@@ -291,48 +287,45 @@ export default function CreateHubPage() {
               <div
                 data-element="worksheets-card"
                 className={css({
-                  bg: "bg.surface",
-                  borderRadius: "3xl",
+                  bg: 'bg.surface',
+                  borderRadius: '3xl',
                   p: 8,
-                  border: "1px solid",
-                  borderColor: "border.default",
-                  boxShadow: "0 20px 60px rgba(0,0,0,0.25)",
-                  cursor: "pointer",
-                  transition:
-                    "all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-                  position: "relative",
-                  overflow: "hidden",
+                  border: '1px solid',
+                  borderColor: 'border.default',
+                  boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
+                  cursor: 'pointer',
+                  transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+                  position: 'relative',
+                  overflow: 'hidden',
                   _hover: {
-                    transform: "translateY(-12px) scale(1.02)",
-                    boxShadow: "0 30px 80px rgba(0,0,0,0.35)",
-                    borderColor: "border.emphasized",
+                    transform: 'translateY(-12px) scale(1.02)',
+                    boxShadow: '0 30px 80px rgba(0,0,0,0.35)',
+                    borderColor: 'border.emphasized',
                   },
                   _before: {
                     content: '""',
-                    position: "absolute",
+                    position: 'absolute',
                     top: 0,
                     left: 0,
                     right: 0,
-                    height: "6px",
-                    background:
-                      "linear-gradient(90deg, #10b981 0%, #059669 100%)",
+                    height: '6px',
+                    background: 'linear-gradient(90deg, #10b981 0%, #059669 100%)',
                   },
                 })}
               >
                 {/* Icon with gradient background */}
                 <div
                   className={css({
-                    display: "inline-flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    fontSize: "4xl",
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '4xl',
                     mb: 5,
-                    width: "80px",
-                    height: "80px",
-                    borderRadius: "2xl",
-                    background:
-                      "linear-gradient(135deg, #10b981 0%, #059669 100%)",
-                    boxShadow: "0 8px 24px rgba(16, 185, 129, 0.4)",
+                    width: '80px',
+                    height: '80px',
+                    borderRadius: '2xl',
+                    background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+                    boxShadow: '0 8px 24px rgba(16, 185, 129, 0.4)',
                   })}
                 >
                   📝
@@ -341,117 +334,117 @@ export default function CreateHubPage() {
                 {/* Title */}
                 <h2
                   className={css({
-                    fontSize: "2xl",
-                    fontWeight: "extrabold",
+                    fontSize: '2xl',
+                    fontWeight: 'extrabold',
                     mb: 3,
-                    color: "text.primary",
-                    letterSpacing: "tight",
+                    color: 'text.primary',
+                    letterSpacing: 'tight',
                   })}
                 >
-                  {t("worksheets.title")}
+                  {t('worksheets.title')}
                 </h2>
 
                 {/* Description */}
                 <p
                   className={css({
-                    fontSize: "md",
-                    color: "text.secondary",
+                    fontSize: 'md',
+                    color: 'text.secondary',
                     mb: 5,
-                    lineHeight: "1.7",
+                    lineHeight: '1.7',
                   })}
                 >
-                  {t("worksheets.description")}
+                  {t('worksheets.description')}
                 </p>
 
                 {/* Features */}
                 <ul
                   className={css({
-                    listStyle: "none",
-                    display: "flex",
-                    flexDirection: "column",
+                    listStyle: 'none',
+                    display: 'flex',
+                    flexDirection: 'column',
                     gap: 3,
                   })}
                 >
                   <li
                     className={css({
-                      display: "flex",
-                      alignItems: "center",
+                      display: 'flex',
+                      alignItems: 'center',
                       gap: 3,
-                      fontSize: "sm",
-                      color: "text.secondary",
+                      fontSize: 'sm',
+                      color: 'text.secondary',
                     })}
                   >
                     <span
                       className={css({
-                        display: "inline-flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "20px",
-                        height: "20px",
-                        borderRadius: "full",
-                        bg: "green.100",
-                        color: "green.600",
-                        fontSize: "xs",
-                        fontWeight: "bold",
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '20px',
+                        height: '20px',
+                        borderRadius: 'full',
+                        bg: 'green.100',
+                        color: 'green.600',
+                        fontSize: 'xs',
+                        fontWeight: 'bold',
                       })}
                     >
                       ✓
                     </span>
-                    {t("worksheets.feature1")}
+                    {t('worksheets.feature1')}
                   </li>
                   <li
                     className={css({
-                      display: "flex",
-                      alignItems: "center",
+                      display: 'flex',
+                      alignItems: 'center',
                       gap: 3,
-                      fontSize: "sm",
-                      color: "text.secondary",
+                      fontSize: 'sm',
+                      color: 'text.secondary',
                     })}
                   >
                     <span
                       className={css({
-                        display: "inline-flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "20px",
-                        height: "20px",
-                        borderRadius: "full",
-                        bg: "green.100",
-                        color: "green.600",
-                        fontSize: "xs",
-                        fontWeight: "bold",
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '20px',
+                        height: '20px',
+                        borderRadius: 'full',
+                        bg: 'green.100',
+                        color: 'green.600',
+                        fontSize: 'xs',
+                        fontWeight: 'bold',
                       })}
                     >
                       ✓
                     </span>
-                    {t("worksheets.feature2")}
+                    {t('worksheets.feature2')}
                   </li>
                   <li
                     className={css({
-                      display: "flex",
-                      alignItems: "center",
+                      display: 'flex',
+                      alignItems: 'center',
                       gap: 3,
-                      fontSize: "sm",
-                      color: "text.secondary",
+                      fontSize: 'sm',
+                      color: 'text.secondary',
                     })}
                   >
                     <span
                       className={css({
-                        display: "inline-flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "20px",
-                        height: "20px",
-                        borderRadius: "full",
-                        bg: "green.100",
-                        color: "green.600",
-                        fontSize: "xs",
-                        fontWeight: "bold",
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '20px',
+                        height: '20px',
+                        borderRadius: 'full',
+                        bg: 'green.100',
+                        color: 'green.600',
+                        fontSize: 'xs',
+                        fontWeight: 'bold',
                       })}
                     >
                       ✓
                     </span>
-                    {t("worksheets.feature3")}
+                    {t('worksheets.feature3')}
                   </li>
                 </ul>
 
@@ -463,27 +456,26 @@ export default function CreateHubPage() {
                 >
                   <div
                     className={css({
-                      display: "inline-flex",
-                      alignItems: "center",
+                      display: 'inline-flex',
+                      alignItems: 'center',
                       gap: 2,
                       px: 6,
                       py: 3,
-                      borderRadius: "xl",
-                      background:
-                        "linear-gradient(135deg, #10b981 0%, #059669 100%)",
-                      color: "white",
-                      fontWeight: "bold",
-                      fontSize: "md",
-                      boxShadow: "0 4px 15px rgba(16, 185, 129, 0.4)",
-                      transition: "all 0.3s",
+                      borderRadius: 'xl',
+                      background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+                      color: 'white',
+                      fontWeight: 'bold',
+                      fontSize: 'md',
+                      boxShadow: '0 4px 15px rgba(16, 185, 129, 0.4)',
+                      transition: 'all 0.3s',
                       _hover: {
-                        boxShadow: "0 6px 20px rgba(16, 185, 129, 0.5)",
-                        transform: "translateX(4px)",
+                        boxShadow: '0 6px 20px rgba(16, 185, 129, 0.5)',
+                        transform: 'translateX(4px)',
                       },
                     })}
                   >
-                    <span>{t("worksheets.button")}</span>
-                    <span className={css({ fontSize: "lg" })}>→</span>
+                    <span>{t('worksheets.button')}</span>
+                    <span className={css({ fontSize: 'lg' })}>→</span>
                   </div>
                 </div>
               </div>
@@ -494,48 +486,45 @@ export default function CreateHubPage() {
               <div
                 data-element="calendar-card"
                 className={css({
-                  bg: "bg.surface",
-                  borderRadius: "3xl",
+                  bg: 'bg.surface',
+                  borderRadius: '3xl',
                   p: 8,
-                  border: "1px solid",
-                  borderColor: "border.default",
-                  boxShadow: "0 20px 60px rgba(0,0,0,0.25)",
-                  cursor: "pointer",
-                  transition:
-                    "all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-                  position: "relative",
-                  overflow: "hidden",
+                  border: '1px solid',
+                  borderColor: 'border.default',
+                  boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
+                  cursor: 'pointer',
+                  transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+                  position: 'relative',
+                  overflow: 'hidden',
                   _hover: {
-                    transform: "translateY(-12px) scale(1.02)",
-                    boxShadow: "0 30px 80px rgba(0,0,0,0.35)",
-                    borderColor: "border.emphasized",
+                    transform: 'translateY(-12px) scale(1.02)',
+                    boxShadow: '0 30px 80px rgba(0,0,0,0.35)',
+                    borderColor: 'border.emphasized',
                   },
                   _before: {
                     content: '""',
-                    position: "absolute",
+                    position: 'absolute',
                     top: 0,
                     left: 0,
                     right: 0,
-                    height: "6px",
-                    background:
-                      "linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%)",
+                    height: '6px',
+                    background: 'linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%)',
                   },
                 })}
               >
                 {/* Icon with gradient background */}
                 <div
                   className={css({
-                    display: "inline-flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    fontSize: "4xl",
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: '4xl',
                     mb: 5,
-                    width: "80px",
-                    height: "80px",
-                    borderRadius: "2xl",
-                    background:
-                      "linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)",
-                    boxShadow: "0 8px 24px rgba(251, 191, 36, 0.4)",
+                    width: '80px',
+                    height: '80px',
+                    borderRadius: '2xl',
+                    background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)',
+                    boxShadow: '0 8px 24px rgba(251, 191, 36, 0.4)',
                   })}
                 >
                   📅
@@ -544,117 +533,117 @@ export default function CreateHubPage() {
                 {/* Title */}
                 <h2
                   className={css({
-                    fontSize: "2xl",
-                    fontWeight: "extrabold",
+                    fontSize: '2xl',
+                    fontWeight: 'extrabold',
                     mb: 3,
-                    color: "text.primary",
-                    letterSpacing: "tight",
+                    color: 'text.primary',
+                    letterSpacing: 'tight',
                   })}
                 >
-                  {t("calendar.title")}
+                  {t('calendar.title')}
                 </h2>
 
                 {/* Description */}
                 <p
                   className={css({
-                    fontSize: "md",
-                    color: "text.secondary",
+                    fontSize: 'md',
+                    color: 'text.secondary',
                     mb: 5,
-                    lineHeight: "1.7",
+                    lineHeight: '1.7',
                   })}
                 >
-                  {t("calendar.description")}
+                  {t('calendar.description')}
                 </p>
 
                 {/* Features */}
                 <ul
                   className={css({
-                    listStyle: "none",
-                    display: "flex",
-                    flexDirection: "column",
+                    listStyle: 'none',
+                    display: 'flex',
+                    flexDirection: 'column',
                     gap: 3,
                   })}
                 >
                   <li
                     className={css({
-                      display: "flex",
-                      alignItems: "center",
+                      display: 'flex',
+                      alignItems: 'center',
                       gap: 3,
-                      fontSize: "sm",
-                      color: "text.secondary",
+                      fontSize: 'sm',
+                      color: 'text.secondary',
                     })}
                   >
                     <span
                       className={css({
-                        display: "inline-flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "20px",
-                        height: "20px",
-                        borderRadius: "full",
-                        bg: "yellow.100",
-                        color: "yellow.600",
-                        fontSize: "xs",
-                        fontWeight: "bold",
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '20px',
+                        height: '20px',
+                        borderRadius: 'full',
+                        bg: 'yellow.100',
+                        color: 'yellow.600',
+                        fontSize: 'xs',
+                        fontWeight: 'bold',
                       })}
                     >
                       ✓
                     </span>
-                    {t("calendar.feature1")}
+                    {t('calendar.feature1')}
                   </li>
                   <li
                     className={css({
-                      display: "flex",
-                      alignItems: "center",
+                      display: 'flex',
+                      alignItems: 'center',
                       gap: 3,
-                      fontSize: "sm",
-                      color: "text.secondary",
+                      fontSize: 'sm',
+                      color: 'text.secondary',
                     })}
                   >
                     <span
                       className={css({
-                        display: "inline-flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "20px",
-                        height: "20px",
-                        borderRadius: "full",
-                        bg: "yellow.100",
-                        color: "yellow.600",
-                        fontSize: "xs",
-                        fontWeight: "bold",
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '20px',
+                        height: '20px',
+                        borderRadius: 'full',
+                        bg: 'yellow.100',
+                        color: 'yellow.600',
+                        fontSize: 'xs',
+                        fontWeight: 'bold',
                       })}
                     >
                       ✓
                     </span>
-                    {t("calendar.feature2")}
+                    {t('calendar.feature2')}
                   </li>
                   <li
                     className={css({
-                      display: "flex",
-                      alignItems: "center",
+                      display: 'flex',
+                      alignItems: 'center',
                       gap: 3,
-                      fontSize: "sm",
-                      color: "text.secondary",
+                      fontSize: 'sm',
+                      color: 'text.secondary',
                     })}
                   >
                     <span
                       className={css({
-                        display: "inline-flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "20px",
-                        height: "20px",
-                        borderRadius: "full",
-                        bg: "yellow.100",
-                        color: "yellow.600",
-                        fontSize: "xs",
-                        fontWeight: "bold",
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '20px',
+                        height: '20px',
+                        borderRadius: 'full',
+                        bg: 'yellow.100',
+                        color: 'yellow.600',
+                        fontSize: 'xs',
+                        fontWeight: 'bold',
                       })}
                     >
                       ✓
                     </span>
-                    {t("calendar.feature3")}
+                    {t('calendar.feature3')}
                   </li>
                 </ul>
 
@@ -666,27 +655,26 @@ export default function CreateHubPage() {
                 >
                   <div
                     className={css({
-                      display: "inline-flex",
-                      alignItems: "center",
+                      display: 'inline-flex',
+                      alignItems: 'center',
                       gap: 2,
                       px: 6,
                       py: 3,
-                      borderRadius: "xl",
-                      background:
-                        "linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)",
-                      color: "white",
-                      fontWeight: "bold",
-                      fontSize: "md",
-                      boxShadow: "0 4px 15px rgba(251, 191, 36, 0.4)",
-                      transition: "all 0.3s",
+                      borderRadius: 'xl',
+                      background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)',
+                      color: 'white',
+                      fontWeight: 'bold',
+                      fontSize: 'md',
+                      boxShadow: '0 4px 15px rgba(251, 191, 36, 0.4)',
+                      transition: 'all 0.3s',
                       _hover: {
-                        boxShadow: "0 6px 20px rgba(251, 191, 36, 0.5)",
-                        transform: "translateX(4px)",
+                        boxShadow: '0 6px 20px rgba(251, 191, 36, 0.5)',
+                        transform: 'translateX(4px)',
                       },
                     })}
                   >
-                    <span>{t("calendar.button")}</span>
-                    <span className={css({ fontSize: "lg" })}>→</span>
+                    <span>{t('calendar.button')}</span>
+                    <span className={css({ fontSize: 'lg' })}>→</span>
                   </div>
                 </div>
               </div>
@@ -695,5 +683,5 @@ export default function CreateHubPage() {
         </div>
       </div>
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.43.34.png b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.43.34.png
new file mode 100644
index 00000000..ec558e7b
Binary files /dev/null and b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.43.34.png differ
diff --git a/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.43.43.png b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.43.43.png
new file mode 100644
index 00000000..b06c9baf
Binary files /dev/null and b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.43.43.png differ
diff --git a/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.43.50.png b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.43.50.png
new file mode 100644
index 00000000..1e601431
Binary files /dev/null and b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.43.50.png differ
diff --git a/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.31.png b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.31.png
new file mode 100644
index 00000000..34a7689d
Binary files /dev/null and b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.31.png differ
diff --git a/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.36.png b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.36.png
new file mode 100644
index 00000000..e923f861
Binary files /dev/null and b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.36.png differ
diff --git a/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.42.png b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.42.png
new file mode 100644
index 00000000..31b3f1a7
Binary files /dev/null and b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.42.png differ
diff --git a/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.47.png b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.47.png
new file mode 100644
index 00000000..a6544da6
Binary files /dev/null and b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.47.png differ
diff --git a/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.52.png b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.52.png
new file mode 100644
index 00000000..db308926
Binary files /dev/null and b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.52.png differ
diff --git a/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.57.png b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.57.png
new file mode 100644
index 00000000..097438d4
Binary files /dev/null and b/apps/web/src/app/create/worksheets/addition/Screenshot 2025-11-10 at 08.55.57.png differ
diff --git a/apps/web/src/app/create/worksheets/addition/__tests__/tenFrames.test.ts b/apps/web/src/app/create/worksheets/addition/__tests__/tenFrames.test.ts
new file mode 100644
index 00000000..43855dc6
--- /dev/null
+++ b/apps/web/src/app/create/worksheets/addition/__tests__/tenFrames.test.ts
@@ -0,0 +1,336 @@
+// Unit tests for ten-frames rendering
+// These tests verify the complete path from config -> display rules -> Typst template
+
+import { describe, it, expect } from 'vitest'
+import { analyzeProblem } from '../problemAnalysis'
+import { evaluateRule, resolveDisplayForProblem } from '../displayRules'
+import type { DisplayRules } from '../displayRules'
+import { generateTypstSource } from '../typstGenerator'
+import type { WorksheetConfig, WorksheetProblem } from '../types'
+
+describe('Ten-frames rendering', () => {
+  describe('Problem analysis', () => {
+    it('should detect regrouping in 45 + 27', () => {
+      const meta = analyzeProblem(45, 27)
+      expect(meta.requiresRegrouping).toBe(true)
+      expect(meta.regroupCount).toBe(1) // Ones place: 5 + 7 = 12
+    })
+
+    it('should detect regrouping in 8 + 7', () => {
+      const meta = analyzeProblem(8, 7)
+      expect(meta.requiresRegrouping).toBe(true)
+      expect(meta.regroupCount).toBe(1)
+    })
+
+    it('should not detect regrouping in 12 + 23', () => {
+      const meta = analyzeProblem(12, 23)
+      expect(meta.requiresRegrouping).toBe(false)
+      expect(meta.regroupCount).toBe(0)
+    })
+  })
+
+  describe('Display rule evaluation', () => {
+    it('should resolve "whenRegrouping" to true for problem with regrouping', () => {
+      const meta = analyzeProblem(45, 27) // Has regrouping
+      const result = evaluateRule('whenRegrouping', meta)
+      expect(result).toBe(true)
+    })
+
+    it('should resolve "whenRegrouping" to false for problem without regrouping', () => {
+      const meta = analyzeProblem(12, 23) // No regrouping
+      const result = evaluateRule('whenRegrouping', meta)
+      expect(result).toBe(false)
+    })
+
+    it('should resolve "always" to true regardless of problem', () => {
+      const meta = analyzeProblem(12, 23) // No regrouping
+      const result = evaluateRule('always', meta)
+      expect(result).toBe(true)
+    })
+
+    it('should resolve "never" to false regardless of problem', () => {
+      const meta = analyzeProblem(45, 27) // Has regrouping
+      const result = evaluateRule('never', meta)
+      expect(result).toBe(false)
+    })
+  })
+
+  describe('Full display rules resolution', () => {
+    it('should resolve showTenFrames: true for regrouping problem with "whenRegrouping" rule', () => {
+      const rules: DisplayRules = {
+        carryBoxes: 'whenRegrouping',
+        answerBoxes: 'always',
+        placeValueColors: 'always',
+        tenFrames: 'whenRegrouping', // ← This should trigger for 45 + 27
+        problemNumbers: 'always',
+        cellBorders: 'always',
+        borrowNotation: 'never',
+        borrowingHints: 'never',
+      }
+
+      const meta = analyzeProblem(45, 27) // Has regrouping (5 + 7 = 12)
+      const resolved = resolveDisplayForProblem(rules, meta)
+
+      expect(resolved.showTenFrames).toBe(true)
+    })
+
+    it('should resolve showTenFrames: false for non-regrouping problem with "whenRegrouping" rule', () => {
+      const rules: DisplayRules = {
+        carryBoxes: 'whenRegrouping',
+        answerBoxes: 'always',
+        placeValueColors: 'always',
+        tenFrames: 'whenRegrouping',
+        problemNumbers: 'always',
+        cellBorders: 'always',
+        borrowNotation: 'never',
+        borrowingHints: 'never',
+      }
+
+      const meta = analyzeProblem(12, 23) // No regrouping
+      const resolved = resolveDisplayForProblem(rules, meta)
+
+      expect(resolved.showTenFrames).toBe(false)
+    })
+  })
+
+  describe('Typst template generation', () => {
+    it('should pass showTenFrames: true to Typst template for regrouping problems', () => {
+      const config: WorksheetConfig = {
+        version: 4,
+        mode: 'smart',
+        problemsPerPage: 4,
+        cols: 2,
+        pages: 1,
+        total: 4,
+        rows: 2,
+        orientation: 'portrait',
+        name: 'Test Student',
+        date: '2025-11-10',
+        seed: 12345,
+        fontSize: 12,
+        digitRange: { min: 2, max: 2 },
+        operator: 'addition',
+        pAnyStart: 1.0, // 100% regrouping
+        pAllStart: 0,
+        displayRules: {
+          carryBoxes: 'whenRegrouping',
+          answerBoxes: 'always',
+          placeValueColors: 'always',
+          tenFrames: 'whenRegrouping', // ← Key rule being tested
+          problemNumbers: 'always',
+          cellBorders: 'always',
+          borrowNotation: 'never',
+          borrowingHints: 'never',
+        },
+        interpolate: false,
+        page: { wIn: 8.5, hIn: 11 },
+        margins: { left: 0.5, right: 0.5, top: 0.5, bottom: 0.5 },
+      }
+
+      const problems: WorksheetProblem[] = [
+        { operator: '+', a: 45, b: 27 }, // Has regrouping
+        { operator: '+', a: 38, b: 54 }, // Has regrouping
+      ]
+
+      const typstPages = generateTypstSource(config, problems)
+
+      // Should generate at least one page
+      expect(typstPages.length).toBeGreaterThan(0)
+
+      const firstPage = typstPages[0]
+
+      // Should include showTenFrames: true in problem data
+      expect(firstPage).toContain('showTenFrames: true')
+
+      // Should NOT contain showTenFrames: false (all problems have regrouping)
+      expect(firstPage).not.toContain('showTenFrames: false')
+    })
+
+    it('should include ten-frames rendering code when showTenFrames: true', () => {
+      const config: WorksheetConfig = {
+        version: 4,
+        mode: 'smart',
+        problemsPerPage: 2,
+        cols: 1,
+        pages: 1,
+        total: 2,
+        rows: 2,
+        orientation: 'portrait',
+        name: 'Test Student',
+        date: '2025-11-10',
+        seed: 12345,
+        fontSize: 12,
+        digitRange: { min: 1, max: 1 },
+        operator: 'addition',
+        pAnyStart: 1.0,
+        pAllStart: 0,
+        displayRules: {
+          carryBoxes: 'whenRegrouping',
+          answerBoxes: 'always',
+          placeValueColors: 'always',
+          tenFrames: 'whenRegrouping',
+          problemNumbers: 'always',
+          cellBorders: 'always',
+          borrowNotation: 'never',
+          borrowingHints: 'never',
+        },
+        interpolate: false,
+        page: { wIn: 8.5, hIn: 11 },
+        margins: { left: 0.5, right: 0.5, top: 0.5, bottom: 0.5 },
+      }
+
+      const problems: WorksheetProblem[] = [
+        { operator: '+', a: 8, b: 7 }, // 8 + 7 = 15, has regrouping
+      ]
+
+      const typstPages = generateTypstSource(config, problems)
+      const firstPage = typstPages[0]
+
+      // Should include the ten-frames function
+      expect(firstPage).toContain('ten-frames-stacked')
+
+      // Should include regrouping detection logic
+      expect(firstPage).toContain('regrouping-places')
+
+      // Should include contains() method for array membership
+      expect(firstPage).toContain('.contains(')
+    })
+
+    it('should handle manual mode with showTenFrames: true', () => {
+      const config: WorksheetConfig = {
+        version: 4,
+        mode: 'manual',
+        problemsPerPage: 2,
+        cols: 1,
+        pages: 1,
+        total: 2,
+        rows: 2,
+        orientation: 'portrait',
+        name: 'Test Student',
+        date: '2025-11-10',
+        seed: 12345,
+        fontSize: 12,
+        digitRange: { min: 2, max: 2 },
+        operator: 'addition',
+        pAnyStart: 0.5,
+        pAllStart: 0,
+        // Manual mode uses boolean flags
+        showCarryBoxes: true,
+        showAnswerBoxes: true,
+        showPlaceValueColors: true,
+        showTenFrames: true, // ← Explicitly enabled
+        showProblemNumbers: true,
+        showCellBorder: true,
+        showTenFramesForAll: false,
+        interpolate: false,
+        page: { wIn: 8.5, hIn: 11 },
+        margins: { left: 0.5, right: 0.5, top: 0.5, bottom: 0.5 },
+      }
+
+      const problems: WorksheetProblem[] = [
+        { operator: '+', a: 45, b: 27 },
+        { operator: '+', a: 12, b: 23 }, // No regrouping, but should still show frames
+      ]
+
+      const typstPages = generateTypstSource(config, problems)
+      const firstPage = typstPages[0]
+
+      // All problems should have showTenFrames: true in manual mode
+      const tenFramesMatches = firstPage.match(/showTenFrames: true/g)
+      expect(tenFramesMatches?.length).toBe(2) // Both problems
+    })
+  })
+
+  describe('Mastery progression mode', () => {
+    it('should use displayRules when in mastery mode (step 0: full scaffolding)', () => {
+      // Simulating mastery mode step 0 with full scaffolding
+      const config: WorksheetConfig = {
+        version: 4,
+        mode: 'mastery',
+        problemsPerPage: 20,
+        cols: 4,
+        pages: 1,
+        total: 20,
+        rows: 5,
+        orientation: 'portrait',
+        name: 'Test Student',
+        date: '2025-11-10',
+        seed: 12345,
+        fontSize: 12,
+        digitRange: { min: 1, max: 1 },
+        operator: 'addition',
+        pAnyStart: 1.0, // 100% regrouping
+        pAllStart: 0,
+        displayRules: {
+          carryBoxes: 'whenRegrouping',
+          answerBoxes: 'always',
+          placeValueColors: 'always',
+          tenFrames: 'whenRegrouping', // ← Full scaffolding
+          problemNumbers: 'always',
+          cellBorders: 'always',
+          borrowNotation: 'never',
+          borrowingHints: 'never',
+        },
+        interpolate: false,
+        page: { wIn: 8.5, hIn: 11 },
+        margins: { left: 0.5, right: 0.5, top: 0.5, bottom: 0.5 },
+      }
+
+      const problems: WorksheetProblem[] = [
+        { operator: '+', a: 8, b: 7 }, // Has regrouping
+        { operator: '+', a: 9, b: 6 }, // Has regrouping
+      ]
+
+      const typstPages = generateTypstSource(config, problems)
+      const firstPage = typstPages[0]
+
+      // Should include ten-frames for all regrouping problems
+      expect(firstPage).toContain('showTenFrames: true')
+      expect(firstPage).toContain('ten-frames-stacked')
+    })
+
+    it('should not show ten-frames in mastery mode step 1 (scaffolding faded)', () => {
+      const config: WorksheetConfig = {
+        version: 4,
+        mode: 'mastery',
+        problemsPerPage: 20,
+        cols: 4,
+        pages: 1,
+        total: 20,
+        rows: 5,
+        orientation: 'portrait',
+        name: 'Test Student',
+        date: '2025-11-10',
+        seed: 12345,
+        fontSize: 12,
+        digitRange: { min: 1, max: 1 },
+        operator: 'addition',
+        pAnyStart: 1.0,
+        pAllStart: 0,
+        displayRules: {
+          carryBoxes: 'whenRegrouping',
+          answerBoxes: 'always',
+          placeValueColors: 'always',
+          tenFrames: 'never', // ← Scaffolding faded
+          problemNumbers: 'always',
+          cellBorders: 'always',
+          borrowNotation: 'never',
+          borrowingHints: 'never',
+        },
+        interpolate: false,
+        page: { wIn: 8.5, hIn: 11 },
+        margins: { left: 0.5, right: 0.5, top: 0.5, bottom: 0.5 },
+      }
+
+      const problems: WorksheetProblem[] = [
+        { operator: '+', a: 8, b: 7 }, // Has regrouping
+      ]
+
+      const typstPages = generateTypstSource(config, problems)
+      const firstPage = typstPages[0]
+
+      // Should NOT show ten-frames (rule is 'never')
+      expect(firstPage).toContain('showTenFrames: false')
+    })
+  })
+})
diff --git a/apps/web/src/app/create/worksheets/addition/components/DisplayOptionsPreview.tsx b/apps/web/src/app/create/worksheets/addition/components/DisplayOptionsPreview.tsx
index 1576aa93..bb9d2e44 100644
--- a/apps/web/src/app/create/worksheets/addition/components/DisplayOptionsPreview.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/DisplayOptionsPreview.tsx
@@ -1,19 +1,19 @@
-"use client";
+'use client'
 
-import { useQuery } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
-import { css } from "../../../../../../styled-system/css";
-import type { WorksheetFormState } from "../types";
+import { useQuery } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import { css } from '../../../../../../styled-system/css'
+import type { WorksheetFormState } from '../types'
 
 interface DisplayOptionsPreviewProps {
-  formState: WorksheetFormState;
+  formState: WorksheetFormState
 }
 
 interface MathSentenceProps {
-  operands: number[];
-  operator: string;
-  onChange: (operands: number[]) => void;
-  labels?: string[];
+  operands: number[]
+  operator: string
+  onChange: (operands: number[]) => void
+  labels?: string[]
 }
 
 /**
@@ -23,20 +23,15 @@ interface MathSentenceProps {
  *   Arity 2 (binary): [45, 27] with "+" → "45 + 27"
  *   Arity 3 (ternary): [5, 10, 15] with "between" → "5 < 10 < 15"
  */
-function MathSentence({
-  operands,
-  operator,
-  onChange,
-  labels,
-}: MathSentenceProps) {
+function MathSentence({ operands, operator, onChange, labels }: MathSentenceProps) {
   const handleOperandChange = (index: number, value: string) => {
-    const numValue = Number.parseInt(value, 10);
+    const numValue = Number.parseInt(value, 10)
     if (!Number.isNaN(numValue) && numValue >= 0 && numValue <= 99) {
-      const newOperands = [...operands];
-      newOperands[index] = numValue;
-      onChange(newOperands);
+      const newOperands = [...operands]
+      newOperands[index] = numValue
+      onChange(newOperands)
     }
-  };
+  }
 
   const renderInput = (value: number, index: number) => (
     <input
@@ -48,28 +43,28 @@ function MathSentence({
       onChange={(e) => handleOperandChange(index, e.target.value)}
       aria-label={labels?.[index] || `operand ${index + 1}`}
       className={css({
-        width: "3.5em",
-        px: "1",
-        py: "0.5",
-        fontSize: "sm",
-        fontWeight: "medium",
-        textAlign: "center",
-        border: "1px solid",
-        borderColor: "transparent",
-        rounded: "sm",
-        outline: "none",
-        transition: "border-color 0.2s",
+        width: '3.5em',
+        px: '1',
+        py: '0.5',
+        fontSize: 'sm',
+        fontWeight: 'medium',
+        textAlign: 'center',
+        border: '1px solid',
+        borderColor: 'transparent',
+        rounded: 'sm',
+        outline: 'none',
+        transition: 'border-color 0.2s',
         _hover: {
-          borderColor: "gray.300",
+          borderColor: 'gray.300',
         },
         _focus: {
-          borderColor: "brand.500",
-          ring: "1px",
-          ringColor: "brand.200",
+          borderColor: 'brand.500',
+          ring: '1px',
+          ringColor: 'brand.200',
         },
       })}
     />
-  );
+  )
 
   // Render based on arity
   if (operands.length === 1) {
@@ -78,17 +73,17 @@ function MathSentence({
       <div
         data-component="math-sentence"
         className={css({
-          display: "flex",
-          alignItems: "center",
-          gap: "1",
-          fontSize: "sm",
-          fontWeight: "medium",
+          display: 'flex',
+          alignItems: 'center',
+          gap: '1',
+          fontSize: 'sm',
+          fontWeight: 'medium',
         })}
       >
         <span>{operator}</span>
         {renderInput(operands[0], 0)}
       </div>
-    );
+    )
   }
 
   if (operands.length === 2) {
@@ -97,18 +92,18 @@ function MathSentence({
       <div
         data-component="math-sentence"
         className={css({
-          display: "flex",
-          alignItems: "center",
-          gap: "1",
-          fontSize: "sm",
-          fontWeight: "medium",
+          display: 'flex',
+          alignItems: 'center',
+          gap: '1',
+          fontSize: 'sm',
+          fontWeight: 'medium',
         })}
       >
         {renderInput(operands[0], 0)}
         <span>{operator}</span>
         {renderInput(operands[1], 1)}
       </div>
-    );
+    )
   }
 
   if (operands.length === 3) {
@@ -117,11 +112,11 @@ function MathSentence({
       <div
         data-component="math-sentence"
         className={css({
-          display: "flex",
-          alignItems: "center",
-          gap: "1",
-          fontSize: "sm",
-          fontWeight: "medium",
+          display: 'flex',
+          alignItems: 'center',
+          gap: '1',
+          fontSize: 'sm',
+          fontWeight: 'medium',
         })}
       >
         {renderInput(operands[0], 0)}
@@ -130,51 +125,49 @@ function MathSentence({
         <span>{operator}</span>
         {renderInput(operands[2], 2)}
       </div>
-    );
+    )
   }
 
-  return null;
+  return null
 }
 
 async function fetchExample(options: {
-  showCarryBoxes: boolean;
-  showAnswerBoxes: boolean;
-  showPlaceValueColors: boolean;
-  showProblemNumbers: boolean;
-  showCellBorder: boolean;
-  showTenFrames: boolean;
-  showTenFramesForAll: boolean;
-  showBorrowNotation: boolean;
-  operator: "addition" | "subtraction" | "mixed";
-  addend1?: number;
-  addend2?: number;
-  minuend?: number;
-  subtrahend?: number;
+  showCarryBoxes: boolean
+  showAnswerBoxes: boolean
+  showPlaceValueColors: boolean
+  showProblemNumbers: boolean
+  showCellBorder: boolean
+  showTenFrames: boolean
+  showTenFramesForAll: boolean
+  showBorrowNotation: boolean
+  operator: 'addition' | 'subtraction' | 'mixed'
+  addend1?: number
+  addend2?: number
+  minuend?: number
+  subtrahend?: number
 }): Promise<string> {
-  const response = await fetch("/api/create/worksheets/addition/example", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
+  const response = await fetch('/api/create/worksheets/addition/example', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
       ...options,
       fontSize: 16,
     }),
-  });
+  })
 
   if (!response.ok) {
-    throw new Error("Failed to fetch example");
+    throw new Error('Failed to fetch example')
   }
 
-  const data = await response.json();
-  return data.svg;
+  const data = await response.json()
+  return data.svg
 }
 
-export function DisplayOptionsPreview({
-  formState,
-}: DisplayOptionsPreviewProps) {
-  const operator = formState.operator ?? "addition";
+export function DisplayOptionsPreview({ formState }: DisplayOptionsPreviewProps) {
+  const operator = formState.operator ?? 'addition'
 
   // Local state for operands (not debounced - we want immediate feedback)
-  const [operands, setOperands] = useState([45, 27]);
+  const [operands, setOperands] = useState([45, 27])
 
   // Build options based on operator type
   const buildOptions = () => {
@@ -189,33 +182,33 @@ export function DisplayOptionsPreview({
       showBorrowNotation: formState.showBorrowNotation ?? true,
       showBorrowingHints: formState.showBorrowingHints ?? false,
       operator,
-    };
+    }
 
-    if (operator === "addition") {
+    if (operator === 'addition') {
       return {
         ...base,
         addend1: operands[0],
         addend2: operands[1],
-      };
+      }
     } else {
       // Subtraction (mixed mode shows subtraction in preview)
       return {
         ...base,
         minuend: operands[0],
         subtrahend: operands[1],
-      };
+      }
     }
-  };
+  }
 
   // Debounce the display options to avoid hammering the server
-  const [debouncedOptions, setDebouncedOptions] = useState(buildOptions());
+  const [debouncedOptions, setDebouncedOptions] = useState(buildOptions())
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setDebouncedOptions(buildOptions());
-    }, 300); // 300ms debounce
+      setDebouncedOptions(buildOptions())
+    }, 300) // 300ms debounce
 
-    return () => clearTimeout(timer);
+    return () => clearTimeout(timer)
   }, [
     formState.showCarryBoxes,
     formState.showAnswerBoxes,
@@ -228,69 +221,65 @@ export function DisplayOptionsPreview({
     formState.showBorrowingHints,
     formState.operator,
     operands,
-  ]);
+  ])
 
   const { data: svg, isLoading } = useQuery({
-    queryKey: ["display-example", debouncedOptions],
+    queryKey: ['display-example', debouncedOptions],
     queryFn: () => fetchExample(debouncedOptions),
     staleTime: 5 * 60 * 1000, // 5 minutes
-  });
+  })
 
   return (
     <div
       data-component="display-options-preview"
       className={css({
-        p: "3",
-        bg: "white",
-        rounded: "xl",
-        border: "2px solid",
-        borderColor: "brand.200",
-        display: "flex",
-        flexDirection: "column",
-        gap: "2",
-        width: "fit-content",
-        maxWidth: "100%",
+        p: '3',
+        bg: 'white',
+        rounded: 'xl',
+        border: '2px solid',
+        borderColor: 'brand.200',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '2',
+        width: 'fit-content',
+        maxWidth: '100%',
       })}
     >
       <div
         className={css({
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
         })}
       >
         <div
           className={css({
-            fontSize: "xs",
-            fontWeight: "semibold",
-            color: "gray.500",
-            textTransform: "uppercase",
-            letterSpacing: "wider",
+            fontSize: 'xs',
+            fontWeight: 'semibold',
+            color: 'gray.500',
+            textTransform: 'uppercase',
+            letterSpacing: 'wider',
           })}
         >
           Preview
         </div>
         <MathSentence
           operands={operands}
-          operator={operator === "addition" ? "+" : "−"}
+          operator={operator === 'addition' ? '+' : '−'}
           onChange={setOperands}
-          labels={
-            operator === "addition"
-              ? ["addend", "addend"]
-              : ["minuend", "subtrahend"]
-          }
+          labels={operator === 'addition' ? ['addend', 'addend'] : ['minuend', 'subtrahend']}
         />
       </div>
 
       {isLoading ? (
         <div
           className={css({
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            minH: "200px",
-            color: "gray.400",
-            fontSize: "sm",
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minH: '200px',
+            color: 'gray.400',
+            fontSize: 'sm',
           })}
         >
           Generating preview...
@@ -298,18 +287,18 @@ export function DisplayOptionsPreview({
       ) : svg ? (
         <div
           className={css({
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            minH: "200px",
-            "& svg": {
-              maxW: "full",
-              h: "auto",
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minH: '200px',
+            '& svg': {
+              maxW: 'full',
+              h: 'auto',
             },
           })}
           dangerouslySetInnerHTML={{ __html: svg }}
         />
       ) : null}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/components/GenerateButton.tsx b/apps/web/src/app/create/worksheets/addition/components/GenerateButton.tsx
index 55b7183c..8d677303 100644
--- a/apps/web/src/app/create/worksheets/addition/components/GenerateButton.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/GenerateButton.tsx
@@ -1,37 +1,33 @@
-"use client";
+'use client'
 
-import { useTranslations } from "next-intl";
-import { css } from "../../../../../../styled-system/css";
-import { hstack } from "../../../../../../styled-system/patterns";
+import { useTranslations } from 'next-intl'
+import { css } from '../../../../../../styled-system/css'
+import { hstack } from '../../../../../../styled-system/patterns'
 
-type GenerationStatus = "idle" | "generating" | "error";
+type GenerationStatus = 'idle' | 'generating' | 'error'
 
 interface GenerateButtonProps {
-  status: GenerationStatus;
-  onGenerate: () => void;
-  isDark?: boolean;
+  status: GenerationStatus
+  onGenerate: () => void
+  isDark?: boolean
 }
 
 /**
  * Button to trigger worksheet PDF generation
  * Shows loading state during generation
  */
-export function GenerateButton({
-  status,
-  onGenerate,
-  isDark = false,
-}: GenerateButtonProps) {
-  const t = useTranslations("create.worksheets.addition");
-  const isGenerating = status === "generating";
+export function GenerateButton({ status, onGenerate, isDark = false }: GenerateButtonProps) {
+  const t = useTranslations('create.worksheets.addition')
+  const isGenerating = status === 'generating'
 
   return (
     <div
       data-section="generate-panel"
       className={css({
-        bg: isDark ? "gray.800" : "white",
-        rounded: "2xl",
-        shadow: "card",
-        p: "6",
+        bg: isDark ? 'gray.800' : 'white',
+        rounded: '2xl',
+        shadow: 'card',
+        p: '6',
       })}
     >
       <button
@@ -40,51 +36,51 @@ export function GenerateButton({
         onClick={onGenerate}
         disabled={isGenerating}
         className={css({
-          w: "full",
-          px: "6",
-          py: "4",
-          bg: "brand.600",
-          color: "white",
-          fontSize: "lg",
-          fontWeight: "semibold",
-          rounded: "xl",
-          shadow: "card",
-          transition: "all",
-          cursor: isGenerating ? "not-allowed" : "pointer",
-          opacity: isGenerating ? "0.7" : "1",
+          w: 'full',
+          px: '6',
+          py: '4',
+          bg: 'brand.600',
+          color: 'white',
+          fontSize: 'lg',
+          fontWeight: 'semibold',
+          rounded: 'xl',
+          shadow: 'card',
+          transition: 'all',
+          cursor: isGenerating ? 'not-allowed' : 'pointer',
+          opacity: isGenerating ? '0.7' : '1',
           _hover: isGenerating
             ? {}
             : {
-                bg: "brand.700",
-                transform: "translateY(-1px)",
-                shadow: "modal",
+                bg: 'brand.700',
+                transform: 'translateY(-1px)',
+                shadow: 'modal',
               },
         })}
       >
-        <span className={hstack({ gap: "3", justify: "center" })}>
+        <span className={hstack({ gap: '3', justify: 'center' })}>
           {isGenerating ? (
             <>
               <div
                 className={css({
-                  w: "5",
-                  h: "5",
-                  border: "2px solid",
-                  borderColor: "white",
-                  borderTopColor: "transparent",
-                  rounded: "full",
-                  animation: "spin 1s linear infinite",
+                  w: '5',
+                  h: '5',
+                  border: '2px solid',
+                  borderColor: 'white',
+                  borderTopColor: 'transparent',
+                  rounded: 'full',
+                  animation: 'spin 1s linear infinite',
                 })}
               />
-              {t("generate.generating")}
+              {t('generate.generating')}
             </>
           ) : (
             <>
-              <div className={css({ fontSize: "xl" })}>📝</div>
-              {t("generate.button")}
+              <div className={css({ fontSize: 'xl' })}>📝</div>
+              {t('generate.button')}
             </>
           )}
         </span>
       </button>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/components/GenerationErrorDisplay.tsx b/apps/web/src/app/create/worksheets/addition/components/GenerationErrorDisplay.tsx
index ecbb7e59..3714e268 100644
--- a/apps/web/src/app/create/worksheets/addition/components/GenerationErrorDisplay.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/GenerationErrorDisplay.tsx
@@ -1,63 +1,59 @@
-"use client";
+'use client'
 
-import { useTranslations } from "next-intl";
-import { css } from "../../../../../../styled-system/css";
-import { stack, hstack } from "../../../../../../styled-system/patterns";
+import { useTranslations } from 'next-intl'
+import { css } from '../../../../../../styled-system/css'
+import { stack, hstack } from '../../../../../../styled-system/patterns'
 
 interface GenerationErrorDisplayProps {
-  error: string | null;
-  visible: boolean;
-  onRetry: () => void;
+  error: string | null
+  visible: boolean
+  onRetry: () => void
 }
 
 /**
  * Display generation errors with retry button
  * Only visible when error state is active
  */
-export function GenerationErrorDisplay({
-  error,
-  visible,
-  onRetry,
-}: GenerationErrorDisplayProps) {
-  const t = useTranslations("create.worksheets.addition");
+export function GenerationErrorDisplay({ error, visible, onRetry }: GenerationErrorDisplayProps) {
+  const t = useTranslations('create.worksheets.addition')
 
   if (!visible || !error) {
-    return null;
+    return null
   }
 
   return (
     <div
       data-status="error"
       className={css({
-        bg: "red.50",
-        border: "1px solid",
-        borderColor: "red.200",
-        rounded: "2xl",
-        p: "8",
-        mt: "8",
+        bg: 'red.50',
+        border: '1px solid',
+        borderColor: 'red.200',
+        rounded: '2xl',
+        p: '8',
+        mt: '8',
       })}
     >
-      <div className={stack({ gap: "4" })}>
-        <div className={hstack({ gap: "3", alignItems: "center" })}>
-          <div className={css({ fontSize: "2xl" })}>❌</div>
+      <div className={stack({ gap: '4' })}>
+        <div className={hstack({ gap: '3', alignItems: 'center' })}>
+          <div className={css({ fontSize: '2xl' })}>❌</div>
           <h3
             className={css({
-              fontSize: "xl",
-              fontWeight: "semibold",
-              color: "red.800",
+              fontSize: 'xl',
+              fontWeight: 'semibold',
+              color: 'red.800',
             })}
           >
-            {t("error.title")}
+            {t('error.title')}
           </h3>
         </div>
         <pre
           className={css({
-            color: "red.700",
-            lineHeight: "relaxed",
-            whiteSpace: "pre-wrap",
-            fontFamily: "mono",
-            fontSize: "sm",
-            overflowX: "auto",
+            color: 'red.700',
+            lineHeight: 'relaxed',
+            whiteSpace: 'pre-wrap',
+            fontFamily: 'mono',
+            fontSize: 'sm',
+            overflowX: 'auto',
           })}
         >
           {error}
@@ -67,20 +63,20 @@ export function GenerationErrorDisplay({
           data-action="try-again"
           onClick={onRetry}
           className={css({
-            alignSelf: "start",
-            px: "4",
-            py: "2",
-            bg: "red.600",
-            color: "white",
-            fontWeight: "medium",
-            rounded: "lg",
-            transition: "all",
-            _hover: { bg: "red.700" },
+            alignSelf: 'start',
+            px: '4',
+            py: '2',
+            bg: 'red.600',
+            color: 'white',
+            fontWeight: 'medium',
+            rounded: 'lg',
+            transition: 'all',
+            _hover: { bg: 'red.700' },
           })}
         >
-          {t("error.tryAgain")}
+          {t('error.tryAgain')}
         </button>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx b/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx
index b00b932a..4327e481 100644
--- a/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/OrientationPanel.tsx
@@ -1,22 +1,22 @@
-"use client";
+'use client'
 
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { css } from "../../../../../../styled-system/css";
-import { getDefaultColsForProblemsPerPage } from "../utils/layoutCalculations";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { css } from '../../../../../../styled-system/css'
+import { getDefaultColsForProblemsPerPage } from '../utils/layoutCalculations'
 
 interface OrientationPanelProps {
-  orientation: "portrait" | "landscape";
-  problemsPerPage: number;
-  pages: number;
-  cols: number;
+  orientation: 'portrait' | 'landscape'
+  problemsPerPage: number
+  pages: number
+  cols: number
   onOrientationChange: (
-    orientation: "portrait" | "landscape",
+    orientation: 'portrait' | 'landscape',
     problemsPerPage: number,
-    cols: number,
-  ) => void;
-  onProblemsPerPageChange: (problemsPerPage: number, cols: number) => void;
-  onPagesChange: (pages: number) => void;
-  isDark?: boolean;
+    cols: number
+  ) => void
+  onProblemsPerPageChange: (problemsPerPage: number, cols: number) => void
+  onPagesChange: (pages: number) => void
+  isDark?: boolean
 }
 
 /**
@@ -33,112 +33,92 @@ export function OrientationPanel({
   onPagesChange,
   isDark = false,
 }: OrientationPanelProps) {
-  const handleOrientationChange = (
-    newOrientation: "portrait" | "landscape",
-  ) => {
-    const newProblemsPerPage = newOrientation === "portrait" ? 15 : 20;
-    const newCols = getDefaultColsForProblemsPerPage(
-      newProblemsPerPage,
-      newOrientation,
-    );
-    onOrientationChange(newOrientation, newProblemsPerPage, newCols);
-  };
+  const handleOrientationChange = (newOrientation: 'portrait' | 'landscape') => {
+    const newProblemsPerPage = newOrientation === 'portrait' ? 15 : 20
+    const newCols = getDefaultColsForProblemsPerPage(newProblemsPerPage, newOrientation)
+    onOrientationChange(newOrientation, newProblemsPerPage, newCols)
+  }
 
   const handleProblemsPerPageChange = (count: number) => {
-    const newCols = getDefaultColsForProblemsPerPage(count, orientation);
-    onProblemsPerPageChange(count, newCols);
-  };
+    const newCols = getDefaultColsForProblemsPerPage(count, orientation)
+    onProblemsPerPageChange(count, newCols)
+  }
 
-  const total = problemsPerPage * pages;
+  const total = problemsPerPage * pages
   const problemsForOrientation =
-    orientation === "portrait" ? [6, 8, 10, 12, 15] : [8, 10, 12, 15, 16, 20];
+    orientation === 'portrait' ? [6, 8, 10, 12, 15] : [8, 10, 12, 15, 16, 20]
 
   return (
     <div
       data-section="orientation-panel"
       className={css({
-        bg: isDark ? "gray.800" : "white",
-        rounded: "2xl",
-        shadow: "card",
-        p: "4",
+        bg: isDark ? 'gray.800' : 'white',
+        rounded: '2xl',
+        shadow: 'card',
+        p: '4',
       })}
     >
-      <div
-        className={css({ display: "flex", flexDirection: "column", gap: "3" })}
-      >
+      <div className={css({ display: 'flex', flexDirection: 'column', gap: '3' })}>
         {/* Row 1: Orientation + Pages */}
         <div
           className={css({
-            display: "grid",
-            gridTemplateColumns: "1fr auto",
-            gap: "3",
-            alignItems: "end",
+            display: 'grid',
+            gridTemplateColumns: '1fr auto',
+            gap: '3',
+            alignItems: 'end',
           })}
         >
           {/* Orientation */}
           <div>
             <div
               className={css({
-                fontSize: "2xs",
-                fontWeight: "semibold",
-                color: isDark ? "gray.400" : "gray.500",
-                textTransform: "uppercase",
-                letterSpacing: "wider",
-                mb: "1.5",
+                fontSize: '2xs',
+                fontWeight: 'semibold',
+                color: isDark ? 'gray.400' : 'gray.500',
+                textTransform: 'uppercase',
+                letterSpacing: 'wider',
+                mb: '1.5',
               })}
             >
               Orientation
             </div>
-            <div className={css({ display: "flex", gap: "1.5" })}>
+            <div className={css({ display: 'flex', gap: '1.5' })}>
               <button
                 type="button"
                 data-action="select-portrait"
-                onClick={() => handleOrientationChange("portrait")}
+                onClick={() => handleOrientationChange('portrait')}
                 className={css({
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "1.5",
-                  flex: "1",
-                  px: "3",
-                  py: "2",
-                  border: "2px solid",
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '1.5',
+                  flex: '1',
+                  px: '3',
+                  py: '2',
+                  border: '2px solid',
                   borderColor:
-                    orientation === "portrait"
-                      ? "brand.500"
-                      : isDark
-                        ? "gray.600"
-                        : "gray.300",
-                  bg:
-                    orientation === "portrait"
-                      ? "brand.50"
-                      : isDark
-                        ? "gray.700"
-                        : "white",
-                  rounded: "lg",
-                  cursor: "pointer",
-                  transition: "all 0.15s",
+                    orientation === 'portrait' ? 'brand.500' : isDark ? 'gray.600' : 'gray.300',
+                  bg: orientation === 'portrait' ? 'brand.50' : isDark ? 'gray.700' : 'white',
+                  rounded: 'lg',
+                  cursor: 'pointer',
+                  transition: 'all 0.15s',
                   _hover: {
-                    borderColor: "brand.400",
+                    borderColor: 'brand.400',
                   },
                 })}
               >
                 <div
                   className={css({
-                    fontSize: "lg",
+                    fontSize: 'lg',
                   })}
                 >
                   📄
                 </div>
                 <div
                   className={css({
-                    fontSize: "sm",
-                    fontWeight: "semibold",
+                    fontSize: 'sm',
+                    fontWeight: 'semibold',
                     color:
-                      orientation === "portrait"
-                        ? "brand.700"
-                        : isDark
-                          ? "gray.300"
-                          : "gray.600",
+                      orientation === 'portrait' ? 'brand.700' : isDark ? 'gray.300' : 'gray.600',
                   })}
                 >
                   Portrait
@@ -147,52 +127,39 @@ export function OrientationPanel({
               <button
                 type="button"
                 data-action="select-landscape"
-                onClick={() => handleOrientationChange("landscape")}
+                onClick={() => handleOrientationChange('landscape')}
                 className={css({
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "1.5",
-                  flex: "1",
-                  px: "3",
-                  py: "2",
-                  border: "2px solid",
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '1.5',
+                  flex: '1',
+                  px: '3',
+                  py: '2',
+                  border: '2px solid',
                   borderColor:
-                    orientation === "landscape"
-                      ? "brand.500"
-                      : isDark
-                        ? "gray.600"
-                        : "gray.300",
-                  bg:
-                    orientation === "landscape"
-                      ? "brand.50"
-                      : isDark
-                        ? "gray.700"
-                        : "white",
-                  rounded: "lg",
-                  cursor: "pointer",
-                  transition: "all 0.15s",
+                    orientation === 'landscape' ? 'brand.500' : isDark ? 'gray.600' : 'gray.300',
+                  bg: orientation === 'landscape' ? 'brand.50' : isDark ? 'gray.700' : 'white',
+                  rounded: 'lg',
+                  cursor: 'pointer',
+                  transition: 'all 0.15s',
                   _hover: {
-                    borderColor: "brand.400",
+                    borderColor: 'brand.400',
                   },
                 })}
               >
                 <div
                   className={css({
-                    fontSize: "lg",
+                    fontSize: 'lg',
                   })}
                 >
                   📃
                 </div>
                 <div
                   className={css({
-                    fontSize: "sm",
-                    fontWeight: "semibold",
+                    fontSize: 'sm',
+                    fontWeight: 'semibold',
                     color:
-                      orientation === "landscape"
-                        ? "brand.700"
-                        : isDark
-                          ? "gray.300"
-                          : "gray.600",
+                      orientation === 'landscape' ? 'brand.700' : isDark ? 'gray.300' : 'gray.600',
                   })}
                 >
                   Landscape
@@ -205,19 +172,19 @@ export function OrientationPanel({
           <div>
             <div
               className={css({
-                fontSize: "2xs",
-                fontWeight: "semibold",
-                color: isDark ? "gray.400" : "gray.500",
-                textTransform: "uppercase",
-                letterSpacing: "wider",
-                mb: "1.5",
+                fontSize: '2xs',
+                fontWeight: 'semibold',
+                color: isDark ? 'gray.400' : 'gray.500',
+                textTransform: 'uppercase',
+                letterSpacing: 'wider',
+                mb: '1.5',
               })}
             >
               Pages
             </div>
-            <div className={css({ display: "flex", gap: "1" })}>
+            <div className={css({ display: 'flex', gap: '1' })}>
               {[1, 2, 3, 4].map((pageCount) => {
-                const isSelected = pages === pageCount;
+                const isSelected = pages === pageCount
                 return (
                   <button
                     key={pageCount}
@@ -225,40 +192,28 @@ export function OrientationPanel({
                     data-action={`select-pages-${pageCount}`}
                     onClick={() => onPagesChange(pageCount)}
                     className={css({
-                      w: "10",
-                      h: "10",
-                      border: "2px solid",
-                      borderColor: isSelected
-                        ? "brand.500"
-                        : isDark
-                          ? "gray.600"
-                          : "gray.300",
-                      bg: isSelected
-                        ? "brand.50"
-                        : isDark
-                          ? "gray.700"
-                          : "white",
-                      rounded: "lg",
-                      cursor: "pointer",
-                      fontSize: "sm",
-                      fontWeight: "bold",
-                      color: isSelected
-                        ? "brand.700"
-                        : isDark
-                          ? "gray.300"
-                          : "gray.600",
-                      transition: "all 0.15s",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
+                      w: '10',
+                      h: '10',
+                      border: '2px solid',
+                      borderColor: isSelected ? 'brand.500' : isDark ? 'gray.600' : 'gray.300',
+                      bg: isSelected ? 'brand.50' : isDark ? 'gray.700' : 'white',
+                      rounded: 'lg',
+                      cursor: 'pointer',
+                      fontSize: 'sm',
+                      fontWeight: 'bold',
+                      color: isSelected ? 'brand.700' : isDark ? 'gray.300' : 'gray.600',
+                      transition: 'all 0.15s',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
                       _hover: {
-                        borderColor: "brand.400",
+                        borderColor: 'brand.400',
                       },
                     })}
                   >
                     {pageCount}
                   </button>
-                );
+                )
               })}
             </div>
           </div>
@@ -267,22 +222,22 @@ export function OrientationPanel({
         {/* Row 2: Problems per page dropdown + Total badge */}
         <div
           className={css({
-            display: "grid",
-            gridTemplateColumns: "1fr auto",
-            gap: "3",
-            alignItems: "center",
+            display: 'grid',
+            gridTemplateColumns: '1fr auto',
+            gap: '3',
+            alignItems: 'center',
           })}
         >
           <div>
             <div
               className={css({
-                fontSize: "2xs",
-                fontWeight: "semibold",
-                color: isDark ? "gray.400" : "gray.500",
-                textTransform: "uppercase",
-                letterSpacing: "wider",
-                display: "block",
-                mb: "1.5",
+                fontSize: '2xs',
+                fontWeight: 'semibold',
+                color: isDark ? 'gray.400' : 'gray.500',
+                textTransform: 'uppercase',
+                letterSpacing: 'wider',
+                display: 'block',
+                mb: '1.5',
               })}
             >
               Problems per Page
@@ -293,34 +248,34 @@ export function OrientationPanel({
                   type="button"
                   data-action="open-problems-dropdown"
                   className={css({
-                    w: "full",
-                    px: "3",
-                    py: "2",
-                    border: "2px solid",
-                    borderColor: isDark ? "gray.600" : "gray.300",
-                    bg: isDark ? "gray.700" : "white",
-                    rounded: "lg",
-                    cursor: "pointer",
-                    fontSize: "sm",
-                    fontWeight: "medium",
-                    color: isDark ? "gray.200" : "gray.700",
-                    transition: "all 0.15s",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
+                    w: 'full',
+                    px: '3',
+                    py: '2',
+                    border: '2px solid',
+                    borderColor: isDark ? 'gray.600' : 'gray.300',
+                    bg: isDark ? 'gray.700' : 'white',
+                    rounded: 'lg',
+                    cursor: 'pointer',
+                    fontSize: 'sm',
+                    fontWeight: 'medium',
+                    color: isDark ? 'gray.200' : 'gray.700',
+                    transition: 'all 0.15s',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
                     _hover: {
-                      borderColor: "brand.400",
+                      borderColor: 'brand.400',
                     },
                   })}
                 >
                   <span>
-                    {problemsPerPage} problems ({cols} cols ×{" "}
-                    {Math.ceil(problemsPerPage / cols)} rows)
+                    {problemsPerPage} problems ({cols} cols × {Math.ceil(problemsPerPage / cols)}{' '}
+                    rows)
                   </span>
                   <span
                     className={css({
-                      fontSize: "xs",
-                      color: isDark ? "gray.500" : "gray.400",
+                      fontSize: 'xs',
+                      color: isDark ? 'gray.500' : 'gray.400',
                     })}
                   >
                     ▼
@@ -331,33 +286,30 @@ export function OrientationPanel({
               <DropdownMenu.Portal>
                 <DropdownMenu.Content
                   className={css({
-                    bg: isDark ? "gray.800" : "white",
-                    rounded: "lg",
-                    shadow: "modal",
-                    border: "1px solid",
-                    borderColor: isDark ? "gray.700" : "gray.200",
-                    p: "2",
-                    minW: "64",
-                    maxH: "96",
-                    overflowY: "auto",
+                    bg: isDark ? 'gray.800' : 'white',
+                    rounded: 'lg',
+                    shadow: 'modal',
+                    border: '1px solid',
+                    borderColor: isDark ? 'gray.700' : 'gray.200',
+                    p: '2',
+                    minW: '64',
+                    maxH: '96',
+                    overflowY: 'auto',
                     zIndex: 50,
                   })}
                   sideOffset={5}
                 >
                   <div
                     className={css({
-                      display: "grid",
-                      gridTemplateColumns: "1fr 1fr",
-                      gap: "1",
+                      display: 'grid',
+                      gridTemplateColumns: '1fr 1fr',
+                      gap: '1',
                     })}
                   >
                     {problemsForOrientation.map((count) => {
-                      const itemCols = getDefaultColsForProblemsPerPage(
-                        count,
-                        orientation,
-                      );
-                      const rows = Math.ceil(count / itemCols);
-                      const isSelected = problemsPerPage === count;
+                      const itemCols = getDefaultColsForProblemsPerPage(count, orientation)
+                      const rows = Math.ceil(count / itemCols)
+                      const isSelected = problemsPerPage === count
 
                       return (
                         <DropdownMenu.Item
@@ -365,46 +317,46 @@ export function OrientationPanel({
                           data-action={`select-problems-${count}`}
                           onSelect={() => handleProblemsPerPageChange(count)}
                           className={css({
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "3",
-                            px: "3",
-                            py: "2",
-                            rounded: "md",
-                            cursor: "pointer",
-                            outline: "none",
-                            bg: isSelected ? "brand.50" : "transparent",
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '3',
+                            px: '3',
+                            py: '2',
+                            rounded: 'md',
+                            cursor: 'pointer',
+                            outline: 'none',
+                            bg: isSelected ? 'brand.50' : 'transparent',
                             _hover: {
-                              bg: "brand.50",
+                              bg: 'brand.50',
                             },
                             _focus: {
-                              bg: "brand.100",
+                              bg: 'brand.100',
                             },
                           })}
                         >
                           {/* Grid visualization */}
                           <div
                             className={css({
-                              display: "grid",
-                              placeItems: "center",
-                              w: "12",
-                              h: "12",
+                              display: 'grid',
+                              placeItems: 'center',
+                              w: '12',
+                              h: '12',
                               flexShrink: 0,
                             })}
                             style={{
                               gridTemplateColumns: `repeat(${itemCols}, 1fr)`,
                               gridTemplateRows: `repeat(${rows}, 1fr)`,
-                              gap: "2px",
+                              gap: '2px',
                             }}
                           >
                             {Array.from({ length: count }).map((_, i) => (
                               <div
                                 key={i}
                                 className={css({
-                                  w: "1.5",
-                                  h: "1.5",
-                                  bg: isSelected ? "brand.500" : "gray.400",
-                                  rounded: "full",
+                                  w: '1.5',
+                                  h: '1.5',
+                                  bg: isSelected ? 'brand.500' : 'gray.400',
+                                  rounded: 'full',
                                 })}
                               />
                             ))}
@@ -413,32 +365,24 @@ export function OrientationPanel({
                           <div className={css({ flex: 1 })}>
                             <div
                               className={css({
-                                fontSize: "sm",
-                                fontWeight: "semibold",
-                                color: isSelected
-                                  ? "brand.700"
-                                  : isDark
-                                    ? "gray.200"
-                                    : "gray.700",
+                                fontSize: 'sm',
+                                fontWeight: 'semibold',
+                                color: isSelected ? 'brand.700' : isDark ? 'gray.200' : 'gray.700',
                               })}
                             >
                               {count} problems
                             </div>
                             <div
                               className={css({
-                                fontSize: "xs",
-                                color: isSelected
-                                  ? "brand.600"
-                                  : isDark
-                                    ? "gray.400"
-                                    : "gray.500",
+                                fontSize: 'xs',
+                                color: isSelected ? 'brand.600' : isDark ? 'gray.400' : 'gray.500',
                               })}
                             >
                               {itemCols} cols × {rows} rows
                             </div>
                           </div>
                         </DropdownMenu.Item>
-                      );
+                      )
                     })}
                   </div>
                 </DropdownMenu.Content>
@@ -449,32 +393,32 @@ export function OrientationPanel({
           {/* Total problems badge */}
           <div
             className={css({
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: "1",
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '1',
             })}
           >
             <div
               className={css({
-                fontSize: "2xs",
-                fontWeight: "semibold",
-                color: isDark ? "gray.400" : "gray.500",
-                textTransform: "uppercase",
-                letterSpacing: "wider",
+                fontSize: '2xs',
+                fontWeight: 'semibold',
+                color: isDark ? 'gray.400' : 'gray.500',
+                textTransform: 'uppercase',
+                letterSpacing: 'wider',
               })}
             >
               Total
             </div>
             <div
               className={css({
-                px: "4",
-                py: "2",
-                bg: "brand.100",
-                rounded: "full",
-                fontSize: "lg",
-                fontWeight: "bold",
-                color: "brand.700",
+                px: '4',
+                py: '2',
+                bg: 'brand.100',
+                rounded: 'full',
+                fontSize: 'lg',
+                fontWeight: 'bold',
+                color: 'brand.700',
               })}
             >
               {total}
@@ -483,5 +427,5 @@ export function OrientationPanel({
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/components/WorksheetErrorBoundary.tsx b/apps/web/src/app/create/worksheets/addition/components/WorksheetErrorBoundary.tsx
index 4d27a2e2..d6686bb7 100644
--- a/apps/web/src/app/create/worksheets/addition/components/WorksheetErrorBoundary.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/WorksheetErrorBoundary.tsx
@@ -1,17 +1,17 @@
-"use client";
+'use client'
 
-import React from "react";
-import { css } from "../../../../../../styled-system/css";
-import { stack, hstack } from "../../../../../../styled-system/patterns";
+import React from 'react'
+import { css } from '../../../../../../styled-system/css'
+import { stack, hstack } from '../../../../../../styled-system/patterns'
 
 interface Props {
-  children: React.ReactNode;
+  children: React.ReactNode
 }
 
 interface State {
-  hasError: boolean;
-  error: Error | null;
-  errorInfo: React.ErrorInfo | null;
+  hasError: boolean
+  error: Error | null
+  errorInfo: React.ErrorInfo | null
 }
 
 /**
@@ -24,28 +24,24 @@ interface State {
  */
 export class WorksheetErrorBoundary extends React.Component<Props, State> {
   constructor(props: Props) {
-    super(props);
-    this.state = { hasError: false, error: null, errorInfo: null };
+    super(props)
+    this.state = { hasError: false, error: null, errorInfo: null }
   }
 
   static getDerivedStateFromError(error: Error): Partial<State> {
     // Update state so the next render will show the fallback UI
-    return { hasError: true, error };
+    return { hasError: true, error }
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     // Log error to console for debugging
-    console.error(
-      "Worksheet Error Boundary caught an error:",
-      error,
-      errorInfo,
-    );
+    console.error('Worksheet Error Boundary caught an error:', error, errorInfo)
 
     // Store error info in state for display
     this.setState({
       error,
       errorInfo,
-    });
+    })
 
     // TODO: Send error to error reporting service (Sentry, etc.)
     // Example:
@@ -60,113 +56,112 @@ export class WorksheetErrorBoundary extends React.Component<Props, State> {
 
   handleReset = () => {
     // Clear error state and try to recover
-    this.setState({ hasError: false, error: null, errorInfo: null });
+    this.setState({ hasError: false, error: null, errorInfo: null })
 
     // Reload the page to get fresh state
-    window.location.reload();
-  };
+    window.location.reload()
+  }
 
   render() {
     if (this.state.hasError && this.state.error) {
-      const error = this.state.error;
+      const error = this.state.error
 
       return (
         <div
           data-component="error-boundary"
           className={css({
-            minHeight: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            bg: "gray.50",
-            p: "8",
+            minHeight: '100vh',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            bg: 'gray.50',
+            p: '8',
           })}
         >
           <div
             className={css({
-              maxW: "2xl",
-              w: "full",
-              bg: "white",
-              rounded: "2xl",
-              shadow: "modal",
-              p: "8",
+              maxW: '2xl',
+              w: 'full',
+              bg: 'white',
+              rounded: '2xl',
+              shadow: 'modal',
+              p: '8',
             })}
           >
-            <div className={stack({ gap: "6" })}>
+            <div className={stack({ gap: '6' })}>
               {/* Error Icon & Title */}
-              <div className={stack({ gap: "3", textAlign: "center" })}>
-                <div className={css({ fontSize: "6xl" })}>⚠️</div>
+              <div className={stack({ gap: '3', textAlign: 'center' })}>
+                <div className={css({ fontSize: '6xl' })}>⚠️</div>
                 <h1
                   className={css({
-                    fontSize: "2xl",
-                    fontWeight: "bold",
-                    color: "red.700",
+                    fontSize: '2xl',
+                    fontWeight: 'bold',
+                    color: 'red.700',
                   })}
                 >
                   Something went wrong
                 </h1>
-                <p className={css({ fontSize: "md", color: "gray.600" })}>
-                  We encountered an unexpected error while loading the worksheet
-                  creator. This shouldn't happen, and we apologize for the
-                  inconvenience.
+                <p className={css({ fontSize: 'md', color: 'gray.600' })}>
+                  We encountered an unexpected error while loading the worksheet creator. This
+                  shouldn't happen, and we apologize for the inconvenience.
                 </p>
               </div>
 
               {/* Error Details */}
               <div
                 className={css({
-                  bg: "red.50",
-                  border: "1px solid",
-                  borderColor: "red.200",
-                  rounded: "lg",
-                  p: "4",
+                  bg: 'red.50',
+                  border: '1px solid',
+                  borderColor: 'red.200',
+                  rounded: 'lg',
+                  p: '4',
                 })}
               >
-                <div className={stack({ gap: "2" })}>
+                <div className={stack({ gap: '2' })}>
                   <div
                     className={css({
-                      fontSize: "sm",
-                      fontWeight: "semibold",
-                      color: "red.800",
+                      fontSize: 'sm',
+                      fontWeight: 'semibold',
+                      color: 'red.800',
                     })}
                   >
                     Error Details:
                   </div>
                   <pre
                     className={css({
-                      fontSize: "xs",
-                      fontFamily: "mono",
-                      color: "red.700",
-                      whiteSpace: "pre-wrap",
-                      wordBreak: "break-word",
-                      overflowX: "auto",
+                      fontSize: 'xs',
+                      fontFamily: 'mono',
+                      color: 'red.700',
+                      whiteSpace: 'pre-wrap',
+                      wordBreak: 'break-word',
+                      overflowX: 'auto',
                     })}
                   >
                     {error.toString()}
                   </pre>
                   {this.state.errorInfo?.componentStack && (
-                    <details className={css({ mt: "2" })}>
+                    <details className={css({ mt: '2' })}>
                       <summary
                         className={css({
-                          fontSize: "xs",
-                          fontWeight: "medium",
-                          color: "red.700",
-                          cursor: "pointer",
-                          _hover: { color: "red.800" },
+                          fontSize: 'xs',
+                          fontWeight: 'medium',
+                          color: 'red.700',
+                          cursor: 'pointer',
+                          _hover: { color: 'red.800' },
                         })}
                       >
                         Component Stack (for developers)
                       </summary>
                       <pre
                         className={css({
-                          fontSize: "2xs",
-                          fontFamily: "mono",
-                          color: "red.600",
-                          whiteSpace: "pre-wrap",
-                          wordBreak: "break-word",
-                          mt: "2",
-                          maxH: "40",
-                          overflowY: "auto",
+                          fontSize: '2xs',
+                          fontFamily: 'mono',
+                          color: 'red.600',
+                          whiteSpace: 'pre-wrap',
+                          wordBreak: 'break-word',
+                          mt: '2',
+                          maxH: '40',
+                          overflowY: 'auto',
                         })}
                       >
                         {this.state.errorInfo.componentStack}
@@ -177,23 +172,23 @@ export class WorksheetErrorBoundary extends React.Component<Props, State> {
               </div>
 
               {/* Action Buttons */}
-              <div className={hstack({ gap: "3", justify: "center" })}>
+              <div className={hstack({ gap: '3', justify: 'center' })}>
                 <button
                   onClick={this.handleReset}
                   className={css({
-                    px: "6",
-                    py: "3",
-                    bg: "brand.600",
-                    color: "white",
-                    fontWeight: "semibold",
-                    rounded: "lg",
-                    shadow: "card",
-                    transition: "all",
-                    cursor: "pointer",
+                    px: '6',
+                    py: '3',
+                    bg: 'brand.600',
+                    color: 'white',
+                    fontWeight: 'semibold',
+                    rounded: 'lg',
+                    shadow: 'card',
+                    transition: 'all',
+                    cursor: 'pointer',
                     _hover: {
-                      bg: "brand.700",
-                      transform: "translateY(-1px)",
-                      shadow: "modal",
+                      bg: 'brand.700',
+                      transform: 'translateY(-1px)',
+                      shadow: 'modal',
                     },
                   })}
                 >
@@ -202,21 +197,21 @@ export class WorksheetErrorBoundary extends React.Component<Props, State> {
                 <a
                   href="/"
                   className={css({
-                    px: "6",
-                    py: "3",
-                    bg: "white",
-                    color: "gray.700",
-                    fontWeight: "semibold",
-                    rounded: "lg",
-                    border: "1px solid",
-                    borderColor: "gray.300",
-                    shadow: "card",
-                    transition: "all",
-                    cursor: "pointer",
-                    textDecoration: "none",
+                    px: '6',
+                    py: '3',
+                    bg: 'white',
+                    color: 'gray.700',
+                    fontWeight: 'semibold',
+                    rounded: 'lg',
+                    border: '1px solid',
+                    borderColor: 'gray.300',
+                    shadow: 'card',
+                    transition: 'all',
+                    cursor: 'pointer',
+                    textDecoration: 'none',
                     _hover: {
-                      bg: "gray.50",
-                      borderColor: "gray.400",
+                      bg: 'gray.50',
+                      borderColor: 'gray.400',
                     },
                   })}
                 >
@@ -227,9 +222,9 @@ export class WorksheetErrorBoundary extends React.Component<Props, State> {
               {/* Help Text */}
               <p
                 className={css({
-                  fontSize: "sm",
-                  color: "gray.500",
-                  textAlign: "center",
+                  fontSize: 'sm',
+                  color: 'gray.500',
+                  textAlign: 'center',
                 })}
               >
                 If this problem persists, please report it via GitHub Issues.
@@ -237,9 +232,9 @@ export class WorksheetErrorBoundary extends React.Component<Props, State> {
             </div>
           </div>
         </div>
-      );
+      )
     }
 
-    return this.props.children;
+    return this.props.children
   }
 }
diff --git a/apps/web/src/app/create/worksheets/addition/components/WorksheetPreview.tsx b/apps/web/src/app/create/worksheets/addition/components/WorksheetPreview.tsx
index 77a97526..9f924fe2 100644
--- a/apps/web/src/app/create/worksheets/addition/components/WorksheetPreview.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/WorksheetPreview.tsx
@@ -1,109 +1,90 @@
-"use client";
+'use client'
 
-import { Suspense, useState, useEffect, useRef } from "react";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { useTranslations } from "next-intl";
-import { css } from "../../../../../../styled-system/css";
-import { hstack, stack } from "../../../../../../styled-system/patterns";
-import type { WorksheetFormState } from "../types";
+import { Suspense, useState, useEffect, useRef } from 'react'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { useTranslations } from 'next-intl'
+import { css } from '../../../../../../styled-system/css'
+import { hstack, stack } from '../../../../../../styled-system/patterns'
+import type { WorksheetFormState } from '../types'
 
 interface WorksheetPreviewProps {
-  formState: WorksheetFormState;
-  initialData?: string[];
-  isDark?: boolean;
+  formState: WorksheetFormState
+  initialData?: string[]
+  isDark?: boolean
 }
 
 function getDefaultDate(): string {
-  const now = new Date();
-  return now.toLocaleDateString("en-US", {
-    month: "long",
-    day: "numeric",
-    year: "numeric",
-  });
+  const now = new Date()
+  return now.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  })
 }
 
-async function fetchWorksheetPreview(
-  formState: WorksheetFormState,
-): Promise<string[]> {
-  const fetchId = Math.random().toString(36).slice(2, 9);
-  console.log(
-    `[WorksheetPreview] fetchWorksheetPreview called (ID: ${fetchId})`,
-    {
-      seed: formState.seed,
-      problemsPerPage: formState.problemsPerPage,
-    },
-  );
+async function fetchWorksheetPreview(formState: WorksheetFormState): Promise<string[]> {
+  const fetchId = Math.random().toString(36).slice(2, 9)
+  console.log(`[WorksheetPreview] fetchWorksheetPreview called (ID: ${fetchId})`, {
+    seed: formState.seed,
+    problemsPerPage: formState.problemsPerPage,
+  })
 
   // Set current date for preview
   const configWithDate = {
     ...formState,
     date: getDefaultDate(),
-  };
-
-  // Use absolute URL for SSR compatibility
-  const baseUrl =
-    typeof window !== "undefined"
-      ? window.location.origin
-      : "http://localhost:3000";
-  const url = `${baseUrl}/api/create/worksheets/addition/preview`;
-
-  console.log(`[WorksheetPreview] Fetching from API (ID: ${fetchId})...`);
-  const response = await fetch(url, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(configWithDate),
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    const errorMsg =
-      errorData.error || errorData.message || "Failed to fetch preview";
-    const details = errorData.details ? `\n\n${errorData.details}` : "";
-    const errors = errorData.errors
-      ? `\n\nErrors:\n${errorData.errors.join("\n")}`
-      : "";
-    throw new Error(errorMsg + details + errors);
   }
 
-  const data = await response.json();
-  console.log(
-    `[WorksheetPreview] Fetch complete (ID: ${fetchId}), pages:`,
-    data.pages.length,
-  );
-  return data.pages;
+  // Use absolute URL for SSR compatibility
+  const baseUrl = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000'
+  const url = `${baseUrl}/api/create/worksheets/addition/preview`
+
+  console.log(`[WorksheetPreview] Fetching from API (ID: ${fetchId})...`)
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(configWithDate),
+  })
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}))
+    const errorMsg = errorData.error || errorData.message || 'Failed to fetch preview'
+    const details = errorData.details ? `\n\n${errorData.details}` : ''
+    const errors = errorData.errors ? `\n\nErrors:\n${errorData.errors.join('\n')}` : ''
+    throw new Error(errorMsg + details + errors)
+  }
+
+  const data = await response.json()
+  console.log(`[WorksheetPreview] Fetch complete (ID: ${fetchId}), pages:`, data.pages.length)
+  return data.pages
 }
 
-function PreviewContent({
-  formState,
-  initialData,
-  isDark = false,
-}: WorksheetPreviewProps) {
-  const t = useTranslations("create.worksheets.addition");
-  const [currentPage, setCurrentPage] = useState(0);
+function PreviewContent({ formState, initialData, isDark = false }: WorksheetPreviewProps) {
+  const t = useTranslations('create.worksheets.addition')
+  const [currentPage, setCurrentPage] = useState(0)
 
   // Track if we've used the initial data (so we only use it once)
-  const initialDataUsed = useRef(false);
+  const initialDataUsed = useRef(false)
 
-  console.log("[WorksheetPreview] Rendering with formState:", {
+  console.log('[WorksheetPreview] Rendering with formState:', {
     seed: formState.seed,
     problemsPerPage: formState.problemsPerPage,
     hasInitialData: !!initialData,
     initialDataUsed: initialDataUsed.current,
-  });
+  })
 
   // Only use initialData on the very first query, not on subsequent fetches
-  const queryInitialData =
-    !initialDataUsed.current && initialData ? initialData : undefined;
+  const queryInitialData = !initialDataUsed.current && initialData ? initialData : undefined
 
   if (queryInitialData) {
-    console.log("[WorksheetPreview] Using server-generated initial data");
-    initialDataUsed.current = true;
+    console.log('[WorksheetPreview] Using server-generated initial data')
+    initialDataUsed.current = true
   }
 
   // Use Suspense Query - will suspend during loading
   const { data: pages } = useSuspenseQuery({
     queryKey: [
-      "worksheet-preview",
+      'worksheet-preview',
       // PRIMARY state
       formState.problemsPerPage,
       formState.cols,
@@ -136,40 +117,40 @@ function PreviewContent({
       // (rows and total are derived from primary state)
     ],
     queryFn: () => {
-      console.log("[WorksheetPreview] Fetching preview from API...");
-      return fetchWorksheetPreview(formState);
+      console.log('[WorksheetPreview] Fetching preview from API...')
+      return fetchWorksheetPreview(formState)
     },
     initialData: queryInitialData, // Only use on first render
-  });
+  })
 
-  console.log("[WorksheetPreview] Preview fetched, pages:", pages.length);
+  console.log('[WorksheetPreview] Preview fetched, pages:', pages.length)
 
-  const totalPages = pages.length;
+  const totalPages = pages.length
 
   // Reset to first page when preview updates
   useEffect(() => {
-    setCurrentPage(0);
-  }, [pages]);
+    setCurrentPage(0)
+  }, [pages])
 
   return (
-    <div data-component="worksheet-preview" className={stack({ gap: "4" })}>
-      <div className={stack({ gap: "1" })}>
+    <div data-component="worksheet-preview" className={stack({ gap: '4' })}>
+      <div className={stack({ gap: '1' })}>
         <h3
           className={css({
-            fontSize: "lg",
-            fontWeight: "bold",
-            color: isDark ? "gray.100" : "gray.900",
+            fontSize: 'lg',
+            fontWeight: 'bold',
+            color: isDark ? 'gray.100' : 'gray.900',
           })}
         >
-          {t("preview.title")}
+          {t('preview.title')}
         </h3>
         <p
           className={css({
-            fontSize: "sm",
-            color: isDark ? "gray.300" : "gray.600",
+            fontSize: 'sm',
+            color: isDark ? 'gray.300' : 'gray.600',
           })}
         >
-          {totalPages > 1 ? `${totalPages} pages` : t("preview.subtitle")}
+          {totalPages > 1 ? `${totalPages} pages` : t('preview.subtitle')}
         </p>
       </div>
 
@@ -177,28 +158,28 @@ function PreviewContent({
       {totalPages > 1 && (
         <div
           className={hstack({
-            gap: "3",
-            justify: "center",
-            alignItems: "center",
+            gap: '3',
+            justify: 'center',
+            alignItems: 'center',
           })}
         >
           <button
             onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
             disabled={currentPage === 0}
             className={css({
-              px: "4",
-              py: "2",
-              bg: "brand.600",
-              color: "white",
-              rounded: "lg",
-              fontWeight: "medium",
-              cursor: "pointer",
+              px: '4',
+              py: '2',
+              bg: 'brand.600',
+              color: 'white',
+              rounded: 'lg',
+              fontWeight: 'medium',
+              cursor: 'pointer',
               _disabled: {
                 opacity: 0.5,
-                cursor: "not-allowed",
+                cursor: 'not-allowed',
               },
               _hover: {
-                bg: "brand.700",
+                bg: 'brand.700',
               },
             })}
           >
@@ -206,32 +187,30 @@ function PreviewContent({
           </button>
           <span
             className={css({
-              fontSize: "sm",
-              color: isDark ? "gray.200" : "gray.700",
-              fontWeight: "medium",
+              fontSize: 'sm',
+              color: isDark ? 'gray.200' : 'gray.700',
+              fontWeight: 'medium',
             })}
           >
             Page {currentPage + 1} of {totalPages}
           </span>
           <button
-            onClick={() =>
-              setCurrentPage((p) => Math.min(totalPages - 1, p + 1))
-            }
+            onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
             disabled={currentPage === totalPages - 1}
             className={css({
-              px: "4",
-              py: "2",
-              bg: "brand.600",
-              color: "white",
-              rounded: "lg",
-              fontWeight: "medium",
-              cursor: "pointer",
+              px: '4',
+              py: '2',
+              bg: 'brand.600',
+              color: 'white',
+              rounded: 'lg',
+              fontWeight: 'medium',
+              cursor: 'pointer',
               _disabled: {
                 opacity: 0.5,
-                cursor: "not-allowed",
+                cursor: 'not-allowed',
               },
               _hover: {
-                bg: "brand.700",
+                bg: 'brand.700',
               },
             })}
           >
@@ -244,19 +223,19 @@ function PreviewContent({
       <div
         data-element="svg-preview"
         className={css({
-          bg: isDark ? "gray.700" : "white",
-          rounded: "lg",
-          p: "4",
-          border: "1px solid",
-          borderColor: isDark ? "gray.600" : "gray.200",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          "& svg": {
-            maxWidth: "100%",
-            maxHeight: "70vh",
-            height: "auto",
-            width: "auto",
+          bg: isDark ? 'gray.700' : 'white',
+          rounded: 'lg',
+          p: '4',
+          border: '1px solid',
+          borderColor: isDark ? 'gray.600' : 'gray.200',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          '& svg': {
+            maxWidth: '100%',
+            maxHeight: '70vh',
+            height: 'auto',
+            width: 'auto',
           },
         })}
         dangerouslySetInnerHTML={{ __html: pages[currentPage] }}
@@ -266,28 +245,28 @@ function PreviewContent({
       {totalPages > 1 && (
         <div
           className={hstack({
-            gap: "3",
-            justify: "center",
-            alignItems: "center",
+            gap: '3',
+            justify: 'center',
+            alignItems: 'center',
           })}
         >
           <button
             onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
             disabled={currentPage === 0}
             className={css({
-              px: "4",
-              py: "2",
-              bg: "brand.600",
-              color: "white",
-              rounded: "lg",
-              fontWeight: "medium",
-              cursor: "pointer",
+              px: '4',
+              py: '2',
+              bg: 'brand.600',
+              color: 'white',
+              rounded: 'lg',
+              fontWeight: 'medium',
+              cursor: 'pointer',
               _disabled: {
                 opacity: 0.5,
-                cursor: "not-allowed",
+                cursor: 'not-allowed',
               },
               _hover: {
-                bg: "brand.700",
+                bg: 'brand.700',
               },
             })}
           >
@@ -295,32 +274,30 @@ function PreviewContent({
           </button>
           <span
             className={css({
-              fontSize: "sm",
-              color: isDark ? "gray.200" : "gray.700",
-              fontWeight: "medium",
+              fontSize: 'sm',
+              color: isDark ? 'gray.200' : 'gray.700',
+              fontWeight: 'medium',
             })}
           >
             Page {currentPage + 1} of {totalPages}
           </span>
           <button
-            onClick={() =>
-              setCurrentPage((p) => Math.min(totalPages - 1, p + 1))
-            }
+            onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
             disabled={currentPage === totalPages - 1}
             className={css({
-              px: "4",
-              py: "2",
-              bg: "brand.600",
-              color: "white",
-              rounded: "lg",
-              fontWeight: "medium",
-              cursor: "pointer",
+              px: '4',
+              py: '2',
+              bg: 'brand.600',
+              color: 'white',
+              rounded: 'lg',
+              fontWeight: 'medium',
+              cursor: 'pointer',
               _disabled: {
                 opacity: 0.5,
-                cursor: "not-allowed",
+                cursor: 'not-allowed',
               },
               _hover: {
-                bg: "brand.700",
+                bg: 'brand.700',
               },
             })}
           >
@@ -332,50 +309,50 @@ function PreviewContent({
       {/* Info about full worksheet */}
       <div
         className={css({
-          bg: isDark ? "rgba(59, 130, 246, 0.1)" : "blue.50",
-          border: "1px solid",
-          borderColor: isDark ? "rgba(59, 130, 246, 0.3)" : "blue.200",
-          rounded: "lg",
-          p: "3",
-          fontSize: "sm",
-          color: isDark ? "blue.300" : "blue.800",
+          bg: isDark ? 'rgba(59, 130, 246, 0.1)' : 'blue.50',
+          border: '1px solid',
+          borderColor: isDark ? 'rgba(59, 130, 246, 0.3)' : 'blue.200',
+          rounded: 'lg',
+          p: '3',
+          fontSize: 'sm',
+          color: isDark ? 'blue.300' : 'blue.800',
         })}
       >
-        <strong>Full worksheet:</strong> {formState.total} problems in a{" "}
-        {formState.cols}×{formState.rows} grid
-        {formState.interpolate && " (progressive difficulty: easy → hard)"}
+        <strong>Full worksheet:</strong> {formState.total} problems in a {formState.cols}×
+        {formState.rows} grid
+        {formState.interpolate && ' (progressive difficulty: easy → hard)'}
       </div>
     </div>
-  );
+  )
 }
 
 function PreviewFallback() {
-  console.log("[WorksheetPreview] Showing fallback (Suspense boundary)");
+  console.log('[WorksheetPreview] Showing fallback (Suspense boundary)')
   return (
     <div
       data-component="worksheet-preview-loading"
       className={css({
-        bg: "white",
-        rounded: "2xl",
-        p: "6",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        minHeight: "600px",
+        bg: 'white',
+        rounded: '2xl',
+        p: '6',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '600px',
       })}
     >
       <p
         className={css({
-          fontSize: "lg",
-          color: "gray.400",
-          textAlign: "center",
+          fontSize: 'lg',
+          color: 'gray.400',
+          textAlign: 'center',
         })}
       >
         Generating preview...
       </p>
     </div>
-  );
+  )
 }
 
 export function WorksheetPreview({
@@ -385,11 +362,7 @@ export function WorksheetPreview({
 }: WorksheetPreviewProps) {
   return (
     <Suspense fallback={<PreviewFallback />}>
-      <PreviewContent
-        formState={formState}
-        initialData={initialData}
-        isDark={isDark}
-      />
+      <PreviewContent formState={formState} initialData={initialData} isDark={isDark} />
     </Suspense>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/components/config-panel/DigitRangeSection.tsx b/apps/web/src/app/create/worksheets/addition/components/config-panel/DigitRangeSection.tsx
index 7a006855..659d9fd3 100644
--- a/apps/web/src/app/create/worksheets/addition/components/config-panel/DigitRangeSection.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/config-panel/DigitRangeSection.tsx
@@ -1,10 +1,10 @@
-import * as Slider from "@radix-ui/react-slider";
-import { css } from "../../../../../../../styled-system/css";
+import * as Slider from '@radix-ui/react-slider'
+import { css } from '../../../../../../../styled-system/css'
 
 export interface DigitRangeSectionProps {
-  digitRange: { min: number; max: number } | undefined;
-  onChange: (digitRange: { min: number; max: number }) => void;
-  isDark?: boolean;
+  digitRange: { min: number; max: number } | undefined
+  onChange: (digitRange: { min: number; max: number }) => void
+  isDark?: boolean
 }
 
 export function DigitRangeSection({
@@ -12,42 +12,42 @@ export function DigitRangeSection({
   onChange,
   isDark = false,
 }: DigitRangeSectionProps) {
-  const min = digitRange?.min ?? 2;
-  const max = digitRange?.max ?? 2;
+  const min = digitRange?.min ?? 2
+  const max = digitRange?.max ?? 2
 
   return (
     <div
       data-section="digit-range"
       className={css({
-        bg: isDark ? "gray.700" : "gray.50",
-        border: "1px solid",
-        borderColor: isDark ? "gray.600" : "gray.200",
-        rounded: "xl",
-        p: "4",
+        bg: isDark ? 'gray.700' : 'gray.50',
+        border: '1px solid',
+        borderColor: isDark ? 'gray.600' : 'gray.200',
+        rounded: 'xl',
+        p: '4',
       })}
     >
-      <div className={css({ mb: "3" })}>
+      <div className={css({ mb: '3' })}>
         <div
           className={css({
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
           })}
         >
           <label
             className={css({
-              fontSize: "sm",
-              fontWeight: "semibold",
-              color: isDark ? "gray.200" : "gray.700",
+              fontSize: 'sm',
+              fontWeight: 'semibold',
+              color: isDark ? 'gray.200' : 'gray.700',
             })}
           >
             Problem Size (Digits per Number)
           </label>
           <span
             className={css({
-              fontSize: "sm",
-              fontWeight: "bold",
-              color: "brand.600",
+              fontSize: 'sm',
+              fontWeight: 'bold',
+              color: 'brand.600',
             })}
           >
             {min === max ? `${min}` : `${min}-${max}`}
@@ -55,56 +55,56 @@ export function DigitRangeSection({
         </div>
         <p
           className={css({
-            fontSize: "xs",
-            color: isDark ? "gray.400" : "gray.500",
-            mt: "1",
+            fontSize: 'xs',
+            color: isDark ? 'gray.400' : 'gray.500',
+            mt: '1',
           })}
         >
           {min === max
-            ? `All problems: exactly ${min} digit${min > 1 ? "s" : ""}`
+            ? `All problems: exactly ${min} digit${min > 1 ? 's' : ''}`
             : `Mixed problem sizes from ${min} to ${max} digits`}
         </p>
       </div>
 
       {/* Range Slider with Tick Marks */}
-      <div className={css({ position: "relative", px: "3", py: "4" })}>
+      <div className={css({ position: 'relative', px: '3', py: '4' })}>
         {/* Tick marks */}
         <div
           className={css({
-            position: "absolute",
-            width: "full",
-            top: "0",
-            left: "0",
-            px: "3",
-            display: "flex",
-            justifyContent: "space-between",
+            position: 'absolute',
+            width: 'full',
+            top: '0',
+            left: '0',
+            px: '3',
+            display: 'flex',
+            justifyContent: 'space-between',
           })}
         >
           {[1, 2, 3, 4, 5].map((digit) => (
             <div
               key={`tick-${digit}`}
               className={css({
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                width: "0",
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                width: '0',
               })}
             >
               <div
                 className={css({
-                  fontSize: "2xs",
-                  fontWeight: "medium",
-                  color: "gray.600",
-                  mb: "1",
+                  fontSize: '2xs',
+                  fontWeight: 'medium',
+                  color: 'gray.600',
+                  mb: '1',
                 })}
               >
                 {digit}
               </div>
               <div
                 className={css({
-                  width: "1px",
-                  height: "2",
-                  bg: "gray.300",
+                  width: '1px',
+                  height: '2',
+                  bg: 'gray.300',
                 })}
               />
             </div>
@@ -114,21 +114,21 @@ export function DigitRangeSection({
         {/* Double-thumbed range slider */}
         <Slider.Root
           className={css({
-            position: "relative",
-            display: "flex",
-            alignItems: "center",
-            userSelect: "none",
-            touchAction: "none",
-            width: "full",
-            height: "6",
-            mt: "8",
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            userSelect: 'none',
+            touchAction: 'none',
+            width: 'full',
+            height: '6',
+            mt: '8',
           })}
           value={[min, max]}
           onValueChange={(values) => {
             onChange({
               min: values[0],
               max: values[1],
-            });
+            })
           }}
           min={1}
           max={5}
@@ -137,64 +137,64 @@ export function DigitRangeSection({
         >
           <Slider.Track
             className={css({
-              position: "relative",
+              position: 'relative',
               flexGrow: 1,
-              bg: "gray.200",
-              rounded: "full",
-              height: "2",
+              bg: 'gray.200',
+              rounded: 'full',
+              height: '2',
             })}
           >
             <Slider.Range
               className={css({
-                position: "absolute",
-                bg: "brand.500",
-                rounded: "full",
-                height: "full",
+                position: 'absolute',
+                bg: 'brand.500',
+                rounded: 'full',
+                height: 'full',
               })}
             />
           </Slider.Track>
           <Slider.Thumb
             className={css({
-              display: "block",
-              width: "4",
-              height: "4",
-              bg: "white",
-              boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
-              rounded: "full",
-              border: "2px solid",
-              borderColor: "brand.500",
-              cursor: "grab",
-              transition: "transform 0.15s",
-              _hover: { transform: "scale(1.15)" },
+              display: 'block',
+              width: '4',
+              height: '4',
+              bg: 'white',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+              rounded: 'full',
+              border: '2px solid',
+              borderColor: 'brand.500',
+              cursor: 'grab',
+              transition: 'transform 0.15s',
+              _hover: { transform: 'scale(1.15)' },
               _focus: {
-                outline: "none",
-                boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.3)",
+                outline: 'none',
+                boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.3)',
               },
-              _active: { cursor: "grabbing" },
+              _active: { cursor: 'grabbing' },
             })}
           />
           <Slider.Thumb
             className={css({
-              display: "block",
-              width: "4",
-              height: "4",
-              bg: "white",
-              boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
-              rounded: "full",
-              border: "2px solid",
-              borderColor: "brand.600",
-              cursor: "grab",
-              transition: "transform 0.15s",
-              _hover: { transform: "scale(1.15)" },
+              display: 'block',
+              width: '4',
+              height: '4',
+              bg: 'white',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+              rounded: 'full',
+              border: '2px solid',
+              borderColor: 'brand.600',
+              cursor: 'grab',
+              transition: 'transform 0.15s',
+              _hover: { transform: 'scale(1.15)' },
               _focus: {
-                outline: "none",
-                boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.3)",
+                outline: 'none',
+                boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.3)',
               },
-              _active: { cursor: "grabbing" },
+              _active: { cursor: 'grabbing' },
             })}
           />
         </Slider.Root>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/components/config-panel/ManualModeControls.tsx b/apps/web/src/app/create/worksheets/addition/components/config-panel/ManualModeControls.tsx
index fca4e442..eba1bf9d 100644
--- a/apps/web/src/app/create/worksheets/addition/components/config-panel/ManualModeControls.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/config-panel/ManualModeControls.tsx
@@ -1,17 +1,17 @@
-"use client";
+'use client'
 
-import * as Slider from "@radix-ui/react-slider";
-import { css } from "../../../../../../../styled-system/css";
-import { stack } from "../../../../../../../styled-system/patterns";
-import type { WorksheetFormState } from "../../types";
-import { DisplayOptionsPreview } from "../DisplayOptionsPreview";
-import { ToggleOption } from "./ToggleOption";
-import { SubOption } from "./SubOption";
+import * as Slider from '@radix-ui/react-slider'
+import { css } from '../../../../../../../styled-system/css'
+import { stack } from '../../../../../../../styled-system/patterns'
+import type { WorksheetFormState } from '../../types'
+import { DisplayOptionsPreview } from '../DisplayOptionsPreview'
+import { ToggleOption } from './ToggleOption'
+import { SubOption } from './SubOption'
 
 export interface ManualModeControlsProps {
-  formState: WorksheetFormState;
-  onChange: (updates: Partial<WorksheetFormState>) => void;
-  isDark?: boolean;
+  formState: WorksheetFormState
+  onChange: (updates: Partial<WorksheetFormState>) => void
+  isDark?: boolean
 }
 
 export function ManualModeControls({
@@ -25,33 +25,33 @@ export function ManualModeControls({
         <div
           data-section="display"
           className={css({
-            bg: "gray.50",
-            border: "1px solid",
-            borderColor: "gray.200",
-            rounded: "xl",
-            p: "3",
+            bg: 'gray.50',
+            border: '1px solid',
+            borderColor: 'gray.200',
+            rounded: 'xl',
+            p: '3',
           })}
         >
-          <div className={stack({ gap: "3" })}>
+          <div className={stack({ gap: '3' })}>
             <div
               className={css({
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
               })}
             >
               <div
                 className={css({
-                  fontSize: "xs",
-                  fontWeight: "semibold",
-                  color: "gray.500",
-                  textTransform: "uppercase",
-                  letterSpacing: "wider",
+                  fontSize: 'xs',
+                  fontWeight: 'semibold',
+                  color: 'gray.500',
+                  textTransform: 'uppercase',
+                  letterSpacing: 'wider',
                 })}
               >
                 Display Options
               </div>
-              <div className={css({ display: "flex", gap: "1.5" })}>
+              <div className={css({ display: 'flex', gap: '1.5' })}>
                 <button
                   onClick={() =>
                     onChange({
@@ -64,16 +64,16 @@ export function ManualModeControls({
                     })
                   }
                   className={css({
-                    px: "2",
-                    py: "0.5",
-                    fontSize: "2xs",
-                    color: "brand.600",
-                    border: "1px solid",
-                    borderColor: "brand.300",
-                    bg: "white",
-                    rounded: "md",
-                    cursor: "pointer",
-                    _hover: { bg: "brand.50" },
+                    px: '2',
+                    py: '0.5',
+                    fontSize: '2xs',
+                    color: 'brand.600',
+                    border: '1px solid',
+                    borderColor: 'brand.300',
+                    bg: 'white',
+                    rounded: 'md',
+                    cursor: 'pointer',
+                    _hover: { bg: 'brand.50' },
                   })}
                 >
                   Check All
@@ -90,16 +90,16 @@ export function ManualModeControls({
                     })
                   }
                   className={css({
-                    px: "2",
-                    py: "0.5",
-                    fontSize: "2xs",
-                    color: "gray.600",
-                    border: "1px solid",
-                    borderColor: "gray.300",
-                    bg: "white",
-                    rounded: "md",
-                    cursor: "pointer",
-                    _hover: { bg: "gray.50" },
+                    px: '2',
+                    py: '0.5',
+                    fontSize: '2xs',
+                    color: 'gray.600',
+                    border: '1px solid',
+                    borderColor: 'gray.300',
+                    bg: 'white',
+                    rounded: 'md',
+                    cursor: 'pointer',
+                    _hover: { bg: 'gray.50' },
                   })}
                 >
                   Uncheck All
@@ -110,18 +110,18 @@ export function ManualModeControls({
             {/* Two-column grid: toggle options on left, preview on right */}
             <div
               className={css({
-                display: "grid",
-                gridTemplateColumns: "2fr 1fr",
-                gap: "3",
+                display: 'grid',
+                gridTemplateColumns: '2fr 1fr',
+                gap: '3',
               })}
             >
               {/* Toggle Options in 2-column grid */}
               <div
                 className={css({
-                  display: "grid",
-                  gridTemplateColumns: "1fr 1fr",
-                  gap: "2",
-                  alignItems: "start",
+                  display: 'grid',
+                  gridTemplateColumns: '1fr 1fr',
+                  gap: '2',
+                  alignItems: 'start',
                 })}
               >
                 <ToggleOption
@@ -134,9 +134,7 @@ export function ManualModeControls({
 
                 <ToggleOption
                   checked={formState.showPlaceValueColors ?? true}
-                  onChange={(checked) =>
-                    onChange({ showPlaceValueColors: checked })
-                  }
+                  onChange={(checked) => onChange({ showPlaceValueColors: checked })}
                   label="Place Value Colors"
                   description="Reinforce place value understanding visually"
                   isDark={isDark}
@@ -144,9 +142,7 @@ export function ManualModeControls({
 
                 <ToggleOption
                   checked={formState.showProblemNumbers ?? true}
-                  onChange={(checked) =>
-                    onChange({ showProblemNumbers: checked })
-                  }
+                  onChange={(checked) => onChange({ showProblemNumbers: checked })}
                   label="Problem Numbers"
                   description="Help students track progress and reference problems"
                   isDark={isDark}
@@ -163,45 +159,39 @@ export function ManualModeControls({
                 <ToggleOption
                   checked={formState.showCarryBoxes ?? true}
                   onChange={(checked) => {
-                    onChange({ showCarryBoxes: checked });
+                    onChange({ showCarryBoxes: checked })
                   }}
                   label={
-                    formState.operator === "subtraction"
-                      ? "Borrow Boxes"
-                      : formState.operator === "mixed"
-                        ? "Carry/Borrow Boxes"
-                        : "Carry Boxes"
+                    formState.operator === 'subtraction'
+                      ? 'Borrow Boxes'
+                      : formState.operator === 'mixed'
+                        ? 'Carry/Borrow Boxes'
+                        : 'Carry Boxes'
                   }
                   description={
-                    formState.operator === "subtraction"
-                      ? "Help students track borrowing during subtraction"
-                      : formState.operator === "mixed"
-                        ? "Help students track regrouping (carrying in addition, borrowing in subtraction)"
-                        : "Help students track regrouping during addition"
+                    formState.operator === 'subtraction'
+                      ? 'Help students track borrowing during subtraction'
+                      : formState.operator === 'mixed'
+                        ? 'Help students track regrouping (carrying in addition, borrowing in subtraction)'
+                        : 'Help students track regrouping during addition'
                   }
                   isDark={isDark}
                 />
 
-                {(formState.operator === "subtraction" ||
-                  formState.operator === "mixed") && (
+                {(formState.operator === 'subtraction' || formState.operator === 'mixed') && (
                   <ToggleOption
                     checked={formState.showBorrowNotation ?? true}
-                    onChange={(checked) =>
-                      onChange({ showBorrowNotation: checked })
-                    }
+                    onChange={(checked) => onChange({ showBorrowNotation: checked })}
                     label="Borrowed 10s Box"
                     description="Box for adding 10 to borrowing digit"
                     isDark={isDark}
                   />
                 )}
 
-                {(formState.operator === "subtraction" ||
-                  formState.operator === "mixed") && (
+                {(formState.operator === 'subtraction' || formState.operator === 'mixed') && (
                   <ToggleOption
                     checked={formState.showBorrowingHints ?? false}
-                    onChange={(checked) =>
-                      onChange({ showBorrowingHints: checked })
-                    }
+                    onChange={(checked) => onChange({ showBorrowingHints: checked })}
                     label="Borrowing Hints"
                     description="Show arrows and calculations guiding the borrowing process"
                     isDark={isDark}
@@ -211,7 +201,7 @@ export function ManualModeControls({
                 <ToggleOption
                   checked={formState.showTenFrames ?? false}
                   onChange={(checked) => {
-                    onChange({ showTenFrames: checked });
+                    onChange({ showTenFrames: checked })
                   }}
                   label="Ten-Frames"
                   description="Visualize regrouping with concrete counting tools"
@@ -219,9 +209,7 @@ export function ManualModeControls({
                 >
                   <SubOption
                     checked={formState.showTenFramesForAll ?? false}
-                    onChange={(checked) =>
-                      onChange({ showTenFramesForAll: checked })
-                    }
+                    onChange={(checked) => onChange({ showTenFramesForAll: checked })}
                     label="Show for all problems (not just regrouping)"
                     parentEnabled={formState.showTenFrames ?? false}
                   />
@@ -238,22 +226,22 @@ export function ManualModeControls({
         <div
           data-section="regrouping"
           className={css({
-            bg: "gray.50",
-            border: "1px solid",
-            borderColor: "gray.200",
-            rounded: "xl",
-            p: "3",
-            mt: "3",
+            bg: 'gray.50',
+            border: '1px solid',
+            borderColor: 'gray.200',
+            rounded: 'xl',
+            p: '3',
+            mt: '3',
           })}
         >
-          <div className={stack({ gap: "2.5" })}>
+          <div className={stack({ gap: '2.5' })}>
             <div
               className={css({
-                fontSize: "xs",
-                fontWeight: "semibold",
-                color: "gray.500",
-                textTransform: "uppercase",
-                letterSpacing: "wider",
+                fontSize: 'xs',
+                fontWeight: 'semibold',
+                color: 'gray.500',
+                textTransform: 'uppercase',
+                letterSpacing: 'wider',
               })}
             >
               Regrouping Frequency
@@ -262,29 +250,29 @@ export function ManualModeControls({
             {/* Current values display */}
             <div
               className={css({
-                display: "flex",
-                justifyContent: "space-between",
-                fontSize: "xs",
-                color: "gray.600",
+                display: 'flex',
+                justifyContent: 'space-between',
+                fontSize: 'xs',
+                color: 'gray.600',
               })}
             >
               <div>
-                Both:{" "}
+                Both:{' '}
                 <span
                   className={css({
-                    color: "brand.600",
-                    fontWeight: "semibold",
+                    color: 'brand.600',
+                    fontWeight: 'semibold',
                   })}
                 >
                   {Math.round((formState.pAllStart || 0) * 100)}%
                 </span>
               </div>
               <div>
-                Any:{" "}
+                Any:{' '}
                 <span
                   className={css({
-                    color: "brand.600",
-                    fontWeight: "semibold",
+                    color: 'brand.600',
+                    fontWeight: 'semibold',
                   })}
                 >
                   {Math.round((formState.pAnyStart || 0.25) * 100)}%
@@ -295,23 +283,20 @@ export function ManualModeControls({
             {/* Double-thumbed range slider */}
             <Slider.Root
               className={css({
-                position: "relative",
-                display: "flex",
-                alignItems: "center",
-                userSelect: "none",
-                touchAction: "none",
-                width: "full",
-                height: "6",
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                userSelect: 'none',
+                touchAction: 'none',
+                width: 'full',
+                height: '6',
               })}
-              value={[
-                (formState.pAllStart || 0) * 100,
-                (formState.pAnyStart || 0.25) * 100,
-              ]}
+              value={[(formState.pAllStart || 0) * 100, (formState.pAnyStart || 0.25) * 100]}
               onValueChange={(values) => {
                 onChange({
                   pAllStart: values[0] / 100,
                   pAnyStart: values[1] / 100,
-                });
+                })
               }}
               min={0}
               max={100}
@@ -320,55 +305,55 @@ export function ManualModeControls({
             >
               <Slider.Track
                 className={css({
-                  position: "relative",
+                  position: 'relative',
                   flexGrow: 1,
-                  bg: "gray.200",
-                  rounded: "full",
-                  height: "1.5",
+                  bg: 'gray.200',
+                  rounded: 'full',
+                  height: '1.5',
                 })}
               >
                 <Slider.Range
                   className={css({
-                    position: "absolute",
-                    bg: "brand.500",
-                    rounded: "full",
-                    height: "full",
+                    position: 'absolute',
+                    bg: 'brand.500',
+                    rounded: 'full',
+                    height: 'full',
                   })}
                 />
               </Slider.Track>
               <Slider.Thumb
                 className={css({
-                  display: "block",
-                  width: "3.5",
-                  height: "3.5",
-                  bg: "white",
-                  boxShadow: "0 2px 4px rgba(0,0,0,0.15)",
-                  rounded: "full",
-                  border: "2px solid",
-                  borderColor: "brand.500",
-                  cursor: "pointer",
-                  _hover: { transform: "scale(1.1)" },
+                  display: 'block',
+                  width: '3.5',
+                  height: '3.5',
+                  bg: 'white',
+                  boxShadow: '0 2px 4px rgba(0,0,0,0.15)',
+                  rounded: 'full',
+                  border: '2px solid',
+                  borderColor: 'brand.500',
+                  cursor: 'pointer',
+                  _hover: { transform: 'scale(1.1)' },
                   _focus: {
-                    outline: "none",
-                    boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.3)",
+                    outline: 'none',
+                    boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.3)',
                   },
                 })}
               />
               <Slider.Thumb
                 className={css({
-                  display: "block",
-                  width: "3.5",
-                  height: "3.5",
-                  bg: "white",
-                  boxShadow: "0 2px 4px rgba(0,0,0,0.15)",
-                  rounded: "full",
-                  border: "2px solid",
-                  borderColor: "brand.600",
-                  cursor: "pointer",
-                  _hover: { transform: "scale(1.1)" },
+                  display: 'block',
+                  width: '3.5',
+                  height: '3.5',
+                  bg: 'white',
+                  boxShadow: '0 2px 4px rgba(0,0,0,0.15)',
+                  rounded: 'full',
+                  border: '2px solid',
+                  borderColor: 'brand.600',
+                  cursor: 'pointer',
+                  _hover: { transform: 'scale(1.1)' },
                   _focus: {
-                    outline: "none",
-                    boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.3)",
+                    outline: 'none',
+                    boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.3)',
                   },
                 })}
               />
@@ -376,17 +361,17 @@ export function ManualModeControls({
 
             <div
               className={css({
-                fontSize: "2xs",
-                color: "gray.500",
-                lineHeight: "1.3",
+                fontSize: '2xs',
+                color: 'gray.500',
+                lineHeight: '1.3',
               })}
             >
-              Regrouping difficulty at worksheet start (Both = all columns
-              regroup, Any = at least one column regroups)
+              Regrouping difficulty at worksheet start (Both = all columns regroup, Any = at least
+              one column regroups)
             </div>
           </div>
         </div>
       </>
     </>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/components/config-panel/OperatorSection.tsx b/apps/web/src/app/create/worksheets/addition/components/config-panel/OperatorSection.tsx
index d8b28661..46f33978 100644
--- a/apps/web/src/app/create/worksheets/addition/components/config-panel/OperatorSection.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/config-panel/OperatorSection.tsx
@@ -1,63 +1,59 @@
-import { css } from "../../../../../../../styled-system/css";
+import { css } from '../../../../../../../styled-system/css'
 
 export interface OperatorSectionProps {
-  operator: "addition" | "subtraction" | "mixed" | undefined;
-  onChange: (operator: "addition" | "subtraction" | "mixed") => void;
-  isDark?: boolean;
+  operator: 'addition' | 'subtraction' | 'mixed' | undefined
+  onChange: (operator: 'addition' | 'subtraction' | 'mixed') => void
+  isDark?: boolean
 }
 
-export function OperatorSection({
-  operator,
-  onChange,
-  isDark = false,
-}: OperatorSectionProps) {
+export function OperatorSection({ operator, onChange, isDark = false }: OperatorSectionProps) {
   return (
     <div
       data-section="operator-selection"
       className={css({
-        bg: isDark ? "gray.700" : "gray.50",
-        border: "1px solid",
-        borderColor: isDark ? "gray.600" : "gray.200",
-        rounded: "xl",
-        p: "4",
+        bg: isDark ? 'gray.700' : 'gray.50',
+        border: '1px solid',
+        borderColor: isDark ? 'gray.600' : 'gray.200',
+        rounded: 'xl',
+        p: '4',
       })}
     >
       <label
         className={css({
-          fontSize: "sm",
-          fontWeight: "semibold",
-          color: isDark ? "gray.200" : "gray.700",
-          mb: "2",
-          display: "block",
+          fontSize: 'sm',
+          fontWeight: 'semibold',
+          color: isDark ? 'gray.200' : 'gray.700',
+          mb: '2',
+          display: 'block',
         })}
       >
         Operation Type
       </label>
 
-      <div className={css({ display: "flex", gap: "2", mb: "2" })}>
+      <div className={css({ display: 'flex', gap: '2', mb: '2' })}>
         <button
           type="button"
-          onClick={() => onChange("addition")}
+          onClick={() => onChange('addition')}
           className={css({
             flex: 1,
-            px: "4",
-            py: "2",
-            rounded: "lg",
-            fontSize: "sm",
-            fontWeight: "medium",
-            border: "2px solid",
-            transition: "all 0.2s",
-            ...(operator === "addition" || !operator
+            px: '4',
+            py: '2',
+            rounded: 'lg',
+            fontSize: 'sm',
+            fontWeight: 'medium',
+            border: '2px solid',
+            transition: 'all 0.2s',
+            ...(operator === 'addition' || !operator
               ? {
-                  bg: "brand.600",
-                  borderColor: "brand.600",
-                  color: "white",
+                  bg: 'brand.600',
+                  borderColor: 'brand.600',
+                  color: 'white',
                 }
               : {
-                  bg: isDark ? "gray.600" : "white",
-                  borderColor: isDark ? "gray.500" : "gray.300",
-                  color: isDark ? "gray.200" : "gray.700",
-                  _hover: { borderColor: isDark ? "gray.400" : "gray.400" },
+                  bg: isDark ? 'gray.600' : 'white',
+                  borderColor: isDark ? 'gray.500' : 'gray.300',
+                  color: isDark ? 'gray.200' : 'gray.700',
+                  _hover: { borderColor: isDark ? 'gray.400' : 'gray.400' },
                 }),
           })}
         >
@@ -66,27 +62,27 @@ export function OperatorSection({
 
         <button
           type="button"
-          onClick={() => onChange("subtraction")}
+          onClick={() => onChange('subtraction')}
           className={css({
             flex: 1,
-            px: "4",
-            py: "2",
-            rounded: "lg",
-            fontSize: "sm",
-            fontWeight: "medium",
-            border: "2px solid",
-            transition: "all 0.2s",
-            ...(operator === "subtraction"
+            px: '4',
+            py: '2',
+            rounded: 'lg',
+            fontSize: 'sm',
+            fontWeight: 'medium',
+            border: '2px solid',
+            transition: 'all 0.2s',
+            ...(operator === 'subtraction'
               ? {
-                  bg: "brand.600",
-                  borderColor: "brand.600",
-                  color: "white",
+                  bg: 'brand.600',
+                  borderColor: 'brand.600',
+                  color: 'white',
                 }
               : {
-                  bg: isDark ? "gray.600" : "white",
-                  borderColor: isDark ? "gray.500" : "gray.300",
-                  color: isDark ? "gray.200" : "gray.700",
-                  _hover: { borderColor: isDark ? "gray.400" : "gray.400" },
+                  bg: isDark ? 'gray.600' : 'white',
+                  borderColor: isDark ? 'gray.500' : 'gray.300',
+                  color: isDark ? 'gray.200' : 'gray.700',
+                  _hover: { borderColor: isDark ? 'gray.400' : 'gray.400' },
                 }),
           })}
         >
@@ -95,27 +91,27 @@ export function OperatorSection({
 
         <button
           type="button"
-          onClick={() => onChange("mixed")}
+          onClick={() => onChange('mixed')}
           className={css({
             flex: 1,
-            px: "4",
-            py: "2",
-            rounded: "lg",
-            fontSize: "sm",
-            fontWeight: "medium",
-            border: "2px solid",
-            transition: "all 0.2s",
-            ...(operator === "mixed"
+            px: '4',
+            py: '2',
+            rounded: 'lg',
+            fontSize: 'sm',
+            fontWeight: 'medium',
+            border: '2px solid',
+            transition: 'all 0.2s',
+            ...(operator === 'mixed'
               ? {
-                  bg: "brand.600",
-                  borderColor: "brand.600",
-                  color: "white",
+                  bg: 'brand.600',
+                  borderColor: 'brand.600',
+                  color: 'white',
                 }
               : {
-                  bg: isDark ? "gray.600" : "white",
-                  borderColor: isDark ? "gray.500" : "gray.300",
-                  color: isDark ? "gray.200" : "gray.700",
-                  _hover: { borderColor: isDark ? "gray.400" : "gray.400" },
+                  bg: isDark ? 'gray.600' : 'white',
+                  borderColor: isDark ? 'gray.500' : 'gray.300',
+                  color: isDark ? 'gray.200' : 'gray.700',
+                  _hover: { borderColor: isDark ? 'gray.400' : 'gray.400' },
                 }),
           })}
         >
@@ -123,13 +119,13 @@ export function OperatorSection({
         </button>
       </div>
 
-      <p className={css({ fontSize: "xs", color: "gray.600" })}>
-        {operator === "mixed"
-          ? "Problems will randomly use addition or subtraction"
-          : operator === "subtraction"
-            ? "All problems will be subtraction"
-            : "All problems will be addition"}
+      <p className={css({ fontSize: 'xs', color: 'gray.600' })}>
+        {operator === 'mixed'
+          ? 'Problems will randomly use addition or subtraction'
+          : operator === 'subtraction'
+            ? 'All problems will be subtraction'
+            : 'All problems will be addition'}
       </p>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/components/config-panel/ProgressiveDifficultyToggle.tsx b/apps/web/src/app/create/worksheets/addition/components/config-panel/ProgressiveDifficultyToggle.tsx
index f8d0f657..5d895cfd 100644
--- a/apps/web/src/app/create/worksheets/addition/components/config-panel/ProgressiveDifficultyToggle.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/config-panel/ProgressiveDifficultyToggle.tsx
@@ -1,10 +1,10 @@
-import * as Switch from "@radix-ui/react-switch";
-import { css } from "../../../../../../../styled-system/css";
+import * as Switch from '@radix-ui/react-switch'
+import { css } from '../../../../../../../styled-system/css'
 
 export interface ProgressiveDifficultyToggleProps {
-  interpolate: boolean | undefined;
-  onChange: (interpolate: boolean) => void;
-  isDark?: boolean;
+  interpolate: boolean | undefined
+  onChange: (interpolate: boolean) => void
+  isDark?: boolean
 }
 
 export function ProgressiveDifficultyToggle({
@@ -16,28 +16,28 @@ export function ProgressiveDifficultyToggle({
     <div
       data-section="progressive-difficulty"
       className={css({
-        bg: isDark ? "gray.700" : "gray.50",
-        border: "1px solid",
-        borderColor: isDark ? "gray.600" : "gray.200",
-        rounded: "xl",
-        p: "3",
+        bg: isDark ? 'gray.700' : 'gray.50',
+        border: '1px solid',
+        borderColor: isDark ? 'gray.600' : 'gray.200',
+        rounded: 'xl',
+        p: '3',
       })}
     >
       <div
         className={css({
-          display: "flex",
-          gap: "3",
-          alignItems: "center",
-          justifyContent: "space-between",
+          display: 'flex',
+          gap: '3',
+          alignItems: 'center',
+          justifyContent: 'space-between',
         })}
       >
         <label
           htmlFor="progressive-toggle"
           className={css({
-            fontSize: "sm",
-            fontWeight: "medium",
-            color: isDark ? "gray.200" : "gray.700",
-            cursor: "pointer",
+            fontSize: 'sm',
+            fontWeight: 'medium',
+            color: isDark ? 'gray.200' : 'gray.700',
+            cursor: 'pointer',
           })}
         >
           Progressive difficulty
@@ -47,29 +47,29 @@ export function ProgressiveDifficultyToggle({
           checked={interpolate ?? true}
           onCheckedChange={(checked) => onChange(checked)}
           className={css({
-            width: "11",
-            height: "6",
-            bg: isDark ? "gray.600" : "gray.300",
-            rounded: "full",
-            position: "relative",
-            cursor: "pointer",
+            width: '11',
+            height: '6',
+            bg: isDark ? 'gray.600' : 'gray.300',
+            rounded: 'full',
+            position: 'relative',
+            cursor: 'pointer',
             '&[data-state="checked"]': {
-              bg: "brand.500",
+              bg: 'brand.500',
             },
           })}
         >
           <Switch.Thumb
             className={css({
-              display: "block",
-              width: "5",
-              height: "5",
-              bg: "white",
-              rounded: "full",
-              transition: "transform 0.1s",
-              transform: "translateX(1px)",
-              willChange: "transform",
+              display: 'block',
+              width: '5',
+              height: '5',
+              bg: 'white',
+              rounded: 'full',
+              transition: 'transform 0.1s',
+              transform: 'translateX(1px)',
+              willChange: 'transform',
               '&[data-state="checked"]': {
-                transform: "translateX(23px)",
+                transform: 'translateX(23px)',
               },
             })}
           />
@@ -77,13 +77,13 @@ export function ProgressiveDifficultyToggle({
       </div>
       <div
         className={css({
-          fontSize: "xs",
-          color: isDark ? "gray.400" : "gray.500",
-          mt: "1",
+          fontSize: 'xs',
+          color: isDark ? 'gray.400' : 'gray.500',
+          mt: '1',
         })}
       >
         Start easier and gradually build up throughout the worksheet
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/components/config-panel/SmartModeControls.tsx b/apps/web/src/app/create/worksheets/addition/components/config-panel/SmartModeControls.tsx
index 2f8b3cbc..f499615a 100644
--- a/apps/web/src/app/create/worksheets/addition/components/config-panel/SmartModeControls.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/config-panel/SmartModeControls.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client'
 
-import { useState } from "react";
-import type React from "react";
-import * as Slider from "@radix-ui/react-slider";
-import * as Tooltip from "@radix-ui/react-tooltip";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { css } from "../../../../../../../styled-system/css";
-import { stack } from "../../../../../../../styled-system/patterns";
-import type { WorksheetFormState } from "../../types";
+import { useState } from 'react'
+import type React from 'react'
+import * as Slider from '@radix-ui/react-slider'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { css } from '../../../../../../../styled-system/css'
+import { stack } from '../../../../../../../styled-system/patterns'
+import type { WorksheetFormState } from '../../types'
 import {
   DIFFICULTY_PROFILES,
   DIFFICULTY_PROGRESSION,
@@ -22,37 +22,28 @@ import {
   getProfileFromConfig,
   type DifficultyLevel,
   type DifficultyMode,
-} from "../../difficultyProfiles";
-import type { DisplayRules } from "../../displayRules";
-import { getScaffoldingSummary } from "./utils";
+} from '../../difficultyProfiles'
+import type { DisplayRules } from '../../displayRules'
+import { getScaffoldingSummary } from './utils'
 
 export interface SmartModeControlsProps {
-  formState: WorksheetFormState;
-  onChange: (updates: Partial<WorksheetFormState>) => void;
-  isDark?: boolean;
+  formState: WorksheetFormState
+  onChange: (updates: Partial<WorksheetFormState>) => void
+  isDark?: boolean
 }
 
-export function SmartModeControls({
-  formState,
-  onChange,
-  isDark = false,
-}: SmartModeControlsProps) {
-  const [showDebugPlot, setShowDebugPlot] = useState(false);
-  const [hoverPoint, setHoverPoint] = useState<{ x: number; y: number } | null>(
-    null,
-  );
+export function SmartModeControls({ formState, onChange, isDark = false }: SmartModeControlsProps) {
+  const [showDebugPlot, setShowDebugPlot] = useState(false)
+  const [hoverPoint, setHoverPoint] = useState<{ x: number; y: number } | null>(null)
   const [hoverPreview, setHoverPreview] = useState<{
-    pAnyStart: number;
-    pAllStart: number;
-    displayRules: DisplayRules;
-    matchedProfile: string | "custom";
-  } | null>(null);
+    pAnyStart: number
+    pAllStart: number
+    displayRules: DisplayRules
+    matchedProfile: string | 'custom'
+  } | null>(null)
 
   // Helper function to handle difficulty adjustments
-  const handleDifficultyChange = (
-    mode: DifficultyMode,
-    direction: "harder" | "easier",
-  ) => {
+  const handleDifficultyChange = (mode: DifficultyMode, direction: 'harder' | 'easier') => {
     const currentState = {
       pAnyStart: formState.pAnyStart ?? 0.25,
       pAllStart: formState.pAllStart ?? 0,
@@ -66,43 +57,41 @@ export function SmartModeControls({
           (formState.displayRules as any)?.borrowingHints ??
           DIFFICULTY_PROFILES.earlyLearner.displayRules.borrowingHints,
       },
-    };
+    }
 
     const result =
-      direction === "harder"
+      direction === 'harder'
         ? makeHarder(currentState, mode, formState.operator)
-        : makeEasier(currentState, mode, formState.operator);
+        : makeEasier(currentState, mode, formState.operator)
 
     onChange({
       pAnyStart: result.pAnyStart,
       pAllStart: result.pAllStart,
       displayRules: result.displayRules,
       difficultyProfile:
-        result.difficultyProfile !== "custom"
-          ? result.difficultyProfile
-          : undefined,
-    });
-  };
+        result.difficultyProfile !== 'custom' ? result.difficultyProfile : undefined,
+    })
+  }
 
   return (
     <div
       data-section="difficulty"
       className={css({
-        bg: "gray.50",
-        border: "1px solid",
-        borderColor: "gray.200",
-        rounded: "xl",
-        p: "3",
+        bg: 'gray.50',
+        border: '1px solid',
+        borderColor: 'gray.200',
+        rounded: 'xl',
+        p: '3',
       })}
     >
-      <div className={stack({ gap: "2.5" })}>
+      <div className={stack({ gap: '2.5' })}>
         <div
           className={css({
-            fontSize: "xs",
-            fontWeight: "semibold",
-            color: "gray.500",
-            textTransform: "uppercase",
-            letterSpacing: "wider",
+            fontSize: 'xs',
+            fontWeight: 'semibold',
+            color: 'gray.500',
+            textTransform: 'uppercase',
+            letterSpacing: 'wider',
           })}
         >
           Difficulty Level
@@ -110,115 +99,97 @@ export function SmartModeControls({
 
         {/* Get current profile and state */}
         {(() => {
-          const currentProfile = formState.difficultyProfile as
-            | DifficultyLevel
-            | undefined;
+          const currentProfile = formState.difficultyProfile as DifficultyLevel | undefined
           const profile = currentProfile
             ? DIFFICULTY_PROFILES[currentProfile]
-            : DIFFICULTY_PROFILES.earlyLearner;
+            : DIFFICULTY_PROFILES.earlyLearner
 
           // Use defaults from profile if form state values are undefined
-          const pAnyStart = formState.pAnyStart ?? profile.regrouping.pAnyStart;
-          const pAllStart = formState.pAllStart ?? profile.regrouping.pAllStart;
+          const pAnyStart = formState.pAnyStart ?? profile.regrouping.pAnyStart
+          const pAllStart = formState.pAllStart ?? profile.regrouping.pAllStart
           const displayRules: DisplayRules = {
             ...(formState.displayRules ?? profile.displayRules),
             // Ensure new fields have defaults (backward compatibility with old configs)
-            borrowNotation: (formState.displayRules as any)?.borrowNotation ?? profile.displayRules.borrowNotation,
-            borrowingHints: (formState.displayRules as any)?.borrowingHints ?? profile.displayRules.borrowingHints,
-          };
+            borrowNotation:
+              (formState.displayRules as any)?.borrowNotation ??
+              profile.displayRules.borrowNotation,
+            borrowingHints:
+              (formState.displayRules as any)?.borrowingHints ??
+              profile.displayRules.borrowingHints,
+          }
 
           // Check if current state matches the selected profile
           const matchesProfile =
             pAnyStart === profile.regrouping.pAnyStart &&
             pAllStart === profile.regrouping.pAllStart &&
-            JSON.stringify(displayRules) ===
-              JSON.stringify(profile.displayRules);
-          const isCustom = !matchesProfile;
+            JSON.stringify(displayRules) === JSON.stringify(profile.displayRules)
+          const isCustom = !matchesProfile
 
           // Find nearest presets for custom configurations
-          let nearestEasier: DifficultyLevel | null = null;
-          let nearestHarder: DifficultyLevel | null = null;
-          let customDescription: React.ReactNode = "";
+          let nearestEasier: DifficultyLevel | null = null
+          let nearestHarder: DifficultyLevel | null = null
+          let customDescription: React.ReactNode = ''
 
           if (isCustom) {
-            const currentRegrouping = calculateRegroupingIntensity(
-              pAnyStart,
-              pAllStart,
-            );
-            const currentScaffolding = calculateScaffoldingLevel(
-              displayRules,
-              currentRegrouping,
-            );
+            const currentRegrouping = calculateRegroupingIntensity(pAnyStart, pAllStart)
+            const currentScaffolding = calculateScaffoldingLevel(displayRules, currentRegrouping)
 
             // Calculate distances to all presets
             const distances = DIFFICULTY_PROGRESSION.map((presetName) => {
-              const preset = DIFFICULTY_PROFILES[presetName];
+              const preset = DIFFICULTY_PROFILES[presetName]
               const presetRegrouping = calculateRegroupingIntensity(
                 preset.regrouping.pAnyStart,
-                preset.regrouping.pAllStart,
-              );
+                preset.regrouping.pAllStart
+              )
               const presetScaffolding = calculateScaffoldingLevel(
                 preset.displayRules,
-                presetRegrouping,
-              );
+                presetRegrouping
+              )
               const distance = Math.sqrt(
                 (currentRegrouping - presetRegrouping) ** 2 +
-                  (currentScaffolding - presetScaffolding) ** 2,
-              );
+                  (currentScaffolding - presetScaffolding) ** 2
+              )
               return {
                 presetName,
                 distance,
                 difficulty: calculateOverallDifficulty(
                   preset.regrouping.pAnyStart,
                   preset.regrouping.pAllStart,
-                  preset.displayRules,
+                  preset.displayRules
                 ),
-              };
-            }).sort((a, b) => a.distance - b.distance);
+              }
+            }).sort((a, b) => a.distance - b.distance)
 
             const currentDifficultyValue = calculateOverallDifficulty(
               pAnyStart,
               pAllStart,
-              displayRules,
-            );
+              displayRules
+            )
 
             // Find closest easier and harder presets
-            const easierPresets = distances.filter(
-              (d) => d.difficulty < currentDifficultyValue,
-            );
-            const harderPresets = distances.filter(
-              (d) => d.difficulty > currentDifficultyValue,
-            );
+            const easierPresets = distances.filter((d) => d.difficulty < currentDifficultyValue)
+            const harderPresets = distances.filter((d) => d.difficulty > currentDifficultyValue)
 
             nearestEasier =
-              easierPresets.length > 0
-                ? easierPresets[0].presetName
-                : distances[0].presetName;
+              easierPresets.length > 0 ? easierPresets[0].presetName : distances[0].presetName
             nearestHarder =
               harderPresets.length > 0
                 ? harderPresets[0].presetName
-                : distances[distances.length - 1].presetName;
+                : distances[distances.length - 1].presetName
 
             // Generate custom description
-            const regroupingPercent = Math.round(pAnyStart * 100);
-            const scaffoldingSummary = getScaffoldingSummary(
-              displayRules,
-              formState.operator,
-            );
+            const regroupingPercent = Math.round(pAnyStart * 100)
+            const scaffoldingSummary = getScaffoldingSummary(displayRules, formState.operator)
             customDescription = (
               <>
                 <div>{regroupingPercent}% regrouping</div>
                 {scaffoldingSummary}
               </>
-            );
+            )
           }
 
           // Calculate current difficulty position
-          const currentDifficulty = calculateOverallDifficulty(
-            pAnyStart,
-            pAllStart,
-            displayRules,
-          );
+          const currentDifficulty = calculateOverallDifficulty(pAnyStart, pAllStart, displayRules)
 
           // Calculate make easier/harder results for preview (all modes)
           const easierResultBoth = makeEasier(
@@ -227,9 +198,9 @@ export function SmartModeControls({
               pAllStart,
               displayRules,
             },
-            "both",
-            formState.operator,
-          );
+            'both',
+            formState.operator
+          )
 
           const easierResultChallenge = makeEasier(
             {
@@ -237,9 +208,9 @@ export function SmartModeControls({
               pAllStart,
               displayRules,
             },
-            "challenge",
-            formState.operator,
-          );
+            'challenge',
+            formState.operator
+          )
 
           const easierResultSupport = makeEasier(
             {
@@ -247,9 +218,9 @@ export function SmartModeControls({
               pAllStart,
               displayRules,
             },
-            "support",
-            formState.operator,
-          );
+            'support',
+            formState.operator
+          )
 
           const harderResultBoth = makeHarder(
             {
@@ -257,9 +228,9 @@ export function SmartModeControls({
               pAllStart,
               displayRules,
             },
-            "both",
-            formState.operator,
-          );
+            'both',
+            formState.operator
+          )
 
           const harderResultChallenge = makeHarder(
             {
@@ -267,9 +238,9 @@ export function SmartModeControls({
               pAllStart,
               displayRules,
             },
-            "challenge",
-            formState.operator,
-          );
+            'challenge',
+            formState.operator
+          )
 
           const harderResultSupport = makeHarder(
             {
@@ -277,43 +248,37 @@ export function SmartModeControls({
               pAllStart,
               displayRules,
             },
-            "support",
-            formState.operator,
-          );
+            'support',
+            formState.operator
+          )
 
           const canMakeEasierBoth =
-            easierResultBoth.changeDescription !==
-            "Already at minimum difficulty";
+            easierResultBoth.changeDescription !== 'Already at minimum difficulty'
           const canMakeEasierChallenge =
-            easierResultChallenge.changeDescription !==
-            "Already at minimum difficulty";
+            easierResultChallenge.changeDescription !== 'Already at minimum difficulty'
           const canMakeEasierSupport =
-            easierResultSupport.changeDescription !==
-            "Already at minimum difficulty";
+            easierResultSupport.changeDescription !== 'Already at minimum difficulty'
           const canMakeHarderBoth =
-            harderResultBoth.changeDescription !==
-            "Already at maximum difficulty";
+            harderResultBoth.changeDescription !== 'Already at maximum difficulty'
           const canMakeHarderChallenge =
-            harderResultChallenge.changeDescription !==
-            "Already at maximum difficulty";
+            harderResultChallenge.changeDescription !== 'Already at maximum difficulty'
           const canMakeHarderSupport =
-            harderResultSupport.changeDescription !==
-            "Already at maximum difficulty";
+            harderResultSupport.changeDescription !== 'Already at maximum difficulty'
 
           // Keep legacy names for compatibility
-          const canMakeEasier = canMakeEasierBoth;
-          const canMakeHarder = canMakeHarderBoth;
+          const canMakeEasier = canMakeEasierBoth
+          const canMakeHarder = canMakeHarderBoth
 
           return (
             <>
               {/* Preset Selector Dropdown */}
-              <div className={css({ mb: "3" })}>
+              <div className={css({ mb: '3' })}>
                 <div
                   className={css({
-                    fontSize: "xs",
-                    fontWeight: "medium",
-                    color: "gray.700",
-                    mb: "2",
+                    fontSize: 'xs',
+                    fontWeight: 'medium',
+                    color: 'gray.700',
+                    mb: '2',
                   })}
                 >
                   Difficulty Preset
@@ -324,54 +289,50 @@ export function SmartModeControls({
                       type="button"
                       data-action="open-preset-dropdown"
                       className={css({
-                        w: "full",
-                        h: "24",
-                        px: "3",
-                        py: "2.5",
-                        border: "2px solid",
-                        borderColor: isCustom ? "orange.400" : "gray.300",
-                        bg: isCustom ? "orange.50" : "white",
-                        rounded: "lg",
-                        cursor: "pointer",
-                        transition: "all 0.15s",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        textAlign: "left",
-                        gap: "2",
+                        w: 'full',
+                        h: '24',
+                        px: '3',
+                        py: '2.5',
+                        border: '2px solid',
+                        borderColor: isCustom ? 'orange.400' : 'gray.300',
+                        bg: isCustom ? 'orange.50' : 'white',
+                        rounded: 'lg',
+                        cursor: 'pointer',
+                        transition: 'all 0.15s',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        textAlign: 'left',
+                        gap: '2',
                         _hover: {
-                          borderColor: isCustom ? "orange.500" : "brand.400",
+                          borderColor: isCustom ? 'orange.500' : 'brand.400',
                         },
                       })}
                     >
                       <div
                         className={css({
                           flex: 1,
-                          display: "flex",
-                          flexDirection: "column",
-                          gap: "1",
+                          display: 'flex',
+                          flexDirection: 'column',
+                          gap: '1',
                         })}
                       >
                         <div
                           className={css({
-                            fontSize: "sm",
-                            fontWeight: "semibold",
-                            color: hoverPreview ? "orange.700" : "gray.700",
+                            fontSize: 'sm',
+                            fontWeight: 'semibold',
+                            color: hoverPreview ? 'orange.700' : 'gray.700',
                           })}
                         >
                           {hoverPreview ? (
                             <>
-                              {hoverPreview.matchedProfile !== "custom" ? (
+                              {hoverPreview.matchedProfile !== 'custom' ? (
                                 <>
-                                  {
-                                    DIFFICULTY_PROFILES[
-                                      hoverPreview.matchedProfile
-                                    ].label
-                                  }{" "}
+                                  {DIFFICULTY_PROFILES[hoverPreview.matchedProfile].label}{' '}
                                   <span
                                     className={css({
-                                      fontSize: "xs",
-                                      color: "orange.500",
+                                      fontSize: 'xs',
+                                      color: 'orange.500',
                                     })}
                                   >
                                     (hover preview)
@@ -379,11 +340,11 @@ export function SmartModeControls({
                                 </>
                               ) : (
                                 <>
-                                  ✨ Custom{" "}
+                                  ✨ Custom{' '}
                                   <span
                                     className={css({
-                                      fontSize: "xs",
-                                      color: "orange.500",
+                                      fontSize: 'xs',
+                                      color: 'orange.500',
                                     })}
                                   >
                                     (hover preview)
@@ -395,76 +356,72 @@ export function SmartModeControls({
                             nearestEasier && nearestHarder ? (
                               <>
                                 {DIFFICULTY_PROFILES[nearestEasier].label}
-                                {" ↔ "}
+                                {' ↔ '}
                                 {DIFFICULTY_PROFILES[nearestHarder].label}
                               </>
                             ) : (
-                              "✨ Custom"
+                              '✨ Custom'
                             )
                           ) : currentProfile ? (
                             DIFFICULTY_PROFILES[currentProfile].label
                           ) : (
-                            "Early Learner"
+                            'Early Learner'
                           )}
                         </div>
                         <div
                           className={css({
-                            fontSize: "xs",
+                            fontSize: 'xs',
                             color: hoverPreview
-                              ? "orange.600"
+                              ? 'orange.600'
                               : isCustom
-                                ? "orange.600"
-                                : "gray.500",
-                            lineHeight: "1.3",
-                            h: "14",
-                            display: "flex",
-                            flexDirection: "column",
-                            gap: "0.5",
-                            overflow: "hidden",
+                                ? 'orange.600'
+                                : 'gray.500',
+                            lineHeight: '1.3',
+                            h: '14',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '0.5',
+                            overflow: 'hidden',
                           })}
                         >
                           {hoverPreview ? (
                             (() => {
-                              const regroupingPercent = Math.round(
-                                hoverPreview.pAnyStart * 100,
-                              );
+                              const regroupingPercent = Math.round(hoverPreview.pAnyStart * 100)
                               const scaffoldingSummary = getScaffoldingSummary(
                                 hoverPreview.displayRules,
-                                formState.operator,
-                              );
+                                formState.operator
+                              )
                               return (
                                 <>
                                   <div>{regroupingPercent}% regrouping</div>
                                   {scaffoldingSummary}
                                 </>
-                              );
+                              )
                             })()
                           ) : isCustom ? (
                             customDescription
                           ) : currentProfile ? (
                             (() => {
-                              const preset =
-                                DIFFICULTY_PROFILES[currentProfile];
+                              const preset = DIFFICULTY_PROFILES[currentProfile]
                               const regroupingPercent = Math.round(
-                                preset.regrouping.pAnyStart * 100,
-                              );
+                                preset.regrouping.pAnyStart * 100
+                              )
                               const scaffoldingSummary = getScaffoldingSummary(
                                 preset.displayRules,
-                                formState.operator,
-                              );
+                                formState.operator
+                              )
                               return (
                                 <>
                                   <div>{regroupingPercent}% regrouping</div>
                                   {scaffoldingSummary}
                                 </>
-                              );
+                              )
                             })()
                           ) : (
                             <>
                               <div>25% regrouping</div>
                               <div>
-                                Always: carry boxes, answer boxes, place value
-                                colors, ten-frames
+                                Always: carry boxes, answer boxes, place value colors, ten-frames
                               </div>
                             </>
                           )}
@@ -472,8 +429,8 @@ export function SmartModeControls({
                       </div>
                       <span
                         className={css({
-                          fontSize: "xs",
-                          color: "gray.400",
+                          fontSize: 'xs',
+                          color: 'gray.400',
                           flexShrink: 0,
                         })}
                       >
@@ -485,41 +442,40 @@ export function SmartModeControls({
                   <DropdownMenu.Portal>
                     <DropdownMenu.Content
                       className={css({
-                        bg: "white",
-                        rounded: "lg",
-                        shadow: "modal",
-                        border: "1px solid",
-                        borderColor: "gray.200",
-                        p: "2",
-                        minW: "64",
-                        maxH: "96",
-                        overflowY: "auto",
+                        bg: 'white',
+                        rounded: 'lg',
+                        shadow: 'modal',
+                        border: '1px solid',
+                        borderColor: 'gray.200',
+                        p: '2',
+                        minW: '64',
+                        maxH: '96',
+                        overflowY: 'auto',
                         zIndex: 50,
                       })}
                       sideOffset={5}
                     >
                       {DIFFICULTY_PROGRESSION.map((presetName) => {
-                        const preset = DIFFICULTY_PROFILES[presetName];
-                        const isSelected =
-                          currentProfile === presetName && !isCustom;
+                        const preset = DIFFICULTY_PROFILES[presetName]
+                        const isSelected = currentProfile === presetName && !isCustom
 
                         // Generate preset description
                         const regroupingPercent = Math.round(
                           calculateRegroupingIntensity(
                             preset.regrouping.pAnyStart,
-                            preset.regrouping.pAllStart,
-                          ) * 10,
-                        );
+                            preset.regrouping.pAllStart
+                          ) * 10
+                        )
                         const scaffoldingSummary = getScaffoldingSummary(
                           preset.displayRules,
-                          formState.operator,
-                        );
+                          formState.operator
+                        )
                         const presetDescription = (
                           <>
                             <div>{regroupingPercent}% regrouping</div>
                             {scaffoldingSummary}
                           </>
-                        );
+                        )
 
                         return (
                           <DropdownMenu.Item
@@ -532,46 +488,46 @@ export function SmartModeControls({
                                 pAnyStart: preset.regrouping.pAnyStart,
                                 pAllStart: preset.regrouping.pAllStart,
                                 displayRules: preset.displayRules,
-                              });
+                              })
                             }}
                             className={css({
-                              display: "flex",
-                              flexDirection: "column",
-                              gap: "1",
-                              px: "3",
-                              py: "2.5",
-                              rounded: "md",
-                              cursor: "pointer",
-                              outline: "none",
-                              bg: isSelected ? "brand.50" : "transparent",
+                              display: 'flex',
+                              flexDirection: 'column',
+                              gap: '1',
+                              px: '3',
+                              py: '2.5',
+                              rounded: 'md',
+                              cursor: 'pointer',
+                              outline: 'none',
+                              bg: isSelected ? 'brand.50' : 'transparent',
                               _hover: {
-                                bg: "brand.50",
+                                bg: 'brand.50',
                               },
                               _focus: {
-                                bg: "brand.100",
+                                bg: 'brand.100',
                               },
                             })}
                           >
                             <div
                               className={css({
-                                fontSize: "sm",
-                                fontWeight: "semibold",
-                                color: isSelected ? "brand.700" : "gray.700",
+                                fontSize: 'sm',
+                                fontWeight: 'semibold',
+                                color: isSelected ? 'brand.700' : 'gray.700',
                               })}
                             >
                               {preset.label}
                             </div>
                             <div
                               className={css({
-                                fontSize: "xs",
-                                color: isSelected ? "brand.600" : "gray.500",
-                                lineHeight: "1.3",
+                                fontSize: 'xs',
+                                color: isSelected ? 'brand.600' : 'gray.500',
+                                lineHeight: '1.3',
                               })}
                             >
                               {presetDescription}
                             </div>
                           </DropdownMenu.Item>
-                        );
+                        )
                       })}
                     </DropdownMenu.Content>
                   </DropdownMenu.Portal>
@@ -581,71 +537,66 @@ export function SmartModeControls({
               {/* Make Easier/Harder buttons with preview */}
               <div
                 className={css({
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "2",
-                  pt: "1",
-                  borderTop: "1px solid",
-                  borderColor: "gray.200",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '2',
+                  pt: '1',
+                  borderTop: '1px solid',
+                  borderColor: 'gray.200',
                 })}
               >
                 {/* Four-Button Layout: [Alt-35%][Rec-65%][Rec-65%][Alt-35%] */}
                 <Tooltip.Provider delayDuration={300}>
-                  <div className={css({ display: "flex", gap: "2" })}>
+                  <div className={css({ display: 'flex', gap: '2' })}>
                     {/* Determine which mode is alternative for easier */}
                     {(() => {
                       const easierAlternativeMode =
                         easierResultBoth.changeDescription ===
                         easierResultChallenge.changeDescription
-                          ? "support"
-                          : "challenge";
+                          ? 'support'
+                          : 'challenge'
                       const easierAlternativeResult =
-                        easierAlternativeMode === "support"
+                        easierAlternativeMode === 'support'
                           ? easierResultSupport
-                          : easierResultChallenge;
+                          : easierResultChallenge
                       const easierAlternativeLabel =
-                        easierAlternativeMode === "support"
-                          ? "↑ More support"
-                          : "← Less challenge";
+                        easierAlternativeMode === 'support' ? '↑ More support' : '← Less challenge'
                       const canEasierAlternative =
-                        easierAlternativeMode === "support"
+                        easierAlternativeMode === 'support'
                           ? canMakeEasierSupport
-                          : canMakeEasierChallenge;
+                          : canMakeEasierChallenge
 
                       return (
-                        <div className={css({ display: "flex", flex: "1" })}>
+                        <div className={css({ display: 'flex', flex: '1' })}>
                           {/* Alternative Easier Button - Hidden if disabled and main is enabled */}
                           {canEasierAlternative && (
                             <Tooltip.Root>
                               <Tooltip.Trigger asChild>
                                 <button
                                   onClick={() =>
-                                    handleDifficultyChange(
-                                      easierAlternativeMode,
-                                      "easier",
-                                    )
+                                    handleDifficultyChange(easierAlternativeMode, 'easier')
                                   }
                                   disabled={!canEasierAlternative}
                                   data-action={`easier-${easierAlternativeMode}`}
                                   className={css({
                                     flexShrink: 0,
-                                    width: "10",
-                                    h: "16",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    fontSize: "2xs",
-                                    fontWeight: "medium",
-                                    color: "gray.700",
-                                    bg: "gray.100",
-                                    border: "1.5px solid",
-                                    borderColor: "gray.300",
-                                    borderRight: "none",
-                                    borderTopLeftRadius: "lg",
-                                    borderBottomLeftRadius: "lg",
-                                    cursor: "pointer",
+                                    width: '10',
+                                    h: '16',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    fontSize: '2xs',
+                                    fontWeight: 'medium',
+                                    color: 'gray.700',
+                                    bg: 'gray.100',
+                                    border: '1.5px solid',
+                                    borderColor: 'gray.300',
+                                    borderRight: 'none',
+                                    borderTopLeftRadius: 'lg',
+                                    borderBottomLeftRadius: 'lg',
+                                    cursor: 'pointer',
                                     _hover: {
-                                      bg: "gray.200",
+                                      bg: 'gray.200',
                                     },
                                   })}
                                 >
@@ -656,21 +607,19 @@ export function SmartModeControls({
                                 <Tooltip.Content
                                   side="top"
                                   className={css({
-                                    bg: "gray.800",
-                                    color: "white",
-                                    px: "3",
-                                    py: "2",
-                                    rounded: "md",
-                                    fontSize: "xs",
-                                    maxW: "250px",
-                                    shadow: "lg",
+                                    bg: 'gray.800',
+                                    color: 'white',
+                                    px: '3',
+                                    py: '2',
+                                    rounded: 'md',
+                                    fontSize: 'xs',
+                                    maxW: '250px',
+                                    shadow: 'lg',
                                     zIndex: 1000,
                                   })}
                                 >
                                   {easierAlternativeResult.changeDescription}
-                                  <Tooltip.Arrow
-                                    className={css({ fill: "gray.800" })}
-                                  />
+                                  <Tooltip.Arrow className={css({ fill: 'gray.800' })} />
                                 </Tooltip.Content>
                               </Tooltip.Portal>
                             </Tooltip.Root>
@@ -678,47 +627,39 @@ export function SmartModeControls({
 
                           {/* Recommended Easier Button - Expands to full width if alternative is hidden */}
                           <button
-                            onClick={() =>
-                              handleDifficultyChange("both", "easier")
-                            }
+                            onClick={() => handleDifficultyChange('both', 'easier')}
                             disabled={!canMakeEasier}
                             data-action="easier-both"
                             className={css({
-                              flex: "1",
-                              h: "16",
-                              px: "3",
-                              py: "2",
-                              display: "flex",
-                              flexDirection: "column",
-                              alignItems: "flex-start",
-                              gap: "0.5",
-                              color: canMakeEasier ? "brand.700" : "gray.400",
-                              bg: "white",
-                              border: "1.5px solid",
-                              borderColor: canMakeEasier
-                                ? "brand.500"
-                                : "gray.300",
-                              borderTopLeftRadius: canEasierAlternative
-                                ? "none"
-                                : "lg",
-                              borderBottomLeftRadius: canEasierAlternative
-                                ? "none"
-                                : "lg",
-                              borderTopRightRadius: "lg",
-                              borderBottomRightRadius: "lg",
-                              cursor: canMakeEasier ? "pointer" : "not-allowed",
+                              flex: '1',
+                              h: '16',
+                              px: '3',
+                              py: '2',
+                              display: 'flex',
+                              flexDirection: 'column',
+                              alignItems: 'flex-start',
+                              gap: '0.5',
+                              color: canMakeEasier ? 'brand.700' : 'gray.400',
+                              bg: 'white',
+                              border: '1.5px solid',
+                              borderColor: canMakeEasier ? 'brand.500' : 'gray.300',
+                              borderTopLeftRadius: canEasierAlternative ? 'none' : 'lg',
+                              borderBottomLeftRadius: canEasierAlternative ? 'none' : 'lg',
+                              borderTopRightRadius: 'lg',
+                              borderBottomRightRadius: 'lg',
+                              cursor: canMakeEasier ? 'pointer' : 'not-allowed',
                               opacity: canMakeEasier ? 1 : 0.5,
                               _hover: canMakeEasier
                                 ? {
-                                    bg: "brand.50",
+                                    bg: 'brand.50',
                                   }
                                 : {},
                             })}
                           >
                             <div
                               className={css({
-                                fontSize: "xs",
-                                fontWeight: "semibold",
+                                fontSize: 'xs',
+                                fontWeight: 'semibold',
                                 flexShrink: 0,
                               })}
                             >
@@ -727,17 +668,17 @@ export function SmartModeControls({
                             {canMakeEasier && (
                               <div
                                 className={css({
-                                  fontSize: "2xs",
-                                  fontWeight: "normal",
-                                  lineHeight: "1.3",
-                                  textAlign: "left",
-                                  overflow: "hidden",
-                                  display: "-webkit-box",
+                                  fontSize: '2xs',
+                                  fontWeight: 'normal',
+                                  lineHeight: '1.3',
+                                  textAlign: 'left',
+                                  overflow: 'hidden',
+                                  display: '-webkit-box',
                                   WebkitLineClamp: 2,
                                 })}
                                 style={
                                   {
-                                    WebkitBoxOrient: "vertical",
+                                    WebkitBoxOrient: 'vertical',
                                   } as React.CSSProperties
                                 }
                               >
@@ -746,7 +687,7 @@ export function SmartModeControls({
                             )}
                           </button>
                         </div>
-                      );
+                      )
                     })()}
 
                     {/* Determine which mode is alternative for harder */}
@@ -754,66 +695,56 @@ export function SmartModeControls({
                       const harderAlternativeMode =
                         harderResultBoth.changeDescription ===
                         harderResultChallenge.changeDescription
-                          ? "support"
-                          : "challenge";
+                          ? 'support'
+                          : 'challenge'
                       const harderAlternativeResult =
-                        harderAlternativeMode === "support"
+                        harderAlternativeMode === 'support'
                           ? harderResultSupport
-                          : harderResultChallenge;
+                          : harderResultChallenge
                       const harderAlternativeLabel =
-                        harderAlternativeMode === "support"
-                          ? "↓ Less support"
-                          : "→ More challenge";
+                        harderAlternativeMode === 'support' ? '↓ Less support' : '→ More challenge'
                       const canHarderAlternative =
-                        harderAlternativeMode === "support"
+                        harderAlternativeMode === 'support'
                           ? canMakeHarderSupport
-                          : canMakeHarderChallenge;
+                          : canMakeHarderChallenge
 
                       return (
-                        <div className={css({ display: "flex", flex: "1" })}>
+                        <div className={css({ display: 'flex', flex: '1' })}>
                           {/* Recommended Harder Button - Expands to full width if alternative is hidden */}
                           <button
-                            onClick={() =>
-                              handleDifficultyChange("both", "harder")
-                            }
+                            onClick={() => handleDifficultyChange('both', 'harder')}
                             disabled={!canMakeHarder}
                             data-action="harder-both"
                             className={css({
-                              flex: "1",
-                              h: "16",
-                              px: "3",
-                              py: "2",
-                              display: "flex",
-                              flexDirection: "column",
-                              alignItems: "flex-start",
-                              gap: "0.5",
-                              color: canMakeHarder ? "brand.700" : "gray.400",
-                              bg: "white",
-                              border: "1.5px solid",
-                              borderColor: canMakeHarder
-                                ? "brand.500"
-                                : "gray.300",
-                              borderTopLeftRadius: "lg",
-                              borderBottomLeftRadius: "lg",
-                              borderTopRightRadius: canHarderAlternative
-                                ? "none"
-                                : "lg",
-                              borderBottomRightRadius: canHarderAlternative
-                                ? "none"
-                                : "lg",
-                              cursor: canMakeHarder ? "pointer" : "not-allowed",
+                              flex: '1',
+                              h: '16',
+                              px: '3',
+                              py: '2',
+                              display: 'flex',
+                              flexDirection: 'column',
+                              alignItems: 'flex-start',
+                              gap: '0.5',
+                              color: canMakeHarder ? 'brand.700' : 'gray.400',
+                              bg: 'white',
+                              border: '1.5px solid',
+                              borderColor: canMakeHarder ? 'brand.500' : 'gray.300',
+                              borderTopLeftRadius: 'lg',
+                              borderBottomLeftRadius: 'lg',
+                              borderTopRightRadius: canHarderAlternative ? 'none' : 'lg',
+                              borderBottomRightRadius: canHarderAlternative ? 'none' : 'lg',
+                              cursor: canMakeHarder ? 'pointer' : 'not-allowed',
                               opacity: canMakeHarder ? 1 : 0.5,
                               _hover: canMakeHarder
                                 ? {
-                                    bg: "brand.50",
+                                    bg: 'brand.50',
                                   }
                                 : {},
                             })}
                           >
                             <div
                               className={css({
-                                fontSize: "xs",
-                                fontWeight: "semibold",
+                                fontSize: 'xs',
+                                fontWeight: 'semibold',
                                 flexShrink: 0,
                               })}
                             >
@@ -822,17 +753,17 @@ export function SmartModeControls({
                             {canMakeHarder && (
                               <div
                                 className={css({
-                                  fontSize: "2xs",
-                                  fontWeight: "normal",
-                                  lineHeight: "1.3",
-                                  textAlign: "left",
-                                  overflow: "hidden",
-                                  display: "-webkit-box",
+                                  fontSize: '2xs',
+                                  fontWeight: 'normal',
+                                  lineHeight: '1.3',
+                                  textAlign: 'left',
+                                  overflow: 'hidden',
+                                  display: '-webkit-box',
                                   WebkitLineClamp: 2,
                                 })}
                                 style={
                                   {
-                                    WebkitBoxOrient: "vertical",
+                                    WebkitBoxOrient: 'vertical',
                                   } as React.CSSProperties
                                 }
                               >
@@ -847,32 +778,29 @@ export function SmartModeControls({
                               <Tooltip.Trigger asChild>
                                 <button
                                   onClick={() =>
-                                    handleDifficultyChange(
-                                      harderAlternativeMode,
-                                      "harder",
-                                    )
+                                    handleDifficultyChange(harderAlternativeMode, 'harder')
                                   }
                                   disabled={!canHarderAlternative}
                                   data-action={`harder-${harderAlternativeMode}`}
                                   className={css({
                                     flexShrink: 0,
-                                    width: "10",
-                                    h: "16",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    fontSize: "2xs",
-                                    fontWeight: "medium",
-                                    color: "gray.700",
-                                    bg: "gray.100",
-                                    border: "1.5px solid",
-                                    borderColor: "gray.300",
-                                    borderLeft: "none",
-                                    borderTopRightRadius: "lg",
-                                    borderBottomRightRadius: "lg",
-                                    cursor: "pointer",
+                                    width: '10',
+                                    h: '16',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    fontSize: '2xs',
+                                    fontWeight: 'medium',
+                                    color: 'gray.700',
+                                    bg: 'gray.100',
+                                    border: '1.5px solid',
+                                    borderColor: 'gray.300',
+                                    borderLeft: 'none',
+                                    borderTopRightRadius: 'lg',
+                                    borderBottomRightRadius: 'lg',
+                                    cursor: 'pointer',
                                     _hover: {
-                                      bg: "gray.200",
+                                      bg: 'gray.200',
                                     },
                                   })}
                                 >
@@ -884,88 +812,84 @@ export function SmartModeControls({
                                   <Tooltip.Content
                                     side="top"
                                     className={css({
-                                      bg: "gray.800",
-                                      color: "white",
-                                      px: "3",
-                                      py: "2",
-                                      rounded: "md",
-                                      fontSize: "xs",
-                                      maxW: "250px",
-                                      shadow: "lg",
+                                      bg: 'gray.800',
+                                      color: 'white',
+                                      px: '3',
+                                      py: '2',
+                                      rounded: 'md',
+                                      fontSize: 'xs',
+                                      maxW: '250px',
+                                      shadow: 'lg',
                                       zIndex: 1000,
                                     })}
                                   >
                                     {harderAlternativeResult.changeDescription}
-                                    <Tooltip.Arrow
-                                      className={css({ fill: "gray.800" })}
-                                    />
+                                    <Tooltip.Arrow className={css({ fill: 'gray.800' })} />
                                   </Tooltip.Content>
                                 </Tooltip.Portal>
                               )}
                             </Tooltip.Root>
                           )}
                         </div>
-                      );
+                      )
                     })()}
                   </div>
                 </Tooltip.Provider>
               </div>
 
               {/* Overall Difficulty Slider */}
-              <div className={css({ mb: "2" })}>
+              <div className={css({ mb: '2' })}>
                 <div
                   className={css({
-                    fontSize: "xs",
-                    fontWeight: "medium",
-                    color: "gray.700",
-                    mb: "1.5",
+                    fontSize: 'xs',
+                    fontWeight: 'medium',
+                    color: 'gray.700',
+                    mb: '1.5',
                   })}
                 >
                   Overall Difficulty: {currentDifficulty.toFixed(1)} / 10
                 </div>
 
                 {/* Difficulty Slider */}
-                <div className={css({ position: "relative", px: "2" })}>
+                <div className={css({ position: 'relative', px: '2' })}>
                   <Slider.Root
                     value={[currentDifficulty * 10]}
                     max={100}
                     step={1}
                     onValueChange={(value) => {
-                      const targetDifficulty = value[0] / 10;
+                      const targetDifficulty = value[0] / 10
 
                       // Calculate preset positions in 2D space
-                      const presetPoints = DIFFICULTY_PROGRESSION.map(
-                        (presetName) => {
-                          const preset = DIFFICULTY_PROFILES[presetName];
-                          const regrouping = calculateRegroupingIntensity(
-                            preset.regrouping.pAnyStart,
-                            preset.regrouping.pAllStart,
-                          );
-                          const scaffolding = calculateScaffoldingLevel(
-                            preset.displayRules,
-                            regrouping,
-                          );
-                          const difficulty = calculateOverallDifficulty(
-                            preset.regrouping.pAnyStart,
-                            preset.regrouping.pAllStart,
-                            preset.displayRules,
-                          );
-                          return {
-                            regrouping,
-                            scaffolding,
-                            difficulty,
-                            name: presetName,
-                          };
-                        },
-                      );
+                      const presetPoints = DIFFICULTY_PROGRESSION.map((presetName) => {
+                        const preset = DIFFICULTY_PROFILES[presetName]
+                        const regrouping = calculateRegroupingIntensity(
+                          preset.regrouping.pAnyStart,
+                          preset.regrouping.pAllStart
+                        )
+                        const scaffolding = calculateScaffoldingLevel(
+                          preset.displayRules,
+                          regrouping
+                        )
+                        const difficulty = calculateOverallDifficulty(
+                          preset.regrouping.pAnyStart,
+                          preset.regrouping.pAllStart,
+                          preset.displayRules
+                        )
+                        return {
+                          regrouping,
+                          scaffolding,
+                          difficulty,
+                          name: presetName,
+                        }
+                      })
 
                       // Find which path segment we're on and interpolate
-                      let idealRegrouping = 0;
-                      let idealScaffolding = 10;
+                      let idealRegrouping = 0
+                      let idealScaffolding = 10
 
                       for (let i = 0; i < presetPoints.length - 1; i++) {
-                        const start = presetPoints[i];
-                        const end = presetPoints[i + 1];
+                        const start = presetPoints[i]
+                        const end = presetPoints[i + 1]
 
                         if (
                           targetDifficulty >= start.difficulty &&
@@ -974,210 +898,192 @@ export function SmartModeControls({
                           // Interpolate between start and end
                           const t =
                             (targetDifficulty - start.difficulty) /
-                            (end.difficulty - start.difficulty);
+                            (end.difficulty - start.difficulty)
                           idealRegrouping =
-                            start.regrouping +
-                            t * (end.regrouping - start.regrouping);
+                            start.regrouping + t * (end.regrouping - start.regrouping)
                           idealScaffolding =
-                            start.scaffolding +
-                            t * (end.scaffolding - start.scaffolding);
+                            start.scaffolding + t * (end.scaffolding - start.scaffolding)
                           console.log(
-                            "[Slider] Interpolating between",
+                            '[Slider] Interpolating between',
                             start.name,
-                            "and",
+                            'and',
                             end.name,
                             {
                               t,
                               idealRegrouping,
                               idealScaffolding,
-                            },
-                          );
-                          break;
+                            }
+                          )
+                          break
                         }
                       }
 
                       // Handle edge cases (before first or after last preset)
                       if (targetDifficulty < presetPoints[0].difficulty) {
-                        idealRegrouping = presetPoints[0].regrouping;
-                        idealScaffolding = presetPoints[0].scaffolding;
+                        idealRegrouping = presetPoints[0].regrouping
+                        idealScaffolding = presetPoints[0].scaffolding
                       } else if (
-                        targetDifficulty >
-                        presetPoints[presetPoints.length - 1].difficulty
+                        targetDifficulty > presetPoints[presetPoints.length - 1].difficulty
                       ) {
-                        idealRegrouping =
-                          presetPoints[presetPoints.length - 1].regrouping;
-                        idealScaffolding =
-                          presetPoints[presetPoints.length - 1].scaffolding;
+                        idealRegrouping = presetPoints[presetPoints.length - 1].regrouping
+                        idealScaffolding = presetPoints[presetPoints.length - 1].scaffolding
                       }
 
                       // Find valid configuration closest to ideal point on path
                       let closestConfig: {
-                        pAnyStart: number;
-                        pAllStart: number;
-                        displayRules: any;
-                        distance: number;
-                      } | null = null;
+                        pAnyStart: number
+                        pAllStart: number
+                        displayRules: any
+                        distance: number
+                      } | null = null
 
-                      for (
-                        let regIdx = 0;
-                        regIdx < REGROUPING_PROGRESSION.length;
-                        regIdx++
-                      ) {
+                      for (let regIdx = 0; regIdx < REGROUPING_PROGRESSION.length; regIdx++) {
                         for (
                           let scaffIdx = 0;
                           scaffIdx < SCAFFOLDING_PROGRESSION.length;
                           scaffIdx++
                         ) {
-                          const validState = findNearestValidState(
-                            regIdx,
-                            scaffIdx,
-                          );
+                          const validState = findNearestValidState(regIdx, scaffIdx)
                           if (
                             validState.regroupingIdx !== regIdx ||
                             validState.scaffoldingIdx !== scaffIdx
                           ) {
-                            continue;
+                            continue
                           }
 
-                          const regrouping = REGROUPING_PROGRESSION[regIdx];
-                          const displayRules =
-                            SCAFFOLDING_PROGRESSION[scaffIdx];
+                          const regrouping = REGROUPING_PROGRESSION[regIdx]
+                          const displayRules = SCAFFOLDING_PROGRESSION[scaffIdx]
 
                           const actualRegrouping = calculateRegroupingIntensity(
                             regrouping.pAnyStart,
-                            regrouping.pAllStart,
-                          );
+                            regrouping.pAllStart
+                          )
                           const actualScaffolding = calculateScaffoldingLevel(
                             displayRules,
-                            actualRegrouping,
-                          );
+                            actualRegrouping
+                          )
 
                           // Euclidean distance to ideal point on pedagogical path
                           const distance = Math.sqrt(
                             (actualRegrouping - idealRegrouping) ** 2 +
-                              (actualScaffolding - idealScaffolding) ** 2,
-                          );
+                              (actualScaffolding - idealScaffolding) ** 2
+                          )
 
-                          if (
-                            closestConfig === null ||
-                            distance < closestConfig.distance
-                          ) {
+                          if (closestConfig === null || distance < closestConfig.distance) {
                             closestConfig = {
                               pAnyStart: regrouping.pAnyStart,
                               pAllStart: regrouping.pAllStart,
                               displayRules,
                               distance,
-                            };
+                            }
                           }
                         }
                       }
 
                       if (closestConfig) {
-                        console.log("[Slider] Closest config:", {
+                        console.log('[Slider] Closest config:', {
                           ...closestConfig,
                           regrouping: calculateRegroupingIntensity(
                             closestConfig.pAnyStart,
-                            closestConfig.pAllStart,
+                            closestConfig.pAllStart
                           ),
                           scaffolding: calculateScaffoldingLevel(
                             closestConfig.displayRules,
                             calculateRegroupingIntensity(
                               closestConfig.pAnyStart,
-                              closestConfig.pAllStart,
-                            ),
+                              closestConfig.pAllStart
+                            )
                           ),
-                        });
+                        })
                         const matchedProfile = getProfileFromConfig(
                           closestConfig.pAllStart,
                           closestConfig.pAnyStart,
-                          closestConfig.displayRules,
-                        );
+                          closestConfig.displayRules
+                        )
                         onChange({
                           pAnyStart: closestConfig.pAnyStart,
                           pAllStart: closestConfig.pAllStart,
                           displayRules: closestConfig.displayRules,
                           difficultyProfile:
-                            matchedProfile !== "custom"
-                              ? matchedProfile
-                              : undefined,
-                        });
+                            matchedProfile !== 'custom' ? matchedProfile : undefined,
+                        })
                       }
                     }}
                     className={css({
-                      position: "relative",
-                      display: "flex",
-                      alignItems: "center",
-                      userSelect: "none",
-                      touchAction: "none",
-                      h: "8",
+                      position: 'relative',
+                      display: 'flex',
+                      alignItems: 'center',
+                      userSelect: 'none',
+                      touchAction: 'none',
+                      h: '8',
                     })}
                   >
                     <Slider.Track
                       className={css({
-                        bg: "gray.100",
-                        position: "relative",
+                        bg: 'gray.100',
+                        position: 'relative',
                         flexGrow: 1,
-                        h: "2",
-                        rounded: "full",
+                        h: '2',
+                        rounded: 'full',
                       })}
                     >
                       <Slider.Range
                         className={css({
-                          position: "absolute",
-                          bg: "brand.500",
-                          h: "full",
-                          rounded: "full",
+                          position: 'absolute',
+                          bg: 'brand.500',
+                          h: 'full',
+                          rounded: 'full',
                         })}
                       />
 
                       {/* Preset markers on track */}
                       {DIFFICULTY_PROGRESSION.map((profileName) => {
-                        const p = DIFFICULTY_PROFILES[profileName];
+                        const p = DIFFICULTY_PROFILES[profileName]
                         const presetDifficulty = calculateOverallDifficulty(
                           p.regrouping.pAnyStart,
                           p.regrouping.pAllStart,
-                          p.displayRules,
-                        );
-                        const position = (presetDifficulty / 10) * 100;
+                          p.displayRules
+                        )
+                        const position = (presetDifficulty / 10) * 100
 
                         return (
                           <div
                             key={profileName}
                             className={css({
-                              position: "absolute",
-                              top: "50%",
+                              position: 'absolute',
+                              top: '50%',
                               left: `${position}%`,
-                              transform: "translate(-50%, -50%)",
-                              w: "1.5",
-                              h: "1.5",
-                              bg: "gray.400",
-                              rounded: "full",
-                              pointerEvents: "none",
+                              transform: 'translate(-50%, -50%)',
+                              w: '1.5',
+                              h: '1.5',
+                              bg: 'gray.400',
+                              rounded: 'full',
+                              pointerEvents: 'none',
                               zIndex: 1,
                             })}
                             title={p.label}
                           />
-                        );
+                        )
                       })}
                     </Slider.Track>
 
                     <Slider.Thumb
                       className={css({
-                        display: "block",
-                        w: "5",
-                        h: "5",
-                        bg: "white",
-                        border: "2px solid",
-                        borderColor: "brand.500",
-                        rounded: "full",
-                        cursor: "pointer",
-                        boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
+                        display: 'block',
+                        w: '5',
+                        h: '5',
+                        bg: 'white',
+                        border: '2px solid',
+                        borderColor: 'brand.500',
+                        rounded: 'full',
+                        cursor: 'pointer',
+                        boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
                         _hover: {
-                          bg: "brand.50",
+                          bg: 'brand.50',
                         },
                         _focus: {
-                          outline: "none",
-                          boxShadow: "0 0 0 4px rgba(59, 130, 246, 0.1)",
+                          outline: 'none',
+                          boxShadow: '0 0 0 4px rgba(59, 130, 246, 0.1)',
                         },
                       })}
                     />
@@ -1188,49 +1094,47 @@ export function SmartModeControls({
               {/* 2D Difficulty Space Visualizer */}
               <div
                 className={css({
-                  bg: "blue.50",
-                  border: "1px solid",
-                  borderColor: "blue.200",
-                  rounded: "xl",
-                  overflow: "hidden",
-                  boxShadow: "sm",
+                  bg: 'blue.50',
+                  border: '1px solid',
+                  borderColor: 'blue.200',
+                  rounded: 'xl',
+                  overflow: 'hidden',
+                  boxShadow: 'sm',
                 })}
               >
                 <button
                   type="button"
                   onClick={() => setShowDebugPlot(!showDebugPlot)}
                   className={css({
-                    w: "full",
-                    p: "4",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    cursor: "pointer",
-                    bg: "transparent",
-                    border: "none",
+                    w: 'full',
+                    p: '4',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    cursor: 'pointer',
+                    bg: 'transparent',
+                    border: 'none',
                     _hover: {
-                      bg: "blue.100",
+                      bg: 'blue.100',
                     },
-                    transition: "background 0.2s",
+                    transition: 'background 0.2s',
                   })}
                 >
                   <div
                     className={css({
-                      fontWeight: "semibold",
-                      color: "blue.900",
-                      fontSize: "sm",
+                      fontWeight: 'semibold',
+                      color: 'blue.900',
+                      fontSize: 'sm',
                     })}
                   >
                     Difficulty Space Map
                   </div>
                   <div
                     className={css({
-                      fontSize: "sm",
-                      color: "blue.700",
-                      transform: showDebugPlot
-                        ? "rotate(180deg)"
-                        : "rotate(0deg)",
-                      transition: "transform 0.2s",
+                      fontSize: 'sm',
+                      color: 'blue.700',
+                      transform: showDebugPlot ? 'rotate(180deg)' : 'rotate(0deg)',
+                      transition: 'transform 0.2s',
                     })}
                   >
                     ▼
@@ -1238,103 +1142,80 @@ export function SmartModeControls({
                 </button>
 
                 {showDebugPlot && (
-                  <div className={css({ px: "4", pb: "4", pt: "2" })}>
+                  <div className={css({ px: '4', pb: '4', pt: '2' })}>
                     {/* Responsive SVG container */}
                     <div
                       className={css({
-                        w: "full",
-                        display: "flex",
-                        justifyContent: "center",
-                        bg: "white",
-                        rounded: "lg",
-                        p: "4",
-                        border: "1px solid",
-                        borderColor: "gray.200",
+                        w: 'full',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        bg: 'white',
+                        rounded: 'lg',
+                        p: '4',
+                        border: '1px solid',
+                        borderColor: 'gray.200',
                       })}
                     >
                       {(() => {
                         // Make responsive - use container width with max size
-                        const maxSize = 500;
-                        const width = maxSize;
-                        const height = maxSize;
-                        const padding = 40;
-                        const graphWidth = width - padding * 2;
-                        const graphHeight = height - padding * 2;
+                        const maxSize = 500
+                        const width = maxSize
+                        const height = maxSize
+                        const padding = 40
+                        const graphWidth = width - padding * 2
+                        const graphHeight = height - padding * 2
 
-                        const currentReg = calculateRegroupingIntensity(
-                          pAnyStart,
-                          pAllStart,
-                        );
-                        const currentScaf = calculateScaffoldingLevel(
-                          displayRules,
-                          currentReg,
-                        );
+                        const currentReg = calculateRegroupingIntensity(pAnyStart, pAllStart)
+                        const currentScaf = calculateScaffoldingLevel(displayRules, currentReg)
 
                         // Convert 0-10 scale to SVG coordinates
-                        const toX = (val: number) =>
-                          padding + (val / 10) * graphWidth;
-                        const toY = (val: number) =>
-                          height - padding - (val / 10) * graphHeight;
+                        const toX = (val: number) => padding + (val / 10) * graphWidth
+                        const toY = (val: number) => height - padding - (val / 10) * graphHeight
 
                         // Convert SVG coordinates to 0-10 scale
                         const fromX = (x: number) =>
-                          Math.max(
-                            0,
-                            Math.min(10, ((x - padding) / graphWidth) * 10),
-                          );
+                          Math.max(0, Math.min(10, ((x - padding) / graphWidth) * 10))
                         const fromY = (y: number) =>
-                          Math.max(
-                            0,
-                            Math.min(
-                              10,
-                              ((height - padding - y) / graphHeight) * 10,
-                            ),
-                          );
+                          Math.max(0, Math.min(10, ((height - padding - y) / graphHeight) * 10))
 
                         // Helper to calculate valid target from mouse position
                         const calculateValidTarget = (
                           clientX: number,
                           clientY: number,
-                          svg: SVGSVGElement,
+                          svg: SVGSVGElement
                         ) => {
-                          const rect = svg.getBoundingClientRect();
-                          const x = clientX - rect.left;
-                          const y = clientY - rect.top;
+                          const rect = svg.getBoundingClientRect()
+                          const x = clientX - rect.left
+                          const y = clientY - rect.top
 
                           // Convert to difficulty space (0-10)
-                          const regroupingIntensity = fromX(x);
-                          const scaffoldingLevel = fromY(y);
+                          const regroupingIntensity = fromX(x)
+                          const scaffoldingLevel = fromY(y)
 
                           // Check if we're near a preset (within snap threshold)
-                          const snapThreshold = 1.0; // 1.0 units in 0-10 scale
+                          const snapThreshold = 1.0 // 1.0 units in 0-10 scale
                           let nearestPreset: {
-                            distance: number;
-                            profile: (typeof DIFFICULTY_PROFILES)[keyof typeof DIFFICULTY_PROFILES];
-                          } | null = null;
+                            distance: number
+                            profile: (typeof DIFFICULTY_PROFILES)[keyof typeof DIFFICULTY_PROFILES]
+                          } | null = null
 
                           for (const profileName of DIFFICULTY_PROGRESSION) {
-                            const p = DIFFICULTY_PROFILES[profileName];
+                            const p = DIFFICULTY_PROFILES[profileName]
                             const presetReg = calculateRegroupingIntensity(
                               p.regrouping.pAnyStart,
-                              p.regrouping.pAllStart,
-                            );
-                            const presetScaf = calculateScaffoldingLevel(
-                              p.displayRules,
-                              presetReg,
-                            );
+                              p.regrouping.pAllStart
+                            )
+                            const presetScaf = calculateScaffoldingLevel(p.displayRules, presetReg)
 
                             // Calculate Euclidean distance
                             const distance = Math.sqrt(
                               (regroupingIntensity - presetReg) ** 2 +
-                                (scaffoldingLevel - presetScaf) ** 2,
-                            );
+                                (scaffoldingLevel - presetScaf) ** 2
+                            )
 
                             if (distance <= snapThreshold) {
-                              if (
-                                !nearestPreset ||
-                                distance < nearestPreset.distance
-                              ) {
-                                nearestPreset = { distance, profile: p };
+                              if (!nearestPreset || distance < nearestPreset.distance) {
+                                nearestPreset = { distance, profile: p }
                               }
                             }
                           }
@@ -1343,61 +1224,50 @@ export function SmartModeControls({
                           if (nearestPreset) {
                             return {
                               newRegrouping: nearestPreset.profile.regrouping,
-                              newDisplayRules:
-                                nearestPreset.profile.displayRules,
+                              newDisplayRules: nearestPreset.profile.displayRules,
                               matchedProfile: nearestPreset.profile.name,
                               reg: calculateRegroupingIntensity(
                                 nearestPreset.profile.regrouping.pAnyStart,
-                                nearestPreset.profile.regrouping.pAllStart,
+                                nearestPreset.profile.regrouping.pAllStart
                               ),
                               scaf: calculateScaffoldingLevel(
                                 nearestPreset.profile.displayRules,
                                 calculateRegroupingIntensity(
                                   nearestPreset.profile.regrouping.pAnyStart,
-                                  nearestPreset.profile.regrouping.pAllStart,
-                                ),
+                                  nearestPreset.profile.regrouping.pAllStart
+                                )
                               ),
-                            };
+                            }
                           }
 
                           // No preset nearby, use normal progression indices
                           const regroupingIdx = Math.round(
-                            (regroupingIntensity / 10) *
-                              (REGROUPING_PROGRESSION.length - 1),
-                          );
+                            (regroupingIntensity / 10) * (REGROUPING_PROGRESSION.length - 1)
+                          )
                           const scaffoldingIdx = Math.round(
-                            ((10 - scaffoldingLevel) / 10) *
-                              (SCAFFOLDING_PROGRESSION.length - 1),
-                          );
+                            ((10 - scaffoldingLevel) / 10) * (SCAFFOLDING_PROGRESSION.length - 1)
+                          )
 
                           // Find nearest valid state (applies pedagogical constraints)
-                          const validState = findNearestValidState(
-                            regroupingIdx,
-                            scaffoldingIdx,
-                          );
+                          const validState = findNearestValidState(regroupingIdx, scaffoldingIdx)
 
                           // Get actual values from progressions
-                          const newRegrouping =
-                            REGROUPING_PROGRESSION[validState.regroupingIdx];
-                          const newDisplayRules =
-                            SCAFFOLDING_PROGRESSION[validState.scaffoldingIdx];
+                          const newRegrouping = REGROUPING_PROGRESSION[validState.regroupingIdx]
+                          const newDisplayRules = SCAFFOLDING_PROGRESSION[validState.scaffoldingIdx]
 
                           // Calculate display coordinates
                           const reg = calculateRegroupingIntensity(
                             newRegrouping.pAnyStart,
-                            newRegrouping.pAllStart,
-                          );
-                          const scaf = calculateScaffoldingLevel(
-                            newDisplayRules,
-                            reg,
-                          );
+                            newRegrouping.pAllStart
+                          )
+                          const scaf = calculateScaffoldingLevel(newDisplayRules, reg)
 
                           // Check if this matches a preset
                           const matchedProfile = getProfileFromConfig(
                             newRegrouping.pAllStart,
                             newRegrouping.pAnyStart,
-                            newDisplayRules,
-                          );
+                            newDisplayRules
+                          )
 
                           return {
                             newRegrouping,
@@ -1405,41 +1275,29 @@ export function SmartModeControls({
                             matchedProfile,
                             reg,
                             scaf,
-                          };
-                        };
+                          }
+                        }
 
-                        const handleMouseMove = (
-                          e: React.MouseEvent<SVGSVGElement>,
-                        ) => {
-                          const svg = e.currentTarget;
-                          const target = calculateValidTarget(
-                            e.clientX,
-                            e.clientY,
-                            svg,
-                          );
-                          setHoverPoint({ x: target.reg, y: target.scaf });
+                        const handleMouseMove = (e: React.MouseEvent<SVGSVGElement>) => {
+                          const svg = e.currentTarget
+                          const target = calculateValidTarget(e.clientX, e.clientY, svg)
+                          setHoverPoint({ x: target.reg, y: target.scaf })
                           setHoverPreview({
                             pAnyStart: target.newRegrouping.pAnyStart,
                             pAllStart: target.newRegrouping.pAllStart,
                             displayRules: target.newDisplayRules,
                             matchedProfile: target.matchedProfile,
-                          });
-                        };
+                          })
+                        }
 
                         const handleMouseLeave = () => {
-                          setHoverPoint(null);
-                          setHoverPreview(null);
-                        };
+                          setHoverPoint(null)
+                          setHoverPreview(null)
+                        }
 
-                        const handleClick = (
-                          e: React.MouseEvent<SVGSVGElement>,
-                        ) => {
-                          const svg = e.currentTarget;
-                          const target = calculateValidTarget(
-                            e.clientX,
-                            e.clientY,
-                            svg,
-                          );
+                        const handleClick = (e: React.MouseEvent<SVGSVGElement>) => {
+                          const svg = e.currentTarget
+                          const target = calculateValidTarget(e.clientX, e.clientY, svg)
 
                           // Update via onChange
                           onChange({
@@ -1447,11 +1305,11 @@ export function SmartModeControls({
                             pAllStart: target.newRegrouping.pAllStart,
                             displayRules: target.newDisplayRules,
                             difficultyProfile:
-                              target.matchedProfile !== "custom"
+                              target.matchedProfile !== 'custom'
                                 ? target.matchedProfile
                                 : undefined,
-                          });
-                        };
+                          })
+                        }
 
                         return (
                           <svg
@@ -1463,8 +1321,8 @@ export function SmartModeControls({
                             onMouseLeave={handleMouseLeave}
                             className={css({
                               maxWidth: `${maxSize}px`,
-                              cursor: "crosshair",
-                              userSelect: "none",
+                              cursor: 'crosshair',
+                              userSelect: 'none',
                             })}
                           >
                             {/* Grid lines */}
@@ -1534,15 +1392,12 @@ export function SmartModeControls({
 
                             {/* Preset points */}
                             {DIFFICULTY_PROGRESSION.map((profileName) => {
-                              const p = DIFFICULTY_PROFILES[profileName];
+                              const p = DIFFICULTY_PROFILES[profileName]
                               const reg = calculateRegroupingIntensity(
                                 p.regrouping.pAnyStart,
-                                p.regrouping.pAllStart,
-                              );
-                              const scaf = calculateScaffoldingLevel(
-                                p.displayRules,
-                                reg,
-                              );
+                                p.regrouping.pAllStart
+                              )
+                              const scaf = calculateScaffoldingLevel(p.displayRules, reg)
 
                               return (
                                 <g key={profileName}>
@@ -1566,7 +1421,7 @@ export function SmartModeControls({
                                     {p.label}
                                   </text>
                                 </g>
-                              );
+                              )
                             })}
 
                             {/* Hover preview - show where click will land */}
@@ -1611,23 +1466,18 @@ export function SmartModeControls({
                               stroke="#059669"
                               strokeWidth="3"
                             />
-                            <circle
-                              cx={toX(currentReg)}
-                              cy={toY(currentScaf)}
-                              r="3"
-                              fill="white"
-                            />
+                            <circle cx={toX(currentReg)} cy={toY(currentScaf)} r="3" fill="white" />
                           </svg>
-                        );
+                        )
                       })()}
                     </div>
                   </div>
                 )}
               </div>
             </>
-          );
+          )
         })()}
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/components/config-panel/StudentNameInput.tsx b/apps/web/src/app/create/worksheets/addition/components/config-panel/StudentNameInput.tsx
index edd4d8e7..bd3946ac 100644
--- a/apps/web/src/app/create/worksheets/addition/components/config-panel/StudentNameInput.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/config-panel/StudentNameInput.tsx
@@ -1,40 +1,36 @@
-import { css } from "../../../../../../../styled-system/css";
+import { css } from '../../../../../../../styled-system/css'
 
 export interface StudentNameInputProps {
-  value: string | undefined;
-  onChange: (value: string) => void;
-  isDark?: boolean;
+  value: string | undefined
+  onChange: (value: string) => void
+  isDark?: boolean
 }
 
-export function StudentNameInput({
-  value,
-  onChange,
-  isDark = false,
-}: StudentNameInputProps) {
+export function StudentNameInput({ value, onChange, isDark = false }: StudentNameInputProps) {
   return (
     <input
       type="text"
-      value={value || ""}
+      value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder="Student Name"
       className={css({
-        w: "full",
-        px: "3",
-        py: "2",
-        border: "1px solid",
-        borderColor: isDark ? "gray.600" : "gray.300",
-        bg: isDark ? "gray.700" : "white",
-        color: isDark ? "gray.100" : "gray.900",
-        rounded: "lg",
-        fontSize: "sm",
+        w: 'full',
+        px: '3',
+        py: '2',
+        border: '1px solid',
+        borderColor: isDark ? 'gray.600' : 'gray.300',
+        bg: isDark ? 'gray.700' : 'white',
+        color: isDark ? 'gray.100' : 'gray.900',
+        rounded: 'lg',
+        fontSize: 'sm',
         _focus: {
-          outline: "none",
-          borderColor: "brand.500",
-          ring: "2px",
-          ringColor: "brand.200",
+          outline: 'none',
+          borderColor: 'brand.500',
+          ring: '2px',
+          ringColor: 'brand.200',
         },
-        _placeholder: { color: isDark ? "gray.500" : "gray.400" },
+        _placeholder: { color: isDark ? 'gray.500' : 'gray.400' },
       })}
     />
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/components/config-panel/SubOption.tsx b/apps/web/src/app/create/worksheets/addition/components/config-panel/SubOption.tsx
index 81a956e0..80eb91d3 100644
--- a/apps/web/src/app/create/worksheets/addition/components/config-panel/SubOption.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/config-panel/SubOption.tsx
@@ -1,52 +1,47 @@
-import { css } from "../../../../../../../styled-system/css";
+import { css } from '../../../../../../../styled-system/css'
 
 export interface SubOptionProps {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  label: string;
-  parentEnabled: boolean;
+  checked: boolean
+  onChange: (checked: boolean) => void
+  label: string
+  parentEnabled: boolean
 }
 
 /**
  * Reusable sub-option component for nested toggles
  * Used for options like "Show for all problems" under "Ten-Frames"
  */
-export function SubOption({
-  checked,
-  onChange,
-  label,
-  parentEnabled,
-}: SubOptionProps) {
+export function SubOption({ checked, onChange, label, parentEnabled }: SubOptionProps) {
   return (
     <div
       className={css({
-        display: "flex",
-        gap: "3",
-        alignItems: "center",
-        justifyContent: "space-between",
-        pt: "1.5",
-        pb: "2.5",
-        px: "3",
-        mt: "2",
-        borderTop: "1px solid",
-        borderColor: "brand.300",
+        display: 'flex',
+        gap: '3',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        pt: '1.5',
+        pb: '2.5',
+        px: '3',
+        mt: '2',
+        borderTop: '1px solid',
+        borderColor: 'brand.300',
         opacity: parentEnabled ? 1 : 0,
-        visibility: parentEnabled ? "visible" : "hidden",
-        pointerEvents: parentEnabled ? "auto" : "none",
-        transition: "opacity 0.15s",
-        cursor: "pointer",
+        visibility: parentEnabled ? 'visible' : 'hidden',
+        pointerEvents: parentEnabled ? 'auto' : 'none',
+        transition: 'opacity 0.15s',
+        cursor: 'pointer',
       })}
       onClick={(e) => {
-        e.stopPropagation();
-        onChange(!checked);
+        e.stopPropagation()
+        onChange(!checked)
       }}
     >
       <label
         className={css({
-          fontSize: "2xs",
-          fontWeight: "medium",
-          color: "brand.700",
-          cursor: "pointer",
+          fontSize: '2xs',
+          fontWeight: 'medium',
+          color: 'brand.700',
+          cursor: 'pointer',
           flex: 1,
         })}
       >
@@ -54,29 +49,29 @@ export function SubOption({
       </label>
       <div
         className={css({
-          w: "7",
-          h: "4",
-          bg: checked ? "brand.500" : "gray.300",
-          rounded: "full",
-          position: "relative",
-          transition: "background-color 0.15s",
+          w: '7',
+          h: '4',
+          bg: checked ? 'brand.500' : 'gray.300',
+          rounded: 'full',
+          position: 'relative',
+          transition: 'background-color 0.15s',
           flexShrink: 0,
         })}
       >
         <div
           style={{
-            position: "absolute",
-            top: "0.125rem",
-            left: checked ? "0.875rem" : "0.125rem",
-            width: "0.75rem",
-            height: "0.75rem",
-            background: "white",
-            borderRadius: "9999px",
-            transition: "left 0.15s",
-            boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
+            position: 'absolute',
+            top: '0.125rem',
+            left: checked ? '0.875rem' : '0.125rem',
+            width: '0.75rem',
+            height: '0.75rem',
+            background: 'white',
+            borderRadius: '9999px',
+            transition: 'left 0.15s',
+            boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
           }}
         />
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/components/config-panel/ToggleOption.tsx b/apps/web/src/app/create/worksheets/addition/components/config-panel/ToggleOption.tsx
index 35ad26ea..28f06d7a 100644
--- a/apps/web/src/app/create/worksheets/addition/components/config-panel/ToggleOption.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/config-panel/ToggleOption.tsx
@@ -1,14 +1,14 @@
-import type React from "react";
-import * as Checkbox from "@radix-ui/react-checkbox";
-import { css } from "../../../../../../../styled-system/css";
+import type React from 'react'
+import * as Checkbox from '@radix-ui/react-checkbox'
+import { css } from '../../../../../../../styled-system/css'
 
 export interface ToggleOptionProps {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  label: string;
-  description: string;
-  children?: React.ReactNode;
-  isDark?: boolean;
+  checked: boolean
+  onChange: (checked: boolean) => void
+  label: string
+  description: string
+  children?: React.ReactNode
+  isDark?: boolean
 }
 
 export function ToggleOption({
@@ -23,17 +23,17 @@ export function ToggleOption({
     <div
       data-element="toggle-option-container"
       className={css({
-        display: "flex",
-        flexDirection: "column",
-        h: children ? "auto" : "20",
-        bg: checked ? "brand.50" : isDark ? "gray.700" : "white",
-        border: "2px solid",
-        borderColor: checked ? "brand.500" : isDark ? "gray.600" : "gray.200",
-        rounded: "lg",
-        transition: "all 0.15s",
+        display: 'flex',
+        flexDirection: 'column',
+        h: children ? 'auto' : '20',
+        bg: checked ? 'brand.50' : isDark ? 'gray.700' : 'white',
+        border: '2px solid',
+        borderColor: checked ? 'brand.500' : isDark ? 'gray.600' : 'gray.200',
+        rounded: 'lg',
+        transition: 'all 0.15s',
         _hover: {
-          borderColor: checked ? "brand.600" : isDark ? "gray.500" : "gray.300",
-          bg: checked ? "brand.100" : isDark ? "gray.600" : "gray.50",
+          borderColor: checked ? 'brand.600' : isDark ? 'gray.500' : 'gray.300',
+          bg: checked ? 'brand.100' : isDark ? 'gray.600' : 'gray.50',
         },
       })}
     >
@@ -42,72 +42,72 @@ export function ToggleOption({
         onCheckedChange={onChange}
         data-element="toggle-option"
         className={css({
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "flex-start",
-          gap: "1.5",
-          p: "2.5",
-          bg: "transparent",
-          border: "none",
-          rounded: "lg",
-          cursor: "pointer",
-          textAlign: "left",
-          w: "full",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'flex-start',
+          gap: '1.5',
+          p: '2.5',
+          bg: 'transparent',
+          border: 'none',
+          rounded: 'lg',
+          cursor: 'pointer',
+          textAlign: 'left',
+          w: 'full',
           _focus: {
-            outline: "none",
-            ring: "2px",
-            ringColor: "brand.300",
+            outline: 'none',
+            ring: '2px',
+            ringColor: 'brand.300',
           },
         })}
       >
         <div
           className={css({
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            gap: "2",
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: '2',
           })}
         >
           <div
             className={css({
-              fontSize: "xs",
-              fontWeight: "semibold",
-              color: checked ? "brand.700" : isDark ? "gray.200" : "gray.700",
+              fontSize: 'xs',
+              fontWeight: 'semibold',
+              color: checked ? 'brand.700' : isDark ? 'gray.200' : 'gray.700',
             })}
           >
             {label}
           </div>
           <div
             className={css({
-              w: "9",
-              h: "5",
-              bg: checked ? "brand.500" : "gray.300",
-              rounded: "full",
-              position: "relative",
-              transition: "background-color 0.15s",
+              w: '9',
+              h: '5',
+              bg: checked ? 'brand.500' : 'gray.300',
+              rounded: 'full',
+              position: 'relative',
+              transition: 'background-color 0.15s',
               flexShrink: 0,
             })}
           >
             <div
               style={{
-                position: "absolute",
-                top: "0.125rem",
-                left: checked ? "1.125rem" : "0.125rem",
-                width: "1rem",
-                height: "1rem",
-                background: "white",
-                borderRadius: "9999px",
-                transition: "left 0.15s",
-                boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
+                position: 'absolute',
+                top: '0.125rem',
+                left: checked ? '1.125rem' : '0.125rem',
+                width: '1rem',
+                height: '1rem',
+                background: 'white',
+                borderRadius: '9999px',
+                transition: 'left 0.15s',
+                boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
               }}
             />
           </div>
         </div>
         <div
           className={css({
-            fontSize: "2xs",
-            color: checked ? "brand.600" : isDark ? "gray.400" : "gray.500",
-            lineHeight: "1.3",
+            fontSize: '2xs',
+            color: checked ? 'brand.600' : isDark ? 'gray.400' : 'gray.500',
+            lineHeight: '1.3',
           })}
         >
           {description}
@@ -115,5 +115,5 @@ export function ToggleOption({
       </Checkbox.Root>
       {children}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/components/config-panel/utils.tsx b/apps/web/src/app/create/worksheets/addition/components/config-panel/utils.tsx
index e99bdf0e..1067325c 100644
--- a/apps/web/src/app/create/worksheets/addition/components/config-panel/utils.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/config-panel/utils.tsx
@@ -1,5 +1,5 @@
-import type React from "react";
-import { css } from "../../../../../../../styled-system/css";
+import type React from 'react'
+import { css } from '../../../../../../../styled-system/css'
 
 /**
  * Generate a human-readable summary of enabled scaffolding aids
@@ -9,83 +9,70 @@ import { css } from "../../../../../../../styled-system/css";
  */
 export function getScaffoldingSummary(
   displayRules: any,
-  operator?: "addition" | "subtraction" | "mixed",
+  operator?: 'addition' | 'subtraction' | 'mixed'
 ): React.ReactNode {
-  console.log(
-    "[getScaffoldingSummary] displayRules:",
-    displayRules,
-    "operator:",
-    operator,
-  );
+  console.log('[getScaffoldingSummary] displayRules:', displayRules, 'operator:', operator)
 
-  const alwaysItems: string[] = [];
-  const conditionalItems: string[] = [];
+  const alwaysItems: string[] = []
+  const conditionalItems: string[] = []
 
   // Addition-specific scaffolds (skip for subtraction-only)
-  if (operator !== "subtraction") {
-    if (displayRules.carryBoxes === "always") {
-      alwaysItems.push("carry boxes");
-    } else if (displayRules.carryBoxes !== "never") {
-      conditionalItems.push("carry boxes");
+  if (operator !== 'subtraction') {
+    if (displayRules.carryBoxes === 'always') {
+      alwaysItems.push('carry boxes')
+    } else if (displayRules.carryBoxes !== 'never') {
+      conditionalItems.push('carry boxes')
     }
 
-    if (displayRules.tenFrames === "always") {
-      alwaysItems.push("ten-frames");
-    } else if (displayRules.tenFrames !== "never") {
-      conditionalItems.push("ten-frames");
+    if (displayRules.tenFrames === 'always') {
+      alwaysItems.push('ten-frames')
+    } else if (displayRules.tenFrames !== 'never') {
+      conditionalItems.push('ten-frames')
     }
   }
 
   // Universal scaffolds (always show)
-  if (displayRules.answerBoxes === "always") {
-    alwaysItems.push("answer boxes");
-  } else if (displayRules.answerBoxes !== "never") {
-    conditionalItems.push("answer boxes");
+  if (displayRules.answerBoxes === 'always') {
+    alwaysItems.push('answer boxes')
+  } else if (displayRules.answerBoxes !== 'never') {
+    conditionalItems.push('answer boxes')
   }
 
-  if (displayRules.placeValueColors === "always") {
-    alwaysItems.push("place value colors");
-  } else if (displayRules.placeValueColors !== "never") {
-    conditionalItems.push("place value colors");
+  if (displayRules.placeValueColors === 'always') {
+    alwaysItems.push('place value colors')
+  } else if (displayRules.placeValueColors !== 'never') {
+    conditionalItems.push('place value colors')
   }
 
   // Subtraction-specific scaffolds (skip for addition-only)
-  if (operator !== "addition") {
-    if (displayRules.borrowNotation === "always") {
-      alwaysItems.push("borrow notation");
-    } else if (displayRules.borrowNotation !== "never") {
-      conditionalItems.push("borrow notation");
+  if (operator !== 'addition') {
+    if (displayRules.borrowNotation === 'always') {
+      alwaysItems.push('borrow notation')
+    } else if (displayRules.borrowNotation !== 'never') {
+      conditionalItems.push('borrow notation')
     }
 
-    if (displayRules.borrowingHints === "always") {
-      alwaysItems.push("borrowing hints");
-    } else if (displayRules.borrowingHints !== "never") {
-      conditionalItems.push("borrowing hints");
+    if (displayRules.borrowingHints === 'always') {
+      alwaysItems.push('borrowing hints')
+    } else if (displayRules.borrowingHints !== 'never') {
+      conditionalItems.push('borrowing hints')
     }
   }
 
   if (alwaysItems.length === 0 && conditionalItems.length === 0) {
-    console.log("[getScaffoldingSummary] Final summary: no scaffolding");
-    return (
-      <span className={css({ color: "gray.500", fontStyle: "italic" })}>
-        no scaffolding
-      </span>
-    );
+    console.log('[getScaffoldingSummary] Final summary: no scaffolding')
+    return <span className={css({ color: 'gray.500', fontStyle: 'italic' })}>no scaffolding</span>
   }
 
-  console.log("[getScaffoldingSummary] Final summary:", {
+  console.log('[getScaffoldingSummary] Final summary:', {
     alwaysItems,
     conditionalItems,
-  });
+  })
 
   return (
-    <div
-      className={css({ display: "flex", flexDirection: "column", gap: "0.5" })}
-    >
-      {alwaysItems.length > 0 && <div>Always: {alwaysItems.join(", ")}</div>}
-      {conditionalItems.length > 0 && (
-        <div>When needed: {conditionalItems.join(", ")}</div>
-      )}
+    <div className={css({ display: 'flex', flexDirection: 'column', gap: '0.5' })}>
+      {alwaysItems.length > 0 && <div>Always: {alwaysItems.join(', ')}</div>}
+      {conditionalItems.length > 0 && <div>When needed: {conditionalItems.join(', ')}</div>}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/difficultyProfiles.ts b/apps/web/src/app/create/worksheets/addition/difficultyProfiles.ts
index c9cb15fd..61fb1b23 100644
--- a/apps/web/src/app/create/worksheets/addition/difficultyProfiles.ts
+++ b/apps/web/src/app/create/worksheets/addition/difficultyProfiles.ts
@@ -6,7 +6,7 @@
 // quantization and cycling issues. Each dimension has a discrete progression
 // from easiest to hardest, and make harder/easier simply navigate these arrays.
 
-import type { DisplayRules } from "./displayRules";
+import type { DisplayRules } from './displayRules'
 
 /**
  * SCAFFOLDING_PROGRESSION: Ordered array of scaffolding configurations
@@ -18,160 +18,160 @@ import type { DisplayRules } from "./displayRules";
 export const SCAFFOLDING_PROGRESSION: DisplayRules[] = [
   // Level 0: Maximum scaffolding - everything always visible
   {
-    carryBoxes: "always",
-    answerBoxes: "always",
-    placeValueColors: "always",
-    tenFrames: "always",
-    problemNumbers: "always",
-    cellBorders: "always",
-    borrowNotation: "always",
-    borrowingHints: "always",
+    carryBoxes: 'always',
+    answerBoxes: 'always',
+    placeValueColors: 'always',
+    tenFrames: 'always',
+    problemNumbers: 'always',
+    cellBorders: 'always',
+    borrowNotation: 'always',
+    borrowingHints: 'always',
   },
 
   // Level 1: Carry boxes become conditional
   {
-    carryBoxes: "whenRegrouping",
-    answerBoxes: "always",
-    placeValueColors: "always",
-    tenFrames: "always",
-    problemNumbers: "always",
-    cellBorders: "always",
-    borrowNotation: "whenRegrouping",
-    borrowingHints: "always",
+    carryBoxes: 'whenRegrouping',
+    answerBoxes: 'always',
+    placeValueColors: 'always',
+    tenFrames: 'always',
+    problemNumbers: 'always',
+    cellBorders: 'always',
+    borrowNotation: 'whenRegrouping',
+    borrowingHints: 'always',
   },
 
   // Level 2: Place value colors become conditional
   {
-    carryBoxes: "whenRegrouping",
-    answerBoxes: "always",
-    placeValueColors: "whenRegrouping",
-    tenFrames: "always",
-    problemNumbers: "always",
-    cellBorders: "always",
-    borrowNotation: "whenRegrouping",
-    borrowingHints: "whenRegrouping",
+    carryBoxes: 'whenRegrouping',
+    answerBoxes: 'always',
+    placeValueColors: 'whenRegrouping',
+    tenFrames: 'always',
+    problemNumbers: 'always',
+    cellBorders: 'always',
+    borrowNotation: 'whenRegrouping',
+    borrowingHints: 'whenRegrouping',
   },
 
   // Level 3: Answer boxes become conditional
   {
-    carryBoxes: "whenRegrouping",
-    answerBoxes: "whenRegrouping",
-    placeValueColors: "whenRegrouping",
-    tenFrames: "always",
-    problemNumbers: "always",
-    cellBorders: "always",
-    borrowNotation: "whenRegrouping",
-    borrowingHints: "whenRegrouping",
+    carryBoxes: 'whenRegrouping',
+    answerBoxes: 'whenRegrouping',
+    placeValueColors: 'whenRegrouping',
+    tenFrames: 'always',
+    problemNumbers: 'always',
+    cellBorders: 'always',
+    borrowNotation: 'whenRegrouping',
+    borrowingHints: 'whenRegrouping',
   },
 
   // Level 4: Multiple helpers become more conditional
   {
-    carryBoxes: "whenRegrouping",
-    answerBoxes: "whenMultipleRegroups",
-    placeValueColors: "whenRegrouping",
-    tenFrames: "always",
-    problemNumbers: "always",
-    cellBorders: "always",
-    borrowNotation: "whenRegrouping",
-    borrowingHints: "whenMultipleRegroups",
+    carryBoxes: 'whenRegrouping',
+    answerBoxes: 'whenMultipleRegroups',
+    placeValueColors: 'whenRegrouping',
+    tenFrames: 'always',
+    problemNumbers: 'always',
+    cellBorders: 'always',
+    borrowNotation: 'whenRegrouping',
+    borrowingHints: 'whenMultipleRegroups',
   },
 
   // Level 5: More helpers get more conditional
   {
-    carryBoxes: "whenMultipleRegroups",
-    answerBoxes: "whenMultipleRegroups",
-    placeValueColors: "whenMultipleRegroups",
-    tenFrames: "always",
-    problemNumbers: "always",
-    cellBorders: "always",
-    borrowNotation: "whenRegrouping",
-    borrowingHints: "whenMultipleRegroups",
+    carryBoxes: 'whenMultipleRegroups',
+    answerBoxes: 'whenMultipleRegroups',
+    placeValueColors: 'whenMultipleRegroups',
+    tenFrames: 'always',
+    problemNumbers: 'always',
+    cellBorders: 'always',
+    borrowNotation: 'whenRegrouping',
+    borrowingHints: 'whenMultipleRegroups',
   },
 
   // Level 6: Ten frames become conditional (only when regrouping)
   {
-    carryBoxes: "whenMultipleRegroups",
-    answerBoxes: "whenMultipleRegroups",
-    placeValueColors: "whenMultipleRegroups",
-    tenFrames: "whenRegrouping",
-    problemNumbers: "always",
-    cellBorders: "always",
-    borrowNotation: "whenRegrouping",
-    borrowingHints: "whenMultipleRegroups",
+    carryBoxes: 'whenMultipleRegroups',
+    answerBoxes: 'whenMultipleRegroups',
+    placeValueColors: 'whenMultipleRegroups',
+    tenFrames: 'whenRegrouping',
+    problemNumbers: 'always',
+    cellBorders: 'always',
+    borrowNotation: 'whenRegrouping',
+    borrowingHints: 'whenMultipleRegroups',
   },
 
   // Level 7: Ten frames become more conditional
   {
-    carryBoxes: "whenMultipleRegroups",
-    answerBoxes: "whenMultipleRegroups",
-    placeValueColors: "whenMultipleRegroups",
-    tenFrames: "whenMultipleRegroups",
-    problemNumbers: "always",
-    cellBorders: "always",
-    borrowNotation: "whenRegrouping",
-    borrowingHints: "never",
+    carryBoxes: 'whenMultipleRegroups',
+    answerBoxes: 'whenMultipleRegroups',
+    placeValueColors: 'whenMultipleRegroups',
+    tenFrames: 'whenMultipleRegroups',
+    problemNumbers: 'always',
+    cellBorders: 'always',
+    borrowNotation: 'whenRegrouping',
+    borrowingHints: 'never',
   },
 
   // Level 8: Carry boxes removed
   {
-    carryBoxes: "never",
-    answerBoxes: "whenMultipleRegroups",
-    placeValueColors: "whenMultipleRegroups",
-    tenFrames: "whenMultipleRegroups",
-    problemNumbers: "always",
-    cellBorders: "always",
-    borrowNotation: "whenRegrouping",
-    borrowingHints: "never",
+    carryBoxes: 'never',
+    answerBoxes: 'whenMultipleRegroups',
+    placeValueColors: 'whenMultipleRegroups',
+    tenFrames: 'whenMultipleRegroups',
+    problemNumbers: 'always',
+    cellBorders: 'always',
+    borrowNotation: 'whenRegrouping',
+    borrowingHints: 'never',
   },
 
   // Level 9: Answer boxes removed
   {
-    carryBoxes: "never",
-    answerBoxes: "never",
-    placeValueColors: "whenMultipleRegroups",
-    tenFrames: "whenMultipleRegroups",
-    problemNumbers: "always",
-    cellBorders: "always",
-    borrowNotation: "whenRegrouping",
-    borrowingHints: "never",
+    carryBoxes: 'never',
+    answerBoxes: 'never',
+    placeValueColors: 'whenMultipleRegroups',
+    tenFrames: 'whenMultipleRegroups',
+    problemNumbers: 'always',
+    cellBorders: 'always',
+    borrowNotation: 'whenRegrouping',
+    borrowingHints: 'never',
   },
 
   // Level 10: Ten frames removed
   {
-    carryBoxes: "never",
-    answerBoxes: "never",
-    placeValueColors: "whenMultipleRegroups",
-    tenFrames: "never",
-    problemNumbers: "always",
-    cellBorders: "always",
-    borrowNotation: "whenRegrouping",
-    borrowingHints: "never",
+    carryBoxes: 'never',
+    answerBoxes: 'never',
+    placeValueColors: 'whenMultipleRegroups',
+    tenFrames: 'never',
+    problemNumbers: 'always',
+    cellBorders: 'always',
+    borrowNotation: 'whenRegrouping',
+    borrowingHints: 'never',
   },
 
   // Level 11: Place value colors only for large numbers
   {
-    carryBoxes: "never",
-    answerBoxes: "never",
-    placeValueColors: "when3PlusDigits",
-    tenFrames: "never",
-    problemNumbers: "always",
-    cellBorders: "always",
-    borrowNotation: "whenRegrouping",
-    borrowingHints: "never",
+    carryBoxes: 'never',
+    answerBoxes: 'never',
+    placeValueColors: 'when3PlusDigits',
+    tenFrames: 'never',
+    problemNumbers: 'always',
+    cellBorders: 'always',
+    borrowNotation: 'whenRegrouping',
+    borrowingHints: 'never',
   },
 
   // Level 12: Minimal scaffolding - place value colors removed
   {
-    carryBoxes: "never",
-    answerBoxes: "never",
-    placeValueColors: "never",
-    tenFrames: "never",
-    problemNumbers: "always",
-    cellBorders: "always",
-    borrowNotation: "never",
-    borrowingHints: "never",
+    carryBoxes: 'never',
+    answerBoxes: 'never',
+    placeValueColors: 'never',
+    tenFrames: 'never',
+    problemNumbers: 'always',
+    cellBorders: 'always',
+    borrowNotation: 'never',
+    borrowingHints: 'never',
   },
-];
+]
 
 /**
  * REGROUPING_PROGRESSION: Ordered array of regrouping configurations
@@ -179,8 +179,8 @@ export const SCAFFOLDING_PROGRESSION: DisplayRules[] = [
  * Index N = maximum regrouping (hardest)
  */
 export const REGROUPING_PROGRESSION: Array<{
-  pAnyStart: number;
-  pAllStart: number;
+  pAnyStart: number
+  pAllStart: number
 }> = [
   { pAnyStart: 0.0, pAllStart: 0.0 }, // 0: No regrouping
   { pAnyStart: 0.15, pAllStart: 0.0 }, // 1: Minimal
@@ -201,7 +201,7 @@ export const REGROUPING_PROGRESSION: Array<{
   { pAnyStart: 0.98, pAllStart: 0.78 }, // 16:
   { pAnyStart: 1.0, pAllStart: 0.9 }, // 17:
   { pAnyStart: 1.0, pAllStart: 1.0 }, // 18: Maximum regrouping
-];
+]
 
 /**
  * Find the closest scaffolding index for given display rules
@@ -210,57 +210,54 @@ export function findScaffoldingIndex(rules: DisplayRules): number {
   // Try exact match first
   for (let i = 0; i < SCAFFOLDING_PROGRESSION.length; i++) {
     if (JSON.stringify(SCAFFOLDING_PROGRESSION[i]) === JSON.stringify(rules)) {
-      return i;
+      return i
     }
   }
 
   // No exact match - find closest by counting matching rules
-  let bestIndex = 0;
-  let bestMatchCount = 0;
+  let bestIndex = 0
+  let bestMatchCount = 0
 
   for (let i = 0; i < SCAFFOLDING_PROGRESSION.length; i++) {
-    const level = SCAFFOLDING_PROGRESSION[i];
-    let matchCount = 0;
+    const level = SCAFFOLDING_PROGRESSION[i]
+    let matchCount = 0
 
-    if (level.carryBoxes === rules.carryBoxes) matchCount++;
-    if (level.answerBoxes === rules.answerBoxes) matchCount++;
-    if (level.placeValueColors === rules.placeValueColors) matchCount++;
-    if (level.tenFrames === rules.tenFrames) matchCount++;
-    if (level.problemNumbers === rules.problemNumbers) matchCount++;
-    if (level.cellBorders === rules.cellBorders) matchCount++;
+    if (level.carryBoxes === rules.carryBoxes) matchCount++
+    if (level.answerBoxes === rules.answerBoxes) matchCount++
+    if (level.placeValueColors === rules.placeValueColors) matchCount++
+    if (level.tenFrames === rules.tenFrames) matchCount++
+    if (level.problemNumbers === rules.problemNumbers) matchCount++
+    if (level.cellBorders === rules.cellBorders) matchCount++
 
     if (matchCount > bestMatchCount) {
-      bestMatchCount = matchCount;
-      bestIndex = i;
+      bestMatchCount = matchCount
+      bestIndex = i
     }
   }
 
-  return bestIndex;
+  return bestIndex
 }
 
 /**
  * Find the closest regrouping index for given probabilities
  */
-export function findRegroupingIndex(
-  pAnyStart: number,
-  pAllStart: number,
-): number {
-  let bestIndex = 0;
-  let bestDistance = Infinity;
+export function findRegroupingIndex(pAnyStart: number, pAllStart: number): number {
+  let bestIndex = 0
+  let bestDistance = Infinity
 
   for (let i = 0; i < REGROUPING_PROGRESSION.length; i++) {
-    const level = REGROUPING_PROGRESSION[i];
+    const level = REGROUPING_PROGRESSION[i]
     const distance = Math.sqrt(
-      (level.pAnyStart - pAnyStart) ** 2 + (level.pAllStart - pAllStart) ** 2,
-    );
+      (level.pAnyStart - pAnyStart) ** 2 + (level.pAllStart - pAllStart) ** 2
+    )
 
     if (distance < bestDistance) {
-      bestDistance = distance;
-      bestIndex = i;
+      bestDistance = distance
+      bestIndex = i
     }
   }
 
-  return bestIndex;
+  return bestIndex
 }
 
 /**
@@ -273,54 +270,46 @@ export function findRegroupingIndex(
 function describeScaffoldingChange(
   fromRules: DisplayRules,
   toRules: DisplayRules,
-  direction: "added" | "reduced",
-  operator?: "addition" | "subtraction" | "mixed",
+  direction: 'added' | 'reduced',
+  operator?: 'addition' | 'subtraction' | 'mixed'
 ): string {
-  const changes: string[] = [];
+  const changes: string[] = []
 
   const ruleNames: Record<keyof DisplayRules, string> = {
-    carryBoxes: "carry boxes",
-    answerBoxes: "answer boxes",
-    placeValueColors: "place value colors",
-    tenFrames: "ten frames",
-    problemNumbers: "problem numbers",
-    cellBorders: "cell borders",
-    borrowNotation: "borrow notation",
-    borrowingHints: "borrowing hints",
-  };
+    carryBoxes: 'carry boxes',
+    answerBoxes: 'answer boxes',
+    placeValueColors: 'place value colors',
+    tenFrames: 'ten frames',
+    problemNumbers: 'problem numbers',
+    cellBorders: 'cell borders',
+    borrowNotation: 'borrow notation',
+    borrowingHints: 'borrowing hints',
+  }
 
   // Operator-specific scaffolds to filter
-  const additionOnlyScaffolds: Array<keyof DisplayRules> = [
-    "carryBoxes",
-    "tenFrames",
-  ];
-  const subtractionOnlyScaffolds: Array<keyof DisplayRules> = [
-    "borrowNotation",
-    "borrowingHints",
-  ];
+  const additionOnlyScaffolds: Array<keyof DisplayRules> = ['carryBoxes', 'tenFrames']
+  const subtractionOnlyScaffolds: Array<keyof DisplayRules> = ['borrowNotation', 'borrowingHints']
 
   for (const key of Object.keys(ruleNames) as Array<keyof DisplayRules>) {
     if (fromRules[key] !== toRules[key]) {
       // Filter out operator-specific scaffolds when not relevant
-      if (operator === "addition" && subtractionOnlyScaffolds.includes(key)) {
-        continue; // Skip subtraction scaffolds for addition-only worksheets
+      if (operator === 'addition' && subtractionOnlyScaffolds.includes(key)) {
+        continue // Skip subtraction scaffolds for addition-only worksheets
       }
-      if (operator === "subtraction" && additionOnlyScaffolds.includes(key)) {
-        continue; // Skip addition scaffolds for subtraction-only worksheets
+      if (operator === 'subtraction' && additionOnlyScaffolds.includes(key)) {
+        continue // Skip addition scaffolds for subtraction-only worksheets
       }
       // For 'mixed' or undefined operator, show all scaffolds
 
-      changes.push(ruleNames[key]);
+      changes.push(ruleNames[key])
     }
   }
 
-  if (changes.length === 0) return "Adjust difficulty";
+  if (changes.length === 0) return 'Adjust difficulty'
   if (changes.length === 1) {
-    return direction === "added" ? `Add ${changes[0]}` : `Reduce ${changes[0]}`;
+    return direction === 'added' ? `Add ${changes[0]}` : `Reduce ${changes[0]}`
   }
-  return direction === "added"
-    ? `Add ${changes.join(", ")}`
-    : `Reduce ${changes.join(", ")}`;
+  return direction === 'added' ? `Add ${changes.join(', ')}` : `Reduce ${changes.join(', ')}`
 }
 
 // =============================================================================
@@ -339,58 +328,52 @@ function describeScaffoldingChange(
  * - Low regrouping + Low scaffolding (pointless - nothing to scaffold)
  */
 function getValidScaffoldingRange(regroupingIdx: number): {
-  min: number;
-  max: number;
+  min: number
+  max: number
 } {
   // No/minimal regrouping (0-2): Need scaffolding to learn structure
   if (regroupingIdx <= 2) {
-    return { min: 0, max: 4 };
+    return { min: 0, max: 4 }
   }
 
   // Light regrouping (3-5): Still need significant scaffolding
   if (regroupingIdx <= 5) {
-    return { min: 0, max: 6 };
+    return { min: 0, max: 6 }
   }
 
   // Light-medium regrouping (6-9): Transitional phase
   if (regroupingIdx <= 9) {
-    return { min: 1, max: 8 };
+    return { min: 1, max: 8 }
   }
 
   // Medium-high regrouping (10-12): Reducing scaffolding, wider range
   if (regroupingIdx <= 12) {
-    return { min: 3, max: 11 };
+    return { min: 3, max: 11 }
   }
 
   // High regrouping (13-15): Can work independently, allow full range
   if (regroupingIdx <= 15) {
-    return { min: 4, max: 12 };
+    return { min: 4, max: 12 }
   }
 
   // Very high regrouping (16-18): Should prefer independence
-  return { min: 6, max: 12 };
+  return { min: 6, max: 12 }
 }
 
 /**
  * Check if a regrouping/scaffolding combination is pedagogically valid
  */
-function isValidCombination(
-  regroupingIdx: number,
-  scaffoldingIdx: number,
-): boolean {
-  const range = getValidScaffoldingRange(regroupingIdx);
-  return scaffoldingIdx >= range.min && scaffoldingIdx <= range.max;
+function isValidCombination(regroupingIdx: number, scaffoldingIdx: number): boolean {
+  const range = getValidScaffoldingRange(regroupingIdx)
+  return scaffoldingIdx >= range.min && scaffoldingIdx <= range.max
 }
 
 /**
  * Clamp scaffolding index to valid range for given regrouping index
  */
-function clampScaffoldingToValidRange(
-  regroupingIdx: number,
-  scaffoldingIdx: number,
-): number {
-  const range = getValidScaffoldingRange(regroupingIdx);
-  return Math.max(range.min, Math.min(range.max, scaffoldingIdx));
+function clampScaffoldingToValidRange(regroupingIdx: number, scaffoldingIdx: number): number {
+  const range = getValidScaffoldingRange(regroupingIdx)
+  return Math.max(range.min, Math.min(range.max, scaffoldingIdx))
 }
 
 /**
@@ -399,33 +382,27 @@ function clampScaffoldingToValidRange(
  */
 export function findNearestValidState(
   regroupingIdx: number,
-  scaffoldingIdx: number,
+  scaffoldingIdx: number
 ): { regroupingIdx: number; scaffoldingIdx: number } {
   // Clamp indices to valid progression ranges
-  const clampedRegrouping = Math.max(
-    0,
-    Math.min(REGROUPING_PROGRESSION.length - 1, regroupingIdx),
-  );
-  const clampedScaffolding = clampScaffoldingToValidRange(
-    clampedRegrouping,
-    scaffoldingIdx,
-  );
+  const clampedRegrouping = Math.max(0, Math.min(REGROUPING_PROGRESSION.length - 1, regroupingIdx))
+  const clampedScaffolding = clampScaffoldingToValidRange(clampedRegrouping, scaffoldingIdx)
 
   return {
     regroupingIdx: clampedRegrouping,
     scaffoldingIdx: clampedScaffolding,
-  };
+  }
 }
 
 export interface DifficultyProfile {
-  name: string;
-  label: string;
-  description: string;
+  name: string
+  label: string
+  description: string
   regrouping: {
-    pAllStart: number;
-    pAnyStart: number;
-  };
-  displayRules: DisplayRules;
+    pAllStart: number
+    pAnyStart: number
+  }
+  displayRules: DisplayRules
 }
 
 /**
@@ -434,110 +411,109 @@ export interface DifficultyProfile {
  */
 export const DIFFICULTY_PROFILES: Record<string, DifficultyProfile> = {
   beginner: {
-    name: "beginner",
-    label: "Beginner",
+    name: 'beginner',
+    label: 'Beginner',
     description:
-      "Full scaffolding with no regrouping. Focus on learning the structure of addition.",
+      'Full scaffolding with no regrouping. Focus on learning the structure of addition.',
     regrouping: { pAllStart: 0, pAnyStart: 0 },
     displayRules: {
-      carryBoxes: "always", // Show structure even when not needed
-      answerBoxes: "always", // Guide digit placement
-      placeValueColors: "always", // Reinforce place value concept
-      tenFrames: "always", // Visual aid for understanding place value
-      problemNumbers: "always", // Help track progress
-      cellBorders: "always", // Visual organization
-      borrowNotation: "always", // Subtraction: show scratch work
-      borrowingHints: "always", // Subtraction: show visual hints
+      carryBoxes: 'always', // Show structure even when not needed
+      answerBoxes: 'always', // Guide digit placement
+      placeValueColors: 'always', // Reinforce place value concept
+      tenFrames: 'always', // Visual aid for understanding place value
+      problemNumbers: 'always', // Help track progress
+      cellBorders: 'always', // Visual organization
+      borrowNotation: 'always', // Subtraction: show scratch work
+      borrowingHints: 'always', // Subtraction: show visual hints
     },
   },
 
   earlyLearner: {
-    name: "earlyLearner",
-    label: "Early Learner",
-    description:
-      "Scaffolds appear when needed. Introduces occasional regrouping.",
+    name: 'earlyLearner',
+    label: 'Early Learner',
+    description: 'Scaffolds appear when needed. Introduces occasional regrouping.',
     regrouping: { pAllStart: 0, pAnyStart: 0.25 },
     displayRules: {
-      carryBoxes: "whenRegrouping", // Show scaffold only when needed
-      answerBoxes: "always", // Still guide placement
-      placeValueColors: "always", // Reinforce concepts
-      tenFrames: "whenRegrouping", // Visual aid for new concept
-      problemNumbers: "always",
-      cellBorders: "always",
-      borrowNotation: "whenRegrouping", // Subtraction: show when borrowing
-      borrowingHints: "always", // Subtraction: keep hints visible
+      carryBoxes: 'whenRegrouping', // Show scaffold only when needed
+      answerBoxes: 'always', // Still guide placement
+      placeValueColors: 'always', // Reinforce concepts
+      tenFrames: 'whenRegrouping', // Visual aid for new concept
+      problemNumbers: 'always',
+      cellBorders: 'always',
+      borrowNotation: 'whenRegrouping', // Subtraction: show when borrowing
+      borrowingHints: 'always', // Subtraction: keep hints visible
     },
   },
 
   practice: {
-    name: "practice",
-    label: "Practice",
+    name: 'practice',
+    label: 'Practice',
     description:
-      "High scaffolding with frequent regrouping. Master regrouping WITH support before training wheels come off.",
+      'High scaffolding with frequent regrouping. Master regrouping WITH support before training wheels come off.',
     regrouping: { pAllStart: 0.25, pAnyStart: 0.75 },
     displayRules: {
-      carryBoxes: "whenRegrouping", // Show when regrouping happens
-      answerBoxes: "always", // Keep guiding placement during intensive practice
-      placeValueColors: "always", // Keep visual support during intensive practice
-      tenFrames: "whenRegrouping", // Visual aid for regrouping
-      problemNumbers: "always",
-      cellBorders: "always",
-      borrowNotation: "whenRegrouping", // Subtraction: show when borrowing
-      borrowingHints: "whenRegrouping", // Subtraction: show hints during practice
+      carryBoxes: 'whenRegrouping', // Show when regrouping happens
+      answerBoxes: 'always', // Keep guiding placement during intensive practice
+      placeValueColors: 'always', // Keep visual support during intensive practice
+      tenFrames: 'whenRegrouping', // Visual aid for regrouping
+      problemNumbers: 'always',
+      cellBorders: 'always',
+      borrowNotation: 'whenRegrouping', // Subtraction: show when borrowing
+      borrowingHints: 'whenRegrouping', // Subtraction: show hints during practice
     },
   },
 
   intermediate: {
-    name: "intermediate",
-    label: "Intermediate",
-    description: "Reduced scaffolding with regular regrouping practice.",
+    name: 'intermediate',
+    label: 'Intermediate',
+    description: 'Reduced scaffolding with regular regrouping practice.',
     regrouping: { pAllStart: 0.25, pAnyStart: 0.75 },
     displayRules: {
-      carryBoxes: "whenRegrouping", // Still helpful for regrouping
-      answerBoxes: "whenMultipleRegroups", // Only for complex problems
-      placeValueColors: "whenRegrouping", // Only when it matters
-      tenFrames: "whenRegrouping", // Concrete aid when needed
-      problemNumbers: "always",
-      cellBorders: "always",
-      borrowNotation: "whenRegrouping", // Subtraction: show when borrowing
-      borrowingHints: "whenMultipleRegroups", // Subtraction: only for complex problems
+      carryBoxes: 'whenRegrouping', // Still helpful for regrouping
+      answerBoxes: 'whenMultipleRegroups', // Only for complex problems
+      placeValueColors: 'whenRegrouping', // Only when it matters
+      tenFrames: 'whenRegrouping', // Concrete aid when needed
+      problemNumbers: 'always',
+      cellBorders: 'always',
+      borrowNotation: 'whenRegrouping', // Subtraction: show when borrowing
+      borrowingHints: 'whenMultipleRegroups', // Subtraction: only for complex problems
     },
   },
 
   advanced: {
-    name: "advanced",
-    label: "Advanced",
-    description: "Minimal scaffolding with frequent complex regrouping.",
+    name: 'advanced',
+    label: 'Advanced',
+    description: 'Minimal scaffolding with frequent complex regrouping.',
     regrouping: { pAllStart: 0.5, pAnyStart: 0.9 },
     displayRules: {
-      carryBoxes: "never", // Should internalize concept
-      answerBoxes: "never", // Should know alignment
-      placeValueColors: "when3PlusDigits", // Only for larger numbers
-      tenFrames: "never", // Beyond concrete representations
-      problemNumbers: "always",
-      cellBorders: "always",
-      borrowNotation: "whenRegrouping", // Subtraction: still helpful
-      borrowingHints: "never", // Subtraction: no hints
+      carryBoxes: 'never', // Should internalize concept
+      answerBoxes: 'never', // Should know alignment
+      placeValueColors: 'when3PlusDigits', // Only for larger numbers
+      tenFrames: 'never', // Beyond concrete representations
+      problemNumbers: 'always',
+      cellBorders: 'always',
+      borrowNotation: 'whenRegrouping', // Subtraction: still helpful
+      borrowingHints: 'never', // Subtraction: no hints
     },
   },
 
   expert: {
-    name: "expert",
-    label: "Expert",
-    description: "No scaffolding. Frequent complex regrouping for mastery.",
+    name: 'expert',
+    label: 'Expert',
+    description: 'No scaffolding. Frequent complex regrouping for mastery.',
     regrouping: { pAllStart: 0.5, pAnyStart: 0.9 },
     displayRules: {
-      carryBoxes: "never",
-      answerBoxes: "never",
-      placeValueColors: "never",
-      tenFrames: "never",
-      problemNumbers: "always",
-      cellBorders: "always",
-      borrowNotation: "never", // Subtraction: no scaffolding
-      borrowingHints: "never", // Subtraction: no hints
+      carryBoxes: 'never',
+      answerBoxes: 'never',
+      placeValueColors: 'never',
+      tenFrames: 'never',
+      problemNumbers: 'always',
+      cellBorders: 'always',
+      borrowNotation: 'never', // Subtraction: no scaffolding
+      borrowingHints: 'never', // Subtraction: no hints
     },
   },
-};
+}
 
 /**
  * Ordered progression of difficulty levels
@@ -545,15 +521,15 @@ export const DIFFICULTY_PROFILES: Record<string, DifficultyProfile> = {
  * WITH scaffolding before we remove support (intermediate/advanced/expert)
  */
 export const DIFFICULTY_PROGRESSION = [
-  "beginner",
-  "earlyLearner",
-  "practice", // NEW: High regrouping + high scaffolding
-  "intermediate",
-  "advanced",
-  "expert",
-] as const;
+  'beginner',
+  'earlyLearner',
+  'practice', // NEW: High regrouping + high scaffolding
+  'intermediate',
+  'advanced',
+  'expert',
+] as const
 
-export type DifficultyLevel = (typeof DIFFICULTY_PROGRESSION)[number];
+export type DifficultyLevel = (typeof DIFFICULTY_PROGRESSION)[number]
 
 // =============================================================================
 // 2D DIFFICULTY SYSTEM: Regrouping Intensity × Scaffolding Level
@@ -563,14 +539,11 @@ export type DifficultyLevel = (typeof DIFFICULTY_PROGRESSION)[number];
  * Calculate regrouping intensity on 0-10 scale
  * Maps probability settings to single dimension
  */
-export function calculateRegroupingIntensity(
-  pAnyStart: number,
-  pAllStart: number,
-): number {
+export function calculateRegroupingIntensity(pAnyStart: number, pAllStart: number): number {
   // pAnyStart (occasional regrouping) contributes 70% of score
   // pAllStart (compound regrouping) contributes 30% of score
   // This reflects pedagogical importance: frequency matters more than compound complexity
-  return pAnyStart * 7 + pAllStart * 3;
+  return pAnyStart * 7 + pAllStart * 3
 }
 
 /**
@@ -578,23 +551,23 @@ export function calculateRegroupingIntensity(
  * Uses pedagogical progression: introduce frequency first, then compound
  */
 function intensityToRegrouping(intensity: number): {
-  pAnyStart: number;
-  pAllStart: number;
+  pAnyStart: number
+  pAllStart: number
 } {
   // Below 5: Focus on pAnyStart, keep pAllStart minimal
   if (intensity <= 5) {
     return {
       pAnyStart: Math.min(intensity / 7, 1),
       pAllStart: 0,
-    };
+    }
   }
 
   // Above 5: pAnyStart near max, start increasing pAllStart
-  const excessIntensity = intensity - 5;
+  const excessIntensity = intensity - 5
   return {
     pAnyStart: Math.min(5 / 7 + excessIntensity / 14, 1),
     pAllStart: Math.min(excessIntensity / 10, 1),
-  };
+  }
 }
 
 /**
@@ -616,7 +589,7 @@ function intensityToRegrouping(intensity: number): {
  */
 export function calculateScaffoldingLevel(
   rules: DisplayRules,
-  regroupingIntensity?: number,
+  regroupingIntensity?: number
 ): number {
   const ruleScores: Record<string, number> = {
     always: 10, // Maximum scaffolding (easiest)
@@ -624,7 +597,7 @@ export function calculateScaffoldingLevel(
     whenMultipleRegroups: 5,
     when3PlusDigits: 3,
     never: 0, // No scaffolding (hardest)
-  };
+  }
 
   const weights = {
     carryBoxes: 1.5, // Most pedagogically important
@@ -633,33 +606,29 @@ export function calculateScaffoldingLevel(
     tenFrames: 1.0, // Concrete visual aid (contextual - see above)
     problemNumbers: 0.2, // Organizational, not scaffolding
     cellBorders: 0.2, // Visual structure, not scaffolding
-  };
+  }
 
   // Determine if tenFrames should be included in calculation
   // When regrouping is minimal, tenFrames isn't pedagogically relevant
-  const includeTenFrames =
-    regroupingIntensity === undefined || regroupingIntensity >= 4;
+  const includeTenFrames = regroupingIntensity === undefined || regroupingIntensity >= 4
 
   const weightedScores = [
     ruleScores[rules.carryBoxes] * weights.carryBoxes,
     ruleScores[rules.answerBoxes] * weights.answerBoxes,
     ruleScores[rules.placeValueColors] * weights.placeValueColors,
-    ...(includeTenFrames
-      ? [ruleScores[rules.tenFrames] * weights.tenFrames]
-      : []),
+    ...(includeTenFrames ? [ruleScores[rules.tenFrames] * weights.tenFrames] : []),
     ruleScores[rules.problemNumbers] * weights.problemNumbers,
     ruleScores[rules.cellBorders] * weights.cellBorders,
-  ];
+  ]
 
   // Recalculate total weight excluding tenFrames if not included
   const totalWeight = includeTenFrames
     ? Object.values(weights).reduce((a, b) => a + b, 0)
-    : Object.values(weights).reduce((a, b) => a + b, 0) - weights.tenFrames;
+    : Object.values(weights).reduce((a, b) => a + b, 0) - weights.tenFrames
 
-  const weightedAverage =
-    weightedScores.reduce((a, b) => a + b, 0) / totalWeight;
+  const weightedAverage = weightedScores.reduce((a, b) => a + b, 0) / totalWeight
 
-  return Math.min(10, Math.max(0, weightedAverage));
+  return Math.min(10, Math.max(0, weightedAverage))
 }
 
 /**
@@ -669,50 +638,48 @@ export function calculateScaffoldingLevel(
 export function calculateOverallDifficulty(
   pAnyStart: number,
   pAllStart: number,
-  displayRules: DisplayRules,
+  displayRules: DisplayRules
 ): number {
-  const regrouping = calculateRegroupingIntensity(pAnyStart, pAllStart);
-  const scaffolding = calculateScaffoldingLevel(displayRules, regrouping);
+  const regrouping = calculateRegroupingIntensity(pAnyStart, pAllStart)
+  const scaffolding = calculateScaffoldingLevel(displayRules, regrouping)
 
-  console.log("[calculateOverallDifficulty]", {
+  console.log('[calculateOverallDifficulty]', {
     pAnyStart,
     pAllStart,
     regrouping,
     scaffolding,
     displayRules,
-  });
+  })
 
   // Pedagogical path: start at (0, 10) [no regrouping, all scaffolding]
   //                    end at (10, 0) [all regrouping, no scaffolding]
   // Use Euclidean distance to measure progress along this diagonal path
 
-  const startPoint = { regrouping: 0, scaffolding: 10 };
-  const endPoint = { regrouping: 10, scaffolding: 0 };
+  const startPoint = { regrouping: 0, scaffolding: 10 }
+  const endPoint = { regrouping: 10, scaffolding: 0 }
 
   // Distance from start to current position
   const distFromStart = Math.sqrt(
-    (regrouping - startPoint.regrouping) ** 2 +
-      (scaffolding - startPoint.scaffolding) ** 2,
-  );
+    (regrouping - startPoint.regrouping) ** 2 + (scaffolding - startPoint.scaffolding) ** 2
+  )
 
   // Distance from end to current position
   const distFromEnd = Math.sqrt(
-    (regrouping - endPoint.regrouping) ** 2 +
-      (scaffolding - endPoint.scaffolding) ** 2,
-  );
+    (regrouping - endPoint.regrouping) ** 2 + (scaffolding - endPoint.scaffolding) ** 2
+  )
 
   // Progress ratio: 0 at start, 1 at end
-  const progress = distFromStart / (distFromStart + distFromEnd);
+  const progress = distFromStart / (distFromStart + distFromEnd)
 
-  console.log("[calculateOverallDifficulty] distances:", {
+  console.log('[calculateOverallDifficulty] distances:', {
     distFromStart,
     distFromEnd,
     progress,
     result: progress * 10,
-  });
+  })
 
   // Scale to 0-10 range
-  return progress * 10;
+  return progress * 10
 }
 
 /**
@@ -723,82 +690,77 @@ function levelToScaffoldingRules(level: number): DisplayRules {
   // Level 0-2: Full scaffolding
   if (level <= 2) {
     return {
-      carryBoxes: "always",
-      answerBoxes: "always",
-      placeValueColors: "always",
-      tenFrames: level < 1 ? "never" : "whenRegrouping", // Ten-frames only when regrouping introduced
-      problemNumbers: "always",
-      cellBorders: "always",
-      borrowNotation: "always",
-      borrowingHints: "always",
-    };
+      carryBoxes: 'always',
+      answerBoxes: 'always',
+      placeValueColors: 'always',
+      tenFrames: level < 1 ? 'never' : 'whenRegrouping', // Ten-frames only when regrouping introduced
+      problemNumbers: 'always',
+      cellBorders: 'always',
+      borrowNotation: 'always',
+      borrowingHints: 'always',
+    }
   }
 
   // Level 2-4: Transition to conditional
   if (level <= 4) {
     return {
-      carryBoxes: "whenRegrouping",
-      answerBoxes: "always",
-      placeValueColors: "always",
-      tenFrames: "whenRegrouping",
-      problemNumbers: "always",
-      cellBorders: "always",
-      borrowNotation: "whenRegrouping",
-      borrowingHints: "always",
-    };
+      carryBoxes: 'whenRegrouping',
+      answerBoxes: 'always',
+      placeValueColors: 'always',
+      tenFrames: 'whenRegrouping',
+      problemNumbers: 'always',
+      cellBorders: 'always',
+      borrowNotation: 'whenRegrouping',
+      borrowingHints: 'always',
+    }
   }
 
   // Level 4-6: Reduce non-critical scaffolds
   if (level <= 6) {
     return {
-      carryBoxes: "whenRegrouping",
-      answerBoxes: level < 5.5 ? "always" : "whenMultipleRegroups",
-      placeValueColors: "whenRegrouping",
-      tenFrames: "whenRegrouping",
-      problemNumbers: "always",
-      cellBorders: "always",
-      borrowNotation: "whenRegrouping",
-      borrowingHints: level < 5.5 ? "whenRegrouping" : "whenMultipleRegroups",
-    };
+      carryBoxes: 'whenRegrouping',
+      answerBoxes: level < 5.5 ? 'always' : 'whenMultipleRegroups',
+      placeValueColors: 'whenRegrouping',
+      tenFrames: 'whenRegrouping',
+      problemNumbers: 'always',
+      cellBorders: 'always',
+      borrowNotation: 'whenRegrouping',
+      borrowingHints: level < 5.5 ? 'whenRegrouping' : 'whenMultipleRegroups',
+    }
   }
 
   // Level 6-8: Remove critical scaffolds
   if (level <= 8) {
     return {
-      carryBoxes: level < 7 ? "whenRegrouping" : "never",
-      answerBoxes: "never",
-      placeValueColors: level < 7.5 ? "whenRegrouping" : "when3PlusDigits",
-      tenFrames: "never",
-      problemNumbers: "always",
-      cellBorders: "always",
-      borrowNotation: "whenRegrouping",
-      borrowingHints: "never",
-    };
+      carryBoxes: level < 7 ? 'whenRegrouping' : 'never',
+      answerBoxes: 'never',
+      placeValueColors: level < 7.5 ? 'whenRegrouping' : 'when3PlusDigits',
+      tenFrames: 'never',
+      problemNumbers: 'always',
+      cellBorders: 'always',
+      borrowNotation: 'whenRegrouping',
+      borrowingHints: 'never',
+    }
   }
 
   // Level 8-10: Minimal to no scaffolding
   return {
-    carryBoxes: "never",
-    answerBoxes: "never",
-    placeValueColors: level < 9 ? "when3PlusDigits" : "never",
-    tenFrames: "never",
-    problemNumbers: "always",
-    cellBorders: "always",
-    borrowNotation: level < 9 ? "whenRegrouping" : "never",
-    borrowingHints: "never",
-  };
+    carryBoxes: 'never',
+    answerBoxes: 'never',
+    placeValueColors: level < 9 ? 'when3PlusDigits' : 'never',
+    tenFrames: 'never',
+    problemNumbers: 'always',
+    cellBorders: 'always',
+    borrowNotation: level < 9 ? 'whenRegrouping' : 'never',
+    borrowingHints: 'never',
+  }
 }
 
 /**
  * Calculate Euclidean distance between two points in difficulty space
  */
-function difficultyDistance(
-  reg1: number,
-  scaf1: number,
-  reg2: number,
-  scaf2: number,
-): number {
-  return Math.sqrt((reg1 - reg2) ** 2 + (scaf1 - scaf2) ** 2);
+function difficultyDistance(reg1: number, scaf1: number, reg2: number, scaf2: number): number {
+  return Math.sqrt((reg1 - reg2) ** 2 + (scaf1 - scaf2) ** 2)
 }
 
 /**
@@ -808,24 +770,21 @@ function difficultyDistance(
 export function findNearestPreset(
   currentRegrouping: number,
   currentScaffolding: number,
-  direction: "harder" | "easier" | "any",
+  direction: 'harder' | 'easier' | 'any'
 ): { profile: DifficultyProfile; distance: number } | null {
   const candidates = DIFFICULTY_PROGRESSION.map((name) => {
-    const profile = DIFFICULTY_PROFILES[name];
+    const profile = DIFFICULTY_PROFILES[name]
     const regrouping = calculateRegroupingIntensity(
       profile.regrouping.pAnyStart,
-      profile.regrouping.pAllStart,
-    );
-    const scaffolding = calculateScaffoldingLevel(
-      profile.displayRules,
-      regrouping,
-    );
+      profile.regrouping.pAllStart
+    )
+    const scaffolding = calculateScaffoldingLevel(profile.displayRules, regrouping)
     const distance = difficultyDistance(
       currentRegrouping,
       currentScaffolding,
       regrouping,
-      scaffolding,
-    );
+      scaffolding
+    )
 
     // Calculate if this preset is harder or easier
     // Harder = not easier in ANY dimension AND harder in AT LEAST ONE dimension
@@ -833,33 +792,33 @@ export function findNearestPreset(
     const isHarder =
       regrouping >= currentRegrouping &&
       scaffolding >= currentScaffolding &&
-      (regrouping > currentRegrouping || scaffolding > currentScaffolding);
+      (regrouping > currentRegrouping || scaffolding > currentScaffolding)
 
     // Easier = not harder in ANY dimension AND easier in AT LEAST ONE dimension
     const isEasier =
       regrouping <= currentRegrouping &&
       scaffolding <= currentScaffolding &&
-      (regrouping < currentRegrouping || scaffolding < currentScaffolding);
+      (regrouping < currentRegrouping || scaffolding < currentScaffolding)
 
-    return { profile, distance, regrouping, scaffolding, isHarder, isEasier };
-  });
+    return { profile, distance, regrouping, scaffolding, isHarder, isEasier }
+  })
 
   // Filter by direction
   const filtered = candidates.filter((c) => {
-    if (direction === "any") return true;
-    if (direction === "harder") return c.isHarder;
-    if (direction === "easier") return c.isEasier;
-    return false;
-  });
+    if (direction === 'any') return true
+    if (direction === 'harder') return c.isHarder
+    if (direction === 'easier') return c.isEasier
+    return false
+  })
 
-  if (filtered.length === 0) return null;
+  if (filtered.length === 0) return null
 
   // Find closest
-  const nearest = filtered.reduce((a, b) => (a.distance < b.distance ? a : b));
-  return { profile: nearest.profile, distance: nearest.distance };
+  const nearest = filtered.reduce((a, b) => (a.distance < b.distance ? a : b))
+  return { profile: nearest.profile, distance: nearest.distance }
 }
 
-export type DifficultyMode = "both" | "challenge" | "support";
+export type DifficultyMode = 'both' | 'challenge' | 'support'
 
 /**
  * Make worksheet harder using discrete progression indices with pedagogical constraints
@@ -876,33 +835,27 @@ export type DifficultyMode = "both" | "challenge" | "support";
  */
 export function makeHarder(
   currentState: {
-    pAnyStart: number;
-    pAllStart: number;
-    displayRules: DisplayRules;
+    pAnyStart: number
+    pAllStart: number
+    displayRules: DisplayRules
   },
-  mode: DifficultyMode = "both",
-  operator?: "addition" | "subtraction" | "mixed",
+  mode: DifficultyMode = 'both',
+  operator?: 'addition' | 'subtraction' | 'mixed'
 ): {
-  pAnyStart: number;
-  pAllStart: number;
-  displayRules: DisplayRules;
-  difficultyProfile?: string;
-  changeDescription: string;
+  pAnyStart: number
+  pAllStart: number
+  displayRules: DisplayRules
+  difficultyProfile?: string
+  changeDescription: string
 } {
   // Find current indices in discrete progressions
-  const currentRegroupingIdx = findRegroupingIndex(
-    currentState.pAnyStart,
-    currentState.pAllStart,
-  );
-  const currentScaffoldingIdx = findScaffoldingIndex(currentState.displayRules);
+  const currentRegroupingIdx = findRegroupingIndex(currentState.pAnyStart, currentState.pAllStart)
+  const currentScaffoldingIdx = findScaffoldingIndex(currentState.displayRules)
 
   // Ensure current state is valid (adjust if needed)
-  const validCurrent = findNearestValidState(
-    currentRegroupingIdx,
-    currentScaffoldingIdx,
-  );
-  let newRegroupingIdx = validCurrent.regroupingIdx;
-  let newScaffoldingIdx = validCurrent.scaffoldingIdx;
+  const validCurrent = findNearestValidState(currentRegroupingIdx, currentScaffoldingIdx)
+  let newRegroupingIdx = validCurrent.regroupingIdx
+  let newScaffoldingIdx = validCurrent.scaffoldingIdx
 
   // Check if at maximum
   if (
@@ -911,67 +864,60 @@ export function makeHarder(
   ) {
     return {
       ...currentState,
-      changeDescription: "Already at maximum difficulty",
-    };
+      changeDescription: 'Already at maximum difficulty',
+    }
   }
 
   // Calculate current position in 2D difficulty space
   const currentRegrouping = calculateRegroupingIntensity(
     currentState.pAnyStart,
-    currentState.pAllStart,
-  );
-  const currentScaffolding = calculateScaffoldingLevel(
-    currentState.displayRules,
-    currentRegrouping,
-  );
+    currentState.pAllStart
+  )
+  const currentScaffolding = calculateScaffoldingLevel(currentState.displayRules, currentRegrouping)
 
   // Try to move based on mode
-  let moved = false;
+  let moved = false
 
-  if (mode === "challenge") {
+  if (mode === 'challenge') {
     // Only increase regrouping (more complex problems)
     if (newRegroupingIdx < REGROUPING_PROGRESSION.length - 1) {
-      const testRegroupingIdx = newRegroupingIdx + 1;
+      const testRegroupingIdx = newRegroupingIdx + 1
       const adjustedScaffoldingIdx = clampScaffoldingToValidRange(
         testRegroupingIdx,
-        newScaffoldingIdx,
-      );
-      newRegroupingIdx = testRegroupingIdx;
-      newScaffoldingIdx = adjustedScaffoldingIdx;
-      moved = true;
+        newScaffoldingIdx
+      )
+      newRegroupingIdx = testRegroupingIdx
+      newScaffoldingIdx = adjustedScaffoldingIdx
+      moved = true
     }
-  } else if (mode === "support") {
+  } else if (mode === 'support') {
     // Only reduce scaffolding (remove help)
     if (
       newScaffoldingIdx < SCAFFOLDING_PROGRESSION.length - 1 &&
       isValidCombination(newRegroupingIdx, newScaffoldingIdx + 1)
     ) {
-      newScaffoldingIdx++;
-      moved = true;
+      newScaffoldingIdx++
+      moved = true
     }
   } else {
     // mode === 'both': Smart diagonal navigation toward preset
     // Find nearest harder preset to guide direction
-    const nearestPreset = findNearestPreset(
-      currentRegrouping,
-      currentScaffolding,
-      "harder",
-    );
+    const nearestPreset = findNearestPreset(currentRegrouping, currentScaffolding, 'harder')
 
     if (nearestPreset) {
       // Calculate target position from preset
       const targetRegrouping = calculateRegroupingIntensity(
         nearestPreset.profile.regrouping.pAnyStart,
-        nearestPreset.profile.regrouping.pAllStart,
-      );
+        nearestPreset.profile.regrouping.pAllStart
+      )
       const targetScaffolding = calculateScaffoldingLevel(
         nearestPreset.profile.displayRules,
-        targetRegrouping,
-      );
+        targetRegrouping
+      )
 
       // Calculate gaps in both dimensions
-      const regroupingGap = targetRegrouping - currentRegrouping;
-      const scaffoldingGap = targetScaffolding - currentScaffolding;
+      const regroupingGap = targetRegrouping - currentRegrouping
+      const scaffoldingGap = targetScaffolding - currentScaffolding
 
       // Try dimension with larger gap first
       if (
@@ -979,20 +925,20 @@ export function makeHarder(
         newRegroupingIdx < REGROUPING_PROGRESSION.length - 1
       ) {
         // Try increasing regrouping
-        const testRegroupingIdx = newRegroupingIdx + 1;
+        const testRegroupingIdx = newRegroupingIdx + 1
         const adjustedScaffoldingIdx = clampScaffoldingToValidRange(
           testRegroupingIdx,
-          newScaffoldingIdx,
-        );
-        newRegroupingIdx = testRegroupingIdx;
-        newScaffoldingIdx = adjustedScaffoldingIdx;
-        moved = true;
+          newScaffoldingIdx
+        )
+        newRegroupingIdx = testRegroupingIdx
+        newScaffoldingIdx = adjustedScaffoldingIdx
+        moved = true
       } else if (newScaffoldingIdx < SCAFFOLDING_PROGRESSION.length - 1) {
         // Try increasing scaffolding (reducing help)
-        const testScaffoldingIdx = newScaffoldingIdx + 1;
+        const testScaffoldingIdx = newScaffoldingIdx + 1
         if (isValidCombination(newRegroupingIdx, testScaffoldingIdx)) {
-          newScaffoldingIdx = testScaffoldingIdx;
-          moved = true;
+          newScaffoldingIdx = testScaffoldingIdx
+          moved = true
         }
       }
     }
@@ -1002,20 +948,17 @@ export function makeHarder(
     if (!moved) {
       // Try increasing regrouping (complexity) first
       if (newRegroupingIdx < REGROUPING_PROGRESSION.length - 1) {
-        newRegroupingIdx++;
-        newScaffoldingIdx = clampScaffoldingToValidRange(
-          newRegroupingIdx,
-          newScaffoldingIdx,
-        );
-        moved = true;
+        newRegroupingIdx++
+        newScaffoldingIdx = clampScaffoldingToValidRange(newRegroupingIdx, newScaffoldingIdx)
+        moved = true
       }
       // Otherwise try increasing scaffolding (removing help)
       else if (
         newScaffoldingIdx < SCAFFOLDING_PROGRESSION.length - 1 &&
         isValidCombination(newRegroupingIdx, newScaffoldingIdx + 1)
       ) {
-        newScaffoldingIdx++;
-        moved = true;
+        newScaffoldingIdx++
+        moved = true
       }
     }
   }
@@ -1023,16 +966,16 @@ export function makeHarder(
   if (!moved) {
     return {
       ...currentState,
-      changeDescription: "Already at maximum difficulty",
-    };
+      changeDescription: 'Already at maximum difficulty',
+    }
   }
 
   // Get new values from progressions
-  const newRegrouping = REGROUPING_PROGRESSION[newRegroupingIdx];
-  const newRules = SCAFFOLDING_PROGRESSION[newScaffoldingIdx];
+  const newRegrouping = REGROUPING_PROGRESSION[newRegroupingIdx]
+  const newRules = SCAFFOLDING_PROGRESSION[newScaffoldingIdx]
 
   // Generate description
-  let description = "";
+  let description = ''
   if (
     newRegroupingIdx > validCurrent.regroupingIdx &&
     newScaffoldingIdx > validCurrent.scaffoldingIdx
@@ -1040,44 +983,44 @@ export function makeHarder(
     const scaffoldingChange = describeScaffoldingChange(
       currentState.displayRules,
       newRules,
-      "reduced",
-      operator,
-    );
-    description = `Increase regrouping to ${Math.round(newRegrouping.pAnyStart * 100)}% + ${scaffoldingChange.toLowerCase()}`;
+      'reduced',
+      operator
+    )
+    description = `Increase regrouping to ${Math.round(newRegrouping.pAnyStart * 100)}% + ${scaffoldingChange.toLowerCase()}`
   } else if (newRegroupingIdx > validCurrent.regroupingIdx) {
-    description = `Increase regrouping to ${Math.round(newRegrouping.pAnyStart * 100)}%`;
+    description = `Increase regrouping to ${Math.round(newRegrouping.pAnyStart * 100)}%`
     if (newScaffoldingIdx !== validCurrent.scaffoldingIdx) {
       const scaffoldingChange = describeScaffoldingChange(
         currentState.displayRules,
         newRules,
-        newScaffoldingIdx < validCurrent.scaffoldingIdx ? "added" : "reduced",
-        operator,
-      );
-      description += ` (auto-adjust: ${scaffoldingChange.toLowerCase()})`;
+        newScaffoldingIdx < validCurrent.scaffoldingIdx ? 'added' : 'reduced',
+        operator
+      )
+      description += ` (auto-adjust: ${scaffoldingChange.toLowerCase()})`
     }
   } else if (newScaffoldingIdx > validCurrent.scaffoldingIdx) {
     description = describeScaffoldingChange(
       currentState.displayRules,
       newRules,
-      "reduced",
-      operator,
-    );
+      'reduced',
+      operator
+    )
   }
 
   // Check if result matches a preset
   const matchedProfile = getProfileFromConfig(
     newRegrouping.pAllStart,
     newRegrouping.pAnyStart,
-    newRules,
-  );
+    newRules
+  )
 
   return {
     pAnyStart: newRegrouping.pAnyStart,
     pAllStart: newRegrouping.pAllStart,
     displayRules: newRules,
-    difficultyProfile: matchedProfile !== "custom" ? matchedProfile : undefined,
+    difficultyProfile: matchedProfile !== 'custom' ? matchedProfile : undefined,
     changeDescription: description,
-  };
+  }
 }
 
 /**
@@ -1095,120 +1038,101 @@ export function makeHarder(
  */
 export function makeEasier(
   currentState: {
-    pAnyStart: number;
-    pAllStart: number;
-    displayRules: DisplayRules;
+    pAnyStart: number
+    pAllStart: number
+    displayRules: DisplayRules
   },
-  mode: DifficultyMode = "both",
-  operator?: "addition" | "subtraction" | "mixed",
+  mode: DifficultyMode = 'both',
+  operator?: 'addition' | 'subtraction' | 'mixed'
 ): {
-  pAnyStart: number;
-  pAllStart: number;
-  displayRules: DisplayRules;
-  difficultyProfile?: string;
-  changeDescription: string;
+  pAnyStart: number
+  pAllStart: number
+  displayRules: DisplayRules
+  difficultyProfile?: string
+  changeDescription: string
 } {
   // Find current indices in discrete progressions
-  const currentRegroupingIdx = findRegroupingIndex(
-    currentState.pAnyStart,
-    currentState.pAllStart,
-  );
-  const currentScaffoldingIdx = findScaffoldingIndex(currentState.displayRules);
+  const currentRegroupingIdx = findRegroupingIndex(currentState.pAnyStart, currentState.pAllStart)
+  const currentScaffoldingIdx = findScaffoldingIndex(currentState.displayRules)
 
   // Ensure current state is valid (adjust if needed)
-  const validCurrent = findNearestValidState(
-    currentRegroupingIdx,
-    currentScaffoldingIdx,
-  );
-  let newRegroupingIdx = validCurrent.regroupingIdx;
-  let newScaffoldingIdx = validCurrent.scaffoldingIdx;
+  const validCurrent = findNearestValidState(currentRegroupingIdx, currentScaffoldingIdx)
+  let newRegroupingIdx = validCurrent.regroupingIdx
+  let newScaffoldingIdx = validCurrent.scaffoldingIdx
 
   // Check if at minimum
   if (newRegroupingIdx === 0 && newScaffoldingIdx === 0) {
     return {
       ...currentState,
-      changeDescription: "Already at minimum difficulty",
-    };
+      changeDescription: 'Already at minimum difficulty',
+    }
   }
 
   // Calculate current position in 2D difficulty space
   const currentRegrouping = calculateRegroupingIntensity(
     currentState.pAnyStart,
-    currentState.pAllStart,
-  );
-  const currentScaffolding = calculateScaffoldingLevel(
-    currentState.displayRules,
-    currentRegrouping,
-  );
+    currentState.pAllStart
+  )
+  const currentScaffolding = calculateScaffoldingLevel(currentState.displayRules, currentRegrouping)
 
   // Try to move based on mode
-  let moved = false;
+  let moved = false
 
-  if (mode === "challenge") {
+  if (mode === 'challenge') {
     // Only decrease regrouping (simpler problems)
     if (newRegroupingIdx > 0) {
-      const testRegroupingIdx = newRegroupingIdx - 1;
+      const testRegroupingIdx = newRegroupingIdx - 1
       const adjustedScaffoldingIdx = clampScaffoldingToValidRange(
         testRegroupingIdx,
-        newScaffoldingIdx,
-      );
-      newRegroupingIdx = testRegroupingIdx;
-      newScaffoldingIdx = adjustedScaffoldingIdx;
-      moved = true;
+        newScaffoldingIdx
+      )
+      newRegroupingIdx = testRegroupingIdx
+      newScaffoldingIdx = adjustedScaffoldingIdx
+      moved = true
     }
-  } else if (mode === "support") {
+  } else if (mode === 'support') {
     // Only increase scaffolding (add help)
-    if (
-      newScaffoldingIdx > 0 &&
-      isValidCombination(newRegroupingIdx, newScaffoldingIdx - 1)
-    ) {
-      newScaffoldingIdx--;
-      moved = true;
+    if (newScaffoldingIdx > 0 && isValidCombination(newRegroupingIdx, newScaffoldingIdx - 1)) {
+      newScaffoldingIdx--
+      moved = true
     }
   } else {
     // mode === 'both': Smart diagonal navigation toward preset
     // Find nearest easier preset to guide direction
-    const nearestPreset = findNearestPreset(
-      currentRegrouping,
-      currentScaffolding,
-      "easier",
-    );
+    const nearestPreset = findNearestPreset(currentRegrouping, currentScaffolding, 'easier')
 
     if (nearestPreset) {
       // Calculate target position from preset
       const targetRegrouping = calculateRegroupingIntensity(
         nearestPreset.profile.regrouping.pAnyStart,
-        nearestPreset.profile.regrouping.pAllStart,
-      );
+        nearestPreset.profile.regrouping.pAllStart
+      )
       const targetScaffolding = calculateScaffoldingLevel(
         nearestPreset.profile.displayRules,
-        targetRegrouping,
-      );
+        targetRegrouping
+      )
 
       // Calculate gaps in both dimensions
-      const regroupingGap = targetRegrouping - currentRegrouping;
-      const scaffoldingGap = targetScaffolding - currentScaffolding;
+      const regroupingGap = targetRegrouping - currentRegrouping
+      const scaffoldingGap = targetScaffolding - currentScaffolding
 
       // Try dimension with larger gap first
-      if (
-        Math.abs(regroupingGap) > Math.abs(scaffoldingGap) &&
-        newRegroupingIdx > 0
-      ) {
+      if (Math.abs(regroupingGap) > Math.abs(scaffoldingGap) && newRegroupingIdx > 0) {
         // Try decreasing regrouping
-        const testRegroupingIdx = newRegroupingIdx - 1;
+        const testRegroupingIdx = newRegroupingIdx - 1
         const adjustedScaffoldingIdx = clampScaffoldingToValidRange(
           testRegroupingIdx,
-          newScaffoldingIdx,
-        );
-        newRegroupingIdx = testRegroupingIdx;
-        newScaffoldingIdx = adjustedScaffoldingIdx;
-        moved = true;
+          newScaffoldingIdx
+        )
+        newRegroupingIdx = testRegroupingIdx
+        newScaffoldingIdx = adjustedScaffoldingIdx
+        moved = true
       } else if (newScaffoldingIdx > 0) {
         // Try decreasing scaffolding (adding help)
-        const testScaffoldingIdx = newScaffoldingIdx - 1;
+        const testScaffoldingIdx = newScaffoldingIdx - 1
         if (isValidCombination(newRegroupingIdx, testScaffoldingIdx)) {
-          newScaffoldingIdx = testScaffoldingIdx;
-          moved = true;
+          newScaffoldingIdx = testScaffoldingIdx
+          moved = true
         }
       }
     }
@@ -1217,22 +1141,16 @@ export function makeEasier(
     // Per spec: makeEasier should add support (scaffolding) first, then reduce complexity (regrouping)
     if (!moved) {
       // Try decreasing scaffolding (adding help) first
-      if (
-        newScaffoldingIdx > 0 &&
-        isValidCombination(newRegroupingIdx, newScaffoldingIdx - 1)
-      ) {
-        newScaffoldingIdx--;
-        moved = true;
+      if (newScaffoldingIdx > 0 && isValidCombination(newRegroupingIdx, newScaffoldingIdx - 1)) {
+        newScaffoldingIdx--
+        moved = true
       }
       // Otherwise try decreasing regrouping (reducing complexity)
       else if (newRegroupingIdx > 0) {
-        const testRegroupingIdx = newRegroupingIdx - 1;
-        newRegroupingIdx = testRegroupingIdx;
-        newScaffoldingIdx = clampScaffoldingToValidRange(
-          testRegroupingIdx,
-          newScaffoldingIdx,
-        );
-        moved = true;
+        const testRegroupingIdx = newRegroupingIdx - 1
+        newRegroupingIdx = testRegroupingIdx
+        newScaffoldingIdx = clampScaffoldingToValidRange(testRegroupingIdx, newScaffoldingIdx)
+        moved = true
       }
     }
   }
@@ -1240,16 +1158,16 @@ export function makeEasier(
   if (!moved) {
     return {
       ...currentState,
-      changeDescription: "Already at minimum difficulty",
-    };
+      changeDescription: 'Already at minimum difficulty',
+    }
   }
 
   // Get new values from progressions
-  const newRegrouping = REGROUPING_PROGRESSION[newRegroupingIdx];
-  const newRules = SCAFFOLDING_PROGRESSION[newScaffoldingIdx];
+  const newRegrouping = REGROUPING_PROGRESSION[newRegroupingIdx]
+  const newRules = SCAFFOLDING_PROGRESSION[newScaffoldingIdx]
 
   // Generate description
-  let description = "";
+  let description = ''
   if (
     newRegroupingIdx < validCurrent.regroupingIdx &&
     newScaffoldingIdx < validCurrent.scaffoldingIdx
@@ -1257,44 +1175,39 @@ export function makeEasier(
     const scaffoldingChange = describeScaffoldingChange(
       currentState.displayRules,
       newRules,
-      "added",
-      operator,
-    );
-    description = `Reduce regrouping to ${Math.round(newRegrouping.pAnyStart * 100)}% + ${scaffoldingChange.toLowerCase()}`;
+      'added',
+      operator
+    )
+    description = `Reduce regrouping to ${Math.round(newRegrouping.pAnyStart * 100)}% + ${scaffoldingChange.toLowerCase()}`
   } else if (newRegroupingIdx < validCurrent.regroupingIdx) {
-    description = `Reduce regrouping to ${Math.round(newRegrouping.pAnyStart * 100)}%`;
+    description = `Reduce regrouping to ${Math.round(newRegrouping.pAnyStart * 100)}%`
     if (newScaffoldingIdx !== validCurrent.scaffoldingIdx) {
       const scaffoldingChange = describeScaffoldingChange(
         currentState.displayRules,
         newRules,
-        newScaffoldingIdx < validCurrent.scaffoldingIdx ? "added" : "reduced",
-        operator,
-      );
-      description += ` (auto-adjust: ${scaffoldingChange.toLowerCase()})`;
+        newScaffoldingIdx < validCurrent.scaffoldingIdx ? 'added' : 'reduced',
+        operator
+      )
+      description += ` (auto-adjust: ${scaffoldingChange.toLowerCase()})`
     }
   } else if (newScaffoldingIdx < validCurrent.scaffoldingIdx) {
-    description = describeScaffoldingChange(
-      currentState.displayRules,
-      newRules,
-      "added",
-      operator,
-    );
+    description = describeScaffoldingChange(currentState.displayRules, newRules, 'added', operator)
   }
 
   // Check if result matches a preset
   const matchedProfile = getProfileFromConfig(
     newRegrouping.pAllStart,
     newRegrouping.pAnyStart,
-    newRules,
-  );
+    newRules
+  )
 
   return {
     pAnyStart: newRegrouping.pAnyStart,
     pAllStart: newRegrouping.pAllStart,
     displayRules: newRules,
-    difficultyProfile: matchedProfile !== "custom" ? matchedProfile : undefined,
+    difficultyProfile: matchedProfile !== 'custom' ? matchedProfile : undefined,
     changeDescription: description,
-  };
+  }
 }
 
 /**
@@ -1303,22 +1216,21 @@ export function makeEasier(
 export function getProfileFromConfig(
   pAllStart: number,
   pAnyStart: number,
-  displayRules?: DisplayRules,
+  displayRules?: DisplayRules
 ): string {
-  if (!displayRules) return "custom";
+  if (!displayRules) return 'custom'
 
   for (const profile of Object.values(DIFFICULTY_PROFILES)) {
     const regroupMatch =
       Math.abs(profile.regrouping.pAllStart - pAllStart) < 0.05 &&
-      Math.abs(profile.regrouping.pAnyStart - pAnyStart) < 0.05;
+      Math.abs(profile.regrouping.pAnyStart - pAnyStart) < 0.05
 
-    const rulesMatch =
-      JSON.stringify(profile.displayRules) === JSON.stringify(displayRules);
+    const rulesMatch = JSON.stringify(profile.displayRules) === JSON.stringify(displayRules)
 
     if (regroupMatch && rulesMatch) {
-      return profile.name;
+      return profile.name
     }
   }
 
-  return "custom";
+  return 'custom'
 }
diff --git a/apps/web/src/app/create/worksheets/addition/displayRules.ts b/apps/web/src/app/create/worksheets/addition/displayRules.ts
index 4cce28b6..767a2c86 100644
--- a/apps/web/src/app/create/worksheets/addition/displayRules.ts
+++ b/apps/web/src/app/create/worksheets/addition/displayRules.ts
@@ -1,36 +1,36 @@
 // Display rules for conditional per-problem scaffolding
 
-import type { ProblemMeta, SubtractionProblemMeta } from "./problemAnalysis";
+import type { ProblemMeta, SubtractionProblemMeta } from './problemAnalysis'
 
-export type AnyProblemMeta = ProblemMeta | SubtractionProblemMeta;
+export type AnyProblemMeta = ProblemMeta | SubtractionProblemMeta
 
 export type RuleMode =
-  | "always" // Always show this display option
-  | "never" // Never show this display option
-  | "whenRegrouping" // Show when problem requires any regrouping
-  | "whenMultipleRegroups" // Show when 2+ place values regroup
-  | "when3PlusDigits"; // Show when maxDigits >= 3
+  | 'always' // Always show this display option
+  | 'never' // Never show this display option
+  | 'whenRegrouping' // Show when problem requires any regrouping
+  | 'whenMultipleRegroups' // Show when 2+ place values regroup
+  | 'when3PlusDigits' // Show when maxDigits >= 3
 
 export interface DisplayRules {
-  carryBoxes: RuleMode;
-  answerBoxes: RuleMode;
-  placeValueColors: RuleMode;
-  tenFrames: RuleMode;
-  problemNumbers: RuleMode;
-  cellBorders: RuleMode;
-  borrowNotation: RuleMode; // Subtraction: scratch boxes showing borrowed 10s
-  borrowingHints: RuleMode; // Subtraction: arrows and visual hints
+  carryBoxes: RuleMode
+  answerBoxes: RuleMode
+  placeValueColors: RuleMode
+  tenFrames: RuleMode
+  problemNumbers: RuleMode
+  cellBorders: RuleMode
+  borrowNotation: RuleMode // Subtraction: scratch boxes showing borrowed 10s
+  borrowingHints: RuleMode // Subtraction: arrows and visual hints
 }
 
 export interface ResolvedDisplayOptions {
-  showCarryBoxes: boolean;
-  showAnswerBoxes: boolean;
-  showPlaceValueColors: boolean;
-  showTenFrames: boolean;
-  showProblemNumbers: boolean;
-  showCellBorder: boolean;
-  showBorrowNotation: boolean; // Subtraction: scratch work boxes in minuend
-  showBorrowingHints: boolean; // Subtraction: hints with arrows
+  showCarryBoxes: boolean
+  showAnswerBoxes: boolean
+  showPlaceValueColors: boolean
+  showTenFrames: boolean
+  showProblemNumbers: boolean
+  showCellBorder: boolean
+  showBorrowNotation: boolean // Subtraction: scratch work boxes in minuend
+  showBorrowingHints: boolean // Subtraction: hints with arrows
 }
 
 /**
@@ -39,26 +39,24 @@ export interface ResolvedDisplayOptions {
  */
 export function evaluateRule(mode: RuleMode, problem: AnyProblemMeta): boolean {
   switch (mode) {
-    case "always":
-      return true;
+    case 'always':
+      return true
 
-    case "never":
-      return false;
+    case 'never':
+      return false
 
-    case "whenRegrouping":
+    case 'whenRegrouping':
       // Works for both: requiresRegrouping (addition) or requiresBorrowing (subtraction)
-      return "requiresRegrouping" in problem
+      return 'requiresRegrouping' in problem
         ? problem.requiresRegrouping
-        : problem.requiresBorrowing;
+        : problem.requiresBorrowing
 
-    case "whenMultipleRegroups":
+    case 'whenMultipleRegroups':
       // Works for both: regroupCount (addition) or borrowCount (subtraction)
-      return "regroupCount" in problem
-        ? problem.regroupCount >= 2
-        : problem.borrowCount >= 2;
+      return 'regroupCount' in problem ? problem.regroupCount >= 2 : problem.borrowCount >= 2
 
-    case "when3PlusDigits":
-      return problem.maxDigits >= 3;
+    case 'when3PlusDigits':
+      return problem.maxDigits >= 3
   }
 }
 
@@ -68,11 +66,8 @@ export function evaluateRule(mode: RuleMode, problem: AnyProblemMeta): boolean {
  */
 export function resolveDisplayForProblem(
   rules: DisplayRules,
-  problem: AnyProblemMeta,
+  problem: AnyProblemMeta
 ): ResolvedDisplayOptions {
-  console.log("[resolveDisplayForProblem] Input rules:", rules);
-  console.log("[resolveDisplayForProblem] Problem meta:", problem);
-
   const resolved = {
     showCarryBoxes: evaluateRule(rules.carryBoxes, problem),
     showAnswerBoxes: evaluateRule(rules.answerBoxes, problem),
@@ -82,15 +77,15 @@ export function resolveDisplayForProblem(
     showCellBorder: evaluateRule(rules.cellBorders, problem),
     showBorrowNotation: evaluateRule(rules.borrowNotation, problem),
     showBorrowingHints: evaluateRule(rules.borrowingHints, problem),
-  };
+  }
 
-  console.log("[resolveDisplayForProblem] Resolved display options:", resolved);
-  console.log(
-    "[resolveDisplayForProblem] Ten-frames rule:",
-    rules.tenFrames,
-    "-> showTenFrames:",
-    resolved.showTenFrames,
-  );
+  // DEBUG: Ten-frames evaluation
+  console.log('[TEN-FRAMES DEBUG]', {
+    rule: rules.tenFrames,
+    requiresRegrouping: 'requiresRegrouping' in problem ? problem.requiresRegrouping : problem.requiresBorrowing,
+    regroupCount: 'regroupCount' in problem ? problem.regroupCount : problem.borrowCount,
+    resolved: resolved.showTenFrames,
+  })
 
-  return resolved;
+  return resolved
 }
diff --git a/apps/web/src/app/create/worksheets/addition/generatePreview.ts b/apps/web/src/app/create/worksheets/addition/generatePreview.ts
index b366aee1..879e79b6 100644
--- a/apps/web/src/app/create/worksheets/addition/generatePreview.ts
+++ b/apps/web/src/app/create/worksheets/addition/generatePreview.ts
@@ -1,62 +1,60 @@
 // Shared logic for generating worksheet previews (used by both API route and SSR)
 
-import { execSync } from "child_process";
-import { validateWorksheetConfig } from "./validation";
+import { execSync } from 'child_process'
+import { validateWorksheetConfig } from './validation'
 import {
   generateProblems,
   generateSubtractionProblems,
   generateMixedProblems,
-} from "./problemGenerator";
-import { generateTypstSource } from "./typstGenerator";
-import type { WorksheetFormState } from "./types";
+} from './problemGenerator'
+import { generateTypstSource } from './typstGenerator'
+import type { WorksheetFormState } from './types'
 
 export interface PreviewResult {
-  success: boolean;
-  pages?: string[];
-  error?: string;
-  details?: string;
+  success: boolean
+  pages?: string[]
+  error?: string
+  details?: string
 }
 
 /**
  * Generate worksheet preview SVG pages
  * Can be called from API routes or Server Components
  */
-export function generateWorksheetPreview(
-  config: WorksheetFormState,
-): PreviewResult {
+export function generateWorksheetPreview(config: WorksheetFormState): PreviewResult {
   try {
     // Validate configuration
-    const validation = validateWorksheetConfig(config);
+    const validation = validateWorksheetConfig(config)
     if (!validation.isValid || !validation.config) {
       return {
         success: false,
-        error: "Invalid configuration",
-        details: validation.errors?.join(", "),
-      };
+        error: 'Invalid configuration',
+        details: validation.errors?.join(', '),
+      }
     }
 
-    const validatedConfig = validation.config;
+    const validatedConfig = validation.config
 
     // Generate all problems for full preview based on operator
-    const operator = validatedConfig.operator ?? "addition";
+    const operator = validatedConfig.operator ?? 'addition'
     const problems =
-      operator === "addition"
+      operator === 'addition'
         ? generateProblems(
             validatedConfig.total,
             validatedConfig.pAnyStart,
             validatedConfig.pAllStart,
             validatedConfig.interpolate,
             validatedConfig.seed,
-            validatedConfig.digitRange,
+            validatedConfig.digitRange
           )
-        : operator === "subtraction"
+        : operator === 'subtraction'
           ? generateSubtractionProblems(
               validatedConfig.total,
               validatedConfig.digitRange,
               validatedConfig.pAnyStart,
               validatedConfig.pAllStart,
               validatedConfig.interpolate,
-              validatedConfig.seed,
+              validatedConfig.seed
             )
           : generateMixedProblems(
               validatedConfig.total,
@@ -64,55 +62,55 @@ export function generateWorksheetPreview(
               validatedConfig.pAnyStart,
               validatedConfig.pAllStart,
               validatedConfig.interpolate,
-              validatedConfig.seed,
-            );
+              validatedConfig.seed
+            )
 
     // Generate Typst sources (one per page)
-    const typstSources = generateTypstSource(validatedConfig, problems);
+    const typstSources = generateTypstSource(validatedConfig, problems)
 
     // Compile each page source to SVG (using stdout for single-page output)
-    const pages: string[] = [];
+    const pages: string[] = []
     for (let i = 0; i < typstSources.length; i++) {
-      const typstSource = typstSources[i];
+      const typstSource = typstSources[i]
 
       // Compile to SVG via stdin/stdout
       try {
-        const svgOutput = execSync("typst compile --format svg - -", {
+        const svgOutput = execSync('typst compile --format svg - -', {
           input: typstSource,
-          encoding: "utf8",
+          encoding: 'utf8',
           maxBuffer: 10 * 1024 * 1024, // 10MB limit
-        });
-        pages.push(svgOutput);
+        })
+        pages.push(svgOutput)
       } catch (error) {
-        console.error(`Typst compilation error (page ${i + 1}):`, error);
+        console.error(`Typst compilation error (page ${i + 1}):`, error)
 
         // Extract the actual Typst error message
         const stderr =
-          error instanceof Error && "stderr" in error
+          error instanceof Error && 'stderr' in error
             ? String((error as any).stderr)
-            : "Unknown compilation error";
+            : 'Unknown compilation error'
 
         return {
           success: false,
           error: `Failed to compile preview (page ${i + 1})`,
           details: stderr,
-        };
+        }
       }
     }
 
     return {
       success: true,
       pages,
-    };
+    }
   } catch (error) {
-    console.error("Error generating preview:", error);
+    console.error('Error generating preview:', error)
 
-    const errorMessage = error instanceof Error ? error.message : String(error);
+    const errorMessage = error instanceof Error ? error.message : String(error)
 
     return {
       success: false,
-      error: "Failed to generate preview",
+      error: 'Failed to generate preview',
       details: errorMessage,
-    };
+    }
   }
 }
diff --git a/apps/web/src/app/create/worksheets/addition/hooks/useWorksheetAutoSave.ts b/apps/web/src/app/create/worksheets/addition/hooks/useWorksheetAutoSave.ts
index 46719d75..0ca4d519 100644
--- a/apps/web/src/app/create/worksheets/addition/hooks/useWorksheetAutoSave.ts
+++ b/apps/web/src/app/create/worksheets/addition/hooks/useWorksheetAutoSave.ts
@@ -1,11 +1,11 @@
-"use client";
+'use client'
 
-import { useState, useEffect, useRef } from "react";
-import type { WorksheetFormState } from "../types";
+import { useState, useEffect, useRef } from 'react'
+import type { WorksheetFormState } from '../types'
 
 interface UseWorksheetAutoSaveReturn {
-  isSaving: boolean;
-  lastSaved: Date | null;
+  isSaving: boolean
+  lastSaved: Date | null
 }
 
 /**
@@ -20,31 +20,29 @@ interface UseWorksheetAutoSaveReturn {
  */
 export function useWorksheetAutoSave(
   formState: WorksheetFormState,
-  worksheetType: "addition",
+  worksheetType: 'addition'
 ): UseWorksheetAutoSaveReturn {
-  const [isSaving, setIsSaving] = useState(false);
-  const [lastSaved, setLastSaved] = useState<Date | null>(null);
+  const [isSaving, setIsSaving] = useState(false)
+  const [lastSaved, setLastSaved] = useState<Date | null>(null)
 
   // Store the previous formState for auto-save to detect real changes
-  const prevAutoSaveFormStateRef = useRef(formState);
+  const prevAutoSaveFormStateRef = useRef(formState)
 
   // Auto-save settings when they change (debounced) - skip on initial mount
   useEffect(() => {
     // Skip auto-save if formState hasn't actually changed (handles StrictMode double-render)
     if (formState === prevAutoSaveFormStateRef.current) {
-      console.log(
-        "[useWorksheetAutoSave] Skipping auto-save - formState reference unchanged",
-      );
-      return;
+      console.log('[useWorksheetAutoSave] Skipping auto-save - formState reference unchanged')
+      return
     }
 
-    prevAutoSaveFormStateRef.current = formState;
+    prevAutoSaveFormStateRef.current = formState
 
-    console.log("[useWorksheetAutoSave] Settings changed, will save in 1s...");
+    console.log('[useWorksheetAutoSave] Settings changed, will save in 1s...')
 
     const timer = setTimeout(async () => {
-      console.log("[useWorksheetAutoSave] Attempting to save settings...");
-      setIsSaving(true);
+      console.log('[useWorksheetAutoSave] Attempting to save settings...')
+      setIsSaving(true)
       try {
         // Extract only the fields we want to persist (exclude date, seed, derived state)
         const {
@@ -72,11 +70,11 @@ export function useWorksheetAutoSave(
           difficultyProfile,
           displayRules,
           manualPreset,
-        } = formState;
+        } = formState
 
-        const response = await fetch("/api/worksheets/settings", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
+        const response = await fetch('/api/worksheets/settings', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
             type: worksheetType,
             config: {
@@ -106,36 +104,33 @@ export function useWorksheetAutoSave(
               manualPreset,
             },
           }),
-        });
+        })
 
         if (response.ok) {
-          const data = await response.json();
-          console.log("[useWorksheetAutoSave] Save response:", data);
+          const data = await response.json()
+          console.log('[useWorksheetAutoSave] Save response:', data)
           if (data.success) {
-            console.log("[useWorksheetAutoSave] ✓ Settings saved successfully");
-            setLastSaved(new Date());
+            console.log('[useWorksheetAutoSave] ✓ Settings saved successfully')
+            setLastSaved(new Date())
           } else {
-            console.log("[useWorksheetAutoSave] Save skipped");
+            console.log('[useWorksheetAutoSave] Save skipped')
           }
         } else {
-          console.error(
-            "[useWorksheetAutoSave] Save failed with status:",
-            response.status,
-          );
+          console.error('[useWorksheetAutoSave] Save failed with status:', response.status)
         }
       } catch (error) {
         // Silently fail - settings persistence is not critical
-        console.error("[useWorksheetAutoSave] Settings save error:", error);
+        console.error('[useWorksheetAutoSave] Settings save error:', error)
       } finally {
-        setIsSaving(false);
+        setIsSaving(false)
       }
-    }, 1000); // 1 second debounce for auto-save
+    }, 1000) // 1 second debounce for auto-save
 
-    return () => clearTimeout(timer);
-  }, [formState, worksheetType]);
+    return () => clearTimeout(timer)
+  }, [formState, worksheetType])
 
   return {
     isSaving,
     lastSaved,
-  };
+  }
 }
diff --git a/apps/web/src/app/create/worksheets/addition/hooks/useWorksheetGeneration.ts b/apps/web/src/app/create/worksheets/addition/hooks/useWorksheetGeneration.ts
index 25482984..8be414b2 100644
--- a/apps/web/src/app/create/worksheets/addition/hooks/useWorksheetGeneration.ts
+++ b/apps/web/src/app/create/worksheets/addition/hooks/useWorksheetGeneration.ts
@@ -1,16 +1,16 @@
-"use client";
+'use client'
 
-import { useState } from "react";
-import type { WorksheetFormState } from "../types";
-import { validateWorksheetConfig } from "../validation";
+import { useState } from 'react'
+import type { WorksheetFormState } from '../types'
+import { validateWorksheetConfig } from '../validation'
 
-type GenerationStatus = "idle" | "generating" | "error";
+type GenerationStatus = 'idle' | 'generating' | 'error'
 
 interface UseWorksheetGenerationReturn {
-  status: GenerationStatus;
-  error: string | null;
-  generate: (config: WorksheetFormState) => Promise<void>;
-  reset: () => void;
+  status: GenerationStatus
+  error: string | null
+  generate: (config: WorksheetFormState) => Promise<void>
+  reset: () => void
 }
 
 /**
@@ -24,70 +24,68 @@ interface UseWorksheetGenerationReturn {
  * - Error handling with detailed messages
  */
 export function useWorksheetGeneration(): UseWorksheetGenerationReturn {
-  const [status, setStatus] = useState<GenerationStatus>("idle");
-  const [error, setError] = useState<string | null>(null);
+  const [status, setStatus] = useState<GenerationStatus>('idle')
+  const [error, setError] = useState<string | null>(null)
 
   const generate = async (config: WorksheetFormState) => {
-    setStatus("generating");
-    setError(null);
+    setStatus('generating')
+    setError(null)
 
     try {
       // Validate configuration
-      const validation = validateWorksheetConfig(config);
+      const validation = validateWorksheetConfig(config)
       if (!validation.isValid || !validation.config) {
-        throw new Error(
-          validation.errors?.join(", ") || "Invalid configuration",
-        );
+        throw new Error(validation.errors?.join(', ') || 'Invalid configuration')
       }
 
-      const response = await fetch("/api/create/worksheets/addition", {
-        method: "POST",
+      const response = await fetch('/api/create/worksheets/addition', {
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
         body: JSON.stringify(config),
-      });
+      })
 
       if (!response.ok) {
-        const errorResult = await response.json();
+        const errorResult = await response.json()
         const errorMsg = errorResult.details
           ? `${errorResult.error}\n\n${errorResult.details}`
-          : errorResult.error || "Generation failed";
-        throw new Error(errorMsg);
+          : errorResult.error || 'Generation failed'
+        throw new Error(errorMsg)
       }
 
       // Success - response is binary PDF data, trigger download
-      const blob = await response.blob();
-      const filename = `addition-worksheet-${config.name || "student"}-${Date.now()}.pdf`;
+      const blob = await response.blob()
+      const filename = `addition-worksheet-${config.name || 'student'}-${Date.now()}.pdf`
 
       // Create download link and trigger download
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.style.display = "none";
-      a.href = url;
-      a.download = filename;
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(a);
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.style.display = 'none'
+      a.href = url
+      a.download = filename
+      document.body.appendChild(a)
+      a.click()
+      window.URL.revokeObjectURL(url)
+      document.body.removeChild(a)
 
-      setStatus("idle");
+      setStatus('idle')
     } catch (err) {
-      console.error("Generation error:", err);
-      setError(err instanceof Error ? err.message : "Unknown error occurred");
-      setStatus("error");
+      console.error('Generation error:', err)
+      setError(err instanceof Error ? err.message : 'Unknown error occurred')
+      setStatus('error')
     }
-  };
+  }
 
   const reset = () => {
-    setStatus("idle");
-    setError(null);
-  };
+    setStatus('idle')
+    setError(null)
+  }
 
   return {
     status,
     error,
     generate,
     reset,
-  };
+  }
 }
diff --git a/apps/web/src/app/create/worksheets/addition/hooks/useWorksheetState.ts b/apps/web/src/app/create/worksheets/addition/hooks/useWorksheetState.ts
index c1f566a4..4055fac2 100644
--- a/apps/web/src/app/create/worksheets/addition/hooks/useWorksheetState.ts
+++ b/apps/web/src/app/create/worksheets/addition/hooks/useWorksheetState.ts
@@ -1,13 +1,13 @@
-"use client";
+'use client'
 
-import { useState, useEffect, useRef } from "react";
-import type { WorksheetFormState } from "../types";
-import { defaultAdditionConfig } from "../../config-schemas";
+import { useState, useEffect, useRef } from 'react'
+import type { WorksheetFormState } from '../types'
+import { defaultAdditionConfig } from '../../config-schemas'
 
 interface UseWorksheetStateReturn {
-  formState: WorksheetFormState;
-  debouncedFormState: WorksheetFormState;
-  updateFormState: (updates: Partial<WorksheetFormState>) => void;
+  formState: WorksheetFormState
+  debouncedFormState: WorksheetFormState
+  updateFormState: (updates: Partial<WorksheetFormState>) => void
 }
 
 /**
@@ -20,14 +20,14 @@ interface UseWorksheetStateReturn {
  * - StrictMode-safe (handles double renders)
  */
 export function useWorksheetState(
-  initialSettings: Omit<WorksheetFormState, "date" | "rows" | "total">,
+  initialSettings: Omit<WorksheetFormState, 'date' | 'rows' | 'total'>
 ): UseWorksheetStateReturn {
   // Calculate derived state from initial settings
-  const problemsPerPage = initialSettings.problemsPerPage ?? 20;
-  const pages = initialSettings.pages ?? 1;
-  const cols = initialSettings.cols ?? 5;
-  const rows = Math.ceil((problemsPerPage * pages) / cols);
-  const total = problemsPerPage * pages;
+  const problemsPerPage = initialSettings.problemsPerPage ?? 20
+  const pages = initialSettings.pages ?? 1
+  const cols = initialSettings.cols ?? 5
+  const rows = Math.ceil((problemsPerPage * pages) / cols)
+  const total = problemsPerPage * pages
 
   // Immediate form state (for controls - updates instantly)
   const [formState, setFormState] = useState<WorksheetFormState>(() => {
@@ -35,84 +35,68 @@ export function useWorksheetState(
       ...initialSettings,
       rows,
       total,
-      date: "", // Will be set at generation time
+      date: '', // Will be set at generation time
       // Ensure displayRules is always defined (critical for difficulty adjustment)
-      displayRules:
-        initialSettings.displayRules ?? defaultAdditionConfig.displayRules,
+      displayRules: initialSettings.displayRules ?? defaultAdditionConfig.displayRules,
       pAnyStart: initialSettings.pAnyStart ?? defaultAdditionConfig.pAnyStart,
       pAllStart: initialSettings.pAllStart ?? defaultAdditionConfig.pAllStart,
-    };
-    console.log("[useWorksheetState] Initial formState:", {
+    }
+    console.log('[useWorksheetState] Initial formState:', {
       seed: initial.seed,
       displayRules: initial.displayRules,
-    });
-    return initial;
-  });
+    })
+    return initial
+  })
 
   // Debounced form state (for preview - updates after delay)
-  const [debouncedFormState, setDebouncedFormState] =
-    useState<WorksheetFormState>(() => {
-      console.log(
-        "[useWorksheetState] Initial debouncedFormState (same as formState)",
-      );
-      return formState;
-    });
+  const [debouncedFormState, setDebouncedFormState] = useState<WorksheetFormState>(() => {
+    console.log('[useWorksheetState] Initial debouncedFormState (same as formState)')
+    return formState
+  })
 
   // Store the previous formState to detect real changes
-  const prevFormStateRef = useRef(formState);
+  const prevFormStateRef = useRef(formState)
 
   // Log whenever debouncedFormState changes (this triggers preview re-fetch)
   useEffect(() => {
-    console.log(
-      "[useWorksheetState] debouncedFormState changed - preview will re-fetch:",
-      {
-        seed: debouncedFormState.seed,
-        problemsPerPage: debouncedFormState.problemsPerPage,
-      },
-    );
-  }, [debouncedFormState]);
+    console.log('[useWorksheetState] debouncedFormState changed - preview will re-fetch:', {
+      seed: debouncedFormState.seed,
+      problemsPerPage: debouncedFormState.problemsPerPage,
+    })
+  }, [debouncedFormState])
 
   // Debounce preview updates (500ms delay) - only when formState actually changes
   useEffect(() => {
-    console.log("[useWorksheetState Debounce] Triggered");
+    console.log('[useWorksheetState Debounce] Triggered')
+    console.log('[useWorksheetState Debounce] Current formState seed:', formState.seed)
     console.log(
-      "[useWorksheetState Debounce] Current formState seed:",
-      formState.seed,
-    );
-    console.log(
-      "[useWorksheetState Debounce] Previous formState seed:",
-      prevFormStateRef.current.seed,
-    );
+      '[useWorksheetState Debounce] Previous formState seed:',
+      prevFormStateRef.current.seed
+    )
 
     // Skip if formState hasn't actually changed (handles StrictMode double-render)
     if (formState === prevFormStateRef.current) {
-      console.log(
-        "[useWorksheetState Debounce] Skipping - formState reference unchanged",
-      );
-      return;
+      console.log('[useWorksheetState Debounce] Skipping - formState reference unchanged')
+      return
     }
 
-    prevFormStateRef.current = formState;
+    prevFormStateRef.current = formState
 
-    console.log(
-      "[useWorksheetState Debounce] Setting timer to update debouncedFormState in 500ms",
-    );
+    console.log('[useWorksheetState Debounce] Setting timer to update debouncedFormState in 500ms')
     const timer = setTimeout(() => {
-      console.log(
-        "[useWorksheetState Debounce] Timer fired - updating debouncedFormState",
-      );
-      setDebouncedFormState(formState);
-    }, 500);
+      console.log('[useWorksheetState Debounce] Timer fired - updating debouncedFormState')
+      setDebouncedFormState(formState)
+    }, 500)
 
     return () => {
-      console.log("[useWorksheetState Debounce] Cleanup - clearing timer");
-      clearTimeout(timer);
-    };
-  }, [formState]);
+      console.log('[useWorksheetState Debounce] Cleanup - clearing timer')
+      clearTimeout(timer)
+    }
+  }, [formState])
 
   const updateFormState = (updates: Partial<WorksheetFormState>) => {
     setFormState((prev) => {
-      const newState = { ...prev, ...updates };
+      const newState = { ...prev, ...updates }
 
       // Generate new seed when problem settings change
       const affectsProblems =
@@ -122,19 +106,19 @@ export function useWorksheetState(
         updates.orientation !== undefined ||
         updates.pAnyStart !== undefined ||
         updates.pAllStart !== undefined ||
-        updates.interpolate !== undefined;
+        updates.interpolate !== undefined
 
       if (affectsProblems) {
-        newState.seed = Date.now() % 2147483647;
+        newState.seed = Date.now() % 2147483647
       }
 
-      return newState;
-    });
-  };
+      return newState
+    })
+  }
 
   return {
     formState,
     debouncedFormState,
     updateFormState,
-  };
+  }
 }
diff --git a/apps/web/src/app/create/worksheets/addition/manualModePresets.ts b/apps/web/src/app/create/worksheets/addition/manualModePresets.ts
index 4bd828c3..cd894091 100644
--- a/apps/web/src/app/create/worksheets/addition/manualModePresets.ts
+++ b/apps/web/src/app/create/worksheets/addition/manualModePresets.ts
@@ -1,16 +1,16 @@
 // Manual mode presets for direct display control
 
 export interface ManualModePreset {
-  name: string;
-  label: string;
-  description: string;
-  showCarryBoxes: boolean;
-  showAnswerBoxes: boolean;
-  showPlaceValueColors: boolean;
-  showTenFrames: boolean;
-  showProblemNumbers: boolean;
-  showCellBorder: boolean;
-  showTenFramesForAll: boolean;
+  name: string
+  label: string
+  description: string
+  showCarryBoxes: boolean
+  showAnswerBoxes: boolean
+  showPlaceValueColors: boolean
+  showTenFrames: boolean
+  showProblemNumbers: boolean
+  showCellBorder: boolean
+  showTenFramesForAll: boolean
 }
 
 /**
@@ -19,9 +19,9 @@ export interface ManualModePreset {
  */
 export const MANUAL_MODE_PRESETS = {
   fullScaffolding: {
-    name: "fullScaffolding",
-    label: "Full Scaffolding",
-    description: "All visual aids enabled for maximum support",
+    name: 'fullScaffolding',
+    label: 'Full Scaffolding',
+    description: 'All visual aids enabled for maximum support',
     showCarryBoxes: true,
     showAnswerBoxes: true,
     showPlaceValueColors: true,
@@ -32,9 +32,9 @@ export const MANUAL_MODE_PRESETS = {
   },
 
   minimalScaffolding: {
-    name: "minimalScaffolding",
-    label: "Minimal Scaffolding",
-    description: "Basic structure only - for students building independence",
+    name: 'minimalScaffolding',
+    label: 'Minimal Scaffolding',
+    description: 'Basic structure only - for students building independence',
     showCarryBoxes: false,
     showAnswerBoxes: false,
     showPlaceValueColors: false,
@@ -45,9 +45,9 @@ export const MANUAL_MODE_PRESETS = {
   },
 
   assessmentMode: {
-    name: "assessmentMode",
-    label: "Assessment Mode",
-    description: "Clean layout for testing - minimal visual aids",
+    name: 'assessmentMode',
+    label: 'Assessment Mode',
+    description: 'Clean layout for testing - minimal visual aids',
     showCarryBoxes: false,
     showAnswerBoxes: false,
     showPlaceValueColors: false,
@@ -58,9 +58,9 @@ export const MANUAL_MODE_PRESETS = {
   },
 
   tenFramesFocus: {
-    name: "tenFramesFocus",
-    label: "Ten-Frames Focus",
-    description: "All aids plus ten-frames for concrete visualization",
+    name: 'tenFramesFocus',
+    label: 'Ten-Frames Focus',
+    description: 'All aids plus ten-frames for concrete visualization',
     showCarryBoxes: true,
     showAnswerBoxes: true,
     showPlaceValueColors: true,
@@ -69,22 +69,22 @@ export const MANUAL_MODE_PRESETS = {
     showCellBorder: true,
     showTenFramesForAll: false,
   },
-} as const satisfies Record<string, ManualModePreset>;
+} as const satisfies Record<string, ManualModePreset>
 
-export type ManualModePresetName = keyof typeof MANUAL_MODE_PRESETS;
+export type ManualModePresetName = keyof typeof MANUAL_MODE_PRESETS
 
 /**
  * Check if manual display settings match a preset
  */
 export function getManualPresetFromConfig(config: {
-  showCarryBoxes: boolean;
-  showAnswerBoxes: boolean;
-  showPlaceValueColors: boolean;
-  showTenFrames: boolean;
-  showProblemNumbers: boolean;
-  showCellBorder: boolean;
-  showTenFramesForAll: boolean;
-}): ManualModePresetName | "custom" {
+  showCarryBoxes: boolean
+  showAnswerBoxes: boolean
+  showPlaceValueColors: boolean
+  showTenFrames: boolean
+  showProblemNumbers: boolean
+  showCellBorder: boolean
+  showTenFramesForAll: boolean
+}): ManualModePresetName | 'custom' {
   for (const [name, preset] of Object.entries(MANUAL_MODE_PRESETS)) {
     if (
       preset.showCarryBoxes === config.showCarryBoxes &&
@@ -95,8 +95,8 @@ export function getManualPresetFromConfig(config: {
       preset.showCellBorder === config.showCellBorder &&
       preset.showTenFramesForAll === config.showTenFramesForAll
     ) {
-      return name as ManualModePresetName;
+      return name as ManualModePresetName
     }
   }
-  return "custom";
+  return 'custom'
 }
diff --git a/apps/web/src/app/create/worksheets/addition/page.tsx b/apps/web/src/app/create/worksheets/addition/page.tsx
index 06e54bda..cd32e61c 100644
--- a/apps/web/src/app/create/worksheets/addition/page.tsx
+++ b/apps/web/src/app/create/worksheets/addition/page.tsx
@@ -1,35 +1,32 @@
-import { eq, and } from "drizzle-orm";
-import { db, schema } from "@/db";
-import { getViewerId } from "@/lib/viewer";
-import {
-  parseAdditionConfig,
-  defaultAdditionConfig,
-} from "@/app/create/worksheets/config-schemas";
-import { AdditionWorksheetClient } from "./components/AdditionWorksheetClient";
-import { WorksheetErrorBoundary } from "./components/WorksheetErrorBoundary";
-import type { WorksheetFormState } from "./types";
-import { generateWorksheetPreview } from "./generatePreview";
+import { eq, and } from 'drizzle-orm'
+import { db, schema } from '@/db'
+import { getViewerId } from '@/lib/viewer'
+import { parseAdditionConfig, defaultAdditionConfig } from '@/app/create/worksheets/config-schemas'
+import { AdditionWorksheetClient } from './components/AdditionWorksheetClient'
+import { WorksheetErrorBoundary } from './components/WorksheetErrorBoundary'
+import type { WorksheetFormState } from './types'
+import { generateWorksheetPreview } from './generatePreview'
 
 /**
  * Get current date formatted as "Month Day, Year"
  */
 function getDefaultDate(): string {
-  const now = new Date();
-  return now.toLocaleDateString("en-US", {
-    month: "long",
-    day: "numeric",
-    year: "numeric",
-  });
+  const now = new Date()
+  return now.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  })
 }
 
 /**
  * Load worksheet settings from database (server-side)
  */
 async function loadWorksheetSettings(): Promise<
-  Omit<WorksheetFormState, "date" | "rows" | "total">
+  Omit<WorksheetFormState, 'date' | 'rows' | 'total'>
 > {
   try {
-    const viewerId = await getViewerId();
+    const viewerId = await getViewerId()
 
     // Look up user's saved settings
     const [row] = await db
@@ -38,46 +35,46 @@ async function loadWorksheetSettings(): Promise<
       .where(
         and(
           eq(schema.worksheetSettings.userId, viewerId),
-          eq(schema.worksheetSettings.worksheetType, "addition"),
-        ),
+          eq(schema.worksheetSettings.worksheetType, 'addition')
+        )
       )
-      .limit(1);
+      .limit(1)
 
     if (!row) {
       // No saved settings, return defaults with a stable seed
       return {
         ...defaultAdditionConfig,
         seed: Date.now() % 2147483647,
-      } as unknown as Omit<WorksheetFormState, "date" | "rows" | "total">;
+      } as unknown as Omit<WorksheetFormState, 'date' | 'rows' | 'total'>
     }
 
     // Parse and validate config (auto-migrates to latest version)
-    const config = parseAdditionConfig(row.config);
+    const config = parseAdditionConfig(row.config)
     return {
       ...config,
       seed: Date.now() % 2147483647,
-    } as unknown as Omit<WorksheetFormState, "date" | "rows" | "total">;
+    } as unknown as Omit<WorksheetFormState, 'date' | 'rows' | 'total'>
   } catch (error) {
-    console.error("Failed to load worksheet settings:", error);
+    console.error('Failed to load worksheet settings:', error)
     // Return defaults on error with a stable seed
     return {
       ...defaultAdditionConfig,
       seed: Date.now() % 2147483647,
-    } as unknown as Omit<WorksheetFormState, "date" | "rows" | "total">;
+    } as unknown as Omit<WorksheetFormState, 'date' | 'rows' | 'total'>
   }
 }
 
 export default async function AdditionWorksheetPage() {
-  const initialSettings = await loadWorksheetSettings();
+  const initialSettings = await loadWorksheetSettings()
 
   // Calculate derived state needed for preview
   // Use defaults for required fields (loadWorksheetSettings should always provide these, but TypeScript needs guarantees)
-  const problemsPerPage = initialSettings.problemsPerPage ?? 20;
-  const pages = initialSettings.pages ?? 1;
-  const cols = initialSettings.cols ?? 5;
+  const problemsPerPage = initialSettings.problemsPerPage ?? 20
+  const pages = initialSettings.pages ?? 1
+  const cols = initialSettings.cols ?? 5
 
-  const rows = Math.ceil((problemsPerPage * pages) / cols);
-  const total = problemsPerPage * pages;
+  const rows = Math.ceil((problemsPerPage * pages) / cols)
+  const total = problemsPerPage * pages
 
   // Create full config for preview generation
   const fullConfig: WorksheetFormState = {
@@ -85,15 +82,12 @@ export default async function AdditionWorksheetPage() {
     rows,
     total,
     date: getDefaultDate(),
-  };
+  }
 
   // Pre-generate worksheet preview on the server
-  console.log("[SSR] Generating worksheet preview on server...");
-  const previewResult = generateWorksheetPreview(fullConfig);
-  console.log(
-    "[SSR] Preview generation complete:",
-    previewResult.success ? "success" : "failed",
-  );
+  console.log('[SSR] Generating worksheet preview on server...')
+  const previewResult = generateWorksheetPreview(fullConfig)
+  console.log('[SSR] Preview generation complete:', previewResult.success ? 'success' : 'failed')
 
   // Pass settings and preview to client, wrapped in error boundary
   return (
@@ -103,5 +97,5 @@ export default async function AdditionWorksheetPage() {
         initialPreview={previewResult.success ? previewResult.pages : undefined}
       />
     </WorksheetErrorBoundary>
-  );
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/problemAnalysis.ts b/apps/web/src/app/create/worksheets/addition/problemAnalysis.ts
index d5a87406..88819971 100644
--- a/apps/web/src/app/create/worksheets/addition/problemAnalysis.ts
+++ b/apps/web/src/app/create/worksheets/addition/problemAnalysis.ts
@@ -3,24 +3,24 @@
 // Supports 1-5 digit problems (max sum: 99999 + 99999 = 199998)
 
 export type PlaceValue =
-  | "ones"
-  | "tens"
-  | "hundreds"
-  | "thousands"
-  | "tenThousands"
-  | "hundredThousands";
+  | 'ones'
+  | 'tens'
+  | 'hundreds'
+  | 'thousands'
+  | 'tenThousands'
+  | 'hundredThousands'
 
 export interface ProblemMeta {
-  a: number;
-  b: number;
-  digitsA: number;
-  digitsB: number;
-  maxDigits: number;
-  sum: number;
-  digitsSum: number;
-  requiresRegrouping: boolean;
-  regroupCount: number;
-  regroupPlaces: PlaceValue[];
+  a: number
+  b: number
+  digitsA: number
+  digitsB: number
+  maxDigits: number
+  sum: number
+  digitsSum: number
+  requiresRegrouping: boolean
+  regroupCount: number
+  regroupPlaces: PlaceValue[]
 }
 
 /**
@@ -30,37 +30,37 @@ export interface ProblemMeta {
  */
 export function analyzeProblem(a: number, b: number): ProblemMeta {
   // Basic properties
-  const digitsA = a.toString().length;
-  const digitsB = b.toString().length;
-  const maxDigits = Math.max(digitsA, digitsB);
-  const sum = a + b;
-  const digitsSum = sum.toString().length;
+  const digitsA = a.toString().length
+  const digitsB = b.toString().length
+  const maxDigits = Math.max(digitsA, digitsB)
+  const sum = a + b
+  const digitsSum = sum.toString().length
 
   // Analyze regrouping place by place
   // Pad to 6 digits for consistent indexing (supports up to 99999 + 99999 = 199998)
-  const aDigits = String(a).padStart(6, "0").split("").map(Number).reverse();
-  const bDigits = String(b).padStart(6, "0").split("").map(Number).reverse();
+  const aDigits = String(a).padStart(6, '0').split('').map(Number).reverse()
+  const bDigits = String(b).padStart(6, '0').split('').map(Number).reverse()
 
-  const regroupPlaces: PlaceValue[] = [];
+  const regroupPlaces: PlaceValue[] = []
   const places: PlaceValue[] = [
-    "ones",
-    "tens",
-    "hundreds",
-    "thousands",
-    "tenThousands",
-    "hundredThousands",
-  ];
+    'ones',
+    'tens',
+    'hundreds',
+    'thousands',
+    'tenThousands',
+    'hundredThousands',
+  ]
 
   // Check each place value for carrying
   // We need to track carries propagating through place values
-  let carry = 0;
+  let carry = 0
   for (let i = 0; i < 6; i++) {
-    const digitSum = aDigits[i] + bDigits[i] + carry;
+    const digitSum = aDigits[i] + bDigits[i] + carry
     if (digitSum >= 10) {
-      regroupPlaces.push(places[i]);
-      carry = 1;
+      regroupPlaces.push(places[i])
+      carry = 1
     } else {
-      carry = 0;
+      carry = 0
     }
   }
 
@@ -75,23 +75,23 @@ export function analyzeProblem(a: number, b: number): ProblemMeta {
     requiresRegrouping: regroupPlaces.length > 0,
     regroupCount: regroupPlaces.length,
     regroupPlaces,
-  };
+  }
 }
 
 /**
  * Metadata for a subtraction problem
  */
 export interface SubtractionProblemMeta {
-  minuend: number;
-  subtrahend: number;
-  digitsMinuend: number;
-  digitsSubtrahend: number;
-  maxDigits: number;
-  difference: number;
-  digitsDifference: number;
-  requiresBorrowing: boolean;
-  borrowCount: number;
-  borrowPlaces: PlaceValue[];
+  minuend: number
+  subtrahend: number
+  digitsMinuend: number
+  digitsSubtrahend: number
+  maxDigits: number
+  difference: number
+  digitsDifference: number
+  requiresBorrowing: boolean
+  borrowCount: number
+  borrowPlaces: PlaceValue[]
 }
 
 /**
@@ -101,50 +101,42 @@ export interface SubtractionProblemMeta {
  */
 export function analyzeSubtractionProblem(
   minuend: number,
-  subtrahend: number,
+  subtrahend: number
 ): SubtractionProblemMeta {
   // Basic properties
-  const digitsMinuend = minuend.toString().length;
-  const digitsSubtrahend = subtrahend.toString().length;
-  const maxDigits = Math.max(digitsMinuend, digitsSubtrahend);
-  const difference = minuend - subtrahend;
-  const digitsDifference = difference === 0 ? 1 : difference.toString().length;
+  const digitsMinuend = minuend.toString().length
+  const digitsSubtrahend = subtrahend.toString().length
+  const maxDigits = Math.max(digitsMinuend, digitsSubtrahend)
+  const difference = minuend - subtrahend
+  const digitsDifference = difference === 0 ? 1 : difference.toString().length
 
   // Analyze borrowing place by place
   // Pad to 6 digits for consistent indexing
-  const mDigits = String(minuend)
-    .padStart(6, "0")
-    .split("")
-    .map(Number)
-    .reverse();
-  const sDigits = String(subtrahend)
-    .padStart(6, "0")
-    .split("")
-    .map(Number)
-    .reverse();
+  const mDigits = String(minuend).padStart(6, '0').split('').map(Number).reverse()
+  const sDigits = String(subtrahend).padStart(6, '0').split('').map(Number).reverse()
 
-  const borrowPlaces: PlaceValue[] = [];
+  const borrowPlaces: PlaceValue[] = []
   const places: PlaceValue[] = [
-    "ones",
-    "tens",
-    "hundreds",
-    "thousands",
-    "tenThousands",
-    "hundredThousands",
-  ];
+    'ones',
+    'tens',
+    'hundreds',
+    'thousands',
+    'tenThousands',
+    'hundredThousands',
+  ]
 
   // Check each place value for borrowing
   // We need to track borrows propagating through place values
-  let borrow = 0;
+  let borrow = 0
   for (let i = 0; i < 6; i++) {
-    const mDigit = mDigits[i] - borrow;
-    const sDigit = sDigits[i];
+    const mDigit = mDigits[i] - borrow
+    const sDigit = sDigits[i]
 
     if (mDigit < sDigit) {
-      borrowPlaces.push(places[i]);
-      borrow = 1; // Need to borrow from next higher place
+      borrowPlaces.push(places[i])
+      borrow = 1 // Need to borrow from next higher place
     } else {
-      borrow = 0;
+      borrow = 0
     }
   }
 
@@ -159,5 +151,5 @@ export function analyzeSubtractionProblem(
     requiresBorrowing: borrowPlaces.length > 0,
     borrowCount: borrowPlaces.length,
     borrowPlaces,
-  };
+  }
 }
diff --git a/apps/web/src/app/create/worksheets/addition/problemGenerator.ts b/apps/web/src/app/create/worksheets/addition/problemGenerator.ts
index 2a13c6b3..110ff9e4 100644
--- a/apps/web/src/app/create/worksheets/addition/problemGenerator.ts
+++ b/apps/web/src/app/create/worksheets/addition/problemGenerator.ts
@@ -5,33 +5,33 @@ import type {
   SubtractionProblem,
   WorksheetProblem,
   ProblemCategory,
-} from "./types";
+} from './types'
 
 /**
  * Mulberry32 PRNG for reproducible random number generation
  */
 export function createPRNG(seed: number) {
-  let state = seed;
+  let state = seed
   return function rand(): number {
-    let t = (state += 0x6d2b79f5);
-    t = Math.imul(t ^ (t >>> 15), t | 1);
-    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-  };
+    let t = (state += 0x6d2b79f5)
+    t = Math.imul(t ^ (t >>> 15), t | 1)
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
+  }
 }
 
 /**
  * Pick a random element from an array
  */
 function pick<T>(arr: T[], rand: () => number): T {
-  return arr[Math.floor(rand() * arr.length)];
+  return arr[Math.floor(rand() * arr.length)]
 }
 
 /**
  * Generate random integer between min and max (inclusive)
  */
 function randint(min: number, max: number, rand: () => number): number {
-  return Math.floor(rand() * (max - min + 1)) + min;
+  return Math.floor(rand() * (max - min + 1)) + min
 }
 
 /**
@@ -45,18 +45,18 @@ function randint(min: number, max: number, rand: () => number): number {
  */
 export function generateNumber(digits: number, rand: () => number): number {
   if (digits < 1 || digits > 5) {
-    throw new Error(`Invalid digit count: ${digits}. Must be 1-5.`);
+    throw new Error(`Invalid digit count: ${digits}. Must be 1-5.`)
   }
 
   // For 1 digit, range is 0-9 (allow 0 as first digit)
   if (digits === 1) {
-    return randint(0, 9, rand);
+    return randint(0, 9, rand)
   }
 
   // For 2+ digits, range is [10^(n-1), 10^n - 1]
-  const min = 10 ** (digits - 1);
-  const max = 10 ** digits - 1;
-  return randint(min, max, rand);
+  const min = 10 ** (digits - 1)
+  const max = 10 ** digits - 1
+  return randint(min, max, rand)
 }
 
 /**
@@ -64,7 +64,7 @@ export function generateNumber(digits: number, rand: () => number): number {
  * Generate a random two-digit number (10-99)
  */
 function twoDigit(rand: () => number): number {
-  return generateNumber(2, rand);
+  return generateNumber(2, rand)
 }
 
 /**
@@ -72,15 +72,15 @@ function twoDigit(rand: () => number): number {
  * position 0 = ones, 1 = tens, 2 = hundreds, etc.
  */
 function getDigit(num: number, position: number): number {
-  return Math.floor((num % 10 ** (position + 1)) / 10 ** position);
+  return Math.floor((num % 10 ** (position + 1)) / 10 ** position)
 }
 
 /**
  * Count number of digits in a number (1-5)
  */
 function countDigits(num: number): number {
-  if (num === 0) return 1;
-  return Math.floor(Math.log10(Math.abs(num))) + 1;
+  if (num === 0) return 1
+  return Math.floor(Math.log10(Math.abs(num))) + 1
 }
 
 /**
@@ -93,32 +93,32 @@ function countDigits(num: number): number {
 export function generateNonRegroup(
   rand: () => number,
   minDigits: number = 2,
-  maxDigits: number = 2,
+  maxDigits: number = 2
 ): [number, number] {
   for (let i = 0; i < 5000; i++) {
-    const digitsA = randint(minDigits, maxDigits, rand);
-    const digitsB = randint(minDigits, maxDigits, rand);
-    const a = generateNumber(digitsA, rand);
-    const b = generateNumber(digitsB, rand);
+    const digitsA = randint(minDigits, maxDigits, rand)
+    const digitsB = randint(minDigits, maxDigits, rand)
+    const a = generateNumber(digitsA, rand)
+    const b = generateNumber(digitsB, rand)
 
     // Check all place values for carries
-    const maxPlaces = Math.max(countDigits(a), countDigits(b));
-    let hasCarry = false;
+    const maxPlaces = Math.max(countDigits(a), countDigits(b))
+    let hasCarry = false
     for (let pos = 0; pos < maxPlaces; pos++) {
-      const digitA = getDigit(a, pos);
-      const digitB = getDigit(b, pos);
+      const digitA = getDigit(a, pos)
+      const digitB = getDigit(b, pos)
       if (digitA + digitB >= 10) {
-        hasCarry = true;
-        break;
+        hasCarry = true
+        break
       }
     }
 
     if (!hasCarry) {
-      return [a, b];
+      return [a, b]
     }
   }
   // Fallback
-  return minDigits === 1 ? [1, 2] : [12, 34];
+  return minDigits === 1 ? [1, 2] : [12, 34]
 }
 
 /**
@@ -131,40 +131,40 @@ export function generateNonRegroup(
 export function generateOnesOnly(
   rand: () => number,
   minDigits: number = 2,
-  maxDigits: number = 2,
+  maxDigits: number = 2
 ): [number, number] {
   for (let i = 0; i < 5000; i++) {
-    const digitsA = randint(minDigits, maxDigits, rand);
-    const digitsB = randint(minDigits, maxDigits, rand);
-    const a = generateNumber(digitsA, rand);
-    const b = generateNumber(digitsB, rand);
+    const digitsA = randint(minDigits, maxDigits, rand)
+    const digitsB = randint(minDigits, maxDigits, rand)
+    const a = generateNumber(digitsA, rand)
+    const b = generateNumber(digitsB, rand)
 
-    const onesA = getDigit(a, 0);
-    const onesB = getDigit(b, 0);
+    const onesA = getDigit(a, 0)
+    const onesB = getDigit(b, 0)
 
     // Must have ones carry
-    if (onesA + onesB < 10) continue;
+    if (onesA + onesB < 10) continue
 
     // Check that no other place values carry
-    const maxPlaces = Math.max(countDigits(a), countDigits(b));
-    let carry = 1; // carry from ones
-    let hasOtherCarry = false;
+    const maxPlaces = Math.max(countDigits(a), countDigits(b))
+    let carry = 1 // carry from ones
+    let hasOtherCarry = false
     for (let pos = 1; pos < maxPlaces; pos++) {
-      const digitA = getDigit(a, pos);
-      const digitB = getDigit(b, pos);
+      const digitA = getDigit(a, pos)
+      const digitB = getDigit(b, pos)
       if (digitA + digitB + carry >= 10) {
-        hasOtherCarry = true;
-        break;
+        hasOtherCarry = true
+        break
       }
-      carry = 0; // no more carries after first position
+      carry = 0 // no more carries after first position
     }
 
     if (!hasOtherCarry) {
-      return [a, b];
+      return [a, b]
     }
   }
   // Fallback
-  return minDigits === 1 ? [5, 8] : [58, 31];
+  return minDigits === 1 ? [5, 8] : [58, 31]
 }
 
 /**
@@ -177,55 +177,50 @@ export function generateOnesOnly(
 export function generateBoth(
   rand: () => number,
   minDigits: number = 2,
-  maxDigits: number = 2,
+  maxDigits: number = 2
 ): [number, number] {
   for (let i = 0; i < 5000; i++) {
-    const digitsA = randint(minDigits, maxDigits, rand);
-    const digitsB = randint(minDigits, maxDigits, rand);
-    const a = generateNumber(digitsA, rand);
-    const b = generateNumber(digitsB, rand);
+    const digitsA = randint(minDigits, maxDigits, rand)
+    const digitsB = randint(minDigits, maxDigits, rand)
+    const a = generateNumber(digitsA, rand)
+    const b = generateNumber(digitsB, rand)
 
     // Check for carries in each place value
-    const maxPlaces = Math.max(countDigits(a), countDigits(b));
-    let carryCount = 0;
-    let carry = 0;
+    const maxPlaces = Math.max(countDigits(a), countDigits(b))
+    let carryCount = 0
+    let carry = 0
     for (let pos = 0; pos < maxPlaces; pos++) {
-      const digitA = getDigit(a, pos);
-      const digitB = getDigit(b, pos);
+      const digitA = getDigit(a, pos)
+      const digitB = getDigit(b, pos)
       if (digitA + digitB + carry >= 10) {
-        carryCount++;
-        carry = 1;
+        carryCount++
+        carry = 1
       } else {
-        carry = 0;
+        carry = 0
       }
     }
 
     // "Both" means at least 2 carries
     if (carryCount >= 2) {
-      return [a, b];
+      return [a, b]
     }
   }
   // Fallback
-  return minDigits === 1 ? [8, 9] : [68, 47];
+  return minDigits === 1 ? [8, 9] : [68, 47]
 }
 
 /**
  * Try to add a unique problem to the list
  * Returns true if added, false if duplicate
  */
-function uniquePush(
-  list: AdditionProblem[],
-  a: number,
-  b: number,
-  seen: Set<string>,
-): boolean {
-  const key = [Math.min(a, b), Math.max(a, b)].join("+");
+function uniquePush(list: AdditionProblem[], a: number, b: number, seen: Set<string>): boolean {
+  const key = [Math.min(a, b), Math.max(a, b)].join('+')
   if (seen.has(key) || a === b) {
-    return false;
+    return false
   }
-  seen.add(key);
-  list.push({ a, b, operator: "+" });
-  return true;
+  seen.add(key)
+  list.push({ a, b, operator: '+' })
+  return true
 }
 
 /**
@@ -244,68 +239,68 @@ export function generateProblems(
   pAllStart: number,
   interpolate: boolean,
   seed: number,
-  digitRange: { min: number; max: number } = { min: 2, max: 2 },
+  digitRange: { min: number; max: number } = { min: 2, max: 2 }
 ): AdditionProblem[] {
-  const rand = createPRNG(seed);
-  const problems: AdditionProblem[] = [];
-  const seen = new Set<string>();
+  const rand = createPRNG(seed)
+  const problems: AdditionProblem[] = []
+  const seen = new Set<string>()
 
-  const { min: minDigits, max: maxDigits } = digitRange;
+  const { min: minDigits, max: maxDigits } = digitRange
 
   for (let i = 0; i < total; i++) {
     // Calculate position from start (0) to end (1)
-    const frac = total <= 1 ? 0 : i / (total - 1);
+    const frac = total <= 1 ? 0 : i / (total - 1)
     // Progressive difficulty: start easy, end hard
-    const difficultyMultiplier = interpolate ? frac : 1.0;
+    const difficultyMultiplier = interpolate ? frac : 1.0
 
     // Effective probabilities at this position
-    const pAll = Math.max(0, Math.min(1, pAllStart * difficultyMultiplier));
-    const pAny = Math.max(0, Math.min(1, pAnyStart * difficultyMultiplier));
-    const pOnesOnly = Math.max(0, pAny - pAll);
-    const pNon = Math.max(0, 1 - pAny);
+    const pAll = Math.max(0, Math.min(1, pAllStart * difficultyMultiplier))
+    const pAny = Math.max(0, Math.min(1, pAnyStart * difficultyMultiplier))
+    const pOnesOnly = Math.max(0, pAny - pAll)
+    const pNon = Math.max(0, 1 - pAny)
 
     // Sample category based on probabilities
-    const r = rand();
-    let picked: ProblemCategory;
+    const r = rand()
+    let picked: ProblemCategory
     if (r < pAll) {
-      picked = "both";
+      picked = 'both'
     } else if (r < pAll + pOnesOnly) {
-      picked = "onesOnly";
+      picked = 'onesOnly'
     } else {
-      picked = "non";
+      picked = 'non'
     }
 
     // Generate problem with retries for uniqueness
-    let tries = 0;
-    let ok = false;
+    let tries = 0
+    let ok = false
     while (tries++ < 3000 && !ok) {
-      let a: number, b: number;
-      if (picked === "both") {
-        [a, b] = generateBoth(rand, minDigits, maxDigits);
-      } else if (picked === "onesOnly") {
-        [a, b] = generateOnesOnly(rand, minDigits, maxDigits);
+      let a: number, b: number
+      if (picked === 'both') {
+        ;[a, b] = generateBoth(rand, minDigits, maxDigits)
+      } else if (picked === 'onesOnly') {
+        ;[a, b] = generateOnesOnly(rand, minDigits, maxDigits)
       } else {
-        [a, b] = generateNonRegroup(rand, minDigits, maxDigits);
+        ;[a, b] = generateNonRegroup(rand, minDigits, maxDigits)
       }
-      ok = uniquePush(problems, a, b, seen);
+      ok = uniquePush(problems, a, b, seen)
 
       // If stuck, try a different category
       if (!ok && tries % 50 === 0) {
-        picked = pick(["both", "onesOnly", "non"], rand);
+        picked = pick(['both', 'onesOnly', 'non'], rand)
       }
     }
 
     // Last resort: add any valid problem in digit range
     if (!ok) {
-      const digitsA = randint(minDigits, maxDigits, rand);
-      const digitsB = randint(minDigits, maxDigits, rand);
-      const a = generateNumber(digitsA, rand);
-      const b = generateNumber(digitsB, rand);
-      uniquePush(problems, a, b, seen);
+      const digitsA = randint(minDigits, maxDigits, rand)
+      const digitsB = randint(minDigits, maxDigits, rand)
+      const a = generateNumber(digitsA, rand)
+      const b = generateNumber(digitsB, rand)
+      uniquePush(problems, a, b, seen)
     }
   }
 
-  return problems;
+  return problems
 }
 
 // =============================================================================
@@ -322,35 +317,35 @@ export function generateProblems(
 export function generateNonBorrow(
   rand: () => number,
   minDigits: number = 2,
-  maxDigits: number = 2,
+  maxDigits: number = 2
 ): [number, number] {
   for (let i = 0; i < 5000; i++) {
-    const digitsMinuend = randint(minDigits, maxDigits, rand);
-    const digitsSubtrahend = randint(minDigits, maxDigits, rand);
-    const minuend = generateNumber(digitsMinuend, rand);
-    const subtrahend = generateNumber(digitsSubtrahend, rand);
+    const digitsMinuend = randint(minDigits, maxDigits, rand)
+    const digitsSubtrahend = randint(minDigits, maxDigits, rand)
+    const minuend = generateNumber(digitsMinuend, rand)
+    const subtrahend = generateNumber(digitsSubtrahend, rand)
 
     // Ensure minuend >= subtrahend (no negative results)
-    if (minuend < subtrahend) continue;
+    if (minuend < subtrahend) continue
 
     // Check all place values for borrows
-    const maxPlaces = Math.max(countDigits(minuend), countDigits(subtrahend));
-    let hasBorrow = false;
+    const maxPlaces = Math.max(countDigits(minuend), countDigits(subtrahend))
+    let hasBorrow = false
     for (let pos = 0; pos < maxPlaces; pos++) {
-      const digitM = getDigit(minuend, pos);
-      const digitS = getDigit(subtrahend, pos);
+      const digitM = getDigit(minuend, pos)
+      const digitS = getDigit(subtrahend, pos)
       if (digitM < digitS) {
-        hasBorrow = true;
-        break;
+        hasBorrow = true
+        break
       }
     }
 
     if (!hasBorrow) {
-      return [minuend, subtrahend];
+      return [minuend, subtrahend]
     }
   }
   // Fallback
-  return minDigits === 1 ? [9, 2] : [89, 34];
+  return minDigits === 1 ? [9, 2] : [89, 34]
 }
 
 /**
@@ -363,60 +358,60 @@ export function generateNonBorrow(
 export function generateOnesOnlyBorrow(
   rand: () => number,
   minDigits: number = 2,
-  maxDigits: number = 2,
+  maxDigits: number = 2
 ): [number, number] {
   for (let i = 0; i < 5000; i++) {
-    const digitsMinuend = randint(minDigits, maxDigits, rand);
-    const digitsSubtrahend = randint(minDigits, maxDigits, rand);
-    const minuend = generateNumber(digitsMinuend, rand);
-    const subtrahend = generateNumber(digitsSubtrahend, rand);
+    const digitsMinuend = randint(minDigits, maxDigits, rand)
+    const digitsSubtrahend = randint(minDigits, maxDigits, rand)
+    const minuend = generateNumber(digitsMinuend, rand)
+    const subtrahend = generateNumber(digitsSubtrahend, rand)
 
     // Ensure minuend >= subtrahend
-    if (minuend < subtrahend) continue;
+    if (minuend < subtrahend) continue
 
-    const onesM = getDigit(minuend, 0);
-    const onesS = getDigit(subtrahend, 0);
+    const onesM = getDigit(minuend, 0)
+    const onesS = getDigit(subtrahend, 0)
 
     // Must borrow in ones place
-    if (onesM >= onesS) continue;
+    if (onesM >= onesS) continue
 
     // Check that no other place values borrow
     // Note: For subtraction, we need to track actual borrowing through the places
-    const maxPlaces = Math.max(countDigits(minuend), countDigits(subtrahend));
-    let tempMinuend = minuend;
-    let hasOtherBorrow = false;
+    const maxPlaces = Math.max(countDigits(minuend), countDigits(subtrahend))
+    let tempMinuend = minuend
+    let hasOtherBorrow = false
 
     // Simulate the subtraction place by place
     for (let pos = 0; pos < maxPlaces; pos++) {
-      const digitM = getDigit(tempMinuend, pos);
-      const digitS = getDigit(subtrahend, pos);
+      const digitM = getDigit(tempMinuend, pos)
+      const digitS = getDigit(subtrahend, pos)
 
       if (digitM < digitS) {
         if (pos === 0) {
           // Expected borrow in ones
           // Borrow from tens
-          const tensDigit = getDigit(tempMinuend, 1);
+          const tensDigit = getDigit(tempMinuend, 1)
           if (tensDigit === 0) {
             // Can't borrow from zero - this problem is invalid
-            hasOtherBorrow = true;
-            break;
+            hasOtherBorrow = true
+            break
           }
           // Apply the borrow
-          tempMinuend -= 10 ** 1; // Subtract 10 from tens place
+          tempMinuend -= 10 ** 1 // Subtract 10 from tens place
         } else {
           // Borrow in higher place - not allowed for ones-only
-          hasOtherBorrow = true;
-          break;
+          hasOtherBorrow = true
+          break
         }
       }
     }
 
     if (!hasOtherBorrow) {
-      return [minuend, subtrahend];
+      return [minuend, subtrahend]
     }
   }
   // Fallback
-  return minDigits === 1 ? [5, 7] : [52, 17];
+  return minDigits === 1 ? [5, 7] : [52, 17]
 }
 
 /**
@@ -430,47 +425,47 @@ export function generateOnesOnlyBorrow(
  * - 1000 - 1: ones 0 < 1, borrow across 3 zeros → 3 borrows
  */
 function countBorrows(minuend: number, subtrahend: number): number {
-  const maxPlaces = Math.max(countDigits(minuend), countDigits(subtrahend));
-  let borrowCount = 0;
-  const minuendDigits: number[] = [];
+  const maxPlaces = Math.max(countDigits(minuend), countDigits(subtrahend))
+  let borrowCount = 0
+  const minuendDigits: number[] = []
 
   // Extract all digits of minuend into array
   for (let pos = 0; pos < maxPlaces; pos++) {
-    minuendDigits[pos] = getDigit(minuend, pos);
+    minuendDigits[pos] = getDigit(minuend, pos)
   }
 
   // Simulate subtraction with borrowing
   for (let pos = 0; pos < maxPlaces; pos++) {
-    const digitS = getDigit(subtrahend, pos);
-    let digitM = minuendDigits[pos];
+    const digitS = getDigit(subtrahend, pos)
+    const digitM = minuendDigits[pos]
 
     if (digitM < digitS) {
       // Need to borrow
-      borrowCount++;
+      borrowCount++
 
       // Find next non-zero digit to borrow from
-      let borrowPos = pos + 1;
+      let borrowPos = pos + 1
       while (borrowPos < maxPlaces && minuendDigits[borrowPos] === 0) {
-        borrowCount++; // Borrowing across a zero counts as an additional borrow
-        borrowPos++;
+        borrowCount++ // Borrowing across a zero counts as an additional borrow
+        borrowPos++
       }
 
       // Perform the borrow operation
       if (borrowPos < maxPlaces) {
-        minuendDigits[borrowPos]--; // Take 1 from higher place
+        minuendDigits[borrowPos]-- // Take 1 from higher place
 
         // Set intermediate zeros to 9
         for (let p = borrowPos - 1; p > pos; p--) {
-          minuendDigits[p] = 9;
+          minuendDigits[p] = 9
         }
 
         // Add 10 to current position
-        minuendDigits[pos] += 10;
+        minuendDigits[pos] += 10
       }
     }
   }
 
-  return borrowCount;
+  return borrowCount
 }
 
 /**
@@ -487,35 +482,35 @@ function countBorrows(minuend: number, subtrahend: number): number {
 export function generateBothBorrow(
   rand: () => number,
   minDigits: number = 2,
-  maxDigits: number = 2,
+  maxDigits: number = 2
 ): [number, number] {
   // For 1-2 digit ranges, 2+ borrows are impossible
   // Fall back to ones-only borrowing
   if (maxDigits <= 2) {
-    return generateOnesOnlyBorrow(rand, minDigits, maxDigits);
+    return generateOnesOnlyBorrow(rand, minDigits, maxDigits)
   }
 
   for (let i = 0; i < 5000; i++) {
     // Favor higher digit counts for better chance of 2+ borrows
-    const digitsMinuend = randint(Math.max(minDigits, 3), maxDigits, rand);
-    const digitsSubtrahend = randint(Math.max(minDigits, 2), maxDigits, rand);
-    const minuend = generateNumber(digitsMinuend, rand);
-    const subtrahend = generateNumber(digitsSubtrahend, rand);
+    const digitsMinuend = randint(Math.max(minDigits, 3), maxDigits, rand)
+    const digitsSubtrahend = randint(Math.max(minDigits, 2), maxDigits, rand)
+    const minuend = generateNumber(digitsMinuend, rand)
+    const subtrahend = generateNumber(digitsSubtrahend, rand)
 
     // Ensure minuend > subtrahend
-    if (minuend <= subtrahend) continue;
+    if (minuend <= subtrahend) continue
 
     // Count actual borrow operations
-    const borrowCount = countBorrows(minuend, subtrahend);
+    const borrowCount = countBorrows(minuend, subtrahend)
 
     // Need at least 2 actual borrow operations
     if (borrowCount >= 2) {
-      return [minuend, subtrahend];
+      return [minuend, subtrahend]
     }
   }
   // Fallback: 534 - 178 requires borrowing in ones and tens
   // 100 - 1 requires borrowing across zero (2 borrows)
-  return [534, 178];
+  return [534, 178]
 }
 
 /**
@@ -535,86 +530,82 @@ export function generateSubtractionProblems(
   pAnyBorrow: number,
   pAllBorrow: number,
   interpolate: boolean,
-  seed: number,
+  seed: number
 ): SubtractionProblem[] {
-  const rand = createPRNG(seed);
-  const problems: SubtractionProblem[] = [];
-  const seen = new Set<string>();
-  const minDigits = digitRange.min;
-  const maxDigits = digitRange.max;
+  const rand = createPRNG(seed)
+  const problems: SubtractionProblem[] = []
+  const seen = new Set<string>()
+  const minDigits = digitRange.min
+  const maxDigits = digitRange.max
 
   function uniquePush(minuend: number, subtrahend: number): boolean {
-    const key = `${minuend}-${subtrahend}`;
+    const key = `${minuend}-${subtrahend}`
     if (!seen.has(key)) {
-      seen.add(key);
-      problems.push({ minuend, subtrahend, operator: "−" });
-      return true;
+      seen.add(key)
+      problems.push({ minuend, subtrahend, operator: '−' })
+      return true
     }
-    return false;
+    return false
   }
 
   for (let i = 0; i < count; i++) {
-    const t = i / Math.max(1, count - 1); // 0.0 to 1.0
-    const difficultyMultiplier = interpolate ? t : 1;
+    const t = i / Math.max(1, count - 1) // 0.0 to 1.0
+    const difficultyMultiplier = interpolate ? t : 1
 
     // Effective probabilities at this position
-    const pAll = Math.max(0, Math.min(1, pAllBorrow * difficultyMultiplier));
-    const pAny = Math.max(0, Math.min(1, pAnyBorrow * difficultyMultiplier));
-    const pOnesOnly = Math.max(0, pAny - pAll);
-    const pNon = Math.max(0, 1 - pAny);
+    const pAll = Math.max(0, Math.min(1, pAllBorrow * difficultyMultiplier))
+    const pAny = Math.max(0, Math.min(1, pAnyBorrow * difficultyMultiplier))
+    const pOnesOnly = Math.max(0, pAny - pAll)
+    const pNon = Math.max(0, 1 - pAny)
 
     // Sample category based on probabilities
-    const r = rand();
-    let picked: ProblemCategory;
+    const r = rand()
+    let picked: ProblemCategory
     if (r < pAll) {
-      picked = "both";
+      picked = 'both'
     } else if (r < pAll + pOnesOnly) {
-      picked = "onesOnly";
+      picked = 'onesOnly'
     } else {
-      picked = "non";
+      picked = 'non'
     }
 
     // Generate problem with retries for uniqueness
-    let tries = 0;
-    let ok = false;
+    let tries = 0
+    let ok = false
     while (tries++ < 3000 && !ok) {
-      let minuend: number, subtrahend: number;
-      if (picked === "both") {
-        [minuend, subtrahend] = generateBothBorrow(rand, minDigits, maxDigits);
-      } else if (picked === "onesOnly") {
-        [minuend, subtrahend] = generateOnesOnlyBorrow(
-          rand,
-          minDigits,
-          maxDigits,
-        );
+      let minuend: number, subtrahend: number
+      if (picked === 'both') {
+        ;[minuend, subtrahend] = generateBothBorrow(rand, minDigits, maxDigits)
+      } else if (picked === 'onesOnly') {
+        ;[minuend, subtrahend] = generateOnesOnlyBorrow(rand, minDigits, maxDigits)
       } else {
-        [minuend, subtrahend] = generateNonBorrow(rand, minDigits, maxDigits);
+        ;[minuend, subtrahend] = generateNonBorrow(rand, minDigits, maxDigits)
       }
-      ok = uniquePush(minuend, subtrahend);
+      ok = uniquePush(minuend, subtrahend)
 
       // If stuck, try a different category
       if (!ok && tries % 50 === 0) {
-        picked = pick(["both", "onesOnly", "non"], rand);
+        picked = pick(['both', 'onesOnly', 'non'], rand)
       }
     }
 
     // Last resort: add any valid problem in digit range
     if (!ok) {
-      const digitsM = randint(minDigits, maxDigits, rand);
-      const digitsS = randint(minDigits, maxDigits, rand);
-      let minuend = generateNumber(digitsM, rand);
-      let subtrahend = generateNumber(digitsS, rand);
+      const digitsM = randint(minDigits, maxDigits, rand)
+      const digitsS = randint(minDigits, maxDigits, rand)
+      let minuend = generateNumber(digitsM, rand)
+      let subtrahend = generateNumber(digitsS, rand)
 
       // Ensure minuend >= subtrahend
       if (minuend < subtrahend) {
-        [minuend, subtrahend] = [subtrahend, minuend];
+        ;[minuend, subtrahend] = [subtrahend, minuend]
       }
 
-      uniquePush(minuend, subtrahend);
+      uniquePush(minuend, subtrahend)
     }
   }
 
-  return problems;
+  return problems
 }
 
 /**
@@ -634,14 +625,14 @@ export function generateMixedProblems(
   pAnyRegroup: number,
   pAllRegroup: number,
   interpolate: boolean,
-  seed: number,
+  seed: number
 ): WorksheetProblem[] {
-  const rand = createPRNG(seed);
-  const problems: WorksheetProblem[] = [];
+  const rand = createPRNG(seed)
+  const problems: WorksheetProblem[] = []
 
   // Generate half addition, half subtraction (alternating with randomness)
   for (let i = 0; i < count; i++) {
-    const useAddition = rand() < 0.5;
+    const useAddition = rand() < 0.5
 
     if (useAddition) {
       // Generate single addition problem
@@ -651,9 +642,9 @@ export function generateMixedProblems(
         pAllRegroup,
         false, // Don't interpolate individual problems
         seed + i,
-        digitRange,
-      );
-      problems.push(addProblems[0]);
+        digitRange
+      )
+      problems.push(addProblems[0])
     } else {
       // Generate single subtraction problem
       const subProblems = generateSubtractionProblems(
@@ -662,11 +653,11 @@ export function generateMixedProblems(
         pAnyRegroup,
         pAllRegroup,
         false, // Don't interpolate individual problems
-        seed + i + 1000000, // Different seed space
-      );
-      problems.push(subProblems[0]);
+        seed + i + 1000000 // Different seed space
+      )
+      problems.push(subProblems[0])
     }
   }
 
-  return problems;
+  return problems
 }
diff --git a/apps/web/src/app/create/worksheets/addition/typstGenerator.ts b/apps/web/src/app/create/worksheets/addition/typstGenerator.ts
index 516b7118..6b3d8c8b 100644
--- a/apps/web/src/app/create/worksheets/addition/typstGenerator.ts
+++ b/apps/web/src/app/create/worksheets/addition/typstGenerator.ts
@@ -1,27 +1,24 @@
 // Typst document generator for addition worksheets
 
-import type { WorksheetProblem, WorksheetConfig } from "./types";
+import type { WorksheetProblem, WorksheetConfig } from './types'
 import {
   generateTypstHelpers,
   generateProblemStackFunction,
   generateSubtractionProblemStackFunction,
   generatePlaceValueColors,
-} from "./typstHelpers";
-import { analyzeProblem, analyzeSubtractionProblem } from "./problemAnalysis";
-import { resolveDisplayForProblem } from "./displayRules";
+} from './typstHelpers'
+import { analyzeProblem, analyzeSubtractionProblem } from './problemAnalysis'
+import { resolveDisplayForProblem } from './displayRules'
 
 /**
  * Chunk array into pages of specified size
  */
-function chunkProblems(
-  problems: WorksheetProblem[],
-  pageSize: number,
-): WorksheetProblem[][] {
-  const pages: WorksheetProblem[][] = [];
+function chunkProblems(problems: WorksheetProblem[], pageSize: number): WorksheetProblem[][] {
+  const pages: WorksheetProblem[][] = []
   for (let i = 0; i < problems.length; i += pageSize) {
-    pages.push(problems.slice(i, i + pageSize));
+    pages.push(problems.slice(i, i + pageSize))
   }
-  return pages;
+  return pages
 }
 
 /**
@@ -29,22 +26,22 @@ function chunkProblems(
  * Returns max digits across all operands (handles both addition and subtraction)
  */
 function calculateMaxDigits(problems: WorksheetProblem[]): number {
-  let maxDigits = 1;
+  let maxDigits = 1
   for (const problem of problems) {
-    if (problem.operator === "+") {
-      const digitsA = problem.a.toString().length;
-      const digitsB = problem.b.toString().length;
-      const maxProblemDigits = Math.max(digitsA, digitsB);
-      maxDigits = Math.max(maxDigits, maxProblemDigits);
+    if (problem.operator === '+') {
+      const digitsA = problem.a.toString().length
+      const digitsB = problem.b.toString().length
+      const maxProblemDigits = Math.max(digitsA, digitsB)
+      maxDigits = Math.max(maxDigits, maxProblemDigits)
     } else {
       // Subtraction
-      const digitsMinuend = problem.minuend.toString().length;
-      const digitsSubtrahend = problem.subtrahend.toString().length;
-      const maxProblemDigits = Math.max(digitsMinuend, digitsSubtrahend);
-      maxDigits = Math.max(maxDigits, maxProblemDigits);
+      const digitsMinuend = problem.minuend.toString().length
+      const digitsSubtrahend = problem.subtrahend.toString().length
+      const maxProblemDigits = Math.max(digitsMinuend, digitsSubtrahend)
+      maxDigits = Math.max(maxDigits, maxProblemDigits)
     }
   }
-  return maxDigits;
+  return maxDigits
 }
 
 /**
@@ -54,70 +51,31 @@ function generatePageTypst(
   config: WorksheetConfig,
   pageProblems: WorksheetProblem[],
   problemOffset: number,
-  rowsPerPage: number,
+  rowsPerPage: number
 ): string {
-  console.log("[typstGenerator] generatePageTypst called with config:", {
-    mode: config.mode,
-    displayRules:
-      config.mode === "smart" ? config.displayRules : "N/A (manual mode)",
-    showTenFrames:
-      config.mode === "manual" ? config.showTenFrames : "N/A (smart mode)",
-  });
-
   // Calculate maximum digits for proper column layout
-  const maxDigits = calculateMaxDigits(pageProblems);
-  console.log("[typstGenerator] Max digits on this page:", maxDigits);
+  const maxDigits = calculateMaxDigits(pageProblems)
 
   // Enrich problems with display options based on mode
   const enrichedProblems = pageProblems.map((p, index) => {
-    if (config.mode === "smart") {
-      // Smart mode: Per-problem conditional display based on problem complexity
+    if (config.mode === 'smart' || config.mode === 'mastery') {
+      // Smart & Mastery modes: Per-problem conditional display based on problem complexity
+      // Both modes use displayRules for conditional scaffolding
       const meta =
-        p.operator === "+"
+        p.operator === '+'
           ? analyzeProblem(p.a, p.b)
-          : analyzeSubtractionProblem(p.minuend, p.subtrahend);
+          : analyzeSubtractionProblem(p.minuend, p.subtrahend)
       const displayOptions = resolveDisplayForProblem(
         config.displayRules as any, // Cast for backward compatibility with configs missing new fields
-        meta,
-      );
-
-      if (index === 0) {
-        const problemStr =
-          p.operator === "+"
-            ? `${p.a} + ${p.b}`
-            : `${p.minuend} − ${p.subtrahend}`;
-        console.log(
-          "[typstGenerator] Smart mode - First problem display options:",
-          {
-            problem: problemStr,
-            meta,
-            displayOptions,
-          },
-        );
-      }
+        meta
+      )
 
       return {
         ...p,
         ...displayOptions, // Now includes showBorrowNotation and showBorrowingHints from resolved rules
-      };
-    } else {
-      // Manual mode: Uniform display across all problems
-      if (index === 0) {
-        const problemStr =
-          p.operator === "+"
-            ? `${p.a} + ${p.b}`
-            : `${p.minuend} − ${p.subtrahend}`;
-        console.log("[typstGenerator] Manual mode - Uniform display options:", {
-          problem: problemStr,
-          showCarryBoxes: config.showCarryBoxes,
-          showAnswerBoxes: config.showAnswerBoxes,
-          showPlaceValueColors: config.showPlaceValueColors,
-          showTenFrames: config.showTenFrames,
-          showProblemNumbers: config.showProblemNumbers,
-          showCellBorder: config.showCellBorder,
-        });
       }
-
+    } else {
+      // Manual mode: Uniform display across all problems using boolean flags
       return {
         ...p,
         showCarryBoxes: config.showCarryBoxes,
@@ -126,44 +84,50 @@ function generatePageTypst(
         showTenFrames: config.showTenFrames,
         showProblemNumbers: config.showProblemNumbers,
         showCellBorder: config.showCellBorder,
-        showBorrowNotation:
-          "showBorrowNotation" in config ? config.showBorrowNotation : true,
-        showBorrowingHints:
-          "showBorrowingHints" in config ? config.showBorrowingHints : false,
-      };
+        showBorrowNotation: 'showBorrowNotation' in config ? config.showBorrowNotation : true,
+        showBorrowingHints: 'showBorrowingHints' in config ? config.showBorrowingHints : false,
+      }
     }
-  });
+  })
+
+  // DEBUG: Show first 3 problems' ten-frames status
+  console.log('[TYPST DEBUG] First 3 enriched problems:', enrichedProblems.slice(0, 3).map((p, i) => ({
+    index: i,
+    problem: p.operator === '+' ? `${p.a} + ${p.b}` : `${p.minuend} − ${p.subtrahend}`,
+    showTenFrames: p.showTenFrames,
+  })))
 
   // Generate Typst problem data with per-problem display flags
   const problemsTypst = enrichedProblems
     .map((p) => {
-      if (p.operator === "+") {
-        return `  (operator: "+", a: ${p.a}, b: ${p.b}, showCarryBoxes: ${p.showCarryBoxes}, showAnswerBoxes: ${p.showAnswerBoxes}, showPlaceValueColors: ${p.showPlaceValueColors}, showTenFrames: ${p.showTenFrames}, showProblemNumbers: ${p.showProblemNumbers}, showCellBorder: ${p.showCellBorder}, showBorrowNotation: ${p.showBorrowNotation}, showBorrowingHints: ${p.showBorrowingHints}),`;
+      if (p.operator === '+') {
+        return `  (operator: "+", a: ${p.a}, b: ${p.b}, showCarryBoxes: ${p.showCarryBoxes}, showAnswerBoxes: ${p.showAnswerBoxes}, showPlaceValueColors: ${p.showPlaceValueColors}, showTenFrames: ${p.showTenFrames}, showProblemNumbers: ${p.showProblemNumbers}, showCellBorder: ${p.showCellBorder}, showBorrowNotation: ${p.showBorrowNotation}, showBorrowingHints: ${p.showBorrowingHints}),`
       } else {
-        return `  (operator: "−", minuend: ${p.minuend}, subtrahend: ${p.subtrahend}, showCarryBoxes: ${p.showCarryBoxes}, showAnswerBoxes: ${p.showAnswerBoxes}, showPlaceValueColors: ${p.showPlaceValueColors}, showTenFrames: ${p.showTenFrames}, showProblemNumbers: ${p.showProblemNumbers}, showCellBorder: ${p.showCellBorder}, showBorrowNotation: ${p.showBorrowNotation}, showBorrowingHints: ${p.showBorrowingHints}),`;
+        return `  (operator: "−", minuend: ${p.minuend}, subtrahend: ${p.subtrahend}, showCarryBoxes: ${p.showCarryBoxes}, showAnswerBoxes: ${p.showAnswerBoxes}, showPlaceValueColors: ${p.showPlaceValueColors}, showTenFrames: ${p.showTenFrames}, showProblemNumbers: ${p.showProblemNumbers}, showCellBorder: ${p.showCellBorder}, showBorrowNotation: ${p.showBorrowNotation}, showBorrowingHints: ${p.showBorrowingHints}),`
       }
     })
-    .join("\n");
+    .join('\n')
+
+  // DEBUG: Show Typst problem data for first problem
+  console.log('[TYPST DEBUG] First problem Typst data:', problemsTypst.split('\n')[0])
 
   // Calculate actual number of rows on this page
-  const actualRows = Math.ceil(pageProblems.length / config.cols);
+  const actualRows = Math.ceil(pageProblems.length / config.cols)
 
   // Use smaller margins to maximize space
-  const margin = 0.4;
-  const contentWidth = config.page.wIn - margin * 2;
-  const contentHeight = config.page.hIn - margin * 2;
+  const margin = 0.4
+  const contentWidth = config.page.wIn - margin * 2
+  const contentHeight = config.page.hIn - margin * 2
 
   // Calculate grid spacing based on ACTUAL rows on this page
-  const headerHeight = 0.35; // inches for header
-  const availableHeight = contentHeight - headerHeight;
-  const problemBoxHeight = availableHeight / actualRows;
-  const problemBoxWidth = contentWidth / config.cols;
+  const headerHeight = 0.35 // inches for header
+  const availableHeight = contentHeight - headerHeight
+  const problemBoxHeight = availableHeight / actualRows
+  const problemBoxWidth = contentWidth / config.cols
 
   // Calculate cell size assuming MAXIMUM possible embellishments
   // Check if ANY problem on this page might show ten-frames
-  const anyProblemMayShowTenFrames = enrichedProblems.some(
-    (p) => p.showTenFrames,
-  );
+  const anyProblemMayShowTenFrames = enrichedProblems.some((p) => p.showTenFrames)
 
   // Calculate cell size to fill the entire problem box
   // Base vertical stack: carry row + addend1 + addend2 + line + answer = 5 rows
@@ -172,13 +136,13 @@ function generatePageTypst(
   //
   // Horizontal constraint: maxDigits columns + 1 for + sign
   // Cell size must fit: (maxDigits + 1) * cellSize <= problemBoxWidth
-  const maxCellSizeForWidth = problemBoxWidth / (maxDigits + 1);
+  const maxCellSizeForWidth = problemBoxWidth / (maxDigits + 1)
   const maxCellSizeForHeight = anyProblemMayShowTenFrames
     ? problemBoxHeight / 6.0
-    : problemBoxHeight / 4.5;
+    : problemBoxHeight / 4.5
 
   // Use the smaller of width/height constraints
-  const cellSize = Math.min(maxCellSizeForWidth, maxCellSizeForHeight);
+  const cellSize = Math.min(maxCellSizeForWidth, maxCellSizeForHeight)
 
   return String.raw`
 // addition-worksheet-page.typ (auto-generated)
@@ -196,13 +160,13 @@ function generatePageTypst(
 
 #let heavy-stroke = 0.8pt
 #let show-ten-frames-for-all = ${
-    config.mode === "manual"
+    config.mode === 'manual'
       ? config.showTenFramesForAll
-        ? "true"
-        : "false"
-      : config.displayRules.tenFrames === "always"
-        ? "true"
-        : "false"
+        ? 'true'
+        : 'false'
+      : config.displayRules.tenFrames === 'always'
+        ? 'true'
+        : 'false'
   }
 
 ${generatePlaceValueColors()}
@@ -280,7 +244,7 @@ ${problemsTypst}
 )
 
 ] // End of constrained block
-`;
+`
 }
 
 /**
@@ -288,22 +252,17 @@ ${problemsTypst}
  */
 export function generateTypstSource(
   config: WorksheetConfig,
-  problems: WorksheetProblem[],
+  problems: WorksheetProblem[]
 ): string[] {
   // Use the problemsPerPage directly from config (primary state)
-  const problemsPerPage = config.problemsPerPage;
-  const rowsPerPage = problemsPerPage / config.cols;
+  const problemsPerPage = config.problemsPerPage
+  const rowsPerPage = problemsPerPage / config.cols
 
   // Chunk problems into discrete pages
-  const pages = chunkProblems(problems, problemsPerPage);
+  const pages = chunkProblems(problems, problemsPerPage)
 
   // Generate separate Typst source for each page
   return pages.map((pageProblems, pageIndex) =>
-    generatePageTypst(
-      config,
-      pageProblems,
-      pageIndex * problemsPerPage,
-      rowsPerPage,
-    ),
-  );
+    generatePageTypst(config, pageProblems, pageIndex * problemsPerPage, rowsPerPage)
+  )
 }
diff --git a/apps/web/src/app/create/worksheets/addition/typstHelpers/index.ts b/apps/web/src/app/create/worksheets/addition/typstHelpers/index.ts
index 37f38084..da43bd20 100644
--- a/apps/web/src/app/create/worksheets/addition/typstHelpers/index.ts
+++ b/apps/web/src/app/create/worksheets/addition/typstHelpers/index.ts
@@ -5,25 +5,25 @@
 export {
   generatePlaceValueColors,
   getPlaceValueColorNames,
-} from "./shared/colors";
-export { generateTypstHelpers } from "./shared/helpers";
+} from './shared/colors'
+export { generateTypstHelpers } from './shared/helpers'
 export type {
   DisplayOptions,
   CellDimensions,
   TypstConstants,
-} from "./shared/types";
-export { TYPST_CONSTANTS } from "./shared/types";
+} from './shared/types'
+export { TYPST_CONSTANTS } from './shared/types'
 
 // Subtraction components
-export { generateBorrowBoxesRow } from "./subtraction/borrowBoxes";
-export { generateMinuendRow } from "./subtraction/minuendRow";
-export { generateSubtrahendRow } from "./subtraction/subtrahendRow";
+export { generateBorrowBoxesRow } from './subtraction/borrowBoxes'
+export { generateMinuendRow } from './subtraction/minuendRow'
+export { generateSubtrahendRow } from './subtraction/subtrahendRow'
 export {
   generateLineRow,
   generateTenFramesRow,
   generateAnswerBoxesRow,
-} from "./subtraction/answerRow";
-export { generateSubtractionProblemStackFunction } from "./subtraction/problemStack";
+} from './subtraction/answerRow'
+export { generateSubtractionProblemStackFunction } from './subtraction/problemStack'
 
 // Addition components (TODO: extract in future phase)
 // export { generateCarryBoxesRow } from './addition/carryBoxes'
diff --git a/apps/web/src/app/create/worksheets/addition/typstHelpers/shared/colors.ts b/apps/web/src/app/create/worksheets/addition/typstHelpers/shared/colors.ts
index 151b2dd8..82ac982d 100644
--- a/apps/web/src/app/create/worksheets/addition/typstHelpers/shared/colors.ts
+++ b/apps/web/src/app/create/worksheets/addition/typstHelpers/shared/colors.ts
@@ -14,7 +14,7 @@ export function generatePlaceValueColors(): string {
 #let color-ten-thousands = rgb(243, 229, 245) // Light purple/lavender (ten-thousands)
 #let color-hundred-thousands = rgb(255, 239, 213) // Light peach/orange (hundred-thousands)
 #let color-none = white                   // No color
-`;
+`
 }
 
 /**
@@ -22,11 +22,11 @@ export function generatePlaceValueColors(): string {
  */
 export function getPlaceValueColorNames(): string[] {
   return [
-    "color-ones",
-    "color-tens",
-    "color-hundreds",
-    "color-thousands",
-    "color-ten-thousands",
-    "color-hundred-thousands",
-  ];
+    'color-ones',
+    'color-tens',
+    'color-hundreds',
+    'color-thousands',
+    'color-ten-thousands',
+    'color-hundred-thousands',
+  ]
 }
diff --git a/apps/web/src/app/create/worksheets/addition/typstHelpers/shared/helpers.ts b/apps/web/src/app/create/worksheets/addition/typstHelpers/shared/helpers.ts
index 733e3fe1..3c1a5749 100644
--- a/apps/web/src/app/create/worksheets/addition/typstHelpers/shared/helpers.ts
+++ b/apps/web/src/app/create/worksheets/addition/typstHelpers/shared/helpers.ts
@@ -1,7 +1,7 @@
 // Shared Typst helper functions and components
 // Reusable across addition and subtraction worksheets
 
-import { TYPST_CONSTANTS } from "./types";
+import { TYPST_CONSTANTS } from './types'
 
 /**
  * Generate Typst helper functions (ten-frames, diagonal boxes, etc.)
@@ -71,5 +71,5 @@ export function generateTypstHelpers(cellSize: number): string {
     )
   ]
 }
-`;
+`
 }
diff --git a/apps/web/src/app/create/worksheets/addition/typstHelpers/shared/types.ts b/apps/web/src/app/create/worksheets/addition/typstHelpers/shared/types.ts
index 64c4d8c0..e8dbc0bb 100644
--- a/apps/web/src/app/create/worksheets/addition/typstHelpers/shared/types.ts
+++ b/apps/web/src/app/create/worksheets/addition/typstHelpers/shared/types.ts
@@ -1,37 +1,37 @@
 // Shared TypeScript types for Typst generation
 
 export interface DisplayOptions {
-  showCarryBoxes: boolean;
-  showAnswerBoxes: boolean;
-  showPlaceValueColors: boolean;
-  showProblemNumbers: boolean;
-  showCellBorder: boolean;
-  showTenFrames: boolean;
-  showTenFramesForAll: boolean;
-  fontSize: number;
+  showCarryBoxes: boolean
+  showAnswerBoxes: boolean
+  showPlaceValueColors: boolean
+  showProblemNumbers: boolean
+  showCellBorder: boolean
+  showTenFrames: boolean
+  showTenFramesForAll: boolean
+  fontSize: number
 }
 
 export interface CellDimensions {
-  cellSize: number; // in inches
-  cellSizeIn: string; // formatted for Typst (e.g., "0.55in")
-  cellSizePt: number; // in points (for font sizing)
+  cellSize: number // in inches
+  cellSizeIn: string // formatted for Typst (e.g., "0.55in")
+  cellSizePt: number // in points (for font sizing)
 }
 
 export interface TypstConstants {
-  CELL_STROKE_WIDTH: number;
-  TEN_FRAME_STROKE_WIDTH: number;
-  TEN_FRAME_CELL_STROKE_WIDTH: number;
-  ARROW_STROKE_WIDTH: number;
+  CELL_STROKE_WIDTH: number
+  TEN_FRAME_STROKE_WIDTH: number
+  TEN_FRAME_CELL_STROKE_WIDTH: number
+  ARROW_STROKE_WIDTH: number
 
   // Positioning offsets for borrowing hint arrows
-  ARROW_START_DX: number;
-  ARROW_START_DY: number;
-  ARROWHEAD_DX: number;
-  ARROWHEAD_DY: number;
+  ARROW_START_DX: number
+  ARROW_START_DY: number
+  ARROWHEAD_DX: number
+  ARROWHEAD_DY: number
 
   // Sizing factors
-  HINT_TEXT_SIZE_FACTOR: number;
-  ARROWHEAD_SIZE_FACTOR: number;
+  HINT_TEXT_SIZE_FACTOR: number
+  ARROWHEAD_SIZE_FACTOR: number
 }
 
 export const TYPST_CONSTANTS: TypstConstants = {
@@ -47,4 +47,4 @@ export const TYPST_CONSTANTS: TypstConstants = {
 
   HINT_TEXT_SIZE_FACTOR: 0.25,
   ARROWHEAD_SIZE_FACTOR: 0.35,
-} as const;
+} as const
diff --git a/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/borrowBoxes.ts b/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/borrowBoxes.ts
index 75f7cb32..9796dd20 100644
--- a/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/borrowBoxes.ts
+++ b/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/borrowBoxes.ts
@@ -1,8 +1,8 @@
 // Borrow boxes row rendering for subtraction problems
 // This row shows where borrows occur (FROM higher place TO lower place)
 
-import type { CellDimensions } from "../shared/types";
-import { TYPST_CONSTANTS } from "../shared/types";
+import type { CellDimensions } from '../shared/types'
+import { TYPST_CONSTANTS } from '../shared/types'
 
 /**
  * Generate Typst code for the borrow boxes row
@@ -18,23 +18,19 @@ import { TYPST_CONSTANTS } from "../shared/types";
  * @returns Typst code for borrow boxes row
  */
 export function generateBorrowBoxesRow(cellDimensions: CellDimensions): string {
-  const { cellSize, cellSizeIn, cellSizePt } = cellDimensions;
+  const { cellSize, cellSizeIn, cellSizePt } = cellDimensions
 
-  const hintTextSize = (
-    cellSizePt * TYPST_CONSTANTS.HINT_TEXT_SIZE_FACTOR
-  ).toFixed(1);
-  const arrowheadSize = (
-    cellSizePt * TYPST_CONSTANTS.ARROWHEAD_SIZE_FACTOR
-  ).toFixed(1);
+  const hintTextSize = (cellSizePt * TYPST_CONSTANTS.HINT_TEXT_SIZE_FACTOR).toFixed(1)
+  const arrowheadSize = (cellSizePt * TYPST_CONSTANTS.ARROWHEAD_SIZE_FACTOR).toFixed(1)
 
-  const arrowStartDx = (cellSize * TYPST_CONSTANTS.ARROW_START_DX).toFixed(2);
-  const arrowStartDy = (cellSize * TYPST_CONSTANTS.ARROW_START_DY).toFixed(2);
-  const arrowEndX = (cellSize * 0.24).toFixed(2);
-  const arrowEndY = (cellSize * 0.7).toFixed(2);
-  const arrowControlX = (cellSize * 0.11).toFixed(2);
-  const arrowControlY = (cellSize * -0.5).toFixed(2);
-  const arrowheadDx = (cellSize * TYPST_CONSTANTS.ARROWHEAD_DX).toFixed(2);
-  const arrowheadDy = (cellSize * TYPST_CONSTANTS.ARROWHEAD_DY).toFixed(2);
+  const arrowStartDx = (cellSize * TYPST_CONSTANTS.ARROW_START_DX).toFixed(2)
+  const arrowStartDy = (cellSize * TYPST_CONSTANTS.ARROW_START_DY).toFixed(2)
+  const arrowEndX = (cellSize * 0.24).toFixed(2)
+  const arrowEndY = (cellSize * 0.7).toFixed(2)
+  const arrowControlX = (cellSize * 0.11).toFixed(2)
+  const arrowControlY = (cellSize * -0.5).toFixed(2)
+  const arrowheadDx = (cellSize * TYPST_CONSTANTS.ARROWHEAD_DX).toFixed(2)
+  const arrowheadDy = (cellSize * TYPST_CONSTANTS.ARROWHEAD_DY).toFixed(2)
 
   return String.raw`
       // Borrow boxes row (shows borrows FROM higher place TO lower place)
@@ -104,5 +100,5 @@ export function generateBorrowBoxesRow(cellDimensions: CellDimensions): string {
           ],)
         }
       },
-`;
+`
 }
diff --git a/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/minuendRow.ts b/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/minuendRow.ts
index 50aa80e3..cd9b54ba 100644
--- a/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/minuendRow.ts
+++ b/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/minuendRow.ts
@@ -1,7 +1,7 @@
 // Minuend row rendering for subtraction problems
 // Shows the top number with optional scratch work boxes for borrowing
 
-import type { CellDimensions } from "../shared/types";
+import type { CellDimensions } from '../shared/types'
 
 /**
  * Generate Typst code for the minuend row
@@ -14,7 +14,7 @@ import type { CellDimensions } from "../shared/types";
  * @returns Typst code for minuend row
  */
 export function generateMinuendRow(cellDimensions: CellDimensions): string {
-  const { cellSize, cellSizeIn, cellSizePt } = cellDimensions;
+  const { cellSize, cellSizeIn, cellSizePt } = cellDimensions
 
   return String.raw`
       // Minuend row (top number with optional scratch work boxes)
@@ -93,5 +93,5 @@ export function generateMinuendRow(cellDimensions: CellDimensions): string {
           ],)
         }
       },
-`;
+`
 }
diff --git a/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/problemStack.ts b/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/problemStack.ts
index 667ff3ee..895cf7af 100644
--- a/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/problemStack.ts
+++ b/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/problemStack.ts
@@ -1,16 +1,12 @@
 // Main subtraction problem stack function
 // Composes all row components into the complete problem rendering
 
-import { getPlaceValueColorNames } from "../shared/colors";
-import type { CellDimensions } from "../shared/types";
-import { generateBorrowBoxesRow } from "./borrowBoxes";
-import { generateMinuendRow } from "./minuendRow";
-import { generateSubtrahendRow } from "./subtrahendRow";
-import {
-  generateLineRow,
-  generateTenFramesRow,
-  generateAnswerBoxesRow,
-} from "./answerRow";
+import { getPlaceValueColorNames } from '../shared/colors'
+import type { CellDimensions } from '../shared/types'
+import { generateBorrowBoxesRow } from './borrowBoxes'
+import { generateMinuendRow } from './minuendRow'
+import { generateSubtrahendRow } from './subtrahendRow'
+import { generateLineRow, generateTenFramesRow, generateAnswerBoxesRow } from './answerRow'
 
 /**
  * Generate the main subtraction problem stack function for Typst
@@ -30,18 +26,18 @@ import {
  */
 export function generateSubtractionProblemStackFunction(
   cellSize: number,
-  maxDigits: number = 3,
+  maxDigits: number = 3
 ): string {
-  const cellSizeIn = `${cellSize}in`;
-  const cellSizePt = cellSize * 72;
+  const cellSizeIn = `${cellSize}in`
+  const cellSizePt = cellSize * 72
 
   const cellDimensions: CellDimensions = {
     cellSize,
     cellSizeIn,
     cellSizePt,
-  };
+  }
 
-  const placeColors = getPlaceValueColorNames();
+  const placeColors = getPlaceValueColorNames()
 
   return String.raw`
 // Subtraction problem rendering function (supports 1-${maxDigits} digit problems)
@@ -49,7 +45,7 @@ export function generateSubtractionProblemStackFunction(
 // Per-problem display flags: show-borrows, show-answers, show-colors, show-ten-frames, show-numbers, show-borrow-notation, show-borrowing-hints
 #let subtraction-problem-stack(minuend, subtrahend, index-or-none, show-borrows, show-answers, show-colors, show-ten-frames, show-numbers, show-borrow-notation, show-borrowing-hints) = {
   // Place value colors array for dynamic lookup
-  let place-colors = (${placeColors.join(", ")})
+  let place-colors = (${placeColors.join(', ')})
 
   // Extract digits dynamically based on problem size
   let max-digits = ${maxDigits}
@@ -137,5 +133,5 @@ ${generateAnswerBoxesRow(cellDimensions)}
     )
   )
 }
-`;
+`
 }
diff --git a/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/subtrahendRow.ts b/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/subtrahendRow.ts
index 19d2809a..80a85f68 100644
--- a/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/subtrahendRow.ts
+++ b/apps/web/src/app/create/worksheets/addition/typstHelpers/subtraction/subtrahendRow.ts
@@ -1,7 +1,7 @@
 // Subtrahend row rendering for subtraction problems
 // Shows the bottom number being subtracted with − sign
 
-import type { CellDimensions } from "../shared/types";
+import type { CellDimensions } from '../shared/types'
 
 /**
  * Generate Typst code for the subtrahend row
@@ -15,7 +15,7 @@ import type { CellDimensions } from "../shared/types";
  * @returns Typst code for subtrahend row
  */
 export function generateSubtrahendRow(cellDimensions: CellDimensions): string {
-  const { cellSize, cellSizeIn, cellSizePt } = cellDimensions;
+  const { cellSize, cellSizeIn, cellSizePt } = cellDimensions
 
   return String.raw`
       // Subtrahend row with − sign
@@ -66,5 +66,5 @@ export function generateSubtrahendRow(cellDimensions: CellDimensions): string {
           ],)
         }
       },
-`;
+`
 }
diff --git a/apps/web/src/app/create/worksheets/addition/utils/dateFormatting.ts b/apps/web/src/app/create/worksheets/addition/utils/dateFormatting.ts
index 44972eb0..076e0752 100644
--- a/apps/web/src/app/create/worksheets/addition/utils/dateFormatting.ts
+++ b/apps/web/src/app/create/worksheets/addition/utils/dateFormatting.ts
@@ -7,10 +7,10 @@
  * @example "November 7, 2025"
  */
 export function getDefaultDate(): string {
-  const now = new Date();
-  return now.toLocaleDateString("en-US", {
-    month: "long",
-    day: "numeric",
-    year: "numeric",
-  });
+  const now = new Date()
+  return now.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  })
 }
diff --git a/apps/web/src/app/create/worksheets/addition/utils/layoutCalculations.ts b/apps/web/src/app/create/worksheets/addition/utils/layoutCalculations.ts
index c8d04561..bab97471 100644
--- a/apps/web/src/app/create/worksheets/addition/utils/layoutCalculations.ts
+++ b/apps/web/src/app/create/worksheets/addition/utils/layoutCalculations.ts
@@ -10,23 +10,23 @@
  */
 export function getDefaultColsForProblemsPerPage(
   problemsPerPage: number,
-  orientation: "portrait" | "landscape",
+  orientation: 'portrait' | 'landscape'
 ): number {
-  if (orientation === "portrait") {
-    if (problemsPerPage === 6) return 2;
-    if (problemsPerPage === 8) return 2;
-    if (problemsPerPage === 10) return 2;
-    if (problemsPerPage === 12) return 3;
-    if (problemsPerPage === 15) return 3;
-    return 2;
+  if (orientation === 'portrait') {
+    if (problemsPerPage === 6) return 2
+    if (problemsPerPage === 8) return 2
+    if (problemsPerPage === 10) return 2
+    if (problemsPerPage === 12) return 3
+    if (problemsPerPage === 15) return 3
+    return 2
   } else {
-    if (problemsPerPage === 8) return 4;
-    if (problemsPerPage === 10) return 5;
-    if (problemsPerPage === 12) return 4;
-    if (problemsPerPage === 15) return 5;
-    if (problemsPerPage === 16) return 4;
-    if (problemsPerPage === 20) return 5;
-    return 4;
+    if (problemsPerPage === 8) return 4
+    if (problemsPerPage === 10) return 5
+    if (problemsPerPage === 12) return 4
+    if (problemsPerPage === 15) return 5
+    if (problemsPerPage === 16) return 4
+    if (problemsPerPage === 20) return 5
+    return 4
   }
 }
 
@@ -40,9 +40,9 @@ export function getDefaultColsForProblemsPerPage(
 export function calculateDerivedState(
   problemsPerPage: number,
   pages: number,
-  cols: number,
+  cols: number
 ): { rows: number; total: number } {
-  const total = problemsPerPage * pages;
-  const rows = Math.ceil(total / cols);
-  return { rows, total };
+  const total = problemsPerPage * pages
+  const rows = Math.ceil(total / cols)
+  return { rows, total }
 }
diff --git a/apps/web/src/app/create/worksheets/addition/validation.ts b/apps/web/src/app/create/worksheets/addition/validation.ts
index 0360c77a..8177865b 100644
--- a/apps/web/src/app/create/worksheets/addition/validation.ts
+++ b/apps/web/src/app/create/worksheets/addition/validation.ts
@@ -1,105 +1,98 @@
 // Validation logic for worksheet configuration
 
-import type {
-  WorksheetFormState,
-  WorksheetConfig,
-  ValidationResult,
-} from "./types";
-import type { DisplayRules } from "./displayRules";
+import type { WorksheetFormState, WorksheetConfig, ValidationResult } from './types'
+import type { DisplayRules } from './displayRules'
 
 /**
  * Get current date formatted as "Month Day, Year"
  */
 function getDefaultDate(): string {
-  const now = new Date();
-  return now.toLocaleDateString("en-US", {
-    month: "long",
-    day: "numeric",
-    year: "numeric",
-  });
+  const now = new Date()
+  return now.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  })
 }
 
 /**
  * Validate and create complete config from partial form state
  */
-export function validateWorksheetConfig(
-  formState: WorksheetFormState,
-): ValidationResult {
-  const errors: string[] = [];
+export function validateWorksheetConfig(formState: WorksheetFormState): ValidationResult {
+  const errors: string[] = []
 
   // Validate total (must be positive, reasonable limit)
-  const total = formState.total ?? 20;
+  const total = formState.total ?? 20
   if (total < 1 || total > 100) {
-    errors.push("Total problems must be between 1 and 100");
+    errors.push('Total problems must be between 1 and 100')
   }
 
   // Validate cols and auto-calculate rows
-  const cols = formState.cols ?? 4;
+  const cols = formState.cols ?? 4
   if (cols < 1 || cols > 10) {
-    errors.push("Columns must be between 1 and 10");
+    errors.push('Columns must be between 1 and 10')
   }
 
   // Auto-calculate rows to fit all problems
-  const rows = Math.ceil(total / cols);
+  const rows = Math.ceil(total / cols)
 
   // Validate probabilities (0-1 range)
-  const pAnyStart = formState.pAnyStart ?? 0.75;
-  const pAllStart = formState.pAllStart ?? 0.25;
+  const pAnyStart = formState.pAnyStart ?? 0.75
+  const pAllStart = formState.pAllStart ?? 0.25
   if (pAnyStart < 0 || pAnyStart > 1) {
-    errors.push("pAnyStart must be between 0 and 1");
+    errors.push('pAnyStart must be between 0 and 1')
   }
   if (pAllStart < 0 || pAllStart > 1) {
-    errors.push("pAllStart must be between 0 and 1");
+    errors.push('pAllStart must be between 0 and 1')
   }
   if (pAllStart > pAnyStart) {
-    errors.push("pAllStart cannot be greater than pAnyStart");
+    errors.push('pAllStart cannot be greater than pAnyStart')
   }
 
   // Validate fontSize
-  const fontSize = formState.fontSize ?? 16;
+  const fontSize = formState.fontSize ?? 16
   if (fontSize < 8 || fontSize > 32) {
-    errors.push("Font size must be between 8 and 32");
+    errors.push('Font size must be between 8 and 32')
   }
 
   // V4: Validate digitRange (min and max must be 1-5, min <= max)
   // Note: Same range applies to both addition and subtraction
-  const digitRange = formState.digitRange ?? { min: 2, max: 2 };
+  const digitRange = formState.digitRange ?? { min: 2, max: 2 }
   if (!digitRange.min || digitRange.min < 1 || digitRange.min > 5) {
-    errors.push("Digit range min must be between 1 and 5");
+    errors.push('Digit range min must be between 1 and 5')
   }
   if (!digitRange.max || digitRange.max < 1 || digitRange.max > 5) {
-    errors.push("Digit range max must be between 1 and 5");
+    errors.push('Digit range max must be between 1 and 5')
   }
   if (digitRange.min > digitRange.max) {
-    errors.push("Digit range min cannot be greater than max");
+    errors.push('Digit range min cannot be greater than max')
   }
 
   // V4: Validate operator (addition, subtraction, or mixed)
-  const operator = formState.operator ?? "addition";
-  if (!["addition", "subtraction", "mixed"].includes(operator)) {
-    errors.push('Operator must be "addition", "subtraction", or "mixed"');
+  const operator = formState.operator ?? 'addition'
+  if (!['addition', 'subtraction', 'mixed'].includes(operator)) {
+    errors.push('Operator must be "addition", "subtraction", or "mixed"')
   }
 
   // Validate seed (must be positive integer)
-  const seed = formState.seed ?? Date.now() % 2147483647;
+  const seed = formState.seed ?? Date.now() % 2147483647
   if (!Number.isInteger(seed) || seed < 0) {
-    errors.push("Seed must be a non-negative integer");
+    errors.push('Seed must be a non-negative integer')
   }
 
   if (errors.length > 0) {
-    return { isValid: false, errors };
+    return { isValid: false, errors }
   }
 
   // Determine orientation based on columns (portrait = 2-3 cols, landscape = 4-5 cols)
-  const orientation =
-    formState.orientation || (cols <= 3 ? "portrait" : "landscape");
+  const orientation = formState.orientation || (cols <= 3 ? 'portrait' : 'landscape')
 
   // Get primary state values
-  const problemsPerPage = formState.problemsPerPage ?? total;
-  const pages = formState.pages ?? 1;
+  const problemsPerPage = formState.problemsPerPage ?? total
+  const pages = formState.pages ?? 1
 
   // Determine mode (default to 'smart' if not specified)
-  const mode = formState.mode ?? "smart";
+  const mode = formState.mode ?? 'smart'
 
   // Shared fields for both modes
   const sharedFields = {
@@ -114,7 +107,7 @@ export function validateWorksheetConfig(
     rows,
 
     // Other fields
-    name: formState.name?.trim() || "Student",
+    name: formState.name?.trim() || 'Student',
     date: formState.date?.trim() || getDefaultDate(),
     pAnyStart,
     pAllStart,
@@ -124,12 +117,12 @@ export function validateWorksheetConfig(
     digitRange,
 
     // V4: Operator selection (addition, subtraction, or mixed)
-    operator: formState.operator ?? "addition",
+    operator: formState.operator ?? 'addition',
 
     // Layout
     page: {
-      wIn: orientation === "portrait" ? 8.5 : 11,
-      hIn: orientation === "portrait" ? 11 : 8.5,
+      wIn: orientation === 'portrait' ? 8.5 : 11,
+      hIn: orientation === 'portrait' ? 11 : 8.5,
     },
     margins: {
       left: 0.6,
@@ -140,37 +133,37 @@ export function validateWorksheetConfig(
 
     fontSize,
     seed,
-  };
+  }
 
   // Build mode-specific config
-  let config: WorksheetConfig;
+  let config: WorksheetConfig
 
-  if (mode === "smart") {
+  if (mode === 'smart') {
     // Smart mode: Use displayRules for conditional scaffolding
     const displayRules: DisplayRules = {
-      carryBoxes: "whenRegrouping",
-      answerBoxes: "always",
-      placeValueColors: "always",
-      tenFrames: "whenRegrouping",
-      problemNumbers: "always",
-      cellBorders: "always",
-      borrowNotation: "whenRegrouping", // Subtraction: show when borrowing
-      borrowingHints: "never", // Subtraction: no hints by default
+      carryBoxes: 'whenRegrouping',
+      answerBoxes: 'always',
+      placeValueColors: 'always',
+      tenFrames: 'whenRegrouping',
+      problemNumbers: 'always',
+      cellBorders: 'always',
+      borrowNotation: 'whenRegrouping', // Subtraction: show when borrowing
+      borrowingHints: 'never', // Subtraction: no hints by default
       ...((formState.displayRules as any) ?? {}), // Override with provided rules if any
-    };
+    }
 
     config = {
       version: 4,
-      mode: "smart",
+      mode: 'smart',
       displayRules,
       difficultyProfile: formState.difficultyProfile,
       ...sharedFields,
-    };
+    }
   } else {
     // Manual mode: Use boolean flags for uniform display
     config = {
       version: 4,
-      mode: "manual",
+      mode: 'manual',
       showCarryBoxes: formState.showCarryBoxes ?? true,
       showAnswerBoxes: formState.showAnswerBoxes ?? true,
       showPlaceValueColors: formState.showPlaceValueColors ?? true,
@@ -182,8 +175,8 @@ export function validateWorksheetConfig(
       showBorrowingHints: formState.showBorrowingHints ?? false,
       manualPreset: formState.manualPreset,
       ...sharedFields,
-    };
+    }
   }
 
-  return { isValid: true, config };
+  return { isValid: true, config }
 }
diff --git a/apps/web/src/app/create/worksheets/config-schemas.ts b/apps/web/src/app/create/worksheets/config-schemas.ts
index b80dbdd9..bc0dd52e 100644
--- a/apps/web/src/app/create/worksheets/config-schemas.ts
+++ b/apps/web/src/app/create/worksheets/config-schemas.ts
@@ -1,5 +1,5 @@
-import { z } from "zod";
-import { getProfileFromConfig } from "./addition/difficultyProfiles";
+import { z } from 'zod'
+import { getProfileFromConfig } from './addition/difficultyProfiles'
 
 /**
  * Versioned worksheet config schemas with type-safe validation and migration
@@ -21,7 +21,7 @@ import { getProfileFromConfig } from "./addition/difficultyProfiles";
 // =============================================================================
 
 /** Current schema version for addition worksheets */
-const ADDITION_CURRENT_VERSION = 4;
+const ADDITION_CURRENT_VERSION = 4
 
 /**
  * Addition worksheet config - Version 1
@@ -32,7 +32,7 @@ export const additionConfigV1Schema = z.object({
   problemsPerPage: z.number().int().min(1).max(100),
   cols: z.number().int().min(1).max(10),
   pages: z.number().int().min(1).max(20),
-  orientation: z.enum(["portrait", "landscape"]),
+  orientation: z.enum(['portrait', 'landscape']),
   name: z.string(),
   pAnyStart: z.number().min(0).max(1),
   pAllStart: z.number().min(0).max(1),
@@ -45,9 +45,9 @@ export const additionConfigV1Schema = z.object({
   showTenFrames: z.boolean(),
   showTenFramesForAll: z.boolean(),
   fontSize: z.number().int().min(8).max(32),
-});
+})
 
-export type AdditionConfigV1 = z.infer<typeof additionConfigV1Schema>;
+export type AdditionConfigV1 = z.infer<typeof additionConfigV1Schema>
 
 /**
  * Addition worksheet config - Version 2
@@ -58,7 +58,7 @@ export const additionConfigV2Schema = z.object({
   problemsPerPage: z.number().int().min(1).max(100),
   cols: z.number().int().min(1).max(10),
   pages: z.number().int().min(1).max(20),
-  orientation: z.enum(["portrait", "landscape"]),
+  orientation: z.enum(['portrait', 'landscape']),
   name: z.string(),
   pAnyStart: z.number().min(0).max(1),
   pAllStart: z.number().min(0).max(1),
@@ -67,46 +67,46 @@ export const additionConfigV2Schema = z.object({
   // V2: Display rules replace individual booleans
   displayRules: z.object({
     carryBoxes: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     answerBoxes: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     placeValueColors: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     tenFrames: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     problemNumbers: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     cellBorders: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
   }),
 
@@ -116,9 +116,9 @@ export const additionConfigV2Schema = z.object({
   // V2: Keep fontSize and showTenFramesForAll for now (may refactor later)
   fontSize: z.number().int().min(8).max(32),
   showTenFramesForAll: z.boolean(),
-});
+})
 
-export type AdditionConfigV2 = z.infer<typeof additionConfigV2Schema>;
+export type AdditionConfigV2 = z.infer<typeof additionConfigV2Schema>
 
 /**
  * Addition worksheet config - Version 3
@@ -133,7 +133,7 @@ const additionConfigV3BaseSchema = z.object({
   problemsPerPage: z.number().int().min(1).max(100),
   cols: z.number().int().min(1).max(10),
   pages: z.number().int().min(1).max(20),
-  orientation: z.enum(["portrait", "landscape"]),
+  orientation: z.enum(['portrait', 'landscape']),
   name: z.string(),
   fontSize: z.number().int().min(8).max(32),
 
@@ -141,55 +141,55 @@ const additionConfigV3BaseSchema = z.object({
   pAnyStart: z.number().min(0).max(1),
   pAllStart: z.number().min(0).max(1),
   interpolate: z.boolean(),
-});
+})
 
 // Smart Difficulty Mode
 const additionConfigV3SmartSchema = additionConfigV3BaseSchema.extend({
-  mode: z.literal("smart"),
+  mode: z.literal('smart'),
 
   // Conditional display rules
   displayRules: z.object({
     carryBoxes: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     answerBoxes: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     placeValueColors: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     tenFrames: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     problemNumbers: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     cellBorders: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
   }),
 
@@ -198,11 +198,11 @@ const additionConfigV3SmartSchema = additionConfigV3BaseSchema.extend({
 
   // showTenFramesForAll is deprecated in V3 smart mode
   // (controlled by displayRules.tenFrames)
-});
+})
 
 // Manual Control Mode
 const additionConfigV3ManualSchema = additionConfigV3BaseSchema.extend({
-  mode: z.literal("manual"),
+  mode: z.literal('manual'),
 
   // Simple boolean toggles
   showCarryBoxes: z.boolean(),
@@ -215,19 +215,17 @@ const additionConfigV3ManualSchema = additionConfigV3BaseSchema.extend({
 
   // Optional: Which manual preset is selected
   manualPreset: z.string().optional(),
-});
+})
 
 // V3 uses discriminated union on 'mode'
-export const additionConfigV3Schema = z.discriminatedUnion("mode", [
+export const additionConfigV3Schema = z.discriminatedUnion('mode', [
   additionConfigV3SmartSchema,
   additionConfigV3ManualSchema,
-]);
+])
 
-export type AdditionConfigV3 = z.infer<typeof additionConfigV3Schema>;
-export type AdditionConfigV3Smart = z.infer<typeof additionConfigV3SmartSchema>;
-export type AdditionConfigV3Manual = z.infer<
-  typeof additionConfigV3ManualSchema
->;
+export type AdditionConfigV3 = z.infer<typeof additionConfigV3Schema>
+export type AdditionConfigV3Smart = z.infer<typeof additionConfigV3SmartSchema>
+export type AdditionConfigV3Manual = z.infer<typeof additionConfigV3ManualSchema>
 
 /**
  * Addition worksheet config - Version 4
@@ -242,7 +240,7 @@ const additionConfigV4BaseSchema = z.object({
   problemsPerPage: z.number().int().min(1).max(100),
   cols: z.number().int().min(1).max(10),
   pages: z.number().int().min(1).max(20),
-  orientation: z.enum(["portrait", "landscape"]),
+  orientation: z.enum(['portrait', 'landscape']),
   name: z.string(),
   fontSize: z.number().int().min(8).max(32),
 
@@ -253,75 +251,75 @@ const additionConfigV4BaseSchema = z.object({
       max: z.number().int().min(1).max(5),
     })
     .refine((data) => data.min <= data.max, {
-      message: "min must be less than or equal to max",
+      message: 'min must be less than or equal to max',
     }),
 
   // V4: Operator selection (addition, subtraction, or mixed)
-  operator: z.enum(["addition", "subtraction", "mixed"]).default("addition"),
+  operator: z.enum(['addition', 'subtraction', 'mixed']).default('addition'),
 
   // Regrouping probabilities (shared between modes)
   pAnyStart: z.number().min(0).max(1),
   pAllStart: z.number().min(0).max(1),
   interpolate: z.boolean(),
-});
+})
 
 // Smart Difficulty Mode for V4
 const additionConfigV4SmartSchema = additionConfigV4BaseSchema.extend({
-  mode: z.literal("smart"),
+  mode: z.literal('smart'),
 
   // Conditional display rules
   displayRules: z.object({
     carryBoxes: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     answerBoxes: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     placeValueColors: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     tenFrames: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     problemNumbers: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
     cellBorders: z.enum([
-      "always",
-      "never",
-      "whenRegrouping",
-      "whenMultipleRegroups",
-      "when3PlusDigits",
+      'always',
+      'never',
+      'whenRegrouping',
+      'whenMultipleRegroups',
+      'when3PlusDigits',
     ]),
   }),
 
   // Optional: Which smart difficulty profile is selected
   difficultyProfile: z.string().optional(),
-});
+})
 
 // Manual Control Mode for V4
 const additionConfigV4ManualSchema = additionConfigV4BaseSchema.extend({
-  mode: z.literal("manual"),
+  mode: z.literal('manual'),
 
   // Simple boolean toggles
   showCarryBoxes: z.boolean(),
@@ -336,57 +334,55 @@ const additionConfigV4ManualSchema = additionConfigV4BaseSchema.extend({
 
   // Optional: Which manual preset is selected
   manualPreset: z.string().optional(),
-});
+})
 
 // V4 uses discriminated union on 'mode'
-export const additionConfigV4Schema = z.discriminatedUnion("mode", [
+export const additionConfigV4Schema = z.discriminatedUnion('mode', [
   additionConfigV4SmartSchema,
   additionConfigV4ManualSchema,
-]);
+])
 
-export type AdditionConfigV4 = z.infer<typeof additionConfigV4Schema>;
-export type AdditionConfigV4Smart = z.infer<typeof additionConfigV4SmartSchema>;
-export type AdditionConfigV4Manual = z.infer<
-  typeof additionConfigV4ManualSchema
->;
+export type AdditionConfigV4 = z.infer<typeof additionConfigV4Schema>
+export type AdditionConfigV4Smart = z.infer<typeof additionConfigV4SmartSchema>
+export type AdditionConfigV4Manual = z.infer<typeof additionConfigV4ManualSchema>
 
 /** Union of all addition config versions (add new versions here) */
-export const additionConfigSchema = z.discriminatedUnion("version", [
+export const additionConfigSchema = z.discriminatedUnion('version', [
   additionConfigV1Schema,
   additionConfigV2Schema,
   additionConfigV3Schema,
   additionConfigV4Schema,
-]);
+])
 
-export type AdditionConfig = z.infer<typeof additionConfigSchema>;
+export type AdditionConfig = z.infer<typeof additionConfigSchema>
 
 /**
  * Default addition config (always latest version - V4 Smart Mode)
  */
 export const defaultAdditionConfig: AdditionConfigV4Smart = {
   version: 4,
-  mode: "smart",
+  mode: 'smart',
   problemsPerPage: 20,
   cols: 5,
   pages: 1,
-  orientation: "landscape",
-  name: "",
+  orientation: 'landscape',
+  name: '',
   digitRange: { min: 2, max: 2 }, // V4: Default to 2-digit problems (backward compatible)
-  operator: "addition",
+  operator: 'addition',
   pAnyStart: 0.25,
   pAllStart: 0,
   interpolate: true,
   displayRules: {
-    carryBoxes: "whenRegrouping",
-    answerBoxes: "always",
-    placeValueColors: "always",
-    tenFrames: "whenRegrouping",
-    problemNumbers: "always",
-    cellBorders: "always",
+    carryBoxes: 'whenRegrouping',
+    answerBoxes: 'always',
+    placeValueColors: 'always',
+    tenFrames: 'whenRegrouping',
+    problemNumbers: 'always',
+    cellBorders: 'always',
   },
-  difficultyProfile: "earlyLearner",
+  difficultyProfile: 'earlyLearner',
   fontSize: 16,
-};
+}
 
 /**
  * Migrate V1 config to V2
@@ -395,21 +391,17 @@ export const defaultAdditionConfig: AdditionConfigV4Smart = {
 function migrateAdditionV1toV2(v1: AdditionConfigV1): AdditionConfigV2 {
   // Convert V1 boolean flags to V2 rule modes
   // V1 booleans were always on/off, so map true→'always', false→'never'
-  const displayRules: AdditionConfigV2["displayRules"] = {
-    carryBoxes: v1.showCarryBoxes ? "always" : "never",
-    answerBoxes: v1.showAnswerBoxes ? "always" : "never",
-    placeValueColors: v1.showPlaceValueColors ? "always" : "never",
-    tenFrames: v1.showTenFrames ? "always" : "never",
-    problemNumbers: v1.showProblemNumbers ? "always" : "never",
-    cellBorders: v1.showCellBorder ? "always" : "never",
-  };
+  const displayRules: AdditionConfigV2['displayRules'] = {
+    carryBoxes: v1.showCarryBoxes ? 'always' : 'never',
+    answerBoxes: v1.showAnswerBoxes ? 'always' : 'never',
+    placeValueColors: v1.showPlaceValueColors ? 'always' : 'never',
+    tenFrames: v1.showTenFrames ? 'always' : 'never',
+    problemNumbers: v1.showProblemNumbers ? 'always' : 'never',
+    cellBorders: v1.showCellBorder ? 'always' : 'never',
+  }
 
   // Try to match config to a known profile
-  const profileName = getProfileFromConfig(
-    v1.pAllStart,
-    v1.pAnyStart,
-    displayRules,
-  );
+  const profileName = getProfileFromConfig(v1.pAllStart, v1.pAnyStart, displayRules)
 
   return {
     version: 2,
@@ -422,10 +414,10 @@ function migrateAdditionV1toV2(v1: AdditionConfigV1): AdditionConfigV2 {
     pAllStart: v1.pAllStart,
     interpolate: v1.interpolate,
     displayRules,
-    difficultyProfile: profileName === "custom" ? undefined : profileName,
+    difficultyProfile: profileName === 'custom' ? undefined : profileName,
     showTenFramesForAll: v1.showTenFramesForAll,
     fontSize: v1.fontSize,
-  };
+  }
 }
 
 /**
@@ -437,7 +429,7 @@ function migrateAdditionV2toV3(v2: AdditionConfigV2): AdditionConfigV3 {
   if (v2.difficultyProfile) {
     return {
       version: 3,
-      mode: "smart",
+      mode: 'smart',
       problemsPerPage: v2.problemsPerPage,
       cols: v2.cols,
       pages: v2.pages,
@@ -449,14 +441,14 @@ function migrateAdditionV2toV3(v2: AdditionConfigV2): AdditionConfigV3 {
       interpolate: v2.interpolate,
       displayRules: v2.displayRules,
       difficultyProfile: v2.difficultyProfile,
-    };
+    }
   }
 
   // No preset → Manual mode
   // Convert displayRules to boolean flags
   return {
     version: 3,
-    mode: "manual",
+    mode: 'manual',
     problemsPerPage: v2.problemsPerPage,
     cols: v2.cols,
     pages: v2.pages,
@@ -466,14 +458,14 @@ function migrateAdditionV2toV3(v2: AdditionConfigV2): AdditionConfigV3 {
     pAnyStart: v2.pAnyStart,
     pAllStart: v2.pAllStart,
     interpolate: v2.interpolate,
-    showCarryBoxes: v2.displayRules.carryBoxes === "always",
-    showAnswerBoxes: v2.displayRules.answerBoxes === "always",
-    showPlaceValueColors: v2.displayRules.placeValueColors === "always",
-    showTenFrames: v2.displayRules.tenFrames === "always",
-    showProblemNumbers: v2.displayRules.problemNumbers === "always",
-    showCellBorder: v2.displayRules.cellBorders === "always",
+    showCarryBoxes: v2.displayRules.carryBoxes === 'always',
+    showAnswerBoxes: v2.displayRules.answerBoxes === 'always',
+    showPlaceValueColors: v2.displayRules.placeValueColors === 'always',
+    showTenFrames: v2.displayRules.tenFrames === 'always',
+    showProblemNumbers: v2.displayRules.problemNumbers === 'always',
+    showCellBorder: v2.displayRules.cellBorders === 'always',
     showTenFramesForAll: v2.showTenFramesForAll,
-  };
+  }
 }
 
 /**
@@ -491,23 +483,23 @@ function migrateAdditionV3toV4(v3: AdditionConfigV3): AdditionConfigV4 {
     name: v3.name,
     fontSize: v3.fontSize,
     digitRange: { min: 2, max: 2 }, // V4: Default to 2-digit for backward compatibility
-    operator: "addition" as const, // V4: Default to addition for backward compatibility
+    operator: 'addition' as const, // V4: Default to addition for backward compatibility
     pAnyStart: v3.pAnyStart,
     pAllStart: v3.pAllStart,
     interpolate: v3.interpolate,
-  };
+  }
 
-  if (v3.mode === "smart") {
+  if (v3.mode === 'smart') {
     return {
       ...baseFields,
-      mode: "smart",
+      mode: 'smart',
       displayRules: v3.displayRules,
       difficultyProfile: v3.difficultyProfile,
-    };
+    }
   } else {
     return {
       ...baseFields,
-      mode: "manual",
+      mode: 'manual',
       showCarryBoxes: v3.showCarryBoxes,
       showAnswerBoxes: v3.showAnswerBoxes,
       showPlaceValueColors: v3.showPlaceValueColors,
@@ -518,7 +510,7 @@ function migrateAdditionV3toV4(v3: AdditionConfigV3): AdditionConfigV4 {
       showBorrowNotation: true, // V4: Default to true for backward compatibility
       showBorrowingHints: false, // V4: Default to false for backward compatibility
       manualPreset: v3.manualPreset,
-    };
+    }
   }
 }
 
@@ -528,45 +520,38 @@ function migrateAdditionV3toV4(v3: AdditionConfigV3): AdditionConfigV4 {
  */
 export function migrateAdditionConfig(rawConfig: unknown): AdditionConfigV4 {
   // First, try to parse as any known version
-  const parsed = additionConfigSchema.safeParse(rawConfig);
+  const parsed = additionConfigSchema.safeParse(rawConfig)
 
   if (!parsed.success) {
     // If parsing fails completely, return defaults
-    console.warn(
-      "Failed to parse addition config, using defaults:",
-      parsed.error,
-    );
-    return defaultAdditionConfig;
+    console.warn('Failed to parse addition config, using defaults:', parsed.error)
+    return defaultAdditionConfig
   }
 
-  const config = parsed.data;
+  const config = parsed.data
 
   // Migrate to latest version
   switch (config.version) {
     case 1:
       // Migrate V1 → V2 → V3 → V4
-      return migrateAdditionV3toV4(
-        migrateAdditionV2toV3(migrateAdditionV1toV2(config)),
-      );
+      return migrateAdditionV3toV4(migrateAdditionV2toV3(migrateAdditionV1toV2(config)))
 
     case 2:
       // Migrate V2 → V3 → V4
-      return migrateAdditionV3toV4(migrateAdditionV2toV3(config));
+      return migrateAdditionV3toV4(migrateAdditionV2toV3(config))
 
     case 3:
       // Migrate V3 → V4
-      return migrateAdditionV3toV4(config);
+      return migrateAdditionV3toV4(config)
 
     case 4:
       // Already latest version
-      return config;
+      return config
 
     default:
       // Unknown version, return defaults
-      console.warn(
-        `Unknown addition config version: ${(config as any).version}`,
-      );
-      return defaultAdditionConfig;
+      console.warn(`Unknown addition config version: ${(config as any).version}`)
+      return defaultAdditionConfig
   }
 }
 
@@ -576,11 +561,11 @@ export function migrateAdditionConfig(rawConfig: unknown): AdditionConfigV4 {
  */
 export function parseAdditionConfig(jsonString: string): AdditionConfigV4 {
   try {
-    const raw = JSON.parse(jsonString);
-    return migrateAdditionConfig(raw);
+    const raw = JSON.parse(jsonString)
+    return migrateAdditionConfig(raw)
   } catch (error) {
-    console.error("Failed to parse addition config JSON:", error);
-    return defaultAdditionConfig;
+    console.error('Failed to parse addition config JSON:', error)
+    return defaultAdditionConfig
   }
 }
 
@@ -588,14 +573,12 @@ export function parseAdditionConfig(jsonString: string): AdditionConfigV4 {
  * Serialize addition config to JSON string
  * Ensures version field is set to current version (V4)
  */
-export function serializeAdditionConfig(
-  config: Omit<AdditionConfigV4, "version">,
-): string {
+export function serializeAdditionConfig(config: Omit<AdditionConfigV4, 'version'>): string {
   const versioned: AdditionConfigV4 = {
     ...config,
     version: ADDITION_CURRENT_VERSION,
-  } as AdditionConfigV4;
-  return JSON.stringify(versioned);
+  } as AdditionConfigV4
+  return JSON.stringify(versioned)
 }
 
 // =============================================================================
diff --git a/apps/web/src/app/games/page.tsx b/apps/web/src/app/games/page.tsx
index 7fb5e62a..c6012fa7 100644
--- a/apps/web/src/app/games/page.tsx
+++ b/apps/web/src/app/games/page.tsx
@@ -1,65 +1,62 @@
-"use client";
+'use client'
 
-import Autoplay from "embla-carousel-autoplay";
-import useEmblaCarousel from "embla-carousel-react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useTranslations } from "next-intl";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { PageWithNav } from "@/components/PageWithNav";
-import { GamePreview } from "@/components/GamePreview";
-import { getAvailableGames } from "@/lib/arcade/game-registry";
-import { css } from "../../../styled-system/css";
-import { useFullscreen } from "../../contexts/FullscreenContext";
-import { useGameMode } from "../../contexts/GameModeContext";
-import { useUserProfile } from "../../contexts/UserProfileContext";
-import { useAllPlayerStats } from "@/hooks/usePlayerStats";
+import Autoplay from 'embla-carousel-autoplay'
+import useEmblaCarousel from 'embla-carousel-react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { useTranslations } from 'next-intl'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { PageWithNav } from '@/components/PageWithNav'
+import { GamePreview } from '@/components/GamePreview'
+import { getAvailableGames } from '@/lib/arcade/game-registry'
+import { css } from '../../../styled-system/css'
+import { useFullscreen } from '../../contexts/FullscreenContext'
+import { useGameMode } from '../../contexts/GameModeContext'
+import { useUserProfile } from '../../contexts/UserProfileContext'
+import { useAllPlayerStats } from '@/hooks/usePlayerStats'
 
 function GamesPageContent() {
-  const t = useTranslations("games");
-  const { profile } = useUserProfile();
-  const { gameMode, getAllPlayers } = useGameMode();
-  const { enterFullscreen } = useFullscreen();
-  const router = useRouter();
+  const t = useTranslations('games')
+  const { profile } = useUserProfile()
+  const { gameMode, getAllPlayers } = useGameMode()
+  const { enterFullscreen } = useFullscreen()
+  const router = useRouter()
 
   // Get all players sorted by creation time
   const allPlayers = getAllPlayers().sort((a, b) => {
-    const aTime =
-      a.createdAt instanceof Date ? a.createdAt.getTime() : a.createdAt;
-    const bTime =
-      b.createdAt instanceof Date ? b.createdAt.getTime() : b.createdAt;
-    return aTime - bTime;
-  });
+    const aTime = a.createdAt instanceof Date ? a.createdAt.getTime() : a.createdAt
+    const bTime = b.createdAt instanceof Date ? b.createdAt.getTime() : b.createdAt
+    return aTime - bTime
+  })
 
   // Fetch per-player stats
-  const { data: playerStatsArray, isLoading: statsLoading } =
-    useAllPlayerStats();
+  const { data: playerStatsArray, isLoading: statsLoading } = useAllPlayerStats()
 
   // Create a map of playerId -> stats for easy lookup
   const playerStatsMap = useMemo(() => {
-    const map = new Map();
+    const map = new Map()
     if (playerStatsArray) {
       for (const stats of playerStatsArray) {
-        map.set(stats.playerId, stats);
+        map.set(stats.playerId, stats)
       }
     }
-    return map;
-  }, [playerStatsArray]);
+    return map
+  }, [playerStatsArray])
 
   // Get available games
-  const availableGames = getAvailableGames();
+  const availableGames = getAvailableGames()
 
   // Check if user has any stats to show (check if ANY player has stats)
   const hasStats =
     playerStatsArray &&
     playerStatsArray.length > 0 &&
-    playerStatsArray.some((s) => s.gamesPlayed > 0);
+    playerStatsArray.some((s) => s.gamesPlayed > 0)
 
   // Embla carousel setup for games hero carousel with autoplay
   const [gamesEmblaRef, gamesEmblaApi] = useEmblaCarousel(
     {
       loop: true,
-      align: "center",
+      align: 'center',
       slidesToScroll: 1,
       skipSnaps: false,
     },
@@ -69,152 +66,150 @@ function GamesPageContent() {
         stopOnInteraction: true,
         stopOnMouseEnter: true,
       }),
-    ],
-  );
-  const [gamesSelectedIndex, setGamesSelectedIndex] = useState(0);
+    ]
+  )
+  const [gamesSelectedIndex, setGamesSelectedIndex] = useState(0)
 
   // Embla carousel setup for player carousel
   const [emblaRef, emblaApi] = useEmblaCarousel({
     loop: true,
-    align: "center",
-    containScroll: "trimSnaps",
-  });
-  const [selectedIndex, setSelectedIndex] = useState(0);
+    align: 'center',
+    containScroll: 'trimSnaps',
+  })
+  const [selectedIndex, setSelectedIndex] = useState(0)
 
   // Games carousel callbacks
   const onGamesSelect = useCallback(() => {
-    if (!gamesEmblaApi) return;
-    setGamesSelectedIndex(gamesEmblaApi.selectedScrollSnap());
-  }, [gamesEmblaApi]);
+    if (!gamesEmblaApi) return
+    setGamesSelectedIndex(gamesEmblaApi.selectedScrollSnap())
+  }, [gamesEmblaApi])
 
   useEffect(() => {
-    if (!gamesEmblaApi) return;
-    onGamesSelect();
-    gamesEmblaApi.on("select", onGamesSelect);
-    gamesEmblaApi.on("reInit", onGamesSelect);
+    if (!gamesEmblaApi) return
+    onGamesSelect()
+    gamesEmblaApi.on('select', onGamesSelect)
+    gamesEmblaApi.on('reInit', onGamesSelect)
 
     return () => {
-      gamesEmblaApi.off("select", onGamesSelect);
-      gamesEmblaApi.off("reInit", onGamesSelect);
-    };
-  }, [gamesEmblaApi, onGamesSelect]);
+      gamesEmblaApi.off('select', onGamesSelect)
+      gamesEmblaApi.off('reInit', onGamesSelect)
+    }
+  }, [gamesEmblaApi, onGamesSelect])
 
   // Player carousel callbacks
   const onSelect = useCallback(() => {
-    if (!emblaApi) return;
-    setSelectedIndex(emblaApi.selectedScrollSnap());
-  }, [emblaApi]);
+    if (!emblaApi) return
+    setSelectedIndex(emblaApi.selectedScrollSnap())
+  }, [emblaApi])
 
   useEffect(() => {
-    if (!emblaApi) return;
-    onSelect();
-    emblaApi.on("select", onSelect);
-    emblaApi.on("reInit", onSelect);
+    if (!emblaApi) return
+    onSelect()
+    emblaApi.on('select', onSelect)
+    emblaApi.on('reInit', onSelect)
 
     return () => {
-      emblaApi.off("select", onSelect);
-      emblaApi.off("reInit", onSelect);
-    };
-  }, [emblaApi, onSelect]);
+      emblaApi.off('select', onSelect)
+      emblaApi.off('reInit', onSelect)
+    }
+  }, [emblaApi, onSelect])
 
   return (
     <div
       className={css({
-        minH: "screen",
-        bg: "bg.canvas",
-        py: "8",
-        position: "relative",
-        overflowX: "hidden",
+        minH: 'screen',
+        bg: 'bg.canvas',
+        py: '8',
+        position: 'relative',
+        overflowX: 'hidden',
       })}
     >
       {/* Subtle background pattern */}
       <div
         className={css({
-          position: "absolute",
+          position: 'absolute',
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
           backgroundImage:
-            "radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.05) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.05) 0%, transparent 50%)",
-          pointerEvents: "none",
+            'radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.05) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.05) 0%, transparent 50%)',
+          pointerEvents: 'none',
         })}
       />
 
       {/* Enter Arcade Button */}
       <div
         className={css({
-          mb: "12",
-          pt: "20",
-          textAlign: "center",
-          px: { base: "4", md: "12" },
+          mb: '12',
+          pt: '20',
+          textAlign: 'center',
+          px: { base: '4', md: '12' },
         })}
       >
         <button
           onClick={async () => {
             try {
-              await enterFullscreen();
-              sessionStorage.setItem("enterArcadeFullscreen", "true");
-              router.push("/arcade");
+              await enterFullscreen()
+              sessionStorage.setItem('enterArcadeFullscreen', 'true')
+              router.push('/arcade')
             } catch (error) {
-              console.error("Failed to enter fullscreen:", error);
-              sessionStorage.setItem("enterArcadeFullscreen", "true");
-              router.push("/arcade");
+              console.error('Failed to enter fullscreen:', error)
+              sessionStorage.setItem('enterArcadeFullscreen', 'true')
+              router.push('/arcade')
             }
           }}
           className={css({
-            px: { base: "12", md: "20" },
-            py: { base: "8", md: "12" },
-            minH: { base: "60px", md: "80px" },
-            minW: { base: "200px", md: "300px" },
-            background: "linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899)",
-            color: "white",
-            fontSize: { base: "3xl", md: "5xl" },
-            fontWeight: "black",
-            rounded: "3xl",
-            border: "none",
-            cursor: "pointer",
-            boxShadow:
-              "0 20px 60px rgba(139, 92, 246, 0.5), 0 0 0 4px rgba(255, 255, 255, 0.3)",
-            transition: "all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-            position: "relative",
-            overflow: "hidden",
-            touchAction: "manipulation",
-            textTransform: "uppercase",
-            letterSpacing: "wider",
+            px: { base: '12', md: '20' },
+            py: { base: '8', md: '12' },
+            minH: { base: '60px', md: '80px' },
+            minW: { base: '200px', md: '300px' },
+            background: 'linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899)',
+            color: 'white',
+            fontSize: { base: '3xl', md: '5xl' },
+            fontWeight: 'black',
+            rounded: '3xl',
+            border: 'none',
+            cursor: 'pointer',
+            boxShadow: '0 20px 60px rgba(139, 92, 246, 0.5), 0 0 0 4px rgba(255, 255, 255, 0.3)',
+            transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+            position: 'relative',
+            overflow: 'hidden',
+            touchAction: 'manipulation',
+            textTransform: 'uppercase',
+            letterSpacing: 'wider',
             _hover: {
               transform: {
-                base: "translateY(-4px) scale(1.02)",
-                md: "translateY(-8px) scale(1.08)",
+                base: 'translateY(-4px) scale(1.02)',
+                md: 'translateY(-8px) scale(1.08)',
               },
-              boxShadow:
-                "0 30px 80px rgba(139, 92, 246, 0.6), 0 0 0 6px rgba(255, 255, 255, 0.5)",
-              "& .button-glow": {
+              boxShadow: '0 30px 80px rgba(139, 92, 246, 0.6), 0 0 0 6px rgba(255, 255, 255, 0.5)',
+              '& .button-glow': {
                 opacity: 1,
               },
             },
             _active: {
-              transform: "translateY(-2px) scale(1.03)",
+              transform: 'translateY(-2px) scale(1.03)',
             },
           })}
         >
           {/* Button glow effect */}
           <div
             className={`${css({
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               left: 0,
               right: 0,
               bottom: 0,
               background:
-                "linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1))",
+                'linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1))',
               opacity: 0,
-              transition: "opacity 0.3s ease",
+              transition: 'opacity 0.3s ease',
             })} button-glow`}
           />
 
-          <span className={css({ position: "relative", zIndex: 1 })}>
-            {t("enterArcade.button")}
+          <span className={css({ position: 'relative', zIndex: 1 })}>
+            {t('enterArcade.button')}
           </span>
         </button>
       </div>
@@ -222,61 +217,61 @@ function GamesPageContent() {
       {/* Games Hero Carousel - Full Width */}
       <div
         className={css({
-          mb: "16",
-          px: { base: "4", md: "12" },
+          mb: '16',
+          px: { base: '4', md: '12' },
         })}
       >
         <div
           className={css({
-            position: "relative",
-            overflow: "visible",
-            py: "12",
-            userSelect: "none",
+            position: 'relative',
+            overflow: 'visible',
+            py: '12',
+            userSelect: 'none',
           })}
           data-component="games-carousel"
         >
           <div
             ref={gamesEmblaRef}
             className={css({
-              overflow: "visible",
-              cursor: "grab",
+              overflow: 'visible',
+              cursor: 'grab',
               _active: {
-                cursor: "grabbing",
+                cursor: 'grabbing',
               },
             })}
           >
             <div
               className={css({
-                display: "flex",
+                display: 'flex',
               })}
             >
               {/* Dynamic Game Cards */}
               {availableGames.map((game, index) => {
-                const isActive = index === gamesSelectedIndex;
-                const manifest = game.manifest;
-                const GameComp = game.GameComponent;
-                const Provider = game.Provider;
+                const isActive = index === gamesSelectedIndex
+                const manifest = game.manifest
+                const GameComp = game.GameComponent
+                const Provider = game.Provider
 
                 return (
                   <div
                     key={manifest.name}
                     className={css({
-                      position: "relative",
-                      rounded: "2xl",
-                      overflow: "hidden",
-                      border: "2px solid rgba(255, 255, 255, 0.9)",
+                      position: 'relative',
+                      rounded: '2xl',
+                      overflow: 'hidden',
+                      border: '2px solid rgba(255, 255, 255, 0.9)',
                       boxShadow: isActive
-                        ? "0 30px 60px rgba(0, 0, 0, 0.2)"
-                        : "0 20px 40px rgba(0, 0, 0, 0.15)",
-                      cursor: "pointer",
-                      flex: "0 0 500px",
-                      minWidth: "500px",
-                      height: "312px", // Match scaled game height (900px * 0.347 = 312px)
-                      mr: "6",
+                        ? '0 30px 60px rgba(0, 0, 0, 0.2)'
+                        : '0 20px 40px rgba(0, 0, 0, 0.15)',
+                      cursor: 'pointer',
+                      flex: '0 0 500px',
+                      minWidth: '500px',
+                      height: '312px', // Match scaled game height (900px * 0.347 = 312px)
+                      mr: '6',
                       opacity: isActive ? 1 : 0.8,
-                      transitionProperty: "opacity, box-shadow",
-                      transitionDuration: "0.3s",
-                      transitionTimingFunction: "ease-out",
+                      transitionProperty: 'opacity, box-shadow',
+                      transitionDuration: '0.3s',
+                      transitionTimingFunction: 'ease-out',
                       _hover: {
                         opacity: 1,
                       },
@@ -287,16 +282,16 @@ function GamesPageContent() {
                     {/* Live Game Demo */}
                     <div
                       className={css({
-                        position: "absolute",
+                        position: 'absolute',
                         top: 0,
                         left: 0,
                         right: 0,
                         bottom: 0,
                         // Scale 1440×900 viewport to fit 500×600 card
                         // Scale factor: 500/1440 ≈ 0.347
-                        transform: "scale(0.347)",
-                        transformOrigin: "top left",
-                        pointerEvents: "none",
+                        transform: 'scale(0.347)',
+                        transformOrigin: 'top left',
+                        pointerEvents: 'none',
                       })}
                     >
                       <GamePreview
@@ -309,23 +304,23 @@ function GamesPageContent() {
                     {/* Overlay with game info - shorter gradient that overlaps game */}
                     <div
                       className={css({
-                        position: "absolute",
+                        position: 'absolute',
                         bottom: 0,
                         left: 0,
                         right: 0,
                         background:
-                          "linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 35%, transparent 100%)",
-                        px: "6",
-                        py: "4",
-                        pointerEvents: "none",
+                          'linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.85) 35%, transparent 100%)',
+                        px: '6',
+                        py: '4',
+                        pointerEvents: 'none',
                       })}
                     >
                       {/* Game Icon */}
                       <div
                         className={css({
-                          fontSize: "3xl",
-                          mb: "2",
-                          textAlign: "center",
+                          fontSize: '3xl',
+                          mb: '2',
+                          textAlign: 'center',
                         })}
                       >
                         {manifest.icon}
@@ -334,12 +329,12 @@ function GamesPageContent() {
                       {/* Game Title */}
                       <h3
                         className={css({
-                          fontSize: "xl",
-                          fontWeight: "bold",
-                          color: "text.inverse",
-                          textAlign: "center",
-                          mb: "2",
-                          textShadow: "0 2px 8px rgba(0, 0, 0, 0.8)",
+                          fontSize: 'xl',
+                          fontWeight: 'bold',
+                          color: 'text.inverse',
+                          textAlign: 'center',
+                          mb: '2',
+                          textShadow: '0 2px 8px rgba(0, 0, 0, 0.8)',
                         })}
                       >
                         {manifest.displayName}
@@ -348,41 +343,41 @@ function GamesPageContent() {
                       {/* Game Info Badges */}
                       <div
                         className={css({
-                          display: "flex",
-                          gap: "2",
-                          mb: "2",
-                          justifyContent: "center",
-                          flexWrap: "wrap",
+                          display: 'flex',
+                          gap: '2',
+                          mb: '2',
+                          justifyContent: 'center',
+                          flexWrap: 'wrap',
                         })}
                       >
                         <span
                           className={css({
-                            px: "3",
-                            py: "1",
-                            rounded: "full",
-                            fontSize: "xs",
-                            fontWeight: "semibold",
-                            background: "rgba(255, 255, 255, 0.2)",
-                            color: "text.inverse",
-                            textShadow: "0 1px 2px rgba(0, 0, 0, 0.8)",
+                            px: '3',
+                            py: '1',
+                            rounded: 'full',
+                            fontSize: 'xs',
+                            fontWeight: 'semibold',
+                            background: 'rgba(255, 255, 255, 0.2)',
+                            color: 'text.inverse',
+                            textShadow: '0 1px 2px rgba(0, 0, 0, 0.8)',
                           })}
                         >
                           {manifest.difficulty}
                         </span>
                         <span
                           className={css({
-                            px: "3",
-                            py: "1",
-                            rounded: "full",
-                            fontSize: "xs",
-                            fontWeight: "semibold",
-                            background: "rgba(255, 255, 255, 0.2)",
-                            color: "text.inverse",
-                            textShadow: "0 1px 2px rgba(0, 0, 0, 0.8)",
+                            px: '3',
+                            py: '1',
+                            rounded: 'full',
+                            fontSize: 'xs',
+                            fontWeight: 'semibold',
+                            background: 'rgba(255, 255, 255, 0.2)',
+                            color: 'text.inverse',
+                            textShadow: '0 1px 2px rgba(0, 0, 0, 0.8)',
                           })}
                         >
                           {manifest.maxPlayers === 1
-                            ? "1 Player"
+                            ? '1 Player'
                             : `1-${manifest.maxPlayers} Players`}
                         </span>
                       </div>
@@ -390,18 +385,18 @@ function GamesPageContent() {
                       {/* Description */}
                       <p
                         className={css({
-                          fontSize: "sm",
-                          color: "text.inverse",
-                          textAlign: "center",
-                          lineHeight: "1.4",
-                          textShadow: "0 1px 3px rgba(0, 0, 0, 0.8)",
+                          fontSize: 'sm',
+                          color: 'text.inverse',
+                          textAlign: 'center',
+                          lineHeight: '1.4',
+                          textShadow: '0 1px 3px rgba(0, 0, 0, 0.8)',
                         })}
                       >
                         {manifest.description}
                       </p>
                     </div>
                   </div>
-                );
+                )
               })}
             </div>
           </div>
@@ -409,10 +404,10 @@ function GamesPageContent() {
           {/* Navigation Dots with Game Icons */}
           <div
             className={css({
-              display: "flex",
-              justifyContent: "center",
-              gap: "3",
-              mt: "8",
+              display: 'flex',
+              justifyContent: 'center',
+              gap: '3',
+              mt: '8',
             })}
             data-element="games-carousel-dots"
           >
@@ -421,26 +416,26 @@ function GamesPageContent() {
                 key={game.manifest.name}
                 onClick={() => gamesEmblaApi?.scrollTo(index)}
                 className={css({
-                  rounded: "full",
-                  border: "none",
-                  cursor: "pointer",
-                  transition: "all 0.3s ease",
-                  minH: "44px",
-                  minW: "44px",
-                  w: "12",
-                  h: "12",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  fontSize: index === gamesSelectedIndex ? "2xl" : "lg",
+                  rounded: 'full',
+                  border: 'none',
+                  cursor: 'pointer',
+                  transition: 'all 0.3s ease',
+                  minH: '44px',
+                  minW: '44px',
+                  w: '12',
+                  h: '12',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontSize: index === gamesSelectedIndex ? '2xl' : 'lg',
                   opacity: index === gamesSelectedIndex ? 1 : 0.5,
                   background:
                     index === gamesSelectedIndex
-                      ? "rgba(255, 255, 255, 0.9)"
-                      : "rgba(255, 255, 255, 0.3)",
+                      ? 'rgba(255, 255, 255, 0.9)'
+                      : 'rgba(255, 255, 255, 0.3)',
                   _hover: {
                     opacity: 1,
-                    transform: "scale(1.1)",
+                    transform: 'scale(1.1)',
                   },
                 })}
                 aria-label={`Go to ${game.manifest.displayName}`}
@@ -459,131 +454,131 @@ function GamesPageContent() {
           {/* Character Showcase Header */}
           <div
             className={css({
-              mb: "16",
+              mb: '16',
             })}
           >
             <div
               className={css({
-                textAlign: "center",
-                mb: "8",
+                textAlign: 'center',
+                mb: '8',
               })}
             >
               <h2
                 className={css({
-                  fontSize: { base: "2xl", md: "3xl" },
-                  fontWeight: "bold",
-                  color: "text.primary",
-                  mb: "2",
+                  fontSize: { base: '2xl', md: '3xl' },
+                  fontWeight: 'bold',
+                  color: 'text.primary',
+                  mb: '2',
                 })}
               >
-                {t("champions.title")}
+                {t('champions.title')}
               </h2>
               <p
                 className={css({
-                  color: "text.secondary",
-                  fontSize: "lg",
+                  color: 'text.secondary',
+                  fontSize: 'lg',
                 })}
               >
-                {t("champions.subtitle")}
+                {t('champions.subtitle')}
               </p>
             </div>
 
             {/* Player Carousel */}
             <div
               className={css({
-                position: "relative",
-                overflow: "hidden",
-                py: "12",
-                userSelect: "none",
+                position: 'relative',
+                overflow: 'hidden',
+                py: '12',
+                userSelect: 'none',
               })}
               data-component="player-carousel"
             >
               <div
                 ref={emblaRef}
                 className={css({
-                  overflow: "hidden",
-                  cursor: "grab",
+                  overflow: 'hidden',
+                  cursor: 'grab',
                   _active: {
-                    cursor: "grabbing",
+                    cursor: 'grabbing',
                   },
                 })}
               >
                 <div
                   className={css({
-                    display: "flex",
+                    display: 'flex',
                   })}
                 >
                   {/* Dynamic Player Character Cards */}
                   {allPlayers.map((player, index) => {
-                    const isActive = index === selectedIndex;
+                    const isActive = index === selectedIndex
 
                     // Rotate through different color schemes for visual variety
                     const colorSchemes = [
                       {
-                        border: "rgba(59, 130, 246, 0.3)",
-                        shadow: "rgba(59, 130, 246, 0.1)",
-                        gradient: "linear-gradient(90deg, #3b82f6, #1d4ed8)",
-                        statBg: "linear-gradient(135deg, #dbeafe, #bfdbfe)",
-                        statBorder: "blue.200",
-                        statColor: "blue.800",
-                        levelColor: "blue.700",
+                        border: 'rgba(59, 130, 246, 0.3)',
+                        shadow: 'rgba(59, 130, 246, 0.1)',
+                        gradient: 'linear-gradient(90deg, #3b82f6, #1d4ed8)',
+                        statBg: 'linear-gradient(135deg, #dbeafe, #bfdbfe)',
+                        statBorder: 'blue.200',
+                        statColor: 'blue.800',
+                        levelColor: 'blue.700',
                       },
                       {
-                        border: "rgba(139, 92, 246, 0.3)",
-                        shadow: "rgba(139, 92, 246, 0.1)",
-                        gradient: "linear-gradient(90deg, #8b5cf6, #7c3aed)",
-                        statBg: "linear-gradient(135deg, #e9d5ff, #ddd6fe)",
-                        statBorder: "purple.200",
-                        statColor: "purple.800",
-                        levelColor: "purple.700",
+                        border: 'rgba(139, 92, 246, 0.3)',
+                        shadow: 'rgba(139, 92, 246, 0.1)',
+                        gradient: 'linear-gradient(90deg, #8b5cf6, #7c3aed)',
+                        statBg: 'linear-gradient(135deg, #e9d5ff, #ddd6fe)',
+                        statBorder: 'purple.200',
+                        statColor: 'purple.800',
+                        levelColor: 'purple.700',
                       },
                       {
-                        border: "rgba(16, 185, 129, 0.3)",
-                        shadow: "rgba(16, 185, 129, 0.1)",
-                        gradient: "linear-gradient(90deg, #10b981, #059669)",
-                        statBg: "linear-gradient(135deg, #d1fae5, #a7f3d0)",
-                        statBorder: "green.200",
-                        statColor: "green.800",
-                        levelColor: "green.700",
+                        border: 'rgba(16, 185, 129, 0.3)',
+                        shadow: 'rgba(16, 185, 129, 0.1)',
+                        gradient: 'linear-gradient(90deg, #10b981, #059669)',
+                        statBg: 'linear-gradient(135deg, #d1fae5, #a7f3d0)',
+                        statBorder: 'green.200',
+                        statColor: 'green.800',
+                        levelColor: 'green.700',
                       },
                       {
-                        border: "rgba(245, 158, 11, 0.3)",
-                        shadow: "rgba(245, 158, 11, 0.1)",
-                        gradient: "linear-gradient(90deg, #f59e0b, #d97706)",
-                        statBg: "linear-gradient(135deg, #fef3c7, #fde68a)",
-                        statBorder: "yellow.200",
-                        statColor: "yellow.800",
-                        levelColor: "yellow.700",
+                        border: 'rgba(245, 158, 11, 0.3)',
+                        shadow: 'rgba(245, 158, 11, 0.1)',
+                        gradient: 'linear-gradient(90deg, #f59e0b, #d97706)',
+                        statBg: 'linear-gradient(135deg, #fef3c7, #fde68a)',
+                        statBorder: 'yellow.200',
+                        statColor: 'yellow.800',
+                        levelColor: 'yellow.700',
                       },
-                    ];
-                    const theme = colorSchemes[index % colorSchemes.length];
+                    ]
+                    const theme = colorSchemes[index % colorSchemes.length]
 
                     // Get per-player stats
-                    const playerStats = playerStatsMap.get(player.id);
-                    const gamesPlayed = playerStats?.gamesPlayed || 0;
-                    const totalWins = playerStats?.totalWins || 0;
+                    const playerStats = playerStatsMap.get(player.id)
+                    const gamesPlayed = playerStats?.gamesPlayed || 0
+                    const totalWins = playerStats?.totalWins || 0
 
                     return (
                       <div
                         key={player.id}
                         className={css({
-                          position: "relative",
-                          background: "rgba(255, 255, 255, 0.95)",
-                          backdropFilter: "blur(10px)",
-                          rounded: "2xl",
-                          p: "6",
-                          border: "2px solid",
+                          position: 'relative',
+                          background: 'rgba(255, 255, 255, 0.95)',
+                          backdropFilter: 'blur(10px)',
+                          rounded: '2xl',
+                          p: '6',
+                          border: '2px solid',
                           boxShadow: isActive
                             ? `0 30px 60px ${theme.shadow}`
                             : `0 20px 40px ${theme.shadow}`,
-                          cursor: "pointer",
-                          flex: "0 0 350px",
-                          minWidth: "350px",
-                          mr: "6",
+                          cursor: 'pointer',
+                          flex: '0 0 350px',
+                          minWidth: '350px',
+                          mr: '6',
                           opacity: isActive ? 1 : 0.6,
-                          transitionProperty: "opacity, box-shadow",
-                          transitionDuration: "0.3s",
-                          transitionTimingFunction: "ease-out",
+                          transitionProperty: 'opacity, box-shadow',
+                          transitionDuration: '0.3s',
+                          transitionTimingFunction: 'ease-out',
                           _hover: {
                             opacity: 1,
                           },
@@ -597,12 +592,12 @@ function GamesPageContent() {
                         {/* Gradient Border */}
                         <div
                           className={css({
-                            position: "absolute",
+                            position: 'absolute',
                             top: 0,
                             left: 0,
                             right: 0,
-                            height: "4px",
-                            borderRadius: "16px 16px 0 0",
+                            height: '4px',
+                            borderRadius: '16px 16px 0 0',
                           })}
                           style={{ background: theme.gradient }}
                         />
@@ -610,23 +605,23 @@ function GamesPageContent() {
                         {/* Character Display */}
                         <div
                           className={css({
-                            textAlign: "center",
-                            mb: "4",
+                            textAlign: 'center',
+                            mb: '4',
                           })}
                         >
                           <div
                             className={`${css({
-                              fontSize: "4xl",
-                              mb: "2",
-                              transition: "all 0.3s ease",
+                              fontSize: '4xl',
+                              mb: '2',
+                              transition: 'all 0.3s ease',
                             })} character-emoji`}
                           >
                             {player.emoji}
                           </div>
                           <h3
                             className={css({
-                              fontSize: "xl",
-                              fontWeight: "bold",
+                              fontSize: 'xl',
+                              fontWeight: 'bold',
                             })}
                             style={{ color: player.color }}
                           >
@@ -637,17 +632,17 @@ function GamesPageContent() {
                         {/* Stats */}
                         <div
                           className={css({
-                            display: "grid",
-                            gridTemplateColumns: "repeat(2, 1fr)",
-                            gap: "3",
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(2, 1fr)',
+                            gap: '3',
                           })}
                         >
                           <div
                             className={css({
-                              textAlign: "center",
-                              p: "3",
-                              rounded: "lg",
-                              border: "1px solid",
+                              textAlign: 'center',
+                              p: '3',
+                              rounded: 'lg',
+                              border: '1px solid',
                             })}
                             style={{
                               background: theme.statBg,
@@ -656,8 +651,8 @@ function GamesPageContent() {
                           >
                             <div
                               className={css({
-                                fontSize: "2xl",
-                                fontWeight: "bold",
+                                fontSize: '2xl',
+                                fontWeight: 'bold',
                               })}
                               style={{ color: theme.statColor }}
                             >
@@ -665,43 +660,42 @@ function GamesPageContent() {
                             </div>
                             <div
                               className={css({
-                                fontSize: "xs",
-                                fontWeight: "semibold",
+                                fontSize: 'xs',
+                                fontWeight: 'semibold',
                               })}
                               style={{ color: theme.statColor }}
                             >
-                              {t("champions.stats.gamesPlayed")}
+                              {t('champions.stats.gamesPlayed')}
                             </div>
                           </div>
 
                           <div
                             className={css({
-                              textAlign: "center",
-                              background:
-                                "linear-gradient(135deg, #fef3c7, #fde68a)",
-                              p: "3",
-                              rounded: "lg",
-                              border: "1px solid",
-                              borderColor: "yellow.200",
+                              textAlign: 'center',
+                              background: 'linear-gradient(135deg, #fef3c7, #fde68a)',
+                              p: '3',
+                              rounded: 'lg',
+                              border: '1px solid',
+                              borderColor: 'yellow.200',
                             })}
                           >
                             <div
                               className={css({
-                                fontSize: "2xl",
-                                fontWeight: "bold",
-                                color: "yellow.800",
+                                fontSize: '2xl',
+                                fontWeight: 'bold',
+                                color: 'yellow.800',
                               })}
                             >
                               {totalWins}
                             </div>
                             <div
                               className={css({
-                                fontSize: "xs",
-                                color: "yellow.700",
-                                fontWeight: "semibold",
+                                fontSize: 'xs',
+                                color: 'yellow.700',
+                                fontWeight: 'semibold',
                               })}
                             >
-                              {t("champions.stats.victories")}
+                              {t('champions.stats.victories')}
                             </div>
                           </div>
                         </div>
@@ -709,35 +703,35 @@ function GamesPageContent() {
                         {/* Level Progress */}
                         <div
                           className={css({
-                            mt: "4",
+                            mt: '4',
                           })}
                         >
                           <div
                             className={css({
-                              display: "flex",
-                              justifyContent: "space-between",
-                              alignItems: "center",
-                              mb: "2",
+                              display: 'flex',
+                              justifyContent: 'space-between',
+                              alignItems: 'center',
+                              mb: '2',
                             })}
                           >
                             <span
                               className={css({
-                                fontSize: "sm",
-                                fontWeight: "semibold",
+                                fontSize: 'sm',
+                                fontWeight: 'semibold',
                               })}
                               style={{ color: theme.levelColor }}
                             >
-                              {t("champions.stats.level", {
+                              {t('champions.stats.level', {
                                 level: Math.floor(gamesPlayed / 5) + 1,
                               })}
                             </span>
                             <span
                               className={css({
-                                fontSize: "xs",
+                                fontSize: 'xs',
                               })}
                               style={{ color: theme.levelColor }}
                             >
-                              {t("champions.stats.xp", {
+                              {t('champions.stats.xp', {
                                 current: gamesPlayed % 5,
                                 total: 5,
                               })}
@@ -745,18 +739,18 @@ function GamesPageContent() {
                           </div>
                           <div
                             className={css({
-                              w: "full",
-                              h: "2",
-                              rounded: "full",
-                              overflow: "hidden",
+                              w: 'full',
+                              h: '2',
+                              rounded: 'full',
+                              overflow: 'hidden',
                             })}
                             style={{ background: `${player.color}33` }}
                           >
                             <div
                               className={css({
-                                h: "full",
-                                rounded: "full",
-                                transition: "width 0.5s ease",
+                                h: 'full',
+                                rounded: 'full',
+                                transition: 'width 0.5s ease',
                               })}
                               style={{
                                 background: theme.gradient,
@@ -769,36 +763,34 @@ function GamesPageContent() {
                         {/* Quick Customize Button */}
                         <button
                           className={css({
-                            position: "absolute",
-                            top: "3",
-                            right: "3",
-                            w: { base: "12", md: "8" },
-                            h: { base: "12", md: "8" },
-                            minH: "44px",
-                            minW: "44px",
-                            background:
-                              "linear-gradient(135deg, #f3f4f6, #e5e7eb)",
-                            rounded: "full",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            fontSize: { base: "md", md: "sm" },
-                            border: "1px solid",
-                            borderColor: "border.default",
-                            cursor: "pointer",
-                            touchAction: "manipulation",
-                            transition: "all 0.3s ease",
+                            position: 'absolute',
+                            top: '3',
+                            right: '3',
+                            w: { base: '12', md: '8' },
+                            h: { base: '12', md: '8' },
+                            minH: '44px',
+                            minW: '44px',
+                            background: 'linear-gradient(135deg, #f3f4f6, #e5e7eb)',
+                            rounded: 'full',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            fontSize: { base: 'md', md: 'sm' },
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            cursor: 'pointer',
+                            touchAction: 'manipulation',
+                            transition: 'all 0.3s ease',
                             _hover: {
-                              transform: "scale(1.1)",
-                              background:
-                                "linear-gradient(135deg, #e5e7eb, #d1d5db)",
+                              transform: 'scale(1.1)',
+                              background: 'linear-gradient(135deg, #e5e7eb, #d1d5db)',
                             },
                           })}
                         >
                           ⚙️
                         </button>
                       </div>
-                    );
+                    )
                   })}
                 </div>
               </div>
@@ -806,10 +798,10 @@ function GamesPageContent() {
               {/* Navigation Dots */}
               <div
                 className={css({
-                  display: "flex",
-                  justifyContent: "center",
-                  gap: "3",
-                  mt: "8",
+                  display: 'flex',
+                  justifyContent: 'center',
+                  gap: '3',
+                  mt: '8',
                 })}
                 data-element="carousel-dots"
               >
@@ -818,22 +810,22 @@ function GamesPageContent() {
                     key={player.id}
                     onClick={() => emblaApi?.scrollTo(index)}
                     className={css({
-                      rounded: "full",
-                      border: "none",
-                      cursor: "pointer",
-                      transition: "all 0.3s ease",
-                      minH: "44px",
-                      minW: "44px",
-                      w: "12",
-                      h: "12",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontSize: index === selectedIndex ? "2xl" : "lg",
+                      rounded: 'full',
+                      border: 'none',
+                      cursor: 'pointer',
+                      transition: 'all 0.3s ease',
+                      minH: '44px',
+                      minW: '44px',
+                      w: '12',
+                      h: '12',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      fontSize: index === selectedIndex ? '2xl' : 'lg',
                       opacity: index === selectedIndex ? 1 : 0.5,
                       _hover: {
                         opacity: 1,
-                        transform: "scale(1.1)",
+                        transform: 'scale(1.1)',
                       },
                     })}
                     style={{
@@ -858,96 +850,96 @@ function GamesPageContent() {
       {hasStats && (
         <div
           className={css({
-            mb: "12",
+            mb: '12',
           })}
         >
           <div
             className={css({
-              display: "grid",
+              display: 'grid',
               gridTemplateColumns: {
-                base: "1fr",
-                md: "1fr",
-                lg: "repeat(3, 1fr)",
+                base: '1fr',
+                md: '1fr',
+                lg: 'repeat(3, 1fr)',
               },
-              gap: { base: "4", md: "6" },
-              maxW: "7xl",
-              mx: "auto",
+              gap: { base: '4', md: '6' },
+              maxW: '7xl',
+              mx: 'auto',
             })}
           >
             {/* Head-to-Head Stats */}
             <div
               className={css({
-                background: "bg.surface",
-                backdropFilter: "blur(10px)",
-                rounded: "2xl",
-                p: "6",
-                border: "1px solid",
-                borderColor: "border.default",
-                boxShadow: "0 15px 35px token(colors.bg.muted)",
-                transition: "all 0.3s ease",
+                background: 'bg.surface',
+                backdropFilter: 'blur(10px)',
+                rounded: '2xl',
+                p: '6',
+                border: '1px solid',
+                borderColor: 'border.default',
+                boxShadow: '0 15px 35px token(colors.bg.muted)',
+                transition: 'all 0.3s ease',
                 _hover: {
-                  transform: "translateY(-2px)",
-                  boxShadow: "0 20px 45px token(colors.bg.muted)",
+                  transform: 'translateY(-2px)',
+                  boxShadow: '0 20px 45px token(colors.bg.muted)',
                 },
               })}
             >
               <div
                 className={css({
-                  textAlign: "center",
-                  mb: "4",
+                  textAlign: 'center',
+                  mb: '4',
                 })}
               >
                 <h3
                   className={css({
-                    fontSize: "xl",
-                    fontWeight: "bold",
-                    color: "text.primary",
-                    mb: "2",
+                    fontSize: 'xl',
+                    fontWeight: 'bold',
+                    color: 'text.primary',
+                    mb: '2',
                   })}
                 >
-                  {t("dashboard.headToHead.title")}
+                  {t('dashboard.headToHead.title')}
                 </h3>
                 <p
                   className={css({
-                    fontSize: "sm",
-                    color: "text.secondary",
+                    fontSize: 'sm',
+                    color: 'text.secondary',
                   })}
                 >
-                  {t("dashboard.headToHead.subtitle")}
+                  {t('dashboard.headToHead.subtitle')}
                 </p>
               </div>
 
               <div
                 className={css({
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  mb: "4",
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  mb: '4',
                 })}
               >
                 {allPlayers.slice(0, 2).map((player, idx) => {
-                  const playerStats = playerStatsMap.get(player.id);
-                  const totalWins = playerStats?.totalWins || 0;
+                  const playerStats = playerStatsMap.get(player.id)
+                  const totalWins = playerStats?.totalWins || 0
 
                   return (
                     <React.Fragment key={player.id}>
                       <div
                         className={css({
-                          textAlign: "center",
+                          textAlign: 'center',
                         })}
                       >
                         <div
                           className={css({
-                            fontSize: "2xl",
-                            mb: "1",
+                            fontSize: '2xl',
+                            mb: '1',
                           })}
                         >
                           {player.emoji}
                         </div>
                         <div
                           className={css({
-                            fontSize: "2xl",
-                            fontWeight: "bold",
+                            fontSize: '2xl',
+                            fontWeight: 'bold',
                           })}
                           style={{ color: player.color }}
                         >
@@ -955,142 +947,140 @@ function GamesPageContent() {
                         </div>
                         <div
                           className={css({
-                            fontSize: "xs",
-                            fontWeight: "semibold",
+                            fontSize: 'xs',
+                            fontWeight: 'semibold',
                           })}
                           style={{ color: player.color }}
                         >
-                          {t("dashboard.headToHead.wins")}
+                          {t('dashboard.headToHead.wins')}
                         </div>
                       </div>
 
                       {idx === 0 && allPlayers.length > 1 && (
                         <div
                           className={css({
-                            textAlign: "center",
-                            mx: "4",
+                            textAlign: 'center',
+                            mx: '4',
                           })}
                         >
                           <div
                             className={css({
-                              fontSize: "sm",
-                              color: "text.muted",
-                              fontWeight: "semibold",
+                              fontSize: 'sm',
+                              color: 'text.muted',
+                              fontWeight: 'semibold',
                             })}
                           >
-                            {t("dashboard.headToHead.vs")}
+                            {t('dashboard.headToHead.vs')}
                           </div>
                         </div>
                       )}
                     </React.Fragment>
-                  );
+                  )
                 })}
               </div>
 
               <div
                 className={css({
-                  textAlign: "center",
-                  fontSize: "sm",
-                  color: "text.secondary",
+                  textAlign: 'center',
+                  fontSize: 'sm',
+                  color: 'text.secondary',
                 })}
               >
-                {t("dashboard.headToHead.lastPlayed")}
+                {t('dashboard.headToHead.lastPlayed')}
               </div>
             </div>
 
             {/* Recent Achievements */}
             <div
               className={css({
-                background: "bg.surface",
-                backdropFilter: "blur(10px)",
-                rounded: "2xl",
-                p: "6",
-                border: "1px solid",
-                borderColor: "border.default",
-                boxShadow: "0 15px 35px token(colors.bg.muted)",
-                transition: "all 0.3s ease",
+                background: 'bg.surface',
+                backdropFilter: 'blur(10px)',
+                rounded: '2xl',
+                p: '6',
+                border: '1px solid',
+                borderColor: 'border.default',
+                boxShadow: '0 15px 35px token(colors.bg.muted)',
+                transition: 'all 0.3s ease',
                 _hover: {
-                  transform: "translateY(-2px)",
-                  boxShadow: "0 20px 45px token(colors.bg.muted)",
+                  transform: 'translateY(-2px)',
+                  boxShadow: '0 20px 45px token(colors.bg.muted)',
                 },
               })}
             >
               <div
                 className={css({
-                  textAlign: "center",
-                  mb: "4",
+                  textAlign: 'center',
+                  mb: '4',
                 })}
               >
                 <h3
                   className={css({
-                    fontSize: "xl",
-                    fontWeight: "bold",
-                    color: "text.primary",
-                    mb: "2",
+                    fontSize: 'xl',
+                    fontWeight: 'bold',
+                    color: 'text.primary',
+                    mb: '2',
                   })}
                 >
-                  {t("dashboard.achievements.title")}
+                  {t('dashboard.achievements.title')}
                 </h3>
                 <p
                   className={css({
-                    fontSize: "sm",
-                    color: "text.secondary",
+                    fontSize: 'sm',
+                    color: 'text.secondary',
                   })}
                 >
-                  {t("dashboard.achievements.subtitle")}
+                  {t('dashboard.achievements.subtitle')}
                 </p>
               </div>
 
               <div
                 className={css({
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "3",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '3',
                 })}
               >
                 {allPlayers.slice(0, 2).map((player, idx) => (
                   <div
                     key={player.id}
                     className={css({
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "3",
-                      p: "3",
-                      rounded: "lg",
-                      border: "1px solid",
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '3',
+                      p: '3',
+                      rounded: 'lg',
+                      border: '1px solid',
                     })}
                     style={{
                       background:
                         idx === 0
-                          ? "linear-gradient(135deg, #fef3c7, #fde68a)"
-                          : "linear-gradient(135deg, #e9d5ff, #ddd6fe)",
-                      borderColor: idx === 0 ? "#fde68a" : "#ddd6fe",
+                          ? 'linear-gradient(135deg, #fef3c7, #fde68a)'
+                          : 'linear-gradient(135deg, #e9d5ff, #ddd6fe)',
+                      borderColor: idx === 0 ? '#fde68a' : '#ddd6fe',
                     }}
                   >
-                    <span className={css({ fontSize: "lg" })}>
-                      {player.emoji}
-                    </span>
+                    <span className={css({ fontSize: 'lg' })}>{player.emoji}</span>
                     <div>
                       <div
                         className={css({
-                          fontSize: "sm",
-                          fontWeight: "semibold",
+                          fontSize: 'sm',
+                          fontWeight: 'semibold',
                         })}
-                        style={{ color: idx === 0 ? "#92400e" : "#581c87" }}
+                        style={{ color: idx === 0 ? '#92400e' : '#581c87' }}
                       >
                         {idx === 0
-                          ? t("dashboard.achievements.firstWin.title")
-                          : t("dashboard.achievements.speedDemon.title")}
+                          ? t('dashboard.achievements.firstWin.title')
+                          : t('dashboard.achievements.speedDemon.title')}
                       </div>
                       <div
                         className={css({
-                          fontSize: "xs",
+                          fontSize: 'xs',
                         })}
-                        style={{ color: idx === 0 ? "#a16207" : "#6b21a8" }}
+                        style={{ color: idx === 0 ? '#a16207' : '#6b21a8' }}
                       >
                         {idx === 0
-                          ? t("dashboard.achievements.firstWin.description")
-                          : t("dashboard.achievements.speedDemon.description")}
+                          ? t('dashboard.achievements.firstWin.description')
+                          : t('dashboard.achievements.speedDemon.description')}
                       </div>
                     </div>
                   </div>
@@ -1101,130 +1091,126 @@ function GamesPageContent() {
             {/* Challenge System */}
             <div
               className={css({
-                background: "bg.surface",
-                backdropFilter: "blur(10px)",
-                rounded: "2xl",
-                p: "6",
-                border: "1px solid",
-                borderColor: "border.default",
-                boxShadow: "0 15px 35px token(colors.bg.muted)",
-                transition: "all 0.3s ease",
+                background: 'bg.surface',
+                backdropFilter: 'blur(10px)',
+                rounded: '2xl',
+                p: '6',
+                border: '1px solid',
+                borderColor: 'border.default',
+                boxShadow: '0 15px 35px token(colors.bg.muted)',
+                transition: 'all 0.3s ease',
                 _hover: {
-                  transform: "translateY(-2px)",
-                  boxShadow: "0 20px 45px token(colors.bg.muted)",
+                  transform: 'translateY(-2px)',
+                  boxShadow: '0 20px 45px token(colors.bg.muted)',
                 },
               })}
             >
               <div
                 className={css({
-                  textAlign: "center",
-                  mb: "4",
+                  textAlign: 'center',
+                  mb: '4',
                 })}
               >
                 <h3
                   className={css({
-                    fontSize: "xl",
-                    fontWeight: "bold",
-                    color: "text.primary",
-                    mb: "2",
+                    fontSize: 'xl',
+                    fontWeight: 'bold',
+                    color: 'text.primary',
+                    mb: '2',
                   })}
                 >
-                  {t("dashboard.challenges.title")}
+                  {t('dashboard.challenges.title')}
                 </h3>
                 <p
                   className={css({
-                    fontSize: "sm",
-                    color: "text.secondary",
+                    fontSize: 'sm',
+                    color: 'text.secondary',
                   })}
                 >
-                  {t("dashboard.challenges.subtitle")}
+                  {t('dashboard.challenges.subtitle')}
                 </p>
               </div>
 
               {allPlayers.length >= 2 && (
                 <div
                   className={css({
-                    background: "linear-gradient(135deg, #dbeafe, #bfdbfe)",
-                    rounded: "lg",
-                    p: "4",
-                    border: "1px solid",
-                    borderColor: "blue.200",
-                    mb: "4",
+                    background: 'linear-gradient(135deg, #dbeafe, #bfdbfe)',
+                    rounded: 'lg',
+                    p: '4',
+                    border: '1px solid',
+                    borderColor: 'blue.200',
+                    mb: '4',
                   })}
                 >
                   <div
                     className={css({
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "2",
-                      mb: "2",
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '2',
+                      mb: '2',
                     })}
                   >
-                    <span className={css({ fontSize: "lg" })}>
-                      {allPlayers[0].emoji}
-                    </span>
+                    <span className={css({ fontSize: 'lg' })}>{allPlayers[0].emoji}</span>
                     <span
                       className={css({
-                        fontSize: "sm",
-                        color: "blue.800",
-                        fontWeight: "semibold",
+                        fontSize: 'sm',
+                        color: 'blue.800',
+                        fontWeight: 'semibold',
                       })}
                     >
-                      {t("dashboard.challenges.challengesText")}
-                    </span>
-                    <span className={css({ fontSize: "lg" })}>
-                      {allPlayers[1].emoji}
+                      {t('dashboard.challenges.challengesText')}
                     </span>
+                    <span className={css({ fontSize: 'lg' })}>{allPlayers[1].emoji}</span>
                   </div>
                   <div
                     className={css({
-                      fontSize: "sm",
-                      color: "blue.700",
-                      fontWeight: "medium",
+                      fontSize: 'sm',
+                      color: 'blue.700',
+                      fontWeight: 'medium',
                     })}
                   >
-                    "{t("dashboard.challenges.exampleChallenge")}"
+                    "{t('dashboard.challenges.exampleChallenge')}"
                   </div>
                   <div
                     className={css({
-                      fontSize: "xs",
-                      color: "blue.600",
-                      mt: "1",
+                      fontSize: 'xs',
+                      color: 'blue.600',
+                      mt: '1',
                     })}
                   >
-                    {t("dashboard.challenges.currentBest", { score: 850 })}
+                    {t('dashboard.challenges.currentBest', { score: 850 })}
                   </div>
                 </div>
               )}
 
               <button
                 className={css({
-                  w: "full",
-                  py: { base: "4", md: "3" },
-                  minH: "44px",
-                  background: "linear-gradient(135deg, #10b981, #059669)",
-                  color: "white",
-                  rounded: "lg",
-                  fontSize: { base: "md", md: "sm" },
-                  fontWeight: "semibold",
-                  border: "none",
-                  cursor: "pointer",
-                  touchAction: "manipulation",
-                  transition: "all 0.3s ease",
+                  w: 'full',
+                  py: { base: '4', md: '3' },
+                  minH: '44px',
+                  background: 'linear-gradient(135deg, #10b981, #059669)',
+                  color: 'white',
+                  rounded: 'lg',
+                  fontSize: { base: 'md', md: 'sm' },
+                  fontWeight: 'semibold',
+                  border: 'none',
+                  cursor: 'pointer',
+                  touchAction: 'manipulation',
+                  transition: 'all 0.3s ease',
                   _hover: {
-                    transform: "translateY(-1px)",
-                    boxShadow: "0 8px 25px rgba(16, 185, 129, 0.3)",
+                    transform: 'translateY(-1px)',
+                    boxShadow: '0 8px 25px rgba(16, 185, 129, 0.3)',
                   },
                 })}
               >
-                {t("dashboard.challenges.createButton")}
+                {t('dashboard.challenges.createButton')}
               </button>
             </div>
           </div>
         </div>
       )}
     </div>
-  );
+  )
 }
 
 // Refined animations for the sweet spot design
@@ -1328,23 +1314,20 @@ const globalAnimations = `
     transform: translateY(0) scale(1);
   }
 }
-`;
+`
 
 export default function GamesPage() {
   return (
     <PageWithNav navTitle="Soroban Arcade" navEmoji="🕹️">
       <GamesPageContent />
     </PageWithNav>
-  );
+  )
 }
 
 // Inject refined animations into the page
-if (
-  typeof document !== "undefined" &&
-  !document.getElementById("games-page-animations")
-) {
-  const style = document.createElement("style");
-  style.id = "games-page-animations";
-  style.textContent = globalAnimations;
-  document.head.appendChild(style);
+if (typeof document !== 'undefined' && !document.getElementById('games-page-animations')) {
+  const style = document.createElement('style')
+  style.id = 'games-page-animations'
+  style.textContent = globalAnimations
+  document.head.appendChild(style)
 }
diff --git a/apps/web/src/app/guide/components/ArithmeticOperationsGuide.tsx b/apps/web/src/app/guide/components/ArithmeticOperationsGuide.tsx
index ea4be9ff..3b6c55d2 100644
--- a/apps/web/src/app/guide/components/ArithmeticOperationsGuide.tsx
+++ b/apps/web/src/app/guide/components/ArithmeticOperationsGuide.tsx
@@ -1,101 +1,99 @@
-"use client";
+'use client'
 
-import { AbacusReact, useAbacusConfig } from "@soroban/abacus-react";
-import Link from "next/link";
-import { useMessages, useTranslations } from "next-intl";
-import { TutorialPlayer } from "@/components/tutorial/TutorialPlayer";
-import { getTutorialForEditor } from "@/utils/tutorialConverter";
-import { css } from "../../../../styled-system/css";
-import { grid } from "../../../../styled-system/patterns";
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import Link from 'next/link'
+import { useMessages, useTranslations } from 'next-intl'
+import { TutorialPlayer } from '@/components/tutorial/TutorialPlayer'
+import { getTutorialForEditor } from '@/utils/tutorialConverter'
+import { css } from '../../../../styled-system/css'
+import { grid } from '../../../../styled-system/patterns'
 
 export function ArithmeticOperationsGuide() {
-  const appConfig = useAbacusConfig();
-  const messages = useMessages() as any;
-  const t = useTranslations("guide.arithmetic");
+  const appConfig = useAbacusConfig()
+  const messages = useMessages() as any
+  const t = useTranslations('guide.arithmetic')
 
   return (
-    <div className={css({ maxW: "4xl", mx: "auto" })}>
+    <div className={css({ maxW: '4xl', mx: 'auto' })}>
       <div
         className={css({
-          bg: "gradient-to-br",
-          gradientFrom: "purple.600",
-          gradientTo: "indigo.700",
-          color: "white",
-          rounded: "xl",
-          p: { base: "6", md: "8" },
-          mb: "8",
-          textAlign: "center",
+          bg: 'gradient-to-br',
+          gradientFrom: 'purple.600',
+          gradientTo: 'indigo.700',
+          color: 'white',
+          rounded: 'xl',
+          p: { base: '6', md: '8' },
+          mb: '8',
+          textAlign: 'center',
         })}
       >
         <h2
           className={css({
-            fontSize: { base: "2xl", md: "3xl" },
-            fontWeight: "bold",
-            mb: "4",
+            fontSize: { base: '2xl', md: '3xl' },
+            fontWeight: 'bold',
+            mb: '4',
           })}
         >
-          {t("title")}
+          {t('title')}
         </h2>
         <p
           className={css({
-            fontSize: "lg",
-            opacity: "0.9",
+            fontSize: 'lg',
+            opacity: '0.9',
           })}
         >
-          {t("subtitle")}
+          {t('subtitle')}
         </p>
       </div>
 
       {/* Addition Section */}
       <div
         className={css({
-          bg: "bg.default",
-          rounded: "xl",
-          p: "6",
-          mb: "6",
-          shadow: "sm",
-          border: "1px solid",
-          borderColor: "border.default",
+          bg: 'bg.default',
+          rounded: 'xl',
+          p: '6',
+          mb: '6',
+          shadow: 'sm',
+          border: '1px solid',
+          borderColor: 'border.default',
         })}
       >
         <h3
           className={css({
-            fontSize: "xl",
-            fontWeight: "bold",
-            color: "green.700",
-            mb: "4",
-            display: "flex",
-            alignItems: "center",
-            gap: "2",
+            fontSize: 'xl',
+            fontWeight: 'bold',
+            color: 'green.700',
+            mb: '4',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '2',
           })}
         >
-          {t("addition.title")}
+          {t('addition.title')}
         </h3>
 
-        <p className={css({ mb: "6", color: "text.secondary" })}>
-          {t("addition.description")}
-        </p>
+        <p className={css({ mb: '6', color: 'text.secondary' })}>{t('addition.description')}</p>
 
-        <div className={css({ mb: "6" })}>
+        <div className={css({ mb: '6' })}>
           <h4
             className={css({
-              fontSize: "lg",
-              fontWeight: "semibold",
-              mb: "3",
-              color: "green.600",
+              fontSize: 'lg',
+              fontWeight: 'semibold',
+              mb: '3',
+              color: 'green.600',
             })}
           >
-            {t("addition.basicSteps.title")}
+            {t('addition.basicSteps.title')}
           </h4>
           <ol
             className={css({
-              pl: "6",
-              gap: "2",
-              color: "text.secondary",
+              pl: '6',
+              gap: '2',
+              color: 'text.secondary',
             })}
           >
-            {(t.raw("addition.basicSteps.steps") as string[]).map((step, i) => (
-              <li key={i} className={css({ mb: i < 3 ? "2" : "0" })}>
+            {(t.raw('addition.basicSteps.steps') as string[]).map((step, i) => (
+              <li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
                 {i + 1}. {step}
               </li>
             ))}
@@ -104,44 +102,42 @@ export function ArithmeticOperationsGuide() {
 
         <div
           className={css({
-            bg: "green.50",
-            border: "1px solid",
-            borderColor: "green.200",
-            rounded: "lg",
-            p: "4",
-            mb: "4",
+            bg: 'green.50',
+            border: '1px solid',
+            borderColor: 'green.200',
+            rounded: 'lg',
+            p: '4',
+            mb: '4',
           })}
         >
           <h5
             className={css({
-              fontWeight: "semibold",
-              color: "green.800",
-              mb: "2",
+              fontWeight: 'semibold',
+              color: 'green.800',
+              mb: '2',
             })}
           >
-            {t("addition.example.title")}
+            {t('addition.example.title')}
           </h5>
-          <div className={grid({ columns: 3, gap: "4", alignItems: "center" })}>
-            <div className={css({ textAlign: "center" })}>
-              <p
-                className={css({ fontSize: "sm", mb: "2", color: "green.700" })}
-              >
-                {t("addition.example.start")}
+          <div className={grid({ columns: 3, gap: '4', alignItems: 'center' })}>
+            <div className={css({ textAlign: 'center' })}>
+              <p className={css({ fontSize: 'sm', mb: '2', color: 'green.700' })}>
+                {t('addition.example.start')}
               </p>
               <div
                 className={css({
-                  width: "160px",
-                  height: "240px",
-                  bg: "bg.default",
-                  border: "1px solid",
-                  borderColor: "border.emphasized",
-                  rounded: "md",
-                  mb: "3",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  overflow: "hidden",
-                  mx: "auto",
+                  width: '160px',
+                  height: '240px',
+                  bg: 'bg.default',
+                  border: '1px solid',
+                  borderColor: 'border.emphasized',
+                  rounded: 'md',
+                  mb: '3',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  overflow: 'hidden',
+                  mx: 'auto',
                 })}
               >
                 <AbacusReact
@@ -157,29 +153,25 @@ export function ArithmeticOperationsGuide() {
                 />
               </div>
             </div>
-            <div className={css({ textAlign: "center", fontSize: "2xl" })}>
-              +
-            </div>
-            <div className={css({ textAlign: "center" })}>
-              <p
-                className={css({ fontSize: "sm", mb: "2", color: "green.700" })}
-              >
-                {t("addition.example.result")}
+            <div className={css({ textAlign: 'center', fontSize: '2xl' })}>+</div>
+            <div className={css({ textAlign: 'center' })}>
+              <p className={css({ fontSize: 'sm', mb: '2', color: 'green.700' })}>
+                {t('addition.example.result')}
               </p>
               <div
                 className={css({
-                  width: "160px",
-                  height: "240px",
-                  bg: "bg.default",
-                  border: "1px solid",
-                  borderColor: "border.emphasized",
-                  rounded: "md",
-                  mb: "3",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  overflow: "hidden",
-                  mx: "auto",
+                  width: '160px',
+                  height: '240px',
+                  bg: 'bg.default',
+                  border: '1px solid',
+                  borderColor: 'border.emphasized',
+                  rounded: 'md',
+                  mb: '3',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  overflow: 'hidden',
+                  mx: 'auto',
                 })}
               >
                 <AbacusReact
@@ -202,67 +194,67 @@ export function ArithmeticOperationsGuide() {
       {/* Guided Addition Tutorial */}
       <div
         className={css({
-          bg: "bg.default",
-          rounded: "xl",
-          p: "6",
-          mb: "6",
-          shadow: "sm",
-          border: "1px solid",
-          borderColor: "border.default",
+          bg: 'bg.default',
+          rounded: 'xl',
+          p: '6',
+          mb: '6',
+          shadow: 'sm',
+          border: '1px solid',
+          borderColor: 'border.default',
         })}
       >
         <h3
           className={css({
-            fontSize: "xl",
-            fontWeight: "bold",
-            color: "blue.700",
-            mb: "4",
-            display: "flex",
-            alignItems: "center",
-            gap: "2",
+            fontSize: 'xl',
+            fontWeight: 'bold',
+            color: 'blue.700',
+            mb: '4',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '2',
           })}
         >
-          {t("guidedTutorial.title")}
+          {t('guidedTutorial.title')}
         </h3>
 
-        <p className={css({ mb: "6", color: "text.secondary" })}>
-          {t("guidedTutorial.description")}
+        <p className={css({ mb: '6', color: 'text.secondary' })}>
+          {t('guidedTutorial.description')}
         </p>
 
         <div
           className={css({
-            bg: "blue.50",
-            border: "1px solid",
-            borderColor: "blue.200",
-            rounded: "lg",
+            bg: 'blue.50',
+            border: '1px solid',
+            borderColor: 'blue.200',
+            rounded: 'lg',
             p: 4,
             mb: 4,
           })}
         >
           <p
             className={css({
-              fontSize: "sm",
-              color: "blue.700",
+              fontSize: 'sm',
+              color: 'blue.700',
               mb: 2,
-              display: "flex",
-              alignItems: "center",
+              display: 'flex',
+              alignItems: 'center',
               gap: 2,
             })}
           >
             <span>✏️</span>
-            <strong>{t("guidedTutorial.editableNote")}</strong>
+            <strong>{t('guidedTutorial.editableNote')}</strong>
           </p>
-          <p className={css({ fontSize: "xs", color: "blue.600" })}>
-            {t("guidedTutorial.editableDesc")}{" "}
+          <p className={css({ fontSize: 'xs', color: 'blue.600' })}>
+            {t('guidedTutorial.editableDesc')}{' '}
             <a
               href="/tutorial-editor"
               className={css({
-                color: "blue.700",
-                textDecoration: "underline",
-                _hover: { color: "blue.800" },
+                color: 'blue.700',
+                textDecoration: 'underline',
+                _hover: { color: 'blue.800' },
               })}
             >
-              {t("guidedTutorial.editableLink")}
+              {t('guidedTutorial.editableLink')}
             </a>
           </p>
         </div>
@@ -277,99 +269,95 @@ export function ArithmeticOperationsGuide() {
       {/* Subtraction Section */}
       <div
         className={css({
-          bg: "bg.default",
-          rounded: "xl",
-          p: "6",
-          mb: "6",
-          shadow: "sm",
-          border: "1px solid",
-          borderColor: "border.default",
+          bg: 'bg.default',
+          rounded: 'xl',
+          p: '6',
+          mb: '6',
+          shadow: 'sm',
+          border: '1px solid',
+          borderColor: 'border.default',
         })}
       >
         <h3
           className={css({
-            fontSize: "xl",
-            fontWeight: "bold",
-            color: "red.700",
-            mb: "4",
-            display: "flex",
-            alignItems: "center",
-            gap: "2",
+            fontSize: 'xl',
+            fontWeight: 'bold',
+            color: 'red.700',
+            mb: '4',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '2',
           })}
         >
-          {t("subtraction.title")}
+          {t('subtraction.title')}
         </h3>
 
-        <p className={css({ mb: "6", color: "text.secondary" })}>
-          {t("subtraction.description")}
-        </p>
+        <p className={css({ mb: '6', color: 'text.secondary' })}>{t('subtraction.description')}</p>
 
-        <div className={css({ mb: "6" })}>
+        <div className={css({ mb: '6' })}>
           <h4
             className={css({
-              fontSize: "lg",
-              fontWeight: "semibold",
-              mb: "3",
-              color: "red.600",
+              fontSize: 'lg',
+              fontWeight: 'semibold',
+              mb: '3',
+              color: 'red.600',
             })}
           >
-            {t("subtraction.basicSteps.title")}
+            {t('subtraction.basicSteps.title')}
           </h4>
           <ol
             className={css({
-              pl: "6",
-              gap: "2",
-              color: "text.secondary",
+              pl: '6',
+              gap: '2',
+              color: 'text.secondary',
             })}
           >
-            {(t.raw("subtraction.basicSteps.steps") as string[]).map(
-              (step, i) => (
-                <li key={i} className={css({ mb: i < 3 ? "2" : "0" })}>
-                  {i + 1}. {step}
-                </li>
-              ),
-            )}
+            {(t.raw('subtraction.basicSteps.steps') as string[]).map((step, i) => (
+              <li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
+                {i + 1}. {step}
+              </li>
+            ))}
           </ol>
         </div>
 
         <div
           className={css({
-            bg: "red.50",
-            border: "1px solid",
-            borderColor: "red.200",
-            rounded: "lg",
-            p: "4",
-            mb: "4",
+            bg: 'red.50',
+            border: '1px solid',
+            borderColor: 'red.200',
+            rounded: 'lg',
+            p: '4',
+            mb: '4',
           })}
         >
           <h5
             className={css({
-              fontWeight: "semibold",
-              color: "red.800",
-              mb: "2",
+              fontWeight: 'semibold',
+              color: 'red.800',
+              mb: '2',
             })}
           >
-            {t("subtraction.example.title")}
+            {t('subtraction.example.title')}
           </h5>
-          <div className={grid({ columns: 3, gap: "4", alignItems: "center" })}>
-            <div className={css({ textAlign: "center" })}>
-              <p className={css({ fontSize: "sm", mb: "2", color: "red.700" })}>
-                {t("subtraction.example.start")}
+          <div className={grid({ columns: 3, gap: '4', alignItems: 'center' })}>
+            <div className={css({ textAlign: 'center' })}>
+              <p className={css({ fontSize: 'sm', mb: '2', color: 'red.700' })}>
+                {t('subtraction.example.start')}
               </p>
               <div
                 className={css({
-                  width: "160px",
-                  height: "240px",
-                  bg: "bg.default",
-                  border: "1px solid",
-                  borderColor: "border.emphasized",
-                  rounded: "md",
-                  mb: "3",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  overflow: "hidden",
-                  mx: "auto",
+                  width: '160px',
+                  height: '240px',
+                  bg: 'bg.default',
+                  border: '1px solid',
+                  borderColor: 'border.emphasized',
+                  rounded: 'md',
+                  mb: '3',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  overflow: 'hidden',
+                  mx: 'auto',
                 })}
               >
                 <AbacusReact
@@ -385,27 +373,25 @@ export function ArithmeticOperationsGuide() {
                 />
               </div>
             </div>
-            <div className={css({ textAlign: "center", fontSize: "2xl" })}>
-              -
-            </div>
-            <div className={css({ textAlign: "center" })}>
-              <p className={css({ fontSize: "sm", mb: "2", color: "red.700" })}>
-                {t("subtraction.example.result")}
+            <div className={css({ textAlign: 'center', fontSize: '2xl' })}>-</div>
+            <div className={css({ textAlign: 'center' })}>
+              <p className={css({ fontSize: 'sm', mb: '2', color: 'red.700' })}>
+                {t('subtraction.example.result')}
               </p>
               <div
                 className={css({
-                  width: "160px",
-                  height: "240px",
-                  bg: "bg.default",
-                  border: "1px solid",
-                  borderColor: "border.emphasized",
-                  rounded: "md",
-                  mb: "3",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  overflow: "hidden",
-                  mx: "auto",
+                  width: '160px',
+                  height: '240px',
+                  bg: 'bg.default',
+                  border: '1px solid',
+                  borderColor: 'border.emphasized',
+                  rounded: 'md',
+                  mb: '3',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  overflow: 'hidden',
+                  mx: 'auto',
                 })}
               >
                 <AbacusReact
@@ -428,102 +414,98 @@ export function ArithmeticOperationsGuide() {
       {/* Multiplication & Division Section */}
       <div
         className={css({
-          bg: "bg.default",
-          rounded: "xl",
-          p: "6",
-          mb: "6",
-          shadow: "sm",
-          border: "1px solid",
-          borderColor: "border.default",
+          bg: 'bg.default',
+          rounded: 'xl',
+          p: '6',
+          mb: '6',
+          shadow: 'sm',
+          border: '1px solid',
+          borderColor: 'border.default',
         })}
       >
         <h3
           className={css({
-            fontSize: "xl",
-            fontWeight: "bold",
-            color: "purple.700",
-            mb: "4",
-            display: "flex",
-            alignItems: "center",
-            gap: "2",
+            fontSize: 'xl',
+            fontWeight: 'bold',
+            color: 'purple.700',
+            mb: '4',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '2',
           })}
         >
-          {t("multiplicationDivision.title")}
+          {t('multiplicationDivision.title')}
         </h3>
 
-        <p className={css({ mb: "6", color: "text.secondary" })}>
-          {t("multiplicationDivision.description")}
+        <p className={css({ mb: '6', color: 'text.secondary' })}>
+          {t('multiplicationDivision.description')}
         </p>
 
-        <div className={grid({ columns: { base: 1, md: 2 }, gap: "6" })}>
+        <div className={grid({ columns: { base: 1, md: 2 }, gap: '6' })}>
           <div
             className={css({
-              bg: "purple.50",
-              border: "1px solid",
-              borderColor: "purple.200",
-              rounded: "lg",
-              p: "4",
+              bg: 'purple.50',
+              border: '1px solid',
+              borderColor: 'purple.200',
+              rounded: 'lg',
+              p: '4',
             })}
           >
             <h4
               className={css({
-                fontSize: "lg",
-                fontWeight: "semibold",
-                color: "purple.800",
-                mb: "3",
+                fontSize: 'lg',
+                fontWeight: 'semibold',
+                color: 'purple.800',
+                mb: '3',
               })}
             >
-              {t("multiplicationDivision.multiplication.title")}
+              {t('multiplicationDivision.multiplication.title')}
             </h4>
             <ul
               className={css({
-                fontSize: "sm",
-                color: "purple.700",
-                pl: "4",
+                fontSize: 'sm',
+                color: 'purple.700',
+                pl: '4',
               })}
             >
-              {(
-                t.raw(
-                  "multiplicationDivision.multiplication.points",
-                ) as string[]
-              ).map((point, i) => (
-                <li key={i} className={css({ mb: i < 3 ? "2" : "0" })}>
-                  • {point}
-                </li>
-              ))}
+              {(t.raw('multiplicationDivision.multiplication.points') as string[]).map(
+                (point, i) => (
+                  <li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
+                    • {point}
+                  </li>
+                )
+              )}
             </ul>
           </div>
 
           <div
             className={css({
-              bg: "indigo.50",
-              border: "1px solid",
-              borderColor: "indigo.200",
-              rounded: "lg",
-              p: "4",
+              bg: 'indigo.50',
+              border: '1px solid',
+              borderColor: 'indigo.200',
+              rounded: 'lg',
+              p: '4',
             })}
           >
             <h4
               className={css({
-                fontSize: "lg",
-                fontWeight: "semibold",
-                color: "indigo.800",
-                mb: "3",
+                fontSize: 'lg',
+                fontWeight: 'semibold',
+                color: 'indigo.800',
+                mb: '3',
               })}
             >
-              {t("multiplicationDivision.division.title")}
+              {t('multiplicationDivision.division.title')}
             </h4>
             <ul
               className={css({
-                fontSize: "sm",
-                color: "indigo.700",
-                pl: "4",
+                fontSize: 'sm',
+                color: 'indigo.700',
+                pl: '4',
               })}
             >
-              {(
-                t.raw("multiplicationDivision.division.points") as string[]
-              ).map((point, i) => (
-                <li key={i} className={css({ mb: i < 3 ? "2" : "0" })}>
+              {(t.raw('multiplicationDivision.division.points') as string[]).map((point, i) => (
+                <li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
                   • {point}
                 </li>
               ))}
@@ -535,50 +517,50 @@ export function ArithmeticOperationsGuide() {
       {/* Practice Tips */}
       <div
         className={css({
-          bg: "gradient-to-r",
-          gradientFrom: "purple.600",
-          gradientTo: "indigo.600",
-          color: "white",
-          rounded: "xl",
-          p: "6",
-          textAlign: "center",
+          bg: 'gradient-to-r',
+          gradientFrom: 'purple.600',
+          gradientTo: 'indigo.600',
+          color: 'white',
+          rounded: 'xl',
+          p: '6',
+          textAlign: 'center',
         })}
       >
         <h4
           className={css({
-            fontSize: "lg",
-            fontWeight: "semibold",
-            mb: "3",
+            fontSize: 'lg',
+            fontWeight: 'semibold',
+            mb: '3',
           })}
         >
-          {t("practiceTips.title")}
+          {t('practiceTips.title')}
         </h4>
         <p
           className={css({
-            mb: "4",
-            opacity: "0.9",
+            mb: '4',
+            opacity: '0.9',
           })}
         >
-          {t("practiceTips.description")}
+          {t('practiceTips.description')}
         </p>
         <Link
           href="/create"
           className={css({
-            display: "inline-block",
-            px: "6",
-            py: "3",
-            bg: "bg.default",
-            color: "purple.600",
-            fontWeight: "semibold",
-            rounded: "lg",
-            textDecoration: "none",
-            transition: "all",
-            _hover: { transform: "translateY(-1px)", shadow: "lg" },
+            display: 'inline-block',
+            px: '6',
+            py: '3',
+            bg: 'bg.default',
+            color: 'purple.600',
+            fontWeight: 'semibold',
+            rounded: 'lg',
+            textDecoration: 'none',
+            transition: 'all',
+            _hover: { transform: 'translateY(-1px)', shadow: 'lg' },
           })}
         >
-          {t("practiceTips.button")}
+          {t('practiceTips.button')}
         </Link>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/guide/components/ReadingNumbersGuide.tsx b/apps/web/src/app/guide/components/ReadingNumbersGuide.tsx
index dd61c7d8..acdf8d47 100644
--- a/apps/web/src/app/guide/components/ReadingNumbersGuide.tsx
+++ b/apps/web/src/app/guide/components/ReadingNumbersGuide.tsx
@@ -1,185 +1,181 @@
-"use client";
+'use client'
 
-import { AbacusReact, useAbacusConfig } from "@soroban/abacus-react";
-import Link from "next/link";
-import { useTranslations } from "next-intl";
-import { css } from "../../../../styled-system/css";
-import { grid, hstack, stack } from "../../../../styled-system/patterns";
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+import { css } from '../../../../styled-system/css'
+import { grid, hstack, stack } from '../../../../styled-system/patterns'
 
 export function ReadingNumbersGuide() {
-  const appConfig = useAbacusConfig();
-  const t = useTranslations("guide.reading");
+  const appConfig = useAbacusConfig()
+  const t = useTranslations('guide.reading')
 
   return (
-    <div className={stack({ gap: "12" })}>
+    <div className={stack({ gap: '12' })}>
       {/* Section Introduction */}
-      <div className={css({ textAlign: "center" })}>
+      <div className={css({ textAlign: 'center' })}>
         <h2
           className={css({
-            fontSize: "3xl",
-            fontWeight: "bold",
-            color: "text.primary",
-            mb: "4",
+            fontSize: '3xl',
+            fontWeight: 'bold',
+            color: 'text.primary',
+            mb: '4',
           })}
         >
-          {t("title")}
+          {t('title')}
         </h2>
         <p
           className={css({
-            fontSize: "lg",
-            color: "text.secondary",
-            maxW: "3xl",
-            mx: "auto",
-            lineHeight: "relaxed",
+            fontSize: 'lg',
+            color: 'text.secondary',
+            maxW: '3xl',
+            mx: 'auto',
+            lineHeight: 'relaxed',
           })}
         >
-          {t("subtitle")}
+          {t('subtitle')}
         </p>
       </div>
 
       {/* Step 1: Basic Structure */}
       <div
         className={css({
-          border: "1px solid",
-          borderColor: "border.default",
-          rounded: "xl",
-          p: "8",
+          border: '1px solid',
+          borderColor: 'border.default',
+          rounded: 'xl',
+          p: '8',
         })}
       >
-        <div className={stack({ gap: "6" })}>
-          <div className={hstack({ gap: "4", alignItems: "center" })}>
+        <div className={stack({ gap: '6' })}>
+          <div className={hstack({ gap: '4', alignItems: 'center' })}>
             <div
               className={css({
-                w: "12",
-                h: "12",
-                bg: "brand.600",
-                color: "white",
-                rounded: "full",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontWeight: "bold",
-                fontSize: "lg",
+                w: '12',
+                h: '12',
+                bg: 'brand.600',
+                color: 'white',
+                rounded: 'full',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 'bold',
+                fontSize: 'lg',
               })}
             >
-              {t("structure.number")}
+              {t('structure.number')}
             </div>
             <h3
               className={css({
-                fontSize: "2xl",
-                fontWeight: "bold",
-                color: "text.primary",
+                fontSize: '2xl',
+                fontWeight: 'bold',
+                color: 'text.primary',
               })}
             >
-              {t("structure.title")}
+              {t('structure.title')}
             </h3>
           </div>
 
-          <div className={stack({ gap: "6" })}>
+          <div className={stack({ gap: '6' })}>
             <p
               className={css({
-                fontSize: "lg",
-                color: "text.secondary",
-                lineHeight: "relaxed",
+                fontSize: 'lg',
+                color: 'text.secondary',
+                lineHeight: 'relaxed',
               })}
             >
-              {t("structure.description")}
+              {t('structure.description')}
             </p>
 
-            <div className={grid({ columns: { base: 1, md: 2 }, gap: "8" })}>
+            <div className={grid({ columns: { base: 1, md: 2 }, gap: '8' })}>
               <div
                 className={css({
-                  bg: "blue.50",
-                  border: "1px solid",
-                  borderColor: "blue.200",
-                  rounded: "xl",
-                  p: "6",
+                  bg: 'blue.50',
+                  border: '1px solid',
+                  borderColor: 'blue.200',
+                  rounded: 'xl',
+                  p: '6',
                 })}
               >
                 <h4
                   className={css({
-                    fontSize: "lg",
-                    fontWeight: "semibold",
-                    color: "blue.800",
-                    mb: "3",
+                    fontSize: 'lg',
+                    fontWeight: 'semibold',
+                    color: 'blue.800',
+                    mb: '3',
                   })}
                 >
-                  {t("structure.heaven.title")}
+                  {t('structure.heaven.title')}
                 </h4>
                 <ul
                   className={css({
-                    fontSize: "sm",
-                    color: "blue.700",
-                    lineHeight: "relaxed",
-                    pl: "4",
+                    fontSize: 'sm',
+                    color: 'blue.700',
+                    lineHeight: 'relaxed',
+                    pl: '4',
                   })}
                 >
-                  {(t.raw("structure.heaven.points") as string[]).map(
-                    (point, i) => (
-                      <li key={i} className={css({ mb: i < 3 ? "2" : "0" })}>
-                        • {point}
-                      </li>
-                    ),
-                  )}
+                  {(t.raw('structure.heaven.points') as string[]).map((point, i) => (
+                    <li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
+                      • {point}
+                    </li>
+                  ))}
                 </ul>
               </div>
 
               <div
                 className={css({
-                  bg: "green.50",
-                  border: "1px solid",
-                  borderColor: "green.200",
-                  rounded: "xl",
-                  p: "6",
+                  bg: 'green.50',
+                  border: '1px solid',
+                  borderColor: 'green.200',
+                  rounded: 'xl',
+                  p: '6',
                 })}
               >
                 <h4
                   className={css({
-                    fontSize: "lg",
-                    fontWeight: "semibold",
-                    color: "green.800",
-                    mb: "3",
+                    fontSize: 'lg',
+                    fontWeight: 'semibold',
+                    color: 'green.800',
+                    mb: '3',
                   })}
                 >
-                  {t("structure.earth.title")}
+                  {t('structure.earth.title')}
                 </h4>
                 <ul
                   className={css({
-                    fontSize: "sm",
-                    color: "green.700",
-                    lineHeight: "relaxed",
-                    pl: "4",
+                    fontSize: 'sm',
+                    color: 'green.700',
+                    lineHeight: 'relaxed',
+                    pl: '4',
                   })}
                 >
-                  {(t.raw("structure.earth.points") as string[]).map(
-                    (point, i) => (
-                      <li key={i} className={css({ mb: i < 3 ? "2" : "0" })}>
-                        • {point}
-                      </li>
-                    ),
-                  )}
+                  {(t.raw('structure.earth.points') as string[]).map((point, i) => (
+                    <li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
+                      • {point}
+                    </li>
+                  ))}
                 </ul>
               </div>
             </div>
 
             <div
               className={css({
-                bg: "yellow.50",
-                border: "1px solid",
-                borderColor: "yellow.300",
-                rounded: "xl",
-                p: "4",
-                textAlign: "center",
+                bg: 'yellow.50',
+                border: '1px solid',
+                borderColor: 'yellow.300',
+                rounded: 'xl',
+                p: '4',
+                textAlign: 'center',
               })}
             >
               <p
                 className={css({
-                  fontSize: "md",
-                  color: "yellow.800",
-                  fontWeight: "medium",
+                  fontSize: 'md',
+                  color: 'yellow.800',
+                  fontWeight: 'medium',
                 })}
               >
-                {t("structure.keyConcept")}
+                {t('structure.keyConcept')}
               </p>
             </div>
           </div>
@@ -189,79 +185,79 @@ export function ReadingNumbersGuide() {
       {/* Step 2: Single Digits */}
       <div
         className={css({
-          border: "1px solid",
-          borderColor: "border.default",
-          rounded: "xl",
-          p: "8",
+          border: '1px solid',
+          borderColor: 'border.default',
+          rounded: 'xl',
+          p: '8',
         })}
       >
-        <div className={stack({ gap: "6" })}>
-          <div className={hstack({ gap: "4", alignItems: "center" })}>
+        <div className={stack({ gap: '6' })}>
+          <div className={hstack({ gap: '4', alignItems: 'center' })}>
             <div
               className={css({
-                w: "12",
-                h: "12",
-                bg: "brand.600",
-                color: "white",
-                rounded: "full",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontWeight: "bold",
-                fontSize: "lg",
+                w: '12',
+                h: '12',
+                bg: 'brand.600',
+                color: 'white',
+                rounded: 'full',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 'bold',
+                fontSize: 'lg',
               })}
             >
-              {t("singleDigits.number")}
+              {t('singleDigits.number')}
             </div>
             <h3
               className={css({
-                fontSize: "2xl",
-                fontWeight: "bold",
-                color: "text.primary",
+                fontSize: '2xl',
+                fontWeight: 'bold',
+                color: 'text.primary',
               })}
             >
-              {t("singleDigits.title")}
+              {t('singleDigits.title')}
             </h3>
           </div>
 
           <p
             className={css({
-              fontSize: "lg",
-              color: "text.secondary",
-              lineHeight: "relaxed",
+              fontSize: 'lg',
+              color: 'text.secondary',
+              lineHeight: 'relaxed',
             })}
           >
-            {t("singleDigits.description")}
+            {t('singleDigits.description')}
           </p>
 
-          <div className={grid({ columns: { base: 1, lg: 5 }, gap: "6" })}>
+          <div className={grid({ columns: { base: 1, lg: 5 }, gap: '6' })}>
             {[
-              { num: 0, descKey: "0" },
-              { num: 1, descKey: "1" },
-              { num: 3, descKey: "3" },
-              { num: 5, descKey: "5" },
-              { num: 7, descKey: "7" },
+              { num: 0, descKey: '0' },
+              { num: 1, descKey: '1' },
+              { num: 3, descKey: '3' },
+              { num: 5, descKey: '5' },
+              { num: 7, descKey: '7' },
             ].map((example) => (
               <div
                 key={example.num}
                 className={css({
-                  bg: "bg.subtle",
-                  border: "1px solid",
-                  borderColor: "border.default",
-                  rounded: "lg",
-                  p: "2",
-                  textAlign: "center",
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
+                  bg: 'bg.subtle',
+                  border: '1px solid',
+                  borderColor: 'border.default',
+                  rounded: 'lg',
+                  p: '2',
+                  textAlign: 'center',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
                 })}
               >
                 <div
                   className={css({
-                    fontSize: "xl",
-                    fontWeight: "bold",
-                    color: "brand.600",
-                    mb: "2",
+                    fontSize: 'xl',
+                    fontWeight: 'bold',
+                    color: 'brand.600',
+                    mb: '2',
                   })}
                 >
                   {example.num}
@@ -269,11 +265,11 @@ export function ReadingNumbersGuide() {
 
                 <div
                   className={css({
-                    flex: "1",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    my: "2",
+                    flex: '1',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    my: '2',
                   })}
                 >
                   <AbacusReact
@@ -291,11 +287,11 @@ export function ReadingNumbersGuide() {
 
                 <p
                   className={css({
-                    fontSize: "2xs",
-                    color: "text.secondary",
-                    lineHeight: "tight",
-                    textAlign: "center",
-                    mt: "2",
+                    fontSize: '2xs',
+                    color: 'text.secondary',
+                    lineHeight: 'tight',
+                    textAlign: 'center',
+                    mt: '2',
                   })}
                 >
                   {t(`singleDigits.examples.${example.descKey}`)}
@@ -309,126 +305,122 @@ export function ReadingNumbersGuide() {
       {/* Step 3: Multi-digit Numbers */}
       <div
         className={css({
-          border: "1px solid",
-          borderColor: "border.default",
-          rounded: "xl",
-          p: "8",
+          border: '1px solid',
+          borderColor: 'border.default',
+          rounded: 'xl',
+          p: '8',
         })}
       >
-        <div className={stack({ gap: "6" })}>
-          <div className={hstack({ gap: "4", alignItems: "center" })}>
+        <div className={stack({ gap: '6' })}>
+          <div className={hstack({ gap: '4', alignItems: 'center' })}>
             <div
               className={css({
-                w: "12",
-                h: "12",
-                bg: "brand.600",
-                color: "white",
-                rounded: "full",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontWeight: "bold",
-                fontSize: "lg",
+                w: '12',
+                h: '12',
+                bg: 'brand.600',
+                color: 'white',
+                rounded: 'full',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 'bold',
+                fontSize: 'lg',
               })}
             >
-              {t("multiDigit.number")}
+              {t('multiDigit.number')}
             </div>
             <h3
               className={css({
-                fontSize: "2xl",
-                fontWeight: "bold",
-                color: "text.primary",
+                fontSize: '2xl',
+                fontWeight: 'bold',
+                color: 'text.primary',
               })}
             >
-              {t("multiDigit.title")}
+              {t('multiDigit.title')}
             </h3>
           </div>
 
           <p
             className={css({
-              fontSize: "lg",
-              color: "text.secondary",
-              lineHeight: "relaxed",
+              fontSize: 'lg',
+              color: 'text.secondary',
+              lineHeight: 'relaxed',
             })}
           >
-            {t("multiDigit.description")}
+            {t('multiDigit.description')}
           </p>
 
           <div
             className={css({
-              bg: "purple.50",
-              border: "1px solid",
-              borderColor: "purple.200",
-              rounded: "xl",
-              p: "6",
+              bg: 'purple.50',
+              border: '1px solid',
+              borderColor: 'purple.200',
+              rounded: 'xl',
+              p: '6',
             })}
           >
             <h4
               className={css({
-                fontSize: "lg",
-                fontWeight: "semibold",
-                color: "purple.800",
-                mb: "4",
-                textAlign: "center",
+                fontSize: 'lg',
+                fontWeight: 'semibold',
+                color: 'purple.800',
+                mb: '4',
+                textAlign: 'center',
               })}
             >
-              {t("multiDigit.readingDirection.title")}
+              {t('multiDigit.readingDirection.title')}
             </h4>
-            <div className={grid({ columns: { base: 1, md: 2 }, gap: "6" })}>
+            <div className={grid({ columns: { base: 1, md: 2 }, gap: '6' })}>
               <div>
                 <h5
                   className={css({
-                    fontWeight: "semibold",
-                    mb: "2",
-                    color: "purple.800",
+                    fontWeight: 'semibold',
+                    mb: '2',
+                    color: 'purple.800',
                   })}
                 >
-                  {t("multiDigit.readingDirection.readingOrder.title")}
+                  {t('multiDigit.readingDirection.readingOrder.title')}
                 </h5>
                 <ul
                   className={css({
-                    fontSize: "sm",
-                    color: "purple.700",
-                    pl: "4",
+                    fontSize: 'sm',
+                    color: 'purple.700',
+                    pl: '4',
                   })}
                 >
-                  {(
-                    t.raw(
-                      "multiDigit.readingDirection.readingOrder.points",
-                    ) as string[]
-                  ).map((point, i) => (
-                    <li key={i} className={css({ mb: i < 2 ? "1" : "0" })}>
-                      • {point}
-                    </li>
-                  ))}
+                  {(t.raw('multiDigit.readingDirection.readingOrder.points') as string[]).map(
+                    (point, i) => (
+                      <li key={i} className={css({ mb: i < 2 ? '1' : '0' })}>
+                        • {point}
+                      </li>
+                    )
+                  )}
                 </ul>
               </div>
               <div>
                 <h5
                   className={css({
-                    fontWeight: "semibold",
-                    mb: "2",
-                    color: "purple.800",
+                    fontWeight: 'semibold',
+                    mb: '2',
+                    color: 'purple.800',
                   })}
                 >
-                  {t("multiDigit.readingDirection.placeValues.title")}
+                  {t('multiDigit.readingDirection.placeValues.title')}
                 </h5>
                 <ul
                   className={css({
-                    fontSize: "sm",
-                    color: "purple.700",
-                    pl: "4",
+                    fontSize: 'sm',
+                    color: 'purple.700',
+                    pl: '4',
                   })}
                 >
-                  {(
-                    t.raw(
-                      "multiDigit.readingDirection.placeValues.points",
-                    ) as string[]
-                  ).map((point, i) => (
-                    <li key={i} className={css({ mb: i < 2 ? "1" : "0" })}>
-                      • {point}
-                    </li>
-                  ))}
+                  {(t.raw('multiDigit.readingDirection.placeValues.points') as string[]).map(
+                    (point, i) => (
+                      <li key={i} className={css({ mb: i < 2 ? '1' : '0' })}>
+                        • {point}
+                      </li>
+                    )
+                  )}
                 </ul>
               </div>
             </div>
@@ -437,51 +429,51 @@ export function ReadingNumbersGuide() {
           {/* Multi-digit Examples */}
           <div
             className={css({
-              bg: "blue.50",
-              border: "1px solid",
-              borderColor: "blue.200",
-              rounded: "xl",
-              p: "6",
+              bg: 'blue.50',
+              border: '1px solid',
+              borderColor: 'blue.200',
+              rounded: 'xl',
+              p: '6',
             })}
           >
             <h4
               className={css({
-                fontSize: "lg",
-                fontWeight: "semibold",
-                color: "blue.800",
-                mb: "4",
-                textAlign: "center",
+                fontSize: 'lg',
+                fontWeight: 'semibold',
+                color: 'blue.800',
+                mb: '4',
+                textAlign: 'center',
               })}
             >
-              {t("multiDigit.examples.title")}
+              {t('multiDigit.examples.title')}
             </h4>
 
-            <div className={grid({ columns: { base: 1, md: 3 }, gap: "8" })}>
+            <div className={grid({ columns: { base: 1, md: 3 }, gap: '8' })}>
               {[
-                { num: 23, descKey: "23" },
-                { num: 58, descKey: "58" },
-                { num: 147, descKey: "147" },
+                { num: 23, descKey: '23' },
+                { num: 58, descKey: '58' },
+                { num: 147, descKey: '147' },
               ].map((example) => (
                 <div
                   key={example.num}
                   className={css({
-                    bg: "bg.default",
-                    border: "1px solid",
-                    borderColor: "blue.300",
-                    rounded: "lg",
-                    p: "2",
-                    textAlign: "center",
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
+                    bg: 'bg.default',
+                    border: '1px solid',
+                    borderColor: 'blue.300',
+                    rounded: 'lg',
+                    p: '2',
+                    textAlign: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
                   })}
                 >
                   <div
                     className={css({
-                      fontSize: "2xl",
-                      fontWeight: "bold",
-                      color: "blue.600",
-                      mb: "2",
+                      fontSize: '2xl',
+                      fontWeight: 'bold',
+                      color: 'blue.600',
+                      mb: '2',
                     })}
                   >
                     {example.num}
@@ -489,16 +481,16 @@ export function ReadingNumbersGuide() {
 
                   <div
                     className={css({
-                      flex: "1",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      my: "2",
+                      flex: '1',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      my: '2',
                     })}
                   >
                     <AbacusReact
                       value={example.num}
-                      columns={"auto"}
+                      columns={'auto'}
                       beadShape={appConfig.beadShape}
                       colorScheme={appConfig.colorScheme}
                       hideInactiveBeads={appConfig.hideInactiveBeads}
@@ -511,11 +503,11 @@ export function ReadingNumbersGuide() {
 
                   <p
                     className={css({
-                      fontSize: "xs",
-                      color: "blue.700",
-                      lineHeight: "relaxed",
-                      textAlign: "center",
-                      mt: "2",
+                      fontSize: 'xs',
+                      color: 'blue.700',
+                      lineHeight: 'relaxed',
+                      textAlign: 'center',
+                      mt: '2',
                     })}
                   >
                     {t(`multiDigit.examples.${example.descKey}`)}
@@ -530,159 +522,155 @@ export function ReadingNumbersGuide() {
       {/* Step 4: Practice Tips */}
       <div
         className={css({
-          border: "1px solid",
-          borderColor: "border.default",
-          rounded: "xl",
-          p: "8",
+          border: '1px solid',
+          borderColor: 'border.default',
+          rounded: 'xl',
+          p: '8',
         })}
       >
-        <div className={stack({ gap: "6" })}>
-          <div className={hstack({ gap: "4", alignItems: "center" })}>
+        <div className={stack({ gap: '6' })}>
+          <div className={hstack({ gap: '4', alignItems: 'center' })}>
             <div
               className={css({
-                w: "12",
-                h: "12",
-                bg: "brand.600",
-                color: "white",
-                rounded: "full",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontWeight: "bold",
-                fontSize: "lg",
+                w: '12',
+                h: '12',
+                bg: 'brand.600',
+                color: 'white',
+                rounded: 'full',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 'bold',
+                fontSize: 'lg',
               })}
             >
-              {t("practice.number")}
+              {t('practice.number')}
             </div>
             <h3
               className={css({
-                fontSize: "2xl",
-                fontWeight: "bold",
-                color: "text.primary",
+                fontSize: '2xl',
+                fontWeight: 'bold',
+                color: 'text.primary',
               })}
             >
-              {t("practice.title")}
+              {t('practice.title')}
             </h3>
           </div>
 
-          <div className={grid({ columns: { base: 1, md: 2 }, gap: "6" })}>
+          <div className={grid({ columns: { base: 1, md: 2 }, gap: '6' })}>
             <div
               className={css({
-                bg: "green.50",
-                border: "1px solid",
-                borderColor: "green.200",
-                rounded: "xl",
-                p: "6",
+                bg: 'green.50',
+                border: '1px solid',
+                borderColor: 'green.200',
+                rounded: 'xl',
+                p: '6',
               })}
             >
               <h4
                 className={css({
-                  fontSize: "lg",
-                  fontWeight: "semibold",
-                  color: "green.800",
-                  mb: "4",
+                  fontSize: 'lg',
+                  fontWeight: 'semibold',
+                  color: 'green.800',
+                  mb: '4',
                 })}
               >
-                {t("practice.learningTips.title")}
+                {t('practice.learningTips.title')}
               </h4>
               <ul
                 className={css({
-                  fontSize: "sm",
-                  color: "green.700",
-                  lineHeight: "relaxed",
-                  pl: "4",
+                  fontSize: 'sm',
+                  color: 'green.700',
+                  lineHeight: 'relaxed',
+                  pl: '4',
                 })}
               >
-                {(t.raw("practice.learningTips.points") as string[]).map(
-                  (point, i) => (
-                    <li key={i} className={css({ mb: i < 3 ? "2" : "0" })}>
-                      • {point}
-                    </li>
-                  ),
-                )}
+                {(t.raw('practice.learningTips.points') as string[]).map((point, i) => (
+                  <li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
+                    • {point}
+                  </li>
+                ))}
               </ul>
             </div>
 
             <div
               className={css({
-                bg: "orange.50",
-                border: "1px solid",
-                borderColor: "orange.200",
-                rounded: "xl",
-                p: "6",
+                bg: 'orange.50',
+                border: '1px solid',
+                borderColor: 'orange.200',
+                rounded: 'xl',
+                p: '6',
               })}
             >
               <h4
                 className={css({
-                  fontSize: "lg",
-                  fontWeight: "semibold",
-                  color: "orange.800",
-                  mb: "4",
+                  fontSize: 'lg',
+                  fontWeight: 'semibold',
+                  color: 'orange.800',
+                  mb: '4',
                 })}
               >
-                {t("practice.quickRecognition.title")}
+                {t('practice.quickRecognition.title')}
               </h4>
               <ul
                 className={css({
-                  fontSize: "sm",
-                  color: "orange.700",
-                  lineHeight: "relaxed",
-                  pl: "4",
+                  fontSize: 'sm',
+                  color: 'orange.700',
+                  lineHeight: 'relaxed',
+                  pl: '4',
                 })}
               >
-                {(t.raw("practice.quickRecognition.points") as string[]).map(
-                  (point, i) => (
-                    <li key={i} className={css({ mb: i < 3 ? "2" : "0" })}>
-                      • {point}
-                    </li>
-                  ),
-                )}
+                {(t.raw('practice.quickRecognition.points') as string[]).map((point, i) => (
+                  <li key={i} className={css({ mb: i < 3 ? '2' : '0' })}>
+                    • {point}
+                  </li>
+                ))}
               </ul>
             </div>
           </div>
 
           <div
             className={css({
-              bg: "blue.600",
-              color: "white",
-              rounded: "xl",
-              p: "6",
-              textAlign: "center",
+              bg: 'blue.600',
+              color: 'white',
+              rounded: 'xl',
+              p: '6',
+              textAlign: 'center',
             })}
           >
             <h4
               className={css({
-                fontSize: "lg",
-                fontWeight: "semibold",
-                mb: "3",
+                fontSize: 'lg',
+                fontWeight: 'semibold',
+                mb: '3',
               })}
             >
-              {t("practice.readyToPractice.title")}
+              {t('practice.readyToPractice.title')}
             </h4>
             <p
               className={css({
-                mb: "4",
-                opacity: "0.9",
+                mb: '4',
+                opacity: '0.9',
               })}
             >
-              {t("practice.readyToPractice.description")}
+              {t('practice.readyToPractice.description')}
             </p>
             <Link
               href="/create"
               className={css({
-                display: "inline-block",
-                px: "6",
-                py: "3",
-                bg: "bg.default",
-                color: "blue.600",
-                fontWeight: "semibold",
-                rounded: "lg",
-                textDecoration: "none",
-                transition: "all",
-                _hover: { transform: "translateY(-1px)", shadow: "lg" },
+                display: 'inline-block',
+                px: '6',
+                py: '3',
+                bg: 'bg.default',
+                color: 'blue.600',
+                fontWeight: 'semibold',
+                rounded: 'lg',
+                textDecoration: 'none',
+                transition: 'all',
+                _hover: { transform: 'translateY(-1px)', shadow: 'lg' },
               })}
             >
-              {t("practice.readyToPractice.button")}
+              {t('practice.readyToPractice.button')}
             </Link>
           </div>
         </div>
@@ -691,93 +679,91 @@ export function ReadingNumbersGuide() {
       {/* Step 5: Interactive Practice */}
       <div
         className={css({
-          border: "1px solid",
-          borderColor: "border.default",
-          rounded: "xl",
-          p: "8",
+          border: '1px solid',
+          borderColor: 'border.default',
+          rounded: 'xl',
+          p: '8',
         })}
       >
-        <div className={stack({ gap: "6" })}>
-          <div className={hstack({ gap: "4", alignItems: "center" })}>
+        <div className={stack({ gap: '6' })}>
+          <div className={hstack({ gap: '4', alignItems: 'center' })}>
             <div
               className={css({
-                w: "12",
-                h: "12",
-                bg: "brand.600",
-                color: "white",
-                rounded: "full",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontWeight: "bold",
-                fontSize: "lg",
+                w: '12',
+                h: '12',
+                bg: 'brand.600',
+                color: 'white',
+                rounded: 'full',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 'bold',
+                fontSize: 'lg',
               })}
             >
-              {t("interactive.number")}
+              {t('interactive.number')}
             </div>
             <h3
               className={css({
-                fontSize: "2xl",
-                fontWeight: "bold",
-                color: "text.primary",
+                fontSize: '2xl',
+                fontWeight: 'bold',
+                color: 'text.primary',
               })}
             >
-              {t("interactive.title")}
+              {t('interactive.title')}
             </h3>
           </div>
 
           <p
             className={css({
-              fontSize: "lg",
-              color: "text.secondary",
-              lineHeight: "relaxed",
+              fontSize: 'lg',
+              color: 'text.secondary',
+              lineHeight: 'relaxed',
             })}
           >
-            {t("interactive.description")}
+            {t('interactive.description')}
           </p>
 
           <div
             className={css({
-              bg: "orange.50",
-              border: "1px solid",
-              borderColor: "orange.200",
-              rounded: "xl",
-              p: "6",
+              bg: 'orange.50',
+              border: '1px solid',
+              borderColor: 'orange.200',
+              rounded: 'xl',
+              p: '6',
             })}
           >
             <h4
               className={css({
-                fontSize: "lg",
-                fontWeight: "semibold",
-                color: "orange.800",
-                mb: "4",
-                textAlign: "center",
+                fontSize: 'lg',
+                fontWeight: 'semibold',
+                color: 'orange.800',
+                mb: '4',
+                textAlign: 'center',
               })}
             >
-              {t("interactive.howToUse.title")}
+              {t('interactive.howToUse.title')}
             </h4>
-            <div className={grid({ columns: { base: 1, md: 2 }, gap: "6" })}>
+            <div className={grid({ columns: { base: 1, md: 2 }, gap: '6' })}>
               <div>
                 <h5
                   className={css({
-                    fontWeight: "semibold",
-                    mb: "2",
-                    color: "orange.800",
+                    fontWeight: 'semibold',
+                    mb: '2',
+                    color: 'orange.800',
                   })}
                 >
-                  {t("interactive.howToUse.heaven.title")}
+                  {t('interactive.howToUse.heaven.title')}
                 </h5>
                 <ul
                   className={css({
-                    fontSize: "sm",
-                    color: "orange.700",
-                    pl: "4",
+                    fontSize: 'sm',
+                    color: 'orange.700',
+                    pl: '4',
                   })}
                 >
-                  {(
-                    t.raw("interactive.howToUse.heaven.points") as string[]
-                  ).map((point, i) => (
-                    <li key={i} className={css({ mb: i < 2 ? "1" : "0" })}>
+                  {(t.raw('interactive.howToUse.heaven.points') as string[]).map((point, i) => (
+                    <li key={i} className={css({ mb: i < 2 ? '1' : '0' })}>
                       • {point}
                     </li>
                   ))}
@@ -786,27 +772,25 @@ export function ReadingNumbersGuide() {
               <div>
                 <h5
                   className={css({
-                    fontWeight: "semibold",
-                    mb: "2",
-                    color: "orange.800",
+                    fontWeight: 'semibold',
+                    mb: '2',
+                    color: 'orange.800',
                   })}
                 >
-                  {t("interactive.howToUse.earth.title")}
+                  {t('interactive.howToUse.earth.title')}
                 </h5>
                 <ul
                   className={css({
-                    fontSize: "sm",
-                    color: "orange.700",
-                    pl: "4",
+                    fontSize: 'sm',
+                    color: 'orange.700',
+                    pl: '4',
                   })}
                 >
-                  {(t.raw("interactive.howToUse.earth.points") as string[]).map(
-                    (point, i) => (
-                      <li key={i} className={css({ mb: i < 2 ? "1" : "0" })}>
-                        • {point}
-                      </li>
-                    ),
-                  )}
+                  {(t.raw('interactive.howToUse.earth.points') as string[]).map((point, i) => (
+                    <li key={i} className={css({ mb: i < 2 ? '1' : '0' })}>
+                      • {point}
+                    </li>
+                  ))}
                 </ul>
               </div>
             </div>
@@ -815,15 +799,15 @@ export function ReadingNumbersGuide() {
           {/* Interactive Abacus Component */}
           <div
             className={css({
-              bg: "bg.default",
-              border: "2px solid",
-              borderColor: "brand.200",
-              rounded: "xl",
-              p: "6",
-              boxShadow: "0 8px 24px rgba(0, 0, 0, 0.08)",
-              display: "flex",
-              justifyContent: "center",
-              width: "100%",
+              bg: 'bg.default',
+              border: '2px solid',
+              borderColor: 'brand.200',
+              rounded: 'xl',
+              p: '6',
+              boxShadow: '0 8px 24px rgba(0, 0, 0, 0.08)',
+              display: 'flex',
+              justifyContent: 'center',
+              width: '100%',
             })}
           >
             <AbacusReact
@@ -841,50 +825,50 @@ export function ReadingNumbersGuide() {
 
           <div
             className={css({
-              bg: "blue.600",
-              color: "white",
-              rounded: "xl",
-              p: "6",
-              textAlign: "center",
+              bg: 'blue.600',
+              color: 'white',
+              rounded: 'xl',
+              p: '6',
+              textAlign: 'center',
             })}
           >
             <h4
               className={css({
-                fontSize: "lg",
-                fontWeight: "semibold",
-                mb: "3",
+                fontSize: 'lg',
+                fontWeight: 'semibold',
+                mb: '3',
               })}
             >
-              {t("interactive.readyToPractice.title")}
+              {t('interactive.readyToPractice.title')}
             </h4>
             <p
               className={css({
-                mb: "4",
-                opacity: "0.9",
+                mb: '4',
+                opacity: '0.9',
               })}
             >
-              {t("interactive.readyToPractice.description")}
+              {t('interactive.readyToPractice.description')}
             </p>
             <Link
               href="/create"
               className={css({
-                display: "inline-block",
-                px: "6",
-                py: "3",
-                bg: "bg.default",
-                color: "blue.600",
-                fontWeight: "semibold",
-                rounded: "lg",
-                textDecoration: "none",
-                transition: "all",
-                _hover: { transform: "translateY(-1px)", shadow: "lg" },
+                display: 'inline-block',
+                px: '6',
+                py: '3',
+                bg: 'bg.default',
+                color: 'blue.600',
+                fontWeight: 'semibold',
+                rounded: 'lg',
+                textDecoration: 'none',
+                transition: 'all',
+                _hover: { transform: 'translateY(-1px)', shadow: 'lg' },
               })}
             >
-              {t("interactive.readyToPractice.button")}
+              {t('interactive.readyToPractice.button')}
             </Link>
           </div>
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/guide/page.tsx b/apps/web/src/app/guide/page.tsx
index 07b45153..79c36255 100644
--- a/apps/web/src/app/guide/page.tsx
+++ b/apps/web/src/app/guide/page.tsx
@@ -1,54 +1,52 @@
-"use client";
+'use client'
 
-import { useState } from "react";
-import { useTranslations } from "next-intl";
-import { PageWithNav } from "@/components/PageWithNav";
-import { css } from "../../../styled-system/css";
-import { container, hstack } from "../../../styled-system/patterns";
-import { ArithmeticOperationsGuide } from "./components/ArithmeticOperationsGuide";
-import { ReadingNumbersGuide } from "./components/ReadingNumbersGuide";
+import { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { PageWithNav } from '@/components/PageWithNav'
+import { css } from '../../../styled-system/css'
+import { container, hstack } from '../../../styled-system/patterns'
+import { ArithmeticOperationsGuide } from './components/ArithmeticOperationsGuide'
+import { ReadingNumbersGuide } from './components/ReadingNumbersGuide'
 
-type TabType = "reading" | "arithmetic";
+type TabType = 'reading' | 'arithmetic'
 
 export default function GuidePage() {
-  const t = useTranslations("guide.page");
-  const [activeTab, setActiveTab] = useState<TabType>("reading");
+  const t = useTranslations('guide.page')
+  const [activeTab, setActiveTab] = useState<TabType>('reading')
 
   return (
-    <PageWithNav navTitle={t("navTitle")} navEmoji="📖">
-      <div
-        className={`with-fixed-nav ${css({ minHeight: "100vh", bg: "bg.canvas" })}`}
-      >
+    <PageWithNav navTitle={t('navTitle')} navEmoji="📖">
+      <div className={`with-fixed-nav ${css({ minHeight: '100vh', bg: 'bg.canvas' })}`}>
         {/* Hero Section */}
         <div
           className={css({
-            background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-            color: "text.inverse",
-            textAlign: "center",
-            py: "20",
+            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            color: 'text.inverse',
+            textAlign: 'center',
+            py: '20',
           })}
         >
-          <div className={container({ maxW: "4xl", px: "4" })}>
+          <div className={container({ maxW: '4xl', px: '4' })}>
             <h1
               className={css({
-                fontSize: "4xl",
-                fontWeight: "bold",
-                mb: "4",
-                textShadow: "0 4px 20px rgba(0,0,0,0.3)",
+                fontSize: '4xl',
+                fontWeight: 'bold',
+                mb: '4',
+                textShadow: '0 4px 20px rgba(0,0,0,0.3)',
               })}
             >
-              {t("hero.title")}
+              {t('hero.title')}
             </h1>
             <p
               className={css({
-                fontSize: "xl",
-                opacity: "0.95",
-                maxW: "2xl",
-                mx: "auto",
-                lineHeight: "relaxed",
+                fontSize: 'xl',
+                opacity: '0.95',
+                maxW: '2xl',
+                mx: 'auto',
+                lineHeight: 'relaxed',
               })}
             >
-              {t("hero.subtitle")}
+              {t('hero.subtitle')}
             </p>
           </div>
         </div>
@@ -56,95 +54,71 @@ export default function GuidePage() {
         {/* Navigation Tabs */}
         <div
           className={css({
-            bg: "bg.surface",
-            borderBottom: "1px solid",
-            borderColor: "border.default",
+            bg: 'bg.surface',
+            borderBottom: '1px solid',
+            borderColor: 'border.default',
           })}
         >
-          <div className={container({ maxW: "7xl", px: "4" })}>
-            <div className={hstack({ gap: "0" })}>
+          <div className={container({ maxW: '7xl', px: '4' })}>
+            <div className={hstack({ gap: '0' })}>
               <button
-                onClick={() => setActiveTab("reading")}
+                onClick={() => setActiveTab('reading')}
                 className={css({
-                  px: "6",
-                  py: "4",
-                  fontWeight: "medium",
-                  borderBottom: "2px solid",
-                  borderColor:
-                    activeTab === "reading" ? "accent.emphasis" : "transparent",
-                  color:
-                    activeTab === "reading"
-                      ? "accent.emphasis"
-                      : "text.secondary",
-                  bg: activeTab === "reading" ? "accent.subtle" : "transparent",
-                  transition: "all",
-                  cursor: "pointer",
+                  px: '6',
+                  py: '4',
+                  fontWeight: 'medium',
+                  borderBottom: '2px solid',
+                  borderColor: activeTab === 'reading' ? 'accent.emphasis' : 'transparent',
+                  color: activeTab === 'reading' ? 'accent.emphasis' : 'text.secondary',
+                  bg: activeTab === 'reading' ? 'accent.subtle' : 'transparent',
+                  transition: 'all',
+                  cursor: 'pointer',
                   _hover: {
-                    bg: activeTab === "reading" ? "accent.subtle" : "bg.muted",
-                    color:
-                      activeTab === "reading"
-                        ? "accent.emphasis"
-                        : "text.primary",
+                    bg: activeTab === 'reading' ? 'accent.subtle' : 'bg.muted',
+                    color: activeTab === 'reading' ? 'accent.emphasis' : 'text.primary',
                   },
                 })}
               >
-                {t("tabs.reading")}
+                {t('tabs.reading')}
               </button>
               <button
-                onClick={() => setActiveTab("arithmetic")}
+                onClick={() => setActiveTab('arithmetic')}
                 className={css({
-                  px: "6",
-                  py: "4",
-                  fontWeight: "medium",
-                  borderBottom: "2px solid",
-                  borderColor:
-                    activeTab === "arithmetic"
-                      ? "accent.emphasis"
-                      : "transparent",
-                  color:
-                    activeTab === "arithmetic"
-                      ? "accent.emphasis"
-                      : "text.secondary",
-                  bg:
-                    activeTab === "arithmetic"
-                      ? "accent.subtle"
-                      : "transparent",
-                  transition: "all",
-                  cursor: "pointer",
+                  px: '6',
+                  py: '4',
+                  fontWeight: 'medium',
+                  borderBottom: '2px solid',
+                  borderColor: activeTab === 'arithmetic' ? 'accent.emphasis' : 'transparent',
+                  color: activeTab === 'arithmetic' ? 'accent.emphasis' : 'text.secondary',
+                  bg: activeTab === 'arithmetic' ? 'accent.subtle' : 'transparent',
+                  transition: 'all',
+                  cursor: 'pointer',
                   _hover: {
-                    bg:
-                      activeTab === "arithmetic" ? "accent.subtle" : "bg.muted",
-                    color:
-                      activeTab === "arithmetic"
-                        ? "accent.emphasis"
-                        : "text.primary",
+                    bg: activeTab === 'arithmetic' ? 'accent.subtle' : 'bg.muted',
+                    color: activeTab === 'arithmetic' ? 'accent.emphasis' : 'text.primary',
                   },
                 })}
               >
-                {t("tabs.arithmetic")}
+                {t('tabs.arithmetic')}
               </button>
             </div>
           </div>
         </div>
 
         {/* Main Content */}
-        <div className={container({ maxW: "6xl", px: "4", py: "12" })}>
+        <div className={container({ maxW: '6xl', px: '4', py: '12' })}>
           <div
             className={css({
-              bg: "bg.default",
-              rounded: "2xl",
-              shadow: "card",
-              p: "10",
+              bg: 'bg.default',
+              rounded: '2xl',
+              shadow: 'card',
+              p: '10',
             })}
           >
-            {activeTab === "reading" ? (
-              <ReadingNumbersGuide />
-            ) : (
-              <ArithmeticOperationsGuide />
-            )}
+            {activeTab === 'reading' ? <ReadingNumbersGuide /> : <ArithmeticOperationsGuide />}
           </div>
         </div>
       </div>
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/app/icon/route.tsx b/apps/web/src/app/icon/route.tsx
index 6876d2f3..4900bc42 100644
--- a/apps/web/src/app/icon/route.tsx
+++ b/apps/web/src/app/icon/route.tsx
@@ -1,64 +1,62 @@
-import { readFileSync } from "fs";
-import { join } from "path";
+import { readFileSync } from 'fs'
+import { join } from 'path'
 
-export const runtime = "nodejs";
+export const runtime = 'nodejs'
 
 // In-memory cache: { day: svg }
-const iconCache = new Map<number, string>();
+const iconCache = new Map<number, string>()
 
 // Get current day of month in US Central Time
 function getDayOfMonth(): number {
-  const now = new Date();
+  const now = new Date()
   // Get date in America/Chicago timezone
-  const centralDate = new Date(
-    now.toLocaleString("en-US", { timeZone: "America/Chicago" }),
-  );
-  return centralDate.getDate();
+  const centralDate = new Date(now.toLocaleString('en-US', { timeZone: 'America/Chicago' }))
+  return centralDate.getDate()
 }
 
 // Load pre-generated day icon from public/icons/
 function loadDayIcon(day: number): string {
   // Read pre-generated icon from public/icons/
   // Icons are generated at build time by scripts/generateAllDayIcons.tsx
-  const filename = `icon-day-${day.toString().padStart(2, "0")}.svg`;
-  const filepath = join(process.cwd(), "public", "icons", filename);
-  return readFileSync(filepath, "utf-8");
+  const filename = `icon-day-${day.toString().padStart(2, '0')}.svg`
+  const filepath = join(process.cwd(), 'public', 'icons', filename)
+  return readFileSync(filepath, 'utf-8')
 }
 
 export async function GET(request: Request) {
   // Parse query parameters for testing
-  const { searchParams } = new URL(request.url);
-  const dayParam = searchParams.get("day");
+  const { searchParams } = new URL(request.url)
+  const dayParam = searchParams.get('day')
 
   // Use override day if provided (for testing), otherwise use current day
-  let dayOfMonth: number;
+  let dayOfMonth: number
   if (dayParam) {
-    const parsedDay = parseInt(dayParam, 10);
+    const parsedDay = parseInt(dayParam, 10)
     // Validate day is 1-31
     if (parsedDay >= 1 && parsedDay <= 31) {
-      dayOfMonth = parsedDay;
+      dayOfMonth = parsedDay
     } else {
-      return new Response("Invalid day parameter. Must be 1-31.", {
+      return new Response('Invalid day parameter. Must be 1-31.', {
         status: 400,
-      });
+      })
     }
   } else {
-    dayOfMonth = getDayOfMonth();
+    dayOfMonth = getDayOfMonth()
   }
 
   // Check cache first
-  let svg = iconCache.get(dayOfMonth);
+  let svg = iconCache.get(dayOfMonth)
 
   if (!svg) {
     // Load pre-generated icon and cache
-    svg = loadDayIcon(dayOfMonth);
-    iconCache.set(dayOfMonth, svg);
+    svg = loadDayIcon(dayOfMonth)
+    iconCache.set(dayOfMonth, svg)
 
     // Clear old cache entries (keep only current day, unless testing with override)
     if (!dayParam) {
       for (const [cachedDay] of iconCache) {
         if (cachedDay !== dayOfMonth) {
-          iconCache.delete(cachedDay);
+          iconCache.delete(cachedDay)
         }
       }
     }
@@ -66,11 +64,11 @@ export async function GET(request: Request) {
 
   return new Response(svg, {
     headers: {
-      "Content-Type": "image/svg+xml",
+      'Content-Type': 'image/svg+xml',
       // Cache for 1 hour for current day, shorter cache for test overrides
-      "Cache-Control": dayParam
-        ? "public, max-age=60, s-maxage=60"
-        : "public, max-age=3600, s-maxage=3600",
+      'Cache-Control': dayParam
+        ? 'public, max-age=60, s-maxage=60'
+        : 'public, max-age=3600, s-maxage=3600',
     },
-  });
+  })
 }
diff --git a/apps/web/src/app/join/[code]/page.tsx b/apps/web/src/app/join/[code]/page.tsx
index 8d84046b..5f8f5940 100644
--- a/apps/web/src/app/join/[code]/page.tsx
+++ b/apps/web/src/app/join/[code]/page.tsx
@@ -1,20 +1,16 @@
-"use client";
+'use client'
 
-import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
-import { io } from "socket.io-client";
-import {
-  useGetRoomByCode,
-  useJoinRoom,
-  useRoomData,
-} from "@/hooks/useRoomData";
-import { getRoomDisplayWithEmoji } from "@/utils/room-display";
+import { useRouter } from 'next/navigation'
+import { useCallback, useEffect, useState } from 'react'
+import { io } from 'socket.io-client'
+import { useGetRoomByCode, useJoinRoom, useRoomData } from '@/hooks/useRoomData'
+import { getRoomDisplayWithEmoji } from '@/utils/room-display'
 
 interface RoomSwitchConfirmationProps {
-  currentRoom: { name: string | null; code: string; gameName: string };
-  targetRoom: { name: string | null; code: string; gameName: string };
-  onConfirm: () => void;
-  onCancel: () => void;
+  currentRoom: { name: string | null; code: string; gameName: string }
+  targetRoom: { name: string | null; code: string; gameName: string }
+  onConfirm: () => void
+  onCancel: () => void
 }
 
 function RoomSwitchConfirmation({
@@ -26,46 +22,45 @@ function RoomSwitchConfirmation({
   return (
     <div
       style={{
-        position: "fixed",
+        position: 'fixed',
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        background: "rgba(0, 0, 0, 0.7)",
-        backdropFilter: "blur(4px)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        background: 'rgba(0, 0, 0, 0.7)',
+        backdropFilter: 'blur(4px)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
         zIndex: 10000,
       }}
     >
       <div
         style={{
-          background:
-            "linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.98))",
-          borderRadius: "16px",
-          padding: "32px",
-          maxWidth: "500px",
-          width: "90%",
-          border: "2px solid rgba(251, 146, 60, 0.3)",
-          boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)",
+          background: 'linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.98))',
+          borderRadius: '16px',
+          padding: '32px',
+          maxWidth: '500px',
+          width: '90%',
+          border: '2px solid rgba(251, 146, 60, 0.3)',
+          boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
         }}
       >
         <h2
           style={{
-            fontSize: "24px",
-            fontWeight: "bold",
-            marginBottom: "8px",
-            color: "rgba(253, 186, 116, 1)",
+            fontSize: '24px',
+            fontWeight: 'bold',
+            marginBottom: '8px',
+            color: 'rgba(253, 186, 116, 1)',
           }}
         >
           Switch Rooms?
         </h2>
         <p
           style={{
-            fontSize: "14px",
-            color: "rgba(209, 213, 219, 0.8)",
-            marginBottom: "24px",
+            fontSize: '14px',
+            color: 'rgba(209, 213, 219, 0.8)',
+            marginBottom: '24px',
           }}
         >
           You are currently in another room. Would you like to switch?
@@ -73,24 +68,24 @@ function RoomSwitchConfirmation({
 
         <div
           style={{
-            background: "rgba(251, 146, 60, 0.1)",
-            border: "1px solid rgba(251, 146, 60, 0.3)",
-            borderRadius: "12px",
-            padding: "16px",
-            marginBottom: "16px",
+            background: 'rgba(251, 146, 60, 0.1)',
+            border: '1px solid rgba(251, 146, 60, 0.3)',
+            borderRadius: '12px',
+            padding: '16px',
+            marginBottom: '16px',
           }}
         >
-          <div style={{ marginBottom: "12px" }}>
+          <div style={{ marginBottom: '12px' }}>
             <div
               style={{
-                fontSize: "12px",
-                color: "rgba(209, 213, 219, 0.6)",
-                marginBottom: "4px",
+                fontSize: '12px',
+                color: 'rgba(209, 213, 219, 0.6)',
+                marginBottom: '4px',
               }}
             >
               Current Room
             </div>
-            <div style={{ color: "rgba(253, 186, 116, 1)", fontWeight: "600" }}>
+            <div style={{ color: 'rgba(253, 186, 116, 1)', fontWeight: '600' }}>
               {getRoomDisplayWithEmoji({
                 name: currentRoom.name,
                 code: currentRoom.code,
@@ -99,9 +94,9 @@ function RoomSwitchConfirmation({
             </div>
             <div
               style={{
-                fontSize: "13px",
-                color: "rgba(209, 213, 219, 0.7)",
-                fontFamily: "monospace",
+                fontSize: '13px',
+                color: 'rgba(209, 213, 219, 0.7)',
+                fontFamily: 'monospace',
               }}
             >
               Code: {currentRoom.code}
@@ -110,23 +105,23 @@ function RoomSwitchConfirmation({
 
           <div
             style={{
-              height: "1px",
-              background: "rgba(251, 146, 60, 0.2)",
-              margin: "12px 0",
+              height: '1px',
+              background: 'rgba(251, 146, 60, 0.2)',
+              margin: '12px 0',
             }}
           />
 
           <div>
             <div
               style={{
-                fontSize: "12px",
-                color: "rgba(209, 213, 219, 0.6)",
-                marginBottom: "4px",
+                fontSize: '12px',
+                color: 'rgba(209, 213, 219, 0.6)',
+                marginBottom: '4px',
               }}
             >
               New Room
             </div>
-            <div style={{ color: "rgba(134, 239, 172, 1)", fontWeight: "600" }}>
+            <div style={{ color: 'rgba(134, 239, 172, 1)', fontWeight: '600' }}>
               {getRoomDisplayWithEmoji({
                 name: targetRoom.name,
                 code: targetRoom.code,
@@ -135,9 +130,9 @@ function RoomSwitchConfirmation({
             </div>
             <div
               style={{
-                fontSize: "13px",
-                color: "rgba(209, 213, 219, 0.7)",
-                fontFamily: "monospace",
+                fontSize: '13px',
+                color: 'rgba(209, 213, 219, 0.7)',
+                fontFamily: 'monospace',
               }}
             >
               Code: {targetRoom.code}
@@ -145,27 +140,27 @@ function RoomSwitchConfirmation({
           </div>
         </div>
 
-        <div style={{ display: "flex", gap: "12px" }}>
+        <div style={{ display: 'flex', gap: '12px' }}>
           <button
             type="button"
             onClick={onCancel}
             style={{
               flex: 1,
-              padding: "12px",
-              background: "rgba(75, 85, 99, 0.3)",
-              color: "rgba(209, 213, 219, 1)",
-              border: "2px solid rgba(75, 85, 99, 0.5)",
-              borderRadius: "10px",
-              fontSize: "15px",
-              fontWeight: "600",
-              cursor: "pointer",
-              transition: "all 0.2s ease",
+              padding: '12px',
+              background: 'rgba(75, 85, 99, 0.3)',
+              color: 'rgba(209, 213, 219, 1)',
+              border: '2px solid rgba(75, 85, 99, 0.5)',
+              borderRadius: '10px',
+              fontSize: '15px',
+              fontWeight: '600',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.background = "rgba(75, 85, 99, 0.4)";
+              e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
             }}
             onMouseLeave={(e) => {
-              e.currentTarget.style.background = "rgba(75, 85, 99, 0.3)";
+              e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
             }}
           >
             Cancel
@@ -175,24 +170,24 @@ function RoomSwitchConfirmation({
             onClick={onConfirm}
             style={{
               flex: 1,
-              padding: "12px",
+              padding: '12px',
               background:
-                "linear-gradient(135deg, rgba(251, 146, 60, 0.8), rgba(249, 115, 22, 0.8))",
-              color: "rgba(255, 255, 255, 1)",
-              border: "2px solid rgba(251, 146, 60, 0.6)",
-              borderRadius: "10px",
-              fontSize: "15px",
-              fontWeight: "600",
-              cursor: "pointer",
-              transition: "all 0.2s ease",
+                'linear-gradient(135deg, rgba(251, 146, 60, 0.8), rgba(249, 115, 22, 0.8))',
+              color: 'rgba(255, 255, 255, 1)',
+              border: '2px solid rgba(251, 146, 60, 0.6)',
+              borderRadius: '10px',
+              fontSize: '15px',
+              fontWeight: '600',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
             }}
             onMouseEnter={(e) => {
               e.currentTarget.style.background =
-                "linear-gradient(135deg, rgba(251, 146, 60, 0.9), rgba(249, 115, 22, 0.9))";
+                'linear-gradient(135deg, rgba(251, 146, 60, 0.9), rgba(249, 115, 22, 0.9))'
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.background =
-                "linear-gradient(135deg, rgba(251, 146, 60, 0.8), rgba(249, 115, 22, 0.8))";
+                'linear-gradient(135deg, rgba(251, 146, 60, 0.8), rgba(249, 115, 22, 0.8))'
             }}
           >
             Switch Rooms
@@ -200,61 +195,61 @@ function RoomSwitchConfirmation({
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 export default function JoinRoomPage({ params }: { params: { code: string } }) {
-  const router = useRouter();
-  const { roomData } = useRoomData();
-  const { mutateAsync: getRoomByCode } = useGetRoomByCode();
-  const { mutateAsync: joinRoom } = useJoinRoom();
+  const router = useRouter()
+  const { roomData } = useRoomData()
+  const { mutateAsync: getRoomByCode } = useGetRoomByCode()
+  const { mutateAsync: joinRoom } = useJoinRoom()
   const [targetRoomData, setTargetRoomData] = useState<{
-    id: string;
-    name: string | null;
-    code: string;
-    gameName: string;
-    accessMode: string;
-  } | null>(null);
-  const [showConfirmation, setShowConfirmation] = useState(false);
-  const [showPasswordPrompt, setShowPasswordPrompt] = useState(false);
-  const [showApprovalPrompt, setShowApprovalPrompt] = useState(false);
-  const [approvalRequested, setApprovalRequested] = useState(false);
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [isJoining, setIsJoining] = useState(false);
-  const code = params.code.toUpperCase();
+    id: string
+    name: string | null
+    code: string
+    gameName: string
+    accessMode: string
+  } | null>(null)
+  const [showConfirmation, setShowConfirmation] = useState(false)
+  const [showPasswordPrompt, setShowPasswordPrompt] = useState(false)
+  const [showApprovalPrompt, setShowApprovalPrompt] = useState(false)
+  const [approvalRequested, setApprovalRequested] = useState(false)
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [isJoining, setIsJoining] = useState(false)
+  const code = params.code.toUpperCase()
 
   const handleJoin = useCallback(
     async (targetRoomId: string, roomPassword?: string) => {
-      setIsJoining(true);
-      setError(null);
+      setIsJoining(true)
+      setError(null)
 
       try {
         await joinRoom({
           roomId: targetRoomId,
-          displayName: "Player",
+          displayName: 'Player',
           password: roomPassword,
-        });
+        })
         // Navigate to the game
-        router.push("/arcade");
+        router.push('/arcade')
       } catch (err) {
-        setError(err instanceof Error ? err.message : "Failed to join room");
-        setIsJoining(false);
+        setError(err instanceof Error ? err.message : 'Failed to join room')
+        setIsJoining(false)
       }
     },
-    [joinRoom, router],
-  );
+    [joinRoom, router]
+  )
 
   // Fetch target room data and handle join logic
   useEffect(() => {
-    if (!code) return;
+    if (!code) return
 
-    let mounted = true;
+    let mounted = true
 
     // Look up room by code
     getRoomByCode(code)
       .then((room) => {
-        if (!mounted) return;
+        if (!mounted) return
 
         setTargetRoomData({
           id: room.id,
@@ -262,205 +257,194 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
           code: room.code,
           gameName: room.gameName,
           accessMode: room.accessMode,
-        });
+        })
 
         // If user is already in this exact room, just navigate to game
         if (roomData && roomData.id === room.id) {
-          router.push("/arcade");
-          return;
+          router.push('/arcade')
+          return
         }
 
         // Check if room needs password
-        if (room.accessMode === "password") {
-          setShowPasswordPrompt(true);
-          return;
+        if (room.accessMode === 'password') {
+          setShowPasswordPrompt(true)
+          return
         }
 
         // Check for other access modes
-        if (room.accessMode === "locked" || room.accessMode === "retired") {
-          setError("This room is no longer accepting new members");
-          return;
+        if (room.accessMode === 'locked' || room.accessMode === 'retired') {
+          setError('This room is no longer accepting new members')
+          return
         }
 
-        if (room.accessMode === "approval-only") {
-          setShowApprovalPrompt(true);
-          return;
+        if (room.accessMode === 'approval-only') {
+          setShowApprovalPrompt(true)
+          return
         }
 
         // For restricted rooms, try to join - the API will check for invitation
         // If user is in a different room, show confirmation
         if (roomData) {
-          setShowConfirmation(true);
+          setShowConfirmation(true)
         } else {
           // Otherwise, auto-join (for open rooms and restricted rooms with invitation)
-          handleJoin(room.id);
+          handleJoin(room.id)
         }
       })
       .catch((err) => {
-        if (!mounted) return;
-        setError(err instanceof Error ? err.message : "Failed to load room");
-      });
+        if (!mounted) return
+        setError(err instanceof Error ? err.message : 'Failed to load room')
+      })
 
     return () => {
-      mounted = false;
-    };
-  }, [code, roomData, handleJoin, router, getRoomByCode]);
+      mounted = false
+    }
+  }, [code, roomData, handleJoin, router, getRoomByCode])
 
   const handleConfirm = () => {
     if (targetRoomData) {
-      if (targetRoomData.accessMode === "password") {
-        setShowConfirmation(false);
-        setShowPasswordPrompt(true);
+      if (targetRoomData.accessMode === 'password') {
+        setShowConfirmation(false)
+        setShowPasswordPrompt(true)
       } else {
-        handleJoin(targetRoomData.id);
+        handleJoin(targetRoomData.id)
       }
     }
-  };
+  }
 
   const handleCancel = () => {
-    router.push("/arcade"); // Stay in current room
-  };
+    router.push('/arcade') // Stay in current room
+  }
 
   const handlePasswordSubmit = () => {
     if (targetRoomData && password) {
-      handleJoin(targetRoomData.id, password);
+      handleJoin(targetRoomData.id, password)
     }
-  };
+  }
 
   const handleRequestApproval = async () => {
-    if (!targetRoomData) return;
+    if (!targetRoomData) return
 
-    setIsJoining(true);
-    setError(null);
+    setIsJoining(true)
+    setError(null)
 
     try {
-      const res = await fetch(
-        `/api/arcade/rooms/${targetRoomData.id}/join-requests`,
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-        },
-      );
+      const res = await fetch(`/api/arcade/rooms/${targetRoomData.id}/join-requests`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      })
 
       if (!res.ok) {
-        const errorData = await res.json();
-        throw new Error(errorData.error || "Failed to request approval");
+        const errorData = await res.json()
+        throw new Error(errorData.error || 'Failed to request approval')
       }
 
       // Request sent successfully - show waiting state
-      setApprovalRequested(true);
-      setIsJoining(false);
+      setApprovalRequested(true)
+      setIsJoining(false)
     } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "Failed to request approval",
-      );
-      setIsJoining(false);
+      setError(err instanceof Error ? err.message : 'Failed to request approval')
+      setIsJoining(false)
     }
-  };
+  }
 
   // Socket listener for approval notifications
   useEffect(() => {
-    if (!approvalRequested || !targetRoomData) return;
+    if (!approvalRequested || !targetRoomData) return
 
-    console.log(
-      "[Join Page] Setting up approval listener for room:",
-      targetRoomData.id,
-    );
+    console.log('[Join Page] Setting up approval listener for room:', targetRoomData.id)
 
-    let socket: ReturnType<typeof io> | null = null;
+    let socket: ReturnType<typeof io> | null = null
 
     // Fetch viewer ID and set up socket
     const setupSocket = async () => {
       try {
         // Get current user's viewer ID
-        const res = await fetch("/api/viewer");
+        const res = await fetch('/api/viewer')
         if (!res.ok) {
-          console.error("[Join Page] Failed to get viewer ID");
-          return;
+          console.error('[Join Page] Failed to get viewer ID')
+          return
         }
 
-        const { viewerId } = await res.json();
-        console.log("[Join Page] Got viewer ID:", viewerId);
+        const { viewerId } = await res.json()
+        console.log('[Join Page] Got viewer ID:', viewerId)
 
         // Connect socket
-        socket = io({ path: "/api/socket" });
+        socket = io({ path: '/api/socket' })
 
-        socket.on("connect", () => {
-          console.log("[Join Page] Socket connected, joining user channel");
+        socket.on('connect', () => {
+          console.log('[Join Page] Socket connected, joining user channel')
           // Join user-specific channel to receive moderation events
-          socket?.emit("join-user-channel", { userId: viewerId });
-        });
+          socket?.emit('join-user-channel', { userId: viewerId })
+        })
 
-        socket.on(
-          "join-request-approved",
-          (data: { roomId: string; requestId: string }) => {
-            console.log("[Join Page] Request approved via socket!", data);
-            if (data.roomId === targetRoomData.id) {
-              console.log("[Join Page] Joining room automatically...");
-              handleJoin(targetRoomData.id);
-            }
-          },
-        );
+        socket.on('join-request-approved', (data: { roomId: string; requestId: string }) => {
+          console.log('[Join Page] Request approved via socket!', data)
+          if (data.roomId === targetRoomData.id) {
+            console.log('[Join Page] Joining room automatically...')
+            handleJoin(targetRoomData.id)
+          }
+        })
 
-        socket.on("connect_error", (error) => {
-          console.error("[Join Page] Socket connection error:", error);
-        });
+        socket.on('connect_error', (error) => {
+          console.error('[Join Page] Socket connection error:', error)
+        })
       } catch (error) {
-        console.error("[Join Page] Error setting up socket:", error);
+        console.error('[Join Page] Error setting up socket:', error)
       }
-    };
+    }
 
-    setupSocket();
+    setupSocket()
 
     return () => {
-      console.log("[Join Page] Cleaning up approval listener");
-      socket?.disconnect();
-    };
-  }, [approvalRequested, targetRoomData, handleJoin]);
+      console.log('[Join Page] Cleaning up approval listener')
+      socket?.disconnect()
+    }
+  }, [approvalRequested, targetRoomData, handleJoin])
 
   // Only show error page for non-password and non-approval errors
   if (error && !showPasswordPrompt && !showApprovalPrompt) {
     return (
       <div
         style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100vh",
-          gap: "1rem",
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          gap: '1rem',
         }}
       >
-        <div style={{ fontSize: "18px", color: "#ef4444" }}>{error}</div>
+        <div style={{ fontSize: '18px', color: '#ef4444' }}>{error}</div>
         <a
           href="/arcade"
           style={{
-            color: "#3b82f6",
-            textDecoration: "underline",
-            fontSize: "16px",
+            color: '#3b82f6',
+            textDecoration: 'underline',
+            fontSize: '16px',
           }}
         >
           Go to Champion Arena
         </a>
       </div>
-    );
+    )
   }
 
   if (isJoining || !targetRoomData) {
     return (
       <div
         style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100vh",
-          fontSize: "18px",
-          color: "#666",
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          fontSize: '18px',
+          color: '#666',
         }}
       >
-        {isJoining ? "Joining room..." : "Loading..."}
+        {isJoining ? 'Joining room...' : 'Loading...'}
       </div>
-    );
+    )
   }
 
   if (showConfirmation && roomData && targetRoomData) {
@@ -479,48 +463,46 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
         onConfirm={handleConfirm}
         onCancel={handleCancel}
       />
-    );
+    )
   }
 
   if (showPasswordPrompt && targetRoomData) {
     return (
       <div
         style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100vh",
-          background:
-            "linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)",
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          background: 'linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)',
         }}
       >
         <div
           style={{
-            background:
-              "linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.98))",
-            borderRadius: "16px",
-            padding: "32px",
-            maxWidth: "450px",
-            width: "90%",
-            border: "2px solid rgba(251, 191, 36, 0.3)",
-            boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)",
+            background: 'linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.98))',
+            borderRadius: '16px',
+            padding: '32px',
+            maxWidth: '450px',
+            width: '90%',
+            border: '2px solid rgba(251, 191, 36, 0.3)',
+            boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
           }}
         >
           <h2
             style={{
-              fontSize: "24px",
-              fontWeight: "bold",
-              marginBottom: "8px",
-              color: "rgba(251, 191, 36, 1)",
+              fontSize: '24px',
+              fontWeight: 'bold',
+              marginBottom: '8px',
+              color: 'rgba(251, 191, 36, 1)',
             }}
           >
             🔑 Password Required
           </h2>
           <p
             style={{
-              fontSize: "14px",
-              color: "rgba(209, 213, 219, 0.8)",
-              marginBottom: "20px",
+              fontSize: '14px',
+              color: 'rgba(209, 213, 219, 0.8)',
+              marginBottom: '20px',
             }}
           >
             This room is password protected. Enter the password to join.
@@ -528,18 +510,18 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
 
           <div
             style={{
-              background: "rgba(251, 191, 36, 0.1)",
-              border: "1px solid rgba(251, 191, 36, 0.3)",
-              borderRadius: "12px",
-              padding: "16px",
-              marginBottom: "20px",
+              background: 'rgba(251, 191, 36, 0.1)',
+              border: '1px solid rgba(251, 191, 36, 0.3)',
+              borderRadius: '12px',
+              padding: '16px',
+              marginBottom: '20px',
             }}
           >
             <div
               style={{
-                fontSize: "14px",
-                fontWeight: "600",
-                color: "rgba(251, 191, 36, 1)",
+                fontSize: '14px',
+                fontWeight: '600',
+                color: 'rgba(251, 191, 36, 1)',
               }}
             >
               {getRoomDisplayWithEmoji({
@@ -550,10 +532,10 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
             </div>
             <div
               style={{
-                fontSize: "13px",
-                color: "rgba(209, 213, 219, 0.7)",
-                fontFamily: "monospace",
-                marginTop: "4px",
+                fontSize: '13px',
+                color: 'rgba(209, 213, 219, 0.7)',
+                fontFamily: 'monospace',
+                marginTop: '4px',
               }}
             >
               Code: {targetRoomData.code}
@@ -564,59 +546,59 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
             type="password"
             value={password}
             onChange={(e) => {
-              setPassword(e.target.value);
-              setError(null); // Clear error when user starts typing
+              setPassword(e.target.value)
+              setError(null) // Clear error when user starts typing
             }}
             onKeyDown={(e) => {
-              if (e.key === "Enter" && password) {
-                handlePasswordSubmit();
+              if (e.key === 'Enter' && password) {
+                handlePasswordSubmit()
               }
             }}
             placeholder="Enter password"
             disabled={isJoining}
             style={{
-              width: "100%",
-              padding: "12px 16px",
-              border: "2px solid rgba(251, 191, 36, 0.4)",
-              borderRadius: "10px",
-              background: "rgba(255, 255, 255, 0.05)",
-              color: "rgba(251, 191, 36, 1)",
-              fontSize: "16px",
-              outline: "none",
-              marginBottom: "8px",
+              width: '100%',
+              padding: '12px 16px',
+              border: '2px solid rgba(251, 191, 36, 0.4)',
+              borderRadius: '10px',
+              background: 'rgba(255, 255, 255, 0.05)',
+              color: 'rgba(251, 191, 36, 1)',
+              fontSize: '16px',
+              outline: 'none',
+              marginBottom: '8px',
             }}
           />
 
           {error && (
             <p
               style={{
-                fontSize: "13px",
-                color: "rgba(248, 113, 113, 1)",
-                marginBottom: "16px",
-                textAlign: "center",
+                fontSize: '13px',
+                color: 'rgba(248, 113, 113, 1)',
+                marginBottom: '16px',
+                textAlign: 'center',
               }}
             >
               {error}
             </p>
           )}
 
-          <div style={{ display: "flex", gap: "12px", marginTop: "20px" }}>
+          <div style={{ display: 'flex', gap: '12px', marginTop: '20px' }}>
             <button
               type="button"
-              onClick={() => router.push("/arcade")}
+              onClick={() => router.push('/arcade')}
               disabled={isJoining}
               style={{
                 flex: 1,
-                padding: "12px",
-                background: "rgba(75, 85, 99, 0.3)",
-                color: "rgba(209, 213, 219, 1)",
-                border: "2px solid rgba(75, 85, 99, 0.5)",
-                borderRadius: "10px",
-                fontSize: "15px",
-                fontWeight: "600",
-                cursor: isJoining ? "not-allowed" : "pointer",
+                padding: '12px',
+                background: 'rgba(75, 85, 99, 0.3)',
+                color: 'rgba(209, 213, 219, 1)',
+                border: '2px solid rgba(75, 85, 99, 0.5)',
+                borderRadius: '10px',
+                fontSize: '15px',
+                fontWeight: '600',
+                cursor: isJoining ? 'not-allowed' : 'pointer',
                 opacity: isJoining ? 0.5 : 1,
-                transition: "all 0.2s ease",
+                transition: 'all 0.2s ease',
               }}
             >
               Cancel
@@ -627,78 +609,73 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
               disabled={!password || isJoining}
               style={{
                 flex: 1,
-                padding: "12px",
+                padding: '12px',
                 background:
                   password && !isJoining
-                    ? "linear-gradient(135deg, rgba(251, 191, 36, 0.8), rgba(245, 158, 11, 0.8))"
-                    : "rgba(75, 85, 99, 0.3)",
-                color:
-                  password && !isJoining
-                    ? "rgba(255, 255, 255, 1)"
-                    : "rgba(156, 163, 175, 1)",
+                    ? 'linear-gradient(135deg, rgba(251, 191, 36, 0.8), rgba(245, 158, 11, 0.8))'
+                    : 'rgba(75, 85, 99, 0.3)',
+                color: password && !isJoining ? 'rgba(255, 255, 255, 1)' : 'rgba(156, 163, 175, 1)',
                 border:
                   password && !isJoining
-                    ? "2px solid rgba(251, 191, 36, 0.6)"
-                    : "2px solid rgba(75, 85, 99, 0.5)",
-                borderRadius: "10px",
-                fontSize: "15px",
-                fontWeight: "600",
-                cursor: password && !isJoining ? "pointer" : "not-allowed",
+                    ? '2px solid rgba(251, 191, 36, 0.6)'
+                    : '2px solid rgba(75, 85, 99, 0.5)',
+                borderRadius: '10px',
+                fontSize: '15px',
+                fontWeight: '600',
+                cursor: password && !isJoining ? 'pointer' : 'not-allowed',
                 opacity: password && !isJoining ? 1 : 0.5,
-                transition: "all 0.2s ease",
+                transition: 'all 0.2s ease',
               }}
             >
-              {isJoining ? "Joining..." : "Join Room"}
+              {isJoining ? 'Joining...' : 'Join Room'}
             </button>
           </div>
         </div>
       </div>
-    );
+    )
   }
 
   if (showApprovalPrompt && targetRoomData) {
     return (
       <div
         style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100vh",
-          background:
-            "linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)",
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          background: 'linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)',
         }}
       >
         <div
           style={{
-            background:
-              "linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.98))",
-            borderRadius: "16px",
-            padding: "32px",
-            maxWidth: "450px",
-            width: "90%",
-            border: "2px solid rgba(59, 130, 246, 0.3)",
-            boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)",
+            background: 'linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.98))',
+            borderRadius: '16px',
+            padding: '32px',
+            maxWidth: '450px',
+            width: '90%',
+            border: '2px solid rgba(59, 130, 246, 0.3)',
+            boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
           }}
         >
           {approvalRequested ? (
             // Waiting for approval state
             <>
-              <div style={{ textAlign: "center", marginBottom: "20px" }}>
-                <div style={{ fontSize: "48px", marginBottom: "16px" }}>⏳</div>
+              <div style={{ textAlign: 'center', marginBottom: '20px' }}>
+                <div style={{ fontSize: '48px', marginBottom: '16px' }}>⏳</div>
                 <h2
                   style={{
-                    fontSize: "24px",
-                    fontWeight: "bold",
-                    marginBottom: "8px",
-                    color: "rgba(96, 165, 250, 1)",
+                    fontSize: '24px',
+                    fontWeight: 'bold',
+                    marginBottom: '8px',
+                    color: 'rgba(96, 165, 250, 1)',
                   }}
                 >
                   Waiting for Approval
                 </h2>
                 <p
                   style={{
-                    fontSize: "14px",
-                    color: "rgba(209, 213, 219, 0.8)",
+                    fontSize: '14px',
+                    color: 'rgba(209, 213, 219, 0.8)',
                   }}
                 >
                   Your request has been sent to the room moderator.
@@ -707,18 +684,18 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
 
               <div
                 style={{
-                  background: "rgba(59, 130, 246, 0.1)",
-                  border: "1px solid rgba(59, 130, 246, 0.3)",
-                  borderRadius: "12px",
-                  padding: "16px",
-                  marginBottom: "20px",
+                  background: 'rgba(59, 130, 246, 0.1)',
+                  border: '1px solid rgba(59, 130, 246, 0.3)',
+                  borderRadius: '12px',
+                  padding: '16px',
+                  marginBottom: '20px',
                 }}
               >
                 <div
                   style={{
-                    fontSize: "14px",
-                    fontWeight: "600",
-                    color: "rgba(96, 165, 250, 1)",
+                    fontSize: '14px',
+                    fontWeight: '600',
+                    color: 'rgba(96, 165, 250, 1)',
                   }}
                 >
                   {getRoomDisplayWithEmoji({
@@ -729,10 +706,10 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
                 </div>
                 <div
                   style={{
-                    fontSize: "13px",
-                    color: "rgba(209, 213, 219, 0.7)",
-                    fontFamily: "monospace",
-                    marginTop: "4px",
+                    fontSize: '13px',
+                    color: 'rgba(209, 213, 219, 0.7)',
+                    fontFamily: 'monospace',
+                    marginTop: '4px',
                   }}
                 >
                   Code: {targetRoomData.code}
@@ -741,36 +718,36 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
 
               <p
                 style={{
-                  fontSize: "13px",
-                  color: "rgba(156, 163, 175, 1)",
-                  textAlign: "center",
-                  marginBottom: "20px",
+                  fontSize: '13px',
+                  color: 'rgba(156, 163, 175, 1)',
+                  textAlign: 'center',
+                  marginBottom: '20px',
                 }}
               >
-                You'll be able to join once the host approves your request. You
-                can close this page and check back later.
+                You'll be able to join once the host approves your request. You can close this page
+                and check back later.
               </p>
 
               <button
                 type="button"
-                onClick={() => router.push("/arcade")}
+                onClick={() => router.push('/arcade')}
                 style={{
-                  width: "100%",
-                  padding: "12px",
-                  background: "rgba(75, 85, 99, 0.3)",
-                  color: "rgba(209, 213, 219, 1)",
-                  border: "2px solid rgba(75, 85, 99, 0.5)",
-                  borderRadius: "10px",
-                  fontSize: "15px",
-                  fontWeight: "600",
-                  cursor: "pointer",
-                  transition: "all 0.2s ease",
+                  width: '100%',
+                  padding: '12px',
+                  background: 'rgba(75, 85, 99, 0.3)',
+                  color: 'rgba(209, 213, 219, 1)',
+                  border: '2px solid rgba(75, 85, 99, 0.5)',
+                  borderRadius: '10px',
+                  fontSize: '15px',
+                  fontWeight: '600',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s ease',
                 }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.background = "rgba(75, 85, 99, 0.4)";
+                  e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.background = "rgba(75, 85, 99, 0.3)";
+                  e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
                 }}
               >
                 Go to Champion Arena
@@ -781,19 +758,19 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
             <>
               <h2
                 style={{
-                  fontSize: "24px",
-                  fontWeight: "bold",
-                  marginBottom: "8px",
-                  color: "rgba(96, 165, 250, 1)",
+                  fontSize: '24px',
+                  fontWeight: 'bold',
+                  marginBottom: '8px',
+                  color: 'rgba(96, 165, 250, 1)',
                 }}
               >
                 ✋ Approval Required
               </h2>
               <p
                 style={{
-                  fontSize: "14px",
-                  color: "rgba(209, 213, 219, 0.8)",
-                  marginBottom: "20px",
+                  fontSize: '14px',
+                  color: 'rgba(209, 213, 219, 0.8)',
+                  marginBottom: '20px',
                 }}
               >
                 This room requires host approval to join. Send a request?
@@ -801,18 +778,18 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
 
               <div
                 style={{
-                  background: "rgba(59, 130, 246, 0.1)",
-                  border: "1px solid rgba(59, 130, 246, 0.3)",
-                  borderRadius: "12px",
-                  padding: "16px",
-                  marginBottom: "20px",
+                  background: 'rgba(59, 130, 246, 0.1)',
+                  border: '1px solid rgba(59, 130, 246, 0.3)',
+                  borderRadius: '12px',
+                  padding: '16px',
+                  marginBottom: '20px',
                 }}
               >
                 <div
                   style={{
-                    fontSize: "14px",
-                    fontWeight: "600",
-                    color: "rgba(96, 165, 250, 1)",
+                    fontSize: '14px',
+                    fontWeight: '600',
+                    color: 'rgba(96, 165, 250, 1)',
                   }}
                 >
                   {getRoomDisplayWithEmoji({
@@ -823,10 +800,10 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
                 </div>
                 <div
                   style={{
-                    fontSize: "13px",
-                    color: "rgba(209, 213, 219, 0.7)",
-                    fontFamily: "monospace",
-                    marginTop: "4px",
+                    fontSize: '13px',
+                    color: 'rgba(209, 213, 219, 0.7)',
+                    fontFamily: 'monospace',
+                    marginTop: '4px',
                   }}
                 >
                   Code: {targetRoomData.code}
@@ -836,44 +813,42 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
               {error && (
                 <p
                   style={{
-                    fontSize: "13px",
-                    color: "rgba(248, 113, 113, 1)",
-                    marginBottom: "16px",
-                    textAlign: "center",
+                    fontSize: '13px',
+                    color: 'rgba(248, 113, 113, 1)',
+                    marginBottom: '16px',
+                    textAlign: 'center',
                   }}
                 >
                   {error}
                 </p>
               )}
 
-              <div style={{ display: "flex", gap: "12px" }}>
+              <div style={{ display: 'flex', gap: '12px' }}>
                 <button
                   type="button"
-                  onClick={() => router.push("/arcade")}
+                  onClick={() => router.push('/arcade')}
                   disabled={isJoining}
                   style={{
                     flex: 1,
-                    padding: "12px",
-                    background: "rgba(75, 85, 99, 0.3)",
-                    color: "rgba(209, 213, 219, 1)",
-                    border: "2px solid rgba(75, 85, 99, 0.5)",
-                    borderRadius: "10px",
-                    fontSize: "15px",
-                    fontWeight: "600",
-                    cursor: isJoining ? "not-allowed" : "pointer",
+                    padding: '12px',
+                    background: 'rgba(75, 85, 99, 0.3)',
+                    color: 'rgba(209, 213, 219, 1)',
+                    border: '2px solid rgba(75, 85, 99, 0.5)',
+                    borderRadius: '10px',
+                    fontSize: '15px',
+                    fontWeight: '600',
+                    cursor: isJoining ? 'not-allowed' : 'pointer',
                     opacity: isJoining ? 0.5 : 1,
-                    transition: "all 0.2s ease",
+                    transition: 'all 0.2s ease',
                   }}
                   onMouseEnter={(e) => {
                     if (!isJoining) {
-                      e.currentTarget.style.background =
-                        "rgba(75, 85, 99, 0.4)";
+                      e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
                     }
                   }}
                   onMouseLeave={(e) => {
                     if (!isJoining) {
-                      e.currentTarget.style.background =
-                        "rgba(75, 85, 99, 0.3)";
+                      e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
                     }
                   }}
                 >
@@ -885,45 +860,43 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
                   disabled={isJoining}
                   style={{
                     flex: 1,
-                    padding: "12px",
+                    padding: '12px',
                     background: isJoining
-                      ? "rgba(75, 85, 99, 0.3)"
-                      : "linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))",
-                    color: isJoining
-                      ? "rgba(156, 163, 175, 1)"
-                      : "rgba(255, 255, 255, 1)",
+                      ? 'rgba(75, 85, 99, 0.3)'
+                      : 'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))',
+                    color: isJoining ? 'rgba(156, 163, 175, 1)' : 'rgba(255, 255, 255, 1)',
                     border: isJoining
-                      ? "2px solid rgba(75, 85, 99, 0.5)"
-                      : "2px solid rgba(59, 130, 246, 0.6)",
-                    borderRadius: "10px",
-                    fontSize: "15px",
-                    fontWeight: "600",
-                    cursor: isJoining ? "not-allowed" : "pointer",
+                      ? '2px solid rgba(75, 85, 99, 0.5)'
+                      : '2px solid rgba(59, 130, 246, 0.6)',
+                    borderRadius: '10px',
+                    fontSize: '15px',
+                    fontWeight: '600',
+                    cursor: isJoining ? 'not-allowed' : 'pointer',
                     opacity: isJoining ? 0.5 : 1,
-                    transition: "all 0.2s ease",
+                    transition: 'all 0.2s ease',
                   }}
                   onMouseEnter={(e) => {
                     if (!isJoining) {
                       e.currentTarget.style.background =
-                        "linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9))";
+                        'linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9))'
                     }
                   }}
                   onMouseLeave={(e) => {
                     if (!isJoining) {
                       e.currentTarget.style.background =
-                        "linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))";
+                        'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))'
                     }
                   }}
                 >
-                  {isJoining ? "Sending..." : "Request to Join"}
+                  {isJoining ? 'Sending...' : 'Request to Join'}
                 </button>
               </div>
             </>
           )}
         </div>
       </div>
-    );
+    )
   }
 
-  return null;
+  return null
 }
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 7323b682..762ae771 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,92 +1,87 @@
-import type { Metadata, Viewport } from "next";
-import "./globals.css";
-import { ClientProviders } from "@/components/ClientProviders";
-import { getRequestLocale } from "@/i18n/request";
-import { getMessages } from "@/i18n/messages";
+import type { Metadata, Viewport } from 'next'
+import './globals.css'
+import { ClientProviders } from '@/components/ClientProviders'
+import { getRequestLocale } from '@/i18n/request'
+import { getMessages } from '@/i18n/messages'
 
 export const metadata: Metadata = {
-  metadataBase: new URL("https://abaci.one"),
+  metadataBase: new URL('https://abaci.one'),
   title: {
-    default: "Abaci.One - Interactive Soroban Learning",
-    template: "%s | Abaci.One",
+    default: 'Abaci.One - Interactive Soroban Learning',
+    template: '%s | Abaci.One',
   },
   description:
-    "Master the Japanese abacus (soroban) with interactive tutorials, arcade-style math games, and beautiful flashcards. Learn arithmetic through play with Rithmomachia, Complement Race, and more.",
+    'Master the Japanese abacus (soroban) with interactive tutorials, arcade-style math games, and beautiful flashcards. Learn arithmetic through play with Rithmomachia, Complement Race, and more.',
   keywords: [
-    "soroban",
-    "abacus",
-    "Japanese abacus",
-    "mental arithmetic",
-    "math games",
-    "abacus tutorial",
-    "soroban learning",
-    "arithmetic practice",
-    "educational games",
-    "Rithmomachia",
-    "number bonds",
-    "complement training",
+    'soroban',
+    'abacus',
+    'Japanese abacus',
+    'mental arithmetic',
+    'math games',
+    'abacus tutorial',
+    'soroban learning',
+    'arithmetic practice',
+    'educational games',
+    'Rithmomachia',
+    'number bonds',
+    'complement training',
   ],
-  authors: [{ name: "Abaci.One" }],
-  creator: "Abaci.One",
-  publisher: "Abaci.One",
+  authors: [{ name: 'Abaci.One' }],
+  creator: 'Abaci.One',
+  publisher: 'Abaci.One',
 
   // Open Graph
   openGraph: {
-    type: "website",
-    locale: "en_US",
-    alternateLocale: ["de_DE", "ja_JP", "hi_IN", "es_ES", "la"],
-    url: "https://abaci.one",
-    title: "Abaci.One - Interactive Soroban Learning",
-    description:
-      "Master the Japanese abacus through interactive games, tutorials, and practice",
-    siteName: "Abaci.One",
+    type: 'website',
+    locale: 'en_US',
+    alternateLocale: ['de_DE', 'ja_JP', 'hi_IN', 'es_ES', 'la'],
+    url: 'https://abaci.one',
+    title: 'Abaci.One - Interactive Soroban Learning',
+    description: 'Master the Japanese abacus through interactive games, tutorials, and practice',
+    siteName: 'Abaci.One',
   },
 
   // Twitter
   twitter: {
-    card: "summary_large_image",
-    title: "Abaci.One - Interactive Soroban Learning",
-    description: "Master the Japanese abacus through games and practice",
+    card: 'summary_large_image',
+    title: 'Abaci.One - Interactive Soroban Learning',
+    description: 'Master the Japanese abacus through games and practice',
   },
 
   // Icons
   icons: {
     icon: [
-      { url: "/favicon.ico", sizes: "any" },
-      { url: "/icon", type: "image/svg+xml" },
+      { url: '/favicon.ico', sizes: 'any' },
+      { url: '/icon', type: 'image/svg+xml' },
     ],
-    apple: "/apple-touch-icon.png",
+    apple: '/apple-touch-icon.png',
   },
 
   // Manifest
-  manifest: "/manifest.json",
+  manifest: '/manifest.json',
 
   // App-specific
-  applicationName: "Abaci.One",
+  applicationName: 'Abaci.One',
   appleWebApp: {
     capable: true,
-    statusBarStyle: "default",
-    title: "Abaci.One",
+    statusBarStyle: 'default',
+    title: 'Abaci.One',
   },
 
   // Category
-  category: "education",
-};
+  category: 'education',
+}
 
 export const viewport: Viewport = {
-  width: "device-width",
+  width: 'device-width',
   initialScale: 1,
   maximumScale: 1,
   userScalable: false,
-};
+}
 
-export default async function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const locale = await getRequestLocale();
-  const messages = await getMessages(locale);
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const locale = await getRequestLocale()
+  const messages = await getMessages(locale)
 
   return (
     <html lang={locale}>
@@ -96,5 +91,5 @@ export default async function RootLayout({
         </ClientProviders>
       </body>
     </html>
-  );
+  )
 }
diff --git a/apps/web/src/app/levels/page.tsx b/apps/web/src/app/levels/page.tsx
index 1bdd6ca0..ab6e6a22 100644
--- a/apps/web/src/app/levels/page.tsx
+++ b/apps/web/src/app/levels/page.tsx
@@ -1,56 +1,53 @@
-"use client";
+'use client'
 
-import { PageWithNav } from "@/components/PageWithNav";
-import { LevelSliderDisplay } from "@/components/LevelSliderDisplay";
-import { css } from "../../../styled-system/css";
-import { container, stack } from "../../../styled-system/patterns";
+import { PageWithNav } from '@/components/PageWithNav'
+import { LevelSliderDisplay } from '@/components/LevelSliderDisplay'
+import { css } from '../../../styled-system/css'
+import { container, stack } from '../../../styled-system/patterns'
 
 export default function LevelsPage() {
   return (
     <PageWithNav navTitle="Kyu & Dan Levels" navEmoji="📊">
-      <div className={css({ bg: "gray.900", minHeight: "100vh", pb: "12" })}>
+      <div className={css({ bg: 'gray.900', minHeight: '100vh', pb: '12' })}>
         {/* Hero Section */}
         <div
           className={css({
             background:
-              "linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(124, 58, 237, 0.3) 50%, rgba(17, 24, 39, 1) 100%)",
-            color: "white",
-            py: { base: "12", md: "16" },
-            position: "relative",
-            overflow: "hidden",
+              'linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(124, 58, 237, 0.3) 50%, rgba(17, 24, 39, 1) 100%)',
+            color: 'white',
+            py: { base: '12', md: '16' },
+            position: 'relative',
+            overflow: 'hidden',
           })}
         >
           <div
             className={css({
-              position: "absolute",
+              position: 'absolute',
               inset: 0,
               opacity: 0.1,
               backgroundImage:
-                "radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)",
-              backgroundSize: "40px 40px",
+                'radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)',
+              backgroundSize: '40px 40px',
             })}
           />
 
           <div
             className={container({
-              maxW: "6xl",
-              px: "4",
-              position: "relative",
+              maxW: '6xl',
+              px: '4',
+              position: 'relative',
             })}
           >
-            <div
-              className={css({ textAlign: "center", maxW: "5xl", mx: "auto" })}
-            >
+            <div className={css({ textAlign: 'center', maxW: '5xl', mx: 'auto' })}>
               <h1
                 className={css({
-                  fontSize: { base: "3xl", md: "5xl", lg: "6xl" },
-                  fontWeight: "bold",
-                  mb: "4",
-                  lineHeight: "tight",
-                  background:
-                    "linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)",
-                  backgroundClip: "text",
-                  color: "transparent",
+                  fontSize: { base: '3xl', md: '5xl', lg: '6xl' },
+                  fontWeight: 'bold',
+                  mb: '4',
+                  lineHeight: 'tight',
+                  background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)',
+                  backgroundClip: 'text',
+                  color: 'transparent',
                 })}
               >
                 Understanding Kyu & Dan Levels
@@ -58,12 +55,12 @@ export default function LevelsPage() {
 
               <p
                 className={css({
-                  fontSize: { base: "lg", md: "xl" },
-                  color: "gray.300",
-                  mb: "6",
-                  maxW: "3xl",
-                  mx: "auto",
-                  lineHeight: "1.6",
+                  fontSize: { base: 'lg', md: 'xl' },
+                  color: 'gray.300',
+                  mb: '6',
+                  maxW: '3xl',
+                  mx: 'auto',
+                  lineHeight: '1.6',
                 })}
               >
                 Slide through the complete progression from beginner to master
@@ -73,46 +70,41 @@ export default function LevelsPage() {
         </div>
 
         {/* Main content */}
-        <div className={container({ maxW: "6xl", px: "4", py: "12" })}>
-          <section className={stack({ gap: "8" })}>
+        <div className={container({ maxW: '6xl', px: '4', py: '12' })}>
+          <section className={stack({ gap: '8' })}>
             <LevelSliderDisplay />
 
             {/* Info Section */}
             <div
               className={css({
-                bg: "rgba(0, 0, 0, 0.4)",
-                border: "1px solid",
-                borderColor: "gray.700",
-                rounded: "xl",
-                p: { base: "6", md: "8" },
+                bg: 'rgba(0, 0, 0, 0.4)',
+                border: '1px solid',
+                borderColor: 'gray.700',
+                rounded: 'xl',
+                p: { base: '6', md: '8' },
               })}
             >
               <h3
                 className={css({
-                  fontSize: { base: "xl", md: "2xl" },
-                  fontWeight: "bold",
-                  color: "white",
-                  mb: "4",
+                  fontSize: { base: 'xl', md: '2xl' },
+                  fontWeight: 'bold',
+                  color: 'white',
+                  mb: '4',
                 })}
               >
                 About This Ranking System
               </h3>
-              <div className={stack({ gap: "4" })}>
-                <p className={css({ color: "gray.300", lineHeight: "1.6" })}>
-                  This ranking system is based on the official examination
-                  structure used by the{" "}
-                  <strong className={css({ color: "white" })}>
-                    Japan Abacus Federation
-                  </strong>
-                  . It represents a standardized progression from beginner (10th
-                  Kyu) to master level (10th Dan), used internationally for
-                  soroban proficiency assessment.
+              <div className={stack({ gap: '4' })}>
+                <p className={css({ color: 'gray.300', lineHeight: '1.6' })}>
+                  This ranking system is based on the official examination structure used by the{' '}
+                  <strong className={css({ color: 'white' })}>Japan Abacus Federation</strong>. It
+                  represents a standardized progression from beginner (10th Kyu) to master level
+                  (10th Dan), used internationally for soroban proficiency assessment.
                 </p>
-                <p className={css({ color: "gray.300", lineHeight: "1.6" })}>
-                  The system is designed to gradually increase in difficulty.
-                  Kyu levels progress from 2-digit calculations at 10th Kyu to
-                  10-digit calculations at 1st Kyu. Dan levels all require
-                  mastery of 30-digit calculations, with ranks awarded based on
+                <p className={css({ color: 'gray.300', lineHeight: '1.6' })}>
+                  The system is designed to gradually increase in difficulty. Kyu levels progress
+                  from 2-digit calculations at 10th Kyu to 10-digit calculations at 1st Kyu. Dan
+                  levels all require mastery of 30-digit calculations, with ranks awarded based on
                   exam scores.
                 </p>
               </div>
@@ -121,5 +113,5 @@ export default function LevelsPage() {
         </div>
       </div>
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/app/opengraph-image.tsx b/apps/web/src/app/opengraph-image.tsx
index 4554afcf..ddc94128 100644
--- a/apps/web/src/app/opengraph-image.tsx
+++ b/apps/web/src/app/opengraph-image.tsx
@@ -1,124 +1,116 @@
-import { ImageResponse } from "next/og";
-import { readFileSync } from "fs";
-import { join } from "path";
+import { ImageResponse } from 'next/og'
+import { readFileSync } from 'fs'
+import { join } from 'path'
 
 // Route segment config
-export const runtime = "nodejs";
-export const dynamic = "force-dynamic";
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
 
 // Image metadata
-export const alt = "Abaci.One - Interactive Soroban Learning Platform";
+export const alt = 'Abaci.One - Interactive Soroban Learning Platform'
 export const size = {
   width: 1200,
   height: 630,
-};
-export const contentType = "image/png";
+}
+export const contentType = 'image/png'
 
 // Extract just the abacus SVG content from the pre-generated og-image.svg
 // This SVG is generated by scripts/generateAbacusIcons.tsx using AbacusReact
 function getAbacusSVGContent(): string {
-  const svgPath = join(process.cwd(), "public", "og-image.svg");
-  const svgContent = readFileSync(svgPath, "utf-8");
+  const svgPath = join(process.cwd(), 'public', 'og-image.svg')
+  const svgContent = readFileSync(svgPath, 'utf-8')
 
   // Extract just the abacus <g> element (contains the AbacusReact output)
   const abacusMatch = svgContent.match(
-    /<!-- Left side - Abacus from @soroban\/abacus-react -->\s*<g[^>]*>([\s\S]*?)<\/g>/,
-  );
+    /<!-- Left side - Abacus from @soroban\/abacus-react -->\s*<g[^>]*>([\s\S]*?)<\/g>/
+  )
 
   if (!abacusMatch) {
-    throw new Error("Could not extract abacus content from og-image.svg");
+    throw new Error('Could not extract abacus content from og-image.svg')
   }
 
-  return abacusMatch[0]; // Return the full <g>...</g> block with AbacusReact output
+  return abacusMatch[0] // Return the full <g>...</g> block with AbacusReact output
 }
 
 // Image generation
 // Note: Uses pre-generated SVG from og-image.svg which is rendered by AbacusReact
 // This avoids importing react-dom/server in this file (Next.js restriction)
 export default async function Image() {
-  const abacusSVG = getAbacusSVGContent();
+  const abacusSVG = getAbacusSVGContent()
 
   return new ImageResponse(
-    (
+    <div
+      style={{
+        background: 'linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%)',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '80px',
+      }}
+    >
+      {/* Left side - Abacus from pre-generated og-image.svg (AbacusReact output) */}
       <div
         style={{
-          background: "linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%)",
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          padding: "80px",
+          display: 'flex',
+          width: '40%',
+        }}
+        dangerouslySetInnerHTML={{
+          __html: abacusSVG,
+        }}
+      />
+
+      {/* Right side - Text content */}
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: '55%',
+          gap: '30px',
         }}
       >
-        {/* Left side - Abacus from pre-generated og-image.svg (AbacusReact output) */}
-        <div
+        <h1
           style={{
-            display: "flex",
-            width: "40%",
-          }}
-          dangerouslySetInnerHTML={{
-            __html: abacusSVG,
-          }}
-        />
-
-        {/* Right side - Text content */}
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            width: "55%",
-            gap: "30px",
+            fontSize: '80px',
+            fontWeight: 'bold',
+            color: '#7c2d12',
+            margin: 0,
+            lineHeight: 1,
           }}
         >
-          <h1
-            style={{
-              fontSize: "80px",
-              fontWeight: "bold",
-              color: "#7c2d12",
-              margin: 0,
-              lineHeight: 1,
-            }}
-          >
-            Abaci.One
-          </h1>
+          Abaci.One
+        </h1>
 
-          <p
-            style={{
-              fontSize: "40px",
-              fontWeight: 600,
-              color: "#92400e",
-              margin: 0,
-              lineHeight: 1.2,
-            }}
-          >
-            Learn Soroban Through Play
-          </p>
+        <p
+          style={{
+            fontSize: '40px',
+            fontWeight: 600,
+            color: '#92400e',
+            margin: 0,
+            lineHeight: 1.2,
+          }}
+        >
+          Learn Soroban Through Play
+        </p>
 
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              gap: "15px",
-              fontSize: "32px",
-              color: "#78350f",
-            }}
-          >
-            <div style={{ display: "flex", alignItems: "center" }}>
-              • Interactive Games
-            </div>
-            <div style={{ display: "flex", alignItems: "center" }}>
-              • Tutorials
-            </div>
-            <div style={{ display: "flex", alignItems: "center" }}>
-              • Practice Tools
-            </div>
-          </div>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '15px',
+            fontSize: '32px',
+            color: '#78350f',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center' }}>• Interactive Games</div>
+          <div style={{ display: 'flex', alignItems: 'center' }}>• Tutorials</div>
+          <div style={{ display: 'flex', alignItems: 'center' }}>• Practice Tools</div>
         </div>
       </div>
-    ),
+    </div>,
     {
       ...size,
-    },
-  );
+    }
+  )
 }
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 88c92696..2d346159 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,102 +1,102 @@
-"use client";
+'use client'
 
-import Link from "next/link";
-import { useEffect, useState, useRef } from "react";
-import { useTranslations, useMessages } from "next-intl";
-import { AbacusReact, useAbacusConfig } from "@soroban/abacus-react";
-import { useHomeHero } from "@/contexts/HomeHeroContext";
-import { PageWithNav } from "@/components/PageWithNav";
-import { TutorialPlayer } from "@/components/tutorial/TutorialPlayer";
-import { getTutorialForEditor } from "@/utils/tutorialConverter";
-import { getAvailableGames } from "@/lib/arcade/game-registry";
-import { InteractiveFlashcards } from "@/components/InteractiveFlashcards";
-import { LevelSliderDisplay } from "@/components/LevelSliderDisplay";
-import { HomeBlogSection } from "@/components/HomeBlogSection";
-import { css } from "../../styled-system/css";
-import { container, grid, hstack, stack } from "../../styled-system/patterns";
+import Link from 'next/link'
+import { useEffect, useState, useRef } from 'react'
+import { useTranslations, useMessages } from 'next-intl'
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import { useHomeHero } from '@/contexts/HomeHeroContext'
+import { PageWithNav } from '@/components/PageWithNav'
+import { TutorialPlayer } from '@/components/tutorial/TutorialPlayer'
+import { getTutorialForEditor } from '@/utils/tutorialConverter'
+import { getAvailableGames } from '@/lib/arcade/game-registry'
+import { InteractiveFlashcards } from '@/components/InteractiveFlashcards'
+import { LevelSliderDisplay } from '@/components/LevelSliderDisplay'
+import { HomeBlogSection } from '@/components/HomeBlogSection'
+import { css } from '../../styled-system/css'
+import { container, grid, hstack, stack } from '../../styled-system/patterns'
 
 // Hero section placeholder - the actual abacus is rendered by MyAbacus component
 function HeroSection() {
-  const { subtitle, setIsHeroVisible, isSubtitleLoaded } = useHomeHero();
-  const heroRef = useRef<HTMLDivElement>(null);
+  const { subtitle, setIsHeroVisible, isSubtitleLoaded } = useHomeHero()
+  const heroRef = useRef<HTMLDivElement>(null)
 
   // Detect when hero scrolls out of view
   useEffect(() => {
-    if (!heroRef.current) return;
+    if (!heroRef.current) return
 
     const observer = new IntersectionObserver(
       ([entry]) => {
-        setIsHeroVisible(entry.intersectionRatio > 0.2);
+        setIsHeroVisible(entry.intersectionRatio > 0.2)
       },
       {
         threshold: [0, 0.2, 0.5, 1],
-      },
-    );
+      }
+    )
 
-    observer.observe(heroRef.current);
-    return () => observer.disconnect();
-  }, [setIsHeroVisible]);
+    observer.observe(heroRef.current)
+    return () => observer.disconnect()
+  }, [setIsHeroVisible])
 
   return (
     <div
       ref={heroRef}
       className={css({
-        height: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "space-between",
-        bg: "bg.canvas",
-        position: "relative",
-        overflow: "hidden",
-        px: "4",
-        py: "12",
+        height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        bg: 'bg.canvas',
+        position: 'relative',
+        overflow: 'hidden',
+        px: '4',
+        py: '12',
       })}
     >
       {/* Background pattern */}
       <div
         className={css({
-          position: "absolute",
+          position: 'absolute',
           inset: 0,
           opacity: 0.1,
           backgroundImage:
-            "radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)",
-          backgroundSize: "40px 40px",
+            'radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)',
+          backgroundSize: '40px 40px',
         })}
       />
 
       {/* Title and Subtitle */}
       <div
         className={css({
-          position: "relative",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: "2",
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '2',
           zIndex: 10,
         })}
       >
         <h1
           className={css({
-            fontSize: { base: "4xl", md: "6xl", lg: "7xl" },
-            fontWeight: "bold",
+            fontSize: { base: '4xl', md: '6xl', lg: '7xl' },
+            fontWeight: 'bold',
             background:
-              "linear-gradient(135deg, token(colors.amber.400) 0%, token(colors.amber.500) 50%, token(colors.amber.400) 100%)",
-            backgroundClip: "text",
-            color: "transparent",
+              'linear-gradient(135deg, token(colors.amber.400) 0%, token(colors.amber.500) 50%, token(colors.amber.400) 100%)',
+            backgroundClip: 'text',
+            color: 'transparent',
           })}
         >
           Abaci One
         </h1>
         <p
           className={css({
-            fontSize: { base: "xl", md: "2xl" },
-            fontWeight: "medium",
-            color: "accent.emphasis",
-            fontStyle: "italic",
-            marginBottom: "8",
+            fontSize: { base: 'xl', md: '2xl' },
+            fontWeight: 'medium',
+            color: 'accent.emphasis',
+            fontStyle: 'italic',
+            marginBottom: '8',
             opacity: isSubtitleLoaded ? 1 : 0,
-            transition: "opacity 0.5s ease-in-out",
+            transition: 'opacity 0.5s ease-in-out',
           })}
         >
           {subtitle.text}
@@ -109,14 +109,14 @@ function HeroSection() {
       {/* Scroll hint */}
       <div
         className={css({
-          position: "relative",
-          fontSize: "sm",
-          color: "text.muted",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: "2",
-          animation: "bounce 2s ease-in-out infinite",
+          position: 'relative',
+          fontSize: 'sm',
+          color: 'text.muted',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '2',
+          animation: 'bounce 2s ease-in-out infinite',
           zIndex: 10,
         })}
       >
@@ -142,7 +142,7 @@ function HeroSection() {
         }}
       />
     </div>
-  );
+  )
 }
 
 // Mini abacus that cycles through a sequence of values
@@ -151,51 +151,51 @@ function MiniAbacus({
   columns = 3,
   interval = 2500,
 }: {
-  values: number[];
-  columns?: number;
-  interval?: number;
+  values: number[]
+  columns?: number
+  interval?: number
 }) {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const appConfig = useAbacusConfig();
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const appConfig = useAbacusConfig()
 
   useEffect(() => {
-    if (values.length === 0) return;
+    if (values.length === 0) return
 
     const timer = setInterval(() => {
-      setCurrentIndex((prev) => (prev + 1) % values.length);
-    }, interval);
+      setCurrentIndex((prev) => (prev + 1) % values.length)
+    }, interval)
 
-    return () => clearInterval(timer);
-  }, [values, interval]);
+    return () => clearInterval(timer)
+  }, [values, interval])
 
   // Dark theme styles for the abacus
   const darkStyles = {
     columnPosts: {
-      fill: "rgba(255, 255, 255, 0.3)",
-      stroke: "rgba(255, 255, 255, 0.2)",
+      fill: 'rgba(255, 255, 255, 0.3)',
+      stroke: 'rgba(255, 255, 255, 0.2)',
       strokeWidth: 2,
     },
     reckoningBar: {
-      fill: "rgba(255, 255, 255, 0.4)",
-      stroke: "rgba(255, 255, 255, 0.25)",
+      fill: 'rgba(255, 255, 255, 0.4)',
+      stroke: 'rgba(255, 255, 255, 0.25)',
       strokeWidth: 3,
     },
-  };
+  }
 
   return (
     <div
       className={css({
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
       })}
     >
       <div
         className={css({
-          transform: "scale(0.75)",
-          transformOrigin: "center center",
+          transform: 'scale(0.75)',
+          transformOrigin: 'center center',
         })}
       >
         <AbacusReact
@@ -206,58 +206,56 @@ function MiniAbacus({
         />
       </div>
     </div>
-  );
+  )
 }
 
 export default function HomePage() {
-  const t = useTranslations("home");
-  const messages = useMessages() as any;
-  const [selectedSkillIndex, setSelectedSkillIndex] = useState(1); // Default to "Friends techniques"
-  const fullTutorial = getTutorialForEditor(messages.tutorial || {});
+  const t = useTranslations('home')
+  const messages = useMessages() as any
+  const [selectedSkillIndex, setSelectedSkillIndex] = useState(1) // Default to "Friends techniques"
+  const fullTutorial = getTutorialForEditor(messages.tutorial || {})
 
   // Create different tutorials for each skill level
   const skillTutorials = [
     // Skill 0: Read and set numbers (0-9999)
     {
       ...fullTutorial,
-      id: "read-numbers-demo",
-      title: t("skills.readNumbers.tutorialTitle"),
-      description: t("skills.readNumbers.tutorialDesc"),
-      steps: fullTutorial.steps.filter((step) => step.id.startsWith("basic-")),
+      id: 'read-numbers-demo',
+      title: t('skills.readNumbers.tutorialTitle'),
+      description: t('skills.readNumbers.tutorialDesc'),
+      steps: fullTutorial.steps.filter((step) => step.id.startsWith('basic-')),
     },
     // Skill 1: Friends techniques (5 = 2+3)
     {
       ...fullTutorial,
-      id: "friends-of-5-demo",
-      title: t("skills.friends.tutorialTitle"),
-      description: t("skills.friends.tutorialDesc"),
-      steps: fullTutorial.steps.filter((step) => step.id === "complement-2"),
+      id: 'friends-of-5-demo',
+      title: t('skills.friends.tutorialTitle'),
+      description: t('skills.friends.tutorialDesc'),
+      steps: fullTutorial.steps.filter((step) => step.id === 'complement-2'),
     },
     // Skill 2: Multiply & divide (12×34)
     {
       ...fullTutorial,
-      id: "multiply-demo",
-      title: t("skills.multiply.tutorialTitle"),
-      description: t("skills.multiply.tutorialDesc"),
-      steps: fullTutorial.steps
-        .filter((step) => step.id.includes("complement"))
-        .slice(0, 3),
+      id: 'multiply-demo',
+      title: t('skills.multiply.tutorialTitle'),
+      description: t('skills.multiply.tutorialDesc'),
+      steps: fullTutorial.steps.filter((step) => step.id.includes('complement')).slice(0, 3),
     },
     // Skill 3: Mental calculation (Speed math)
     {
       ...fullTutorial,
-      id: "mental-calc-demo",
-      title: t("skills.mental.tutorialTitle"),
-      description: t("skills.mental.tutorialDesc"),
+      id: 'mental-calc-demo',
+      title: t('skills.mental.tutorialTitle'),
+      description: t('skills.mental.tutorialDesc'),
       steps: fullTutorial.steps.slice(-3),
     },
-  ];
+  ]
 
-  const selectedTutorial = skillTutorials[selectedSkillIndex];
+  const selectedTutorial = skillTutorials[selectedSkillIndex]
 
   return (
     <PageWithNav>
-      <div className={css({ bg: "bg.canvas", minHeight: "100vh" })}>
+      <div className={css({ bg: 'bg.canvas', minHeight: '100vh' })}>
         {/* Hero Section - abacus rendered by MyAbacus in hero mode */}
         <HeroSection />
 
@@ -265,13 +263,13 @@ export default function HomePage() {
         <div
           data-section="home-two-column"
           className={css({
-            display: "grid",
-            gridTemplateColumns: { base: "1fr", md: "1fr 2fr" },
-            gap: { base: "8", md: "12" },
-            px: "4",
-            py: { base: "8", md: "12" },
-            maxW: { base: "7xl", md: "90%", xl: "1600px" },
-            mx: "auto",
+            display: 'grid',
+            gridTemplateColumns: { base: '1fr', md: '1fr 2fr' },
+            gap: { base: '8', md: '12' },
+            px: '4',
+            py: { base: '8', md: '12' },
+            maxW: { base: '7xl', md: '90%', xl: '1600px' },
+            mx: 'auto',
           })}
         >
           {/* Blog Section (Left Column) */}
@@ -280,35 +278,29 @@ export default function HomePage() {
           </div>
 
           {/* Learn by Doing Section (Right Column) */}
-          <section
-            data-section="learn-by-doing"
-            className={stack({ gap: "8" })}
-          >
-            <div
-              data-element="section-header"
-              className={css({ textAlign: "center" })}
-            >
+          <section data-section="learn-by-doing" className={stack({ gap: '8' })}>
+            <div data-element="section-header" className={css({ textAlign: 'center' })}>
               <h2
                 data-element="section-title"
                 className={css({
-                  fontSize: { base: "2xl", md: "3xl" },
-                  fontWeight: "bold",
-                  color: "text.primary",
-                  mb: "2",
+                  fontSize: { base: '2xl', md: '3xl' },
+                  fontWeight: 'bold',
+                  color: 'text.primary',
+                  mb: '2',
                 })}
               >
-                {t("learnByDoing.title")}
+                {t('learnByDoing.title')}
               </h2>
               <p
                 data-element="section-subtitle"
                 className={css({
-                  color: "text.secondary",
-                  fontSize: "md",
-                  maxW: "2xl",
-                  mx: "auto",
+                  color: 'text.secondary',
+                  fontSize: 'md',
+                  maxW: '2xl',
+                  mx: 'auto',
                 })}
               >
-                {t("learnByDoing.subtitle")}
+                {t('learnByDoing.subtitle')}
               </p>
             </div>
 
@@ -316,32 +308,32 @@ export default function HomePage() {
             <div
               data-element="tutorial-container"
               className={css({
-                bg: "bg.surface",
-                rounded: "xl",
-                p: "8",
-                border: "1px solid",
-                borderColor: "border.default",
-                shadow: "lg",
-                w: "100%",
-                maxW: "100%",
+                bg: 'bg.surface',
+                rounded: 'xl',
+                p: '8',
+                border: '1px solid',
+                borderColor: 'border.default',
+                shadow: 'lg',
+                w: '100%',
+                maxW: '100%',
               })}
             >
               <div
                 data-element="tutorial-flex-container"
                 className={css({
-                  display: "flex",
-                  flexDirection: { base: "column", xl: "row" },
-                  gap: "8",
-                  alignItems: { base: "center", xl: "flex-start" },
+                  display: 'flex',
+                  flexDirection: { base: 'column', xl: 'row' },
+                  gap: '8',
+                  alignItems: { base: 'center', xl: 'flex-start' },
                 })}
               >
                 {/* Tutorial on the left */}
                 <div
                   data-element="tutorial-player-wrapper"
                   className={css({
-                    flex: "1",
-                    w: "100%",
-                    maxW: "250px",
+                    flex: '1',
+                    w: '100%',
+                    maxW: '250px',
                   })}
                 >
                   <TutorialPlayer
@@ -361,67 +353,62 @@ export default function HomePage() {
                 <div
                   data-element="skills-grid-wrapper"
                   className={css({
-                    flex: "1",
-                    w: "100%",
-                    maxW: "100%",
+                    flex: '1',
+                    w: '100%',
+                    maxW: '100%',
                   })}
                 >
                   <h3
                     data-element="skills-grid-title"
                     className={css({
-                      fontSize: "2xl",
-                      fontWeight: "bold",
-                      color: "white",
-                      mb: "6",
+                      fontSize: '2xl',
+                      fontWeight: 'bold',
+                      color: 'white',
+                      mb: '6',
                     })}
                   >
-                    {t("whatYouLearn.title")}
+                    {t('whatYouLearn.title')}
                   </h3>
                   <div
                     data-element="skills-grid"
-                    className={grid({ columns: { base: 1, lg: 2 }, gap: "5" })}
+                    className={grid({ columns: { base: 1, lg: 2 }, gap: '5' })}
                   >
                     {[
                       {
-                        title: t("skills.readNumbers.title"),
-                        desc: t("skills.readNumbers.desc"),
-                        example: t("skills.readNumbers.example"),
-                        badge: t("skills.readNumbers.badge"),
+                        title: t('skills.readNumbers.title'),
+                        desc: t('skills.readNumbers.desc'),
+                        example: t('skills.readNumbers.example'),
+                        badge: t('skills.readNumbers.badge'),
                         values: [0, 1, 2, 3, 4, 5, 10, 50, 100, 500, 999],
                         columns: 3,
                       },
                       {
-                        title: t("skills.friends.title"),
-                        desc: t("skills.friends.desc"),
-                        example: t("skills.friends.example"),
-                        badge: t("skills.friends.badge"),
+                        title: t('skills.friends.title'),
+                        desc: t('skills.friends.desc'),
+                        example: t('skills.friends.example'),
+                        badge: t('skills.friends.badge'),
                         values: [2, 5, 3],
                         columns: 1,
                       },
                       {
-                        title: t("skills.multiply.title"),
-                        desc: t("skills.multiply.desc"),
-                        example: t("skills.multiply.example"),
-                        badge: t("skills.multiply.badge"),
+                        title: t('skills.multiply.title'),
+                        desc: t('skills.multiply.desc'),
+                        example: t('skills.multiply.example'),
+                        badge: t('skills.multiply.badge'),
                         values: [12, 24, 36, 48],
                         columns: 2,
                       },
                       {
-                        title: t("skills.mental.title"),
-                        desc: t("skills.mental.desc"),
-                        example: t("skills.mental.example"),
-                        badge: t("skills.mental.badge"),
+                        title: t('skills.mental.title'),
+                        desc: t('skills.mental.desc'),
+                        example: t('skills.mental.example'),
+                        badge: t('skills.mental.badge'),
                         values: [7, 14, 21, 28, 35],
                         columns: 2,
                       },
                     ].map((skill, i) => {
-                      const isSelected = i === selectedSkillIndex;
-                      const skillNames = [
-                        "read-numbers",
-                        "friends",
-                        "multiply",
-                        "mental",
-                      ];
+                      const isSelected = i === selectedSkillIndex
+                      const skillNames = ['read-numbers', 'friends', 'multiply', 'mental']
                       return (
                         <div
                           key={i}
@@ -430,80 +417,71 @@ export default function HomePage() {
                           data-selected={isSelected}
                           onClick={() => setSelectedSkillIndex(i)}
                           className={css({
-                            bg: isSelected ? "accent.subtle" : "bg.surface",
-                            borderRadius: "xl",
-                            p: { base: "4", lg: "5" },
-                            border: "1px solid",
-                            borderColor: isSelected
-                              ? "accent.default"
-                              : "border.default",
+                            bg: isSelected ? 'accent.subtle' : 'bg.surface',
+                            borderRadius: 'xl',
+                            p: { base: '4', lg: '5' },
+                            border: '1px solid',
+                            borderColor: isSelected ? 'accent.default' : 'border.default',
                             boxShadow: isSelected
-                              ? "0 6px 16px token(colors.accent.muted)"
-                              : "0 4px 12px token(colors.bg.muted)",
-                            transition: "all 0.2s",
-                            cursor: "pointer",
+                              ? '0 6px 16px token(colors.accent.muted)'
+                              : '0 4px 12px token(colors.bg.muted)',
+                            transition: 'all 0.2s',
+                            cursor: 'pointer',
                             _hover: {
-                              bg: isSelected
-                                ? "accent.muted"
-                                : "interactive.hover",
-                              borderColor: isSelected
-                                ? "accent.emphasis"
-                                : "border.emphasis",
-                              transform: "translateY(-2px)",
+                              bg: isSelected ? 'accent.muted' : 'interactive.hover',
+                              borderColor: isSelected ? 'accent.emphasis' : 'border.emphasis',
+                              transform: 'translateY(-2px)',
                               boxShadow: isSelected
-                                ? "0 8px 20px token(colors.accent.muted)"
-                                : "0 6px 16px token(colors.bg.muted)",
+                                ? '0 8px 20px token(colors.accent.muted)'
+                                : '0 6px 16px token(colors.bg.muted)',
                             },
                           })}
                         >
                           <div
                             data-element="skill-card-content"
                             className={hstack({
-                              gap: "3",
-                              alignItems: "flex-start",
+                              gap: '3',
+                              alignItems: 'flex-start',
                             })}
                           >
                             <div
                               data-element="skill-abacus-container"
                               className={css({
-                                fontSize: "3xl",
-                                width: { base: "80px", lg: "100px" },
-                                minHeight: { base: "90px", lg: "110px" },
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                textAlign: "center",
-                                bg: isSelected ? "accent.muted" : "bg.muted",
-                                borderRadius: "lg",
+                                fontSize: '3xl',
+                                width: { base: '80px', lg: '100px' },
+                                minHeight: { base: '90px', lg: '110px' },
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                textAlign: 'center',
+                                bg: isSelected ? 'accent.muted' : 'bg.muted',
+                                borderRadius: 'lg',
                               })}
                             >
-                              <MiniAbacus
-                                values={skill.values}
-                                columns={skill.columns}
-                              />
+                              <MiniAbacus values={skill.values} columns={skill.columns} />
                             </div>
                             <div
                               data-element="skill-info"
                               className={stack({
-                                gap: "2",
-                                flex: "1",
-                                minWidth: "0",
+                                gap: '2',
+                                flex: '1',
+                                minWidth: '0',
                               })}
                             >
                               <div
                                 data-element="skill-header"
                                 className={hstack({
-                                  gap: "2",
-                                  alignItems: "center",
-                                  flexWrap: "wrap",
+                                  gap: '2',
+                                  alignItems: 'center',
+                                  flexWrap: 'wrap',
                                 })}
                               >
                                 <div
                                   data-element="skill-title"
                                   className={css({
-                                    color: "text.primary",
-                                    fontSize: "md",
-                                    fontWeight: "bold",
+                                    color: 'text.primary',
+                                    fontSize: 'md',
+                                    fontWeight: 'bold',
                                   })}
                                 >
                                   {skill.title}
@@ -511,13 +489,13 @@ export default function HomePage() {
                                 <div
                                   data-element="skill-badge"
                                   className={css({
-                                    bg: "accent.muted",
-                                    color: "accent.emphasis",
-                                    fontSize: "2xs",
-                                    fontWeight: "semibold",
-                                    px: "2",
-                                    py: "0.5",
-                                    borderRadius: "md",
+                                    bg: 'accent.muted',
+                                    color: 'accent.emphasis',
+                                    fontSize: '2xs',
+                                    fontWeight: 'semibold',
+                                    px: '2',
+                                    py: '0.5',
+                                    borderRadius: 'md',
                                   })}
                                 >
                                   {skill.badge}
@@ -526,9 +504,9 @@ export default function HomePage() {
                               <div
                                 data-element="skill-description"
                                 className={css({
-                                  color: "text.secondary",
-                                  fontSize: "xs",
-                                  lineHeight: "1.5",
+                                  color: 'text.secondary',
+                                  fontSize: 'xs',
+                                  lineHeight: '1.5',
                                 })}
                               >
                                 {skill.desc}
@@ -536,16 +514,16 @@ export default function HomePage() {
                               <div
                                 data-element="skill-example"
                                 className={css({
-                                  color: "accent.emphasis",
-                                  fontSize: "xs",
-                                  fontFamily: "mono",
-                                  fontWeight: "semibold",
-                                  mt: "1",
-                                  bg: "accent.subtle",
-                                  px: "2",
-                                  py: "1",
-                                  borderRadius: "md",
-                                  w: "fit-content",
+                                  color: 'accent.emphasis',
+                                  fontSize: 'xs',
+                                  fontFamily: 'mono',
+                                  fontWeight: 'semibold',
+                                  mt: '1',
+                                  bg: 'accent.subtle',
+                                  px: '2',
+                                  py: '1',
+                                  borderRadius: 'md',
+                                  w: 'fit-content',
                                 })}
                               >
                                 {skill.example}
@@ -553,7 +531,7 @@ export default function HomePage() {
                             </div>
                           </div>
                         </div>
-                      );
+                      )
                     })}
                   </div>
                 </div>
@@ -563,36 +541,34 @@ export default function HomePage() {
         </div>
 
         {/* Main content container */}
-        <div className={container({ maxW: "7xl", px: "4", py: "12" })}>
+        <div className={container({ maxW: '7xl', px: '4', py: '12' })}>
           {/* Current Offerings Section */}
-          <section className={stack({ gap: "6", mb: "16" })}>
-            <div className={css({ textAlign: "center" })}>
+          <section className={stack({ gap: '6', mb: '16' })}>
+            <div className={css({ textAlign: 'center' })}>
               <h2
                 className={css({
-                  fontSize: { base: "2xl", md: "3xl" },
-                  fontWeight: "bold",
-                  color: "text.primary",
-                  mb: "2",
+                  fontSize: { base: '2xl', md: '3xl' },
+                  fontWeight: 'bold',
+                  color: 'text.primary',
+                  mb: '2',
                 })}
               >
-                {t("arcade.title")}
+                {t('arcade.title')}
               </h2>
-              <p className={css({ color: "text.secondary", fontSize: "md" })}>
-                {t("arcade.subtitle")}
+              <p className={css({ color: 'text.secondary', fontSize: 'md' })}>
+                {t('arcade.subtitle')}
               </p>
             </div>
 
-            <div
-              className={grid({ columns: { base: 1, sm: 2, lg: 4 }, gap: "5" })}
-            >
+            <div className={grid({ columns: { base: 1, sm: 2, lg: 4 }, gap: '5' })}>
               {getAvailableGames().map((game) => {
                 const playersText =
                   game.manifest.maxPlayers === 1
-                    ? t("arcade.soloChallenge")
-                    : t("arcade.playersCount", {
+                    ? t('arcade.soloChallenge')
+                    : t('arcade.playersCount', {
                         min: 1,
                         max: game.manifest.maxPlayers,
-                      });
+                      })
                 return (
                   <GameCard
                     key={game.manifest.name}
@@ -604,28 +580,26 @@ export default function HomePage() {
                     gradient={game.manifest.gradient}
                     href="/games"
                   />
-                );
+                )
               })}
             </div>
           </section>
 
           {/* Progression Visualization */}
-          <section
-            className={stack({ gap: "6", mb: "16", overflow: "hidden" })}
-          >
-            <div className={css({ textAlign: "center" })}>
+          <section className={stack({ gap: '6', mb: '16', overflow: 'hidden' })}>
+            <div className={css({ textAlign: 'center' })}>
               <h2
                 className={css({
-                  fontSize: { base: "2xl", md: "3xl" },
-                  fontWeight: "bold",
-                  color: "text.primary",
-                  mb: "2",
+                  fontSize: { base: '2xl', md: '3xl' },
+                  fontWeight: 'bold',
+                  color: 'text.primary',
+                  mb: '2',
                 })}
               >
-                {t("journey.title")}
+                {t('journey.title')}
               </h2>
-              <p className={css({ color: "text.secondary", fontSize: "md" })}>
-                {t("journey.subtitle")}
+              <p className={css({ color: 'text.secondary', fontSize: 'md' })}>
+                {t('journey.subtitle')}
               </p>
             </div>
 
@@ -633,45 +607,45 @@ export default function HomePage() {
           </section>
 
           {/* Flashcard Generator Section */}
-          <section className={stack({ gap: "8", mb: "16" })}>
-            <div className={css({ textAlign: "center" })}>
+          <section className={stack({ gap: '8', mb: '16' })}>
+            <div className={css({ textAlign: 'center' })}>
               <h2
                 className={css({
-                  fontSize: { base: "2xl", md: "3xl" },
-                  fontWeight: "bold",
-                  color: "white",
-                  mb: "2",
+                  fontSize: { base: '2xl', md: '3xl' },
+                  fontWeight: 'bold',
+                  color: 'white',
+                  mb: '2',
                 })}
               >
-                {t("flashcards.title")}
+                {t('flashcards.title')}
               </h2>
               <p
                 className={css({
-                  color: "gray.400",
-                  fontSize: "md",
-                  maxW: "2xl",
-                  mx: "auto",
+                  color: 'gray.400',
+                  fontSize: 'md',
+                  maxW: '2xl',
+                  mx: 'auto',
                 })}
               >
-                {t("flashcards.subtitle")}
+                {t('flashcards.subtitle')}
               </p>
             </div>
 
             {/* Combined interactive display and CTA */}
             <div
               className={css({
-                bg: "rgba(0, 0, 0, 0.4)",
-                rounded: "xl",
-                p: { base: "6", md: "8" },
-                border: "1px solid",
-                borderColor: "gray.700",
-                shadow: "lg",
-                maxW: "1200px",
-                mx: "auto",
+                bg: 'rgba(0, 0, 0, 0.4)',
+                rounded: 'xl',
+                p: { base: '6', md: '8' },
+                border: '1px solid',
+                borderColor: 'gray.700',
+                shadow: 'lg',
+                maxW: '1200px',
+                mx: 'auto',
               })}
             >
               {/* Interactive Flashcards Display */}
-              <div className={css({ mb: "8" })}>
+              <div className={css({ mb: '8' })}>
                 <InteractiveFlashcards />
               </div>
 
@@ -679,77 +653,73 @@ export default function HomePage() {
               <div
                 className={grid({
                   columns: { base: 1, md: 3 },
-                  gap: "4",
-                  mb: "6",
+                  gap: '4',
+                  mb: '6',
                 })}
               >
                 {[
                   {
-                    icon: t("flashcards.features.formats.icon"),
-                    title: t("flashcards.features.formats.title"),
-                    desc: t("flashcards.features.formats.desc"),
+                    icon: t('flashcards.features.formats.icon'),
+                    title: t('flashcards.features.formats.title'),
+                    desc: t('flashcards.features.formats.desc'),
                   },
                   {
-                    icon: t("flashcards.features.customizable.icon"),
-                    title: t("flashcards.features.customizable.title"),
-                    desc: t("flashcards.features.customizable.desc"),
+                    icon: t('flashcards.features.customizable.icon'),
+                    title: t('flashcards.features.customizable.title'),
+                    desc: t('flashcards.features.customizable.desc'),
                   },
                   {
-                    icon: t("flashcards.features.paperSizes.icon"),
-                    title: t("flashcards.features.paperSizes.title"),
-                    desc: t("flashcards.features.paperSizes.desc"),
+                    icon: t('flashcards.features.paperSizes.icon'),
+                    title: t('flashcards.features.paperSizes.title'),
+                    desc: t('flashcards.features.paperSizes.desc'),
                   },
                 ].map((feature, i) => (
                   <div
                     key={i}
                     className={css({
-                      textAlign: "center",
-                      p: "4",
-                      rounded: "lg",
-                      bg: "rgba(255, 255, 255, 0.05)",
+                      textAlign: 'center',
+                      p: '4',
+                      rounded: 'lg',
+                      bg: 'rgba(255, 255, 255, 0.05)',
                     })}
                   >
-                    <div className={css({ fontSize: "2xl", mb: "2" })}>
-                      {feature.icon}
-                    </div>
+                    <div className={css({ fontSize: '2xl', mb: '2' })}>{feature.icon}</div>
                     <div
                       className={css({
-                        fontSize: "sm",
-                        fontWeight: "semibold",
-                        color: "white",
-                        mb: "1",
+                        fontSize: 'sm',
+                        fontWeight: 'semibold',
+                        color: 'white',
+                        mb: '1',
                       })}
                     >
                       {feature.title}
                     </div>
-                    <div className={css({ fontSize: "xs", color: "gray.400" })}>
-                      {feature.desc}
-                    </div>
+                    <div className={css({ fontSize: 'xs', color: 'gray.400' })}>{feature.desc}</div>
                   </div>
                 ))}
               </div>
 
               {/* CTA Button */}
-              <div className={css({ textAlign: "center" })}>
+              <div className={css({ textAlign: 'center' })}>
                 <Link
                   href="/create"
                   className={css({
-                    display: "inline-flex",
-                    alignItems: "center",
-                    gap: "2",
-                    bg: "blue.600",
-                    color: "white",
-                    px: "6",
-                    py: "3",
-                    rounded: "lg",
-                    fontWeight: "semibold",
-                    transition: "all 0.2s",
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: '2',
+                    bg: 'blue.600',
+                    color: 'white',
+                    px: '6',
+                    py: '3',
+                    rounded: 'lg',
+                    fontWeight: 'semibold',
+                    transition: 'all 0.2s',
                     _hover: {
-                      bg: "blue.500",
+                      bg: 'blue.500',
                     },
                   })}
                 >
-                  <span>{t("flashcards.cta")}</span>
+                  <span>{t('flashcards.cta')}</span>
                   <span>→</span>
                 </Link>
               </div>
@@ -758,7 +728,7 @@ export default function HomePage() {
         </div>
       </div>
     </PageWithNav>
-  );
+  )
 }
 
 function GameCard({
@@ -770,31 +740,31 @@ function GameCard({
   gradient,
   href,
 }: {
-  icon: string;
-  title: string;
-  description: string;
-  players: string;
-  tags: string[];
-  gradient: string;
-  href: string;
+  icon: string
+  title: string
+  description: string
+  players: string
+  tags: string[]
+  gradient: string
+  href: string
 }) {
   return (
-    <Link href={href} style={{ height: "100%", display: "block" }}>
+    <Link href={href} style={{ height: '100%', display: 'block' }}>
       <div
         className={css({
-          rounded: "xl",
-          p: "6",
-          shadow: "lg",
-          transition: "all 0.3s ease",
-          cursor: "pointer",
-          position: "relative",
-          overflow: "hidden",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
+          rounded: 'xl',
+          p: '6',
+          shadow: 'lg',
+          transition: 'all 0.3s ease',
+          cursor: 'pointer',
+          position: 'relative',
+          overflow: 'hidden',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
           _hover: {
-            transform: "translateY(-6px) scale(1.02)",
-            shadow: "0 25px 50px rgba(0, 0, 0, 0.3)",
+            transform: 'translateY(-6px) scale(1.02)',
+            shadow: '0 25px 50px rgba(0, 0, 0, 0.3)',
           },
         })}
       >
@@ -802,7 +772,7 @@ function GameCard({
         <div
           style={{ background: gradient }}
           className={css({
-            position: "absolute",
+            position: 'absolute',
             inset: 0,
             zIndex: 0,
           })}
@@ -810,76 +780,75 @@ function GameCard({
         {/* Dark gradient overlay for text readability */}
         <div
           className={css({
-            position: "absolute",
+            position: 'absolute',
             inset: 0,
-            background:
-              "linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%)",
+            background: 'linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%)',
             zIndex: 1,
           })}
         />
         {/* Content */}
         <div
           className={css({
-            position: "relative",
+            position: 'relative',
             zIndex: 2,
             flex: 1,
-            display: "flex",
-            flexDirection: "column",
+            display: 'flex',
+            flexDirection: 'column',
           })}
         >
           <div
             className={css({
-              fontSize: "3xl",
-              mb: "3",
-              textShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
+              fontSize: '3xl',
+              mb: '3',
+              textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)',
             })}
           >
             {icon}
           </div>
           <h3
             className={css({
-              fontSize: "lg",
-              fontWeight: "bold",
-              color: "text.inverse",
-              mb: "2",
-              textShadow: "0 2px 8px rgba(0, 0, 0, 0.5)",
+              fontSize: 'lg',
+              fontWeight: 'bold',
+              color: 'text.inverse',
+              mb: '2',
+              textShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
             })}
           >
             {title}
           </h3>
           <p
             className={css({
-              fontSize: "sm",
-              color: "text.inverse",
-              mb: "2",
-              textShadow: "0 1px 4px rgba(0, 0, 0, 0.4)",
+              fontSize: 'sm',
+              color: 'text.inverse',
+              mb: '2',
+              textShadow: '0 1px 4px rgba(0, 0, 0, 0.4)',
             })}
           >
             {description}
           </p>
           <p
             className={css({
-              fontSize: "xs",
-              color: "text.inverse",
-              mb: "3",
-              textShadow: "0 1px 4px rgba(0, 0, 0, 0.4)",
+              fontSize: 'xs',
+              color: 'text.inverse',
+              mb: '3',
+              textShadow: '0 1px 4px rgba(0, 0, 0, 0.4)',
             })}
           >
             {players}
           </p>
-          <div className={hstack({ gap: "2", flexWrap: "wrap" })}>
+          <div className={hstack({ gap: '2', flexWrap: 'wrap' })}>
             {tags.map((tag) => (
               <span
                 key={tag}
                 className={css({
-                  fontSize: "xs",
-                  px: "2",
-                  py: "1",
-                  bg: "rgba(255, 255, 255, 0.2)",
-                  color: "text.inverse",
-                  rounded: "full",
-                  fontWeight: "semibold",
-                  textShadow: "0 1px 3px rgba(0, 0, 0, 0.4)",
+                  fontSize: 'xs',
+                  px: '2',
+                  py: '1',
+                  bg: 'rgba(255, 255, 255, 0.2)',
+                  color: 'text.inverse',
+                  rounded: 'full',
+                  fontWeight: 'semibold',
+                  textShadow: '0 1px 3px rgba(0, 0, 0, 0.4)',
                 })}
               >
                 {tag}
@@ -889,7 +858,7 @@ function GameCard({
         </div>
       </div>
     </Link>
-  );
+  )
 }
 
 function FeaturePanel({
@@ -900,49 +869,44 @@ function FeaturePanel({
   ctaText,
   ctaHref,
 }: {
-  icon: string;
-  title: string;
-  features: string[];
-  accentColor: "purple" | "blue";
-  ctaText?: string;
-  ctaHref?: string;
+  icon: string
+  title: string
+  features: string[]
+  accentColor: 'purple' | 'blue'
+  ctaText?: string
+  ctaHref?: string
 }) {
-  const borderColor =
-    accentColor === "purple" ? "purple.500/30" : "blue.500/30";
-  const bgColor = accentColor === "purple" ? "purple.500/10" : "blue.500/10";
-  const hoverBg = accentColor === "purple" ? "purple.500/20" : "blue.500/20";
+  const borderColor = accentColor === 'purple' ? 'purple.500/30' : 'blue.500/30'
+  const bgColor = accentColor === 'purple' ? 'purple.500/10' : 'blue.500/10'
+  const hoverBg = accentColor === 'purple' ? 'purple.500/20' : 'blue.500/20'
 
   return (
     <div
       className={css({
-        bg: "rgba(0, 0, 0, 0.4)",
-        rounded: "xl",
-        p: "8",
-        border: "2px solid",
+        bg: 'rgba(0, 0, 0, 0.4)',
+        rounded: 'xl',
+        p: '8',
+        border: '2px solid',
         borderColor,
       })}
     >
-      <div className={hstack({ gap: "3", mb: "4" })}>
-        <span className={css({ fontSize: "3xl" })}>{icon}</span>
+      <div className={hstack({ gap: '3', mb: '4' })}>
+        <span className={css({ fontSize: '3xl' })}>{icon}</span>
         <h2
           className={css({
-            fontSize: "2xl",
-            fontWeight: "bold",
-            color: "white",
+            fontSize: '2xl',
+            fontWeight: 'bold',
+            color: 'white',
           })}
         >
           {title}
         </h2>
       </div>
-      <div className={stack({ gap: "3", mb: ctaText ? "6" : "0" })}>
+      <div className={stack({ gap: '3', mb: ctaText ? '6' : '0' })}>
         {features.map((feature, i) => (
-          <div key={i} className={hstack({ gap: "3" })}>
-            <span className={css({ color: "yellow.400", fontSize: "lg" })}>
-              ✓
-            </span>
-            <span className={css({ color: "gray.300", fontSize: "sm" })}>
-              {feature}
-            </span>
+          <div key={i} className={hstack({ gap: '3' })}>
+            <span className={css({ color: 'yellow.400', fontSize: 'lg' })}>✓</span>
+            <span className={css({ color: 'gray.300', fontSize: 'sm' })}>{feature}</span>
           </div>
         ))}
       </div>
@@ -950,23 +914,23 @@ function FeaturePanel({
         <Link
           href={ctaHref}
           className={css({
-            display: "block",
-            textAlign: "center",
-            py: "3",
-            px: "6",
+            display: 'block',
+            textAlign: 'center',
+            py: '3',
+            px: '6',
             bg: bgColor,
-            color: "white",
-            fontWeight: "bold",
-            rounded: "lg",
-            border: "2px solid",
+            color: 'white',
+            fontWeight: 'bold',
+            rounded: 'lg',
+            border: '2px solid',
             borderColor,
             _hover: { bg: hoverBg },
-            transition: "all 0.2s ease",
+            transition: 'all 0.2s ease',
           })}
         >
           {ctaText}
         </Link>
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/robots.ts b/apps/web/src/app/robots.ts
index 20df273a..e83627de 100644
--- a/apps/web/src/app/robots.ts
+++ b/apps/web/src/app/robots.ts
@@ -1,12 +1,12 @@
-import type { MetadataRoute } from "next";
+import type { MetadataRoute } from 'next'
 
 export default function robots(): MetadataRoute.Robots {
   return {
     rules: {
-      userAgent: "*",
-      allow: "/",
-      disallow: ["/api/", "/test/", "/_next/"],
+      userAgent: '*',
+      allow: '/',
+      disallow: ['/api/', '/test/', '/_next/'],
     },
-    sitemap: "https://abaci.one/sitemap.xml",
-  };
+    sitemap: 'https://abaci.one/sitemap.xml',
+  }
 }
diff --git a/apps/web/src/app/sitemap.ts b/apps/web/src/app/sitemap.ts
index bae5b92d..f7d43084 100644
--- a/apps/web/src/app/sitemap.ts
+++ b/apps/web/src/app/sitemap.ts
@@ -1,39 +1,37 @@
-import type { MetadataRoute } from "next";
+import type { MetadataRoute } from 'next'
 
 export default function sitemap(): MetadataRoute.Sitemap {
-  const baseUrl = "https://abaci.one";
+  const baseUrl = 'https://abaci.one'
 
   // Main pages
-  const routes = ["", "/arcade", "/create", "/guide", "/about"].map(
-    (route) => ({
-      url: `${baseUrl}${route}`,
-      lastModified: new Date(),
-      changeFrequency: "weekly" as const,
-      priority: route === "" ? 1 : 0.8,
-    }),
-  );
+  const routes = ['', '/arcade', '/create', '/guide', '/about'].map((route) => ({
+    url: `${baseUrl}${route}`,
+    lastModified: new Date(),
+    changeFrequency: 'weekly' as const,
+    priority: route === '' ? 1 : 0.8,
+  }))
 
   // Arcade games
   const games = [
-    "/arcade/rithmomachia",
-    "/arcade/complement-race",
-    "/arcade/matching",
-    "/arcade/memory-quiz",
-    "/arcade/card-sorting",
+    '/arcade/rithmomachia',
+    '/arcade/complement-race',
+    '/arcade/matching',
+    '/arcade/memory-quiz',
+    '/arcade/card-sorting',
   ].map((route) => ({
     url: `${baseUrl}${route}`,
     lastModified: new Date(),
-    changeFrequency: "monthly" as const,
+    changeFrequency: 'monthly' as const,
     priority: 0.6,
-  }));
+  }))
 
   // Guide pages
-  const guides = ["/arcade/rithmomachia/guide"].map((route) => ({
+  const guides = ['/arcade/rithmomachia/guide'].map((route) => ({
     url: `${baseUrl}${route}`,
     lastModified: new Date(),
-    changeFrequency: "monthly" as const,
+    changeFrequency: 'monthly' as const,
     priority: 0.5,
-  }));
+  }))
 
-  return [...routes, ...games, ...guides];
+  return [...routes, ...games, ...guides]
 }
diff --git a/apps/web/src/app/test-arcade/page.tsx b/apps/web/src/app/test-arcade/page.tsx
index a93ab709..65352171 100644
--- a/apps/web/src/app/test-arcade/page.tsx
+++ b/apps/web/src/app/test-arcade/page.tsx
@@ -1,133 +1,130 @@
-"use client";
+'use client'
 
-import { useEffect, useState } from "react";
-import { io, type Socket } from "socket.io-client";
+import { useEffect, useState } from 'react'
+import { io, type Socket } from 'socket.io-client'
 
 export default function TestArcadePage() {
-  const [socket, setSocket] = useState<Socket | null>(null);
-  const [connected, setConnected] = useState(false);
-  const [userId] = useState("evybhb5o0v4t76e7qnrx3x1t"); // Use real user ID from DB
-  const [logs, setLogs] = useState<string[]>([]);
+  const [socket, setSocket] = useState<Socket | null>(null)
+  const [connected, setConnected] = useState(false)
+  const [userId] = useState('evybhb5o0v4t76e7qnrx3x1t') // Use real user ID from DB
+  const [logs, setLogs] = useState<string[]>([])
 
   const addLog = (message: string) => {
-    setLogs((prev) => [
-      ...prev,
-      `${new Date().toLocaleTimeString()}: ${message}`,
-    ]);
-  };
+    setLogs((prev) => [...prev, `${new Date().toLocaleTimeString()}: ${message}`])
+  }
 
   useEffect(() => {
     // Initialize socket connection
     const socketInstance = io({
-      path: "/api/socket",
-    });
+      path: '/api/socket',
+    })
 
-    socketInstance.on("connect", () => {
-      setConnected(true);
-      addLog("✅ Connected to Socket.IO");
-    });
+    socketInstance.on('connect', () => {
+      setConnected(true)
+      addLog('✅ Connected to Socket.IO')
+    })
 
-    socketInstance.on("disconnect", () => {
-      setConnected(false);
-      addLog("❌ Disconnected from Socket.IO");
-    });
+    socketInstance.on('disconnect', () => {
+      setConnected(false)
+      addLog('❌ Disconnected from Socket.IO')
+    })
 
-    socketInstance.on("session-state", (data) => {
-      addLog(`📦 Received session state: ${JSON.stringify(data, null, 2)}`);
-    });
+    socketInstance.on('session-state', (data) => {
+      addLog(`📦 Received session state: ${JSON.stringify(data, null, 2)}`)
+    })
 
-    socketInstance.on("no-active-session", () => {
-      addLog("ℹ️ No active session found");
-    });
+    socketInstance.on('no-active-session', () => {
+      addLog('ℹ️ No active session found')
+    })
 
-    socketInstance.on("move-accepted", (data) => {
-      addLog(`✅ Move accepted: ${JSON.stringify(data, null, 2)}`);
-    });
+    socketInstance.on('move-accepted', (data) => {
+      addLog(`✅ Move accepted: ${JSON.stringify(data, null, 2)}`)
+    })
 
-    socketInstance.on("move-rejected", (data) => {
-      addLog(`❌ Move rejected: ${JSON.stringify(data, null, 2)}`);
-    });
+    socketInstance.on('move-rejected', (data) => {
+      addLog(`❌ Move rejected: ${JSON.stringify(data, null, 2)}`)
+    })
 
-    socketInstance.on("session-ended", () => {
-      addLog("🚪 Session ended");
-    });
+    socketInstance.on('session-ended', () => {
+      addLog('🚪 Session ended')
+    })
 
-    socketInstance.on("session-error", (data) => {
-      addLog(`⚠️ Session error: ${data.error}`);
-    });
+    socketInstance.on('session-error', (data) => {
+      addLog(`⚠️ Session error: ${data.error}`)
+    })
 
-    setSocket(socketInstance);
+    setSocket(socketInstance)
 
     return () => {
-      socketInstance.disconnect();
-    };
-  }, [addLog]);
+      socketInstance.disconnect()
+    }
+  }, [addLog])
 
   const joinSession = () => {
-    if (!socket) return;
-    addLog(`Joining session as user: ${userId}`);
-    socket.emit("join-arcade-session", { userId });
-  };
+    if (!socket) return
+    addLog(`Joining session as user: ${userId}`)
+    socket.emit('join-arcade-session', { userId })
+  }
 
   const startGame = () => {
-    if (!socket) return;
+    if (!socket) return
     const move = {
-      type: "START_GAME",
+      type: 'START_GAME',
       playerId: userId,
       timestamp: Date.now(),
       data: {
         activePlayers: [1],
       },
-    };
-    addLog(`Sending START_GAME move: ${JSON.stringify(move)}`);
-    socket.emit("game-move", { userId, move });
-  };
+    }
+    addLog(`Sending START_GAME move: ${JSON.stringify(move)}`)
+    socket.emit('game-move', { userId, move })
+  }
 
   const testFlipCard = () => {
-    if (!socket) return;
+    if (!socket) return
     const move = {
-      type: "FLIP_CARD",
+      type: 'FLIP_CARD',
       playerId: userId,
       timestamp: Date.now(),
       data: {
-        cardId: "test-card-1",
+        cardId: 'test-card-1',
       },
-    };
-    addLog(`Sending move: ${JSON.stringify(move)}`);
-    socket.emit("game-move", { userId, move });
-  };
+    }
+    addLog(`Sending move: ${JSON.stringify(move)}`)
+    socket.emit('game-move', { userId, move })
+  }
 
   const createSession = async () => {
-    addLog("Creating test session via API...");
+    addLog('Creating test session via API...')
 
     // First, delete any existing session
-    addLog("Deleting any existing session first...");
+    addLog('Deleting any existing session first...')
     try {
       await fetch(`/api/arcade-session?userId=${userId}`, {
-        method: "DELETE",
-      });
-      addLog("✅ Old session deleted (if existed)");
+        method: 'DELETE',
+      })
+      addLog('✅ Old session deleted (if existed)')
     } catch (error) {
-      addLog(`⚠️ Could not delete old session: ${error}`);
+      addLog(`⚠️ Could not delete old session: ${error}`)
     }
 
     // Now create new session
     try {
-      const response = await fetch("/api/arcade-session", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+      const response = await fetch('/api/arcade-session', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           userId,
-          gameName: "matching",
-          gameUrl: "/arcade/matching",
+          gameName: 'matching',
+          gameUrl: '/arcade/matching',
           initialState: {
             cards: [],
             gameCards: [],
             flippedCards: [],
-            gameType: "abacus-numeral",
+            gameType: 'abacus-numeral',
             difficulty: 6,
             turnTimer: 30,
-            gamePhase: "setup",
+            gamePhase: 'setup',
             currentPlayer: 1,
             matchedPairs: 0,
             totalPairs: 6,
@@ -146,77 +143,74 @@ export default function TestArcadePage() {
           },
           activePlayers: [1],
         }),
-      });
-      const data = await response.json();
+      })
+      const data = await response.json()
       if (response.ok) {
-        addLog(`✅ Session created successfully`);
+        addLog(`✅ Session created successfully`)
       } else {
-        addLog(`❌ Failed to create session: ${data.error}`);
+        addLog(`❌ Failed to create session: ${data.error}`)
       }
     } catch (error) {
-      addLog(`❌ Error creating session: ${error}`);
+      addLog(`❌ Error creating session: ${error}`)
     }
-  };
+  }
 
   const exitSession = () => {
-    if (!socket) return;
-    addLog(`Exiting session for user: ${userId}`);
-    socket.emit("exit-arcade-session", { userId });
-  };
+    if (!socket) return
+    addLog(`Exiting session for user: ${userId}`)
+    socket.emit('exit-arcade-session', { userId })
+  }
 
   return (
-    <div style={{ padding: "20px", fontFamily: "monospace" }}>
+    <div style={{ padding: '20px', fontFamily: 'monospace' }}>
       <h1>Arcade Session Test</h1>
 
       <div
         style={{
-          marginBottom: "20px",
-          padding: "10px",
-          backgroundColor: "#fff3cd",
-          borderRadius: "4px",
+          marginBottom: '20px',
+          padding: '10px',
+          backgroundColor: '#fff3cd',
+          borderRadius: '4px',
         }}
       >
         <strong>Test Cross-Tab Sync:</strong>
-        <ol style={{ marginLeft: "20px", marginTop: "10px" }}>
+        <ol style={{ marginLeft: '20px', marginTop: '10px' }}>
           <li>Open this page in TWO browser tabs</li>
           <li>In Tab 1: Click buttons 1 → 2</li>
           <li>In Tab 2: Click button 2 only (session already exists)</li>
           <li>In Tab 1: Click button 3 (Start Game)</li>
-          <li>
-            Watch Tab 2's event log - it should show "✅ Move accepted"
-            instantly!
-          </li>
+          <li>Watch Tab 2's event log - it should show "✅ Move accepted" instantly!</li>
         </ol>
       </div>
 
-      <div style={{ marginBottom: "20px" }}>
-        <strong>Connection Status:</strong>{" "}
-        <span style={{ color: connected ? "green" : "red" }}>
-          {connected ? "🟢 Connected" : "🔴 Disconnected"}
+      <div style={{ marginBottom: '20px' }}>
+        <strong>Connection Status:</strong>{' '}
+        <span style={{ color: connected ? 'green' : 'red' }}>
+          {connected ? '🟢 Connected' : '🔴 Disconnected'}
         </span>
       </div>
 
-      <div style={{ marginBottom: "20px" }}>
+      <div style={{ marginBottom: '20px' }}>
         <strong>User ID:</strong> {userId}
       </div>
 
       <div
         style={{
-          marginBottom: "20px",
-          display: "flex",
-          gap: "10px",
-          flexWrap: "wrap",
+          marginBottom: '20px',
+          display: 'flex',
+          gap: '10px',
+          flexWrap: 'wrap',
         }}
       >
         <button
           onClick={createSession}
           style={{
-            padding: "10px 20px",
-            backgroundColor: "#6f42c1",
-            color: "white",
-            border: "none",
-            borderRadius: "4px",
-            cursor: "pointer",
+            padding: '10px 20px',
+            backgroundColor: '#6f42c1',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
           }}
         >
           1. Create Session
@@ -226,12 +220,12 @@ export default function TestArcadePage() {
           onClick={joinSession}
           disabled={!connected}
           style={{
-            padding: "10px 20px",
-            backgroundColor: connected ? "#007bff" : "#ccc",
-            color: "white",
-            border: "none",
-            borderRadius: "4px",
-            cursor: connected ? "pointer" : "not-allowed",
+            padding: '10px 20px',
+            backgroundColor: connected ? '#007bff' : '#ccc',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: connected ? 'pointer' : 'not-allowed',
           }}
         >
           2. Join Session
@@ -241,12 +235,12 @@ export default function TestArcadePage() {
           onClick={startGame}
           disabled={!connected}
           style={{
-            padding: "10px 20px",
-            backgroundColor: connected ? "#17a2b8" : "#ccc",
-            color: "white",
-            border: "none",
-            borderRadius: "4px",
-            cursor: connected ? "pointer" : "not-allowed",
+            padding: '10px 20px',
+            backgroundColor: connected ? '#17a2b8' : '#ccc',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: connected ? 'pointer' : 'not-allowed',
           }}
         >
           3. Start Game (broadcasts!)
@@ -256,12 +250,12 @@ export default function TestArcadePage() {
           onClick={testFlipCard}
           disabled={!connected}
           style={{
-            padding: "10px 20px",
-            backgroundColor: connected ? "#28a745" : "#ccc",
-            color: "white",
-            border: "none",
-            borderRadius: "4px",
-            cursor: connected ? "pointer" : "not-allowed",
+            padding: '10px 20px',
+            backgroundColor: connected ? '#28a745' : '#ccc',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: connected ? 'pointer' : 'not-allowed',
           }}
         >
           4. Test Flip Card
@@ -271,12 +265,12 @@ export default function TestArcadePage() {
           onClick={exitSession}
           disabled={!connected}
           style={{
-            padding: "10px 20px",
-            backgroundColor: connected ? "#dc3545" : "#ccc",
-            color: "white",
-            border: "none",
-            borderRadius: "4px",
-            cursor: connected ? "pointer" : "not-allowed",
+            padding: '10px 20px',
+            backgroundColor: connected ? '#dc3545' : '#ccc',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: connected ? 'pointer' : 'not-allowed',
           }}
         >
           5. Exit Session
@@ -285,26 +279,26 @@ export default function TestArcadePage() {
 
       <div
         style={{
-          marginTop: "20px",
-          padding: "10px",
-          backgroundColor: "#f5f5f5",
-          borderRadius: "4px",
-          maxHeight: "400px",
-          overflow: "auto",
+          marginTop: '20px',
+          padding: '10px',
+          backgroundColor: '#f5f5f5',
+          borderRadius: '4px',
+          maxHeight: '400px',
+          overflow: 'auto',
         }}
       >
         <h3>Event Log:</h3>
         {logs.length === 0 ? (
-          <p style={{ color: "#666" }}>No events yet...</p>
+          <p style={{ color: '#666' }}>No events yet...</p>
         ) : (
           <div>
             {logs.map((log, i) => (
               <div
                 key={i}
                 style={{
-                  padding: "5px",
-                  borderBottom: "1px solid #ddd",
-                  fontSize: "12px",
+                  padding: '5px',
+                  borderBottom: '1px solid #ddd',
+                  fontSize: '12px',
                 }}
               >
                 {log}
@@ -314,5 +308,5 @@ export default function TestArcadePage() {
         )}
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/test-guard/page.tsx b/apps/web/src/app/test-guard/page.tsx
index f349ca5a..20ef403c 100644
--- a/apps/web/src/app/test-guard/page.tsx
+++ b/apps/web/src/app/test-guard/page.tsx
@@ -1,26 +1,26 @@
-"use client";
+'use client'
 
-import { useState } from "react";
-import { useViewerId } from "@/hooks/useViewerId";
+import { useState } from 'react'
+import { useViewerId } from '@/hooks/useViewerId'
 
 export default function TestGuardPage() {
-  const { data: viewerId, isLoading } = useViewerId();
-  const [sessionCreated, setSessionCreated] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const { data: viewerId, isLoading } = useViewerId()
+  const [sessionCreated, setSessionCreated] = useState(false)
+  const [error, setError] = useState<string | null>(null)
 
   const createSession = async () => {
-    if (!viewerId) return;
+    if (!viewerId) return
 
     try {
-      const response = await fetch("/api/arcade-session", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+      const response = await fetch('/api/arcade-session', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           userId: viewerId,
-          gameName: "matching",
-          gameUrl: "/arcade/matching",
+          gameName: 'matching',
+          gameUrl: '/arcade/matching',
           initialState: {
-            gamePhase: "playing",
+            gamePhase: 'playing',
             cards: [],
             gameCards: [],
             flippedCards: [],
@@ -29,74 +29,72 @@ export default function TestGuardPage() {
           },
           activePlayers: [1],
         }),
-      });
+      })
 
       if (!response.ok) {
-        throw new Error("Failed to create session");
+        throw new Error('Failed to create session')
       }
 
-      setSessionCreated(true);
-      setError(null);
+      setSessionCreated(true)
+      setError(null)
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Unknown error");
+      setError(err instanceof Error ? err.message : 'Unknown error')
     }
-  };
+  }
 
   const deleteSession = async () => {
-    if (!viewerId) return;
+    if (!viewerId) return
 
     try {
       const response = await fetch(`/api/arcade-session?userId=${viewerId}`, {
-        method: "DELETE",
-      });
+        method: 'DELETE',
+      })
 
       if (!response.ok) {
-        throw new Error("Failed to delete session");
+        throw new Error('Failed to delete session')
       }
 
-      setSessionCreated(false);
-      setError(null);
+      setSessionCreated(false)
+      setError(null)
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Unknown error");
+      setError(err instanceof Error ? err.message : 'Unknown error')
     }
-  };
+  }
 
   if (isLoading) {
-    return <div style={{ padding: "20px" }}>Loading...</div>;
+    return <div style={{ padding: '20px' }}>Loading...</div>
   }
 
   return (
     <div
       style={{
-        padding: "40px",
-        maxWidth: "800px",
-        margin: "0 auto",
-        fontFamily: "system-ui",
+        padding: '40px',
+        maxWidth: '800px',
+        margin: '0 auto',
+        fontFamily: 'system-ui',
       }}
     >
-      <h1 style={{ fontSize: "24px", marginBottom: "20px" }}>
-        🧪 Arcade Guard Test Page
-      </h1>
+      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>🧪 Arcade Guard Test Page</h1>
 
       <div
         style={{
-          background: "#f3f4f6",
-          padding: "16px",
-          borderRadius: "8px",
-          marginBottom: "20px",
-          border: "1px solid #e5e7eb",
+          background: '#f3f4f6',
+          padding: '16px',
+          borderRadius: '8px',
+          marginBottom: '20px',
+          border: '1px solid #e5e7eb',
         }}
       >
-        <p style={{ margin: "0 0 8px 0" }}>
+        <p style={{ margin: '0 0 8px 0' }}>
           <strong>Your Viewer ID:</strong>
         </p>
         <code
           style={{
-            background: "#1f2937",
-            color: "#10b981",
-            padding: "4px 8px",
-            borderRadius: "4px",
-            fontSize: "12px",
+            background: '#1f2937',
+            color: '#10b981',
+            padding: '4px 8px',
+            borderRadius: '4px',
+            fontSize: '12px',
           }}
         >
           {viewerId}
@@ -106,12 +104,12 @@ export default function TestGuardPage() {
       {error && (
         <div
           style={{
-            background: "#fee2e2",
-            color: "#dc2626",
-            padding: "12px",
-            borderRadius: "8px",
-            marginBottom: "20px",
-            border: "1px solid #fecaca",
+            background: '#fee2e2',
+            color: '#dc2626',
+            padding: '12px',
+            borderRadius: '8px',
+            marginBottom: '20px',
+            border: '1px solid #fecaca',
           }}
         >
           ❌ {error}
@@ -121,37 +119,35 @@ export default function TestGuardPage() {
       {sessionCreated && (
         <div
           style={{
-            background: "#d1fae5",
-            color: "#065f46",
-            padding: "12px",
-            borderRadius: "8px",
-            marginBottom: "20px",
-            border: "1px solid #a7f3d0",
+            background: '#d1fae5',
+            color: '#065f46',
+            padding: '12px',
+            borderRadius: '8px',
+            marginBottom: '20px',
+            border: '1px solid #a7f3d0',
           }}
         >
           ✅ Session created for matching game!
         </div>
       )}
 
-      <div style={{ marginBottom: "20px" }}>
-        <h2 style={{ fontSize: "18px", marginBottom: "12px" }}>
-          Step 1: Create a Session
-        </h2>
+      <div style={{ marginBottom: '20px' }}>
+        <h2 style={{ fontSize: '18px', marginBottom: '12px' }}>Step 1: Create a Session</h2>
         <button
           onClick={createSession}
           disabled={sessionCreated}
           style={{
-            background: sessionCreated ? "#9ca3af" : "#3b82f6",
-            color: "white",
-            border: "none",
-            padding: "12px 24px",
-            borderRadius: "8px",
-            fontSize: "16px",
-            cursor: sessionCreated ? "not-allowed" : "pointer",
-            fontWeight: "bold",
+            background: sessionCreated ? '#9ca3af' : '#3b82f6',
+            color: 'white',
+            border: 'none',
+            padding: '12px 24px',
+            borderRadius: '8px',
+            fontSize: '16px',
+            cursor: sessionCreated ? 'not-allowed' : 'pointer',
+            fontWeight: 'bold',
           }}
         >
-          {sessionCreated ? "✓ Session Created" : "Create Matching Session"}
+          {sessionCreated ? '✓ Session Created' : 'Create Matching Session'}
         </button>
       </div>
 
@@ -159,68 +155,64 @@ export default function TestGuardPage() {
         <>
           <div
             style={{
-              background: "#dbeafe",
-              padding: "20px",
-              borderRadius: "8px",
-              marginBottom: "20px",
-              border: "1px solid #93c5fd",
+              background: '#dbeafe',
+              padding: '20px',
+              borderRadius: '8px',
+              marginBottom: '20px',
+              border: '1px solid #93c5fd',
             }}
           >
-            <h2 style={{ fontSize: "18px", marginBottom: "12px" }}>
-              Step 2: Test the Guard
-            </h2>
-            <ol style={{ marginLeft: "20px", lineHeight: "1.8" }}>
+            <h2 style={{ fontSize: '18px', marginBottom: '12px' }}>Step 2: Test the Guard</h2>
+            <ol style={{ marginLeft: '20px', lineHeight: '1.8' }}>
               <li>
                 <a
                   href="/arcade/matching"
                   target="_blank"
-                  style={{ color: "#2563eb", textDecoration: "underline" }}
+                  style={{ color: '#2563eb', textDecoration: 'underline' }}
                   rel="noopener"
                 >
                   Open /arcade/matching
-                </a>{" "}
+                </a>{' '}
                 (should load normally)
               </li>
               <li>
                 <a
                   href="/arcade/memory-quiz"
                   target="_blank"
-                  style={{ color: "#2563eb", textDecoration: "underline" }}
+                  style={{ color: '#2563eb', textDecoration: 'underline' }}
                   rel="noopener"
                 >
                   Open /arcade/memory-quiz
-                </a>{" "}
+                </a>{' '}
                 (should redirect to /arcade/matching)
               </li>
               <li>
                 <a
                   href="/arcade/complement-race"
                   target="_blank"
-                  style={{ color: "#2563eb", textDecoration: "underline" }}
+                  style={{ color: '#2563eb', textDecoration: 'underline' }}
                   rel="noopener"
                 >
                   Open /arcade/complement-race
-                </a>{" "}
+                </a>{' '}
                 (should redirect to /arcade/matching)
               </li>
             </ol>
           </div>
 
-          <div style={{ marginBottom: "20px" }}>
-            <h2 style={{ fontSize: "18px", marginBottom: "12px" }}>
-              Step 3: Clean Up
-            </h2>
+          <div style={{ marginBottom: '20px' }}>
+            <h2 style={{ fontSize: '18px', marginBottom: '12px' }}>Step 3: Clean Up</h2>
             <button
               onClick={deleteSession}
               style={{
-                background: "#ef4444",
-                color: "white",
-                border: "none",
-                padding: "12px 24px",
-                borderRadius: "8px",
-                fontSize: "16px",
-                cursor: "pointer",
-                fontWeight: "bold",
+                background: '#ef4444',
+                color: 'white',
+                border: 'none',
+                padding: '12px 24px',
+                borderRadius: '8px',
+                fontSize: '16px',
+                cursor: 'pointer',
+                fontWeight: 'bold',
               }}
             >
               Delete Session
@@ -231,23 +223,20 @@ export default function TestGuardPage() {
 
       <div
         style={{
-          background: "#fef3c7",
-          padding: "16px",
-          borderRadius: "8px",
-          border: "1px solid #fde68a",
-          marginTop: "30px",
+          background: '#fef3c7',
+          padding: '16px',
+          borderRadius: '8px',
+          border: '1px solid #fde68a',
+          marginTop: '30px',
         }}
       >
-        <h3 style={{ fontSize: "16px", marginBottom: "8px" }}>
-          ⚠️ Why This Works
-        </h3>
-        <p style={{ margin: 0, lineHeight: "1.6", fontSize: "14px" }}>
-          This test page creates a session using{" "}
-          <strong>your browser's viewer ID</strong>, so the guard can find it.
-          The curl test didn't work because curl and your browser have different
+        <h3 style={{ fontSize: '16px', marginBottom: '8px' }}>⚠️ Why This Works</h3>
+        <p style={{ margin: 0, lineHeight: '1.6', fontSize: '14px' }}>
+          This test page creates a session using <strong>your browser's viewer ID</strong>, so the
+          guard can find it. The curl test didn't work because curl and your browser have different
           viewer IDs.
         </p>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/test-static-abacus/page.tsx b/apps/web/src/app/test-static-abacus/page.tsx
index e455a483..c647f2a4 100644
--- a/apps/web/src/app/test-static-abacus/page.tsx
+++ b/apps/web/src/app/test-static-abacus/page.tsx
@@ -5,74 +5,61 @@
  * Note: Uses /static import path to avoid client-side code
  */
 
-import { AbacusStatic } from "@soroban/abacus-react/static";
+import { AbacusStatic } from '@soroban/abacus-react/static'
 
 export default function TestStaticAbacusPage() {
-  const numbers = [1, 2, 3, 4, 5, 10, 25, 50, 100, 123, 456, 789];
+  const numbers = [1, 2, 3, 4, 5, 10, 25, 50, 100, 123, 456, 789]
 
   return (
-    <div style={{ padding: "40px", maxWidth: "1200px", margin: "0 auto" }}>
-      <h1 style={{ marginBottom: "10px" }}>
-        AbacusStatic Test (Server Component)
-      </h1>
-      <p style={{ color: "#64748b", marginBottom: "30px" }}>
-        This page is a React Server Component - no &quot;use client&quot;
-        directive! All abacus displays below are rendered on the server with
-        zero client-side JavaScript.
+    <div style={{ padding: '40px', maxWidth: '1200px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '10px' }}>AbacusStatic Test (Server Component)</h1>
+      <p style={{ color: '#64748b', marginBottom: '30px' }}>
+        This page is a React Server Component - no &quot;use client&quot; directive! All abacus
+        displays below are rendered on the server with zero client-side JavaScript.
       </p>
 
       <div
         style={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
-          gap: "20px",
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
+          gap: '20px',
         }}
       >
         {numbers.map((num) => (
           <div
             key={num}
             style={{
-              padding: "20px",
-              background: "white",
-              border: "2px solid #e2e8f0",
-              borderRadius: "12px",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: "10px",
+              padding: '20px',
+              background: 'white',
+              border: '2px solid #e2e8f0',
+              borderRadius: '12px',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '10px',
             }}
           >
-            <AbacusStatic
-              value={num}
-              columns="auto"
-              hideInactiveBeads
-              compact
-              scaleFactor={0.9}
-            />
-            <span
-              style={{ fontSize: "20px", fontWeight: "bold", color: "#475569" }}
-            >
-              {num}
-            </span>
+            <AbacusStatic value={num} columns="auto" hideInactiveBeads compact scaleFactor={0.9} />
+            <span style={{ fontSize: '20px', fontWeight: 'bold', color: '#475569' }}>{num}</span>
           </div>
         ))}
       </div>
 
       <div
         style={{
-          marginTop: "40px",
-          padding: "20px",
-          background: "#f0fdf4",
-          borderRadius: "8px",
+          marginTop: '40px',
+          padding: '20px',
+          background: '#f0fdf4',
+          borderRadius: '8px',
         }}
       >
-        <h2 style={{ marginTop: 0, color: "#166534" }}>✅ Success!</h2>
-        <p style={{ color: "#15803d" }}>
-          If you can see the abacus displays above, then AbacusStatic is working
-          correctly in React Server Components. Check the page source -
-          you&apos;ll see pure HTML/SVG with no client-side hydration markers!
+        <h2 style={{ marginTop: 0, color: '#166534' }}>✅ Success!</h2>
+        <p style={{ color: '#15803d' }}>
+          If you can see the abacus displays above, then AbacusStatic is working correctly in React
+          Server Components. Check the page source - you&apos;ll see pure HTML/SVG with no
+          client-side hydration markers!
         </p>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/test/arcade-rooms/page.tsx b/apps/web/src/app/test/arcade-rooms/page.tsx
index a025710b..9712881d 100644
--- a/apps/web/src/app/test/arcade-rooms/page.tsx
+++ b/apps/web/src/app/test/arcade-rooms/page.tsx
@@ -1,374 +1,368 @@
-"use client";
+'use client'
 
-import { useState } from "react";
-import { io, type Socket } from "socket.io-client";
+import { useState } from 'react'
+import { io, type Socket } from 'socket.io-client'
 
 interface TestResult {
-  name: string;
-  status: "pending" | "running" | "success" | "error";
-  message?: string;
-  data?: any;
+  name: string
+  status: 'pending' | 'running' | 'success' | 'error'
+  message?: string
+  data?: any
 }
 
 export default function ArcadeRoomsTestPage() {
-  const [results, setResults] = useState<TestResult[]>([]);
-  const [roomId, setRoomId] = useState("");
-  const [socket1, setSocket1] = useState<Socket | null>(null);
-  const [socket2, setSocket2] = useState<Socket | null>(null);
+  const [results, setResults] = useState<TestResult[]>([])
+  const [roomId, setRoomId] = useState('')
+  const [socket1, setSocket1] = useState<Socket | null>(null)
+  const [socket2, setSocket2] = useState<Socket | null>(null)
 
   const updateResult = (name: string, updates: Partial<TestResult>) => {
     setResults((prev) => {
-      const existing = prev.find((r) => r.name === name);
+      const existing = prev.find((r) => r.name === name)
       if (existing) {
-        return prev.map((r) => (r.name === name ? { ...r, ...updates } : r));
+        return prev.map((r) => (r.name === name ? { ...r, ...updates } : r))
       }
-      return [...prev, { name, status: "pending", ...updates }];
-    });
-  };
+      return [...prev, { name, status: 'pending', ...updates }]
+    })
+  }
 
   const log = (name: string, message: string, data?: any) => {
-    console.log(`[${name}]`, message, data);
-    updateResult(name, { message, data });
-  };
+    console.log(`[${name}]`, message, data)
+    updateResult(name, { message, data })
+  }
 
   const clearResults = () => {
-    setResults([]);
-    socket1?.disconnect();
-    socket2?.disconnect();
-    setSocket1(null);
-    setSocket2(null);
-  };
+    setResults([])
+    socket1?.disconnect()
+    socket2?.disconnect()
+    setSocket1(null)
+    setSocket2(null)
+  }
 
   // Test 1: Create Room
   const testCreateRoom = async () => {
-    const testName = "Create Room";
-    updateResult(testName, { status: "running" });
+    const testName = 'Create Room'
+    updateResult(testName, { status: 'running' })
 
     try {
-      const response = await fetch("/api/arcade/rooms", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+      const response = await fetch('/api/arcade/rooms', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           name: `Test Room ${Date.now()}`,
-          createdBy: "test-user-1",
-          creatorName: "Test User 1",
-          gameName: "matching",
+          createdBy: 'test-user-1',
+          creatorName: 'Test User 1',
+          gameName: 'matching',
           gameConfig: { difficulty: 6 },
         }),
-      });
+      })
 
       if (!response.ok) {
-        throw new Error(`HTTP ${response.status}`);
+        throw new Error(`HTTP ${response.status}`)
       }
 
-      const data = await response.json();
-      setRoomId(data.room.id);
-      log(testName, `✅ Room created: ${data.room.code}`, data.room);
-      updateResult(testName, { status: "success" });
+      const data = await response.json()
+      setRoomId(data.room.id)
+      log(testName, `✅ Room created: ${data.room.code}`, data.room)
+      updateResult(testName, { status: 'success' })
     } catch (error) {
-      log(testName, `❌ ${error}`);
-      updateResult(testName, { status: "error" });
+      log(testName, `❌ ${error}`)
+      updateResult(testName, { status: 'error' })
     }
-  };
+  }
 
   // Test 2: Join Room (Socket)
   const testJoinRoom = async (testRoomId?: string) => {
-    const testName = "Join Room";
-    const activeRoomId = testRoomId || roomId;
+    const testName = 'Join Room'
+    const activeRoomId = testRoomId || roomId
     if (!activeRoomId) {
-      log(testName, "❌ No room ID - create room first");
-      updateResult(testName, { status: "error" });
-      return;
+      log(testName, '❌ No room ID - create room first')
+      updateResult(testName, { status: 'error' })
+      return
     }
 
-    updateResult(testName, { status: "running" });
+    updateResult(testName, { status: 'running' })
 
-    const sock = io({ path: "/api/socket" });
-    setSocket1(sock);
+    const sock = io({ path: '/api/socket' })
+    setSocket1(sock)
 
-    sock.on("connect", () => {
-      log(testName, `Connected: ${sock.id}`);
-      sock.emit("join-room", { roomId: activeRoomId, userId: "test-user-1" });
-    });
+    sock.on('connect', () => {
+      log(testName, `Connected: ${sock.id}`)
+      sock.emit('join-room', { roomId: activeRoomId, userId: 'test-user-1' })
+    })
 
-    sock.on("room-joined", (data) => {
-      log(testName, `✅ Joined room`, data);
-      updateResult(testName, { status: "success" });
-    });
+    sock.on('room-joined', (data) => {
+      log(testName, `✅ Joined room`, data)
+      updateResult(testName, { status: 'success' })
+    })
 
-    sock.on("room-error", (error) => {
-      log(testName, `❌ ${error.error}`);
-      updateResult(testName, { status: "error" });
-    });
-  };
+    sock.on('room-error', (error) => {
+      log(testName, `❌ ${error.error}`)
+      updateResult(testName, { status: 'error' })
+    })
+  }
 
   // Test 3: Multi-User Join
   const testMultiUserJoin = async (testRoomId?: string) => {
-    const testName = "Multi-User Join";
-    const activeRoomId = testRoomId || roomId;
+    const testName = 'Multi-User Join'
+    const activeRoomId = testRoomId || roomId
     if (!activeRoomId || !socket1) {
-      log(testName, "❌ Join room first (Test 2)");
-      updateResult(testName, { status: "error" });
-      return;
+      log(testName, '❌ Join room first (Test 2)')
+      updateResult(testName, { status: 'error' })
+      return
     }
 
-    updateResult(testName, { status: "running" });
+    updateResult(testName, { status: 'running' })
 
     // Listen on socket1 for member-joined
-    socket1.once("member-joined", (data) => {
-      log(
-        testName,
-        `✅ User 2 joined, ${data.onlineMembers.length} online`,
-        data,
-      );
-      updateResult(testName, { status: "success" });
-    });
+    socket1.once('member-joined', (data) => {
+      log(testName, `✅ User 2 joined, ${data.onlineMembers.length} online`, data)
+      updateResult(testName, { status: 'success' })
+    })
 
     // Connect socket2
-    const sock2 = io({ path: "/api/socket" });
-    setSocket2(sock2);
+    const sock2 = io({ path: '/api/socket' })
+    setSocket2(sock2)
 
-    sock2.on("connect", () => {
-      log(testName, `User 2 connected: ${sock2.id}`);
-      sock2.emit("join-room", { roomId: activeRoomId, userId: "test-user-2" });
-    });
+    sock2.on('connect', () => {
+      log(testName, `User 2 connected: ${sock2.id}`)
+      sock2.emit('join-room', { roomId: activeRoomId, userId: 'test-user-2' })
+    })
 
-    sock2.on("room-error", (error) => {
-      log(testName, `❌ ${error.error}`);
-      updateResult(testName, { status: "error" });
-    });
-  };
+    sock2.on('room-error', (error) => {
+      log(testName, `❌ ${error.error}`)
+      updateResult(testName, { status: 'error' })
+    })
+  }
 
   // Test 4: Game Move Broadcast
   const testGameMoveBroadcast = async (testRoomId?: string) => {
-    const testName = "Game Move Broadcast";
-    const activeRoomId = testRoomId || roomId;
+    const testName = 'Game Move Broadcast'
+    const activeRoomId = testRoomId || roomId
     if (!activeRoomId || !socket1 || !socket2) {
-      log(testName, "❌ Run Multi-User Join first (Test 3)");
-      updateResult(testName, { status: "error" });
-      return;
+      log(testName, '❌ Run Multi-User Join first (Test 3)')
+      updateResult(testName, { status: 'error' })
+      return
     }
 
-    updateResult(testName, { status: "running" });
+    updateResult(testName, { status: 'running' })
 
-    let socket1Received = false;
-    let socket2Received = false;
+    let socket1Received = false
+    let socket2Received = false
 
     const checkComplete = () => {
       if (socket1Received && socket2Received) {
-        log(testName, "✅ Both sockets received move");
-        updateResult(testName, { status: "success" });
+        log(testName, '✅ Both sockets received move')
+        updateResult(testName, { status: 'success' })
       }
-    };
+    }
 
-    socket1.once("room-move-accepted", (data) => {
-      log(testName, "Socket 1 received move", data.move.type);
-      socket1Received = true;
-      checkComplete();
-    });
+    socket1.once('room-move-accepted', (data) => {
+      log(testName, 'Socket 1 received move', data.move.type)
+      socket1Received = true
+      checkComplete()
+    })
 
-    socket2.once("room-move-accepted", (data) => {
-      log(testName, "Socket 2 received move", data.move.type);
-      socket2Received = true;
-      checkComplete();
-    });
+    socket2.once('room-move-accepted', (data) => {
+      log(testName, 'Socket 2 received move', data.move.type)
+      socket2Received = true
+      checkComplete()
+    })
 
     // Send move from socket1
-    socket1.emit("room-game-move", {
+    socket1.emit('room-game-move', {
       roomId: activeRoomId,
-      userId: "test-guest-1",
+      userId: 'test-guest-1',
       move: {
-        type: "START_GAME",
-        playerId: "player-1",
+        type: 'START_GAME',
+        playerId: 'player-1',
         timestamp: Date.now(),
-        data: { activePlayers: ["player-1"] },
+        data: { activePlayers: ['player-1'] },
       },
-    });
-  };
+    })
+  }
 
   // Test 5: Solo Play (Backward Compatibility)
   const testSoloPlay = async () => {
-    const testName = "Solo Play";
-    updateResult(testName, { status: "running" });
+    const testName = 'Solo Play'
+    updateResult(testName, { status: 'running' })
 
-    const soloSocket = io({ path: "/api/socket" });
+    const soloSocket = io({ path: '/api/socket' })
 
-    soloSocket.on("connect", () => {
-      log(testName, `Solo connected: ${soloSocket.id}`);
-      soloSocket.emit("join-arcade-session", {
+    soloSocket.on('connect', () => {
+      log(testName, `Solo connected: ${soloSocket.id}`)
+      soloSocket.emit('join-arcade-session', {
         userId: `solo-guest-${Date.now()}`,
-      });
-    });
+      })
+    })
 
-    soloSocket.on("no-active-session", () => {
-      log(testName, "No active session (expected)");
+    soloSocket.on('no-active-session', () => {
+      log(testName, 'No active session (expected)')
 
       // Send START_GAME
-      soloSocket.emit("game-move", {
+      soloSocket.emit('game-move', {
         userId: `solo-guest-${Date.now()}`,
         move: {
-          type: "START_GAME",
-          playerId: "player-1",
+          type: 'START_GAME',
+          playerId: 'player-1',
           timestamp: Date.now(),
-          data: { activePlayers: ["player-1"] },
+          data: { activePlayers: ['player-1'] },
         },
-      });
-    });
+      })
+    })
 
-    soloSocket.on("move-accepted", (data) => {
-      log(testName, "✅ Solo move accepted", data);
-      updateResult(testName, { status: "success" });
-      soloSocket.disconnect();
-    });
+    soloSocket.on('move-accepted', (data) => {
+      log(testName, '✅ Solo move accepted', data)
+      updateResult(testName, { status: 'success' })
+      soloSocket.disconnect()
+    })
 
-    soloSocket.on("move-rejected", (error) => {
-      log(testName, `❌ ${error.error}`);
-      updateResult(testName, { status: "error" });
-      soloSocket.disconnect();
-    });
-  };
+    soloSocket.on('move-rejected', (error) => {
+      log(testName, `❌ ${error.error}`)
+      updateResult(testName, { status: 'error' })
+      soloSocket.disconnect()
+    })
+  }
 
   // Test 6: Room Isolation (ensure solo doesn't leak to room)
   const testRoomIsolation = async () => {
-    const testName = "Room Isolation";
+    const testName = 'Room Isolation'
     if (!socket1) {
-      log(testName, "❌ Join room first (Test 2)");
-      updateResult(testName, { status: "error" });
-      return;
+      log(testName, '❌ Join room first (Test 2)')
+      updateResult(testName, { status: 'error' })
+      return
     }
 
-    updateResult(testName, { status: "running" });
+    updateResult(testName, { status: 'running' })
 
-    let receivedSoloMove = false;
+    let receivedSoloMove = false
 
-    socket1.once("room-move-accepted", (data) => {
-      if (data.userId.includes("solo-guest")) {
-        receivedSoloMove = true;
-        log(testName, "❌ LEAK: Received solo move in room!");
-        updateResult(testName, { status: "error" });
+    socket1.once('room-move-accepted', (data) => {
+      if (data.userId.includes('solo-guest')) {
+        receivedSoloMove = true
+        log(testName, '❌ LEAK: Received solo move in room!')
+        updateResult(testName, { status: 'error' })
       }
-    });
+    })
 
     // Create solo session
-    const soloSocket = io({ path: "/api/socket" });
-    soloSocket.on("connect", () => {
-      const soloUserId = `solo-guest-${Date.now()}`;
-      soloSocket.emit("join-arcade-session", { userId: soloUserId });
+    const soloSocket = io({ path: '/api/socket' })
+    soloSocket.on('connect', () => {
+      const soloUserId = `solo-guest-${Date.now()}`
+      soloSocket.emit('join-arcade-session', { userId: soloUserId })
 
       setTimeout(() => {
-        soloSocket.emit("game-move", {
+        soloSocket.emit('game-move', {
           userId: soloUserId,
           move: {
-            type: "START_GAME",
-            playerId: "player-1",
+            type: 'START_GAME',
+            playerId: 'player-1',
             timestamp: Date.now(),
-            data: { activePlayers: ["player-1"] },
+            data: { activePlayers: ['player-1'] },
           },
-        });
-      }, 500);
-    });
+        })
+      }, 500)
+    })
 
-    soloSocket.on("move-accepted", () => {
+    soloSocket.on('move-accepted', () => {
       // Wait to see if room received it
       setTimeout(() => {
         if (!receivedSoloMove) {
-          log(testName, "✅ Solo move did not leak to room");
-          updateResult(testName, { status: "success" });
+          log(testName, '✅ Solo move did not leak to room')
+          updateResult(testName, { status: 'success' })
         }
-        soloSocket.disconnect();
-      }, 1000);
-    });
-  };
+        soloSocket.disconnect()
+      }, 1000)
+    })
+  }
 
   const runAllTests = async () => {
-    clearResults();
-    setRoomId(""); // Reset room ID
-    setSocket1(null);
-    setSocket2(null);
+    clearResults()
+    setRoomId('') // Reset room ID
+    setSocket1(null)
+    setSocket2(null)
 
     // Test 1: Create Room
-    updateResult("Run All Tests", {
-      status: "running",
-      message: "Creating room...",
-    });
+    updateResult('Run All Tests', {
+      status: 'running',
+      message: 'Creating room...',
+    })
 
     try {
-      const response = await fetch("/api/arcade/rooms", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+      const response = await fetch('/api/arcade/rooms', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           name: `Test Room ${Date.now()}`,
-          createdBy: "test-user-1",
-          creatorName: "Test User 1",
-          gameName: "matching",
+          createdBy: 'test-user-1',
+          creatorName: 'Test User 1',
+          gameName: 'matching',
           gameConfig: { difficulty: 6 },
         }),
-      });
+      })
 
       if (!response.ok) {
-        throw new Error(`HTTP ${response.status}`);
+        throw new Error(`HTTP ${response.status}`)
       }
 
-      const data = await response.json();
-      const createdRoomId = data.room.id;
-      setRoomId(createdRoomId);
+      const data = await response.json()
+      const createdRoomId = data.room.id
+      setRoomId(createdRoomId)
 
-      log("Create Room", `✅ Room created: ${data.room.code}`, data.room);
-      updateResult("Create Room", { status: "success" });
+      log('Create Room', `✅ Room created: ${data.room.code}`, data.room)
+      updateResult('Create Room', { status: 'success' })
 
-      updateResult("Run All Tests", {
-        message: "Room created, running tests...",
-      });
-      await new Promise((r) => setTimeout(r, 1000));
+      updateResult('Run All Tests', {
+        message: 'Room created, running tests...',
+      })
+      await new Promise((r) => setTimeout(r, 1000))
 
       // Now run tests with the roomId we just got
-      await runTestsWithRoom(createdRoomId);
+      await runTestsWithRoom(createdRoomId)
     } catch (error) {
-      log("Create Room", `❌ ${error}`);
-      updateResult("Create Room", { status: "error" });
-      updateResult("Run All Tests", {
-        status: "error",
-        message: "Room creation failed",
-      });
+      log('Create Room', `❌ ${error}`)
+      updateResult('Create Room', { status: 'error' })
+      updateResult('Run All Tests', {
+        status: 'error',
+        message: 'Room creation failed',
+      })
     }
-  };
+  }
 
   const runTestsWithRoom = async (testRoomId: string) => {
     // Pass testRoomId to each test to avoid state closure issues
 
     // Test 2: Join Room
-    await testJoinRoom(testRoomId);
-    await new Promise((r) => setTimeout(r, 2000));
+    await testJoinRoom(testRoomId)
+    await new Promise((r) => setTimeout(r, 2000))
 
     // Test 3: Multi-User Join
-    await testMultiUserJoin(testRoomId);
-    await new Promise((r) => setTimeout(r, 2000));
+    await testMultiUserJoin(testRoomId)
+    await new Promise((r) => setTimeout(r, 2000))
 
     // Test 4: Game Move Broadcast
-    await testGameMoveBroadcast(testRoomId);
-    await new Promise((r) => setTimeout(r, 2000));
+    await testGameMoveBroadcast(testRoomId)
+    await new Promise((r) => setTimeout(r, 2000))
 
     // Test 5: Solo Play (doesn't need roomId)
-    await testSoloPlay();
-    await new Promise((r) => setTimeout(r, 2000));
+    await testSoloPlay()
+    await new Promise((r) => setTimeout(r, 2000))
 
     // Test 6: Room Isolation (doesn't need roomId parameter since it uses socket1)
-    await testRoomIsolation();
-    await new Promise((r) => setTimeout(r, 1000));
+    await testRoomIsolation()
+    await new Promise((r) => setTimeout(r, 1000))
 
-    updateResult("Run All Tests", {
-      status: "success",
-      message: "✅ All tests completed",
-    });
-  };
+    updateResult('Run All Tests', {
+      status: 'success',
+      message: '✅ All tests completed',
+    })
+  }
 
   return (
     <div className="min-h-screen bg-gray-50 p-8">
       <div className="max-w-4xl mx-auto">
         <h1 className="text-3xl font-bold mb-2">Arcade Rooms Manual Testing</h1>
-        <p className="text-gray-600 mb-8">
-          Phase 1 & 2: Room CRUD, Socket.IO Integration
-        </p>
+        <p className="text-gray-600 mb-8">Phase 1 & 2: Room CRUD, Socket.IO Integration</p>
 
         <div className="bg-white rounded-lg shadow p-6 mb-6">
           <h2 className="text-xl font-semibold mb-4">Test Controls</h2>
@@ -430,8 +424,7 @@ export default function ArcadeRoomsTestPage() {
           {roomId && (
             <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded">
               <p className="text-sm">
-                <strong>Room ID:</strong>{" "}
-                <code className="text-xs">{roomId}</code>
+                <strong>Room ID:</strong> <code className="text-xs">{roomId}</code>
               </p>
             </div>
           )}
@@ -441,9 +434,7 @@ export default function ArcadeRoomsTestPage() {
           <h2 className="text-xl font-semibold mb-4">Test Results</h2>
 
           {results.length === 0 && (
-            <p className="text-gray-500 italic">
-              No tests run yet. Click a button above to start.
-            </p>
+            <p className="text-gray-500 italic">No tests run yet. Click a button above to start.</p>
           )}
 
           <div className="space-y-3">
@@ -451,13 +442,13 @@ export default function ArcadeRoomsTestPage() {
               <div
                 key={i}
                 className={`p-4 rounded border ${
-                  result.status === "success"
-                    ? "bg-green-50 border-green-200"
-                    : result.status === "error"
-                      ? "bg-red-50 border-red-200"
-                      : result.status === "running"
-                        ? "bg-yellow-50 border-yellow-200"
-                        : "bg-gray-50 border-gray-200"
+                  result.status === 'success'
+                    ? 'bg-green-50 border-green-200'
+                    : result.status === 'error'
+                      ? 'bg-red-50 border-red-200'
+                      : result.status === 'running'
+                        ? 'bg-yellow-50 border-yellow-200'
+                        : 'bg-gray-50 border-gray-200'
                 }`}
               >
                 <div className="flex items-start justify-between">
@@ -466,22 +457,20 @@ export default function ArcadeRoomsTestPage() {
                       <span className="font-semibold">{result.name}</span>
                       <span
                         className={`text-xs px-2 py-1 rounded ${
-                          result.status === "success"
-                            ? "bg-green-200 text-green-800"
-                            : result.status === "error"
-                              ? "bg-red-200 text-red-800"
-                              : result.status === "running"
-                                ? "bg-yellow-200 text-yellow-800"
-                                : "bg-gray-200 text-gray-800"
+                          result.status === 'success'
+                            ? 'bg-green-200 text-green-800'
+                            : result.status === 'error'
+                              ? 'bg-red-200 text-red-800'
+                              : result.status === 'running'
+                                ? 'bg-yellow-200 text-yellow-800'
+                                : 'bg-gray-200 text-gray-800'
                         }`}
                       >
                         {result.status}
                       </span>
                     </div>
                     {result.message && (
-                      <p className="text-sm mt-1 text-gray-700">
-                        {result.message}
-                      </p>
+                      <p className="text-sm mt-1 text-gray-700">{result.message}</p>
                     )}
                     {result.data && (
                       <details className="mt-2">
@@ -512,5 +501,5 @@ export default function ArcadeRoomsTestPage() {
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/app/tutorial-editor/__tests__/page.integration.test.tsx b/apps/web/src/app/tutorial-editor/__tests__/page.integration.test.tsx
index 1d4351f3..9aa477b5 100644
--- a/apps/web/src/app/tutorial-editor/__tests__/page.integration.test.tsx
+++ b/apps/web/src/app/tutorial-editor/__tests__/page.integration.test.tsx
@@ -1,9 +1,9 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import TutorialEditorPage from "../page";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import TutorialEditorPage from '../page'
 
 // Mock Next.js router
-vi.mock("next/navigation", () => ({
+vi.mock('next/navigation', () => ({
   useRouter: () => ({
     push: vi.fn(),
     back: vi.fn(),
@@ -11,505 +11,495 @@ vi.mock("next/navigation", () => ({
     refresh: vi.fn(),
   }),
   useSearchParams: () => new URLSearchParams(),
-  usePathname: () => "/tutorial-editor",
-}));
+  usePathname: () => '/tutorial-editor',
+}))
 
 // Mock the AbacusReact component
-vi.mock("@soroban/abacus-react", () => ({
+vi.mock('@soroban/abacus-react', () => ({
   AbacusReact: ({ value, onValueChange, callbacks }: any) => (
     <div data-testid="mock-abacus">
       <div data-testid="abacus-value">{value}</div>
       <button
         data-testid="mock-bead-0"
         onClick={() => {
-          const newValue = value + 1;
-          onValueChange?.(newValue);
+          const newValue = value + 1
+          onValueChange?.(newValue)
           callbacks?.onBeadClick?.({
             columnIndex: 4,
-            beadType: "earth",
+            beadType: 'earth',
             position: 0,
             active: false,
-          });
+          })
         }}
       >
         Mock Bead
       </button>
     </div>
   ),
-}));
+}))
 
-describe("Tutorial Editor Page Integration Tests", () => {
+describe('Tutorial Editor Page Integration Tests', () => {
   beforeEach(() => {
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
-  describe("Page Structure and Navigation", () => {
-    it("renders the complete tutorial editor page with all components", () => {
-      render(<TutorialEditorPage />);
+  describe('Page Structure and Navigation', () => {
+    it('renders the complete tutorial editor page with all components', () => {
+      render(<TutorialEditorPage />)
 
       // Check main page elements
-      expect(
-        screen.getByText("Tutorial Editor & Debugger"),
-      ).toBeInTheDocument();
-      expect(screen.getByText(/Guided Addition Tutorial/)).toBeInTheDocument();
+      expect(screen.getByText('Tutorial Editor & Debugger')).toBeInTheDocument()
+      expect(screen.getByText(/Guided Addition Tutorial/)).toBeInTheDocument()
 
       // Check mode selector buttons
-      expect(screen.getByText("Editor")).toBeInTheDocument();
-      expect(screen.getByText("Player")).toBeInTheDocument();
-      expect(screen.getByText("Split")).toBeInTheDocument();
+      expect(screen.getByText('Editor')).toBeInTheDocument()
+      expect(screen.getByText('Player')).toBeInTheDocument()
+      expect(screen.getByText('Split')).toBeInTheDocument()
 
       // Check options
-      expect(screen.getByText("Debug Info")).toBeInTheDocument();
-      expect(screen.getByText("Auto Save")).toBeInTheDocument();
+      expect(screen.getByText('Debug Info')).toBeInTheDocument()
+      expect(screen.getByText('Auto Save')).toBeInTheDocument()
 
       // Check export functionality
-      expect(screen.getByText("Export Debug")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Export Debug')).toBeInTheDocument()
+    })
 
-    it("switches between editor, player, and split modes correctly", async () => {
-      render(<TutorialEditorPage />);
+    it('switches between editor, player, and split modes correctly', async () => {
+      render(<TutorialEditorPage />)
 
       // Default should be editor mode
-      expect(screen.getByText("Edit Tutorial")).toBeInTheDocument();
+      expect(screen.getByText('Edit Tutorial')).toBeInTheDocument()
 
       // Switch to player mode
-      fireEvent.click(screen.getByText("Player"));
+      fireEvent.click(screen.getByText('Player'))
       await waitFor(() => {
-        expect(screen.queryByText("Edit Tutorial")).not.toBeInTheDocument();
-        expect(screen.getByTestId("mock-abacus")).toBeInTheDocument();
-        expect(screen.getByText(/Step 1 of/)).toBeInTheDocument();
-      });
+        expect(screen.queryByText('Edit Tutorial')).not.toBeInTheDocument()
+        expect(screen.getByTestId('mock-abacus')).toBeInTheDocument()
+        expect(screen.getByText(/Step 1 of/)).toBeInTheDocument()
+      })
 
       // Switch to split mode
-      fireEvent.click(screen.getByText("Split"));
+      fireEvent.click(screen.getByText('Split'))
       await waitFor(() => {
         // Should show both editor and player
-        expect(screen.getByText("Edit Tutorial")).toBeInTheDocument();
-        expect(screen.getByTestId("mock-abacus")).toBeInTheDocument();
-      });
+        expect(screen.getByText('Edit Tutorial')).toBeInTheDocument()
+        expect(screen.getByTestId('mock-abacus')).toBeInTheDocument()
+      })
 
       // Switch back to editor mode
-      fireEvent.click(screen.getByText("Editor"));
+      fireEvent.click(screen.getByText('Editor'))
       await waitFor(() => {
-        expect(screen.getByText("Edit Tutorial")).toBeInTheDocument();
-        expect(screen.queryByTestId("mock-abacus")).not.toBeInTheDocument();
-      });
-    });
+        expect(screen.getByText('Edit Tutorial')).toBeInTheDocument()
+        expect(screen.queryByTestId('mock-abacus')).not.toBeInTheDocument()
+      })
+    })
 
-    it("toggles debug information display", () => {
-      render(<TutorialEditorPage />);
+    it('toggles debug information display', () => {
+      render(<TutorialEditorPage />)
 
-      const debugInfoCheckbox = screen.getByLabelText("Debug Info");
-      expect(debugInfoCheckbox).toBeChecked(); // Should be checked by default
+      const debugInfoCheckbox = screen.getByLabelText('Debug Info')
+      expect(debugInfoCheckbox).toBeChecked() // Should be checked by default
 
       // Should show validation status when debug info is enabled
-      expect(
-        screen.getByText("Tutorial validation passed ✓"),
-      ).toBeInTheDocument();
+      expect(screen.getByText('Tutorial validation passed ✓')).toBeInTheDocument()
 
       // Toggle debug info off
-      fireEvent.click(debugInfoCheckbox);
-      expect(debugInfoCheckbox).not.toBeChecked();
+      fireEvent.click(debugInfoCheckbox)
+      expect(debugInfoCheckbox).not.toBeChecked()
 
       // Validation status should be hidden
-      expect(
-        screen.queryByText("Tutorial validation passed ✓"),
-      ).not.toBeInTheDocument();
-    });
+      expect(screen.queryByText('Tutorial validation passed ✓')).not.toBeInTheDocument()
+    })
 
-    it("toggles auto save option", () => {
-      render(<TutorialEditorPage />);
+    it('toggles auto save option', () => {
+      render(<TutorialEditorPage />)
 
-      const autoSaveCheckbox = screen.getByLabelText("Auto Save");
-      expect(autoSaveCheckbox).not.toBeChecked(); // Should be unchecked by default
+      const autoSaveCheckbox = screen.getByLabelText('Auto Save')
+      expect(autoSaveCheckbox).not.toBeChecked() // Should be unchecked by default
 
-      fireEvent.click(autoSaveCheckbox);
-      expect(autoSaveCheckbox).toBeChecked();
-    });
-  });
+      fireEvent.click(autoSaveCheckbox)
+      expect(autoSaveCheckbox).toBeChecked()
+    })
+  })
 
-  describe("Editor Mode Functionality", () => {
-    it("supports complete tutorial editing workflow in editor mode", async () => {
-      render(<TutorialEditorPage />);
+  describe('Editor Mode Functionality', () => {
+    it('supports complete tutorial editing workflow in editor mode', async () => {
+      render(<TutorialEditorPage />)
 
       // Start in editor mode
-      expect(screen.getByText("Edit Tutorial")).toBeInTheDocument();
+      expect(screen.getByText('Edit Tutorial')).toBeInTheDocument()
 
       // Enter edit mode
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
       await waitFor(() => {
-        expect(screen.getByText("Save Changes")).toBeInTheDocument();
-      });
+        expect(screen.getByText('Save Changes')).toBeInTheDocument()
+      })
 
       // Edit tutorial metadata
-      const titleInput = screen.getByDisplayValue("Guided Addition Tutorial");
+      const titleInput = screen.getByDisplayValue('Guided Addition Tutorial')
       fireEvent.change(titleInput, {
-        target: { value: "Advanced Addition Tutorial" },
-      });
+        target: { value: 'Advanced Addition Tutorial' },
+      })
 
       // Save changes
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Save Changes'))
 
       // Should show saving status
       await waitFor(() => {
-        expect(screen.getByText("Saving...")).toBeInTheDocument();
-      });
+        expect(screen.getByText('Saving...')).toBeInTheDocument()
+      })
 
       // Should show saved status
       await waitFor(
         () => {
-          expect(screen.getByText("Saved!")).toBeInTheDocument();
+          expect(screen.getByText('Saved!')).toBeInTheDocument()
         },
-        { timeout: 2000 },
-      );
-    });
+        { timeout: 2000 }
+      )
+    })
 
-    it("handles validation errors and displays them appropriately", async () => {
-      render(<TutorialEditorPage />);
+    it('handles validation errors and displays them appropriately', async () => {
+      render(<TutorialEditorPage />)
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
       await waitFor(() => {
-        expect(screen.getByText("Save Changes")).toBeInTheDocument();
-      });
+        expect(screen.getByText('Save Changes')).toBeInTheDocument()
+      })
 
       // Clear the title to trigger validation error
-      const titleInput = screen.getByDisplayValue("Guided Addition Tutorial");
-      fireEvent.change(titleInput, { target: { value: "" } });
+      const titleInput = screen.getByDisplayValue('Guided Addition Tutorial')
+      fireEvent.change(titleInput, { target: { value: '' } })
 
       // Try to save
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Save Changes'))
 
       // Should show validation error
       await waitFor(() => {
-        expect(screen.getByText(/validation error/)).toBeInTheDocument();
-      });
-    });
+        expect(screen.getByText(/validation error/)).toBeInTheDocument()
+      })
+    })
 
-    it("integrates preview functionality with player mode", async () => {
-      render(<TutorialEditorPage />);
+    it('integrates preview functionality with player mode', async () => {
+      render(<TutorialEditorPage />)
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
       await waitFor(() => {
-        expect(screen.getByText("Save Changes")).toBeInTheDocument();
-      });
+        expect(screen.getByText('Save Changes')).toBeInTheDocument()
+      })
 
       // Look for preview buttons in the editor
-      const previewButtons = screen.getAllByText(/Preview/);
+      const previewButtons = screen.getAllByText(/Preview/)
       if (previewButtons.length > 0) {
-        fireEvent.click(previewButtons[0]);
+        fireEvent.click(previewButtons[0])
 
         // Should switch to player mode for preview
         await waitFor(() => {
-          expect(screen.getByTestId("mock-abacus")).toBeInTheDocument();
-        });
+          expect(screen.getByTestId('mock-abacus')).toBeInTheDocument()
+        })
       }
-    });
-  });
+    })
+  })
 
-  describe("Player Mode Functionality", () => {
-    it("supports interactive tutorial playthrough in player mode", async () => {
-      render(<TutorialEditorPage />);
+  describe('Player Mode Functionality', () => {
+    it('supports interactive tutorial playthrough in player mode', async () => {
+      render(<TutorialEditorPage />)
 
       // Switch to player mode
-      fireEvent.click(screen.getByText("Player"));
+      fireEvent.click(screen.getByText('Player'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("mock-abacus")).toBeInTheDocument();
-        expect(screen.getByText(/Step 1 of/)).toBeInTheDocument();
-      });
+        expect(screen.getByTestId('mock-abacus')).toBeInTheDocument()
+        expect(screen.getByText(/Step 1 of/)).toBeInTheDocument()
+      })
 
       // Should show debug controls in player mode
-      expect(screen.getByText("Debug")).toBeInTheDocument();
-      expect(screen.getByText("Steps")).toBeInTheDocument();
+      expect(screen.getByText('Debug')).toBeInTheDocument()
+      expect(screen.getByText('Steps')).toBeInTheDocument()
 
       // Interact with the abacus
-      const bead = screen.getByTestId("mock-bead-0");
-      fireEvent.click(bead);
+      const bead = screen.getByTestId('mock-bead-0')
+      fireEvent.click(bead)
 
       // Should update abacus value
       await waitFor(() => {
-        const abacusValue = screen.getByTestId("abacus-value");
-        expect(abacusValue).toHaveTextContent("1");
-      });
+        const abacusValue = screen.getByTestId('abacus-value')
+        expect(abacusValue).toHaveTextContent('1')
+      })
 
       // Should show step completion feedback
       await waitFor(() => {
-        const successMessage = screen.queryByText(/Great! You completed/);
+        const successMessage = screen.queryByText(/Great! You completed/)
         if (successMessage) {
-          expect(successMessage).toBeInTheDocument();
+          expect(successMessage).toBeInTheDocument()
         }
-      });
-    });
+      })
+    })
 
-    it("tracks and displays debug events in player mode", async () => {
-      render(<TutorialEditorPage />);
+    it('tracks and displays debug events in player mode', async () => {
+      render(<TutorialEditorPage />)
 
       // Switch to player mode
-      fireEvent.click(screen.getByText("Player"));
+      fireEvent.click(screen.getByText('Player'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("mock-abacus")).toBeInTheDocument();
-      });
+        expect(screen.getByTestId('mock-abacus')).toBeInTheDocument()
+      })
 
       // Interact with abacus to generate events
-      const bead = screen.getByTestId("mock-bead-0");
-      fireEvent.click(bead);
+      const bead = screen.getByTestId('mock-bead-0')
+      fireEvent.click(bead)
 
       // Should show debug events panel at bottom
       await waitFor(() => {
-        const debugEventsPanel = screen.queryByText("Debug Events");
+        const debugEventsPanel = screen.queryByText('Debug Events')
         if (debugEventsPanel) {
-          expect(debugEventsPanel).toBeInTheDocument();
+          expect(debugEventsPanel).toBeInTheDocument()
         }
-      });
-    });
+      })
+    })
 
-    it("supports step navigation and debugging features", async () => {
-      render(<TutorialEditorPage />);
+    it('supports step navigation and debugging features', async () => {
+      render(<TutorialEditorPage />)
 
-      fireEvent.click(screen.getByText("Player"));
+      fireEvent.click(screen.getByText('Player'))
 
       await waitFor(() => {
-        expect(screen.getByText("Steps")).toBeInTheDocument();
-      });
+        expect(screen.getByText('Steps')).toBeInTheDocument()
+      })
 
       // Open step list
-      fireEvent.click(screen.getByText("Steps"));
+      fireEvent.click(screen.getByText('Steps'))
 
       await waitFor(() => {
-        expect(screen.getByText("Tutorial Steps")).toBeInTheDocument();
-      });
+        expect(screen.getByText('Tutorial Steps')).toBeInTheDocument()
+      })
 
       // Should show step list
-      const stepItems = screen.getAllByText(/^\d+\./);
-      expect(stepItems.length).toBeGreaterThan(0);
+      const stepItems = screen.getAllByText(/^\d+\./)
+      expect(stepItems.length).toBeGreaterThan(0)
 
       // Test auto-advance feature
-      const autoAdvanceCheckbox = screen.getByLabelText("Auto-advance");
-      fireEvent.click(autoAdvanceCheckbox);
-      expect(autoAdvanceCheckbox).toBeChecked();
-    });
-  });
+      const autoAdvanceCheckbox = screen.getByLabelText('Auto-advance')
+      fireEvent.click(autoAdvanceCheckbox)
+      expect(autoAdvanceCheckbox).toBeChecked()
+    })
+  })
 
-  describe("Split Mode Functionality", () => {
-    it("displays both editor and player simultaneously in split mode", async () => {
-      render(<TutorialEditorPage />);
+  describe('Split Mode Functionality', () => {
+    it('displays both editor and player simultaneously in split mode', async () => {
+      render(<TutorialEditorPage />)
 
       // Switch to split mode
-      fireEvent.click(screen.getByText("Split"));
+      fireEvent.click(screen.getByText('Split'))
 
       await waitFor(() => {
         // Should show both editor and player components
-        expect(screen.getByText("Edit Tutorial")).toBeInTheDocument();
-        expect(screen.getByTestId("mock-abacus")).toBeInTheDocument();
-        expect(screen.getByText(/Step 1 of/)).toBeInTheDocument();
-      });
+        expect(screen.getByText('Edit Tutorial')).toBeInTheDocument()
+        expect(screen.getByTestId('mock-abacus')).toBeInTheDocument()
+        expect(screen.getByText(/Step 1 of/)).toBeInTheDocument()
+      })
 
       // Should be able to interact with both sides
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
       await waitFor(() => {
-        expect(screen.getByText("Save Changes")).toBeInTheDocument();
-      });
+        expect(screen.getByText('Save Changes')).toBeInTheDocument()
+      })
 
       // Player side should still be functional
-      const bead = screen.getByTestId("mock-bead-0");
-      fireEvent.click(bead);
+      const bead = screen.getByTestId('mock-bead-0')
+      fireEvent.click(bead)
 
       await waitFor(() => {
-        const abacusValue = screen.getByTestId("abacus-value");
-        expect(abacusValue).toHaveTextContent("1");
-      });
-    });
+        const abacusValue = screen.getByTestId('abacus-value')
+        expect(abacusValue).toHaveTextContent('1')
+      })
+    })
 
-    it("synchronizes changes between editor and player in split mode", async () => {
-      render(<TutorialEditorPage />);
+    it('synchronizes changes between editor and player in split mode', async () => {
+      render(<TutorialEditorPage />)
 
-      fireEvent.click(screen.getByText("Split"));
+      fireEvent.click(screen.getByText('Split'))
 
       await waitFor(() => {
-        expect(screen.getByText("Edit Tutorial")).toBeInTheDocument();
-        expect(screen.getByTestId("mock-abacus")).toBeInTheDocument();
-      });
+        expect(screen.getByText('Edit Tutorial')).toBeInTheDocument()
+        expect(screen.getByTestId('mock-abacus')).toBeInTheDocument()
+      })
 
       // Edit tutorial in editor side
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
       await waitFor(() => {
-        expect(screen.getByText("Save Changes")).toBeInTheDocument();
-      });
+        expect(screen.getByText('Save Changes')).toBeInTheDocument()
+      })
 
-      const titleInput = screen.getByDisplayValue("Guided Addition Tutorial");
-      fireEvent.change(titleInput, { target: { value: "Modified Tutorial" } });
+      const titleInput = screen.getByDisplayValue('Guided Addition Tutorial')
+      fireEvent.change(titleInput, { target: { value: 'Modified Tutorial' } })
 
       // The changes should be reflected in the tutorial state
       // (This tests that both sides work with the same tutorial state)
-      expect(titleInput).toHaveValue("Modified Tutorial");
-    });
-  });
+      expect(titleInput).toHaveValue('Modified Tutorial')
+    })
+  })
 
-  describe("Debug and Export Features", () => {
-    it("exports debug data correctly", () => {
-      render(<TutorialEditorPage />);
+  describe('Debug and Export Features', () => {
+    it('exports debug data correctly', () => {
+      render(<TutorialEditorPage />)
 
       // Mock URL.createObjectURL and related methods
-      const mockCreateObjectURL = vi.fn(() => "mock-url");
-      const mockRevokeObjectURL = vi.fn();
-      const mockClick = vi.fn();
+      const mockCreateObjectURL = vi.fn(() => 'mock-url')
+      const mockRevokeObjectURL = vi.fn()
+      const mockClick = vi.fn()
 
-      global.URL.createObjectURL = mockCreateObjectURL;
-      global.URL.revokeObjectURL = mockRevokeObjectURL;
+      global.URL.createObjectURL = mockCreateObjectURL
+      global.URL.revokeObjectURL = mockRevokeObjectURL
 
       // Mock document.createElement to return a mock anchor element
-      const originalCreateElement = document.createElement;
+      const originalCreateElement = document.createElement
       document.createElement = vi.fn((tagName) => {
-        if (tagName === "a") {
+        if (tagName === 'a') {
           return {
-            href: "",
-            download: "",
+            href: '',
+            download: '',
             click: mockClick,
-          } as any;
+          } as any
         }
-        return originalCreateElement.call(document, tagName);
-      });
+        return originalCreateElement.call(document, tagName)
+      })
 
       // Click export button
-      fireEvent.click(screen.getByText("Export Debug"));
+      fireEvent.click(screen.getByText('Export Debug'))
 
       // Should create blob and trigger download
-      expect(mockCreateObjectURL).toHaveBeenCalled();
-      expect(mockClick).toHaveBeenCalled();
+      expect(mockCreateObjectURL).toHaveBeenCalled()
+      expect(mockClick).toHaveBeenCalled()
 
       // Restore original methods
-      document.createElement = originalCreateElement;
-    });
+      document.createElement = originalCreateElement
+    })
 
-    it("tracks events and displays them in debug panel", async () => {
-      render(<TutorialEditorPage />);
+    it('tracks events and displays them in debug panel', async () => {
+      render(<TutorialEditorPage />)
 
       // Switch to player mode to generate events
-      fireEvent.click(screen.getByText("Player"));
+      fireEvent.click(screen.getByText('Player'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("mock-abacus")).toBeInTheDocument();
-      });
+        expect(screen.getByTestId('mock-abacus')).toBeInTheDocument()
+      })
 
       // Generate some events
-      const bead = screen.getByTestId("mock-bead-0");
-      fireEvent.click(bead);
-      fireEvent.click(bead);
+      const bead = screen.getByTestId('mock-bead-0')
+      fireEvent.click(bead)
+      fireEvent.click(bead)
 
       // Should show debug events
       await waitFor(() => {
-        const debugEventsPanel = screen.queryByText("Debug Events");
+        const debugEventsPanel = screen.queryByText('Debug Events')
         if (debugEventsPanel) {
-          expect(debugEventsPanel).toBeInTheDocument();
+          expect(debugEventsPanel).toBeInTheDocument()
 
           // Should show event entries
-          const eventEntries = screen.getAllByText("VALUE_CHANGED");
-          expect(eventEntries.length).toBeGreaterThan(0);
+          const eventEntries = screen.getAllByText('VALUE_CHANGED')
+          expect(eventEntries.length).toBeGreaterThan(0)
         }
-      });
-    });
+      })
+    })
 
-    it("displays validation status correctly in debug mode", async () => {
-      render(<TutorialEditorPage />);
+    it('displays validation status correctly in debug mode', async () => {
+      render(<TutorialEditorPage />)
 
       // Debug info should be enabled by default
-      expect(
-        screen.getByText("Tutorial validation passed ✓"),
-      ).toBeInTheDocument();
+      expect(screen.getByText('Tutorial validation passed ✓')).toBeInTheDocument()
 
       // Switch to editor and make invalid changes
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
       await waitFor(() => {
-        expect(screen.getByText("Save Changes")).toBeInTheDocument();
-      });
+        expect(screen.getByText('Save Changes')).toBeInTheDocument()
+      })
 
       // Clear title to trigger validation error
-      const titleInput = screen.getByDisplayValue("Guided Addition Tutorial");
-      fireEvent.change(titleInput, { target: { value: "" } });
+      const titleInput = screen.getByDisplayValue('Guided Addition Tutorial')
+      fireEvent.change(titleInput, { target: { value: '' } })
 
       // Try to save to trigger validation
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Save Changes'))
 
       // Should show validation error status
       await waitFor(() => {
-        expect(screen.getByText(/validation error/)).toBeInTheDocument();
-      });
-    });
-  });
+        expect(screen.getByText(/validation error/)).toBeInTheDocument()
+      })
+    })
+  })
 
-  describe("Error Handling and Edge Cases", () => {
-    it("handles errors gracefully and maintains application stability", async () => {
-      render(<TutorialEditorPage />);
+  describe('Error Handling and Edge Cases', () => {
+    it('handles errors gracefully and maintains application stability', async () => {
+      render(<TutorialEditorPage />)
 
       // Test rapid mode switching
-      fireEvent.click(screen.getByText("Player"));
-      fireEvent.click(screen.getByText("Split"));
-      fireEvent.click(screen.getByText("Editor"));
+      fireEvent.click(screen.getByText('Player'))
+      fireEvent.click(screen.getByText('Split'))
+      fireEvent.click(screen.getByText('Editor'))
 
       await waitFor(() => {
-        expect(screen.getByText("Edit Tutorial")).toBeInTheDocument();
-      });
+        expect(screen.getByText('Edit Tutorial')).toBeInTheDocument()
+      })
 
       // Test that the application remains functional
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
       await waitFor(() => {
-        expect(screen.getByText("Save Changes")).toBeInTheDocument();
-      });
-    });
+        expect(screen.getByText('Save Changes')).toBeInTheDocument()
+      })
+    })
 
-    it("preserves state when switching between modes", async () => {
-      render(<TutorialEditorPage />);
+    it('preserves state when switching between modes', async () => {
+      render(<TutorialEditorPage />)
 
       // Make changes in editor mode
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
       await waitFor(() => {
-        expect(screen.getByText("Save Changes")).toBeInTheDocument();
-      });
+        expect(screen.getByText('Save Changes')).toBeInTheDocument()
+      })
 
-      const titleInput = screen.getByDisplayValue("Guided Addition Tutorial");
-      fireEvent.change(titleInput, { target: { value: "Temporary Change" } });
+      const titleInput = screen.getByDisplayValue('Guided Addition Tutorial')
+      fireEvent.change(titleInput, { target: { value: 'Temporary Change' } })
 
       // Switch to player mode
-      fireEvent.click(screen.getByText("Player"));
+      fireEvent.click(screen.getByText('Player'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("mock-abacus")).toBeInTheDocument();
-      });
+        expect(screen.getByTestId('mock-abacus')).toBeInTheDocument()
+      })
 
       // Switch back to editor mode
-      fireEvent.click(screen.getByText("Editor"));
+      fireEvent.click(screen.getByText('Editor'))
 
       await waitFor(() => {
-        expect(screen.getByText("Edit Tutorial")).toBeInTheDocument();
-      });
+        expect(screen.getByText('Edit Tutorial')).toBeInTheDocument()
+      })
 
       // Changes should be preserved in the component state
       // (Though they're not saved until explicitly saved)
-    });
+    })
 
-    it("handles window resize and responsive behavior", () => {
-      render(<TutorialEditorPage />);
+    it('handles window resize and responsive behavior', () => {
+      render(<TutorialEditorPage />)
 
       // Test that the application renders without errors
-      expect(
-        screen.getByText("Tutorial Editor & Debugger"),
-      ).toBeInTheDocument();
+      expect(screen.getByText('Tutorial Editor & Debugger')).toBeInTheDocument()
 
       // Switch to split mode which tests layout handling
-      fireEvent.click(screen.getByText("Split"));
+      fireEvent.click(screen.getByText('Split'))
 
       // Should render both panels
-      expect(screen.getByText("Edit Tutorial")).toBeInTheDocument();
-      expect(screen.getByTestId("mock-abacus")).toBeInTheDocument();
-    });
-  });
-});
+      expect(screen.getByText('Edit Tutorial')).toBeInTheDocument()
+      expect(screen.getByTestId('mock-abacus')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/apps/web/src/app/tutorial-editor/page.tsx b/apps/web/src/app/tutorial-editor/page.tsx
index caae438d..b974ef9e 100644
--- a/apps/web/src/app/tutorial-editor/page.tsx
+++ b/apps/web/src/app/tutorial-editor/page.tsx
@@ -1,113 +1,104 @@
-"use client";
+'use client'
 
-import { useCallback, useState } from "react";
-import Resizable from "react-resizable-layout";
-import { TutorialEditor } from "@/components/tutorial/TutorialEditor";
-import { TutorialPlayer } from "@/components/tutorial/TutorialPlayer";
-import { DevAccessProvider, EditorProtected } from "@/hooks/useAccessControl";
+import { useCallback, useState } from 'react'
+import Resizable from 'react-resizable-layout'
+import { TutorialEditor } from '@/components/tutorial/TutorialEditor'
+import { TutorialPlayer } from '@/components/tutorial/TutorialPlayer'
+import { DevAccessProvider, EditorProtected } from '@/hooks/useAccessControl'
 import type {
   StepValidationError,
   Tutorial,
   TutorialEvent,
   TutorialValidation,
-} from "@/types/tutorial";
-import {
-  getTutorialForEditor,
-  validateTutorialConversion,
-} from "@/utils/tutorialConverter";
-import { css } from "../../../styled-system/css";
-import { hstack, vstack } from "../../../styled-system/patterns";
+} from '@/types/tutorial'
+import { getTutorialForEditor, validateTutorialConversion } from '@/utils/tutorialConverter'
+import { css } from '../../../styled-system/css'
+import { hstack, vstack } from '../../../styled-system/patterns'
 
 interface EditorMode {
-  mode: "editor" | "player" | "split";
-  showDebugInfo: boolean;
-  autoSave: boolean;
-  editingTitle: boolean;
+  mode: 'editor' | 'player' | 'split'
+  showDebugInfo: boolean
+  autoSave: boolean
+  editingTitle: boolean
 }
 
 export default function TutorialEditorPage() {
-  const [tutorial, setTutorial] = useState<Tutorial>(() =>
-    getTutorialForEditor(),
-  );
+  const [tutorial, setTutorial] = useState<Tutorial>(() => getTutorialForEditor())
   const [editorMode, setEditorMode] = useState<EditorMode>({
-    mode: "editor",
+    mode: 'editor',
     showDebugInfo: true,
     autoSave: false,
     editingTitle: false,
-  });
-  const [saveStatus, setSaveStatus] = useState<
-    "idle" | "saving" | "saved" | "error"
-  >("idle");
-  const [validationResult, setValidationResult] = useState<TutorialValidation>(
-    () => {
-      const result = validateTutorialConversion();
-      return {
-        isValid: result.isValid,
-        errors: result.errors.map((error) => ({
-          stepId: "",
-          field: "general",
-          message: error,
-          severity: "error" as const,
-        })),
-        warnings: [],
-      };
-    },
-  );
-  const [debugEvents, setDebugEvents] = useState<TutorialEvent[]>([]);
+  })
+  const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle')
+  const [validationResult, setValidationResult] = useState<TutorialValidation>(() => {
+    const result = validateTutorialConversion()
+    return {
+      isValid: result.isValid,
+      errors: result.errors.map((error) => ({
+        stepId: '',
+        field: 'general',
+        message: error,
+        severity: 'error' as const,
+      })),
+      warnings: [],
+    }
+  })
+  const [debugEvents, setDebugEvents] = useState<TutorialEvent[]>([])
 
   // Save tutorial (placeholder - would connect to actual backend)
   const handleSave = useCallback(async (updatedTutorial: Tutorial) => {
-    setSaveStatus("saving");
+    setSaveStatus('saving')
     try {
       // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 1000));
+      await new Promise((resolve) => setTimeout(resolve, 1000))
 
       // In real implementation, this would save to backend
-      console.log("Saving tutorial:", updatedTutorial);
+      console.log('Saving tutorial:', updatedTutorial)
 
-      setTutorial(updatedTutorial);
-      setSaveStatus("saved");
+      setTutorial(updatedTutorial)
+      setSaveStatus('saved')
 
       // Reset status after 2 seconds
-      setTimeout(() => setSaveStatus("idle"), 2000);
+      setTimeout(() => setSaveStatus('idle'), 2000)
     } catch (error) {
-      console.error("Failed to save tutorial:", error);
-      setSaveStatus("error");
+      console.error('Failed to save tutorial:', error)
+      setSaveStatus('error')
     }
-  }, []);
+  }, [])
 
   // Validate tutorial (enhanced validation)
   const handleValidate = useCallback(
     async (tutorialToValidate: Tutorial): Promise<TutorialValidation> => {
-      const errors: StepValidationError[] = [];
-      const warnings: StepValidationError[] = [];
+      const errors: StepValidationError[] = []
+      const warnings: StepValidationError[] = []
 
       // Validate tutorial metadata
       if (!tutorialToValidate.title.trim()) {
         errors.push({
-          stepId: "",
-          field: "title",
-          message: "Tutorial title is required",
-          severity: "error",
-        });
+          stepId: '',
+          field: 'title',
+          message: 'Tutorial title is required',
+          severity: 'error',
+        })
       }
 
       if (!tutorialToValidate.description.trim()) {
         warnings.push({
-          stepId: "",
-          field: "description",
-          message: "Tutorial description is recommended",
-          severity: "warning",
-        });
+          stepId: '',
+          field: 'description',
+          message: 'Tutorial description is recommended',
+          severity: 'warning',
+        })
       }
 
       if (tutorialToValidate.steps.length === 0) {
         errors.push({
-          stepId: "",
-          field: "steps",
-          message: "Tutorial must have at least one step",
-          severity: "error",
-        });
+          stepId: '',
+          field: 'steps',
+          message: 'Tutorial must have at least one step',
+          severity: 'error',
+        })
       }
 
       // Validate each step
@@ -116,47 +107,47 @@ export default function TutorialEditorPage() {
         if (!step.title.trim()) {
           errors.push({
             stepId: step.id,
-            field: "title",
+            field: 'title',
             message: `Step ${index + 1}: Title is required`,
-            severity: "error",
-          });
+            severity: 'error',
+          })
         }
 
         if (!step.problem.trim()) {
           errors.push({
             stepId: step.id,
-            field: "problem",
+            field: 'problem',
             message: `Step ${index + 1}: Problem is required`,
-            severity: "error",
-          });
+            severity: 'error',
+          })
         }
 
         if (!step.description.trim()) {
           warnings.push({
             stepId: step.id,
-            field: "description",
+            field: 'description',
             message: `Step ${index + 1}: Description is recommended`,
-            severity: "warning",
-          });
+            severity: 'warning',
+          })
         }
 
         // Value validation
         if (step.startValue < 0 || step.targetValue < 0) {
           errors.push({
             stepId: step.id,
-            field: "values",
+            field: 'values',
             message: `Step ${index + 1}: Values cannot be negative`,
-            severity: "error",
-          });
+            severity: 'error',
+          })
         }
 
         if (step.startValue === step.targetValue) {
           warnings.push({
             stepId: step.id,
-            field: "values",
+            field: 'values',
             message: `Step ${index + 1}: Start and target values are the same`,
-            severity: "warning",
-          });
+            severity: 'warning',
+          })
         }
 
         // Highlight beads validation
@@ -165,40 +156,34 @@ export default function TutorialEditorPage() {
             if (highlight.placeValue < 0 || highlight.placeValue > 4) {
               errors.push({
                 stepId: step.id,
-                field: "highlightBeads",
+                field: 'highlightBeads',
                 message: `Step ${index + 1}: Highlight bead ${bIndex + 1} has invalid place value`,
-                severity: "error",
-              });
+                severity: 'error',
+              })
             }
 
-            if (
-              highlight.beadType === "earth" &&
-              highlight.position !== undefined
-            ) {
+            if (highlight.beadType === 'earth' && highlight.position !== undefined) {
               if (highlight.position < 0 || highlight.position > 3) {
                 errors.push({
                   stepId: step.id,
-                  field: "highlightBeads",
+                  field: 'highlightBeads',
                   message: `Step ${index + 1}: Earth bead position must be 0-3`,
-                  severity: "error",
-                });
+                  severity: 'error',
+                })
               }
             }
-          });
+          })
         }
 
         // Multi-step validation
-        if (step.expectedAction === "multi-step") {
-          if (
-            !step.multiStepInstructions ||
-            step.multiStepInstructions.length === 0
-          ) {
+        if (step.expectedAction === 'multi-step') {
+          if (!step.multiStepInstructions || step.multiStepInstructions.length === 0) {
             errors.push({
               stepId: step.id,
-              field: "multiStepInstructions",
+              field: 'multiStepInstructions',
               message: `Step ${index + 1}: Multi-step actions require instructions`,
-              severity: "error",
-            });
+              severity: 'error',
+            })
           }
         }
 
@@ -206,60 +191,57 @@ export default function TutorialEditorPage() {
         if (!step.tooltip.content.trim() || !step.tooltip.explanation.trim()) {
           warnings.push({
             stepId: step.id,
-            field: "tooltip",
+            field: 'tooltip',
             message: `Step ${index + 1}: Tooltip content should be complete`,
-            severity: "warning",
-          });
+            severity: 'warning',
+          })
         }
 
         // Error messages validation removed - errorMessages property no longer exists
         // Bead diff tooltip provides better guidance instead
-      });
+      })
 
       const validation: TutorialValidation = {
         isValid: errors.length === 0,
         errors,
         warnings,
-      };
+      }
 
-      setValidationResult(validation);
-      return validation;
+      setValidationResult(validation)
+      return validation
     },
-    [],
-  );
+    []
+  )
 
   // Preview step in player mode
-  const handlePreview = useCallback(
-    (tutorialToPreview: Tutorial, _stepIndex: number) => {
-      setTutorial(tutorialToPreview);
-      setEditorMode((prev) => ({ ...prev, mode: "player" }));
-      // The TutorialPlayer will handle jumping to the specific step
-    },
-    [],
-  );
+  const handlePreview = useCallback((tutorialToPreview: Tutorial, _stepIndex: number) => {
+    setTutorial(tutorialToPreview)
+    setEditorMode((prev) => ({ ...prev, mode: 'player' }))
+    // The TutorialPlayer will handle jumping to the specific step
+  }, [])
 
   // Handle debug events from player
   const handleDebugEvent = useCallback((event: TutorialEvent) => {
-    setDebugEvents((prev) => [...prev.slice(-50), event]); // Keep last 50 events
-  }, []);
+    setDebugEvents((prev) => [...prev.slice(-50), event]) // Keep last 50 events
+  }, [])
 
   // Mode switching
-  const switchMode = useCallback((mode: EditorMode["mode"]) => {
-    setEditorMode((prev) => ({ ...prev, mode }));
-  }, []);
+  const switchMode = useCallback((mode: EditorMode['mode']) => {
+    setEditorMode((prev) => ({ ...prev, mode }))
+  }, [])
 
   const toggleDebugInfo = useCallback(() => {
-    setEditorMode((prev) => ({ ...prev, showDebugInfo: !prev.showDebugInfo }));
-  }, []);
+    setEditorMode((prev) => ({ ...prev, showDebugInfo: !prev.showDebugInfo }))
+  }, [])
 
   const toggleAutoSave = useCallback(() => {
-    setEditorMode((prev) => ({ ...prev, autoSave: !prev.autoSave }));
-  }, []);
+    setEditorMode((prev) => ({ ...prev, autoSave: !prev.autoSave }))
+  }, [])
 
   // Tutorial metadata update
   const updateTutorialTitle = useCallback((title: string) => {
-    setTutorial((prev) => ({ ...prev, title, updatedAt: new Date() }));
-  }, []);
+    setTutorial((prev) => ({ ...prev, title, updatedAt: new Date() }))
+  }, [])
 
   // Export tutorial data for debugging
   const exportTutorialData = useCallback(() => {
@@ -268,18 +250,18 @@ export default function TutorialEditorPage() {
       validation: validationResult,
       debugEvents: debugEvents.slice(-20),
       timestamp: new Date().toISOString(),
-    };
+    }
 
     const blob = new Blob([JSON.stringify(data, null, 2)], {
-      type: "application/json",
-    });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `tutorial-debug-${Date.now()}.json`;
-    a.click();
-    URL.revokeObjectURL(url);
-  }, [tutorial, validationResult, debugEvents]);
+      type: 'application/json',
+    })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `tutorial-debug-${Date.now()}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+  }, [tutorial, validationResult, debugEvents])
 
   return (
     <DevAccessProvider>
@@ -287,23 +269,21 @@ export default function TutorialEditorPage() {
         fallback={
           <div
             className={css({
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              height: "100vh",
-              textAlign: "center",
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              height: '100vh',
+              textAlign: 'center',
             })}
           >
             <div>
-              <h1
-                className={css({ fontSize: "2xl", fontWeight: "bold", mb: 4 })}
-              >
+              <h1 className={css({ fontSize: '2xl', fontWeight: 'bold', mb: 4 })}>
                 Access Restricted
               </h1>
-              <p className={css({ color: "gray.600", mb: 4 })}>
+              <p className={css({ color: 'gray.600', mb: 4 })}>
                 Tutorial editor requires administrative privileges.
               </p>
-              <p className={css({ fontSize: "sm", color: "gray.500" })}>
+              <p className={css({ fontSize: 'sm', color: 'gray.500' })}>
                 In development mode, this would check your actual permissions.
               </p>
             </div>
@@ -312,46 +292,43 @@ export default function TutorialEditorPage() {
       >
         <div
           className={css({
-            height: "calc(100vh - 80px)",
-            width: "100vw",
-            overflow: "hidden",
+            height: 'calc(100vh - 80px)',
+            width: '100vw',
+            overflow: 'hidden',
           })}
         >
           <Resizable axis="y" initial={120} min={80} max={200} step={1}>
-            {({
-              position: headerHeight,
-              separatorProps: headerSeparatorProps,
-            }) => (
+            {({ position: headerHeight, separatorProps: headerSeparatorProps }) => (
               <div
                 className={css({
-                  height: "calc(100vh - 80px)",
-                  display: "flex",
-                  flexDirection: "column",
+                  height: 'calc(100vh - 80px)',
+                  display: 'flex',
+                  flexDirection: 'column',
                 })}
               >
                 {/* Header controls - Fixed height */}
                 <div
                   className={css({
                     height: `${headerHeight}px`,
-                    bg: "white",
-                    borderBottom: "1px solid",
-                    borderColor: "gray.200",
+                    bg: 'white',
+                    borderBottom: '1px solid',
+                    borderColor: 'gray.200',
                     p: 4,
-                    overflowY: "auto",
+                    overflowY: 'auto',
                     flexShrink: 0,
                   })}
                 >
                   <div
                     className={hstack({
-                      justifyContent: "space-between",
-                      alignItems: "center",
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
                     })}
                   >
                     <div>
                       <h1
                         className={css({
-                          fontSize: "xl",
-                          fontWeight: "bold",
+                          fontSize: 'xl',
+                          fontWeight: 'bold',
                           mb: 1,
                         })}
                       >
@@ -359,8 +336,8 @@ export default function TutorialEditorPage() {
                       </h1>
                       <div
                         className={css({
-                          display: "flex",
-                          alignItems: "center",
+                          display: 'flex',
+                          alignItems: 'center',
                           gap: 2,
                         })}
                       >
@@ -368,9 +345,7 @@ export default function TutorialEditorPage() {
                           <input
                             type="text"
                             value={tutorial.title}
-                            onChange={(e) =>
-                              updateTutorialTitle(e.target.value)
-                            }
+                            onChange={(e) => updateTutorialTitle(e.target.value)}
                             onBlur={() =>
                               setEditorMode((prev) => ({
                                 ...prev,
@@ -378,22 +353,22 @@ export default function TutorialEditorPage() {
                               }))
                             }
                             onKeyDown={(e) => {
-                              if (e.key === "Enter" || e.key === "Escape") {
+                              if (e.key === 'Enter' || e.key === 'Escape') {
                                 setEditorMode((prev) => ({
                                   ...prev,
                                   editingTitle: false,
-                                }));
+                                }))
                               }
                             }}
                             className={css({
-                              fontSize: "lg",
-                              fontWeight: "medium",
+                              fontSize: 'lg',
+                              fontWeight: 'medium',
                               p: 1,
-                              border: "1px solid",
-                              borderColor: "blue.300",
-                              borderRadius: "sm",
-                              bg: "white",
-                              minWidth: "300px",
+                              border: '1px solid',
+                              borderColor: 'blue.300',
+                              borderRadius: 'sm',
+                              bg: 'white',
+                              minWidth: '300px',
                             })}
                           />
                         ) : (
@@ -405,20 +380,18 @@ export default function TutorialEditorPage() {
                               }))
                             }
                             className={css({
-                              fontSize: "lg",
-                              fontWeight: "medium",
-                              cursor: "pointer",
+                              fontSize: 'lg',
+                              fontWeight: 'medium',
+                              cursor: 'pointer',
                               p: 1,
-                              borderRadius: "sm",
-                              _hover: { bg: "gray.50" },
+                              borderRadius: 'sm',
+                              _hover: { bg: 'gray.50' },
                             })}
                           >
                             {tutorial.title}
                           </span>
                         )}
-                        <span
-                          className={css({ fontSize: "sm", color: "gray.500" })}
-                        >
+                        <span className={css({ fontSize: 'sm', color: 'gray.500' })}>
                           - {tutorial.steps.length} steps
                         </span>
                       </div>
@@ -427,48 +400,34 @@ export default function TutorialEditorPage() {
                     <div className={hstack({ gap: 4 })}>
                       {/* Mode selector */}
                       <div className={hstack({ gap: 1 })}>
-                        {(["editor", "player", "split"] as const).map(
-                          (mode) => (
-                            <button
-                              key={mode}
-                              onClick={() => switchMode(mode)}
-                              className={css({
-                                px: 3,
-                                py: 1,
-                                fontSize: "sm",
-                                border: "1px solid",
-                                borderColor:
-                                  editorMode.mode === mode
-                                    ? "blue.300"
-                                    : "gray.300",
-                                borderRadius: "md",
-                                bg:
-                                  editorMode.mode === mode
-                                    ? "blue.500"
-                                    : "white",
-                                color:
-                                  editorMode.mode === mode
-                                    ? "white"
-                                    : "gray.700",
-                                cursor: "pointer",
-                                textTransform: "capitalize",
-                                _hover: {
-                                  bg:
-                                    editorMode.mode === mode
-                                      ? "blue.600"
-                                      : "gray.50",
-                                },
-                              })}
-                            >
-                              {mode}
-                            </button>
-                          ),
-                        )}
+                        {(['editor', 'player', 'split'] as const).map((mode) => (
+                          <button
+                            key={mode}
+                            onClick={() => switchMode(mode)}
+                            className={css({
+                              px: 3,
+                              py: 1,
+                              fontSize: 'sm',
+                              border: '1px solid',
+                              borderColor: editorMode.mode === mode ? 'blue.300' : 'gray.300',
+                              borderRadius: 'md',
+                              bg: editorMode.mode === mode ? 'blue.500' : 'white',
+                              color: editorMode.mode === mode ? 'white' : 'gray.700',
+                              cursor: 'pointer',
+                              textTransform: 'capitalize',
+                              _hover: {
+                                bg: editorMode.mode === mode ? 'blue.600' : 'gray.50',
+                              },
+                            })}
+                          >
+                            {mode}
+                          </button>
+                        ))}
                       </div>
 
                       {/* Options */}
                       <div className={hstack({ gap: 2 })}>
-                        <label className={hstack({ gap: 1, fontSize: "sm" })}>
+                        <label className={hstack({ gap: 1, fontSize: 'sm' })}>
                           <input
                             type="checkbox"
                             checked={editorMode.showDebugInfo}
@@ -477,7 +436,7 @@ export default function TutorialEditorPage() {
                           Debug Info
                         </label>
 
-                        <label className={hstack({ gap: 1, fontSize: "sm" })}>
+                        <label className={hstack({ gap: 1, fontSize: 'sm' })}>
                           <input
                             type="checkbox"
                             checked={editorMode.autoSave}
@@ -494,44 +453,44 @@ export default function TutorialEditorPage() {
                           className={css({
                             px: 3,
                             py: 1,
-                            fontSize: "sm",
-                            border: "1px solid",
-                            borderColor: "gray.300",
-                            borderRadius: "md",
-                            bg: "white",
-                            cursor: "pointer",
-                            _hover: { bg: "gray.50" },
+                            fontSize: 'sm',
+                            border: '1px solid',
+                            borderColor: 'gray.300',
+                            borderRadius: 'md',
+                            bg: 'white',
+                            cursor: 'pointer',
+                            _hover: { bg: 'gray.50' },
                           })}
                         >
                           Export Debug
                         </button>
 
-                        {saveStatus !== "idle" && (
+                        {saveStatus !== 'idle' && (
                           <div
                             className={css({
                               px: 3,
                               py: 1,
-                              fontSize: "sm",
-                              borderRadius: "md",
+                              fontSize: 'sm',
+                              borderRadius: 'md',
                               bg:
-                                saveStatus === "saving"
-                                  ? "blue.100"
-                                  : saveStatus === "saved"
-                                    ? "green.100"
-                                    : "red.100",
+                                saveStatus === 'saving'
+                                  ? 'blue.100'
+                                  : saveStatus === 'saved'
+                                    ? 'green.100'
+                                    : 'red.100',
                               color:
-                                saveStatus === "saving"
-                                  ? "blue.700"
-                                  : saveStatus === "saved"
-                                    ? "green.700"
-                                    : "red.700",
+                                saveStatus === 'saving'
+                                  ? 'blue.700'
+                                  : saveStatus === 'saved'
+                                    ? 'green.700'
+                                    : 'red.700',
                             })}
                           >
-                            {saveStatus === "saving"
-                              ? "Saving..."
-                              : saveStatus === "saved"
-                                ? "Saved!"
-                                : "Error!"}
+                            {saveStatus === 'saving'
+                              ? 'Saving...'
+                              : saveStatus === 'saved'
+                                ? 'Saved!'
+                                : 'Error!'}
                           </div>
                         )}
                       </div>
@@ -545,53 +504,46 @@ export default function TutorialEditorPage() {
                         <div
                           className={css({
                             p: 2,
-                            bg: "red.50",
-                            border: "1px solid",
-                            borderColor: "red.200",
-                            borderRadius: "md",
-                            fontSize: "sm",
+                            bg: 'red.50',
+                            border: '1px solid',
+                            borderColor: 'red.200',
+                            borderRadius: 'md',
+                            fontSize: 'sm',
                           })}
                         >
-                          <strong className={css({ color: "red.800" })}>
-                            {validationResult.errors?.length || 0} validation
-                            error(s)
+                          <strong className={css({ color: 'red.800' })}>
+                            {validationResult.errors?.length || 0} validation error(s)
                           </strong>
-                          {validationResult.warnings &&
-                            validationResult.warnings.length > 0 && (
-                              <span
-                                className={css({ color: "yellow.700", ml: 2 })}
-                              >
-                                and {validationResult.warnings.length}{" "}
-                                warning(s)
-                              </span>
-                            )}
+                          {validationResult.warnings && validationResult.warnings.length > 0 && (
+                            <span className={css({ color: 'yellow.700', ml: 2 })}>
+                              and {validationResult.warnings.length} warning(s)
+                            </span>
+                          )}
                         </div>
-                      ) : validationResult.warnings &&
-                        validationResult.warnings.length > 0 ? (
+                      ) : validationResult.warnings && validationResult.warnings.length > 0 ? (
                         <div
                           className={css({
                             p: 2,
-                            bg: "yellow.50",
-                            border: "1px solid",
-                            borderColor: "yellow.200",
-                            borderRadius: "md",
-                            fontSize: "sm",
-                            color: "yellow.700",
+                            bg: 'yellow.50',
+                            border: '1px solid',
+                            borderColor: 'yellow.200',
+                            borderRadius: 'md',
+                            fontSize: 'sm',
+                            color: 'yellow.700',
                           })}
                         >
-                          Tutorial is valid with{" "}
-                          {validationResult.warnings?.length || 0} warning(s)
+                          Tutorial is valid with {validationResult.warnings?.length || 0} warning(s)
                         </div>
                       ) : (
                         <div
                           className={css({
                             p: 2,
-                            bg: "green.50",
-                            border: "1px solid",
-                            borderColor: "green.200",
-                            borderRadius: "md",
-                            fontSize: "sm",
-                            color: "green.700",
+                            bg: 'green.50',
+                            border: '1px solid',
+                            borderColor: 'green.200',
+                            borderRadius: 'md',
+                            fontSize: 'sm',
+                            color: 'green.700',
                           })}
                         >
                           Tutorial validation passed ✓
@@ -605,13 +557,13 @@ export default function TutorialEditorPage() {
                 <hr
                   {...headerSeparatorProps}
                   className={css({
-                    height: "4px",
-                    width: "100%",
-                    border: "none",
-                    bg: "gray.300",
-                    cursor: "ns-resize",
-                    _hover: { bg: "blue.400" },
-                    transition: "background-color 0.2s",
+                    height: '4px',
+                    width: '100%',
+                    border: 'none',
+                    bg: 'gray.300',
+                    cursor: 'ns-resize',
+                    _hover: { bg: 'blue.400' },
+                    transition: 'background-color 0.2s',
                     flexShrink: 0,
                   })}
                 />
@@ -620,11 +572,11 @@ export default function TutorialEditorPage() {
                 <div
                   className={css({
                     height: `calc(100vh - 80px - ${headerHeight}px - 4px)`,
-                    display: "flex",
-                    overflow: "hidden",
+                    display: 'flex',
+                    overflow: 'hidden',
                   })}
                 >
-                  {editorMode.mode === "editor" && (
+                  {editorMode.mode === 'editor' && (
                     <TutorialEditor
                       tutorial={tutorial}
                       onSave={handleSave}
@@ -633,46 +585,37 @@ export default function TutorialEditorPage() {
                     />
                   )}
 
-                  {editorMode.mode === "player" && (
+                  {editorMode.mode === 'player' && (
                     <TutorialPlayer
                       tutorial={tutorial}
                       isDebugMode={true}
                       showDebugPanel={editorMode.showDebugInfo}
                       onEvent={handleDebugEvent}
                       onTutorialComplete={(score, timeSpent) => {
-                        console.log("Tutorial completed:", {
+                        console.log('Tutorial completed:', {
                           score,
                           timeSpent,
-                        });
+                        })
                       }}
                     />
                   )}
 
-                  {editorMode.mode === "split" && (
-                    <Resizable
-                      axis="x"
-                      initial={800}
-                      min={400}
-                      max={1200}
-                      step={1}
-                    >
-                      {({
-                        position: splitPosition,
-                        separatorProps: splitSeparatorProps,
-                      }) => (
+                  {editorMode.mode === 'split' && (
+                    <Resizable axis="x" initial={800} min={400} max={1200} step={1}>
+                      {({ position: splitPosition, separatorProps: splitSeparatorProps }) => (
                         <div
                           className={css({
-                            display: "flex",
-                            width: "100%",
-                            height: "100%",
+                            display: 'flex',
+                            width: '100%',
+                            height: '100%',
                           })}
                         >
                           <div
                             className={css({
                               width: `${splitPosition}px`,
-                              height: "100%",
-                              borderRight: "1px solid",
-                              borderColor: "gray.200",
+                              height: '100%',
+                              borderRight: '1px solid',
+                              borderColor: 'gray.200',
                               flexShrink: 0,
                             })}
                           >
@@ -688,13 +631,13 @@ export default function TutorialEditorPage() {
                           <hr
                             {...splitSeparatorProps}
                             className={css({
-                              width: "4px",
-                              height: "100%",
-                              border: "none",
-                              bg: "gray.300",
-                              cursor: "ew-resize",
-                              _hover: { bg: "blue.400" },
-                              transition: "background-color 0.2s",
+                              width: '4px',
+                              height: '100%',
+                              border: 'none',
+                              bg: 'gray.300',
+                              cursor: 'ew-resize',
+                              _hover: { bg: 'blue.400' },
+                              transition: 'background-color 0.2s',
                               flexShrink: 0,
                             })}
                           />
@@ -702,7 +645,7 @@ export default function TutorialEditorPage() {
                           <div
                             className={css({
                               width: `calc(100% - ${splitPosition}px - 4px)`,
-                              height: "100%",
+                              height: '100%',
                             })}
                           >
                             <TutorialPlayer
@@ -725,56 +668,49 @@ export default function TutorialEditorPage() {
           {editorMode.showDebugInfo && debugEvents.length > 0 && (
             <div
               className={css({
-                position: "fixed",
+                position: 'fixed',
                 bottom: 0,
                 left: 0,
                 right: 0,
-                maxHeight: "200px",
-                bg: "gray.900",
-                color: "white",
+                maxHeight: '200px',
+                bg: 'gray.900',
+                color: 'white',
                 p: 4,
-                overflowY: "auto",
-                fontFamily: "mono",
-                fontSize: "xs",
+                overflowY: 'auto',
+                fontFamily: 'mono',
+                fontSize: 'xs',
                 zIndex: 1000,
               })}
             >
-              <h4 className={css({ fontWeight: "bold", mb: 2 })}>
+              <h4 className={css({ fontWeight: 'bold', mb: 2 })}>
                 Debug Events ({debugEvents.length})
               </h4>
-              <div className={vstack({ gap: 1, alignItems: "flex-start" })}>
+              <div className={vstack({ gap: 1, alignItems: 'flex-start' })}>
                 {debugEvents
                   .slice(-10)
                   .reverse()
                   .map((event, index) => (
-                    <div
-                      key={index}
-                      className={css({ opacity: 1 - index * 0.1 })}
-                    >
-                      <span className={css({ color: "blue.300" })}>
+                    <div key={index} className={css({ opacity: 1 - index * 0.1 })}>
+                      <span className={css({ color: 'blue.300' })}>
                         {event.timestamp.toLocaleTimeString()}
-                      </span>{" "}
-                      <span className={css({ color: "green.300" })}>
-                        {event.type}
-                      </span>{" "}
-                      {event.type === "VALUE_CHANGED" && (
+                      </span>{' '}
+                      <span className={css({ color: 'green.300' })}>{event.type}</span>{' '}
+                      {event.type === 'VALUE_CHANGED' && (
                         <span>
                           {event.oldValue} → {event.newValue}
                         </span>
                       )}
-                      {event.type === "STEP_COMPLETED" && (
+                      {event.type === 'STEP_COMPLETED' && (
                         <span
                           className={css({
-                            color: event.success ? "green.400" : "red.400",
+                            color: event.success ? 'green.400' : 'red.400',
                           })}
                         >
-                          {event.success ? "SUCCESS" : "FAILED"}
+                          {event.success ? 'SUCCESS' : 'FAILED'}
                         </span>
                       )}
-                      {event.type === "ERROR_OCCURRED" && (
-                        <span className={css({ color: "red.400" })}>
-                          {event.error}
-                        </span>
+                      {event.type === 'ERROR_OCCURRED' && (
+                        <span className={css({ color: 'red.400' })}>{event.error}</span>
                       )}
                     </div>
                   ))}
@@ -784,5 +720,5 @@ export default function TutorialEditorPage() {
         </div>
       </EditorProtected>
     </DevAccessProvider>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/card-sorting/Provider.tsx b/apps/web/src/arcade-games/card-sorting/Provider.tsx
index 4c83f620..75c1be8b 100644
--- a/apps/web/src/arcade-games/card-sorting/Provider.tsx
+++ b/apps/web/src/arcade-games/card-sorting/Provider.tsx
@@ -1,78 +1,66 @@
-"use client";
+'use client'
 
-import {
-  type ReactNode,
-  useCallback,
-  useMemo,
-  createContext,
-  useContext,
-  useState,
-} from "react";
-import { useArcadeSession } from "@/hooks/useArcadeSession";
-import { useRoomData, useUpdateGameConfig } from "@/hooks/useRoomData";
-import { useViewerId } from "@/hooks/useViewerId";
-import { buildPlayerMetadata as buildPlayerMetadataUtil } from "@/lib/arcade/player-ownership.client";
-import type { GameMove } from "@/lib/arcade/validation";
-import { useGameMode } from "@/contexts/GameModeContext";
-import { generateRandomCards, shuffleCards } from "./utils/cardGeneration";
+import { type ReactNode, useCallback, useMemo, createContext, useContext, useState } from 'react'
+import { useArcadeSession } from '@/hooks/useArcadeSession'
+import { useRoomData, useUpdateGameConfig } from '@/hooks/useRoomData'
+import { useViewerId } from '@/hooks/useViewerId'
+import { buildPlayerMetadata as buildPlayerMetadataUtil } from '@/lib/arcade/player-ownership.client'
+import type { GameMove } from '@/lib/arcade/validation'
+import { useGameMode } from '@/contexts/GameModeContext'
+import { generateRandomCards, shuffleCards } from './utils/cardGeneration'
 import type {
   CardSortingState,
   CardSortingMove,
   SortingCard,
   CardSortingConfig,
   CardPosition,
-} from "./types";
+} from './types'
 
 // Context value interface
 interface CardSortingContextValue {
-  state: CardSortingState;
+  state: CardSortingState
   // Actions
-  startGame: () => void;
-  placeCard: (cardId: string, position: number) => void;
-  insertCard: (cardId: string, insertPosition: number) => void;
-  removeCard: (position: number) => void;
-  checkSolution: (finalSequence?: SortingCard[]) => void;
-  goToSetup: () => void;
-  resumeGame: () => void;
-  setConfig: (
-    field: "cardCount" | "timeLimit" | "gameMode",
-    value: unknown,
-  ) => void;
-  updateCardPositions: (positions: CardPosition[]) => void;
-  exitSession: () => void;
+  startGame: () => void
+  placeCard: (cardId: string, position: number) => void
+  insertCard: (cardId: string, insertPosition: number) => void
+  removeCard: (position: number) => void
+  checkSolution: (finalSequence?: SortingCard[]) => void
+  goToSetup: () => void
+  resumeGame: () => void
+  setConfig: (field: 'cardCount' | 'timeLimit' | 'gameMode', value: unknown) => void
+  updateCardPositions: (positions: CardPosition[]) => void
+  exitSession: () => void
   // Computed
-  canCheckSolution: boolean;
-  placedCount: number;
-  elapsedTime: number;
-  hasConfigChanged: boolean;
-  canResumeGame: boolean;
+  canCheckSolution: boolean
+  placedCount: number
+  elapsedTime: number
+  hasConfigChanged: boolean
+  canResumeGame: boolean
   // UI state
-  selectedCardId: string | null;
-  selectCard: (cardId: string | null) => void;
+  selectedCardId: string | null
+  selectCard: (cardId: string | null) => void
   // Spectator mode
-  localPlayerId: string | undefined;
-  isSpectating: boolean;
+  localPlayerId: string | undefined
+  isSpectating: boolean
   // Multiplayer
-  players: Map<string, { id: string; name: string; emoji: string }>; // All room players
+  players: Map<string, { id: string; name: string; emoji: string }> // All room players
 }
 
 // Create context
-const CardSortingContext = createContext<CardSortingContextValue | null>(null);
+const CardSortingContext = createContext<CardSortingContextValue | null>(null)
 
 // Initial state matching validator's getInitialState
-const createInitialState = (
-  config: Partial<CardSortingConfig>,
-): CardSortingState => ({
+const createInitialState = (config: Partial<CardSortingConfig>): CardSortingState => ({
   cardCount: config.cardCount ?? 8,
   timeLimit: config.timeLimit ?? null,
-  gameMode: config.gameMode ?? "solo",
-  gamePhase: "setup",
-  playerId: "",
+  gameMode: config.gameMode ?? 'solo',
+  gamePhase: 'setup',
+  playerId: '',
   playerMetadata: {
-    id: "",
-    name: "",
-    emoji: "",
-    userId: "",
+    id: '',
+    name: '',
+    emoji: '',
+    userId: '',
   },
   activePlayers: [],
   allPlayerMetadata: new Map(),
@@ -86,33 +74,26 @@ const createInitialState = (
   cursorPositions: new Map(),
   selectedCardId: null,
   scoreBreakdown: null,
-});
+})
 
 /**
  * Optimistic move application (client-side prediction)
  */
-function applyMoveOptimistically(
-  state: CardSortingState,
-  move: GameMove,
-): CardSortingState {
-  const typedMove = move as CardSortingMove;
+function applyMoveOptimistically(state: CardSortingState, move: GameMove): CardSortingState {
+  const typedMove = move as CardSortingMove
 
   switch (typedMove.type) {
-    case "START_GAME": {
-      const selectedCards = typedMove.data.selectedCards as SortingCard[];
-      const correctOrder = [...selectedCards].sort(
-        (a, b) => a.number - b.number,
-      );
+    case 'START_GAME': {
+      const selectedCards = typedMove.data.selectedCards as SortingCard[]
+      const correctOrder = [...selectedCards].sort((a, b) => a.number - b.number)
 
       return {
         ...state,
-        gamePhase: "playing",
+        gamePhase: 'playing',
         playerId: typedMove.playerId,
         playerMetadata: typedMove.data.playerMetadata,
         activePlayers: [typedMove.playerId],
-        allPlayerMetadata: new Map([
-          [typedMove.playerId, typedMove.data.playerMetadata],
-        ]),
+        allPlayerMetadata: new Map([[typedMove.playerId, typedMove.data.playerMetadata]]),
         gameStartTime: Date.now(),
         selectedCards,
         correctOrder,
@@ -127,113 +108,113 @@ function applyMoveOptimistically(
         },
         pausedGamePhase: undefined,
         pausedGameState: undefined,
-      };
+      }
     }
 
-    case "PLACE_CARD": {
-      const { cardId, position } = typedMove.data;
-      const card = state.availableCards.find((c) => c.id === cardId);
-      if (!card) return state;
+    case 'PLACE_CARD': {
+      const { cardId, position } = typedMove.data
+      const card = state.availableCards.find((c) => c.id === cardId)
+      if (!card) return state
 
       // Simple replacement (can leave gaps)
-      const newPlaced = [...state.placedCards];
-      const replacedCard = newPlaced[position];
-      newPlaced[position] = card;
+      const newPlaced = [...state.placedCards]
+      const replacedCard = newPlaced[position]
+      newPlaced[position] = card
 
       // Remove card from available
-      let newAvailable = state.availableCards.filter((c) => c.id !== cardId);
+      let newAvailable = state.availableCards.filter((c) => c.id !== cardId)
 
       // If slot was occupied, add replaced card back to available
       if (replacedCard) {
-        newAvailable = [...newAvailable, replacedCard];
+        newAvailable = [...newAvailable, replacedCard]
       }
 
       return {
         ...state,
         availableCards: newAvailable,
         placedCards: newPlaced,
-      };
+      }
     }
 
-    case "INSERT_CARD": {
-      const { cardId, insertPosition } = typedMove.data;
-      const card = state.availableCards.find((c) => c.id === cardId);
+    case 'INSERT_CARD': {
+      const { cardId, insertPosition } = typedMove.data
+      const card = state.availableCards.find((c) => c.id === cardId)
       if (!card) {
-        return state;
+        return state
       }
 
       // Insert with shift and compact (no gaps)
-      const newPlaced = new Array(state.cardCount).fill(null);
+      const newPlaced = new Array(state.cardCount).fill(null)
 
       // Copy existing cards, shifting those at/after insert position
       for (let i = 0; i < state.placedCards.length; i++) {
         if (state.placedCards[i] !== null) {
           if (i < insertPosition) {
-            newPlaced[i] = state.placedCards[i];
+            newPlaced[i] = state.placedCards[i]
           } else {
             // Cards at or after insert position shift right by 1
             // Card will be collected during compaction if it falls off the end
-            newPlaced[i + 1] = state.placedCards[i];
+            newPlaced[i + 1] = state.placedCards[i]
           }
         }
       }
 
       // Place new card at insert position
-      newPlaced[insertPosition] = card;
+      newPlaced[insertPosition] = card
 
       // Compact to remove gaps
-      const compacted: SortingCard[] = [];
+      const compacted: SortingCard[] = []
       for (const c of newPlaced) {
         if (c !== null) {
-          compacted.push(c);
+          compacted.push(c)
         }
       }
 
       // Fill final array (no gaps)
-      const finalPlaced = new Array(state.cardCount).fill(null);
+      const finalPlaced = new Array(state.cardCount).fill(null)
       for (let i = 0; i < Math.min(compacted.length, state.cardCount); i++) {
-        finalPlaced[i] = compacted[i];
+        finalPlaced[i] = compacted[i]
       }
 
       // Remove from available
-      let newAvailable = state.availableCards.filter((c) => c.id !== cardId);
+      let newAvailable = state.availableCards.filter((c) => c.id !== cardId)
 
       // Any excess cards go back to available
       if (compacted.length > state.cardCount) {
-        const excess = compacted.slice(state.cardCount);
-        newAvailable = [...newAvailable, ...excess];
+        const excess = compacted.slice(state.cardCount)
+        newAvailable = [...newAvailable, ...excess]
       }
 
       return {
         ...state,
         availableCards: newAvailable,
         placedCards: finalPlaced,
-      };
+      }
     }
 
-    case "REMOVE_CARD": {
-      const { position } = typedMove.data;
-      const card = state.placedCards[position];
-      if (!card) return state;
+    case 'REMOVE_CARD': {
+      const { position } = typedMove.data
+      const card = state.placedCards[position]
+      if (!card) return state
 
-      const newPlaced = [...state.placedCards];
-      newPlaced[position] = null;
-      const newAvailable = [...state.availableCards, card];
+      const newPlaced = [...state.placedCards]
+      newPlaced[position] = null
+      const newAvailable = [...state.availableCards, card]
 
       return {
         ...state,
         availableCards: newAvailable,
         placedCards: newPlaced,
-      };
+      }
     }
 
-    case "CHECK_SOLUTION": {
+    case 'CHECK_SOLUTION': {
       // Don't apply optimistic update - wait for server to calculate and return score
-      return state;
+      return state
     }
 
-    case "GO_TO_SETUP": {
-      const isPausingGame = state.gamePhase === "playing";
+    case 'GO_TO_SETUP': {
+      const isPausingGame = state.gamePhase === 'playing'
 
       return {
         ...createInitialState({
@@ -243,7 +224,7 @@ function applyMoveOptimistically(
         }),
         // Save paused state if coming from active game
         originalConfig: state.originalConfig,
-        pausedGamePhase: isPausingGame ? "playing" : undefined,
+        pausedGamePhase: isPausingGame ? 'playing' : undefined,
         pausedGameState: isPausingGame
           ? {
               selectedCards: state.selectedCards,
@@ -253,20 +234,18 @@ function applyMoveOptimistically(
               gameStartTime: state.gameStartTime || Date.now(),
             }
           : undefined,
-      };
+      }
     }
 
-    case "SET_CONFIG": {
-      const { field, value } = typedMove.data;
-      const clearPausedGame = !!state.pausedGamePhase;
+    case 'SET_CONFIG': {
+      const { field, value } = typedMove.data
+      const clearPausedGame = !!state.pausedGamePhase
 
       return {
         ...state,
         [field]: value,
         // Update placedCards array size if cardCount changes
-        ...(field === "cardCount"
-          ? { placedCards: new Array(value as number).fill(null) }
-          : {}),
+        ...(field === 'cardCount' ? { placedCards: new Array(value as number).fill(null) } : {}),
         // Clear paused game if config changed
         ...(clearPausedGame
           ? {
@@ -275,17 +254,17 @@ function applyMoveOptimistically(
               originalConfig: undefined,
             }
           : {}),
-      };
+      }
     }
 
-    case "RESUME_GAME": {
+    case 'RESUME_GAME': {
       if (!state.pausedGamePhase || !state.pausedGameState) {
-        return state;
+        return state
       }
 
       const correctOrder = [...state.pausedGameState.selectedCards].sort(
-        (a, b) => a.number - b.number,
-      );
+        (a, b) => a.number - b.number
+      )
 
       return {
         ...state,
@@ -298,18 +277,18 @@ function applyMoveOptimistically(
         gameStartTime: state.pausedGameState.gameStartTime,
         pausedGamePhase: undefined,
         pausedGameState: undefined,
-      };
+      }
     }
 
-    case "UPDATE_CARD_POSITIONS": {
+    case 'UPDATE_CARD_POSITIONS': {
       return {
         ...state,
         cardPositions: typedMove.data.positions,
-      };
+      }
     }
 
     default:
-      return state;
+      return state
   }
 }
 
@@ -317,126 +296,120 @@ function applyMoveOptimistically(
  * Card Sorting Provider - Single Player Pattern Recognition Game
  */
 export function CardSortingProvider({ children }: { children: ReactNode }) {
-  const { data: viewerId } = useViewerId();
-  const { roomData } = useRoomData();
-  const { activePlayers, players } = useGameMode();
-  const { mutate: updateGameConfig } = useUpdateGameConfig();
+  const { data: viewerId } = useViewerId()
+  const { roomData } = useRoomData()
+  const { activePlayers, players } = useGameMode()
+  const { mutate: updateGameConfig } = useUpdateGameConfig()
 
   // Local UI state (not synced to server)
-  const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
+  const [selectedCardId, setSelectedCardId] = useState<string | null>(null)
 
   // Get local player (single player game)
   const localPlayerId = useMemo(() => {
     return Array.from(activePlayers).find((id) => {
-      const player = players.get(id);
-      return player?.isLocal !== false;
-    });
-  }, [activePlayers, players]);
+      const player = players.get(id)
+      return player?.isLocal !== false
+    })
+  }, [activePlayers, players])
 
   // Merge saved config from room data
   const mergedInitialState = useMemo(() => {
-    const gameConfig = roomData?.gameConfig as Record<string, unknown> | null;
-    const savedConfig = gameConfig?.["card-sorting"] as
-      | Partial<CardSortingConfig>
-      | undefined;
+    const gameConfig = roomData?.gameConfig as Record<string, unknown> | null
+    const savedConfig = gameConfig?.['card-sorting'] as Partial<CardSortingConfig> | undefined
 
-    return createInitialState(savedConfig || {});
-  }, [roomData?.gameConfig]);
+    return createInitialState(savedConfig || {})
+  }, [roomData?.gameConfig])
 
   // Arcade session integration
   const { state, sendMove, exitSession } = useArcadeSession<CardSortingState>({
-    userId: viewerId || "",
+    userId: viewerId || '',
     roomId: roomData?.id,
     initialState: mergedInitialState,
     applyMove: applyMoveOptimistically,
-  });
+  })
 
   // Build player metadata for the single local player
   const buildPlayerMetadata = useCallback(() => {
     if (!localPlayerId) {
       return {
-        id: "",
-        name: "",
-        emoji: "",
-        userId: "",
-      };
+        id: '',
+        name: '',
+        emoji: '',
+        userId: '',
+      }
     }
 
-    const playerOwnership: Record<string, string> = {};
+    const playerOwnership: Record<string, string> = {}
     if (viewerId) {
-      playerOwnership[localPlayerId] = viewerId;
+      playerOwnership[localPlayerId] = viewerId
     }
 
     const metadata = buildPlayerMetadataUtil(
       [localPlayerId],
       playerOwnership,
       players,
-      viewerId ?? undefined,
-    );
+      viewerId ?? undefined
+    )
 
-    return (
-      metadata[localPlayerId] || { id: "", name: "", emoji: "", userId: "" }
-    );
-  }, [localPlayerId, players, viewerId]);
+    return metadata[localPlayerId] || { id: '', name: '', emoji: '', userId: '' }
+  }, [localPlayerId, players, viewerId])
 
   // Computed values
   const canCheckSolution = useMemo(
     () => state.placedCards.every((c) => c !== null),
-    [state.placedCards],
-  );
+    [state.placedCards]
+  )
 
   const placedCount = useMemo(
     () => state.placedCards.filter((c) => c !== null).length,
-    [state.placedCards],
-  );
+    [state.placedCards]
+  )
 
   const elapsedTime = useMemo(() => {
-    if (!state.gameStartTime) return 0;
-    const now = state.gameEndTime || Date.now();
-    return Math.floor((now - state.gameStartTime) / 1000);
-  }, [state.gameStartTime, state.gameEndTime]);
+    if (!state.gameStartTime) return 0
+    const now = state.gameEndTime || Date.now()
+    return Math.floor((now - state.gameStartTime) / 1000)
+  }, [state.gameStartTime, state.gameEndTime])
 
   const hasConfigChanged = useMemo(() => {
-    if (!state.originalConfig) return false;
+    if (!state.originalConfig) return false
     return (
       state.cardCount !== state.originalConfig.cardCount ||
       state.timeLimit !== state.originalConfig.timeLimit ||
       state.gameMode !== state.originalConfig.gameMode
-    );
-  }, [state.cardCount, state.timeLimit, state.gameMode, state.originalConfig]);
+    )
+  }, [state.cardCount, state.timeLimit, state.gameMode, state.originalConfig])
 
   const canResumeGame = useMemo(() => {
-    return (
-      !!state.pausedGamePhase && !!state.pausedGameState && !hasConfigChanged
-    );
-  }, [state.pausedGamePhase, state.pausedGameState, hasConfigChanged]);
+    return !!state.pausedGamePhase && !!state.pausedGameState && !hasConfigChanged
+  }, [state.pausedGamePhase, state.pausedGameState, hasConfigChanged])
 
   // Action creators
   const startGame = useCallback(() => {
     if (!localPlayerId) {
-      return;
+      return
     }
 
     // Prevent rapid double-sends within 500ms to avoid duplicate game starts
-    const now = Date.now();
-    const justStarted = state.gameStartTime && now - state.gameStartTime < 500;
+    const now = Date.now()
+    const justStarted = state.gameStartTime && now - state.gameStartTime < 500
 
     if (justStarted) {
-      return;
+      return
     }
 
-    const playerMetadata = buildPlayerMetadata();
-    const selectedCards = shuffleCards(generateRandomCards(state.cardCount));
+    const playerMetadata = buildPlayerMetadata()
+    const selectedCards = shuffleCards(generateRandomCards(state.cardCount))
 
     sendMove({
-      type: "START_GAME",
+      type: 'START_GAME',
       playerId: localPlayerId,
-      userId: viewerId || "",
+      userId: viewerId || '',
       data: {
         playerMetadata,
         selectedCards,
       },
-    });
+    })
   }, [
     localPlayerId,
     state.cardCount,
@@ -445,152 +418,149 @@ export function CardSortingProvider({ children }: { children: ReactNode }) {
     buildPlayerMetadata,
     sendMove,
     viewerId,
-  ]);
+  ])
 
   const placeCard = useCallback(
     (cardId: string, position: number) => {
-      if (!localPlayerId) return;
+      if (!localPlayerId) return
 
       sendMove({
-        type: "PLACE_CARD",
+        type: 'PLACE_CARD',
         playerId: localPlayerId,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: { cardId, position },
-      });
+      })
 
       // Clear selection
-      setSelectedCardId(null);
+      setSelectedCardId(null)
     },
-    [localPlayerId, sendMove, viewerId],
-  );
+    [localPlayerId, sendMove, viewerId]
+  )
 
   const insertCard = useCallback(
     (cardId: string, insertPosition: number) => {
-      if (!localPlayerId) return;
+      if (!localPlayerId) return
 
       sendMove({
-        type: "INSERT_CARD",
+        type: 'INSERT_CARD',
         playerId: localPlayerId,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: { cardId, insertPosition },
-      });
+      })
 
       // Clear selection
-      setSelectedCardId(null);
+      setSelectedCardId(null)
     },
-    [localPlayerId, sendMove, viewerId],
-  );
+    [localPlayerId, sendMove, viewerId]
+  )
 
   const removeCard = useCallback(
     (position: number) => {
-      if (!localPlayerId) return;
+      if (!localPlayerId) return
 
       sendMove({
-        type: "REMOVE_CARD",
+        type: 'REMOVE_CARD',
         playerId: localPlayerId,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: { position },
-      });
+      })
     },
-    [localPlayerId, sendMove, viewerId],
-  );
+    [localPlayerId, sendMove, viewerId]
+  )
 
   const checkSolution = useCallback(
     (finalSequence?: SortingCard[]) => {
-      if (!localPlayerId) return;
+      if (!localPlayerId) return
 
       // If finalSequence provided, use it. Otherwise check current placedCards
       if (!finalSequence && !canCheckSolution) {
-        return;
+        return
       }
 
       sendMove({
-        type: "CHECK_SOLUTION",
+        type: 'CHECK_SOLUTION',
         playerId: localPlayerId,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: {
           finalSequence,
         },
-      });
+      })
     },
-    [localPlayerId, canCheckSolution, sendMove, viewerId],
-  );
+    [localPlayerId, canCheckSolution, sendMove, viewerId]
+  )
 
   const goToSetup = useCallback(() => {
-    if (!localPlayerId) return;
+    if (!localPlayerId) return
 
     sendMove({
-      type: "GO_TO_SETUP",
+      type: 'GO_TO_SETUP',
       playerId: localPlayerId,
-      userId: viewerId || "",
+      userId: viewerId || '',
       data: {},
-    });
-  }, [localPlayerId, sendMove, viewerId]);
+    })
+  }, [localPlayerId, sendMove, viewerId])
 
   const resumeGame = useCallback(() => {
     if (!localPlayerId || !canResumeGame) {
-      console.warn(
-        "[CardSortingProvider] Cannot resume - no paused game or config changed",
-      );
-      return;
+      console.warn('[CardSortingProvider] Cannot resume - no paused game or config changed')
+      return
     }
 
     sendMove({
-      type: "RESUME_GAME",
+      type: 'RESUME_GAME',
       playerId: localPlayerId,
-      userId: viewerId || "",
+      userId: viewerId || '',
       data: {},
-    });
-  }, [localPlayerId, canResumeGame, sendMove, viewerId]);
+    })
+  }, [localPlayerId, canResumeGame, sendMove, viewerId])
 
   const setConfig = useCallback(
-    (field: "cardCount" | "timeLimit" | "gameMode", value: unknown) => {
-      if (!localPlayerId) return;
+    (field: 'cardCount' | 'timeLimit' | 'gameMode', value: unknown) => {
+      if (!localPlayerId) return
 
       sendMove({
-        type: "SET_CONFIG",
+        type: 'SET_CONFIG',
         playerId: localPlayerId,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: { field, value },
-      });
+      })
 
       // Persist to database
       if (roomData?.id) {
-        const currentGameConfig =
-          (roomData.gameConfig as Record<string, unknown>) || {};
+        const currentGameConfig = (roomData.gameConfig as Record<string, unknown>) || {}
         const currentCardSortingConfig =
-          (currentGameConfig["card-sorting"] as Record<string, unknown>) || {};
+          (currentGameConfig['card-sorting'] as Record<string, unknown>) || {}
 
         const updatedConfig = {
           ...currentGameConfig,
-          "card-sorting": {
+          'card-sorting': {
             ...currentCardSortingConfig,
             [field]: value,
           },
-        };
+        }
 
         updateGameConfig({
           roomId: roomData.id,
           gameConfig: updatedConfig,
-        });
+        })
       }
     },
-    [localPlayerId, sendMove, viewerId, roomData, updateGameConfig],
-  );
+    [localPlayerId, sendMove, viewerId, roomData, updateGameConfig]
+  )
 
   const updateCardPositions = useCallback(
     (positions: CardPosition[]) => {
-      if (!localPlayerId) return;
+      if (!localPlayerId) return
 
       sendMove({
-        type: "UPDATE_CARD_POSITIONS",
+        type: 'UPDATE_CARD_POSITIONS',
         playerId: localPlayerId,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: { positions },
-      });
+      })
     },
-    [localPlayerId, sendMove, viewerId],
-  );
+    [localPlayerId, sendMove, viewerId]
+  )
 
   const contextValue: CardSortingContextValue = {
     state,
@@ -619,22 +589,18 @@ export function CardSortingProvider({ children }: { children: ReactNode }) {
     isSpectating: !localPlayerId,
     // Multiplayer
     players,
-  };
+  }
 
-  return (
-    <CardSortingContext.Provider value={contextValue}>
-      {children}
-    </CardSortingContext.Provider>
-  );
+  return <CardSortingContext.Provider value={contextValue}>{children}</CardSortingContext.Provider>
 }
 
 /**
  * Hook to access Card Sorting context
  */
 export function useCardSorting() {
-  const context = useContext(CardSortingContext);
+  const context = useContext(CardSortingContext)
   if (!context) {
-    throw new Error("useCardSorting must be used within CardSortingProvider");
+    throw new Error('useCardSorting must be used within CardSortingProvider')
   }
-  return context;
+  return context
 }
diff --git a/apps/web/src/arcade-games/card-sorting/Validator.ts b/apps/web/src/arcade-games/card-sorting/Validator.ts
index 60062e7f..f224af50 100644
--- a/apps/web/src/arcade-games/card-sorting/Validator.ts
+++ b/apps/web/src/arcade-games/card-sorting/Validator.ts
@@ -2,96 +2,77 @@ import type {
   GameValidator,
   ValidationContext,
   ValidationResult,
-} from "@/lib/arcade/validation/types";
-import type {
-  CardSortingConfig,
-  CardSortingMove,
-  CardSortingState,
-  CardPosition,
-} from "./types";
-import { calculateScore } from "./utils/scoringAlgorithm";
-import {
-  placeCardAtPosition,
-  insertCardAtPosition,
-  removeCardAtPosition,
-} from "./utils/validation";
+} from '@/lib/arcade/validation/types'
+import type { CardSortingConfig, CardSortingMove, CardSortingState, CardPosition } from './types'
+import { calculateScore } from './utils/scoringAlgorithm'
+import { placeCardAtPosition, insertCardAtPosition, removeCardAtPosition } from './utils/validation'
 
-export class CardSortingValidator
-  implements GameValidator<CardSortingState, CardSortingMove>
-{
+export class CardSortingValidator implements GameValidator<CardSortingState, CardSortingMove> {
   validateMove(
     state: CardSortingState,
     move: CardSortingMove,
-    context: ValidationContext,
+    context: ValidationContext
   ): ValidationResult {
     switch (move.type) {
-      case "START_GAME":
-        return this.validateStartGame(state, move.data, move.playerId);
-      case "PLACE_CARD":
-        return this.validatePlaceCard(
-          state,
-          move.data.cardId,
-          move.data.position,
-        );
-      case "INSERT_CARD":
-        return this.validateInsertCard(
-          state,
-          move.data.cardId,
-          move.data.insertPosition,
-        );
-      case "REMOVE_CARD":
-        return this.validateRemoveCard(state, move.data.position);
-      case "CHECK_SOLUTION":
-        return this.validateCheckSolution(state, move.data.finalSequence);
-      case "GO_TO_SETUP":
-        return this.validateGoToSetup(state);
-      case "SET_CONFIG":
-        return this.validateSetConfig(state, move.data.field, move.data.value);
-      case "RESUME_GAME":
-        return this.validateResumeGame(state);
-      case "UPDATE_CARD_POSITIONS":
-        return this.validateUpdateCardPositions(state, move.data.positions);
+      case 'START_GAME':
+        return this.validateStartGame(state, move.data, move.playerId)
+      case 'PLACE_CARD':
+        return this.validatePlaceCard(state, move.data.cardId, move.data.position)
+      case 'INSERT_CARD':
+        return this.validateInsertCard(state, move.data.cardId, move.data.insertPosition)
+      case 'REMOVE_CARD':
+        return this.validateRemoveCard(state, move.data.position)
+      case 'CHECK_SOLUTION':
+        return this.validateCheckSolution(state, move.data.finalSequence)
+      case 'GO_TO_SETUP':
+        return this.validateGoToSetup(state)
+      case 'SET_CONFIG':
+        return this.validateSetConfig(state, move.data.field, move.data.value)
+      case 'RESUME_GAME':
+        return this.validateResumeGame(state)
+      case 'UPDATE_CARD_POSITIONS':
+        return this.validateUpdateCardPositions(state, move.data.positions)
       default:
         return {
           valid: false,
           error: `Unknown move type: ${(move as CardSortingMove).type}`,
-        };
+        }
     }
   }
 
   private validateStartGame(
     state: CardSortingState,
     data: { playerMetadata: unknown; selectedCards: unknown },
-    playerId: string,
+    playerId: string
   ): ValidationResult {
     // Allow starting a new game from any phase (for "Play Again" button)
 
     // Validate selectedCards
     if (!Array.isArray(data.selectedCards)) {
-      return { valid: false, error: "selectedCards must be an array" };
+      return { valid: false, error: 'selectedCards must be an array' }
     }
 
     if (data.selectedCards.length !== state.cardCount) {
       return {
         valid: false,
         error: `Must provide exactly ${state.cardCount} cards`,
-      };
+      }
     }
 
-    const selectedCards = data.selectedCards as unknown[];
+    const selectedCards = data.selectedCards as unknown[]
 
     // Create correct order (sorted)
     const correctOrder = [...selectedCards].sort((a: unknown, b: unknown) => {
-      const cardA = a as { number: number };
-      const cardB = b as { number: number };
-      return cardA.number - cardB.number;
-    });
+      const cardA = a as { number: number }
+      const cardB = b as { number: number }
+      return cardA.number - cardB.number
+    })
 
     return {
       valid: true,
       newState: {
         ...state,
-        gamePhase: "playing",
+        gamePhase: 'playing',
         playerId,
         playerMetadata: data.playerMetadata,
         gameStartTime: Date.now(),
@@ -103,26 +84,26 @@ export class CardSortingValidator
         cardPositions: [], // Will be set by first position update
         scoreBreakdown: null,
       },
-    };
+    }
   }
 
   private validatePlaceCard(
     state: CardSortingState,
     cardId: string,
-    position: number,
+    position: number
   ): ValidationResult {
     // Must be in playing phase
-    if (state.gamePhase !== "playing") {
+    if (state.gamePhase !== 'playing') {
       return {
         valid: false,
-        error: "Can only place cards during playing phase",
-      };
+        error: 'Can only place cards during playing phase',
+      }
     }
 
     // Card must exist in availableCards
-    const card = state.availableCards.find((c) => c.id === cardId);
+    const card = state.availableCards.find((c) => c.id === cardId)
     if (!card) {
-      return { valid: false, error: "Card not found in available cards" };
+      return { valid: false, error: 'Card not found in available cards' }
     }
 
     // Position must be valid (0 to cardCount-1)
@@ -130,22 +111,22 @@ export class CardSortingValidator
       return {
         valid: false,
         error: `Invalid position: must be between 0 and ${state.cardCount - 1}`,
-      };
+      }
     }
 
     // Place the card using utility function (simple replacement)
     const { placedCards: newPlaced, replacedCard } = placeCardAtPosition(
       state.placedCards,
       card,
-      position,
-    );
+      position
+    )
 
     // Remove card from available
-    let newAvailable = state.availableCards.filter((c) => c.id !== cardId);
+    let newAvailable = state.availableCards.filter((c) => c.id !== cardId)
 
     // If slot was occupied, add replaced card back to available
     if (replacedCard) {
-      newAvailable = [...newAvailable, replacedCard];
+      newAvailable = [...newAvailable, replacedCard]
     }
 
     return {
@@ -155,26 +136,26 @@ export class CardSortingValidator
         availableCards: newAvailable,
         placedCards: newPlaced,
       },
-    };
+    }
   }
 
   private validateInsertCard(
     state: CardSortingState,
     cardId: string,
-    insertPosition: number,
+    insertPosition: number
   ): ValidationResult {
     // Must be in playing phase
-    if (state.gamePhase !== "playing") {
+    if (state.gamePhase !== 'playing') {
       return {
         valid: false,
-        error: "Can only insert cards during playing phase",
-      };
+        error: 'Can only insert cards during playing phase',
+      }
     }
 
     // Card must exist in availableCards
-    const card = state.availableCards.find((c) => c.id === cardId);
+    const card = state.availableCards.find((c) => c.id === cardId)
     if (!card) {
-      return { valid: false, error: "Card not found in available cards" };
+      return { valid: false, error: 'Card not found in available cards' }
     }
 
     // Position must be valid (0 to cardCount, inclusive - can insert after last position)
@@ -182,7 +163,7 @@ export class CardSortingValidator
       return {
         valid: false,
         error: `Invalid insert position: must be between 0 and ${state.cardCount}`,
-      };
+      }
     }
 
     // Insert the card using utility function (with shift and compact)
@@ -190,15 +171,15 @@ export class CardSortingValidator
       state.placedCards,
       card,
       insertPosition,
-      state.cardCount,
-    );
+      state.cardCount
+    )
 
     // Remove card from available
-    let newAvailable = state.availableCards.filter((c) => c.id !== cardId);
+    let newAvailable = state.availableCards.filter((c) => c.id !== cardId)
 
     // Add any excess cards back to available (shouldn't normally happen)
     if (excessCards.length > 0) {
-      newAvailable = [...newAvailable, ...excessCards];
+      newAvailable = [...newAvailable, ...excessCards]
     }
 
     return {
@@ -208,19 +189,16 @@ export class CardSortingValidator
         availableCards: newAvailable,
         placedCards: newPlaced,
       },
-    };
+    }
   }
 
-  private validateRemoveCard(
-    state: CardSortingState,
-    position: number,
-  ): ValidationResult {
+  private validateRemoveCard(state: CardSortingState, position: number): ValidationResult {
     // Must be in playing phase
-    if (state.gamePhase !== "playing") {
+    if (state.gamePhase !== 'playing') {
       return {
         valid: false,
-        error: "Can only remove cards during playing phase",
-      };
+        error: 'Can only remove cards during playing phase',
+      }
     }
 
     // Position must be valid
@@ -228,26 +206,26 @@ export class CardSortingValidator
       return {
         valid: false,
         error: `Invalid position: must be between 0 and ${state.cardCount - 1}`,
-      };
+      }
     }
 
     // Card must exist at position
     if (state.placedCards[position] === null) {
-      return { valid: false, error: "No card at this position" };
+      return { valid: false, error: 'No card at this position' }
     }
 
     // Remove the card using utility function
     const { placedCards: newPlaced, removedCard } = removeCardAtPosition(
       state.placedCards,
-      position,
-    );
+      position
+    )
 
     if (!removedCard) {
-      return { valid: false, error: "Failed to remove card" };
+      return { valid: false, error: 'Failed to remove card' }
     }
 
     // Add back to available
-    const newAvailable = [...state.availableCards, removedCard];
+    const newAvailable = [...state.availableCards, removedCard]
 
     return {
       valid: true,
@@ -256,67 +234,62 @@ export class CardSortingValidator
         availableCards: newAvailable,
         placedCards: newPlaced,
       },
-    };
+    }
   }
 
   private validateCheckSolution(
     state: CardSortingState,
-    finalSequence?: typeof state.selectedCards,
+    finalSequence?: typeof state.selectedCards
   ): ValidationResult {
     // Must be in playing phase
-    if (state.gamePhase !== "playing") {
+    if (state.gamePhase !== 'playing') {
       return {
         valid: false,
-        error: "Can only check solution during playing phase",
-      };
+        error: 'Can only check solution during playing phase',
+      }
     }
 
     // Use finalSequence if provided, otherwise use placedCards
     const userCards =
       finalSequence ||
-      state.placedCards.filter(
-        (c): c is (typeof state.selectedCards)[0] => c !== null,
-      );
+      state.placedCards.filter((c): c is (typeof state.selectedCards)[0] => c !== null)
 
     // Must have all cards
     if (userCards.length !== state.cardCount) {
-      return { valid: false, error: "Must place all cards before checking" };
+      return { valid: false, error: 'Must place all cards before checking' }
     }
 
     // Calculate score using scoring algorithms
-    const userSequence = userCards.map((c) => c.number);
-    const correctSequence = state.correctOrder.map((c) => c.number);
+    const userSequence = userCards.map((c) => c.number)
+    const correctSequence = state.correctOrder.map((c) => c.number)
 
     const scoreBreakdown = calculateScore(
       userSequence,
       correctSequence,
-      state.gameStartTime || Date.now(),
-    );
+      state.gameStartTime || Date.now()
+    )
 
     // If finalSequence was provided, update placedCards with it
     const newPlacedCards = finalSequence
-      ? [
-          ...userCards,
-          ...new Array(state.cardCount - userCards.length).fill(null),
-        ]
-      : state.placedCards;
+      ? [...userCards, ...new Array(state.cardCount - userCards.length).fill(null)]
+      : state.placedCards
 
     return {
       valid: true,
       newState: {
         ...state,
-        gamePhase: "results",
+        gamePhase: 'results',
         gameEndTime: Date.now(),
         scoreBreakdown,
         placedCards: newPlacedCards,
         availableCards: [], // All cards are now placed
       },
-    };
+    }
   }
 
   private validateGoToSetup(state: CardSortingState): ValidationResult {
     // Save current game state for resume (if in playing phase)
-    if (state.gamePhase === "playing") {
+    if (state.gamePhase === 'playing') {
       return {
         valid: true,
         newState: {
@@ -330,7 +303,7 @@ export class CardSortingValidator
             timeLimit: state.timeLimit,
             gameMode: state.gameMode,
           },
-          pausedGamePhase: "playing",
+          pausedGamePhase: 'playing',
           pausedGameState: {
             selectedCards: state.selectedCards,
             availableCards: state.availableCards,
@@ -339,7 +312,7 @@ export class CardSortingValidator
             gameStartTime: state.gameStartTime || Date.now(),
           },
         },
-      };
+      }
     }
 
     // Just go to setup
@@ -350,24 +323,24 @@ export class CardSortingValidator
         timeLimit: state.timeLimit,
         gameMode: state.gameMode,
       }),
-    };
+    }
   }
 
   private validateSetConfig(
     state: CardSortingState,
     field: string,
-    value: unknown,
+    value: unknown
   ): ValidationResult {
     // Must be in setup phase
-    if (state.gamePhase !== "setup") {
-      return { valid: false, error: "Can only change config in setup phase" };
+    if (state.gamePhase !== 'setup') {
+      return { valid: false, error: 'Can only change config in setup phase' }
     }
 
     // Validate field and value
     switch (field) {
-      case "cardCount":
+      case 'cardCount':
         if (![5, 8, 12, 15].includes(value as number)) {
-          return { valid: false, error: "cardCount must be 5, 8, 12, or 15" };
+          return { valid: false, error: 'cardCount must be 5, 8, 12, or 15' }
         }
         return {
           valid: true,
@@ -379,14 +352,14 @@ export class CardSortingValidator
             pausedGamePhase: undefined,
             pausedGameState: undefined,
           },
-        };
+        }
 
-      case "timeLimit":
-        if (value !== null && (typeof value !== "number" || value < 30)) {
+      case 'timeLimit':
+        if (value !== null && (typeof value !== 'number' || value < 30)) {
           return {
             valid: false,
-            error: "timeLimit must be null or a number >= 30",
-          };
+            error: 'timeLimit must be null or a number >= 30',
+          }
         }
         return {
           valid: true,
@@ -397,49 +370,40 @@ export class CardSortingValidator
             pausedGamePhase: undefined,
             pausedGameState: undefined,
           },
-        };
+        }
 
-      case "gameMode":
-        if (
-          !["solo", "collaborative", "competitive", "relay"].includes(
-            value as string,
-          )
-        ) {
+      case 'gameMode':
+        if (!['solo', 'collaborative', 'competitive', 'relay'].includes(value as string)) {
           return {
             valid: false,
-            error:
-              "gameMode must be solo, collaborative, competitive, or relay",
-          };
+            error: 'gameMode must be solo, collaborative, competitive, or relay',
+          }
         }
         return {
           valid: true,
           newState: {
             ...state,
-            gameMode: value as
-              | "solo"
-              | "collaborative"
-              | "competitive"
-              | "relay",
+            gameMode: value as 'solo' | 'collaborative' | 'competitive' | 'relay',
             // Clear pause state if config changed
             pausedGamePhase: undefined,
             pausedGameState: undefined,
           },
-        };
+        }
 
       default:
-        return { valid: false, error: `Unknown config field: ${field}` };
+        return { valid: false, error: `Unknown config field: ${field}` }
     }
   }
 
   private validateResumeGame(state: CardSortingState): ValidationResult {
     // Must be in setup phase
-    if (state.gamePhase !== "setup") {
-      return { valid: false, error: "Can only resume from setup phase" };
+    if (state.gamePhase !== 'setup') {
+      return { valid: false, error: 'Can only resume from setup phase' }
     }
 
     // Must have paused game state
     if (!state.pausedGamePhase || !state.pausedGameState) {
-      return { valid: false, error: "No paused game to resume" };
+      return { valid: false, error: 'No paused game to resume' }
     }
 
     // Restore paused state
@@ -449,9 +413,7 @@ export class CardSortingValidator
         ...state,
         gamePhase: state.pausedGamePhase,
         selectedCards: state.pausedGameState.selectedCards,
-        correctOrder: [...state.pausedGameState.selectedCards].sort(
-          (a, b) => a.number - b.number,
-        ),
+        correctOrder: [...state.pausedGameState.selectedCards].sort((a, b) => a.number - b.number),
         availableCards: state.pausedGameState.availableCards,
         placedCards: state.pausedGameState.placedCards,
         cardPositions: state.pausedGameState.cardPositions,
@@ -459,42 +421,42 @@ export class CardSortingValidator
         pausedGamePhase: undefined,
         pausedGameState: undefined,
       },
-    };
+    }
   }
 
   private validateUpdateCardPositions(
     state: CardSortingState,
-    positions: CardPosition[],
+    positions: CardPosition[]
   ): ValidationResult {
     // Must be in playing phase
-    if (state.gamePhase !== "playing") {
+    if (state.gamePhase !== 'playing') {
       return {
         valid: false,
-        error: "Can only update positions during playing phase",
-      };
+        error: 'Can only update positions during playing phase',
+      }
     }
 
     // Validate positions array
     if (!Array.isArray(positions)) {
-      return { valid: false, error: "positions must be an array" };
+      return { valid: false, error: 'positions must be an array' }
     }
 
     // Basic validation of position values
     for (const pos of positions) {
-      if (typeof pos.x !== "number" || pos.x < 0 || pos.x > 100) {
-        return { valid: false, error: "x must be between 0 and 100" };
+      if (typeof pos.x !== 'number' || pos.x < 0 || pos.x > 100) {
+        return { valid: false, error: 'x must be between 0 and 100' }
       }
-      if (typeof pos.y !== "number" || pos.y < 0 || pos.y > 100) {
-        return { valid: false, error: "y must be between 0 and 100" };
+      if (typeof pos.y !== 'number' || pos.y < 0 || pos.y > 100) {
+        return { valid: false, error: 'y must be between 0 and 100' }
       }
-      if (typeof pos.rotation !== "number") {
-        return { valid: false, error: "rotation must be a number" };
+      if (typeof pos.rotation !== 'number') {
+        return { valid: false, error: 'rotation must be a number' }
       }
-      if (typeof pos.zIndex !== "number") {
-        return { valid: false, error: "zIndex must be a number" };
+      if (typeof pos.zIndex !== 'number') {
+        return { valid: false, error: 'zIndex must be a number' }
       }
-      if (typeof pos.cardId !== "string") {
-        return { valid: false, error: "cardId must be a string" };
+      if (typeof pos.cardId !== 'string') {
+        return { valid: false, error: 'cardId must be a string' }
       }
     }
 
@@ -504,11 +466,11 @@ export class CardSortingValidator
         ...state,
         cardPositions: positions,
       },
-    };
+    }
   }
 
   isGameComplete(state: CardSortingState): boolean {
-    return state.gamePhase === "results";
+    return state.gamePhase === 'results'
   }
 
   getInitialState(config: CardSortingConfig): CardSortingState {
@@ -516,13 +478,13 @@ export class CardSortingValidator
       cardCount: config.cardCount,
       timeLimit: config.timeLimit,
       gameMode: config.gameMode,
-      gamePhase: "setup",
-      playerId: "",
+      gamePhase: 'setup',
+      playerId: '',
       playerMetadata: {
-        id: "",
-        name: "",
-        emoji: "",
-        userId: "",
+        id: '',
+        name: '',
+        emoji: '',
+        userId: '',
       },
       activePlayers: [],
       allPlayerMetadata: new Map(),
@@ -536,8 +498,8 @@ export class CardSortingValidator
       cursorPositions: new Map(),
       selectedCardId: null,
       scoreBreakdown: null,
-    };
+    }
   }
 }
 
-export const cardSortingValidator = new CardSortingValidator();
+export const cardSortingValidator = new CardSortingValidator()
diff --git a/apps/web/src/arcade-games/card-sorting/components/GameComponent.tsx b/apps/web/src/arcade-games/card-sorting/components/GameComponent.tsx
index eb0fc7cd..46851757 100644
--- a/apps/web/src/arcade-games/card-sorting/components/GameComponent.tsx
+++ b/apps/web/src/arcade-games/card-sorting/components/GameComponent.tsx
@@ -1,48 +1,47 @@
-"use client";
+'use client'
 
-import { useRouter } from "next/navigation";
-import { useEffect, useRef } from "react";
-import { PageWithNav } from "@/components/PageWithNav";
-import { css } from "../../../../styled-system/css";
-import { StandardGameLayout } from "@/components/StandardGameLayout";
-import { useFullscreen } from "@/contexts/FullscreenContext";
-import { useCardSorting } from "../Provider";
-import { SetupPhase } from "./SetupPhase";
-import { PlayingPhaseDrag } from "./PlayingPhaseDrag";
-import { ResultsPhase } from "./ResultsPhase";
+import { useRouter } from 'next/navigation'
+import { useEffect, useRef } from 'react'
+import { PageWithNav } from '@/components/PageWithNav'
+import { css } from '../../../../styled-system/css'
+import { StandardGameLayout } from '@/components/StandardGameLayout'
+import { useFullscreen } from '@/contexts/FullscreenContext'
+import { useCardSorting } from '../Provider'
+import { SetupPhase } from './SetupPhase'
+import { PlayingPhaseDrag } from './PlayingPhaseDrag'
+import { ResultsPhase } from './ResultsPhase'
 
 export function GameComponent() {
-  const router = useRouter();
-  const { state, exitSession, startGame, goToSetup, isSpectating } =
-    useCardSorting();
-  const { setFullscreenElement } = useFullscreen();
-  const gameRef = useRef<HTMLDivElement>(null);
+  const router = useRouter()
+  const { state, exitSession, startGame, goToSetup, isSpectating } = useCardSorting()
+  const { setFullscreenElement } = useFullscreen()
+  const gameRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     // Register fullscreen element
     if (gameRef.current) {
-      setFullscreenElement(gameRef.current);
+      setFullscreenElement(gameRef.current)
     }
-  }, [setFullscreenElement]);
+  }, [setFullscreenElement])
 
   return (
     <PageWithNav
       navTitle="Card Sorting"
       navEmoji="🔢"
-      emphasizePlayerSelection={state.gamePhase === "setup"}
+      emphasizePlayerSelection={state.gamePhase === 'setup'}
       onExitSession={() => {
-        exitSession();
-        router.push("/arcade");
+        exitSession()
+        router.push('/arcade')
       }}
       onSetup={
         goToSetup
           ? () => {
-              goToSetup();
+              goToSetup()
             }
           : undefined
       }
       onNewGame={() => {
-        startGame();
+        startGame()
       }}
     >
       <StandardGameLayout>
@@ -50,75 +49,68 @@ export function GameComponent() {
           ref={gameRef}
           className={css({
             flex: 1,
-            display: "flex",
-            flexDirection: "column",
-            position: "relative",
-            overflow: "hidden",
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            overflow: 'hidden',
             // Remove all padding/margins for playing phase
-            padding:
-              state.gamePhase === "playing"
-                ? "0"
-                : { base: "12px", sm: "16px", md: "20px" },
+            padding: state.gamePhase === 'playing' ? '0' : { base: '12px', sm: '16px', md: '20px' },
           })}
         >
           {/* Spectator Mode Banner - only show in setup/results */}
-          {isSpectating &&
-            state.gamePhase !== "setup" &&
-            state.gamePhase !== "playing" && (
-              <div
-                className={css({
-                  width: "100%",
-                  maxWidth: "1200px",
-                  background: "linear-gradient(135deg, #fef3c7, #fde68a)",
-                  borderRadius: { base: "8px", md: "12px" },
-                  padding: { base: "12px", md: "16px" },
-                  marginBottom: { base: "12px", md: "16px" },
-                  boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  gap: "8px",
-                  fontSize: { base: "14px", sm: "16px", md: "18px" },
-                  fontWeight: "600",
-                  color: "#92400e",
-                  textAlign: "center",
-                  alignSelf: "center",
-                })}
-              >
-                <span role="img" aria-label="watching">
-                  👀
-                </span>
-                <span>
-                  Spectating {state.playerMetadata?.name || "player"}'s game
-                </span>
-              </div>
-            )}
+          {isSpectating && state.gamePhase !== 'setup' && state.gamePhase !== 'playing' && (
+            <div
+              className={css({
+                width: '100%',
+                maxWidth: '1200px',
+                background: 'linear-gradient(135deg, #fef3c7, #fde68a)',
+                borderRadius: { base: '8px', md: '12px' },
+                padding: { base: '12px', md: '16px' },
+                marginBottom: { base: '12px', md: '16px' },
+                boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '8px',
+                fontSize: { base: '14px', sm: '16px', md: '18px' },
+                fontWeight: '600',
+                color: '#92400e',
+                textAlign: 'center',
+                alignSelf: 'center',
+              })}
+            >
+              <span role="img" aria-label="watching">
+                👀
+              </span>
+              <span>Spectating {state.playerMetadata?.name || 'player'}'s game</span>
+            </div>
+          )}
 
           {/* For playing phase, render full viewport. For setup/results, use container */}
-          {state.gamePhase === "playing" ? (
+          {state.gamePhase === 'playing' ? (
             <PlayingPhaseDrag />
           ) : (
             <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)",
+                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",
-                alignSelf: "center",
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
+                alignSelf: 'center',
               })}
             >
-              {state.gamePhase === "setup" && <SetupPhase />}
-              {state.gamePhase === "results" && <ResultsPhase />}
+              {state.gamePhase === 'setup' && <SetupPhase />}
+              {state.gamePhase === 'results' && <ResultsPhase />}
             </main>
           )}
         </div>
       </StandardGameLayout>
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/card-sorting/components/PlayingPhase.tsx b/apps/web/src/arcade-games/card-sorting/components/PlayingPhase.tsx
index 86d6350d..33f062ef 100644
--- a/apps/web/src/arcade-games/card-sorting/components/PlayingPhase.tsx
+++ b/apps/web/src/arcade-games/card-sorting/components/PlayingPhase.tsx
@@ -1,8 +1,8 @@
-"use client";
+'use client'
 
-import { css } from "../../../../styled-system/css";
-import { useCardSorting } from "../Provider";
-import { useState, useEffect } from "react";
+import { css } from '../../../../styled-system/css'
+import { useCardSorting } from '../Provider'
+import { useState, useEffect } from 'react'
 
 export function PlayingPhase() {
   const {
@@ -18,118 +18,106 @@ export function PlayingPhase() {
     placedCount,
     elapsedTime,
     isSpectating,
-  } = useCardSorting();
+  } = useCardSorting()
 
   // Status message (mimics Python updateSortingStatus)
   const [statusMessage, setStatusMessage] = useState(
-    `Arrange the ${state.cardCount} cards in ascending order (smallest to largest)`,
-  );
+    `Arrange the ${state.cardCount} cards in ascending order (smallest to largest)`
+  )
 
   // Update status message based on state
   useEffect(() => {
-    if (state.gamePhase !== "playing") return;
+    if (state.gamePhase !== 'playing') return
 
     if (selectedCardId) {
-      const card = state.availableCards.find((c) => c.id === selectedCardId);
+      const card = state.availableCards.find((c) => c.id === selectedCardId)
       if (card) {
         setStatusMessage(
-          `Selected card with value ${card.number}. Click a position or + button to place it.`,
-        );
+          `Selected card with value ${card.number}. Click a position or + button to place it.`
+        )
       }
     } else if (placedCount === state.cardCount) {
-      setStatusMessage(
-        'All cards placed! Click "Check My Solution" to see how you did.',
-      );
+      setStatusMessage('All cards placed! Click "Check My Solution" to see how you did.')
     } else {
       setStatusMessage(
-        `${placedCount}/${state.cardCount} cards placed. Select ${placedCount === 0 ? "a" : "another"} card to continue.`,
-      );
+        `${placedCount}/${state.cardCount} cards placed. Select ${placedCount === 0 ? 'a' : 'another'} card to continue.`
+      )
     }
-  }, [
-    selectedCardId,
-    placedCount,
-    state.cardCount,
-    state.gamePhase,
-    state.availableCards,
-  ]);
+  }, [selectedCardId, placedCount, state.cardCount, state.gamePhase, state.availableCards])
 
   // Format time display
   const formatTime = (seconds: number) => {
-    const m = Math.floor(seconds / 60);
-    const s = seconds % 60;
-    return `${m}:${s.toString().padStart(2, "0")}`;
-  };
+    const m = Math.floor(seconds / 60)
+    const s = seconds % 60
+    return `${m}:${s.toString().padStart(2, '0')}`
+  }
 
   // Calculate gradient for position slots (darker = smaller, lighter = larger)
   const getSlotGradient = (position: number, total: number) => {
-    const intensity = position / (total - 1 || 1);
-    const lightness = 30 + intensity * 45; // 30% to 75%
+    const intensity = position / (total - 1 || 1)
+    const lightness = 30 + intensity * 45 // 30% to 75%
     return {
       background: `hsl(220, 8%, ${lightness}%)`,
-      color: lightness > 60 ? "#2c3e50" : "#ffffff",
-      borderColor: lightness > 60 ? "#2c5f76" : "rgba(255,255,255,0.4)",
-    };
-  };
+      color: lightness > 60 ? '#2c3e50' : '#ffffff',
+      borderColor: lightness > 60 ? '#2c5f76' : 'rgba(255,255,255,0.4)',
+    }
+  }
 
   const handleCardClick = (cardId: string) => {
-    if (isSpectating) return; // Spectators cannot interact
+    if (isSpectating) return // Spectators cannot interact
     if (selectedCardId === cardId) {
-      selectCard(null); // Deselect
+      selectCard(null) // Deselect
     } else {
-      selectCard(cardId);
+      selectCard(cardId)
     }
-  };
+  }
 
   const handleSlotClick = (position: number) => {
-    if (isSpectating) return; // Spectators cannot interact
+    if (isSpectating) return // Spectators cannot interact
     if (!selectedCardId) {
       // No card selected - if slot has a card, move it back and auto-select
       if (state.placedCards[position]) {
-        const cardToMove = state.placedCards[position]!;
-        removeCard(position);
+        const cardToMove = state.placedCards[position]!
+        removeCard(position)
         // Auto-select the card that was moved back
-        selectCard(cardToMove.id);
+        selectCard(cardToMove.id)
       } else {
-        setStatusMessage(
-          "Select a card first, or click a placed card to move it back.",
-        );
+        setStatusMessage('Select a card first, or click a placed card to move it back.')
       }
     } else {
       // Card is selected - place it (replaces existing card if any)
-      placeCard(selectedCardId, position);
+      placeCard(selectedCardId, position)
     }
-  };
+  }
 
   const handleInsertClick = (insertPosition: number) => {
-    if (isSpectating) return; // Spectators cannot interact
+    if (isSpectating) return // Spectators cannot interact
     if (!selectedCardId) {
-      setStatusMessage(
-        "Please select a card first, then click where to insert it.",
-      );
-      return;
+      setStatusMessage('Please select a card first, then click where to insert it.')
+      return
     }
-    insertCard(selectedCardId, insertPosition);
-  };
+    insertCard(selectedCardId, insertPosition)
+  }
 
   return (
     <div
       className={css({
-        display: "flex",
-        flexDirection: "column",
-        gap: "1rem",
-        height: "100%",
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+        height: '100%',
       })}
     >
       {/* Status message */}
       <div
         className={css({
-          padding: "0.75rem 1rem",
-          background: "#e3f2fd",
-          borderLeft: "4px solid #2c5f76",
-          borderRadius: "0.25rem",
-          fontSize: "sm",
-          fontWeight: "500",
-          color: "#2c3e50",
+          padding: '0.75rem 1rem',
+          background: '#e3f2fd',
+          borderLeft: '4px solid #2c5f76',
+          borderRadius: '0.25rem',
+          fontSize: 'sm',
+          fontWeight: '500',
+          color: '#2c3e50',
           flexShrink: 0,
         })}
       >
@@ -139,31 +127,31 @@ export function PlayingPhase() {
       {/* Header with timer and actions */}
       <div
         className={css({
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          padding: "1rem",
-          background: "teal.50",
-          borderRadius: "0.5rem",
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: '1rem',
+          background: 'teal.50',
+          borderRadius: '0.5rem',
           flexShrink: 0,
         })}
       >
-        <div className={css({ display: "flex", gap: "2rem" })}>
+        <div className={css({ display: 'flex', gap: '2rem' })}>
           <div>
             <div
               className={css({
-                fontSize: "sm",
-                color: "gray.600",
-                fontWeight: "600",
+                fontSize: 'sm',
+                color: 'gray.600',
+                fontWeight: '600',
               })}
             >
               Time
             </div>
             <div
               className={css({
-                fontSize: "xl",
-                fontWeight: "bold",
-                color: "teal.700",
+                fontSize: 'xl',
+                fontWeight: 'bold',
+                color: 'teal.700',
               })}
             >
               {formatTime(elapsedTime)}
@@ -172,18 +160,18 @@ export function PlayingPhase() {
           <div>
             <div
               className={css({
-                fontSize: "sm",
-                color: "gray.600",
-                fontWeight: "600",
+                fontSize: 'sm',
+                color: 'gray.600',
+                fontWeight: '600',
               })}
             >
               Progress
             </div>
             <div
               className={css({
-                fontSize: "xl",
-                fontWeight: "bold",
-                color: "teal.700",
+                fontSize: 'xl',
+                fontWeight: 'bold',
+                color: 'teal.700',
               })}
             >
               {placedCount}/{state.cardCount}
@@ -191,26 +179,23 @@ export function PlayingPhase() {
           </div>
         </div>
 
-        <div className={css({ display: "flex", gap: "0.5rem" })}>
+        <div className={css({ display: 'flex', gap: '0.5rem' })}>
           <button
             type="button"
             onClick={() => checkSolution()}
             disabled={!canCheckSolution || isSpectating}
             className={css({
-              padding: "0.5rem 1rem",
-              borderRadius: "0.375rem",
-              background:
-                canCheckSolution && !isSpectating ? "teal.600" : "gray.300",
-              color: "white",
-              fontSize: "sm",
-              fontWeight: "600",
-              border: "none",
-              cursor:
-                canCheckSolution && !isSpectating ? "pointer" : "not-allowed",
+              padding: '0.5rem 1rem',
+              borderRadius: '0.375rem',
+              background: canCheckSolution && !isSpectating ? 'teal.600' : 'gray.300',
+              color: 'white',
+              fontSize: 'sm',
+              fontWeight: '600',
+              border: 'none',
+              cursor: canCheckSolution && !isSpectating ? 'pointer' : 'not-allowed',
               opacity: canCheckSolution && !isSpectating ? 1 : 0.5,
               _hover: {
-                background:
-                  canCheckSolution && !isSpectating ? "teal.700" : "gray.300",
+                background: canCheckSolution && !isSpectating ? 'teal.700' : 'gray.300',
               },
             })}
           >
@@ -221,17 +206,17 @@ export function PlayingPhase() {
             onClick={goToSetup}
             disabled={isSpectating}
             className={css({
-              padding: "0.5rem 1rem",
-              borderRadius: "0.375rem",
-              background: isSpectating ? "gray.400" : "gray.600",
-              color: "white",
-              fontSize: "sm",
-              fontWeight: "600",
-              border: "none",
-              cursor: isSpectating ? "not-allowed" : "pointer",
+              padding: '0.5rem 1rem',
+              borderRadius: '0.375rem',
+              background: isSpectating ? 'gray.400' : 'gray.600',
+              color: 'white',
+              fontSize: 'sm',
+              fontWeight: '600',
+              border: 'none',
+              cursor: isSpectating ? 'not-allowed' : 'pointer',
               opacity: isSpectating ? 0.5 : 1,
               _hover: {
-                background: isSpectating ? "gray.400" : "gray.700",
+                background: isSpectating ? 'gray.400' : 'gray.700',
               },
             })}
           >
@@ -243,35 +228,35 @@ export function PlayingPhase() {
       {/* Main game area */}
       <div
         className={css({
-          display: "flex",
-          gap: "2rem",
+          display: 'flex',
+          gap: '2rem',
           flex: 1,
-          overflow: "auto",
+          overflow: 'auto',
         })}
       >
         {/* Available cards */}
-        <div className={css({ flex: 1, minWidth: "200px" })}>
+        <div className={css({ flex: 1, minWidth: '200px' })}>
           <h3
             className={css({
-              fontSize: "lg",
-              fontWeight: "bold",
-              marginBottom: "1rem",
-              color: "gray.700",
+              fontSize: 'lg',
+              fontWeight: 'bold',
+              marginBottom: '1rem',
+              color: 'gray.700',
             })}
           >
             Available Cards
           </h3>
           <div
             className={css({
-              display: "flex",
-              flexWrap: "wrap",
-              gap: "10px",
-              justifyContent: "center",
-              padding: "15px",
-              background: "rgba(255,255,255,0.5)",
-              borderRadius: "8px",
-              minHeight: "120px",
-              border: "2px dashed #2c5f76",
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: '10px',
+              justifyContent: 'center',
+              padding: '15px',
+              background: 'rgba(255,255,255,0.5)',
+              borderRadius: '8px',
+              minHeight: '120px',
+              border: '2px dashed #2c5f76',
             })}
           >
             {state.availableCards.map((card) => (
@@ -279,37 +264,36 @@ export function PlayingPhase() {
                 key={card.id}
                 onClick={() => handleCardClick(card.id)}
                 className={css({
-                  width: "140px",
-                  height: "140px",
-                  padding: "8px",
-                  border: "2px solid",
-                  borderColor:
-                    selectedCardId === card.id ? "#1976d2" : "transparent",
-                  borderRadius: "8px",
-                  background: selectedCardId === card.id ? "#e3f2fd" : "white",
-                  cursor: isSpectating ? "not-allowed" : "pointer",
+                  width: '140px',
+                  height: '140px',
+                  padding: '8px',
+                  border: '2px solid',
+                  borderColor: selectedCardId === card.id ? '#1976d2' : 'transparent',
+                  borderRadius: '8px',
+                  background: selectedCardId === card.id ? '#e3f2fd' : 'white',
+                  cursor: isSpectating ? 'not-allowed' : 'pointer',
                   opacity: isSpectating ? 0.5 : 1,
-                  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                  position: "relative",
-                  userSelect: "none",
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  boxShadow: "0 2px 6px rgba(0,0,0,0.1)",
+                  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+                  position: 'relative',
+                  userSelect: 'none',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  boxShadow: '0 2px 6px rgba(0,0,0,0.1)',
                   _hover: isSpectating
                     ? {}
                     : {
-                        transform: "translateY(-5px)",
-                        boxShadow: "0 8px 16px rgba(0,0,0,0.2)",
-                        borderColor: "#2c5f76",
+                        transform: 'translateY(-5px)',
+                        boxShadow: '0 8px 16px rgba(0,0,0,0.2)',
+                        borderColor: '#2c5f76',
                       },
                 })}
                 style={
                   selectedCardId === card.id
                     ? {
-                        transform: "scale(1.1)",
-                        boxShadow: "0 6px 20px rgba(25, 118, 210, 0.3)",
+                        transform: 'scale(1.1)',
+                        boxShadow: '0 6px 20px rgba(25, 118, 210, 0.3)',
                       }
                     : undefined
                 }
@@ -317,16 +301,16 @@ export function PlayingPhase() {
                 <div
                   dangerouslySetInnerHTML={{ __html: card.svgContent }}
                   className={css({
-                    width: "100%",
-                    height: "100%",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    overflow: "hidden",
-                    "& svg": {
-                      width: "100%",
-                      height: "100%",
-                      display: "block",
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    overflow: 'hidden',
+                    '& svg': {
+                      width: '100%',
+                      height: '100%',
+                      display: 'block',
                     },
                   })}
                 />
@@ -336,28 +320,28 @@ export function PlayingPhase() {
         </div>
 
         {/* Position slots with insert buttons */}
-        <div className={css({ flex: 2, minWidth: "300px" })}>
+        <div className={css({ flex: 2, minWidth: '300px' })}>
           <h3
             className={css({
-              fontSize: "lg",
-              fontWeight: "bold",
-              marginBottom: "1rem",
-              color: "gray.700",
+              fontSize: 'lg',
+              fontWeight: 'bold',
+              marginBottom: '1rem',
+              color: 'gray.700',
             })}
           >
             Sort Positions (Smallest → Largest)
           </h3>
           <div
             className={css({
-              display: "flex",
-              flexWrap: "wrap",
-              gap: "8px",
-              justifyContent: "center",
-              alignItems: "center",
-              padding: "15px",
-              background: "rgba(255,255,255,0.7)",
-              borderRadius: "8px",
-              border: "2px dashed #2c5f76",
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: '8px',
+              justifyContent: 'center',
+              alignItems: 'center',
+              padding: '15px',
+              background: 'rgba(255,255,255,0.7)',
+              borderRadius: '8px',
+              border: '2px dashed #2c5f76',
             })}
           >
             {/* Insert button before first position */}
@@ -366,28 +350,26 @@ export function PlayingPhase() {
               onClick={() => handleInsertClick(0)}
               disabled={!selectedCardId || isSpectating}
               className={css({
-                width: "32px",
-                height: "50px",
-                background:
-                  selectedCardId && !isSpectating ? "#1976d2" : "#2c5f76",
-                color: "white",
-                border: "none",
-                borderRadius: "20px",
-                fontSize: "24px",
-                fontWeight: "bold",
-                cursor:
-                  selectedCardId && !isSpectating ? "pointer" : "not-allowed",
+                width: '32px',
+                height: '50px',
+                background: selectedCardId && !isSpectating ? '#1976d2' : '#2c5f76',
+                color: 'white',
+                border: 'none',
+                borderRadius: '20px',
+                fontSize: '24px',
+                fontWeight: 'bold',
+                cursor: selectedCardId && !isSpectating ? 'pointer' : 'not-allowed',
                 opacity: selectedCardId && !isSpectating ? 1 : 0.3,
-                transition: "all 0.2s",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
+                transition: 'all 0.2s',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
                 _hover: isSpectating
                   ? {}
                   : {
                       opacity: 1,
-                      background: "#1976d2",
-                      transform: selectedCardId ? "scale(1.1)" : "none",
+                      background: '#1976d2',
+                      transform: selectedCardId ? 'scale(1.1)' : 'none',
                     },
               })}
             >
@@ -396,8 +378,8 @@ export function PlayingPhase() {
 
             {/* Render each position slot followed by an insert button */}
             {state.placedCards.map((card, index) => {
-              const gradientStyle = getSlotGradient(index, state.cardCount);
-              const isEmpty = card === null;
+              const gradientStyle = getSlotGradient(index, state.cardCount)
+              const isEmpty = card === null
 
               return (
                 <>
@@ -406,31 +388,26 @@ export function PlayingPhase() {
                     key={`slot-${index}`}
                     onClick={() => handleSlotClick(index)}
                     className={css({
-                      width: "140px",
-                      height: "160px",
-                      padding: "0.5rem",
-                      borderRadius: "8px",
-                      border: "2px solid",
-                      cursor: isSpectating ? "not-allowed" : "pointer",
+                      width: '140px',
+                      height: '160px',
+                      padding: '0.5rem',
+                      borderRadius: '8px',
+                      border: '2px solid',
+                      cursor: isSpectating ? 'not-allowed' : 'pointer',
                       opacity: isSpectating ? 0.5 : 1,
-                      transition: "all 0.2s",
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      gap: "0.25rem",
-                      position: "relative",
+                      transition: 'all 0.2s',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      gap: '0.25rem',
+                      position: 'relative',
                       _hover: isSpectating
                         ? {}
                         : {
-                            transform:
-                              selectedCardId && isEmpty
-                                ? "scale(1.05)"
-                                : "none",
+                            transform: selectedCardId && isEmpty ? 'scale(1.05)' : 'none',
                             boxShadow:
-                              selectedCardId && isEmpty
-                                ? "0 4px 12px rgba(0,0,0,0.15)"
-                                : "none",
+                              selectedCardId && isEmpty ? '0 4px 12px rgba(0,0,0,0.15)' : 'none',
                           },
                     })}
                     style={
@@ -440,13 +417,13 @@ export function PlayingPhase() {
                             // Active state: add slight glow when card is selected
                             boxShadow:
                               selectedCardId && !isSpectating
-                                ? "0 0 0 2px #1976d2, 0 2px 8px rgba(25, 118, 210, 0.3)"
-                                : "none",
+                                ? '0 0 0 2px #1976d2, 0 2px 8px rgba(25, 118, 210, 0.3)'
+                                : 'none',
                           }
                         : {
-                            background: "#fff",
-                            color: "#333",
-                            borderColor: "#2c5f76",
+                            background: '#fff',
+                            color: '#333',
+                            borderColor: '#2c5f76',
                           }
                     }
                   >
@@ -458,24 +435,24 @@ export function PlayingPhase() {
                           }}
                           className={css({
                             flex: 1,
-                            width: "100%",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            overflow: "hidden",
-                            "& svg": {
-                              width: "100%",
-                              height: "100%",
-                              display: "block",
+                            width: '100%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            overflow: 'hidden',
+                            '& svg': {
+                              width: '100%',
+                              height: '100%',
+                              display: 'block',
                             },
                           })}
                         />
                         <div
                           className={css({
-                            fontSize: "xs",
+                            fontSize: 'xs',
                             opacity: 0.7,
-                            fontStyle: "italic",
-                            textAlign: "center",
+                            fontStyle: 'italic',
+                            textAlign: 'center',
                           })}
                         >
                           ← Click to move back
@@ -484,17 +461,13 @@ export function PlayingPhase() {
                     ) : (
                       <div
                         className={css({
-                          fontSize: "sm",
-                          fontStyle: "italic",
-                          textAlign: "center",
+                          fontSize: 'sm',
+                          fontStyle: 'italic',
+                          textAlign: 'center',
                         })}
                         style={{ color: gradientStyle.color }}
                       >
-                        {index === 0
-                          ? "Smallest"
-                          : index === state.cardCount - 1
-                            ? "Largest"
-                            : ""}
+                        {index === 0 ? 'Smallest' : index === state.cardCount - 1 ? 'Largest' : ''}
                       </div>
                     )}
                   </div>
@@ -506,41 +479,37 @@ export function PlayingPhase() {
                     onClick={() => handleInsertClick(index + 1)}
                     disabled={!selectedCardId || isSpectating}
                     className={css({
-                      width: "32px",
-                      height: "50px",
-                      background:
-                        selectedCardId && !isSpectating ? "#1976d2" : "#2c5f76",
-                      color: "white",
-                      border: "none",
-                      borderRadius: "20px",
-                      fontSize: "24px",
-                      fontWeight: "bold",
-                      cursor:
-                        selectedCardId && !isSpectating
-                          ? "pointer"
-                          : "not-allowed",
+                      width: '32px',
+                      height: '50px',
+                      background: selectedCardId && !isSpectating ? '#1976d2' : '#2c5f76',
+                      color: 'white',
+                      border: 'none',
+                      borderRadius: '20px',
+                      fontSize: '24px',
+                      fontWeight: 'bold',
+                      cursor: selectedCardId && !isSpectating ? 'pointer' : 'not-allowed',
                       opacity: selectedCardId && !isSpectating ? 1 : 0.3,
-                      transition: "all 0.2s",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
+                      transition: 'all 0.2s',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
                       _hover: isSpectating
                         ? {}
                         : {
                             opacity: 1,
-                            background: "#1976d2",
-                            transform: selectedCardId ? "scale(1.1)" : "none",
+                            background: '#1976d2',
+                            transform: selectedCardId ? 'scale(1.1)' : 'none',
                           },
                     })}
                   >
                     +
                   </button>
                 </>
-              );
+              )
             })}
           </div>
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx b/apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx
index 41196838..5631f38c 100644
--- a/apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx
+++ b/apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx
@@ -1,15 +1,15 @@
-"use client";
+'use client'
 
-import { css } from "../../../../styled-system/css";
-import { useCardSorting } from "../Provider";
-import { useState, useEffect, useRef, useCallback } from "react";
-import { useSpring, animated, to } from "@react-spring/web";
-import { useViewport } from "@/contexts/ViewportContext";
-import type { SortingCard } from "../types";
+import { css } from '../../../../styled-system/css'
+import { useCardSorting } from '../Provider'
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { useSpring, animated, to } from '@react-spring/web'
+import { useViewport } from '@/contexts/ViewportContext'
+import type { SortingCard } from '../types'
 
 // Add celebration animations
-if (typeof document !== "undefined") {
-  const style = document.createElement("style");
+if (typeof document !== 'undefined') {
+  const style = document.createElement('style')
   style.textContent = `
     @keyframes celebrate {
       0%, 100% {
@@ -51,15 +51,15 @@ if (typeof document !== "undefined") {
         transform: translate(-50%, -50%) scale(1.15);
       }
     }
-  `;
-  document.head.appendChild(style);
+  `
+  document.head.appendChild(style)
 }
 
 interface CardState {
-  x: number; // % of viewport width (0-100)
-  y: number; // % of viewport height (0-100)
-  rotation: number; // degrees
-  zIndex: number;
+  x: number // % of viewport width (0-100)
+  y: number // % of viewport height (0-100)
+  rotation: number // degrees
+  zIndex: number
 }
 
 /**
@@ -76,66 +76,66 @@ interface CardState {
  */
 function inferSequenceFromPositions(
   cardStates: Map<string, CardState>,
-  allCards: SortingCard[],
+  allCards: SortingCard[]
 ): SortingCard[] {
-  const VERTICAL_TOLERANCE = 8; // Cards within 8% of viewport height are in the same "lane"
+  const VERTICAL_TOLERANCE = 8 // Cards within 8% of viewport height are in the same "lane"
 
   // Get all positioned cards
   const positionedCards = allCards
     .map((card) => {
-      const state = cardStates.get(card.id);
-      if (!state) return null;
-      return { card, ...state };
+      const state = cardStates.get(card.id)
+      if (!state) return null
+      return { card, ...state }
     })
     .filter(
       (
-        item,
+        item
       ): item is {
-        card: SortingCard;
-        x: number;
-        y: number;
-        rotation: number;
-        zIndex: number;
-      } => item !== null,
-    );
+        card: SortingCard
+        x: number
+        y: number
+        rotation: number
+        zIndex: number
+      } => item !== null
+    )
 
-  if (positionedCards.length === 0) return [];
+  if (positionedCards.length === 0) return []
 
   // Sort by x position first
-  const sortedByX = [...positionedCards].sort((a, b) => a.x - b.x);
+  const sortedByX = [...positionedCards].sort((a, b) => a.x - b.x)
 
   // Group into lanes
-  const lanes: (typeof positionedCards)[] = [];
+  const lanes: (typeof positionedCards)[] = []
 
   for (const item of sortedByX) {
     // Find a lane this card fits into (similar y position)
     const matchingLane = lanes.find((lane) => {
       // Check if card's y is within tolerance of lane's average y
-      const laneAvgY = lane.reduce((sum, c) => sum + c.y, 0) / lane.length;
-      return Math.abs(item.y - laneAvgY) < VERTICAL_TOLERANCE;
-    });
+      const laneAvgY = lane.reduce((sum, c) => sum + c.y, 0) / lane.length
+      return Math.abs(item.y - laneAvgY) < VERTICAL_TOLERANCE
+    })
 
     if (matchingLane) {
-      matchingLane.push(item);
+      matchingLane.push(item)
     } else {
-      lanes.push([item]);
+      lanes.push([item])
     }
   }
 
   // Sort lanes top-to-bottom
   lanes.sort((laneA, laneB) => {
-    const avgYA = laneA.reduce((sum, c) => sum + c.y, 0) / laneA.length;
-    const avgYB = laneB.reduce((sum, c) => sum + c.y, 0) / laneB.length;
-    return avgYA - avgYB;
-  });
+    const avgYA = laneA.reduce((sum, c) => sum + c.y, 0) / laneA.length
+    const avgYB = laneB.reduce((sum, c) => sum + c.y, 0) / laneB.length
+    return avgYA - avgYB
+  })
 
   // Within each lane, sort left-to-right
   for (const lane of lanes) {
-    lane.sort((a, b) => a.x - b.x);
+    lane.sort((a, b) => a.x - b.x)
   }
 
   // Flatten to get final sequence
-  return lanes.flat().map((item) => item.card);
+  return lanes.flat().map((item) => item.card)
 }
 
 /**
@@ -150,71 +150,68 @@ function ContinuousSequencePath({
   spectatorEducationalMode,
   isSpectating,
 }: {
-  cardStates: Map<string, CardState>;
-  sequence: SortingCard[];
-  correctOrder: SortingCard[];
-  viewportWidth: number;
-  viewportHeight: number;
-  spectatorEducationalMode: boolean;
-  isSpectating: boolean;
+  cardStates: Map<string, CardState>
+  sequence: SortingCard[]
+  correctOrder: SortingCard[]
+  viewportWidth: number
+  viewportHeight: number
+  spectatorEducationalMode: boolean
+  isSpectating: boolean
 }) {
-  if (sequence.length < 2) return null;
+  if (sequence.length < 2) return null
 
   // Card dimensions (base size)
-  const CARD_WIDTH = 140;
-  const CARD_HEIGHT = 180;
-  const CARD_HALF_WIDTH = CARD_WIDTH / 2;
-  const CARD_HALF_HEIGHT = CARD_HEIGHT / 2;
+  const CARD_WIDTH = 140
+  const CARD_HEIGHT = 180
+  const CARD_HALF_WIDTH = CARD_WIDTH / 2
+  const CARD_HALF_HEIGHT = CARD_HEIGHT / 2
 
   // Helper to check if a card is part of the correct prefix or suffix (and thus scaled to 50%)
   const isCardCorrect = (card: SortingCard): boolean => {
-    const positionInSequence = sequence.findIndex((c) => c.id === card.id);
-    if (positionInSequence < 0) return false;
+    const positionInSequence = sequence.findIndex((c) => c.id === card.id)
+    if (positionInSequence < 0) return false
 
     // Check if card is part of correct prefix
-    let isInCorrectPrefix = true;
+    let isInCorrectPrefix = true
     for (let i = 0; i <= positionInSequence; i++) {
       if (sequence[i]?.id !== correctOrder[i]?.id) {
-        isInCorrectPrefix = false;
-        break;
+        isInCorrectPrefix = false
+        break
       }
     }
 
     // Check if card is part of correct suffix
-    let isInCorrectSuffix = true;
-    const offsetFromEnd = sequence.length - 1 - positionInSequence;
+    let isInCorrectSuffix = true
+    const offsetFromEnd = sequence.length - 1 - positionInSequence
     for (let i = 0; i <= offsetFromEnd; i++) {
-      const seqIdx = sequence.length - 1 - i;
-      const correctIdx = correctOrder.length - 1 - i;
+      const seqIdx = sequence.length - 1 - i
+      const correctIdx = correctOrder.length - 1 - i
       if (sequence[seqIdx]?.id !== correctOrder[correctIdx]?.id) {
-        isInCorrectSuffix = false;
-        break;
+        isInCorrectSuffix = false
+        break
       }
     }
 
-    const isCorrect = isInCorrectPrefix || isInCorrectSuffix;
-    return isSpectating ? spectatorEducationalMode && isCorrect : isCorrect;
-  };
+    const isCorrect = isInCorrectPrefix || isInCorrectSuffix
+    return isSpectating ? spectatorEducationalMode && isCorrect : isCorrect
+  }
 
   // Get all card positions (card centers) with scale information
   const cardCenters = sequence
     .map((card) => {
-      const state = cardStates.get(card.id);
-      if (!state) return null;
-      const scale = isCardCorrect(card) ? 0.5 : 1;
+      const state = cardStates.get(card.id)
+      if (!state) return null
+      const scale = isCardCorrect(card) ? 0.5 : 1
       return {
         x: (state.x / 100) * viewportWidth + CARD_HALF_WIDTH,
         y: (state.y / 100) * viewportHeight + CARD_HALF_HEIGHT,
         cardId: card.id,
         scale,
-      };
+      }
     })
-    .filter(
-      (p): p is { x: number; y: number; cardId: string; scale: number } =>
-        p !== null,
-    );
+    .filter((p): p is { x: number; y: number; cardId: string; scale: number } => p !== null)
 
-  if (cardCenters.length < 2) return null;
+  if (cardCenters.length < 2) return null
 
   // Helper function to find intersection of line from center in direction (dx, dy) with card rectangle
   const findCardEdgePoint = (
@@ -222,97 +219,96 @@ function ContinuousSequencePath({
     centerY: number,
     dx: number,
     dy: number,
-    scale: number,
+    scale: number
   ): { x: number; y: number } => {
     // Normalize direction
-    const length = Math.sqrt(dx * dx + dy * dy);
-    const ndx = dx / length;
-    const ndy = dy / length;
+    const length = Math.sqrt(dx * dx + dy * dy)
+    const ndx = dx / length
+    const ndy = dy / length
 
     // Apply scale to card dimensions
-    const scaledHalfWidth = CARD_HALF_WIDTH * scale;
-    const scaledHalfHeight = CARD_HALF_HEIGHT * scale;
+    const scaledHalfWidth = CARD_HALF_WIDTH * scale
+    const scaledHalfHeight = CARD_HALF_HEIGHT * scale
 
     // Find which edge we hit first
-    const txRight = ndx > 0 ? scaledHalfWidth / ndx : Number.POSITIVE_INFINITY;
-    const txLeft = ndx < 0 ? -scaledHalfWidth / ndx : Number.POSITIVE_INFINITY;
-    const tyBottom =
-      ndy > 0 ? scaledHalfHeight / ndy : Number.POSITIVE_INFINITY;
-    const tyTop = ndy < 0 ? -scaledHalfHeight / ndy : Number.POSITIVE_INFINITY;
+    const txRight = ndx > 0 ? scaledHalfWidth / ndx : Number.POSITIVE_INFINITY
+    const txLeft = ndx < 0 ? -scaledHalfWidth / ndx : Number.POSITIVE_INFINITY
+    const tyBottom = ndy > 0 ? scaledHalfHeight / ndy : Number.POSITIVE_INFINITY
+    const tyTop = ndy < 0 ? -scaledHalfHeight / ndy : Number.POSITIVE_INFINITY
 
-    const t = Math.min(txRight, txLeft, tyBottom, tyTop);
+    const t = Math.min(txRight, txLeft, tyBottom, tyTop)
 
     return {
       x: centerX + ndx * t,
       y: centerY + ndy * t,
-    };
-  };
+    }
+  }
 
   // Calculate edge points for each card based on direction to next/prev card
   const positions = cardCenters.map((center, i) => {
     if (i === 0) {
       // First card: direction towards next card
-      const next = cardCenters[i + 1];
-      const dx = next.x - center.x;
-      const dy = next.y - center.y;
-      return findCardEdgePoint(center.x, center.y, dx, dy, center.scale);
+      const next = cardCenters[i + 1]
+      const dx = next.x - center.x
+      const dy = next.y - center.y
+      return findCardEdgePoint(center.x, center.y, dx, dy, center.scale)
     }
     if (i === cardCenters.length - 1) {
       // Last card: direction from previous card
-      const prev = cardCenters[i - 1];
-      const dx = center.x - prev.x;
-      const dy = center.y - prev.y;
-      return findCardEdgePoint(center.x, center.y, dx, dy, center.scale);
+      const prev = cardCenters[i - 1]
+      const dx = center.x - prev.x
+      const dy = center.y - prev.y
+      return findCardEdgePoint(center.x, center.y, dx, dy, center.scale)
     }
     // Middle cards: average direction between prev and next
-    const prev = cardCenters[i - 1];
-    const next = cardCenters[i + 1];
-    const dx = next.x - prev.x;
-    const dy = next.y - prev.y;
-    return findCardEdgePoint(center.x, center.y, dx, dy, center.scale);
-  });
+    const prev = cardCenters[i - 1]
+    const next = cardCenters[i + 1]
+    const dx = next.x - prev.x
+    const dy = next.y - prev.y
+    return findCardEdgePoint(center.x, center.y, dx, dy, center.scale)
+  })
 
-  if (positions.length < 2) return null;
+  if (positions.length < 2) return null
 
   // Build continuous curved path using cubic bezier curves with smooth transitions
   // Use Catmull-Rom style control points for smooth continuous curves
-  let pathD = `M ${positions[0].x} ${positions[0].y}`;
+  let pathD = `M ${positions[0].x} ${positions[0].y}`
 
   for (let i = 0; i < positions.length - 1; i++) {
-    const current = positions[i];
-    const next = positions[i + 1];
+    const current = positions[i]
+    const next = positions[i + 1]
 
     // Get previous and next-next points for tangent calculation (or use current/next if at edges)
-    const prev = i > 0 ? positions[i - 1] : current;
-    const nextNext = i < positions.length - 2 ? positions[i + 2] : next;
+    const prev = i > 0 ? positions[i - 1] : current
+    const nextNext = i < positions.length - 2 ? positions[i + 2] : next
 
     // Calculate tangent vectors for smooth curve
     // Tangent at current point: direction from prev to next
-    const tension = 0.3; // Adjust this to control curve tightness (0 = loose, 1 = tight)
+    const tension = 0.3 // Adjust this to control curve tightness (0 = loose, 1 = tight)
 
-    const tangent1X = (next.x - prev.x) * tension;
-    const tangent1Y = (next.y - prev.y) * tension;
+    const tangent1X = (next.x - prev.x) * tension
+    const tangent1Y = (next.y - prev.y) * tension
 
     // Tangent at next point: direction from current to nextNext
-    const tangent2X = (nextNext.x - current.x) * tension;
-    const tangent2Y = (nextNext.y - current.y) * tension;
+    const tangent2X = (nextNext.x - current.x) * tension
+    const tangent2Y = (nextNext.y - current.y) * tension
 
     // Control points for cubic bezier
-    const cp1X = current.x + tangent1X;
-    const cp1Y = current.y + tangent1Y;
-    const cp2X = next.x - tangent2X;
-    const cp2Y = next.y - tangent2Y;
+    const cp1X = current.x + tangent1X
+    const cp1Y = current.y + tangent1Y
+    const cp2X = next.x - tangent2X
+    const cp2Y = next.y - tangent2Y
 
-    pathD += ` C ${cp1X} ${cp1Y}, ${cp2X} ${cp2Y}, ${next.x} ${next.y}`;
+    pathD += ` C ${cp1X} ${cp1Y}, ${cp2X} ${cp2Y}, ${next.x} ${next.y}`
   }
 
   // Calculate badge positions along the actual drawn path at arc-length midpoint
   const badges: Array<{
-    x: number;
-    y: number;
-    number: number;
-    isCorrect: boolean;
-  }> = [];
+    x: number
+    y: number
+    number: number
+    isCorrect: boolean
+  }> = []
 
   // Helper to evaluate cubic bezier at parameter t
   const evalCubicBezier = (
@@ -324,78 +320,57 @@ function ContinuousSequencePath({
     cp2y: number,
     p1x: number,
     p1y: number,
-    t: number,
+    t: number
   ) => {
-    const mt = 1 - t;
+    const mt = 1 - t
     return {
-      x:
-        mt * mt * mt * p0x +
-        3 * mt * mt * t * cp1x +
-        3 * mt * t * t * cp2x +
-        t * t * t * p1x,
-      y:
-        mt * mt * mt * p0y +
-        3 * mt * mt * t * cp1y +
-        3 * mt * t * t * cp2y +
-        t * t * t * p1y,
-    };
-  };
+      x: mt * mt * mt * p0x + 3 * mt * mt * t * cp1x + 3 * mt * t * t * cp2x + t * t * t * p1x,
+      y: mt * mt * mt * p0y + 3 * mt * mt * t * cp1y + 3 * mt * t * t * cp2y + t * t * t * p1y,
+    }
+  }
 
   for (let i = 0; i < positions.length - 1; i++) {
-    const current = positions[i];
-    const next = positions[i + 1];
+    const current = positions[i]
+    const next = positions[i + 1]
 
     // Use the actual edge-based control points (same as the drawn path)
-    const prev = i > 0 ? positions[i - 1] : current;
-    const nextNext = i < positions.length - 2 ? positions[i + 2] : next;
-    const tension = 0.3;
+    const prev = i > 0 ? positions[i - 1] : current
+    const nextNext = i < positions.length - 2 ? positions[i + 2] : next
+    const tension = 0.3
 
-    const tangent1X = (next.x - prev.x) * tension;
-    const tangent1Y = (next.y - prev.y) * tension;
-    const tangent2X = (nextNext.x - current.x) * tension;
-    const tangent2Y = (nextNext.y - current.y) * tension;
+    const tangent1X = (next.x - prev.x) * tension
+    const tangent1Y = (next.y - prev.y) * tension
+    const tangent2X = (nextNext.x - current.x) * tension
+    const tangent2Y = (nextNext.y - current.y) * tension
 
-    const cp1X = current.x + tangent1X;
-    const cp1Y = current.y + tangent1Y;
-    const cp2X = next.x - tangent2X;
-    const cp2Y = next.y - tangent2Y;
+    const cp1X = current.x + tangent1X
+    const cp1Y = current.y + tangent1Y
+    const cp2X = next.x - tangent2X
+    const cp2Y = next.y - tangent2Y
 
     // Sample the curve at many points to calculate arc length
-    const samples = 50;
-    const arcLengths: number[] = [0];
-    let prevPoint = { x: current.x, y: current.y };
+    const samples = 50
+    const arcLengths: number[] = [0]
+    let prevPoint = { x: current.x, y: current.y }
 
     for (let j = 1; j <= samples; j++) {
-      const t = j / samples;
-      const point = evalCubicBezier(
-        current.x,
-        current.y,
-        cp1X,
-        cp1Y,
-        cp2X,
-        cp2Y,
-        next.x,
-        next.y,
-        t,
-      );
-      const segmentLength = Math.sqrt(
-        (point.x - prevPoint.x) ** 2 + (point.y - prevPoint.y) ** 2,
-      );
-      arcLengths.push(arcLengths[arcLengths.length - 1] + segmentLength);
-      prevPoint = point;
+      const t = j / samples
+      const point = evalCubicBezier(current.x, current.y, cp1X, cp1Y, cp2X, cp2Y, next.x, next.y, t)
+      const segmentLength = Math.sqrt((point.x - prevPoint.x) ** 2 + (point.y - prevPoint.y) ** 2)
+      arcLengths.push(arcLengths[arcLengths.length - 1] + segmentLength)
+      prevPoint = point
     }
 
     // Find the t value that corresponds to 50% of arc length
-    const totalArcLength = arcLengths[arcLengths.length - 1];
-    const targetLength = totalArcLength * 0.5;
+    const totalArcLength = arcLengths[arcLengths.length - 1]
+    const targetLength = totalArcLength * 0.5
 
-    let tAtMidArc = 0.5;
+    let tAtMidArc = 0.5
     for (let j = 0; j < arcLengths.length - 1; j++) {
       if (arcLengths[j] <= targetLength && targetLength <= arcLengths[j + 1]) {
-        const ratio =
-          (targetLength - arcLengths[j]) / (arcLengths[j + 1] - arcLengths[j]);
-        tAtMidArc = (j + ratio) / samples;
-        break;
+        const ratio = (targetLength - arcLengths[j]) / (arcLengths[j + 1] - arcLengths[j])
+        tAtMidArc = (j + ratio) / samples
+        break
       }
     }
 
@@ -409,130 +384,119 @@ function ContinuousSequencePath({
       cp2Y,
       next.x,
       next.y,
-      tAtMidArc,
-    );
+      tAtMidArc
+    )
 
     // Calculate tangent at this t for perpendicular offset
-    const mt = 1 - tAtMidArc;
+    const mt = 1 - tAtMidArc
     const tangentAtMidX =
       3 * mt * mt * (cp1X - current.x) +
       6 * mt * tAtMidArc * (cp2X - cp1X) +
-      3 * tAtMidArc * tAtMidArc * (next.x - cp2X);
+      3 * tAtMidArc * tAtMidArc * (next.x - cp2X)
     const tangentAtMidY =
       3 * mt * mt * (cp1Y - current.y) +
       6 * mt * tAtMidArc * (cp2Y - cp1Y) +
-      3 * tAtMidArc * tAtMidArc * (next.y - cp2Y);
+      3 * tAtMidArc * tAtMidArc * (next.y - cp2Y)
 
     // Small perpendicular offset so badges sit slightly off the curve line
-    const perpX = -tangentAtMidY;
-    const perpY = tangentAtMidX;
-    const perpLength = Math.sqrt(perpX * perpX + perpY * perpY);
-    const offsetDistance = 5; // Small offset
+    const perpX = -tangentAtMidY
+    const perpY = tangentAtMidX
+    const perpLength = Math.sqrt(perpX * perpX + perpY * perpY)
+    const offsetDistance = 5 // Small offset
 
-    const finalX = midPoint.x + (perpX / perpLength) * offsetDistance;
-    const finalY = midPoint.y + (perpY / perpLength) * offsetDistance;
+    const finalX = midPoint.x + (perpX / perpLength) * offsetDistance
+    const finalY = midPoint.y + (perpY / perpLength) * offsetDistance
 
     // Check if this connection is correct
     const isCorrect =
-      correctOrder[i]?.id === sequence[i].id &&
-      correctOrder[i + 1]?.id === sequence[i + 1].id;
+      correctOrder[i]?.id === sequence[i].id && correctOrder[i + 1]?.id === sequence[i + 1].id
 
     badges.push({
       x: finalX,
       y: finalY,
       number: i + 1,
       isCorrect,
-    });
+    })
   }
 
   // Check if entire sequence is correct for coloring
-  const allCorrect = sequence.every(
-    (card, idx) => correctOrder[idx]?.id === card.id,
-  );
+  const allCorrect = sequence.every((card, idx) => correctOrder[idx]?.id === card.id)
 
   return (
     <div
       style={{
-        position: "absolute",
+        position: 'absolute',
         left: 0,
         top: 0,
-        width: "100%",
-        height: "100%",
-        pointerEvents: "none",
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
         zIndex: 0,
       }}
     >
       <svg
         style={{
-          position: "absolute",
+          position: 'absolute',
           left: 0,
           top: 0,
-          width: "100%",
-          height: "100%",
-          overflow: "visible",
+          width: '100%',
+          height: '100%',
+          overflow: 'visible',
         }}
       >
         {/* Continuous curved path */}
         <path
           d={pathD}
-          stroke={
-            allCorrect ? "rgba(34, 197, 94, 0.8)" : "rgba(251, 146, 60, 0.7)"
-          }
-          strokeWidth={allCorrect ? "8" : "6"}
+          stroke={allCorrect ? 'rgba(34, 197, 94, 0.8)' : 'rgba(251, 146, 60, 0.7)'}
+          strokeWidth={allCorrect ? '8' : '6'}
           fill="none"
           style={{
-            filter: allCorrect
-              ? "drop-shadow(0 0 8px rgba(34, 197, 94, 0.6))"
-              : "none",
+            filter: allCorrect ? 'drop-shadow(0 0 8px rgba(34, 197, 94, 0.6))' : 'none',
           }}
         />
 
         {/* Arrowhead at the end */}
         {(() => {
-          const i = positions.length - 2; // Last segment index
-          const current = positions[i];
-          const next = positions[i + 1];
+          const i = positions.length - 2 // Last segment index
+          const current = positions[i]
+          const next = positions[i + 1]
 
           // Recalculate control points for last segment
-          const prev = i > 0 ? positions[i - 1] : current;
-          const nextNext = next; // At the end, so nextNext is same as next
-          const tension = 0.3;
+          const prev = i > 0 ? positions[i - 1] : current
+          const nextNext = next // At the end, so nextNext is same as next
+          const tension = 0.3
 
-          const tangent1X = (next.x - prev.x) * tension;
-          const tangent1Y = (next.y - prev.y) * tension;
-          const tangent2X = (nextNext.x - current.x) * tension;
-          const tangent2Y = (nextNext.y - current.y) * tension;
+          const tangent1X = (next.x - prev.x) * tension
+          const tangent1Y = (next.y - prev.y) * tension
+          const tangent2X = (nextNext.x - current.x) * tension
+          const tangent2Y = (nextNext.y - current.y) * tension
 
-          const cp1X = current.x + tangent1X;
-          const cp1Y = current.y + tangent1Y;
-          const cp2X = next.x - tangent2X;
-          const cp2Y = next.y - tangent2Y;
+          const cp1X = current.x + tangent1X
+          const cp1Y = current.y + tangent1Y
+          const cp2X = next.x - tangent2X
+          const cp2Y = next.y - tangent2Y
 
           // Calculate tangent at t=1 (end of curve) for cubic bezier
           // Derivative: B'(t) = 3(1-t)²(P1-P0) + 6(1-t)t(P2-P1) + 3t²(P3-P2)
           // At t=1: B'(1) = 3(P3-P2)
-          const tangentX = 3 * (next.x - cp2X);
-          const tangentY = 3 * (next.y - cp2Y);
-          const arrowAngle = Math.atan2(tangentY, tangentX);
+          const tangentX = 3 * (next.x - cp2X)
+          const tangentY = 3 * (next.y - cp2Y)
+          const arrowAngle = Math.atan2(tangentY, tangentX)
 
           // Arrow triangle
-          const tipX = next.x;
-          const tipY = next.y;
-          const baseX = tipX - Math.cos(arrowAngle) * 10;
-          const baseY = tipY - Math.sin(arrowAngle) * 10;
-          const left = `${baseX + Math.cos(arrowAngle + Math.PI / 2) * 6},${baseY + Math.sin(arrowAngle + Math.PI / 2) * 6}`;
-          const right = `${baseX + Math.cos(arrowAngle - Math.PI / 2) * 6},${baseY + Math.sin(arrowAngle - Math.PI / 2) * 6}`;
+          const tipX = next.x
+          const tipY = next.y
+          const baseX = tipX - Math.cos(arrowAngle) * 10
+          const baseY = tipY - Math.sin(arrowAngle) * 10
+          const left = `${baseX + Math.cos(arrowAngle + Math.PI / 2) * 6},${baseY + Math.sin(arrowAngle + Math.PI / 2) * 6}`
+          const right = `${baseX + Math.cos(arrowAngle - Math.PI / 2) * 6},${baseY + Math.sin(arrowAngle - Math.PI / 2) * 6}`
 
           return (
             <polygon
               points={`${tipX},${tipY} ${left} ${right}`}
-              fill={
-                allCorrect
-                  ? "rgba(34, 197, 94, 0.9)"
-                  : "rgba(251, 146, 60, 0.8)"
-              }
+              fill={allCorrect ? 'rgba(34, 197, 94, 0.9)' : 'rgba(251, 146, 60, 0.8)'}
             />
-          );
+          )
         })()}
       </svg>
 
@@ -541,34 +505,32 @@ function ContinuousSequencePath({
         <div
           key={badge.number}
           style={{
-            position: "absolute",
+            position: 'absolute',
             left: `${badge.x}px`,
             top: `${badge.y}px`,
-            transform: "translate(-50%, -50%)",
-            background: badge.isCorrect ? "#22c55e" : "#f97316",
-            color: "white",
-            borderRadius: "50%",
-            width: "32px",
-            height: "32px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            fontSize: "14px",
-            fontWeight: "bold",
-            border: "3px solid white",
+            transform: 'translate(-50%, -50%)',
+            background: badge.isCorrect ? '#22c55e' : '#f97316',
+            color: 'white',
+            borderRadius: '50%',
+            width: '32px',
+            height: '32px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '14px',
+            fontWeight: 'bold',
+            border: '3px solid white',
             boxShadow: badge.isCorrect
-              ? "0 0 0 2px #22c55e, 0 4px 8px rgba(0, 0, 0, 0.3)"
-              : "0 0 0 2px #f97316, 0 4px 8px rgba(0, 0, 0, 0.3)",
-            animation: badge.isCorrect
-              ? "correctBadgePulse 1.5s ease-in-out infinite"
-              : "none",
+              ? '0 0 0 2px #22c55e, 0 4px 8px rgba(0, 0, 0, 0.3)'
+              : '0 0 0 2px #f97316, 0 4px 8px rgba(0, 0, 0, 0.3)',
+            animation: badge.isCorrect ? 'correctBadgePulse 1.5s ease-in-out infinite' : 'none',
           }}
         >
           {badge.number}
         </div>
       ))}
     </div>
-  );
+  )
 }
 
 /**
@@ -584,36 +546,36 @@ function AnimatedArrow({
   viewportWidth,
   viewportHeight,
 }: {
-  fromCard: CardState;
-  toCard: CardState;
-  isCorrect: boolean;
-  sequenceNumber: number;
-  isDragging: boolean;
-  isResizing: boolean;
-  viewportWidth: number;
-  viewportHeight: number;
+  fromCard: CardState
+  toCard: CardState
+  isCorrect: boolean
+  sequenceNumber: number
+  isDragging: boolean
+  isResizing: boolean
+  viewportWidth: number
+  viewportHeight: number
 }) {
   // Convert percentage positions to pixels
   const fromPx = {
     x: (fromCard.x / 100) * viewportWidth,
     y: (fromCard.y / 100) * viewportHeight,
-  };
+  }
   const toPx = {
     x: (toCard.x / 100) * viewportWidth,
     y: (toCard.y / 100) * viewportHeight,
-  };
+  }
 
   // Calculate arrow position (from center of current card to center of next card)
-  const fromX = fromPx.x + 70; // 70 = half of card width (140px)
-  const fromY = fromPx.y + 90; // 90 = half of card height (180px)
-  const toX = toPx.x + 70;
-  const toY = toPx.y + 90;
+  const fromX = fromPx.x + 70 // 70 = half of card width (140px)
+  const fromY = fromPx.y + 90 // 90 = half of card height (180px)
+  const toX = toPx.x + 70
+  const toY = toPx.y + 90
 
   // Calculate angle and distance
-  const dx = toX - fromX;
-  const dy = toY - fromY;
-  const angle = Math.atan2(dy, dx) * (180 / Math.PI);
-  const distance = Math.sqrt(dx * dx + dy * dy);
+  const dx = toX - fromX
+  const dy = toY - fromY
+  const angle = Math.atan2(dy, dx) * (180 / Math.PI)
+  const distance = Math.sqrt(dx * dx + dy * dy)
 
   // Use spring animation for arrow position and size
   // Disable animation when dragging or resizing
@@ -627,179 +589,147 @@ function AnimatedArrow({
       tension: 300,
       friction: 30,
     },
-  });
+  })
 
   // Don't draw arrow if cards are too close
-  if (distance < 80) return null;
+  if (distance < 80) return null
 
   // Calculate control point for bezier curve (perpendicular to line, offset by 30px)
-  const midX = (fromX + toX) / 2;
-  const midY = (fromY + toY) / 2;
-  const perpAngle = angle + 90; // Perpendicular to the line
-  const curveOffset = 30; // How much to curve (in pixels)
-  const controlX = midX + Math.cos((perpAngle * Math.PI) / 180) * curveOffset;
-  const controlY = midY + Math.sin((perpAngle * Math.PI) / 180) * curveOffset;
+  const midX = (fromX + toX) / 2
+  const midY = (fromY + toY) / 2
+  const perpAngle = angle + 90 // Perpendicular to the line
+  const curveOffset = 30 // How much to curve (in pixels)
+  const controlX = midX + Math.cos((perpAngle * Math.PI) / 180) * curveOffset
+  const controlY = midY + Math.sin((perpAngle * Math.PI) / 180) * curveOffset
 
   // Calculate arrowhead position and angle at the end of the curve
   // For a quadratic bezier, the tangent at t=1 is: 2*(P2 - P1)
-  const tangentX = toX - controlX;
-  const tangentY = toY - controlY;
-  const arrowAngle = Math.atan2(tangentY, tangentX) * (180 / Math.PI);
+  const tangentX = toX - controlX
+  const tangentY = toY - controlY
+  const arrowAngle = Math.atan2(tangentY, tangentX) * (180 / Math.PI)
 
   return (
     <animated.div
       style={{
-        position: "absolute",
+        position: 'absolute',
         left: 0,
         top: 0,
-        width: "100%",
-        height: "100%",
-        pointerEvents: "none",
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
         zIndex: 0,
       }}
     >
       <svg
         style={{
-          position: "absolute",
+          position: 'absolute',
           left: 0,
           top: 0,
-          width: "100%",
-          height: "100%",
-          overflow: "visible",
+          width: '100%',
+          height: '100%',
+          overflow: 'visible',
         }}
       >
         {/* Curved line using quadratic bezier */}
         <animated.path
           d={to(
-            [
-              springProps.fromX,
-              springProps.fromY,
-              springProps.distance,
-              springProps.angle,
-            ],
+            [springProps.fromX, springProps.fromY, springProps.distance, springProps.angle],
             (fx, fy, dist, ang) => {
               // Recalculate curve with animated values
-              const tx = fx + Math.cos((ang * Math.PI) / 180) * dist;
-              const ty = fy + Math.sin((ang * Math.PI) / 180) * dist;
-              const mx = (fx + tx) / 2;
-              const my = (fy + ty) / 2;
-              const perpAng = ang + 90;
-              const cx = mx + Math.cos((perpAng * Math.PI) / 180) * curveOffset;
-              const cy = my + Math.sin((perpAng * Math.PI) / 180) * curveOffset;
-              return `M ${fx} ${fy} Q ${cx} ${cy} ${tx} ${ty}`;
-            },
+              const tx = fx + Math.cos((ang * Math.PI) / 180) * dist
+              const ty = fy + Math.sin((ang * Math.PI) / 180) * dist
+              const mx = (fx + tx) / 2
+              const my = (fy + ty) / 2
+              const perpAng = ang + 90
+              const cx = mx + Math.cos((perpAng * Math.PI) / 180) * curveOffset
+              const cy = my + Math.sin((perpAng * Math.PI) / 180) * curveOffset
+              return `M ${fx} ${fy} Q ${cx} ${cy} ${tx} ${ty}`
+            }
           )}
-          stroke={
-            isCorrect ? "rgba(34, 197, 94, 0.8)" : "rgba(251, 146, 60, 0.7)"
-          }
-          strokeWidth={isCorrect ? "4" : "3"}
+          stroke={isCorrect ? 'rgba(34, 197, 94, 0.8)' : 'rgba(251, 146, 60, 0.7)'}
+          strokeWidth={isCorrect ? '4' : '3'}
           fill="none"
           style={{
-            filter: isCorrect
-              ? "drop-shadow(0 0 8px rgba(34, 197, 94, 0.6))"
-              : "none",
+            filter: isCorrect ? 'drop-shadow(0 0 8px rgba(34, 197, 94, 0.6))' : 'none',
           }}
         />
 
         {/* Arrowhead */}
         <animated.polygon
           points={to(
-            [
-              springProps.fromX,
-              springProps.fromY,
-              springProps.distance,
-              springProps.angle,
-            ],
+            [springProps.fromX, springProps.fromY, springProps.distance, springProps.angle],
             (fx, fy, dist, ang) => {
               // Recalculate end position and angle
-              const tx = fx + Math.cos((ang * Math.PI) / 180) * dist;
-              const ty = fy + Math.sin((ang * Math.PI) / 180) * dist;
-              const mx = (fx + tx) / 2;
-              const my = (fy + ty) / 2;
-              const perpAng = ang + 90;
-              const cx = mx + Math.cos((perpAng * Math.PI) / 180) * curveOffset;
-              const cy = my + Math.sin((perpAng * Math.PI) / 180) * curveOffset;
-              const tangX = tx - cx;
-              const tangY = ty - cy;
-              const aAngle = Math.atan2(tangY, tangX);
+              const tx = fx + Math.cos((ang * Math.PI) / 180) * dist
+              const ty = fy + Math.sin((ang * Math.PI) / 180) * dist
+              const mx = (fx + tx) / 2
+              const my = (fy + ty) / 2
+              const perpAng = ang + 90
+              const cx = mx + Math.cos((perpAng * Math.PI) / 180) * curveOffset
+              const cy = my + Math.sin((perpAng * Math.PI) / 180) * curveOffset
+              const tangX = tx - cx
+              const tangY = ty - cy
+              const aAngle = Math.atan2(tangY, tangX)
 
               // Arrow points relative to tip
-              const tipX = tx;
-              const tipY = ty;
-              const baseX = tipX - Math.cos(aAngle) * 10;
-              const baseY = tipY - Math.sin(aAngle) * 10;
-              const left = `${baseX + Math.cos(aAngle + Math.PI / 2) * 6},${baseY + Math.sin(aAngle + Math.PI / 2) * 6}`;
-              const right = `${baseX + Math.cos(aAngle - Math.PI / 2) * 6},${baseY + Math.sin(aAngle - Math.PI / 2) * 6}`;
-              return `${tipX},${tipY} ${left} ${right}`;
-            },
+              const tipX = tx
+              const tipY = ty
+              const baseX = tipX - Math.cos(aAngle) * 10
+              const baseY = tipY - Math.sin(aAngle) * 10
+              const left = `${baseX + Math.cos(aAngle + Math.PI / 2) * 6},${baseY + Math.sin(aAngle + Math.PI / 2) * 6}`
+              const right = `${baseX + Math.cos(aAngle - Math.PI / 2) * 6},${baseY + Math.sin(aAngle - Math.PI / 2) * 6}`
+              return `${tipX},${tipY} ${left} ${right}`
+            }
           )}
-          fill={
-            isCorrect ? "rgba(34, 197, 94, 0.9)" : "rgba(251, 146, 60, 0.8)"
-          }
+          fill={isCorrect ? 'rgba(34, 197, 94, 0.9)' : 'rgba(251, 146, 60, 0.8)'}
         />
       </svg>
 
       {/* Sequence number badge */}
       <animated.div
         style={{
-          position: "absolute",
+          position: 'absolute',
           left: to(
-            [
-              springProps.fromX,
-              springProps.fromY,
-              springProps.distance,
-              springProps.angle,
-            ],
+            [springProps.fromX, springProps.fromY, springProps.distance, springProps.angle],
             (fx, fy, dist, ang) => {
-              const tx = fx + Math.cos((ang * Math.PI) / 180) * dist;
-              const mx = (fx + tx) / 2;
-              const perpAng = ang + 90;
-              const cx = mx + Math.cos((perpAng * Math.PI) / 180) * curveOffset;
-              return `${cx}px`;
-            },
+              const tx = fx + Math.cos((ang * Math.PI) / 180) * dist
+              const mx = (fx + tx) / 2
+              const perpAng = ang + 90
+              const cx = mx + Math.cos((perpAng * Math.PI) / 180) * curveOffset
+              return `${cx}px`
+            }
           ),
           top: to(
-            [
-              springProps.fromX,
-              springProps.fromY,
-              springProps.distance,
-              springProps.angle,
-            ],
+            [springProps.fromX, springProps.fromY, springProps.distance, springProps.angle],
             (fx, fy, dist, ang) => {
-              const tx = fx + Math.cos((ang * Math.PI) / 180) * dist;
-              const ty = fy + Math.sin((ang * Math.PI) / 180) * dist;
-              const my = (fy + ty) / 2;
-              const perpAng = ang + 90;
-              const cy = my + Math.sin((perpAng * Math.PI) / 180) * curveOffset;
-              return `${cy}px`;
-            },
+              const tx = fx + Math.cos((ang * Math.PI) / 180) * dist
+              const ty = fy + Math.sin((ang * Math.PI) / 180) * dist
+              const my = (fy + ty) / 2
+              const perpAng = ang + 90
+              const cy = my + Math.sin((perpAng * Math.PI) / 180) * curveOffset
+              return `${cy}px`
+            }
           ),
-          transform: "translate(-50%, -50%)",
-          background: isCorrect
-            ? "rgba(34, 197, 94, 0.95)"
-            : "rgba(251, 146, 60, 0.95)",
-          color: "white",
-          borderRadius: "50%",
-          width: "24px",
-          height: "24px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          fontSize: "12px",
-          fontWeight: "bold",
-          border: "2px solid white",
-          boxShadow: isCorrect
-            ? "0 0 12px rgba(34, 197, 94, 0.6)"
-            : "0 2px 4px rgba(0,0,0,0.2)",
-          animation: isCorrect
-            ? "correctBadgePulse 1.5s ease-in-out infinite"
-            : "none",
+          transform: 'translate(-50%, -50%)',
+          background: isCorrect ? 'rgba(34, 197, 94, 0.95)' : 'rgba(251, 146, 60, 0.95)',
+          color: 'white',
+          borderRadius: '50%',
+          width: '24px',
+          height: '24px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: '12px',
+          fontWeight: 'bold',
+          border: '2px solid white',
+          boxShadow: isCorrect ? '0 0 12px rgba(34, 197, 94, 0.6)' : '0 2px 4px rgba(0,0,0,0.2)',
+          animation: isCorrect ? 'correctBadgePulse 1.5s ease-in-out infinite' : 'none',
         }}
       >
         {sequenceNumber}
       </animated.div>
     </animated.div>
-  );
+  )
 }
 
 /**
@@ -821,34 +751,34 @@ function AnimatedCard({
   onPointerMove,
   onPointerUp,
 }: {
-  card: SortingCard;
-  cardState: CardState;
-  isDragging: boolean;
-  isResizing: boolean;
-  isSpectating: boolean;
-  isCorrect: boolean;
-  draggedByPlayerId?: string;
-  localPlayerId?: string;
-  players: Map<string, { id: string; name: string; emoji: string }>;
-  viewportWidth: number;
-  viewportHeight: number;
-  onPointerDown: (e: React.PointerEvent) => void;
-  onPointerMove: (e: React.PointerEvent) => void;
-  onPointerUp: (e: React.PointerEvent) => void;
+  card: SortingCard
+  cardState: CardState
+  isDragging: boolean
+  isResizing: boolean
+  isSpectating: boolean
+  isCorrect: boolean
+  draggedByPlayerId?: string
+  localPlayerId?: string
+  players: Map<string, { id: string; name: string; emoji: string }>
+  viewportWidth: number
+  viewportHeight: number
+  onPointerDown: (e: React.PointerEvent) => void
+  onPointerMove: (e: React.PointerEvent) => void
+  onPointerUp: (e: React.PointerEvent) => void
 }) {
   // Convert percentage position to pixels for rendering
   const pixelPos = {
     x: (cardState.x / 100) * viewportWidth,
     y: (cardState.y / 100) * viewportHeight,
-  };
+  }
 
   // Determine if card is in correct prefix or suffix position
   // These cards should be scaled down to 50% and faded to 50% opacity
   const isInCorrectPosition = (() => {
     // For AnimatedCard, we need to recalculate since we don't have inferredSequence here
     // This is a simplified check - we'll need to pass this as a prop or recalculate
-    return isCorrect;
-  })();
+    return isCorrect
+  })()
 
   // Use spring animation for position, rotation, scale, and opacity
   // Disable animation when:
@@ -862,15 +792,15 @@ function AnimatedCard({
     opacity: isInCorrectPosition ? 0.5 : 1,
     immediate: (key) => {
       // Scale and opacity always animate smoothly
-      if (key === "scale" || key === "opacity") return false;
+      if (key === 'scale' || key === 'opacity') return false
       // Position and rotation are immediate when dragging or resizing
-      return isDragging || isResizing;
+      return isDragging || isResizing
     },
     config: {
       tension: 300,
       friction: 30,
     },
-  });
+  })
 
   return (
     <animated.div
@@ -878,45 +808,43 @@ function AnimatedCard({
       onPointerMove={onPointerMove}
       onPointerUp={onPointerUp}
       className={css({
-        position: "absolute",
-        width: "140px",
-        height: "180px",
-        cursor: isSpectating ? "default" : "grab",
-        touchAction: "none",
-        userSelect: "none",
-        transition: "box-shadow 0.2s ease",
-        borderRadius: "12px",
-        overflow: "hidden",
+        position: 'absolute',
+        width: '140px',
+        height: '180px',
+        cursor: isSpectating ? 'default' : 'grab',
+        touchAction: 'none',
+        userSelect: 'none',
+        transition: 'box-shadow 0.2s ease',
+        borderRadius: '12px',
+        overflow: 'hidden',
       })}
       style={{
         left: springProps.left.to((val) => `${val}px`),
         top: springProps.top.to((val) => `${val}px`),
         transform: to(
           [springProps.rotation, springProps.scale],
-          (r, s) => `rotate(${r}deg) scale(${s})`,
+          (r, s) => `rotate(${r}deg) scale(${s})`
         ),
         opacity: springProps.opacity,
         zIndex: cardState.zIndex,
-        boxShadow: isDragging
-          ? "0 20px 40px rgba(0, 0, 0, 0.3)"
-          : "0 4px 8px rgba(0, 0, 0, 0.15)",
+        boxShadow: isDragging ? '0 20px 40px rgba(0, 0, 0, 0.3)' : '0 4px 8px rgba(0, 0, 0, 0.15)',
       }}
     >
       <div
         className={css({
-          width: "100%",
-          height: "100%",
-          background: "white",
-          borderRadius: "12px",
-          border: isCorrect ? "3px solid #22c55e" : "3px solid #0369a1",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "12px",
-          boxSizing: "border-box",
-          overflow: "hidden",
+          width: '100%',
+          height: '100%',
+          background: 'white',
+          borderRadius: '12px',
+          border: isCorrect ? '3px solid #22c55e' : '3px solid #0369a1',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '12px',
+          boxSizing: 'border-box',
+          overflow: 'hidden',
           // Clip content to border-box so rounded corners work properly
-          backgroundClip: "border-box",
+          backgroundClip: 'border-box',
         })}
         dangerouslySetInnerHTML={{ __html: card.svgContent }}
       />
@@ -925,34 +853,34 @@ function AnimatedCard({
       {draggedByPlayerId &&
         draggedByPlayerId !== localPlayerId &&
         (() => {
-          const player = players.get(draggedByPlayerId);
-          if (!player) return null;
+          const player = players.get(draggedByPlayerId)
+          if (!player) return null
 
           return (
             <div
               style={{
-                position: "absolute",
+                position: 'absolute',
                 top: 0,
                 left: 0,
                 right: 0,
                 bottom: 0,
-                borderRadius: "12px",
-                background: "rgba(59, 130, 246, 0.15)",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontSize: "120px",
+                borderRadius: '12px',
+                background: 'rgba(59, 130, 246, 0.15)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '120px',
                 zIndex: 10,
-                pointerEvents: "none",
+                pointerEvents: 'none',
                 opacity: 0.3,
               }}
             >
               {player.emoji}
             </div>
-          );
+          )
         })()}
     </animated.div>
-  );
+  )
 }
 
 export function PlayingPhaseDrag() {
@@ -967,102 +895,99 @@ export function PlayingPhaseDrag() {
     isSpectating,
     localPlayerId,
     players,
-  } = useCardSorting();
+  } = useCardSorting()
 
   // Spectator educational mode (show correctness indicators)
-  const [spectatorEducationalMode, setSpectatorEducationalMode] =
-    useState(false);
+  const [spectatorEducationalMode, setSpectatorEducationalMode] = useState(false)
   // Spectator stats sidebar collapsed state
-  const [spectatorStatsCollapsed, setSpectatorStatsCollapsed] = useState(false);
+  const [spectatorStatsCollapsed, setSpectatorStatsCollapsed] = useState(false)
 
   // Activity feed notifications
   interface ActivityNotification {
-    id: string;
-    playerId: string;
-    playerEmoji: string;
-    playerName: string;
-    action: string;
-    timestamp: number;
+    id: string
+    playerId: string
+    playerEmoji: string
+    playerName: string
+    action: string
+    timestamp: number
   }
-  const [activityFeed, setActivityFeed] = useState<ActivityNotification[]>([]);
-  const activityIdCounter = useRef(0);
+  const [activityFeed, setActivityFeed] = useState<ActivityNotification[]>([])
+  const activityIdCounter = useRef(0)
 
   // Perfect sequence countdown (auto-submit after 3-2-1)
-  const [perfectCountdown, setPerfectCountdown] = useState<number | null>(null);
+  const [perfectCountdown, setPerfectCountdown] = useState<number | null>(null)
 
-  const containerRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null)
   const dragStateRef = useRef<{
-    cardId: string;
-    offsetX: number;
-    offsetY: number;
-    startX: number;
-    startY: number;
-    initialRotation: number;
-  } | null>(null);
+    cardId: string
+    offsetX: number
+    offsetY: number
+    startX: number
+    startY: number
+    initialRotation: number
+  } | null>(null)
 
   // Generate a stable unique ID for this browser window/tab
   // This allows us to identify our own position updates when they echo back from the server
-  const windowIdRef = useRef<string>();
+  const windowIdRef = useRef<string>()
   if (!windowIdRef.current) {
-    windowIdRef.current = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    windowIdRef.current = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
   }
 
   // Track card positions and visual states (UI only - not game state)
-  const [cardStates, setCardStates] = useState<Map<string, CardState>>(
-    new Map(),
-  );
-  const [draggingCardId, setDraggingCardId] = useState<string | null>(null);
-  const [nextZIndex, setNextZIndex] = useState(1);
+  const [cardStates, setCardStates] = useState<Map<string, CardState>>(new Map())
+  const [draggingCardId, setDraggingCardId] = useState<string | null>(null)
+  const [nextZIndex, setNextZIndex] = useState(1)
 
   // Track viewport dimensions for responsive positioning
   // Get viewport dimensions (uses mock dimensions in preview mode)
-  const viewport = useViewport();
+  const viewport = useViewport()
 
   // For spectators, reduce dimensions to account for panels
   const getEffectiveViewportWidth = () => {
-    const baseWidth = viewport.width;
+    const baseWidth = viewport.width
     // Sidebar is hidden on mobile (< 768px), narrower on desktop
     if (isSpectating && !spectatorStatsCollapsed && baseWidth >= 768) {
-      return baseWidth - 240; // Subtract stats sidebar width on desktop
+      return baseWidth - 240 // Subtract stats sidebar width on desktop
     }
-    return baseWidth;
-  };
+    return baseWidth
+  }
 
   const getEffectiveViewportHeight = () => {
-    const baseHeight = viewport.height;
-    const baseWidth = viewport.width;
+    const baseHeight = viewport.height
+    const baseWidth = viewport.width
     if (isSpectating) {
       // Banner is 170px on mobile (130px mini nav + 40px spectator banner), 56px on desktop
-      return baseHeight - (baseWidth < 768 ? 170 : 56);
+      return baseHeight - (baseWidth < 768 ? 170 : 56)
     }
-    return baseHeight;
-  };
+    return baseHeight
+  }
 
   const [viewportDimensions, setViewportDimensions] = useState({
     width: getEffectiveViewportWidth(),
     height: getEffectiveViewportHeight(),
-  });
+  })
 
   // Track if we're currently resizing to disable spring animations
-  const [isResizing, setIsResizing] = useState(false);
-  const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const [isResizing, setIsResizing] = useState(false)
+  const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
   // Throttle position updates during drag (every 100ms)
-  const lastSyncTimeRef = useRef<number>(0);
+  const lastSyncTimeRef = useRef<number>(0)
 
   // Track when we're waiting to check solution
-  const [waitingToCheck, setWaitingToCheck] = useState(false);
-  const cardsToInsertRef = useRef<SortingCard[]>([]);
-  const currentInsertIndexRef = useRef(0);
+  const [waitingToCheck, setWaitingToCheck] = useState(false)
+  const cardsToInsertRef = useRef<SortingCard[]>([])
+  const currentInsertIndexRef = useRef(0)
 
   // Helper to add activity notifications (only in collaborative mode)
   const addActivityNotification = useCallback(
     (playerId: string, action: string) => {
-      if (state.gameMode !== "collaborative") return;
-      if (playerId === localPlayerId) return; // Don't show notifications for own actions
+      if (state.gameMode !== 'collaborative') return
+      if (playerId === localPlayerId) return // Don't show notifications for own actions
 
-      const player = players.get(playerId);
-      if (!player) return;
+      const player = players.get(playerId)
+      if (!player) return
 
       const notification: ActivityNotification = {
         id: `activity-${activityIdCounter.current++}`,
@@ -1071,98 +996,93 @@ export function PlayingPhaseDrag() {
         playerName: player.name,
         action,
         timestamp: Date.now(),
-      };
+      }
 
-      setActivityFeed((prev) => [...prev, notification]);
+      setActivityFeed((prev) => [...prev, notification])
     },
-    [state.gameMode, localPlayerId, players],
-  );
+    [state.gameMode, localPlayerId, players]
+  )
 
   // Auto-dismiss notifications after 3 seconds
   useEffect(() => {
-    if (activityFeed.length === 0) return;
+    if (activityFeed.length === 0) return
 
     const timeout = setTimeout(() => {
-      const now = Date.now();
-      setActivityFeed((prev) => prev.filter((n) => now - n.timestamp < 3000));
-    }, 100); // Check every 100ms for smooth removal
+      const now = Date.now()
+      setActivityFeed((prev) => prev.filter((n) => now - n.timestamp < 3000))
+    }, 100) // Check every 100ms for smooth removal
 
-    return () => clearTimeout(timeout);
-  }, [activityFeed]);
+    return () => clearTimeout(timeout)
+  }, [activityFeed])
 
   // Track previous state for detecting changes
-  const prevDraggingPlayersRef = useRef<Set<string>>(new Set());
+  const prevDraggingPlayersRef = useRef<Set<string>>(new Set())
 
   // Detect state changes and generate activity notifications
   useEffect(() => {
     // Only track in collaborative mode
-    if (state.gameMode !== "collaborative") return;
-    if (!state.cardPositions) return;
+    if (state.gameMode !== 'collaborative') return
+    if (!state.cardPositions) return
 
     // Detect who is currently dragging cards
-    const currentlyDragging = new Set<string>();
+    const currentlyDragging = new Set<string>()
     for (const pos of state.cardPositions) {
       if (pos.draggedByPlayerId && pos.draggedByPlayerId !== localPlayerId) {
-        currentlyDragging.add(pos.draggedByPlayerId);
+        currentlyDragging.add(pos.draggedByPlayerId)
       }
     }
 
     // Detect new players starting to drag (activity notification)
     for (const playerId of currentlyDragging) {
       if (!prevDraggingPlayersRef.current.has(playerId)) {
-        addActivityNotification(playerId, "is moving cards");
+        addActivityNotification(playerId, 'is moving cards')
       }
     }
 
-    prevDraggingPlayersRef.current = currentlyDragging;
-  }, [
-    state.cardPositions,
-    state.gameMode,
-    localPlayerId,
-    addActivityNotification,
-  ]);
+    prevDraggingPlayersRef.current = currentlyDragging
+  }, [state.cardPositions, state.gameMode, localPlayerId, addActivityNotification])
 
   // Handle viewport resize
   useEffect(() => {
     const handleResize = () => {
       // Set resizing flag to disable spring animations
-      setIsResizing(true);
+      setIsResizing(true)
 
       // Update viewport dimensions immediately (accounting for spectator panels)
       setViewportDimensions({
         width: getEffectiveViewportWidth(),
         height: getEffectiveViewportHeight(),
-      });
+      })
 
       // Clear any existing timeout
       if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
+        clearTimeout(resizeTimeoutRef.current)
       }
 
       // After 150ms of no resize events, re-enable spring animations
       resizeTimeoutRef.current = setTimeout(() => {
-        setIsResizing(false);
-      }, 150);
-    };
+        setIsResizing(false)
+      }, 150)
+    }
 
-    window.addEventListener("resize", handleResize);
+    window.addEventListener('resize', handleResize)
     return () => {
-      window.removeEventListener("resize", handleResize);
+      window.removeEventListener('resize', handleResize)
       if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
+        clearTimeout(resizeTimeoutRef.current)
       }
-    };
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [])
 
   // Update viewport dimensions when spectator panels change
   useEffect(() => {
     setViewportDimensions({
       width: getEffectiveViewportWidth(),
       height: getEffectiveViewportHeight(),
-    });
+    })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSpectating, spectatorStatsCollapsed]);
+  }, [isSpectating, spectatorStatsCollapsed])
 
   // Initialize card positions when game starts or restarts
   useEffect(() => {
@@ -1170,25 +1090,23 @@ export function PlayingPhaseDrag() {
     const allCards = [
       ...state.availableCards,
       ...state.placedCards.filter((c): c is SortingCard => c !== null),
-    ];
+    ]
 
     // Only initialize if we have cards and either:
     // 1. No card states exist yet, OR
     // 2. The number of cards has changed (new game started)
     const shouldInitialize =
-      allCards.length > 0 &&
-      (cardStates.size === 0 || cardStates.size !== allCards.length);
+      allCards.length > 0 && (cardStates.size === 0 || cardStates.size !== allCards.length)
 
-    if (!shouldInitialize) return;
+    if (!shouldInitialize) return
 
-    const newStates = new Map<string, CardState>();
+    const newStates = new Map<string, CardState>()
 
     // Check if we have server positions to restore from
-    const hasServerPositions =
-      state.cardPositions && state.cardPositions.length === allCards.length;
+    const hasServerPositions = state.cardPositions && state.cardPositions.length === allCards.length
 
     allCards.forEach((card, index) => {
-      const serverPos = state.cardPositions?.find((p) => p.cardId === card.id);
+      const serverPos = state.cardPositions?.find((p) => p.cardId === card.id)
 
       if (hasServerPositions && serverPos) {
         // Restore from server (already in percentages)
@@ -1197,75 +1115,68 @@ export function PlayingPhaseDrag() {
           y: serverPos.y,
           rotation: serverPos.rotation,
           zIndex: serverPos.zIndex,
-        });
+        })
       } else {
         // Generate scattered positions that look like cards thrown on a table
         // Card is ~140px wide on ~1000px viewport = ~14% of width
         // Card is ~180px tall on ~800px viewport = ~22.5% of height
-        const xMargin = 5; // 5% margin on sides
-        const yMargin = 15; // 15% margin for top UI
+        const xMargin = 5 // 5% margin on sides
+        const yMargin = 15 // 15% margin for top UI
 
         // Create a more natural distribution by using clusters
         // Divide the play area into a rough grid, then add randomness
-        const numCards = allCards.length;
-        const cols = Math.ceil(Math.sqrt(numCards * 1.5)); // Slightly wider grid
-        const rows = Math.ceil(numCards / cols);
+        const numCards = allCards.length
+        const cols = Math.ceil(Math.sqrt(numCards * 1.5)) // Slightly wider grid
+        const rows = Math.ceil(numCards / cols)
 
-        const row = Math.floor(index / cols);
-        const col = index % cols;
+        const row = Math.floor(index / cols)
+        const col = index % cols
 
         // Available space after margins
-        const availableWidth = 100 - 2 * xMargin - 14;
-        const availableHeight = 100 - yMargin - 22.5;
+        const availableWidth = 100 - 2 * xMargin - 14
+        const availableHeight = 100 - yMargin - 22.5
 
         // Grid cell size
-        const cellWidth = availableWidth / cols;
-        const cellHeight = availableHeight / rows;
+        const cellWidth = availableWidth / cols
+        const cellHeight = availableHeight / rows
 
         // Base position in grid (centered in cell)
-        const baseX = xMargin + col * cellWidth + cellWidth / 2 - 7; // -7 to center card
-        const baseY = yMargin + row * cellHeight + cellHeight / 2 - 11.25; // -11.25 to center card
+        const baseX = xMargin + col * cellWidth + cellWidth / 2 - 7 // -7 to center card
+        const baseY = yMargin + row * cellHeight + cellHeight / 2 - 11.25 // -11.25 to center card
 
         // Add significant randomness to make it look scattered (±40% of cell size)
-        const offsetX = (Math.random() - 0.5) * cellWidth * 0.8;
-        const offsetY = (Math.random() - 0.5) * cellHeight * 0.8;
+        const offsetX = (Math.random() - 0.5) * cellWidth * 0.8
+        const offsetY = (Math.random() - 0.5) * cellHeight * 0.8
 
         // Ensure we stay within bounds
-        const x = Math.max(
-          xMargin,
-          Math.min(100 - 14 - xMargin, baseX + offsetX),
-        );
-        const y = Math.max(yMargin, Math.min(100 - 22.5, baseY + offsetY));
+        const x = Math.max(xMargin, Math.min(100 - 14 - xMargin, baseX + offsetX))
+        const y = Math.max(yMargin, Math.min(100 - 22.5, baseY + offsetY))
 
         // More varied rotation for natural look
-        const rotation = (Math.random() - 0.5) * 40; // -20 to 20 degrees
+        const rotation = (Math.random() - 0.5) * 40 // -20 to 20 degrees
 
         // Randomize z-index for natural stacking
-        const zIndex = Math.floor(Math.random() * numCards);
+        const zIndex = Math.floor(Math.random() * numCards)
 
-        newStates.set(card.id, { x, y, rotation, zIndex });
+        newStates.set(card.id, { x, y, rotation, zIndex })
       }
-    });
+    })
 
-    setCardStates(newStates);
-    setNextZIndex(
-      Math.max(...Array.from(newStates.values()).map((s) => s.zIndex)) + 1,
-    );
+    setCardStates(newStates)
+    setNextZIndex(Math.max(...Array.from(newStates.values()).map((s) => s.zIndex)) + 1)
 
     // If we generated new positions (not restored from server), send them to server
     if (!hasServerPositions && !isSpectating) {
-      const positions = Array.from(newStates.entries()).map(
-        ([id, cardState]) => ({
-          cardId: id,
-          x: cardState.x,
-          y: cardState.y,
-          rotation: cardState.rotation,
-          zIndex: cardState.zIndex,
-          // Mark with our window ID to identify echoes
-          draggedByWindowId: windowIdRef.current,
-        }),
-      );
-      updateCardPositions(positions);
+      const positions = Array.from(newStates.entries()).map(([id, cardState]) => ({
+        cardId: id,
+        x: cardState.x,
+        y: cardState.y,
+        rotation: cardState.rotation,
+        zIndex: cardState.zIndex,
+        // Mark with our window ID to identify echoes
+        draggedByWindowId: windowIdRef.current,
+      }))
+      updateCardPositions(positions)
     }
   }, [
     state.availableCards.length,
@@ -1275,27 +1186,27 @@ export function PlayingPhaseDrag() {
     cardStates.size,
     isSpectating,
     updateCardPositions,
-  ]);
+  ])
 
   // Sync server position updates (for spectators and multi-window sync)
   useEffect(() => {
-    if (!state.cardPositions || state.cardPositions.length === 0) return;
-    if (cardStates.size === 0) return;
+    if (!state.cardPositions || state.cardPositions.length === 0) return
+    if (cardStates.size === 0) return
 
     // Check if any updates originated from this window - if so, skip the entire batch
     // This prevents replaying our own movements when they echo back from the server
     const hasOurUpdates = state.cardPositions.some(
-      (pos) => pos.draggedByWindowId === windowIdRef.current,
-    );
-    if (hasOurUpdates) return;
+      (pos) => pos.draggedByWindowId === windowIdRef.current
+    )
+    if (hasOurUpdates) return
 
     // Check if server positions differ from current positions
-    let needsUpdate = false;
-    const newStates = new Map(cardStates);
+    let needsUpdate = false
+    const newStates = new Map(cardStates)
 
     for (const serverPos of state.cardPositions) {
-      const currentState = cardStates.get(serverPos.cardId);
-      if (!currentState) continue;
+      const currentState = cardStates.get(serverPos.cardId)
+      if (!currentState) continue
 
       // Compare percentages directly (tolerance: 0.5%)
       if (
@@ -1304,52 +1215,52 @@ export function PlayingPhaseDrag() {
         Math.abs(currentState.rotation - serverPos.rotation) > 1 ||
         currentState.zIndex !== serverPos.zIndex
       ) {
-        needsUpdate = true;
+        needsUpdate = true
         newStates.set(serverPos.cardId, {
           x: serverPos.x,
           y: serverPos.y,
           rotation: serverPos.rotation,
           zIndex: serverPos.zIndex,
-        });
+        })
       }
     }
 
     if (needsUpdate && !draggingCardId) {
       // Only apply server updates if not currently dragging
-      setCardStates(newStates);
+      setCardStates(newStates)
     }
-  }, [state.cardPositions, draggingCardId, cardStates]);
+  }, [state.cardPositions, draggingCardId, cardStates])
 
   // Infer sequence from card positions
   const inferredSequence = inferSequenceFromPositions(cardStates, [
     ...state.availableCards,
     ...state.placedCards.filter((c): c is SortingCard => c !== null),
-  ]);
+  ])
 
   // Format time display
   const formatTime = (seconds: number) => {
-    const m = Math.floor(seconds / 60);
-    const s = seconds % 60;
-    return `${m}:${s.toString().padStart(2, "0")}`;
-  };
+    const m = Math.floor(seconds / 60)
+    const s = seconds % 60
+    return `${m}:${s.toString().padStart(2, '0')}`
+  }
 
   // Handle pointer down (start drag)
   const handlePointerDown = (e: React.PointerEvent, cardId: string) => {
-    if (isSpectating) return;
+    if (isSpectating) return
 
-    const target = e.currentTarget as HTMLElement;
-    target.setPointerCapture(e.pointerId);
+    const target = e.currentTarget as HTMLElement
+    target.setPointerCapture(e.pointerId)
 
     // Get current card state to calculate proper offset
-    const currentCard = cardStates.get(cardId);
-    if (!currentCard) return;
+    const currentCard = cardStates.get(cardId)
+    if (!currentCard) return
 
     // Calculate offset from card's actual position (in pixels) to pointer
     // This accounts for rotation and prevents position jump
-    const cardPixelX = (currentCard.x / 100) * viewportDimensions.width;
-    const cardPixelY = (currentCard.y / 100) * viewportDimensions.height;
-    const offsetX = e.clientX - cardPixelX;
-    const offsetY = e.clientY - cardPixelY;
+    const cardPixelX = (currentCard.x / 100) * viewportDimensions.width
+    const cardPixelY = (currentCard.y / 100) * viewportDimensions.height
+    const offsetX = e.clientX - cardPixelX
+    const offsetY = e.clientY - cardPixelY
 
     dragStateRef.current = {
       cardId,
@@ -1358,220 +1269,208 @@ export function PlayingPhaseDrag() {
       startX: e.clientX,
       startY: e.clientY,
       initialRotation: currentCard.rotation,
-    };
+    }
 
-    setDraggingCardId(cardId);
+    setDraggingCardId(cardId)
 
     // Bring card to front
     setCardStates((prev) => {
-      const newStates = new Map(prev);
-      const cardState = newStates.get(cardId);
+      const newStates = new Map(prev)
+      const cardState = newStates.get(cardId)
       if (cardState) {
-        newStates.set(cardId, { ...cardState, zIndex: nextZIndex });
+        newStates.set(cardId, { ...cardState, zIndex: nextZIndex })
       }
-      return newStates;
-    });
-    setNextZIndex((prev) => prev + 1);
-  };
+      return newStates
+    })
+    setNextZIndex((prev) => prev + 1)
+  }
 
   // Handle pointer move (dragging)
   const handlePointerMove = (e: React.PointerEvent, cardId: string) => {
-    if (!dragStateRef.current || dragStateRef.current.cardId !== cardId) return;
+    if (!dragStateRef.current || dragStateRef.current.cardId !== cardId) return
 
-    const { offsetX, offsetY } = dragStateRef.current;
+    const { offsetX, offsetY } = dragStateRef.current
 
     // Calculate new position in pixels
-    const newXPx = e.clientX - offsetX;
-    const newYPx = e.clientY - offsetY;
+    const newXPx = e.clientX - offsetX
+    const newYPx = e.clientY - offsetY
 
     // Convert to percentages
-    const viewportWidth = viewport.width;
-    const viewportHeight = viewport.height;
-    const newX = (newXPx / viewportWidth) * 100;
-    const newY = (newYPx / viewportHeight) * 100;
+    const viewportWidth = viewport.width
+    const viewportHeight = viewport.height
+    const newX = (newXPx / viewportWidth) * 100
+    const newY = (newYPx / viewportHeight) * 100
 
     // Calculate rotation based on drag velocity, adding to initial rotation
-    const dragDeltaX = e.clientX - dragStateRef.current.startX;
-    const dragRotation = Math.max(-15, Math.min(15, dragDeltaX * 0.05));
-    const rotation = dragStateRef.current.initialRotation + dragRotation;
+    const dragDeltaX = e.clientX - dragStateRef.current.startX
+    const dragRotation = Math.max(-15, Math.min(15, dragDeltaX * 0.05))
+    const rotation = dragStateRef.current.initialRotation + dragRotation
 
     setCardStates((prev) => {
-      const newStates = new Map(prev);
-      const cardState = newStates.get(cardId);
+      const newStates = new Map(prev)
+      const cardState = newStates.get(cardId)
       if (cardState) {
         newStates.set(cardId, {
           ...cardState,
           x: newX,
           y: newY,
           rotation,
-        });
+        })
 
         // Send real-time position updates (throttled to every 100ms)
         if (!isSpectating) {
-          const now = Date.now();
+          const now = Date.now()
           if (now - lastSyncTimeRef.current > 100) {
-            lastSyncTimeRef.current = now;
-            const positions = Array.from(newStates.entries()).map(
-              ([id, state]) => ({
-                cardId: id,
-                x: state.x,
-                y: state.y,
-                rotation: state.rotation,
-                zIndex: state.zIndex,
-                // Mark this card as being dragged by local player
-                draggedByPlayerId: id === cardId ? localPlayerId : undefined,
-                // Mark with our window ID to identify echoes
-                draggedByWindowId: windowIdRef.current,
-              }),
-            );
-            updateCardPositions(positions);
+            lastSyncTimeRef.current = now
+            const positions = Array.from(newStates.entries()).map(([id, state]) => ({
+              cardId: id,
+              x: state.x,
+              y: state.y,
+              rotation: state.rotation,
+              zIndex: state.zIndex,
+              // Mark this card as being dragged by local player
+              draggedByPlayerId: id === cardId ? localPlayerId : undefined,
+              // Mark with our window ID to identify echoes
+              draggedByWindowId: windowIdRef.current,
+            }))
+            updateCardPositions(positions)
           }
         }
       }
-      return newStates;
-    });
-  };
+      return newStates
+    })
+  }
 
   // Handle pointer up (end drag)
   const handlePointerUp = (e: React.PointerEvent, cardId: string) => {
-    if (!dragStateRef.current || dragStateRef.current.cardId !== cardId) return;
+    if (!dragStateRef.current || dragStateRef.current.cardId !== cardId) return
 
-    const target = e.currentTarget as HTMLElement;
-    target.releasePointerCapture(e.pointerId);
+    const target = e.currentTarget as HTMLElement
+    target.releasePointerCapture(e.pointerId)
 
     // Reset rotation to slight random tilt
-    const updatedStates = new Map(cardStates);
-    const cardState = updatedStates.get(cardId);
+    const updatedStates = new Map(cardStates)
+    const cardState = updatedStates.get(cardId)
     if (cardState) {
       updatedStates.set(cardId, {
         ...cardState,
         rotation: Math.random() * 10 - 5,
-      });
-      setCardStates(updatedStates);
+      })
+      setCardStates(updatedStates)
 
       // Sync positions to server (already in percentages)
       if (!isSpectating) {
-        const positions = Array.from(updatedStates.entries()).map(
-          ([id, state]) => ({
-            cardId: id,
-            x: state.x,
-            y: state.y,
-            rotation: state.rotation,
-            zIndex: state.zIndex,
-            // Clear draggedByPlayerId when drag ends
-            draggedByPlayerId: undefined,
-            // Mark with our window ID to identify echoes
-            draggedByWindowId: windowIdRef.current,
-          }),
-        );
-        updateCardPositions(positions);
+        const positions = Array.from(updatedStates.entries()).map(([id, state]) => ({
+          cardId: id,
+          x: state.x,
+          y: state.y,
+          rotation: state.rotation,
+          zIndex: state.zIndex,
+          // Clear draggedByPlayerId when drag ends
+          draggedByPlayerId: undefined,
+          // Mark with our window ID to identify echoes
+          draggedByWindowId: windowIdRef.current,
+        }))
+        updateCardPositions(positions)
       }
     }
 
-    dragStateRef.current = null;
-    setDraggingCardId(null);
-  };
+    dragStateRef.current = null
+    setDraggingCardId(null)
+  }
 
   // For drag mode, check solution is available when we have a valid inferred sequence
-  const canCheckSolutionDrag = inferredSequence.length === state.cardCount;
+  const canCheckSolutionDrag = inferredSequence.length === state.cardCount
 
   // Real-time check: is the current sequence correct?
   const isSequenceCorrect =
     canCheckSolutionDrag &&
     inferredSequence.every((card, index) => {
-      const correctCard = state.correctOrder[index];
-      return correctCard && card.id === correctCard.id;
-    });
+      const correctCard = state.correctOrder[index]
+      return correctCard && card.id === correctCard.id
+    })
 
   // Start countdown when sequence is perfect
   useEffect(() => {
     if (isSequenceCorrect && !isSpectating) {
       // Start countdown from 3
-      setPerfectCountdown(3);
+      setPerfectCountdown(3)
     } else {
       // Reset countdown if sequence is no longer perfect
-      setPerfectCountdown(null);
+      setPerfectCountdown(null)
     }
-  }, [isSequenceCorrect, isSpectating]);
+  }, [isSequenceCorrect, isSpectating])
 
   // Countdown timer effect
   useEffect(() => {
-    if (perfectCountdown === null) return;
+    if (perfectCountdown === null) return
     if (perfectCountdown <= 0) {
       // Auto-submit when countdown reaches 0
-      handleCheckSolution();
-      setPerfectCountdown(null);
-      return;
+      handleCheckSolution()
+      setPerfectCountdown(null)
+      return
     }
 
     // Decrement every 1.5 seconds
     const timer = setTimeout(() => {
-      setPerfectCountdown((prev) => (prev !== null ? prev - 1 : null));
-    }, 1500);
+      setPerfectCountdown((prev) => (prev !== null ? prev - 1 : null))
+    }, 1500)
 
-    return () => clearTimeout(timer);
+    return () => clearTimeout(timer)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [perfectCountdown]);
+  }, [perfectCountdown])
 
   // Watch for server confirmations and insert next card or check solution
   useEffect(() => {
-    if (!waitingToCheck) return;
+    if (!waitingToCheck) return
 
-    const cardsToInsert = cardsToInsertRef.current;
-    const currentIndex = currentInsertIndexRef.current;
+    const cardsToInsert = cardsToInsertRef.current
+    const currentIndex = currentInsertIndexRef.current
 
-    console.log("[PlayingPhaseDrag] useEffect check:", {
+    console.log('[PlayingPhaseDrag] useEffect check:', {
       waitingToCheck,
       currentIndex,
       totalCards: cardsToInsert.length,
       canCheckSolution,
-    });
+    })
 
     // If all cards have been sent, wait for server to confirm all are placed
     if (currentIndex >= cardsToInsert.length) {
       if (canCheckSolution) {
-        console.log(
-          "[PlayingPhaseDrag] ✅ Server confirmed all cards placed, checking solution",
-        );
-        setWaitingToCheck(false);
-        cardsToInsertRef.current = [];
-        currentInsertIndexRef.current = 0;
-        checkSolution();
+        console.log('[PlayingPhaseDrag] ✅ Server confirmed all cards placed, checking solution')
+        setWaitingToCheck(false)
+        cardsToInsertRef.current = []
+        currentInsertIndexRef.current = 0
+        checkSolution()
       }
-      return;
+      return
     }
 
     // Send next card
-    const card = cardsToInsert[currentIndex];
-    const position = inferredSequence.findIndex((c) => c.id === card.id);
+    const card = cardsToInsert[currentIndex]
+    const position = inferredSequence.findIndex((c) => c.id === card.id)
     console.log(
-      `[PlayingPhaseDrag] 📥 Inserting card ${currentIndex + 1}/${cardsToInsert.length}: ${card.id} at position ${position}`,
-    );
-    insertCard(card.id, position);
-    currentInsertIndexRef.current++;
-  }, [
-    waitingToCheck,
-    canCheckSolution,
-    checkSolution,
-    insertCard,
-    inferredSequence,
-  ]);
+      `[PlayingPhaseDrag] 📥 Inserting card ${currentIndex + 1}/${cardsToInsert.length}: ${card.id} at position ${position}`
+    )
+    insertCard(card.id, position)
+    currentInsertIndexRef.current++
+  }, [waitingToCheck, canCheckSolution, checkSolution, insertCard, inferredSequence])
 
   // Custom check solution that uses the inferred sequence
   const handleCheckSolution = () => {
-    if (isSpectating) return;
-    if (!canCheckSolutionDrag) return;
+    if (isSpectating) return
+    if (!canCheckSolutionDrag) return
 
     // Send the complete inferred sequence to the server
-    checkSolution(inferredSequence);
-  };
+    checkSolution(inferredSequence)
+  }
 
   return (
     <div
       className={css({
-        width: "100%",
-        height: "100%",
-        position: "fixed",
+        width: '100%',
+        height: '100%',
+        position: 'fixed',
         top: 0,
         left: 0,
         right: 0,
@@ -1582,35 +1481,33 @@ export function PlayingPhaseDrag() {
       {isSpectating && (
         <div
           className={css({
-            position: "fixed",
-            top: { base: "130px", md: 0 },
+            position: 'fixed',
+            top: { base: '130px', md: 0 },
             left: 0,
             right: 0,
-            height: { base: "40px", md: "56px" },
-            background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
-            color: "white",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: { base: "0 8px", md: "0 24px" },
+            height: { base: '40px', md: '56px' },
+            background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
+            color: 'white',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: { base: '0 8px', md: '0 24px' },
             zIndex: 100,
-            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
-            gap: { base: "8px", md: "16px" },
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+            gap: { base: '8px', md: '16px' },
           })}
         >
           {/* Player info */}
           <div
             className={css({
-              display: "flex",
-              alignItems: "center",
-              gap: { base: "6px", md: "12px" },
-              fontSize: { base: "12px", md: "16px" },
-              fontWeight: "600",
+              display: 'flex',
+              alignItems: 'center',
+              gap: { base: '6px', md: '12px' },
+              fontSize: { base: '12px', md: '16px' },
+              fontWeight: '600',
             })}
           >
-            <span className={css({ display: { base: "none", sm: "inline" } })}>
-              👀 Spectating:
-            </span>
+            <span className={css({ display: { base: 'none', sm: 'inline' } })}>👀 Spectating:</span>
             <span>
               {state.playerMetadata.emoji} {state.playerMetadata.name}
             </span>
@@ -1619,71 +1516,58 @@ export function PlayingPhaseDrag() {
           {/* Progress */}
           <div
             className={css({
-              display: "flex",
-              alignItems: "center",
-              gap: { base: "8px", md: "16px" },
-              fontSize: { base: "11px", md: "14px" },
+              display: 'flex',
+              alignItems: 'center',
+              gap: { base: '8px', md: '16px' },
+              fontSize: { base: '11px', md: '14px' },
             })}
           >
             <div
               className={css({
-                display: "flex",
-                alignItems: "center",
-                gap: { base: "4px", md: "8px" },
+                display: 'flex',
+                alignItems: 'center',
+                gap: { base: '4px', md: '8px' },
               })}
             >
-              <span
-                className={css({ display: { base: "none", sm: "inline" } })}
-              >
-                Progress:
-              </span>
+              <span className={css({ display: { base: 'none', sm: 'inline' } })}>Progress:</span>
               <span
                 className={css({
-                  fontWeight: "600",
-                  fontSize: { base: "12px", md: "16px" },
+                  fontWeight: '600',
+                  fontSize: { base: '12px', md: '16px' },
                 })}
               >
-                {state.placedCards.filter((c) => c !== null).length}/
-                {state.cardCount}
-              </span>
-              <span
-                className={css({ display: { base: "none", sm: "inline" } })}
-              >
-                cards
+                {state.placedCards.filter((c) => c !== null).length}/{state.cardCount}
               </span>
+              <span className={css({ display: { base: 'none', sm: 'inline' } })}>cards</span>
             </div>
 
             {/* Educational Mode Toggle */}
             <button
               type="button"
-              onClick={() =>
-                setSpectatorEducationalMode(!spectatorEducationalMode)
-              }
+              onClick={() => setSpectatorEducationalMode(!spectatorEducationalMode)}
               className={css({
-                display: "flex",
-                alignItems: "center",
-                gap: { base: "4px", md: "8px" },
-                padding: { base: "4px 8px", md: "6px 12px" },
-                borderRadius: "20px",
-                border: "2px solid rgba(255, 255, 255, 0.3)",
+                display: 'flex',
+                alignItems: 'center',
+                gap: { base: '4px', md: '8px' },
+                padding: { base: '4px 8px', md: '6px 12px' },
+                borderRadius: '20px',
+                border: '2px solid rgba(255, 255, 255, 0.3)',
                 background: spectatorEducationalMode
-                  ? "rgba(255, 255, 255, 0.2)"
-                  : "rgba(255, 255, 255, 0.1)",
-                color: "white",
-                fontSize: { base: "11px", md: "14px" },
-                fontWeight: "500",
-                cursor: "pointer",
-                transition: "all 0.2s",
+                  ? 'rgba(255, 255, 255, 0.2)'
+                  : 'rgba(255, 255, 255, 0.1)',
+                color: 'white',
+                fontSize: { base: '11px', md: '14px' },
+                fontWeight: '500',
+                cursor: 'pointer',
+                transition: 'all 0.2s',
                 _hover: {
-                  background: "rgba(255, 255, 255, 0.25)",
-                  borderColor: "rgba(255, 255, 255, 0.5)",
+                  background: 'rgba(255, 255, 255, 0.25)',
+                  borderColor: 'rgba(255, 255, 255, 0.5)',
                 },
               })}
             >
-              <span>{spectatorEducationalMode ? "✅" : "📚"}</span>
-              <span
-                className={css({ display: { base: "none", sm: "inline" } })}
-              >
+              <span>{spectatorEducationalMode ? '✅' : '📚'}</span>
+              <span className={css({ display: { base: 'none', sm: 'inline' } })}>
                 Educational Mode
               </span>
             </button>
@@ -1695,26 +1579,26 @@ export function PlayingPhaseDrag() {
       {isSpectating && (
         <div
           className={css({
-            position: "fixed",
+            position: 'fixed',
             // Mobile: bottom sheet, Desktop: right sidebar
-            top: { base: "auto", md: "56px" },
+            top: { base: 'auto', md: '56px' },
             bottom: {
-              base: spectatorStatsCollapsed ? "-120px" : "0",
-              md: "auto",
+              base: spectatorStatsCollapsed ? '-120px' : '0',
+              md: 'auto',
             },
-            right: { base: "0", md: spectatorStatsCollapsed ? "-240px" : "0" },
-            left: { base: "0", md: "auto" },
-            width: { base: "100%", md: "240px" },
-            height: { base: "120px", md: "calc(100vh - 56px)" },
-            background: "rgba(255, 255, 255, 0.95)",
+            right: { base: '0', md: spectatorStatsCollapsed ? '-240px' : '0' },
+            left: { base: '0', md: 'auto' },
+            width: { base: '100%', md: '240px' },
+            height: { base: '120px', md: 'calc(100vh - 56px)' },
+            background: 'rgba(255, 255, 255, 0.95)',
             boxShadow: {
-              base: "0 -2px 12px rgba(0, 0, 0, 0.1)",
-              md: "-2px 0 12px rgba(0, 0, 0, 0.1)",
+              base: '0 -2px 12px rgba(0, 0, 0, 0.1)',
+              md: '-2px 0 12px rgba(0, 0, 0, 0.1)',
             },
-            transition: { base: "bottom 0.3s ease", md: "right 0.3s ease" },
+            transition: { base: 'bottom 0.3s ease', md: 'right 0.3s ease' },
             zIndex: 90,
-            display: "flex",
-            flexDirection: "column",
+            display: 'flex',
+            flexDirection: 'column',
           })}
         >
           {/* Collapse/Expand Toggle */}
@@ -1722,167 +1606,145 @@ export function PlayingPhaseDrag() {
             type="button"
             onClick={() => setSpectatorStatsCollapsed(!spectatorStatsCollapsed)}
             className={css({
-              position: "absolute",
+              position: 'absolute',
               // Mobile: top center, Desktop: left middle
-              left: { base: "50%", md: "-40px" },
-              top: { base: "-30px", md: "50%" },
-              transform: { base: "translateX(-50%)", md: "translateY(-50%)" },
-              width: { base: "80px", md: "40px" },
-              height: { base: "30px", md: "80px" },
-              background: "rgba(255, 255, 255, 0.95)",
-              border: "none",
-              borderRadius: { base: "8px 8px 0 0", md: "8px 0 0 8px" },
+              left: { base: '50%', md: '-40px' },
+              top: { base: '-30px', md: '50%' },
+              transform: { base: 'translateX(-50%)', md: 'translateY(-50%)' },
+              width: { base: '80px', md: '40px' },
+              height: { base: '30px', md: '80px' },
+              background: 'rgba(255, 255, 255, 0.95)',
+              border: 'none',
+              borderRadius: { base: '8px 8px 0 0', md: '8px 0 0 8px' },
               boxShadow: {
-                base: "0 -2px 8px rgba(0, 0, 0, 0.1)",
-                md: "-2px 0 8px rgba(0, 0, 0, 0.1)",
+                base: '0 -2px 8px rgba(0, 0, 0, 0.1)',
+                md: '-2px 0 8px rgba(0, 0, 0, 0.1)',
               },
-              cursor: "pointer",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: { base: "16px", md: "20px" },
-              transition: "all 0.2s",
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: { base: '16px', md: '20px' },
+              transition: 'all 0.2s',
               _hover: {
-                background: "rgba(255, 255, 255, 1)",
+                background: 'rgba(255, 255, 255, 1)',
               },
             })}
           >
-            <span className={css({ display: { base: "inline", md: "none" } })}>
-              {spectatorStatsCollapsed ? "▲" : "▼"}
+            <span className={css({ display: { base: 'inline', md: 'none' } })}>
+              {spectatorStatsCollapsed ? '▲' : '▼'}
             </span>
-            <span className={css({ display: { base: "none", md: "inline" } })}>
-              {spectatorStatsCollapsed ? "◀" : "▶"}
+            <span className={css({ display: { base: 'none', md: 'inline' } })}>
+              {spectatorStatsCollapsed ? '◀' : '▶'}
             </span>
           </button>
 
           {/* Stats Content */}
           <div
             className={css({
-              padding: { base: "8px 12px", md: "24px" },
-              overflowY: "auto",
+              padding: { base: '8px 12px', md: '24px' },
+              overflowY: 'auto',
               flex: 1,
             })}
           >
             <h3
               className={css({
-                fontSize: { base: "12px", md: "18px" },
-                fontWeight: "700",
-                marginBottom: { base: "6px", md: "20px" },
-                color: "#1e293b",
-                borderBottom: "2px solid #e2e8f0",
-                paddingBottom: { base: "3px", md: "8px" },
+                fontSize: { base: '12px', md: '18px' },
+                fontWeight: '700',
+                marginBottom: { base: '6px', md: '20px' },
+                color: '#1e293b',
+                borderBottom: '2px solid #e2e8f0',
+                paddingBottom: { base: '3px', md: '8px' },
               })}
             >
-              <span
-                className={css({ display: { base: "none", md: "inline" } })}
-              >
+              <span className={css({ display: { base: 'none', md: 'inline' } })}>
                 📊 Live Stats
               </span>
-              <span
-                className={css({ display: { base: "inline", md: "none" } })}
-              >
-                📊 Stats
-              </span>
+              <span className={css({ display: { base: 'inline', md: 'none' } })}>📊 Stats</span>
             </h3>
 
             {/* Mobile: horizontal layout, Desktop: vertical layout */}
             <div
               className={css({
-                display: { base: "grid", md: "block" },
-                gridTemplateColumns: { base: "repeat(3, 1fr)", md: "none" },
-                gap: { base: "8px", md: "0" },
+                display: { base: 'grid', md: 'block' },
+                gridTemplateColumns: { base: 'repeat(3, 1fr)', md: 'none' },
+                gap: { base: '8px', md: '0' },
               })}
             >
               {/* Time Elapsed */}
               <div
                 className={css({
-                  marginBottom: { base: "0", md: "16px" },
-                  padding: { base: "8px", md: "12px" },
-                  background: "linear-gradient(135deg, #dbeafe, #bfdbfe)",
-                  borderRadius: { base: "6px", md: "8px" },
-                  border: "1px solid #93c5fd",
+                  marginBottom: { base: '0', md: '16px' },
+                  padding: { base: '8px', md: '12px' },
+                  background: 'linear-gradient(135deg, #dbeafe, #bfdbfe)',
+                  borderRadius: { base: '6px', md: '8px' },
+                  border: '1px solid #93c5fd',
                 })}
               >
                 <div
                   className={css({
-                    fontSize: { base: "10px", md: "12px" },
-                    color: "#1e40af",
-                    marginBottom: "4px",
+                    fontSize: { base: '10px', md: '12px' },
+                    color: '#1e40af',
+                    marginBottom: '4px',
                   })}
                 >
-                  <span
-                    className={css({ display: { base: "none", md: "inline" } })}
-                  >
+                  <span className={css({ display: { base: 'none', md: 'inline' } })}>
                     ⏱️ Time Elapsed
                   </span>
-                  <span
-                    className={css({ display: { base: "inline", md: "none" } })}
-                  >
-                    ⏱️
-                  </span>
+                  <span className={css({ display: { base: 'inline', md: 'none' } })}>⏱️</span>
                 </div>
                 <div
                   className={css({
-                    fontSize: { base: "16px", md: "24px" },
-                    fontWeight: "700",
-                    color: "#1e3a8a",
+                    fontSize: { base: '16px', md: '24px' },
+                    fontWeight: '700',
+                    color: '#1e3a8a',
                   })}
                 >
-                  {Math.floor(elapsedTime / 60)}:
-                  {(elapsedTime % 60).toString().padStart(2, "0")}
+                  {Math.floor(elapsedTime / 60)}:{(elapsedTime % 60).toString().padStart(2, '0')}
                 </div>
               </div>
 
               {/* Cards Placed */}
               <div
                 className={css({
-                  marginBottom: { base: "0", md: "16px" },
-                  padding: { base: "8px", md: "12px" },
-                  background: "linear-gradient(135deg, #dcfce7, #bbf7d0)",
-                  borderRadius: { base: "6px", md: "8px" },
-                  border: "1px solid #86efac",
+                  marginBottom: { base: '0', md: '16px' },
+                  padding: { base: '8px', md: '12px' },
+                  background: 'linear-gradient(135deg, #dcfce7, #bbf7d0)',
+                  borderRadius: { base: '6px', md: '8px' },
+                  border: '1px solid #86efac',
                 })}
               >
                 <div
                   className={css({
-                    fontSize: { base: "10px", md: "12px" },
-                    color: "#15803d",
-                    marginBottom: "4px",
+                    fontSize: { base: '10px', md: '12px' },
+                    color: '#15803d',
+                    marginBottom: '4px',
                   })}
                 >
-                  <span
-                    className={css({ display: { base: "none", md: "inline" } })}
-                  >
+                  <span className={css({ display: { base: 'none', md: 'inline' } })}>
                     🎯 Cards Placed
                   </span>
-                  <span
-                    className={css({ display: { base: "inline", md: "none" } })}
-                  >
-                    🎯
-                  </span>
+                  <span className={css({ display: { base: 'inline', md: 'none' } })}>🎯</span>
                 </div>
                 <div
                   className={css({
-                    fontSize: { base: "16px", md: "24px" },
-                    fontWeight: "700",
-                    color: "#14532d",
+                    fontSize: { base: '16px', md: '24px' },
+                    fontWeight: '700',
+                    color: '#14532d',
                   })}
                 >
-                  {state.placedCards.filter((c) => c !== null).length} /{" "}
-                  {state.cardCount}
+                  {state.placedCards.filter((c) => c !== null).length} / {state.cardCount}
                 </div>
                 <div
                   className={css({
-                    fontSize: "11px",
-                    color: "#15803d",
-                    marginTop: "4px",
-                    display: { base: "none", md: "block" },
+                    fontSize: '11px',
+                    color: '#15803d',
+                    marginTop: '4px',
+                    display: { base: 'none', md: 'block' },
                   })}
                 >
                   {Math.round(
-                    (state.placedCards.filter((c) => c !== null).length /
-                      state.cardCount) *
-                      100,
+                    (state.placedCards.filter((c) => c !== null).length / state.cardCount) * 100
                   )}
                   % complete
                 </div>
@@ -1891,55 +1753,49 @@ export function PlayingPhaseDrag() {
               {/* Current Accuracy */}
               <div
                 className={css({
-                  marginBottom: { base: "0", md: "16px" },
-                  padding: { base: "8px", md: "12px" },
-                  background: "linear-gradient(135deg, #fef3c7, #fde68a)",
-                  borderRadius: { base: "6px", md: "8px" },
-                  border: "1px solid #fbbf24",
+                  marginBottom: { base: '0', md: '16px' },
+                  padding: { base: '8px', md: '12px' },
+                  background: 'linear-gradient(135deg, #fef3c7, #fde68a)',
+                  borderRadius: { base: '6px', md: '8px' },
+                  border: '1px solid #fbbf24',
                 })}
               >
                 <div
                   className={css({
-                    fontSize: { base: "10px", md: "12px" },
-                    color: "#92400e",
-                    marginBottom: "4px",
+                    fontSize: { base: '10px', md: '12px' },
+                    color: '#92400e',
+                    marginBottom: '4px',
                   })}
                 >
-                  <span
-                    className={css({ display: { base: "none", md: "inline" } })}
-                  >
+                  <span className={css({ display: { base: 'none', md: 'inline' } })}>
                     ✨ Current Accuracy
                   </span>
-                  <span
-                    className={css({ display: { base: "inline", md: "none" } })}
-                  >
-                    ✨
-                  </span>
+                  <span className={css({ display: { base: 'inline', md: 'none' } })}>✨</span>
                 </div>
                 <div
                   className={css({
-                    fontSize: { base: "16px", md: "24px" },
-                    fontWeight: "700",
-                    color: "#78350f",
+                    fontSize: { base: '16px', md: '24px' },
+                    fontWeight: '700',
+                    color: '#78350f',
                   })}
                 >
                   {(() => {
                     const placedCards = state.placedCards.filter(
-                      (c): c is SortingCard => c !== null,
-                    );
-                    if (placedCards.length === 0) return "0%";
+                      (c): c is SortingCard => c !== null
+                    )
+                    if (placedCards.length === 0) return '0%'
                     const correctCount = placedCards.filter(
-                      (c, i) => state.correctOrder[i]?.id === c.id,
-                    ).length;
-                    return `${Math.round((correctCount / placedCards.length) * 100)}%`;
+                      (c, i) => state.correctOrder[i]?.id === c.id
+                    ).length
+                    return `${Math.round((correctCount / placedCards.length) * 100)}%`
                   })()}
                 </div>
                 <div
                   className={css({
-                    fontSize: "11px",
-                    color: "#92400e",
-                    marginTop: "4px",
-                    display: { base: "none", md: "block" },
+                    fontSize: '11px',
+                    color: '#92400e',
+                    marginTop: '4px',
+                    display: { base: 'none', md: 'block' },
                   })}
                 >
                   Cards in correct position
@@ -1954,21 +1810,21 @@ export function PlayingPhaseDrag() {
       {!isSpectating && (
         <div
           className={css({
-            position: "absolute",
-            top: "16px",
-            right: "16px",
-            display: "flex",
-            gap: "12px",
+            position: 'absolute',
+            top: '16px',
+            right: '16px',
+            display: 'flex',
+            gap: '12px',
             zIndex: 10,
           })}
         >
           {/* Check Solution Button with Label */}
           <div
             className={css({
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: "6px",
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '6px',
             })}
           >
             <button
@@ -1977,67 +1833,55 @@ export function PlayingPhaseDrag() {
               disabled={!canCheckSolutionDrag}
               title="Check Solution"
               className={css({
-                width: "64px",
-                height: "64px",
+                width: '64px',
+                height: '64px',
                 background: isSequenceCorrect
-                  ? "linear-gradient(135deg, #fbbf24, #f59e0b, #fbbf24)"
+                  ? 'linear-gradient(135deg, #fbbf24, #f59e0b, #fbbf24)'
                   : canCheckSolutionDrag
-                    ? "linear-gradient(135deg, #bbf7d0, #86efac)"
-                    : "linear-gradient(135deg, #e5e7eb, #d1d5db)",
-                border: "4px solid",
+                    ? 'linear-gradient(135deg, #bbf7d0, #86efac)'
+                    : 'linear-gradient(135deg, #e5e7eb, #d1d5db)',
+                border: '4px solid',
                 borderColor: isSequenceCorrect
-                  ? "#f59e0b"
+                  ? '#f59e0b'
                   : canCheckSolutionDrag
-                    ? "#22c55e"
-                    : "#9ca3af",
-                borderRadius: "50%",
-                fontSize: "32px",
-                cursor: canCheckSolutionDrag ? "pointer" : "not-allowed",
+                    ? '#22c55e'
+                    : '#9ca3af',
+                borderRadius: '50%',
+                fontSize: '32px',
+                cursor: canCheckSolutionDrag ? 'pointer' : 'not-allowed',
                 opacity: canCheckSolutionDrag ? 1 : 0.5,
-                transition: isSequenceCorrect ? "none" : "all 0.2s ease",
+                transition: isSequenceCorrect ? 'none' : 'all 0.2s ease',
                 boxShadow: isSequenceCorrect
-                  ? "0 0 30px rgba(245, 158, 11, 0.8), 0 0 60px rgba(245, 158, 11, 0.6)"
-                  : "0 4px 12px rgba(0, 0, 0, 0.15)",
-                animation: isSequenceCorrect
-                  ? "celebrate 0.5s ease-in-out infinite"
-                  : "none",
-                backgroundSize: isSequenceCorrect ? "200% 200%" : "100% 100%",
+                  ? '0 0 30px rgba(245, 158, 11, 0.8), 0 0 60px rgba(245, 158, 11, 0.6)'
+                  : '0 4px 12px rgba(0, 0, 0, 0.15)',
+                animation: isSequenceCorrect ? 'celebrate 0.5s ease-in-out infinite' : 'none',
+                backgroundSize: isSequenceCorrect ? '200% 200%' : '100% 100%',
                 _hover:
                   canCheckSolutionDrag && !isSequenceCorrect
                     ? {
-                        transform: "scale(1.1)",
-                        boxShadow: "0 6px 20px rgba(34, 197, 94, 0.4)",
+                        transform: 'scale(1.1)',
+                        boxShadow: '0 6px 20px rgba(34, 197, 94, 0.4)',
                       }
                     : {},
               })}
               style={{
-                animationName: isSequenceCorrect ? "celebrate" : undefined,
+                animationName: isSequenceCorrect ? 'celebrate' : undefined,
               }}
             >
-              {perfectCountdown !== null && perfectCountdown > 0
-                ? perfectCountdown
-                : "✓"}
+              {perfectCountdown !== null && perfectCountdown > 0 ? perfectCountdown : '✓'}
             </button>
             <div
               className={css({
-                fontSize: "13px",
-                fontWeight: "700",
-                color: isSequenceCorrect
-                  ? "#f59e0b"
-                  : canCheckSolutionDrag
-                    ? "#22c55e"
-                    : "#9ca3af",
-                textTransform: "uppercase",
-                letterSpacing: "0.5px",
-                textShadow: isSequenceCorrect
-                  ? "0 0 10px rgba(245, 158, 11, 0.8)"
-                  : "none",
-                animation: isSequenceCorrect
-                  ? "pulse 0.5s ease-in-out infinite"
-                  : "none",
+                fontSize: '13px',
+                fontWeight: '700',
+                color: isSequenceCorrect ? '#f59e0b' : canCheckSolutionDrag ? '#22c55e' : '#9ca3af',
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px',
+                textShadow: isSequenceCorrect ? '0 0 10px rgba(245, 158, 11, 0.8)' : 'none',
+                animation: isSequenceCorrect ? 'pulse 0.5s ease-in-out infinite' : 'none',
               })}
             >
-              {isSequenceCorrect ? "PERFECT!" : "Done?"}
+              {isSequenceCorrect ? 'PERFECT!' : 'Done?'}
             </div>
           </div>
         </div>
@@ -2047,18 +1891,18 @@ export function PlayingPhaseDrag() {
       {!isSpectating && (
         <div
           className={css({
-            position: "absolute",
-            top: "16px",
-            left: "16px",
-            padding: "8px 16px",
-            background: "rgba(255, 255, 255, 0.9)",
-            border: "2px solid rgba(59, 130, 246, 0.3)",
-            borderRadius: "20px",
-            fontSize: "16px",
-            fontWeight: "600",
-            color: "#0c4a6e",
+            position: 'absolute',
+            top: '16px',
+            left: '16px',
+            padding: '8px 16px',
+            background: 'rgba(255, 255, 255, 0.9)',
+            border: '2px solid rgba(59, 130, 246, 0.3)',
+            borderRadius: '20px',
+            fontSize: '16px',
+            fontWeight: '600',
+            color: '#0c4a6e',
             zIndex: 10,
-            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
           })}
         >
           ⏱️ {formatTime(elapsedTime)}
@@ -2069,23 +1913,23 @@ export function PlayingPhaseDrag() {
       <div
         ref={containerRef}
         className={css({
-          position: "absolute",
+          position: 'absolute',
           left: 0,
-          background: "linear-gradient(135deg, #f0f9ff, #e0f2fe)",
-          overflow: "hidden",
-          transition: "width 0.3s ease, height 0.3s ease, top 0.3s ease",
+          background: 'linear-gradient(135deg, #f0f9ff, #e0f2fe)',
+          overflow: 'hidden',
+          transition: 'width 0.3s ease, height 0.3s ease, top 0.3s ease',
         })}
         style={{
           width:
             isSpectating && !spectatorStatsCollapsed && viewport.width >= 768
-              ? "calc(100vw - 240px)"
-              : "100vw",
+              ? 'calc(100vw - 240px)'
+              : '100vw',
           height: isSpectating
             ? viewport.width < 768
-              ? "calc(100vh - 170px)"
-              : "calc(100vh - 56px)"
-            : "100vh",
-          top: isSpectating ? (viewport.width < 768 ? "170px" : "56px") : "0",
+              ? 'calc(100vh - 170px)'
+              : 'calc(100vh - 56px)'
+            : '100vh',
+          top: isSpectating ? (viewport.width < 768 ? '170px' : '56px') : '0',
         }}
       >
         {/* Render continuous curved path through the entire sequence */}
@@ -2106,56 +1950,48 @@ export function PlayingPhaseDrag() {
           ...state.availableCards,
           ...state.placedCards.filter((c): c is SortingCard => c !== null),
         ].map((card) => {
-          const cardState = cardStates.get(card.id);
-          if (!cardState) return null;
+          const cardState = cardStates.get(card.id)
+          if (!cardState) return null
 
-          const isDragging = draggingCardId === card.id;
+          const isDragging = draggingCardId === card.id
 
           // Check if card is in correct prefix or suffix position (for scaling/fading)
-          const positionInSequence = inferredSequence.findIndex(
-            (c) => c.id === card.id,
-          );
-          let isInCorrectPrefixOrSuffix = false;
+          const positionInSequence = inferredSequence.findIndex((c) => c.id === card.id)
+          let isInCorrectPrefixOrSuffix = false
 
           if (positionInSequence >= 0) {
             // Check if card is part of correct prefix
-            let isInCorrectPrefix = true;
+            let isInCorrectPrefix = true
             for (let i = 0; i <= positionInSequence; i++) {
               if (inferredSequence[i]?.id !== state.correctOrder[i]?.id) {
-                isInCorrectPrefix = false;
-                break;
+                isInCorrectPrefix = false
+                break
               }
             }
 
             // Check if card is part of correct suffix
-            let isInCorrectSuffix = true;
-            const offsetFromEnd =
-              inferredSequence.length - 1 - positionInSequence;
+            let isInCorrectSuffix = true
+            const offsetFromEnd = inferredSequence.length - 1 - positionInSequence
             for (let i = 0; i <= offsetFromEnd; i++) {
-              const seqIdx = inferredSequence.length - 1 - i;
-              const correctIdx = state.correctOrder.length - 1 - i;
-              if (
-                inferredSequence[seqIdx]?.id !==
-                state.correctOrder[correctIdx]?.id
-              ) {
-                isInCorrectSuffix = false;
-                break;
+              const seqIdx = inferredSequence.length - 1 - i
+              const correctIdx = state.correctOrder.length - 1 - i
+              if (inferredSequence[seqIdx]?.id !== state.correctOrder[correctIdx]?.id) {
+                isInCorrectSuffix = false
+                break
               }
             }
 
-            isInCorrectPrefixOrSuffix = isInCorrectPrefix || isInCorrectSuffix;
+            isInCorrectPrefixOrSuffix = isInCorrectPrefix || isInCorrectSuffix
           }
 
           // Show correctness based on educational mode for spectators
           const isCorrect = isSpectating
             ? spectatorEducationalMode && isInCorrectPrefixOrSuffix
-            : isInCorrectPrefixOrSuffix;
+            : isInCorrectPrefixOrSuffix
 
           // Get draggedByPlayerId from server state
-          const serverPosition = state.cardPositions.find(
-            (p) => p.cardId === card.id,
-          );
-          const draggedByPlayerId = serverPosition?.draggedByPlayerId;
+          const serverPosition = state.cardPositions.find((p) => p.cardId === card.id)
+          const draggedByPlayerId = serverPosition?.draggedByPlayerId
 
           return (
             <AnimatedCard
@@ -2175,64 +2011,59 @@ export function PlayingPhaseDrag() {
               onPointerMove={(e) => handlePointerMove(e, card.id)}
               onPointerUp={(e) => handlePointerUp(e, card.id)}
             />
-          );
+          )
         })}
       </div>
 
       {/* Activity Feed (collaborative mode only, hidden for spectators) */}
-      {state.gameMode === "collaborative" &&
-        !isSpectating &&
-        activityFeed.length > 0 && (
-          <div
-            className={css({
-              position: "fixed",
-              bottom: "24px",
-              right: "24px",
-              display: "flex",
-              flexDirection: "column",
-              gap: "8px",
-              zIndex: 150,
-              maxWidth: "320px",
-            })}
-          >
-            {activityFeed.map((notification) => {
-              const age = Date.now() - notification.timestamp;
-              const opacity = Math.max(0, 1 - age / 3000); // Fade out over 3 seconds
+      {state.gameMode === 'collaborative' && !isSpectating && activityFeed.length > 0 && (
+        <div
+          className={css({
+            position: 'fixed',
+            bottom: '24px',
+            right: '24px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            zIndex: 150,
+            maxWidth: '320px',
+          })}
+        >
+          {activityFeed.map((notification) => {
+            const age = Date.now() - notification.timestamp
+            const opacity = Math.max(0, 1 - age / 3000) // Fade out over 3 seconds
 
-              return (
-                <div
-                  key={notification.id}
-                  className={css({
-                    padding: "12px 16px",
-                    background: "rgba(255, 255, 255, 0.95)",
-                    border: "2px solid rgba(99, 102, 241, 0.3)",
-                    borderRadius: "12px",
-                    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-                    fontSize: "14px",
-                    fontWeight: "500",
-                    color: "#1f2937",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "8px",
-                    transition: "all 0.3s ease",
-                  })}
-                  style={{
-                    opacity,
-                    transform: `translateY(${(1 - opacity) * 20}px)`,
-                  }}
-                >
-                  <span style={{ fontSize: "20px" }}>
-                    {notification.playerEmoji}
-                  </span>
-                  <span>
-                    <strong>{notification.playerName}</strong>{" "}
-                    {notification.action}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-        )}
+            return (
+              <div
+                key={notification.id}
+                className={css({
+                  padding: '12px 16px',
+                  background: 'rgba(255, 255, 255, 0.95)',
+                  border: '2px solid rgba(99, 102, 241, 0.3)',
+                  borderRadius: '12px',
+                  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                  fontSize: '14px',
+                  fontWeight: '500',
+                  color: '#1f2937',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  transition: 'all 0.3s ease',
+                })}
+                style={{
+                  opacity,
+                  transform: `translateY(${(1 - opacity) * 20}px)`,
+                }}
+              >
+                <span style={{ fontSize: '20px' }}>{notification.playerEmoji}</span>
+                <span>
+                  <strong>{notification.playerName}</strong> {notification.action}
+                </span>
+              </div>
+            )
+          })}
+        </div>
+      )}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/card-sorting/components/ResultsPhase.tsx b/apps/web/src/arcade-games/card-sorting/components/ResultsPhase.tsx
index ca013d10..7b482ba5 100644
--- a/apps/web/src/arcade-games/card-sorting/components/ResultsPhase.tsx
+++ b/apps/web/src/arcade-games/card-sorting/components/ResultsPhase.tsx
@@ -1,13 +1,13 @@
-"use client";
+'use client'
 
-import { css } from "../../../../styled-system/css";
-import { useCardSorting } from "../Provider";
-import { useState, useEffect } from "react";
-import type { SortingCard } from "../types";
+import { css } from '../../../../styled-system/css'
+import { useCardSorting } from '../Provider'
+import { useState, useEffect } from 'react'
+import type { SortingCard } from '../types'
 
 // Add result animations
-if (typeof document !== "undefined") {
-  const style = document.createElement("style");
+if (typeof document !== 'undefined') {
+  const style = document.createElement('style')
   style.textContent = `
     @keyframes scoreReveal {
       0% {
@@ -27,167 +27,155 @@ if (typeof document !== "undefined") {
       25% { transform: scale(1.1) rotate(-5deg); }
       75% { transform: scale(1.1) rotate(5deg); }
     }
-  `;
-  document.head.appendChild(style);
+  `
+  document.head.appendChild(style)
 }
 
 export function ResultsPhase() {
-  const { state, startGame, goToSetup, exitSession, players } =
-    useCardSorting();
-  const { scoreBreakdown } = state;
-  const [showCorrections, setShowCorrections] = useState(false);
+  const { state, startGame, goToSetup, exitSession, players } = useCardSorting()
+  const { scoreBreakdown } = state
+  const [showCorrections, setShowCorrections] = useState(false)
 
   // Determine if this is a collaborative game
-  const isCollaborative = state.gameMode === "collaborative";
+  const isCollaborative = state.gameMode === 'collaborative'
 
   // Get user's sequence from placedCards
-  const userSequence = state.placedCards.filter(
-    (c): c is SortingCard => c !== null,
-  );
+  const userSequence = state.placedCards.filter((c): c is SortingCard => c !== null)
 
   // Show corrections after a delay
   useEffect(() => {
     const timer = setTimeout(() => {
-      setShowCorrections(true);
-    }, 1000);
-    return () => clearTimeout(timer);
-  }, []);
+      setShowCorrections(true)
+    }, 1000)
+    return () => clearTimeout(timer)
+  }, [])
 
   if (!scoreBreakdown) {
     return (
       <div
         className={css({
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100%",
-          fontSize: "18px",
-          color: "#666",
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100%',
+          fontSize: '18px',
+          color: '#666',
         })}
       >
         No score data available
       </div>
-    );
+    )
   }
 
-  const isPerfect = scoreBreakdown.finalScore === 100;
-  const isExcellent = scoreBreakdown.finalScore >= 80;
+  const isPerfect = scoreBreakdown.finalScore === 100
+  const isExcellent = scoreBreakdown.finalScore >= 80
 
   const getMessage = (score: number) => {
     if (isCollaborative) {
-      if (score === 100) return "Perfect teamwork! All cards in correct order!";
-      if (score >= 80) return "Excellent collaboration! Very close to perfect!";
-      if (score >= 60) return "Good team effort! You worked well together!";
-      return "Keep working together! Communication is key.";
+      if (score === 100) return 'Perfect teamwork! All cards in correct order!'
+      if (score >= 80) return 'Excellent collaboration! Very close to perfect!'
+      if (score >= 60) return 'Good team effort! You worked well together!'
+      return 'Keep working together! Communication is key.'
     }
-    if (score === 100) return "Perfect! All cards in correct order!";
-    if (score >= 80) return "Excellent! Very close to perfect!";
-    if (score >= 60) return "Good job! You understand the pattern!";
-    return "Keep practicing! Focus on reading each abacus carefully.";
-  };
+    if (score === 100) return 'Perfect! All cards in correct order!'
+    if (score >= 80) return 'Excellent! Very close to perfect!'
+    if (score >= 60) return 'Good job! You understand the pattern!'
+    return 'Keep practicing! Focus on reading each abacus carefully.'
+  }
 
   const formatTime = (seconds: number) => {
-    const m = Math.floor(seconds / 60);
-    const s = seconds % 60;
-    return `${m}:${s.toString().padStart(2, "0")}`;
-  };
+    const m = Math.floor(seconds / 60)
+    const s = seconds % 60
+    return `${m}:${s.toString().padStart(2, '0')}`
+  }
 
   return (
     <div
       className={css({
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        flexDirection: { base: "column", md: "row" },
-        position: "fixed",
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: { base: 'column', md: 'row' },
+        position: 'fixed',
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        background: "linear-gradient(135deg, #f0f9ff, #e0f2fe)",
-        overflow: "auto",
-        paddingTop: { base: "130px", md: 0 },
-        paddingBottom: { base: "70px", md: 0 },
+        background: 'linear-gradient(135deg, #f0f9ff, #e0f2fe)',
+        overflow: 'auto',
+        paddingTop: { base: '130px', md: 0 },
+        paddingBottom: { base: '70px', md: 0 },
       })}
     >
       {/* Cards Grid Area */}
       <div
         className={css({
-          flex: { base: "0 0 auto", md: 1 },
-          display: "flex",
-          alignItems: "flex-start",
-          justifyContent: "center",
-          padding: { base: "8px", md: "40px" },
-          overflow: { base: "auto", md: "auto" },
+          flex: { base: '0 0 auto', md: 1 },
+          display: 'flex',
+          alignItems: 'flex-start',
+          justifyContent: 'center',
+          padding: { base: '8px', md: '40px' },
+          overflow: { base: 'auto', md: 'auto' },
           order: { base: 2, md: 1 },
-          maxHeight: { base: "50vh", md: "none" },
+          maxHeight: { base: '50vh', md: 'none' },
         })}
       >
         <div
           className={css({
-            display: "grid",
+            display: 'grid',
             gridTemplateColumns: {
-              base: "repeat(3, 1fr)",
-              sm: "repeat(3, 1fr)",
-              md: "repeat(3, 1fr)",
+              base: 'repeat(3, 1fr)',
+              sm: 'repeat(3, 1fr)',
+              md: 'repeat(3, 1fr)',
             },
-            gap:
-              state.cardCount <= 5
-                ? { base: "8px", md: "16px" }
-                : { base: "6px", md: "16px" },
-            maxWidth: "600px",
-            width: "100%",
+            gap: state.cardCount <= 5 ? { base: '8px', md: '16px' } : { base: '6px', md: '16px' },
+            maxWidth: '600px',
+            width: '100%',
           })}
         >
           {userSequence.map((card, userIndex) => {
-            const isCorrect = state.correctOrder[userIndex]?.id === card.id;
-            const correctIndex = state.correctOrder.findIndex(
-              (c) => c.id === card.id,
-            );
+            const isCorrect = state.correctOrder[userIndex]?.id === card.id
+            const correctIndex = state.correctOrder.findIndex((c) => c.id === card.id)
 
             return (
               <div
                 key={card.id}
                 style={{
-                  position: "relative",
-                  width: "100%",
+                  position: 'relative',
+                  width: '100%',
                   paddingBottom:
                     state.cardCount <= 5
-                      ? "130%"
+                      ? '130%'
                       : state.cardCount <= 8
-                        ? "120%"
+                        ? '120%'
                         : state.cardCount <= 12
-                          ? "110%"
-                          : "105%",
+                          ? '110%'
+                          : '105%',
                 }}
               >
                 {/* Card */}
                 <div
                   className={css({
-                    position: "absolute",
+                    position: 'absolute',
                     top: 0,
                     left: 0,
                     right: 0,
                     bottom: 0,
-                    background: "white",
-                    borderRadius: { base: "6px", md: "8px" },
-                    border: { base: "2px solid", md: "3px solid" },
-                    borderColor: isCorrect
-                      ? "#22c55e"
-                      : showCorrections
-                        ? "#ef4444"
-                        : "#0369a1",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    padding: { base: "4px", md: "8px" },
-                    boxSizing: "border-box",
+                    background: 'white',
+                    borderRadius: { base: '6px', md: '8px' },
+                    border: { base: '2px solid', md: '3px solid' },
+                    borderColor: isCorrect ? '#22c55e' : showCorrections ? '#ef4444' : '#0369a1',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: { base: '4px', md: '8px' },
+                    boxSizing: 'border-box',
                     boxShadow: isCorrect
-                      ? "0 0 20px rgba(34, 197, 94, 0.4)"
+                      ? '0 0 20px rgba(34, 197, 94, 0.4)'
                       : showCorrections
-                        ? "0 0 20px rgba(239, 68, 68, 0.4)"
-                        : "0 4px 8px rgba(0, 0, 0, 0.1)",
-                    animation: "scoreReveal 0.5s ease-out",
+                        ? '0 0 20px rgba(239, 68, 68, 0.4)'
+                        : '0 4px 8px rgba(0, 0, 0, 0.1)',
+                    animation: 'scoreReveal 0.5s ease-out',
                   })}
                   dangerouslySetInnerHTML={{ __html: card.svgContent }}
                 />
@@ -196,75 +184,71 @@ export function ResultsPhase() {
                 {showCorrections && (
                   <div
                     className={css({
-                      position: "absolute",
+                      position: 'absolute',
                       top:
                         state.cardCount > 8
-                          ? { base: "-6px", md: "-12px" }
-                          : { base: "-8px", md: "-12px" },
+                          ? { base: '-6px', md: '-12px' }
+                          : { base: '-8px', md: '-12px' },
                       right:
                         state.cardCount > 8
-                          ? { base: "-6px", md: "-12px" }
-                          : { base: "-8px", md: "-12px" },
+                          ? { base: '-6px', md: '-12px' }
+                          : { base: '-8px', md: '-12px' },
                       width:
                         state.cardCount > 8
-                          ? { base: "20px", md: "32px" }
-                          : { base: "24px", md: "32px" },
+                          ? { base: '20px', md: '32px' }
+                          : { base: '24px', md: '32px' },
                       height:
                         state.cardCount > 8
-                          ? { base: "20px", md: "32px" }
-                          : { base: "24px", md: "32px" },
-                      borderRadius: "50%",
-                      background: isCorrect ? "#22c55e" : "#ef4444",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
+                          ? { base: '20px', md: '32px' }
+                          : { base: '24px', md: '32px' },
+                      borderRadius: '50%',
+                      background: isCorrect ? '#22c55e' : '#ef4444',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
                       fontSize:
                         state.cardCount > 8
-                          ? { base: "12px", md: "20px" }
-                          : { base: "16px", md: "20px" },
-                      color: "white",
-                      fontWeight: "bold",
-                      boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
-                      animation: "scoreReveal 0.4s ease-out",
+                          ? { base: '12px', md: '20px' }
+                          : { base: '16px', md: '20px' },
+                      color: 'white',
+                      fontWeight: 'bold',
+                      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
+                      animation: 'scoreReveal 0.4s ease-out',
                     })}
                   >
-                    {isCorrect ? "✓" : "✗"}
+                    {isCorrect ? '✓' : '✗'}
                   </div>
                 )}
 
                 {/* Position number */}
                 <div
                   className={css({
-                    position: "absolute",
+                    position: 'absolute',
                     bottom:
                       state.cardCount > 8
-                        ? { base: "-5px", md: "-8px" }
-                        : { base: "-6px", md: "-8px" },
-                    left: "50%",
-                    transform: "translateX(-50%)",
-                    background: isCorrect
-                      ? "#22c55e"
-                      : showCorrections
-                        ? "#ef4444"
-                        : "#0369a1",
-                    color: "white",
+                        ? { base: '-5px', md: '-8px' }
+                        : { base: '-6px', md: '-8px' },
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    background: isCorrect ? '#22c55e' : showCorrections ? '#ef4444' : '#0369a1',
+                    color: 'white',
                     padding:
                       state.cardCount > 8
-                        ? { base: "2px 5px", md: "4px 8px" }
-                        : { base: "3px 6px", md: "4px 8px" },
-                    borderRadius: { base: "6px", md: "12px" },
+                        ? { base: '2px 5px', md: '4px 8px' }
+                        : { base: '3px 6px', md: '4px 8px' },
+                    borderRadius: { base: '6px', md: '12px' },
                     fontSize:
                       state.cardCount > 8
-                        ? { base: "9px", md: "12px" }
-                        : { base: "10px", md: "12px" },
-                    fontWeight: "bold",
-                    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+                        ? { base: '9px', md: '12px' }
+                        : { base: '10px', md: '12px' },
+                    fontWeight: 'bold',
+                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
                   })}
                 >
                   #{showCorrections ? correctIndex + 1 : userIndex + 1}
                 </div>
               </div>
-            );
+            )
           })}
         </div>
       </div>
@@ -272,21 +256,21 @@ export function ResultsPhase() {
       {/* Score panel */}
       <div
         className={css({
-          width: { base: "100%", md: "400px" },
-          background: "rgba(255, 255, 255, 0.95)",
-          borderLeft: { base: "none", md: "3px solid rgba(59, 130, 246, 0.3)" },
+          width: { base: '100%', md: '400px' },
+          background: 'rgba(255, 255, 255, 0.95)',
+          borderLeft: { base: 'none', md: '3px solid rgba(59, 130, 246, 0.3)' },
           borderBottom: {
-            base: "3px solid rgba(59, 130, 246, 0.3)",
-            md: "none",
+            base: '3px solid rgba(59, 130, 246, 0.3)',
+            md: 'none',
           },
-          padding: { base: "12px", md: "40px" },
-          overflow: "auto",
-          display: "flex",
-          flexDirection: "column",
-          gap: { base: "10px", md: "24px" },
+          padding: { base: '12px', md: '40px' },
+          overflow: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: { base: '10px', md: '24px' },
           boxShadow: {
-            base: "0 4px 20px rgba(0, 0, 0, 0.1)",
-            md: "-4px 0 20px rgba(0, 0, 0, 0.1)",
+            base: '0 4px 20px rgba(0, 0, 0, 0.1)',
+            md: '-4px 0 20px rgba(0, 0, 0, 0.1)',
           },
           order: { base: 1, md: 2 },
         })}
@@ -294,84 +278,84 @@ export function ResultsPhase() {
         {/* Score Circle */}
         <div
           className={css({
-            display: "flex",
-            flexDirection: { base: "row", md: "column" },
-            alignItems: "center",
-            justifyContent: { base: "space-between", md: "center" },
-            gap: { base: "10px", md: "16px" },
+            display: 'flex',
+            flexDirection: { base: 'row', md: 'column' },
+            alignItems: 'center',
+            justifyContent: { base: 'space-between', md: 'center' },
+            gap: { base: '10px', md: '16px' },
           })}
         >
           <div
             className={css({
-              width: { base: "80px", md: "160px" },
-              height: { base: "80px", md: "160px" },
-              borderRadius: "50%",
+              width: { base: '80px', md: '160px' },
+              height: { base: '80px', md: '160px' },
+              borderRadius: '50%',
               background: isPerfect
-                ? "linear-gradient(135deg, #fbbf24, #f59e0b)"
+                ? 'linear-gradient(135deg, #fbbf24, #f59e0b)'
                 : isExcellent
-                  ? "linear-gradient(135deg, #86efac, #22c55e)"
-                  : "linear-gradient(135deg, #93c5fd, #3b82f6)",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
+                  ? 'linear-gradient(135deg, #86efac, #22c55e)'
+                  : 'linear-gradient(135deg, #93c5fd, #3b82f6)',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
               boxShadow: isPerfect
-                ? "0 0 40px rgba(245, 158, 11, 0.5), 0 10px 30px rgba(0, 0, 0, 0.2)"
-                : "0 10px 30px rgba(0, 0, 0, 0.15)",
+                ? '0 0 40px rgba(245, 158, 11, 0.5), 0 10px 30px rgba(0, 0, 0, 0.2)'
+                : '0 10px 30px rgba(0, 0, 0, 0.15)',
               animation: isPerfect
-                ? "perfectCelebrate 0.6s ease-in-out"
-                : "scoreReveal 0.6s ease-out",
+                ? 'perfectCelebrate 0.6s ease-in-out'
+                : 'scoreReveal 0.6s ease-out',
               flexShrink: 0,
             })}
             style={{
-              animationName: isPerfect ? "perfectCelebrate" : "scoreReveal",
+              animationName: isPerfect ? 'perfectCelebrate' : 'scoreReveal',
             }}
           >
             <div
               className={css({
-                fontSize: { base: "32px", md: "64px" },
-                fontWeight: "bold",
-                color: "white",
+                fontSize: { base: '32px', md: '64px' },
+                fontWeight: 'bold',
+                color: 'white',
                 lineHeight: 1,
-                textShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
+                textShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
               })}
             >
               {scoreBreakdown.finalScore}
             </div>
             <div
               className={css({
-                fontSize: { base: "12px", md: "20px" },
-                fontWeight: "600",
-                color: "white",
+                fontSize: { base: '12px', md: '20px' },
+                fontWeight: '600',
+                color: 'white',
                 opacity: 0.9,
               })}
             >
-              {isPerfect ? "🏆" : isExcellent ? "⭐" : "%"}
+              {isPerfect ? '🏆' : isExcellent ? '⭐' : '%'}
             </div>
           </div>
 
           <div
             className={css({
-              display: "flex",
-              flexDirection: "column",
-              alignItems: { base: "flex-start", md: "center" },
-              gap: { base: "6px", md: "12px" },
-              flex: { base: 1, md: "none" },
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: { base: 'flex-start', md: 'center' },
+              gap: { base: '6px', md: '12px' },
+              flex: { base: 1, md: 'none' },
             })}
           >
             {/* Team/Solo Label */}
             {isCollaborative && (
               <div
                 className={css({
-                  padding: { base: "4px 10px", md: "6px 16px" },
-                  background: "linear-gradient(135deg, #a78bfa, #8b5cf6)",
-                  borderRadius: "20px",
-                  fontSize: { base: "11px", md: "13px" },
-                  fontWeight: "700",
-                  color: "white",
-                  textTransform: "uppercase",
-                  letterSpacing: "0.5px",
-                  boxShadow: "0 2px 8px rgba(139, 92, 246, 0.3)",
+                  padding: { base: '4px 10px', md: '6px 16px' },
+                  background: 'linear-gradient(135deg, #a78bfa, #8b5cf6)',
+                  borderRadius: '20px',
+                  fontSize: { base: '11px', md: '13px' },
+                  fontWeight: '700',
+                  color: 'white',
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.5px',
+                  boxShadow: '0 2px 8px rgba(139, 92, 246, 0.3)',
                 })}
               >
                 👥 Team Score
@@ -380,12 +364,12 @@ export function ResultsPhase() {
 
             <div
               className={css({
-                textAlign: { base: "left", md: "center" },
-                fontSize: { base: "13px", md: "18px" },
-                fontWeight: "600",
-                color: "#0c4a6e",
+                textAlign: { base: 'left', md: 'center' },
+                fontSize: { base: '13px', md: '18px' },
+                fontWeight: '600',
+                color: '#0c4a6e',
                 lineHeight: 1.2,
-                display: { base: "none", md: "block" },
+                display: { base: 'none', md: 'block' },
               })}
             >
               {getMessage(scoreBreakdown.finalScore)}
@@ -394,13 +378,13 @@ export function ResultsPhase() {
             {/* Time Badge */}
             <div
               className={css({
-                padding: { base: "4px 12px", md: "8px 20px" },
-                background: "rgba(59, 130, 246, 0.1)",
-                border: "2px solid rgba(59, 130, 246, 0.3)",
-                borderRadius: "20px",
-                fontSize: { base: "12px", md: "16px" },
-                fontWeight: "600",
-                color: "#0c4a6e",
+                padding: { base: '4px 12px', md: '8px 20px' },
+                background: 'rgba(59, 130, 246, 0.1)',
+                border: '2px solid rgba(59, 130, 246, 0.3)',
+                borderRadius: '20px',
+                fontSize: { base: '12px', md: '16px' },
+                fontWeight: '600',
+                color: '#0c4a6e',
               })}
             >
               ⏱️ {formatTime(scoreBreakdown.elapsedTime)}
@@ -412,55 +396,52 @@ export function ResultsPhase() {
         {isCollaborative && state.activePlayers.length > 0 && (
           <div
             className={css({
-              background: "white",
-              borderRadius: { base: "10px", md: "12px" },
-              padding: { base: "12px", md: "16px" },
-              border: "2px solid rgba(139, 92, 246, 0.2)",
-              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.05)",
+              background: 'white',
+              borderRadius: { base: '10px', md: '12px' },
+              padding: { base: '12px', md: '16px' },
+              border: '2px solid rgba(139, 92, 246, 0.2)',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
             })}
           >
             <div
               className={css({
-                fontSize: { base: "11px", md: "13px" },
-                fontWeight: "700",
-                color: "#64748b",
-                marginBottom: { base: "8px", md: "12px" },
-                textTransform: "uppercase",
-                letterSpacing: "0.5px",
+                fontSize: { base: '11px', md: '13px' },
+                fontWeight: '700',
+                color: '#64748b',
+                marginBottom: { base: '8px', md: '12px' },
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px',
               })}
             >
               Team Members ({state.activePlayers.length})
             </div>
             <div
               className={css({
-                display: "flex",
-                flexWrap: "wrap",
-                gap: { base: "6px", md: "8px" },
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: { base: '6px', md: '8px' },
               })}
             >
               {state.activePlayers
                 .map((playerId) => players.get(playerId))
-                .filter(
-                  (player): player is NonNullable<typeof player> =>
-                    player !== undefined,
-                )
+                .filter((player): player is NonNullable<typeof player> => player !== undefined)
                 .map((player) => (
                   <div
                     key={player.id}
                     className={css({
-                      display: "flex",
-                      alignItems: "center",
-                      gap: { base: "4px", md: "6px" },
-                      padding: { base: "5px 10px", md: "6px 12px" },
-                      background: "rgba(139, 92, 246, 0.1)",
-                      border: "1px solid rgba(139, 92, 246, 0.2)",
-                      borderRadius: "20px",
-                      fontSize: { base: "13px", md: "14px" },
-                      fontWeight: "500",
-                      color: "#5b21b6",
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: { base: '4px', md: '6px' },
+                      padding: { base: '5px 10px', md: '6px 12px' },
+                      background: 'rgba(139, 92, 246, 0.1)',
+                      border: '1px solid rgba(139, 92, 246, 0.2)',
+                      borderRadius: '20px',
+                      fontSize: { base: '13px', md: '14px' },
+                      fontWeight: '500',
+                      color: '#5b21b6',
                     })}
                   >
-                    <span style={{ fontSize: "16px" }}>{player.emoji}</span>
+                    <span style={{ fontSize: '16px' }}>{player.emoji}</span>
                     <span>{player.name}</span>
                   </div>
                 ))}
@@ -471,46 +452,46 @@ export function ResultsPhase() {
         {/* Score Details - Compact Cards */}
         <div
           className={css({
-            display: "grid",
-            gridTemplateColumns: "repeat(3, 1fr)",
-            gap: { base: "8px", md: "12px" },
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 1fr)',
+            gap: { base: '8px', md: '12px' },
           })}
         >
           {/* Exact Matches */}
           <div
             className={css({
-              background: "white",
-              borderRadius: { base: "10px", md: "12px" },
-              padding: { base: "10px 8px", md: "12px" },
-              border: "2px solid rgba(59, 130, 246, 0.2)",
-              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.05)",
+              background: 'white',
+              borderRadius: { base: '10px', md: '12px' },
+              padding: { base: '10px 8px', md: '12px' },
+              border: '2px solid rgba(59, 130, 246, 0.2)',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
             })}
           >
             <div
               className={css({
-                fontSize: { base: "9px", md: "11px" },
-                fontWeight: "600",
-                color: "#64748b",
-                marginBottom: { base: "3px", md: "4px" },
-                textTransform: "uppercase",
-                letterSpacing: "0.5px",
+                fontSize: { base: '9px', md: '11px' },
+                fontWeight: '600',
+                color: '#64748b',
+                marginBottom: { base: '3px', md: '4px' },
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px',
               })}
             >
               Exact
             </div>
             <div
               className={css({
-                fontSize: { base: "22px", md: "28px" },
-                fontWeight: "bold",
-                color: "#0c4a6e",
+                fontSize: { base: '22px', md: '28px' },
+                fontWeight: 'bold',
+                color: '#0c4a6e',
               })}
             >
               {scoreBreakdown.exactMatches}
               <span
                 className={css({
-                  fontSize: { base: "12px", md: "14px" },
-                  color: "#64748b",
-                  fontWeight: "500",
+                  fontSize: { base: '12px', md: '14px' },
+                  color: '#64748b',
+                  fontWeight: '500',
                 })}
               >
                 /{state.cardCount}
@@ -521,38 +502,38 @@ export function ResultsPhase() {
           {/* Sequence */}
           <div
             className={css({
-              background: "white",
-              borderRadius: { base: "10px", md: "12px" },
-              padding: { base: "10px 8px", md: "12px" },
-              border: "2px solid rgba(59, 130, 246, 0.2)",
-              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.05)",
+              background: 'white',
+              borderRadius: { base: '10px', md: '12px' },
+              padding: { base: '10px 8px', md: '12px' },
+              border: '2px solid rgba(59, 130, 246, 0.2)',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
             })}
           >
             <div
               className={css({
-                fontSize: { base: "9px", md: "11px" },
-                fontWeight: "600",
-                color: "#64748b",
-                marginBottom: { base: "3px", md: "4px" },
-                textTransform: "uppercase",
-                letterSpacing: "0.5px",
+                fontSize: { base: '9px', md: '11px' },
+                fontWeight: '600',
+                color: '#64748b',
+                marginBottom: { base: '3px', md: '4px' },
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px',
               })}
             >
               Sequence
             </div>
             <div
               className={css({
-                fontSize: { base: "22px", md: "28px" },
-                fontWeight: "bold",
-                color: "#0c4a6e",
+                fontSize: { base: '22px', md: '28px' },
+                fontWeight: 'bold',
+                color: '#0c4a6e',
               })}
             >
               {scoreBreakdown.lcsLength}
               <span
                 className={css({
-                  fontSize: { base: "12px", md: "14px" },
-                  color: "#64748b",
-                  fontWeight: "500",
+                  fontSize: { base: '12px', md: '14px' },
+                  color: '#64748b',
+                  fontWeight: '500',
                 })}
               >
                 /{state.cardCount}
@@ -563,30 +544,30 @@ export function ResultsPhase() {
           {/* Misplaced */}
           <div
             className={css({
-              background: "white",
-              borderRadius: { base: "10px", md: "12px" },
-              padding: { base: "10px 8px", md: "12px" },
-              border: "2px solid rgba(59, 130, 246, 0.2)",
-              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.05)",
+              background: 'white',
+              borderRadius: { base: '10px', md: '12px' },
+              padding: { base: '10px 8px', md: '12px' },
+              border: '2px solid rgba(59, 130, 246, 0.2)',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)',
             })}
           >
             <div
               className={css({
-                fontSize: { base: "9px", md: "11px" },
-                fontWeight: "600",
-                color: "#64748b",
-                marginBottom: { base: "3px", md: "4px" },
-                textTransform: "uppercase",
-                letterSpacing: "0.5px",
+                fontSize: { base: '9px', md: '11px' },
+                fontWeight: '600',
+                color: '#64748b',
+                marginBottom: { base: '3px', md: '4px' },
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px',
               })}
             >
               Wrong
             </div>
             <div
               className={css({
-                fontSize: { base: "22px", md: "28px" },
-                fontWeight: "bold",
-                color: "#0c4a6e",
+                fontSize: { base: '22px', md: '28px' },
+                fontWeight: 'bold',
+                color: '#0c4a6e',
               })}
             >
               {scoreBreakdown.inversions}
@@ -597,38 +578,36 @@ export function ResultsPhase() {
         {/* Action Buttons */}
         <div
           className={css({
-            display: "flex",
-            flexDirection: { base: "row", md: "column" },
-            gap: { base: "6px", md: "10px" },
-            marginTop: "auto",
+            display: 'flex',
+            flexDirection: { base: 'row', md: 'column' },
+            gap: { base: '6px', md: '10px' },
+            marginTop: 'auto',
           })}
         >
           <button
             type="button"
             onClick={startGame}
             className={css({
-              padding: { base: "10px 8px", md: "14px 24px" },
-              background: "linear-gradient(135deg, #86efac, #22c55e)",
-              border: { base: "2px solid #22c55e", md: "3px solid #22c55e" },
-              borderRadius: { base: "8px", md: "12px" },
-              fontSize: { base: "11px", md: "16px" },
-              fontWeight: "700",
-              color: "white",
-              cursor: "pointer",
-              transition: "all 0.2s ease",
-              boxShadow: "0 4px 12px rgba(34, 197, 94, 0.3)",
-              textTransform: "uppercase",
-              letterSpacing: "0.5px",
-              flex: { base: 1, md: "none" },
+              padding: { base: '10px 8px', md: '14px 24px' },
+              background: 'linear-gradient(135deg, #86efac, #22c55e)',
+              border: { base: '2px solid #22c55e', md: '3px solid #22c55e' },
+              borderRadius: { base: '8px', md: '12px' },
+              fontSize: { base: '11px', md: '16px' },
+              fontWeight: '700',
+              color: 'white',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              boxShadow: '0 4px 12px rgba(34, 197, 94, 0.3)',
+              textTransform: 'uppercase',
+              letterSpacing: '0.5px',
+              flex: { base: 1, md: 'none' },
               _hover: {
-                transform: "translateY(-2px)",
-                boxShadow: "0 6px 20px rgba(34, 197, 94, 0.4)",
+                transform: 'translateY(-2px)',
+                boxShadow: '0 6px 20px rgba(34, 197, 94, 0.4)',
               },
             })}
           >
-            <span className={css({ display: { base: "none", md: "inline" } })}>
-              🎮{" "}
-            </span>
+            <span className={css({ display: { base: 'none', md: 'inline' } })}>🎮 </span>
             Play
           </button>
 
@@ -636,27 +615,25 @@ export function ResultsPhase() {
             type="button"
             onClick={goToSetup}
             className={css({
-              padding: { base: "10px 8px", md: "12px 20px" },
-              background: "white",
-              border: "2px solid rgba(59, 130, 246, 0.3)",
-              borderRadius: { base: "8px", md: "12px" },
-              fontSize: { base: "11px", md: "14px" },
-              fontWeight: "700",
-              color: "#0c4a6e",
-              cursor: "pointer",
-              transition: "all 0.2s ease",
-              textTransform: "uppercase",
-              letterSpacing: "0.5px",
-              flex: { base: 1, md: "none" },
+              padding: { base: '10px 8px', md: '12px 20px' },
+              background: 'white',
+              border: '2px solid rgba(59, 130, 246, 0.3)',
+              borderRadius: { base: '8px', md: '12px' },
+              fontSize: { base: '11px', md: '14px' },
+              fontWeight: '700',
+              color: '#0c4a6e',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              textTransform: 'uppercase',
+              letterSpacing: '0.5px',
+              flex: { base: 1, md: 'none' },
               _hover: {
-                borderColor: "rgba(59, 130, 246, 0.5)",
-                background: "rgba(59, 130, 246, 0.05)",
+                borderColor: 'rgba(59, 130, 246, 0.5)',
+                background: 'rgba(59, 130, 246, 0.05)',
               },
             })}
           >
-            <span className={css({ display: { base: "none", md: "inline" } })}>
-              ⚙️{" "}
-            </span>
+            <span className={css({ display: { base: 'none', md: 'inline' } })}>⚙️ </span>
             Settings
           </button>
 
@@ -664,31 +641,29 @@ export function ResultsPhase() {
             type="button"
             onClick={exitSession}
             className={css({
-              padding: { base: "10px 8px", md: "12px 20px" },
-              background: "white",
-              border: "2px solid rgba(239, 68, 68, 0.3)",
-              borderRadius: { base: "8px", md: "12px" },
-              fontSize: { base: "11px", md: "14px" },
-              fontWeight: "700",
-              color: "#991b1b",
-              cursor: "pointer",
-              transition: "all 0.2s ease",
-              textTransform: "uppercase",
-              letterSpacing: "0.5px",
-              flex: { base: 1, md: "none" },
+              padding: { base: '10px 8px', md: '12px 20px' },
+              background: 'white',
+              border: '2px solid rgba(239, 68, 68, 0.3)',
+              borderRadius: { base: '8px', md: '12px' },
+              fontSize: { base: '11px', md: '14px' },
+              fontWeight: '700',
+              color: '#991b1b',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              textTransform: 'uppercase',
+              letterSpacing: '0.5px',
+              flex: { base: 1, md: 'none' },
               _hover: {
-                borderColor: "rgba(239, 68, 68, 0.5)",
-                background: "rgba(239, 68, 68, 0.05)",
+                borderColor: 'rgba(239, 68, 68, 0.5)',
+                background: 'rgba(239, 68, 68, 0.05)',
               },
             })}
           >
-            <span className={css({ display: { base: "none", md: "inline" } })}>
-              🚪{" "}
-            </span>
+            <span className={css({ display: { base: 'none', md: 'inline' } })}>🚪 </span>
             Exit
           </button>
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/card-sorting/components/SetupPhase.tsx b/apps/web/src/arcade-games/card-sorting/components/SetupPhase.tsx
index 12b787e7..4a49d3c6 100644
--- a/apps/web/src/arcade-games/card-sorting/components/SetupPhase.tsx
+++ b/apps/web/src/arcade-games/card-sorting/components/SetupPhase.tsx
@@ -1,8 +1,8 @@
-"use client";
+'use client'
 
-import { AbacusReact } from "@soroban/abacus-react";
-import { css } from "../../../../styled-system/css";
-import { useCardSorting } from "../Provider";
+import { AbacusReact } from '@soroban/abacus-react'
+import { css } from '../../../../styled-system/css'
+import { useCardSorting } from '../Provider'
 
 // Add animations
 const animations = `
@@ -35,185 +35,181 @@ const animations = `
     transform: translateY(-10px) rotate(2deg);
   }
 }
-`;
+`
 
 // Inject animation styles
-if (
-  typeof document !== "undefined" &&
-  !document.getElementById("card-sorting-animations")
-) {
-  const style = document.createElement("style");
-  style.id = "card-sorting-animations";
-  style.textContent = animations;
-  document.head.appendChild(style);
+if (typeof document !== 'undefined' && !document.getElementById('card-sorting-animations')) {
+  const style = document.createElement('style')
+  style.id = 'card-sorting-animations'
+  style.textContent = animations
+  document.head.appendChild(style)
 }
 
 export function SetupPhase() {
-  const { state, setConfig, startGame, resumeGame, canResumeGame } =
-    useCardSorting();
+  const { state, setConfig, startGame, resumeGame, canResumeGame } = useCardSorting()
 
   const getButtonStyles = (isSelected: boolean) => {
     return css({
-      border: "none",
-      borderRadius: { base: "16px", md: "20px" },
-      padding: { base: "16px", md: "20px" },
-      fontSize: { base: "14px", md: "16px" },
-      fontWeight: "bold",
-      cursor: "pointer",
-      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-      textAlign: "center" as const,
-      position: "relative" as const,
-      overflow: "hidden" as const,
+      border: 'none',
+      borderRadius: { base: '16px', md: '20px' },
+      padding: { base: '16px', md: '20px' },
+      fontSize: { base: '14px', md: '16px' },
+      fontWeight: 'bold',
+      cursor: 'pointer',
+      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+      textAlign: 'center' as const,
+      position: 'relative' as const,
+      overflow: 'hidden' as const,
       background: isSelected
-        ? "linear-gradient(135deg, #14b8a6, #0d9488, #0f766e)"
-        : "linear-gradient(135deg, #ffffff, #f1f5f9)",
-      color: isSelected ? "white" : "#334155",
+        ? 'linear-gradient(135deg, #14b8a6, #0d9488, #0f766e)'
+        : 'linear-gradient(135deg, #ffffff, #f1f5f9)',
+      color: isSelected ? 'white' : '#334155',
       boxShadow: isSelected
-        ? "0 10px 30px rgba(20, 184, 166, 0.4), inset 0 2px 0 rgba(255,255,255,0.2)"
-        : "0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8)",
-      textShadow: isSelected ? "0 1px 2px rgba(0,0,0,0.2)" : "none",
+        ? '0 10px 30px rgba(20, 184, 166, 0.4), inset 0 2px 0 rgba(255,255,255,0.2)'
+        : '0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8)',
+      textShadow: isSelected ? '0 1px 2px rgba(0,0,0,0.2)' : 'none',
       _hover: {
-        transform: "translateY(-4px) scale(1.03)",
+        transform: 'translateY(-4px) scale(1.03)',
         boxShadow: isSelected
-          ? "0 15px 40px rgba(20, 184, 166, 0.6), inset 0 2px 0 rgba(255,255,255,0.2)"
-          : "0 10px 30px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8)",
+          ? '0 15px 40px rgba(20, 184, 166, 0.6), inset 0 2px 0 rgba(255,255,255,0.2)'
+          : '0 10px 30px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8)',
       },
       _active: {
-        transform: "translateY(-2px) scale(1.01)",
+        transform: 'translateY(-2px) scale(1.01)',
       },
-    });
-  };
+    })
+  }
 
   const cardCountInfo = {
     5: {
-      icon: "🌱",
-      label: "Gentle",
-      description: "Perfect to start",
-      emoji: "🟢",
-      difficulty: "Easy",
+      icon: '🌱',
+      label: 'Gentle',
+      description: 'Perfect to start',
+      emoji: '🟢',
+      difficulty: 'Easy',
     },
     8: {
-      icon: "⚡",
-      label: "Swift",
-      description: "Nice challenge",
-      emoji: "🟡",
-      difficulty: "Medium",
+      icon: '⚡',
+      label: 'Swift',
+      description: 'Nice challenge',
+      emoji: '🟡',
+      difficulty: 'Medium',
     },
     12: {
-      icon: "🔥",
-      label: "Intense",
-      description: "Test your memory",
-      emoji: "🟠",
-      difficulty: "Hard",
+      icon: '🔥',
+      label: 'Intense',
+      description: 'Test your memory',
+      emoji: '🟠',
+      difficulty: 'Hard',
     },
     15: {
-      icon: "💎",
-      label: "Master",
-      description: "Ultimate test",
-      emoji: "🔴",
-      difficulty: "Expert",
+      icon: '💎',
+      label: 'Master',
+      description: 'Ultimate test',
+      emoji: '🔴',
+      difficulty: 'Expert',
     },
-  };
+  }
 
   return (
     <div
       className={css({
-        textAlign: "center",
-        padding: { base: "12px", md: "20px" },
-        maxWidth: "900px",
-        margin: "0 auto",
-        display: "flex",
-        flexDirection: "column",
-        gap: { base: "16px", md: "24px" },
+        textAlign: 'center',
+        padding: { base: '12px', md: '20px' },
+        maxWidth: '900px',
+        margin: '0 auto',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: { base: '16px', md: '24px' },
         minHeight: 0,
-        overflow: "auto",
+        overflow: 'auto',
       })}
     >
       {/* Hero Section */}
       <div
         className={css({
-          background: "linear-gradient(135deg, #0f766e, #14b8a6, #2dd4bf)",
-          borderRadius: { base: "16px", md: "20px" },
-          padding: { base: "20px 16px 28px", md: "24px 24px 36px" },
-          boxShadow: "0 20px 60px rgba(20, 184, 166, 0.3)",
-          position: "relative",
-          overflow: "visible",
-          minHeight: { base: "240px", md: "260px" },
+          background: 'linear-gradient(135deg, #0f766e, #14b8a6, #2dd4bf)',
+          borderRadius: { base: '16px', md: '20px' },
+          padding: { base: '20px 16px 28px', md: '24px 24px 36px' },
+          boxShadow: '0 20px 60px rgba(20, 184, 166, 0.3)',
+          position: 'relative',
+          overflow: 'visible',
+          minHeight: { base: '240px', md: '260px' },
         })}
       >
         {/* Animated background pattern */}
         <div
           className={css({
-            position: "absolute",
+            position: 'absolute',
             top: 0,
             left: 0,
             right: 0,
             bottom: 0,
             opacity: 0.1,
             background:
-              "repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px)",
+              'repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px)',
           })}
         />
 
-        <div className={css({ position: "relative", zIndex: 1 })}>
+        <div className={css({ position: 'relative', zIndex: 1 })}>
           <h1
             className={css({
-              fontSize: { base: "28px", sm: "32px", md: "40px" },
-              fontWeight: "black",
-              color: "white",
-              marginBottom: "8px",
-              textShadow: "0 4px 12px rgba(0,0,0,0.3)",
-              letterSpacing: "-0.02em",
+              fontSize: { base: '28px', sm: '32px', md: '40px' },
+              fontWeight: 'black',
+              color: 'white',
+              marginBottom: '8px',
+              textShadow: '0 4px 12px rgba(0,0,0,0.3)',
+              letterSpacing: '-0.02em',
             })}
           >
             🎴 Card Sorting Challenge
           </h1>
           <p
             className={css({
-              fontSize: { base: "14px", md: "16px" },
-              color: "rgba(255,255,255,0.95)",
-              maxWidth: "600px",
-              margin: "0 auto",
+              fontSize: { base: '14px', md: '16px' },
+              color: 'rgba(255,255,255,0.95)',
+              maxWidth: '600px',
+              margin: '0 auto',
               lineHeight: 1.5,
-              fontWeight: "500",
+              fontWeight: '500',
             })}
           >
-            Arrange abacus cards in order using{" "}
-            <strong>only visual patterns</strong> — no numbers shown!
+            Arrange abacus cards in order using <strong>only visual patterns</strong> — no numbers
+            shown!
           </p>
 
           {/* Sample cards preview */}
           <div
             className={css({
-              display: "flex",
-              justifyContent: "center",
-              gap: { base: "6px", md: "8px" },
-              marginTop: "12px",
-              flexWrap: "wrap",
+              display: 'flex',
+              justifyContent: 'center',
+              gap: { base: '6px', md: '8px' },
+              marginTop: '12px',
+              flexWrap: 'wrap',
             })}
           >
             {[3, 7, 12].map((value, idx) => (
               <div
                 key={value}
                 className={css({
-                  background: "white",
-                  borderRadius: "8px",
-                  padding: { base: "6px", md: "8px" },
-                  boxShadow: "0 6px 16px rgba(0,0,0,0.2)",
+                  background: 'white',
+                  borderRadius: '8px',
+                  padding: { base: '6px', md: '8px' },
+                  boxShadow: '0 6px 16px rgba(0,0,0,0.2)',
                   transform: `rotate(${(idx - 1) * 3}deg)`,
-                  animation: "float 3s ease-in-out infinite",
+                  animation: 'float 3s ease-in-out infinite',
                   animationDelay: `${idx * 0.3}s`,
-                  width: { base: "60px", md: "70px" },
-                  height: { base: "75px", md: "85px" },
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
+                  width: { base: '60px', md: '70px' },
+                  height: { base: '75px', md: '85px' },
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
                 })}
               >
                 <div
                   className={css({
-                    transform: "scale(0.35)",
-                    transformOrigin: "center",
+                    transform: 'scale(0.35)',
+                    transformOrigin: 'center',
                   })}
                 >
                   <AbacusReact value={value} columns={2} showNumbers={false} />
@@ -228,25 +224,25 @@ export function SetupPhase() {
       <div>
         <div
           className={css({
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: "8px",
-            marginBottom: { base: "12px", md: "16px" },
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '8px',
+            marginBottom: { base: '12px', md: '16px' },
           })}
         >
           <span
             className={css({
-              fontSize: { base: "24px", md: "28px" },
+              fontSize: { base: '24px', md: '28px' },
             })}
           >
             🎯
           </span>
           <h2
             className={css({
-              fontSize: { base: "20px", md: "24px" },
-              fontWeight: "bold",
-              color: "gray.800",
+              fontSize: { base: '20px', md: '24px' },
+              fontWeight: 'bold',
+              color: 'gray.800',
               margin: 0,
             })}
           >
@@ -256,34 +252,34 @@ export function SetupPhase() {
 
         <div
           className={css({
-            display: "grid",
+            display: 'grid',
             gridTemplateColumns: {
-              base: "repeat(2, 1fr)",
-              sm: "repeat(4, 1fr)",
+              base: 'repeat(2, 1fr)',
+              sm: 'repeat(4, 1fr)',
             },
-            gap: { base: "12px", md: "16px" },
+            gap: { base: '12px', md: '16px' },
           })}
         >
           {([5, 8, 12, 15] as const).map((count) => {
-            const info = cardCountInfo[count];
+            const info = cardCountInfo[count]
             return (
               <button
                 key={count}
                 type="button"
-                onClick={() => setConfig("cardCount", count)}
+                onClick={() => setConfig('cardCount', count)}
                 className={getButtonStyles(state.cardCount === count)}
               >
                 <div
                   className={css({
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    gap: { base: "6px", md: "8px" },
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: { base: '6px', md: '8px' },
                   })}
                 >
                   <div
                     className={css({
-                      fontSize: { base: "36px", md: "44px" },
+                      fontSize: { base: '36px', md: '44px' },
                       lineHeight: 1,
                     })}
                   >
@@ -291,8 +287,8 @@ export function SetupPhase() {
                   </div>
                   <div
                     className={css({
-                      fontSize: { base: "24px", md: "28px" },
-                      fontWeight: "black",
+                      fontSize: { base: '24px', md: '28px' },
+                      fontWeight: 'black',
                       lineHeight: 1,
                     })}
                   >
@@ -300,8 +296,8 @@ export function SetupPhase() {
                   </div>
                   <div
                     className={css({
-                      fontSize: { base: "13px", md: "15px" },
-                      fontWeight: "bold",
+                      fontSize: { base: '13px', md: '15px' },
+                      fontWeight: 'bold',
                       opacity: 0.9,
                     })}
                   >
@@ -309,40 +305,39 @@ export function SetupPhase() {
                   </div>
                   <div
                     className={css({
-                      fontSize: { base: "11px", md: "12px" },
+                      fontSize: { base: '11px', md: '12px' },
                       opacity: 0.8,
-                      display: { base: "none", sm: "block" },
+                      display: { base: 'none', sm: 'block' },
                     })}
                   >
                     {info.description}
                   </div>
                 </div>
               </button>
-            );
+            )
           })}
         </div>
 
         <div
           className={css({
-            marginTop: "12px",
-            padding: { base: "12px", md: "14px" },
-            background: "linear-gradient(135deg, #f0fdfa, #ccfbf1)",
-            borderRadius: "10px",
-            border: "2px solid",
-            borderColor: "teal.200",
+            marginTop: '12px',
+            padding: { base: '12px', md: '14px' },
+            background: 'linear-gradient(135deg, #f0fdfa, #ccfbf1)',
+            borderRadius: '10px',
+            border: '2px solid',
+            borderColor: 'teal.200',
           })}
         >
           <p
             className={css({
-              fontSize: { base: "13px", md: "15px" },
-              color: "teal.800",
+              fontSize: { base: '13px', md: '15px' },
+              color: 'teal.800',
               margin: 0,
-              fontWeight: "600",
+              fontWeight: '600',
             })}
           >
-            {cardCountInfo[state.cardCount].emoji}{" "}
-            <strong>{state.cardCount} cards</strong> •{" "}
-            {cardCountInfo[state.cardCount].difficulty} difficulty •{" "}
+            {cardCountInfo[state.cardCount].emoji} <strong>{state.cardCount} cards</strong> •{' '}
+            {cardCountInfo[state.cardCount].difficulty} difficulty •{' '}
             {cardCountInfo[state.cardCount].description}
           </p>
         </div>
@@ -351,8 +346,8 @@ export function SetupPhase() {
       {/* Start Button */}
       <div
         className={css({
-          marginTop: "auto",
-          paddingTop: { base: "8px", md: "12px" },
+          marginTop: 'auto',
+          paddingTop: { base: '8px', md: '12px' },
         })}
       >
         {canResumeGame && (
@@ -360,43 +355,41 @@ export function SetupPhase() {
             type="button"
             onClick={resumeGame}
             className={css({
-              width: "100%",
-              background:
-                "linear-gradient(135deg, #10b981 0%, #059669 50%, #34d399 100%)",
-              color: "white",
-              border: "none",
-              borderRadius: { base: "16px", md: "20px" },
-              padding: { base: "16px", md: "20px" },
-              fontSize: { base: "18px", md: "22px" },
-              fontWeight: "black",
-              cursor: "pointer",
-              transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-              boxShadow:
-                "0 10px 30px rgba(16, 185, 129, 0.4), inset 0 2px 0 rgba(255,255,255,0.3)",
-              textShadow: "0 2px 4px rgba(0,0,0,0.3)",
-              marginBottom: "12px",
+              width: '100%',
+              background: 'linear-gradient(135deg, #10b981 0%, #059669 50%, #34d399 100%)',
+              color: 'white',
+              border: 'none',
+              borderRadius: { base: '16px', md: '20px' },
+              padding: { base: '16px', md: '20px' },
+              fontSize: { base: '18px', md: '22px' },
+              fontWeight: 'black',
+              cursor: 'pointer',
+              transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+              boxShadow: '0 10px 30px rgba(16, 185, 129, 0.4), inset 0 2px 0 rgba(255,255,255,0.3)',
+              textShadow: '0 2px 4px rgba(0,0,0,0.3)',
+              marginBottom: '12px',
               _hover: {
-                transform: "translateY(-4px) scale(1.02)",
+                transform: 'translateY(-4px) scale(1.02)',
                 boxShadow:
-                  "0 15px 40px rgba(16, 185, 129, 0.6), inset 0 2px 0 rgba(255,255,255,0.3)",
+                  '0 15px 40px rgba(16, 185, 129, 0.6), inset 0 2px 0 rgba(255,255,255,0.3)',
               },
               _active: {
-                transform: "translateY(-2px) scale(1.01)",
+                transform: 'translateY(-2px) scale(1.01)',
               },
             })}
           >
             <div
               className={css({
-                display: "flex",
-                alignItems: "center",
-                gap: "12px",
-                justifyContent: "center",
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+                justifyContent: 'center',
               })}
             >
               <span
                 className={css({
-                  fontSize: { base: "24px", md: "28px" },
-                  animation: "bounce 2s infinite",
+                  fontSize: { base: '24px', md: '28px' },
+                  animation: 'bounce 2s infinite',
                 })}
               >
                 ▶️
@@ -404,9 +397,9 @@ export function SetupPhase() {
               <span>RESUME GAME</span>
               <span
                 className={css({
-                  fontSize: { base: "24px", md: "28px" },
-                  animation: "bounce 2s infinite",
-                  animationDelay: "0.5s",
+                  fontSize: { base: '24px', md: '28px' },
+                  animation: 'bounce 2s infinite',
+                  animationDelay: '0.5s',
                 })}
               >
                 🎮
@@ -419,71 +412,70 @@ export function SetupPhase() {
           type="button"
           onClick={startGame}
           className={css({
-            width: "100%",
+            width: '100%',
             background: canResumeGame
-              ? "linear-gradient(135deg, #64748b, #475569)"
-              : "linear-gradient(135deg, #14b8a6 0%, #0d9488 50%, #5eead4 100%)",
-            color: "white",
-            border: "none",
-            borderRadius: { base: "16px", md: "20px" },
-            padding: { base: "14px", md: "18px" },
-            fontSize: { base: "18px", md: "20px" },
-            fontWeight: "black",
-            cursor: "pointer",
-            transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
+              ? 'linear-gradient(135deg, #64748b, #475569)'
+              : 'linear-gradient(135deg, #14b8a6 0%, #0d9488 50%, #5eead4 100%)',
+            color: 'white',
+            border: 'none',
+            borderRadius: { base: '16px', md: '20px' },
+            padding: { base: '14px', md: '18px' },
+            fontSize: { base: '18px', md: '20px' },
+            fontWeight: 'black',
+            cursor: 'pointer',
+            transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
             boxShadow: canResumeGame
-              ? "0 8px 20px rgba(100, 116, 139, 0.4), inset 0 2px 0 rgba(255,255,255,0.2)"
-              : "0 10px 30px rgba(20, 184, 166, 0.5), inset 0 2px 0 rgba(255,255,255,0.3)",
-            textShadow: "0 2px 4px rgba(0,0,0,0.3)",
-            position: "relative",
-            overflow: "hidden",
+              ? '0 8px 20px rgba(100, 116, 139, 0.4), inset 0 2px 0 rgba(255,255,255,0.2)'
+              : '0 10px 30px rgba(20, 184, 166, 0.5), inset 0 2px 0 rgba(255,255,255,0.3)',
+            textShadow: '0 2px 4px rgba(0,0,0,0.3)',
+            position: 'relative',
+            overflow: 'hidden',
             _before: {
               content: '""',
-              position: "absolute",
+              position: 'absolute',
               top: 0,
-              left: "-200%",
-              width: "200%",
-              height: "100%",
-              background:
-                "linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)",
-              backgroundSize: "200% 100%",
+              left: '-200%',
+              width: '200%',
+              height: '100%',
+              background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)',
+              backgroundSize: '200% 100%',
             },
             _hover: {
-              transform: "translateY(-4px) scale(1.02)",
+              transform: 'translateY(-4px) scale(1.02)',
               boxShadow: canResumeGame
-                ? "0 12px 35px rgba(100, 116, 139, 0.6), inset 0 2px 0 rgba(255,255,255,0.2)"
-                : "0 15px 40px rgba(20, 184, 166, 0.7), inset 0 2px 0 rgba(255,255,255,0.3)",
+                ? '0 12px 35px rgba(100, 116, 139, 0.6), inset 0 2px 0 rgba(255,255,255,0.2)'
+                : '0 15px 40px rgba(20, 184, 166, 0.7), inset 0 2px 0 rgba(255,255,255,0.3)',
               _before: {
-                animation: "shimmer 1.5s ease-in-out",
+                animation: 'shimmer 1.5s ease-in-out',
               },
             },
             _active: {
-              transform: "translateY(-2px) scale(1.01)",
+              transform: 'translateY(-2px) scale(1.01)',
             },
           })}
         >
           <div
             className={css({
-              display: "flex",
-              alignItems: "center",
-              gap: { base: "8px", md: "10px" },
-              justifyContent: "center",
+              display: 'flex',
+              alignItems: 'center',
+              gap: { base: '8px', md: '10px' },
+              justifyContent: 'center',
             })}
           >
             <span
               className={css({
-                fontSize: { base: "22px", md: "26px" },
-                animation: canResumeGame ? "none" : "bounce 2s infinite",
+                fontSize: { base: '22px', md: '26px' },
+                animation: canResumeGame ? 'none' : 'bounce 2s infinite',
               })}
             >
               🚀
             </span>
-            <span>{canResumeGame ? "START NEW GAME" : "START GAME"}</span>
+            <span>{canResumeGame ? 'START NEW GAME' : 'START GAME'}</span>
             <span
               className={css({
-                fontSize: { base: "22px", md: "26px" },
-                animation: canResumeGame ? "none" : "bounce 2s infinite",
-                animationDelay: "0.5s",
+                fontSize: { base: '22px', md: '26px' },
+                animation: canResumeGame ? 'none' : 'bounce 2s infinite',
+                animationDelay: '0.5s',
               })}
             >
               🎴
@@ -494,17 +486,16 @@ export function SetupPhase() {
         {!canResumeGame && (
           <p
             className={css({
-              fontSize: { base: "12px", md: "13px" },
-              color: "gray.500",
-              marginTop: "8px",
-              fontStyle: "italic",
+              fontSize: { base: '12px', md: '13px' },
+              color: 'gray.500',
+              marginTop: '8px',
+              fontStyle: 'italic',
             })}
           >
-            💡 Tip: Look for patterns in the beads — focus on positions, not
-            numbers!
+            💡 Tip: Look for patterns in the beads — focus on positions, not numbers!
           </p>
         )}
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/card-sorting/index.ts b/apps/web/src/arcade-games/card-sorting/index.ts
index 787a9009..a69f83f6 100644
--- a/apps/web/src/arcade-games/card-sorting/index.ts
+++ b/apps/web/src/arcade-games/card-sorting/index.ts
@@ -5,93 +5,76 @@
  * in ascending order using only visual patterns (no numbers shown).
  */
 
-import { defineGame, getGameTheme } from "@/lib/arcade/game-sdk";
-import type { GameManifest } from "@/lib/arcade/game-sdk";
-import { GameComponent } from "./components/GameComponent";
-import { CardSortingProvider } from "./Provider";
-import type {
-  CardSortingConfig,
-  CardSortingMove,
-  CardSortingState,
-} from "./types";
-import { cardSortingValidator } from "./Validator";
+import { defineGame, getGameTheme } from '@/lib/arcade/game-sdk'
+import type { GameManifest } from '@/lib/arcade/game-sdk'
+import { GameComponent } from './components/GameComponent'
+import { CardSortingProvider } from './Provider'
+import type { CardSortingConfig, CardSortingMove, CardSortingState } from './types'
+import { cardSortingValidator } from './Validator'
 
 const manifest: GameManifest = {
-  name: "card-sorting",
-  displayName: "Card Sorting Challenge",
-  icon: "🔢",
-  description: "Sort abacus cards using pattern recognition",
+  name: 'card-sorting',
+  displayName: 'Card Sorting Challenge',
+  icon: '🔢',
+  description: 'Sort abacus cards using pattern recognition',
   longDescription:
-    "Challenge your abacus reading skills! Arrange cards in ascending order using only " +
-    "the visual patterns - no numbers shown. Perfect for practicing number recognition and " +
-    "developing mental math intuition.",
+    'Challenge your abacus reading skills! Arrange cards in ascending order using only ' +
+    'the visual patterns - no numbers shown. Perfect for practicing number recognition and ' +
+    'developing mental math intuition.',
   maxPlayers: 1, // Single player only
-  difficulty: "Intermediate",
-  chips: ["🧠 Pattern Recognition", "🎯 Solo Challenge", "📊 Smart Scoring"],
-  ...getGameTheme("green"),
+  difficulty: 'Intermediate',
+  chips: ['🧠 Pattern Recognition', '🎯 Solo Challenge', '📊 Smart Scoring'],
+  ...getGameTheme('green'),
   available: true,
-};
+}
 
 const defaultConfig: CardSortingConfig = {
   cardCount: 8,
   showNumbers: true,
   timeLimit: null,
-  gameMode: "solo",
-};
+  gameMode: 'solo',
+}
 
 // Config validation function
-function validateCardSortingConfig(
-  config: unknown,
-): config is CardSortingConfig {
-  if (typeof config !== "object" || config === null) {
-    return false;
+function validateCardSortingConfig(config: unknown): config is CardSortingConfig {
+  if (typeof config !== 'object' || config === null) {
+    return false
   }
 
-  const c = config as Record<string, unknown>;
+  const c = config as Record<string, unknown>
 
   // Validate cardCount
-  if (!("cardCount" in c) || ![5, 8, 12, 15].includes(c.cardCount as number)) {
-    return false;
+  if (!('cardCount' in c) || ![5, 8, 12, 15].includes(c.cardCount as number)) {
+    return false
   }
 
   // Validate showNumbers
-  if (!("showNumbers" in c) || typeof c.showNumbers !== "boolean") {
-    return false;
+  if (!('showNumbers' in c) || typeof c.showNumbers !== 'boolean') {
+    return false
   }
 
   // Validate timeLimit
-  if ("timeLimit" in c) {
-    if (
-      c.timeLimit !== null &&
-      (typeof c.timeLimit !== "number" || c.timeLimit < 30)
-    ) {
-      return false;
+  if ('timeLimit' in c) {
+    if (c.timeLimit !== null && (typeof c.timeLimit !== 'number' || c.timeLimit < 30)) {
+      return false
     }
   }
 
   // Validate gameMode (optional, defaults to 'solo')
-  if ("gameMode" in c) {
-    if (
-      !["solo", "collaborative", "competitive", "relay"].includes(
-        c.gameMode as string,
-      )
-    ) {
-      return false;
+  if ('gameMode' in c) {
+    if (!['solo', 'collaborative', 'competitive', 'relay'].includes(c.gameMode as string)) {
+      return false
     }
   }
 
-  return true;
+  return true
 }
 
-export const cardSortingGame = defineGame<
-  CardSortingConfig,
-  CardSortingState,
-  CardSortingMove
->({
+export const cardSortingGame = defineGame<CardSortingConfig, CardSortingState, CardSortingMove>({
   manifest,
   Provider: CardSortingProvider,
   GameComponent,
   validator: cardSortingValidator,
   defaultConfig,
   validateConfig: validateCardSortingConfig,
-});
+})
diff --git a/apps/web/src/arcade-games/card-sorting/types.ts b/apps/web/src/arcade-games/card-sorting/types.ts
index 0ddecc8a..cad6c96e 100644
--- a/apps/web/src/arcade-games/card-sorting/types.ts
+++ b/apps/web/src/arcade-games/card-sorting/types.ts
@@ -1,64 +1,64 @@
-import type { GameConfig, GameState } from "@/lib/arcade/game-sdk/types";
+import type { GameConfig, GameState } from '@/lib/arcade/game-sdk/types'
 
 // ============================================================================
 // Player Metadata
 // ============================================================================
 
 export interface PlayerMetadata {
-  id: string; // Player ID (UUID)
-  name: string;
-  emoji: string;
-  userId: string;
+  id: string // Player ID (UUID)
+  name: string
+  emoji: string
+  userId: string
 }
 
 // ============================================================================
 // Configuration
 // ============================================================================
 
-export type GameMode = "solo" | "collaborative" | "competitive" | "relay";
+export type GameMode = 'solo' | 'collaborative' | 'competitive' | 'relay'
 
 export interface CardSortingConfig extends GameConfig {
-  cardCount: 5 | 8 | 12 | 15; // Difficulty (number of cards)
-  timeLimit: number | null; // Optional time limit (seconds), null = unlimited
-  gameMode: GameMode; // Game mode (solo, collaborative, competitive, relay)
+  cardCount: 5 | 8 | 12 | 15 // Difficulty (number of cards)
+  timeLimit: number | null // Optional time limit (seconds), null = unlimited
+  gameMode: GameMode // Game mode (solo, collaborative, competitive, relay)
 }
 
 // ============================================================================
 // Core Data Types
 // ============================================================================
 
-export type GamePhase = "setup" | "playing" | "results";
+export type GamePhase = 'setup' | 'playing' | 'results'
 
 export interface SortingCard {
-  id: string; // Unique ID for this card instance
-  number: number; // The abacus value (0-99+)
-  svgContent: string; // Serialized AbacusReact SVG
+  id: string // Unique ID for this card instance
+  number: number // The abacus value (0-99+)
+  svgContent: string // Serialized AbacusReact SVG
 }
 
 export interface CardPosition {
-  cardId: string;
-  x: number; // % of viewport width (0-100)
-  y: number; // % of viewport height (0-100)
-  rotation: number; // degrees (-15 to 15)
-  zIndex: number;
-  draggedByPlayerId?: string; // ID of player currently dragging this card
-  draggedByWindowId?: string; // ID of specific window/tab doing the drag
+  cardId: string
+  x: number // % of viewport width (0-100)
+  y: number // % of viewport height (0-100)
+  rotation: number // degrees (-15 to 15)
+  zIndex: number
+  draggedByPlayerId?: string // ID of player currently dragging this card
+  draggedByWindowId?: string // ID of specific window/tab doing the drag
 }
 
 export interface PlacedCard {
-  card: SortingCard; // The card data
-  position: number; // Which slot it's in (0-indexed)
+  card: SortingCard // The card data
+  position: number // Which slot it's in (0-indexed)
 }
 
 export interface ScoreBreakdown {
-  finalScore: number; // 0-100 weighted average
-  exactMatches: number; // Cards in exactly correct position
-  lcsLength: number; // Longest common subsequence length
-  inversions: number; // Number of out-of-order pairs
-  relativeOrderScore: number; // 0-100 based on LCS
-  exactPositionScore: number; // 0-100 based on exact matches
-  inversionScore: number; // 0-100 based on inversions
-  elapsedTime: number; // Seconds taken
+  finalScore: number // 0-100 weighted average
+  exactMatches: number // Cards in exactly correct position
+  lcsLength: number // Longest common subsequence length
+  inversions: number // Number of out-of-order pairs
+  relativeOrderScore: number // 0-100 based on LCS
+  exactPositionScore: number // 0-100 based on exact matches
+  inversionScore: number // 0-100 based on inversions
+  elapsedTime: number // Seconds taken
 }
 
 // ============================================================================
@@ -67,47 +67,47 @@ export interface ScoreBreakdown {
 
 export interface CardSortingState extends GameState {
   // Configuration
-  cardCount: 5 | 8 | 12 | 15;
-  timeLimit: number | null;
-  gameMode: GameMode;
+  cardCount: 5 | 8 | 12 | 15
+  timeLimit: number | null
+  gameMode: GameMode
 
   // Game phase
-  gamePhase: GamePhase;
+  gamePhase: GamePhase
 
   // Player & timing
-  playerId: string; // Single player ID (primary player in solo/collaborative)
-  playerMetadata: PlayerMetadata; // Player display info
-  activePlayers: string[]; // All active player IDs (for collaborative mode)
-  allPlayerMetadata: Map<string, PlayerMetadata>; // Metadata for all players
-  gameStartTime: number | null;
-  gameEndTime: number | null;
+  playerId: string // Single player ID (primary player in solo/collaborative)
+  playerMetadata: PlayerMetadata // Player display info
+  activePlayers: string[] // All active player IDs (for collaborative mode)
+  allPlayerMetadata: Map<string, PlayerMetadata> // Metadata for all players
+  gameStartTime: number | null
+  gameEndTime: number | null
 
   // Cards
-  selectedCards: SortingCard[]; // The N cards for this game
-  correctOrder: SortingCard[]; // Sorted by number (answer key)
-  availableCards: SortingCard[]; // Cards not yet placed
-  placedCards: (SortingCard | null)[]; // Array of N slots (null = empty)
-  cardPositions: CardPosition[]; // Viewport-relative positions for all cards
+  selectedCards: SortingCard[] // The N cards for this game
+  correctOrder: SortingCard[] // Sorted by number (answer key)
+  availableCards: SortingCard[] // Cards not yet placed
+  placedCards: (SortingCard | null)[] // Array of N slots (null = empty)
+  cardPositions: CardPosition[] // Viewport-relative positions for all cards
 
   // Multiplayer cursors (collaborative mode)
-  cursorPositions: Map<string, { x: number; y: number }>; // Player ID -> cursor position
+  cursorPositions: Map<string, { x: number; y: number }> // Player ID -> cursor position
 
   // UI state (client-only, not in server state)
-  selectedCardId: string | null; // Currently selected card
+  selectedCardId: string | null // Currently selected card
 
   // Results
-  scoreBreakdown: ScoreBreakdown | null; // Final score details
+  scoreBreakdown: ScoreBreakdown | null // Final score details
 
   // Pause/Resume (standard pattern)
-  originalConfig?: CardSortingConfig;
-  pausedGamePhase?: GamePhase;
+  originalConfig?: CardSortingConfig
+  pausedGamePhase?: GamePhase
   pausedGameState?: {
-    selectedCards: SortingCard[];
-    availableCards: SortingCard[];
-    placedCards: (SortingCard | null)[];
-    cardPositions: CardPosition[];
-    gameStartTime: number;
-  };
+    selectedCards: SortingCard[]
+    availableCards: SortingCard[]
+    placedCards: (SortingCard | null)[]
+    cardPositions: CardPosition[]
+    gameStartTime: number
+  }
 }
 
 // ============================================================================
@@ -116,138 +116,138 @@ export interface CardSortingState extends GameState {
 
 export type CardSortingMove =
   | {
-      type: "START_GAME";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'START_GAME'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        playerMetadata: PlayerMetadata;
-        selectedCards: SortingCard[]; // Pre-selected random cards
-      };
+        playerMetadata: PlayerMetadata
+        selectedCards: SortingCard[] // Pre-selected random cards
+      }
     }
   | {
-      type: "PLACE_CARD";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'PLACE_CARD'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        cardId: string; // Which card to place
-        position: number; // Which slot (0-indexed)
-      };
+        cardId: string // Which card to place
+        position: number // Which slot (0-indexed)
+      }
     }
   | {
-      type: "INSERT_CARD";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'INSERT_CARD'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        cardId: string; // Which card to insert
-        insertPosition: number; // Where to insert (0-indexed, can be 0 to cardCount)
-      };
+        cardId: string // Which card to insert
+        insertPosition: number // Where to insert (0-indexed, can be 0 to cardCount)
+      }
     }
   | {
-      type: "REMOVE_CARD";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'REMOVE_CARD'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        position: number; // Which slot to remove from
-      };
+        position: number // Which slot to remove from
+      }
     }
   | {
-      type: "CHECK_SOLUTION";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'CHECK_SOLUTION'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        finalSequence?: SortingCard[]; // Optional - if provided, use this as the final placement
-      };
+        finalSequence?: SortingCard[] // Optional - if provided, use this as the final placement
+      }
     }
   | {
-      type: "GO_TO_SETUP";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'GO_TO_SETUP'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "SET_CONFIG";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'SET_CONFIG'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        field: "cardCount" | "timeLimit" | "gameMode";
-        value: unknown;
-      };
+        field: 'cardCount' | 'timeLimit' | 'gameMode'
+        value: unknown
+      }
     }
   | {
-      type: "RESUME_GAME";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'RESUME_GAME'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "UPDATE_CARD_POSITIONS";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'UPDATE_CARD_POSITIONS'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        positions: CardPosition[];
-      };
+        positions: CardPosition[]
+      }
     }
   | {
-      type: "JOIN_COLLABORATIVE_GAME";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'JOIN_COLLABORATIVE_GAME'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        playerMetadata: PlayerMetadata;
-      };
+        playerMetadata: PlayerMetadata
+      }
     }
   | {
-      type: "LEAVE_COLLABORATIVE_GAME";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'LEAVE_COLLABORATIVE_GAME'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "UPDATE_CURSOR_POSITION";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'UPDATE_CURSOR_POSITION'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        x: number; // % of viewport width (0-100)
-        y: number; // % of viewport height (0-100)
-      };
-    };
+        x: number // % of viewport width (0-100)
+        y: number // % of viewport height (0-100)
+      }
+    }
 
 // ============================================================================
 // Component Props
 // ============================================================================
 
 export interface SortingCardProps {
-  card: SortingCard;
-  isSelected: boolean;
-  isPlaced: boolean;
-  isCorrect?: boolean; // After checking solution
-  onClick: () => void;
+  card: SortingCard
+  isSelected: boolean
+  isPlaced: boolean
+  isCorrect?: boolean // After checking solution
+  onClick: () => void
 }
 
 export interface PositionSlotProps {
-  position: number;
-  card: SortingCard | null;
-  isActive: boolean; // If slot is clickable
-  isCorrect?: boolean; // After checking solution
-  gradientStyle: React.CSSProperties;
-  onClick: () => void;
+  position: number
+  card: SortingCard | null
+  isActive: boolean // If slot is clickable
+  isCorrect?: boolean // After checking solution
+  gradientStyle: React.CSSProperties
+  onClick: () => void
 }
 
 export interface ScoreDisplayProps {
-  breakdown: ScoreBreakdown;
-  correctOrder: SortingCard[];
-  userOrder: SortingCard[];
-  onNewGame: () => void;
-  onExit: () => void;
+  breakdown: ScoreBreakdown
+  correctOrder: SortingCard[]
+  userOrder: SortingCard[]
+  onNewGame: () => void
+  onExit: () => void
 }
diff --git a/apps/web/src/arcade-games/card-sorting/utils/cardGeneration.tsx b/apps/web/src/arcade-games/card-sorting/utils/cardGeneration.tsx
index 3f71797e..0d1f30c4 100644
--- a/apps/web/src/arcade-games/card-sorting/utils/cardGeneration.tsx
+++ b/apps/web/src/arcade-games/card-sorting/utils/cardGeneration.tsx
@@ -1,6 +1,6 @@
-import { AbacusReact } from "@soroban/abacus-react";
-import { renderToString } from "react-dom/server";
-import type { SortingCard } from "../types";
+import { AbacusReact } from '@soroban/abacus-react'
+import { renderToString } from 'react-dom/server'
+import type { SortingCard } from '../types'
 
 /**
  * Generate random cards for sorting game
@@ -8,21 +8,16 @@ import type { SortingCard } from "../types";
  * @param minValue Minimum abacus value (default 0)
  * @param maxValue Maximum abacus value (default 99)
  */
-export function generateRandomCards(
-  count: number,
-  minValue = 0,
-  maxValue = 99,
-): SortingCard[] {
+export function generateRandomCards(count: number, minValue = 0, maxValue = 99): SortingCard[] {
   // Generate pool of unique random numbers
-  const numbers = new Set<number>();
+  const numbers = new Set<number>()
   while (numbers.size < count) {
-    const num =
-      Math.floor(Math.random() * (maxValue - minValue + 1)) + minValue;
-    numbers.add(num);
+    const num = Math.floor(Math.random() * (maxValue - minValue + 1)) + minValue
+    numbers.add(num)
   }
 
   // Convert to sorted array (for answer key)
-  const sortedNumbers = Array.from(numbers).sort((a, b) => a - b);
+  const sortedNumbers = Array.from(numbers).sort((a, b) => a - b)
 
   // Create card objects with SVG content
   return sortedNumbers.map((number, index) => {
@@ -35,25 +30,25 @@ export function generateRandomCards(
         interactive={false}
         showNumbers={false}
         animated={false}
-      />,
-    );
+      />
+    )
 
     return {
       id: `card-${index}-${number}`,
       number,
       svgContent,
-    };
-  });
+    }
+  })
 }
 
 /**
  * Shuffle array for random order
  */
 export function shuffleCards(cards: SortingCard[]): SortingCard[] {
-  const shuffled = [...cards];
+  const shuffled = [...cards]
   for (let i = shuffled.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
   }
-  return shuffled;
+  return shuffled
 }
diff --git a/apps/web/src/arcade-games/card-sorting/utils/scoringAlgorithm.ts b/apps/web/src/arcade-games/card-sorting/utils/scoringAlgorithm.ts
index 76b01fcf..4c604976 100644
--- a/apps/web/src/arcade-games/card-sorting/utils/scoringAlgorithm.ts
+++ b/apps/web/src/arcade-games/card-sorting/utils/scoringAlgorithm.ts
@@ -1,60 +1,54 @@
-import type { ScoreBreakdown } from "../types";
+import type { ScoreBreakdown } from '../types'
 
 /**
  * Calculate Longest Common Subsequence length
  * Measures how many cards are in correct relative order
  */
-export function longestCommonSubsequence(
-  seq1: number[],
-  seq2: number[],
-): number {
-  const m = seq1.length;
-  const n = seq2.length;
+export function longestCommonSubsequence(seq1: number[], seq2: number[]): number {
+  const m = seq1.length
+  const n = seq2.length
   const dp: number[][] = Array(m + 1)
     .fill(0)
-    .map(() => Array(n + 1).fill(0));
+    .map(() => Array(n + 1).fill(0))
 
   for (let i = 1; i <= m; i++) {
     for (let j = 1; j <= n; j++) {
       if (seq1[i - 1] === seq2[j - 1]) {
-        dp[i][j] = dp[i - 1][j - 1] + 1;
+        dp[i][j] = dp[i - 1][j - 1] + 1
       } else {
-        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1])
       }
     }
   }
 
-  return dp[m][n];
+  return dp[m][n]
 }
 
 /**
  * Count inversions (out-of-order pairs)
  * Measures how scrambled the sequence is
  */
-export function countInversions(
-  userSeq: number[],
-  correctSeq: number[],
-): number {
+export function countInversions(userSeq: number[], correctSeq: number[]): number {
   // Create mapping from value to correct position
-  const correctPositions: Record<number, number> = {};
+  const correctPositions: Record<number, number> = {}
   for (let idx = 0; idx < correctSeq.length; idx++) {
-    correctPositions[correctSeq[idx]] = idx;
+    correctPositions[correctSeq[idx]] = idx
   }
 
   // Convert user sequence to correct-position sequence
-  const userCorrectPositions = userSeq.map((val) => correctPositions[val]);
+  const userCorrectPositions = userSeq.map((val) => correctPositions[val])
 
   // Count inversions
-  let inversions = 0;
+  let inversions = 0
   for (let i = 0; i < userCorrectPositions.length; i++) {
     for (let j = i + 1; j < userCorrectPositions.length; j++) {
       if (userCorrectPositions[i] > userCorrectPositions[j]) {
-        inversions++;
+        inversions++
       }
     }
   }
 
-  return inversions;
+  return inversions
 }
 
 /**
@@ -63,37 +57,33 @@ export function countInversions(
 export function calculateScore(
   userSequence: number[],
   correctSequence: number[],
-  startTime: number,
+  startTime: number
 ): ScoreBreakdown {
   // LCS-based score (relative order)
-  const lcsLength = longestCommonSubsequence(userSequence, correctSequence);
-  const relativeOrderScore = (lcsLength / correctSequence.length) * 100;
+  const lcsLength = longestCommonSubsequence(userSequence, correctSequence)
+  const relativeOrderScore = (lcsLength / correctSequence.length) * 100
 
   // Exact position matches
-  let exactMatches = 0;
+  let exactMatches = 0
   for (let i = 0; i < userSequence.length; i++) {
     if (userSequence[i] === correctSequence[i]) {
-      exactMatches++;
+      exactMatches++
     }
   }
-  const exactPositionScore = (exactMatches / correctSequence.length) * 100;
+  const exactPositionScore = (exactMatches / correctSequence.length) * 100
 
   // Inversion-based score (organization)
-  const inversions = countInversions(userSequence, correctSequence);
-  const maxInversions =
-    (correctSequence.length * (correctSequence.length - 1)) / 2;
-  const inversionScore = Math.max(
-    0,
-    ((maxInversions - inversions) / maxInversions) * 100,
-  );
+  const inversions = countInversions(userSequence, correctSequence)
+  const maxInversions = (correctSequence.length * (correctSequence.length - 1)) / 2
+  const inversionScore = Math.max(0, ((maxInversions - inversions) / maxInversions) * 100)
 
   // Weighted final score
   // - 50% for relative order (LCS)
   // - 30% for exact positions
   // - 20% for organization (inversions)
   const finalScore = Math.round(
-    relativeOrderScore * 0.5 + exactPositionScore * 0.3 + inversionScore * 0.2,
-  );
+    relativeOrderScore * 0.5 + exactPositionScore * 0.3 + inversionScore * 0.2
+  )
 
   return {
     finalScore,
@@ -104,5 +94,5 @@ export function calculateScore(
     exactPositionScore: Math.round(exactPositionScore),
     inversionScore: Math.round(inversionScore),
     elapsedTime: Math.floor((Date.now() - startTime) / 1000),
-  };
+  }
 }
diff --git a/apps/web/src/arcade-games/card-sorting/utils/validation.ts b/apps/web/src/arcade-games/card-sorting/utils/validation.ts
index e28a7916..38af8827 100644
--- a/apps/web/src/arcade-games/card-sorting/utils/validation.ts
+++ b/apps/web/src/arcade-games/card-sorting/utils/validation.ts
@@ -1,4 +1,4 @@
-import type { SortingCard } from "../types";
+import type { SortingCard } from '../types'
 
 /**
  * Place a card at a specific position (simple replacement, can leave gaps)
@@ -8,12 +8,12 @@ import type { SortingCard } from "../types";
 export function placeCardAtPosition(
   placedCards: (SortingCard | null)[],
   cardToPlace: SortingCard,
-  position: number,
+  position: number
 ): { placedCards: (SortingCard | null)[]; replacedCard: SortingCard | null } {
-  const newPlaced = [...placedCards];
-  const replacedCard = newPlaced[position];
-  newPlaced[position] = cardToPlace;
-  return { placedCards: newPlaced, replacedCard };
+  const newPlaced = [...placedCards]
+  const replacedCard = newPlaced[position]
+  newPlaced[position] = cardToPlace
+  return { placedCards: newPlaced, replacedCard }
 }
 
 /**
@@ -25,50 +25,50 @@ export function insertCardAtPosition(
   placedCards: (SortingCard | null)[],
   cardToPlace: SortingCard,
   insertPosition: number,
-  totalSlots: number,
+  totalSlots: number
 ): { placedCards: (SortingCard | null)[]; excessCards: SortingCard[] } {
   // Create working array
-  const newPlaced = new Array(totalSlots).fill(null);
+  const newPlaced = new Array(totalSlots).fill(null)
 
   // Copy existing cards, shifting those at/after position
   for (let i = 0; i < placedCards.length; i++) {
     if (placedCards[i] !== null) {
       if (i < insertPosition) {
         // Before insert position - stays same
-        newPlaced[i] = placedCards[i];
+        newPlaced[i] = placedCards[i]
       } else {
         // At or after position - shift right
         if (i + 1 < totalSlots) {
-          newPlaced[i + 1] = placedCards[i];
+          newPlaced[i + 1] = placedCards[i]
         } else {
           // Card would fall off, will be handled by compaction
-          newPlaced[i + 1] = placedCards[i];
+          newPlaced[i + 1] = placedCards[i]
         }
       }
     }
   }
 
   // Place new card at insert position
-  newPlaced[insertPosition] = cardToPlace;
+  newPlaced[insertPosition] = cardToPlace
 
   // Compact to remove gaps (shift all cards left)
-  const compacted: SortingCard[] = [];
+  const compacted: SortingCard[] = []
   for (const card of newPlaced) {
     if (card !== null) {
-      compacted.push(card);
+      compacted.push(card)
     }
   }
 
   // Fill final array with compacted cards (no gaps)
-  const result = new Array(totalSlots).fill(null);
+  const result = new Array(totalSlots).fill(null)
   for (let i = 0; i < Math.min(compacted.length, totalSlots); i++) {
-    result[i] = compacted[i];
+    result[i] = compacted[i]
   }
 
   // Any excess cards are returned
-  const excess = compacted.slice(totalSlots);
+  const excess = compacted.slice(totalSlots)
 
-  return { placedCards: result, excessCards: excess };
+  return { placedCards: result, excessCards: excess }
 }
 
 /**
@@ -76,27 +76,27 @@ export function insertCardAtPosition(
  */
 export function removeCardAtPosition(
   placedCards: (SortingCard | null)[],
-  position: number,
+  position: number
 ): { placedCards: (SortingCard | null)[]; removedCard: SortingCard | null } {
-  const removedCard = placedCards[position];
+  const removedCard = placedCards[position]
 
   if (!removedCard) {
-    return { placedCards, removedCard: null };
+    return { placedCards, removedCard: null }
   }
 
   // Remove card and compact
-  const compacted: SortingCard[] = [];
+  const compacted: SortingCard[] = []
   for (let i = 0; i < placedCards.length; i++) {
     if (i !== position && placedCards[i] !== null) {
-      compacted.push(placedCards[i] as SortingCard);
+      compacted.push(placedCards[i] as SortingCard)
     }
   }
 
   // Fill new array
-  const newPlaced = new Array(placedCards.length).fill(null);
+  const newPlaced = new Array(placedCards.length).fill(null)
   for (let i = 0; i < compacted.length; i++) {
-    newPlaced[i] = compacted[i];
+    newPlaced[i] = compacted[i]
   }
 
-  return { placedCards: newPlaced, removedCard };
+  return { placedCards: newPlaced, removedCard }
 }
diff --git a/apps/web/src/arcade-games/complement-race/Provider.tsx b/apps/web/src/arcade-games/complement-race/Provider.tsx
index bde9efd7..f5993941 100644
--- a/apps/web/src/arcade-games/complement-race/Provider.tsx
+++ b/apps/web/src/arcade-games/complement-race/Provider.tsx
@@ -3,7 +3,7 @@
  * Manages multiplayer game state using the Arcade SDK
  */
 
-"use client";
+'use client'
 
 import {
   createContext,
@@ -14,7 +14,7 @@ import {
   useRef,
   useState,
   type ReactNode,
-} from "react";
+} from 'react'
 import {
   type GameMove,
   buildPlayerMetadata,
@@ -23,14 +23,10 @@ import {
   useRoomData,
   useUpdateGameConfig,
   useViewerId,
-} from "@/lib/arcade/game-sdk";
-import { DEFAULT_COMPLEMENT_RACE_CONFIG } from "@/lib/arcade/game-configs";
-import type { DifficultyTracker } from "@/app/arcade/complement-race/lib/gameTypes";
-import type {
-  ComplementRaceConfig,
-  ComplementRaceMove,
-  ComplementRaceState,
-} from "./types";
+} from '@/lib/arcade/game-sdk'
+import { DEFAULT_COMPLEMENT_RACE_CONFIG } from '@/lib/arcade/game-configs'
+import type { DifficultyTracker } from '@/app/arcade/complement-race/lib/gameTypes'
+import type { ComplementRaceConfig, ComplementRaceMove, ComplementRaceState } from './types'
 
 /**
  * Compatible state shape that matches the old single-player GameState interface
@@ -38,177 +34,168 @@ import type {
  */
 interface CompatibleGameState {
   // Game configuration (extracted from config object)
-  mode: string;
-  style: string;
-  timeoutSetting: string;
-  complementDisplay: string;
-  maxConcurrentPassengers: number;
+  mode: string
+  style: string
+  timeoutSetting: string
+  complementDisplay: string
+  maxConcurrentPassengers: number
 
   // Current question (extracted from currentQuestions[localPlayerId])
-  currentQuestion: any | null;
-  previousQuestion: any | null;
+  currentQuestion: any | null
+  previousQuestion: any | null
 
   // Game progress (extracted from players[localPlayerId])
-  score: number;
-  streak: number;
-  bestStreak: number;
-  totalQuestions: number;
-  correctAnswers: number;
+  score: number
+  streak: number
+  bestStreak: number
+  totalQuestions: number
+  correctAnswers: number
 
   // Game status
-  isGameActive: boolean;
-  isPaused: boolean;
-  gamePhase: "intro" | "controls" | "countdown" | "playing" | "results";
+  isGameActive: boolean
+  isPaused: boolean
+  gamePhase: 'intro' | 'controls' | 'countdown' | 'playing' | 'results'
 
   // Timing
-  gameStartTime: number | null;
-  questionStartTime: number;
+  gameStartTime: number | null
+  questionStartTime: number
 
   // Race mechanics (extracted from players[localPlayerId] and config)
-  raceGoal: number;
-  timeLimit: number | null;
-  speedMultiplier: number;
-  aiRacers: any[];
+  raceGoal: number
+  timeLimit: number | null
+  speedMultiplier: number
+  aiRacers: any[]
 
   // Sprint mode specific (extracted from players[localPlayerId])
-  momentum: number;
-  trainPosition: number;
-  pressure: number;
-  elapsedTime: number;
-  lastCorrectAnswerTime: number;
-  currentRoute: number;
-  stations: any[];
-  passengers: any[];
-  deliveredPassengers: number;
-  cumulativeDistance: number;
-  showRouteCelebration: boolean;
+  momentum: number
+  trainPosition: number
+  pressure: number
+  elapsedTime: number
+  lastCorrectAnswerTime: number
+  currentRoute: number
+  stations: any[]
+  passengers: any[]
+  deliveredPassengers: number
+  cumulativeDistance: number
+  showRouteCelebration: boolean
 
   // Survival mode specific
-  playerLap: number;
-  aiLaps: Map<string, number>;
-  survivalMultiplier: number;
+  playerLap: number
+  aiLaps: Map<string, number>
+  survivalMultiplier: number
 
   // Input (local UI state)
-  currentInput: string;
+  currentInput: string
 
   // UI state
-  showScoreModal: boolean;
-  activeSpeechBubbles: Map<string, string>;
-  adaptiveFeedback: { message: string; type: string } | null;
-  difficultyTracker: DifficultyTracker;
+  showScoreModal: boolean
+  activeSpeechBubbles: Map<string, string>
+  adaptiveFeedback: { message: string; type: string } | null
+  difficultyTracker: DifficultyTracker
 }
 
 /**
  * Context value interface
  */
 interface ComplementRaceContextValue {
-  state: CompatibleGameState; // Return adapted state
-  multiplayerState: ComplementRaceState; // Raw multiplayer state for rendering other players
-  localPlayerId: string | undefined; // Local player ID for filtering
-  dispatch: (action: { type: string; [key: string]: any }) => void; // Compatibility layer
-  lastError: string | null;
-  startGame: () => void;
-  submitAnswer: (answer: number, responseTime: number) => void;
-  claimPassenger: (passengerId: string, carIndex: number) => void;
-  deliverPassenger: (passengerId: string) => void;
-  nextQuestion: () => void;
-  endGame: () => void;
-  playAgain: () => void;
-  goToSetup: () => void;
-  setConfig: (field: keyof ComplementRaceConfig, value: unknown) => void;
-  clearError: () => void;
-  exitSession: () => void;
-  boostMomentum: (correct: boolean) => void; // Client-side momentum boost/reduce
+  state: CompatibleGameState // Return adapted state
+  multiplayerState: ComplementRaceState // Raw multiplayer state for rendering other players
+  localPlayerId: string | undefined // Local player ID for filtering
+  dispatch: (action: { type: string; [key: string]: any }) => void // Compatibility layer
+  lastError: string | null
+  startGame: () => void
+  submitAnswer: (answer: number, responseTime: number) => void
+  claimPassenger: (passengerId: string, carIndex: number) => void
+  deliverPassenger: (passengerId: string) => void
+  nextQuestion: () => void
+  endGame: () => void
+  playAgain: () => void
+  goToSetup: () => void
+  setConfig: (field: keyof ComplementRaceConfig, value: unknown) => void
+  clearError: () => void
+  exitSession: () => void
+  boostMomentum: (correct: boolean) => void // Client-side momentum boost/reduce
 }
 
-const ComplementRaceContext = createContext<ComplementRaceContextValue | null>(
-  null,
-);
+const ComplementRaceContext = createContext<ComplementRaceContextValue | null>(null)
 
 /**
  * Hook to access Complement Race context
  */
 export function useComplementRace() {
-  const context = useContext(ComplementRaceContext);
+  const context = useContext(ComplementRaceContext)
   if (!context) {
-    throw new Error(
-      "useComplementRace must be used within ComplementRaceProvider",
-    );
+    throw new Error('useComplementRace must be used within ComplementRaceProvider')
   }
-  return context;
+  return context
 }
 
 /**
  * Optimistic move application (client-side prediction)
  * Apply moves immediately on client for responsive UI, server will confirm or reject
  */
-function applyMoveOptimistically(
-  state: ComplementRaceState,
-  move: GameMove,
-): ComplementRaceState {
-  const typedMove = move as ComplementRaceMove;
+function applyMoveOptimistically(state: ComplementRaceState, move: GameMove): ComplementRaceState {
+  const typedMove = move as ComplementRaceMove
 
   switch (typedMove.type) {
-    case "CLAIM_PASSENGER": {
+    case 'CLAIM_PASSENGER': {
       // Optimistically mark passenger as claimed and assign to car
-      const passengerId = typedMove.data.passengerId;
-      const carIndex = typedMove.data.carIndex;
+      const passengerId = typedMove.data.passengerId
+      const carIndex = typedMove.data.carIndex
       const updatedPassengers = state.passengers.map((p) =>
-        p.id === passengerId
-          ? { ...p, claimedBy: typedMove.playerId, carIndex }
-          : p,
-      );
+        p.id === passengerId ? { ...p, claimedBy: typedMove.playerId, carIndex } : p
+      )
 
       // Optimistically add to player's passenger list
-      const updatedPlayers = { ...state.players };
-      const player = updatedPlayers[typedMove.playerId];
+      const updatedPlayers = { ...state.players }
+      const player = updatedPlayers[typedMove.playerId]
       if (player) {
         updatedPlayers[typedMove.playerId] = {
           ...player,
           passengers: [...player.passengers, passengerId],
-        };
+        }
       }
 
       return {
         ...state,
         passengers: updatedPassengers,
         players: updatedPlayers,
-      };
+      }
     }
 
-    case "DELIVER_PASSENGER": {
+    case 'DELIVER_PASSENGER': {
       // Optimistically mark passenger as delivered and award points
-      const passengerId = typedMove.data.passengerId;
-      const passenger = state.passengers.find((p) => p.id === passengerId);
-      if (!passenger) return state;
+      const passengerId = typedMove.data.passengerId
+      const passenger = state.passengers.find((p) => p.id === passengerId)
+      if (!passenger) return state
 
-      const points = passenger.isUrgent ? 20 : 10;
+      const points = passenger.isUrgent ? 20 : 10
       const updatedPassengers = state.passengers.map((p) =>
-        p.id === passengerId ? { ...p, deliveredBy: typedMove.playerId } : p,
-      );
+        p.id === passengerId ? { ...p, deliveredBy: typedMove.playerId } : p
+      )
 
       // Optimistically remove from player's passenger list and update score
-      const updatedPlayers = { ...state.players };
-      const player = updatedPlayers[typedMove.playerId];
+      const updatedPlayers = { ...state.players }
+      const player = updatedPlayers[typedMove.playerId]
       if (player) {
         updatedPlayers[typedMove.playerId] = {
           ...player,
           passengers: player.passengers.filter((id) => id !== passengerId),
           deliveredPassengers: player.deliveredPassengers + 1,
           score: player.score + points,
-        };
+        }
       }
 
       return {
         ...state,
         passengers: updatedPassengers,
         players: updatedPlayers,
-      };
+      }
     }
 
     default:
       // For other moves, rely on server validation
-      return state;
+      return state
   }
 }
 
@@ -216,72 +203,54 @@ function applyMoveOptimistically(
  * Complement Race Provider Component
  */
 export function ComplementRaceProvider({ children }: { children: ReactNode }) {
-  const { data: viewerId } = useViewerId();
-  const { roomData } = useRoomData();
-  const { activePlayers: activePlayerIds, players } = useGameMode();
-  const { mutate: updateGameConfig } = useUpdateGameConfig();
+  const { data: viewerId } = useViewerId()
+  const { roomData } = useRoomData()
+  const { activePlayers: activePlayerIds, players } = useGameMode()
+  const { mutate: updateGameConfig } = useUpdateGameConfig()
 
   // Get active players as array
-  const activePlayers = Array.from(activePlayerIds);
+  const activePlayers = Array.from(activePlayerIds)
 
   // Merge saved config from room with defaults
   const initialState = useMemo((): ComplementRaceState => {
-    const gameConfig = roomData?.gameConfig as
-      | Record<string, unknown>
-      | null
-      | undefined;
-    const savedConfig = gameConfig?.["complement-race"] as
-      | Partial<ComplementRaceConfig>
-      | undefined;
+    const gameConfig = roomData?.gameConfig as Record<string, unknown> | null | undefined
+    const savedConfig = gameConfig?.['complement-race'] as Partial<ComplementRaceConfig> | undefined
 
     const config: ComplementRaceConfig = {
       style:
-        (savedConfig?.style as ComplementRaceConfig["style"]) ||
+        (savedConfig?.style as ComplementRaceConfig['style']) ||
         DEFAULT_COMPLEMENT_RACE_CONFIG.style,
       mode:
-        (savedConfig?.mode as ComplementRaceConfig["mode"]) ||
-        DEFAULT_COMPLEMENT_RACE_CONFIG.mode,
+        (savedConfig?.mode as ComplementRaceConfig['mode']) || DEFAULT_COMPLEMENT_RACE_CONFIG.mode,
       complementDisplay:
-        (savedConfig?.complementDisplay as ComplementRaceConfig["complementDisplay"]) ||
+        (savedConfig?.complementDisplay as ComplementRaceConfig['complementDisplay']) ||
         DEFAULT_COMPLEMENT_RACE_CONFIG.complementDisplay,
       timeoutSetting:
-        (savedConfig?.timeoutSetting as ComplementRaceConfig["timeoutSetting"]) ||
+        (savedConfig?.timeoutSetting as ComplementRaceConfig['timeoutSetting']) ||
         DEFAULT_COMPLEMENT_RACE_CONFIG.timeoutSetting,
-      enableAI:
-        savedConfig?.enableAI ?? DEFAULT_COMPLEMENT_RACE_CONFIG.enableAI,
+      enableAI: savedConfig?.enableAI ?? DEFAULT_COMPLEMENT_RACE_CONFIG.enableAI,
       aiOpponentCount:
-        savedConfig?.aiOpponentCount ??
-        DEFAULT_COMPLEMENT_RACE_CONFIG.aiOpponentCount,
-      maxPlayers:
-        savedConfig?.maxPlayers ?? DEFAULT_COMPLEMENT_RACE_CONFIG.maxPlayers,
-      routeDuration:
-        savedConfig?.routeDuration ??
-        DEFAULT_COMPLEMENT_RACE_CONFIG.routeDuration,
+        savedConfig?.aiOpponentCount ?? DEFAULT_COMPLEMENT_RACE_CONFIG.aiOpponentCount,
+      maxPlayers: savedConfig?.maxPlayers ?? DEFAULT_COMPLEMENT_RACE_CONFIG.maxPlayers,
+      routeDuration: savedConfig?.routeDuration ?? DEFAULT_COMPLEMENT_RACE_CONFIG.routeDuration,
       enablePassengers:
-        savedConfig?.enablePassengers ??
-        DEFAULT_COMPLEMENT_RACE_CONFIG.enablePassengers,
-      passengerCount:
-        savedConfig?.passengerCount ??
-        DEFAULT_COMPLEMENT_RACE_CONFIG.passengerCount,
+        savedConfig?.enablePassengers ?? DEFAULT_COMPLEMENT_RACE_CONFIG.enablePassengers,
+      passengerCount: savedConfig?.passengerCount ?? DEFAULT_COMPLEMENT_RACE_CONFIG.passengerCount,
       maxConcurrentPassengers:
         savedConfig?.maxConcurrentPassengers ??
         DEFAULT_COMPLEMENT_RACE_CONFIG.maxConcurrentPassengers,
-      raceGoal:
-        savedConfig?.raceGoal ?? DEFAULT_COMPLEMENT_RACE_CONFIG.raceGoal,
+      raceGoal: savedConfig?.raceGoal ?? DEFAULT_COMPLEMENT_RACE_CONFIG.raceGoal,
       winCondition:
-        (savedConfig?.winCondition as ComplementRaceConfig["winCondition"]) ||
+        (savedConfig?.winCondition as ComplementRaceConfig['winCondition']) ||
         DEFAULT_COMPLEMENT_RACE_CONFIG.winCondition,
-      targetScore:
-        savedConfig?.targetScore ?? DEFAULT_COMPLEMENT_RACE_CONFIG.targetScore,
-      timeLimit:
-        savedConfig?.timeLimit ?? DEFAULT_COMPLEMENT_RACE_CONFIG.timeLimit,
-      routeCount:
-        savedConfig?.routeCount ?? DEFAULT_COMPLEMENT_RACE_CONFIG.routeCount,
-    };
+      targetScore: savedConfig?.targetScore ?? DEFAULT_COMPLEMENT_RACE_CONFIG.targetScore,
+      timeLimit: savedConfig?.timeLimit ?? DEFAULT_COMPLEMENT_RACE_CONFIG.timeLimit,
+      routeCount: savedConfig?.routeCount ?? DEFAULT_COMPLEMENT_RACE_CONFIG.routeCount,
+    }
 
     return {
       config,
-      gamePhase: "setup",
+      gamePhase: 'setup',
       activePlayers: [],
       playerMetadata: {},
       players: {},
@@ -298,8 +267,8 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
       aiOpponents: [],
       gameStartTime: null,
       gameEndTime: null,
-    };
-  }, [roomData?.gameConfig]);
+    }
+  }, [roomData?.gameConfig])
 
   // Arcade session integration
   const {
@@ -309,15 +278,15 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
     lastError,
     clearError,
   } = useArcadeSession<ComplementRaceState>({
-    userId: viewerId || "",
+    userId: viewerId || '',
     roomId: roomData?.id,
     initialState,
     applyMove: applyMoveOptimistically,
-  });
+  })
 
   // Local UI state (not synced to server)
   const [localUIState, setLocalUIState] = useState({
-    currentInput: "",
+    currentInput: '',
     previousQuestion: null as any,
     isPaused: false,
     showScoreModal: false,
@@ -333,54 +302,54 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
       learningMode: true,
       adaptationRate: 0.1,
     },
-  });
+  })
 
   // Get local player ID
   const localPlayerId = useMemo(() => {
     const foundId = activePlayers.find((id) => {
-      const player = players.get(id);
-      return player?.isLocal;
-    });
-    return foundId;
-  }, [activePlayers, players]);
+      const player = players.get(id)
+      return player?.isLocal
+    })
+    return foundId
+  }, [activePlayers, players])
 
   // Client-side game state (NOT synced to server - purely visual/gameplay)
-  const [clientMomentum, setClientMomentum] = useState(10); // Start at 10 for gentle push
-  const [clientPosition, setClientPosition] = useState(0);
-  const [clientPressure, setClientPressure] = useState(0);
+  const [clientMomentum, setClientMomentum] = useState(10) // Start at 10 for gentle push
+  const [clientPosition, setClientPosition] = useState(0)
+  const [clientPressure, setClientPressure] = useState(0)
 
   // Track if we've synced position from server (for reconnect/reload scenarios)
-  const hasInitializedPositionRef = useRef(false);
+  const hasInitializedPositionRef = useRef(false)
 
   // Ref to track latest position for broadcasting (avoids recreating interval on every position change)
-  const clientPositionRef = useRef(clientPosition);
+  const clientPositionRef = useRef(clientPosition)
 
   // Refs for throttled logging
-  const lastBroadcastLogRef = useRef({ position: 0, time: 0 });
-  const broadcastCountRef = useRef(0);
-  const lastReceivedPositionsRef = useRef<Record<string, number>>({});
+  const lastBroadcastLogRef = useRef({ position: 0, time: 0 })
+  const broadcastCountRef = useRef(0)
+  const lastReceivedPositionsRef = useRef<Record<string, number>>({})
 
   // Ref to hold sendMove so interval doesn't restart when sendMove changes
-  const sendMoveRef = useRef(sendMove);
+  const sendMoveRef = useRef(sendMove)
   useEffect(() => {
-    sendMoveRef.current = sendMove;
-  }, [sendMove]);
+    sendMoveRef.current = sendMove
+  }, [sendMove])
 
   const [clientAIRacers, setClientAIRacers] = useState<
     Array<{
-      id: string;
-      name: string;
-      position: number;
-      speed: number;
-      personality: "competitive" | "analytical";
-      icon: string;
-      lastComment: number;
-      commentCooldown: number;
-      previousPosition: number;
+      id: string
+      name: string
+      position: number
+      speed: number
+      personality: 'competitive' | 'analytical'
+      icon: string
+      lastComment: number
+      commentCooldown: number
+      previousPosition: number
     }>
-  >([]);
-  const lastUpdateRef = useRef(Date.now());
-  const gameStartTimeRef = useRef(0);
+  >([])
+  const lastUpdateRef = useRef(Date.now())
+  const gameStartTimeRef = useRef(0)
 
   // Decay rates based on skill level (momentum lost per second)
   const MOMENTUM_DECAY_RATES = {
@@ -391,34 +360,29 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
     normal: 9.0,
     fast: 11.0,
     expert: 13.0,
-  };
+  }
 
-  const MOMENTUM_GAIN_PER_CORRECT = 15;
-  const MOMENTUM_LOSS_PER_WRONG = 10;
-  const SPEED_MULTIPLIER = 0.15; // momentum * 0.15 = % per second
-  const UPDATE_INTERVAL = 50; // 50ms = ~20fps
+  const MOMENTUM_GAIN_PER_CORRECT = 15
+  const MOMENTUM_LOSS_PER_WRONG = 10
+  const SPEED_MULTIPLIER = 0.15 // momentum * 0.15 = % per second
+  const UPDATE_INTERVAL = 50 // 50ms = ~20fps
 
   // Transform multiplayer state to look like single-player state
   const compatibleState = useMemo((): CompatibleGameState => {
-    const localPlayer = localPlayerId
-      ? multiplayerState.players[localPlayerId]
-      : null;
+    const localPlayer = localPlayerId ? multiplayerState.players[localPlayerId] : null
 
     // Map gamePhase: setup/lobby -> controls
-    let gamePhase: "intro" | "controls" | "countdown" | "playing" | "results";
-    if (
-      multiplayerState.gamePhase === "setup" ||
-      multiplayerState.gamePhase === "lobby"
-    ) {
-      gamePhase = "controls";
-    } else if (multiplayerState.gamePhase === "countdown") {
-      gamePhase = "countdown";
-    } else if (multiplayerState.gamePhase === "playing") {
-      gamePhase = "playing";
-    } else if (multiplayerState.gamePhase === "results") {
-      gamePhase = "results";
+    let gamePhase: 'intro' | 'controls' | 'countdown' | 'playing' | 'results'
+    if (multiplayerState.gamePhase === 'setup' || multiplayerState.gamePhase === 'lobby') {
+      gamePhase = 'controls'
+    } else if (multiplayerState.gamePhase === 'countdown') {
+      gamePhase = 'countdown'
+    } else if (multiplayerState.gamePhase === 'playing') {
+      gamePhase = 'playing'
+    } else if (multiplayerState.gamePhase === 'results') {
+      gamePhase = 'results'
     } else {
-      gamePhase = "controls";
+      gamePhase = 'controls'
     }
 
     return {
@@ -443,7 +407,7 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
       correctAnswers: localPlayer?.correctAnswers || 0,
 
       // Game status
-      isGameActive: gamePhase === "playing",
+      isGameActive: gamePhase === 'playing',
       isPaused: localUIState.isPaused,
       gamePhase,
 
@@ -455,9 +419,9 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
       raceGoal: multiplayerState.config.raceGoal,
       timeLimit: multiplayerState.config.timeLimit ?? null,
       speedMultiplier:
-        multiplayerState.config.style === "practice"
+        multiplayerState.config.style === 'practice'
           ? 0.7
-          : multiplayerState.config.style === "sprint"
+          : multiplayerState.config.style === 'sprint'
             ? 0.9
             : 1.0, // Base speed multipliers by mode
       aiRacers: clientAIRacers, // Use client-side AI state
@@ -466,9 +430,7 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
       momentum: clientMomentum, // Client-only state with continuous decay
       trainPosition: clientPosition, // Client-calculated from momentum
       pressure: clientPressure, // Client-calculated from momentum (0-150 PSI)
-      elapsedTime: multiplayerState.gameStartTime
-        ? Date.now() - multiplayerState.gameStartTime
-        : 0,
+      elapsedTime: multiplayerState.gameStartTime ? Date.now() - multiplayerState.gameStartTime : 0,
       lastCorrectAnswerTime: localPlayer?.lastAnswerTime || Date.now(),
       currentRoute: multiplayerState.currentRoute,
       stations: multiplayerState.stations,
@@ -488,7 +450,7 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
       activeSpeechBubbles: localUIState.activeSpeechBubbles,
       adaptiveFeedback: localUIState.adaptiveFeedback,
       difficultyTracker: localUIState.difficultyTracker,
-    };
+    }
   }, [
     multiplayerState,
     localPlayerId,
@@ -497,7 +459,7 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
     clientPressure,
     clientMomentum,
     clientAIRacers,
-  ]);
+  ])
 
   // Sync client position from server on reconnect/reload (multiplayer only)
   useEffect(() => {
@@ -508,134 +470,122 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
     // 4. We have a local player with a position from server
     if (
       !hasInitializedPositionRef.current &&
-      multiplayerState.gamePhase === "playing" &&
-      multiplayerState.config.style === "sprint" &&
+      multiplayerState.gamePhase === 'playing' &&
+      multiplayerState.config.style === 'sprint' &&
       localPlayerId
     ) {
-      const serverPosition = multiplayerState.players[localPlayerId]?.position;
+      const serverPosition = multiplayerState.players[localPlayerId]?.position
       if (serverPosition !== undefined && serverPosition > 0) {
-        console.log(
-          `[POSITION_SYNC] Restoring position from server: ${serverPosition.toFixed(1)}%`,
-        );
-        setClientPosition(serverPosition);
-        hasInitializedPositionRef.current = true;
+        console.log(`[POSITION_SYNC] Restoring position from server: ${serverPosition.toFixed(1)}%`)
+        setClientPosition(serverPosition)
+        hasInitializedPositionRef.current = true
       }
     }
 
     // Reset sync flag when game ends
-    if (multiplayerState.gamePhase !== "playing") {
-      hasInitializedPositionRef.current = false;
+    if (multiplayerState.gamePhase !== 'playing') {
+      hasInitializedPositionRef.current = false
     }
   }, [
     multiplayerState.gamePhase,
     multiplayerState.config.style,
     multiplayerState.players,
     localPlayerId,
-  ]);
+  ])
 
   // Initialize game start time when game becomes active
   useEffect(() => {
-    if (compatibleState.isGameActive && compatibleState.style === "sprint") {
+    if (compatibleState.isGameActive && compatibleState.style === 'sprint') {
       if (gameStartTimeRef.current === 0) {
-        gameStartTimeRef.current = Date.now();
-        lastUpdateRef.current = Date.now();
+        gameStartTimeRef.current = Date.now()
+        lastUpdateRef.current = Date.now()
         // Reset client state for new game (only if not restored from server)
         if (!hasInitializedPositionRef.current) {
-          setClientMomentum(10); // Start with gentle push
-          setClientPosition(0);
-          setClientPressure((10 / 100) * 150); // Initial pressure from starting momentum
+          setClientMomentum(10) // Start with gentle push
+          setClientPosition(0)
+          setClientPressure((10 / 100) * 150) // Initial pressure from starting momentum
         }
       }
     } else {
       // Reset when game ends
-      gameStartTimeRef.current = 0;
+      gameStartTimeRef.current = 0
     }
-  }, [compatibleState.isGameActive, compatibleState.style]);
+  }, [compatibleState.isGameActive, compatibleState.style])
 
   // Initialize AI racers when game starts
   useEffect(() => {
     if (compatibleState.isGameActive && multiplayerState.config.enableAI) {
-      const count = multiplayerState.config.aiOpponentCount;
+      const count = multiplayerState.config.aiOpponentCount
       if (count > 0 && clientAIRacers.length === 0) {
-        const aiNames = ["Swift AI", "Math Bot", "Speed Demon", "Brain Bot"];
-        const personalities: Array<"competitive" | "analytical"> = [
-          "competitive",
-          "analytical",
-        ];
+        const aiNames = ['Swift AI', 'Math Bot', 'Speed Demon', 'Brain Bot']
+        const personalities: Array<'competitive' | 'analytical'> = ['competitive', 'analytical']
 
-        const newAI = [];
+        const newAI = []
         for (let i = 0; i < Math.min(count, aiNames.length); i++) {
           // Use original balanced speeds: 0.32 for Swift AI, 0.2 for Math Bot
-          const baseSpeed = i === 0 ? 0.32 : 0.2;
+          const baseSpeed = i === 0 ? 0.32 : 0.2
           newAI.push({
             id: `ai-${i}`,
             name: aiNames[i],
-            personality: personalities[i % personalities.length] as
-              | "competitive"
-              | "analytical",
+            personality: personalities[i % personalities.length] as 'competitive' | 'analytical',
             position: 0,
             speed: baseSpeed, // Balanced speed from original single-player version
-            icon:
-              personalities[i % personalities.length] === "competitive"
-                ? "🏃‍♂️"
-                : "🏃",
+            icon: personalities[i % personalities.length] === 'competitive' ? '🏃‍♂️' : '🏃',
             lastComment: 0,
             commentCooldown: 0,
             previousPosition: 0,
-          });
+          })
         }
-        setClientAIRacers(newAI);
+        setClientAIRacers(newAI)
       }
     } else if (!compatibleState.isGameActive) {
       // Clear AI when game ends
-      setClientAIRacers([]);
+      setClientAIRacers([])
     }
   }, [
     compatibleState.isGameActive,
     multiplayerState.config.enableAI,
     multiplayerState.config.aiOpponentCount,
     clientAIRacers.length,
-  ]);
+  ])
 
   // Main client-side game loop: momentum decay and position calculation
   useEffect(() => {
-    if (!compatibleState.isGameActive || compatibleState.style !== "sprint")
-      return;
+    if (!compatibleState.isGameActive || compatibleState.style !== 'sprint') return
 
     const interval = setInterval(() => {
-      const now = Date.now();
-      const deltaTime = now - lastUpdateRef.current;
-      lastUpdateRef.current = now;
+      const now = Date.now()
+      const deltaTime = now - lastUpdateRef.current
+      lastUpdateRef.current = now
 
       // Get decay rate based on skill level
       const decayRate =
-        MOMENTUM_DECAY_RATES[
-          compatibleState.timeoutSetting as keyof typeof MOMENTUM_DECAY_RATES
-        ] || MOMENTUM_DECAY_RATES.normal;
+        MOMENTUM_DECAY_RATES[compatibleState.timeoutSetting as keyof typeof MOMENTUM_DECAY_RATES] ||
+        MOMENTUM_DECAY_RATES.normal
 
       setClientMomentum((prevMomentum) => {
         // Calculate momentum decay for this frame
-        const momentumLoss = (decayRate * deltaTime) / 1000;
+        const momentumLoss = (decayRate * deltaTime) / 1000
 
         // Update momentum (don't go below 0)
-        const newMomentum = Math.max(0, prevMomentum - momentumLoss);
+        const newMomentum = Math.max(0, prevMomentum - momentumLoss)
 
         // Calculate speed from momentum (% per second)
-        const speed = newMomentum * SPEED_MULTIPLIER;
+        const speed = newMomentum * SPEED_MULTIPLIER
 
         // Update position (accumulate, never go backward)
-        const positionDelta = (speed * deltaTime) / 1000;
-        setClientPosition((prev) => prev + positionDelta);
+        const positionDelta = (speed * deltaTime) / 1000
+        setClientPosition((prev) => prev + positionDelta)
 
         // Calculate pressure (0-150 PSI)
-        const pressure = Math.min(150, (newMomentum / 100) * 150);
-        setClientPressure(pressure);
+        const pressure = Math.min(150, (newMomentum / 100) * 150)
+        setClientPressure(pressure)
 
-        return newMomentum;
-      });
-    }, UPDATE_INTERVAL);
+        return newMomentum
+      })
+    }, UPDATE_INTERVAL)
 
-    return () => clearInterval(interval);
+    return () => clearInterval(interval)
   }, [
     compatibleState.isGameActive,
     compatibleState.style,
@@ -643,97 +593,84 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
     MOMENTUM_DECAY_RATES,
     SPEED_MULTIPLIER,
     UPDATE_INTERVAL,
-  ]);
+  ])
 
   // Reset client position when route changes
   useEffect(() => {
-    const currentRoute = multiplayerState.currentRoute;
+    const currentRoute = multiplayerState.currentRoute
     // When route changes, reset position and give starting momentum
-    if (currentRoute > 1 && compatibleState.style === "sprint") {
-      setClientPosition(0);
-      setClientMomentum(10); // Reset to starting momentum (gentle push)
+    if (currentRoute > 1 && compatibleState.style === 'sprint') {
+      setClientPosition(0)
+      setClientMomentum(10) // Reset to starting momentum (gentle push)
     }
-  }, [
-    multiplayerState.currentRoute,
-    compatibleState.style,
-    multiplayerState.passengers.length,
-  ]);
+  }, [multiplayerState.currentRoute, compatibleState.style, multiplayerState.passengers.length])
 
   // Keep position ref in sync with latest position
   useEffect(() => {
-    clientPositionRef.current = clientPosition;
-  }, [clientPosition]);
+    clientPositionRef.current = clientPosition
+  }, [clientPosition])
 
   // Log when we receive position updates from other players
   useEffect(() => {
-    if (!multiplayerState?.players || !localPlayerId) return;
+    if (!multiplayerState?.players || !localPlayerId) return
 
     Object.entries(multiplayerState.players).forEach(([playerId, player]) => {
-      if (playerId === localPlayerId || !player.isActive) return;
+      if (playerId === localPlayerId || !player.isActive) return
 
-      const lastPos = lastReceivedPositionsRef.current[playerId] ?? -1;
-      const currentPos = player.position;
+      const lastPos = lastReceivedPositionsRef.current[playerId] ?? -1
+      const currentPos = player.position
 
       // Log when position changes significantly (>2%)
       if (Math.abs(currentPos - lastPos) > 2) {
         console.log(
-          `[POS_RECEIVED] ${player.name}: ${currentPos.toFixed(1)}% (was ${lastPos.toFixed(1)}%, delta=${(currentPos - lastPos).toFixed(1)}%)`,
-        );
-        lastReceivedPositionsRef.current[playerId] = currentPos;
+          `[POS_RECEIVED] ${player.name}: ${currentPos.toFixed(1)}% (was ${lastPos.toFixed(1)}%, delta=${(currentPos - lastPos).toFixed(1)}%)`
+        )
+        lastReceivedPositionsRef.current[playerId] = currentPos
       }
-    });
-  }, [multiplayerState?.players, localPlayerId]);
+    })
+  }, [multiplayerState?.players, localPlayerId])
 
   // Broadcast position to server for multiplayer ghost trains
   useEffect(() => {
-    const isGameActive = multiplayerState.gamePhase === "playing";
-    const isSprint = multiplayerState.config.style === "sprint";
+    const isGameActive = multiplayerState.gamePhase === 'playing'
+    const isSprint = multiplayerState.config.style === 'sprint'
 
     if (!isGameActive || !isSprint || !localPlayerId) {
-      return;
+      return
     }
 
-    console.log("[POS_BROADCAST] Starting position broadcast interval");
+    console.log('[POS_BROADCAST] Starting position broadcast interval')
 
     // Send position update every 100ms for smoother ghost trains (reads from refs to avoid restarting interval)
     const interval = setInterval(() => {
-      const currentPos = clientPositionRef.current;
-      broadcastCountRef.current++;
+      const currentPos = clientPositionRef.current
+      broadcastCountRef.current++
 
       // Throttled logging: only log when position changes by >2% or every 5 seconds
-      const now = Date.now();
-      const posDiff = Math.abs(
-        currentPos - lastBroadcastLogRef.current.position,
-      );
-      const timeDiff = now - lastBroadcastLogRef.current.time;
+      const now = Date.now()
+      const posDiff = Math.abs(currentPos - lastBroadcastLogRef.current.position)
+      const timeDiff = now - lastBroadcastLogRef.current.time
 
       if (posDiff > 2 || timeDiff > 5000) {
         console.log(
-          `[POS_BROADCAST] #${broadcastCountRef.current} pos=${currentPos.toFixed(1)}% (delta=${posDiff.toFixed(1)}%)`,
-        );
-        lastBroadcastLogRef.current = { position: currentPos, time: now };
+          `[POS_BROADCAST] #${broadcastCountRef.current} pos=${currentPos.toFixed(1)}% (delta=${posDiff.toFixed(1)}%)`
+        )
+        lastBroadcastLogRef.current = { position: currentPos, time: now }
       }
 
       sendMoveRef.current({
-        type: "UPDATE_POSITION",
+        type: 'UPDATE_POSITION',
         playerId: localPlayerId,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: { position: currentPos },
-      } as ComplementRaceMove);
-    }, 100);
+      } as ComplementRaceMove)
+    }, 100)
 
     return () => {
-      console.log(
-        `[POS_BROADCAST] Stopping interval (sent ${broadcastCountRef.current} updates)`,
-      );
-      clearInterval(interval);
-    };
-  }, [
-    multiplayerState.gamePhase,
-    multiplayerState.config.style,
-    localPlayerId,
-    viewerId,
-  ]);
+      console.log(`[POS_BROADCAST] Stopping interval (sent ${broadcastCountRef.current} updates)`)
+      clearInterval(interval)
+    }
+  }, [multiplayerState.gamePhase, multiplayerState.config.style, localPlayerId, viewerId])
 
   // Keep lastLogRef for future debugging needs
   // (removed debug logging)
@@ -741,267 +678,249 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
   // Action creators
   const startGame = useCallback(() => {
     if (activePlayers.length === 0) {
-      console.error("Need at least 1 player to start");
-      return;
+      console.error('Need at least 1 player to start')
+      return
     }
 
-    const playerMetadata = buildPlayerMetadata(
-      activePlayers,
-      {},
-      players,
-      viewerId || undefined,
-    );
+    const playerMetadata = buildPlayerMetadata(activePlayers, {}, players, viewerId || undefined)
 
     sendMove({
-      type: "START_GAME",
+      type: 'START_GAME',
       playerId: activePlayers[0],
-      userId: viewerId || "",
+      userId: viewerId || '',
       data: {
         activePlayers,
         playerMetadata,
       },
-    } as ComplementRaceMove);
-  }, [activePlayers, players, viewerId, sendMove]);
+    } as ComplementRaceMove)
+  }, [activePlayers, players, viewerId, sendMove])
 
   const submitAnswer = useCallback(
     (answer: number, responseTime: number) => {
       // Find the current player's ID (the one who is answering)
       const currentPlayerId = activePlayers.find((id) => {
-        const player = players.get(id);
-        return player?.isLocal;
-      });
+        const player = players.get(id)
+        return player?.isLocal
+      })
 
       if (!currentPlayerId) {
-        console.error("No local player found to submit answer");
-        return;
+        console.error('No local player found to submit answer')
+        return
       }
 
       sendMove({
-        type: "SUBMIT_ANSWER",
+        type: 'SUBMIT_ANSWER',
         playerId: currentPlayerId,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: { answer, responseTime },
-      } as ComplementRaceMove);
+      } as ComplementRaceMove)
     },
-    [activePlayers, players, viewerId, sendMove],
-  );
+    [activePlayers, players, viewerId, sendMove]
+  )
 
   const claimPassenger = useCallback(
     (passengerId: string, carIndex: number) => {
       const currentPlayerId = activePlayers.find((id) => {
-        const player = players.get(id);
-        return player?.isLocal;
-      });
+        const player = players.get(id)
+        return player?.isLocal
+      })
 
-      if (!currentPlayerId) return;
+      if (!currentPlayerId) return
 
       sendMove({
-        type: "CLAIM_PASSENGER",
+        type: 'CLAIM_PASSENGER',
         playerId: currentPlayerId,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: { passengerId, carIndex },
-      } as ComplementRaceMove);
+      } as ComplementRaceMove)
     },
-    [activePlayers, players, viewerId, sendMove],
-  );
+    [activePlayers, players, viewerId, sendMove]
+  )
 
   const deliverPassenger = useCallback(
     (passengerId: string) => {
       const currentPlayerId = activePlayers.find((id) => {
-        const player = players.get(id);
-        return player?.isLocal;
-      });
+        const player = players.get(id)
+        return player?.isLocal
+      })
 
-      if (!currentPlayerId) return;
+      if (!currentPlayerId) return
 
       sendMove({
-        type: "DELIVER_PASSENGER",
+        type: 'DELIVER_PASSENGER',
         playerId: currentPlayerId,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: { passengerId },
-      } as ComplementRaceMove);
+      } as ComplementRaceMove)
     },
-    [activePlayers, players, viewerId, sendMove],
-  );
+    [activePlayers, players, viewerId, sendMove]
+  )
 
   const nextQuestion = useCallback(() => {
     sendMove({
-      type: "NEXT_QUESTION",
-      playerId: activePlayers[0] || "",
-      userId: viewerId || "",
+      type: 'NEXT_QUESTION',
+      playerId: activePlayers[0] || '',
+      userId: viewerId || '',
       data: {},
-    } as ComplementRaceMove);
-  }, [activePlayers, viewerId, sendMove]);
+    } as ComplementRaceMove)
+  }, [activePlayers, viewerId, sendMove])
 
   const endGame = useCallback(() => {
     sendMove({
-      type: "END_GAME",
-      playerId: activePlayers[0] || "",
-      userId: viewerId || "",
+      type: 'END_GAME',
+      playerId: activePlayers[0] || '',
+      userId: viewerId || '',
       data: {},
-    } as ComplementRaceMove);
-  }, [activePlayers, viewerId, sendMove]);
+    } as ComplementRaceMove)
+  }, [activePlayers, viewerId, sendMove])
 
   const playAgain = useCallback(() => {
     sendMove({
-      type: "PLAY_AGAIN",
-      playerId: activePlayers[0] || "",
-      userId: viewerId || "",
+      type: 'PLAY_AGAIN',
+      playerId: activePlayers[0] || '',
+      userId: viewerId || '',
       data: {},
-    } as ComplementRaceMove);
-  }, [activePlayers, viewerId, sendMove]);
+    } as ComplementRaceMove)
+  }, [activePlayers, viewerId, sendMove])
 
   const goToSetup = useCallback(() => {
     sendMove({
-      type: "GO_TO_SETUP",
-      playerId: activePlayers[0] || "",
-      userId: viewerId || "",
+      type: 'GO_TO_SETUP',
+      playerId: activePlayers[0] || '',
+      userId: viewerId || '',
       data: {},
-    } as ComplementRaceMove);
-  }, [activePlayers, viewerId, sendMove]);
+    } as ComplementRaceMove)
+  }, [activePlayers, viewerId, sendMove])
 
   const setConfig = useCallback(
     (field: keyof ComplementRaceConfig, value: unknown) => {
       sendMove({
-        type: "SET_CONFIG",
-        playerId: activePlayers[0] || "",
-        userId: viewerId || "",
+        type: 'SET_CONFIG',
+        playerId: activePlayers[0] || '',
+        userId: viewerId || '',
         data: { field, value },
-      } as ComplementRaceMove);
+      } as ComplementRaceMove)
 
       // Persist to database
       if (roomData?.id) {
-        const currentGameConfig =
-          (roomData.gameConfig as Record<string, unknown>) || {};
+        const currentGameConfig = (roomData.gameConfig as Record<string, unknown>) || {}
         const currentComplementRaceConfig =
-          (currentGameConfig["complement-race"] as Record<string, unknown>) ||
-          {};
+          (currentGameConfig['complement-race'] as Record<string, unknown>) || {}
 
         const updatedConfig = {
           ...currentGameConfig,
-          "complement-race": {
+          'complement-race': {
             ...currentComplementRaceConfig,
             [field]: value,
           },
-        };
+        }
 
         updateGameConfig({
           roomId: roomData.id,
           gameConfig: updatedConfig,
-        });
+        })
       }
     },
-    [
-      activePlayers,
-      viewerId,
-      sendMove,
-      roomData?.id,
-      roomData?.gameConfig,
-      updateGameConfig,
-    ],
-  );
+    [activePlayers, viewerId, sendMove, roomData?.id, roomData?.gameConfig, updateGameConfig]
+  )
 
   // Compatibility dispatch function for existing UI components
   const dispatch = useCallback(
     (action: { type: string; [key: string]: any }) => {
       // Map old reducer actions to new action creators
       switch (action.type) {
-        case "START_COUNTDOWN":
-        case "BEGIN_GAME":
-          startGame();
-          break;
-        case "SUBMIT_ANSWER":
+        case 'START_COUNTDOWN':
+        case 'BEGIN_GAME':
+          startGame()
+          break
+        case 'SUBMIT_ANSWER':
           if (action.answer !== undefined) {
-            const responseTime =
-              Date.now() - (multiplayerState.questionStartTime || Date.now());
-            submitAnswer(action.answer, responseTime);
+            const responseTime = Date.now() - (multiplayerState.questionStartTime || Date.now())
+            submitAnswer(action.answer, responseTime)
           }
-          break;
-        case "NEXT_QUESTION":
-          setLocalUIState((prev) => ({ ...prev, currentInput: "" }));
-          nextQuestion();
-          break;
-        case "END_RACE":
-        case "SHOW_RESULTS":
-          endGame();
-          break;
-        case "RESET_GAME":
-        case "SHOW_CONTROLS":
-          goToSetup();
-          break;
-        case "SET_MODE":
+          break
+        case 'NEXT_QUESTION':
+          setLocalUIState((prev) => ({ ...prev, currentInput: '' }))
+          nextQuestion()
+          break
+        case 'END_RACE':
+        case 'SHOW_RESULTS':
+          endGame()
+          break
+        case 'RESET_GAME':
+        case 'SHOW_CONTROLS':
+          goToSetup()
+          break
+        case 'SET_MODE':
           if (action.mode !== undefined) {
-            setConfig("mode", action.mode);
+            setConfig('mode', action.mode)
           }
-          break;
-        case "SET_STYLE":
+          break
+        case 'SET_STYLE':
           if (action.style !== undefined) {
-            setConfig("style", action.style);
+            setConfig('style', action.style)
           }
-          break;
-        case "SET_TIMEOUT":
+          break
+        case 'SET_TIMEOUT':
           if (action.timeout !== undefined) {
-            setConfig("timeoutSetting", action.timeout);
+            setConfig('timeoutSetting', action.timeout)
           }
-          break;
-        case "SET_COMPLEMENT_DISPLAY":
+          break
+        case 'SET_COMPLEMENT_DISPLAY':
           if (action.display !== undefined) {
-            setConfig("complementDisplay", action.display);
+            setConfig('complementDisplay', action.display)
           }
-          break;
-        case "BOARD_PASSENGER":
-        case "CLAIM_PASSENGER":
-          if (
-            action.passengerId !== undefined &&
-            action.carIndex !== undefined
-          ) {
-            claimPassenger(action.passengerId, action.carIndex);
+          break
+        case 'BOARD_PASSENGER':
+        case 'CLAIM_PASSENGER':
+          if (action.passengerId !== undefined && action.carIndex !== undefined) {
+            claimPassenger(action.passengerId, action.carIndex)
           }
-          break;
-        case "DELIVER_PASSENGER":
+          break
+        case 'DELIVER_PASSENGER':
           if (action.passengerId !== undefined) {
-            deliverPassenger(action.passengerId);
+            deliverPassenger(action.passengerId)
           }
-          break;
-        case "START_NEW_ROUTE":
+          break
+        case 'START_NEW_ROUTE':
           // Send route progression to server
           if (action.routeNumber !== undefined) {
             sendMove({
-              type: "START_NEW_ROUTE",
-              playerId: activePlayers[0] || "",
-              userId: viewerId || "",
+              type: 'START_NEW_ROUTE',
+              playerId: activePlayers[0] || '',
+              userId: viewerId || '',
               data: { routeNumber: action.routeNumber },
-            } as ComplementRaceMove);
+            } as ComplementRaceMove)
           }
-          break;
+          break
         // Local UI state actions
-        case "UPDATE_INPUT":
+        case 'UPDATE_INPUT':
           setLocalUIState((prev) => ({
             ...prev,
-            currentInput: action.input || "",
-          }));
-          break;
-        case "PAUSE_RACE":
-          setLocalUIState((prev) => ({ ...prev, isPaused: true }));
-          break;
-        case "RESUME_RACE":
-          setLocalUIState((prev) => ({ ...prev, isPaused: false }));
-          break;
-        case "SHOW_ADAPTIVE_FEEDBACK":
+            currentInput: action.input || '',
+          }))
+          break
+        case 'PAUSE_RACE':
+          setLocalUIState((prev) => ({ ...prev, isPaused: true }))
+          break
+        case 'RESUME_RACE':
+          setLocalUIState((prev) => ({ ...prev, isPaused: false }))
+          break
+        case 'SHOW_ADAPTIVE_FEEDBACK':
           setLocalUIState((prev) => ({
             ...prev,
             adaptiveFeedback: action.feedback,
-          }));
-          break;
-        case "CLEAR_ADAPTIVE_FEEDBACK":
-          setLocalUIState((prev) => ({ ...prev, adaptiveFeedback: null }));
-          break;
-        case "TRIGGER_AI_COMMENTARY": {
+          }))
+          break
+        case 'CLEAR_ADAPTIVE_FEEDBACK':
+          setLocalUIState((prev) => ({ ...prev, adaptiveFeedback: null }))
+          break
+        case 'TRIGGER_AI_COMMENTARY': {
           setLocalUIState((prev) => {
-            const newBubbles = new Map(prev.activeSpeechBubbles);
-            newBubbles.set(action.racerId, action.message);
-            return { ...prev, activeSpeechBubbles: newBubbles };
-          });
+            const newBubbles = new Map(prev.activeSpeechBubbles)
+            newBubbles.set(action.racerId, action.message)
+            return { ...prev, activeSpeechBubbles: newBubbles }
+          })
           // Update racer's lastComment time and cooldown to prevent spam
           setClientAIRacers((prevRacers) =>
             prevRacers.map((racer) =>
@@ -1011,80 +930,78 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
                     lastComment: Date.now(),
                     commentCooldown: Math.random() * 4000 + 2000, // 2-6 seconds
                   }
-                : racer,
-            ),
-          );
-          break;
+                : racer
+            )
+          )
+          break
         }
-        case "CLEAR_AI_COMMENT": {
+        case 'CLEAR_AI_COMMENT': {
           setLocalUIState((prev) => {
-            const newBubbles = new Map(prev.activeSpeechBubbles);
-            newBubbles.delete(action.racerId);
-            return { ...prev, activeSpeechBubbles: newBubbles };
-          });
-          break;
+            const newBubbles = new Map(prev.activeSpeechBubbles)
+            newBubbles.delete(action.racerId)
+            return { ...prev, activeSpeechBubbles: newBubbles }
+          })
+          break
         }
-        case "UPDATE_AI_POSITIONS": {
+        case 'UPDATE_AI_POSITIONS': {
           // Update client-side AI positions
           if (action.positions && Array.isArray(action.positions)) {
             setClientAIRacers((prevRacers) =>
               prevRacers.map((racer) => {
                 const update = action.positions.find(
-                  (p: { id: string; position: number }) => p.id === racer.id,
-                );
+                  (p: { id: string; position: number }) => p.id === racer.id
+                )
                 return update
                   ? {
                       ...racer,
                       previousPosition: racer.position,
                       position: update.position,
                     }
-                  : racer;
-              }),
-            );
+                  : racer
+              })
+            )
           }
-          break;
+          break
         }
-        case "UPDATE_AI_SPEEDS": {
+        case 'UPDATE_AI_SPEEDS': {
           // Update client-side AI speeds (adaptive difficulty)
           if (action.racers && Array.isArray(action.racers)) {
             setClientAIRacers((prevRacers) =>
               prevRacers.map((racer) => {
                 const update = action.racers.find(
-                  (r: { id: string; speed: number }) => r.id === racer.id,
-                );
+                  (r: { id: string; speed: number }) => r.id === racer.id
+                )
                 return update
                   ? {
                       ...racer,
                       speed: update.speed,
                     }
-                  : racer;
-              }),
-            );
+                  : racer
+              })
+            )
           }
-          break;
+          break
         }
-        case "UPDATE_DIFFICULTY_TRACKER": {
+        case 'UPDATE_DIFFICULTY_TRACKER': {
           // Update local difficulty tracker state
           setLocalUIState((prev) => ({
             ...prev,
             difficultyTracker: action.tracker,
-          }));
-          break;
+          }))
+          break
         }
         // Other local actions that don't affect UI (can be ignored for now)
-        case "UPDATE_MOMENTUM":
-        case "UPDATE_TRAIN_POSITION":
-        case "UPDATE_STEAM_JOURNEY":
-        case "GENERATE_PASSENGERS": // Passengers generated server-side when route starts
-        case "COMPLETE_ROUTE":
-        case "HIDE_ROUTE_CELEBRATION":
-        case "COMPLETE_LAP":
+        case 'UPDATE_MOMENTUM':
+        case 'UPDATE_TRAIN_POSITION':
+        case 'UPDATE_STEAM_JOURNEY':
+        case 'GENERATE_PASSENGERS': // Passengers generated server-side when route starts
+        case 'COMPLETE_ROUTE':
+        case 'HIDE_ROUTE_CELEBRATION':
+        case 'COMPLETE_LAP':
           // These are now handled by the server state or can be ignored
-          break;
+          break
         default:
-          console.warn(
-            `[ComplementRaceProvider] Unknown action type: ${action.type}`,
-          );
+          console.warn(`[ComplementRaceProvider] Unknown action type: ${action.type}`)
       }
     },
     [
@@ -1100,24 +1017,24 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
       sendMove,
       activePlayers,
       viewerId,
-    ],
-  );
+    ]
+  )
 
   // Client-side momentum boost/reduce (sprint mode only)
   const boostMomentum = useCallback(
     (correct: boolean) => {
-      if (compatibleState.style !== "sprint") return;
+      if (compatibleState.style !== 'sprint') return
 
       setClientMomentum((prevMomentum) => {
         if (correct) {
-          return Math.min(100, prevMomentum + MOMENTUM_GAIN_PER_CORRECT);
+          return Math.min(100, prevMomentum + MOMENTUM_GAIN_PER_CORRECT)
         } else {
-          return Math.max(0, prevMomentum - MOMENTUM_LOSS_PER_WRONG);
+          return Math.max(0, prevMomentum - MOMENTUM_LOSS_PER_WRONG)
         }
-      });
+      })
     },
-    [compatibleState.style, MOMENTUM_GAIN_PER_CORRECT, MOMENTUM_LOSS_PER_WRONG],
-  );
+    [compatibleState.style, MOMENTUM_GAIN_PER_CORRECT, MOMENTUM_LOSS_PER_WRONG]
+  )
 
   const contextValue: ComplementRaceContextValue = {
     state: compatibleState, // Use transformed state
@@ -1137,11 +1054,9 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {
     clearError,
     exitSession,
     boostMomentum, // Client-side momentum control
-  };
+  }
 
   return (
-    <ComplementRaceContext.Provider value={contextValue}>
-      {children}
-    </ComplementRaceContext.Provider>
-  );
+    <ComplementRaceContext.Provider value={contextValue}>{children}</ComplementRaceContext.Provider>
+  )
 }
diff --git a/apps/web/src/arcade-games/complement-race/Validator.ts b/apps/web/src/arcade-games/complement-race/Validator.ts
index 62813fca..ebb69c80 100644
--- a/apps/web/src/arcade-games/complement-race/Validator.ts
+++ b/apps/web/src/arcade-games/complement-race/Validator.ts
@@ -3,7 +3,7 @@
  * Handles question generation, answer validation, passenger management, and race progression
  */
 
-import type { GameValidator, ValidationResult } from "@/lib/arcade/game-sdk";
+import type { GameValidator, ValidationResult } from '@/lib/arcade/game-sdk'
 import type {
   ComplementRaceState,
   ComplementRaceMove,
@@ -13,66 +13,66 @@ import type {
   Station,
   PlayerState,
   AnswerValidation,
-} from "./types";
+} from './types'
 
 // ============================================================================
 // Constants
 // ============================================================================
 
-const PLAYER_COLORS = ["#3B82F6", "#10B981", "#F59E0B", "#8B5CF6"]; // Blue, Green, Amber, Purple
+const PLAYER_COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6'] // Blue, Green, Amber, Purple
 
 const DEFAULT_STATIONS: Station[] = [
-  { id: "depot", name: "Depot", position: 0, icon: "🚉", emoji: "🚉" },
-  { id: "riverside", name: "Riverside", position: 20, icon: "🌊", emoji: "🌊" },
-  { id: "hillside", name: "Hillside", position: 40, icon: "⛰️", emoji: "⛰️" },
-  { id: "canyon", name: "Canyon View", position: 60, icon: "🏜️", emoji: "🏜️" },
-  { id: "meadows", name: "Meadows", position: 80, icon: "🌾", emoji: "🌾" },
+  { id: 'depot', name: 'Depot', position: 0, icon: '🚉', emoji: '🚉' },
+  { id: 'riverside', name: 'Riverside', position: 20, icon: '🌊', emoji: '🌊' },
+  { id: 'hillside', name: 'Hillside', position: 40, icon: '⛰️', emoji: '⛰️' },
+  { id: 'canyon', name: 'Canyon View', position: 60, icon: '🏜️', emoji: '🏜️' },
+  { id: 'meadows', name: 'Meadows', position: 80, icon: '🌾', emoji: '🌾' },
   {
-    id: "grand-central",
-    name: "Grand Central",
+    id: 'grand-central',
+    name: 'Grand Central',
     position: 100,
-    icon: "🏛️",
-    emoji: "🏛️",
+    icon: '🏛️',
+    emoji: '🏛️',
   },
-];
+]
 
 const PASSENGER_NAMES = [
-  "Alice",
-  "Bob",
-  "Charlie",
-  "Diana",
-  "Eve",
-  "Frank",
-  "Grace",
-  "Henry",
-  "Iris",
-  "Jack",
-  "Kate",
-  "Leo",
-  "Mia",
-  "Noah",
-  "Olivia",
-  "Paul",
-];
+  'Alice',
+  'Bob',
+  'Charlie',
+  'Diana',
+  'Eve',
+  'Frank',
+  'Grace',
+  'Henry',
+  'Iris',
+  'Jack',
+  'Kate',
+  'Leo',
+  'Mia',
+  'Noah',
+  'Olivia',
+  'Paul',
+]
 
 const PASSENGER_AVATARS = [
-  "👨‍💼",
-  "👩‍💼",
-  "👨‍🎓",
-  "👩‍🎓",
-  "👨‍🍳",
-  "👩‍🍳",
-  "👨‍⚕️",
-  "👩‍⚕️",
-  "👨‍🔧",
-  "👩‍🔧",
-  "👨‍🏫",
-  "👩‍🏫",
-  "👵",
-  "👴",
-  "🧑‍🎨",
-  "👨‍🚒",
-];
+  '👨‍💼',
+  '👩‍💼',
+  '👨‍🎓',
+  '👩‍🎓',
+  '👨‍🍳',
+  '👩‍🍳',
+  '👨‍⚕️',
+  '👩‍⚕️',
+  '👨‍🔧',
+  '👩‍🔧',
+  '👨‍🏫',
+  '👩‍🏫',
+  '👵',
+  '👴',
+  '🧑‍🎨',
+  '👨‍🚒',
+]
 
 // ============================================================================
 // Validator Class
@@ -81,77 +81,62 @@ const PASSENGER_AVATARS = [
 export class ComplementRaceValidator
   implements GameValidator<ComplementRaceState, ComplementRaceMove>
 {
-  validateMove(
-    state: ComplementRaceState,
-    move: ComplementRaceMove,
-  ): ValidationResult {
+  validateMove(state: ComplementRaceState, move: ComplementRaceMove): ValidationResult {
     switch (move.type) {
-      case "START_GAME":
-        return this.validateStartGame(
-          state,
-          move.data.activePlayers,
-          move.data.playerMetadata,
-        );
+      case 'START_GAME':
+        return this.validateStartGame(state, move.data.activePlayers, move.data.playerMetadata)
 
-      case "SET_READY":
-        return this.validateSetReady(state, move.playerId, move.data.ready);
+      case 'SET_READY':
+        return this.validateSetReady(state, move.playerId, move.data.ready)
 
-      case "SET_CONFIG":
-        return this.validateSetConfig(state, move.data.field, move.data.value);
+      case 'SET_CONFIG':
+        return this.validateSetConfig(state, move.data.field, move.data.value)
 
-      case "SUBMIT_ANSWER":
+      case 'SUBMIT_ANSWER':
         return this.validateSubmitAnswer(
           state,
           move.playerId,
           move.data.answer,
-          move.data.responseTime,
-        );
+          move.data.responseTime
+        )
 
-      case "UPDATE_INPUT":
-        return this.validateUpdateInput(state, move.playerId, move.data.input);
+      case 'UPDATE_INPUT':
+        return this.validateUpdateInput(state, move.playerId, move.data.input)
 
-      case "UPDATE_POSITION":
-        return this.validateUpdatePosition(
-          state,
-          move.playerId,
-          move.data.position,
-        );
+      case 'UPDATE_POSITION':
+        return this.validateUpdatePosition(state, move.playerId, move.data.position)
 
-      case "CLAIM_PASSENGER":
+      case 'CLAIM_PASSENGER':
         return this.validateClaimPassenger(
           state,
           move.playerId,
           move.data.passengerId,
-          move.data.carIndex,
-        );
+          move.data.carIndex
+        )
 
-      case "DELIVER_PASSENGER":
-        return this.validateDeliverPassenger(
-          state,
-          move.playerId,
-          move.data.passengerId,
-        );
+      case 'DELIVER_PASSENGER':
+        return this.validateDeliverPassenger(state, move.playerId, move.data.passengerId)
 
-      case "NEXT_QUESTION":
-        return this.validateNextQuestion(state);
+      case 'NEXT_QUESTION':
+        return this.validateNextQuestion(state)
 
-      case "START_NEW_ROUTE":
-        return this.validateStartNewRoute(state, move.data.routeNumber);
+      case 'START_NEW_ROUTE':
+        return this.validateStartNewRoute(state, move.data.routeNumber)
 
-      case "END_GAME":
-        return this.validateEndGame(state);
+      case 'END_GAME':
+        return this.validateEndGame(state)
 
-      case "PLAY_AGAIN":
-        return this.validatePlayAgain(state);
+      case 'PLAY_AGAIN':
+        return this.validatePlayAgain(state)
 
-      case "GO_TO_SETUP":
-        return this.validateGoToSetup(state);
+      case 'GO_TO_SETUP':
+        return this.validateGoToSetup(state)
 
       default:
         return {
           valid: false,
           error: `Unknown move type: ${(move as { type: string }).type}`,
-        };
+        }
     }
   }
 
@@ -162,28 +147,28 @@ export class ComplementRaceValidator
   private validateStartGame(
     state: ComplementRaceState,
     activePlayers: string[],
-    playerMetadata: Record<string, unknown>,
+    playerMetadata: Record<string, unknown>
   ): ValidationResult {
-    if (state.gamePhase !== "setup" && state.gamePhase !== "lobby") {
-      return { valid: false, error: "Game already started" };
+    if (state.gamePhase !== 'setup' && state.gamePhase !== 'lobby') {
+      return { valid: false, error: 'Game already started' }
     }
 
     if (!activePlayers || activePlayers.length < 1) {
-      return { valid: false, error: "Need at least 1 player" };
+      return { valid: false, error: 'Need at least 1 player' }
     }
 
     if (activePlayers.length > state.config.maxPlayers) {
       return {
         valid: false,
         error: `Too many players (max ${state.config.maxPlayers})`,
-      };
+      }
     }
 
     // Initialize player states
-    const players: Record<string, PlayerState> = {};
+    const players: Record<string, PlayerState> = {}
     for (let i = 0; i < activePlayers.length; i++) {
-      const playerId = activePlayers[i];
-      const metadata = playerMetadata[playerId] as { name: string };
+      const playerId = activePlayers[i]
+      const metadata = playerMetadata[playerId] as { name: string }
 
       players[playerId] = {
         id: playerId,
@@ -201,67 +186,67 @@ export class ComplementRaceValidator
         lastAnswerTime: null,
         passengers: [],
         deliveredPassengers: 0,
-      };
+      }
     }
 
     // Generate initial questions for each player
-    const currentQuestions: Record<string, ComplementQuestion> = {};
+    const currentQuestions: Record<string, ComplementQuestion> = {}
     for (const playerId of activePlayers) {
-      currentQuestions[playerId] = this.generateQuestion(state.config.mode);
+      currentQuestions[playerId] = this.generateQuestion(state.config.mode)
     }
 
     // Sprint mode: generate initial passengers
     const passengers =
-      state.config.style === "sprint"
+      state.config.style === 'sprint'
         ? this.generatePassengers(state.config.passengerCount, state.stations)
-        : [];
+        : []
 
     // Calculate maxConcurrentPassengers based on initial passenger layout (sprint mode only)
-    let updatedConfig = state.config;
-    if (state.config.style === "sprint" && passengers.length > 0) {
+    let updatedConfig = state.config
+    if (state.config.style === 'sprint' && passengers.length > 0) {
       const maxConcurrentPassengers = Math.max(
         1,
-        this.calculateMaxConcurrentPassengers(passengers, state.stations),
-      );
+        this.calculateMaxConcurrentPassengers(passengers, state.stations)
+      )
       console.log(
-        `[Game Start] Calculated maxConcurrentPassengers: ${maxConcurrentPassengers} for ${passengers.length} passengers`,
-      );
+        `[Game Start] Calculated maxConcurrentPassengers: ${maxConcurrentPassengers} for ${passengers.length} passengers`
+      )
       updatedConfig = {
         ...state.config,
         maxConcurrentPassengers,
-      };
+      }
     }
 
     const newState: ComplementRaceState = {
       ...state,
       config: updatedConfig,
-      gamePhase: "playing", // Go directly to playing (countdown can be added later)
+      gamePhase: 'playing', // Go directly to playing (countdown can be added later)
       activePlayers,
       playerMetadata: playerMetadata as typeof state.playerMetadata,
       players,
       currentQuestions,
       questionStartTime: Date.now(),
       passengers,
-      routeStartTime: state.config.style === "sprint" ? Date.now() : null,
+      routeStartTime: state.config.style === 'sprint' ? Date.now() : null,
       raceStartTime: Date.now(), // Race starts immediately
       gameStartTime: Date.now(),
       aiOpponents: [], // AI handled client-side
-    };
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   private validateSetReady(
     state: ComplementRaceState,
     playerId: string,
-    ready: boolean,
+    ready: boolean
   ): ValidationResult {
-    if (state.gamePhase !== "lobby") {
-      return { valid: false, error: "Not in lobby phase" };
+    if (state.gamePhase !== 'lobby') {
+      return { valid: false, error: 'Not in lobby phase' }
     }
 
     if (!state.players[playerId]) {
-      return { valid: false, error: "Player not in game" };
+      return { valid: false, error: 'Player not in game' }
     }
 
     const newState: ComplementRaceState = {
@@ -273,25 +258,25 @@ export class ComplementRaceValidator
           isReady: ready,
         },
       },
-    };
-
-    // Check if all players are ready
-    const allReady = Object.values(newState.players).every((p) => p.isReady);
-    if (allReady && state.activePlayers.length >= 1) {
-      newState.gamePhase = "countdown";
-      newState.raceStartTime = Date.now() + 3000; // 3 second countdown
     }
 
-    return { valid: true, newState };
+    // Check if all players are ready
+    const allReady = Object.values(newState.players).every((p) => p.isReady)
+    if (allReady && state.activePlayers.length >= 1) {
+      newState.gamePhase = 'countdown'
+      newState.raceStartTime = Date.now() + 3000 // 3 second countdown
+    }
+
+    return { valid: true, newState }
   }
 
   private validateSetConfig(
     state: ComplementRaceState,
     field: keyof ComplementRaceConfig,
-    value: unknown,
+    value: unknown
   ): ValidationResult {
-    if (state.gamePhase !== "setup") {
-      return { valid: false, error: "Can only change config in setup" };
+    if (state.gamePhase !== 'setup') {
+      return { valid: false, error: 'Can only change config in setup' }
     }
 
     // Validate the value based on field
@@ -303,9 +288,9 @@ export class ComplementRaceValidator
         ...state.config,
         [field]: value,
       },
-    };
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   // ==========================================================================
@@ -316,66 +301,61 @@ export class ComplementRaceValidator
     state: ComplementRaceState,
     playerId: string,
     answer: number,
-    responseTime: number,
+    responseTime: number
   ): ValidationResult {
-    if (state.gamePhase !== "playing") {
-      return { valid: false, error: "Game not in playing phase" };
+    if (state.gamePhase !== 'playing') {
+      return { valid: false, error: 'Game not in playing phase' }
     }
 
-    const player = state.players[playerId];
+    const player = state.players[playerId]
     if (!player) {
-      return { valid: false, error: "Player not found" };
+      return { valid: false, error: 'Player not found' }
     }
 
-    const question = state.currentQuestions[playerId];
+    const question = state.currentQuestions[playerId]
     if (!question) {
-      return { valid: false, error: "No question for this player" };
+      return { valid: false, error: 'No question for this player' }
     }
 
     // Validate answer
-    const correct = answer === question.correctAnswer;
+    const correct = answer === question.correctAnswer
     const validation = this.calculateAnswerScore(
       correct,
       responseTime,
       player.streak,
-      state.config.style,
-    );
+      state.config.style
+    )
 
     // Update player state
     const updatedPlayer: PlayerState = {
       ...player,
       totalQuestions: player.totalQuestions + 1,
-      correctAnswers: correct
-        ? player.correctAnswers + 1
-        : player.correctAnswers,
+      correctAnswers: correct ? player.correctAnswers + 1 : player.correctAnswers,
       score: player.score + validation.totalPoints,
       streak: validation.newStreak,
       bestStreak: Math.max(player.bestStreak, validation.newStreak),
       lastAnswerTime: Date.now(),
       currentAnswer: null,
-    };
+    }
 
     // Update position based on game mode
-    if (state.config.style === "practice") {
+    if (state.config.style === 'practice') {
       // Practice: Move forward on correct answer
       if (correct) {
-        updatedPlayer.position = Math.min(
-          100,
-          player.position + 100 / state.config.raceGoal,
-        );
+        updatedPlayer.position = Math.min(100, player.position + 100 / state.config.raceGoal)
       }
-    } else if (state.config.style === "sprint") {
+    } else if (state.config.style === 'sprint') {
       // Sprint: All momentum/position handled client-side for smooth 20fps movement
       // Server only tracks scoring, passengers, and game progression
       // No server-side position updates needed
-    } else if (state.config.style === "survival") {
+    } else if (state.config.style === 'survival') {
       // Survival: Always move forward, speed based on accuracy
-      const moveDistance = correct ? 5 : 2;
-      updatedPlayer.position = player.position + moveDistance;
+      const moveDistance = correct ? 5 : 2
+      updatedPlayer.position = player.position + moveDistance
     }
 
     // Generate new question for this player
-    const newQuestion = this.generateQuestion(state.config.mode);
+    const newQuestion = this.generateQuestion(state.config.mode)
 
     const newState: ComplementRaceState = {
       ...state,
@@ -387,32 +367,32 @@ export class ComplementRaceValidator
         ...state.currentQuestions,
         [playerId]: newQuestion,
       },
-    };
-
-    // Check win conditions
-    const winner = this.checkWinCondition(newState);
-    if (winner) {
-      newState.gamePhase = "results";
-      newState.winner = winner;
-      newState.raceEndTime = Date.now();
-      newState.leaderboard = this.calculateLeaderboard(newState);
     }
 
-    return { valid: true, newState };
+    // Check win conditions
+    const winner = this.checkWinCondition(newState)
+    if (winner) {
+      newState.gamePhase = 'results'
+      newState.winner = winner
+      newState.raceEndTime = Date.now()
+      newState.leaderboard = this.calculateLeaderboard(newState)
+    }
+
+    return { valid: true, newState }
   }
 
   private validateUpdateInput(
     state: ComplementRaceState,
     playerId: string,
-    input: string,
+    input: string
   ): ValidationResult {
-    if (state.gamePhase !== "playing") {
-      return { valid: false, error: "Game not in playing phase" };
+    if (state.gamePhase !== 'playing') {
+      return { valid: false, error: 'Game not in playing phase' }
     }
 
-    const player = state.players[playerId];
+    const player = state.players[playerId]
     if (!player) {
-      return { valid: false, error: "Player not found" };
+      return { valid: false, error: 'Player not found' }
     }
 
     const newState: ComplementRaceState = {
@@ -424,28 +404,28 @@ export class ComplementRaceValidator
           currentAnswer: input,
         },
       },
-    };
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   private validateUpdatePosition(
     state: ComplementRaceState,
     playerId: string,
-    position: number,
+    position: number
   ): ValidationResult {
-    if (state.gamePhase !== "playing") {
-      return { valid: false, error: "Game not in playing phase" };
+    if (state.gamePhase !== 'playing') {
+      return { valid: false, error: 'Game not in playing phase' }
     }
 
-    const player = state.players[playerId];
+    const player = state.players[playerId]
     if (!player) {
-      return { valid: false, error: "Player not found" };
+      return { valid: false, error: 'Player not found' }
     }
 
     // Validate position is a reasonable number (0-100)
-    if (typeof position !== "number" || position < 0 || position > 100) {
-      return { valid: false, error: "Invalid position value" };
+    if (typeof position !== 'number' || position < 0 || position > 100) {
+      return { valid: false, error: 'Invalid position value' }
     }
 
     const newState: ComplementRaceState = {
@@ -457,9 +437,9 @@ export class ComplementRaceValidator
           position,
         },
       },
-    };
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   // ==========================================================================
@@ -470,62 +450,58 @@ export class ComplementRaceValidator
     state: ComplementRaceState,
     playerId: string,
     passengerId: string,
-    carIndex: number,
+    carIndex: number
   ): ValidationResult {
-    if (state.config.style !== "sprint") {
+    if (state.config.style !== 'sprint') {
       return {
         valid: false,
-        error: "Passengers only available in sprint mode",
-      };
+        error: 'Passengers only available in sprint mode',
+      }
     }
 
-    const player = state.players[playerId];
+    const player = state.players[playerId]
     if (!player) {
-      return { valid: false, error: "Player not found" };
+      return { valid: false, error: 'Player not found' }
     }
 
     // Check if player has space
     if (player.passengers.length >= state.config.maxConcurrentPassengers) {
-      return { valid: false, error: "Train is full" };
+      return { valid: false, error: 'Train is full' }
     }
 
     // Find passenger
-    const passengerIndex = state.passengers.findIndex(
-      (p) => p.id === passengerId,
-    );
+    const passengerIndex = state.passengers.findIndex((p) => p.id === passengerId)
     if (passengerIndex === -1) {
-      return { valid: false, error: "Passenger not found" };
+      return { valid: false, error: 'Passenger not found' }
     }
 
-    const passenger = state.passengers[passengerIndex];
+    const passenger = state.passengers[passengerIndex]
     if (passenger.claimedBy !== null) {
-      return { valid: false, error: "Passenger already claimed" };
+      return { valid: false, error: 'Passenger already claimed' }
     }
 
     // Sprint mode: Position is client-side, trust client's spatial checking
     // (Client checks position in useSteamJourney before sending CLAIM move)
     // Other modes: Validate position server-side
-    if (state.config.style !== "sprint") {
-      const originStation = state.stations.find(
-        (s) => s.id === passenger.originStationId,
-      );
+    if (state.config.style !== 'sprint') {
+      const originStation = state.stations.find((s) => s.id === passenger.originStationId)
       if (!originStation) {
-        return { valid: false, error: "Origin station not found" };
+        return { valid: false, error: 'Origin station not found' }
       }
 
-      const distance = Math.abs(player.position - originStation.position);
+      const distance = Math.abs(player.position - originStation.position)
       if (distance > 5) {
-        return { valid: false, error: "Not at origin station" };
+        return { valid: false, error: 'Not at origin station' }
       }
     }
 
     // Claim passenger and assign to physical car
-    const updatedPassengers = [...state.passengers];
+    const updatedPassengers = [...state.passengers]
     updatedPassengers[passengerIndex] = {
       ...passenger,
       claimedBy: playerId,
       carIndex, // Store which physical car (0-N) the passenger is seated in
-    };
+    }
 
     const newState: ComplementRaceState = {
       ...state,
@@ -537,70 +513,66 @@ export class ComplementRaceValidator
           passengers: [...player.passengers, passengerId],
         },
       },
-    };
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   private validateDeliverPassenger(
     state: ComplementRaceState,
     playerId: string,
-    passengerId: string,
+    passengerId: string
   ): ValidationResult {
-    if (state.config.style !== "sprint") {
+    if (state.config.style !== 'sprint') {
       return {
         valid: false,
-        error: "Passengers only available in sprint mode",
-      };
+        error: 'Passengers only available in sprint mode',
+      }
     }
 
-    const player = state.players[playerId];
+    const player = state.players[playerId]
     if (!player) {
-      return { valid: false, error: "Player not found" };
+      return { valid: false, error: 'Player not found' }
     }
 
     // Check if player has this passenger
     if (!player.passengers.includes(passengerId)) {
-      return { valid: false, error: "Player does not have this passenger" };
+      return { valid: false, error: 'Player does not have this passenger' }
     }
 
     // Find passenger
-    const passengerIndex = state.passengers.findIndex(
-      (p) => p.id === passengerId,
-    );
+    const passengerIndex = state.passengers.findIndex((p) => p.id === passengerId)
     if (passengerIndex === -1) {
-      return { valid: false, error: "Passenger not found" };
+      return { valid: false, error: 'Passenger not found' }
     }
 
-    const passenger = state.passengers[passengerIndex];
+    const passenger = state.passengers[passengerIndex]
     if (passenger.deliveredBy !== null) {
-      return { valid: false, error: "Passenger already delivered" };
+      return { valid: false, error: 'Passenger already delivered' }
     }
 
     // Sprint mode: Position is client-side, trust client's spatial checking
     // (Client checks position in useSteamJourney before sending DELIVER move)
     // Other modes: Validate position server-side
-    if (state.config.style !== "sprint") {
-      const destStation = state.stations.find(
-        (s) => s.id === passenger.destinationStationId,
-      );
+    if (state.config.style !== 'sprint') {
+      const destStation = state.stations.find((s) => s.id === passenger.destinationStationId)
       if (!destStation) {
-        return { valid: false, error: "Destination station not found" };
+        return { valid: false, error: 'Destination station not found' }
       }
 
-      const distance = Math.abs(player.position - destStation.position);
+      const distance = Math.abs(player.position - destStation.position)
       if (distance > 5) {
-        return { valid: false, error: "Not at destination station" };
+        return { valid: false, error: 'Not at destination station' }
       }
     }
 
     // Deliver passenger and award points
-    const points = passenger.isUrgent ? 20 : 10;
-    const updatedPassengers = [...state.passengers];
+    const points = passenger.isUrgent ? 20 : 10
+    const updatedPassengers = [...state.passengers]
     updatedPassengers[passengerIndex] = {
       ...passenger,
       deliveredBy: playerId,
-    };
+    }
 
     const newState: ComplementRaceState = {
       ...state,
@@ -614,44 +586,38 @@ export class ComplementRaceValidator
           score: player.score + points,
         },
       },
-    };
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
-  private validateStartNewRoute(
-    state: ComplementRaceState,
-    routeNumber: number,
-  ): ValidationResult {
-    if (state.config.style !== "sprint") {
-      return { valid: false, error: "Routes only available in sprint mode" };
+  private validateStartNewRoute(state: ComplementRaceState, routeNumber: number): ValidationResult {
+    if (state.config.style !== 'sprint') {
+      return { valid: false, error: 'Routes only available in sprint mode' }
     }
 
     // Reset all player positions to 0 for new route (client handles momentum reset)
-    const resetPlayers: Record<string, PlayerState> = {};
+    const resetPlayers: Record<string, PlayerState> = {}
     for (const [playerId, player] of Object.entries(state.players)) {
       resetPlayers[playerId] = {
         ...player,
         position: 0, // Server position not used in sprint; client will reset
         passengers: [], // Clear any remaining passengers
-      };
+      }
     }
 
     // Generate new passengers
-    const newPassengers = this.generatePassengers(
-      state.config.passengerCount,
-      state.stations,
-    );
+    const newPassengers = this.generatePassengers(state.config.passengerCount, state.stations)
 
     // Calculate maxConcurrentPassengers based on the new route's passenger layout
     const maxConcurrentPassengers = Math.max(
       1,
-      this.calculateMaxConcurrentPassengers(newPassengers, state.stations),
-    );
+      this.calculateMaxConcurrentPassengers(newPassengers, state.stations)
+    )
 
     console.log(
-      `[Route ${routeNumber}] Calculated maxConcurrentPassengers: ${maxConcurrentPassengers} for ${newPassengers.length} passengers`,
-    );
+      `[Route ${routeNumber}] Calculated maxConcurrentPassengers: ${maxConcurrentPassengers} for ${newPassengers.length} passengers`
+    )
 
     const newState: ComplementRaceState = {
       ...state,
@@ -663,9 +629,9 @@ export class ComplementRaceValidator
         ...state.config,
         maxConcurrentPassengers, // Update config with calculated value
       },
-    };
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   // ==========================================================================
@@ -674,64 +640,62 @@ export class ComplementRaceValidator
 
   private validateNextQuestion(state: ComplementRaceState): ValidationResult {
     // Generate new questions for all players
-    const newQuestions: Record<string, ComplementQuestion> = {};
+    const newQuestions: Record<string, ComplementQuestion> = {}
     for (const playerId of state.activePlayers) {
-      newQuestions[playerId] = this.generateQuestion(state.config.mode);
+      newQuestions[playerId] = this.generateQuestion(state.config.mode)
     }
 
     const newState: ComplementRaceState = {
       ...state,
       currentQuestions: newQuestions,
       questionStartTime: Date.now(),
-    };
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   private validateEndGame(state: ComplementRaceState): ValidationResult {
     const newState: ComplementRaceState = {
       ...state,
-      gamePhase: "results",
+      gamePhase: 'results',
       raceEndTime: Date.now(),
       leaderboard: this.calculateLeaderboard(state),
-    };
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   private validatePlayAgain(state: ComplementRaceState): ValidationResult {
-    if (state.gamePhase !== "results") {
-      return { valid: false, error: "Game not finished" };
+    if (state.gamePhase !== 'results') {
+      return { valid: false, error: 'Game not finished' }
     }
 
     // Reset to lobby with same players
-    return this.validateGoToSetup(state);
+    return this.validateGoToSetup(state)
   }
 
   private validateGoToSetup(state: ComplementRaceState): ValidationResult {
-    const newState: ComplementRaceState = this.getInitialState(state.config);
+    const newState: ComplementRaceState = this.getInitialState(state.config)
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   // ==========================================================================
   // Helper Methods
   // ==========================================================================
 
-  private generateQuestion(
-    mode: "friends5" | "friends10" | "mixed",
-  ): ComplementQuestion {
-    let targetSum: number;
-    if (mode === "friends5") {
-      targetSum = 5;
-    } else if (mode === "friends10") {
-      targetSum = 10;
+  private generateQuestion(mode: 'friends5' | 'friends10' | 'mixed'): ComplementQuestion {
+    let targetSum: number
+    if (mode === 'friends5') {
+      targetSum = 5
+    } else if (mode === 'friends10') {
+      targetSum = 10
     } else {
-      targetSum = Math.random() < 0.5 ? 5 : 10;
+      targetSum = Math.random() < 0.5 ? 5 : 10
     }
 
-    const number = Math.floor(Math.random() * targetSum);
-    const correctAnswer = targetSum - number;
+    const number = Math.floor(Math.random() * targetSum)
+    const correctAnswer = targetSum - number
 
     return {
       id: `q-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
@@ -740,14 +704,14 @@ export class ComplementRaceValidator
       correctAnswer,
       showAsAbacus: Math.random() < 0.5, // 50/50 random display
       timestamp: Date.now(),
-    };
+    }
   }
 
   private calculateAnswerScore(
     correct: boolean,
     responseTime: number,
     currentStreak: number,
-    gameStyle: "practice" | "sprint" | "survival",
+    gameStyle: 'practice' | 'sprint' | 'survival'
   ): AnswerValidation {
     if (!correct) {
       return {
@@ -757,21 +721,21 @@ export class ComplementRaceValidator
         streakBonus: 0,
         totalPoints: 0,
         newStreak: 0,
-      };
+      }
     }
 
     // Base points
-    const basePoints = 100;
+    const basePoints = 100
 
     // Speed bonus (max 300 for <500ms, down to 0 at 3000ms)
-    const speedBonus = Math.max(0, 300 - Math.floor(responseTime / 100));
+    const speedBonus = Math.max(0, 300 - Math.floor(responseTime / 100))
 
     // Streak bonus
-    const newStreak = currentStreak + 1;
-    const streakBonus = newStreak * 50;
+    const newStreak = currentStreak + 1
+    const streakBonus = newStreak * 50
 
     // Total
-    const totalPoints = basePoints + speedBonus + streakBonus;
+    const totalPoints = basePoints + speedBonus + streakBonus
 
     return {
       correct: true,
@@ -780,59 +744,52 @@ export class ComplementRaceValidator
       streakBonus,
       totalPoints,
       newStreak,
-    };
+    }
   }
 
   private generatePassengers(count: number, stations: Station[]): Passenger[] {
-    const passengers: Passenger[] = [];
-    const usedCombos = new Set<string>();
+    const passengers: Passenger[] = []
+    const usedCombos = new Set<string>()
 
     for (let i = 0; i < count; i++) {
-      let name: string;
-      let avatar: string;
-      let comboKey: string;
+      let name: string
+      let avatar: string
+      let comboKey: string
 
       // Keep trying until we get a unique name/avatar combo
       do {
-        const nameIndex = Math.floor(Math.random() * PASSENGER_NAMES.length);
-        const avatarIndex = Math.floor(
-          Math.random() * PASSENGER_AVATARS.length,
-        );
-        name = PASSENGER_NAMES[nameIndex];
-        avatar = PASSENGER_AVATARS[avatarIndex];
-        comboKey = `${name}-${avatar}`;
-      } while (usedCombos.has(comboKey) && usedCombos.size < 100); // Prevent infinite loop
+        const nameIndex = Math.floor(Math.random() * PASSENGER_NAMES.length)
+        const avatarIndex = Math.floor(Math.random() * PASSENGER_AVATARS.length)
+        name = PASSENGER_NAMES[nameIndex]
+        avatar = PASSENGER_AVATARS[avatarIndex]
+        comboKey = `${name}-${avatar}`
+      } while (usedCombos.has(comboKey) && usedCombos.size < 100) // Prevent infinite loop
 
-      usedCombos.add(comboKey);
+      usedCombos.add(comboKey)
 
       // Pick origin and destination stations
       // KEY: Destination must be AHEAD of origin (higher position on track)
       // This ensures passengers travel forward, creating better overlap
-      let originStation: Station;
-      let destinationStation: Station;
+      let originStation: Station
+      let destinationStation: Station
 
       if (Math.random() < 0.4 || stations.length < 3) {
         // 40% chance to start at depot (first station)
-        originStation = stations[0];
+        originStation = stations[0]
         // Pick any station ahead as destination
-        const stationsAhead = stations.slice(1);
-        destinationStation =
-          stationsAhead[Math.floor(Math.random() * stationsAhead.length)];
+        const stationsAhead = stations.slice(1)
+        destinationStation = stationsAhead[Math.floor(Math.random() * stationsAhead.length)]
       } else {
         // Start at a random non-depot, non-final station
-        const nonDepotStations = stations.slice(1, -1); // Exclude depot and final station
-        originStation =
-          nonDepotStations[Math.floor(Math.random() * nonDepotStations.length)];
+        const nonDepotStations = stations.slice(1, -1) // Exclude depot and final station
+        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,
-        );
-        destinationStation =
-          stationsAhead[Math.floor(Math.random() * stationsAhead.length)];
+        const stationsAhead = stations.filter((s) => s.position > originStation.position)
+        destinationStation = stationsAhead[Math.floor(Math.random() * stationsAhead.length)]
       }
 
       // 30% chance of urgent
-      const isUrgent = Math.random() < 0.3;
+      const isUrgent = Math.random() < 0.3
 
       const passenger = {
         id: `p-${Date.now()}-${i}-${Math.random().toString(36).substr(2, 9)}`,
@@ -845,172 +802,161 @@ export class ComplementRaceValidator
         deliveredBy: null,
         carIndex: null, // Not boarded yet
         timestamp: Date.now(),
-      };
+      }
 
-      passengers.push(passenger);
+      passengers.push(passenger)
 
       console.log(
-        `[Passenger ${i + 1}/${count}] ${name} waiting at ${originStation.emoji} ${originStation.name} (pos ${originStation.position}) → ${destinationStation.emoji} ${destinationStation.name} (pos ${destinationStation.position}) ${isUrgent ? "⚡ URGENT" : ""}`,
-      );
+        `[Passenger ${i + 1}/${count}] ${name} waiting at ${originStation.emoji} ${originStation.name} (pos ${originStation.position}) → ${destinationStation.emoji} ${destinationStation.name} (pos ${destinationStation.position}) ${isUrgent ? '⚡ URGENT' : ''}`
+      )
     }
 
-    console.log(`[Generated ${passengers.length} passengers total]`);
-    return passengers;
+    console.log(`[Generated ${passengers.length} passengers total]`)
+    return passengers
   }
 
   /**
    * Calculate the maximum number of passengers that will be on the train
    * concurrently at any given moment during the route
    */
-  private calculateMaxConcurrentPassengers(
-    passengers: Passenger[],
-    stations: Station[],
-  ): number {
+  private calculateMaxConcurrentPassengers(passengers: Passenger[], stations: Station[]): number {
     // Create events for boarding and delivery
     interface StationEvent {
-      position: number;
-      isBoarding: boolean; // true = board, false = delivery
+      position: number
+      isBoarding: boolean // true = board, false = delivery
     }
 
-    const events: StationEvent[] = [];
+    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 });
-        events.push({ position: destStation.position, isBoarding: false });
+        events.push({ position: originStation.position, isBoarding: true })
+        events.push({ position: destStation.position, isBoarding: false })
       }
     }
 
     // Sort events by position, with deliveries before boardings at the same position
     events.sort((a, b) => {
-      if (a.position !== b.position) return a.position - b.position;
+      if (a.position !== b.position) return a.position - b.position
       // At same position, deliveries happen before boarding
-      return a.isBoarding ? 1 : -1;
-    });
+      return a.isBoarding ? 1 : -1
+    })
 
     // Track current passenger count and maximum
-    let currentCount = 0;
-    let maxCount = 0;
+    let currentCount = 0
+    let maxCount = 0
 
     for (const event of events) {
       if (event.isBoarding) {
-        currentCount++;
-        maxCount = Math.max(maxCount, currentCount);
+        currentCount++
+        maxCount = Math.max(maxCount, currentCount)
       } else {
-        currentCount--;
+        currentCount--
       }
     }
 
-    return maxCount;
+    return maxCount
   }
 
   private checkWinCondition(state: ComplementRaceState): string | null {
-    const { config, players } = state;
+    const { config, players } = state
 
     // Infinite mode: Never end the game
-    if (config.winCondition === "infinite") {
-      return null;
+    if (config.winCondition === 'infinite') {
+      return null
     }
 
     // Practice mode: First to reach goal
-    if (config.style === "practice") {
+    if (config.style === 'practice') {
       for (const [playerId, player] of Object.entries(players)) {
         if (player.correctAnswers >= config.raceGoal) {
-          return playerId;
+          return playerId
         }
       }
       // AI wins handled client-side via useAIRacers hook
     }
 
     // Sprint mode: Check route-based, score-based, or time-based win conditions
-    if (config.style === "sprint") {
-      if (config.winCondition === "score-based" && config.targetScore) {
+    if (config.style === 'sprint') {
+      if (config.winCondition === 'score-based' && config.targetScore) {
         for (const [playerId, player] of Object.entries(players)) {
           if (player.score >= config.targetScore) {
-            return playerId;
+            return playerId
           }
         }
       }
 
-      if (config.winCondition === "route-based" && config.routeCount) {
+      if (config.winCondition === 'route-based' && config.routeCount) {
         if (state.currentRoute >= config.routeCount) {
           // Find player with highest score
-          let maxScore = 0;
-          let winner: string | null = null;
+          let maxScore = 0
+          let winner: string | null = null
           for (const [playerId, player] of Object.entries(players)) {
             if (player.score > maxScore) {
-              maxScore = player.score;
-              winner = playerId;
+              maxScore = player.score
+              winner = playerId
             }
           }
-          return winner;
+          return winner
         }
       }
 
-      if (config.winCondition === "time-based" && config.timeLimit) {
-        const elapsed = state.routeStartTime
-          ? (Date.now() - state.routeStartTime) / 1000
-          : 0;
+      if (config.winCondition === 'time-based' && config.timeLimit) {
+        const elapsed = state.routeStartTime ? (Date.now() - state.routeStartTime) / 1000 : 0
         if (elapsed >= config.timeLimit) {
           // Find player with most deliveries
-          let maxDeliveries = 0;
-          let winner: string | null = null;
+          let maxDeliveries = 0
+          let winner: string | null = null
           for (const [playerId, player] of Object.entries(players)) {
             if (player.deliveredPassengers > maxDeliveries) {
-              maxDeliveries = player.deliveredPassengers;
-              winner = playerId;
+              maxDeliveries = player.deliveredPassengers
+              winner = playerId
             }
           }
-          return winner;
+          return winner
         }
       }
     }
 
     // Survival mode: Most laps in time limit
-    if (config.style === "survival" && config.timeLimit) {
-      const elapsed = state.raceStartTime
-        ? (Date.now() - state.raceStartTime) / 1000
-        : 0;
+    if (config.style === 'survival' && config.timeLimit) {
+      const elapsed = state.raceStartTime ? (Date.now() - state.raceStartTime) / 1000 : 0
       if (elapsed >= config.timeLimit) {
         // Find player with highest position (most laps)
-        let maxPosition = 0;
-        let winner: string | null = null;
+        let maxPosition = 0
+        let winner: string | null = null
 
         for (const [playerId, player] of Object.entries(players)) {
           if (player.position > maxPosition) {
-            maxPosition = player.position;
-            winner = playerId;
+            maxPosition = player.position
+            winner = playerId
           }
         }
         // AI wins handled client-side via useAIRacers hook
 
-        return winner;
+        return winner
       }
     }
 
-    return null;
+    return null
   }
 
   private calculateLeaderboard(state: ComplementRaceState): Array<{
-    playerId: string;
-    score: number;
-    rank: number;
+    playerId: string
+    score: number
+    rank: number
   }> {
     const entries = Object.values(state.players)
       .map((p) => ({ playerId: p.id, score: p.score }))
-      .sort((a, b) => b.score - a.score);
+      .sort((a, b) => b.score - a.score)
 
     return entries.map((entry, index) => ({
       ...entry,
       rank: index + 1,
-    }));
+    }))
   }
 
   // ==========================================================================
@@ -1018,15 +964,15 @@ export class ComplementRaceValidator
   // ==========================================================================
 
   isGameComplete(state: ComplementRaceState): boolean {
-    return state.gamePhase === "results" && state.winner !== null;
+    return state.gamePhase === 'results' && state.winner !== null
   }
 
   getInitialState(config: unknown): ComplementRaceState {
-    const typedConfig = config as ComplementRaceConfig;
+    const typedConfig = config as ComplementRaceConfig
 
     return {
       config: typedConfig,
-      gamePhase: "setup",
+      gamePhase: 'setup',
       activePlayers: [],
       playerMetadata: {},
       players: {},
@@ -1043,8 +989,8 @@ export class ComplementRaceValidator
       aiOpponents: [],
       gameStartTime: null,
       gameEndTime: null,
-    };
+    }
   }
 }
 
-export const complementRaceValidator = new ComplementRaceValidator();
+export const complementRaceValidator = new ComplementRaceValidator()
diff --git a/apps/web/src/arcade-games/complement-race/components/GameComponent.tsx b/apps/web/src/arcade-games/complement-race/components/GameComponent.tsx
index 4d68f0eb..c02a17c5 100644
--- a/apps/web/src/arcade-games/complement-race/components/GameComponent.tsx
+++ b/apps/web/src/arcade-games/complement-race/components/GameComponent.tsx
@@ -3,57 +3,57 @@
  * Wraps the existing ComplementRaceGame with PageWithNav for arcade play
  */
 
-"use client";
+'use client'
 
-import { useRouter } from "next/navigation";
-import { PageWithNav } from "@/components/PageWithNav";
-import { ComplementRaceGame } from "@/app/arcade/complement-race/components/ComplementRaceGame";
-import { useComplementRace } from "../Provider";
+import { useRouter } from 'next/navigation'
+import { PageWithNav } from '@/components/PageWithNav'
+import { ComplementRaceGame } from '@/app/arcade/complement-race/components/ComplementRaceGame'
+import { useComplementRace } from '../Provider'
 
 export function GameComponent() {
-  const router = useRouter();
-  const { state, exitSession, goToSetup } = useComplementRace();
+  const router = useRouter()
+  const { state, exitSession, goToSetup } = useComplementRace()
 
   // Get display name based on style
   const getNavTitle = () => {
     switch (state.style) {
-      case "sprint":
-        return "Steam Sprint";
-      case "survival":
-        return "Endless Circuit";
-      case "practice":
+      case 'sprint':
+        return 'Steam Sprint'
+      case 'survival':
+        return 'Endless Circuit'
+      case 'practice':
       default:
-        return "Complement Race";
+        return 'Complement Race'
     }
-  };
+  }
 
   // Get emoji based on style
   const getNavEmoji = () => {
     switch (state.style) {
-      case "sprint":
-        return "🚂";
-      case "survival":
-        return "♾️";
-      case "practice":
+      case 'sprint':
+        return '🚂'
+      case 'survival':
+        return '♾️'
+      case 'practice':
       default:
-        return "🏁";
+        return '🏁'
     }
-  };
+  }
 
   return (
     <PageWithNav
       navTitle={getNavTitle()}
       navEmoji={getNavEmoji()}
-      emphasizePlayerSelection={state.gamePhase === "controls"}
+      emphasizePlayerSelection={state.gamePhase === 'controls'}
       onExitSession={() => {
-        exitSession();
-        router.push("/arcade");
+        exitSession()
+        router.push('/arcade')
       }}
       onNewGame={() => {
-        goToSetup();
+        goToSetup()
       }}
     >
       <ComplementRaceGame />
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/complement-race/index.tsx b/apps/web/src/arcade-games/complement-race/index.tsx
index 66c5d654..d56202b2 100644
--- a/apps/web/src/arcade-games/complement-race/index.tsx
+++ b/apps/web/src/arcade-games/complement-race/index.tsx
@@ -3,43 +3,34 @@
  * Complete integration into the arcade system with multiplayer support
  */
 
-import { defineGame, getGameTheme } from "@/lib/arcade/game-sdk";
-import type { GameManifest } from "@/lib/arcade/game-sdk";
-import { complementRaceValidator } from "./Validator";
-import { ComplementRaceProvider } from "./Provider";
-import { GameComponent } from "./components/GameComponent";
-import type {
-  ComplementRaceConfig,
-  ComplementRaceState,
-  ComplementRaceMove,
-} from "./types";
+import { defineGame, getGameTheme } from '@/lib/arcade/game-sdk'
+import type { GameManifest } from '@/lib/arcade/game-sdk'
+import { complementRaceValidator } from './Validator'
+import { ComplementRaceProvider } from './Provider'
+import { GameComponent } from './components/GameComponent'
+import type { ComplementRaceConfig, ComplementRaceState, ComplementRaceMove } from './types'
 
 // Game manifest
 const manifest: GameManifest = {
-  name: "complement-race",
-  displayName: "Speed Complement Race 🏁",
-  description: "Race against opponents while solving complement problems",
+  name: 'complement-race',
+  displayName: 'Speed Complement Race 🏁',
+  description: 'Race against opponents while solving complement problems',
   longDescription:
-    "Battle AI opponents or real players in an epic math race! Find complement numbers (friends of 5 and 10) to build momentum and speed ahead. Choose from three exciting modes: Practice (linear race), Sprint (train journey with passengers), or Survival (infinite laps). Perfect for multiplayer competition!",
+    'Battle AI opponents or real players in an epic math race! Find complement numbers (friends of 5 and 10) to build momentum and speed ahead. Choose from three exciting modes: Practice (linear race), Sprint (train journey with passengers), or Survival (infinite laps). Perfect for multiplayer competition!',
   maxPlayers: 4,
-  icon: "🏁",
-  chips: [
-    "👥 1-4 Players",
-    "🚂 Sprint Mode",
-    "🤖 AI Opponents",
-    "🔥 Speed Challenge",
-  ],
-  ...getGameTheme("blue"),
-  difficulty: "Intermediate",
+  icon: '🏁',
+  chips: ['👥 1-4 Players', '🚂 Sprint Mode', '🤖 AI Opponents', '🔥 Speed Challenge'],
+  ...getGameTheme('blue'),
+  difficulty: 'Intermediate',
   available: true,
-};
+}
 
 // Default configuration
 const defaultConfig: ComplementRaceConfig = {
-  style: "practice",
-  mode: "mixed",
-  complementDisplay: "random",
-  timeoutSetting: "normal",
+  style: 'practice',
+  mode: 'mixed',
+  complementDisplay: 'random',
+  timeoutSetting: 'normal',
   enableAI: true,
   aiOpponentCount: 2,
   maxPlayers: 4,
@@ -48,26 +39,24 @@ const defaultConfig: ComplementRaceConfig = {
   passengerCount: 6,
   maxConcurrentPassengers: 3,
   raceGoal: 20,
-  winCondition: "infinite", // Sprint mode is infinite by default (Steam Sprint)
+  winCondition: 'infinite', // Sprint mode is infinite by default (Steam Sprint)
   routeCount: 3,
   targetScore: 100,
   timeLimit: 300,
-};
+}
 
 // Config validation function
-function validateComplementRaceConfig(
-  config: unknown,
-): config is ComplementRaceConfig {
-  const c = config as any;
+function validateComplementRaceConfig(config: unknown): config is ComplementRaceConfig {
+  const c = config as any
   return (
-    typeof c === "object" &&
+    typeof c === 'object' &&
     c !== null &&
-    ["practice", "sprint", "survival"].includes(c.style) &&
-    ["friends5", "friends10", "mixed"].includes(c.mode) &&
-    typeof c.maxPlayers === "number" &&
+    ['practice', 'sprint', 'survival'].includes(c.style) &&
+    ['friends5', 'friends10', 'mixed'].includes(c.mode) &&
+    typeof c.maxPlayers === 'number' &&
     c.maxPlayers >= 1 &&
     c.maxPlayers <= 4
-  );
+  )
 }
 
 // Export game definition with proper generics
@@ -82,12 +71,12 @@ export const complementRaceGame = defineGame<
   validator: complementRaceValidator,
   defaultConfig,
   validateConfig: validateComplementRaceConfig,
-});
+})
 
 // Re-export types for convenience
 export type {
   ComplementRaceConfig,
   ComplementRaceState,
   ComplementRaceMove,
-} from "./types";
-export { complementRaceValidator } from "./Validator";
+} from './types'
+export { complementRaceValidator } from './Validator'
diff --git a/apps/web/src/arcade-games/complement-race/types.ts b/apps/web/src/arcade-games/complement-race/types.ts
index 04a3c1d8..378d7250 100644
--- a/apps/web/src/arcade-games/complement-race/types.ts
+++ b/apps/web/src/arcade-games/complement-race/types.ts
@@ -2,47 +2,47 @@
  * Type definitions for Complement Race multiplayer game
  */
 
-import type { GameMove as BaseGameMove } from "@/lib/arcade/game-sdk";
-import type { ComplementRaceGameConfig } from "@/lib/arcade/game-configs";
+import type { GameMove as BaseGameMove } from '@/lib/arcade/game-sdk'
+import type { ComplementRaceGameConfig } from '@/lib/arcade/game-configs'
 
 // ============================================================================
 // Configuration Types
 // ============================================================================
 
-export type { ComplementRaceGameConfig as ComplementRaceConfig } from "@/lib/arcade/game-configs";
+export type { ComplementRaceGameConfig as ComplementRaceConfig } from '@/lib/arcade/game-configs'
 
 // ============================================================================
 // Question & Game Mechanic Types
 // ============================================================================
 
 export interface ComplementQuestion {
-  id: string;
-  number: number; // The visible number (e.g., 3 in "3 + ? = 5")
-  targetSum: number; // 5 or 10
-  correctAnswer: number; // The missing number
-  showAsAbacus: boolean; // Display as abacus visualization?
-  timestamp: number; // When question was generated
+  id: string
+  number: number // The visible number (e.g., 3 in "3 + ? = 5")
+  targetSum: number // 5 or 10
+  correctAnswer: number // The missing number
+  showAsAbacus: boolean // Display as abacus visualization?
+  timestamp: number // When question was generated
 }
 
 export interface Station {
-  id: string;
-  name: string;
-  position: number; // 0-100% along track
-  icon: string;
-  emoji: string; // Alias for icon (for backward compatibility)
+  id: string
+  name: string
+  position: number // 0-100% along track
+  icon: string
+  emoji: string // Alias for icon (for backward compatibility)
 }
 
 export interface Passenger {
-  id: string;
-  name: string;
-  avatar: string;
-  originStationId: string;
-  destinationStationId: string;
-  isUrgent: boolean; // Urgent passengers worth 2x points
-  claimedBy: string | null; // playerId who picked up this passenger (null = unclaimed)
-  deliveredBy: string | null; // playerId who delivered (null = not delivered yet)
-  carIndex: number | null; // Physical car index (0-N) where passenger is seated (null = not boarded)
-  timestamp: number; // When passenger spawned
+  id: string
+  name: string
+  avatar: string
+  originStationId: string
+  destinationStationId: string
+  isUrgent: boolean // Urgent passengers worth 2x points
+  claimedBy: string | null // playerId who picked up this passenger (null = unclaimed)
+  deliveredBy: string | null // playerId who delivered (null = not delivered yet)
+  carIndex: number | null // Physical car index (0-N) where passenger is seated (null = not boarded)
+  timestamp: number // When passenger spawned
 }
 
 // ============================================================================
@@ -50,29 +50,29 @@ export interface Passenger {
 // ============================================================================
 
 export interface PlayerState {
-  id: string;
-  name: string;
-  color: string; // For ghost train visualization
+  id: string
+  name: string
+  color: string // For ghost train visualization
 
   // Scores
-  score: number;
-  streak: number;
-  bestStreak: number;
-  correctAnswers: number;
-  totalQuestions: number;
+  score: number
+  streak: number
+  bestStreak: number
+  correctAnswers: number
+  totalQuestions: number
 
   // Position & Progress
-  position: number; // 0-100% for practice/survival only (sprint mode: client-side)
+  position: number // 0-100% for practice/survival only (sprint mode: client-side)
 
   // Current state
-  isReady: boolean;
-  isActive: boolean;
-  currentAnswer: string | null; // Their current typed answer (for "thinking" indicator)
-  lastAnswerTime: number | null;
+  isReady: boolean
+  isActive: boolean
+  currentAnswer: string | null // Their current typed answer (for "thinking" indicator)
+  lastAnswerTime: number | null
 
   // Sprint mode: passengers currently on this player's train
-  passengers: string[]; // Array of passenger IDs (max 3)
-  deliveredPassengers: number; // Total count
+  passengers: string[] // Array of passenger IDs (max 3)
+  deliveredPassengers: number // Total count
 }
 
 // ============================================================================
@@ -81,49 +81,49 @@ export interface PlayerState {
 
 export interface ComplementRaceState {
   // Configuration (from room settings)
-  config: ComplementRaceGameConfig;
+  config: ComplementRaceGameConfig
 
   // Game Phase
-  gamePhase: "setup" | "lobby" | "countdown" | "playing" | "results";
+  gamePhase: 'setup' | 'lobby' | 'countdown' | 'playing' | 'results'
 
   // Players
-  activePlayers: string[]; // Array of player IDs
-  playerMetadata: Record<string, { name: string; color: string }>; // playerId -> metadata
-  players: Record<string, PlayerState>; // playerId -> state
+  activePlayers: string[] // Array of player IDs
+  playerMetadata: Record<string, { name: string; color: string }> // playerId -> metadata
+  players: Record<string, PlayerState> // playerId -> state
 
   // Current Question (shared for competitive, individual for each player)
-  currentQuestions: Record<string, ComplementQuestion>; // playerId -> question
-  questionStartTime: number; // When current question batch started
+  currentQuestions: Record<string, ComplementQuestion> // playerId -> question
+  questionStartTime: number // When current question batch started
 
   // Sprint Mode: Shared passenger pool
-  stations: Station[];
-  passengers: Passenger[]; // All passengers (claimed and unclaimed)
-  currentRoute: number;
-  routeStartTime: number | null;
+  stations: Station[]
+  passengers: Passenger[] // All passengers (claimed and unclaimed)
+  currentRoute: number
+  routeStartTime: number | null
 
   // Race Progress
-  raceStartTime: number | null;
-  raceEndTime: number | null;
-  winner: string | null; // playerId of winner
-  leaderboard: Array<{ playerId: string; score: number; rank: number }>;
+  raceStartTime: number | null
+  raceEndTime: number | null
+  winner: string | null // playerId of winner
+  leaderboard: Array<{ playerId: string; score: number; rank: number }>
 
   // AI Opponents (optional)
   aiOpponents: Array<{
-    id: string;
-    name: string;
-    personality: "competitive" | "analytical";
-    position: number;
-    speed: number;
-    lastComment: string | null;
-    lastCommentTime: number;
-  }>;
+    id: string
+    name: string
+    personality: 'competitive' | 'analytical'
+    position: number
+    speed: number
+    lastComment: string | null
+    lastCommentTime: number
+  }>
 
   // Timing
-  gameStartTime: number | null;
-  gameEndTime: number | null;
+  gameStartTime: number | null
+  gameEndTime: number | null
 
   // Index signature to satisfy GameState constraint
-  [key: string]: unknown;
+  [key: string]: unknown
 }
 
 // ============================================================================
@@ -132,57 +132,58 @@ export interface ComplementRaceState {
 
 export type ComplementRaceMove = BaseGameMove &
   // Setup phase
-  (| {
-        type: "START_GAME";
-        data: {
-          activePlayers: string[];
-          playerMetadata: Record<string, unknown>;
-        };
-      }
-    | { type: "SET_READY"; data: { ready: boolean } }
+  (
     | {
-        type: "SET_CONFIG";
-        data: { field: keyof ComplementRaceGameConfig; value: unknown };
+        type: 'START_GAME'
+        data: {
+          activePlayers: string[]
+          playerMetadata: Record<string, unknown>
+        }
+      }
+    | { type: 'SET_READY'; data: { ready: boolean } }
+    | {
+        type: 'SET_CONFIG'
+        data: { field: keyof ComplementRaceGameConfig; value: unknown }
       }
 
     // Playing phase
-    | { type: "SUBMIT_ANSWER"; data: { answer: number; responseTime: number } }
-    | { type: "UPDATE_INPUT"; data: { input: string } } // Show "thinking" indicator
-    | { type: "UPDATE_POSITION"; data: { position: number } } // Sprint mode: sync train position
+    | { type: 'SUBMIT_ANSWER'; data: { answer: number; responseTime: number } }
+    | { type: 'UPDATE_INPUT'; data: { input: string } } // Show "thinking" indicator
+    | { type: 'UPDATE_POSITION'; data: { position: number } } // Sprint mode: sync train position
     | {
-        type: "CLAIM_PASSENGER";
-        data: { passengerId: string; carIndex: number };
+        type: 'CLAIM_PASSENGER'
+        data: { passengerId: string; carIndex: number }
       } // Sprint mode: pickup
-    | { type: "DELIVER_PASSENGER"; data: { passengerId: string } } // Sprint mode: delivery
+    | { type: 'DELIVER_PASSENGER'; data: { passengerId: string } } // Sprint mode: delivery
 
     // Game flow
-    | { type: "NEXT_QUESTION"; data: Record<string, never> }
-    | { type: "END_GAME"; data: Record<string, never> }
-    | { type: "PLAY_AGAIN"; data: Record<string, never> }
-    | { type: "GO_TO_SETUP"; data: Record<string, never> }
+    | { type: 'NEXT_QUESTION'; data: Record<string, never> }
+    | { type: 'END_GAME'; data: Record<string, never> }
+    | { type: 'PLAY_AGAIN'; data: Record<string, never> }
+    | { type: 'GO_TO_SETUP'; data: Record<string, never> }
 
     // Sprint mode route progression
-    | { type: "START_NEW_ROUTE"; data: { routeNumber: number } }
-  );
+    | { type: 'START_NEW_ROUTE'; data: { routeNumber: number } }
+  )
 
 // ============================================================================
 // Helper Types
 // ============================================================================
 
 export interface AnswerValidation {
-  correct: boolean;
-  responseTime: number;
-  speedBonus: number;
-  streakBonus: number;
-  totalPoints: number;
-  newStreak: number;
+  correct: boolean
+  responseTime: number
+  speedBonus: number
+  streakBonus: number
+  totalPoints: number
+  newStreak: number
 }
 
 export interface PassengerAction {
-  type: "claim" | "deliver";
-  passengerId: string;
-  playerId: string;
-  station: Station;
-  points: number;
-  timestamp: number;
+  type: 'claim' | 'deliver'
+  passengerId: string
+  playerId: string
+  station: Station
+  points: number
+  timestamp: number
 }
diff --git a/apps/web/src/arcade-games/matching/Provider.tsx b/apps/web/src/arcade-games/matching/Provider.tsx
index f9081a8c..c8dac8df 100644
--- a/apps/web/src/arcade-games/matching/Provider.tsx
+++ b/apps/web/src/arcade-games/matching/Provider.tsx
@@ -1,44 +1,37 @@
-"use client";
+'use client'
 
-import {
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  createContext,
-  useContext,
-} from "react";
-import { useArcadeSession } from "@/hooks/useArcadeSession";
-import { useRoomData, useUpdateGameConfig } from "@/hooks/useRoomData";
-import { useViewerId } from "@/hooks/useViewerId";
+import { type ReactNode, useCallback, useEffect, useMemo, createContext, useContext } from 'react'
+import { useArcadeSession } from '@/hooks/useArcadeSession'
+import { useRoomData, useUpdateGameConfig } from '@/hooks/useRoomData'
+import { useViewerId } from '@/hooks/useViewerId'
 import {
   buildPlayerMetadata as buildPlayerMetadataUtil,
   buildPlayerOwnershipFromRoomData,
-} from "@/lib/arcade/player-ownership.client";
-import type { GameMove } from "@/lib/arcade/validation";
-import { useGameMode } from "@/contexts/GameModeContext";
-import { generateGameCards } from "./utils/cardGeneration";
+} from '@/lib/arcade/player-ownership.client'
+import type { GameMove } from '@/lib/arcade/validation'
+import { useGameMode } from '@/contexts/GameModeContext'
+import { generateGameCards } from './utils/cardGeneration'
 import type {
   GameMode,
   GameStatistics,
   MatchingContextValue,
   MatchingState,
   MatchingMove,
-} from "./types";
+} from './types'
 
 // Create context for Matching game
-const MatchingContext = createContext<MatchingContextValue | null>(null);
+const MatchingContext = createContext<MatchingContextValue | null>(null)
 
 // Initial state
 const initialState: MatchingState = {
   cards: [],
   gameCards: [],
   flippedCards: [],
-  gameType: "abacus-numeral",
+  gameType: 'abacus-numeral',
   difficulty: 6,
   turnTimer: 30,
-  gamePhase: "setup",
-  currentPlayer: "", // Will be set to first player ID on START_GAME
+  gamePhase: 'setup',
+  currentPlayer: '', // Will be set to first player ID on START_GAME
   matchedPairs: 0,
   totalPairs: 6,
   moves: 0,
@@ -60,23 +53,20 @@ const initialState: MatchingState = {
   pausedGameState: undefined,
   // HOVER: Initialize hover state
   playerHovers: {},
-};
+}
 
 /**
  * Optimistic move application (client-side prediction)
  * The server will validate and send back the authoritative state
  */
-function applyMoveOptimistically(
-  state: MatchingState,
-  move: GameMove,
-): MatchingState {
-  const typedMove = move as MatchingMove;
+function applyMoveOptimistically(state: MatchingState, move: GameMove): MatchingState {
+  const typedMove = move as MatchingMove
   switch (typedMove.type) {
-    case "START_GAME":
+    case 'START_GAME':
       // Generate cards and initialize game
       return {
         ...state,
-        gamePhase: "playing",
+        gamePhase: 'playing',
         gameCards: typedMove.data.cards,
         cards: typedMove.data.cards,
         flippedCards: [],
@@ -84,15 +74,15 @@ function applyMoveOptimistically(
         moves: 0,
         scores: typedMove.data.activePlayers.reduce(
           (acc: any, p: string) => ({ ...acc, [p]: 0 }),
-          {},
+          {}
         ),
         consecutiveMatches: typedMove.data.activePlayers.reduce(
           (acc: any, p: string) => ({ ...acc, [p]: 0 }),
-          {},
+          {}
         ),
         activePlayers: typedMove.data.activePlayers,
         playerMetadata: typedMove.data.playerMetadata || {}, // Include player metadata
-        currentPlayer: typedMove.data.activePlayers[0] || "",
+        currentPlayer: typedMove.data.activePlayers[0] || '',
         gameStartTime: Date.now(),
         gameEndTime: null,
         currentMoveStartTime: Date.now(),
@@ -108,35 +98,34 @@ function applyMoveOptimistically(
         },
         pausedGamePhase: undefined,
         pausedGameState: undefined,
-      };
+      }
 
-    case "FLIP_CARD": {
+    case 'FLIP_CARD': {
       // Optimistically flip the card
       // Defensive check: ensure arrays exist
-      const gameCards = state.gameCards || [];
-      const flippedCards = state.flippedCards || [];
+      const gameCards = state.gameCards || []
+      const flippedCards = state.flippedCards || []
 
-      const card = gameCards.find((c) => c.id === typedMove.data.cardId);
-      if (!card) return state;
+      const card = gameCards.find((c) => c.id === typedMove.data.cardId)
+      if (!card) return state
 
-      const newFlippedCards = [...flippedCards, card];
+      const newFlippedCards = [...flippedCards, card]
 
       return {
         ...state,
         flippedCards: newFlippedCards,
-        currentMoveStartTime:
-          flippedCards.length === 0 ? Date.now() : state.currentMoveStartTime,
+        currentMoveStartTime: flippedCards.length === 0 ? Date.now() : state.currentMoveStartTime,
         isProcessingMove: newFlippedCards.length === 2, // Processing if 2 cards flipped
         showMismatchFeedback: false,
-      };
+      }
     }
 
-    case "CLEAR_MISMATCH": {
+    case 'CLEAR_MISMATCH': {
       // Clear hover for all non-current players
-      const clearedHovers = { ...state.playerHovers };
+      const clearedHovers = { ...state.playerHovers }
       for (const playerId of state.activePlayers) {
         if (playerId !== state.currentPlayer) {
-          clearedHovers[playerId] = null;
+          clearedHovers[playerId] = null
         }
       }
 
@@ -148,17 +137,16 @@ function applyMoveOptimistically(
         isProcessingMove: false,
         // Clear hovers for non-current players
         playerHovers: clearedHovers,
-      };
+      }
     }
 
-    case "GO_TO_SETUP": {
+    case 'GO_TO_SETUP': {
       // Return to setup phase - pause game if coming from playing/results
-      const isPausingGame =
-        state.gamePhase === "playing" || state.gamePhase === "results";
+      const isPausingGame = state.gamePhase === 'playing' || state.gamePhase === 'results'
 
       return {
         ...state,
-        gamePhase: "setup",
+        gamePhase: 'setup',
         // PAUSE: Save game state if pausing from active game
         pausedGamePhase: isPausingGame ? state.gamePhase : undefined,
         pausedGameState: isPausingGame
@@ -178,7 +166,7 @@ function applyMoveOptimistically(
         gameCards: [],
         cards: [],
         flippedCards: [],
-        currentPlayer: "",
+        currentPlayer: '',
         matchedPairs: 0,
         moves: 0,
         scores: {},
@@ -192,19 +180,19 @@ function applyMoveOptimistically(
         isProcessingMove: false,
         showMismatchFeedback: false,
         lastMatchedPair: null,
-      };
+      }
     }
 
-    case "SET_CONFIG": {
+    case 'SET_CONFIG': {
       // Update configuration field optimistically
-      const { field, value } = typedMove.data;
-      const clearPausedGame = !!state.pausedGamePhase;
+      const { field, value } = typedMove.data
+      const clearPausedGame = !!state.pausedGamePhase
 
       return {
         ...state,
         [field]: value,
         // Update totalPairs if difficulty changes
-        ...(field === "difficulty" ? { totalPairs: value } : {}),
+        ...(field === 'difficulty' ? { totalPairs: value } : {}),
         // Clear paused game if config changed
         ...(clearPausedGame
           ? {
@@ -213,13 +201,13 @@ function applyMoveOptimistically(
               originalConfig: undefined,
             }
           : {}),
-      };
+      }
     }
 
-    case "RESUME_GAME": {
+    case 'RESUME_GAME': {
       // Resume paused game
       if (!state.pausedGamePhase || !state.pausedGameState) {
-        return state; // No paused game, no-op
+        return state // No paused game, no-op
       }
 
       return {
@@ -238,10 +226,10 @@ function applyMoveOptimistically(
         // Clear paused state
         pausedGamePhase: undefined,
         pausedGameState: undefined,
-      };
+      }
     }
 
-    case "HOVER_CARD": {
+    case 'HOVER_CARD': {
       // Update player hover state for networked presence
       return {
         ...state,
@@ -249,11 +237,11 @@ function applyMoveOptimistically(
           ...state.playerHovers,
           [typedMove.playerId]: typedMove.data.cardId,
         },
-      };
+      }
     }
 
     default:
-      return state;
+      return state
   }
 }
 
@@ -261,25 +249,21 @@ function applyMoveOptimistically(
 // NOTE: This provider should ONLY be used for room-based multiplayer games.
 // For arcade sessions without rooms, use LocalMemoryPairsProvider instead.
 export function MatchingProvider({ children }: { children: ReactNode }) {
-  const { data: viewerId } = useViewerId();
-  const { roomData } = useRoomData(); // Fetch room data for room-based play
-  const {
-    activePlayerCount,
-    activePlayers: activePlayerIds,
-    players,
-  } = useGameMode();
-  const { mutate: updateGameConfig } = useUpdateGameConfig();
+  const { data: viewerId } = useViewerId()
+  const { roomData } = useRoomData() // Fetch room data for room-based play
+  const { activePlayerCount, activePlayers: activePlayerIds, players } = useGameMode()
+  const { mutate: updateGameConfig } = useUpdateGameConfig()
 
   // Get active player IDs directly as strings (UUIDs)
-  const activePlayers = Array.from(activePlayerIds) as string[];
+  const activePlayers = Array.from(activePlayerIds) as string[]
 
   // Derive game mode from active player count
-  const gameMode = activePlayerCount > 1 ? "multiplayer" : "single";
+  const gameMode = activePlayerCount > 1 ? 'multiplayer' : 'single'
 
   // Track roomData.gameConfig changes
   useEffect(() => {
     console.log(
-      "[MatchingProvider] roomData.gameConfig changed:",
+      '[MatchingProvider] roomData.gameConfig changed:',
       JSON.stringify(
         {
           gameConfig: roomData?.gameConfig,
@@ -287,50 +271,42 @@ export function MatchingProvider({ children }: { children: ReactNode }) {
           gameName: roomData?.gameName,
         },
         null,
-        2,
-      ),
-    );
-  }, [roomData?.gameConfig, roomData?.id, roomData?.gameName]);
+        2
+      )
+    )
+  }, [roomData?.gameConfig, roomData?.id, roomData?.gameName])
 
   // Merge saved game config from room with initialState
   // Settings are scoped by game name to preserve settings when switching games
   const mergedInitialState = useMemo(() => {
-    const gameConfig = roomData?.gameConfig as
-      | Record<string, any>
-      | null
-      | undefined;
+    const gameConfig = roomData?.gameConfig as Record<string, any> | null | undefined
     console.log(
-      "[MatchingProvider] Loading settings from database:",
+      '[MatchingProvider] Loading settings from database:',
       JSON.stringify(
         {
           gameConfig,
           roomId: roomData?.id,
         },
         null,
-        2,
-      ),
-    );
+        2
+      )
+    )
 
     if (!gameConfig) {
-      console.log("[MatchingProvider] No gameConfig, using initialState");
-      return initialState;
+      console.log('[MatchingProvider] No gameConfig, using initialState')
+      return initialState
     }
 
     // Get settings for this specific game (matching)
-    const savedConfig = gameConfig.matching as
-      | Record<string, any>
-      | null
-      | undefined;
+    const savedConfig = gameConfig.matching as Record<string, any> | null | undefined
     console.log(
-      "[MatchingProvider] Saved config for matching:",
-      JSON.stringify(savedConfig, null, 2),
-    );
+      '[MatchingProvider] Saved config for matching:',
+      JSON.stringify(savedConfig, null, 2)
+    )
 
     if (!savedConfig) {
-      console.log(
-        "[MatchingProvider] No saved config for matching, using initialState",
-      );
-      return initialState;
+      console.log('[MatchingProvider] No saved config for matching, using initialState')
+      return initialState
     }
 
     const merged = {
@@ -339,9 +315,9 @@ export function MatchingProvider({ children }: { children: ReactNode }) {
       gameType: savedConfig.gameType ?? initialState.gameType,
       difficulty: savedConfig.difficulty ?? initialState.difficulty,
       turnTimer: savedConfig.turnTimer ?? initialState.turnTimer,
-    };
+    }
     console.log(
-      "[MatchingProvider] Merged state:",
+      '[MatchingProvider] Merged state:',
       JSON.stringify(
         {
           gameType: merged.gameType,
@@ -349,12 +325,12 @@ export function MatchingProvider({ children }: { children: ReactNode }) {
           turnTimer: merged.turnTimer,
         },
         null,
-        2,
-      ),
-    );
+        2
+      )
+    )
 
-    return merged;
-  }, [roomData?.gameConfig]);
+    return merged
+  }, [roomData?.gameConfig])
 
   // Arcade session integration WITH room sync
   const {
@@ -363,15 +339,15 @@ export function MatchingProvider({ children }: { children: ReactNode }) {
     connected: _connected,
     exitSession,
   } = useArcadeSession<MatchingState>({
-    userId: viewerId || "",
+    userId: viewerId || '',
     roomId: roomData?.id, // CRITICAL: Pass roomId for network sync across room members
     initialState: mergedInitialState,
     applyMove: applyMoveOptimistically,
-  });
+  })
 
   // Detect state corruption/mismatch (e.g., game type mismatch between sessions)
   const hasStateCorruption =
-    !state.gameCards || !state.flippedCards || !Array.isArray(state.gameCards);
+    !state.gameCards || !state.flippedCards || !Array.isArray(state.gameCards)
 
   // Handle mismatch feedback timeout
   useEffect(() => {
@@ -381,14 +357,14 @@ export function MatchingProvider({ children }: { children: ReactNode }) {
       // Server will validate that cards are still in mismatch state before clearing
       const timeout = setTimeout(() => {
         sendMove({
-          type: "CLEAR_MISMATCH",
+          type: 'CLEAR_MISMATCH',
           playerId: state.currentPlayer,
-          userId: viewerId || "",
+          userId: viewerId || '',
           data: {},
-        });
-      }, 1500);
+        })
+      }, 1500)
 
-      return () => clearTimeout(timeout);
+      return () => clearTimeout(timeout)
     }
   }, [
     state.showMismatchFeedback,
@@ -396,84 +372,76 @@ export function MatchingProvider({ children }: { children: ReactNode }) {
     sendMove,
     state.currentPlayer,
     viewerId,
-  ]);
+  ])
 
   // Computed values
-  const isGameActive = state.gamePhase === "playing";
+  const isGameActive = state.gamePhase === 'playing'
 
   const canFlipCard = useCallback(
     (cardId: string): boolean => {
       // Defensive check: ensure required state exists
-      const flippedCards = state.flippedCards || [];
-      const gameCards = state.gameCards || [];
+      const flippedCards = state.flippedCards || []
+      const gameCards = state.gameCards || []
 
-      console.log("[RoomProvider][canFlipCard] Checking card:", {
+      console.log('[RoomProvider][canFlipCard] Checking card:', {
         cardId,
         isGameActive,
         isProcessingMove: state.isProcessingMove,
         currentPlayer: state.currentPlayer,
         hasRoomData: !!roomData,
         flippedCardsCount: flippedCards.length,
-      });
+      })
 
       if (!isGameActive || state.isProcessingMove) {
-        console.log(
-          "[RoomProvider][canFlipCard] Blocked: game not active or processing",
-        );
-        return false;
+        console.log('[RoomProvider][canFlipCard] Blocked: game not active or processing')
+        return false
       }
 
-      const card = gameCards.find((c) => c.id === cardId);
+      const card = gameCards.find((c) => c.id === cardId)
       if (!card || card.matched) {
-        console.log(
-          "[RoomProvider][canFlipCard] Blocked: card not found or already matched",
-        );
-        return false;
+        console.log('[RoomProvider][canFlipCard] Blocked: card not found or already matched')
+        return false
       }
 
       // Can't flip if already flipped
       if (flippedCards.some((c) => c.id === cardId)) {
-        console.log(
-          "[RoomProvider][canFlipCard] Blocked: card already flipped",
-        );
-        return false;
+        console.log('[RoomProvider][canFlipCard] Blocked: card already flipped')
+        return false
       }
 
       // Can't flip more than 2 cards
       if (flippedCards.length >= 2) {
-        console.log(
-          "[RoomProvider][canFlipCard] Blocked: 2 cards already flipped",
-        );
-        return false;
+        console.log('[RoomProvider][canFlipCard] Blocked: 2 cards already flipped')
+        return false
       }
 
       // Authorization check: Only allow flipping if it's your player's turn
       if (roomData && state.currentPlayer) {
-        const currentPlayerData = players.get(state.currentPlayer);
-        console.log("[RoomProvider][canFlipCard] Authorization check:", {
+        const currentPlayerData = players.get(state.currentPlayer)
+        console.log('[RoomProvider][canFlipCard] Authorization check:', {
           currentPlayerId: state.currentPlayer,
           currentPlayerFound: !!currentPlayerData,
           currentPlayerIsLocal: currentPlayerData?.isLocal,
-        });
+        })
 
         // Block if current player is explicitly marked as remote (isLocal === false)
         if (currentPlayerData && currentPlayerData.isLocal === false) {
           console.log(
-            "[RoomProvider][canFlipCard] BLOCKED: Current player is remote (not your turn)",
-          );
-          return false;
+            '[RoomProvider][canFlipCard] BLOCKED: Current player is remote (not your turn)'
+          )
+          return false
         }
 
         // If player data not found in map, this might be an issue - allow for now but warn
         if (!currentPlayerData) {
           console.warn(
-            "[RoomProvider][canFlipCard] WARNING: Current player not found in players map, allowing move",
-          );
+            '[RoomProvider][canFlipCard] WARNING: Current player not found in players map, allowing move'
+          )
         }
       }
 
-      console.log("[RoomProvider][canFlipCard] ALLOWED: All checks passed");
-      return true;
+      console.log('[RoomProvider][canFlipCard] ALLOWED: All checks passed')
+      return true
     },
     [
       isGameActive,
@@ -483,195 +451,150 @@ export function MatchingProvider({ children }: { children: ReactNode }) {
       state.currentPlayer,
       roomData,
       players,
-    ],
-  );
+    ]
+  )
 
   const currentGameStatistics: GameStatistics = useMemo(
     () => ({
       totalMoves: state.moves,
       matchedPairs: state.matchedPairs,
       totalPairs: state.totalPairs,
-      gameTime: state.gameStartTime
-        ? (state.gameEndTime || Date.now()) - state.gameStartTime
-        : 0,
+      gameTime: state.gameStartTime ? (state.gameEndTime || Date.now()) - state.gameStartTime : 0,
       accuracy: state.moves > 0 ? (state.matchedPairs / state.moves) * 100 : 0,
       averageTimePerMove:
         state.moves > 0 && state.gameStartTime
-          ? ((state.gameEndTime || Date.now()) - state.gameStartTime) /
-            state.moves
+          ? ((state.gameEndTime || Date.now()) - state.gameStartTime) / state.moves
           : 0,
     }),
-    [
-      state.moves,
-      state.matchedPairs,
-      state.totalPairs,
-      state.gameStartTime,
-      state.gameEndTime,
-    ],
-  );
+    [state.moves, state.matchedPairs, state.totalPairs, state.gameStartTime, state.gameEndTime]
+  )
 
   // PAUSE/RESUME: Computed values for pause/resume functionality
   const hasConfigChanged = useMemo(() => {
-    if (!state.originalConfig) return false;
+    if (!state.originalConfig) return false
     return (
       state.gameType !== state.originalConfig.gameType ||
       state.difficulty !== state.originalConfig.difficulty ||
       state.turnTimer !== state.originalConfig.turnTimer
-    );
-  }, [state.gameType, state.difficulty, state.turnTimer, state.originalConfig]);
+    )
+  }, [state.gameType, state.difficulty, state.turnTimer, state.originalConfig])
 
   const canResumeGame = useMemo(() => {
-    return (
-      !!state.pausedGamePhase && !!state.pausedGameState && !hasConfigChanged
-    );
-  }, [state.pausedGamePhase, state.pausedGameState, hasConfigChanged]);
+    return !!state.pausedGamePhase && !!state.pausedGameState && !hasConfigChanged
+  }, [state.pausedGamePhase, state.pausedGameState, hasConfigChanged])
 
   // Helper to build player metadata with correct userId ownership
   // Uses centralized ownership utilities
   const buildPlayerMetadata = useCallback(
     (playerIds: string[]) => {
       // Build ownership map from room data
-      const playerOwnership = buildPlayerOwnershipFromRoomData(roomData);
+      const playerOwnership = buildPlayerOwnershipFromRoomData(roomData)
 
       // Use centralized utility to build metadata
-      return buildPlayerMetadataUtil(
-        playerIds,
-        playerOwnership,
-        players,
-        viewerId ?? undefined,
-      );
+      return buildPlayerMetadataUtil(playerIds, playerOwnership, players, viewerId ?? undefined)
     },
-    [players, roomData, viewerId],
-  );
+    [players, roomData, viewerId]
+  )
 
   // Action creators - send moves to arcade session
   const startGame = useCallback(() => {
     // Must have at least one active player
     if (activePlayers.length === 0) {
-      console.error(
-        "[MatchingProvider] Cannot start game without active players",
-      );
-      return;
+      console.error('[MatchingProvider] Cannot start game without active players')
+      return
     }
 
     // Capture player metadata from local players map
     // This ensures all room members can display player info even if they don't own the players
-    const playerMetadata = buildPlayerMetadata(activePlayers);
+    const playerMetadata = buildPlayerMetadata(activePlayers)
 
     // Use current session state configuration (no local state!)
-    const cards = generateGameCards(state.gameType, state.difficulty);
+    const cards = generateGameCards(state.gameType, state.difficulty)
     // Use first active player as playerId for START_GAME move
-    const firstPlayer = activePlayers[0] as string;
+    const firstPlayer = activePlayers[0] as string
     sendMove({
-      type: "START_GAME",
+      type: 'START_GAME',
       playerId: firstPlayer,
-      userId: viewerId || "",
+      userId: viewerId || '',
       data: {
         cards,
         activePlayers,
         playerMetadata,
       },
-    });
-  }, [
-    state.gameType,
-    state.difficulty,
-    activePlayers,
-    buildPlayerMetadata,
-    sendMove,
-    viewerId,
-  ]);
+    })
+  }, [state.gameType, state.difficulty, activePlayers, buildPlayerMetadata, sendMove, viewerId])
 
   const flipCard = useCallback(
     (cardId: string) => {
-      console.log("[RoomProvider] flipCard called:", {
+      console.log('[RoomProvider] flipCard called:', {
         cardId,
         viewerId,
         currentPlayer: state.currentPlayer,
         activePlayers: state.activePlayers,
         gamePhase: state.gamePhase,
         canFlip: canFlipCard(cardId),
-      });
+      })
 
       if (!canFlipCard(cardId)) {
-        console.log(
-          "[RoomProvider] Cannot flip card - canFlipCard returned false",
-        );
-        return;
+        console.log('[RoomProvider] Cannot flip card - canFlipCard returned false')
+        return
       }
 
       const move = {
-        type: "FLIP_CARD" as const,
+        type: 'FLIP_CARD' as const,
         playerId: state.currentPlayer, // Use the current player ID from game state (database player ID)
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: { cardId },
-      };
-      console.log("[RoomProvider] Sending FLIP_CARD move via sendMove:", move);
-      sendMove(move);
+      }
+      console.log('[RoomProvider] Sending FLIP_CARD move via sendMove:', move)
+      sendMove(move)
     },
-    [
-      canFlipCard,
-      sendMove,
-      viewerId,
-      state.currentPlayer,
-      state.activePlayers,
-      state.gamePhase,
-    ],
-  );
+    [canFlipCard, sendMove, viewerId, state.currentPlayer, state.activePlayers, state.gamePhase]
+  )
 
   const resetGame = useCallback(() => {
     // Must have at least one active player
     if (activePlayers.length === 0) {
-      console.error(
-        "[MatchingProvider] Cannot reset game without active players",
-      );
-      return;
+      console.error('[MatchingProvider] Cannot reset game without active players')
+      return
     }
 
     // Capture player metadata with correct userId ownership
-    const playerMetadata = buildPlayerMetadata(activePlayers);
+    const playerMetadata = buildPlayerMetadata(activePlayers)
 
     // Use current session state configuration (no local state!)
-    const cards = generateGameCards(state.gameType, state.difficulty);
+    const cards = generateGameCards(state.gameType, state.difficulty)
     // Use first active player as playerId for START_GAME move
-    const firstPlayer = activePlayers[0] as string;
+    const firstPlayer = activePlayers[0] as string
     sendMove({
-      type: "START_GAME",
+      type: 'START_GAME',
       playerId: firstPlayer,
-      userId: viewerId || "",
+      userId: viewerId || '',
       data: {
         cards,
         activePlayers,
         playerMetadata,
       },
-    });
-  }, [
-    state.gameType,
-    state.difficulty,
-    activePlayers,
-    buildPlayerMetadata,
-    sendMove,
-    viewerId,
-  ]);
+    })
+  }, [state.gameType, state.difficulty, activePlayers, buildPlayerMetadata, sendMove, viewerId])
 
   const setGameType = useCallback(
     (gameType: typeof state.gameType) => {
-      console.log("[MatchingProvider] setGameType called:", gameType);
+      console.log('[MatchingProvider] setGameType called:', gameType)
 
       // Use first active player as playerId, or empty string if none
-      const playerId = (activePlayers[0] as string) || "";
+      const playerId = (activePlayers[0] as string) || ''
       sendMove({
-        type: "SET_CONFIG",
+        type: 'SET_CONFIG',
         playerId,
-        userId: viewerId || "",
-        data: { field: "gameType", value: gameType },
-      });
+        userId: viewerId || '',
+        data: { field: 'gameType', value: gameType },
+      })
 
       // Save setting to room's gameConfig for persistence
       if (roomData?.id) {
-        const currentGameConfig =
-          (roomData.gameConfig as Record<string, any>) || {};
-        const currentMatchingConfig =
-          (currentGameConfig.matching as Record<string, any>) || {};
+        const currentGameConfig = (roomData.gameConfig as Record<string, any>) || {}
+        const currentMatchingConfig = (currentGameConfig.matching as Record<string, any>) || {}
 
         const updatedConfig = {
           ...currentGameConfig,
@@ -679,56 +602,45 @@ export function MatchingProvider({ children }: { children: ReactNode }) {
             ...currentMatchingConfig,
             gameType,
           },
-        };
+        }
         console.log(
-          "[MatchingProvider] Saving gameType to database:",
+          '[MatchingProvider] Saving gameType to database:',
           JSON.stringify(
             {
               roomId: roomData.id,
               updatedConfig,
             },
             null,
-            2,
-          ),
-        );
+            2
+          )
+        )
         updateGameConfig({
           roomId: roomData.id,
           gameConfig: updatedConfig,
-        });
+        })
       } else {
-        console.warn(
-          "[MatchingProvider] Cannot save gameType - no roomData.id",
-        );
+        console.warn('[MatchingProvider] Cannot save gameType - no roomData.id')
       }
     },
-    [
-      activePlayers,
-      sendMove,
-      viewerId,
-      roomData?.id,
-      roomData?.gameConfig,
-      updateGameConfig,
-    ],
-  );
+    [activePlayers, sendMove, viewerId, roomData?.id, roomData?.gameConfig, updateGameConfig]
+  )
 
   const setDifficulty = useCallback(
     (difficulty: typeof state.difficulty) => {
-      console.log("[MatchingProvider] setDifficulty called:", difficulty);
+      console.log('[MatchingProvider] setDifficulty called:', difficulty)
 
-      const playerId = (activePlayers[0] as string) || "";
+      const playerId = (activePlayers[0] as string) || ''
       sendMove({
-        type: "SET_CONFIG",
+        type: 'SET_CONFIG',
         playerId,
-        userId: viewerId || "",
-        data: { field: "difficulty", value: difficulty },
-      });
+        userId: viewerId || '',
+        data: { field: 'difficulty', value: difficulty },
+      })
 
       // Save setting to room's gameConfig for persistence
       if (roomData?.id) {
-        const currentGameConfig =
-          (roomData.gameConfig as Record<string, any>) || {};
-        const currentMatchingConfig =
-          (currentGameConfig.matching as Record<string, any>) || {};
+        const currentGameConfig = (roomData.gameConfig as Record<string, any>) || {}
+        const currentMatchingConfig = (currentGameConfig.matching as Record<string, any>) || {}
 
         const updatedConfig = {
           ...currentGameConfig,
@@ -736,56 +648,45 @@ export function MatchingProvider({ children }: { children: ReactNode }) {
             ...currentMatchingConfig,
             difficulty,
           },
-        };
+        }
         console.log(
-          "[MatchingProvider] Saving difficulty to database:",
+          '[MatchingProvider] Saving difficulty to database:',
           JSON.stringify(
             {
               roomId: roomData.id,
               updatedConfig,
             },
             null,
-            2,
-          ),
-        );
+            2
+          )
+        )
         updateGameConfig({
           roomId: roomData.id,
           gameConfig: updatedConfig,
-        });
+        })
       } else {
-        console.warn(
-          "[MatchingProvider] Cannot save difficulty - no roomData.id",
-        );
+        console.warn('[MatchingProvider] Cannot save difficulty - no roomData.id')
       }
     },
-    [
-      activePlayers,
-      sendMove,
-      viewerId,
-      roomData?.id,
-      roomData?.gameConfig,
-      updateGameConfig,
-    ],
-  );
+    [activePlayers, sendMove, viewerId, roomData?.id, roomData?.gameConfig, updateGameConfig]
+  )
 
   const setTurnTimer = useCallback(
     (turnTimer: typeof state.turnTimer) => {
-      console.log("[MatchingProvider] setTurnTimer called:", turnTimer);
+      console.log('[MatchingProvider] setTurnTimer called:', turnTimer)
 
-      const playerId = (activePlayers[0] as string) || "";
+      const playerId = (activePlayers[0] as string) || ''
       sendMove({
-        type: "SET_CONFIG",
+        type: 'SET_CONFIG',
         playerId,
-        userId: viewerId || "",
-        data: { field: "turnTimer", value: turnTimer },
-      });
+        userId: viewerId || '',
+        data: { field: 'turnTimer', value: turnTimer },
+      })
 
       // Save setting to room's gameConfig for persistence
       if (roomData?.id) {
-        const currentGameConfig =
-          (roomData.gameConfig as Record<string, any>) || {};
-        const currentMatchingConfig =
-          (currentGameConfig.matching as Record<string, any>) || {};
+        const currentGameConfig = (roomData.gameConfig as Record<string, any>) || {}
+        const currentMatchingConfig = (currentGameConfig.matching as Record<string, any>) || {}
 
         const updatedConfig = {
           ...currentGameConfig,
@@ -793,158 +694,146 @@ export function MatchingProvider({ children }: { children: ReactNode }) {
             ...currentMatchingConfig,
             turnTimer,
           },
-        };
+        }
         console.log(
-          "[MatchingProvider] Saving turnTimer to database:",
+          '[MatchingProvider] Saving turnTimer to database:',
           JSON.stringify(
             {
               roomId: roomData.id,
               updatedConfig,
             },
             null,
-            2,
-          ),
-        );
+            2
+          )
+        )
         updateGameConfig({
           roomId: roomData.id,
           gameConfig: updatedConfig,
-        });
+        })
       } else {
-        console.warn(
-          "[MatchingProvider] Cannot save turnTimer - no roomData.id",
-        );
+        console.warn('[MatchingProvider] Cannot save turnTimer - no roomData.id')
       }
     },
-    [
-      activePlayers,
-      sendMove,
-      viewerId,
-      roomData?.id,
-      roomData?.gameConfig,
-      updateGameConfig,
-    ],
-  );
+    [activePlayers, sendMove, viewerId, roomData?.id, roomData?.gameConfig, updateGameConfig]
+  )
 
   const goToSetup = useCallback(() => {
     // Send GO_TO_SETUP move - synchronized across all room members
-    const playerId = (activePlayers[0] as string) || state.currentPlayer || "";
+    const playerId = (activePlayers[0] as string) || state.currentPlayer || ''
     sendMove({
-      type: "GO_TO_SETUP",
+      type: 'GO_TO_SETUP',
       playerId,
-      userId: viewerId || "",
+      userId: viewerId || '',
       data: {},
-    });
-  }, [activePlayers, state.currentPlayer, sendMove, viewerId]);
+    })
+  }, [activePlayers, state.currentPlayer, sendMove, viewerId])
 
   const resumeGame = useCallback(() => {
     // PAUSE/RESUME: Resume paused game if config unchanged
     if (!canResumeGame) {
-      console.warn(
-        "[MatchingProvider] Cannot resume - no paused game or config changed",
-      );
-      return;
+      console.warn('[MatchingProvider] Cannot resume - no paused game or config changed')
+      return
     }
 
-    const playerId = (activePlayers[0] as string) || state.currentPlayer || "";
+    const playerId = (activePlayers[0] as string) || state.currentPlayer || ''
     sendMove({
-      type: "RESUME_GAME",
+      type: 'RESUME_GAME',
       playerId,
-      userId: viewerId || "",
+      userId: viewerId || '',
       data: {},
-    });
-  }, [canResumeGame, activePlayers, state.currentPlayer, sendMove, viewerId]);
+    })
+  }, [canResumeGame, activePlayers, state.currentPlayer, sendMove, viewerId])
 
   const hoverCard = useCallback(
     (cardId: string | null) => {
       // HOVER: Send hover state for networked presence
       // Use current player as the one hovering
-      const playerId =
-        state.currentPlayer || (activePlayers[0] as string) || "";
-      if (!playerId) return; // No active player to send hover for
+      const playerId = state.currentPlayer || (activePlayers[0] as string) || ''
+      if (!playerId) return // No active player to send hover for
 
       sendMove({
-        type: "HOVER_CARD",
+        type: 'HOVER_CARD',
         playerId,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: { cardId },
-      });
+      })
     },
-    [state.currentPlayer, activePlayers, sendMove, viewerId],
-  );
+    [state.currentPlayer, activePlayers, sendMove, viewerId]
+  )
 
   // NO MORE effectiveState merging! Just use session state directly with gameMode added
   const effectiveState = { ...state, gameMode } as MatchingState & {
-    gameMode: GameMode;
-  };
+    gameMode: GameMode
+  }
 
   // If state is corrupted, show error message instead of crashing
   if (hasStateCorruption) {
     return (
       <div
         style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "40px",
-          textAlign: "center",
-          minHeight: "400px",
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '40px',
+          textAlign: 'center',
+          minHeight: '400px',
         }}
       >
         <div
           style={{
-            fontSize: "48px",
-            marginBottom: "20px",
+            fontSize: '48px',
+            marginBottom: '20px',
           }}
         >
           ⚠️
         </div>
         <h2
           style={{
-            fontSize: "24px",
-            fontWeight: "bold",
-            marginBottom: "12px",
-            color: "#dc2626",
+            fontSize: '24px',
+            fontWeight: 'bold',
+            marginBottom: '12px',
+            color: '#dc2626',
           }}
         >
           Game State Mismatch
         </h2>
         <p
           style={{
-            fontSize: "16px",
-            color: "#6b7280",
-            marginBottom: "24px",
-            maxWidth: "500px",
+            fontSize: '16px',
+            color: '#6b7280',
+            marginBottom: '24px',
+            maxWidth: '500px',
           }}
         >
-          There's a mismatch between game types in this room. This usually
-          happens when room members are playing different games.
+          There's a mismatch between game types in this room. This usually happens when room members
+          are playing different games.
         </p>
         <div
           style={{
-            background: "#f9fafb",
-            border: "1px solid #e5e7eb",
-            borderRadius: "8px",
-            padding: "16px",
-            marginBottom: "24px",
-            maxWidth: "500px",
+            background: '#f9fafb',
+            border: '1px solid #e5e7eb',
+            borderRadius: '8px',
+            padding: '16px',
+            marginBottom: '24px',
+            maxWidth: '500px',
           }}
         >
           <p
             style={{
-              fontSize: "14px",
-              fontWeight: "600",
-              marginBottom: "8px",
+              fontSize: '14px',
+              fontWeight: '600',
+              marginBottom: '8px',
             }}
           >
             To fix this:
           </p>
           <ol
             style={{
-              fontSize: "14px",
-              textAlign: "left",
-              paddingLeft: "20px",
-              lineHeight: "1.6",
+              fontSize: '14px',
+              textAlign: 'left',
+              paddingLeft: '20px',
+              lineHeight: '1.6',
             }}
           >
             <li>Make sure all room members are on the same game page</li>
@@ -955,29 +844,27 @@ export function MatchingProvider({ children }: { children: ReactNode }) {
         <button
           onClick={() => window.location.reload()}
           style={{
-            padding: "10px 20px",
-            background: "#3b82f6",
-            color: "white",
-            border: "none",
-            borderRadius: "6px",
-            fontSize: "14px",
-            fontWeight: "600",
-            cursor: "pointer",
+            padding: '10px 20px',
+            background: '#3b82f6',
+            color: 'white',
+            border: 'none',
+            borderRadius: '6px',
+            fontSize: '14px',
+            fontWeight: '600',
+            cursor: 'pointer',
           }}
         >
           Refresh Page
         </button>
       </div>
-    );
+    )
   }
 
   const contextValue: MatchingContextValue = {
     state: effectiveState,
     dispatch: () => {
       // No-op - replaced with sendMove
-      console.warn(
-        "dispatch() is deprecated in arcade mode, use action creators instead",
-      );
+      console.warn('dispatch() is deprecated in arcade mode, use action creators instead')
     },
     isGameActive,
     canFlipCard,
@@ -996,20 +883,16 @@ export function MatchingProvider({ children }: { children: ReactNode }) {
     exitSession,
     gameMode,
     activePlayers,
-  };
+  }
 
-  return (
-    <MatchingContext.Provider value={contextValue}>
-      {children}
-    </MatchingContext.Provider>
-  );
+  return <MatchingContext.Provider value={contextValue}>{children}</MatchingContext.Provider>
 }
 
 // Export the hook for this provider
 export function useMatching() {
-  const context = useContext(MatchingContext);
+  const context = useContext(MatchingContext)
   if (!context) {
-    throw new Error("useMatching must be used within MatchingProvider");
+    throw new Error('useMatching must be used within MatchingProvider')
   }
-  return context;
+  return context
 }
diff --git a/apps/web/src/arcade-games/matching/Validator.ts b/apps/web/src/arcade-games/matching/Validator.ts
index 18d2edd1..1c6f6a51 100644
--- a/apps/web/src/arcade-games/matching/Validator.ts
+++ b/apps/web/src/arcade-games/matching/Validator.ts
@@ -3,65 +3,49 @@
  * Validates all game moves and state transitions
  */
 
-import type {
-  GameCard,
-  MatchingConfig,
-  MatchingMove,
-  MatchingState,
-  Player,
-} from "./types";
-import { generateGameCards } from "./utils/cardGeneration";
-import { canFlipCard, validateMatch } from "./utils/matchValidation";
-import type {
-  GameValidator,
-  ValidationResult,
-} from "@/lib/arcade/validation/types";
+import type { GameCard, MatchingConfig, MatchingMove, MatchingState, Player } from './types'
+import { generateGameCards } from './utils/cardGeneration'
+import { canFlipCard, validateMatch } from './utils/matchValidation'
+import type { GameValidator, ValidationResult } from '@/lib/arcade/validation/types'
 
-export class MatchingGameValidator
-  implements GameValidator<MatchingState, MatchingMove>
-{
+export class MatchingGameValidator implements GameValidator<MatchingState, MatchingMove> {
   validateMove(
     state: MatchingState,
     move: MatchingMove,
-    context?: { userId?: string; playerOwnership?: Record<string, string> },
+    context?: { userId?: string; playerOwnership?: Record<string, string> }
   ): ValidationResult {
     switch (move.type) {
-      case "FLIP_CARD":
-        return this.validateFlipCard(
-          state,
-          move.data.cardId,
-          move.playerId,
-          context,
-        );
+      case 'FLIP_CARD':
+        return this.validateFlipCard(state, move.data.cardId, move.playerId, context)
 
-      case "START_GAME":
+      case 'START_GAME':
         return this.validateStartGame(
           state,
           move.data.activePlayers,
           move.data.cards,
-          move.data.playerMetadata,
-        );
+          move.data.playerMetadata
+        )
 
-      case "CLEAR_MISMATCH":
-        return this.validateClearMismatch(state);
+      case 'CLEAR_MISMATCH':
+        return this.validateClearMismatch(state)
 
-      case "GO_TO_SETUP":
-        return this.validateGoToSetup(state);
+      case 'GO_TO_SETUP':
+        return this.validateGoToSetup(state)
 
-      case "SET_CONFIG":
-        return this.validateSetConfig(state, move.data.field, move.data.value);
+      case 'SET_CONFIG':
+        return this.validateSetConfig(state, move.data.field, move.data.value)
 
-      case "RESUME_GAME":
-        return this.validateResumeGame(state);
+      case 'RESUME_GAME':
+        return this.validateResumeGame(state)
 
-      case "HOVER_CARD":
-        return this.validateHoverCard(state, move.data.cardId, move.playerId);
+      case 'HOVER_CARD':
+        return this.validateHoverCard(state, move.data.cardId, move.playerId)
 
       default:
         return {
           valid: false,
           error: `Unknown move type: ${(move as any).type}`,
-        };
+        }
     }
   }
 
@@ -69,79 +53,79 @@ export class MatchingGameValidator
     state: MatchingState,
     cardId: string,
     playerId: string,
-    context?: { userId?: string; playerOwnership?: Record<string, string> },
+    context?: { userId?: string; playerOwnership?: Record<string, string> }
   ): ValidationResult {
     // Game must be in playing phase
-    if (state.gamePhase !== "playing") {
+    if (state.gamePhase !== 'playing') {
       return {
         valid: false,
-        error: "Cannot flip cards outside of playing phase",
-      };
+        error: 'Cannot flip cards outside of playing phase',
+      }
     }
 
     // Check if it's the player's turn (in multiplayer)
     if (state.activePlayers.length > 1 && state.currentPlayer !== playerId) {
-      console.log("[Validator] Turn check failed:", {
+      console.log('[Validator] Turn check failed:', {
         activePlayers: state.activePlayers,
         currentPlayer: state.currentPlayer,
         currentPlayerType: typeof state.currentPlayer,
         playerId,
         playerIdType: typeof playerId,
         matches: state.currentPlayer === playerId,
-      });
+      })
       return {
         valid: false,
-        error: "Not your turn",
-      };
+        error: 'Not your turn',
+      }
     }
 
     // Check player ownership authorization (if context provided)
     if (context?.userId && context?.playerOwnership) {
-      const playerOwner = context.playerOwnership[playerId];
+      const playerOwner = context.playerOwnership[playerId]
       if (playerOwner && playerOwner !== context.userId) {
-        console.log("[Validator] Player ownership check failed:", {
+        console.log('[Validator] Player ownership check failed:', {
           playerId,
           playerOwner,
           requestingUserId: context.userId,
-        });
+        })
         return {
           valid: false,
-          error: "You can only move your own players",
-        };
+          error: 'You can only move your own players',
+        }
       }
     }
 
     // Find the card
-    const card = state.gameCards.find((c) => c.id === cardId);
+    const card = state.gameCards.find((c) => c.id === cardId)
     if (!card) {
       return {
         valid: false,
-        error: "Card not found",
-      };
+        error: 'Card not found',
+      }
     }
 
     // Validate using existing game logic
     if (!canFlipCard(card, state.flippedCards, state.isProcessingMove)) {
       return {
         valid: false,
-        error: "Cannot flip this card",
-      };
+        error: 'Cannot flip this card',
+      }
     }
 
     // Calculate new state
-    const newFlippedCards = [...state.flippedCards, card];
+    const newFlippedCards = [...state.flippedCards, card]
     let newState = {
       ...state,
       flippedCards: newFlippedCards,
       isProcessingMove: newFlippedCards.length === 2,
       // Clear mismatch feedback when player flips a new card
       showMismatchFeedback: false,
-    };
+    }
 
     // If two cards are flipped, check for match
     if (newFlippedCards.length === 2) {
-      const [card1, card2] = newFlippedCards;
-      const matchResult = validateMatch(card1, card2);
+      const [card1, card2] = newFlippedCards
+      const matchResult = validateMatch(card1, card2)
 
       if (matchResult.isValid) {
         // Match found - update cards
@@ -150,7 +134,7 @@ export class MatchingGameValidator
           gameCards: newState.gameCards.map((c) =>
             c.id === card1.id || c.id === card2.id
               ? { ...c, matched: true, matchedBy: state.currentPlayer }
-              : c,
+              : c
           ),
           matchedPairs: state.matchedPairs + 1,
           scores: {
@@ -159,33 +143,31 @@ export class MatchingGameValidator
           },
           consecutiveMatches: {
             ...state.consecutiveMatches,
-            [state.currentPlayer]:
-              (state.consecutiveMatches[state.currentPlayer] || 0) + 1,
+            [state.currentPlayer]: (state.consecutiveMatches[state.currentPlayer] || 0) + 1,
           },
           moves: state.moves + 1,
           flippedCards: [],
           isProcessingMove: false,
-        };
+        }
 
         // Check if game is complete
         if (newState.matchedPairs === newState.totalPairs) {
           newState = {
             ...newState,
-            gamePhase: "results",
+            gamePhase: 'results',
             gameEndTime: Date.now(),
-          };
+          }
         }
       } else {
         // Match failed - keep cards flipped briefly so player can see them
         // Client will handle clearing them after a delay
-        const shouldSwitchPlayer = state.activePlayers.length > 1;
+        const shouldSwitchPlayer = state.activePlayers.length > 1
         const nextPlayerIndex = shouldSwitchPlayer
-          ? (state.activePlayers.indexOf(state.currentPlayer) + 1) %
-            state.activePlayers.length
-          : 0;
+          ? (state.activePlayers.indexOf(state.currentPlayer) + 1) % state.activePlayers.length
+          : 0
         const nextPlayer = shouldSwitchPlayer
           ? state.activePlayers[nextPlayerIndex]
-          : state.currentPlayer;
+          : state.currentPlayer
 
         newState = {
           ...newState,
@@ -204,21 +186,21 @@ export class MatchingGameValidator
             ...state.playerHovers,
             [state.currentPlayer]: null,
           },
-        };
+        }
       }
     }
 
     return {
       valid: true,
       newState,
-    };
+    }
   }
 
   private validateStartGame(
     state: MatchingState,
     activePlayers: Player[],
     cards?: GameCard[],
-    playerMetadata?: { [playerId: string]: any },
+    playerMetadata?: { [playerId: string]: any }
   ): ValidationResult {
     // Allow starting a new game from any phase (for "New Game" button)
 
@@ -226,13 +208,12 @@ export class MatchingGameValidator
     if (!activePlayers || activePlayers.length === 0) {
       return {
         valid: false,
-        error: "Must have at least one player",
-      };
+        error: 'Must have at least one player',
+      }
     }
 
     // Use provided cards or generate new ones
-    const gameCards =
-      cards || generateGameCards(state.gameType, state.difficulty);
+    const gameCards = cards || generateGameCards(state.gameType, state.difficulty)
 
     const newState: MatchingState = {
       ...state,
@@ -240,17 +221,14 @@ export class MatchingGameValidator
       cards: gameCards,
       activePlayers,
       playerMetadata: playerMetadata || {}, // Store player metadata for cross-user visibility
-      gamePhase: "playing",
+      gamePhase: 'playing',
       gameStartTime: Date.now(),
       currentPlayer: activePlayers[0],
       flippedCards: [],
       matchedPairs: 0,
       moves: 0,
       scores: activePlayers.reduce((acc, p) => ({ ...acc, [p]: 0 }), {}),
-      consecutiveMatches: activePlayers.reduce(
-        (acc, p) => ({ ...acc, [p]: 0 }),
-        {},
-      ),
+      consecutiveMatches: activePlayers.reduce((acc, p) => ({ ...acc, [p]: 0 }), {}),
       // PAUSE/RESUME: Save original config so we can detect changes
       originalConfig: {
         gameType: state.gameType,
@@ -262,12 +240,12 @@ export class MatchingGameValidator
       pausedGameState: undefined,
       // Clear hover state when starting new game
       playerHovers: {},
-    };
+    }
 
     return {
       valid: true,
       newState,
-    };
+    }
   }
 
   private validateClearMismatch(state: MatchingState): ValidationResult {
@@ -278,17 +256,17 @@ export class MatchingGameValidator
       return {
         valid: true,
         newState: state,
-      };
+      }
     }
 
     // Get the list of all non-current players whose hovers should be cleared
     // (They're not playing this turn, so their hovers from previous turns should not show)
-    const clearedHovers = { ...state.playerHovers };
+    const clearedHovers = { ...state.playerHovers }
     for (const playerId of state.activePlayers) {
       // Clear hover for all players except the current player
       // This ensures only the current player's active hover shows
       if (playerId !== state.currentPlayer) {
-        clearedHovers[playerId] = null;
+        clearedHovers[playerId] = null
       }
     }
 
@@ -303,7 +281,7 @@ export class MatchingGameValidator
         // Clear hovers for non-current players when cards are cleared
         playerHovers: clearedHovers,
       },
-    };
+    }
   }
 
   /**
@@ -326,14 +304,13 @@ export class MatchingGameValidator
    */
   private validateGoToSetup(state: MatchingState): ValidationResult {
     // Determine if we're pausing an active game (for Resume functionality)
-    const isPausingGame =
-      state.gamePhase === "playing" || state.gamePhase === "results";
+    const isPausingGame = state.gamePhase === 'playing' || state.gamePhase === 'results'
 
     return {
       valid: true,
       newState: {
         ...state,
-        gamePhase: "setup",
+        gamePhase: 'setup',
 
         // Pause/Resume: Save game state if pausing from active game
         pausedGamePhase: isPausingGame ? state.gamePhase : undefined,
@@ -358,7 +335,7 @@ export class MatchingGameValidator
         gameCards: [],
         cards: [],
         flippedCards: [],
-        currentPlayer: "",
+        currentPlayer: '',
         matchedPairs: 0,
         moves: 0,
         scores: {},
@@ -376,7 +353,7 @@ export class MatchingGameValidator
         // Preserve configuration - players can modify in setup
         // gameType, difficulty, turnTimer stay as-is
       },
-    };
+    }
   }
 
   /**
@@ -397,44 +374,44 @@ export class MatchingGameValidator
    */
   private validateSetConfig(
     state: MatchingState,
-    field: "gameType" | "difficulty" | "turnTimer",
-    value: any,
+    field: 'gameType' | 'difficulty' | 'turnTimer',
+    value: any
   ): ValidationResult {
     // Can only change config during setup phase
-    if (state.gamePhase !== "setup") {
+    if (state.gamePhase !== 'setup') {
       return {
         valid: false,
-        error: "Cannot change configuration outside of setup phase",
-      };
+        error: 'Cannot change configuration outside of setup phase',
+      }
     }
 
     // Validate field-specific values
     switch (field) {
-      case "gameType":
-        if (value !== "abacus-numeral" && value !== "complement-pairs") {
-          return { valid: false, error: `Invalid gameType: ${value}` };
+      case 'gameType':
+        if (value !== 'abacus-numeral' && value !== 'complement-pairs') {
+          return { valid: false, error: `Invalid gameType: ${value}` }
         }
-        break;
+        break
 
-      case "difficulty":
+      case 'difficulty':
         if (![6, 8, 12, 15].includes(value)) {
-          return { valid: false, error: `Invalid difficulty: ${value}` };
+          return { valid: false, error: `Invalid difficulty: ${value}` }
         }
-        break;
+        break
 
-      case "turnTimer":
-        if (typeof value !== "number" || value < 5 || value > 300) {
-          return { valid: false, error: `Invalid turnTimer: ${value}` };
+      case 'turnTimer':
+        if (typeof value !== 'number' || value < 5 || value > 300) {
+          return { valid: false, error: `Invalid turnTimer: ${value}` }
         }
-        break;
+        break
 
       default:
-        return { valid: false, error: `Unknown config field: ${field}` };
+        return { valid: false, error: `Unknown config field: ${field}` }
     }
 
     // PAUSE/RESUME: If there's a paused game and config is changing,
     // clear the paused game state (can't resume anymore)
-    const clearPausedGame = !!state.pausedGamePhase;
+    const clearPausedGame = !!state.pausedGamePhase
 
     // Apply the configuration change
     return {
@@ -443,7 +420,7 @@ export class MatchingGameValidator
         ...state,
         [field]: value,
         // Update totalPairs if difficulty changes
-        ...(field === "difficulty" ? { totalPairs: value } : {}),
+        ...(field === 'difficulty' ? { totalPairs: value } : {}),
         // Clear paused game if config changed
         ...(clearPausedGame
           ? {
@@ -453,7 +430,7 @@ export class MatchingGameValidator
             }
           : {}),
       },
-    };
+    }
   }
 
   /**
@@ -470,19 +447,19 @@ export class MatchingGameValidator
    */
   private validateResumeGame(state: MatchingState): ValidationResult {
     // Must be in setup phase
-    if (state.gamePhase !== "setup") {
+    if (state.gamePhase !== 'setup') {
       return {
         valid: false,
-        error: "Can only resume from setup phase",
-      };
+        error: 'Can only resume from setup phase',
+      }
     }
 
     // Must have a paused game
     if (!state.pausedGamePhase || !state.pausedGameState) {
       return {
         valid: false,
-        error: "No paused game to resume",
-      };
+        error: 'No paused game to resume',
+      }
     }
 
     // Config must match original (no changes while paused)
@@ -490,13 +467,13 @@ export class MatchingGameValidator
       const configChanged =
         state.gameType !== state.originalConfig.gameType ||
         state.difficulty !== state.originalConfig.difficulty ||
-        state.turnTimer !== state.originalConfig.turnTimer;
+        state.turnTimer !== state.originalConfig.turnTimer
 
       if (configChanged) {
         return {
           valid: false,
-          error: "Cannot resume - configuration has changed",
-        };
+          error: 'Cannot resume - configuration has changed',
+        }
       }
     }
 
@@ -521,7 +498,7 @@ export class MatchingGameValidator
         pausedGameState: undefined,
         // Keep originalConfig for potential future pauses
       },
-    };
+    }
   }
 
   /**
@@ -533,7 +510,7 @@ export class MatchingGameValidator
   private validateHoverCard(
     state: MatchingState,
     cardId: string | null,
-    playerId: string,
+    playerId: string
   ): ValidationResult {
     // Hover is always valid - it's just UI state for networked presence
     // Update the player's hover state
@@ -546,13 +523,11 @@ export class MatchingGameValidator
           [playerId]: cardId,
         },
       },
-    };
+    }
   }
 
   isGameComplete(state: MatchingState): boolean {
-    return (
-      state.gamePhase === "results" || state.matchedPairs === state.totalPairs
-    );
+    return state.gamePhase === 'results' || state.matchedPairs === state.totalPairs
   }
 
   getInitialState(config: MatchingConfig): MatchingState {
@@ -563,8 +538,8 @@ export class MatchingGameValidator
       gameType: config.gameType,
       difficulty: config.difficulty,
       turnTimer: config.turnTimer,
-      gamePhase: "setup",
-      currentPlayer: "",
+      gamePhase: 'setup',
+      currentPlayer: '',
       matchedPairs: 0,
       totalPairs: config.difficulty,
       moves: 0,
@@ -586,9 +561,9 @@ export class MatchingGameValidator
       pausedGameState: undefined,
       // HOVER: Initialize hover state
       playerHovers: {},
-    };
+    }
   }
 }
 
 // Singleton instance
-export const matchingGameValidator = new MatchingGameValidator();
+export const matchingGameValidator = new MatchingGameValidator()
diff --git a/apps/web/src/arcade-games/matching/components/EmojiPicker.tsx b/apps/web/src/arcade-games/matching/components/EmojiPicker.tsx
index 7a3c86a0..4b0100d2 100644
--- a/apps/web/src/arcade-games/matching/components/EmojiPicker.tsx
+++ b/apps/web/src/arcade-games/matching/components/EmojiPicker.tsx
@@ -1,56 +1,56 @@
-"use client";
+'use client'
 
-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";
+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 {
-  label: string;
-  hexcode: string;
-  tags?: string[];
-  emoji: string;
-  text: string;
-  type: number;
-  order: number;
-  group: number;
-  subgroup: number;
-  version: number;
-  emoticon?: string | string[]; // Can be string, array, or undefined
+  label: string
+  hexcode: string
+  tags?: string[]
+  emoji: string
+  text: string
+  type: number
+  order: number
+  group: number
+  subgroup: number
+  version: number
+  emoticon?: string | string[] // Can be string, array, or undefined
 }
 
 interface EmojiPickerProps {
-  currentEmoji: string;
-  onEmojiSelect: (emoji: string) => void;
-  onClose: () => void;
-  playerNumber: number;
+  currentEmoji: string
+  onEmojiSelect: (emoji: string) => void
+  onClose: () => void
+  playerNumber: number
 }
 
 // Emoji group categories from emojibase (matching Unicode CLDR group IDs)
 const EMOJI_GROUPS = {
-  0: { name: "Smileys & Emotion", icon: "😀" },
-  1: { name: "People & Body", icon: "👤" },
-  3: { name: "Animals & Nature", icon: "🐶" },
-  4: { name: "Food & Drink", icon: "🍎" },
-  5: { name: "Travel & Places", icon: "🚗" },
-  6: { name: "Activities", icon: "⚽" },
-  7: { name: "Objects", icon: "💡" },
-  8: { name: "Symbols", icon: "❤️" },
-  9: { name: "Flags", icon: "🏁" },
-} as const;
+  0: { name: 'Smileys & Emotion', icon: '😀' },
+  1: { name: 'People & Body', icon: '👤' },
+  3: { name: 'Animals & Nature', icon: '🐶' },
+  4: { name: 'Food & Drink', icon: '🍎' },
+  5: { name: 'Travel & Places', icon: '🚗' },
+  6: { name: 'Activities', icon: '⚽' },
+  7: { name: 'Objects', icon: '💡' },
+  8: { name: 'Symbols', 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 }>();
-(emojiData as EmojibaseEmoji[]).forEach((emoji) => {
+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
-    const emoticons: string[] = [];
+    const emoticons: string[] = []
     if (emoji.emoticon) {
       if (Array.isArray(emoji.emoticon)) {
-        emoticons.push(...emoji.emoticon.map((e) => e.toLowerCase()));
+        emoticons.push(...emoji.emoticon.map((e) => e.toLowerCase()))
       } else {
-        emoticons.push(emoji.emoticon.toLowerCase());
+        emoticons.push(emoji.emoticon.toLowerCase())
       }
     }
 
@@ -61,30 +61,26 @@ const emojiMap = new Map<string, { keywords: string[]; group: number }>();
         ...emoticons,
       ].filter(Boolean),
       group: emoji.group,
-    });
+    })
   }
-});
+})
 
 // Enhanced search function using emojibase-data
 function getEmojiKeywords(emoji: string): string[] {
-  const data = emojiMap.get(emoji);
+  const data = emojiMap.get(emoji)
   if (data) {
-    return data.keywords;
+    return data.keywords
   }
 
   // Fallback categories for emojis not in emojibase-data
-  if (/[\u{1F600}-\u{1F64F}]/u.test(emoji))
-    return ["face", "emotion", "person", "expression"];
-  if (/[\u{1F400}-\u{1F43F}]/u.test(emoji))
-    return ["animal", "nature", "cute", "pet"];
-  if (/[\u{1F440}-\u{1F4FF}]/u.test(emoji)) return ["object", "symbol", "tool"];
-  if (/[\u{1F300}-\u{1F3FF}]/u.test(emoji))
-    return ["nature", "travel", "activity", "place"];
-  if (/[\u{1F680}-\u{1F6FF}]/u.test(emoji))
-    return ["transport", "travel", "vehicle"];
-  if (/[\u{2600}-\u{26FF}]/u.test(emoji)) return ["symbol", "misc", "sign"];
+  if (/[\u{1F600}-\u{1F64F}]/u.test(emoji)) return ['face', 'emotion', 'person', 'expression']
+  if (/[\u{1F400}-\u{1F43F}]/u.test(emoji)) return ['animal', 'nature', 'cute', 'pet']
+  if (/[\u{1F440}-\u{1F4FF}]/u.test(emoji)) return ['object', 'symbol', 'tool']
+  if (/[\u{1F300}-\u{1F3FF}]/u.test(emoji)) return ['nature', 'travel', 'activity', 'place']
+  if (/[\u{1F680}-\u{1F6FF}]/u.test(emoji)) return ['transport', 'travel', 'vehicle']
+  if (/[\u{2600}-\u{26FF}]/u.test(emoji)) return ['symbol', 'misc', 'sign']
 
-  return ["misc", "other"];
+  return ['misc', 'other']
 }
 
 export function EmojiPicker({
@@ -93,133 +89,133 @@ export function EmojiPicker({
   onClose,
   playerNumber,
 }: EmojiPickerProps) {
-  const [searchFilter, setSearchFilter] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState<number | null>(null);
-  const [hoveredEmoji, setHoveredEmoji] = useState<string | null>(null);
-  const [hoverPosition, setHoverPosition] = useState({ x: 0, y: 0 });
+  const [searchFilter, setSearchFilter] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState<number | null>(null)
+  const [hoveredEmoji, setHoveredEmoji] = useState<string | null>(null)
+  const [hoverPosition, setHoverPosition] = useState({ x: 0, y: 0 })
 
   // Enhanced search functionality - clear separation between default and search
-  const isSearching = searchFilter.trim().length > 0;
-  const isCategoryFiltered = selectedCategory !== null && !isSearching;
+  const isSearching = searchFilter.trim().length > 0
+  const isCategoryFiltered = selectedCategory !== null && !isSearching
 
   // Calculate which categories have emojis
   const availableCategories = useMemo(() => {
-    const categoryCounts: Record<number, number> = {};
+    const categoryCounts: Record<number, number> = {}
     PLAYER_EMOJIS.forEach((emoji) => {
-      const data = emojiMap.get(emoji);
+      const data = emojiMap.get(emoji)
       if (data && data.group !== undefined) {
-        categoryCounts[data.group] = (categoryCounts[data.group] || 0) + 1;
+        categoryCounts[data.group] = (categoryCounts[data.group] || 0) + 1
       }
-    });
+    })
     return Object.keys(EMOJI_GROUPS)
       .map(Number)
-      .filter((groupId) => categoryCounts[groupId] > 0);
-  }, []);
+      .filter((groupId) => categoryCounts[groupId] > 0)
+  }, [])
 
   const displayEmojis = useMemo(() => {
     // Start with all emojis
-    let emojis = PLAYER_EMOJIS;
+    let emojis = PLAYER_EMOJIS
 
     // Apply category filter first (unless searching)
     if (isCategoryFiltered) {
       emojis = emojis.filter((emoji) => {
-        const data = emojiMap.get(emoji);
-        return data && data.group === selectedCategory;
-      });
+        const data = emojiMap.get(emoji)
+        return data && data.group === selectedCategory
+      })
     }
 
     // Then apply search filter
     if (!isSearching) {
-      return emojis;
+      return emojis
     }
 
-    const searchTerm = searchFilter.toLowerCase().trim();
+    const searchTerm = searchFilter.toLowerCase().trim()
 
     const results = PLAYER_EMOJIS.filter((emoji) => {
-      const keywords = getEmojiKeywords(emoji);
-      return keywords.some((keyword) => keyword?.includes(searchTerm));
-    });
+      const keywords = getEmojiKeywords(emoji)
+      return keywords.some((keyword) => keyword?.includes(searchTerm))
+    })
 
     // Sort results by relevance
     const sortedResults = results.sort((a, b) => {
-      const aKeywords = getEmojiKeywords(a);
-      const bKeywords = getEmojiKeywords(b);
+      const aKeywords = getEmojiKeywords(a)
+      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;
+      if (aExact && !bExact) return -1
+      if (!aExact && bExact) return 1
 
       // Word boundary matches (start of word)
-      const aStartsWithTerm = aKeywords.some((k) => k?.startsWith(searchTerm));
-      const bStartsWithTerm = bKeywords.some((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;
+      if (aStartsWithTerm && !bStartsWithTerm) return -1
+      if (!aStartsWithTerm && bStartsWithTerm) return 1
 
       // Score by number of matching keywords
-      const aScore = aKeywords.filter((k) => k?.includes(searchTerm)).length;
-      const bScore = bKeywords.filter((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;
-    });
+      return bScore - aScore
+    })
 
-    return sortedResults;
-  }, [searchFilter, isSearching, selectedCategory, isCategoryFiltered]);
+    return sortedResults
+  }, [searchFilter, isSearching, selectedCategory, isCategoryFiltered])
 
   return (
     <div
       className={css({
-        position: "fixed",
+        position: 'fixed',
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        background: "rgba(0, 0, 0, 0.8)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        background: 'rgba(0, 0, 0, 0.8)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
         zIndex: 1000,
-        animation: "fadeIn 0.2s ease",
-        padding: "20px",
+        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",
-          flexDirection: "column",
+          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',
+          flexDirection: 'column',
         })}
       >
         {/* Header */}
         <div
           className={css({
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            marginBottom: "16px",
-            borderBottom: "2px solid",
-            borderColor: "gray.100",
-            paddingBottom: "12px",
+            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",
+              fontSize: '18px',
+              fontWeight: 'bold',
+              color: 'gray.800',
               margin: 0,
             })}
           >
@@ -227,13 +223,13 @@ export function EmojiPicker({
           </h3>
           <button
             className={css({
-              background: "none",
-              border: "none",
-              fontSize: "24px",
-              cursor: "pointer",
-              color: "gray.500",
-              _hover: { color: "gray.700" },
-              padding: "4px",
+              background: 'none',
+              border: 'none',
+              fontSize: '24px',
+              cursor: 'pointer',
+              color: 'gray.500',
+              _hover: { color: 'gray.700' },
+              padding: '4px',
             })}
             onClick={onClose}
           >
@@ -244,36 +240,34 @@ export function EmojiPicker({
         {/* Current Selection & Search */}
         <div
           className={css({
-            display: "flex",
-            alignItems: "center",
-            gap: "16px",
-            marginBottom: "16px",
+            display: 'flex',
+            alignItems: 'center',
+            gap: '16px',
+            marginBottom: '16px',
             flexShrink: 0,
           })}
         >
           <div
             className={css({
-              padding: "8px 12px",
+              padding: '8px 12px',
               background:
                 playerNumber === 1
-                  ? "linear-gradient(135deg, #74b9ff, #0984e3)"
+                  ? 'linear-gradient(135deg, #74b9ff, #0984e3)'
                   : playerNumber === 2
-                    ? "linear-gradient(135deg, #fd79a8, #e84393)"
+                    ? '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",
+                      ? '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 className={css({ fontSize: '24px' })}>{currentEmoji}</div>
+            <div className={css({ fontSize: '12px', fontWeight: 'bold' })}>Current</div>
           </div>
 
           <input
@@ -283,15 +277,15 @@ export function EmojiPicker({
             onChange={(e) => setSearchFilter(e.target.value)}
             className={css({
               flex: 1,
-              padding: "8px 12px",
-              border: "2px solid",
-              borderColor: "gray.200",
-              borderRadius: "12px",
-              fontSize: "14px",
+              padding: '8px 12px',
+              border: '2px solid',
+              borderColor: 'gray.200',
+              borderRadius: '12px',
+              fontSize: '14px',
               _focus: {
-                outline: "none",
-                borderColor: "blue.400",
-                boxShadow: "0 0 0 3px rgba(66, 153, 225, 0.1)",
+                outline: 'none',
+                borderColor: 'blue.400',
+                boxShadow: '0 0 0 3px rgba(66, 153, 225, 0.1)',
               },
             })}
           />
@@ -299,19 +293,17 @@ export function EmojiPicker({
           {isSearching && (
             <div
               className={css({
-                fontSize: "12px",
-                color: "gray.600",
+                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",
+                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"}
+              {displayEmojis.length > 0 ? `✓ ${displayEmojis.length} found` : '✗ No matches'}
             </div>
           )}
         </div>
@@ -320,83 +312,71 @@ export function EmojiPicker({
         {!isSearching && (
           <div
             className={css({
-              display: "flex",
-              gap: "8px",
-              overflowX: "auto",
-              paddingBottom: "8px",
-              marginBottom: "12px",
+              display: 'flex',
+              gap: '8px',
+              overflowX: 'auto',
+              paddingBottom: '8px',
+              marginBottom: '12px',
               flexShrink: 0,
-              "&::-webkit-scrollbar": {
-                height: "6px",
+              '&::-webkit-scrollbar': {
+                height: '6px',
               },
-              "&::-webkit-scrollbar-thumb": {
-                background: "#cbd5e1",
-                borderRadius: "3px",
+              '&::-webkit-scrollbar-thumb': {
+                background: '#cbd5e1',
+                borderRadius: '3px',
               },
             })}
           >
             <button
               onClick={() => setSelectedCategory(null)}
               className={css({
-                padding: "8px 16px",
-                borderRadius: "20px",
-                border:
-                  selectedCategory === null
-                    ? "2px solid #3b82f6"
-                    : "2px solid #e5e7eb",
-                background: selectedCategory === null ? "#eff6ff" : "white",
-                color: selectedCategory === null ? "#1e40af" : "#6b7280",
-                fontSize: "13px",
-                fontWeight: "600",
-                cursor: "pointer",
-                whiteSpace: "nowrap",
-                transition: "all 0.2s ease",
+                padding: '8px 16px',
+                borderRadius: '20px',
+                border: selectedCategory === null ? '2px solid #3b82f6' : '2px solid #e5e7eb',
+                background: selectedCategory === null ? '#eff6ff' : 'white',
+                color: selectedCategory === null ? '#1e40af' : '#6b7280',
+                fontSize: '13px',
+                fontWeight: '600',
+                cursor: 'pointer',
+                whiteSpace: 'nowrap',
+                transition: 'all 0.2s ease',
                 _hover: {
-                  background: selectedCategory === null ? "#dbeafe" : "#f9fafb",
-                  transform: "translateY(-1px)",
+                  background: selectedCategory === null ? '#dbeafe' : '#f9fafb',
+                  transform: 'translateY(-1px)',
                 },
               })}
             >
               ✨ All
             </button>
             {availableCategories.map((groupId) => {
-              const group = EMOJI_GROUPS[groupId as keyof typeof EMOJI_GROUPS];
+              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",
+                    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",
+                        ? '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)",
+                      background: selectedCategory === Number(groupId) ? '#dbeafe' : '#f9fafb',
+                      transform: 'translateY(-1px)',
                     },
                   })}
                 >
                   {group.icon} {group.name}
                 </button>
-              );
+              )
             })}
           </div>
         )}
@@ -405,33 +385,33 @@ export function EmojiPicker({
         {isSearching && displayEmojis.length > 0 && (
           <div
             className={css({
-              padding: "8px 12px",
-              background: "blue.50",
-              border: "1px solid",
-              borderColor: "blue.200",
-              borderRadius: "8px",
-              marginBottom: "12px",
+              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",
+                fontSize: '14px',
+                fontWeight: 'bold',
+                color: 'blue.700',
+                marginBottom: '4px',
               })}
             >
               🔍 Search Results for "{searchFilter}"
             </div>
             <div
               className={css({
-                fontSize: "12px",
-                color: "blue.600",
+                fontSize: '12px',
+                color: 'blue.600',
               })}
             >
-              Showing {displayEmojis.length} of {PLAYER_EMOJIS.length} emojis •
-              Clear search to see all
+              Showing {displayEmojis.length} of {PLAYER_EMOJIS.length} emojis • Clear search to see
+              all
             </div>
           </div>
         )}
@@ -440,36 +420,36 @@ export function EmojiPicker({
         {!isSearching && (
           <div
             className={css({
-              padding: "8px 12px",
-              background: "gray.50",
-              border: "1px solid",
-              borderColor: "gray.200",
-              borderRadius: "8px",
-              marginBottom: "12px",
+              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",
+                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"}
+                : '📝 All Available Characters'}
             </div>
             <div
               className={css({
-                fontSize: "12px",
-                color: "gray.600",
+                fontSize: '12px',
+                color: 'gray.600',
               })}
             >
-              {displayEmojis.length} emojis{" "}
-              {selectedCategory !== null ? "in category" : "available"} • Use
-              search to find specific emojis
+              {displayEmojis.length} emojis{' '}
+              {selectedCategory !== null ? 'in category' : 'available'} • Use search to find
+              specific emojis
             </div>
           </div>
         )}
@@ -479,105 +459,105 @@ export function EmojiPicker({
           <div
             className={css({
               flex: 1,
-              overflowY: "auto",
+              overflowY: 'auto',
               minHeight: 0,
-              "&::-webkit-scrollbar": {
-                width: "10px",
+              '&::-webkit-scrollbar': {
+                width: '10px',
               },
-              "&::-webkit-scrollbar-track": {
-                background: "#f1f5f9",
-                borderRadius: "5px",
+              '&::-webkit-scrollbar-track': {
+                background: '#f1f5f9',
+                borderRadius: '5px',
               },
-              "&::-webkit-scrollbar-thumb": {
-                background: "#cbd5e1",
-                borderRadius: "5px",
-                "&:hover": {
-                  background: "#94a3b8",
+              '&::-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)",
+                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: 1000px)': {
+                  gridTemplateColumns: 'repeat(12, 1fr)',
                 },
-                "@media (max-width: 800px)": {
-                  gridTemplateColumns: "repeat(10, 1fr)",
+                '@media (max-width: 800px)': {
+                  gridTemplateColumns: 'repeat(10, 1fr)',
                 },
-                "@media (max-width: 600px)": {
-                  gridTemplateColumns: "repeat(8, 1fr)",
+                '@media (max-width: 600px)': {
+                  gridTemplateColumns: 'repeat(8, 1fr)',
                 },
               })}
             >
               {displayEmojis.map((emoji) => {
-                const isSelected = emoji === currentEmoji;
+                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";
-                };
+                  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";
-                };
+                  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";
-                };
+                  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",
+                      aspectRatio: '1',
                       background: getSelectedBg(),
-                      border: "2px solid",
+                      border: '2px solid',
                       borderColor: getSelectedBorder(),
-                      borderRadius: "6px",
-                      fontSize: "20px",
-                      cursor: "pointer",
-                      transition: "all 0.1s ease",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
+                      borderRadius: '6px',
+                      fontSize: '20px',
+                      cursor: 'pointer',
+                      transition: 'all 0.1s ease',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
                       _hover: {
                         background: getHoverBg(),
-                        transform: "scale(1.15)",
+                        transform: 'scale(1.15)',
                         zIndex: 1,
-                        fontSize: "24px",
+                        fontSize: '24px',
                       },
                     })}
                     onMouseEnter={(e) => {
-                      const rect = e.currentTarget.getBoundingClientRect();
-                      setHoveredEmoji(emoji);
+                      const rect = e.currentTarget.getBoundingClientRect()
+                      setHoveredEmoji(emoji)
                       setHoverPosition({
                         x: rect.left + rect.width / 2,
                         y: rect.top,
-                      });
+                      })
                     }}
                     onMouseLeave={() => setHoveredEmoji(null)}
                     onClick={() => {
-                      onEmojiSelect(emoji);
+                      onEmojiSelect(emoji)
                     }}
                   >
                     {emoji}
                   </button>
-                );
+                )
               })}
             </div>
           </div>
@@ -587,41 +567,39 @@ export function EmojiPicker({
         {isSearching && displayEmojis.length === 0 && (
           <div
             className={css({
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              textAlign: "center",
-              color: "gray.500",
+              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: '48px', marginBottom: '16px' })}>🔍</div>
             <div
               className={css({
-                fontSize: "18px",
-                fontWeight: "bold",
-                marginBottom: "8px",
+                fontSize: '18px',
+                fontWeight: 'bold',
+                marginBottom: '8px',
               })}
             >
               No emojis found for "{searchFilter}"
             </div>
-            <div className={css({ fontSize: "14px", marginBottom: "12px" })}>
+            <div className={css({ fontSize: '14px', marginBottom: '12px' })}>
               Try searching for "face", "smart", "heart", "animal", "food", etc.
             </div>
             <button
               className={css({
-                background: "blue.500",
-                color: "white",
-                border: "none",
-                borderRadius: "6px",
-                padding: "8px 16px",
-                fontSize: "12px",
-                cursor: "pointer",
-                _hover: { background: "blue.600" },
+                background: 'blue.500',
+                color: 'white',
+                border: 'none',
+                borderRadius: '6px',
+                padding: '8px 16px',
+                fontSize: '12px',
+                cursor: 'pointer',
+                _hover: { background: 'blue.600' },
               })}
-              onClick={() => setSearchFilter("")}
+              onClick={() => setSearchFilter('')}
             >
               Clear search to see all {PLAYER_EMOJIS.length} emojis
             </button>
@@ -631,18 +609,18 @@ export function EmojiPicker({
         {/* Quick selection hint */}
         <div
           className={css({
-            marginTop: "8px",
-            padding: "6px 12px",
-            background: "gray.50",
-            borderRadius: "8px",
-            fontSize: "11px",
-            color: "gray.600",
-            textAlign: "center",
+            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
+          💡 Powered by emojibase-data • Try: "face", "smart", "heart", "animal", "food" • Click to
+          select
         </div>
       </div>
 
@@ -650,79 +628,78 @@ export function EmojiPicker({
       {hoveredEmoji && (
         <div
           style={{
-            position: "fixed",
+            position: 'fixed',
             left: `${hoverPosition.x}px`,
             top: `${hoverPosition.y - 120}px`,
-            transform: "translateX(-50%)",
-            pointerEvents: "none",
+            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 */}
           <div
             style={{
-              position: "absolute",
-              inset: "-20px",
-              borderRadius: "50%",
-              background:
-                "radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%)",
-              animation: "pulseGlow 2s ease-in-out infinite",
+              position: 'absolute',
+              inset: '-20px',
+              borderRadius: '50%',
+              background: 'radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%)',
+              animation: 'pulseGlow 2s ease-in-out infinite',
             }}
           />
 
           {/* Main preview card */}
           <div
             style={{
-              background: "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)",
-              borderRadius: "24px",
-              padding: "20px",
+              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)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: "120px",
+                '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',
+              fontSize: '120px',
               lineHeight: 1,
-              minWidth: "160px",
-              minHeight: "160px",
-              position: "relative",
-              animation: "emojiFloat 3s ease-in-out infinite",
+              minWidth: '160px',
+              minHeight: '160px',
+              position: 'relative',
+              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",
+                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",
+                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",
+                position: 'absolute',
+                top: '20px',
+                left: '20px',
+                fontSize: '12px',
+                animation: 'sparkle 1.5s ease-in-out infinite',
+                animationDelay: '1s',
               }}
             >
               ✨
@@ -734,16 +711,16 @@ export function EmojiPicker({
           {/* Arrow pointing down with glow */}
           <div
             style={{
-              position: "absolute",
-              bottom: "-12px",
-              left: "50%",
-              transform: "translateX(-50%)",
+              position: 'absolute',
+              bottom: '-12px',
+              left: '50%',
+              transform: 'translateX(-50%)',
               width: 0,
               height: 0,
-              borderLeft: "14px solid transparent",
-              borderRight: "14px solid transparent",
-              borderTop: "14px solid white",
-              filter: "drop-shadow(0 4px 8px rgba(0,0,0,0.3))",
+              borderLeft: '14px solid transparent',
+              borderRight: '14px solid transparent',
+              borderTop: '14px solid white',
+              filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.3))',
             }}
           />
         </div>
@@ -795,7 +772,7 @@ export function EmojiPicker({
         }}
       />
     </div>
-  );
+  )
 }
 
 // Add fade in animation
@@ -804,15 +781,12 @@ const fadeInAnimation = `
   from { opacity: 0; transform: scale(0.9); }
   to { opacity: 1; transform: scale(1); }
 }
-`;
+`
 
 // Inject animation styles
-if (
-  typeof document !== "undefined" &&
-  !document.getElementById("emoji-picker-animations")
-) {
-  const style = document.createElement("style");
-  style.id = "emoji-picker-animations";
-  style.textContent = fadeInAnimation;
-  document.head.appendChild(style);
+if (typeof document !== 'undefined' && !document.getElementById('emoji-picker-animations')) {
+  const style = document.createElement('style')
+  style.id = 'emoji-picker-animations'
+  style.textContent = fadeInAnimation
+  document.head.appendChild(style)
 }
diff --git a/apps/web/src/arcade-games/matching/components/GameCard.tsx b/apps/web/src/arcade-games/matching/components/GameCard.tsx
index 8cdf12ff..8b7d902a 100644
--- a/apps/web/src/arcade-games/matching/components/GameCard.tsx
+++ b/apps/web/src/arcade-games/matching/components/GameCard.tsx
@@ -1,156 +1,148 @@
-"use client";
+'use client'
 
-import { AbacusReact, useAbacusConfig } from "@soroban/abacus-react";
-import { css } from "../../../../styled-system/css";
-import { useGameMode } from "@/contexts/GameModeContext";
-import type { GameCardProps } from "../types";
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import { css } from '../../../../styled-system/css'
+import { useGameMode } from '@/contexts/GameModeContext'
+import type { GameCardProps } from '../types'
 
-export function GameCard({
-  card,
-  isFlipped,
-  isMatched,
-  onClick,
-  disabled = false,
-}: GameCardProps) {
-  const appConfig = useAbacusConfig();
-  const { players: playerMap, activePlayers: activePlayerIds } = useGameMode();
+export function GameCard({ card, isFlipped, isMatched, onClick, disabled = false }: GameCardProps) {
+  const appConfig = useAbacusConfig()
+  const { players: playerMap, activePlayers: activePlayerIds } = useGameMode()
 
   // Get active players array for mapping numeric IDs to actual players
   const activePlayers = Array.from(activePlayerIds)
     .map((id) => playerMap.get(id))
-    .filter((p): p is NonNullable<typeof p> => p !== undefined);
+    .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);
-  };
+    if (!playerId) return -1
+    return activePlayers.findIndex((p) => p.id === playerId)
+  }
 
   const cardBackStyles = css({
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    backfaceVisibility: "hidden",
-    borderRadius: "12px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: "white",
-    fontSize: "28px",
-    fontWeight: "bold",
-    textShadow: "1px 1px 2px rgba(0,0,0,0.3)",
-    cursor: disabled ? "default" : "pointer",
-    userSelect: "none",
-    transition: "all 0.2s ease",
-  });
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backfaceVisibility: 'hidden',
+    borderRadius: '12px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: 'white',
+    fontSize: '28px',
+    fontWeight: 'bold',
+    textShadow: '1px 1px 2px rgba(0,0,0,0.3)',
+    cursor: disabled ? 'default' : 'pointer',
+    userSelect: 'none',
+    transition: 'all 0.2s ease',
+  })
 
   const cardFrontStyles = css({
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    backfaceVisibility: "hidden",
-    borderRadius: "12px",
-    background: "white",
-    border: "3px solid",
-    transform: "rotateY(180deg)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: "8px",
-    overflow: "hidden",
-    transition: "all 0.2s ease",
-  });
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backfaceVisibility: 'hidden',
+    borderRadius: '12px',
+    background: 'white',
+    border: '3px solid',
+    transform: 'rotateY(180deg)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '8px',
+    overflow: 'hidden',
+    transition: 'all 0.2s ease',
+  })
 
   // Dynamic styling based on card type and state
   const getCardBackGradient = () => {
     if (isMatched) {
       // Player-specific colors for matched cards - find player index by ID
-      const playerIndex = getPlayerIndex(card.matchedBy);
+      const playerIndex = getPlayerIndex(card.matchedBy)
       if (playerIndex === 0) {
-        return "linear-gradient(135deg, #74b9ff, #0984e3)"; // Blue for first player
+        return 'linear-gradient(135deg, #74b9ff, #0984e3)' // Blue for first player
       } else if (playerIndex === 1) {
-        return "linear-gradient(135deg, #fd79a8, #e84393)"; // Pink for second player
+        return 'linear-gradient(135deg, #fd79a8, #e84393)' // Pink for second player
       }
-      return "linear-gradient(135deg, #48bb78, #38a169)"; // Default green for single player or 3+
+      return 'linear-gradient(135deg, #48bb78, #38a169)' // Default green for single player or 3+
     }
 
     switch (card.type) {
-      case "abacus":
-        return "linear-gradient(135deg, #7b4397, #dc2430)";
-      case "number":
-        return "linear-gradient(135deg, #2E86AB, #A23B72)";
-      case "complement":
-        return "linear-gradient(135deg, #F18F01, #6A994E)";
+      case 'abacus':
+        return 'linear-gradient(135deg, #7b4397, #dc2430)'
+      case 'number':
+        return 'linear-gradient(135deg, #2E86AB, #A23B72)'
+      case 'complement':
+        return 'linear-gradient(135deg, #F18F01, #6A994E)'
       default:
-        return "linear-gradient(135deg, #667eea, #764ba2)";
+        return 'linear-gradient(135deg, #667eea, #764ba2)'
     }
-  };
+  }
 
   const getCardBackIcon = () => {
     if (isMatched) {
       // Show player emoji for matched cards in multiplayer mode
       if (card.matchedBy) {
-        const matchedPlayer = activePlayers.find(
-          (p) => p.id === card.matchedBy,
-        );
-        return matchedPlayer?.emoji || "✓";
+        const matchedPlayer = activePlayers.find((p) => p.id === card.matchedBy)
+        return matchedPlayer?.emoji || '✓'
       }
-      return "✓"; // Default checkmark for single player
+      return '✓' // Default checkmark for single player
     }
 
     switch (card.type) {
-      case "abacus":
-        return "🧮";
-      case "number":
-        return "🔢";
-      case "complement":
-        return "🤝";
+      case 'abacus':
+        return '🧮'
+      case 'number':
+        return '🔢'
+      case 'complement':
+        return '🤝'
       default:
-        return "❓";
+        return '❓'
     }
-  };
+  }
 
   const getBorderColor = () => {
     if (isMatched) {
       // Player-specific border colors for matched cards
-      const playerIndex = getPlayerIndex(card.matchedBy);
+      const playerIndex = getPlayerIndex(card.matchedBy)
       if (playerIndex === 0) {
-        return "#74b9ff"; // Blue for first player
+        return '#74b9ff' // Blue for first player
       } else if (playerIndex === 1) {
-        return "#fd79a8"; // Pink for second player
+        return '#fd79a8' // Pink for second player
       }
-      return "#48bb78"; // Default green for single player or 3+
+      return '#48bb78' // Default green for single player or 3+
     }
-    if (isFlipped) return "#667eea";
-    return "#e2e8f0";
-  };
+    if (isFlipped) return '#667eea'
+    return '#e2e8f0'
+  }
 
   return (
     <div
       className={css({
-        perspective: "1000px",
-        width: "100%",
-        height: "100%",
-        cursor: disabled || isMatched ? "default" : "pointer",
-        transition: "transform 0.2s ease",
+        perspective: '1000px',
+        width: '100%',
+        height: '100%',
+        cursor: disabled || isMatched ? 'default' : 'pointer',
+        transition: 'transform 0.2s ease',
         _hover:
           disabled || isMatched
             ? {}
             : {
-                transform: "translateY(-2px)",
+                transform: 'translateY(-2px)',
               },
       })}
       onClick={disabled || isMatched ? undefined : onClick}
     >
       <div
         className={css({
-          position: "relative",
-          width: "100%",
-          height: "100%",
-          textAlign: "center",
-          transition: "transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1)",
-          transformStyle: "preserve-3d",
-          transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+          textAlign: 'center',
+          transition: 'transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1)',
+          transformStyle: 'preserve-3d',
+          transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
         })}
       >
         {/* Card Back (hidden/face-down state) */}
@@ -162,16 +154,16 @@ export function GameCard({
         >
           <div
             className={css({
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: "4px",
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '4px',
             })}
           >
-            <div className={css({ fontSize: "32px" })}>{getCardBackIcon()}</div>
+            <div className={css({ fontSize: '32px' })}>{getCardBackIcon()}</div>
             {isMatched && (
-              <div className={css({ fontSize: "14px", opacity: 0.9 })}>
-                {card.matchedBy ? "Claimed!" : "Matched!"}
+              <div className={css({ fontSize: '14px', opacity: 0.9 })}>
+                {card.matchedBy ? 'Claimed!' : 'Matched!'}
               </div>
             )}
           </div>
@@ -184,13 +176,13 @@ export function GameCard({
             borderColor: getBorderColor(),
             boxShadow: isMatched
               ? getPlayerIndex(card.matchedBy) === 0
-                ? "0 0 20px rgba(116, 185, 255, 0.4)" // Blue glow for player 1
+                ? '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 */}
@@ -199,18 +191,15 @@ export function GameCard({
               {/* 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",
+                  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,
                 })}
               />
@@ -218,55 +207,52 @@ export function GameCard({
               {/* Main Badge */}
               <div
                 className={css({
-                  position: "absolute",
-                  top: "6px",
-                  right: "6px",
-                  width: "32px",
-                  height: "32px",
-                  borderRadius: "50%",
+                  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",
+                      ? '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)",
+                      ? '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": {
+                  '&::before': {
                     content: '""',
-                    position: "absolute",
-                    top: "-2px",
-                    left: "-2px",
-                    right: "-2px",
-                    bottom: "-2px",
-                    borderRadius: "50%",
+                    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",
+                        ? '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))",
+                    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>
 
@@ -275,13 +261,13 @@ export function GameCard({
                 <div
                   key={i}
                   className={css({
-                    position: "absolute",
-                    top: "22px",
-                    right: "22px",
-                    width: "4px",
-                    height: "4px",
-                    background: "#ffeaa7",
-                    borderRadius: "50%",
+                    position: 'absolute',
+                    top: '22px',
+                    right: '22px',
+                    width: '4px',
+                    height: '4px',
+                    background: '#ffeaa7',
+                    borderRadius: '50%',
                     animation: `sparkle${i + 1} 1.5s ease-out`,
                     zIndex: 8,
                   })}
@@ -289,17 +275,17 @@ export function GameCard({
               ))}
             </>
           )}
-          {card.type === "abacus" ? (
+          {card.type === 'abacus' ? (
             <div
               className={css({
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "100%",
-                height: "100%",
-                "& svg": {
-                  maxWidth: "100%",
-                  maxHeight: "100%",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '100%',
+                height: '100%',
+                '& svg': {
+                  maxWidth: '100%',
+                  maxHeight: '100%',
                 },
               })}
             >
@@ -315,56 +301,56 @@ export function GameCard({
                 animated={false}
               />
             </div>
-          ) : card.type === "number" ? (
+          ) : card.type === 'number' ? (
             <div
               className={css({
-                fontSize: "32px",
-                fontWeight: "bold",
-                color: "gray.800",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
+                fontSize: '32px',
+                fontWeight: 'bold',
+                color: 'gray.800',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
               })}
             >
               {card.number}
             </div>
-          ) : card.type === "complement" ? (
+          ) : card.type === 'complement' ? (
             <div
               className={css({
-                textAlign: "center",
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: "4px",
+                textAlign: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '4px',
               })}
             >
               <div
                 className={css({
-                  fontSize: "28px",
-                  fontWeight: "bold",
-                  color: "gray.800",
+                  fontSize: '28px',
+                  fontWeight: 'bold',
+                  color: 'gray.800',
                 })}
               >
                 {card.number}
               </div>
               <div
                 className={css({
-                  fontSize: "16px",
-                  color: "gray.600",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "4px",
+                  fontSize: '16px',
+                  color: 'gray.600',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
                 })}
               >
-                <span>{card.targetSum === 5 ? "✋" : "🔟"}</span>
+                <span>{card.targetSum === 5 ? '✋' : '🔟'}</span>
                 <span>Friends</span>
               </div>
               {card.complement !== undefined && (
                 <div
                   className={css({
-                    fontSize: "12px",
-                    color: "gray.500",
+                    fontSize: '12px',
+                    color: 'gray.500',
                   })}
                 >
                   + {card.complement} = {card.targetSum}
@@ -374,8 +360,8 @@ export function GameCard({
           ) : (
             <div
               className={css({
-                fontSize: "24px",
-                color: "gray.500",
+                fontSize: '24px',
+                color: 'gray.500',
               })}
             >
               ?
@@ -388,22 +374,21 @@ export function GameCard({
       {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",
+            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>
-  );
+  )
 }
 
 // Add global animation styles
@@ -556,15 +541,12 @@ const globalCardAnimations = `
   25% { transform: translateX(-3px); }
   75% { transform: translateX(3px); }
 }
-`;
+`
 
 // Inject global styles
-if (
-  typeof document !== "undefined" &&
-  !document.getElementById("memory-card-animations")
-) {
-  const style = document.createElement("style");
-  style.id = "memory-card-animations";
-  style.textContent = globalCardAnimations;
-  document.head.appendChild(style);
+if (typeof document !== 'undefined' && !document.getElementById('memory-card-animations')) {
+  const style = document.createElement('style')
+  style.id = 'memory-card-animations'
+  style.textContent = globalCardAnimations
+  document.head.appendChild(style)
 }
diff --git a/apps/web/src/arcade-games/matching/components/GamePhase.tsx b/apps/web/src/arcade-games/matching/components/GamePhase.tsx
index 134a05a6..bec4697e 100644
--- a/apps/web/src/arcade-games/matching/components/GamePhase.tsx
+++ b/apps/web/src/arcade-games/matching/components/GamePhase.tsx
@@ -1,30 +1,27 @@
-"use client";
+'use client'
 
-import { useMemo } from "react";
-import { useViewerId } from "@/hooks/useViewerId";
-import { MemoryGrid } from "@/components/matching/MemoryGrid";
-import { css } from "../../../../styled-system/css";
-import { useMatching } from "../Provider";
-import { getGridConfiguration } from "../utils/cardGeneration";
-import { GameCard } from "./GameCard";
+import { useMemo } from 'react'
+import { useViewerId } from '@/hooks/useViewerId'
+import { MemoryGrid } from '@/components/matching/MemoryGrid'
+import { css } from '../../../../styled-system/css'
+import { useMatching } from '../Provider'
+import { getGridConfiguration } from '../utils/cardGeneration'
+import { GameCard } from './GameCard'
 
 export function GamePhase() {
-  const { state, flipCard, hoverCard, gameMode } = useMatching();
-  const { data: viewerId } = useViewerId();
+  const { state, flipCard, hoverCard, gameMode } = useMatching()
+  const { data: viewerId } = useViewerId()
 
-  const gridConfig = useMemo(
-    () => getGridConfiguration(state.difficulty),
-    [state.difficulty],
-  );
+  const gridConfig = useMemo(() => getGridConfiguration(state.difficulty), [state.difficulty])
 
   return (
     <div
       className={css({
-        width: "100%",
-        height: "100%",
-        overflow: "hidden",
-        display: "flex",
-        flexDirection: "column",
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
       })}
     >
       {/* Game header removed - game type and player info now shown in nav bar */}
@@ -33,10 +30,10 @@ export function GamePhase() {
       <div
         className={css({
           flex: 1,
-          display: "flex",
-          flexDirection: "column",
+          display: 'flex',
+          flexDirection: 'column',
           minHeight: 0,
-          overflow: "hidden",
+          overflow: 'hidden',
         })}
       >
         <MemoryGrid
@@ -63,31 +60,31 @@ export function GamePhase() {
       {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" },
+            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",
+              fontSize: '13px',
+              color: 'gray.600',
               margin: 0,
-              fontWeight: "medium",
+              fontWeight: 'medium',
             })}
           >
-            💡{" "}
-            {state.gameType === "abacus-numeral"
-              ? "Match abacus beads with numbers"
-              : "Find pairs that add to 5 or 10"}
+            💡{' '}
+            {state.gameType === 'abacus-numeral'
+              ? 'Match abacus beads with numbers'
+              : 'Find pairs that add to 5 or 10'}
           </p>
         </div>
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/matching/components/MemoryPairsGame.tsx b/apps/web/src/arcade-games/matching/components/MemoryPairsGame.tsx
index f88acd14..7886e155 100644
--- a/apps/web/src/arcade-games/matching/components/MemoryPairsGame.tsx
+++ b/apps/web/src/arcade-games/matching/components/MemoryPairsGame.tsx
@@ -1,57 +1,53 @@
-"use client";
+'use client'
 
-import { useRouter } from "next/navigation";
-import { useEffect, useRef } from "react";
-import { PageWithNav } from "@/components/PageWithNav";
-import { css } from "../../../../styled-system/css";
-import { StandardGameLayout } from "@/components/StandardGameLayout";
-import { useFullscreen } from "@/contexts/FullscreenContext";
-import { useMatching } from "../Provider";
-import { GamePhase } from "./GamePhase";
-import { ResultsPhase } from "./ResultsPhase";
-import { SetupPhase } from "./SetupPhase";
+import { useRouter } from 'next/navigation'
+import { useEffect, useRef } from 'react'
+import { PageWithNav } from '@/components/PageWithNav'
+import { css } from '../../../../styled-system/css'
+import { StandardGameLayout } from '@/components/StandardGameLayout'
+import { useFullscreen } from '@/contexts/FullscreenContext'
+import { useMatching } from '../Provider'
+import { GamePhase } from './GamePhase'
+import { ResultsPhase } from './ResultsPhase'
+import { SetupPhase } from './SetupPhase'
 
 export function MemoryPairsGame() {
-  const router = useRouter();
-  const { state, exitSession, resetGame, goToSetup } = useMatching();
-  const { setFullscreenElement } = useFullscreen();
-  const gameRef = useRef<HTMLDivElement>(null);
+  const router = useRouter()
+  const { state, exitSession, resetGame, goToSetup } = useMatching()
+  const { setFullscreenElement } = useFullscreen()
+  const gameRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     // Register this component's main div as the fullscreen element
     if (gameRef.current) {
-      console.log(
-        "🎯 MemoryPairsGame: Registering fullscreen element:",
-        gameRef.current,
-      );
-      setFullscreenElement(gameRef.current);
+      console.log('🎯 MemoryPairsGame: Registering fullscreen element:', gameRef.current)
+      setFullscreenElement(gameRef.current)
     }
-  }, [setFullscreenElement]);
+  }, [setFullscreenElement])
 
   // Determine nav title and emoji based on game type
-  const navTitle =
-    state.gameType === "abacus-numeral" ? "Abacus Match" : "Complement Pairs";
-  const navEmoji = state.gameType === "abacus-numeral" ? "🧮" : "🤝";
+  const navTitle = state.gameType === 'abacus-numeral' ? 'Abacus Match' : 'Complement Pairs'
+  const navEmoji = state.gameType === 'abacus-numeral' ? '🧮' : '🤝'
 
   return (
     <PageWithNav
       navTitle={navTitle}
       navEmoji={navEmoji}
-      emphasizePlayerSelection={state.gamePhase === "setup"}
+      emphasizePlayerSelection={state.gamePhase === 'setup'}
       onExitSession={() => {
-        exitSession();
-        router.push("/arcade");
+        exitSession()
+        router.push('/arcade')
       }}
       onSetup={
         goToSetup
           ? () => {
               // Transition to setup phase (will pause game if active)
-              goToSetup();
+              goToSetup()
             }
           : undefined
       }
       onNewGame={() => {
-        resetGame();
+        resetGame()
       }}
       currentPlayerId={state.currentPlayer}
       playerScores={state.scores}
@@ -62,36 +58,36 @@ export function MemoryPairsGame() {
           ref={gameRef}
           className={css({
             flex: 1,
-            padding: { base: "12px", sm: "16px", md: "20px" },
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            position: "relative",
-            overflow: "auto",
+            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)",
+              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",
+              display: 'flex',
+              flexDirection: 'column',
+              overflow: 'hidden',
             })}
           >
-            {state.gamePhase === "setup" && <SetupPhase />}
-            {state.gamePhase === "playing" && <GamePhase />}
-            {state.gamePhase === "results" && <ResultsPhase />}
+            {state.gamePhase === 'setup' && <SetupPhase />}
+            {state.gamePhase === 'playing' && <GamePhase />}
+            {state.gamePhase === 'results' && <ResultsPhase />}
           </main>
         </div>
       </StandardGameLayout>
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/matching/components/PlayerStatusBar.tsx b/apps/web/src/arcade-games/matching/components/PlayerStatusBar.tsx
index 18ad99a4..8e66ed8b 100644
--- a/apps/web/src/arcade-games/matching/components/PlayerStatusBar.tsx
+++ b/apps/web/src/arcade-games/matching/components/PlayerStatusBar.tsx
@@ -1,23 +1,23 @@
-"use client";
+'use client'
 
-import { useViewerId } from "@/hooks/useViewerId";
-import { css } from "../../../../styled-system/css";
-import { gamePlurals } from "@/utils/pluralization";
-import { useMatching } from "../Provider";
+import { useViewerId } from '@/hooks/useViewerId'
+import { css } from '../../../../styled-system/css'
+import { gamePlurals } from '@/utils/pluralization'
+import { useMatching } from '../Provider'
 
 interface PlayerStatusBarProps {
-  className?: string;
+  className?: string
 }
 
 export function PlayerStatusBar({ className }: PlayerStatusBarProps) {
-  const { state } = useMatching();
-  const { data: viewerId } = useViewerId();
+  const { state } = useMatching()
+  const { data: viewerId } = useViewerId()
 
   // Get active players from game state (not GameModeContext)
   // This ensures we only show players actually in this game
   const activePlayersData = state.activePlayers
     .map((id) => state.playerMetadata?.[id])
-    .filter((p): p is NonNullable<typeof p> => p !== undefined);
+    .filter((p): p is NonNullable<typeof p> => p !== undefined)
 
   // Map active players to display data with scores
   // State now uses player IDs (UUIDs) as keys
@@ -29,167 +29,158 @@ export function PlayerStatusBar({ className }: PlayerStatusBarProps) {
     consecutiveMatches: state.consecutiveMatches?.[player.id] || 0,
     // Check if this player belongs to the current viewer
     isLocalPlayer: player.userId === viewerId,
-  }));
+  }))
 
   // Check if current player is local (your turn) or remote (waiting)
-  const currentPlayer = activePlayers.find((p) => p.id === state.currentPlayer);
-  const isYourTurn = currentPlayer?.isLocalPlayer === true;
+  const currentPlayer = activePlayers.find((p) => p.id === state.currentPlayer)
+  const isYourTurn = currentPlayer?.isLocalPlayer === true
 
   // Get celebration level based on consecutive matches
   const getCelebrationLevel = (consecutiveMatches: number) => {
-    if (consecutiveMatches >= 5) return "legendary";
-    if (consecutiveMatches >= 3) return "epic";
-    if (consecutiveMatches >= 2) return "great";
-    return "normal";
-  };
+    if (consecutiveMatches >= 5) return 'legendary'
+    if (consecutiveMatches >= 3) return 'epic'
+    if (consecutiveMatches >= 2) return 'great'
+    return 'normal'
+  }
 
   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 || ""}`}
+          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({
-            display: "flex",
-            alignItems: "center",
-            gap: { base: "2", md: "3" },
+            display: 'flex',
+            alignItems: 'center',
+            gap: { base: '2', md: '3' },
           })}
         >
           <div
             className={css({
-              fontSize: { base: "xl", md: "2xl" },
+              fontSize: { base: 'xl', md: '2xl' },
             })}
           >
-            {activePlayers[0]?.displayEmoji || "🚀"}
+            {activePlayers[0]?.displayEmoji || '🚀'}
           </div>
           <div
             className={css({
-              fontSize: { base: "sm", md: "md" },
-              fontWeight: "bold",
-              color: "gray.700",
+              fontSize: { base: 'sm', md: 'md' },
+              fontWeight: 'bold',
+              color: 'gray.700',
             })}
           >
-            {activePlayers[0]?.displayName || "Player 1"}
+            {activePlayers[0]?.displayName || 'Player 1'}
           </div>
           <div
             className={css({
-              fontSize: { base: "xs", md: "sm" },
-              color: "blue.600",
-              fontWeight: "medium",
+              fontSize: { base: 'xs', md: 'sm' },
+              color: 'blue.600',
+              fontWeight: 'medium',
             })}
           >
-            {gamePlurals.pair(state.matchedPairs)} of {state.totalPairs} •{" "}
+            {gamePlurals.pair(state.matchedPairs)} of {state.totalPairs} •{' '}
             {gamePlurals.move(state.moves)}
           </div>
         </div>
       </div>
-    );
+    )
   }
 
   // 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 || ""}`}
+        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",
+          display: 'grid',
           gridTemplateColumns:
             activePlayers.length <= 2
-              ? "repeat(2, 1fr)"
+              ? 'repeat(2, 1fr)'
               : activePlayers.length === 3
-                ? "repeat(3, 1fr)"
-                : "repeat(2, 1fr) repeat(2, 1fr)",
-          gap: { base: "2", md: "3" },
-          alignItems: "center",
+                ? '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 isCurrentPlayer = player.id === state.currentPlayer
           const isLeading =
-            player.score === Math.max(...activePlayers.map((p) => p.score)) &&
-            player.score > 0;
-          const celebrationLevel = getCelebrationLevel(
-            player.consecutiveMatches,
-          );
+            player.score === Math.max(...activePlayers.map((p) => p.score)) && player.score > 0
+          const celebrationLevel = getCelebrationLevel(player.consecutiveMatches)
 
           return (
             <div
               key={player.id}
               className={css({
-                display: "flex",
-                alignItems: "center",
-                gap: { base: "2", md: "3" },
-                p: isCurrentPlayer
-                  ? { base: "3", md: "4" }
-                  : { base: "2", md: "2" },
-                rounded: isCurrentPlayer ? "2xl" : "lg",
+                display: 'flex',
+                alignItems: 'center',
+                gap: { base: '2', md: '3' },
+                p: isCurrentPlayer ? { base: '3', md: '4' } : { base: '2', md: '2' },
+                rounded: isCurrentPlayer ? '2xl' : 'lg',
                 background: isCurrentPlayer
-                  ? `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",
+                  ? `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',
                 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 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)",
+                  ? '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",
+                    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)",
+                    animation: 'none',
+                    boxShadow: '0 0 20px rgba(255, 215, 0, 0.6)',
                   })}
                 >
                   👑
@@ -200,14 +191,14 @@ export function PlayerStatusBar({ className }: PlayerStatusBarProps) {
               {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",
+                    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,
                   })}
                 />
@@ -216,22 +207,18 @@ export function PlayerStatusBar({ className }: PlayerStatusBarProps) {
               {/* Living, breathing player emoji */}
               <div
                 className={css({
-                  fontSize: isCurrentPlayer
-                    ? { base: "2xl", md: "3xl" }
-                    : { base: "lg", md: "xl" },
+                  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",
+                    ? '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',
                   },
                 })}
               >
@@ -247,15 +234,11 @@ export function PlayerStatusBar({ className }: PlayerStatusBarProps) {
               >
                 <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",
+                    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}
@@ -263,54 +246,46 @@ export function PlayerStatusBar({ className }: PlayerStatusBarProps) {
                 <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",
+                      ? { 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: player.isLocalPlayer ? "red.600" : "blue.600",
-                        fontWeight: "black",
-                        fontSize: isCurrentPlayer
-                          ? { base: "sm", md: "lg" }
-                          : "inherit",
+                        color: player.isLocalPlayer ? 'red.600' : 'blue.600',
+                        fontWeight: 'black',
+                        fontSize: isCurrentPlayer ? { base: 'sm', md: 'lg' } : 'inherit',
                         animation: player.isLocalPlayer
-                          ? "none"
-                          : "gentle-pulse 2s ease-in-out infinite",
-                        textShadow: player.isLocalPlayer
-                          ? "0 0 15px currentColor"
-                          : "none",
+                          ? 'none'
+                          : 'gentle-pulse 2s ease-in-out infinite',
+                        textShadow: player.isLocalPlayer ? '0 0 15px currentColor' : 'none',
                       })}
                     >
-                      {player.isLocalPlayer ? " • Your turn" : " • Their turn"}
+                      {player.isLocalPlayer ? ' • Your turn' : ' • Their turn'}
                     </span>
                   )}
                   {player.consecutiveMatches > 1 && (
                     <div
                       className={css({
-                        fontSize: { base: "2xs", md: "xs" },
+                        fontSize: { base: '2xs', md: 'xs' },
                         color:
-                          celebrationLevel === "legendary"
-                            ? "purple.600"
-                            : celebrationLevel === "epic"
-                              ? "orange.600"
-                              : celebrationLevel === "great"
-                                ? "green.600"
-                                : "gray.500",
-                        fontWeight: "black",
+                          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",
+                          ? 'streak-pulse 1s ease-in-out infinite'
+                          : 'none',
+                        textShadow: isCurrentPlayer ? '0 0 10px currentColor' : 'none',
                       })}
                     >
                       🔥 {player.consecutiveMatches} streak!
@@ -323,24 +298,24 @@ export function PlayerStatusBar({ className }: PlayerStatusBarProps) {
               {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",
+                    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>
               )}
             </div>
-          );
+          )
         })}
       </div>
     </div>
-  );
+  )
 }
 
 // Epic animations for extreme emphasis
@@ -523,15 +498,12 @@ const epicAnimations = `
     box-shadow: 0 0 0 2px white, 0 0 0 6px #a855f7, 0 12px 32px rgba(0,0,0,0.2);
   }
 }
-`;
+`
 
 // Inject animation styles
-if (
-  typeof document !== "undefined" &&
-  !document.getElementById("player-status-animations")
-) {
-  const style = document.createElement("style");
-  style.id = "player-status-animations";
-  style.textContent = epicAnimations;
-  document.head.appendChild(style);
+if (typeof document !== 'undefined' && !document.getElementById('player-status-animations')) {
+  const style = document.createElement('style')
+  style.id = 'player-status-animations'
+  style.textContent = epicAnimations
+  document.head.appendChild(style)
 }
diff --git a/apps/web/src/arcade-games/matching/components/ResultsPhase.tsx b/apps/web/src/arcade-games/matching/components/ResultsPhase.tsx
index 1f9f11c0..4264ae01 100644
--- a/apps/web/src/arcade-games/matching/components/ResultsPhase.tsx
+++ b/apps/web/src/arcade-games/matching/components/ResultsPhase.tsx
@@ -1,24 +1,19 @@
-"use client";
+'use client'
 
-import { useEffect } from "react";
-import { useRouter } from "next/navigation";
-import { css } from "../../../../styled-system/css";
-import { useGameMode } from "@/contexts/GameModeContext";
-import { useMatching } from "../Provider";
-import {
-  formatGameTime,
-  getMultiplayerWinner,
-  getPerformanceAnalysis,
-} from "../utils/gameScoring";
-import { useRecordGameResult } from "@/hooks/useRecordGameResult";
-import type { GameResult } from "@/lib/arcade/stats/types";
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { css } from '../../../../styled-system/css'
+import { useGameMode } from '@/contexts/GameModeContext'
+import { useMatching } from '../Provider'
+import { formatGameTime, getMultiplayerWinner, getPerformanceAnalysis } from '../utils/gameScoring'
+import { useRecordGameResult } from '@/hooks/useRecordGameResult'
+import type { GameResult } from '@/lib/arcade/stats/types'
 
 export function ResultsPhase() {
-  const router = useRouter();
-  const { state, resetGame, activePlayers, gameMode, exitSession } =
-    useMatching();
-  const { players: playerMap, activePlayers: activePlayerIds } = useGameMode();
-  const { mutate: recordGameResult } = useRecordGameResult();
+  const router = useRouter()
+  const { state, resetGame, activePlayers, gameMode, exitSession } = useMatching()
+  const { players: playerMap, activePlayers: activePlayerIds } = useGameMode()
+  const { mutate: recordGameResult } = useRecordGameResult()
 
   // Get active player data array
   const activePlayerData = Array.from(activePlayerIds)
@@ -28,34 +23,28 @@ export function ResultsPhase() {
       ...player,
       displayName: player.name,
       displayEmoji: player.emoji,
-    }));
+    }))
 
   const gameTime =
-    state.gameEndTime && state.gameStartTime
-      ? state.gameEndTime - state.gameStartTime
-      : 0;
+    state.gameEndTime && state.gameStartTime ? state.gameEndTime - state.gameStartTime : 0
 
-  const analysis = getPerformanceAnalysis(state);
+  const analysis = getPerformanceAnalysis(state)
   const multiplayerResult =
-    gameMode === "multiplayer"
-      ? getMultiplayerWinner(state, activePlayers)
-      : null;
+    gameMode === 'multiplayer' ? getMultiplayerWinner(state, activePlayers) : null
 
   // Record game stats when results are shown
   useEffect(() => {
-    if (!state.gameEndTime || !state.gameStartTime) return;
+    if (!state.gameEndTime || !state.gameStartTime) return
 
     // Build game result
     const gameResult: GameResult = {
-      gameType: "matching",
+      gameType: 'matching',
       playerResults: activePlayerData.map((player) => {
-        const isWinner =
-          gameMode === "single" ||
-          multiplayerResult?.winners.includes(player.id);
+        const isWinner = gameMode === 'single' || multiplayerResult?.winners.includes(player.id)
         const score =
-          gameMode === "multiplayer"
+          gameMode === 'multiplayer'
             ? multiplayerResult?.scores[player.id] || 0
-            : state.matchedPairs;
+            : state.matchedPairs
 
         return {
           playerId: player.id,
@@ -67,7 +56,7 @@ export function ResultsPhase() {
             moves: state.moves,
             matchedPairs: state.matchedPairs,
           },
-        };
+        }
       }),
       completedAt: state.gameEndTime,
       duration: gameTime,
@@ -76,62 +65,60 @@ export function ResultsPhase() {
         starRating: analysis.starRating,
         grade: analysis.grade,
       },
-    };
+    }
 
-    console.log("📊 Recording matching game result:", gameResult);
-    recordGameResult(gameResult);
-  }, []); // Empty deps - only record once when component mounts
+    console.log('📊 Recording matching game result:', gameResult)
+    recordGameResult(gameResult)
+  }, []) // Empty deps - only record once when component mounts
 
   return (
     <div
       className={css({
-        textAlign: "center",
-        padding: { base: "16px", md: "20px" },
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-        overflow: "auto",
+        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" },
+          marginBottom: { base: '16px', md: '24px' },
         })}
       >
         <h2
           className={css({
-            fontSize: { base: "32px", md: "48px" },
-            marginBottom: { base: "8px", md: "12px" },
-            color: "green.600",
-            fontWeight: "bold",
+            fontSize: { base: '32px', md: '48px' },
+            marginBottom: { base: '8px', md: '12px' },
+            color: 'green.600',
+            fontWeight: 'bold',
           })}
         >
           🎉 Game Complete! 🎉
         </h2>
 
-        {gameMode === "single" ? (
+        {gameMode === 'single' ? (
           <p
             className={css({
-              fontSize: { base: "16px", md: "20px" },
-              color: "gray.700",
-              marginBottom: { base: "12px", md: "16px" },
+              fontSize: { base: '16px', md: '20px' },
+              color: 'gray.700',
+              marginBottom: { base: '12px', md: '16px' },
             })}
           >
             Congratulations!
           </p>
         ) : (
           multiplayerResult && (
-            <div
-              className={css({ marginBottom: { base: "12px", md: "16px" } })}
-            >
+            <div className={css({ marginBottom: { base: '12px', md: '16px' } })}>
               {multiplayerResult.isTie ? (
                 <p
                   className={css({
-                    fontSize: { base: "18px", md: "24px" },
-                    color: "purple.600",
-                    fontWeight: "bold",
+                    fontSize: { base: '18px', md: '24px' },
+                    color: 'purple.600',
+                    fontWeight: 'bold',
                   })}
                 >
                   🤝 It's a tie!
@@ -139,24 +126,22 @@ export function ResultsPhase() {
               ) : multiplayerResult.winners.length === 1 ? (
                 <p
                   className={css({
-                    fontSize: { base: "18px", md: "24px" },
-                    color: "blue.600",
-                    fontWeight: "bold",
+                    fontSize: { base: '18px', md: '24px' },
+                    color: 'blue.600',
+                    fontWeight: 'bold',
                   })}
                 >
-                  🏆{" "}
-                  {activePlayerData.find(
-                    (p) => p.id === multiplayerResult.winners[0],
-                  )?.displayName ||
-                    `Player ${multiplayerResult.winners[0]}`}{" "}
+                  🏆{' '}
+                  {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",
+                    fontSize: { base: '18px', md: '24px' },
+                    color: 'purple.600',
+                    fontWeight: 'bold',
                   })}
                 >
                   🏆 {multiplayerResult.winners.length} Champions!
@@ -169,19 +154,19 @@ export function ResultsPhase() {
         {/* Star Rating */}
         <div
           className={css({
-            fontSize: { base: "24px", md: "32px" },
-            marginBottom: { base: "8px", md: "12px" },
+            fontSize: { base: '24px', md: '32px' },
+            marginBottom: { base: '8px', md: '12px' },
           })}
         >
-          {"⭐".repeat(analysis.starRating)}
-          {"☆".repeat(5 - analysis.starRating)}
+          {'⭐'.repeat(analysis.starRating)}
+          {'☆'.repeat(5 - analysis.starRating)}
         </div>
 
         <div
           className={css({
-            fontSize: { base: "20px", md: "24px" },
-            fontWeight: "bold",
-            color: "orange.600",
+            fontSize: { base: '20px', md: '24px' },
+            fontWeight: 'bold',
+            color: 'orange.600',
           })}
         >
           Grade: {analysis.grade}
@@ -191,34 +176,34 @@ export function ResultsPhase() {
       {/* 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",
+          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",
+            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",
+              fontSize: { base: '20px', md: '28px' },
+              fontWeight: 'bold',
             })}
           >
             {state.matchedPairs}
           </div>
           <div
             className={css({
-              fontSize: { base: "11px", md: "14px" },
+              fontSize: { base: '11px', md: '14px' },
               opacity: 0.9,
             })}
           >
@@ -228,24 +213,24 @@ export function ResultsPhase() {
 
         <div
           className={css({
-            background: "linear-gradient(135deg, #a78bfa, #8b5cf6)",
-            color: "white",
-            padding: { base: "12px", md: "16px" },
-            borderRadius: { base: "8px", md: "12px" },
-            textAlign: "center",
+            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",
+              fontSize: { base: '20px', md: '28px' },
+              fontWeight: 'bold',
             })}
           >
             {state.moves}
           </div>
           <div
             className={css({
-              fontSize: { base: "11px", md: "14px" },
+              fontSize: { base: '11px', md: '14px' },
               opacity: 0.9,
             })}
           >
@@ -255,24 +240,24 @@ export function ResultsPhase() {
 
         <div
           className={css({
-            background: "linear-gradient(135deg, #ff6b6b, #ee5a24)",
-            color: "white",
-            padding: { base: "12px", md: "16px" },
-            borderRadius: { base: "8px", md: "12px" },
-            textAlign: "center",
+            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",
+              fontSize: { base: '20px', md: '28px' },
+              fontWeight: 'bold',
             })}
           >
             {formatGameTime(gameTime)}
           </div>
           <div
             className={css({
-              fontSize: { base: "11px", md: "14px" },
+              fontSize: { base: '11px', md: '14px' },
               opacity: 0.9,
             })}
           >
@@ -282,24 +267,24 @@ export function ResultsPhase() {
 
         <div
           className={css({
-            background: "linear-gradient(135deg, #55a3ff, #003d82)",
-            color: "white",
-            padding: { base: "12px", md: "16px" },
-            borderRadius: { base: "8px", md: "12px" },
-            textAlign: "center",
+            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",
+              fontSize: { base: '20px', md: '28px' },
+              fontWeight: 'bold',
             })}
           >
             {Math.round(analysis.statistics.accuracy)}%
           </div>
           <div
             className={css({
-              fontSize: { base: "11px", md: "14px" },
+              fontSize: { base: '11px', md: '14px' },
               opacity: 0.9,
             })}
           >
@@ -309,46 +294,46 @@ export function ResultsPhase() {
       </div>
 
       {/* Multiplayer Scores */}
-      {gameMode === "multiplayer" && multiplayerResult && (
+      {gameMode === 'multiplayer' && multiplayerResult && (
         <div
           className={css({
-            display: "flex",
-            justifyContent: "center",
-            gap: { base: "12px", md: "16px" },
-            marginBottom: { base: "16px", md: "24px" },
-            flexWrap: "wrap",
+            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);
+            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" },
+                    ? '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",
+                    fontSize: { base: '32px', md: '40px' },
+                    marginBottom: '4px',
                   })}
                 >
                   {player.displayEmoji}
                 </div>
                 <div
                   className={css({
-                    fontSize: { base: "11px", md: "12px" },
-                    marginBottom: "2px",
+                    fontSize: { base: '11px', md: '12px' },
+                    marginBottom: '2px',
                     opacity: 0.9,
                   })}
                 >
@@ -356,21 +341,17 @@ export function ResultsPhase() {
                 </div>
                 <div
                   className={css({
-                    fontSize: { base: "24px", md: "32px" },
-                    fontWeight: "bold",
+                    fontSize: { base: '24px', md: '32px' },
+                    fontWeight: 'bold',
                   })}
                 >
                   {score}
                 </div>
                 {isWinner && (
-                  <div
-                    className={css({ fontSize: { base: "18px", md: "20px" } })}
-                  >
-                    👑
-                  </div>
+                  <div className={css({ fontSize: { base: '18px', md: '20px' } })}>👑</div>
                 )}
               </div>
-            );
+            )
           })}
         </div>
       )}
@@ -378,28 +359,28 @@ export function ResultsPhase() {
       {/* Action Buttons */}
       <div
         className={css({
-          display: "flex",
-          justifyContent: "center",
-          gap: { base: "12px", md: "16px" },
-          flexWrap: "wrap",
-          marginTop: "auto",
+          display: 'flex',
+          justifyContent: 'center',
+          gap: { base: '12px', md: '16px' },
+          flexWrap: 'wrap',
+          marginTop: 'auto',
         })}
       >
         <button
           className={css({
-            background: "linear-gradient(135deg, #667eea, #764ba2)",
-            color: "white",
-            border: "none",
-            borderRadius: "50px",
-            padding: { base: "12px 24px", md: "14px 28px" },
-            fontSize: { base: "14px", md: "16px" },
-            fontWeight: "bold",
-            cursor: "pointer",
-            transition: "all 0.3s ease",
-            boxShadow: "0 4px 12px rgba(102, 126, 234, 0.4)",
+            background: 'linear-gradient(135deg, #667eea, #764ba2)',
+            color: 'white',
+            border: 'none',
+            borderRadius: '50px',
+            padding: { base: '12px 24px', md: '14px 28px' },
+            fontSize: { base: '14px', md: '16px' },
+            fontWeight: 'bold',
+            cursor: 'pointer',
+            transition: 'all 0.3s ease',
+            boxShadow: '0 4px 12px rgba(102, 126, 234, 0.4)',
             _hover: {
-              transform: "translateY(-2px)",
-              boxShadow: "0 6px 16px rgba(102, 126, 234, 0.6)",
+              transform: 'translateY(-2px)',
+              boxShadow: '0 6px 16px rgba(102, 126, 234, 0.6)',
             },
           })}
           onClick={resetGame}
@@ -409,32 +390,30 @@ export function ResultsPhase() {
 
         <button
           className={css({
-            background: "linear-gradient(135deg, #a78bfa, #8b5cf6)",
-            color: "white",
-            border: "none",
-            borderRadius: "50px",
-            padding: { base: "12px 24px", md: "14px 28px" },
-            fontSize: { base: "14px", md: "16px" },
-            fontWeight: "bold",
-            cursor: "pointer",
-            transition: "all 0.3s ease",
-            boxShadow: "0 4px 12px rgba(167, 139, 250, 0.4)",
+            background: 'linear-gradient(135deg, #a78bfa, #8b5cf6)',
+            color: 'white',
+            border: 'none',
+            borderRadius: '50px',
+            padding: { base: '12px 24px', md: '14px 28px' },
+            fontSize: { base: '14px', md: '16px' },
+            fontWeight: 'bold',
+            cursor: 'pointer',
+            transition: 'all 0.3s ease',
+            boxShadow: '0 4px 12px rgba(167, 139, 250, 0.4)',
             _hover: {
-              transform: "translateY(-2px)",
-              boxShadow: "0 6px 16px rgba(167, 139, 250, 0.6)",
+              transform: 'translateY(-2px)',
+              boxShadow: '0 6px 16px rgba(167, 139, 250, 0.6)',
             },
           })}
           onClick={() => {
-            console.log(
-              "🔄 ResultsPhase: Exiting session and navigating to arcade",
-            );
-            exitSession();
-            router.push("/arcade");
+            console.log('🔄 ResultsPhase: Exiting session and navigating to arcade')
+            exitSession()
+            router.push('/arcade')
           }}
         >
           🏟️ Back to Arcade
         </button>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/matching/components/SetupPhase.tsx b/apps/web/src/arcade-games/matching/components/SetupPhase.tsx
index 2df69bbf..24696c2b 100644
--- a/apps/web/src/arcade-games/matching/components/SetupPhase.tsx
+++ b/apps/web/src/arcade-games/matching/components/SetupPhase.tsx
@@ -1,9 +1,9 @@
-"use client";
+'use client'
 
-import { useState } from "react";
-import { css } from "../../../../styled-system/css";
-import { useGameMode } from "@/contexts/GameModeContext";
-import { useMatching } from "../Provider";
+import { useState } from 'react'
+import { css } from '../../../../styled-system/css'
+import { useGameMode } from '@/contexts/GameModeContext'
+import { useMatching } from '../Provider'
 
 // Add bounce animation for the start button
 const bounceAnimation = `
@@ -18,17 +18,14 @@ const bounceAnimation = `
     transform: translateY(-5px);
   }
 }
-`;
+`
 
 // Inject animation styles
-if (
-  typeof document !== "undefined" &&
-  !document.getElementById("setup-animations")
-) {
-  const style = document.createElement("style");
-  style.id = "setup-animations";
-  style.textContent = bounceAnimation;
-  document.head.appendChild(style);
+if (typeof document !== 'undefined' && !document.getElementById('setup-animations')) {
+  const style = document.createElement('style')
+  style.id = 'setup-animations'
+  style.textContent = bounceAnimation
+  document.head.appendChild(style)
 }
 
 export function SetupPhase() {
@@ -42,188 +39,187 @@ export function SetupPhase() {
     canResumeGame,
     hasConfigChanged,
     activePlayers: _activePlayers,
-  } = useMatching();
+  } = useMatching()
 
-  const { activePlayerCount, gameMode: _globalGameMode } = useGameMode();
+  const { activePlayerCount, gameMode: _globalGameMode } = useGameMode()
 
   // PAUSE/RESUME: Warning dialog state
-  const [showConfigWarning, setShowConfigWarning] = useState(false);
-  const [hasSeenWarning, setHasSeenWarning] = useState(false);
+  const [showConfigWarning, setShowConfigWarning] = useState(false)
+  const [hasSeenWarning, setHasSeenWarning] = useState(false)
   const [pendingConfigChange, setPendingConfigChange] = useState<{
-    type: "gameType" | "difficulty" | "turnTimer";
-    value: any;
-  } | null>(null);
+    type: 'gameType' | 'difficulty' | 'turnTimer'
+    value: any
+  } | null>(null)
 
   // Check if we should show warning when changing config
-  const shouldShowWarning =
-    state.pausedGamePhase && !hasSeenWarning && !hasConfigChanged;
+  const shouldShowWarning = state.pausedGamePhase && !hasSeenWarning && !hasConfigChanged
 
   // Config change handlers that check for paused game
   const handleSetGameType = (value: typeof state.gameType) => {
     if (shouldShowWarning) {
-      setPendingConfigChange({ type: "gameType", value });
-      setShowConfigWarning(true);
+      setPendingConfigChange({ type: 'gameType', value })
+      setShowConfigWarning(true)
     } else {
-      setGameType(value);
+      setGameType(value)
     }
-  };
+  }
 
   const handleSetDifficulty = (value: typeof state.difficulty) => {
     if (shouldShowWarning) {
-      setPendingConfigChange({ type: "difficulty", value });
-      setShowConfigWarning(true);
+      setPendingConfigChange({ type: 'difficulty', value })
+      setShowConfigWarning(true)
     } else {
-      setDifficulty(value);
+      setDifficulty(value)
     }
-  };
+  }
 
   const handleSetTurnTimer = (value: typeof state.turnTimer) => {
     if (shouldShowWarning) {
-      setPendingConfigChange({ type: "turnTimer", value });
-      setShowConfigWarning(true);
+      setPendingConfigChange({ type: 'turnTimer', value })
+      setShowConfigWarning(true)
     } else {
-      setTurnTimer(value);
+      setTurnTimer(value)
     }
-  };
+  }
 
   // Apply pending config change after warning
   const applyPendingChange = () => {
     if (pendingConfigChange) {
       switch (pendingConfigChange.type) {
-        case "gameType":
-          setGameType(pendingConfigChange.value);
-          break;
-        case "difficulty":
-          setDifficulty(pendingConfigChange.value);
-          break;
-        case "turnTimer":
-          setTurnTimer(pendingConfigChange.value);
-          break;
+        case 'gameType':
+          setGameType(pendingConfigChange.value)
+          break
+        case 'difficulty':
+          setDifficulty(pendingConfigChange.value)
+          break
+        case 'turnTimer':
+          setTurnTimer(pendingConfigChange.value)
+          break
       }
-      setHasSeenWarning(true);
-      setPendingConfigChange(null);
-      setShowConfigWarning(false);
+      setHasSeenWarning(true)
+      setPendingConfigChange(null)
+      setShowConfigWarning(false)
     }
-  };
+  }
 
   // Cancel config change
   const cancelConfigChange = () => {
-    setPendingConfigChange(null);
-    setShowConfigWarning(false);
-  };
+    setPendingConfigChange(null)
+    setShowConfigWarning(false)
+  }
 
   const handleStartOrResumeGame = () => {
     if (canResumeGame) {
-      resumeGame();
+      resumeGame()
     } else {
-      startGame();
+      startGame()
     }
-  };
+  }
 
   const getButtonStyles = (
     isSelected: boolean,
-    variant: "primary" | "secondary" | "difficulty" = "primary",
+    variant: 'primary' | 'secondary' | 'difficulty' = 'primary'
   ) => {
     const baseStyles = {
-      border: "none",
-      borderRadius: { base: "12px", md: "16px" },
-      padding: { base: "12px 16px", sm: "14px 20px", md: "16px 24px" },
-      fontSize: { base: "14px", sm: "15px", md: "16px" },
-      fontWeight: "bold",
-      cursor: "pointer",
-      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-      minWidth: { base: "120px", sm: "140px", md: "160px" },
-      textAlign: "center" as const,
-      position: "relative" as const,
-      overflow: "hidden" as const,
-      textShadow: isSelected ? "0 1px 2px rgba(0,0,0,0.2)" : "none",
-      transform: "translateZ(0)", // Enable GPU acceleration
-    };
-
-    if (variant === "difficulty") {
-      return css({
-        ...baseStyles,
-        background: isSelected
-          ? "linear-gradient(135deg, #ff6b6b, #ee5a24)"
-          : "linear-gradient(135deg, #f8f9fa, #e9ecef)",
-        color: isSelected ? "white" : "#495057",
-        boxShadow: isSelected
-          ? "0 8px 25px rgba(255, 107, 107, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)"
-          : "0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8)",
-        _hover: {
-          transform: "translateY(-3px) scale(1.02)",
-          boxShadow: isSelected
-            ? "0 12px 35px rgba(255, 107, 107, 0.6), inset 0 1px 0 rgba(255,255,255,0.2)"
-            : "0 8px 25px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8)",
-        },
-        _active: {
-          transform: "translateY(-1px) scale(1.01)",
-        },
-      });
+      border: 'none',
+      borderRadius: { base: '12px', md: '16px' },
+      padding: { base: '12px 16px', sm: '14px 20px', md: '16px 24px' },
+      fontSize: { base: '14px', sm: '15px', md: '16px' },
+      fontWeight: 'bold',
+      cursor: 'pointer',
+      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+      minWidth: { base: '120px', sm: '140px', md: '160px' },
+      textAlign: 'center' as const,
+      position: 'relative' as const,
+      overflow: 'hidden' as const,
+      textShadow: isSelected ? '0 1px 2px rgba(0,0,0,0.2)' : 'none',
+      transform: 'translateZ(0)', // Enable GPU acceleration
     }
 
-    if (variant === "secondary") {
+    if (variant === 'difficulty') {
       return css({
         ...baseStyles,
         background: isSelected
-          ? "linear-gradient(135deg, #a78bfa, #8b5cf6)"
-          : "linear-gradient(135deg, #f8fafc, #e2e8f0)",
-        color: isSelected ? "white" : "#475569",
+          ? 'linear-gradient(135deg, #ff6b6b, #ee5a24)'
+          : 'linear-gradient(135deg, #f8f9fa, #e9ecef)',
+        color: isSelected ? 'white' : '#495057',
         boxShadow: isSelected
-          ? "0 8px 25px rgba(167, 139, 250, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)"
-          : "0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8)",
+          ? '0 8px 25px rgba(255, 107, 107, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)'
+          : '0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8)',
         _hover: {
-          transform: "translateY(-3px) scale(1.02)",
+          transform: 'translateY(-3px) scale(1.02)',
           boxShadow: isSelected
-            ? "0 12px 35px rgba(167, 139, 250, 0.6), inset 0 1px 0 rgba(255,255,255,0.2)"
-            : "0 8px 25px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8)",
+            ? '0 12px 35px rgba(255, 107, 107, 0.6), inset 0 1px 0 rgba(255,255,255,0.2)'
+            : '0 8px 25px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8)',
         },
         _active: {
-          transform: "translateY(-1px) scale(1.01)",
+          transform: 'translateY(-1px) scale(1.01)',
         },
-      });
+      })
+    }
+
+    if (variant === 'secondary') {
+      return css({
+        ...baseStyles,
+        background: isSelected
+          ? 'linear-gradient(135deg, #a78bfa, #8b5cf6)'
+          : 'linear-gradient(135deg, #f8fafc, #e2e8f0)',
+        color: isSelected ? 'white' : '#475569',
+        boxShadow: isSelected
+          ? '0 8px 25px rgba(167, 139, 250, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)'
+          : '0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8)',
+        _hover: {
+          transform: 'translateY(-3px) scale(1.02)',
+          boxShadow: isSelected
+            ? '0 12px 35px rgba(167, 139, 250, 0.6), inset 0 1px 0 rgba(255,255,255,0.2)'
+            : '0 8px 25px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8)',
+        },
+        _active: {
+          transform: 'translateY(-1px) scale(1.01)',
+        },
+      })
     }
 
     // Primary variant
     return css({
       ...baseStyles,
       background: isSelected
-        ? "linear-gradient(135deg, #667eea, #764ba2)"
-        : "linear-gradient(135deg, #ffffff, #f1f5f9)",
-      color: isSelected ? "white" : "#334155",
+        ? 'linear-gradient(135deg, #667eea, #764ba2)'
+        : 'linear-gradient(135deg, #ffffff, #f1f5f9)',
+      color: isSelected ? 'white' : '#334155',
       boxShadow: isSelected
-        ? "0 8px 25px rgba(102, 126, 234, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)"
-        : "0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8)",
+        ? '0 8px 25px rgba(102, 126, 234, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)'
+        : '0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8)',
       _hover: {
-        transform: "translateY(-3px) scale(1.02)",
+        transform: 'translateY(-3px) scale(1.02)',
         boxShadow: isSelected
-          ? "0 12px 35px rgba(102, 126, 234, 0.6), inset 0 1px 0 rgba(255,255,255,0.2)"
-          : "0 8px 25px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8)",
+          ? '0 12px 35px rgba(102, 126, 234, 0.6), inset 0 1px 0 rgba(255,255,255,0.2)'
+          : '0 8px 25px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8)',
       },
       _active: {
-        transform: "translateY(-1px) scale(1.01)",
+        transform: 'translateY(-1px) scale(1.01)',
       },
-    });
-  };
+    })
+  }
 
   return (
     <div
       className={css({
-        textAlign: "center",
-        padding: { base: "12px 16px", sm: "16px 20px", md: "20px" },
-        maxWidth: "800px",
-        margin: "0 auto",
-        display: "flex",
-        flexDirection: "column",
+        textAlign: 'center',
+        padding: { base: '12px 16px', sm: '16px 20px', md: '20px' },
+        maxWidth: '800px',
+        margin: '0 auto',
+        display: 'flex',
+        flexDirection: 'column',
         minHeight: 0, // Allow shrinking
-        overflow: "auto", // Enable scrolling if needed
+        overflow: 'auto', // Enable scrolling if needed
       })}
     >
       <div
         className={css({
-          display: "grid",
-          gap: { base: "8px", sm: "12px", md: "16px" },
-          margin: "0 auto",
+          display: 'grid',
+          gap: { base: '8px', sm: '12px', md: '16px' },
+          margin: '0 auto',
           flex: 1,
           minHeight: 0, // Allow shrinking
         })}
@@ -232,59 +228,59 @@ export function SetupPhase() {
         {showConfigWarning && (
           <div
             className={css({
-              p: "4",
+              p: '4',
               background:
-                "linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.15))",
-              border: "2px solid",
-              borderColor: "yellow.400",
-              rounded: "xl",
-              textAlign: "center",
-              boxShadow: "0 4px 12px rgba(251, 191, 36, 0.2)",
+                'linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.15))',
+              border: '2px solid',
+              borderColor: 'yellow.400',
+              rounded: 'xl',
+              textAlign: 'center',
+              boxShadow: '0 4px 12px rgba(251, 191, 36, 0.2)',
             })}
           >
             <p
               className={css({
-                color: "yellow.700",
-                fontSize: { base: "15px", md: "17px" },
-                fontWeight: "bold",
-                marginBottom: "8px",
+                color: 'yellow.700',
+                fontSize: { base: '15px', md: '17px' },
+                fontWeight: 'bold',
+                marginBottom: '8px',
               })}
             >
               ⚠️ Warning: Changing Settings Will End Current Game
             </p>
             <p
               className={css({
-                color: "gray.600",
-                fontSize: { base: "13px", md: "14px" },
-                marginBottom: "12px",
+                color: 'gray.600',
+                fontSize: { base: '13px', md: '14px' },
+                marginBottom: '12px',
               })}
             >
-              You have a paused game in progress. Changing any setting will end
-              it and you won't be able to resume.
+              You have a paused game in progress. Changing any setting will end it and you won't be
+              able to resume.
             </p>
             <div
               className={css({
-                display: "flex",
-                gap: "8px",
-                justifyContent: "center",
-                flexWrap: "wrap",
+                display: 'flex',
+                gap: '8px',
+                justifyContent: 'center',
+                flexWrap: 'wrap',
               })}
             >
               <button
                 className={css({
-                  background: "linear-gradient(135deg, #10b981, #059669)",
-                  color: "white",
-                  border: "none",
-                  borderRadius: "8px",
-                  padding: "8px 16px",
-                  fontSize: "14px",
-                  fontWeight: "bold",
-                  cursor: "pointer",
-                  transition: "all 0.2s",
-                  boxShadow: "0 2px 8px rgba(16, 185, 129, 0.3)",
+                  background: 'linear-gradient(135deg, #10b981, #059669)',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '8px',
+                  padding: '8px 16px',
+                  fontSize: '14px',
+                  fontWeight: 'bold',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s',
+                  boxShadow: '0 2px 8px rgba(16, 185, 129, 0.3)',
                   _hover: {
-                    transform: "translateY(-2px)",
-                    boxShadow: "0 4px 12px rgba(16, 185, 129, 0.4)",
+                    transform: 'translateY(-2px)',
+                    boxShadow: '0 4px 12px rgba(16, 185, 129, 0.4)',
                   },
                 })}
                 onClick={cancelConfigChange}
@@ -293,19 +289,19 @@ export function SetupPhase() {
               </button>
               <button
                 className={css({
-                  background: "linear-gradient(135deg, #ef4444, #dc2626)",
-                  color: "white",
-                  border: "none",
-                  borderRadius: "8px",
-                  padding: "8px 16px",
-                  fontSize: "14px",
-                  fontWeight: "bold",
-                  cursor: "pointer",
-                  transition: "all 0.2s",
-                  boxShadow: "0 2px 8px rgba(239, 68, 68, 0.3)",
+                  background: 'linear-gradient(135deg, #ef4444, #dc2626)',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '8px',
+                  padding: '8px 16px',
+                  fontSize: '14px',
+                  fontWeight: 'bold',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s',
+                  boxShadow: '0 2px 8px rgba(239, 68, 68, 0.3)',
                   _hover: {
-                    transform: "translateY(-2px)",
-                    boxShadow: "0 4px 12px rgba(239, 68, 68, 0.4)",
+                    transform: 'translateY(-2px)',
+                    boxShadow: '0 4px 12px rgba(239, 68, 68, 0.4)',
                   },
                 })}
                 onClick={applyPendingChange}
@@ -320,23 +316,22 @@ export function SetupPhase() {
         {activePlayerCount === 0 && (
           <div
             className={css({
-              p: "4",
-              background: "rgba(239, 68, 68, 0.1)",
-              border: "2px solid",
-              borderColor: "red.300",
-              rounded: "xl",
-              textAlign: "center",
+              p: '4',
+              background: 'rgba(239, 68, 68, 0.1)',
+              border: '2px solid',
+              borderColor: 'red.300',
+              rounded: 'xl',
+              textAlign: 'center',
             })}
           >
             <p
               className={css({
-                color: "red.700",
-                fontSize: { base: "14px", md: "16px" },
-                fontWeight: "bold",
+                color: 'red.700',
+                fontSize: { base: '14px', md: '16px' },
+                fontWeight: 'bold',
               })}
             >
-              ⚠️ Go back to the arcade to select players before starting the
-              game
+              ⚠️ Go back to the arcade to select players before starting the game
             </p>
           </div>
         )}
@@ -345,71 +340,64 @@ export function SetupPhase() {
         <div>
           <label
             className={css({
-              display: "block",
-              fontSize: { base: "16px", sm: "18px", md: "20px" },
-              fontWeight: "bold",
-              marginBottom: { base: "12px", md: "16px" },
-              color: "gray.700",
+              display: 'block',
+              fontSize: { base: '16px', sm: '18px', md: '20px' },
+              fontWeight: 'bold',
+              marginBottom: { base: '12px', md: '16px' },
+              color: 'gray.700',
             })}
           >
             Game Type
           </label>
           <div
             className={css({
-              display: "grid",
+              display: 'grid',
               gridTemplateColumns: {
-                base: "1fr",
-                sm: "repeat(2, 1fr)",
+                base: '1fr',
+                sm: 'repeat(2, 1fr)',
               },
-              gap: { base: "8px", sm: "10px", md: "12px" },
-              justifyItems: "stretch",
+              gap: { base: '8px', sm: '10px', md: '12px' },
+              justifyItems: 'stretch',
             })}
           >
             <button
-              className={getButtonStyles(
-                state.gameType === "abacus-numeral",
-                "secondary",
-              )}
-              onClick={() => handleSetGameType("abacus-numeral")}
+              className={getButtonStyles(state.gameType === 'abacus-numeral', 'secondary')}
+              onClick={() => handleSetGameType('abacus-numeral')}
             >
               <div
                 className={css({
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: { base: "4px", md: "6px" },
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: { base: '4px', md: '6px' },
                 })}
               >
                 <div
                   className={css({
-                    fontSize: { base: "20px", sm: "24px", md: "28px" },
-                    display: "flex",
-                    alignItems: "center",
-                    gap: { base: "4px", md: "8px" },
+                    fontSize: { base: '20px', sm: '24px', md: '28px' },
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: { base: '4px', md: '8px' },
                   })}
                 >
                   <span>🧮</span>
-                  <span
-                    className={css({ fontSize: { base: "16px", md: "20px" } })}
-                  >
-                    ↔️
-                  </span>
+                  <span className={css({ fontSize: { base: '16px', md: '20px' } })}>↔️</span>
                   <span>🔢</span>
                 </div>
                 <div
                   className={css({
-                    fontWeight: "bold",
-                    fontSize: { base: "12px", sm: "13px", md: "14px" },
+                    fontWeight: 'bold',
+                    fontSize: { base: '12px', sm: '13px', md: '14px' },
                   })}
                 >
                   Abacus-Numeral
                 </div>
                 <div
                   className={css({
-                    fontSize: { base: "10px", sm: "11px", md: "12px" },
+                    fontSize: { base: '10px', sm: '11px', md: '12px' },
                     opacity: 0.8,
-                    textAlign: "center",
-                    display: { base: "none", sm: "block" },
+                    textAlign: 'center',
+                    display: { base: 'none', sm: 'block' },
                   })}
                 >
                   Match visual patterns
@@ -419,50 +407,43 @@ export function SetupPhase() {
               </div>
             </button>
             <button
-              className={getButtonStyles(
-                state.gameType === "complement-pairs",
-                "secondary",
-              )}
-              onClick={() => handleSetGameType("complement-pairs")}
+              className={getButtonStyles(state.gameType === 'complement-pairs', 'secondary')}
+              onClick={() => handleSetGameType('complement-pairs')}
             >
               <div
                 className={css({
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: { base: "4px", md: "6px" },
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: { base: '4px', md: '6px' },
                 })}
               >
                 <div
                   className={css({
-                    fontSize: { base: "20px", sm: "24px", md: "28px" },
-                    display: "flex",
-                    alignItems: "center",
-                    gap: { base: "4px", md: "8px" },
+                    fontSize: { base: '20px', sm: '24px', md: '28px' },
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: { base: '4px', md: '8px' },
                   })}
                 >
                   <span>🤝</span>
-                  <span
-                    className={css({ fontSize: { base: "16px", md: "20px" } })}
-                  >
-                    ➕
-                  </span>
+                  <span className={css({ fontSize: { base: '16px', md: '20px' } })}>➕</span>
                   <span>🔟</span>
                 </div>
                 <div
                   className={css({
-                    fontWeight: "bold",
-                    fontSize: { base: "12px", sm: "13px", md: "14px" },
+                    fontWeight: 'bold',
+                    fontSize: { base: '12px', sm: '13px', md: '14px' },
                   })}
                 >
                   Complement Pairs
                 </div>
                 <div
                   className={css({
-                    fontSize: { base: "10px", sm: "11px", md: "12px" },
+                    fontSize: { base: '10px', sm: '11px', md: '12px' },
                     opacity: 0.8,
-                    textAlign: "center",
-                    display: { base: "none", sm: "block" },
+                    textAlign: 'center',
+                    display: { base: 'none', sm: 'block' },
                   })}
                 >
                   Find number friends
@@ -474,16 +455,16 @@ export function SetupPhase() {
           </div>
           <p
             className={css({
-              fontSize: { base: "12px", md: "14px" },
-              color: "gray.500",
-              marginTop: { base: "6px", md: "8px" },
-              textAlign: "center",
-              display: { base: "none", sm: "block" },
+              fontSize: { base: '12px', md: '14px' },
+              color: 'gray.500',
+              marginTop: { base: '6px', md: '8px' },
+              textAlign: 'center',
+              display: { base: 'none', sm: 'block' },
             })}
           >
-            {state.gameType === "abacus-numeral"
-              ? "Match abacus representations with their numerical values"
-              : "Find pairs of numbers that add up to 5 or 10"}
+            {state.gameType === 'abacus-numeral'
+              ? 'Match abacus representations with their numerical values'
+              : 'Find pairs of numbers that add up to 5 or 10'}
           </p>
         </div>
 
@@ -491,99 +472,92 @@ export function SetupPhase() {
         <div>
           <label
             className={css({
-              display: "block",
-              fontSize: { base: "16px", sm: "18px", md: "20px" },
-              fontWeight: "bold",
-              marginBottom: { base: "12px", md: "16px" },
-              color: "gray.700",
+              display: 'block',
+              fontSize: { base: '16px', sm: '18px', md: '20px' },
+              fontWeight: 'bold',
+              marginBottom: { base: '12px', md: '16px' },
+              color: 'gray.700',
             })}
           >
             Difficulty ({state.difficulty} pairs)
           </label>
           <div
             className={css({
-              display: "grid",
+              display: 'grid',
               gridTemplateColumns: {
-                base: "repeat(2, 1fr)",
-                sm: "repeat(4, 1fr)",
+                base: 'repeat(2, 1fr)',
+                sm: 'repeat(4, 1fr)',
               },
-              gap: { base: "8px", sm: "10px", md: "12px" },
-              justifyItems: "stretch",
+              gap: { base: '8px', sm: '10px', md: '12px' },
+              justifyItems: 'stretch',
             })}
           >
             {([6, 8, 12, 15] as const).map((difficulty) => {
               const difficultyInfo = {
                 6: {
-                  icon: "🌱",
-                  label: "Beginner",
-                  description: "Perfect to start!",
+                  icon: '🌱',
+                  label: 'Beginner',
+                  description: 'Perfect to start!',
                 },
                 8: {
-                  icon: "⚡",
-                  label: "Medium",
-                  description: "Getting spicy!",
+                  icon: '⚡',
+                  label: 'Medium',
+                  description: 'Getting spicy!',
                 },
                 12: {
-                  icon: "🔥",
-                  label: "Hard",
-                  description: "Serious challenge!",
+                  icon: '🔥',
+                  label: 'Hard',
+                  description: 'Serious challenge!',
                 },
                 15: {
-                  icon: "💀",
-                  label: "Expert",
-                  description: "Memory master!",
+                  icon: '💀',
+                  label: 'Expert',
+                  description: 'Memory master!',
                 },
-              };
+              }
 
               return (
                 <button
                   key={difficulty}
-                  className={getButtonStyles(
-                    state.difficulty === difficulty,
-                    "difficulty",
-                  )}
+                  className={getButtonStyles(state.difficulty === difficulty, 'difficulty')}
                   onClick={() => handleSetDifficulty(difficulty)}
                 >
                   <div
                     className={css({
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "center",
-                      gap: "4px",
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'center',
+                      gap: '4px',
                     })}
                   >
-                    <div className={css({ fontSize: "32px" })}>
+                    <div className={css({ fontSize: '32px' })}>
                       {difficultyInfo[difficulty].icon}
                     </div>
-                    <div
-                      className={css({ fontSize: "18px", fontWeight: "bold" })}
-                    >
+                    <div className={css({ fontSize: '18px', fontWeight: 'bold' })}>
                       {difficulty} pairs
                     </div>
-                    <div
-                      className={css({ fontSize: "14px", fontWeight: "bold" })}
-                    >
+                    <div className={css({ fontSize: '14px', fontWeight: 'bold' })}>
                       {difficultyInfo[difficulty].label}
                     </div>
                     <div
                       className={css({
-                        fontSize: "11px",
+                        fontSize: '11px',
                         opacity: 0.9,
-                        textAlign: "center",
+                        textAlign: 'center',
                       })}
                     >
                       {difficultyInfo[difficulty].description}
                     </div>
                   </div>
                 </button>
-              );
+              )
             })}
           </div>
           <p
             className={css({
-              fontSize: "14px",
-              color: "gray.500",
-              marginTop: "8px",
+              fontSize: '14px',
+              color: 'gray.500',
+              marginTop: '8px',
             })}
           >
             {state.difficulty} pairs = {state.difficulty * 2} cards total
@@ -595,75 +569,67 @@ export function SetupPhase() {
           <div>
             <label
               className={css({
-                display: "block",
-                fontSize: "20px",
-                fontWeight: "bold",
-                marginBottom: "16px",
-                color: "gray.700",
+                display: 'block',
+                fontSize: '20px',
+                fontWeight: 'bold',
+                marginBottom: '16px',
+                color: 'gray.700',
               })}
             >
               Turn Timer
             </label>
             <div
               className={css({
-                display: "flex",
-                gap: "12px",
-                justifyContent: "center",
-                flexWrap: "wrap",
+                display: 'flex',
+                gap: '12px',
+                justifyContent: 'center',
+                flexWrap: 'wrap',
               })}
             >
               {([15, 30, 45, 60] as const).map((timer) => {
-                const timerInfo: Record<
-                  15 | 30 | 45 | 60,
-                  { icon: string; label: string }
-                > = {
-                  15: { icon: "💨", label: "Lightning" },
-                  30: { icon: "⚡", label: "Quick" },
-                  45: { icon: "🏃", label: "Standard" },
-                  60: { icon: "🧘", label: "Relaxed" },
-                };
+                const timerInfo: Record<15 | 30 | 45 | 60, { icon: string; label: string }> = {
+                  15: { icon: '💨', label: 'Lightning' },
+                  30: { icon: '⚡', label: 'Quick' },
+                  45: { icon: '🏃', label: 'Standard' },
+                  60: { icon: '🧘', label: 'Relaxed' },
+                }
 
                 return (
                   <button
                     key={timer}
-                    className={getButtonStyles(
-                      state.turnTimer === timer,
-                      "secondary",
-                    )}
+                    className={getButtonStyles(state.turnTimer === timer, 'secondary')}
                     onClick={() => handleSetTurnTimer(timer)}
                   >
                     <div
                       className={css({
-                        display: "flex",
-                        flexDirection: "column",
-                        alignItems: "center",
-                        gap: "4px",
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        gap: '4px',
                       })}
                     >
-                      <span className={css({ fontSize: "24px" })}>
-                        {timerInfo[timer].icon}
-                      </span>
+                      <span className={css({ fontSize: '24px' })}>{timerInfo[timer].icon}</span>
                       <span
                         className={css({
-                          fontSize: "18px",
-                          fontWeight: "bold",
+                          fontSize: '18px',
+                          fontWeight: 'bold',
                         })}
                       >
                         {timer}s
                       </span>
-                      <span className={css({ fontSize: "12px", opacity: 0.8 })}>
+                      <span className={css({ fontSize: '12px', opacity: 0.8 })}>
                         {timerInfo[timer].label}
                       </span>
                     </div>
                   </button>
-                );
+                )
               })}
             </div>
             <p
               className={css({
-                fontSize: "14px",
-                color: "gray.500",
-                marginTop: "8px",
+                fontSize: '14px',
+                color: 'gray.500',
+                marginTop: '8px',
               })}
             >
               Time limit for each player's turn
@@ -674,99 +640,99 @@ export function SetupPhase() {
         {/* Start Game Button - Sticky at bottom */}
         <div
           className={css({
-            marginTop: "auto", // Push to bottom
-            paddingTop: { base: "12px", md: "16px" },
-            position: "sticky",
+            marginTop: 'auto', // Push to bottom
+            paddingTop: { base: '12px', md: '16px' },
+            position: 'sticky',
             bottom: 0,
-            background: "rgba(255,255,255,0.95)",
-            backdropFilter: "blur(10px)",
-            borderTop: "1px solid rgba(0,0,0,0.1)",
-            margin: "0 -16px -12px -16px", // Extend to edges
-            padding: { base: "12px 16px", md: "16px" },
+            background: 'rgba(255,255,255,0.95)',
+            backdropFilter: 'blur(10px)',
+            borderTop: '1px solid rgba(0,0,0,0.1)',
+            margin: '0 -16px -12px -16px', // Extend to edges
+            padding: { base: '12px 16px', md: '16px' },
           })}
         >
           <button
             className={css({
               background: canResumeGame
-                ? "linear-gradient(135deg, #10b981 0%, #059669 50%, #34d399 100%)"
-                : "linear-gradient(135deg, #ff6b6b 0%, #ee5a24 50%, #ff9ff3 100%)",
-              color: "white",
-              border: "none",
-              borderRadius: { base: "16px", sm: "20px", md: "24px" },
-              padding: { base: "14px 28px", sm: "16px 32px", md: "18px 36px" },
-              fontSize: { base: "16px", sm: "18px", md: "20px" },
-              fontWeight: "black",
-              cursor: "pointer",
-              transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
+                ? 'linear-gradient(135deg, #10b981 0%, #059669 50%, #34d399 100%)'
+                : 'linear-gradient(135deg, #ff6b6b 0%, #ee5a24 50%, #ff9ff3 100%)',
+              color: 'white',
+              border: 'none',
+              borderRadius: { base: '16px', sm: '20px', md: '24px' },
+              padding: { base: '14px 28px', sm: '16px 32px', md: '18px 36px' },
+              fontSize: { base: '16px', sm: '18px', md: '20px' },
+              fontWeight: 'black',
+              cursor: 'pointer',
+              transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
               boxShadow: canResumeGame
-                ? "0 8px 20px rgba(16, 185, 129, 0.4), inset 0 2px 0 rgba(255,255,255,0.3)"
-                : "0 8px 20px rgba(255, 107, 107, 0.4), inset 0 2px 0 rgba(255,255,255,0.3)",
-              textShadow: "0 2px 4px rgba(0,0,0,0.3)",
-              position: "relative",
-              overflow: "hidden",
-              width: "100%",
+                ? '0 8px 20px rgba(16, 185, 129, 0.4), inset 0 2px 0 rgba(255,255,255,0.3)'
+                : '0 8px 20px rgba(255, 107, 107, 0.4), inset 0 2px 0 rgba(255,255,255,0.3)',
+              textShadow: '0 2px 4px rgba(0,0,0,0.3)',
+              position: 'relative',
+              overflow: 'hidden',
+              width: '100%',
               _before: {
                 content: '""',
-                position: "absolute",
+                position: 'absolute',
                 top: 0,
-                left: "-100%",
-                width: "100%",
-                height: "100%",
+                left: '-100%',
+                width: '100%',
+                height: '100%',
                 background:
-                  "linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)",
-                transition: "left 0.6s ease",
+                  'linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)',
+                transition: 'left 0.6s ease',
               },
               _hover: {
                 transform: {
-                  base: "translateY(-2px)",
-                  md: "translateY(-3px) scale(1.02)",
+                  base: 'translateY(-2px)',
+                  md: 'translateY(-3px) scale(1.02)',
                 },
                 boxShadow: canResumeGame
-                  ? "0 12px 30px rgba(16, 185, 129, 0.6), inset 0 2px 0 rgba(255,255,255,0.3)"
-                  : "0 12px 30px rgba(255, 107, 107, 0.6), inset 0 2px 0 rgba(255,255,255,0.3)",
+                  ? '0 12px 30px rgba(16, 185, 129, 0.6), inset 0 2px 0 rgba(255,255,255,0.3)'
+                  : '0 12px 30px rgba(255, 107, 107, 0.6), inset 0 2px 0 rgba(255,255,255,0.3)',
                 background: canResumeGame
-                  ? "linear-gradient(135deg, #059669 0%, #047857 50%, #10b981 100%)"
-                  : "linear-gradient(135deg, #ff5252 0%, #dd2c00 50%, #e91e63 100%)",
+                  ? 'linear-gradient(135deg, #059669 0%, #047857 50%, #10b981 100%)'
+                  : 'linear-gradient(135deg, #ff5252 0%, #dd2c00 50%, #e91e63 100%)',
                 _before: {
-                  left: "100%",
+                  left: '100%',
                 },
               },
               _active: {
-                transform: "translateY(-1px) scale(1.01)",
+                transform: 'translateY(-1px) scale(1.01)',
               },
             })}
             onClick={handleStartOrResumeGame}
           >
             <div
               className={css({
-                display: "flex",
-                alignItems: "center",
-                gap: { base: "6px", md: "8px" },
-                justifyContent: "center",
+                display: 'flex',
+                alignItems: 'center',
+                gap: { base: '6px', md: '8px' },
+                justifyContent: 'center',
               })}
             >
               <span
                 className={css({
-                  fontSize: { base: "18px", sm: "20px", md: "24px" },
-                  animation: "bounce 2s infinite",
+                  fontSize: { base: '18px', sm: '20px', md: '24px' },
+                  animation: 'bounce 2s infinite',
                 })}
               >
-                {canResumeGame ? "▶️" : "🚀"}
+                {canResumeGame ? '▶️' : '🚀'}
               </span>
-              <span>{canResumeGame ? "RESUME GAME" : "START GAME"}</span>
+              <span>{canResumeGame ? 'RESUME GAME' : 'START GAME'}</span>
               <span
                 className={css({
-                  fontSize: { base: "18px", sm: "20px", md: "24px" },
-                  animation: "bounce 2s infinite",
-                  animationDelay: "0.5s",
+                  fontSize: { base: '18px', sm: '20px', md: '24px' },
+                  animation: 'bounce 2s infinite',
+                  animationDelay: '0.5s',
                 })}
               >
-                {canResumeGame ? "🎮" : "🎮"}
+                {canResumeGame ? '🎮' : '🎮'}
               </span>
             </div>
           </button>
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/matching/components/index.ts b/apps/web/src/arcade-games/matching/components/index.ts
index c3d9addf..f4896e37 100644
--- a/apps/web/src/arcade-games/matching/components/index.ts
+++ b/apps/web/src/arcade-games/matching/components/index.ts
@@ -2,10 +2,10 @@
  * Matching Pairs Battle - Components
  */
 
-export { MemoryPairsGame } from "./MemoryPairsGame";
-export { SetupPhase } from "./SetupPhase";
-export { GamePhase } from "./GamePhase";
-export { ResultsPhase } from "./ResultsPhase";
-export { GameCard } from "./GameCard";
-export { PlayerStatusBar } from "./PlayerStatusBar";
-export { EmojiPicker } from "./EmojiPicker";
+export { MemoryPairsGame } from './MemoryPairsGame'
+export { SetupPhase } from './SetupPhase'
+export { GamePhase } from './GamePhase'
+export { ResultsPhase } from './ResultsPhase'
+export { GameCard } from './GameCard'
+export { PlayerStatusBar } from './PlayerStatusBar'
+export { EmojiPicker } from './EmojiPicker'
diff --git a/apps/web/src/arcade-games/matching/index.ts b/apps/web/src/arcade-games/matching/index.ts
index 852336ba..a7261ce4 100644
--- a/apps/web/src/arcade-games/matching/index.ts
+++ b/apps/web/src/arcade-games/matching/index.ts
@@ -5,77 +5,70 @@
  * Supports both abacus-numeral matching and complement pairs modes.
  */
 
-import { defineGame, getGameTheme } from "@/lib/arcade/game-sdk";
-import type { GameManifest } from "@/lib/arcade/game-sdk";
-import { MemoryPairsGame } from "./components/MemoryPairsGame";
-import { MatchingProvider } from "./Provider";
-import type { MatchingConfig, MatchingMove, MatchingState } from "./types";
-import { matchingGameValidator } from "./Validator";
+import { defineGame, getGameTheme } from '@/lib/arcade/game-sdk'
+import type { GameManifest } from '@/lib/arcade/game-sdk'
+import { MemoryPairsGame } from './components/MemoryPairsGame'
+import { MatchingProvider } from './Provider'
+import type { MatchingConfig, MatchingMove, MatchingState } from './types'
+import { matchingGameValidator } from './Validator'
 
 const manifest: GameManifest = {
-  name: "matching",
-  displayName: "Matching Pairs Battle",
-  icon: "⚔️",
-  description: "Multiplayer memory battle with friends",
+  name: 'matching',
+  displayName: 'Matching Pairs Battle',
+  icon: '⚔️',
+  description: 'Multiplayer memory battle with friends',
   longDescription:
-    "Battle friends in epic memory challenges. Match pairs faster than your opponents in this exciting multiplayer experience. " +
-    "Choose between abacus-numeral matching or complement pairs mode. Strategic thinking and quick memory are key to victory!",
+    'Battle friends in epic memory challenges. Match pairs faster than your opponents in this exciting multiplayer experience. ' +
+    'Choose between abacus-numeral matching or complement pairs mode. Strategic thinking and quick memory are key to victory!',
   maxPlayers: 4,
-  difficulty: "Intermediate",
-  chips: ["👥 Multiplayer", "🎯 Strategic", "🏆 Competitive"],
-  ...getGameTheme("pink"),
+  difficulty: 'Intermediate',
+  chips: ['👥 Multiplayer', '🎯 Strategic', '🏆 Competitive'],
+  ...getGameTheme('pink'),
   available: true,
-};
+}
 
 const defaultConfig: MatchingConfig = {
-  gameType: "abacus-numeral",
+  gameType: 'abacus-numeral',
   difficulty: 6,
   turnTimer: 30,
-};
+}
 
 // Config validation function
 function validateMatchingConfig(config: unknown): config is MatchingConfig {
-  if (typeof config !== "object" || config === null) {
-    return false;
+  if (typeof config !== 'object' || config === null) {
+    return false
   }
 
-  const c = config as any;
+  const c = config as any
 
   // Validate gameType
-  if (
-    !("gameType" in c) ||
-    !["abacus-numeral", "complement-pairs"].includes(c.gameType)
-  ) {
-    return false;
+  if (!('gameType' in c) || !['abacus-numeral', 'complement-pairs'].includes(c.gameType)) {
+    return false
   }
 
   // Validate difficulty (number of pairs)
-  if (!("difficulty" in c) || ![6, 8, 12, 15].includes(c.difficulty)) {
-    return false;
+  if (!('difficulty' in c) || ![6, 8, 12, 15].includes(c.difficulty)) {
+    return false
   }
 
   // Validate turnTimer
   if (
-    !("turnTimer" in c) ||
-    typeof c.turnTimer !== "number" ||
+    !('turnTimer' in c) ||
+    typeof c.turnTimer !== 'number' ||
     c.turnTimer < 5 ||
     c.turnTimer > 300
   ) {
-    return false;
+    return false
   }
 
-  return true;
+  return true
 }
 
-export const matchingGame = defineGame<
-  MatchingConfig,
-  MatchingState,
-  MatchingMove
->({
+export const matchingGame = defineGame<MatchingConfig, MatchingState, MatchingMove>({
   manifest,
   Provider: MatchingProvider,
   GameComponent: MemoryPairsGame,
   validator: matchingGameValidator,
   defaultConfig,
   validateConfig: validateMatchingConfig,
-});
+})
diff --git a/apps/web/src/arcade-games/matching/types.ts b/apps/web/src/arcade-games/matching/types.ts
index 58f8c114..e45a4024 100644
--- a/apps/web/src/arcade-games/matching/types.ts
+++ b/apps/web/src/arcade-games/matching/types.ts
@@ -4,19 +4,19 @@
  * SDK-compatible types for the matching game.
  */
 
-import type { GameConfig, GameState } from "@/lib/arcade/game-sdk/types";
+import type { GameConfig, GameState } from '@/lib/arcade/game-sdk/types'
 
 // ============================================================================
 // Core Types
 // ============================================================================
 
-export type GameMode = "single" | "multiplayer";
-export type GameType = "abacus-numeral" | "complement-pairs";
-export type GamePhase = "setup" | "playing" | "results";
-export type CardType = "abacus" | "number" | "complement";
-export type Difficulty = 6 | 8 | 12 | 15; // Number of pairs
-export type Player = string; // Player ID (UUID)
-export type TargetSum = 5 | 10 | 20;
+export type GameMode = 'single' | 'multiplayer'
+export type GameType = 'abacus-numeral' | 'complement-pairs'
+export type GamePhase = 'setup' | 'playing' | 'results'
+export type CardType = 'abacus' | 'number' | 'complement'
+export type Difficulty = 6 | 8 | 12 | 15 // Number of pairs
+export type Player = string // Player ID (UUID)
+export type TargetSum = 5 | 10 | 20
 
 // ============================================================================
 // Game Configuration (SDK-compatible)
@@ -27,9 +27,9 @@ export type TargetSum = 5 | 10 | 20;
  * Extends GameConfig for SDK compatibility
  */
 export interface MatchingConfig extends GameConfig {
-  gameType: GameType;
-  difficulty: Difficulty;
-  turnTimer: number;
+  gameType: GameType
+  difficulty: Difficulty
+  turnTimer: number
 }
 
 // ============================================================================
@@ -37,43 +37,43 @@ export interface MatchingConfig extends GameConfig {
 // ============================================================================
 
 export interface GameCard {
-  id: string;
-  type: CardType;
-  number: number;
-  complement?: number; // For complement pairs
-  targetSum?: TargetSum; // For complement pairs
-  matched: boolean;
-  matchedBy?: Player; // For two-player mode
-  element?: HTMLElement | null; // For animations
+  id: string
+  type: CardType
+  number: number
+  complement?: number // For complement pairs
+  targetSum?: TargetSum // For complement pairs
+  matched: boolean
+  matchedBy?: Player // For two-player mode
+  element?: HTMLElement | null // For animations
 }
 
 export interface PlayerMetadata {
-  id: string; // Player ID (UUID)
-  name: string;
-  emoji: string;
-  userId: string; // Which user owns this player
-  color?: string;
+  id: string // Player ID (UUID)
+  name: string
+  emoji: string
+  userId: string // Which user owns this player
+  color?: string
 }
 
 export interface PlayerScore {
-  [playerId: string]: number;
+  [playerId: string]: number
 }
 
 export interface CelebrationAnimation {
-  id: string;
-  type: "match" | "win" | "confetti";
-  x: number;
-  y: number;
-  timestamp: number;
+  id: string
+  type: 'match' | 'win' | 'confetti'
+  x: number
+  y: number
+  timestamp: number
 }
 
 export interface GameStatistics {
-  totalMoves: number;
-  matchedPairs: number;
-  totalPairs: number;
-  gameTime: number;
-  accuracy: number; // Percentage of successful matches
-  averageTimePerMove: number;
+  totalMoves: number
+  matchedPairs: number
+  totalPairs: number
+  gameTime: number
+  accuracy: number // Percentage of successful matches
+  averageTimePerMove: number
 }
 
 // ============================================================================
@@ -86,63 +86,63 @@ export interface GameStatistics {
  */
 export interface MatchingState extends GameState {
   // Core game data
-  cards: GameCard[];
-  gameCards: GameCard[];
-  flippedCards: GameCard[];
+  cards: GameCard[]
+  gameCards: GameCard[]
+  flippedCards: GameCard[]
 
   // Game configuration
-  gameType: GameType;
-  difficulty: Difficulty;
-  turnTimer: number; // Seconds for turn timer
+  gameType: GameType
+  difficulty: Difficulty
+  turnTimer: number // Seconds for turn timer
 
   // Game progression
-  gamePhase: GamePhase;
-  currentPlayer: Player;
-  matchedPairs: number;
-  totalPairs: number;
-  moves: number;
-  scores: PlayerScore;
-  activePlayers: Player[]; // Track active player IDs
-  playerMetadata: Record<string, PlayerMetadata>; // Player metadata for cross-user visibility
-  consecutiveMatches: Record<string, number>; // Track consecutive matches per player
+  gamePhase: GamePhase
+  currentPlayer: Player
+  matchedPairs: number
+  totalPairs: number
+  moves: number
+  scores: PlayerScore
+  activePlayers: Player[] // Track active player IDs
+  playerMetadata: Record<string, PlayerMetadata> // Player metadata for cross-user visibility
+  consecutiveMatches: Record<string, number> // Track consecutive matches per player
 
   // Timing
-  gameStartTime: number | null;
-  gameEndTime: number | null;
-  currentMoveStartTime: number | null;
-  timerInterval: NodeJS.Timeout | null;
+  gameStartTime: number | null
+  gameEndTime: number | null
+  currentMoveStartTime: number | null
+  timerInterval: NodeJS.Timeout | null
 
   // UI state
-  celebrationAnimations: CelebrationAnimation[];
-  isProcessingMove: boolean;
-  showMismatchFeedback: boolean;
-  lastMatchedPair: [string, string] | null;
+  celebrationAnimations: CelebrationAnimation[]
+  isProcessingMove: boolean
+  showMismatchFeedback: boolean
+  lastMatchedPair: [string, string] | null
 
   // PAUSE/RESUME: Paused game state
   originalConfig?: {
-    gameType: GameType;
-    difficulty: Difficulty;
-    turnTimer: number;
-  };
-  pausedGamePhase?: GamePhase;
+    gameType: GameType
+    difficulty: Difficulty
+    turnTimer: number
+  }
+  pausedGamePhase?: GamePhase
   pausedGameState?: {
-    gameCards: GameCard[];
-    currentPlayer: Player;
-    matchedPairs: number;
-    moves: number;
-    scores: PlayerScore;
-    activePlayers: Player[];
-    playerMetadata: Record<string, PlayerMetadata>;
-    consecutiveMatches: Record<string, number>;
-    gameStartTime: number | null;
-  };
+    gameCards: GameCard[]
+    currentPlayer: Player
+    matchedPairs: number
+    moves: number
+    scores: PlayerScore
+    activePlayers: Player[]
+    playerMetadata: Record<string, PlayerMetadata>
+    consecutiveMatches: Record<string, number>
+    gameStartTime: number | null
+  }
 
   // HOVER: Networked hover state
-  playerHovers: Record<string, string | null>; // playerId -> cardId (or null if not hovering)
+  playerHovers: Record<string, string | null> // playerId -> cardId (or null if not hovering)
 }
 
 // For backwards compatibility with existing code
-export type MemoryPairsState = MatchingState;
+export type MemoryPairsState = MatchingState
 
 // ============================================================================
 // Context Value
@@ -153,31 +153,31 @@ export type MemoryPairsState = MatchingState;
  * Exposes state and action creators to components
  */
 export interface MatchingContextValue {
-  state: MatchingState & { gameMode: GameMode };
-  dispatch: React.Dispatch<any>; // Deprecated - use action creators instead
+  state: MatchingState & { gameMode: GameMode }
+  dispatch: React.Dispatch<any> // Deprecated - use action creators instead
 
   // Computed values
-  isGameActive: boolean;
-  canFlipCard: (cardId: string) => boolean;
-  currentGameStatistics: GameStatistics;
-  gameMode: GameMode;
-  activePlayers: Player[];
+  isGameActive: boolean
+  canFlipCard: (cardId: string) => boolean
+  currentGameStatistics: GameStatistics
+  gameMode: GameMode
+  activePlayers: Player[]
 
   // Pause/Resume
-  hasConfigChanged: boolean;
-  canResumeGame: boolean;
+  hasConfigChanged: boolean
+  canResumeGame: boolean
 
   // Actions
-  startGame: () => void;
-  flipCard: (cardId: string) => void;
-  resetGame: () => void;
-  setGameType: (type: GameType) => void;
-  setDifficulty: (difficulty: Difficulty) => void;
-  setTurnTimer: (timer: number) => void;
-  goToSetup: () => void;
-  resumeGame: () => void;
-  hoverCard: (cardId: string | null) => void;
-  exitSession: () => void;
+  startGame: () => void
+  flipCard: (cardId: string) => void
+  resetGame: () => void
+  setGameType: (type: GameType) => void
+  setDifficulty: (difficulty: Difficulty) => void
+  setTurnTimer: (timer: number) => void
+  goToSetup: () => void
+  resumeGame: () => void
+  hoverCard: (cardId: string | null) => void
+  exitSession: () => void
 }
 
 // ============================================================================
@@ -190,89 +190,89 @@ export interface MatchingContextValue {
  */
 export type MatchingMove =
   | {
-      type: "FLIP_CARD";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'FLIP_CARD'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        cardId: string;
-      };
+        cardId: string
+      }
     }
   | {
-      type: "START_GAME";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'START_GAME'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        cards: GameCard[];
-        activePlayers: string[];
-        playerMetadata: Record<string, PlayerMetadata>;
-      };
+        cards: GameCard[]
+        activePlayers: string[]
+        playerMetadata: Record<string, PlayerMetadata>
+      }
     }
   | {
-      type: "CLEAR_MISMATCH";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'CLEAR_MISMATCH'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "GO_TO_SETUP";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'GO_TO_SETUP'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "SET_CONFIG";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'SET_CONFIG'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        field: "gameType" | "difficulty" | "turnTimer";
-        value: any;
-      };
+        field: 'gameType' | 'difficulty' | 'turnTimer'
+        value: any
+      }
     }
   | {
-      type: "RESUME_GAME";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'RESUME_GAME'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "HOVER_CARD";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'HOVER_CARD'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        cardId: string | null;
-      };
-    };
+        cardId: string | null
+      }
+    }
 
 // ============================================================================
 // Component Props
 // ============================================================================
 
 export interface GameCardProps {
-  card: GameCard;
-  isFlipped: boolean;
-  isMatched: boolean;
-  onClick: () => void;
-  disabled?: boolean;
+  card: GameCard
+  isFlipped: boolean
+  isMatched: boolean
+  onClick: () => void
+  disabled?: boolean
 }
 
 export interface PlayerIndicatorProps {
-  player: Player;
-  isActive: boolean;
-  score: number;
-  name?: string;
+  player: Player
+  isActive: boolean
+  score: number
+  name?: string
 }
 
 export interface GameGridProps {
-  cards: GameCard[];
-  onCardClick: (cardId: string) => void;
-  disabled?: boolean;
+  cards: GameCard[]
+  onCardClick: (cardId: string) => void
+  disabled?: boolean
 }
 
 // ============================================================================
@@ -280,7 +280,7 @@ export interface GameGridProps {
 // ============================================================================
 
 export interface MatchValidationResult {
-  isValid: boolean;
-  reason?: string;
-  type: "abacus-numeral" | "complement" | "invalid";
+  isValid: boolean
+  reason?: string
+  type: 'abacus-numeral' | 'complement' | 'invalid'
 }
diff --git a/apps/web/src/arcade-games/matching/utils/cardGeneration.ts b/apps/web/src/arcade-games/matching/utils/cardGeneration.ts
index a69c1386..dd0b4ebe 100644
--- a/apps/web/src/arcade-games/matching/utils/cardGeneration.ts
+++ b/apps/web/src/arcade-games/matching/utils/cardGeneration.ts
@@ -1,29 +1,26 @@
-import type { Difficulty, GameCard, GameType } from "../types";
+import type { Difficulty, GameCard, GameType } from '../types'
 
 // Utility function to generate unique random numbers
-function generateUniqueNumbers(
-  count: number,
-  options: { min: number; max: number },
-): number[] {
-  const numbers = new Set<number>();
-  const { min, max } = options;
+function generateUniqueNumbers(count: number, options: { min: number; max: number }): number[] {
+  const numbers = new Set<number>()
+  const { min, max } = options
 
   while (numbers.size < count) {
-    const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
-    numbers.add(randomNum);
+    const randomNum = Math.floor(Math.random() * (max - min + 1)) + min
+    numbers.add(randomNum)
   }
 
-  return Array.from(numbers);
+  return Array.from(numbers)
 }
 
 // Utility function to shuffle an array
 function shuffleArray<T>(array: T[]): T[] {
-  const shuffled = [...array];
+  const shuffled = [...array]
   for (let i = shuffled.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
   }
-  return shuffled;
+  return shuffled
 }
 
 // Generate cards for abacus-numeral game mode
@@ -35,32 +32,32 @@ export function generateAbacusNumeralCards(pairs: Difficulty): GameCard[] {
     8: { min: 1, max: 100 }, // 8 pairs: 1-100
     12: { min: 1, max: 200 }, // 12 pairs: 1-200
     15: { min: 1, max: 300 }, // 15 pairs: 1-300
-  };
+  }
 
-  const range = numberRanges[pairs];
-  const numbers = generateUniqueNumbers(pairs, range);
+  const range = numberRanges[pairs]
+  const numbers = generateUniqueNumbers(pairs, range)
 
-  const cards: GameCard[] = [];
+  const cards: GameCard[] = []
 
   numbers.forEach((number) => {
     // Abacus representation card
     cards.push({
       id: `abacus_${number}`,
-      type: "abacus",
+      type: 'abacus',
       number,
       matched: false,
-    });
+    })
 
     // Numerical representation card
     cards.push({
       id: `number_${number}`,
-      type: "number",
+      type: 'number',
       number,
       matched: false,
-    });
-  });
+    })
+  })
 
-  return shuffleArray(cards);
+  return shuffleArray(cards)
 }
 
 // Generate cards for complement pairs game mode
@@ -90,51 +87,48 @@ export function generateComplementCards(pairs: Difficulty): GameCard[] {
     // More challenging pairs (can be used for expert mode)
     { pair: [11, 9], targetSum: 20 as const },
     { pair: [12, 8], targetSum: 20 as const },
-  ];
+  ]
 
   // Select the required number of complement pairs
-  const selectedPairs = complementPairs.slice(0, pairs);
-  const cards: GameCard[] = [];
+  const selectedPairs = complementPairs.slice(0, pairs)
+  const cards: GameCard[] = []
 
   selectedPairs.forEach(({ pair: [num1, num2], targetSum }, index) => {
     // First number in the pair
     cards.push({
       id: `comp1_${index}_${num1}`,
-      type: "complement",
+      type: 'complement',
       number: num1,
       complement: num2,
       targetSum,
       matched: false,
-    });
+    })
 
     // Second number in the pair
     cards.push({
       id: `comp2_${index}_${num2}`,
-      type: "complement",
+      type: 'complement',
       number: num2,
       complement: num1,
       targetSum,
       matched: false,
-    });
-  });
+    })
+  })
 
-  return shuffleArray(cards);
+  return shuffleArray(cards)
 }
 
 // Main card generation function
-export function generateGameCards(
-  gameType: GameType,
-  difficulty: Difficulty,
-): GameCard[] {
+export function generateGameCards(gameType: GameType, difficulty: Difficulty): GameCard[] {
   switch (gameType) {
-    case "abacus-numeral":
-      return generateAbacusNumeralCards(difficulty);
+    case 'abacus-numeral':
+      return generateAbacusNumeralCards(difficulty)
 
-    case "complement-pairs":
-      return generateComplementCards(difficulty);
+    case 'complement-pairs':
+      return generateComplementCards(difficulty)
 
     default:
-      throw new Error(`Unknown game type: ${gameType}`);
+      throw new Error(`Unknown game type: ${gameType}`)
   }
 }
 
@@ -143,14 +137,14 @@ export function getGridConfiguration(difficulty: Difficulty) {
   const configs: Record<
     Difficulty,
     {
-      totalCards: number;
+      totalCards: number
       // Orientation-optimized responsive columns
-      mobileColumns: number; // Portrait mobile
-      tabletColumns: number; // Tablet
-      desktopColumns: number; // Desktop/landscape
-      landscapeColumns: number; // Landscape mobile/tablet
-      cardSize: { width: string; height: string };
-      gridTemplate: string;
+      mobileColumns: number // Portrait mobile
+      tabletColumns: number // Tablet
+      desktopColumns: number // Desktop/landscape
+      landscapeColumns: number // Landscape mobile/tablet
+      cardSize: { width: string; height: string }
+      gridTemplate: string
     }
   > = {
     6: {
@@ -159,8 +153,8 @@ export function getGridConfiguration(difficulty: Difficulty) {
       tabletColumns: 4, // 4x3 grid on tablet
       desktopColumns: 4, // 4x3 grid on desktop
       landscapeColumns: 6, // 6x2 grid in landscape
-      cardSize: { width: "140px", height: "180px" },
-      gridTemplate: "repeat(3, 1fr)",
+      cardSize: { width: '140px', height: '180px' },
+      gridTemplate: 'repeat(3, 1fr)',
     },
     8: {
       totalCards: 16,
@@ -168,8 +162,8 @@ export function getGridConfiguration(difficulty: Difficulty) {
       tabletColumns: 4, // 4x4 grid on tablet
       desktopColumns: 4, // 4x4 grid on desktop
       landscapeColumns: 6, // 6x3 grid in landscape (some spillover)
-      cardSize: { width: "120px", height: "160px" },
-      gridTemplate: "repeat(3, 1fr)",
+      cardSize: { width: '120px', height: '160px' },
+      gridTemplate: 'repeat(3, 1fr)',
     },
     12: {
       totalCards: 24,
@@ -177,8 +171,8 @@ export function getGridConfiguration(difficulty: Difficulty) {
       tabletColumns: 4, // 4x6 grid on tablet
       desktopColumns: 6, // 6x4 grid on desktop
       landscapeColumns: 6, // 6x4 grid in landscape (changed from 8x3)
-      cardSize: { width: "100px", height: "140px" },
-      gridTemplate: "repeat(3, 1fr)",
+      cardSize: { width: '100px', height: '140px' },
+      gridTemplate: 'repeat(3, 1fr)',
     },
     15: {
       totalCards: 30,
@@ -186,18 +180,15 @@ export function getGridConfiguration(difficulty: Difficulty) {
       tabletColumns: 5, // 5x6 grid on tablet
       desktopColumns: 6, // 6x5 grid on desktop
       landscapeColumns: 10, // 10x3 grid in landscape
-      cardSize: { width: "90px", height: "120px" },
-      gridTemplate: "repeat(3, 1fr)",
+      cardSize: { width: '90px', height: '120px' },
+      gridTemplate: 'repeat(3, 1fr)',
     },
-  };
+  }
 
-  return configs[difficulty];
+  return configs[difficulty]
 }
 
 // Generate a unique ID for cards
-export function generateCardId(
-  type: string,
-  identifier: string | number,
-): string {
-  return `${type}_${identifier}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+export function generateCardId(type: string, identifier: string | number): string {
+  return `${type}_${identifier}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
 }
diff --git a/apps/web/src/arcade-games/matching/utils/gameScoring.ts b/apps/web/src/arcade-games/matching/utils/gameScoring.ts
index e227db9f..ea398f64 100644
--- a/apps/web/src/arcade-games/matching/utils/gameScoring.ts
+++ b/apps/web/src/arcade-games/matching/utils/gameScoring.ts
@@ -1,4 +1,4 @@
-import type { GameStatistics, MemoryPairsState, Player } from "../types";
+import type { GameStatistics, MemoryPairsState, Player } from '../types'
 
 // Calculate final game score based on multiple factors
 export function calculateFinalScore(
@@ -7,36 +7,31 @@ export function calculateFinalScore(
   moves: number,
   gameTime: number,
   difficulty: number,
-  gameMode: "single" | "two-player",
+  gameMode: 'single' | 'two-player'
 ): number {
   // Base score for completing pairs
-  const baseScore = matchedPairs * 100;
+  const baseScore = matchedPairs * 100
 
   // Efficiency bonus (fewer moves = higher bonus)
-  const idealMoves = totalPairs * 2; // Perfect game would be 2 moves per pair
-  const efficiency = idealMoves / Math.max(moves, idealMoves);
-  const efficiencyBonus = Math.round(baseScore * efficiency * 0.5);
+  const idealMoves = totalPairs * 2 // Perfect game would be 2 moves per pair
+  const efficiency = idealMoves / Math.max(moves, idealMoves)
+  const efficiencyBonus = Math.round(baseScore * efficiency * 0.5)
 
   // Time bonus (faster completion = higher bonus)
-  const timeInMinutes = gameTime / (1000 * 60);
-  const timeBonus = Math.max(
-    0,
-    Math.round((1000 * difficulty) / timeInMinutes),
-  );
+  const timeInMinutes = gameTime / (1000 * 60)
+  const timeBonus = Math.max(0, Math.round((1000 * difficulty) / timeInMinutes))
 
   // Difficulty multiplier
-  const difficultyMultiplier = 1 + (difficulty - 6) * 0.1;
+  const difficultyMultiplier = 1 + (difficulty - 6) * 0.1
 
   // Two-player mode bonus
-  const modeMultiplier = gameMode === "two-player" ? 1.2 : 1.0;
+  const modeMultiplier = gameMode === 'two-player' ? 1.2 : 1.0
 
   const finalScore = Math.round(
-    (baseScore + efficiencyBonus + timeBonus) *
-      difficultyMultiplier *
-      modeMultiplier,
-  );
+    (baseScore + efficiencyBonus + timeBonus) * difficultyMultiplier * modeMultiplier
+  )
 
-  return Math.max(0, finalScore);
+  return Math.max(0, finalScore)
 }
 
 // Calculate star rating (1-5 stars) based on performance
@@ -44,161 +39,140 @@ export function calculateStarRating(
   accuracy: number,
   efficiency: number,
   gameTime: number,
-  difficulty: number,
+  difficulty: number
 ): number {
   // Normalize time score (assuming reasonable time ranges)
-  const expectedTime = difficulty * 30000; // 30 seconds per pair as baseline
-  const timeScore = Math.max(0, Math.min(100, (expectedTime / gameTime) * 100));
+  const expectedTime = difficulty * 30000 // 30 seconds per pair as baseline
+  const timeScore = Math.max(0, Math.min(100, (expectedTime / gameTime) * 100))
 
   // Weighted average of different factors
-  const overallScore = accuracy * 0.4 + efficiency * 0.4 + timeScore * 0.2;
+  const overallScore = accuracy * 0.4 + efficiency * 0.4 + timeScore * 0.2
 
   // Convert to stars
-  if (overallScore >= 90) return 5;
-  if (overallScore >= 80) return 4;
-  if (overallScore >= 70) return 3;
-  if (overallScore >= 60) return 2;
-  return 1;
+  if (overallScore >= 90) return 5
+  if (overallScore >= 80) return 4
+  if (overallScore >= 70) return 3
+  if (overallScore >= 60) return 2
+  return 1
 }
 
 // Get achievement badges based on performance
 export interface Achievement {
-  id: string;
-  name: string;
-  description: string;
-  icon: string;
-  earned: boolean;
+  id: string
+  name: string
+  description: string
+  icon: string
+  earned: boolean
 }
 
 export function getAchievements(
   state: MemoryPairsState,
-  gameMode: "single" | "multiplayer",
+  gameMode: 'single' | 'multiplayer'
 ): Achievement[] {
-  const {
-    matchedPairs,
-    totalPairs,
-    moves,
-    scores,
-    gameStartTime,
-    gameEndTime,
-  } = state;
-  const accuracy = moves > 0 ? (matchedPairs / moves) * 100 : 0;
-  const gameTime =
-    gameStartTime && gameEndTime ? gameEndTime - gameStartTime : 0;
-  const gameTimeInSeconds = gameTime / 1000;
+  const { matchedPairs, totalPairs, moves, scores, gameStartTime, gameEndTime } = state
+  const accuracy = moves > 0 ? (matchedPairs / moves) * 100 : 0
+  const gameTime = gameStartTime && gameEndTime ? gameEndTime - gameStartTime : 0
+  const gameTimeInSeconds = gameTime / 1000
 
   const achievements: Achievement[] = [
     {
-      id: "perfect_game",
-      name: "Perfect Memory",
-      description: "Complete a game with 100% accuracy",
-      icon: "🧠",
+      id: 'perfect_game',
+      name: 'Perfect Memory',
+      description: 'Complete a game with 100% accuracy',
+      icon: '🧠',
       earned: matchedPairs === totalPairs && moves === totalPairs * 2,
     },
     {
-      id: "speed_demon",
-      name: "Speed Demon",
-      description: "Complete a game in under 2 minutes",
-      icon: "⚡",
-      earned:
-        gameTimeInSeconds > 0 &&
-        gameTimeInSeconds < 120 &&
-        matchedPairs === totalPairs,
+      id: 'speed_demon',
+      name: 'Speed Demon',
+      description: 'Complete a game in under 2 minutes',
+      icon: '⚡',
+      earned: gameTimeInSeconds > 0 && gameTimeInSeconds < 120 && matchedPairs === totalPairs,
     },
     {
-      id: "accuracy_ace",
-      name: "Accuracy Ace",
-      description: "Achieve 90% accuracy or higher",
-      icon: "🎯",
+      id: 'accuracy_ace',
+      name: 'Accuracy Ace',
+      description: 'Achieve 90% accuracy or higher',
+      icon: '🎯',
       earned: accuracy >= 90 && matchedPairs === totalPairs,
     },
     {
-      id: "marathon_master",
-      name: "Marathon Master",
-      description: "Complete the hardest difficulty (15 pairs)",
-      icon: "🏃",
+      id: 'marathon_master',
+      name: 'Marathon Master',
+      description: 'Complete the hardest difficulty (15 pairs)',
+      icon: '🏃',
       earned: totalPairs === 15 && matchedPairs === totalPairs,
     },
     {
-      id: "complement_champion",
-      name: "Complement Champion",
-      description: "Master complement pairs mode",
-      icon: "🤝",
+      id: 'complement_champion',
+      name: 'Complement Champion',
+      description: 'Master complement pairs mode',
+      icon: '🤝',
       earned:
-        state.gameType === "complement-pairs" &&
-        matchedPairs === totalPairs &&
-        accuracy >= 85,
+        state.gameType === 'complement-pairs' && matchedPairs === totalPairs && accuracy >= 85,
     },
     {
-      id: "two_player_triumph",
-      name: "Two-Player Triumph",
-      description: "Win a two-player game",
-      icon: "👥",
+      id: 'two_player_triumph',
+      name: 'Two-Player Triumph',
+      description: 'Win a two-player game',
+      icon: '👥',
       earned:
-        gameMode === "multiplayer" &&
+        gameMode === 'multiplayer' &&
         matchedPairs === totalPairs &&
         Object.keys(scores).length > 1 &&
         Math.max(...Object.values(scores)) > 0,
     },
     {
-      id: "shutout_victory",
-      name: "Shutout Victory",
-      description: "Win a two-player game without opponent scoring",
-      icon: "🛡️",
+      id: 'shutout_victory',
+      name: 'Shutout Victory',
+      description: 'Win a two-player game without opponent scoring',
+      icon: '🛡️',
       earned:
-        gameMode === "multiplayer" &&
+        gameMode === 'multiplayer' &&
         matchedPairs === totalPairs &&
         Object.values(scores).some((score) => score === totalPairs) &&
         Object.values(scores).some((score) => score === 0),
     },
     {
-      id: "comeback_kid",
-      name: "Comeback Kid",
-      description: "Win after being behind by 3+ points",
-      icon: "🔄",
+      id: 'comeback_kid',
+      name: 'Comeback Kid',
+      description: 'Win after being behind by 3+ points',
+      icon: '🔄',
       earned: false, // This would need more complex tracking during the game
     },
     {
-      id: "first_timer",
-      name: "First Timer",
-      description: "Complete your first game",
-      icon: "🌟",
+      id: 'first_timer',
+      name: 'First Timer',
+      description: 'Complete your first game',
+      icon: '🌟',
       earned: matchedPairs === totalPairs,
     },
     {
-      id: "consistency_king",
-      name: "Consistency King",
-      description: "Achieve 80%+ accuracy in 5 consecutive games",
-      icon: "👑",
+      id: 'consistency_king',
+      name: 'Consistency King',
+      description: 'Achieve 80%+ accuracy in 5 consecutive games',
+      icon: '👑',
       earned: false, // This would need persistent game history
     },
-  ];
+  ]
 
-  return achievements;
+  return achievements
 }
 
 // Get performance metrics and analysis
 export function getPerformanceAnalysis(state: MemoryPairsState): {
-  statistics: GameStatistics;
-  grade: "A+" | "A" | "B+" | "B" | "C+" | "C" | "D" | "F";
-  strengths: string[];
-  improvements: string[];
-  starRating: number;
+  statistics: GameStatistics
+  grade: 'A+' | 'A' | 'B+' | 'B' | 'C+' | 'C' | 'D' | 'F'
+  strengths: string[]
+  improvements: string[]
+  starRating: number
 } {
-  const {
-    matchedPairs,
-    totalPairs,
-    moves,
-    difficulty,
-    gameStartTime,
-    gameEndTime,
-  } = state;
-  const gameTime =
-    gameStartTime && gameEndTime ? gameEndTime - gameStartTime : 0;
+  const { matchedPairs, totalPairs, moves, difficulty, gameStartTime, gameEndTime } = state
+  const gameTime = gameStartTime && gameEndTime ? gameEndTime - gameStartTime : 0
 
   // Calculate statistics
-  const accuracy = moves > 0 ? (matchedPairs / moves) * 100 : 0;
-  const averageTimePerMove = moves > 0 ? gameTime / moves : 0;
+  const accuracy = moves > 0 ? (matchedPairs / moves) * 100 : 0
+  const averageTimePerMove = moves > 0 ? gameTime / moves : 0
   const statistics: GameStatistics = {
     totalMoves: moves,
     matchedPairs,
@@ -206,71 +180,62 @@ export function getPerformanceAnalysis(state: MemoryPairsState): {
     gameTime,
     accuracy,
     averageTimePerMove,
-  };
+  }
 
   // Calculate efficiency (ideal vs actual moves)
-  const idealMoves = totalPairs * 2;
-  const efficiency = (idealMoves / Math.max(moves, idealMoves)) * 100;
+  const idealMoves = totalPairs * 2
+  const efficiency = (idealMoves / Math.max(moves, idealMoves)) * 100
 
   // Determine grade
-  let grade: "A+" | "A" | "B+" | "B" | "C+" | "C" | "D" | "F" = "F";
-  if (accuracy >= 95 && efficiency >= 90) grade = "A+";
-  else if (accuracy >= 90 && efficiency >= 85) grade = "A";
-  else if (accuracy >= 85 && efficiency >= 80) grade = "B+";
-  else if (accuracy >= 80 && efficiency >= 75) grade = "B";
-  else if (accuracy >= 75 && efficiency >= 70) grade = "C+";
-  else if (accuracy >= 70 && efficiency >= 65) grade = "C";
-  else if (accuracy >= 60 && efficiency >= 50) grade = "D";
+  let grade: 'A+' | 'A' | 'B+' | 'B' | 'C+' | 'C' | 'D' | 'F' = 'F'
+  if (accuracy >= 95 && efficiency >= 90) grade = 'A+'
+  else if (accuracy >= 90 && efficiency >= 85) grade = 'A'
+  else if (accuracy >= 85 && efficiency >= 80) grade = 'B+'
+  else if (accuracy >= 80 && efficiency >= 75) grade = 'B'
+  else if (accuracy >= 75 && efficiency >= 70) grade = 'C+'
+  else if (accuracy >= 70 && efficiency >= 65) grade = 'C'
+  else if (accuracy >= 60 && efficiency >= 50) grade = 'D'
 
   // Calculate star rating
-  const starRating = calculateStarRating(
-    accuracy,
-    efficiency,
-    gameTime,
-    difficulty,
-  );
+  const starRating = calculateStarRating(accuracy, efficiency, gameTime, difficulty)
 
   // Analyze strengths and areas for improvement
-  const strengths: string[] = [];
-  const improvements: string[] = [];
+  const strengths: string[] = []
+  const improvements: string[] = []
 
   if (accuracy >= 90) {
-    strengths.push("Excellent memory and pattern recognition");
+    strengths.push('Excellent memory and pattern recognition')
   } else if (accuracy < 70) {
-    improvements.push("Focus on remembering card positions more carefully");
+    improvements.push('Focus on remembering card positions more carefully')
   }
 
   if (efficiency >= 85) {
-    strengths.push("Very efficient with minimal unnecessary moves");
+    strengths.push('Very efficient with minimal unnecessary moves')
   } else if (efficiency < 60) {
-    improvements.push(
-      "Try to reduce random guessing and use memory strategies",
-    );
+    improvements.push('Try to reduce random guessing and use memory strategies')
   }
 
-  const avgTimePerMoveSeconds = averageTimePerMove / 1000;
+  const avgTimePerMoveSeconds = averageTimePerMove / 1000
   if (avgTimePerMoveSeconds < 3) {
-    strengths.push("Quick decision making");
+    strengths.push('Quick decision making')
   } else if (avgTimePerMoveSeconds > 8) {
-    improvements.push("Practice to improve decision speed");
+    improvements.push('Practice to improve decision speed')
   }
 
   if (difficulty >= 12) {
-    strengths.push("Tackled challenging difficulty levels");
+    strengths.push('Tackled challenging difficulty levels')
   }
 
-  if (state.gameType === "complement-pairs" && accuracy >= 80) {
-    strengths.push("Strong mathematical complement skills");
+  if (state.gameType === 'complement-pairs' && accuracy >= 80) {
+    strengths.push('Strong mathematical complement skills')
   }
 
   // Fallback messages
   if (strengths.length === 0) {
-    strengths.push("Keep practicing to improve your skills!");
+    strengths.push('Keep practicing to improve your skills!')
   }
   if (improvements.length === 0) {
-    improvements.push(
-      "Great job! Continue challenging yourself with harder difficulties.",
-    );
+    improvements.push('Great job! Continue challenging yourself with harder difficulties.')
   }
 
   return {
@@ -279,41 +244,41 @@ export function getPerformanceAnalysis(state: MemoryPairsState): {
     strengths,
     improvements,
     starRating,
-  };
+  }
 }
 
 // Format time duration for display
 export function formatGameTime(milliseconds: number): string {
-  const seconds = Math.floor(milliseconds / 1000);
-  const minutes = Math.floor(seconds / 60);
-  const remainingSeconds = seconds % 60;
+  const seconds = Math.floor(milliseconds / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = seconds % 60
 
   if (minutes > 0) {
-    return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
+    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
   }
-  return `${remainingSeconds}s`;
+  return `${remainingSeconds}s`
 }
 
 // Get two-player game winner
 // @deprecated Use getMultiplayerWinner instead which supports N players
 export function getTwoPlayerWinner(
   state: MemoryPairsState,
-  activePlayers: Player[],
+  activePlayers: Player[]
 ): {
-  winner: Player | "tie";
-  winnerScore: number;
-  loserScore: number;
-  margin: number;
+  winner: Player | 'tie'
+  winnerScore: number
+  loserScore: number
+  margin: number
 } {
-  const { scores } = state;
-  const [player1, player2] = activePlayers;
+  const { scores } = state
+  const [player1, player2] = activePlayers
 
   if (!player1 || !player2) {
-    throw new Error("getTwoPlayerWinner requires at least 2 active players");
+    throw new Error('getTwoPlayerWinner requires at least 2 active players')
   }
 
-  const score1 = scores[player1] || 0;
-  const score2 = scores[player2] || 0;
+  const score1 = scores[player1] || 0
+  const score2 = scores[player2] || 0
 
   if (score1 > score2) {
     return {
@@ -321,50 +286,46 @@ export function getTwoPlayerWinner(
       winnerScore: score1,
       loserScore: score2,
       margin: score1 - score2,
-    };
+    }
   } else if (score2 > score1) {
     return {
       winner: player2,
       winnerScore: score2,
       loserScore: score1,
       margin: score2 - score1,
-    };
+    }
   } else {
     return {
-      winner: "tie",
+      winner: 'tie',
       winnerScore: score1,
       loserScore: score2,
       margin: 0,
-    };
+    }
   }
 }
 
 // Get multiplayer game winner (supports N players)
 export function getMultiplayerWinner(
   state: MemoryPairsState,
-  activePlayers: Player[],
+  activePlayers: Player[]
 ): {
-  winners: Player[];
-  winnerScore: number;
-  scores: { [playerId: string]: number };
-  isTie: boolean;
+  winners: Player[]
+  winnerScore: number
+  scores: { [playerId: string]: number }
+  isTie: boolean
 } {
-  const { scores } = state;
+  const { scores } = state
 
   // Find the highest score
-  const maxScore = Math.max(
-    ...activePlayers.map((playerId) => scores[playerId] || 0),
-  );
+  const maxScore = Math.max(...activePlayers.map((playerId) => scores[playerId] || 0))
 
   // Find all players with the highest score
-  const winners = activePlayers.filter(
-    (playerId) => (scores[playerId] || 0) === maxScore,
-  );
+  const winners = activePlayers.filter((playerId) => (scores[playerId] || 0) === maxScore)
 
   return {
     winners,
     winnerScore: maxScore,
     scores,
     isTie: winners.length > 1,
-  };
+  }
 }
diff --git a/apps/web/src/arcade-games/matching/utils/matchValidation.ts b/apps/web/src/arcade-games/matching/utils/matchValidation.ts
index 2b8041b6..f706b490 100644
--- a/apps/web/src/arcade-games/matching/utils/matchValidation.ts
+++ b/apps/web/src/arcade-games/matching/utils/matchValidation.ts
@@ -1,145 +1,138 @@
-import type { GameCard, MatchValidationResult } from "../types";
+import type { GameCard, MatchValidationResult } from '../types'
 
 // Validate abacus-numeral match (abacus card matches with number card of same value)
 export function validateAbacusNumeralMatch(
   card1: GameCard,
-  card2: GameCard,
+  card2: GameCard
 ): MatchValidationResult {
   // Both cards must have the same number
   if (card1.number !== card2.number) {
     return {
       isValid: false,
-      reason: "Numbers do not match",
-      type: "invalid",
-    };
+      reason: 'Numbers do not match',
+      type: 'invalid',
+    }
   }
 
   // Cards must be different types (one abacus, one number)
   if (card1.type === card2.type) {
     return {
       isValid: false,
-      reason: "Both cards are the same type",
-      type: "invalid",
-    };
+      reason: 'Both cards are the same type',
+      type: 'invalid',
+    }
   }
 
   // One must be abacus, one must be number
-  const hasAbacus = card1.type === "abacus" || card2.type === "abacus";
-  const hasNumber = card1.type === "number" || card2.type === "number";
+  const hasAbacus = card1.type === 'abacus' || card2.type === 'abacus'
+  const hasNumber = card1.type === 'number' || card2.type === 'number'
 
   if (!hasAbacus || !hasNumber) {
     return {
       isValid: false,
-      reason: "Must match abacus with number representation",
-      type: "invalid",
-    };
+      reason: 'Must match abacus with number representation',
+      type: 'invalid',
+    }
   }
 
   // Neither should be complement type for this game mode
-  if (card1.type === "complement" || card2.type === "complement") {
+  if (card1.type === 'complement' || card2.type === 'complement') {
     return {
       isValid: false,
-      reason: "Complement cards not valid in abacus-numeral mode",
-      type: "invalid",
-    };
+      reason: 'Complement cards not valid in abacus-numeral mode',
+      type: 'invalid',
+    }
   }
 
   return {
     isValid: true,
-    type: "abacus-numeral",
-  };
+    type: 'abacus-numeral',
+  }
 }
 
 // Validate complement match (two numbers that add up to target sum)
-export function validateComplementMatch(
-  card1: GameCard,
-  card2: GameCard,
-): MatchValidationResult {
+export function validateComplementMatch(card1: GameCard, card2: GameCard): MatchValidationResult {
   // Both cards must be complement type
-  if (card1.type !== "complement" || card2.type !== "complement") {
+  if (card1.type !== 'complement' || card2.type !== 'complement') {
     return {
       isValid: false,
-      reason: "Both cards must be complement type",
-      type: "invalid",
-    };
+      reason: 'Both cards must be complement type',
+      type: 'invalid',
+    }
   }
 
   // Both cards must have the same target sum
   if (card1.targetSum !== card2.targetSum) {
     return {
       isValid: false,
-      reason: "Cards have different target sums",
-      type: "invalid",
-    };
+      reason: 'Cards have different target sums',
+      type: 'invalid',
+    }
   }
 
   // Check if the numbers are actually complements
   if (!card1.complement || !card2.complement) {
     return {
       isValid: false,
-      reason: "Complement information missing",
-      type: "invalid",
-    };
+      reason: 'Complement information missing',
+      type: 'invalid',
+    }
   }
 
   // Verify the complement relationship
   if (card1.number !== card2.complement || card2.number !== card1.complement) {
     return {
       isValid: false,
-      reason: "Numbers are not complements of each other",
-      type: "invalid",
-    };
+      reason: 'Numbers are not complements of each other',
+      type: 'invalid',
+    }
   }
 
   // Verify the sum equals the target
-  const sum = card1.number + card2.number;
+  const sum = card1.number + card2.number
   if (sum !== card1.targetSum) {
     return {
       isValid: false,
       reason: `Sum ${sum} does not equal target ${card1.targetSum}`,
-      type: "invalid",
-    };
+      type: 'invalid',
+    }
   }
 
   return {
     isValid: true,
-    type: "complement",
-  };
+    type: 'complement',
+  }
 }
 
 // Main validation function that determines which validation to use
-export function validateMatch(
-  card1: GameCard,
-  card2: GameCard,
-): MatchValidationResult {
+export function validateMatch(card1: GameCard, card2: GameCard): MatchValidationResult {
   // Cannot match the same card with itself
   if (card1.id === card2.id) {
     return {
       isValid: false,
-      reason: "Cannot match card with itself",
-      type: "invalid",
-    };
+      reason: 'Cannot match card with itself',
+      type: 'invalid',
+    }
   }
 
   // Cannot match already matched cards
   if (card1.matched || card2.matched) {
     return {
       isValid: false,
-      reason: "Cannot match already matched cards",
-      type: "invalid",
-    };
+      reason: 'Cannot match already matched cards',
+      type: 'invalid',
+    }
   }
 
   // Determine which type of match to validate based on card types
-  const hasComplement =
-    card1.type === "complement" || card2.type === "complement";
+  const hasComplement = card1.type === 'complement' || card2.type === 'complement'
 
   if (hasComplement) {
     // If either card is complement type, use complement validation
-    return validateComplementMatch(card1, card2);
+    return validateComplementMatch(card1, card2)
   } else {
     // Otherwise, use abacus-numeral validation
-    return validateAbacusNumeralMatch(card1, card2);
+    return validateAbacusNumeralMatch(card1, card2)
   }
 }
 
@@ -147,40 +140,40 @@ export function validateMatch(
 export function canFlipCard(
   card: GameCard,
   flippedCards: GameCard[],
-  isProcessingMove: boolean,
+  isProcessingMove: boolean
 ): boolean {
   // Cannot flip if processing a move
-  if (isProcessingMove) return false;
+  if (isProcessingMove) return false
 
   // Cannot flip already matched cards
-  if (card.matched) return false;
+  if (card.matched) return false
 
   // Cannot flip if already flipped
-  if (flippedCards.some((c) => c.id === card.id)) return false;
+  if (flippedCards.some((c) => c.id === card.id)) return false
 
   // Cannot flip if two cards are already flipped
-  if (flippedCards.length >= 2) return false;
+  if (flippedCards.length >= 2) return false
 
-  return true;
+  return true
 }
 
 // Get hint for what kind of match the player should look for
 export function getMatchHint(card: GameCard): string {
   switch (card.type) {
-    case "abacus":
-      return `Find the number ${card.number}`;
+    case 'abacus':
+      return `Find the number ${card.number}`
 
-    case "number":
-      return `Find the abacus showing ${card.number}`;
+    case 'number':
+      return `Find the abacus showing ${card.number}`
 
-    case "complement":
+    case 'complement':
       if (card.complement !== undefined && card.targetSum !== undefined) {
-        return `Find ${card.complement} to make ${card.targetSum}`;
+        return `Find ${card.complement} to make ${card.targetSum}`
       }
-      return "Find the matching complement";
+      return 'Find the matching complement'
 
     default:
-      return "Find the matching card";
+      return 'Find the matching card'
   }
 }
 
@@ -188,13 +181,13 @@ export function getMatchHint(card: GameCard): string {
 export function calculateMatchScore(
   difficulty: number,
   timeForMatch: number,
-  isComplementMatch: boolean,
+  isComplementMatch: boolean
 ): number {
-  const baseScore = isComplementMatch ? 15 : 10; // Complement matches worth more
-  const difficultyMultiplier = difficulty / 6; // Scale with difficulty
-  const timeBonus = Math.max(0, (10000 - timeForMatch) / 1000); // Bonus for speed
+  const baseScore = isComplementMatch ? 15 : 10 // Complement matches worth more
+  const difficultyMultiplier = difficulty / 6 // Scale with difficulty
+  const timeBonus = Math.max(0, (10000 - timeForMatch) / 1000) // Bonus for speed
 
-  return Math.round(baseScore * difficultyMultiplier + timeBonus);
+  return Math.round(baseScore * difficultyMultiplier + timeBonus)
 }
 
 // Analyze game performance
@@ -202,29 +195,28 @@ export function analyzeGamePerformance(
   totalMoves: number,
   matchedPairs: number,
   totalPairs: number,
-  gameTime: number,
+  gameTime: number
 ): {
-  accuracy: number;
-  efficiency: number;
-  averageTimePerMove: number;
-  grade: "A" | "B" | "C" | "D" | "F";
+  accuracy: number
+  efficiency: number
+  averageTimePerMove: number
+  grade: 'A' | 'B' | 'C' | 'D' | 'F'
 } {
-  const accuracy = totalMoves > 0 ? (matchedPairs / totalMoves) * 100 : 0;
-  const efficiency =
-    totalPairs > 0 ? (matchedPairs / (totalPairs * 2)) * 100 : 0; // Ideal is 100% (each pair found in 2 moves)
-  const averageTimePerMove = totalMoves > 0 ? gameTime / totalMoves : 0;
+  const accuracy = totalMoves > 0 ? (matchedPairs / totalMoves) * 100 : 0
+  const efficiency = totalPairs > 0 ? (matchedPairs / (totalPairs * 2)) * 100 : 0 // Ideal is 100% (each pair found in 2 moves)
+  const averageTimePerMove = totalMoves > 0 ? gameTime / totalMoves : 0
 
   // Calculate grade based on accuracy and efficiency
-  let grade: "A" | "B" | "C" | "D" | "F" = "F";
-  if (accuracy >= 90 && efficiency >= 80) grade = "A";
-  else if (accuracy >= 80 && efficiency >= 70) grade = "B";
-  else if (accuracy >= 70 && efficiency >= 60) grade = "C";
-  else if (accuracy >= 60 && efficiency >= 50) grade = "D";
+  let grade: 'A' | 'B' | 'C' | 'D' | 'F' = 'F'
+  if (accuracy >= 90 && efficiency >= 80) grade = 'A'
+  else if (accuracy >= 80 && efficiency >= 70) grade = 'B'
+  else if (accuracy >= 70 && efficiency >= 60) grade = 'C'
+  else if (accuracy >= 60 && efficiency >= 50) grade = 'D'
 
   return {
     accuracy,
     efficiency,
     averageTimePerMove,
     grade,
-  };
+  }
 }
diff --git a/apps/web/src/arcade-games/memory-quiz/Provider.tsx b/apps/web/src/arcade-games/memory-quiz/Provider.tsx
index 68b35372..c3a98d9c 100644
--- a/apps/web/src/arcade-games/memory-quiz/Provider.tsx
+++ b/apps/web/src/arcade-games/memory-quiz/Provider.tsx
@@ -1,86 +1,73 @@
-"use client";
+'use client'
 
-import type { ReactNode } from "react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { useGameMode } from "@/contexts/GameModeContext";
-import { useArcadeSession } from "@/hooks/useArcadeSession";
-import { useRoomData, useUpdateGameConfig } from "@/hooks/useRoomData";
-import { useViewerId } from "@/hooks/useViewerId";
+import type { ReactNode } from 'react'
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { useGameMode } from '@/contexts/GameModeContext'
+import { useArcadeSession } from '@/hooks/useArcadeSession'
+import { useRoomData, useUpdateGameConfig } from '@/hooks/useRoomData'
+import { useViewerId } from '@/hooks/useViewerId'
 import {
   buildPlayerMetadata as buildPlayerMetadataUtil,
   buildPlayerOwnershipFromRoomData,
-} from "@/lib/arcade/player-ownership.client";
-import { TEAM_MOVE } from "@/lib/arcade/validation/types";
-import type { QuizCard, MemoryQuizState, MemoryQuizMove } from "./types";
+} from '@/lib/arcade/player-ownership.client'
+import { TEAM_MOVE } from '@/lib/arcade/validation/types'
+import type { QuizCard, MemoryQuizState, MemoryQuizMove } from './types'
 
-import type { GameMove } from "@/lib/arcade/validation";
+import type { GameMove } from '@/lib/arcade/validation'
 
 /**
  * Optimistic move application (client-side prediction)
  * The server will validate and send back the authoritative state
  */
-function applyMoveOptimistically(
-  state: MemoryQuizState,
-  move: GameMove,
-): MemoryQuizState {
-  const typedMove = move as MemoryQuizMove;
+function applyMoveOptimistically(state: MemoryQuizState, move: GameMove): MemoryQuizState {
+  const typedMove = move as MemoryQuizMove
   switch (typedMove.type) {
-    case "START_QUIZ": {
+    case 'START_QUIZ': {
       // Handle both client-generated moves (with quizCards) and server-generated moves (with numbers only)
-      const clientQuizCards = typedMove.data.quizCards;
-      const serverNumbers = typedMove.data.numbers;
+      const clientQuizCards = typedMove.data.quizCards
+      const serverNumbers = typedMove.data.numbers
 
-      let quizCards: QuizCard[];
-      let correctAnswers: number[];
+      let quizCards: QuizCard[]
+      let correctAnswers: number[]
 
       if (clientQuizCards) {
         // Client-side optimistic update: use the full quizCards with React components
-        quizCards = clientQuizCards;
-        correctAnswers = clientQuizCards.map((card: QuizCard) => card.number);
+        quizCards = clientQuizCards
+        correctAnswers = clientQuizCards.map((card: QuizCard) => card.number)
       } else if (serverNumbers) {
         // Server update: create minimal quizCards from numbers
         quizCards = serverNumbers.map((number: number) => ({
           number,
           svgComponent: null,
           element: null,
-        }));
-        correctAnswers = serverNumbers;
+        }))
+        correctAnswers = serverNumbers
       } else {
-        quizCards = state.quizCards;
-        correctAnswers = state.correctAnswers;
+        quizCards = state.quizCards
+        correctAnswers = state.correctAnswers
       }
 
-      const cardCount = quizCards.length;
+      const cardCount = quizCards.length
 
       // Initialize player scores for all active players (by userId)
-      const activePlayers = typedMove.data.activePlayers || [];
-      const playerMetadata = typedMove.data.playerMetadata || {};
+      const activePlayers = typedMove.data.activePlayers || []
+      const playerMetadata = typedMove.data.playerMetadata || {}
 
-      const uniqueUserIds = new Set<string>();
+      const uniqueUserIds = new Set<string>()
       for (const playerId of activePlayers) {
-        const metadata = playerMetadata[playerId];
+        const metadata = playerMetadata[playerId]
         if (metadata?.userId) {
-          uniqueUserIds.add(metadata.userId);
+          uniqueUserIds.add(metadata.userId)
         }
       }
 
       const playerScores = Array.from(uniqueUserIds).reduce(
-        (
-          acc: Record<string, { correct: number; incorrect: number }>,
-          userId: string,
-        ) => {
-          acc[userId] = { correct: 0, incorrect: 0 };
-          return acc;
+        (acc: Record<string, { correct: number; incorrect: number }>, userId: string) => {
+          acc[userId] = { correct: 0, incorrect: 0 }
+          return acc
         },
-        {},
-      );
+        {}
+      )
 
       return {
         ...state,
@@ -89,156 +76,156 @@ function applyMoveOptimistically(
         currentCardIndex: 0,
         foundNumbers: [],
         guessesRemaining: cardCount + Math.floor(cardCount / 2),
-        gamePhase: "display",
+        gamePhase: 'display',
         incorrectGuesses: 0,
-        currentInput: "",
+        currentInput: '',
         wrongGuessAnimations: [],
         prefixAcceptanceTimeout: null,
         activePlayers,
         playerMetadata,
         playerScores,
         numberFoundBy: {},
-      };
+      }
     }
 
-    case "NEXT_CARD":
+    case 'NEXT_CARD':
       return {
         ...state,
         currentCardIndex: state.currentCardIndex + 1,
-      };
+      }
 
-    case "SHOW_INPUT_PHASE":
+    case 'SHOW_INPUT_PHASE':
       return {
         ...state,
-        gamePhase: "input",
-      };
+        gamePhase: 'input',
+      }
 
-    case "ACCEPT_NUMBER": {
-      const playerScores = state.playerScores || {};
-      const foundNumbers = state.foundNumbers || [];
-      const numberFoundBy = state.numberFoundBy || {};
+    case 'ACCEPT_NUMBER': {
+      const playerScores = state.playerScores || {}
+      const foundNumbers = state.foundNumbers || []
+      const numberFoundBy = state.numberFoundBy || {}
 
-      const newPlayerScores = { ...playerScores };
-      const newNumberFoundBy = { ...numberFoundBy };
+      const newPlayerScores = { ...playerScores }
+      const newNumberFoundBy = { ...numberFoundBy }
 
       if (typedMove.userId) {
         const currentScore = newPlayerScores[typedMove.userId] || {
           correct: 0,
           incorrect: 0,
-        };
+        }
         newPlayerScores[typedMove.userId] = {
           ...currentScore,
           correct: currentScore.correct + 1,
-        };
-        newNumberFoundBy[typedMove.data.number] = typedMove.userId;
+        }
+        newNumberFoundBy[typedMove.data.number] = typedMove.userId
       }
 
       return {
         ...state,
         foundNumbers: [...foundNumbers, typedMove.data.number],
-        currentInput: "",
+        currentInput: '',
         playerScores: newPlayerScores,
         numberFoundBy: newNumberFoundBy,
-      };
+      }
     }
 
-    case "REJECT_NUMBER": {
-      const playerScores = state.playerScores || {};
-      const newPlayerScores = { ...playerScores };
+    case 'REJECT_NUMBER': {
+      const playerScores = state.playerScores || {}
+      const newPlayerScores = { ...playerScores }
 
       if (typedMove.userId) {
         const currentScore = newPlayerScores[typedMove.userId] || {
           correct: 0,
           incorrect: 0,
-        };
+        }
         newPlayerScores[typedMove.userId] = {
           ...currentScore,
           incorrect: currentScore.incorrect + 1,
-        };
+        }
       }
 
       return {
         ...state,
         guessesRemaining: state.guessesRemaining - 1,
         incorrectGuesses: state.incorrectGuesses + 1,
-        currentInput: "",
+        currentInput: '',
         playerScores: newPlayerScores,
-      };
+      }
     }
 
-    case "SET_INPUT":
+    case 'SET_INPUT':
       return {
         ...state,
         currentInput: typedMove.data.input,
-      };
+      }
 
-    case "SHOW_RESULTS":
+    case 'SHOW_RESULTS':
       return {
         ...state,
-        gamePhase: "results",
-      };
+        gamePhase: 'results',
+      }
 
-    case "RESET_QUIZ":
+    case 'RESET_QUIZ':
       return {
         ...state,
-        gamePhase: "setup",
+        gamePhase: 'setup',
         quizCards: [],
         correctAnswers: [],
         currentCardIndex: 0,
         foundNumbers: [],
         guessesRemaining: 0,
-        currentInput: "",
+        currentInput: '',
         incorrectGuesses: 0,
         wrongGuessAnimations: [],
         prefixAcceptanceTimeout: null,
         finishButtonsBound: false,
-      };
+      }
 
-    case "SET_CONFIG": {
-      const { field, value } = typedMove.data;
+    case 'SET_CONFIG': {
+      const { field, value } = typedMove.data
       return {
         ...state,
         [field]: value,
-      };
+      }
     }
 
     default:
-      return state;
+      return state
   }
 }
 
 // Context interface
 export interface MemoryQuizContextValue {
-  state: MemoryQuizState;
-  isGameActive: boolean;
-  isRoomCreator: boolean;
-  resetGame: () => void;
-  exitSession?: () => void;
-  startQuiz: (quizCards: QuizCard[]) => void;
-  nextCard: () => void;
-  showInputPhase: () => void;
-  acceptNumber: (number: number) => void;
-  rejectNumber: () => void;
-  setInput: (input: string) => void;
-  showResults: () => void;
+  state: MemoryQuizState
+  isGameActive: boolean
+  isRoomCreator: boolean
+  resetGame: () => void
+  exitSession?: () => void
+  startQuiz: (quizCards: QuizCard[]) => void
+  nextCard: () => void
+  showInputPhase: () => void
+  acceptNumber: (number: number) => void
+  rejectNumber: () => void
+  setInput: (input: string) => void
+  showResults: () => void
   setConfig: (
-    field: "selectedCount" | "displayTime" | "selectedDifficulty" | "playMode",
-    value: unknown,
-  ) => void;
+    field: 'selectedCount' | 'displayTime' | 'selectedDifficulty' | 'playMode',
+    value: unknown
+  ) => void
   // Legacy dispatch for UI-only actions (to be migrated to local state)
-  dispatch: (action: unknown) => void;
+  dispatch: (action: unknown) => void
 }
 
 // Create context
-const MemoryQuizContext = createContext<MemoryQuizContextValue | null>(null);
+const MemoryQuizContext = createContext<MemoryQuizContextValue | null>(null)
 
 // Hook to use the context
 export function useMemoryQuiz(): MemoryQuizContextValue {
-  const context = useContext(MemoryQuizContext);
+  const context = useContext(MemoryQuizContext)
   if (!context) {
-    throw new Error("useMemoryQuiz must be used within MemoryQuizProvider");
+    throw new Error('useMemoryQuiz must be used within MemoryQuizProvider')
   }
-  return context;
+  return context
 }
 
 /**
@@ -248,27 +235,21 @@ export function useMemoryQuiz(): MemoryQuizContextValue {
  * All state changes are sent as moves and validated on the server.
  */
 export function MemoryQuizProvider({ children }: { children: ReactNode }) {
-  const { data: viewerId } = useViewerId();
-  const { roomData } = useRoomData();
-  const { activePlayers: activePlayerIds, players } = useGameMode();
-  const { mutate: updateGameConfig } = useUpdateGameConfig();
+  const { data: viewerId } = useViewerId()
+  const { roomData } = useRoomData()
+  const { activePlayers: activePlayerIds, players } = useGameMode()
+  const { mutate: updateGameConfig } = useUpdateGameConfig()
 
-  const activePlayers = Array.from(activePlayerIds);
+  const activePlayers = Array.from(activePlayerIds)
 
   // LOCAL-ONLY state for current input (not synced over network)
-  const [localCurrentInput, setLocalCurrentInput] = useState("");
+  const [localCurrentInput, setLocalCurrentInput] = useState('')
 
   // Merge saved game config from room with default initial state
   const mergedInitialState = useMemo(() => {
-    const gameConfig = roomData?.gameConfig as
-      | Record<string, unknown>
-      | null
-      | undefined;
+    const gameConfig = roomData?.gameConfig as Record<string, unknown> | null | undefined
 
-    const savedConfig = gameConfig?.["memory-quiz"] as
-      | Record<string, unknown>
-      | null
-      | undefined;
+    const savedConfig = gameConfig?.['memory-quiz'] as Record<string, unknown> | null | undefined
 
     // Default initial state
     const defaultState: MemoryQuizState = {
@@ -278,290 +259,279 @@ export function MemoryQuizProvider({ children }: { children: ReactNode }) {
       currentCardIndex: 0,
       displayTime: 2.0,
       selectedCount: 5,
-      selectedDifficulty: "easy",
+      selectedDifficulty: 'easy',
       foundNumbers: [],
       guessesRemaining: 0,
-      currentInput: "",
+      currentInput: '',
       incorrectGuesses: 0,
       activePlayers: [],
       playerMetadata: {},
       playerScores: {},
-      playMode: "cooperative",
+      playMode: 'cooperative',
       numberFoundBy: {},
-      gamePhase: "setup",
+      gamePhase: 'setup',
       prefixAcceptanceTimeout: null,
       finishButtonsBound: false,
       wrongGuessAnimations: [],
       hasPhysicalKeyboard: null,
       testingMode: false,
       showOnScreenKeyboard: false,
-    };
+    }
 
     if (!savedConfig) {
-      return defaultState;
+      return defaultState
     }
 
     return {
       ...defaultState,
       selectedCount:
-        (savedConfig.selectedCount as 2 | 5 | 8 | 12 | 15) ??
-        defaultState.selectedCount,
-      displayTime:
-        (savedConfig.displayTime as number) ?? defaultState.displayTime,
+        (savedConfig.selectedCount as 2 | 5 | 8 | 12 | 15) ?? defaultState.selectedCount,
+      displayTime: (savedConfig.displayTime as number) ?? defaultState.displayTime,
       selectedDifficulty:
-        (savedConfig.selectedDifficulty as MemoryQuizState["selectedDifficulty"]) ??
+        (savedConfig.selectedDifficulty as MemoryQuizState['selectedDifficulty']) ??
         defaultState.selectedDifficulty,
-      playMode:
-        (savedConfig.playMode as "cooperative" | "competitive") ??
-        defaultState.playMode,
-    };
-  }, [roomData?.gameConfig]);
+      playMode: (savedConfig.playMode as 'cooperative' | 'competitive') ?? defaultState.playMode,
+    }
+  }, [roomData?.gameConfig])
 
   // Arcade session integration
   const { state, sendMove, exitSession } = useArcadeSession<MemoryQuizState>({
-    userId: viewerId || "",
+    userId: viewerId || '',
     roomId: roomData?.id || undefined,
     initialState: mergedInitialState,
     applyMove: applyMoveOptimistically,
-  });
+  })
 
   // Clear local input when game phase changes
   useEffect(() => {
-    if (state.gamePhase !== "input") {
-      setLocalCurrentInput("");
+    if (state.gamePhase !== 'input') {
+      setLocalCurrentInput('')
     }
-  }, [state.gamePhase]);
+  }, [state.gamePhase])
 
   // Cleanup timeouts on unmount
   useEffect(() => {
     return () => {
       if (state.prefixAcceptanceTimeout) {
-        clearTimeout(state.prefixAcceptanceTimeout);
+        clearTimeout(state.prefixAcceptanceTimeout)
       }
-    };
-  }, [state.prefixAcceptanceTimeout]);
+    }
+  }, [state.prefixAcceptanceTimeout])
 
   // Detect state corruption
   const hasStateCorruption =
     !state.quizCards ||
     !state.correctAnswers ||
     !state.foundNumbers ||
-    !Array.isArray(state.quizCards);
+    !Array.isArray(state.quizCards)
 
   // Computed values
-  const isGameActive =
-    state.gamePhase === "display" || state.gamePhase === "input";
+  const isGameActive = state.gamePhase === 'display' || state.gamePhase === 'input'
 
   // Build player metadata
   const buildPlayerMetadata = useCallback(() => {
-    const playerOwnership = buildPlayerOwnershipFromRoomData(roomData);
+    const playerOwnership = buildPlayerOwnershipFromRoomData(roomData)
     const metadata = buildPlayerMetadataUtil(
       activePlayers,
       playerOwnership,
       players,
-      viewerId || undefined,
-    );
-    return metadata;
-  }, [activePlayers, players, roomData, viewerId]);
+      viewerId || undefined
+    )
+    return metadata
+  }, [activePlayers, players, roomData, viewerId])
 
   // Action creators
   const startQuiz = useCallback(
     (quizCards: QuizCard[]) => {
-      const numbers = quizCards.map((card) => card.number);
-      const playerMetadata = buildPlayerMetadata();
+      const numbers = quizCards.map((card) => card.number)
+      const playerMetadata = buildPlayerMetadata()
 
       sendMove({
-        type: "START_QUIZ",
+        type: 'START_QUIZ',
         playerId: TEAM_MOVE,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: {
           numbers,
           quizCards,
           activePlayers,
           playerMetadata,
         },
-      });
+      })
     },
-    [viewerId, sendMove, activePlayers, buildPlayerMetadata],
-  );
+    [viewerId, sendMove, activePlayers, buildPlayerMetadata]
+  )
 
   const nextCard = useCallback(() => {
     sendMove({
-      type: "NEXT_CARD",
+      type: 'NEXT_CARD',
       playerId: TEAM_MOVE,
-      userId: viewerId || "",
+      userId: viewerId || '',
       data: {},
-    });
-  }, [viewerId, sendMove]);
+    })
+  }, [viewerId, sendMove])
 
   const showInputPhase = useCallback(() => {
     sendMove({
-      type: "SHOW_INPUT_PHASE",
+      type: 'SHOW_INPUT_PHASE',
       playerId: TEAM_MOVE,
-      userId: viewerId || "",
+      userId: viewerId || '',
       data: {},
-    });
-  }, [viewerId, sendMove]);
+    })
+  }, [viewerId, sendMove])
 
   const acceptNumber = useCallback(
     (number: number) => {
-      setLocalCurrentInput("");
+      setLocalCurrentInput('')
       sendMove({
-        type: "ACCEPT_NUMBER",
+        type: 'ACCEPT_NUMBER',
         playerId: TEAM_MOVE,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: { number },
-      });
+      })
     },
-    [viewerId, sendMove],
-  );
+    [viewerId, sendMove]
+  )
 
   const rejectNumber = useCallback(() => {
-    setLocalCurrentInput("");
+    setLocalCurrentInput('')
     sendMove({
-      type: "REJECT_NUMBER",
+      type: 'REJECT_NUMBER',
       playerId: TEAM_MOVE,
-      userId: viewerId || "",
+      userId: viewerId || '',
       data: {},
-    });
-  }, [viewerId, sendMove]);
+    })
+  }, [viewerId, sendMove])
 
   const setInput = useCallback((input: string) => {
     // LOCAL ONLY - no network sync for instant typing
-    setLocalCurrentInput(input);
-  }, []);
+    setLocalCurrentInput(input)
+  }, [])
 
   const showResults = useCallback(() => {
     sendMove({
-      type: "SHOW_RESULTS",
+      type: 'SHOW_RESULTS',
       playerId: TEAM_MOVE,
-      userId: viewerId || "",
+      userId: viewerId || '',
       data: {},
-    });
-  }, [viewerId, sendMove]);
+    })
+  }, [viewerId, sendMove])
 
   const resetGame = useCallback(() => {
     sendMove({
-      type: "RESET_QUIZ",
+      type: 'RESET_QUIZ',
       playerId: TEAM_MOVE,
-      userId: viewerId || "",
+      userId: viewerId || '',
       data: {},
-    });
-  }, [viewerId, sendMove]);
+    })
+  }, [viewerId, sendMove])
 
   const setConfig = useCallback(
     (
-      field:
-        | "selectedCount"
-        | "displayTime"
-        | "selectedDifficulty"
-        | "playMode",
-      value: unknown,
+      field: 'selectedCount' | 'displayTime' | 'selectedDifficulty' | 'playMode',
+      value: unknown
     ) => {
       sendMove({
-        type: "SET_CONFIG",
+        type: 'SET_CONFIG',
         playerId: TEAM_MOVE,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: { field, value },
-      });
+      })
 
       // Save to room config for persistence
       if (roomData?.id) {
-        const currentGameConfig =
-          (roomData.gameConfig as Record<string, unknown>) || {};
+        const currentGameConfig = (roomData.gameConfig as Record<string, unknown>) || {}
         const currentMemoryQuizConfig =
-          (currentGameConfig["memory-quiz"] as Record<string, unknown>) || {};
+          (currentGameConfig['memory-quiz'] as Record<string, unknown>) || {}
 
         updateGameConfig({
           roomId: roomData.id,
           gameConfig: {
             ...currentGameConfig,
-            "memory-quiz": {
+            'memory-quiz': {
               ...currentMemoryQuizConfig,
               [field]: value,
             },
           },
-        });
+        })
       }
     },
-    [viewerId, sendMove, roomData?.id, roomData?.gameConfig, updateGameConfig],
-  );
+    [viewerId, sendMove, roomData?.id, roomData?.gameConfig, updateGameConfig]
+  )
 
   // Legacy dispatch stub for UI-only actions
   // TODO: Migrate these to local component state
   const dispatch = useCallback((action: unknown) => {
     console.warn(
-      "[MemoryQuizProvider] dispatch() is deprecated for UI-only actions. These should be migrated to local component state:",
-      action,
-    );
+      '[MemoryQuizProvider] dispatch() is deprecated for UI-only actions. These should be migrated to local component state:',
+      action
+    )
     // No-op - UI-only state changes should be handled locally
-  }, []);
+  }, [])
 
   // Merge network state with local input
   const mergedState = {
     ...state,
     currentInput: localCurrentInput,
-  };
+  }
 
   // Determine if current user is room creator
   const isRoomCreator =
-    roomData?.members.find((member) => member.userId === viewerId)?.isCreator ||
-    false;
+    roomData?.members.find((member) => member.userId === viewerId)?.isCreator || false
 
   // Handle state corruption
   if (hasStateCorruption) {
     return (
       <div
         style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "40px",
-          textAlign: "center",
-          minHeight: "400px",
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '40px',
+          textAlign: 'center',
+          minHeight: '400px',
         }}
       >
-        <div style={{ fontSize: "48px", marginBottom: "20px" }}>⚠️</div>
+        <div style={{ fontSize: '48px', marginBottom: '20px' }}>⚠️</div>
         <h2
           style={{
-            fontSize: "24px",
-            fontWeight: "bold",
-            marginBottom: "12px",
-            color: "#dc2626",
+            fontSize: '24px',
+            fontWeight: 'bold',
+            marginBottom: '12px',
+            color: '#dc2626',
           }}
         >
           Game State Mismatch
         </h2>
         <p
           style={{
-            fontSize: "16px",
-            color: "#6b7280",
-            marginBottom: "24px",
-            maxWidth: "500px",
+            fontSize: '16px',
+            color: '#6b7280',
+            marginBottom: '24px',
+            maxWidth: '500px',
           }}
         >
-          There's a mismatch between game types in this room. This usually
-          happens when room members are playing different games.
+          There's a mismatch between game types in this room. This usually happens when room members
+          are playing different games.
         </p>
         <button
           type="button"
           onClick={() => window.location.reload()}
           style={{
-            padding: "10px 20px",
-            background: "#3b82f6",
-            color: "white",
-            border: "none",
-            borderRadius: "6px",
-            fontSize: "14px",
-            fontWeight: "600",
-            cursor: "pointer",
+            padding: '10px 20px',
+            background: '#3b82f6',
+            color: 'white',
+            border: 'none',
+            borderRadius: '6px',
+            fontSize: '14px',
+            fontWeight: '600',
+            cursor: 'pointer',
           }}
         >
           Refresh Page
         </button>
       </div>
-    );
+    )
   }
 
   const contextValue: MemoryQuizContextValue = {
@@ -579,11 +549,7 @@ export function MemoryQuizProvider({ children }: { children: ReactNode }) {
     showResults,
     setConfig,
     dispatch,
-  };
+  }
 
-  return (
-    <MemoryQuizContext.Provider value={contextValue}>
-      {children}
-    </MemoryQuizContext.Provider>
-  );
+  return <MemoryQuizContext.Provider value={contextValue}>{children}</MemoryQuizContext.Provider>
 }
diff --git a/apps/web/src/arcade-games/memory-quiz/Validator.ts b/apps/web/src/arcade-games/memory-quiz/Validator.ts
index 8ad3fb7d..87a773f0 100644
--- a/apps/web/src/arcade-games/memory-quiz/Validator.ts
+++ b/apps/web/src/arcade-games/memory-quiz/Validator.ts
@@ -3,84 +3,75 @@
  * Validates all game moves and state transitions
  */
 
-import type { GameValidator, ValidationResult } from "@/lib/arcade/game-sdk";
+import type { GameValidator, ValidationResult } from '@/lib/arcade/game-sdk'
 import type {
   MemoryQuizConfig,
   MemoryQuizState,
   MemoryQuizMove,
   MemoryQuizSetConfigMove,
-} from "./types";
+} from './types'
 
-export class MemoryQuizGameValidator
-  implements GameValidator<MemoryQuizState, MemoryQuizMove>
-{
+export class MemoryQuizGameValidator implements GameValidator<MemoryQuizState, MemoryQuizMove> {
   validateMove(
     state: MemoryQuizState,
     move: MemoryQuizMove,
-    context?: { userId?: string; playerOwnership?: Record<string, string> },
+    context?: { userId?: string; playerOwnership?: Record<string, string> }
   ): ValidationResult {
     switch (move.type) {
-      case "START_QUIZ":
-        return this.validateStartQuiz(state, move.data);
+      case 'START_QUIZ':
+        return this.validateStartQuiz(state, move.data)
 
-      case "NEXT_CARD":
-        return this.validateNextCard(state);
+      case 'NEXT_CARD':
+        return this.validateNextCard(state)
 
-      case "SHOW_INPUT_PHASE":
-        return this.validateShowInputPhase(state);
+      case 'SHOW_INPUT_PHASE':
+        return this.validateShowInputPhase(state)
 
-      case "ACCEPT_NUMBER":
-        return this.validateAcceptNumber(state, move.data.number, move.userId);
+      case 'ACCEPT_NUMBER':
+        return this.validateAcceptNumber(state, move.data.number, move.userId)
 
-      case "REJECT_NUMBER":
-        return this.validateRejectNumber(state, move.userId);
+      case 'REJECT_NUMBER':
+        return this.validateRejectNumber(state, move.userId)
 
-      case "SET_INPUT":
-        return this.validateSetInput(state, move.data.input);
+      case 'SET_INPUT':
+        return this.validateSetInput(state, move.data.input)
 
-      case "SHOW_RESULTS":
-        return this.validateShowResults(state);
+      case 'SHOW_RESULTS':
+        return this.validateShowResults(state)
 
-      case "RESET_QUIZ":
-        return this.validateResetQuiz(state);
+      case 'RESET_QUIZ':
+        return this.validateResetQuiz(state)
 
-      case "SET_CONFIG": {
-        const configMove = move as MemoryQuizSetConfigMove;
-        return this.validateSetConfig(
-          state,
-          configMove.data.field,
-          configMove.data.value,
-        );
+      case 'SET_CONFIG': {
+        const configMove = move as MemoryQuizSetConfigMove
+        return this.validateSetConfig(state, configMove.data.field, configMove.data.value)
       }
 
       default:
         return {
           valid: false,
           error: `Unknown move type: ${(move as any).type}`,
-        };
+        }
     }
   }
 
-  private validateStartQuiz(
-    state: MemoryQuizState,
-    data: any,
-  ): ValidationResult {
+  private validateStartQuiz(state: MemoryQuizState, data: any): ValidationResult {
     // Can start quiz from setup or results phase
-    if (state.gamePhase !== "setup" && state.gamePhase !== "results") {
+    if (state.gamePhase !== 'setup' && state.gamePhase !== 'results') {
       return {
         valid: false,
-        error: "Can only start quiz from setup or results phase",
-      };
+        error: 'Can only start quiz from setup or results phase',
+      }
     }
 
     // Accept either numbers array (from network) or quizCards (from client)
-    const numbers = data.numbers || data.quizCards?.map((c: any) => c.number);
+    const numbers = data.numbers || data.quizCards?.map((c: any) => c.number)
 
     if (!numbers || numbers.length === 0) {
       return {
         valid: false,
-        error: "Quiz numbers are required",
-      };
+        error: 'Quiz numbers are required',
+      }
     }
 
     // Create minimal quiz cards from numbers (server-side doesn't need React components)
@@ -88,28 +79,25 @@ export class MemoryQuizGameValidator
       number,
       svgComponent: null, // Not needed server-side
       element: null,
-    }));
+    }))
 
     // Extract multiplayer data from move
-    const activePlayers = data.activePlayers || state.activePlayers || [];
-    const playerMetadata = data.playerMetadata || state.playerMetadata || {};
+    const activePlayers = data.activePlayers || state.activePlayers || []
+    const playerMetadata = data.playerMetadata || state.playerMetadata || {}
 
     // Initialize player scores for all active players (by userId)
-    const uniqueUserIds = new Set<string>();
+    const uniqueUserIds = new Set<string>()
     for (const playerId of activePlayers) {
-      const metadata = playerMetadata[playerId];
+      const metadata = playerMetadata[playerId]
       if (metadata?.userId) {
-        uniqueUserIds.add(metadata.userId);
+        uniqueUserIds.add(metadata.userId)
       }
     }
 
-    const playerScores = Array.from(uniqueUserIds).reduce(
-      (acc: any, userId: string) => {
-        acc[userId] = { correct: 0, incorrect: 0 };
-        return acc;
-      },
-      {},
-    );
+    const playerScores = Array.from(uniqueUserIds).reduce((acc: any, userId: string) => {
+      acc[userId] = { correct: 0, incorrect: 0 }
+      return acc
+    }, {})
 
     const newState: MemoryQuizState = {
       ...state,
@@ -118,9 +106,9 @@ export class MemoryQuizGameValidator
       currentCardIndex: 0,
       foundNumbers: [],
       guessesRemaining: numbers.length + Math.floor(numbers.length / 2),
-      gamePhase: "display",
+      gamePhase: 'display',
       incorrectGuesses: 0,
-      currentInput: "",
+      currentInput: '',
       wrongGuessAnimations: [],
       prefixAcceptanceTimeout: null,
       // Multiplayer state
@@ -128,32 +116,32 @@ export class MemoryQuizGameValidator
       playerMetadata,
       playerScores,
       numberFoundBy: {},
-    };
+    }
 
     return {
       valid: true,
       newState,
-    };
+    }
   }
 
   private validateNextCard(state: MemoryQuizState): ValidationResult {
     // Must be in display phase
-    if (state.gamePhase !== "display") {
+    if (state.gamePhase !== 'display') {
       return {
         valid: false,
-        error: "NEXT_CARD only valid in display phase",
-      };
+        error: 'NEXT_CARD only valid in display phase',
+      }
     }
 
     const newState: MemoryQuizState = {
       ...state,
       currentCardIndex: state.currentCardIndex + 1,
-    };
+    }
 
     return {
       valid: true,
       newState,
-    };
+    }
   }
 
   private validateShowInputPhase(state: MemoryQuizState): ValidationResult {
@@ -161,249 +149,243 @@ export class MemoryQuizGameValidator
     if (state.currentCardIndex < state.quizCards.length) {
       return {
         valid: false,
-        error: "All cards must be shown before input phase",
-      };
+        error: 'All cards must be shown before input phase',
+      }
     }
 
     const newState: MemoryQuizState = {
       ...state,
-      gamePhase: "input",
-    };
+      gamePhase: 'input',
+    }
 
     return {
       valid: true,
       newState,
-    };
+    }
   }
 
   private validateAcceptNumber(
     state: MemoryQuizState,
     number: number,
-    userId?: string,
+    userId?: string
   ): ValidationResult {
     // Must be in input phase
-    if (state.gamePhase !== "input") {
+    if (state.gamePhase !== 'input') {
       return {
         valid: false,
-        error: "ACCEPT_NUMBER only valid in input phase",
-      };
+        error: 'ACCEPT_NUMBER only valid in input phase',
+      }
     }
 
     // Number must be in correct answers
     if (!state.correctAnswers.includes(number)) {
       return {
         valid: false,
-        error: "Number is not a correct answer",
-      };
+        error: 'Number is not a correct answer',
+      }
     }
 
     // Number must not be already found
     if (state.foundNumbers.includes(number)) {
       return {
         valid: false,
-        error: "Number already found",
-      };
+        error: 'Number already found',
+      }
     }
 
     // Update player scores (track by userId)
-    const playerScores = state.playerScores || {};
-    const newPlayerScores = { ...playerScores };
-    const numberFoundBy = state.numberFoundBy || {};
-    const newNumberFoundBy = { ...numberFoundBy };
+    const playerScores = state.playerScores || {}
+    const newPlayerScores = { ...playerScores }
+    const numberFoundBy = state.numberFoundBy || {}
+    const newNumberFoundBy = { ...numberFoundBy }
 
     if (userId) {
       const currentScore = newPlayerScores[userId] || {
         correct: 0,
         incorrect: 0,
-      };
+      }
       newPlayerScores[userId] = {
         ...currentScore,
         correct: currentScore.correct + 1,
-      };
+      }
       // Track who found this number
-      newNumberFoundBy[number] = userId;
+      newNumberFoundBy[number] = userId
     }
 
     const newState: MemoryQuizState = {
       ...state,
       foundNumbers: [...state.foundNumbers, number],
-      currentInput: "",
+      currentInput: '',
       playerScores: newPlayerScores,
       numberFoundBy: newNumberFoundBy,
-    };
+    }
 
     return {
       valid: true,
       newState,
-    };
+    }
   }
 
-  private validateRejectNumber(
-    state: MemoryQuizState,
-    userId?: string,
-  ): ValidationResult {
+  private validateRejectNumber(state: MemoryQuizState, userId?: string): ValidationResult {
     // Must be in input phase
-    if (state.gamePhase !== "input") {
+    if (state.gamePhase !== 'input') {
       return {
         valid: false,
-        error: "REJECT_NUMBER only valid in input phase",
-      };
+        error: 'REJECT_NUMBER only valid in input phase',
+      }
     }
 
     // Must have guesses remaining
     if (state.guessesRemaining <= 0) {
       return {
         valid: false,
-        error: "No guesses remaining",
-      };
+        error: 'No guesses remaining',
+      }
     }
 
     // Update player scores (track by userId)
-    const playerScores = state.playerScores || {};
-    const newPlayerScores = { ...playerScores };
+    const playerScores = state.playerScores || {}
+    const newPlayerScores = { ...playerScores }
     if (userId) {
       const currentScore = newPlayerScores[userId] || {
         correct: 0,
         incorrect: 0,
-      };
+      }
       newPlayerScores[userId] = {
         ...currentScore,
         incorrect: currentScore.incorrect + 1,
-      };
+      }
     }
 
     const newState: MemoryQuizState = {
       ...state,
       guessesRemaining: state.guessesRemaining - 1,
       incorrectGuesses: state.incorrectGuesses + 1,
-      currentInput: "",
+      currentInput: '',
       playerScores: newPlayerScores,
-    };
+    }
 
     return {
       valid: true,
       newState,
-    };
+    }
   }
 
-  private validateSetInput(
-    state: MemoryQuizState,
-    input: string,
-  ): ValidationResult {
+  private validateSetInput(state: MemoryQuizState, input: string): ValidationResult {
     // Must be in input phase
-    if (state.gamePhase !== "input") {
+    if (state.gamePhase !== 'input') {
       return {
         valid: false,
-        error: "SET_INPUT only valid in input phase",
-      };
+        error: 'SET_INPUT only valid in input phase',
+      }
     }
 
     // Input must be numeric
     if (input && !/^\d+$/.test(input)) {
       return {
         valid: false,
-        error: "Input must be numeric",
-      };
+        error: 'Input must be numeric',
+      }
     }
 
     const newState: MemoryQuizState = {
       ...state,
       currentInput: input,
-    };
+    }
 
     return {
       valid: true,
       newState,
-    };
+    }
   }
 
   private validateShowResults(state: MemoryQuizState): ValidationResult {
     // Can show results from input phase
-    if (state.gamePhase !== "input") {
+    if (state.gamePhase !== 'input') {
       return {
         valid: false,
-        error: "SHOW_RESULTS only valid from input phase",
-      };
+        error: 'SHOW_RESULTS only valid from input phase',
+      }
     }
 
     const newState: MemoryQuizState = {
       ...state,
-      gamePhase: "results",
-    };
+      gamePhase: 'results',
+    }
 
     return {
       valid: true,
       newState,
-    };
+    }
   }
 
   private validateResetQuiz(state: MemoryQuizState): ValidationResult {
     // Can reset from any phase
     const newState: MemoryQuizState = {
       ...state,
-      gamePhase: "setup",
+      gamePhase: 'setup',
       quizCards: [],
       correctAnswers: [],
       currentCardIndex: 0,
       foundNumbers: [],
       guessesRemaining: 0,
-      currentInput: "",
+      currentInput: '',
       incorrectGuesses: 0,
       wrongGuessAnimations: [],
       prefixAcceptanceTimeout: null,
       finishButtonsBound: false,
-    };
+    }
 
     return {
       valid: true,
       newState,
-    };
+    }
   }
 
   private validateSetConfig(
     state: MemoryQuizState,
-    field: "selectedCount" | "displayTime" | "selectedDifficulty" | "playMode",
-    value: any,
+    field: 'selectedCount' | 'displayTime' | 'selectedDifficulty' | 'playMode',
+    value: any
   ): ValidationResult {
     // Can only change config during setup phase
-    if (state.gamePhase !== "setup") {
+    if (state.gamePhase !== 'setup') {
       return {
         valid: false,
-        error: "Cannot change configuration outside of setup phase",
-      };
+        error: 'Cannot change configuration outside of setup phase',
+      }
     }
 
     // Validate field-specific values
     switch (field) {
-      case "selectedCount":
+      case 'selectedCount':
         if (![2, 5, 8, 12, 15].includes(value)) {
-          return { valid: false, error: `Invalid selectedCount: ${value}` };
+          return { valid: false, error: `Invalid selectedCount: ${value}` }
         }
-        break;
+        break
 
-      case "displayTime":
-        if (typeof value !== "number" || value < 0.5 || value > 10) {
-          return { valid: false, error: `Invalid displayTime: ${value}` };
+      case 'displayTime':
+        if (typeof value !== 'number' || value < 0.5 || value > 10) {
+          return { valid: false, error: `Invalid displayTime: ${value}` }
         }
-        break;
+        break
 
-      case "selectedDifficulty":
-        if (!["beginner", "easy", "medium", "hard", "expert"].includes(value)) {
+      case 'selectedDifficulty':
+        if (!['beginner', 'easy', 'medium', 'hard', 'expert'].includes(value)) {
           return {
             valid: false,
             error: `Invalid selectedDifficulty: ${value}`,
-          };
+          }
         }
-        break;
+        break
 
-      case "playMode":
-        if (!["cooperative", "competitive"].includes(value)) {
-          return { valid: false, error: `Invalid playMode: ${value}` };
+      case 'playMode':
+        if (!['cooperative', 'competitive'].includes(value)) {
+          return { valid: false, error: `Invalid playMode: ${value}` }
         }
-        break;
+        break
 
       default:
-        return { valid: false, error: `Unknown config field: ${field}` };
+        return { valid: false, error: `Unknown config field: ${field}` }
     }
 
     // Apply the configuration change
@@ -413,11 +395,11 @@ export class MemoryQuizGameValidator
         ...state,
         [field]: value,
       },
-    };
+    }
   }
 
   isGameComplete(state: MemoryQuizState): boolean {
-    return state.gamePhase === "results";
+    return state.gamePhase === 'results'
   }
 
   getInitialState(config: MemoryQuizConfig): MemoryQuizState {
@@ -431,25 +413,25 @@ export class MemoryQuizGameValidator
       selectedDifficulty: config.selectedDifficulty,
       foundNumbers: [],
       guessesRemaining: 0,
-      currentInput: "",
+      currentInput: '',
       incorrectGuesses: 0,
       // Multiplayer state
       activePlayers: [],
       playerMetadata: {},
       playerScores: {},
-      playMode: config.playMode || "cooperative",
+      playMode: config.playMode || 'cooperative',
       numberFoundBy: {},
       // UI state
-      gamePhase: "setup",
+      gamePhase: 'setup',
       prefixAcceptanceTimeout: null,
       finishButtonsBound: false,
       wrongGuessAnimations: [],
       hasPhysicalKeyboard: null,
       testingMode: false,
       showOnScreenKeyboard: false,
-    };
+    }
   }
 }
 
 // Singleton instance
-export const memoryQuizGameValidator = new MemoryQuizGameValidator();
+export const memoryQuizGameValidator = new MemoryQuizGameValidator()
diff --git a/apps/web/src/arcade-games/memory-quiz/components/CardGrid.tsx b/apps/web/src/arcade-games/memory-quiz/components/CardGrid.tsx
index a4b46d88..365ed4b6 100644
--- a/apps/web/src/arcade-games/memory-quiz/components/CardGrid.tsx
+++ b/apps/web/src/arcade-games/memory-quiz/components/CardGrid.tsx
@@ -1,57 +1,57 @@
-import { AbacusReact } from "@soroban/abacus-react";
-import type { MemoryQuizState } from "../types";
+import { AbacusReact } from '@soroban/abacus-react'
+import type { MemoryQuizState } from '../types'
 
 interface CardGridProps {
-  state: MemoryQuizState;
+  state: MemoryQuizState
 }
 
 export function CardGrid({ state }: CardGridProps) {
-  if (state.quizCards.length === 0) return null;
+  if (state.quizCards.length === 0) return null
 
   // Calculate optimal grid layout based on number of cards
-  const cardCount = state.quizCards.length;
+  const cardCount = state.quizCards.length
 
   // Define static grid classes that Panda can generate
   const getGridClass = (count: number) => {
-    if (count <= 2) return "repeat(2, 1fr)";
-    if (count <= 4) return "repeat(2, 1fr)";
-    if (count <= 6) return "repeat(3, 1fr)";
-    if (count <= 9) return "repeat(3, 1fr)";
-    if (count <= 12) return "repeat(4, 1fr)";
-    return "repeat(5, 1fr)";
-  };
+    if (count <= 2) return 'repeat(2, 1fr)'
+    if (count <= 4) return 'repeat(2, 1fr)'
+    if (count <= 6) return 'repeat(3, 1fr)'
+    if (count <= 9) return 'repeat(3, 1fr)'
+    if (count <= 12) return 'repeat(4, 1fr)'
+    return 'repeat(5, 1fr)'
+  }
 
   const getCardSize = (count: number) => {
-    if (count <= 2) return { minSize: "180px", cardHeight: "160px" };
-    if (count <= 4) return { minSize: "160px", cardHeight: "150px" };
-    if (count <= 6) return { minSize: "140px", cardHeight: "140px" };
-    if (count <= 9) return { minSize: "120px", cardHeight: "130px" };
-    if (count <= 12) return { minSize: "110px", cardHeight: "120px" };
-    return { minSize: "100px", cardHeight: "110px" };
-  };
+    if (count <= 2) return { minSize: '180px', cardHeight: '160px' }
+    if (count <= 4) return { minSize: '160px', cardHeight: '150px' }
+    if (count <= 6) return { minSize: '140px', cardHeight: '140px' }
+    if (count <= 9) return { minSize: '120px', cardHeight: '130px' }
+    if (count <= 12) return { minSize: '110px', cardHeight: '120px' }
+    return { minSize: '100px', cardHeight: '110px' }
+  }
 
-  const gridClass = getGridClass(cardCount);
-  const cardSize = getCardSize(cardCount);
+  const gridClass = getGridClass(cardCount)
+  const cardSize = getCardSize(cardCount)
 
   return (
     <div
       style={{
-        marginTop: "12px",
-        padding: "12px",
-        background: "#f9fafb",
-        borderRadius: "8px",
-        border: "1px solid #e5e7eb",
-        maxHeight: "50vh",
-        overflowY: "auto",
+        marginTop: '12px',
+        padding: '12px',
+        background: '#f9fafb',
+        borderRadius: '8px',
+        border: '1px solid #e5e7eb',
+        maxHeight: '50vh',
+        overflowY: 'auto',
       }}
     >
       <h4
         style={{
-          textAlign: "center",
-          color: "#374151",
-          marginBottom: "12px",
-          fontSize: "14px",
-          fontWeight: "600",
+          textAlign: 'center',
+          color: '#374151',
+          marginBottom: '12px',
+          fontSize: '14px',
+          fontWeight: '600',
         }}
       >
         Cards you saw ({cardCount}):
@@ -59,55 +59,55 @@ export function CardGrid({ state }: CardGridProps) {
 
       <div
         style={{
-          display: "grid",
-          gap: "8px",
-          maxWidth: "100%",
-          margin: "0 auto",
-          width: "fit-content",
+          display: 'grid',
+          gap: '8px',
+          maxWidth: '100%',
+          margin: '0 auto',
+          width: 'fit-content',
           gridTemplateColumns: gridClass,
         }}
       >
         {state.quizCards.map((card, index) => {
-          const isRevealed = state.foundNumbers.includes(card.number);
+          const isRevealed = state.foundNumbers.includes(card.number)
           return (
             <div
               key={`card-${index}-${card.number}`}
               style={{
-                perspective: "1000px",
-                maxWidth: "200px",
+                perspective: '1000px',
+                maxWidth: '200px',
                 height: cardSize.cardHeight,
                 minWidth: cardSize.minSize,
               }}
             >
               <div
                 style={{
-                  position: "relative",
-                  width: "100%",
-                  height: "100%",
-                  textAlign: "center",
-                  transition: "transform 0.8s",
-                  transformStyle: "preserve-3d",
-                  transform: isRevealed ? "rotateY(180deg)" : "rotateY(0deg)",
+                  position: 'relative',
+                  width: '100%',
+                  height: '100%',
+                  textAlign: 'center',
+                  transition: 'transform 0.8s',
+                  transformStyle: 'preserve-3d',
+                  transform: isRevealed ? 'rotateY(180deg)' : 'rotateY(0deg)',
                 }}
               >
                 {/* Card back (hidden state) */}
                 <div
                   style={{
-                    position: "absolute",
-                    width: "100%",
-                    height: "100%",
-                    backfaceVisibility: "hidden",
-                    borderRadius: "8px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
-                    background: "linear-gradient(135deg, #6c5ce7, #a29bfe)",
-                    color: "white",
-                    fontSize: "32px",
-                    fontWeight: "bold",
-                    textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
-                    border: "2px solid #5f3dc4",
+                    position: 'absolute',
+                    width: '100%',
+                    height: '100%',
+                    backfaceVisibility: 'hidden',
+                    borderRadius: '8px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+                    background: 'linear-gradient(135deg, #6c5ce7, #a29bfe)',
+                    color: 'white',
+                    fontSize: '32px',
+                    fontWeight: 'bold',
+                    textShadow: '2px 2px 4px rgba(0, 0, 0, 0.3)',
+                    border: '2px solid #5f3dc4',
                   }}
                 >
                   <div style={{ opacity: 0.8 }}>?</div>
@@ -116,38 +116,38 @@ export function CardGrid({ state }: CardGridProps) {
                 {/* Card front (revealed state) */}
                 <div
                   style={{
-                    position: "absolute",
-                    width: "100%",
-                    height: "100%",
-                    backfaceVisibility: "hidden",
-                    borderRadius: "8px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
-                    background: "white",
-                    border: "2px solid #28a745",
-                    transform: "rotateY(180deg)",
+                    position: 'absolute',
+                    width: '100%',
+                    height: '100%',
+                    backfaceVisibility: 'hidden',
+                    borderRadius: '8px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+                    background: 'white',
+                    border: '2px solid #28a745',
+                    transform: 'rotateY(180deg)',
                   }}
                 >
                   <div
                     style={{
-                      width: "100%",
-                      height: "100%",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      overflow: "hidden",
-                      padding: "4px",
+                      width: '100%',
+                      height: '100%',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      overflow: 'hidden',
+                      padding: '4px',
                     }}
                   >
                     <div
                       style={{
-                        width: "100%",
-                        height: "100%",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
                       }}
                     >
                       <AbacusReact
@@ -166,7 +166,7 @@ export function CardGrid({ state }: CardGridProps) {
                 </div>
               </div>
             </div>
-          );
+          )
         })}
       </div>
 
@@ -174,26 +174,24 @@ export function CardGrid({ state }: CardGridProps) {
       {cardCount > 8 && (
         <div
           style={{
-            marginTop: "8px",
-            padding: "6px 8px",
-            background: "#eff6ff",
-            borderRadius: "6px",
-            border: "1px solid #bfdbfe",
-            textAlign: "center",
-            fontSize: "12px",
-            color: "#1d4ed8",
+            marginTop: '8px',
+            padding: '6px 8px',
+            background: '#eff6ff',
+            borderRadius: '6px',
+            border: '1px solid #bfdbfe',
+            textAlign: 'center',
+            fontSize: '12px',
+            color: '#1d4ed8',
           }}
         >
-          <strong>{state.foundNumbers.length}</strong> of{" "}
-          <strong>{cardCount}</strong> cards found
+          <strong>{state.foundNumbers.length}</strong> of <strong>{cardCount}</strong> cards found
           {state.foundNumbers.length > 0 && (
-            <span style={{ marginLeft: "6px", fontWeight: "normal" }}>
-              ({Math.round((state.foundNumbers.length / cardCount) * 100)}%
-              complete)
+            <span style={{ marginLeft: '6px', fontWeight: 'normal' }}>
+              ({Math.round((state.foundNumbers.length / cardCount) * 100)}% complete)
             </span>
           )}
         </div>
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/memory-quiz/components/DisplayPhase.tsx b/apps/web/src/arcade-games/memory-quiz/components/DisplayPhase.tsx
index cb904244..84d20c12 100644
--- a/apps/web/src/arcade-games/memory-quiz/components/DisplayPhase.tsx
+++ b/apps/web/src/arcade-games/memory-quiz/components/DisplayPhase.tsx
@@ -1,126 +1,121 @@
-import { AbacusReact, useAbacusConfig } from "@soroban/abacus-react";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { useMemoryQuiz } from "../Provider";
-import type { QuizCard } from "../types";
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useMemoryQuiz } from '../Provider'
+import type { QuizCard } from '../types'
 
 // Calculate maximum columns needed for a set of numbers
 function calculateMaxColumns(numbers: number[]): number {
-  if (numbers.length === 0) return 1;
-  const maxNumber = Math.max(...numbers);
-  if (maxNumber === 0) return 1;
-  return Math.floor(Math.log10(maxNumber)) + 1;
+  if (numbers.length === 0) return 1
+  const maxNumber = Math.max(...numbers)
+  if (maxNumber === 0) return 1
+  return Math.floor(Math.log10(maxNumber)) + 1
 }
 
 export function DisplayPhase() {
-  const { state, nextCard, showInputPhase, resetGame, isRoomCreator } =
-    useMemoryQuiz();
-  const [currentCard, setCurrentCard] = useState<QuizCard | null>(null);
-  const [isTransitioning, setIsTransitioning] = useState(false);
-  const isDisplayPhaseActive = state.currentCardIndex < state.quizCards.length;
-  const isProcessingRef = useRef(false);
-  const lastProcessedIndexRef = useRef(-1);
-  const appConfig = useAbacusConfig();
+  const { state, nextCard, showInputPhase, resetGame, isRoomCreator } = useMemoryQuiz()
+  const [currentCard, setCurrentCard] = useState<QuizCard | null>(null)
+  const [isTransitioning, setIsTransitioning] = useState(false)
+  const isDisplayPhaseActive = state.currentCardIndex < state.quizCards.length
+  const isProcessingRef = useRef(false)
+  const lastProcessedIndexRef = useRef(-1)
+  const appConfig = useAbacusConfig()
 
   // In multiplayer room mode, only the room creator controls card timing
   // In local mode (isRoomCreator === undefined), allow timing control
-  const shouldControlTiming =
-    isRoomCreator === undefined || isRoomCreator === true;
+  const shouldControlTiming = isRoomCreator === undefined || isRoomCreator === true
 
   // Calculate maximum columns needed for this quiz set
   const maxColumns = useMemo(() => {
-    const allNumbers = state.quizCards.map((card) => card.number);
-    return calculateMaxColumns(allNumbers);
-  }, [state.quizCards]);
+    const allNumbers = state.quizCards.map((card) => card.number)
+    return calculateMaxColumns(allNumbers)
+  }, [state.quizCards])
 
   // Calculate adaptive animation duration
   const flashDuration = useMemo(() => {
-    const displayTimeMs = state.displayTime * 1000;
-    return Math.min(Math.max(displayTimeMs * 0.3, 150), 600) / 1000; // Convert to seconds for CSS
-  }, [state.displayTime]);
+    const displayTimeMs = state.displayTime * 1000
+    return Math.min(Math.max(displayTimeMs * 0.3, 150), 600) / 1000 // Convert to seconds for CSS
+  }, [state.displayTime])
 
-  const progressPercentage =
-    (state.currentCardIndex / state.quizCards.length) * 100;
+  const progressPercentage = (state.currentCardIndex / state.quizCards.length) * 100
 
   useEffect(() => {
     // Prevent processing the same card index multiple times
     // This prevents race conditions from optimistic updates
     if (state.currentCardIndex === lastProcessedIndexRef.current) {
       console.log(
-        `DisplayPhase: Skipping duplicate processing of index ${state.currentCardIndex} (lastProcessed: ${lastProcessedIndexRef.current})`,
-      );
-      return;
+        `DisplayPhase: Skipping duplicate processing of index ${state.currentCardIndex} (lastProcessed: ${lastProcessedIndexRef.current})`
+      )
+      return
     }
 
     if (state.currentCardIndex >= state.quizCards.length) {
       // Only the room creator (or local mode) triggers phase transitions
       if (shouldControlTiming) {
         console.log(
-          `DisplayPhase: All cards shown (${state.quizCards.length}), transitioning to input phase`,
-        );
-        showInputPhase?.();
+          `DisplayPhase: All cards shown (${state.quizCards.length}), transitioning to input phase`
+        )
+        showInputPhase?.()
       }
-      return;
+      return
     }
 
     // Prevent multiple concurrent executions
     if (isProcessingRef.current) {
       console.log(
-        `DisplayPhase: Already processing, skipping (index: ${state.currentCardIndex}, lastProcessed: ${lastProcessedIndexRef.current})`,
-      );
-      return;
+        `DisplayPhase: Already processing, skipping (index: ${state.currentCardIndex}, lastProcessed: ${lastProcessedIndexRef.current})`
+      )
+      return
     }
 
     // Mark this index as being processed
-    lastProcessedIndexRef.current = state.currentCardIndex;
+    lastProcessedIndexRef.current = state.currentCardIndex
 
     const showNextCard = async () => {
-      isProcessingRef.current = true;
-      const card = state.quizCards[state.currentCardIndex];
+      isProcessingRef.current = true
+      const card = state.quizCards[state.currentCardIndex]
       console.log(
-        `DisplayPhase: Showing card ${state.currentCardIndex + 1}/${state.quizCards.length}, number: ${card.number} (isRoomCreator: ${isRoomCreator}, shouldControlTiming: ${shouldControlTiming})`,
-      );
+        `DisplayPhase: Showing card ${state.currentCardIndex + 1}/${state.quizCards.length}, number: ${card.number} (isRoomCreator: ${isRoomCreator}, shouldControlTiming: ${shouldControlTiming})`
+      )
 
       // Calculate adaptive timing based on display speed
-      const displayTimeMs = state.displayTime * 1000;
-      const flashDuration = Math.min(Math.max(displayTimeMs * 0.3, 150), 600); // 30% of display time, between 150ms-600ms
-      const transitionPause = Math.min(Math.max(displayTimeMs * 0.1, 50), 200); // 10% of display time, between 50ms-200ms
+      const displayTimeMs = state.displayTime * 1000
+      const flashDuration = Math.min(Math.max(displayTimeMs * 0.3, 150), 600) // 30% of display time, between 150ms-600ms
+      const transitionPause = Math.min(Math.max(displayTimeMs * 0.1, 50), 200) // 10% of display time, between 50ms-200ms
 
       // Trigger adaptive transition effect
-      setIsTransitioning(true);
-      setCurrentCard(card);
+      setIsTransitioning(true)
+      setCurrentCard(card)
 
       // Reset transition effect with adaptive duration
-      setTimeout(() => setIsTransitioning(false), flashDuration);
+      setTimeout(() => setIsTransitioning(false), flashDuration)
 
       console.log(
-        `DisplayPhase: Card ${state.currentCardIndex + 1} now visible (flash: ${flashDuration}ms, pause: ${transitionPause}ms)`,
-      );
+        `DisplayPhase: Card ${state.currentCardIndex + 1} now visible (flash: ${flashDuration}ms, pause: ${transitionPause}ms)`
+      )
 
       // Only the room creator (or local mode) controls the timing
       if (shouldControlTiming) {
         // Display card for specified time with adaptive transition pause
-        await new Promise((resolve) =>
-          setTimeout(resolve, displayTimeMs - transitionPause),
-        );
+        await new Promise((resolve) => setTimeout(resolve, displayTimeMs - transitionPause))
 
         // Don't hide the abacus - just advance to next card for smooth transition
         console.log(
-          `DisplayPhase: Card ${state.currentCardIndex + 1} transitioning to next (controlled by ${isRoomCreator === undefined ? "local mode" : "room creator"})`,
-        );
-        await new Promise((resolve) => setTimeout(resolve, transitionPause)); // Adaptive pause for visual transition
+          `DisplayPhase: Card ${state.currentCardIndex + 1} transitioning to next (controlled by ${isRoomCreator === undefined ? 'local mode' : 'room creator'})`
+        )
+        await new Promise((resolve) => setTimeout(resolve, transitionPause)) // Adaptive pause for visual transition
 
-        isProcessingRef.current = false;
-        nextCard?.();
+        isProcessingRef.current = false
+        nextCard?.()
       } else {
         // Non-creator players just display the card, don't control timing
         console.log(
-          `DisplayPhase: Non-creator player displaying card ${state.currentCardIndex + 1}, waiting for creator to advance`,
-        );
-        isProcessingRef.current = false;
+          `DisplayPhase: Non-creator player displaying card ${state.currentCardIndex + 1}, waiting for creator to advance`
+        )
+        isProcessingRef.current = false
       }
-    };
+    }
 
-    showNextCard();
+    showNextCard()
   }, [
     state.currentCardIndex,
     state.displayTime,
@@ -129,76 +124,74 @@ export function DisplayPhase() {
     showInputPhase,
     shouldControlTiming,
     isRoomCreator,
-  ]);
+  ])
 
   return (
     <div
       style={{
-        textAlign: "center",
-        padding: "12px",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        boxSizing: "border-box",
-        height: "100%",
-        animation: isTransitioning
-          ? `subtlePageFlash ${flashDuration}s ease-out`
-          : undefined,
+        textAlign: 'center',
+        padding: '12px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        boxSizing: 'border-box',
+        height: '100%',
+        animation: isTransitioning ? `subtlePageFlash ${flashDuration}s ease-out` : undefined,
       }}
     >
       <div
         style={{
-          position: "relative",
-          width: "100%",
-          maxWidth: "800px",
-          marginBottom: "12px",
-          display: "flex",
-          flexDirection: "column",
-          gap: "12px",
+          position: 'relative',
+          width: '100%',
+          maxWidth: '800px',
+          marginBottom: '12px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px',
         }}
       >
         <div>
           <div
             style={{
-              width: "100%",
-              height: "8px",
-              background: "#e5e7eb",
-              borderRadius: "4px",
-              overflow: "hidden",
-              marginBottom: "8px",
+              width: '100%',
+              height: '8px',
+              background: '#e5e7eb',
+              borderRadius: '4px',
+              overflow: 'hidden',
+              marginBottom: '8px',
             }}
           >
             <div
               style={{
-                height: "100%",
-                background: "linear-gradient(90deg, #28a745, #20c997)",
-                borderRadius: "4px",
+                height: '100%',
+                background: 'linear-gradient(90deg, #28a745, #20c997)',
+                borderRadius: '4px',
                 width: `${progressPercentage}%`,
-                transition: "width 0.5s ease",
+                transition: 'width 0.5s ease',
               }}
             />
           </div>
           <span
             style={{
-              fontSize: "14px",
-              fontWeight: "bold",
-              color: "#374151",
+              fontSize: '14px',
+              fontWeight: 'bold',
+              color: '#374151',
             }}
           >
             Card {state.currentCardIndex + 1} of {state.quizCards.length}
           </span>
         </div>
-        <div style={{ display: "flex", justifyContent: "flex-end" }}>
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
           <button
             style={{
-              background: "#ef4444",
-              color: "white",
-              border: "none",
-              borderRadius: "6px",
-              padding: "6px 12px",
-              fontSize: "12px",
-              cursor: "pointer",
-              transition: "background 0.2s ease",
+              background: '#ef4444',
+              color: 'white',
+              border: 'none',
+              borderRadius: '6px',
+              padding: '6px 12px',
+              fontSize: '12px',
+              cursor: 'pointer',
+              transition: 'background 0.2s ease',
             }}
             onClick={() => resetGame?.()}
           >
@@ -210,26 +203,26 @@ export function DisplayPhase() {
       {/* Persistent abacus container - stays mounted during entire memorize phase */}
       <div
         style={{
-          width: "min(90vw, 800px)",
-          height: "min(70vh, 500px)",
-          display: isDisplayPhaseActive ? "flex" : "none",
-          alignItems: "center",
-          justifyContent: "center",
-          margin: "0 auto",
-          transition: "opacity 0.3s ease",
-          overflow: "visible",
-          padding: "20px 12px",
+          width: 'min(90vw, 800px)',
+          height: 'min(70vh, 500px)',
+          display: isDisplayPhaseActive ? 'flex' : 'none',
+          alignItems: 'center',
+          justifyContent: 'center',
+          margin: '0 auto',
+          transition: 'opacity 0.3s ease',
+          overflow: 'visible',
+          padding: '20px 12px',
         }}
       >
         <div
           style={{
-            width: "100%",
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: "20px",
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '20px',
           }}
         >
           {/* Persistent abacus with smooth bead animations and dynamically calculated columns */}
@@ -247,5 +240,5 @@ export function DisplayPhase() {
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/memory-quiz/components/InputPhase.tsx b/apps/web/src/arcade-games/memory-quiz/components/InputPhase.tsx
index b661c1d4..8fe9cf01 100644
--- a/apps/web/src/arcade-games/memory-quiz/components/InputPhase.tsx
+++ b/apps/web/src/arcade-games/memory-quiz/components/InputPhase.tsx
@@ -1,163 +1,147 @@
-import { useCallback, useEffect, useState } from "react";
-import { isPrefix } from "@/lib/memory-quiz-utils";
-import { useMemoryQuiz } from "../Provider";
-import { useViewport } from "@/contexts/ViewportContext";
-import { CardGrid } from "./CardGrid";
+import { useCallback, useEffect, useState } from 'react'
+import { isPrefix } from '@/lib/memory-quiz-utils'
+import { useMemoryQuiz } from '../Provider'
+import { useViewport } from '@/contexts/ViewportContext'
+import { CardGrid } from './CardGrid'
 
 export function InputPhase() {
-  const { state, dispatch, acceptNumber, rejectNumber, setInput, showResults } =
-    useMemoryQuiz();
-  const viewport = useViewport();
-  const [displayFeedback, setDisplayFeedback] = useState<
-    "neutral" | "correct" | "incorrect"
-  >("neutral");
+  const { state, dispatch, acceptNumber, rejectNumber, setInput, showResults } = useMemoryQuiz()
+  const viewport = useViewport()
+  const [displayFeedback, setDisplayFeedback] = useState<'neutral' | 'correct' | 'incorrect'>(
+    'neutral'
+  )
 
   // Use keyboard state from parent state instead of local state
-  const { hasPhysicalKeyboard, testingMode, showOnScreenKeyboard } = state;
+  const { hasPhysicalKeyboard, testingMode, showOnScreenKeyboard } = state
 
   // Debug: Log state changes and detect what's causing re-renders
   useEffect(() => {
-    console.log("🔍 Keyboard state changed:", {
+    console.log('🔍 Keyboard state changed:', {
       hasPhysicalKeyboard,
       testingMode,
       showOnScreenKeyboard,
-    });
-    console.trace("🔍 State change trace:");
-  }, [hasPhysicalKeyboard, testingMode, showOnScreenKeyboard]);
+    })
+    console.trace('🔍 State change trace:')
+  }, [hasPhysicalKeyboard, testingMode, showOnScreenKeyboard])
 
   // Debug: Monitor for unexpected state resets
   useEffect(() => {
     if (showOnScreenKeyboard) {
       const timer = setTimeout(() => {
         if (!showOnScreenKeyboard) {
-          console.error("🚨 Keyboard was unexpectedly hidden!");
+          console.error('🚨 Keyboard was unexpectedly hidden!')
         }
-      }, 1000);
-      return () => clearTimeout(timer);
+      }, 1000)
+      return () => clearTimeout(timer)
     }
-  }, [showOnScreenKeyboard]);
+  }, [showOnScreenKeyboard])
 
   // Detect physical keyboard availability (disabled when testing mode is active)
   useEffect(() => {
     // Skip keyboard detection entirely when testing mode is enabled
     if (testingMode) {
-      console.log("🧪 Testing mode enabled - skipping keyboard detection");
-      return;
+      console.log('🧪 Testing mode enabled - skipping keyboard detection')
+      return
     }
 
-    let detectionTimer: NodeJS.Timeout | null = null;
+    let detectionTimer: NodeJS.Timeout | null = null
 
     const detectKeyboard = () => {
       // Method 1: Check if device supports keyboard via media queries
       const hasKeyboardSupport =
-        window.matchMedia("(pointer: fine)").matches &&
-        window.matchMedia("(hover: hover)").matches;
+        window.matchMedia('(pointer: fine)').matches && window.matchMedia('(hover: hover)').matches
 
       // Method 2: Check if device is likely touch-only
       const isTouchDevice =
-        "ontouchstart" in window ||
+        'ontouchstart' in window ||
         navigator.maxTouchPoints > 0 ||
-        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-          navigator.userAgent,
-        );
+        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
 
       // Method 3: Check viewport characteristics for mobile devices
-      const isMobileViewport = viewport.width <= 768 && viewport.height <= 1024;
+      const isMobileViewport = viewport.width <= 768 && viewport.height <= 1024
 
       // Combined heuristic: assume no physical keyboard if:
       // - It's a touch device AND has mobile viewport AND lacks precise pointer
-      const likelyNoKeyboard =
-        isTouchDevice && isMobileViewport && !hasKeyboardSupport;
+      const likelyNoKeyboard = isTouchDevice && isMobileViewport && !hasKeyboardSupport
 
-      console.log("⌨️ Keyboard detection result:", !likelyNoKeyboard);
+      console.log('⌨️ Keyboard detection result:', !likelyNoKeyboard)
       dispatch({
-        type: "SET_PHYSICAL_KEYBOARD",
+        type: 'SET_PHYSICAL_KEYBOARD',
         hasKeyboard: !likelyNoKeyboard,
-      });
-    };
+      })
+    }
 
     // Test for actual keyboard input within 3 seconds
-    let keyboardDetected = false;
+    let keyboardDetected = false
     const handleFirstKeyPress = (e: KeyboardEvent) => {
       if (/^[0-9]$/.test(e.key)) {
-        console.log("⌨️ Physical keyboard detected via keypress");
-        keyboardDetected = true;
-        dispatch({ type: "SET_PHYSICAL_KEYBOARD", hasKeyboard: true });
-        document.removeEventListener("keypress", handleFirstKeyPress);
-        if (detectionTimer) clearTimeout(detectionTimer);
+        console.log('⌨️ Physical keyboard detected via keypress')
+        keyboardDetected = true
+        dispatch({ type: 'SET_PHYSICAL_KEYBOARD', hasKeyboard: true })
+        document.removeEventListener('keypress', handleFirstKeyPress)
+        if (detectionTimer) clearTimeout(detectionTimer)
       }
-    };
+    }
 
     // Start detection
-    document.addEventListener("keypress", handleFirstKeyPress);
+    document.addEventListener('keypress', handleFirstKeyPress)
 
     // Fallback to heuristic detection after 3 seconds
     detectionTimer = setTimeout(() => {
       if (!keyboardDetected) {
-        console.log("⌨️ Using fallback keyboard detection");
-        detectKeyboard();
+        console.log('⌨️ Using fallback keyboard detection')
+        detectKeyboard()
       }
-      document.removeEventListener("keypress", handleFirstKeyPress);
-    }, 3000);
+      document.removeEventListener('keypress', handleFirstKeyPress)
+    }, 3000)
 
     // Initial heuristic detection (but don't commit to it yet)
-    const initialDetection = setTimeout(detectKeyboard, 100);
+    const initialDetection = setTimeout(detectKeyboard, 100)
 
     return () => {
-      document.removeEventListener("keypress", handleFirstKeyPress);
-      if (detectionTimer) clearTimeout(detectionTimer);
-      clearTimeout(initialDetection);
-    };
-  }, [testingMode, dispatch]);
+      document.removeEventListener('keypress', handleFirstKeyPress)
+      if (detectionTimer) clearTimeout(detectionTimer)
+      clearTimeout(initialDetection)
+    }
+  }, [testingMode, dispatch])
 
   const acceptCorrectNumber = useCallback(
     (number: number) => {
-      acceptNumber?.(number);
+      acceptNumber?.(number)
       // setInput('') is called inside acceptNumber action creator
-      setDisplayFeedback("correct");
+      setDisplayFeedback('correct')
 
-      setTimeout(() => setDisplayFeedback("neutral"), 500);
+      setTimeout(() => setDisplayFeedback('neutral'), 500)
 
       // Auto-finish if all found
       if (state.foundNumbers.length + 1 === state.correctAnswers.length) {
-        setTimeout(() => showResults?.(), 1000);
+        setTimeout(() => showResults?.(), 1000)
       }
     },
-    [
-      acceptNumber,
-      showResults,
-      state.foundNumbers.length,
-      state.correctAnswers.length,
-    ],
-  );
+    [acceptNumber, showResults, state.foundNumbers.length, state.correctAnswers.length]
+  )
 
   const handleIncorrectGuess = useCallback(() => {
-    const wrongNumber = parseInt(state.currentInput, 10);
+    const wrongNumber = parseInt(state.currentInput, 10)
     if (!Number.isNaN(wrongNumber)) {
-      dispatch({ type: "ADD_WRONG_GUESS_ANIMATION", number: wrongNumber });
+      dispatch({ type: 'ADD_WRONG_GUESS_ANIMATION', number: wrongNumber })
       // Clear wrong guess animations after explosion
       setTimeout(() => {
-        dispatch({ type: "CLEAR_WRONG_GUESS_ANIMATIONS" });
-      }, 1500);
+        dispatch({ type: 'CLEAR_WRONG_GUESS_ANIMATIONS' })
+      }, 1500)
     }
 
-    rejectNumber?.();
+    rejectNumber?.()
     // setInput('') is called inside rejectNumber action creator
-    setDisplayFeedback("incorrect");
+    setDisplayFeedback('incorrect')
 
-    setTimeout(() => setDisplayFeedback("neutral"), 500);
+    setTimeout(() => setDisplayFeedback('neutral'), 500)
 
     // Auto-finish if out of guesses
     if (state.guessesRemaining - 1 === 0) {
-      setTimeout(() => showResults?.(), 1000);
+      setTimeout(() => showResults?.(), 1000)
     }
-  }, [
-    state.currentInput,
-    dispatch,
-    rejectNumber,
-    showResults,
-    state.guessesRemaining,
-  ]);
+  }, [state.currentInput, dispatch, rejectNumber, showResults, state.guessesRemaining])
 
   // Simple keyboard event handlers that will be defined after callbacks
   const handleKeyboardInput = useCallback(
@@ -165,52 +149,43 @@ export function InputPhase() {
       // Handle number input
       if (/^[0-9]$/.test(key)) {
         // Only handle if input phase is active and guesses remain
-        if (state.guessesRemaining === 0) return;
+        if (state.guessesRemaining === 0) return
 
         // Update input with new key
-        const newInput = state.currentInput + key;
-        setInput?.(newInput);
+        const newInput = state.currentInput + key
+        setInput?.(newInput)
 
         // Clear any existing timeout
         if (state.prefixAcceptanceTimeout) {
-          clearTimeout(state.prefixAcceptanceTimeout);
-          dispatch({ type: "SET_PREFIX_TIMEOUT", timeout: null });
+          clearTimeout(state.prefixAcceptanceTimeout)
+          dispatch({ type: 'SET_PREFIX_TIMEOUT', timeout: null })
         }
 
-        setDisplayFeedback("neutral");
+        setDisplayFeedback('neutral')
 
-        const number = parseInt(newInput, 10);
-        if (Number.isNaN(number)) return;
+        const number = parseInt(newInput, 10)
+        if (Number.isNaN(number)) return
 
         // Check if correct and not already found
-        if (
-          state.correctAnswers.includes(number) &&
-          !state.foundNumbers.includes(number)
-        ) {
+        if (state.correctAnswers.includes(number) && !state.foundNumbers.includes(number)) {
           if (!isPrefix(newInput, state.correctAnswers, state.foundNumbers)) {
-            acceptCorrectNumber(number);
+            acceptCorrectNumber(number)
           } else {
             const timeout = setTimeout(() => {
-              acceptCorrectNumber(number);
-            }, 500);
-            dispatch({ type: "SET_PREFIX_TIMEOUT", timeout });
+              acceptCorrectNumber(number)
+            }, 500)
+            dispatch({ type: 'SET_PREFIX_TIMEOUT', timeout })
           }
         } else {
           // Check if this input could be a valid prefix or complete number
-          const couldBePrefix = state.correctAnswers.some((n) =>
-            n.toString().startsWith(newInput),
-          );
-          const isCompleteWrongNumber =
-            !state.correctAnswers.includes(number) && !couldBePrefix;
+          const couldBePrefix = state.correctAnswers.some((n) => n.toString().startsWith(newInput))
+          const isCompleteWrongNumber = !state.correctAnswers.includes(number) && !couldBePrefix
 
           // Trigger explosion if:
           // 1. It's a complete wrong number (length >= 2 or can't be a prefix)
           // 2. It's a single digit that can't possibly be a prefix of any target
-          if (
-            (newInput.length >= 2 || isCompleteWrongNumber) &&
-            state.guessesRemaining > 0
-          ) {
-            handleIncorrectGuess();
+          if ((newInput.length >= 2 || isCompleteWrongNumber) && state.guessesRemaining > 0) {
+            handleIncorrectGuess()
           }
         }
       }
@@ -225,117 +200,116 @@ export function InputPhase() {
       setInput,
       acceptCorrectNumber,
       handleIncorrectGuess,
-    ],
-  );
+    ]
+  )
 
   const handleKeyboardBackspace = useCallback(() => {
     if (state.currentInput.length > 0) {
-      const newInput = state.currentInput.slice(0, -1);
-      setInput?.(newInput);
+      const newInput = state.currentInput.slice(0, -1)
+      setInput?.(newInput)
 
       // Clear any existing timeout
       if (state.prefixAcceptanceTimeout) {
-        clearTimeout(state.prefixAcceptanceTimeout);
-        dispatch({ type: "SET_PREFIX_TIMEOUT", timeout: null });
+        clearTimeout(state.prefixAcceptanceTimeout)
+        dispatch({ type: 'SET_PREFIX_TIMEOUT', timeout: null })
       }
 
-      setDisplayFeedback("neutral");
+      setDisplayFeedback('neutral')
     }
-  }, [state.currentInput, state.prefixAcceptanceTimeout, dispatch, setInput]);
+  }, [state.currentInput, state.prefixAcceptanceTimeout, dispatch, setInput])
 
   // Set up global keyboard listeners
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       // Only handle backspace/delete on keydown to prevent repetition
-      if (e.key === "Backspace" || e.key === "Delete") {
-        e.preventDefault();
-        handleKeyboardBackspace();
+      if (e.key === 'Backspace' || e.key === 'Delete') {
+        e.preventDefault()
+        handleKeyboardBackspace()
       }
-    };
+    }
 
     const handleKeyPressEvent = (e: KeyboardEvent) => {
       // Handle number input
       if (/^[0-9]$/.test(e.key)) {
-        handleKeyboardInput(e.key);
+        handleKeyboardInput(e.key)
       }
-    };
+    }
 
-    document.addEventListener("keydown", handleKeyDown);
-    document.addEventListener("keypress", handleKeyPressEvent);
+    document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('keypress', handleKeyPressEvent)
 
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("keypress", handleKeyPressEvent);
-    };
-  }, [handleKeyboardInput, handleKeyboardBackspace]);
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('keypress', handleKeyPressEvent)
+    }
+  }, [handleKeyboardInput, handleKeyboardBackspace])
 
-  const hasFoundSome = state.foundNumbers.length > 0;
-  const hasFoundAll = state.foundNumbers.length === state.correctAnswers.length;
-  const outOfGuesses = state.guessesRemaining === 0;
-  const showFinishButtons = hasFoundAll || outOfGuesses || hasFoundSome;
+  const hasFoundSome = state.foundNumbers.length > 0
+  const hasFoundAll = state.foundNumbers.length === state.correctAnswers.length
+  const outOfGuesses = state.guessesRemaining === 0
+  const showFinishButtons = hasFoundAll || outOfGuesses || hasFoundSome
 
   return (
     <div
       style={{
-        textAlign: "center",
-        padding: "12px",
+        textAlign: 'center',
+        padding: '12px',
         paddingBottom:
-          (hasPhysicalKeyboard === false || testingMode) &&
-          state.guessesRemaining > 0
-            ? "100px"
-            : "12px", // Add space for keyboard
-        maxWidth: "800px",
-        margin: "0 auto",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "flex-start",
+          (hasPhysicalKeyboard === false || testingMode) && state.guessesRemaining > 0
+            ? '100px'
+            : '12px', // Add space for keyboard
+        maxWidth: '800px',
+        margin: '0 auto',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
       }}
     >
       <h3
         style={{
-          marginBottom: "16px",
-          color: "#1f2937",
-          fontSize: "18px",
-          fontWeight: "600",
+          marginBottom: '16px',
+          color: '#1f2937',
+          fontSize: '18px',
+          fontWeight: '600',
         }}
       >
         Enter the Numbers You Remember
       </h3>
       <div
         style={{
-          display: "flex",
-          justifyContent: "center",
-          gap: "16px",
-          marginBottom: "20px",
-          padding: "16px",
-          background: "#f9fafb",
-          borderRadius: "8px",
-          flexWrap: "wrap",
+          display: 'flex',
+          justifyContent: 'center',
+          gap: '16px',
+          marginBottom: '20px',
+          padding: '16px',
+          background: '#f9fafb',
+          borderRadius: '8px',
+          flexWrap: 'wrap',
         }}
       >
         <div
           style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            minWidth: "80px",
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            minWidth: '80px',
           }}
         >
           <span
             style={{
-              fontSize: "12px",
-              color: "#6b7280",
-              fontWeight: "500",
+              fontSize: '12px',
+              color: '#6b7280',
+              fontWeight: '500',
             }}
           >
             Cards shown:
           </span>
           <span
             style={{
-              fontSize: "20px",
-              fontWeight: "bold",
-              color: "#1f2937",
+              fontSize: '20px',
+              fontWeight: 'bold',
+              color: '#1f2937',
             }}
           >
             {state.quizCards.length}
@@ -343,26 +317,26 @@ export function InputPhase() {
         </div>
         <div
           style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            minWidth: "80px",
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            minWidth: '80px',
           }}
         >
           <span
             style={{
-              fontSize: "12px",
-              color: "#6b7280",
-              fontWeight: "500",
+              fontSize: '12px',
+              color: '#6b7280',
+              fontWeight: '500',
             }}
           >
             Guesses left:
           </span>
           <span
             style={{
-              fontSize: "20px",
-              fontWeight: "bold",
-              color: "#1f2937",
+              fontSize: '20px',
+              fontWeight: 'bold',
+              color: '#1f2937',
             }}
           >
             {state.guessesRemaining}
@@ -370,26 +344,26 @@ export function InputPhase() {
         </div>
         <div
           style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            minWidth: "80px",
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            minWidth: '80px',
           }}
         >
           <span
             style={{
-              fontSize: "12px",
-              color: "#6b7280",
-              fontWeight: "500",
+              fontSize: '12px',
+              color: '#6b7280',
+              fontWeight: '500',
             }}
           >
             Found:
           </span>
           <span
             style={{
-              fontSize: "20px",
-              fontWeight: "bold",
-              color: "#1f2937",
+              fontSize: '20px',
+              fontWeight: 'bold',
+              color: '#1f2937',
             }}
           >
             {state.foundNumbers.length}
@@ -398,34 +372,34 @@ export function InputPhase() {
       </div>
 
       {/* Live Scoreboard - Competitive Mode Only */}
-      {state.playMode === "competitive" &&
+      {state.playMode === 'competitive' &&
         state.activePlayers &&
         state.activePlayers.length > 1 && (
           <div
             style={{
-              marginBottom: "16px",
-              padding: "12px",
-              background: "linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)",
-              borderRadius: "8px",
-              border: "2px solid #f59e0b",
+              marginBottom: '16px',
+              padding: '12px',
+              background: 'linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)',
+              borderRadius: '8px',
+              border: '2px solid #f59e0b',
             }}
           >
             <div
               style={{
-                fontSize: "12px",
-                fontWeight: "bold",
-                color: "#92400e",
-                marginBottom: "8px",
-                textAlign: "center",
+                fontSize: '12px',
+                fontWeight: 'bold',
+                color: '#92400e',
+                marginBottom: '8px',
+                textAlign: 'center',
               }}
             >
               🏆 LIVE SCOREBOARD
             </div>
             <div
               style={{
-                display: "flex",
-                flexDirection: "column",
-                gap: "6px",
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '6px',
               }}
             >
               {(() => {
@@ -433,30 +407,27 @@ export function InputPhase() {
                 const userTeams = new Map<
                   string,
                   {
-                    userId: string;
-                    players: any[];
-                    score: { correct: number; incorrect: number };
+                    userId: string
+                    players: any[]
+                    score: { correct: number; incorrect: number }
                   }
-                >();
+                >()
 
-                console.log("📊 [InputPhase] Building scoreboard:", {
+                console.log('📊 [InputPhase] Building scoreboard:', {
                   activePlayers: state.activePlayers,
                   playerMetadata: state.playerMetadata,
                   playerScores: state.playerScores,
-                });
+                })
 
                 for (const playerId of state.activePlayers) {
-                  const metadata = state.playerMetadata?.[playerId];
-                  const userId = metadata?.userId;
-                  console.log(
-                    "📊 [InputPhase] Processing player for scoreboard:",
-                    {
-                      playerId,
-                      metadata,
-                      userId,
-                    },
-                  );
-                  if (!userId) continue;
+                  const metadata = state.playerMetadata?.[playerId]
+                  const userId = metadata?.userId
+                  console.log('📊 [InputPhase] Processing player for scoreboard:', {
+                    playerId,
+                    metadata,
+                    userId,
+                  })
+                  if (!userId) continue
 
                   if (!userTeams.has(userId)) {
                     userTeams.set(userId, {
@@ -466,63 +437,59 @@ export function InputPhase() {
                         correct: 0,
                         incorrect: 0,
                       },
-                    });
+                    })
                   }
-                  userTeams.get(userId)!.players.push(metadata);
+                  userTeams.get(userId)!.players.push(metadata)
                 }
 
-                console.log("📊 [InputPhase] UserTeams created:", {
+                console.log('📊 [InputPhase] UserTeams created:', {
                   count: userTeams.size,
                   teams: Array.from(userTeams.entries()),
-                });
+                })
 
                 // Sort teams by score
                 return Array.from(userTeams.values())
                   .sort((a, b) => {
-                    const aScore = a.score.correct - a.score.incorrect * 0.5;
-                    const bScore = b.score.correct - b.score.incorrect * 0.5;
-                    return bScore - aScore;
+                    const aScore = a.score.correct - a.score.incorrect * 0.5
+                    const bScore = b.score.correct - b.score.incorrect * 0.5
+                    return bScore - aScore
                   })
                   .map((team, index) => {
-                    const netScore =
-                      team.score.correct - team.score.incorrect * 0.5;
+                    const netScore = team.score.correct - team.score.incorrect * 0.5
                     return (
                       <div
                         key={team.userId}
                         style={{
-                          padding: "10px 12px",
-                          background: index === 0 ? "#fef3c7" : "white",
-                          borderRadius: "8px",
-                          border:
-                            index === 0
-                              ? "2px solid #f59e0b"
-                              : "1px solid #e5e7eb",
+                          padding: '10px 12px',
+                          background: index === 0 ? '#fef3c7' : 'white',
+                          borderRadius: '8px',
+                          border: index === 0 ? '2px solid #f59e0b' : '1px solid #e5e7eb',
                         }}
                       >
                         {/* Team header with rank and stats */}
                         <div
                           style={{
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "space-between",
-                            marginBottom: "8px",
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            marginBottom: '8px',
                           }}
                         >
                           <div
                             style={{
-                              display: "flex",
-                              alignItems: "center",
-                              gap: "8px",
+                              display: 'flex',
+                              alignItems: 'center',
+                              gap: '8px',
                             }}
                           >
-                            <span style={{ fontSize: "18px" }}>
-                              {index === 0 ? "👑" : `${index + 1}.`}
+                            <span style={{ fontSize: '18px' }}>
+                              {index === 0 ? '👑' : `${index + 1}.`}
                             </span>
                             <span
                               style={{
-                                fontWeight: "bold",
-                                fontSize: "16px",
-                                color: "#1f2937",
+                                fontWeight: 'bold',
+                                fontSize: '16px',
+                                color: '#1f2937',
                               }}
                             >
                               Score: {netScore.toFixed(1)}
@@ -530,20 +497,16 @@ export function InputPhase() {
                           </div>
                           <div
                             style={{
-                              display: "flex",
-                              alignItems: "center",
-                              gap: "10px",
-                              fontSize: "14px",
+                              display: 'flex',
+                              alignItems: 'center',
+                              gap: '10px',
+                              fontSize: '14px',
                             }}
                           >
-                            <span
-                              style={{ color: "#10b981", fontWeight: "bold" }}
-                            >
+                            <span style={{ color: '#10b981', fontWeight: 'bold' }}>
                               ✓{team.score.correct}
                             </span>
-                            <span
-                              style={{ color: "#ef4444", fontWeight: "bold" }}
-                            >
+                            <span style={{ color: '#ef4444', fontWeight: 'bold' }}>
                               ✗{team.score.incorrect}
                             </span>
                           </div>
@@ -551,29 +514,27 @@ export function InputPhase() {
                         {/* Players list */}
                         <div
                           style={{
-                            display: "flex",
-                            flexDirection: "column",
-                            gap: "4px",
-                            paddingLeft: "26px",
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '4px',
+                            paddingLeft: '26px',
                           }}
                         >
                           {team.players.map((player, i) => (
                             <div
                               key={i}
                               style={{
-                                display: "flex",
-                                alignItems: "center",
-                                gap: "6px",
-                                fontSize: "13px",
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '6px',
+                                fontSize: '13px',
                               }}
                             >
-                              <span style={{ fontSize: "16px" }}>
-                                {player?.emoji || "🎮"}
-                              </span>
+                              <span style={{ fontSize: '16px' }}>{player?.emoji || '🎮'}</span>
                               <span
                                 style={{
-                                  color: "#1f2937",
-                                  fontWeight: "500",
+                                  color: '#1f2937',
+                                  fontWeight: '500',
                                 }}
                               >
                                 {player?.name || `Player ${i + 1}`}
@@ -582,8 +543,8 @@ export function InputPhase() {
                           ))}
                         </div>
                       </div>
-                    );
-                  });
+                    )
+                  })
               })()}
             </div>
           </div>
@@ -591,38 +552,38 @@ export function InputPhase() {
 
       <div
         style={{
-          position: "relative",
-          margin: "16px 0",
-          textAlign: "center",
+          position: 'relative',
+          margin: '16px 0',
+          textAlign: 'center',
         }}
       >
         <div
           style={{
-            fontSize: "12px",
-            color: "#6b7280",
-            marginBottom: "8px",
-            fontWeight: "500",
+            fontSize: '12px',
+            color: '#6b7280',
+            marginBottom: '8px',
+            fontWeight: '500',
           }}
         >
           {state.guessesRemaining === 0
-            ? "🚫 No more guesses available"
-            : "⌨️ Type the numbers you remember"}
+            ? '🚫 No more guesses available'
+            : '⌨️ Type the numbers you remember'}
         </div>
 
         {/* Testing control - remove in production */}
         <div
           style={{
-            fontSize: "10px",
-            color: "#9ca3af",
-            marginBottom: "4px",
+            fontSize: '10px',
+            color: '#9ca3af',
+            marginBottom: '4px',
           }}
         >
           <label
             style={{
-              display: "flex",
-              alignItems: "center",
-              gap: "4px",
-              justifyContent: "center",
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+              justifyContent: 'center',
             }}
           >
             <input
@@ -630,74 +591,70 @@ export function InputPhase() {
               checked={testingMode}
               onChange={(e) =>
                 dispatch({
-                  type: "SET_TESTING_MODE",
+                  type: 'SET_TESTING_MODE',
                   enabled: e.target.checked,
                 })
               }
             />
             Test on-screen keyboard (for demo)
           </label>
-          <div style={{ fontSize: "9px", opacity: 0.7 }}>
-            Keyboard detected:{" "}
-            {hasPhysicalKeyboard === null
-              ? "detecting..."
-              : hasPhysicalKeyboard
-                ? "yes"
-                : "no"}
+          <div style={{ fontSize: '9px', opacity: 0.7 }}>
+            Keyboard detected:{' '}
+            {hasPhysicalKeyboard === null ? 'detecting...' : hasPhysicalKeyboard ? 'yes' : 'no'}
           </div>
         </div>
         <div
           style={{
-            minHeight: "50px",
-            padding: "12px 16px",
-            fontSize: "22px",
-            fontFamily: "system-ui, -apple-system, sans-serif",
-            textAlign: "center",
-            fontWeight: "600",
-            color: state.guessesRemaining === 0 ? "#6b7280" : "#1f2937",
-            letterSpacing: "1px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            transition: "all 0.3s ease",
+            minHeight: '50px',
+            padding: '12px 16px',
+            fontSize: '22px',
+            fontFamily: 'system-ui, -apple-system, sans-serif',
+            textAlign: 'center',
+            fontWeight: '600',
+            color: state.guessesRemaining === 0 ? '#6b7280' : '#1f2937',
+            letterSpacing: '1px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transition: 'all 0.3s ease',
             background:
-              displayFeedback === "correct"
-                ? "linear-gradient(45deg, #d4edda, #c3e6cb)"
-                : displayFeedback === "incorrect"
-                  ? "linear-gradient(45deg, #f8d7da, #f1b0b7)"
+              displayFeedback === 'correct'
+                ? 'linear-gradient(45deg, #d4edda, #c3e6cb)'
+                : displayFeedback === 'incorrect'
+                  ? 'linear-gradient(45deg, #f8d7da, #f1b0b7)'
                   : state.guessesRemaining === 0
-                    ? "#e5e7eb"
-                    : "linear-gradient(135deg, #f0f8ff, #e6f3ff)",
-            borderRadius: "12px",
-            position: "relative",
-            border: "2px solid",
+                    ? '#e5e7eb'
+                    : 'linear-gradient(135deg, #f0f8ff, #e6f3ff)',
+            borderRadius: '12px',
+            position: 'relative',
+            border: '2px solid',
             borderColor:
-              displayFeedback === "correct"
-                ? "#28a745"
-                : displayFeedback === "incorrect"
-                  ? "#dc3545"
+              displayFeedback === 'correct'
+                ? '#28a745'
+                : displayFeedback === 'incorrect'
+                  ? '#dc3545'
                   : state.guessesRemaining === 0
-                    ? "#9ca3af"
-                    : "#3b82f6",
+                    ? '#9ca3af'
+                    : '#3b82f6',
             boxShadow:
-              displayFeedback === "correct"
-                ? "0 4px 12px rgba(40, 167, 69, 0.2)"
-                : displayFeedback === "incorrect"
-                  ? "0 4px 12px rgba(220, 53, 69, 0.2)"
-                  : "0 4px 12px rgba(59, 130, 246, 0.15)",
-            cursor: state.guessesRemaining === 0 ? "not-allowed" : "pointer",
+              displayFeedback === 'correct'
+                ? '0 4px 12px rgba(40, 167, 69, 0.2)'
+                : displayFeedback === 'incorrect'
+                  ? '0 4px 12px rgba(220, 53, 69, 0.2)'
+                  : '0 4px 12px rgba(59, 130, 246, 0.15)',
+            cursor: state.guessesRemaining === 0 ? 'not-allowed' : 'pointer',
           }}
         >
-          <span style={{ opacity: 1, position: "relative" }}>
+          <span style={{ opacity: 1, position: 'relative' }}>
             {state.guessesRemaining === 0
-              ? "🔒 Game Over"
+              ? '🔒 Game Over'
               : state.currentInput || (
                   <span
                     style={{
-                      color: "#74c0fc",
+                      color: '#74c0fc',
                       opacity: 0.8,
-                      fontStyle: "normal",
-                      fontSize: "20px",
+                      fontStyle: 'normal',
+                      fontSize: '20px',
                     }}
                   >
                     💭 Think & Type
@@ -706,14 +663,14 @@ export function InputPhase() {
             {state.currentInput && (
               <span
                 style={{
-                  position: "absolute",
-                  right: "-8px",
-                  top: "50%",
-                  transform: "translateY(-50%)",
-                  width: "2px",
-                  height: "20px",
-                  background: "#3b82f6",
-                  animation: "blink 1s infinite",
+                  position: 'absolute',
+                  right: '-8px',
+                  top: '50%',
+                  transform: 'translateY(-50%)',
+                  width: '2px',
+                  height: '20px',
+                  background: '#3b82f6',
+                  animation: 'blink 1s infinite',
                 }}
               />
             )}
@@ -724,10 +681,10 @@ export function InputPhase() {
       {/* Visual card grid showing cards the user was shown */}
       <div
         style={{
-          marginTop: "12px",
+          marginTop: '12px',
           flex: 1,
-          overflow: "auto",
-          minHeight: "0",
+          overflow: 'auto',
+          minHeight: '0',
         }}
       >
         <CardGrid state={state} />
@@ -736,12 +693,12 @@ export function InputPhase() {
       {/* Wrong guess explosion animations */}
       <div
         style={{
-          position: "fixed",
+          position: 'fixed',
           top: 0,
           left: 0,
-          width: "100vw",
-          height: "100vh",
-          pointerEvents: "none",
+          width: '100vw',
+          height: '100vh',
+          pointerEvents: 'none',
           zIndex: 1000,
         }}
       >
@@ -749,15 +706,15 @@ export function InputPhase() {
           <div
             key={animation.id}
             style={{
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              fontSize: "48px",
-              fontWeight: "bold",
-              color: "#ef4444",
-              textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
-              animation: "explode 1.5s ease-out forwards",
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              fontSize: '48px',
+              fontWeight: 'bold',
+              color: '#ef4444',
+              textShadow: '2px 2px 4px rgba(0, 0, 0, 0.3)',
+              animation: 'explode 1.5s ease-out forwards',
             }}
           >
             {animation.number}
@@ -766,136 +723,133 @@ export function InputPhase() {
       </div>
 
       {/* Simple fixed keyboard bar - appears when needed, no hiding of game elements */}
-      {(hasPhysicalKeyboard === false || testingMode) &&
-        state.guessesRemaining > 0 && (
-          <div
-            style={{
-              position: "fixed",
-              bottom: 0,
-              left: 0,
-              right: 0,
-              background: "linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)",
-              borderTop: "2px solid #3b82f6",
-              padding: "12px",
-              zIndex: 1000,
-              display: "flex",
-              gap: "8px",
-              justifyContent: "center",
-              flexWrap: "wrap",
-              boxShadow: "0 -4px 12px rgba(0, 0, 0, 0.1)",
-            }}
-          >
-            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 0].map((digit) => (
-              <button
-                key={digit}
-                style={{
-                  padding: "12px 16px",
-                  border: "2px solid #e5e7eb",
-                  borderRadius: "8px",
-                  background: "white",
-                  fontSize: "18px",
-                  fontWeight: "bold",
-                  color: "#1f2937",
-                  cursor: "pointer",
-                  minWidth: "50px",
-                  minHeight: "50px",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  userSelect: "none",
-                  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
-                  transition: "all 0.15s ease",
-                }}
-                onMouseDown={(e) => {
-                  e.currentTarget.style.transform = "scale(0.95)";
-                  e.currentTarget.style.background = "#f3f4f6";
-                  e.currentTarget.style.borderColor = "#3b82f6";
-                }}
-                onMouseUp={(e) => {
-                  e.currentTarget.style.transform = "scale(1)";
-                  e.currentTarget.style.background = "white";
-                  e.currentTarget.style.borderColor = "#e5e7eb";
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.transform = "scale(1)";
-                  e.currentTarget.style.background = "white";
-                  e.currentTarget.style.borderColor = "#e5e7eb";
-                }}
-                onClick={() => handleKeyboardInput(digit.toString())}
-              >
-                {digit}
-              </button>
-            ))}
+      {(hasPhysicalKeyboard === false || testingMode) && state.guessesRemaining > 0 && (
+        <div
+          style={{
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)',
+            borderTop: '2px solid #3b82f6',
+            padding: '12px',
+            zIndex: 1000,
+            display: 'flex',
+            gap: '8px',
+            justifyContent: 'center',
+            flexWrap: 'wrap',
+            boxShadow: '0 -4px 12px rgba(0, 0, 0, 0.1)',
+          }}
+        >
+          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 0].map((digit) => (
             <button
+              key={digit}
               style={{
-                padding: "12px 16px",
-                border: "2px solid #dc2626",
-                borderRadius: "8px",
-                background:
-                  state.currentInput.length > 0 ? "#fef2f2" : "#f9fafb",
-                fontSize: "14px",
-                fontWeight: "bold",
-                color: state.currentInput.length > 0 ? "#dc2626" : "#9ca3af",
-                cursor:
-                  state.currentInput.length > 0 ? "pointer" : "not-allowed",
-                minWidth: "70px",
-                minHeight: "50px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                userSelect: "none",
-                transition: "all 0.15s ease",
+                padding: '12px 16px',
+                border: '2px solid #e5e7eb',
+                borderRadius: '8px',
+                background: 'white',
+                fontSize: '18px',
+                fontWeight: 'bold',
+                color: '#1f2937',
+                cursor: 'pointer',
+                minWidth: '50px',
+                minHeight: '50px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                userSelect: 'none',
+                boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+                transition: 'all 0.15s ease',
               }}
-              disabled={state.currentInput.length === 0}
-              onClick={handleKeyboardBackspace}
+              onMouseDown={(e) => {
+                e.currentTarget.style.transform = 'scale(0.95)'
+                e.currentTarget.style.background = '#f3f4f6'
+                e.currentTarget.style.borderColor = '#3b82f6'
+              }}
+              onMouseUp={(e) => {
+                e.currentTarget.style.transform = 'scale(1)'
+                e.currentTarget.style.background = 'white'
+                e.currentTarget.style.borderColor = '#e5e7eb'
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.transform = 'scale(1)'
+                e.currentTarget.style.background = 'white'
+                e.currentTarget.style.borderColor = '#e5e7eb'
+              }}
+              onClick={() => handleKeyboardInput(digit.toString())}
             >
-              ⌫
+              {digit}
             </button>
-          </div>
-        )}
+          ))}
+          <button
+            style={{
+              padding: '12px 16px',
+              border: '2px solid #dc2626',
+              borderRadius: '8px',
+              background: state.currentInput.length > 0 ? '#fef2f2' : '#f9fafb',
+              fontSize: '14px',
+              fontWeight: 'bold',
+              color: state.currentInput.length > 0 ? '#dc2626' : '#9ca3af',
+              cursor: state.currentInput.length > 0 ? 'pointer' : 'not-allowed',
+              minWidth: '70px',
+              minHeight: '50px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              userSelect: 'none',
+              transition: 'all 0.15s ease',
+            }}
+            disabled={state.currentInput.length === 0}
+            onClick={handleKeyboardBackspace}
+          >
+            ⌫
+          </button>
+        </div>
+      )}
 
       {showFinishButtons && (
         <div
           style={{
-            display: "flex",
-            justifyContent: "center",
-            gap: "8px",
-            marginTop: "12px",
-            paddingTop: "12px",
-            borderTop: "1px solid #e5e7eb",
-            flexWrap: "wrap",
+            display: 'flex',
+            justifyContent: 'center',
+            gap: '8px',
+            marginTop: '12px',
+            paddingTop: '12px',
+            borderTop: '1px solid #e5e7eb',
+            flexWrap: 'wrap',
           }}
         >
           <button
             style={{
-              padding: "10px 20px",
-              border: "none",
-              borderRadius: "6px",
-              fontSize: "14px",
-              fontWeight: "bold",
-              cursor: "pointer",
-              transition: "all 0.2s ease",
-              background: "#3b82f6",
-              color: "white",
-              minWidth: "120px",
+              padding: '10px 20px',
+              border: 'none',
+              borderRadius: '6px',
+              fontSize: '14px',
+              fontWeight: 'bold',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              background: '#3b82f6',
+              color: 'white',
+              minWidth: '120px',
             }}
             onClick={() => showResults?.()}
           >
-            {hasFoundAll ? "Finish Quiz" : "Show Results"}
+            {hasFoundAll ? 'Finish Quiz' : 'Show Results'}
           </button>
           {hasFoundSome && !hasFoundAll && !outOfGuesses && (
             <button
               style={{
-                padding: "10px 20px",
-                border: "none",
-                borderRadius: "6px",
-                fontSize: "14px",
-                fontWeight: "bold",
-                cursor: "pointer",
-                transition: "all 0.2s ease",
-                background: "#6b7280",
-                color: "white",
-                minWidth: "120px",
+                padding: '10px 20px',
+                border: 'none',
+                borderRadius: '6px',
+                fontSize: '14px',
+                fontWeight: 'bold',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
+                background: '#6b7280',
+                color: 'white',
+                minWidth: '120px',
               }}
               onClick={() => showResults?.()}
             >
@@ -905,5 +859,5 @@ export function InputPhase() {
         </div>
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/memory-quiz/components/MemoryQuizGame.tsx b/apps/web/src/arcade-games/memory-quiz/components/MemoryQuizGame.tsx
index 30b551b4..db19f8c2 100644
--- a/apps/web/src/arcade-games/memory-quiz/components/MemoryQuizGame.tsx
+++ b/apps/web/src/arcade-games/memory-quiz/components/MemoryQuizGame.tsx
@@ -1,14 +1,14 @@
-"use client";
+'use client'
 
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { PageWithNav } from "@/components/PageWithNav";
-import { css } from "../../../../styled-system/css";
-import { useMemoryQuiz } from "../Provider";
-import { DisplayPhase } from "./DisplayPhase";
-import { InputPhase } from "./InputPhase";
-import { ResultsPhase } from "./ResultsPhase";
-import { SetupPhase } from "./SetupPhase";
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { PageWithNav } from '@/components/PageWithNav'
+import { css } from '../../../../styled-system/css'
+import { useMemoryQuiz } from '../Provider'
+import { DisplayPhase } from './DisplayPhase'
+import { InputPhase } from './InputPhase'
+import { ResultsPhase } from './ResultsPhase'
+import { SetupPhase } from './SetupPhase'
 
 // CSS animations that need to be global
 const globalAnimations = `
@@ -59,23 +59,23 @@ const globalAnimations = `
     transform: translateX(-50%) translateY(0);
   }
 }
-`;
+`
 
 export function MemoryQuizGame() {
-  const router = useRouter();
-  const { state, exitSession, resetGame } = useMemoryQuiz();
+  const router = useRouter()
+  const { state, exitSession, resetGame } = useMemoryQuiz()
 
   return (
     <PageWithNav
       navTitle="Memory Lightning"
       navEmoji="🧠"
-      emphasizePlayerSelection={state.gamePhase === "setup"}
+      emphasizePlayerSelection={state.gamePhase === 'setup'}
       onExitSession={() => {
-        exitSession?.();
-        router.push("/arcade");
+        exitSession?.()
+        router.push('/arcade')
       }}
       onNewGame={() => {
-        resetGame?.();
+        resetGame?.()
       }}
     >
       <style dangerouslySetInnerHTML={{ __html: globalAnimations }} />
@@ -83,39 +83,39 @@ export function MemoryQuizGame() {
       <div
         style={{
           flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          overflow: "auto",
-          padding: "20px 8px",
-          minHeight: "100vh",
-          background: "linear-gradient(135deg, #f8fafc, #e2e8f0)",
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'auto',
+          padding: '20px 8px',
+          minHeight: '100vh',
+          background: 'linear-gradient(135deg, #f8fafc, #e2e8f0)',
         }}
       >
         <div
           style={{
-            maxWidth: "100%",
-            margin: "0 auto",
+            maxWidth: '100%',
+            margin: '0 auto',
             flex: 1,
-            display: "flex",
-            flexDirection: "column",
+            display: 'flex',
+            flexDirection: 'column',
           }}
         >
           <div
             className={css({
-              textAlign: "center",
-              mb: "4",
+              textAlign: 'center',
+              mb: '4',
               flexShrink: 0,
             })}
           >
             <Link
               href="/arcade"
               className={css({
-                display: "inline-flex",
-                alignItems: "center",
-                color: "gray.600",
-                textDecoration: "none",
-                mb: "4",
-                _hover: { color: "gray.800" },
+                display: 'inline-flex',
+                alignItems: 'center',
+                color: 'gray.600',
+                textDecoration: 'none',
+                mb: '4',
+                _hover: { color: 'gray.800' },
               })}
             >
               ← Back to Champion Arena
@@ -124,34 +124,34 @@ export function MemoryQuizGame() {
 
           <div
             className={css({
-              bg: "white",
-              rounded: "xl",
-              shadow: "xl",
-              overflow: "hidden",
-              border: "1px solid",
-              borderColor: "gray.200",
+              bg: 'white',
+              rounded: 'xl',
+              shadow: 'xl',
+              overflow: 'hidden',
+              border: '1px solid',
+              borderColor: 'gray.200',
               flex: 1,
-              display: "flex",
-              flexDirection: "column",
-              maxHeight: "100%",
+              display: 'flex',
+              flexDirection: 'column',
+              maxHeight: '100%',
             })}
           >
             <div
               className={css({
                 flex: 1,
-                display: "flex",
-                flexDirection: "column",
-                overflow: "auto",
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'auto',
               })}
             >
-              {state.gamePhase === "setup" && <SetupPhase />}
-              {state.gamePhase === "display" && <DisplayPhase />}
-              {state.gamePhase === "input" && <InputPhase key="input-phase" />}
-              {state.gamePhase === "results" && <ResultsPhase />}
+              {state.gamePhase === 'setup' && <SetupPhase />}
+              {state.gamePhase === 'display' && <DisplayPhase />}
+              {state.gamePhase === 'input' && <InputPhase key="input-phase" />}
+              {state.gamePhase === 'results' && <ResultsPhase />}
             </div>
           </div>
         </div>
       </div>
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/memory-quiz/components/ResultsCardGrid.tsx b/apps/web/src/arcade-games/memory-quiz/components/ResultsCardGrid.tsx
index eb2ced6e..c175b9c9 100644
--- a/apps/web/src/arcade-games/memory-quiz/components/ResultsCardGrid.tsx
+++ b/apps/web/src/arcade-games/memory-quiz/components/ResultsCardGrid.tsx
@@ -1,95 +1,95 @@
-import { AbacusReact } from "@soroban/abacus-react";
-import type { MemoryQuizState } from "../types";
+import { AbacusReact } from '@soroban/abacus-react'
+import type { MemoryQuizState } from '../types'
 
 interface ResultsCardGridProps {
-  state: MemoryQuizState;
+  state: MemoryQuizState
 }
 
 export function ResultsCardGrid({ state }: ResultsCardGridProps) {
-  if (state.quizCards.length === 0) return null;
+  if (state.quizCards.length === 0) return null
 
   // Calculate optimal grid layout based on number of cards (same as CardGrid)
-  const cardCount = state.quizCards.length;
+  const cardCount = state.quizCards.length
 
   // Define static grid classes that Panda can generate (same as CardGrid)
   const getGridClass = (count: number) => {
-    if (count <= 2) return "repeat(2, 1fr)";
-    if (count <= 4) return "repeat(2, 1fr)";
-    if (count <= 6) return "repeat(3, 1fr)";
-    if (count <= 9) return "repeat(3, 1fr)";
-    if (count <= 12) return "repeat(4, 1fr)";
-    return "repeat(5, 1fr)";
-  };
+    if (count <= 2) return 'repeat(2, 1fr)'
+    if (count <= 4) return 'repeat(2, 1fr)'
+    if (count <= 6) return 'repeat(3, 1fr)'
+    if (count <= 9) return 'repeat(3, 1fr)'
+    if (count <= 12) return 'repeat(4, 1fr)'
+    return 'repeat(5, 1fr)'
+  }
 
   const getCardSize = (count: number) => {
-    if (count <= 2) return { minSize: "180px", cardHeight: "160px" };
-    if (count <= 4) return { minSize: "160px", cardHeight: "150px" };
-    if (count <= 6) return { minSize: "140px", cardHeight: "140px" };
-    if (count <= 9) return { minSize: "120px", cardHeight: "130px" };
-    if (count <= 12) return { minSize: "110px", cardHeight: "120px" };
-    return { minSize: "100px", cardHeight: "110px" };
-  };
+    if (count <= 2) return { minSize: '180px', cardHeight: '160px' }
+    if (count <= 4) return { minSize: '160px', cardHeight: '150px' }
+    if (count <= 6) return { minSize: '140px', cardHeight: '140px' }
+    if (count <= 9) return { minSize: '120px', cardHeight: '130px' }
+    if (count <= 12) return { minSize: '110px', cardHeight: '120px' }
+    return { minSize: '100px', cardHeight: '110px' }
+  }
 
-  const gridClass = getGridClass(cardCount);
-  const cardSize = getCardSize(cardCount);
+  const gridClass = getGridClass(cardCount)
+  const cardSize = getCardSize(cardCount)
 
   return (
     <div>
       <div
         style={{
-          display: "grid",
-          gap: "8px",
-          padding: "6px",
-          justifyContent: "center",
-          maxWidth: "100%",
-          margin: "0 auto",
+          display: 'grid',
+          gap: '8px',
+          padding: '6px',
+          justifyContent: 'center',
+          maxWidth: '100%',
+          margin: '0 auto',
           gridTemplateColumns: gridClass,
         }}
       >
         {state.quizCards.map((card, index) => {
-          const isRevealed = true; // All cards revealed in results
-          const wasFound = state.foundNumbers.includes(card.number);
+          const isRevealed = true // All cards revealed in results
+          const wasFound = state.foundNumbers.includes(card.number)
 
           return (
             <div
               key={`${card.number}-${index}`}
               style={{
-                perspective: "1000px",
-                position: "relative",
-                aspectRatio: "3/4",
+                perspective: '1000px',
+                position: 'relative',
+                aspectRatio: '3/4',
                 height: cardSize.cardHeight,
                 minWidth: cardSize.minSize,
               }}
             >
               <div
                 style={{
-                  position: "relative",
-                  width: "100%",
-                  height: "100%",
-                  textAlign: "center",
-                  transition: "transform 0.8s",
-                  transformStyle: "preserve-3d",
-                  transform: isRevealed ? "rotateY(180deg)" : "rotateY(0deg)",
+                  position: 'relative',
+                  width: '100%',
+                  height: '100%',
+                  textAlign: 'center',
+                  transition: 'transform 0.8s',
+                  transformStyle: 'preserve-3d',
+                  transform: isRevealed ? 'rotateY(180deg)' : 'rotateY(0deg)',
                 }}
               >
                 {/* Card back (hidden state) - not visible in results */}
                 <div
                   style={{
-                    position: "absolute",
-                    width: "100%",
-                    height: "100%",
-                    backfaceVisibility: "hidden",
-                    borderRadius: "8px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
-                    background: "linear-gradient(135deg, #6c5ce7, #a29bfe)",
-                    color: "white",
-                    fontSize: "24px",
-                    fontWeight: "bold",
-                    textShadow: "1px 1px 2px rgba(0, 0, 0, 0.3)",
-                    border: "2px solid #5f3dc4",
+                    position: 'absolute',
+                    width: '100%',
+                    height: '100%',
+                    backfaceVisibility: 'hidden',
+                    borderRadius: '8px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+                    background: 'linear-gradient(135deg, #6c5ce7, #a29bfe)',
+                    color: 'white',
+                    fontSize: '24px',
+                    fontWeight: 'bold',
+                    textShadow: '1px 1px 2px rgba(0, 0, 0, 0.3)',
+                    border: '2px solid #5f3dc4',
                   }}
                 >
                   <div style={{ opacity: 0.8 }}>?</div>
@@ -98,39 +98,39 @@ export function ResultsCardGrid({ state }: ResultsCardGridProps) {
                 {/* Card front (revealed state) with success/failure indicators */}
                 <div
                   style={{
-                    position: "absolute",
-                    width: "100%",
-                    height: "100%",
-                    backfaceVisibility: "hidden",
-                    borderRadius: "8px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
-                    background: "white",
-                    border: "2px solid",
-                    borderColor: wasFound ? "#10b981" : "#ef4444",
-                    transform: "rotateY(180deg)",
+                    position: 'absolute',
+                    width: '100%',
+                    height: '100%',
+                    backfaceVisibility: 'hidden',
+                    borderRadius: '8px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+                    background: 'white',
+                    border: '2px solid',
+                    borderColor: wasFound ? '#10b981' : '#ef4444',
+                    transform: 'rotateY(180deg)',
                   }}
                 >
                   <div
                     style={{
-                      width: "100%",
-                      height: "100%",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      overflow: "hidden",
-                      padding: "4px",
+                      width: '100%',
+                      height: '100%',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      overflow: 'hidden',
+                      padding: '4px',
                     }}
                   >
                     <div
                       style={{
-                        width: "100%",
-                        height: "100%",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
                       }}
                     >
                       <AbacusReact
@@ -150,74 +150,72 @@ export function ResultsCardGrid({ state }: ResultsCardGridProps) {
                   {/* Player indicator overlay */}
                   <div
                     style={{
-                      position: "absolute",
-                      top: "4px",
-                      right: "4px",
-                      minWidth: wasFound ? "24px" : "20px",
-                      minHeight: "20px",
-                      maxHeight: "48px",
-                      borderRadius: wasFound ? "8px" : "50%",
-                      background: wasFound ? "#10b981" : "#ef4444",
-                      color: "white",
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontSize: wasFound ? "14px" : "12px",
-                      fontWeight: "bold",
-                      boxShadow: "0 1px 2px rgba(0, 0, 0, 0.2)",
-                      padding: wasFound ? "2px" : "0",
-                      gap: "1px",
-                      overflow: "hidden",
+                      position: 'absolute',
+                      top: '4px',
+                      right: '4px',
+                      minWidth: wasFound ? '24px' : '20px',
+                      minHeight: '20px',
+                      maxHeight: '48px',
+                      borderRadius: wasFound ? '8px' : '50%',
+                      background: wasFound ? '#10b981' : '#ef4444',
+                      color: 'white',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      fontSize: wasFound ? '14px' : '12px',
+                      fontWeight: 'bold',
+                      boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
+                      padding: wasFound ? '2px' : '0',
+                      gap: '1px',
+                      overflow: 'hidden',
                     }}
                   >
                     {wasFound
                       ? (() => {
                           // Get the userId who found this number
-                          const foundByUserId =
-                            state.numberFoundBy?.[card.number];
-                          if (!foundByUserId) return "✓";
+                          const foundByUserId = state.numberFoundBy?.[card.number]
+                          if (!foundByUserId) return '✓'
 
                           // Get all players on that team
                           const teamPlayers = state.activePlayers
                             ?.filter((playerId) => {
-                              const metadata = state.playerMetadata?.[playerId];
-                              return metadata?.userId === foundByUserId;
+                              const metadata = state.playerMetadata?.[playerId]
+                              return metadata?.userId === foundByUserId
                             })
                             .map((playerId) => state.playerMetadata?.[playerId])
-                            .filter(Boolean);
+                            .filter(Boolean)
 
-                          if (!teamPlayers || teamPlayers.length === 0)
-                            return "✓";
+                          if (!teamPlayers || teamPlayers.length === 0) return '✓'
 
                           // Display emojis (stacked vertically if multiple)
                           return teamPlayers.map((player, idx) => (
                             <span
                               key={idx}
                               style={{
-                                lineHeight: "1",
-                                fontSize: "14px",
+                                lineHeight: '1',
+                                fontSize: '14px',
                               }}
                             >
-                              {player?.emoji || "🎮"}
+                              {player?.emoji || '🎮'}
                             </span>
-                          ));
+                          ))
                         })()
-                      : "✗"}
+                      : '✗'}
                   </div>
 
                   {/* Number label overlay */}
                   <div
                     style={{
-                      position: "absolute",
-                      bottom: "4px",
-                      left: "4px",
-                      padding: "2px 4px",
-                      borderRadius: "3px",
-                      background: "rgba(0, 0, 0, 0.7)",
-                      color: "white",
-                      fontSize: "10px",
-                      fontWeight: "bold",
+                      position: 'absolute',
+                      bottom: '4px',
+                      left: '4px',
+                      padding: '2px 4px',
+                      borderRadius: '3px',
+                      background: 'rgba(0, 0, 0, 0.7)',
+                      color: 'white',
+                      fontSize: '10px',
+                      fontWeight: 'bold',
                     }}
                   >
                     {card.number}
@@ -225,7 +223,7 @@ export function ResultsCardGrid({ state }: ResultsCardGridProps) {
                 </div>
               </div>
             </div>
-          );
+          )
         })}
       </div>
 
@@ -233,26 +231,24 @@ export function ResultsCardGrid({ state }: ResultsCardGridProps) {
       {cardCount > 8 && (
         <div
           style={{
-            marginTop: "8px",
-            padding: "6px 8px",
-            background: "#eff6ff",
-            borderRadius: "6px",
-            border: "1px solid #bfdbfe",
-            textAlign: "center",
-            fontSize: "12px",
-            color: "#1d4ed8",
+            marginTop: '8px',
+            padding: '6px 8px',
+            background: '#eff6ff',
+            borderRadius: '6px',
+            border: '1px solid #bfdbfe',
+            textAlign: 'center',
+            fontSize: '12px',
+            color: '#1d4ed8',
           }}
         >
-          <strong>{state.foundNumbers.length}</strong> of{" "}
-          <strong>{cardCount}</strong> cards found
+          <strong>{state.foundNumbers.length}</strong> of <strong>{cardCount}</strong> cards found
           {state.foundNumbers.length > 0 && (
-            <span style={{ marginLeft: "6px", fontWeight: "normal" }}>
-              ({Math.round((state.foundNumbers.length / cardCount) * 100)}%
-              complete)
+            <span style={{ marginLeft: '6px', fontWeight: 'normal' }}>
+              ({Math.round((state.foundNumbers.length / cardCount) * 100)}% complete)
             </span>
           )}
         </div>
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/memory-quiz/components/ResultsPhase.tsx b/apps/web/src/arcade-games/memory-quiz/components/ResultsPhase.tsx
index d348b28f..44968b3f 100644
--- a/apps/web/src/arcade-games/memory-quiz/components/ResultsPhase.tsx
+++ b/apps/web/src/arcade-games/memory-quiz/components/ResultsPhase.tsx
@@ -1,38 +1,34 @@
-import { useAbacusConfig } from "@soroban/abacus-react";
-import { useMemoryQuiz } from "../Provider";
-import {
-  DIFFICULTY_LEVELS,
-  type DifficultyLevel,
-  type QuizCard,
-} from "../types";
-import { ResultsCardGrid } from "./ResultsCardGrid";
+import { useAbacusConfig } from '@soroban/abacus-react'
+import { useMemoryQuiz } from '../Provider'
+import { DIFFICULTY_LEVELS, type DifficultyLevel, type QuizCard } from '../types'
+import { ResultsCardGrid } from './ResultsCardGrid'
 
 // Generate quiz cards with difficulty-based number ranges
 const generateQuizCards = (
   count: number,
   difficulty: DifficultyLevel,
-  appConfig: any,
+  appConfig: any
 ): QuizCard[] => {
-  const { min, max } = DIFFICULTY_LEVELS[difficulty].range;
+  const { min, max } = DIFFICULTY_LEVELS[difficulty].range
 
   // Generate unique numbers - no duplicates allowed
-  const numbers: number[] = [];
-  const maxAttempts = (max - min + 1) * 10; // Prevent infinite loops
-  let attempts = 0;
+  const numbers: number[] = []
+  const maxAttempts = (max - min + 1) * 10 // Prevent infinite loops
+  let attempts = 0
 
   while (numbers.length < count && attempts < maxAttempts) {
-    const newNumber = Math.floor(Math.random() * (max - min + 1)) + min;
+    const newNumber = Math.floor(Math.random() * (max - min + 1)) + min
     if (!numbers.includes(newNumber)) {
-      numbers.push(newNumber);
+      numbers.push(newNumber)
     }
-    attempts++;
+    attempts++
   }
 
   // If we couldn't generate enough unique numbers, fill with sequential numbers
   if (numbers.length < count) {
     for (let i = min; i <= max && numbers.length < count; i++) {
       if (!numbers.includes(i)) {
-        numbers.push(i);
+        numbers.push(i)
       }
     }
   }
@@ -41,131 +37,129 @@ const generateQuizCards = (
     number,
     svgComponent: <div />, // Placeholder - not used in results phase
     element: null,
-  }));
-};
+  }))
+}
 
 export function ResultsPhase() {
-  const { state, resetGame, startQuiz } = useMemoryQuiz();
-  const appConfig = useAbacusConfig();
-  const correct = state.foundNumbers.length;
-  const total = state.correctAnswers.length;
-  const percentage = Math.round((correct / total) * 100);
+  const { state, resetGame, startQuiz } = useMemoryQuiz()
+  const appConfig = useAbacusConfig()
+  const correct = state.foundNumbers.length
+  const total = state.correctAnswers.length
+  const percentage = Math.round((correct / total) * 100)
 
   return (
     <div
       style={{
-        textAlign: "center",
-        padding: "12px",
-        maxWidth: "800px",
-        margin: "0 auto",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "flex-start",
+        textAlign: 'center',
+        padding: '12px',
+        maxWidth: '800px',
+        margin: '0 auto',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
       }}
     >
       <h3
         style={{
-          marginBottom: "20px",
-          color: "#1f2937",
-          fontSize: "18px",
-          fontWeight: "600",
+          marginBottom: '20px',
+          color: '#1f2937',
+          fontSize: '18px',
+          fontWeight: '600',
         }}
       >
         Quiz Results
       </h3>
       <div
         style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          gap: "16px",
-          marginBottom: "20px",
-          padding: "16px",
-          background: "#f9fafb",
-          borderRadius: "8px",
-          flexWrap: "wrap",
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: '16px',
+          marginBottom: '20px',
+          padding: '16px',
+          background: '#f9fafb',
+          borderRadius: '8px',
+          flexWrap: 'wrap',
         }}
       >
         <div
           style={{
-            width: "80px",
-            height: "80px",
-            borderRadius: "50%",
-            background: "linear-gradient(45deg, #3b82f6, #2563eb)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            color: "white",
-            fontSize: "18px",
-            fontWeight: "bold",
+            width: '80px',
+            height: '80px',
+            borderRadius: '50%',
+            background: 'linear-gradient(45deg, #3b82f6, #2563eb)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            fontSize: '18px',
+            fontWeight: 'bold',
           }}
         >
           <span>{percentage}%</span>
         </div>
         <div
           style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "8px",
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
           }}
         >
           <div
             style={{
-              display: "flex",
-              justifyContent: "space-between",
-              gap: "12px",
-              fontSize: "16px",
+              display: 'flex',
+              justifyContent: 'space-between',
+              gap: '12px',
+              fontSize: '16px',
             }}
           >
-            <span style={{ fontWeight: "500", color: "#6b7280" }}>
-              Correct:
-            </span>
-            <span style={{ fontWeight: "bold" }}>{correct}</span>
+            <span style={{ fontWeight: '500', color: '#6b7280' }}>Correct:</span>
+            <span style={{ fontWeight: 'bold' }}>{correct}</span>
           </div>
           <div
             style={{
-              display: "flex",
-              justifyContent: "space-between",
-              gap: "12px",
-              fontSize: "16px",
+              display: 'flex',
+              justifyContent: 'space-between',
+              gap: '12px',
+              fontSize: '16px',
             }}
           >
-            <span style={{ fontWeight: "500", color: "#6b7280" }}>Total:</span>
-            <span style={{ fontWeight: "bold" }}>{total}</span>
+            <span style={{ fontWeight: '500', color: '#6b7280' }}>Total:</span>
+            <span style={{ fontWeight: 'bold' }}>{total}</span>
           </div>
         </div>
       </div>
 
       {/* Multiplayer Leaderboard - Competitive Mode */}
-      {state.playMode === "competitive" &&
+      {state.playMode === 'competitive' &&
         state.activePlayers &&
         state.activePlayers.length > 1 && (
           <div
             style={{
-              marginBottom: "16px",
-              padding: "16px",
-              background: "linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)",
-              borderRadius: "12px",
-              border: "2px solid #f59e0b",
+              marginBottom: '16px',
+              padding: '16px',
+              background: 'linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)',
+              borderRadius: '12px',
+              border: '2px solid #f59e0b',
             }}
           >
             <div
               style={{
-                fontSize: "16px",
-                fontWeight: "bold",
-                color: "#92400e",
-                marginBottom: "12px",
-                textAlign: "center",
+                fontSize: '16px',
+                fontWeight: 'bold',
+                color: '#92400e',
+                marginBottom: '12px',
+                textAlign: 'center',
               }}
             >
               🏆 FINAL LEADERBOARD
             </div>
             <div
               style={{
-                display: "flex",
-                flexDirection: "column",
-                gap: "8px",
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '8px',
               }}
             >
               {(() => {
@@ -173,30 +167,27 @@ export function ResultsPhase() {
                 const userTeams = new Map<
                   string,
                   {
-                    userId: string;
-                    players: any[];
-                    score: { correct: number; incorrect: number };
+                    userId: string
+                    players: any[]
+                    score: { correct: number; incorrect: number }
                   }
-                >();
+                >()
 
-                console.log("🏆 [ResultsPhase] Building leaderboard:", {
+                console.log('🏆 [ResultsPhase] Building leaderboard:', {
                   activePlayers: state.activePlayers,
                   playerMetadata: state.playerMetadata,
                   playerScores: state.playerScores,
-                });
+                })
 
                 for (const playerId of state.activePlayers) {
-                  const metadata = state.playerMetadata?.[playerId];
-                  const userId = metadata?.userId;
-                  console.log(
-                    "🏆 [ResultsPhase] Processing player for leaderboard:",
-                    {
-                      playerId,
-                      metadata,
-                      userId,
-                    },
-                  );
-                  if (!userId) continue;
+                  const metadata = state.playerMetadata?.[playerId]
+                  const userId = metadata?.userId
+                  console.log('🏆 [ResultsPhase] Processing player for leaderboard:', {
+                    playerId,
+                    metadata,
+                    userId,
+                  })
+                  if (!userId) continue
 
                   if (!userTeams.has(userId)) {
                     userTeams.set(userId, {
@@ -206,84 +197,75 @@ export function ResultsPhase() {
                         correct: 0,
                         incorrect: 0,
                       },
-                    });
+                    })
                   }
-                  userTeams.get(userId)!.players.push(metadata);
+                  userTeams.get(userId)!.players.push(metadata)
                 }
 
-                console.log("🏆 [ResultsPhase] UserTeams created:", {
+                console.log('🏆 [ResultsPhase] UserTeams created:', {
                   count: userTeams.size,
                   teams: Array.from(userTeams.entries()),
-                });
+                })
 
                 // Sort teams by score
                 return Array.from(userTeams.values())
                   .sort((a, b) => {
-                    const aScore = a.score.correct - a.score.incorrect * 0.5;
-                    const bScore = b.score.correct - b.score.incorrect * 0.5;
-                    return bScore - aScore;
+                    const aScore = a.score.correct - a.score.incorrect * 0.5
+                    const bScore = b.score.correct - b.score.incorrect * 0.5
+                    return bScore - aScore
                   })
                   .map((team, index) => {
-                    const netScore =
-                      team.score.correct - team.score.incorrect * 0.5;
+                    const netScore = team.score.correct - team.score.incorrect * 0.5
                     return (
                       <div
                         key={team.userId}
                         style={{
-                          padding: "14px 16px",
+                          padding: '14px 16px',
                           background:
                             index === 0
-                              ? "linear-gradient(135deg, #fef3c7 0%, #fde68a 50%)"
-                              : "white",
-                          borderRadius: "10px",
-                          border:
-                            index === 0
-                              ? "3px solid #f59e0b"
-                              : "1px solid #e5e7eb",
-                          boxShadow:
-                            index === 0
-                              ? "0 4px 12px rgba(245, 158, 11, 0.3)"
-                              : "none",
+                              ? 'linear-gradient(135deg, #fef3c7 0%, #fde68a 50%)'
+                              : 'white',
+                          borderRadius: '10px',
+                          border: index === 0 ? '3px solid #f59e0b' : '1px solid #e5e7eb',
+                          boxShadow: index === 0 ? '0 4px 12px rgba(245, 158, 11, 0.3)' : 'none',
                         }}
                       >
                         {/* Team header with rank and stats */}
                         <div
                           style={{
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "space-between",
-                            marginBottom: "10px",
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            marginBottom: '10px',
                           }}
                         >
                           <div
                             style={{
-                              display: "flex",
-                              alignItems: "center",
-                              gap: "10px",
+                              display: 'flex',
+                              alignItems: 'center',
+                              gap: '10px',
                             }}
                           >
-                            <span
-                              style={{ fontSize: "24px", minWidth: "32px" }}
-                            >
+                            <span style={{ fontSize: '24px', minWidth: '32px' }}>
                               {index === 0
-                                ? "🏆"
+                                ? '🏆'
                                 : index === 1
-                                  ? "🥈"
+                                  ? '🥈'
                                   : index === 2
-                                    ? "🥉"
+                                    ? '🥉'
                                     : `${index + 1}.`}
                             </span>
                             <div
                               style={{
-                                display: "flex",
-                                flexDirection: "column",
+                                display: 'flex',
+                                flexDirection: 'column',
                               }}
                             >
                               <span
                                 style={{
-                                  fontWeight: "bold",
-                                  fontSize: index === 0 ? "20px" : "18px",
-                                  color: index === 0 ? "#f59e0b" : "#1f2937",
+                                  fontWeight: 'bold',
+                                  fontSize: index === 0 ? '20px' : '18px',
+                                  color: index === 0 ? '#f59e0b' : '#1f2937',
                                 }}
                               >
                                 {netScore.toFixed(1)}
@@ -291,9 +273,9 @@ export function ResultsPhase() {
                               {index === 0 && (
                                 <span
                                   style={{
-                                    fontSize: "11px",
-                                    color: "#92400e",
-                                    fontWeight: "bold",
+                                    fontSize: '11px',
+                                    color: '#92400e',
+                                    fontWeight: 'bold',
                                   }}
                                 >
                                   CHAMPION
@@ -303,83 +285,73 @@ export function ResultsPhase() {
                           </div>
                           <div
                             style={{
-                              display: "flex",
-                              alignItems: "center",
-                              gap: "12px",
+                              display: 'flex',
+                              alignItems: 'center',
+                              gap: '12px',
                             }}
                           >
                             <div
                               style={{
-                                display: "flex",
-                                flexDirection: "column",
-                                alignItems: "center",
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
                               }}
                             >
                               <span
                                 style={{
-                                  color: "#10b981",
-                                  fontWeight: "bold",
-                                  fontSize: "16px",
+                                  color: '#10b981',
+                                  fontWeight: 'bold',
+                                  fontSize: '16px',
                                 }}
                               >
                                 ✓{team.score.correct}
                               </span>
-                              <span
-                                style={{ fontSize: "10px", color: "#6b7280" }}
-                              >
-                                correct
-                              </span>
+                              <span style={{ fontSize: '10px', color: '#6b7280' }}>correct</span>
                             </div>
                             <div
                               style={{
-                                display: "flex",
-                                flexDirection: "column",
-                                alignItems: "center",
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
                               }}
                             >
                               <span
                                 style={{
-                                  color: "#ef4444",
-                                  fontWeight: "bold",
-                                  fontSize: "16px",
+                                  color: '#ef4444',
+                                  fontWeight: 'bold',
+                                  fontSize: '16px',
                                 }}
                               >
                                 ✗{team.score.incorrect}
                               </span>
-                              <span
-                                style={{ fontSize: "10px", color: "#6b7280" }}
-                              >
-                                wrong
-                              </span>
+                              <span style={{ fontSize: '10px', color: '#6b7280' }}>wrong</span>
                             </div>
                           </div>
                         </div>
                         {/* Players list */}
                         <div
                           style={{
-                            display: "flex",
-                            flexDirection: "column",
-                            gap: "6px",
-                            paddingLeft: "42px",
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '6px',
+                            paddingLeft: '42px',
                           }}
                         >
                           {team.players.map((player, i) => (
                             <div
                               key={i}
                               style={{
-                                display: "flex",
-                                alignItems: "center",
-                                gap: "8px",
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '8px',
                               }}
                             >
-                              <span style={{ fontSize: "18px" }}>
-                                {player?.emoji || "🎮"}
-                              </span>
+                              <span style={{ fontSize: '18px' }}>{player?.emoji || '🎮'}</span>
                               <span
                                 style={{
-                                  color: "#1f2937",
-                                  fontWeight: "500",
-                                  fontSize: "14px",
+                                  color: '#1f2937',
+                                  fontWeight: '500',
+                                  fontSize: '14px',
                                 }}
                               >
                                 {player?.name || `Player ${i + 1}`}
@@ -388,42 +360,42 @@ export function ResultsPhase() {
                           ))}
                         </div>
                       </div>
-                    );
-                  });
+                    )
+                  })
               })()}
             </div>
           </div>
         )}
 
       {/* Multiplayer Stats - Cooperative Mode */}
-      {state.playMode === "cooperative" &&
+      {state.playMode === 'cooperative' &&
         state.activePlayers &&
         state.activePlayers.length > 1 && (
           <div
             style={{
-              marginBottom: "16px",
-              padding: "16px",
-              background: "linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)",
-              borderRadius: "12px",
-              border: "2px solid #3b82f6",
+              marginBottom: '16px',
+              padding: '16px',
+              background: 'linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)',
+              borderRadius: '12px',
+              border: '2px solid #3b82f6',
             }}
           >
             <div
               style={{
-                fontSize: "16px",
-                fontWeight: "bold",
-                color: "#1e3a8a",
-                marginBottom: "12px",
-                textAlign: "center",
+                fontSize: '16px',
+                fontWeight: 'bold',
+                color: '#1e3a8a',
+                marginBottom: '12px',
+                textAlign: 'center',
               }}
             >
               🤝 TEAM CONTRIBUTIONS
             </div>
             <div
               style={{
-                display: "flex",
-                flexDirection: "column",
-                gap: "8px",
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '8px',
               }}
             >
               {(() => {
@@ -431,30 +403,27 @@ export function ResultsPhase() {
                 const userTeams = new Map<
                   string,
                   {
-                    userId: string;
-                    players: any[];
-                    score: { correct: number; incorrect: number };
+                    userId: string
+                    players: any[]
+                    score: { correct: number; incorrect: number }
                   }
-                >();
+                >()
 
-                console.log("🤝 [ResultsPhase] Building team contributions:", {
+                console.log('🤝 [ResultsPhase] Building team contributions:', {
                   activePlayers: state.activePlayers,
                   playerMetadata: state.playerMetadata,
                   playerScores: state.playerScores,
-                });
+                })
 
                 for (const playerId of state.activePlayers) {
-                  const metadata = state.playerMetadata?.[playerId];
-                  const userId = metadata?.userId;
-                  console.log(
-                    "🤝 [ResultsPhase] Processing player for contributions:",
-                    {
-                      playerId,
-                      metadata,
-                      userId,
-                    },
-                  );
-                  if (!userId) continue;
+                  const metadata = state.playerMetadata?.[playerId]
+                  const userId = metadata?.userId
+                  console.log('🤝 [ResultsPhase] Processing player for contributions:', {
+                    playerId,
+                    metadata,
+                    userId,
+                  })
+                  if (!userId) continue
 
                   if (!userTeams.has(userId)) {
                     userTeams.set(userId, {
@@ -464,18 +433,15 @@ export function ResultsPhase() {
                         correct: 0,
                         incorrect: 0,
                       },
-                    });
+                    })
                   }
-                  userTeams.get(userId)!.players.push(metadata);
+                  userTeams.get(userId)!.players.push(metadata)
                 }
 
-                console.log(
-                  "🤝 [ResultsPhase] UserTeams created for contributions:",
-                  {
-                    count: userTeams.size,
-                    teams: Array.from(userTeams.entries()),
-                  },
-                );
+                console.log('🤝 [ResultsPhase] UserTeams created for contributions:', {
+                  count: userTeams.size,
+                  teams: Array.from(userTeams.entries()),
+                })
 
                 // Sort teams by correct answers
                 return Array.from(userTeams.values())
@@ -484,33 +450,33 @@ export function ResultsPhase() {
                     <div
                       key={team.userId}
                       style={{
-                        padding: "12px 14px",
-                        background: "white",
-                        borderRadius: "8px",
-                        border: "1px solid #e5e7eb",
+                        padding: '12px 14px',
+                        background: 'white',
+                        borderRadius: '8px',
+                        border: '1px solid #e5e7eb',
                       }}
                     >
                       {/* Team header with stats */}
                       <div
                         style={{
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "space-between",
-                          marginBottom: "8px",
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                          marginBottom: '8px',
                         }}
                       >
                         <div
                           style={{
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "8px",
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '8px',
                           }}
                         >
                           <span
                             style={{
-                              fontSize: "16px",
-                              fontWeight: "600",
-                              color: "#6b7280",
+                              fontSize: '16px',
+                              fontWeight: '600',
+                              color: '#6b7280',
                             }}
                           >
                             Team {index + 1}
@@ -518,20 +484,16 @@ export function ResultsPhase() {
                         </div>
                         <div
                           style={{
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "10px",
-                            fontSize: "14px",
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '10px',
+                            fontSize: '14px',
                           }}
                         >
-                          <span
-                            style={{ color: "#10b981", fontWeight: "bold" }}
-                          >
+                          <span style={{ color: '#10b981', fontWeight: 'bold' }}>
                             ✓ {team.score.correct}
                           </span>
-                          <span
-                            style={{ color: "#ef4444", fontWeight: "bold" }}
-                          >
+                          <span style={{ color: '#ef4444', fontWeight: 'bold' }}>
                             ✗ {team.score.incorrect}
                           </span>
                         </div>
@@ -539,29 +501,27 @@ export function ResultsPhase() {
                       {/* Players list */}
                       <div
                         style={{
-                          display: "flex",
-                          flexDirection: "column",
-                          gap: "4px",
-                          paddingLeft: "8px",
+                          display: 'flex',
+                          flexDirection: 'column',
+                          gap: '4px',
+                          paddingLeft: '8px',
                         }}
                       >
                         {team.players.map((player, i) => (
                           <div
                             key={i}
                             style={{
-                              display: "flex",
-                              alignItems: "center",
-                              gap: "6px",
-                              fontSize: "13px",
+                              display: 'flex',
+                              alignItems: 'center',
+                              gap: '6px',
+                              fontSize: '13px',
                             }}
                           >
-                            <span style={{ fontSize: "18px" }}>
-                              {player?.emoji || "🎮"}
-                            </span>
+                            <span style={{ fontSize: '18px' }}>{player?.emoji || '🎮'}</span>
                             <span
                               style={{
-                                color: "#1f2937",
-                                fontWeight: "500",
+                                color: '#1f2937',
+                                fontWeight: '500',
                               }}
                             >
                               {player?.name || `Player ${i + 1}`}
@@ -570,63 +530,63 @@ export function ResultsPhase() {
                         ))}
                       </div>
                     </div>
-                  ));
+                  ))
               })()}
             </div>
           </div>
         )}
 
       {/* Results card grid - reuse CardGrid but with all cards revealed and status indicators */}
-      <div style={{ marginTop: "12px", flex: 1, overflow: "auto" }}>
+      <div style={{ marginTop: '12px', flex: 1, overflow: 'auto' }}>
         <ResultsCardGrid state={state} />
       </div>
 
       <div
         style={{
-          display: "flex",
-          justifyContent: "center",
-          gap: "8px",
-          marginTop: "16px",
-          flexWrap: "wrap",
+          display: 'flex',
+          justifyContent: 'center',
+          gap: '8px',
+          marginTop: '16px',
+          flexWrap: 'wrap',
         }}
       >
         <button
           style={{
-            padding: "10px 20px",
-            border: "none",
-            borderRadius: "6px",
-            fontSize: "14px",
-            fontWeight: "bold",
-            cursor: "pointer",
-            transition: "all 0.2s ease",
-            background: "#10b981",
-            color: "white",
-            minWidth: "120px",
+            padding: '10px 20px',
+            border: 'none',
+            borderRadius: '6px',
+            fontSize: '14px',
+            fontWeight: 'bold',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
+            background: '#10b981',
+            color: 'white',
+            minWidth: '120px',
           }}
           onClick={() => {
-            resetGame?.();
+            resetGame?.()
             const quizCards = generateQuizCards(
               state.selectedCount,
               state.selectedDifficulty,
-              appConfig,
-            );
-            startQuiz?.(quizCards);
+              appConfig
+            )
+            startQuiz?.(quizCards)
           }}
         >
           Try Again
         </button>
         <button
           style={{
-            padding: "10px 20px",
-            border: "none",
-            borderRadius: "6px",
-            fontSize: "14px",
-            fontWeight: "bold",
-            cursor: "pointer",
-            transition: "all 0.2s ease",
-            background: "#6b7280",
-            color: "white",
-            minWidth: "120px",
+            padding: '10px 20px',
+            border: 'none',
+            borderRadius: '6px',
+            fontSize: '14px',
+            fontWeight: 'bold',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
+            background: '#6b7280',
+            color: 'white',
+            minWidth: '120px',
           }}
           onClick={() => resetGame?.()}
         >
@@ -634,5 +594,5 @@ export function ResultsPhase() {
         </button>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/memory-quiz/components/SetupPhase.tsx b/apps/web/src/arcade-games/memory-quiz/components/SetupPhase.tsx
index c4b1b9e0..3d1f28b4 100644
--- a/apps/web/src/arcade-games/memory-quiz/components/SetupPhase.tsx
+++ b/apps/web/src/arcade-games/memory-quiz/components/SetupPhase.tsx
@@ -1,37 +1,33 @@
-import { AbacusReact, useAbacusConfig } from "@soroban/abacus-react";
-import { useMemoryQuiz } from "../Provider";
-import {
-  DIFFICULTY_LEVELS,
-  type DifficultyLevel,
-  type QuizCard,
-} from "../types";
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import { useMemoryQuiz } from '../Provider'
+import { DIFFICULTY_LEVELS, type DifficultyLevel, type QuizCard } from '../types'
 
 // Generate quiz cards with difficulty-based number ranges
 const generateQuizCards = (
   count: number,
   difficulty: DifficultyLevel,
-  appConfig: any,
+  appConfig: any
 ): QuizCard[] => {
-  const { min, max } = DIFFICULTY_LEVELS[difficulty].range;
+  const { min, max } = DIFFICULTY_LEVELS[difficulty].range
 
   // Generate unique numbers - no duplicates allowed
-  const numbers: number[] = [];
-  const maxAttempts = (max - min + 1) * 10; // Prevent infinite loops
-  let attempts = 0;
+  const numbers: number[] = []
+  const maxAttempts = (max - min + 1) * 10 // Prevent infinite loops
+  let attempts = 0
 
   while (numbers.length < count && attempts < maxAttempts) {
-    const newNumber = Math.floor(Math.random() * (max - min + 1)) + min;
+    const newNumber = Math.floor(Math.random() * (max - min + 1)) + min
     if (!numbers.includes(newNumber)) {
-      numbers.push(newNumber);
+      numbers.push(newNumber)
     }
-    attempts++;
+    attempts++
   }
 
   // If we couldn't generate enough unique numbers, fill with sequential numbers
   if (numbers.length < count) {
     for (let i = min; i <= max && numbers.length < count; i++) {
       if (!numbers.includes(i)) {
-        numbers.push(i);
+        numbers.push(i)
       }
     }
   }
@@ -54,80 +50,80 @@ const generateQuizCards = (
       />
     ),
     element: null,
-  }));
-};
+  }))
+}
 
 export function SetupPhase() {
-  const { state, setConfig, startQuiz } = useMemoryQuiz();
-  const appConfig = useAbacusConfig();
+  const { state, setConfig, startQuiz } = useMemoryQuiz()
+  const appConfig = useAbacusConfig()
 
   const handleCountSelect = (count: number) => {
-    setConfig?.("selectedCount", count);
-  };
+    setConfig?.('selectedCount', count)
+  }
 
   const handleTimeChange = (time: number) => {
-    setConfig?.("displayTime", time);
-  };
+    setConfig?.('displayTime', time)
+  }
 
   const handleDifficultySelect = (difficulty: DifficultyLevel) => {
-    setConfig?.("selectedDifficulty", difficulty);
-  };
+    setConfig?.('selectedDifficulty', difficulty)
+  }
 
-  const handlePlayModeSelect = (playMode: "cooperative" | "competitive") => {
-    setConfig?.("playMode", playMode);
-  };
+  const handlePlayModeSelect = (playMode: 'cooperative' | 'competitive') => {
+    setConfig?.('playMode', playMode)
+  }
 
   const handleStartQuiz = () => {
     const quizCards = generateQuizCards(
       state.selectedCount ?? 5,
-      state.selectedDifficulty ?? "easy",
-      appConfig,
-    );
-    startQuiz?.(quizCards);
-  };
+      state.selectedDifficulty ?? 'easy',
+      appConfig
+    )
+    startQuiz?.(quizCards)
+  }
 
   return (
     <div
       style={{
-        textAlign: "center",
-        padding: "12px",
-        maxWidth: "100%",
-        margin: "0 auto",
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
+        textAlign: 'center',
+        padding: '12px',
+        maxWidth: '100%',
+        margin: '0 auto',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
       }}
     >
       <div
         style={{
-          maxWidth: "100%",
-          margin: "0 auto",
+          maxWidth: '100%',
+          margin: '0 auto',
           flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          gap: "16px",
-          overflow: "auto",
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '16px',
+          overflow: 'auto',
         }}
       >
-        <div style={{ margin: "12px 0" }}>
+        <div style={{ margin: '12px 0' }}>
           <label
             style={{
-              display: "block",
-              fontWeight: "bold",
-              marginBottom: "8px",
-              color: "#6b7280",
-              fontSize: "14px",
+              display: 'block',
+              fontWeight: 'bold',
+              marginBottom: '8px',
+              color: '#6b7280',
+              fontSize: '14px',
             }}
           >
             Difficulty Level:
           </label>
           <div
             style={{
-              display: "grid",
-              gridTemplateColumns: "repeat(2, 1fr)",
-              gap: "8px",
-              justifyContent: "center",
+              display: 'grid',
+              gridTemplateColumns: 'repeat(2, 1fr)',
+              gap: '8px',
+              justifyContent: 'center',
             }}
           >
             {Object.entries(DIFFICULTY_LEVELS).map(([key, level]) => (
@@ -135,134 +131,116 @@ export function SetupPhase() {
                 key={key}
                 type="button"
                 style={{
-                  background:
-                    state.selectedDifficulty === key ? "#3b82f6" : "white",
-                  color: state.selectedDifficulty === key ? "white" : "#1f2937",
-                  border: "2px solid",
-                  borderColor:
-                    state.selectedDifficulty === key ? "#3b82f6" : "#d1d5db",
-                  borderRadius: "8px",
-                  padding: "8px 12px",
-                  cursor: "pointer",
-                  textAlign: "center",
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "2px",
-                  fontSize: "12px",
+                  background: state.selectedDifficulty === key ? '#3b82f6' : 'white',
+                  color: state.selectedDifficulty === key ? 'white' : '#1f2937',
+                  border: '2px solid',
+                  borderColor: state.selectedDifficulty === key ? '#3b82f6' : '#d1d5db',
+                  borderRadius: '8px',
+                  padding: '8px 12px',
+                  cursor: 'pointer',
+                  textAlign: 'center',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '2px',
+                  fontSize: '12px',
                 }}
                 onClick={() => handleDifficultySelect(key as DifficultyLevel)}
                 title={level.description}
               >
-                <div style={{ fontWeight: "bold", fontSize: "13px" }}>
-                  {level.name}
-                </div>
-                <div style={{ fontSize: "10px", opacity: 0.8 }}>
-                  {level.description}
-                </div>
+                <div style={{ fontWeight: 'bold', fontSize: '13px' }}>{level.name}</div>
+                <div style={{ fontSize: '10px', opacity: 0.8 }}>{level.description}</div>
               </button>
             ))}
           </div>
         </div>
 
-        <div style={{ margin: "12px 0" }}>
+        <div style={{ margin: '12px 0' }}>
           <label
             style={{
-              display: "block",
-              fontWeight: "bold",
-              marginBottom: "8px",
-              color: "#6b7280",
-              fontSize: "14px",
+              display: 'block',
+              fontWeight: 'bold',
+              marginBottom: '8px',
+              color: '#6b7280',
+              fontSize: '14px',
             }}
           >
             Play Mode:
           </label>
           <div
             style={{
-              display: "grid",
-              gridTemplateColumns: "repeat(2, 1fr)",
-              gap: "8px",
-              justifyContent: "center",
+              display: 'grid',
+              gridTemplateColumns: 'repeat(2, 1fr)',
+              gap: '8px',
+              justifyContent: 'center',
             }}
           >
             <button
               key="cooperative"
               type="button"
               style={{
-                background:
-                  state.playMode === "cooperative" ? "#10b981" : "white",
-                color: state.playMode === "cooperative" ? "white" : "#1f2937",
-                border: "2px solid",
-                borderColor:
-                  state.playMode === "cooperative" ? "#10b981" : "#d1d5db",
-                borderRadius: "8px",
-                padding: "8px 12px",
-                cursor: "pointer",
-                textAlign: "center",
-                display: "flex",
-                flexDirection: "column",
-                gap: "2px",
-                fontSize: "12px",
+                background: state.playMode === 'cooperative' ? '#10b981' : 'white',
+                color: state.playMode === 'cooperative' ? 'white' : '#1f2937',
+                border: '2px solid',
+                borderColor: state.playMode === 'cooperative' ? '#10b981' : '#d1d5db',
+                borderRadius: '8px',
+                padding: '8px 12px',
+                cursor: 'pointer',
+                textAlign: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '2px',
+                fontSize: '12px',
               }}
-              onClick={() => handlePlayModeSelect("cooperative")}
+              onClick={() => handlePlayModeSelect('cooperative')}
               title="Work together as a team to find all numbers"
             >
-              <div style={{ fontWeight: "bold", fontSize: "13px" }}>
-                🤝 Cooperative
-              </div>
-              <div style={{ fontSize: "10px", opacity: 0.8 }}>
-                Work together
-              </div>
+              <div style={{ fontWeight: 'bold', fontSize: '13px' }}>🤝 Cooperative</div>
+              <div style={{ fontSize: '10px', opacity: 0.8 }}>Work together</div>
             </button>
             <button
               key="competitive"
               type="button"
               style={{
-                background:
-                  state.playMode === "competitive" ? "#ef4444" : "white",
-                color: state.playMode === "competitive" ? "white" : "#1f2937",
-                border: "2px solid",
-                borderColor:
-                  state.playMode === "competitive" ? "#ef4444" : "#d1d5db",
-                borderRadius: "8px",
-                padding: "8px 12px",
-                cursor: "pointer",
-                textAlign: "center",
-                display: "flex",
-                flexDirection: "column",
-                gap: "2px",
-                fontSize: "12px",
+                background: state.playMode === 'competitive' ? '#ef4444' : 'white',
+                color: state.playMode === 'competitive' ? 'white' : '#1f2937',
+                border: '2px solid',
+                borderColor: state.playMode === 'competitive' ? '#ef4444' : '#d1d5db',
+                borderRadius: '8px',
+                padding: '8px 12px',
+                cursor: 'pointer',
+                textAlign: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '2px',
+                fontSize: '12px',
               }}
-              onClick={() => handlePlayModeSelect("competitive")}
+              onClick={() => handlePlayModeSelect('competitive')}
               title="Compete for the highest score"
             >
-              <div style={{ fontWeight: "bold", fontSize: "13px" }}>
-                🏆 Competitive
-              </div>
-              <div style={{ fontSize: "10px", opacity: 0.8 }}>
-                Battle for score
-              </div>
+              <div style={{ fontWeight: 'bold', fontSize: '13px' }}>🏆 Competitive</div>
+              <div style={{ fontSize: '10px', opacity: 0.8 }}>Battle for score</div>
             </button>
           </div>
         </div>
 
-        <div style={{ margin: "12px 0" }}>
+        <div style={{ margin: '12px 0' }}>
           <label
             style={{
-              display: "block",
-              fontWeight: "bold",
-              marginBottom: "8px",
-              color: "#6b7280",
-              fontSize: "14px",
+              display: 'block',
+              fontWeight: 'bold',
+              marginBottom: '8px',
+              color: '#6b7280',
+              fontSize: '14px',
             }}
           >
             Cards to Quiz:
           </label>
           <div
             style={{
-              display: "flex",
-              gap: "6px",
-              justifyContent: "center",
-              flexWrap: "wrap",
+              display: 'flex',
+              gap: '6px',
+              justifyContent: 'center',
+              flexWrap: 'wrap',
             }}
           >
             {[2, 5, 8, 12, 15].map((count) => (
@@ -270,17 +248,15 @@ export function SetupPhase() {
                 key={count}
                 type="button"
                 style={{
-                  background:
-                    state.selectedCount === count ? "#3b82f6" : "white",
-                  color: state.selectedCount === count ? "white" : "#1f2937",
-                  border: "2px solid",
-                  borderColor:
-                    state.selectedCount === count ? "#3b82f6" : "#d1d5db",
-                  borderRadius: "8px",
-                  padding: "8px 16px",
-                  cursor: "pointer",
-                  fontSize: "14px",
-                  minWidth: "50px",
+                  background: state.selectedCount === count ? '#3b82f6' : 'white',
+                  color: state.selectedCount === count ? 'white' : '#1f2937',
+                  border: '2px solid',
+                  borderColor: state.selectedCount === count ? '#3b82f6' : '#d1d5db',
+                  borderRadius: '8px',
+                  padding: '8px 16px',
+                  cursor: 'pointer',
+                  fontSize: '14px',
+                  minWidth: '50px',
                 }}
                 onClick={() => handleCountSelect(count)}
               >
@@ -290,24 +266,24 @@ export function SetupPhase() {
           </div>
         </div>
 
-        <div style={{ margin: "12px 0" }}>
+        <div style={{ margin: '12px 0' }}>
           <label
             style={{
-              display: "block",
-              fontWeight: "bold",
-              marginBottom: "8px",
-              color: "#6b7280",
-              fontSize: "14px",
+              display: 'block',
+              fontWeight: 'bold',
+              marginBottom: '8px',
+              color: '#6b7280',
+              fontSize: '14px',
             }}
           >
             Display Time per Card:
           </label>
           <div
             style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: "10px",
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '10px',
             }}
           >
             <input
@@ -319,15 +295,15 @@ export function SetupPhase() {
               onChange={(e) => handleTimeChange(parseFloat(e.target.value))}
               style={{
                 flex: 1,
-                maxWidth: "200px",
+                maxWidth: '200px',
               }}
             />
             <span
               style={{
-                fontWeight: "bold",
-                color: "#3b82f6",
-                minWidth: "40px",
-                fontSize: "14px",
+                fontWeight: 'bold',
+                color: '#3b82f6',
+                minWidth: '40px',
+                fontSize: '14px',
               }}
             >
               {(state.displayTime ?? 2.0).toFixed(1)}s
@@ -337,17 +313,17 @@ export function SetupPhase() {
 
         <button
           style={{
-            background: "#10b981",
-            color: "white",
-            border: "none",
-            borderRadius: "8px",
-            padding: "12px 24px",
-            fontSize: "16px",
-            fontWeight: "bold",
-            cursor: "pointer",
-            marginTop: "16px",
-            width: "100%",
-            maxWidth: "200px",
+            background: '#10b981',
+            color: 'white',
+            border: 'none',
+            borderRadius: '8px',
+            padding: '12px 24px',
+            fontSize: '16px',
+            fontWeight: 'bold',
+            cursor: 'pointer',
+            marginTop: '16px',
+            width: '100%',
+            maxWidth: '200px',
           }}
           onClick={handleStartQuiz}
         >
@@ -355,5 +331,5 @@ export function SetupPhase() {
         </button>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/memory-quiz/index.ts b/apps/web/src/arcade-games/memory-quiz/index.ts
index 123c6529..9d6154a9 100644
--- a/apps/web/src/arcade-games/memory-quiz/index.ts
+++ b/apps/web/src/arcade-games/memory-quiz/index.ts
@@ -5,92 +5,79 @@
  * Supports both cooperative and competitive multiplayer modes.
  */
 
-import { defineGame, getGameTheme } from "@/lib/arcade/game-sdk";
-import type { GameManifest } from "@/lib/arcade/game-sdk";
-import { MemoryQuizGame } from "./components/MemoryQuizGame";
-import { MemoryQuizProvider } from "./Provider";
-import type {
-  MemoryQuizConfig,
-  MemoryQuizMove,
-  MemoryQuizState,
-} from "./types";
-import { memoryQuizGameValidator } from "./Validator";
+import { defineGame, getGameTheme } from '@/lib/arcade/game-sdk'
+import type { GameManifest } from '@/lib/arcade/game-sdk'
+import { MemoryQuizGame } from './components/MemoryQuizGame'
+import { MemoryQuizProvider } from './Provider'
+import type { MemoryQuizConfig, MemoryQuizMove, MemoryQuizState } from './types'
+import { memoryQuizGameValidator } from './Validator'
 
 const manifest: GameManifest = {
-  name: "memory-quiz",
-  displayName: "Memory Lightning",
-  icon: "🧠",
-  description: "Memorize soroban numbers and recall them",
+  name: 'memory-quiz',
+  displayName: 'Memory Lightning',
+  icon: '🧠',
+  description: 'Memorize soroban numbers and recall them',
   longDescription:
-    "Test your memory by studying soroban numbers for a brief time, then recall as many as you can. " +
-    "Choose your difficulty level, number of cards, and display time. Play cooperatively with friends or compete for the highest score!",
+    'Test your memory by studying soroban numbers for a brief time, then recall as many as you can. ' +
+    'Choose your difficulty level, number of cards, and display time. Play cooperatively with friends or compete for the highest score!',
   maxPlayers: 8,
-  difficulty: "Intermediate",
-  chips: ["👥 Multiplayer", "🧠 Memory", "🧮 Soroban"],
-  ...getGameTheme("purple"),
+  difficulty: 'Intermediate',
+  chips: ['👥 Multiplayer', '🧠 Memory', '🧮 Soroban'],
+  ...getGameTheme('purple'),
   available: true,
-};
+}
 
 const defaultConfig: MemoryQuizConfig = {
   selectedCount: 5,
   displayTime: 2.0,
-  selectedDifficulty: "easy",
-  playMode: "cooperative",
-};
+  selectedDifficulty: 'easy',
+  playMode: 'cooperative',
+}
 
 // Config validation function
 function validateMemoryQuizConfig(config: unknown): config is MemoryQuizConfig {
-  if (typeof config !== "object" || config === null) {
-    return false;
+  if (typeof config !== 'object' || config === null) {
+    return false
   }
 
-  const c = config as any;
+  const c = config as any
 
   // Validate selectedCount
-  if (!("selectedCount" in c) || ![2, 5, 8, 12, 15].includes(c.selectedCount)) {
-    return false;
+  if (!('selectedCount' in c) || ![2, 5, 8, 12, 15].includes(c.selectedCount)) {
+    return false
   }
 
   // Validate displayTime
   if (
-    !("displayTime" in c) ||
-    typeof c.displayTime !== "number" ||
+    !('displayTime' in c) ||
+    typeof c.displayTime !== 'number' ||
     c.displayTime < 0.5 ||
     c.displayTime > 10
   ) {
-    return false;
+    return false
   }
 
   // Validate selectedDifficulty
   if (
-    !("selectedDifficulty" in c) ||
-    !["beginner", "easy", "medium", "hard", "expert"].includes(
-      c.selectedDifficulty,
-    )
+    !('selectedDifficulty' in c) ||
+    !['beginner', 'easy', 'medium', 'hard', 'expert'].includes(c.selectedDifficulty)
   ) {
-    return false;
+    return false
   }
 
   // Validate playMode
-  if (
-    !("playMode" in c) ||
-    !["cooperative", "competitive"].includes(c.playMode)
-  ) {
-    return false;
+  if (!('playMode' in c) || !['cooperative', 'competitive'].includes(c.playMode)) {
+    return false
   }
 
-  return true;
+  return true
 }
 
-export const memoryQuizGame = defineGame<
-  MemoryQuizConfig,
-  MemoryQuizState,
-  MemoryQuizMove
->({
+export const memoryQuizGame = defineGame<MemoryQuizConfig, MemoryQuizState, MemoryQuizMove>({
   manifest,
   Provider: MemoryQuizProvider,
   GameComponent: MemoryQuizGame,
   validator: memoryQuizGameValidator,
   defaultConfig,
   validateConfig: validateMemoryQuizConfig,
-});
+})
diff --git a/apps/web/src/arcade-games/memory-quiz/types.ts b/apps/web/src/arcade-games/memory-quiz/types.ts
index 3cfbf16b..6c678d25 100644
--- a/apps/web/src/arcade-games/memory-quiz/types.ts
+++ b/apps/web/src/arcade-games/memory-quiz/types.ts
@@ -1,199 +1,192 @@
-import type { GameConfig, GameState } from "@/lib/arcade/game-sdk";
-import type { PlayerMetadata } from "@/lib/arcade/player-ownership.client";
+import type { GameConfig, GameState } from '@/lib/arcade/game-sdk'
+import type { PlayerMetadata } from '@/lib/arcade/player-ownership.client'
 
 export interface QuizCard {
-  number: number;
-  svgComponent: JSX.Element | null;
-  element: HTMLElement | null;
+  number: number
+  svgComponent: JSX.Element | null
+  element: HTMLElement | null
 }
 
 export interface PlayerScore {
-  correct: number;
-  incorrect: number;
+  correct: number
+  incorrect: number
 }
 
 // Memory Quiz Configuration
 export interface MemoryQuizConfig extends GameConfig {
-  selectedCount: 2 | 5 | 8 | 12 | 15;
-  displayTime: number;
-  selectedDifficulty: DifficultyLevel;
-  playMode: "cooperative" | "competitive";
+  selectedCount: 2 | 5 | 8 | 12 | 15
+  displayTime: number
+  selectedDifficulty: DifficultyLevel
+  playMode: 'cooperative' | 'competitive'
 }
 
 // Memory Quiz State
 export interface MemoryQuizState extends GameState {
   // Core game data
-  cards: QuizCard[];
-  quizCards: QuizCard[];
-  correctAnswers: number[];
+  cards: QuizCard[]
+  quizCards: QuizCard[]
+  correctAnswers: number[]
 
   // Game progression
-  currentCardIndex: number;
-  displayTime: number;
-  selectedCount: number;
-  selectedDifficulty: DifficultyLevel;
+  currentCardIndex: number
+  displayTime: number
+  selectedCount: number
+  selectedDifficulty: DifficultyLevel
 
   // Input system state
-  foundNumbers: number[];
-  guessesRemaining: number;
-  currentInput: string;
-  incorrectGuesses: number;
+  foundNumbers: number[]
+  guessesRemaining: number
+  currentInput: string
+  incorrectGuesses: number
 
   // Multiplayer state
-  activePlayers: string[];
-  playerMetadata: Record<string, PlayerMetadata>;
-  playerScores: Record<string, PlayerScore>;
-  playMode: "cooperative" | "competitive";
-  numberFoundBy: Record<number, string>; // Maps number to userId who found it
+  activePlayers: string[]
+  playerMetadata: Record<string, PlayerMetadata>
+  playerScores: Record<string, PlayerScore>
+  playMode: 'cooperative' | 'competitive'
+  numberFoundBy: Record<number, string> // Maps number to userId who found it
 
   // UI state
-  gamePhase: "setup" | "display" | "input" | "results";
-  prefixAcceptanceTimeout: NodeJS.Timeout | null;
-  finishButtonsBound: boolean;
+  gamePhase: 'setup' | 'display' | 'input' | 'results'
+  prefixAcceptanceTimeout: NodeJS.Timeout | null
+  finishButtonsBound: boolean
   wrongGuessAnimations: Array<{
-    number: number;
-    id: string;
-    timestamp: number;
-  }>;
+    number: number
+    id: string
+    timestamp: number
+  }>
 
   // Keyboard state (moved from InputPhase to persist across re-renders)
-  hasPhysicalKeyboard: boolean | null;
-  testingMode: boolean;
-  showOnScreenKeyboard: boolean;
+  hasPhysicalKeyboard: boolean | null
+  testingMode: boolean
+  showOnScreenKeyboard: boolean
 }
 
 // Legacy reducer actions (deprecated - will be removed)
 export type QuizAction =
-  | { type: "SET_CARDS"; cards: QuizCard[] }
-  | { type: "SET_DISPLAY_TIME"; time: number }
-  | { type: "SET_SELECTED_COUNT"; count: number }
-  | { type: "SET_DIFFICULTY"; difficulty: DifficultyLevel }
-  | { type: "SET_PLAY_MODE"; playMode: "cooperative" | "competitive" }
-  | { type: "START_QUIZ"; quizCards: QuizCard[] }
-  | { type: "NEXT_CARD" }
-  | { type: "SHOW_INPUT_PHASE" }
-  | { type: "ACCEPT_NUMBER"; number: number; playerId?: string }
-  | { type: "REJECT_NUMBER"; playerId?: string }
-  | { type: "ADD_WRONG_GUESS_ANIMATION"; number: number }
-  | { type: "CLEAR_WRONG_GUESS_ANIMATIONS" }
-  | { type: "SET_INPUT"; input: string }
-  | { type: "SET_PREFIX_TIMEOUT"; timeout: NodeJS.Timeout | null }
-  | { type: "SHOW_RESULTS" }
-  | { type: "RESET_QUIZ" }
-  | { type: "SET_PHYSICAL_KEYBOARD"; hasKeyboard: boolean | null }
-  | { type: "SET_TESTING_MODE"; enabled: boolean }
-  | { type: "TOGGLE_ONSCREEN_KEYBOARD" };
+  | { type: 'SET_CARDS'; cards: QuizCard[] }
+  | { type: 'SET_DISPLAY_TIME'; time: number }
+  | { type: 'SET_SELECTED_COUNT'; count: number }
+  | { type: 'SET_DIFFICULTY'; difficulty: DifficultyLevel }
+  | { type: 'SET_PLAY_MODE'; playMode: 'cooperative' | 'competitive' }
+  | { type: 'START_QUIZ'; quizCards: QuizCard[] }
+  | { type: 'NEXT_CARD' }
+  | { type: 'SHOW_INPUT_PHASE' }
+  | { type: 'ACCEPT_NUMBER'; number: number; playerId?: string }
+  | { type: 'REJECT_NUMBER'; playerId?: string }
+  | { type: 'ADD_WRONG_GUESS_ANIMATION'; number: number }
+  | { type: 'CLEAR_WRONG_GUESS_ANIMATIONS' }
+  | { type: 'SET_INPUT'; input: string }
+  | { type: 'SET_PREFIX_TIMEOUT'; timeout: NodeJS.Timeout | null }
+  | { type: 'SHOW_RESULTS' }
+  | { type: 'RESET_QUIZ' }
+  | { type: 'SET_PHYSICAL_KEYBOARD'; hasKeyboard: boolean | null }
+  | { type: 'SET_TESTING_MODE'; enabled: boolean }
+  | { type: 'TOGGLE_ONSCREEN_KEYBOARD' }
 
 // Difficulty levels with progressive number ranges
 export const DIFFICULTY_LEVELS = {
   beginner: {
-    name: "Beginner",
+    name: 'Beginner',
     range: { min: 1, max: 9 },
-    description: "Single digits (1-9)",
+    description: 'Single digits (1-9)',
   },
   easy: {
-    name: "Easy",
+    name: 'Easy',
     range: { min: 10, max: 99 },
-    description: "Two digits (10-99)",
+    description: 'Two digits (10-99)',
   },
   medium: {
-    name: "Medium",
+    name: 'Medium',
     range: { min: 100, max: 499 },
-    description: "Three digits (100-499)",
+    description: 'Three digits (100-499)',
   },
   hard: {
-    name: "Hard",
+    name: 'Hard',
     range: { min: 500, max: 999 },
-    description: "Large numbers (500-999)",
+    description: 'Large numbers (500-999)',
   },
   expert: {
-    name: "Expert",
+    name: 'Expert',
     range: { min: 1, max: 999 },
-    description: "Mixed range (1-999)",
+    description: 'Mixed range (1-999)',
   },
-} as const;
+} as const
 
-export type DifficultyLevel = keyof typeof DIFFICULTY_LEVELS;
+export type DifficultyLevel = keyof typeof DIFFICULTY_LEVELS
 
 // Memory Quiz Move Types (SDK-compatible)
 export type MemoryQuizMove =
   | {
-      type: "START_QUIZ";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'START_QUIZ'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        numbers: number[];
-        quizCards?: QuizCard[];
-        activePlayers: string[];
-        playerMetadata: Record<string, PlayerMetadata>;
-      };
+        numbers: number[]
+        quizCards?: QuizCard[]
+        activePlayers: string[]
+        playerMetadata: Record<string, PlayerMetadata>
+      }
     }
   | {
-      type: "NEXT_CARD";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'NEXT_CARD'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "SHOW_INPUT_PHASE";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'SHOW_INPUT_PHASE'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "ACCEPT_NUMBER";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: { number: number };
+      type: 'ACCEPT_NUMBER'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: { number: number }
     }
   | {
-      type: "REJECT_NUMBER";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'REJECT_NUMBER'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "SET_INPUT";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: { input: string };
+      type: 'SET_INPUT'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: { input: string }
     }
   | {
-      type: "SHOW_RESULTS";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'SHOW_RESULTS'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "RESET_QUIZ";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'RESET_QUIZ'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "SET_CONFIG";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'SET_CONFIG'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        field:
-          | "selectedCount"
-          | "displayTime"
-          | "selectedDifficulty"
-          | "playMode";
-        value: any;
-      };
-    };
+        field: 'selectedCount' | 'displayTime' | 'selectedDifficulty' | 'playMode'
+        value: any
+      }
+    }
 
-export type MemoryQuizSetConfigMove = Extract<
-  MemoryQuizMove,
-  { type: "SET_CONFIG" }
->;
+export type MemoryQuizSetConfigMove = Extract<MemoryQuizMove, { type: 'SET_CONFIG' }>
diff --git a/apps/web/src/arcade-games/rithmomachia/Provider.tsx b/apps/web/src/arcade-games/rithmomachia/Provider.tsx
index 03e972ad..eed306c3 100644
--- a/apps/web/src/arcade-games/rithmomachia/Provider.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/Provider.tsx
@@ -1,21 +1,14 @@
-"use client";
+'use client'
 
-import {
-  createContext,
-  type ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-} from "react";
-import { useGameMode } from "@/contexts/GameModeContext";
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo } from 'react'
+import { useGameMode } from '@/contexts/GameModeContext'
 import {
   TEAM_MOVE,
   useArcadeSession,
   useRoomData,
   useUpdateGameConfig,
   useViewerId,
-} from "@/lib/arcade/game-sdk";
+} from '@/lib/arcade/game-sdk'
 import type {
   AmbushContext,
   Color,
@@ -23,8 +16,8 @@ import type {
   RelationKind,
   RithmomachiaConfig,
   RithmomachiaState,
-} from "./types";
-import { useToast } from "@/components/common/ToastContext";
+} from './types'
+import { useToast } from '@/components/common/ToastContext'
 import {
   parseError,
   shouldShowToast,
@@ -32,133 +25,126 @@ import {
   getMoveActionName,
   type EnhancedError,
   type RetryState,
-} from "@/lib/arcade/error-handling";
+} from '@/lib/arcade/error-handling'
 
 /**
  * Context value for Rithmomachia game.
  */
 export type RithmomachiaRosterStatus =
-  | { status: "ok"; activePlayerCount: number; localPlayerCount: number }
+  | { status: 'ok'; activePlayerCount: number; localPlayerCount: number }
   | {
-      status: "tooFew";
-      activePlayerCount: number;
-      localPlayerCount: number;
-      missingWhite: boolean;
-      missingBlack: boolean;
+      status: 'tooFew'
+      activePlayerCount: number
+      localPlayerCount: number
+      missingWhite: boolean
+      missingBlack: boolean
     }
   | {
-      status: "noLocalControl";
-      activePlayerCount: number;
-      localPlayerCount: number;
-    };
+      status: 'noLocalControl'
+      activePlayerCount: number
+      localPlayerCount: number
+    }
 
 interface RithmomachiaContextValue {
   // State
-  state: RithmomachiaState;
-  lastError: string | null;
-  retryState: RetryState;
+  state: RithmomachiaState
+  lastError: string | null
+  retryState: RetryState
 
   // Player info
-  viewerId: string | null;
-  playerColor: Color | null;
-  isMyTurn: boolean;
-  rosterStatus: RithmomachiaRosterStatus;
-  localActivePlayerIds: string[];
-  whitePlayerId: string | null;
-  blackPlayerId: string | null;
-  localTurnPlayerId: string | null;
-  isSpectating: boolean;
-  localPlayerColor: Color | null;
+  viewerId: string | null
+  playerColor: Color | null
+  isMyTurn: boolean
+  rosterStatus: RithmomachiaRosterStatus
+  localActivePlayerIds: string[]
+  whitePlayerId: string | null
+  blackPlayerId: string | null
+  localTurnPlayerId: string | null
+  isSpectating: boolean
+  localPlayerColor: Color | null
 
   // Game actions
-  startGame: () => void;
+  startGame: () => void
   makeMove: (
     from: string,
     to: string,
     pieceId: string,
     pyramidFace?: number,
     capture?: CaptureData,
-    ambush?: AmbushContext,
-  ) => void;
+    ambush?: AmbushContext
+  ) => void
   declareHarmony: (
     pieceIds: string[],
     harmonyType: HarmonyType,
-    params: Record<string, string>,
-  ) => void;
-  resign: () => void;
-  offerDraw: () => void;
-  acceptDraw: () => void;
-  claimRepetition: () => void;
-  claimFiftyMove: () => void;
+    params: Record<string, string>
+  ) => void
+  resign: () => void
+  offerDraw: () => void
+  acceptDraw: () => void
+  claimRepetition: () => void
+  claimFiftyMove: () => void
 
   // Config actions
-  setConfig: (field: keyof RithmomachiaConfig, value: any) => void;
+  setConfig: (field: keyof RithmomachiaConfig, value: any) => void
 
   // Player assignment actions
-  assignWhitePlayer: (playerId: string | null) => void;
-  assignBlackPlayer: (playerId: string | null) => void;
-  swapSides: () => void;
+  assignWhitePlayer: (playerId: string | null) => void
+  assignBlackPlayer: (playerId: string | null) => void
+  swapSides: () => void
 
   // Game control actions
-  resetGame: () => void;
-  goToSetup: () => void;
-  exitSession: () => void;
+  resetGame: () => void
+  goToSetup: () => void
+  exitSession: () => void
 
   // Error handling
-  clearError: () => void;
+  clearError: () => void
 }
 
 interface CaptureData {
-  relation: RelationKind;
-  targetPieceId: string;
-  helperPieceId?: string;
+  relation: RelationKind
+  targetPieceId: string
+  helperPieceId?: string
 }
 
-const RithmomachiaContext = createContext<RithmomachiaContextValue | null>(
-  null,
-);
+const RithmomachiaContext = createContext<RithmomachiaContextValue | null>(null)
 
 /**
  * Hook to access Rithmomachia game context.
  */
 export function useRithmomachia(): RithmomachiaContextValue {
-  const context = useContext(RithmomachiaContext);
+  const context = useContext(RithmomachiaContext)
   if (!context) {
-    throw new Error("useRithmomachia must be used within RithmomachiaProvider");
+    throw new Error('useRithmomachia must be used within RithmomachiaProvider')
   }
-  return context;
+  return context
 }
 
 /**
  * Provider for Rithmomachia game state and actions.
  */
 export function RithmomachiaProvider({ children }: { children: ReactNode }) {
-  const { data: viewerId } = useViewerId();
-  const { roomData } = useRoomData();
-  const { activePlayers: activePlayerIds, players } = useGameMode();
-  const { mutate: updateGameConfig } = useUpdateGameConfig();
-  const { showToast } = useToast();
+  const { data: viewerId } = useViewerId()
+  const { roomData } = useRoomData()
+  const { activePlayers: activePlayerIds, players } = useGameMode()
+  const { mutate: updateGameConfig } = useUpdateGameConfig()
+  const { showToast } = useToast()
 
-  const activePlayerList = useMemo(
-    () => Array.from(activePlayerIds),
-    [activePlayerIds],
-  );
+  const activePlayerList = useMemo(() => Array.from(activePlayerIds), [activePlayerIds])
 
   const localActivePlayerIds = useMemo(
     () =>
       activePlayerList.filter((id) => {
-        const player = players.get(id);
-        return player?.isLocal !== false;
+        const player = players.get(id)
+        return player?.isLocal !== false
       }),
-    [activePlayerList, players],
-  );
+    [activePlayerList, players]
+  )
 
   // Merge saved config from room data
   const mergedInitialState = useMemo(() => {
-    const gameConfig = roomData?.gameConfig as Record<string, unknown> | null;
-    const savedConfig = gameConfig?.rithmomachia as
-      | Partial<RithmomachiaConfig>
-      | undefined;
+    const gameConfig = roomData?.gameConfig as Record<string, unknown> | null
+    const savedConfig = gameConfig?.rithmomachia as Partial<RithmomachiaConfig> | undefined
 
     // Use validator to create initial state with config
     const config: RithmomachiaConfig = {
@@ -170,143 +156,132 @@ export function RithmomachiaProvider({ children }: { children: ReactNode }) {
       timeControlMs: savedConfig?.timeControlMs ?? null,
       whitePlayerId: savedConfig?.whitePlayerId ?? null,
       blackPlayerId: savedConfig?.blackPlayerId ?? null,
-    };
+    }
 
     // Import validator dynamically to get initial state
     return {
-      ...require("./Validator").rithmomachiaValidator.getInitialState(config),
-    };
-  }, [roomData?.gameConfig]);
+      ...require('./Validator').rithmomachiaValidator.getInitialState(config),
+    }
+  }, [roomData?.gameConfig])
 
   // Use arcade session hook
   const { state, sendMove, lastError, clearError, retryState } =
     useArcadeSession<RithmomachiaState>({
-      userId: viewerId || "",
+      userId: viewerId || '',
       roomId: roomData?.id,
       initialState: mergedInitialState,
       applyMove: (state) => state, // No optimistic updates for v1 - rely on server validation
-    });
+    })
 
   // Get player assignments from config (with fallback to auto-assignment)
   const whitePlayerId = useMemo(() => {
-    const configWhite = state.whitePlayerId;
+    const configWhite = state.whitePlayerId
     // If explicitly set in config and still valid, use it
     if (configWhite !== undefined && configWhite !== null) {
-      return activePlayerList.includes(configWhite) ? configWhite : null;
+      return activePlayerList.includes(configWhite) ? configWhite : null
     }
     // Fallback to auto-assignment: first active player
-    return activePlayerList[0] ?? null;
-  }, [state.whitePlayerId, activePlayerList]);
+    return activePlayerList[0] ?? null
+  }, [state.whitePlayerId, activePlayerList])
 
   const blackPlayerId = useMemo(() => {
-    const configBlack = state.blackPlayerId;
+    const configBlack = state.blackPlayerId
     // If explicitly set in config and still valid, use it
     if (configBlack !== undefined && configBlack !== null) {
-      return activePlayerList.includes(configBlack) ? configBlack : null;
+      return activePlayerList.includes(configBlack) ? configBlack : null
     }
     // Fallback to auto-assignment: second active player
-    return activePlayerList[1] ?? null;
-  }, [state.blackPlayerId, activePlayerList]);
+    return activePlayerList[1] ?? null
+  }, [state.blackPlayerId, activePlayerList])
 
   // Compute roster status based on white/black assignments (not player count)
   const rosterStatus = useMemo<RithmomachiaRosterStatus>(() => {
-    const activeCount = activePlayerList.length;
-    const localCount = localActivePlayerIds.length;
+    const activeCount = activePlayerList.length
+    const localCount = localActivePlayerIds.length
 
     // Check if white and black are assigned
-    const hasWhitePlayer = whitePlayerId !== null;
-    const hasBlackPlayer = blackPlayerId !== null;
+    const hasWhitePlayer = whitePlayerId !== null
+    const hasBlackPlayer = blackPlayerId !== null
 
     // Status is 'tooFew' only if white or black is missing
     if (!hasWhitePlayer || !hasBlackPlayer) {
       return {
-        status: "tooFew",
+        status: 'tooFew',
         activePlayerCount: activeCount,
         localPlayerCount: localCount,
         missingWhite: !hasWhitePlayer,
         missingBlack: !hasBlackPlayer,
-      };
+      }
     }
 
     // Check if current user has control over either white or black
-    const localControlsWhite = localActivePlayerIds.includes(whitePlayerId);
-    const localControlsBlack = localActivePlayerIds.includes(blackPlayerId);
+    const localControlsWhite = localActivePlayerIds.includes(whitePlayerId)
+    const localControlsBlack = localActivePlayerIds.includes(blackPlayerId)
 
     if (!localControlsWhite && !localControlsBlack) {
       return {
-        status: "noLocalControl", // Observer mode
+        status: 'noLocalControl', // Observer mode
         activePlayerCount: activeCount,
         localPlayerCount: localCount,
-      };
+      }
     }
 
     // All good - white and black assigned, and user controls at least one
     return {
-      status: "ok",
+      status: 'ok',
       activePlayerCount: activeCount,
       localPlayerCount: localCount,
-    };
-  }, [
-    activePlayerList.length,
-    localActivePlayerIds,
-    whitePlayerId,
-    blackPlayerId,
-  ]);
+    }
+  }, [activePlayerList.length, localActivePlayerIds, whitePlayerId, blackPlayerId])
 
   const localTurnPlayerId = useMemo(() => {
-    const currentId = state.turn === "W" ? whitePlayerId : blackPlayerId;
-    if (!currentId) return null;
-    return localActivePlayerIds.includes(currentId) ? currentId : null;
-  }, [state.turn, whitePlayerId, blackPlayerId, localActivePlayerIds]);
+    const currentId = state.turn === 'W' ? whitePlayerId : blackPlayerId
+    if (!currentId) return null
+    return localActivePlayerIds.includes(currentId) ? currentId : null
+  }, [state.turn, whitePlayerId, blackPlayerId, localActivePlayerIds])
 
   const playerColor = useMemo((): Color | null => {
     if (localTurnPlayerId) {
-      return state.turn;
+      return state.turn
     }
 
     if (localActivePlayerIds.length === 1) {
-      const soleLocalId = localActivePlayerIds[0];
-      if (soleLocalId === whitePlayerId) return "W";
-      if (soleLocalId === blackPlayerId) return "B";
+      const soleLocalId = localActivePlayerIds[0]
+      if (soleLocalId === whitePlayerId) return 'W'
+      if (soleLocalId === blackPlayerId) return 'B'
     }
 
-    return null;
-  }, [
-    localTurnPlayerId,
-    localActivePlayerIds,
-    whitePlayerId,
-    blackPlayerId,
-    state.turn,
-  ]);
+    return null
+  }, [localTurnPlayerId, localActivePlayerIds, whitePlayerId, blackPlayerId, state.turn])
 
   // Check if it's my turn
   const isMyTurn = useMemo(() => {
-    if (rosterStatus.status !== "ok") return false;
-    return localTurnPlayerId !== null;
-  }, [rosterStatus.status, localTurnPlayerId]);
+    if (rosterStatus.status !== 'ok') return false
+    return localTurnPlayerId !== null
+  }, [rosterStatus.status, localTurnPlayerId])
 
   // Action: Start game
   const startGame = useCallback(() => {
     // Block observers from starting game
     const localColor =
       whitePlayerId && localActivePlayerIds.includes(whitePlayerId)
-        ? "W"
+        ? 'W'
         : blackPlayerId && localActivePlayerIds.includes(blackPlayerId)
-          ? "B"
-          : null;
-    if (!localColor) return;
+          ? 'B'
+          : null
+    if (!localColor) return
 
-    if (!viewerId || !localTurnPlayerId) return;
+    if (!viewerId || !localTurnPlayerId) return
 
     sendMove({
-      type: "START_GAME",
+      type: 'START_GAME',
       playerId: localTurnPlayerId,
       userId: viewerId,
       data: {
-        playerColor: playerColor || "W",
+        playerColor: playerColor || 'W',
         activePlayers: activePlayerList,
       },
-    });
+    })
   }, [
     sendMove,
     viewerId,
@@ -316,7 +291,7 @@ export function RithmomachiaProvider({ children }: { children: ReactNode }) {
     whitePlayerId,
     blackPlayerId,
     localActivePlayerIds,
-  ]);
+  ])
 
   // Action: Make a move
   const makeMove = useCallback(
@@ -326,21 +301,21 @@ export function RithmomachiaProvider({ children }: { children: ReactNode }) {
       pieceId: string,
       pyramidFace?: number,
       capture?: CaptureData,
-      ambush?: AmbushContext,
+      ambush?: AmbushContext
     ) => {
       // Block observers from making moves
       const localColor =
         whitePlayerId && localActivePlayerIds.includes(whitePlayerId)
-          ? "W"
+          ? 'W'
           : blackPlayerId && localActivePlayerIds.includes(blackPlayerId)
-            ? "B"
-            : null;
-      if (!localColor) return;
+            ? 'B'
+            : null
+      if (!localColor) return
 
-      if (!viewerId || !localTurnPlayerId) return;
+      if (!viewerId || !localTurnPlayerId) return
 
       sendMove({
-        type: "MOVE",
+        type: 'MOVE',
         playerId: localTurnPlayerId,
         userId: viewerId,
         data: {
@@ -357,38 +332,27 @@ export function RithmomachiaProvider({ children }: { children: ReactNode }) {
             : undefined,
           ambush,
         },
-      });
+      })
     },
-    [
-      sendMove,
-      viewerId,
-      localTurnPlayerId,
-      whitePlayerId,
-      blackPlayerId,
-      localActivePlayerIds,
-    ],
-  );
+    [sendMove, viewerId, localTurnPlayerId, whitePlayerId, blackPlayerId, localActivePlayerIds]
+  )
 
   // Action: Declare harmony
   const declareHarmony = useCallback(
-    (
-      pieceIds: string[],
-      harmonyType: HarmonyType,
-      params: Record<string, string>,
-    ) => {
+    (pieceIds: string[], harmonyType: HarmonyType, params: Record<string, string>) => {
       // Block observers from declaring harmony
       const localColor =
         whitePlayerId && localActivePlayerIds.includes(whitePlayerId)
-          ? "W"
+          ? 'W'
           : blackPlayerId && localActivePlayerIds.includes(blackPlayerId)
-            ? "B"
-            : null;
-      if (!localColor) return;
+            ? 'B'
+            : null
+      if (!localColor) return
 
-      if (!viewerId || !localTurnPlayerId) return;
+      if (!viewerId || !localTurnPlayerId) return
 
       sendMove({
-        type: "DECLARE_HARMONY",
+        type: 'DECLARE_HARMONY',
         playerId: localTurnPlayerId,
         userId: viewerId,
         data: {
@@ -396,169 +360,124 @@ export function RithmomachiaProvider({ children }: { children: ReactNode }) {
           harmonyType,
           params,
         },
-      });
+      })
     },
-    [
-      sendMove,
-      viewerId,
-      localTurnPlayerId,
-      whitePlayerId,
-      blackPlayerId,
-      localActivePlayerIds,
-    ],
-  );
+    [sendMove, viewerId, localTurnPlayerId, whitePlayerId, blackPlayerId, localActivePlayerIds]
+  )
 
   // Action: Resign
   const resign = useCallback(() => {
     // Block observers from resigning
     const localColor =
       whitePlayerId && localActivePlayerIds.includes(whitePlayerId)
-        ? "W"
+        ? 'W'
         : blackPlayerId && localActivePlayerIds.includes(blackPlayerId)
-          ? "B"
-          : null;
-    if (!localColor) return;
+          ? 'B'
+          : null
+    if (!localColor) return
 
-    if (!viewerId || !localTurnPlayerId) return;
+    if (!viewerId || !localTurnPlayerId) return
 
     sendMove({
-      type: "RESIGN",
+      type: 'RESIGN',
       playerId: localTurnPlayerId,
       userId: viewerId,
       data: {},
-    });
-  }, [
-    sendMove,
-    viewerId,
-    localTurnPlayerId,
-    whitePlayerId,
-    blackPlayerId,
-    localActivePlayerIds,
-  ]);
+    })
+  }, [sendMove, viewerId, localTurnPlayerId, whitePlayerId, blackPlayerId, localActivePlayerIds])
 
   // Action: Offer draw
   const offerDraw = useCallback(() => {
     // Block observers from offering draw
     const localColor =
       whitePlayerId && localActivePlayerIds.includes(whitePlayerId)
-        ? "W"
+        ? 'W'
         : blackPlayerId && localActivePlayerIds.includes(blackPlayerId)
-          ? "B"
-          : null;
-    if (!localColor) return;
+          ? 'B'
+          : null
+    if (!localColor) return
 
-    if (!viewerId || !localTurnPlayerId) return;
+    if (!viewerId || !localTurnPlayerId) return
 
     sendMove({
-      type: "OFFER_DRAW",
+      type: 'OFFER_DRAW',
       playerId: localTurnPlayerId,
       userId: viewerId,
       data: {},
-    });
-  }, [
-    sendMove,
-    viewerId,
-    localTurnPlayerId,
-    whitePlayerId,
-    blackPlayerId,
-    localActivePlayerIds,
-  ]);
+    })
+  }, [sendMove, viewerId, localTurnPlayerId, whitePlayerId, blackPlayerId, localActivePlayerIds])
 
   // Action: Accept draw
   const acceptDraw = useCallback(() => {
     // Block observers from accepting draw
     const localColor =
       whitePlayerId && localActivePlayerIds.includes(whitePlayerId)
-        ? "W"
+        ? 'W'
         : blackPlayerId && localActivePlayerIds.includes(blackPlayerId)
-          ? "B"
-          : null;
-    if (!localColor) return;
+          ? 'B'
+          : null
+    if (!localColor) return
 
-    if (!viewerId || !localTurnPlayerId) return;
+    if (!viewerId || !localTurnPlayerId) return
 
     sendMove({
-      type: "ACCEPT_DRAW",
+      type: 'ACCEPT_DRAW',
       playerId: localTurnPlayerId,
       userId: viewerId,
       data: {},
-    });
-  }, [
-    sendMove,
-    viewerId,
-    localTurnPlayerId,
-    whitePlayerId,
-    blackPlayerId,
-    localActivePlayerIds,
-  ]);
+    })
+  }, [sendMove, viewerId, localTurnPlayerId, whitePlayerId, blackPlayerId, localActivePlayerIds])
 
   // Action: Claim repetition
   const claimRepetition = useCallback(() => {
     // Block observers from claiming repetition
     const localColor =
       whitePlayerId && localActivePlayerIds.includes(whitePlayerId)
-        ? "W"
+        ? 'W'
         : blackPlayerId && localActivePlayerIds.includes(blackPlayerId)
-          ? "B"
-          : null;
-    if (!localColor) return;
+          ? 'B'
+          : null
+    if (!localColor) return
 
-    if (!viewerId || !localTurnPlayerId) return;
+    if (!viewerId || !localTurnPlayerId) return
 
     sendMove({
-      type: "CLAIM_REPETITION",
+      type: 'CLAIM_REPETITION',
       playerId: localTurnPlayerId,
       userId: viewerId,
       data: {},
-    });
-  }, [
-    sendMove,
-    viewerId,
-    localTurnPlayerId,
-    whitePlayerId,
-    blackPlayerId,
-    localActivePlayerIds,
-  ]);
+    })
+  }, [sendMove, viewerId, localTurnPlayerId, whitePlayerId, blackPlayerId, localActivePlayerIds])
 
   // Action: Claim fifty-move rule
   const claimFiftyMove = useCallback(() => {
     // Block observers from claiming fifty-move
     const localColor =
       whitePlayerId && localActivePlayerIds.includes(whitePlayerId)
-        ? "W"
+        ? 'W'
         : blackPlayerId && localActivePlayerIds.includes(blackPlayerId)
-          ? "B"
-          : null;
-    if (!localColor) return;
+          ? 'B'
+          : null
+    if (!localColor) return
 
-    if (!viewerId || !localTurnPlayerId) return;
+    if (!viewerId || !localTurnPlayerId) return
 
     sendMove({
-      type: "CLAIM_FIFTY_MOVE",
+      type: 'CLAIM_FIFTY_MOVE',
       playerId: localTurnPlayerId,
       userId: viewerId,
       data: {},
-    });
-  }, [
-    sendMove,
-    viewerId,
-    localTurnPlayerId,
-    whitePlayerId,
-    blackPlayerId,
-    localActivePlayerIds,
-  ]);
+    })
+  }, [sendMove, viewerId, localTurnPlayerId, whitePlayerId, blackPlayerId, localActivePlayerIds])
 
   // Action: Set config
   const setConfig = useCallback(
     (field: keyof RithmomachiaConfig, value: any) => {
       // During gameplay, restrict config changes
-      if (state.gamePhase === "playing") {
+      if (state.gamePhase === 'playing') {
         // Allow host to change player assignments at any time
-        const isHost = roomData?.members.some(
-          (m) => m.userId === viewerId && m.isCreator,
-        );
-        const isPlayerAssignment =
-          field === "whitePlayerId" || field === "blackPlayerId";
+        const isHost = roomData?.members.some((m) => m.userId === viewerId && m.isCreator)
+        const isPlayerAssignment = field === 'whitePlayerId' || field === 'blackPlayerId'
 
         if (isPlayerAssignment && isHost) {
           // Host can always reassign players
@@ -566,28 +485,26 @@ export function RithmomachiaProvider({ children }: { children: ReactNode }) {
           // Other config changes require being an active player
           const localColor =
             whitePlayerId && localActivePlayerIds.includes(whitePlayerId)
-              ? "W"
+              ? 'W'
               : blackPlayerId && localActivePlayerIds.includes(blackPlayerId)
-                ? "B"
-                : null;
-          if (!localColor) return;
+                ? 'B'
+                : null
+          if (!localColor) return
         }
       }
 
       // Send move to update state immediately
       sendMove({
-        type: "SET_CONFIG",
+        type: 'SET_CONFIG',
         playerId: TEAM_MOVE,
-        userId: viewerId || "",
+        userId: viewerId || '',
         data: { field, value },
-      });
+      })
 
       // Persist to database (room mode only)
       if (roomData?.id) {
-        const currentGameConfig =
-          (roomData.gameConfig as Record<string, any>) || {};
-        const currentConfig =
-          (currentGameConfig.rithmomachia as Record<string, any>) || {};
+        const currentGameConfig = (roomData.gameConfig as Record<string, any>) || {}
+        const currentConfig = (currentGameConfig.rithmomachia as Record<string, any>) || {}
 
         updateGameConfig(
           {
@@ -602,20 +519,15 @@ export function RithmomachiaProvider({ children }: { children: ReactNode }) {
           },
           {
             onError: (error) => {
-              console.error(
-                "[Rithmomachia] Failed to update game config:",
-                error,
-              );
+              console.error('[Rithmomachia] Failed to update game config:', error)
               // Surface 403 errors specifically
-              if (error.message.includes("Only the host can change")) {
-                console.warn(
-                  "[Rithmomachia] 403 Forbidden: Only host can change room settings",
-                );
+              if (error.message.includes('Only the host can change')) {
+                console.warn('[Rithmomachia] 403 Forbidden: Only host can change room settings')
                 // The error will be visible in console - in the future, we could add toast notifications
               }
             },
-          },
-        );
+          }
+        )
       }
     },
     [
@@ -627,137 +539,131 @@ export function RithmomachiaProvider({ children }: { children: ReactNode }) {
       whitePlayerId,
       blackPlayerId,
       localActivePlayerIds,
-    ],
-  );
+    ]
+  )
 
   // Action: Reset game (start new game with same config)
   const resetGame = useCallback(() => {
-    if (!viewerId) return;
+    if (!viewerId) return
 
     sendMove({
-      type: "RESET_GAME",
+      type: 'RESET_GAME',
       playerId: TEAM_MOVE,
       userId: viewerId,
       data: {},
-    });
-  }, [sendMove, viewerId]);
+    })
+  }, [sendMove, viewerId])
 
   // Action: Go to setup (return to setup phase)
   const goToSetup = useCallback(() => {
-    if (!viewerId) return;
+    if (!viewerId) return
 
     sendMove({
-      type: "GO_TO_SETUP",
+      type: 'GO_TO_SETUP',
       playerId: TEAM_MOVE,
       userId: viewerId,
       data: {},
-    });
-  }, [sendMove, viewerId]);
+    })
+  }, [sendMove, viewerId])
 
   // Action: Exit session (no-op for now, handled by PageWithNav)
   const exitSession = useCallback(() => {
     // PageWithNav handles the actual navigation
     // This is here for API compatibility
-  }, []);
+  }, [])
 
   // Action: Assign white player
   const assignWhitePlayer = useCallback(
     (playerId: string | null) => {
-      setConfig("whitePlayerId", playerId);
+      setConfig('whitePlayerId', playerId)
     },
-    [setConfig],
-  );
+    [setConfig]
+  )
 
   // Action: Assign black player
   const assignBlackPlayer = useCallback(
     (playerId: string | null) => {
-      setConfig("blackPlayerId", playerId);
+      setConfig('blackPlayerId', playerId)
     },
-    [setConfig],
-  );
+    [setConfig]
+  )
 
   // Action: Swap white and black assignments
   const swapSides = useCallback(() => {
-    const currentWhite = whitePlayerId;
-    const currentBlack = blackPlayerId;
-    setConfig("whitePlayerId", currentBlack);
-    setConfig("blackPlayerId", currentWhite);
-  }, [whitePlayerId, blackPlayerId, setConfig]);
+    const currentWhite = whitePlayerId
+    const currentBlack = blackPlayerId
+    setConfig('whitePlayerId', currentBlack)
+    setConfig('blackPlayerId', currentWhite)
+  }, [whitePlayerId, blackPlayerId, setConfig])
 
   // Observer detection
   const isSpectating = useMemo(() => {
-    return rosterStatus.status === "noLocalControl";
-  }, [rosterStatus.status]);
+    return rosterStatus.status === 'noLocalControl'
+  }, [rosterStatus.status])
 
   const localPlayerColor = useMemo<Color | null>(() => {
-    if (!whitePlayerId || !blackPlayerId) return null;
-    if (localActivePlayerIds.includes(whitePlayerId)) return "W";
-    if (localActivePlayerIds.includes(blackPlayerId)) return "B";
-    return null;
-  }, [localActivePlayerIds, whitePlayerId, blackPlayerId]);
+    if (!whitePlayerId || !blackPlayerId) return null
+    if (localActivePlayerIds.includes(whitePlayerId)) return 'W'
+    if (localActivePlayerIds.includes(blackPlayerId)) return 'B'
+    return null
+  }, [localActivePlayerIds, whitePlayerId, blackPlayerId])
 
   // Auto-assign players when they join and a color is missing
   useEffect(() => {
     // Only auto-assign if we have active players
-    if (activePlayerList.length === 0) return;
+    if (activePlayerList.length === 0) return
 
     // Check if we're missing white or black
-    const missingWhite = !whitePlayerId;
-    const missingBlack = !blackPlayerId;
+    const missingWhite = !whitePlayerId
+    const missingBlack = !blackPlayerId
 
     // Only auto-assign if at least one color is missing
-    if (!missingWhite && !missingBlack) return;
+    if (!missingWhite && !missingBlack) return
 
     if (missingWhite && missingBlack) {
       // Both missing - auto-assign first two players
       if (activePlayerList.length >= 2) {
         // Assign both at once to avoid double render
-        setConfig("whitePlayerId", activePlayerList[0]);
+        setConfig('whitePlayerId', activePlayerList[0])
         // Use setTimeout to batch the second assignment
-        setTimeout(() => setConfig("blackPlayerId", activePlayerList[1]), 0);
+        setTimeout(() => setConfig('blackPlayerId', activePlayerList[1]), 0)
       } else if (activePlayerList.length === 1) {
         // Only one player - assign to white by default
-        setConfig("whitePlayerId", activePlayerList[0]);
+        setConfig('whitePlayerId', activePlayerList[0])
       }
-      return;
+      return
     }
 
     // One color is missing - find an unassigned player
-    const assignedPlayers = [whitePlayerId, blackPlayerId].filter(
-      Boolean,
-    ) as string[];
-    const unassignedPlayer = activePlayerList.find(
-      (id) => !assignedPlayers.includes(id),
-    );
+    const assignedPlayers = [whitePlayerId, blackPlayerId].filter(Boolean) as string[]
+    const unassignedPlayer = activePlayerList.find((id) => !assignedPlayers.includes(id))
 
     if (unassignedPlayer) {
       if (missingWhite) {
-        setConfig("whitePlayerId", unassignedPlayer);
+        setConfig('whitePlayerId', unassignedPlayer)
       } else {
-        setConfig("blackPlayerId", unassignedPlayer);
+        setConfig('blackPlayerId', unassignedPlayer)
       }
     }
-  }, [activePlayerList, whitePlayerId, blackPlayerId]);
+  }, [activePlayerList, whitePlayerId, blackPlayerId])
   // Note: setConfig is intentionally NOT in dependencies to avoid infinite loop
   // setConfig is stable (defined with useCallback) so this is safe
 
   // Toast notifications for errors
   useEffect(() => {
-    if (!lastError) return;
+    if (!lastError) return
 
     // Parse the error to get enhanced information
     const enhancedError: EnhancedError = parseError(
       lastError,
       retryState.move ?? undefined,
-      retryState.retryCount,
-    );
+      retryState.retryCount
+    )
 
     // Show toast if appropriate
     if (shouldShowToast(enhancedError)) {
-      const toastType = getToastType(enhancedError.severity);
-      const actionName = retryState.move
-        ? getMoveActionName(retryState.move)
-        : "performing action";
+      const toastType = getToastType(enhancedError.severity)
+      const actionName = retryState.move ? getMoveActionName(retryState.move) : 'performing action'
 
       showToast({
         type: toastType,
@@ -765,33 +671,33 @@ export function RithmomachiaProvider({ children }: { children: ReactNode }) {
         description: enhancedError.suggestion
           ? `${enhancedError.suggestion} (${actionName})`
           : `Error while ${actionName}`,
-        duration: enhancedError.severity === "fatal" ? 10000 : 7000,
-      });
+        duration: enhancedError.severity === 'fatal' ? 10000 : 7000,
+      })
     }
-  }, [lastError, retryState, showToast]);
+  }, [lastError, retryState, showToast])
 
   // Toast for retry state changes (progressive feedback)
   useEffect(() => {
-    if (!retryState.isRetrying || !retryState.move) return;
+    if (!retryState.isRetrying || !retryState.move) return
 
     // Parse the error as a version conflict
     const enhancedError: EnhancedError = parseError(
-      "version conflict",
+      'version conflict',
       retryState.move,
-      retryState.retryCount,
-    );
+      retryState.retryCount
+    )
 
     // Show toast for 3+ retries (progressive disclosure)
     if (retryState.retryCount >= 3 && shouldShowToast(enhancedError)) {
-      const actionName = getMoveActionName(retryState.move);
+      const actionName = getMoveActionName(retryState.move)
       showToast({
-        type: "info",
+        type: 'info',
         title: enhancedError.userMessage,
         description: `Retrying ${actionName}... (attempt ${retryState.retryCount})`,
         duration: 3000,
-      });
+      })
     }
-  }, [retryState, showToast]);
+  }, [retryState, showToast])
 
   const value: RithmomachiaContextValue = {
     state,
@@ -823,11 +729,7 @@ export function RithmomachiaProvider({ children }: { children: ReactNode }) {
     goToSetup,
     exitSession,
     clearError,
-  };
+  }
 
-  return (
-    <RithmomachiaContext.Provider value={value}>
-      {children}
-    </RithmomachiaContext.Provider>
-  );
+  return <RithmomachiaContext.Provider value={value}>{children}</RithmomachiaContext.Provider>
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/Validator.ts b/apps/web/src/arcade-games/rithmomachia/Validator.ts
index f513f198..8586934f 100644
--- a/apps/web/src/arcade-games/rithmomachia/Validator.ts
+++ b/apps/web/src/arcade-games/rithmomachia/Validator.ts
@@ -1,8 +1,4 @@
-import type {
-  GameValidator,
-  ValidationContext,
-  ValidationResult,
-} from "@/lib/arcade/game-sdk";
+import type { GameValidator, ValidationContext, ValidationResult } from '@/lib/arcade/game-sdk'
 import type {
   AmbushContext,
   CaptureContext,
@@ -13,14 +9,10 @@ import type {
   RithmomachiaConfig,
   RithmomachiaMove,
   RithmomachiaState,
-} from "./types";
-import { opponentColor } from "./types";
-import {
-  hasAnyValidHarmony,
-  isHarmonyStillValid,
-  validateHarmony,
-} from "./utils/harmonyValidator";
-import { validateMove } from "./utils/pathValidator";
+} from './types'
+import { opponentColor } from './types'
+import { hasAnyValidHarmony, isHarmonyStillValid, validateHarmony } from './utils/harmonyValidator'
+import { validateMove } from './utils/pathValidator'
 import {
   clonePieces,
   createInitialBoard,
@@ -28,23 +20,21 @@ import {
   getLivePiecesForColor,
   getPieceAt,
   getPieceById,
-} from "./utils/pieceSetup";
-import { checkRelation } from "./utils/relationEngine";
-import { computeZobristHash, isThreefoldRepetition } from "./utils/zobristHash";
+} from './utils/pieceSetup'
+import { checkRelation } from './utils/relationEngine'
+import { computeZobristHash, isThreefoldRepetition } from './utils/zobristHash'
 
 /**
  * Validator for Rithmomachia game logic.
  * Implements all rules: movement, captures, harmony, victory conditions.
  */
-export class RithmomachiaValidator
-  implements GameValidator<RithmomachiaState, RithmomachiaMove>
-{
+export class RithmomachiaValidator implements GameValidator<RithmomachiaState, RithmomachiaMove> {
   /**
    * Get initial game state from config.
    */
   getInitialState(config: RithmomachiaConfig): RithmomachiaState {
-    const pieces = createInitialBoard();
-    const initialHash = computeZobristHash(pieces, "W");
+    const pieces = createInitialBoard()
+    const initialHash = computeZobristHash(pieces, 'W')
 
     const state: RithmomachiaState = {
       // Configuration (stored in state per arcade pattern)
@@ -58,12 +48,12 @@ export class RithmomachiaValidator
       blackPlayerId: config.blackPlayerId ?? null,
 
       // Game phase
-      gamePhase: "setup",
+      gamePhase: 'setup',
 
       // Board setup
       boardCols: 16,
       boardRows: 8,
-      turn: "W",
+      turn: 'W',
       pieces,
       capturedPieces: { W: [], B: [] },
       history: [],
@@ -72,14 +62,14 @@ export class RithmomachiaValidator
       stateHashes: [initialHash],
       winner: null,
       winCondition: null,
-    };
+    }
 
     // Add point tracking if enabled by config
     if (config.pointWinEnabled) {
-      state.pointsCaptured = { W: 0, B: 0 };
+      state.pointsCaptured = { W: 0, B: 0 }
     }
 
-    return state;
+    return state
   }
 
   /**
@@ -88,62 +78,62 @@ export class RithmomachiaValidator
   validateMove(
     state: RithmomachiaState,
     move: RithmomachiaMove,
-    context?: ValidationContext,
+    context?: ValidationContext
   ): ValidationResult {
     // Allow SET_CONFIG in any phase
-    if (move.type === "SET_CONFIG") {
-      return this.handleSetConfig(state, move, context);
+    if (move.type === 'SET_CONFIG') {
+      return this.handleSetConfig(state, move, context)
     }
 
     // Allow RESET_GAME in any phase
-    if (move.type === "RESET_GAME") {
-      return this.handleResetGame(state, move, context);
+    if (move.type === 'RESET_GAME') {
+      return this.handleResetGame(state, move, context)
     }
 
     // Allow GO_TO_SETUP from results phase
-    if (move.type === "GO_TO_SETUP") {
-      return this.handleGoToSetup(state, move, context);
+    if (move.type === 'GO_TO_SETUP') {
+      return this.handleGoToSetup(state, move, context)
     }
 
     // Game must be in playing phase for game moves
-    if (state.gamePhase === "setup") {
-      if (move.type === "START_GAME") {
-        return this.handleStartGame(state, move, context);
+    if (state.gamePhase === 'setup') {
+      if (move.type === 'START_GAME') {
+        return this.handleStartGame(state, move, context)
       }
-      return { valid: false, error: "Game not started" };
+      return { valid: false, error: 'Game not started' }
     }
 
-    if (state.gamePhase === "results") {
-      return { valid: false, error: "Game already ended" };
+    if (state.gamePhase === 'results') {
+      return { valid: false, error: 'Game already ended' }
     }
 
     // Check for existing winner
     if (state.winner) {
-      return { valid: false, error: "Game already has a winner" };
+      return { valid: false, error: 'Game already has a winner' }
     }
 
     switch (move.type) {
-      case "MOVE":
-        return this.handleMove(state, move, context);
+      case 'MOVE':
+        return this.handleMove(state, move, context)
 
-      case "DECLARE_HARMONY":
-        return this.handleDeclareHarmony(state, move, context);
+      case 'DECLARE_HARMONY':
+        return this.handleDeclareHarmony(state, move, context)
 
-      case "RESIGN":
-        return this.handleResign(state, move, context);
+      case 'RESIGN':
+        return this.handleResign(state, move, context)
 
-      case "OFFER_DRAW":
-      case "ACCEPT_DRAW":
-        return this.handleDraw(state, move, context);
+      case 'OFFER_DRAW':
+      case 'ACCEPT_DRAW':
+        return this.handleDraw(state, move, context)
 
-      case "CLAIM_REPETITION":
-        return this.handleClaimRepetition(state, move, context);
+      case 'CLAIM_REPETITION':
+        return this.handleClaimRepetition(state, move, context)
 
-      case "CLAIM_FIFTY_MOVE":
-        return this.handleClaimFiftyMove(state, move, context);
+      case 'CLAIM_FIFTY_MOVE':
+        return this.handleClaimFiftyMove(state, move, context)
 
       default:
-        return { valid: false, error: "Unknown move type" };
+        return { valid: false, error: 'Unknown move type' }
     }
   }
 
@@ -151,7 +141,7 @@ export class RithmomachiaValidator
    * Check if the game is complete.
    */
   isGameComplete(state: RithmomachiaState): boolean {
-    return state.winner !== null || state.gamePhase === "results";
+    return state.winner !== null || state.gamePhase === 'results'
   }
 
   // ==================== MOVE HANDLERS ====================
@@ -161,15 +151,15 @@ export class RithmomachiaValidator
    */
   private handleStartGame(
     state: RithmomachiaState,
-    move: Extract<RithmomachiaMove, { type: "START_GAME" }>,
-    context?: ValidationContext,
+    move: Extract<RithmomachiaMove, { type: 'START_GAME' }>,
+    context?: ValidationContext
   ): ValidationResult {
     const newState = {
       ...state,
-      gamePhase: "playing" as const,
-    };
+      gamePhase: 'playing' as const,
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   /**
@@ -177,27 +167,27 @@ export class RithmomachiaValidator
    */
   private handleMove(
     state: RithmomachiaState,
-    move: Extract<RithmomachiaMove, { type: "MOVE" }>,
-    context?: ValidationContext,
+    move: Extract<RithmomachiaMove, { type: 'MOVE' }>,
+    context?: ValidationContext
   ): ValidationResult {
-    const { from, to, pieceId, pyramidFaceUsed, capture, ambush } = move.data;
+    const { from, to, pieceId, pyramidFaceUsed, capture, ambush } = move.data
 
     // Get the piece
-    let piece: Piece;
+    let piece: Piece
     try {
-      piece = getPieceById(state.pieces, pieceId);
+      piece = getPieceById(state.pieces, pieceId)
     } catch (e) {
-      return { valid: false, error: `Piece not found: ${pieceId}` };
+      return { valid: false, error: `Piece not found: ${pieceId}` }
     }
 
     // Check ownership (turn must match piece color)
     if (piece.color !== state.turn) {
-      return { valid: false, error: `Not ${piece.color}'s turn` };
+      return { valid: false, error: `Not ${piece.color}'s turn` }
     }
 
     // Check piece is not captured
     if (piece.captured) {
-      return { valid: false, error: "Piece already captured" };
+      return { valid: false, error: 'Piece already captured' }
     }
 
     // Check from square matches piece location
@@ -205,23 +195,23 @@ export class RithmomachiaValidator
       return {
         valid: false,
         error: `Piece is not at ${from}, it's at ${piece.square}`,
-      };
+      }
     }
 
     // Validate movement geometry and path
-    const moveValidation = validateMove(piece, from, to, state.pieces);
+    const moveValidation = validateMove(piece, from, to, state.pieces)
     if (!moveValidation.valid) {
-      return { valid: false, error: moveValidation.reason };
+      return { valid: false, error: moveValidation.reason }
     }
 
     // Check destination
-    const targetPiece = getPieceAt(state.pieces, to);
+    const targetPiece = getPieceAt(state.pieces, to)
 
     // If destination is empty
     if (!targetPiece) {
       // No capture possible, just move
       if (capture) {
-        return { valid: false, error: "Cannot capture on empty square" };
+        return { valid: false, error: 'Cannot capture on empty square' }
       }
 
       // Process the move
@@ -233,23 +223,23 @@ export class RithmomachiaValidator
         pyramidFaceUsed,
         null,
         ambush,
-        context,
-      );
-      return { valid: true, newState };
+        context
+      )
+      return { valid: true, newState }
     }
 
     // Destination is occupied
     // Cannot capture own piece
     if (targetPiece.color === piece.color) {
-      return { valid: false, error: "Cannot capture own piece" };
+      return { valid: false, error: 'Cannot capture own piece' }
     }
 
     // Must have a capture declaration if landing on enemy
     if (!capture) {
       return {
         valid: false,
-        error: "Must declare capture relation when landing on enemy piece",
-      };
+        error: 'Must declare capture relation when landing on enemy piece',
+      }
     }
 
     // Validate the capture relation
@@ -258,10 +248,10 @@ export class RithmomachiaValidator
       piece,
       targetPiece,
       capture,
-      pyramidFaceUsed,
-    );
+      pyramidFaceUsed
+    )
     if (!captureValidation.valid) {
-      return { valid: false, error: captureValidation.error };
+      return { valid: false, error: captureValidation.error }
     }
 
     // Process the move with capture
@@ -271,7 +261,7 @@ export class RithmomachiaValidator
       targetPieceId: capture.targetPieceId,
       helperPieceId: capture.helperPieceId,
       moverFaceUsed: pyramidFaceUsed ?? null,
-    };
+    }
 
     const newState = this.applyMove(
       state,
@@ -281,9 +271,9 @@ export class RithmomachiaValidator
       pyramidFaceUsed,
       captureContext,
       ambush,
-      context,
-    );
-    return { valid: true, newState };
+      context
+    )
+    return { valid: true, newState }
   }
 
   /**
@@ -293,114 +283,102 @@ export class RithmomachiaValidator
     state: RithmomachiaState,
     mover: Piece,
     target: Piece,
-    capture: NonNullable<
-      Extract<RithmomachiaMove, { type: "MOVE" }>["data"]["capture"]
-    >,
-    pyramidFaceUsed?: number | null,
+    capture: NonNullable<Extract<RithmomachiaMove, { type: 'MOVE' }>['data']['capture']>,
+    pyramidFaceUsed?: number | null
   ): ValidationResult {
     // Get target value
-    const targetValue = getEffectiveValue(target);
+    const targetValue = getEffectiveValue(target)
     if (targetValue === null) {
-      return { valid: false, error: "Target has no value" };
+      return { valid: false, error: 'Target has no value' }
     }
 
     // Get helper value (if required)
-    let helperValue: number | undefined;
+    let helperValue: number | undefined
     if (capture.helperPieceId) {
-      let helperPiece: Piece;
+      let helperPiece: Piece
       try {
-        helperPiece = getPieceById(state.pieces, capture.helperPieceId);
+        helperPiece = getPieceById(state.pieces, capture.helperPieceId)
       } catch (e) {
         return {
           valid: false,
           error: `Helper piece not found: ${capture.helperPieceId}`,
-        };
+        }
       }
 
       // Helper must be friendly
       if (helperPiece.color !== mover.color) {
-        return { valid: false, error: "Helper must be friendly" };
+        return { valid: false, error: 'Helper must be friendly' }
       }
 
       // Helper must not be captured
       if (helperPiece.captured) {
-        return { valid: false, error: "Helper is captured" };
+        return { valid: false, error: 'Helper is captured' }
       }
 
       // Helper cannot be the mover
       if (helperPiece.id === mover.id) {
-        return { valid: false, error: "Helper cannot be the mover itself" };
+        return { valid: false, error: 'Helper cannot be the mover itself' }
       }
 
       // Helper cannot be a Pyramid (v1 simplification)
-      if (helperPiece.type === "P") {
-        return { valid: false, error: "Pyramids cannot be helpers in v1" };
+      if (helperPiece.type === 'P') {
+        return { valid: false, error: 'Pyramids cannot be helpers in v1' }
       }
 
-      helperValue = getEffectiveValue(helperPiece) ?? undefined;
+      helperValue = getEffectiveValue(helperPiece) ?? undefined
     }
 
     // Get mover value(s) - for pyramids, try all faces if not specified
-    if (mover.type === "P") {
+    if (mover.type === 'P') {
       if (pyramidFaceUsed) {
         // Specific face provided - validate it
         if (!mover.pyramidFaces?.some((f) => f === pyramidFaceUsed)) {
-          return { valid: false, error: "Invalid pyramid face" };
+          return { valid: false, error: 'Invalid pyramid face' }
         }
         const relationCheck = checkRelation(
           capture.relation,
           pyramidFaceUsed,
           targetValue,
-          helperValue,
-        );
+          helperValue
+        )
         if (!relationCheck.valid) {
           return {
             valid: false,
-            error: relationCheck.explanation || "Relation check failed",
-          };
+            error: relationCheck.explanation || 'Relation check failed',
+          }
         }
-        return { valid: true };
+        return { valid: true }
       } else {
         // No face specified - try all faces and accept if ANY works
         if (!mover.pyramidFaces || mover.pyramidFaces.length !== 4) {
-          return { valid: false, error: "Pyramid must have 4 faces" };
+          return { valid: false, error: 'Pyramid must have 4 faces' }
         }
 
         for (const faceValue of mover.pyramidFaces) {
-          const relationCheck = checkRelation(
-            capture.relation,
-            faceValue,
-            targetValue,
-            helperValue,
-          );
+          const relationCheck = checkRelation(capture.relation, faceValue, targetValue, helperValue)
           if (relationCheck.valid) {
             // At least one face works - capture is valid
-            return { valid: true };
+            return { valid: true }
           }
         }
 
         // None of the faces worked
         return {
           valid: false,
-          error: "No pyramid face satisfies the relation",
-        };
+          error: 'No pyramid face satisfies the relation',
+        }
       }
     } else {
       // Non-pyramid piece
-      const moverValue = mover.value!;
-      const relationCheck = checkRelation(
-        capture.relation,
-        moverValue,
-        targetValue,
-        helperValue,
-      );
+      const moverValue = mover.value!
+      const relationCheck = checkRelation(capture.relation, moverValue, targetValue, helperValue)
       if (!relationCheck.valid) {
         return {
           valid: false,
-          error: relationCheck.explanation || "Relation check failed",
-        };
+          error: relationCheck.explanation || 'Relation check failed',
+        }
       }
-      return { valid: true };
+      return { valid: true }
     }
   }
 
@@ -415,76 +393,69 @@ export class RithmomachiaValidator
     pyramidFaceUsed: number | null | undefined,
     capture: CaptureContext | null,
     ambush: AmbushContext | undefined,
-    context?: ValidationContext,
+    context?: ValidationContext
   ): RithmomachiaState {
     // Clone state
-    const newState = { ...state };
-    newState.pieces = clonePieces(state.pieces);
+    const newState = { ...state }
+    newState.pieces = clonePieces(state.pieces)
     newState.capturedPieces = {
       W: [...state.capturedPieces.W],
       B: [...state.capturedPieces.B],
-    };
-    newState.history = [...state.history];
-    newState.stateHashes = [...state.stateHashes];
+    }
+    newState.history = [...state.history]
+    newState.stateHashes = [...state.stateHashes]
 
     // Move the piece
-    newState.pieces[piece.id].square = to;
+    newState.pieces[piece.id].square = to
 
     // Set pyramid face if used
-    if (pyramidFaceUsed && piece.type === "P") {
-      newState.pieces[piece.id].activePyramidFace = pyramidFaceUsed;
+    if (pyramidFaceUsed && piece.type === 'P') {
+      newState.pieces[piece.id].activePyramidFace = pyramidFaceUsed
     }
 
     // Handle capture
-    let capturedPiece: Piece | null = null;
+    let capturedPiece: Piece | null = null
     if (capture) {
-      const targetPiece = newState.pieces[capture.targetPieceId];
-      targetPiece.captured = true;
-      newState.capturedPieces[opponentColor(piece.color)].push(targetPiece);
-      capturedPiece = targetPiece;
+      const targetPiece = newState.pieces[capture.targetPieceId]
+      targetPiece.captured = true
+      newState.capturedPieces[opponentColor(piece.color)].push(targetPiece)
+      capturedPiece = targetPiece
 
       // Reset no-progress counter
-      newState.noProgressCount = 0;
+      newState.noProgressCount = 0
 
       // Update points if enabled
       if (newState.pointsCaptured) {
-        const points = this.getPiecePoints(targetPiece);
-        newState.pointsCaptured[piece.color] += points;
+        const points = this.getPiecePoints(targetPiece)
+        newState.pointsCaptured[piece.color] += points
       }
     } else {
       // No capture = increment no-progress counter
-      newState.noProgressCount += 1;
+      newState.noProgressCount += 1
     }
 
     // Handle ambush (if declared)
     if (ambush) {
-      const ambushValidation = this.validateAmbush(
-        newState,
-        piece.color,
-        ambush,
-      );
+      const ambushValidation = this.validateAmbush(newState, piece.color, ambush)
       if (ambushValidation.valid) {
-        const enemyPiece = newState.pieces[ambush.enemyPieceId];
-        enemyPiece.captured = true;
-        newState.capturedPieces[opponentColor(piece.color)].push(enemyPiece);
+        const enemyPiece = newState.pieces[ambush.enemyPieceId]
+        enemyPiece.captured = true
+        newState.capturedPieces[opponentColor(piece.color)].push(enemyPiece)
 
         // Update points if enabled
         if (newState.pointsCaptured) {
-          const points = this.getPiecePoints(enemyPiece);
-          newState.pointsCaptured[piece.color] += points;
+          const points = this.getPiecePoints(enemyPiece)
+          newState.pointsCaptured[piece.color] += points
         }
 
         // Reset no-progress counter
-        newState.noProgressCount = 0;
+        newState.noProgressCount = 0
       }
     }
 
     // Compute new hash
-    const newHash = computeZobristHash(
-      newState.pieces,
-      opponentColor(piece.color),
-    );
-    newState.stateHashes.push(newHash);
+    const newHash = computeZobristHash(newState.pieces, opponentColor(piece.color))
+    newState.stateHashes.push(newHash)
 
     // Create move record
     const moveRecord: MoveRecord = {
@@ -499,73 +470,67 @@ export class RithmomachiaValidator
       harmonyDeclared: null,
       fenLikeHash: newHash,
       noProgressCount: newState.noProgressCount,
-      resultAfter: "ONGOING",
-    };
+      resultAfter: 'ONGOING',
+    }
 
-    newState.history.push(moveRecord);
+    newState.history.push(moveRecord)
 
     // Switch turn
-    newState.turn = opponentColor(piece.color);
+    newState.turn = opponentColor(piece.color)
 
     // Check for pending harmony validation
-    if (
-      newState.pendingHarmony &&
-      newState.pendingHarmony.by === newState.turn
-    ) {
+    if (newState.pendingHarmony && newState.pendingHarmony.by === newState.turn) {
       // It's now the declarer's turn again - check if harmony still exists
-      const config = this.getConfigFromState(newState);
+      const config = this.getConfigFromState(newState)
       if (config.allowAnySetOnRecheck) {
         // Check for ANY valid harmony
         if (hasAnyValidHarmony(newState.pieces, newState.pendingHarmony.by)) {
           // Harmony persisted! Victory!
-          newState.winner = newState.pendingHarmony.by;
-          newState.winCondition = "HARMONY";
-          newState.gamePhase = "results";
-          moveRecord.resultAfter =
-            newState.winner === "W" ? "WINS_W" : "WINS_B";
+          newState.winner = newState.pendingHarmony.by
+          newState.winCondition = 'HARMONY'
+          newState.gamePhase = 'results'
+          moveRecord.resultAfter = newState.winner === 'W' ? 'WINS_W' : 'WINS_B'
         } else {
           // Harmony broken
-          newState.pendingHarmony = null;
+          newState.pendingHarmony = null
         }
       } else {
         // Check if the SAME harmony still exists
         if (isHarmonyStillValid(newState.pieces, newState.pendingHarmony)) {
-          newState.winner = newState.pendingHarmony.by;
-          newState.winCondition = "HARMONY";
-          newState.gamePhase = "results";
-          moveRecord.resultAfter =
-            newState.winner === "W" ? "WINS_W" : "WINS_B";
+          newState.winner = newState.pendingHarmony.by
+          newState.winCondition = 'HARMONY'
+          newState.gamePhase = 'results'
+          moveRecord.resultAfter = newState.winner === 'W' ? 'WINS_W' : 'WINS_B'
         } else {
-          newState.pendingHarmony = null;
+          newState.pendingHarmony = null
         }
       }
     }
 
     // Check for point victory (if enabled)
     if (newState.pointsCaptured && context) {
-      const config = this.getConfigFromState(newState);
+      const config = this.getConfigFromState(newState)
       if (config.pointWinEnabled) {
-        const capturedByMover = newState.pointsCaptured[piece.color];
+        const capturedByMover = newState.pointsCaptured[piece.color]
         if (capturedByMover >= config.pointWinThreshold) {
-          newState.winner = piece.color;
-          newState.winCondition = "POINTS";
-          newState.gamePhase = "results";
-          moveRecord.resultAfter =
-            newState.winner === "W" ? "WINS_W" : "WINS_B";
+          newState.winner = piece.color
+          newState.winCondition = 'POINTS'
+          newState.gamePhase = 'results'
+          moveRecord.resultAfter = newState.winner === 'W' ? 'WINS_W' : 'WINS_B'
         }
       }
     }
 
     // Check for exhaustion (opponent has no legal moves)
-    const opponentHasMoves = this.hasLegalMoves(newState, newState.turn);
+    const opponentHasMoves = this.hasLegalMoves(newState, newState.turn)
     if (!opponentHasMoves) {
-      newState.winner = opponentColor(newState.turn);
-      newState.winCondition = "EXHAUSTION";
-      newState.gamePhase = "results";
-      moveRecord.resultAfter = newState.winner === "W" ? "WINS_W" : "WINS_B";
+      newState.winner = opponentColor(newState.turn)
+      newState.winCondition = 'EXHAUSTION'
+      newState.gamePhase = 'results'
+      moveRecord.resultAfter = newState.winner === 'W' ? 'WINS_W' : 'WINS_B'
     }
 
-    return newState;
+    return newState
   }
 
   /**
@@ -574,81 +539,76 @@ export class RithmomachiaValidator
   private validateAmbush(
     state: RithmomachiaState,
     color: Color,
-    ambush: AmbushContext,
+    ambush: AmbushContext
   ): ValidationResult {
     // Get the enemy piece
-    let enemyPiece: Piece;
+    let enemyPiece: Piece
     try {
-      enemyPiece = getPieceById(state.pieces, ambush.enemyPieceId);
+      enemyPiece = getPieceById(state.pieces, ambush.enemyPieceId)
     } catch (e) {
       return {
         valid: false,
         error: `Enemy piece not found: ${ambush.enemyPieceId}`,
-      };
+      }
     }
 
     // Must be enemy
     if (enemyPiece.color === color) {
-      return { valid: false, error: "Ambush target must be enemy" };
+      return { valid: false, error: 'Ambush target must be enemy' }
     }
 
     // Get helpers
-    let helper1: Piece;
-    let helper2: Piece;
+    let helper1: Piece
+    let helper2: Piece
     try {
-      helper1 = getPieceById(state.pieces, ambush.helper1Id);
-      helper2 = getPieceById(state.pieces, ambush.helper2Id);
+      helper1 = getPieceById(state.pieces, ambush.helper1Id)
+      helper2 = getPieceById(state.pieces, ambush.helper2Id)
     } catch (e) {
-      return { valid: false, error: "Helper not found" };
+      return { valid: false, error: 'Helper not found' }
     }
 
     // Helpers must be friendly
     if (helper1.color !== color || helper2.color !== color) {
-      return { valid: false, error: "Helpers must be friendly" };
+      return { valid: false, error: 'Helpers must be friendly' }
     }
 
     // Helpers must be alive
     if (helper1.captured || helper2.captured) {
-      return { valid: false, error: "Helper is captured" };
+      return { valid: false, error: 'Helper is captured' }
     }
 
     // Helpers must be distinct
     if (helper1.id === helper2.id) {
-      return { valid: false, error: "Helpers must be distinct" };
+      return { valid: false, error: 'Helpers must be distinct' }
     }
 
     // Helpers cannot be Pyramids (v1)
-    if (helper1.type === "P" || helper2.type === "P") {
-      return { valid: false, error: "Pyramids cannot be helpers in v1" };
+    if (helper1.type === 'P' || helper2.type === 'P') {
+      return { valid: false, error: 'Pyramids cannot be helpers in v1' }
     }
 
     // Get values
-    const enemyValue = getEffectiveValue(enemyPiece);
-    const helper1Value = getEffectiveValue(helper1);
-    const helper2Value = getEffectiveValue(helper2);
+    const enemyValue = getEffectiveValue(enemyPiece)
+    const helper1Value = getEffectiveValue(helper1)
+    const helper2Value = getEffectiveValue(helper2)
 
     if (enemyValue === null || helper1Value === null || helper2Value === null) {
-      return { valid: false, error: "Piece has no value" };
+      return { valid: false, error: 'Piece has no value' }
     }
 
     // Check the relation using the TWO helpers
     // For ambush, we interpret the relation as: helper1 and helper2 combine to match enemy
     // For example: SUM means helper1 + helper2 = enemy
-    const relationCheck = checkRelation(
-      ambush.relation,
-      helper1Value,
-      enemyValue,
-      helper2Value,
-    );
+    const relationCheck = checkRelation(ambush.relation, helper1Value, enemyValue, helper2Value)
 
     if (!relationCheck.valid) {
       return {
         valid: false,
-        error: relationCheck.explanation || "Ambush relation failed",
-      };
+        error: relationCheck.explanation || 'Ambush relation failed',
+      }
     }
 
-    return { valid: true };
+    return { valid: true }
   }
 
   /**
@@ -656,35 +616,35 @@ export class RithmomachiaValidator
    */
   private handleDeclareHarmony(
     state: RithmomachiaState,
-    move: Extract<RithmomachiaMove, { type: "DECLARE_HARMONY" }>,
-    context?: ValidationContext,
+    move: Extract<RithmomachiaMove, { type: 'DECLARE_HARMONY' }>,
+    context?: ValidationContext
   ): ValidationResult {
-    const { pieceIds, harmonyType, params } = move.data;
+    const { pieceIds, harmonyType, params } = move.data
 
     // Must be declaring player's turn
     // (We need to get the player's color from context)
     // For now, assume it's the current turn's player
-    const declaringColor = state.turn;
+    const declaringColor = state.turn
 
     // Get the pieces
     const pieces = pieceIds
       .map((id) => {
         try {
-          return getPieceById(state.pieces, id);
+          return getPieceById(state.pieces, id)
         } catch (e) {
-          return null;
+          return null
         }
       })
-      .filter((p): p is Piece => p !== null);
+      .filter((p): p is Piece => p !== null)
 
     if (pieces.length !== pieceIds.length) {
-      return { valid: false, error: "Some pieces not found" };
+      return { valid: false, error: 'Some pieces not found' }
     }
 
     // Validate the harmony
-    const validation = validateHarmony(pieces, declaringColor);
+    const validation = validateHarmony(pieces, declaringColor)
     if (!validation.valid) {
-      return { valid: false, error: validation.reason };
+      return { valid: false, error: validation.reason }
     }
 
     // Check type matches
@@ -692,7 +652,7 @@ export class RithmomachiaValidator
       return {
         valid: false,
         error: `Expected ${harmonyType} but found ${validation.type}`,
-      };
+      }
     }
 
     // Create harmony declaration
@@ -702,33 +662,33 @@ export class RithmomachiaValidator
       type: harmonyType,
       params,
       declaredAtPly: state.history.length,
-    };
+    }
 
     // Clone state
     const newState = {
       ...state,
       pendingHarmony: harmony,
       history: [...state.history],
-    };
+    }
 
     // Add to history
     const moveRecord: MoveRecord = {
       ply: newState.history.length + 1,
       color: declaringColor,
-      from: "",
-      to: "",
-      pieceId: "",
+      from: '',
+      to: '',
+      pieceId: '',
       harmonyDeclared: harmony,
       fenLikeHash: state.stateHashes[state.stateHashes.length - 1],
       noProgressCount: state.noProgressCount,
-      resultAfter: "ONGOING",
-    };
+      resultAfter: 'ONGOING',
+    }
 
-    newState.history.push(moveRecord);
+    newState.history.push(moveRecord)
 
     // Do NOT switch turn - harmony declaration is free
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   /**
@@ -736,20 +696,20 @@ export class RithmomachiaValidator
    */
   private handleResign(
     state: RithmomachiaState,
-    move: Extract<RithmomachiaMove, { type: "RESIGN" }>,
-    context?: ValidationContext,
+    move: Extract<RithmomachiaMove, { type: 'RESIGN' }>,
+    context?: ValidationContext
   ): ValidationResult {
-    const resigningColor = state.turn;
-    const winner = opponentColor(resigningColor);
+    const resigningColor = state.turn
+    const winner = opponentColor(resigningColor)
 
     const newState = {
       ...state,
       winner,
-      winCondition: "RESIGNATION" as const,
-      gamePhase: "results" as const,
-    };
+      winCondition: 'RESIGNATION' as const,
+      gamePhase: 'results' as const,
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   /**
@@ -757,18 +717,18 @@ export class RithmomachiaValidator
    */
   private handleDraw(
     state: RithmomachiaState,
-    move: Extract<RithmomachiaMove, { type: "OFFER_DRAW" | "ACCEPT_DRAW" }>,
-    context?: ValidationContext,
+    move: Extract<RithmomachiaMove, { type: 'OFFER_DRAW' | 'ACCEPT_DRAW' }>,
+    context?: ValidationContext
   ): ValidationResult {
     // For simplicity, accept any draw (we'd need to track offers in state for proper implementation)
     const newState = {
       ...state,
       winner: null,
-      winCondition: "AGREEMENT" as const,
-      gamePhase: "results" as const,
-    };
+      winCondition: 'AGREEMENT' as const,
+      gamePhase: 'results' as const,
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   /**
@@ -776,25 +736,25 @@ export class RithmomachiaValidator
    */
   private handleClaimRepetition(
     state: RithmomachiaState,
-    move: Extract<RithmomachiaMove, { type: "CLAIM_REPETITION" }>,
-    context?: ValidationContext,
+    move: Extract<RithmomachiaMove, { type: 'CLAIM_REPETITION' }>,
+    context?: ValidationContext
   ): ValidationResult {
-    const config = this.getConfigFromState(state);
+    const config = this.getConfigFromState(state)
     if (!config.repetitionRule) {
-      return { valid: false, error: "Repetition rule not enabled" };
+      return { valid: false, error: 'Repetition rule not enabled' }
     }
 
     if (isThreefoldRepetition(state.stateHashes)) {
       const newState = {
         ...state,
         winner: null,
-        winCondition: "REPETITION" as const,
-        gamePhase: "results" as const,
-      };
-      return { valid: true, newState };
+        winCondition: 'REPETITION' as const,
+        gamePhase: 'results' as const,
+      }
+      return { valid: true, newState }
     }
 
-    return { valid: false, error: "No threefold repetition detected" };
+    return { valid: false, error: 'No threefold repetition detected' }
   }
 
   /**
@@ -802,28 +762,28 @@ export class RithmomachiaValidator
    */
   private handleClaimFiftyMove(
     state: RithmomachiaState,
-    move: Extract<RithmomachiaMove, { type: "CLAIM_FIFTY_MOVE" }>,
-    context?: ValidationContext,
+    move: Extract<RithmomachiaMove, { type: 'CLAIM_FIFTY_MOVE' }>,
+    context?: ValidationContext
   ): ValidationResult {
-    const config = this.getConfigFromState(state);
+    const config = this.getConfigFromState(state)
     if (!config.fiftyMoveRule) {
-      return { valid: false, error: "Fifty-move rule not enabled" };
+      return { valid: false, error: 'Fifty-move rule not enabled' }
     }
 
     if (state.noProgressCount >= 50) {
       const newState = {
         ...state,
         winner: null,
-        winCondition: "FIFTY" as const,
-        gamePhase: "results" as const,
-      };
-      return { valid: true, newState };
+        winCondition: 'FIFTY' as const,
+        gamePhase: 'results' as const,
+      }
+      return { valid: true, newState }
     }
 
     return {
       valid: false,
       error: `Only ${state.noProgressCount} moves without progress (need 50)`,
-    };
+    }
   }
 
   /**
@@ -832,60 +792,60 @@ export class RithmomachiaValidator
    */
   private handleSetConfig(
     state: RithmomachiaState,
-    move: Extract<RithmomachiaMove, { type: "SET_CONFIG" }>,
-    context?: ValidationContext,
+    move: Extract<RithmomachiaMove, { type: 'SET_CONFIG' }>,
+    context?: ValidationContext
   ): ValidationResult {
-    const { field, value } = move.data;
+    const { field, value } = move.data
 
     // Validate the field exists in config
     const validFields: Array<keyof RithmomachiaConfig> = [
-      "pointWinEnabled",
-      "pointWinThreshold",
-      "repetitionRule",
-      "fiftyMoveRule",
-      "allowAnySetOnRecheck",
-      "timeControlMs",
-      "whitePlayerId",
-      "blackPlayerId",
-    ];
+      'pointWinEnabled',
+      'pointWinThreshold',
+      'repetitionRule',
+      'fiftyMoveRule',
+      'allowAnySetOnRecheck',
+      'timeControlMs',
+      'whitePlayerId',
+      'blackPlayerId',
+    ]
 
     if (!validFields.includes(field as keyof RithmomachiaConfig)) {
-      return { valid: false, error: `Invalid config field: ${field}` };
+      return { valid: false, error: `Invalid config field: ${field}` }
     }
 
     // Basic type validation
     if (
-      field === "pointWinEnabled" ||
-      field === "repetitionRule" ||
-      field === "fiftyMoveRule" ||
-      field === "allowAnySetOnRecheck"
+      field === 'pointWinEnabled' ||
+      field === 'repetitionRule' ||
+      field === 'fiftyMoveRule' ||
+      field === 'allowAnySetOnRecheck'
     ) {
-      if (typeof value !== "boolean") {
-        return { valid: false, error: `${field} must be a boolean` };
+      if (typeof value !== 'boolean') {
+        return { valid: false, error: `${field} must be a boolean` }
       }
     }
 
-    if (field === "pointWinThreshold") {
-      if (typeof value !== "number" || value < 1) {
+    if (field === 'pointWinThreshold') {
+      if (typeof value !== 'number' || value < 1) {
         return {
           valid: false,
-          error: "pointWinThreshold must be a positive number",
-        };
+          error: 'pointWinThreshold must be a positive number',
+        }
       }
     }
 
-    if (field === "timeControlMs") {
-      if (value !== null && (typeof value !== "number" || value < 0)) {
+    if (field === 'timeControlMs') {
+      if (value !== null && (typeof value !== 'number' || value < 0)) {
         return {
           valid: false,
-          error: "timeControlMs must be null or a non-negative number",
-        };
+          error: 'timeControlMs must be null or a non-negative number',
+        }
       }
     }
 
-    if (field === "whitePlayerId" || field === "blackPlayerId") {
-      if (value !== null && typeof value !== "string") {
-        return { valid: false, error: `${field} must be a string or null` };
+    if (field === 'whitePlayerId' || field === 'blackPlayerId') {
+      if (value !== null && typeof value !== 'string') {
+        return { valid: false, error: `${field} must be a string or null` }
       }
     }
 
@@ -893,18 +853,14 @@ export class RithmomachiaValidator
     const newState = {
       ...state,
       [field]: value,
-    };
-
-    // If enabling point tracking and it doesn't exist, initialize it
-    if (
-      field === "pointWinEnabled" &&
-      value === true &&
-      !state.pointsCaptured
-    ) {
-      newState.pointsCaptured = { W: 0, B: 0 };
     }
 
-    return { valid: true, newState };
+    // If enabling point tracking and it doesn't exist, initialize it
+    if (field === 'pointWinEnabled' && value === true && !state.pointsCaptured) {
+      newState.pointsCaptured = { W: 0, B: 0 }
+    }
+
+    return { valid: true, newState }
   }
 
   /**
@@ -913,19 +869,19 @@ export class RithmomachiaValidator
    */
   private handleResetGame(
     state: RithmomachiaState,
-    move: Extract<RithmomachiaMove, { type: "RESET_GAME" }>,
-    context?: ValidationContext,
+    move: Extract<RithmomachiaMove, { type: 'RESET_GAME' }>,
+    context?: ValidationContext
   ): ValidationResult {
     // Extract current config from state
-    const config = this.getConfigFromState(state);
+    const config = this.getConfigFromState(state)
 
     // Get fresh initial state with current config
-    const newState = this.getInitialState(config);
+    const newState = this.getInitialState(config)
 
     // Immediately transition to playing phase (skip setup)
-    newState.gamePhase = "playing";
+    newState.gamePhase = 'playing'
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   /**
@@ -934,16 +890,16 @@ export class RithmomachiaValidator
    */
   private handleGoToSetup(
     state: RithmomachiaState,
-    move: Extract<RithmomachiaMove, { type: "GO_TO_SETUP" }>,
-    context?: ValidationContext,
+    move: Extract<RithmomachiaMove, { type: 'GO_TO_SETUP' }>,
+    context?: ValidationContext
   ): ValidationResult {
     // Extract current config from state
-    const config = this.getConfigFromState(state);
+    const config = this.getConfigFromState(state)
 
     // Get fresh initial state (which starts in setup phase) with current config
-    const newState = this.getInitialState(config);
+    const newState = this.getInitialState(config)
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   // ==================== HELPER METHODS ====================
@@ -952,51 +908,38 @@ export class RithmomachiaValidator
    * Check if a player has any legal moves.
    */
   private hasLegalMoves(state: RithmomachiaState, color: Color): boolean {
-    const pieces = getLivePiecesForColor(state.pieces, color);
+    const pieces = getLivePiecesForColor(state.pieces, color)
 
     for (const piece of pieces) {
       // Check all possible destinations
       for (let file = 0; file < 16; file++) {
         for (let rank = 1; rank <= 8; rank++) {
-          const to = `${String.fromCharCode(65 + file)}${rank}`;
+          const to = `${String.fromCharCode(65 + file)}${rank}`
 
           // Skip same square
-          if (to === piece.square) continue;
+          if (to === piece.square) continue
 
           // Check if move is geometrically legal
-          const validation = validateMove(
-            piece,
-            piece.square,
-            to,
-            state.pieces,
-          );
+          const validation = validateMove(piece, piece.square, to, state.pieces)
           if (validation.valid) {
             // Check if destination is empty or has enemy that can be captured
-            const targetPiece = getPieceAt(state.pieces, to);
+            const targetPiece = getPieceAt(state.pieces, to)
             if (!targetPiece) {
               // Empty square = legal move
-              return true;
+              return true
             }
             if (targetPiece.color !== color) {
               // Enemy piece - check if any capture relation exists
               // (We'll simplify and say yes if any no-helper relation works)
-              const moverValue = getEffectiveValue(piece);
-              const targetValue = getEffectiveValue(targetPiece);
+              const moverValue = getEffectiveValue(piece)
+              const targetValue = getEffectiveValue(targetPiece)
               if (moverValue && targetValue) {
                 // Check for simple relations (no helper required)
-                const simpleRelations = [
-                  "EQUAL",
-                  "MULTIPLE",
-                  "DIVISOR",
-                ] as const;
+                const simpleRelations = ['EQUAL', 'MULTIPLE', 'DIVISOR'] as const
                 for (const relation of simpleRelations) {
-                  const check = checkRelation(
-                    relation,
-                    moverValue,
-                    targetValue,
-                  );
+                  const check = checkRelation(relation, moverValue, targetValue)
                   if (check.valid) {
-                    return true;
+                    return true
                   }
                 }
                 // Could also check with helpers, but that's expensive
@@ -1008,7 +951,7 @@ export class RithmomachiaValidator
       }
     }
 
-    return false;
+    return false
   }
 
   /**
@@ -1020,8 +963,8 @@ export class RithmomachiaValidator
       T: 2,
       S: 3,
       P: 5,
-    };
-    return POINTS[piece.type];
+    }
+    return POINTS[piece.type]
   }
 
   /**
@@ -1037,8 +980,8 @@ export class RithmomachiaValidator
       timeControlMs: state.timeControlMs,
       whitePlayerId: state.whitePlayerId ?? null,
       blackPlayerId: state.blackPlayerId ?? null,
-    };
+    }
   }
 }
 
-export const rithmomachiaValidator = new RithmomachiaValidator();
+export const rithmomachiaValidator = new RithmomachiaValidator()
diff --git a/apps/web/src/arcade-games/rithmomachia/components/PieceRenderer.tsx b/apps/web/src/arcade-games/rithmomachia/components/PieceRenderer.tsx
index 36b78536..4c6d3572 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/PieceRenderer.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/PieceRenderer.tsx
@@ -1,16 +1,16 @@
-import { useSpring, animated } from "@react-spring/web";
-import { AbacusReact, useAbacusDisplay } from "@soroban/abacus-react";
-import type { Color, PieceType } from "../types";
+import { useSpring, animated } from '@react-spring/web'
+import { AbacusReact, useAbacusDisplay } from '@soroban/abacus-react'
+import type { Color, PieceType } from '../types'
 
 interface PieceRendererProps {
-  type: PieceType;
-  color: Color;
-  value: number | string;
-  size?: number;
-  useNativeAbacusNumbers?: boolean;
-  selected?: boolean;
-  pyramidFaces?: number[];
-  shouldRotate?: boolean;
+  type: PieceType
+  color: Color
+  value: number | string
+  size?: number
+  useNativeAbacusNumbers?: boolean
+  selected?: boolean
+  pyramidFaces?: number[]
+  shouldRotate?: boolean
 }
 
 /**
@@ -28,42 +28,42 @@ export function PieceRenderer({
   pyramidFaces = [],
   shouldRotate = false,
 }: PieceRendererProps) {
-  const isDark = color === "B";
-  const { config } = useAbacusDisplay();
+  const isDark = color === 'B'
+  const { config } = useAbacusDisplay()
 
   // Subtle animation for pyramid face numbers
   const pyramidNumbersSpring = useSpring({
     from: { opacity: 0, scale: 0.8 },
     to: {
-      opacity: type === "P" && selected && pyramidFaces.length === 4 ? 1 : 0,
-      scale: type === "P" && selected && pyramidFaces.length === 4 ? 1 : 0.8,
+      opacity: type === 'P' && selected && pyramidFaces.length === 4 ? 1 : 0,
+      scale: type === 'P' && selected && pyramidFaces.length === 4 ? 1 : 0.8,
     },
     config: { tension: 200, friction: 20 },
-  });
+  })
 
   // Gradient IDs
-  const gradientId = `gradient-${type}-${color}-${size}`;
-  const shadowId = `shadow-${type}-${color}-${size}`;
+  const gradientId = `gradient-${type}-${color}-${size}`
+  const shadowId = `shadow-${type}-${color}-${size}`
 
   // Enhanced colors with gradients
-  const gradientStart = isDark ? "#2d2d2d" : "#ffffff";
-  const gradientEnd = isDark ? "#0a0a0a" : "#d0d0d0";
-  const strokeColor = isDark ? "#ffffff" : "#1a1a1a";
-  const textColor = isDark ? "#ffffff" : "#000000";
+  const gradientStart = isDark ? '#2d2d2d' : '#ffffff'
+  const gradientEnd = isDark ? '#0a0a0a' : '#d0d0d0'
+  const strokeColor = isDark ? '#ffffff' : '#1a1a1a'
+  const textColor = isDark ? '#ffffff' : '#000000'
 
   // Calculate responsive font size based on value length
-  const valueStr = value.toString();
-  const baseSize = type === "P" ? size * 0.18 : size * 0.35;
-  let fontSize = baseSize;
+  const valueStr = value.toString()
+  const baseSize = type === 'P' ? size * 0.18 : size * 0.35
+  let fontSize = baseSize
   if (valueStr.length >= 3) {
-    fontSize = baseSize * 0.65; // 3+ digits: smaller
+    fontSize = baseSize * 0.65 // 3+ digits: smaller
   } else if (valueStr.length === 2) {
-    fontSize = baseSize * 0.8; // 2 digits: slightly smaller
+    fontSize = baseSize * 0.8 // 2 digits: slightly smaller
   }
 
   const renderShape = () => {
     switch (type) {
-      case "C": // Circle
+      case 'C': // Circle
         return (
           <g>
             <circle
@@ -83,9 +83,9 @@ export function PieceRenderer({
               opacity={0.9}
             />
           </g>
-        );
+        )
 
-      case "T": // Triangle - BLACK points RIGHT, WHITE points LEFT
+      case 'T': // Triangle - BLACK points RIGHT, WHITE points LEFT
         if (isDark) {
           // Black triangle points RIGHT (towards white)
           return (
@@ -103,7 +103,7 @@ export function PieceRenderer({
                 opacity={0.9}
               />
             </g>
-          );
+          )
         } else {
           // White triangle points LEFT (towards black)
           return (
@@ -121,10 +121,10 @@ export function PieceRenderer({
                 opacity={0.9}
               />
             </g>
-          );
+          )
         }
 
-      case "S": // Square
+      case 'S': // Square
         return (
           <g>
             <rect
@@ -146,12 +146,12 @@ export function PieceRenderer({
               opacity={0.9}
             />
           </g>
-        );
+        )
 
-      case "P": {
+      case 'P': {
         // Pyramid - rotated 90° to point at opponent
         // Create centered pyramid, then rotate: BLACK→right (90°), WHITE→left (-90°)
-        const rotation = isDark ? 90 : -90;
+        const rotation = isDark ? 90 : -90
         return (
           <g transform={`rotate(${rotation}, ${size / 2}, ${size / 2})`}>
             {/* Top/smallest bar - centered */}
@@ -203,19 +203,19 @@ export function PieceRenderer({
               filter={`url(#${shadowId})`}
             />
           </g>
-        );
+        )
       }
 
       default:
-        return null;
+        return null
     }
-  };
+  }
 
   return (
     <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
       <defs>
         {/* Gradient definition */}
-        {type === "C" ? (
+        {type === 'C' ? (
           <radialGradient id={gradientId}>
             <stop offset="0%" stopColor={gradientStart} />
             <stop offset="100%" stopColor={gradientEnd} />
@@ -234,13 +234,7 @@ export function PieceRenderer({
 
         {/* Text shadow for dark pieces */}
         {isDark && (
-          <filter
-            id={`text-shadow-${color}`}
-            x="-50%"
-            y="-50%"
-            width="200%"
-            height="200%"
-          >
+          <filter id={`text-shadow-${color}`} x="-50%" y="-50%" width="200%" height="200%">
             <feDropShadow dx="0" dy="1" stdDeviation="2" floodOpacity="0.6" />
           </filter>
         )}
@@ -249,28 +243,18 @@ export function PieceRenderer({
       {renderShape()}
 
       {/* Pyramid face numbers - show when selected */}
-      {type === "P" && selected && pyramidFaces.length === 4 && (
-        <g
-          transform={
-            shouldRotate ? `rotate(90, ${size / 2}, ${size / 2})` : undefined
-          }
-        >
+      {type === 'P' && selected && pyramidFaces.length === 4 && (
+        <g transform={shouldRotate ? `rotate(90, ${size / 2}, ${size / 2})` : undefined}>
           <animated.g
             style={{
               opacity: pyramidNumbersSpring.opacity,
               transform: pyramidNumbersSpring.scale.to((s) => `scale(${s})`),
-              transformOrigin: "center",
+              transformOrigin: 'center',
             }}
           >
             {/* Filter for strong drop shadow */}
             <defs>
-              <filter
-                id={`face-shadow-${color}`}
-                x="-100%"
-                y="-100%"
-                width="300%"
-                height="300%"
-              >
+              <filter id={`face-shadow-${color}`} x="-100%" y="-100%" width="300%" height="300%">
                 <feDropShadow
                   dx="0"
                   dy="0"
@@ -289,7 +273,7 @@ export function PieceRenderer({
               textAnchor="middle"
               dominantBaseline="middle"
               fill="none"
-              stroke={isDark ? "#000000" : "#ffffff"}
+              stroke={isDark ? '#000000' : '#ffffff'}
               strokeWidth={size * 0.05}
               fontSize={size * 0.35}
               fontWeight="900"
@@ -303,12 +287,12 @@ export function PieceRenderer({
               y={size * 0.12}
               textAnchor="middle"
               dominantBaseline="middle"
-              fill={isDark ? "#fbbf24" : "#b45309"}
+              fill={isDark ? '#fbbf24' : '#b45309'}
               fontSize={size * 0.35}
               fontWeight="900"
               fontFamily="Arial Black, Arial, sans-serif"
               filter={`url(#face-shadow-${color})`}
-              style={{ transition: "all 0.2s ease" }}
+              style={{ transition: 'all 0.2s ease' }}
             >
               {pyramidFaces[0]}
             </text>
@@ -320,7 +304,7 @@ export function PieceRenderer({
               textAnchor="middle"
               dominantBaseline="middle"
               fill="none"
-              stroke={isDark ? "#000000" : "#ffffff"}
+              stroke={isDark ? '#000000' : '#ffffff'}
               strokeWidth={size * 0.05}
               fontSize={size * 0.35}
               fontWeight="900"
@@ -333,12 +317,12 @@ export function PieceRenderer({
               y={size / 2}
               textAnchor="middle"
               dominantBaseline="middle"
-              fill={isDark ? "#fbbf24" : "#b45309"}
+              fill={isDark ? '#fbbf24' : '#b45309'}
               fontSize={size * 0.35}
               fontWeight="900"
               fontFamily="Arial Black, Arial, sans-serif"
               filter={`url(#face-shadow-${color})`}
-              style={{ transition: "all 0.2s ease" }}
+              style={{ transition: 'all 0.2s ease' }}
             >
               {pyramidFaces[1]}
             </text>
@@ -350,7 +334,7 @@ export function PieceRenderer({
               textAnchor="middle"
               dominantBaseline="middle"
               fill="none"
-              stroke={isDark ? "#000000" : "#ffffff"}
+              stroke={isDark ? '#000000' : '#ffffff'}
               strokeWidth={size * 0.05}
               fontSize={size * 0.35}
               fontWeight="900"
@@ -363,12 +347,12 @@ export function PieceRenderer({
               y={size * 0.88}
               textAnchor="middle"
               dominantBaseline="middle"
-              fill={isDark ? "#fbbf24" : "#b45309"}
+              fill={isDark ? '#fbbf24' : '#b45309'}
               fontSize={size * 0.35}
               fontWeight="900"
               fontFamily="Arial Black, Arial, sans-serif"
               filter={`url(#face-shadow-${color})`}
-              style={{ transition: "all 0.2s ease" }}
+              style={{ transition: 'all 0.2s ease' }}
             >
               {pyramidFaces[2]}
             </text>
@@ -380,7 +364,7 @@ export function PieceRenderer({
               textAnchor="middle"
               dominantBaseline="middle"
               fill="none"
-              stroke={isDark ? "#000000" : "#ffffff"}
+              stroke={isDark ? '#000000' : '#ffffff'}
               strokeWidth={size * 0.05}
               fontSize={size * 0.35}
               fontWeight="900"
@@ -393,12 +377,12 @@ export function PieceRenderer({
               y={size / 2}
               textAnchor="middle"
               dominantBaseline="middle"
-              fill={isDark ? "#fbbf24" : "#b45309"}
+              fill={isDark ? '#fbbf24' : '#b45309'}
               fontSize={size * 0.35}
               fontWeight="900"
               fontFamily="Arial Black, Arial, sans-serif"
               filter={`url(#face-shadow-${color})`}
-              style={{ transition: "all 0.2s ease" }}
+              style={{ transition: 'all 0.2s ease' }}
             >
               {pyramidFaces[3]}
             </text>
@@ -407,28 +391,24 @@ export function PieceRenderer({
       )}
 
       {/* Other pieces show numbers normally */}
-      {type !== "P" && (
-        <g
-          transform={
-            shouldRotate ? `rotate(90, ${size / 2}, ${size / 2})` : undefined
-          }
-        >
-          {useNativeAbacusNumbers && typeof value === "number" ? (
+      {type !== 'P' && (
+        <g transform={shouldRotate ? `rotate(90, ${size / 2}, ${size / 2})` : undefined}>
+          {useNativeAbacusNumbers && typeof value === 'number' ? (
             // Render mini abacus
             <foreignObject
               x={size * 0.1}
               y={size * 0.1}
               width={size * 0.8}
               height={size * 0.8}
-              style={{ overflow: "visible" }}
+              style={{ overflow: 'visible' }}
             >
               <div
                 style={{
-                  width: "100%",
-                  height: "100%",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
+                  width: '100%',
+                  height: '100%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
                 }}
               >
                 <AbacusReact
@@ -441,21 +421,13 @@ export function PieceRenderer({
                   hideInactiveBeads={config.hideInactiveBeads}
                   customStyles={{
                     columnPosts: {
-                      fill: isDark
-                        ? "rgba(255, 255, 255, 0.2)"
-                        : "rgba(0, 0, 0, 0.15)",
-                      stroke: isDark
-                        ? "rgba(255, 255, 255, 0.15)"
-                        : "rgba(0, 0, 0, 0.1)",
+                      fill: isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.15)',
+                      stroke: isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)',
                       strokeWidth: 1,
                     },
                     reckoningBar: {
-                      fill: isDark
-                        ? "rgba(255, 255, 255, 0.25)"
-                        : "rgba(0, 0, 0, 0.2)",
-                      stroke: isDark
-                        ? "rgba(255, 255, 255, 0.2)"
-                        : "rgba(0, 0, 0, 0.15)",
+                      fill: isDark ? 'rgba(255, 255, 255, 0.25)' : 'rgba(0, 0, 0, 0.2)',
+                      stroke: isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.15)',
                       strokeWidth: 1,
                     },
                   }}
@@ -516,5 +488,5 @@ export function PieceRenderer({
         </g>
       )}
     </svg>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx b/apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx
index 4638461e..e0f147d8 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx
@@ -1,36 +1,30 @@
-"use client";
+'use client'
 
-import { useEffect, useState, useRef } from "react";
-import { useTranslations } from "next-intl";
-import { Textfit } from "react-textfit";
-import { css } from "../../../../styled-system/css";
-import { Z_INDEX } from "@/constants/zIndex";
-import { useAbacusSettings } from "@/hooks/useAbacusSettings";
-import { useViewport } from "@/contexts/ViewportContext";
-import { OverviewSection } from "./guide-sections/OverviewSection";
-import { PiecesSection } from "./guide-sections/PiecesSection";
-import { CaptureSection } from "./guide-sections/CaptureSection";
-import { StrategySection } from "./guide-sections/StrategySection";
-import { HarmonySection } from "./guide-sections/HarmonySection";
-import { VictorySection } from "./guide-sections/VictorySection";
+import { useEffect, useState, useRef } from 'react'
+import { useTranslations } from 'next-intl'
+import { Textfit } from 'react-textfit'
+import { css } from '../../../../styled-system/css'
+import { Z_INDEX } from '@/constants/zIndex'
+import { useAbacusSettings } from '@/hooks/useAbacusSettings'
+import { useViewport } from '@/contexts/ViewportContext'
+import { OverviewSection } from './guide-sections/OverviewSection'
+import { PiecesSection } from './guide-sections/PiecesSection'
+import { CaptureSection } from './guide-sections/CaptureSection'
+import { StrategySection } from './guide-sections/StrategySection'
+import { HarmonySection } from './guide-sections/HarmonySection'
+import { VictorySection } from './guide-sections/VictorySection'
 
 interface PlayingGuideModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  standalone?: boolean; // True when opened in popup window
-  docked?: boolean; // True when docked to side
-  onDock?: (side: "left" | "right") => void;
-  onUndock?: () => void;
-  onDockPreview?: (side: "left" | "right" | null) => void; // Preview docking without committing
+  isOpen: boolean
+  onClose: () => void
+  standalone?: boolean // True when opened in popup window
+  docked?: boolean // True when docked to side
+  onDock?: (side: 'left' | 'right') => void
+  onUndock?: () => void
+  onDockPreview?: (side: 'left' | 'right' | null) => void // Preview docking without committing
 }
 
-type Section =
-  | "overview"
-  | "pieces"
-  | "capture"
-  | "strategy"
-  | "harmony"
-  | "victory";
+type Section = 'overview' | 'pieces' | 'capture' | 'strategy' | 'harmony' | 'victory'
 
 export function PlayingGuideModal({
   isOpen,
@@ -41,471 +35,447 @@ export function PlayingGuideModal({
   onUndock,
   onDockPreview,
 }: PlayingGuideModalProps) {
-  const t = useTranslations("rithmomachia.guide");
-  const { data: abacusSettings } = useAbacusSettings();
-  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false;
-  const viewport = useViewport();
+  const t = useTranslations('rithmomachia.guide')
+  const { data: abacusSettings } = useAbacusSettings()
+  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false
+  const viewport = useViewport()
 
-  const [activeSection, setActiveSection] = useState<Section>("overview");
+  const [activeSection, setActiveSection] = useState<Section>('overview')
 
   // Load saved position and size from localStorage
   const [position, setPosition] = useState<{ x: number; y: number }>(() => {
-    if (typeof window === "undefined") return { x: 0, y: 0 };
-    const saved = localStorage.getItem("rithmomachia-guide-position");
+    if (typeof window === 'undefined') return { x: 0, y: 0 }
+    const saved = localStorage.getItem('rithmomachia-guide-position')
     if (saved) {
       try {
-        return JSON.parse(saved);
+        return JSON.parse(saved)
       } catch {
-        return { x: 0, y: 0 };
+        return { x: 0, y: 0 }
       }
     }
-    return { x: 0, y: 0 };
-  });
+    return { x: 0, y: 0 }
+  })
 
   const [size, setSize] = useState<{ width: number; height: number }>(() => {
-    if (typeof window === "undefined") return { width: 800, height: 600 };
-    const saved = localStorage.getItem("rithmomachia-guide-size");
+    if (typeof window === 'undefined') return { width: 800, height: 600 }
+    const saved = localStorage.getItem('rithmomachia-guide-size')
     if (saved) {
       try {
-        return JSON.parse(saved);
+        return JSON.parse(saved)
       } catch {
-        return { width: 800, height: 600 };
+        return { width: 800, height: 600 }
       }
     }
-    return { width: 800, height: 600 };
-  });
+    return { width: 800, height: 600 }
+  })
 
-  const [isDragging, setIsDragging] = useState(false);
+  const [isDragging, setIsDragging] = useState(false)
   const [windowWidth, setWindowWidth] = useState(
-    typeof window !== "undefined" ? viewport.width : 800,
-  );
-  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
-  const [isResizing, setIsResizing] = useState(false);
-  const [resizeDirection, setResizeDirection] = useState<string>("");
+    typeof window !== 'undefined' ? viewport.width : 800
+  )
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
+  const [isResizing, setIsResizing] = useState(false)
+  const [resizeDirection, setResizeDirection] = useState<string>('')
   const [resizeStart, setResizeStart] = useState({
     width: 0,
     height: 0,
     x: 0,
     y: 0,
-  });
-  const [isHovered, setIsHovered] = useState(false);
-  const [dockPreview, setDockPreview] = useState<"left" | "right" | null>(null);
-  const modalRef = useRef<HTMLDivElement>(null);
-  const hasUndockedRef = useRef(false); // Track if we've undocked during current drag
-  const undockPositionRef = useRef<{ x: number; y: number } | null>(null); // Position at moment of undocking
+  })
+  const [isHovered, setIsHovered] = useState(false)
+  const [dockPreview, setDockPreview] = useState<'left' | 'right' | null>(null)
+  const modalRef = useRef<HTMLDivElement>(null)
+  const hasUndockedRef = useRef(false) // Track if we've undocked during current drag
+  const undockPositionRef = useRef<{ x: number; y: number } | null>(null) // Position at moment of undocking
   const [dragTransform, setDragTransform] = useState<{
-    x: number;
-    y: number;
-  } | null>(null); // Visual transform while dragging from dock
+    x: number
+    y: number
+  } | null>(null) // Visual transform while dragging from dock
 
   // Save position to localStorage whenever it changes
   useEffect(() => {
     if (!docked && !standalone) {
-      localStorage.setItem(
-        "rithmomachia-guide-position",
-        JSON.stringify(position),
-      );
+      localStorage.setItem('rithmomachia-guide-position', JSON.stringify(position))
     }
-  }, [position, docked, standalone]);
+  }, [position, docked, standalone])
 
   // Save size to localStorage whenever it changes
   useEffect(() => {
     if (!docked && !standalone) {
-      localStorage.setItem("rithmomachia-guide-size", JSON.stringify(size));
+      localStorage.setItem('rithmomachia-guide-size', JSON.stringify(size))
     }
-  }, [size, docked, standalone]);
+  }, [size, docked, standalone])
 
   // Track window width for responsive behavior
   useEffect(() => {
-    setWindowWidth(viewport.width);
-  }, [viewport.width]);
+    setWindowWidth(viewport.width)
+  }, [viewport.width])
 
   // Center modal on mount (not in standalone mode)
   useEffect(() => {
     if (isOpen && modalRef.current && !standalone) {
-      const rect = modalRef.current.getBoundingClientRect();
+      const rect = modalRef.current.getBoundingClientRect()
       setPosition({
         x: (viewport.width - rect.width) / 2,
         y: Math.max(50, (viewport.height - rect.height) / 2),
-      });
+      })
     }
-  }, [isOpen, standalone]);
+  }, [isOpen, standalone])
 
   // Handle dragging
   const handleMouseDown = (e: React.MouseEvent) => {
     console.log(
-      "[GUIDE_DRAG] === MOUSE DOWN === windowWidth: " +
+      '[GUIDE_DRAG] === MOUSE DOWN === windowWidth: ' +
         viewport.width +
-        ", standalone: " +
+        ', standalone: ' +
         standalone +
-        ", docked: " +
-        docked,
-    );
+        ', docked: ' +
+        docked
+    )
     if (viewport.width < 768 || standalone) {
-      console.log("[GUIDE_DRAG] Skipping drag - mobile or standalone");
-      return; // No dragging on mobile or standalone
+      console.log('[GUIDE_DRAG] Skipping drag - mobile or standalone')
+      return // No dragging on mobile or standalone
     }
     console.log(
-      "[GUIDE_DRAG] Starting drag - docked: " +
+      '[GUIDE_DRAG] Starting drag - docked: ' +
         docked +
-        ", position: " +
+        ', position: ' +
         JSON.stringify(position) +
-        ", size: " +
-        JSON.stringify(size),
-    );
-    setIsDragging(true);
-    hasUndockedRef.current = false; // Reset undock tracking for new drag
-    undockPositionRef.current = null; // Clear undock position
-    setDragTransform(null); // Clear any previous transform
+        ', size: ' +
+        JSON.stringify(size)
+    )
+    setIsDragging(true)
+    hasUndockedRef.current = false // Reset undock tracking for new drag
+    undockPositionRef.current = null // Clear undock position
+    setDragTransform(null) // Clear any previous transform
 
     // When docked, we need to track the initial mouse position for undocking
     if (docked) {
       console.log(
-        "[GUIDE_DRAG] Docked - setting dragStart to clientX: " +
+        '[GUIDE_DRAG] Docked - setting dragStart to clientX: ' +
           e.clientX +
-          ", clientY: " +
-          e.clientY,
-      );
+          ', clientY: ' +
+          e.clientY
+      )
       setDragStart({
         x: e.clientX,
         y: e.clientY,
-      });
+      })
     } else {
       console.log(
-        "[GUIDE_DRAG] Not docked - setting dragStart offset: " +
+        '[GUIDE_DRAG] Not docked - setting dragStart offset: ' +
           (e.clientX - position.x) +
-          ", " +
-          (e.clientY - position.y),
-      );
+          ', ' +
+          (e.clientY - position.y)
+      )
       setDragStart({
         x: e.clientX - position.x,
         y: e.clientY - position.y,
-      });
+      })
     }
-  };
+  }
 
   // Handle resize start
   const handleResizeStart = (e: React.MouseEvent, direction: string) => {
-    if (viewport.width < 768 || standalone) return;
-    e.stopPropagation();
-    setIsResizing(true);
-    setResizeDirection(direction);
-    setDragStart({ x: e.clientX, y: e.clientY });
+    if (viewport.width < 768 || standalone) return
+    e.stopPropagation()
+    setIsResizing(true)
+    setResizeDirection(direction)
+    setDragStart({ x: e.clientX, y: e.clientY })
     // Save initial dimensions and position for resize calculation
     setResizeStart({
       width: size.width,
       height: size.height,
       x: position.x,
       y: position.y,
-    });
-  };
+    })
+  }
 
   // Bust-out button handler
   const handleBustOut = () => {
-    const url = `${window.location.origin}/arcade/rithmomachia/guide`;
-    const features =
-      "width=600,height=800,menubar=no,toolbar=no,location=no,status=no";
-    window.open(url, "RithmomachiaGuide", features);
-    onClose(); // Close the modal version after opening in new window
-  };
+    const url = `${window.location.origin}/arcade/rithmomachia/guide`
+    const features = 'width=600,height=800,menubar=no,toolbar=no,location=no,status=no'
+    window.open(url, 'RithmomachiaGuide', features)
+    onClose() // Close the modal version after opening in new window
+  }
 
   // Mouse move effect for dragging and resizing
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => {
       if (isDragging) {
         console.log(
-          "[GUIDE_DRAG] Mouse move - clientX: " +
+          '[GUIDE_DRAG] Mouse move - clientX: ' +
             e.clientX +
-            ", clientY: " +
+            ', clientY: ' +
             e.clientY +
-            ", docked: " +
+            ', docked: ' +
             docked +
-            ", hasUndocked: " +
-            hasUndockedRef.current,
-        );
+            ', hasUndocked: ' +
+            hasUndockedRef.current
+        )
 
         // When docked and haven't undocked yet, check if we've dragged far enough away to undock
         if (docked && onUndock && !hasUndockedRef.current) {
-          const UNDOCK_THRESHOLD = 50; // pixels to drag before undocking
+          const UNDOCK_THRESHOLD = 50 // pixels to drag before undocking
           const dragDistance = Math.sqrt(
-            (e.clientX - dragStart.x) ** 2 + (e.clientY - dragStart.y) ** 2,
-          );
+            (e.clientX - dragStart.x) ** 2 + (e.clientY - dragStart.y) ** 2
+          )
 
           console.log(
-            "[GUIDE_DRAG] Checking threshold - distance: " +
+            '[GUIDE_DRAG] Checking threshold - distance: ' +
               dragDistance +
-              ", threshold: " +
+              ', threshold: ' +
               UNDOCK_THRESHOLD +
-              ", dragStart: " +
-              JSON.stringify(dragStart),
-          );
+              ', dragStart: ' +
+              JSON.stringify(dragStart)
+          )
 
           if (dragDistance > UNDOCK_THRESHOLD) {
-            console.log(
-              "[GUIDE_DRAG] === THRESHOLD EXCEEDED === Marking as virtually undocked",
-            );
-            hasUndockedRef.current = true;
+            console.log('[GUIDE_DRAG] === THRESHOLD EXCEEDED === Marking as virtually undocked')
+            hasUndockedRef.current = true
             // Don't call onUndock() yet - wait until mouse up to avoid unmounting during drag
             // After undocking, set dragStart as offset from position to cursor for smooth continued dragging
             if (modalRef.current) {
-              const rect = modalRef.current.getBoundingClientRect();
+              const rect = modalRef.current.getBoundingClientRect()
               console.log(
-                "[GUIDE_DRAG] Modal rect - left: " +
+                '[GUIDE_DRAG] Modal rect - left: ' +
                   rect.left +
-                  ", top: " +
+                  ', top: ' +
                   rect.top +
-                  ", width: " +
+                  ', width: ' +
                   rect.width +
-                  ", height: " +
-                  rect.height,
-              );
+                  ', height: ' +
+                  rect.height
+              )
 
               // Store the undock position in ref for immediate access
               undockPositionRef.current = {
                 x: rect.left,
                 y: rect.top,
-              };
+              }
               console.log(
-                "[GUIDE_DRAG] Stored undock position in ref: " +
-                  JSON.stringify(undockPositionRef.current),
-              );
+                '[GUIDE_DRAG] Stored undock position in ref: ' +
+                  JSON.stringify(undockPositionRef.current)
+              )
 
               // Set dragStart as offset from current position to cursor
-              const newDragStartX = e.clientX - rect.left;
-              const newDragStartY = e.clientY - rect.top;
+              const newDragStartX = e.clientX - rect.left
+              const newDragStartY = e.clientY - rect.top
               console.log(
-                "[GUIDE_DRAG] New dragStart offset: " +
-                  newDragStartX +
-                  ", " +
-                  newDragStartY,
-              );
+                '[GUIDE_DRAG] New dragStart offset: ' + newDragStartX + ', ' + newDragStartY
+              )
               setDragStart({
                 x: newDragStartX,
                 y: newDragStartY,
-              });
+              })
               // Also store the position for state (used when actually undocking)
               setPosition({
                 x: rect.left,
                 y: rect.top,
-              });
+              })
             }
           } else {
-            console.log("[GUIDE_DRAG] Below threshold - returning early");
+            console.log('[GUIDE_DRAG] Below threshold - returning early')
             // Still below threshold - don't apply any transform yet
-            return;
+            return
           }
         }
 
         // Virtually undocked or already floating - update position
         if (hasUndockedRef.current || !docked) {
-          const newX = e.clientX - dragStart.x;
-          const newY = e.clientY - dragStart.y;
+          const newX = e.clientX - dragStart.x
+          const newY = e.clientY - dragStart.y
           console.log(
-            "[GUIDE_DRAG] Calculating position - newX: " +
+            '[GUIDE_DRAG] Calculating position - newX: ' +
               newX +
-              ", newY: " +
+              ', newY: ' +
               newY +
-              ", dragStart: " +
-              JSON.stringify(dragStart),
-          );
+              ', dragStart: ' +
+              JSON.stringify(dragStart)
+          )
 
           if (hasUndockedRef.current && docked) {
             // Still docked but virtually undocked - use transform for visual movement
             // Use undockPositionRef instead of position state to avoid stale closure
             if (undockPositionRef.current) {
-              const transformX = newX - undockPositionRef.current.x;
-              const transformY = newY - undockPositionRef.current.y;
+              const transformX = newX - undockPositionRef.current.x
+              const transformY = newY - undockPositionRef.current.y
               console.log(
-                "[GUIDE_DRAG] === SETTING TRANSFORM === x: " +
+                '[GUIDE_DRAG] === SETTING TRANSFORM === x: ' +
                   transformX +
-                  ", y: " +
+                  ', y: ' +
                   transformY +
-                  ", undockPosition: " +
-                  JSON.stringify(undockPositionRef.current),
-              );
-              setDragTransform({ x: transformX, y: transformY });
+                  ', undockPosition: ' +
+                  JSON.stringify(undockPositionRef.current)
+              )
+              setDragTransform({ x: transformX, y: transformY })
             }
           } else {
             // Actually floating - use position
-            console.log(
-              "[GUIDE_DRAG] Floating - setting position: " + newX + ", " + newY,
-            );
+            console.log('[GUIDE_DRAG] Floating - setting position: ' + newX + ', ' + newY)
             setPosition({
               x: newX,
               y: newY,
-            });
+            })
           }
 
           // Check if we're near edges for docking preview (works for floating or virtually undocked)
           console.log(
-            "[GUIDE_DRAG] Checking docking preview - onDock: " +
-              (onDock ? "defined" : "undefined") +
-              ", onDockPreview: " +
-              (onDockPreview ? "defined" : "undefined") +
-              ", docked: " +
+            '[GUIDE_DRAG] Checking docking preview - onDock: ' +
+              (onDock ? 'defined' : 'undefined') +
+              ', onDockPreview: ' +
+              (onDockPreview ? 'defined' : 'undefined') +
+              ', docked: ' +
               docked +
-              ", hasUndocked: " +
-              hasUndockedRef.current,
-          );
+              ', hasUndocked: ' +
+              hasUndockedRef.current
+          )
           if (onDock && onDockPreview && (!docked || hasUndockedRef.current)) {
-            const DOCK_THRESHOLD = 100;
+            const DOCK_THRESHOLD = 100
             console.log(
-              "[GUIDE_DRAG] Docking preview condition passed - checking edges, clientX: " +
-                e.clientX,
-            );
+              '[GUIDE_DRAG] Docking preview condition passed - checking edges, clientX: ' +
+                e.clientX
+            )
             if (e.clientX < DOCK_THRESHOLD) {
-              setDockPreview("left");
-              onDockPreview("left");
+              setDockPreview('left')
+              onDockPreview('left')
             } else if (e.clientX > viewport.width - DOCK_THRESHOLD) {
-              setDockPreview("right");
-              onDockPreview("right");
+              setDockPreview('right')
+              onDockPreview('right')
             } else {
-              setDockPreview(null);
-              onDockPreview(null);
+              setDockPreview(null)
+              onDockPreview(null)
             }
           }
         }
       } else if (isResizing) {
         // Calculate delta from initial resize start position
-        const deltaX = e.clientX - dragStart.x;
-        const deltaY = e.clientY - dragStart.y;
+        const deltaX = e.clientX - dragStart.x
+        const deltaY = e.clientY - dragStart.y
 
-        let newWidth = resizeStart.width;
-        let newHeight = resizeStart.height;
-        let newX = resizeStart.x;
-        let newY = resizeStart.y;
+        let newWidth = resizeStart.width
+        let newHeight = resizeStart.height
+        let newX = resizeStart.x
+        let newY = resizeStart.y
 
         // Handle different resize directions - calculate from initial state
         // Ultra-flexible minimum width for narrow layouts
-        const minWidth = 150;
-        const minHeight = 300;
+        const minWidth = 150
+        const minHeight = 300
 
-        if (resizeDirection.includes("e")) {
-          newWidth = Math.max(
-            minWidth,
-            Math.min(viewport.width * 0.9, resizeStart.width + deltaX),
-          );
+        if (resizeDirection.includes('e')) {
+          newWidth = Math.max(minWidth, Math.min(viewport.width * 0.9, resizeStart.width + deltaX))
         }
-        if (resizeDirection.includes("w")) {
-          const desiredWidth = resizeStart.width - deltaX;
-          newWidth = Math.max(
-            minWidth,
-            Math.min(viewport.width * 0.9, desiredWidth),
-          );
+        if (resizeDirection.includes('w')) {
+          const desiredWidth = resizeStart.width - deltaX
+          newWidth = Math.max(minWidth, Math.min(viewport.width * 0.9, desiredWidth))
           // Move left edge by the amount we actually changed width
-          newX = resizeStart.x + (resizeStart.width - newWidth);
+          newX = resizeStart.x + (resizeStart.width - newWidth)
         }
-        if (resizeDirection.includes("s")) {
+        if (resizeDirection.includes('s')) {
           newHeight = Math.max(
             minHeight,
-            Math.min(viewport.height * 0.9, resizeStart.height + deltaY),
-          );
+            Math.min(viewport.height * 0.9, resizeStart.height + deltaY)
+          )
         }
-        if (resizeDirection.includes("n")) {
-          const desiredHeight = resizeStart.height - deltaY;
-          newHeight = Math.max(
-            minHeight,
-            Math.min(viewport.height * 0.9, desiredHeight),
-          );
+        if (resizeDirection.includes('n')) {
+          const desiredHeight = resizeStart.height - deltaY
+          newHeight = Math.max(minHeight, Math.min(viewport.height * 0.9, desiredHeight))
           // Move top edge by the amount we actually changed height
-          newY = resizeStart.y + (resizeStart.height - newHeight);
+          newY = resizeStart.y + (resizeStart.height - newHeight)
         }
 
-        setSize({ width: newWidth, height: newHeight });
-        setPosition({ x: newX, y: newY });
+        setSize({ width: newWidth, height: newHeight })
+        setPosition({ x: newX, y: newY })
       }
-    };
+    }
 
     const handleMouseUp = (e: MouseEvent) => {
       console.log(
-        "[GUIDE_DRAG] === MOUSE UP === clientX: " +
+        '[GUIDE_DRAG] === MOUSE UP === clientX: ' +
           e.clientX +
-          ", docked: " +
+          ', docked: ' +
           docked +
-          ", hasUndocked: " +
+          ', hasUndocked: ' +
           hasUndockedRef.current +
-          ", isDragging: " +
+          ', isDragging: ' +
           isDragging +
-          ", onDock: " +
-          (onDock ? "defined" : "undefined"),
-      );
+          ', onDock: ' +
+          (onDock ? 'defined' : 'undefined')
+      )
 
       // Check for docking when releasing drag (works for floating or virtually undocked)
       if (isDragging && onDock && (!docked || hasUndockedRef.current)) {
-        const DOCK_THRESHOLD = 100; // pixels from edge to trigger docking
+        const DOCK_THRESHOLD = 100 // pixels from edge to trigger docking
         console.log(
-          "[GUIDE_DRAG] Checking for dock - clientX: " +
+          '[GUIDE_DRAG] Checking for dock - clientX: ' +
             e.clientX +
-            ", threshold: " +
+            ', threshold: ' +
             DOCK_THRESHOLD +
-            ", windowWidth: " +
-            viewport.width,
-        );
+            ', windowWidth: ' +
+            viewport.width
+        )
 
         if (e.clientX < DOCK_THRESHOLD) {
-          console.log(
-            "[GUIDE_DRAG] Mouse up - near left edge, calling onDock(left)",
-          );
-          onDock("left");
+          console.log('[GUIDE_DRAG] Mouse up - near left edge, calling onDock(left)')
+          onDock('left')
           // Don't call onUndock if we're re-docking
-          setIsDragging(false);
-          setIsResizing(false);
-          setResizeDirection("");
-          setDockPreview(null);
-          setDragTransform(null);
+          setIsDragging(false)
+          setIsResizing(false)
+          setResizeDirection('')
+          setDockPreview(null)
+          setDragTransform(null)
           if (onDockPreview) {
-            onDockPreview(null);
+            onDockPreview(null)
           }
-          console.log("[GUIDE_DRAG] Cleared state after re-dock to left");
-          return;
+          console.log('[GUIDE_DRAG] Cleared state after re-dock to left')
+          return
         } else if (e.clientX > viewport.width - DOCK_THRESHOLD) {
-          console.log(
-            "[GUIDE_DRAG] Mouse up - near right edge, calling onDock(right)",
-          );
-          onDock("right");
+          console.log('[GUIDE_DRAG] Mouse up - near right edge, calling onDock(right)')
+          onDock('right')
           // Don't call onUndock if we're re-docking
-          setIsDragging(false);
-          setIsResizing(false);
-          setResizeDirection("");
-          setDockPreview(null);
-          setDragTransform(null);
+          setIsDragging(false)
+          setIsResizing(false)
+          setResizeDirection('')
+          setDockPreview(null)
+          setDragTransform(null)
           if (onDockPreview) {
-            onDockPreview(null);
+            onDockPreview(null)
           }
-          console.log("[GUIDE_DRAG] Cleared state after re-dock to right");
-          return;
+          console.log('[GUIDE_DRAG] Cleared state after re-dock to right')
+          return
         }
       }
 
       // If we virtually undocked during this drag and didn't re-dock, now actually undock
       if (hasUndockedRef.current && docked && onUndock) {
         console.log(
-          "[GUIDE_DRAG] Mouse up - calling deferred onUndock() with final position: " +
-            JSON.stringify(position),
-        );
-        onUndock();
+          '[GUIDE_DRAG] Mouse up - calling deferred onUndock() with final position: ' +
+            JSON.stringify(position)
+        )
+        onUndock()
       }
 
-      console.log("[GUIDE_DRAG] Mouse up - clearing all drag state");
-      setIsDragging(false);
-      setIsResizing(false);
-      setResizeDirection("");
-      setDockPreview(null); // Clear dock preview when drag ends
-      setDragTransform(null); // Clear drag transform
+      console.log('[GUIDE_DRAG] Mouse up - clearing all drag state')
+      setIsDragging(false)
+      setIsResizing(false)
+      setResizeDirection('')
+      setDockPreview(null) // Clear dock preview when drag ends
+      setDragTransform(null) // Clear drag transform
       if (onDockPreview) {
-        onDockPreview(null); // Clear parent preview state
+        onDockPreview(null) // Clear parent preview state
       }
-    };
+    }
 
     if (isDragging || isResizing) {
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener('mousemove', handleMouseMove)
+      document.addEventListener('mouseup', handleMouseUp)
     }
 
     return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
   }, [
     isDragging,
     isResizing,
@@ -516,34 +486,34 @@ export function PlayingGuideModal({
     onUndock,
     onDock,
     onDockPreview,
-  ]);
+  ])
 
-  if (!isOpen && !standalone && !docked) return null;
+  if (!isOpen && !standalone && !docked) return null
 
   const sections: { id: Section; label: string; icon: string }[] = [
-    { id: "overview", label: t("sections.overview"), icon: "🎯" },
-    { id: "pieces", label: t("sections.pieces"), icon: "♟️" },
-    { id: "capture", label: t("sections.capture"), icon: "⚔️" },
-    { id: "strategy", label: t("sections.strategy"), icon: "🧠" },
-    { id: "harmony", label: t("sections.harmony"), icon: "🎵" },
-    { id: "victory", label: t("sections.victory"), icon: "👑" },
-  ];
+    { id: 'overview', label: t('sections.overview'), icon: '🎯' },
+    { id: 'pieces', label: t('sections.pieces'), icon: '♟️' },
+    { id: 'capture', label: t('sections.capture'), icon: '⚔️' },
+    { id: 'strategy', label: t('sections.strategy'), icon: '🧠' },
+    { id: 'harmony', label: t('sections.harmony'), icon: '🎵' },
+    { id: 'victory', label: t('sections.victory'), icon: '👑' },
+  ]
 
   // Determine layout mode based on modal width (or window width if standalone)
-  const effectiveWidth = standalone ? windowWidth : size.width;
-  const isVeryNarrow = effectiveWidth < 250;
-  const isNarrow = effectiveWidth < 400;
-  const isMedium = effectiveWidth < 600;
+  const effectiveWidth = standalone ? windowWidth : size.width
+  const isVeryNarrow = effectiveWidth < 250
+  const isNarrow = effectiveWidth < 400
+  const isMedium = effectiveWidth < 600
 
   const renderResizeHandles = () => {
-    if (!isHovered || viewport.width < 768 || standalone) return null;
+    if (!isHovered || viewport.width < 768 || standalone) return null
 
     const handleStyle = {
-      position: "absolute" as const,
-      bg: "transparent",
+      position: 'absolute' as const,
+      bg: 'transparent',
       zIndex: 1,
-      _hover: { borderColor: "#3b82f6" },
-    };
+      _hover: { borderColor: '#3b82f6' },
+    }
 
     return (
       <>
@@ -553,13 +523,13 @@ export function PlayingGuideModal({
           className={css({
             ...handleStyle,
             top: 0,
-            left: "8px",
-            right: "8px",
-            height: "8px",
-            cursor: "ns-resize",
-            borderTop: "2px solid transparent",
+            left: '8px',
+            right: '8px',
+            height: '8px',
+            cursor: 'ns-resize',
+            borderTop: '2px solid transparent',
           })}
-          onMouseDown={(e) => handleResizeStart(e, "n")}
+          onMouseDown={(e) => handleResizeStart(e, 'n')}
         />
         {/* South */}
         <div
@@ -567,13 +537,13 @@ export function PlayingGuideModal({
           className={css({
             ...handleStyle,
             bottom: 0,
-            left: "8px",
-            right: "8px",
-            height: "8px",
-            cursor: "ns-resize",
-            borderBottom: "2px solid transparent",
+            left: '8px',
+            right: '8px',
+            height: '8px',
+            cursor: 'ns-resize',
+            borderBottom: '2px solid transparent',
           })}
-          onMouseDown={(e) => handleResizeStart(e, "s")}
+          onMouseDown={(e) => handleResizeStart(e, 's')}
         />
         {/* East */}
         <div
@@ -581,13 +551,13 @@ export function PlayingGuideModal({
           className={css({
             ...handleStyle,
             right: 0,
-            top: "8px",
-            bottom: "8px",
-            width: "8px",
-            cursor: "ew-resize",
-            borderRight: "2px solid transparent",
+            top: '8px',
+            bottom: '8px',
+            width: '8px',
+            cursor: 'ew-resize',
+            borderRight: '2px solid transparent',
           })}
-          onMouseDown={(e) => handleResizeStart(e, "e")}
+          onMouseDown={(e) => handleResizeStart(e, 'e')}
         />
         {/* West */}
         <div
@@ -595,13 +565,13 @@ export function PlayingGuideModal({
           className={css({
             ...handleStyle,
             left: 0,
-            top: "8px",
-            bottom: "8px",
-            width: "8px",
-            cursor: "ew-resize",
-            borderLeft: "2px solid transparent",
+            top: '8px',
+            bottom: '8px',
+            width: '8px',
+            cursor: 'ew-resize',
+            borderLeft: '2px solid transparent',
           })}
-          onMouseDown={(e) => handleResizeStart(e, "w")}
+          onMouseDown={(e) => handleResizeStart(e, 'w')}
         />
         {/* NorthEast */}
         <div
@@ -610,12 +580,12 @@ export function PlayingGuideModal({
             ...handleStyle,
             top: 0,
             right: 0,
-            width: "8px",
-            height: "8px",
-            cursor: "nesw-resize",
-            border: "2px solid transparent",
+            width: '8px',
+            height: '8px',
+            cursor: 'nesw-resize',
+            border: '2px solid transparent',
           })}
-          onMouseDown={(e) => handleResizeStart(e, "ne")}
+          onMouseDown={(e) => handleResizeStart(e, 'ne')}
         />
         {/* NorthWest */}
         <div
@@ -624,12 +594,12 @@ export function PlayingGuideModal({
             ...handleStyle,
             top: 0,
             left: 0,
-            width: "8px",
-            height: "8px",
-            cursor: "nwse-resize",
-            border: "2px solid transparent",
+            width: '8px',
+            height: '8px',
+            cursor: 'nwse-resize',
+            border: '2px solid transparent',
           })}
-          onMouseDown={(e) => handleResizeStart(e, "nw")}
+          onMouseDown={(e) => handleResizeStart(e, 'nw')}
         />
         {/* SouthEast */}
         <div
@@ -638,12 +608,12 @@ export function PlayingGuideModal({
             ...handleStyle,
             bottom: 0,
             right: 0,
-            width: "8px",
-            height: "8px",
-            cursor: "nwse-resize",
-            border: "2px solid transparent",
+            width: '8px',
+            height: '8px',
+            cursor: 'nwse-resize',
+            border: '2px solid transparent',
           })}
-          onMouseDown={(e) => handleResizeStart(e, "se")}
+          onMouseDown={(e) => handleResizeStart(e, 'se')}
         />
         {/* SouthWest */}
         <div
@@ -652,37 +622,29 @@ export function PlayingGuideModal({
             ...handleStyle,
             bottom: 0,
             left: 0,
-            width: "8px",
-            height: "8px",
-            cursor: "nesw-resize",
-            border: "2px solid transparent",
+            width: '8px',
+            height: '8px',
+            cursor: 'nesw-resize',
+            border: '2px solid transparent',
           })}
-          onMouseDown={(e) => handleResizeStart(e, "sw")}
+          onMouseDown={(e) => handleResizeStart(e, 'sw')}
         />
       </>
-    );
-  };
+    )
+  }
 
   const modalContent = (() => {
     const styleConfig: React.CSSProperties = {
       // When virtually undocked (dragTransform present), use fixed positioning to break out of Panel
-      position: dragTransform || !docked ? "fixed" : "relative",
-      background: "white",
-      borderRadius:
-        standalone || (docked && !dragTransform)
-          ? 0
-          : isVeryNarrow
-            ? "8px"
-            : "12px",
+      position: dragTransform || !docked ? 'fixed' : 'relative',
+      background: 'white',
+      borderRadius: standalone || (docked && !dragTransform) ? 0 : isVeryNarrow ? '8px' : '12px',
       boxShadow:
-        standalone || (docked && !dragTransform)
-          ? "none"
-          : "0 20px 60px rgba(0, 0, 0, 0.3)",
-      border:
-        standalone || (docked && !dragTransform) ? "none" : "1px solid #e5e7eb",
-      display: "flex",
-      flexDirection: "column" as const,
-      overflow: "hidden",
+        standalone || (docked && !dragTransform) ? 'none' : '0 20px 60px rgba(0, 0, 0, 0.3)',
+      border: standalone || (docked && !dragTransform) ? 'none' : '1px solid #e5e7eb',
+      display: 'flex',
+      flexDirection: 'column' as const,
+      overflow: 'hidden',
       ...(dragTransform && undockPositionRef.current
         ? // Virtually undocked - show at drag position using ref position
           {
@@ -694,10 +656,10 @@ export function PlayingGuideModal({
           }
         : docked
           ? // Still docked
-            { width: "100%", height: "100%" }
+            { width: '100%', height: '100%' }
           : standalone
             ? // Standalone mode
-              { top: 0, left: 0, width: "100vw", height: "100vh", zIndex: 1 }
+              { top: 0, left: 0, width: '100vw', height: '100vh', zIndex: 1 }
             : // Actually floating
               {
                 left: `${position.x}px`,
@@ -713,21 +675,21 @@ export function PlayingGuideModal({
           : !standalone && !docked && viewport.width >= 768 && !isHovered
             ? 0.8
             : 1,
-      transition: "opacity 0.2s ease",
-    };
+      transition: 'opacity 0.2s ease',
+    }
 
     console.log(
-      "[GUIDE_DRAG] Rendering with style - position: " +
+      '[GUIDE_DRAG] Rendering with style - position: ' +
         styleConfig.position +
-        ", left: " +
-        (styleConfig.left ?? "none") +
-        ", top: " +
-        (styleConfig.top ?? "none") +
-        ", dragTransform: " +
+        ', left: ' +
+        (styleConfig.left ?? 'none') +
+        ', top: ' +
+        (styleConfig.top ?? 'none') +
+        ', dragTransform: ' +
         JSON.stringify(dragTransform) +
-        ", docked: " +
-        docked,
-    );
+        ', docked: ' +
+        docked
+    )
 
     return (
       <div
@@ -743,31 +705,31 @@ export function PlayingGuideModal({
         <div
           data-element="modal-header"
           className={css({
-            bg: "#f9fafb",
-            borderBottom: "1px solid #e5e7eb",
-            userSelect: "none",
+            bg: '#f9fafb',
+            borderBottom: '1px solid #e5e7eb',
+            userSelect: 'none',
             flexShrink: 0,
-            position: "relative",
+            position: 'relative',
           })}
           style={{
-            padding: isVeryNarrow ? "8px" : isNarrow ? "12px" : "24px",
+            padding: isVeryNarrow ? '8px' : isNarrow ? '12px' : '24px',
             cursor: isDragging
-              ? "grabbing"
+              ? 'grabbing'
               : !standalone && viewport.width >= 768
-                ? "grab"
-                : "default",
+                ? 'grab'
+                : 'default',
           }}
           onMouseDown={handleMouseDown}
         >
           {/* Close and utility buttons - top right */}
           <div
             style={{
-              position: "absolute",
-              top: isVeryNarrow ? "4px" : "8px",
-              right: isVeryNarrow ? "4px" : "8px",
-              display: "flex",
-              alignItems: "center",
-              gap: isVeryNarrow ? "4px" : "8px",
+              position: 'absolute',
+              top: isVeryNarrow ? '4px' : '8px',
+              right: isVeryNarrow ? '4px' : '8px',
+              display: 'flex',
+              alignItems: 'center',
+              gap: isVeryNarrow ? '4px' : '8px',
             }}
           >
             {/* Bust-out button (only if not already standalone/docked and not very narrow) */}
@@ -777,26 +739,22 @@ export function PlayingGuideModal({
                 data-action="bust-out-guide"
                 onClick={handleBustOut}
                 style={{
-                  background: "#e5e7eb",
-                  color: "#374151",
-                  border: "none",
-                  borderRadius: isVeryNarrow ? "4px" : "6px",
-                  width: isVeryNarrow ? "24px" : "32px",
-                  height: isVeryNarrow ? "24px" : "32px",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  cursor: "pointer",
-                  fontSize: isVeryNarrow ? "12px" : "16px",
-                  transition: "background 0.2s",
+                  background: '#e5e7eb',
+                  color: '#374151',
+                  border: 'none',
+                  borderRadius: isVeryNarrow ? '4px' : '6px',
+                  width: isVeryNarrow ? '24px' : '32px',
+                  height: isVeryNarrow ? '24px' : '32px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  cursor: 'pointer',
+                  fontSize: isVeryNarrow ? '12px' : '16px',
+                  transition: 'background 0.2s',
                 }}
-                onMouseEnter={(e) =>
-                  (e.currentTarget.style.background = "#d1d5db")
-                }
-                onMouseLeave={(e) =>
-                  (e.currentTarget.style.background = "#e5e7eb")
-                }
-                title={t("bustOut")}
+                onMouseEnter={(e) => (e.currentTarget.style.background = '#d1d5db')}
+                onMouseLeave={(e) => (e.currentTarget.style.background = '#e5e7eb')}
+                title={t('bustOut')}
               >
                 ↗
               </button>
@@ -808,25 +766,21 @@ export function PlayingGuideModal({
               data-action="close-guide"
               onClick={onClose}
               style={{
-                background: "#e5e7eb",
-                color: "#374151",
-                border: "none",
-                borderRadius: isVeryNarrow ? "4px" : "6px",
-                width: isVeryNarrow ? "24px" : "32px",
-                height: isVeryNarrow ? "24px" : "32px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                cursor: "pointer",
-                fontSize: isVeryNarrow ? "14px" : "18px",
-                transition: "background 0.2s",
+                background: '#e5e7eb',
+                color: '#374151',
+                border: 'none',
+                borderRadius: isVeryNarrow ? '4px' : '6px',
+                width: isVeryNarrow ? '24px' : '32px',
+                height: isVeryNarrow ? '24px' : '32px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                fontSize: isVeryNarrow ? '14px' : '18px',
+                transition: 'background 0.2s',
               }}
-              onMouseEnter={(e) =>
-                (e.currentTarget.style.background = "#d1d5db")
-              }
-              onMouseLeave={(e) =>
-                (e.currentTarget.style.background = "#e5e7eb")
-              }
+              onMouseEnter={(e) => (e.currentTarget.style.background = '#d1d5db')}
+              onMouseLeave={(e) => (e.currentTarget.style.background = '#e5e7eb')}
             >
               ✕
             </button>
@@ -834,28 +788,28 @@ export function PlayingGuideModal({
 
           {/* Centered title and subtitle - hide when very narrow */}
           {!isVeryNarrow && (
-            <div style={{ textAlign: "center" }}>
+            <div style={{ textAlign: 'center' }}>
               <h1
                 style={{
-                  fontSize: isNarrow ? "16px" : isMedium ? "20px" : "28px",
-                  fontWeight: "bold",
-                  color: "#111827",
-                  marginBottom: isNarrow ? "4px" : "8px",
+                  fontSize: isNarrow ? '16px' : isMedium ? '20px' : '28px',
+                  fontWeight: 'bold',
+                  color: '#111827',
+                  marginBottom: isNarrow ? '4px' : '8px',
                   lineHeight: 1.2,
                 }}
               >
-                {t("title")}
+                {t('title')}
               </h1>
               {!isNarrow && (
                 <p
                   style={{
-                    fontSize: isMedium ? "12px" : "16px",
-                    color: "#6b7280",
-                    marginBottom: isMedium ? "8px" : "16px",
+                    fontSize: isMedium ? '12px' : '16px',
+                    color: '#6b7280',
+                    marginBottom: isMedium ? '8px' : '16px',
                     lineHeight: 1.3,
                   }}
                 >
-                  {t("subtitle")}
+                  {t('subtitle')}
                 </p>
               )}
             </div>
@@ -866,10 +820,10 @@ export function PlayingGuideModal({
         <div
           data-element="guide-nav"
           style={{
-            display: "flex",
-            flexDirection: "row",
-            borderBottom: "2px solid #e5e7eb",
-            background: "#f9fafb",
+            display: 'flex',
+            flexDirection: 'row',
+            borderBottom: '2px solid #e5e7eb',
+            background: '#f9fafb',
             flexShrink: 0,
           }}
         >
@@ -880,44 +834,39 @@ export function PlayingGuideModal({
               data-action={`navigate-${section.id}`}
               onClick={() => setActiveSection(section.id)}
               style={{
-                flex: "1 1 0", // Equal width tabs
+                flex: '1 1 0', // Equal width tabs
                 minWidth: 0, // Allow shrinking below content size
-                padding: isVeryNarrow
-                  ? "10px 6px"
-                  : isNarrow
-                    ? "10px 8px"
-                    : "14px 20px",
-                fontSize: isVeryNarrow ? "16px" : isNarrow ? "12px" : "14px",
-                fontWeight: activeSection === section.id ? "bold" : "500",
-                color: activeSection === section.id ? "#7c2d12" : "#6b7280",
-                background:
-                  activeSection === section.id ? "white" : "transparent",
-                cursor: "pointer",
-                transition: "all 0.2s",
-                border: "none",
-                borderBottom: `3px solid ${activeSection === section.id ? "#7c2d12" : "transparent"}`,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: isVeryNarrow ? "0" : isNarrow ? "4px" : "6px",
+                padding: isVeryNarrow ? '10px 6px' : isNarrow ? '10px 8px' : '14px 20px',
+                fontSize: isVeryNarrow ? '16px' : isNarrow ? '12px' : '14px',
+                fontWeight: activeSection === section.id ? 'bold' : '500',
+                color: activeSection === section.id ? '#7c2d12' : '#6b7280',
+                background: activeSection === section.id ? 'white' : 'transparent',
+                cursor: 'pointer',
+                transition: 'all 0.2s',
+                border: 'none',
+                borderBottom: `3px solid ${activeSection === section.id ? '#7c2d12' : 'transparent'}`,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: isVeryNarrow ? '0' : isNarrow ? '4px' : '6px',
                 lineHeight: 1,
-                overflow: "hidden",
+                overflow: 'hidden',
               }}
               onMouseEnter={(e) => {
                 if (activeSection !== section.id) {
-                  e.currentTarget.style.background = "#f3f4f6";
+                  e.currentTarget.style.background = '#f3f4f6'
                 }
               }}
               onMouseLeave={(e) => {
                 if (activeSection !== section.id) {
-                  e.currentTarget.style.background = "transparent";
+                  e.currentTarget.style.background = 'transparent'
                 }
               }}
               title={section.label}
             >
               <span
                 style={{
-                  fontSize: isVeryNarrow ? "18px" : "inherit",
+                  fontSize: isVeryNarrow ? '18px' : 'inherit',
                   flexShrink: 0,
                 }}
               >
@@ -929,10 +878,10 @@ export function PlayingGuideModal({
                   min={8}
                   max={isNarrow ? 12 : 14}
                   style={{
-                    width: "100%",
-                    height: "100%",
-                    display: "flex",
-                    alignItems: "center",
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
                   }}
                 >
                   {section.label}
@@ -947,40 +896,40 @@ export function PlayingGuideModal({
           data-element="guide-content"
           style={{
             flex: 1,
-            overflow: "auto",
-            padding: isVeryNarrow ? "8px" : isNarrow ? "12px" : "24px",
-            fontSize: isVeryNarrow ? "12px" : isNarrow ? "13px" : "14px",
+            overflow: 'auto',
+            padding: isVeryNarrow ? '8px' : isNarrow ? '12px' : '24px',
+            fontSize: isVeryNarrow ? '12px' : isNarrow ? '13px' : '14px',
             lineHeight: 1.5,
           }}
         >
-          {activeSection === "overview" && (
+          {activeSection === 'overview' && (
             <OverviewSection useNativeAbacusNumbers={useNativeAbacusNumbers} />
           )}
-          {activeSection === "pieces" && (
+          {activeSection === 'pieces' && (
             <PiecesSection useNativeAbacusNumbers={useNativeAbacusNumbers} />
           )}
-          {activeSection === "capture" && (
+          {activeSection === 'capture' && (
             <CaptureSection useNativeAbacusNumbers={useNativeAbacusNumbers} />
           )}
-          {activeSection === "strategy" && (
+          {activeSection === 'strategy' && (
             <StrategySection useNativeAbacusNumbers={useNativeAbacusNumbers} />
           )}
-          {activeSection === "harmony" && (
+          {activeSection === 'harmony' && (
             <HarmonySection useNativeAbacusNumbers={useNativeAbacusNumbers} />
           )}
-          {activeSection === "victory" && (
+          {activeSection === 'victory' && (
             <VictorySection useNativeAbacusNumbers={useNativeAbacusNumbers} />
           )}
         </div>
       </div>
-    );
-  })(); // Invoke the IIFE
+    )
+  })() // Invoke the IIFE
 
   // If standalone, just render the content without Dialog wrapper
   if (standalone) {
-    return modalContent;
+    return modalContent
   }
 
   // Otherwise, just render the modal (parent will handle preview rendering)
-  return modalContent;
+  return modalContent
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaBoard.tsx b/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaBoard.tsx
index ba45bd5b..17b3e8c7 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaBoard.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaBoard.tsx
@@ -1,36 +1,36 @@
-import { css } from "../../../../styled-system/css";
-import { PieceRenderer } from "./PieceRenderer";
-import type { Color, PieceType } from "../types";
+import { css } from '../../../../styled-system/css'
+import { PieceRenderer } from './PieceRenderer'
+import type { Color, PieceType } from '../types'
 
 /**
  * Simplified piece for board examples
  */
 export interface ExamplePiece {
-  square: string; // e.g. "A1", "B2"
-  type: PieceType;
-  color: Color;
-  value: number;
+  square: string // e.g. "A1", "B2"
+  type: PieceType
+  color: Color
+  value: number
 }
 
 interface CropArea {
   // Support both naming conventions for backwards compatibility
-  minCol?: number; // 0-15 (A=0, P=15)
-  maxCol?: number; // 0-15
-  minRow?: number; // 1-8
-  maxRow?: number; // 1-8
-  startCol?: number; // Alternative: 0-15
-  endCol?: number; // Alternative: 0-15
-  startRow?: number; // Alternative: 1-8
-  endRow?: number; // Alternative: 1-8
+  minCol?: number // 0-15 (A=0, P=15)
+  maxCol?: number // 0-15
+  minRow?: number // 1-8
+  maxRow?: number // 1-8
+  startCol?: number // Alternative: 0-15
+  endCol?: number // Alternative: 0-15
+  startRow?: number // Alternative: 1-8
+  endRow?: number // Alternative: 1-8
 }
 
 interface RithmomachiaBoardProps {
-  pieces: ExamplePiece[];
-  highlightSquares?: string[]; // Squares to highlight (e.g. for harmony examples)
-  scale?: number; // Scale factor for the board size
-  showLabels?: boolean; // Show rank/file labels
-  cropArea?: CropArea; // Crop to show only a rectangular subsection
-  useNativeAbacusNumbers?: boolean; // Display numbers as mini abaci
+  pieces: ExamplePiece[]
+  highlightSquares?: string[] // Squares to highlight (e.g. for harmony examples)
+  scale?: number // Scale factor for the board size
+  showLabels?: boolean // Show rank/file labels
+  cropArea?: CropArea // Crop to show only a rectangular subsection
+  useNativeAbacusNumbers?: boolean // Display numbers as mini abaci
 }
 
 /**
@@ -46,63 +46,56 @@ export function RithmomachiaBoard({
   useNativeAbacusNumbers = false,
 }: RithmomachiaBoardProps) {
   // Board dimensions
-  const cellSize = 100; // SVG units per cell
-  const gap = 2;
-  const padding = 10;
-  const labelMargin = showLabels ? 30 : 0; // Space for row/column labels
+  const cellSize = 100 // SVG units per cell
+  const gap = 2
+  const padding = 10
+  const labelMargin = showLabels ? 30 : 0 // Space for row/column labels
 
   // Determine the area to display (support both naming conventions)
-  const minCol = cropArea?.minCol ?? cropArea?.startCol ?? 0;
-  const maxCol = cropArea?.maxCol ?? cropArea?.endCol ?? 15;
-  const minRow = cropArea?.minRow ?? cropArea?.startRow ?? 1;
-  const maxRow = cropArea?.maxRow ?? cropArea?.endRow ?? 8;
+  const minCol = cropArea?.minCol ?? cropArea?.startCol ?? 0
+  const maxCol = cropArea?.maxCol ?? cropArea?.endCol ?? 15
+  const minRow = cropArea?.minRow ?? cropArea?.startRow ?? 1
+  const maxRow = cropArea?.maxRow ?? cropArea?.endRow ?? 8
 
-  const displayCols = maxCol - minCol + 1;
-  const displayRows = maxRow - minRow + 1;
+  const displayCols = maxCol - minCol + 1
+  const displayRows = maxRow - minRow + 1
 
   // Calculate cropped board dimensions (including label margins)
-  const boardInnerWidth = displayCols * cellSize + (displayCols - 1) * gap;
-  const boardInnerHeight = displayRows * cellSize + (displayRows - 1) * gap;
-  const boardWidth = boardInnerWidth + padding * 2 + labelMargin;
-  const boardHeight = boardInnerHeight + padding * 2 + labelMargin;
+  const boardInnerWidth = displayCols * cellSize + (displayCols - 1) * gap
+  const boardInnerHeight = displayRows * cellSize + (displayRows - 1) * gap
+  const boardWidth = boardInnerWidth + padding * 2 + labelMargin
+  const boardHeight = boardInnerHeight + padding * 2 + labelMargin
 
   return (
     <div
       data-component="rithmomachia-board-example"
       className={css({
-        width: "100%",
+        width: '100%',
         maxWidth: `${boardWidth * scale}px`,
-        margin: "0 auto",
+        margin: '0 auto',
       })}
     >
       <svg
         viewBox={`0 0 ${boardWidth} ${boardHeight}`}
         className={css({
-          width: "100%",
-          height: "auto",
+          width: '100%',
+          height: 'auto',
         })}
       >
         {/* Board background */}
-        <rect
-          x={0}
-          y={0}
-          width={boardWidth}
-          height={boardHeight}
-          fill="#d1d5db"
-          rx={8}
-        />
+        <rect x={0} y={0} width={boardWidth} height={boardHeight} fill="#d1d5db" rx={8} />
 
         {/* Board squares */}
         {Array.from({ length: displayRows }, (_, displayRow) => {
-          const actualRank = maxRow - displayRow;
+          const actualRank = maxRow - displayRow
           return Array.from({ length: displayCols }, (_, displayCol) => {
-            const actualCol = minCol + displayCol;
-            const square = `${String.fromCharCode(65 + actualCol)}${actualRank}`;
-            const isLight = (actualCol + actualRank) % 2 === 0;
-            const isHighlighted = highlightSquares.includes(square);
+            const actualCol = minCol + displayCol
+            const square = `${String.fromCharCode(65 + actualCol)}${actualRank}`
+            const isLight = (actualCol + actualRank) % 2 === 0
+            const isHighlighted = highlightSquares.includes(square)
 
-            const x = labelMargin + padding + displayCol * (cellSize + gap);
-            const y = padding + displayRow * (cellSize + gap);
+            const x = labelMargin + padding + displayCol * (cellSize + gap)
+            const y = padding + displayRow * (cellSize + gap)
 
             return (
               <g key={square}>
@@ -111,28 +104,22 @@ export function RithmomachiaBoard({
                   y={y}
                   width={cellSize}
                   height={cellSize}
-                  fill={
-                    isHighlighted ? "#fde047" : isLight ? "#f3f4f6" : "#e5e7eb"
-                  }
-                  stroke={isHighlighted ? "#f59e0b" : "none"}
+                  fill={isHighlighted ? '#fde047' : isLight ? '#f3f4f6' : '#e5e7eb'}
+                  stroke={isHighlighted ? '#f59e0b' : 'none'}
                   strokeWidth={isHighlighted ? 3 : 0}
                 />
               </g>
-            );
-          });
+            )
+          })
         })}
 
         {/* Column labels (A-P) at the bottom */}
         {showLabels &&
           Array.from({ length: displayCols }, (_, displayCol) => {
-            const actualCol = minCol + displayCol;
-            const colLabel = String.fromCharCode(65 + actualCol);
-            const x =
-              labelMargin +
-              padding +
-              displayCol * (cellSize + gap) +
-              cellSize / 2;
-            const y = boardHeight - 10;
+            const actualCol = minCol + displayCol
+            const colLabel = String.fromCharCode(65 + actualCol)
+            const x = labelMargin + padding + displayCol * (cellSize + gap) + cellSize / 2
+            const y = boardHeight - 10
 
             return (
               <text
@@ -148,15 +135,15 @@ export function RithmomachiaBoard({
               >
                 {colLabel}
               </text>
-            );
+            )
           })}
 
         {/* Row labels (1-8) on the left */}
         {showLabels &&
           Array.from({ length: displayRows }, (_, displayRow) => {
-            const actualRank = maxRow - displayRow;
-            const x = 15;
-            const y = padding + displayRow * (cellSize + gap) + cellSize / 2;
+            const actualRank = maxRow - displayRow
+            const x = 15
+            const y = padding + displayRow * (cellSize + gap) + cellSize / 2
 
             return (
               <text
@@ -172,41 +159,29 @@ export function RithmomachiaBoard({
               >
                 {actualRank}
               </text>
-            );
+            )
           })}
 
         {/* Pieces */}
         {pieces
           .filter((piece) => {
-            const file = piece.square.charCodeAt(0) - 65;
-            const rank = Number.parseInt(piece.square.slice(1), 10);
-            return (
-              file >= minCol &&
-              file <= maxCol &&
-              rank >= minRow &&
-              rank <= maxRow
-            );
+            const file = piece.square.charCodeAt(0) - 65
+            const rank = Number.parseInt(piece.square.slice(1), 10)
+            return file >= minCol && file <= maxCol && rank >= minRow && rank <= maxRow
           })
           .map((piece, idx) => {
-            const file = piece.square.charCodeAt(0) - 65;
-            const rank = Number.parseInt(piece.square.slice(1), 10);
+            const file = piece.square.charCodeAt(0) - 65
+            const rank = Number.parseInt(piece.square.slice(1), 10)
 
             // Calculate position relative to the crop area
-            const displayCol = file - minCol;
-            const displayRow = maxRow - rank;
+            const displayCol = file - minCol
+            const displayRow = maxRow - rank
 
-            const x =
-              labelMargin +
-              padding +
-              displayCol * (cellSize + gap) +
-              cellSize / 2;
-            const y = padding + displayRow * (cellSize + gap) + cellSize / 2;
+            const x = labelMargin + padding + displayCol * (cellSize + gap) + cellSize / 2
+            const y = padding + displayRow * (cellSize + gap) + cellSize / 2
 
             return (
-              <g
-                key={`${piece.square}-${idx}`}
-                transform={`translate(${x}, ${y})`}
-              >
+              <g key={`${piece.square}-${idx}`} transform={`translate(${x}, ${y})`}>
                 <g transform={`translate(${-cellSize / 2}, ${-cellSize / 2})`}>
                   <PieceRenderer
                     type={piece.type}
@@ -217,9 +192,9 @@ export function RithmomachiaBoard({
                   />
                 </g>
               </g>
-            );
+            )
           })}
       </svg>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx b/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx
index 7b0bb3d7..3effc441 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/RithmomachiaGame.tsx
@@ -1,27 +1,27 @@
-"use client";
+'use client'
 
-import { useRouter } from "next/navigation";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-import type { PlayerBadge } from "@/components/nav/types";
-import { PageWithNav } from "@/components/PageWithNav";
-import { StandardGameLayout } from "@/components/StandardGameLayout";
-import { useFullscreen } from "@/contexts/FullscreenContext";
-import { useAbacusSettings } from "@/hooks/useAbacusSettings";
-import { css } from "../../../../styled-system/css";
-import { useRosterWarning } from "../hooks/useRosterWarning";
-import { useRithmomachia } from "../Provider";
-import { PlayingGuideModal } from "./PlayingGuideModal";
-import { PlayingPhase } from "./phases/PlayingPhase";
-import { ResultsPhase } from "./phases/ResultsPhase";
-import { SetupPhase } from "./phases/SetupPhase";
+import { useRouter } from 'next/navigation'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'
+import type { PlayerBadge } from '@/components/nav/types'
+import { PageWithNav } from '@/components/PageWithNav'
+import { StandardGameLayout } from '@/components/StandardGameLayout'
+import { useFullscreen } from '@/contexts/FullscreenContext'
+import { useAbacusSettings } from '@/hooks/useAbacusSettings'
+import { css } from '../../../../styled-system/css'
+import { useRosterWarning } from '../hooks/useRosterWarning'
+import { useRithmomachia } from '../Provider'
+import { PlayingGuideModal } from './PlayingGuideModal'
+import { PlayingPhase } from './phases/PlayingPhase'
+import { ResultsPhase } from './phases/ResultsPhase'
+import { SetupPhase } from './phases/SetupPhase'
 
 /**
  * Main Rithmomachia game component.
  * Orchestrates the game phases and UI.
  */
 export function RithmomachiaGame() {
-  const router = useRouter();
+  const router = useRouter()
   const {
     state,
     resetGame,
@@ -30,206 +30,193 @@ export function RithmomachiaGame() {
     blackPlayerId,
     assignWhitePlayer,
     assignBlackPlayer,
-  } = useRithmomachia();
+  } = useRithmomachia()
 
   // Get abacus settings for native abacus numbers
-  const { data: abacusSettings } = useAbacusSettings();
-  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false;
-  const { setFullscreenElement } = useFullscreen();
-  const gameRef = useRef<HTMLDivElement>(null);
-  const rosterWarning = useRosterWarning(
-    state.gamePhase === "setup" ? "setup" : "playing",
-  );
+  const { data: abacusSettings } = useAbacusSettings()
+  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false
+  const { setFullscreenElement } = useFullscreen()
+  const gameRef = useRef<HTMLDivElement>(null)
+  const rosterWarning = useRosterWarning(state.gamePhase === 'setup' ? 'setup' : 'playing')
 
   // Load saved guide preferences from localStorage
   const [guideDocked, setGuideDocked] = useState<boolean>(() => {
-    if (typeof window === "undefined") return false;
-    const saved = localStorage.getItem("rithmomachia-guide-docked");
-    return saved === "true";
-  });
+    if (typeof window === 'undefined') return false
+    const saved = localStorage.getItem('rithmomachia-guide-docked')
+    return saved === 'true'
+  })
 
-  const [guideDockSide, setGuideDockSide] = useState<"left" | "right">(() => {
-    if (typeof window === "undefined") return "right";
-    const saved = localStorage.getItem("rithmomachia-guide-dock-side");
-    return saved === "left" || saved === "right" ? saved : "right";
-  });
+  const [guideDockSide, setGuideDockSide] = useState<'left' | 'right'>(() => {
+    if (typeof window === 'undefined') return 'right'
+    const saved = localStorage.getItem('rithmomachia-guide-dock-side')
+    return saved === 'left' || saved === 'right' ? saved : 'right'
+  })
 
-  const [isGuideOpen, setIsGuideOpen] = useState(false);
-  const [dockPreviewSide, setDockPreviewSide] = useState<
-    "left" | "right" | null
-  >(null);
+  const [isGuideOpen, setIsGuideOpen] = useState(false)
+  const [dockPreviewSide, setDockPreviewSide] = useState<'left' | 'right' | null>(null)
 
   useEffect(() => {
     // Register this component's main div as the fullscreen element
     if (gameRef.current) {
-      setFullscreenElement(gameRef.current);
+      setFullscreenElement(gameRef.current)
     }
-  }, [setFullscreenElement]);
+  }, [setFullscreenElement])
 
   // Save guide docked state to localStorage
   useEffect(() => {
-    localStorage.setItem("rithmomachia-guide-docked", String(guideDocked));
-  }, [guideDocked]);
+    localStorage.setItem('rithmomachia-guide-docked', String(guideDocked))
+  }, [guideDocked])
 
   // Save guide dock side to localStorage
   useEffect(() => {
-    localStorage.setItem("rithmomachia-guide-dock-side", guideDockSide);
-  }, [guideDockSide]);
+    localStorage.setItem('rithmomachia-guide-dock-side', guideDockSide)
+  }, [guideDockSide])
 
   // Debug logging for state changes
   useEffect(() => {
-    console.log("[RithmomachiaGame] State changed", {
+    console.log('[RithmomachiaGame] State changed', {
       isGuideOpen,
       guideDocked,
       guideDockSide,
-    });
-  }, [isGuideOpen, guideDocked, guideDockSide]);
+    })
+  }, [isGuideOpen, guideDocked, guideDockSide])
 
   const currentPlayerId = useMemo(() => {
-    if (state.turn === "W") {
-      return whitePlayerId ?? undefined;
+    if (state.turn === 'W') {
+      return whitePlayerId ?? undefined
     }
-    if (state.turn === "B") {
-      return blackPlayerId ?? undefined;
+    if (state.turn === 'B') {
+      return blackPlayerId ?? undefined
     }
-    return undefined;
-  }, [state.turn, whitePlayerId, blackPlayerId]);
+    return undefined
+  }, [state.turn, whitePlayerId, blackPlayerId])
 
   const playerBadges = useMemo<Record<string, PlayerBadge>>(() => {
-    const badges: Record<string, PlayerBadge> = {};
+    const badges: Record<string, PlayerBadge> = {}
     if (whitePlayerId) {
       badges[whitePlayerId] = {
-        label: "White",
-        icon: "⚪",
-        background:
-          "linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(226, 232, 240, 0.9))",
-        color: "#0f172a",
-        borderColor: "rgba(226, 232, 240, 0.8)",
-        shadowColor: "rgba(148, 163, 184, 0.35)",
-      };
+        label: 'White',
+        icon: '⚪',
+        background: 'linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(226, 232, 240, 0.9))',
+        color: '#0f172a',
+        borderColor: 'rgba(226, 232, 240, 0.8)',
+        shadowColor: 'rgba(148, 163, 184, 0.35)',
+      }
     }
     if (blackPlayerId) {
       badges[blackPlayerId] = {
-        label: "Black",
-        icon: "⚫",
-        background:
-          "linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.94))",
-        color: "#f8fafc",
-        borderColor: "rgba(30, 41, 59, 0.9)",
-        shadowColor: "rgba(15, 23, 42, 0.45)",
-      };
-    }
-    return badges;
-  }, [whitePlayerId, blackPlayerId]);
-
-  const handleOpenGuide = () => {
-    console.log("[RithmomachiaGame] handleOpenGuide called");
-    setIsGuideOpen(true);
-
-    // Use saved preferences if available, otherwise default to docked on right
-    if (typeof window !== "undefined") {
-      const savedDocked = localStorage.getItem("rithmomachia-guide-docked");
-      const savedSide = localStorage.getItem("rithmomachia-guide-dock-side");
-
-      if (savedDocked !== null) {
-        const isDocked = savedDocked === "true";
-        setGuideDocked(isDocked);
-        if (isDocked && savedSide) {
-          setGuideDockSide(
-            savedSide === "left" || savedSide === "right" ? savedSide : "right",
-          );
-        }
-        console.log("[RithmomachiaGame] Guide opened with saved preferences", {
-          docked: isDocked,
-          side: savedSide,
-        });
-      } else {
-        // First time opening - default to docked on right
-        setGuideDocked(true);
-        setGuideDockSide("right");
-        console.log(
-          "[RithmomachiaGame] Guide opened in default docked right position",
-        );
+        label: 'Black',
+        icon: '⚫',
+        background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.94))',
+        color: '#f8fafc',
+        borderColor: 'rgba(30, 41, 59, 0.9)',
+        shadowColor: 'rgba(15, 23, 42, 0.45)',
       }
     }
-  };
+    return badges
+  }, [whitePlayerId, blackPlayerId])
 
-  const handleDock = (side: "left" | "right") => {
-    console.log("[RithmomachiaGame] handleDock called", { side });
-    setGuideDockSide(side);
-    setGuideDocked(true);
-    setDockPreviewSide(null); // Clear preview when committing to dock
-    console.log("[RithmomachiaGame] Docked state updated", {
+  const handleOpenGuide = () => {
+    console.log('[RithmomachiaGame] handleOpenGuide called')
+    setIsGuideOpen(true)
+
+    // Use saved preferences if available, otherwise default to docked on right
+    if (typeof window !== 'undefined') {
+      const savedDocked = localStorage.getItem('rithmomachia-guide-docked')
+      const savedSide = localStorage.getItem('rithmomachia-guide-dock-side')
+
+      if (savedDocked !== null) {
+        const isDocked = savedDocked === 'true'
+        setGuideDocked(isDocked)
+        if (isDocked && savedSide) {
+          setGuideDockSide(savedSide === 'left' || savedSide === 'right' ? savedSide : 'right')
+        }
+        console.log('[RithmomachiaGame] Guide opened with saved preferences', {
+          docked: isDocked,
+          side: savedSide,
+        })
+      } else {
+        // First time opening - default to docked on right
+        setGuideDocked(true)
+        setGuideDockSide('right')
+        console.log('[RithmomachiaGame] Guide opened in default docked right position')
+      }
+    }
+  }
+
+  const handleDock = (side: 'left' | 'right') => {
+    console.log('[RithmomachiaGame] handleDock called', { side })
+    setGuideDockSide(side)
+    setGuideDocked(true)
+    setDockPreviewSide(null) // Clear preview when committing to dock
+    console.log('[RithmomachiaGame] Docked state updated', {
       guideDocked: true,
       guideDockSide: side,
-    });
-  };
+    })
+  }
 
   const handleUndock = () => {
-    console.log("[RithmomachiaGame] handleUndock called");
-    setGuideDocked(false);
-    console.log("[RithmomachiaGame] Undocked state updated", {
+    console.log('[RithmomachiaGame] handleUndock called')
+    setGuideDocked(false)
+    console.log('[RithmomachiaGame] Undocked state updated', {
       guideDocked: false,
-    });
-  };
+    })
+  }
 
-  const handleDockPreview = (side: "left" | "right" | null) => {
-    console.log("[RithmomachiaGame] handleDockPreview called", { side });
-    setDockPreviewSide(side);
-  };
+  const handleDockPreview = (side: 'left' | 'right' | null) => {
+    console.log('[RithmomachiaGame] handleDockPreview called', { side })
+    setDockPreviewSide(side)
+  }
 
   const gameContent = (
     <div
       className={css({
         flex: 1,
-        padding: guideDocked ? 0 : { base: "12px", sm: "16px", md: "20px" },
-        display: "flex",
-        flexDirection: "column",
-        alignItems: guideDocked ? "stretch" : "center",
-        position: "relative",
-        overflow: "auto",
+        padding: guideDocked ? 0 : { base: '12px', sm: '16px', md: '20px' },
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: guideDocked ? 'stretch' : 'center',
+        position: 'relative',
+        overflow: 'auto',
         // When docked, ensure we fill panel height
-        height: guideDocked ? "100%" : "auto",
+        height: guideDocked ? '100%' : 'auto',
       })}
     >
       <main
         className={css({
-          width: "100%",
-          maxWidth: guideDocked ? "none" : "1200px",
-          background: "rgba(255,255,255,0.95)",
-          borderRadius: guideDocked ? 0 : { base: "12px", md: "20px" },
-          padding: { base: "12px", sm: "16px", md: "24px", lg: "32px" },
-          boxShadow: guideDocked ? "none" : "0 10px 30px rgba(0,0,0,0.2)",
+          width: '100%',
+          maxWidth: guideDocked ? 'none' : '1200px',
+          background: 'rgba(255,255,255,0.95)',
+          borderRadius: guideDocked ? 0 : { base: '12px', md: '20px' },
+          padding: { base: '12px', sm: '16px', md: '24px', lg: '32px' },
+          boxShadow: guideDocked ? 'none' : '0 10px 30px rgba(0,0,0,0.2)',
           flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          overflow: "hidden",
-          position: "relative",
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          position: 'relative',
           // Ensure main fills parent height
           minHeight: 0,
         })}
       >
-        {state.gamePhase === "setup" && (
+        {state.gamePhase === 'setup' && (
           <SetupPhase onOpenGuide={handleOpenGuide} isGuideOpen={isGuideOpen} />
         )}
-        {state.gamePhase === "playing" && (
-          <PlayingPhase
-            onOpenGuide={handleOpenGuide}
-            isGuideOpen={isGuideOpen}
-          />
+        {state.gamePhase === 'playing' && (
+          <PlayingPhase onOpenGuide={handleOpenGuide} isGuideOpen={isGuideOpen} />
         )}
-        {state.gamePhase === "results" && <ResultsPhase />}
+        {state.gamePhase === 'results' && <ResultsPhase />}
       </main>
     </div>
-  );
+  )
 
   return (
     <PageWithNav
       navTitle="Rithmomachia"
       navEmoji="🎲"
-      emphasizePlayerSelection={state.gamePhase === "setup"}
+      emphasizePlayerSelection={state.gamePhase === 'setup'}
       onExitSession={() => {
-        router.push("/arcade");
+        router.push('/arcade')
       }}
       onNewGame={resetGame}
       onSetup={goToSetup}
@@ -247,15 +234,15 @@ export function RithmomachiaGame() {
           ref={gameRef}
           className={css({
             flex: 1,
-            display: "flex",
-            flexDirection: "column",
-            position: "relative",
-            overflow: "hidden",
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            overflow: 'hidden',
           })}
         >
           {(guideDocked || dockPreviewSide) && isGuideOpen ? (
             <PanelGroup direction="horizontal" style={{ flex: 1 }}>
-              {(guideDocked ? guideDockSide : dockPreviewSide) === "left" && (
+              {(guideDocked ? guideDockSide : dockPreviewSide) === 'left' && (
                 <>
                   <Panel defaultSize={35} minSize={20} maxSize={50}>
                     <PlayingGuideModal
@@ -269,31 +256,31 @@ export function RithmomachiaGame() {
                   </Panel>
                   <PanelResizeHandle
                     className={css({
-                      width: "2px",
-                      background: "#e5e7eb",
-                      cursor: "col-resize",
-                      transition: "all 0.2s",
+                      width: '2px',
+                      background: '#e5e7eb',
+                      cursor: 'col-resize',
+                      transition: 'all 0.2s',
                       _hover: {
-                        background: "#9ca3af",
-                        width: "3px",
+                        background: '#9ca3af',
+                        width: '3px',
                       },
                     })}
                   />
                   <Panel minSize={50}>{gameContent}</Panel>
                 </>
               )}
-              {(guideDocked ? guideDockSide : dockPreviewSide) === "right" && (
+              {(guideDocked ? guideDockSide : dockPreviewSide) === 'right' && (
                 <>
                   <Panel minSize={50}>{gameContent}</Panel>
                   <PanelResizeHandle
                     className={css({
-                      width: "2px",
-                      background: "#e5e7eb",
-                      cursor: "col-resize",
-                      transition: "all 0.2s",
+                      width: '2px',
+                      background: '#e5e7eb',
+                      cursor: 'col-resize',
+                      transition: 'all 0.2s',
                       _hover: {
-                        background: "#9ca3af",
-                        width: "3px",
+                        background: '#9ca3af',
+                        width: '3px',
                       },
                     })}
                   />
@@ -327,7 +314,7 @@ export function RithmomachiaGame() {
         />
       )}
     </PageWithNav>
-  );
+  )
 }
 
 /**
diff --git a/apps/web/src/arcade-games/rithmomachia/components/board/BoardDisplay.tsx b/apps/web/src/arcade-games/rithmomachia/components/board/BoardDisplay.tsx
index bc63a00e..7932ecc0 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/board/BoardDisplay.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/board/BoardDisplay.tsx
@@ -1,17 +1,17 @@
-"use client";
+'use client'
 
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useAbacusSettings } from "@/hooks/useAbacusSettings";
-import { Z_INDEX } from "@/constants/zIndex";
-import { css } from "../../../../../styled-system/css";
-import { CaptureProvider } from "../../contexts/CaptureContext";
-import { useBoardLayout } from "../../hooks/useBoardLayout";
-import { usePieceSelection } from "../../hooks/usePieceSelection";
-import { useRithmomachia } from "../../Provider";
-import type { Piece, RelationKind } from "../../types";
-import { getSquarePosition } from "../../utils/boardCoordinates";
-import { validateMove } from "../../utils/pathValidator";
-import { getEffectiveValue } from "../../utils/pieceSetup";
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useAbacusSettings } from '@/hooks/useAbacusSettings'
+import { Z_INDEX } from '@/constants/zIndex'
+import { css } from '../../../../../styled-system/css'
+import { CaptureProvider } from '../../contexts/CaptureContext'
+import { useBoardLayout } from '../../hooks/useBoardLayout'
+import { usePieceSelection } from '../../hooks/usePieceSelection'
+import { useRithmomachia } from '../../Provider'
+import type { Piece, RelationKind } from '../../types'
+import { getSquarePosition } from '../../utils/boardCoordinates'
+import { validateMove } from '../../utils/pathValidator'
+import { getEffectiveValue } from '../../utils/pieceSetup'
 import {
   checkDiff,
   checkDivisor,
@@ -20,748 +20,658 @@ import {
   checkProduct,
   checkRatio,
   checkSum,
-} from "../../utils/relationEngine";
-import { CaptureErrorDialog } from "../capture/CaptureErrorDialog";
-import { CaptureRelationOptions } from "../capture/CaptureRelationOptions";
-import { HelperSelectionOptions } from "../capture/HelperSelectionOptions";
-import { NumberBondVisualization } from "../capture/NumberBondVisualization";
-import { SvgPiece } from "./SvgPiece";
+} from '../../utils/relationEngine'
+import { CaptureErrorDialog } from '../capture/CaptureErrorDialog'
+import { CaptureRelationOptions } from '../capture/CaptureRelationOptions'
+import { HelperSelectionOptions } from '../capture/HelperSelectionOptions'
+import { NumberBondVisualization } from '../capture/NumberBondVisualization'
+import { SvgPiece } from './SvgPiece'
 
 /**
  * Board display component (simplified for v1).
  */
 export function BoardDisplay() {
-  const { state, makeMove, playerColor, isMyTurn } = useRithmomachia();
-  const layout = useBoardLayout();
-  const { data: abacusSettings } = useAbacusSettings();
-  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false;
+  const { state, makeMove, playerColor, isMyTurn } = useRithmomachia()
+  const layout = useBoardLayout()
+  const { data: abacusSettings } = useAbacusSettings()
+  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false
 
   // Capture dialog state
-  const [captureDialogOpen, setCaptureDialogOpen] = useState(false);
-  const [closingDialog, setClosingDialog] = useState(false);
+  const [captureDialogOpen, setCaptureDialogOpen] = useState(false)
+  const [closingDialog, setClosingDialog] = useState(false)
   const [captureTarget, setCaptureTarget] = useState<{
-    from: string;
-    to: string;
-    pieceId: string;
-  } | null>(null);
-  const [selectedRelation, setSelectedRelation] = useState<RelationKind | null>(
-    null,
-  );
+    from: string
+    to: string
+    pieceId: string
+  } | null>(null)
+  const [selectedRelation, setSelectedRelation] = useState<RelationKind | null>(null)
   const [selectedHelper, setSelectedHelper] = useState<{
-    helperPiece: Piece;
-    moverPiece: Piece;
-    targetPiece: Piece;
-  } | null>(null);
+    helperPiece: Piece
+    moverPiece: Piece
+    targetPiece: Piece
+  } | null>(null)
 
   // Hover state for showing error tooltip
-  const [hoveredSquare, setHoveredSquare] = useState<string | null>(null);
+  const [hoveredSquare, setHoveredSquare] = useState<string | null>(null)
 
   // Handle closing animation completion
   useEffect(() => {
     if (closingDialog) {
       // Wait for animation to complete (400ms allows spring to fully settle)
       const timer = setTimeout(() => {
-        setCaptureDialogOpen(false);
-        setCaptureTarget(null);
-        setSelectedRelation(null);
-        setSelectedHelper(null);
-        setClosingDialog(false);
-      }, 400);
-      return () => clearTimeout(timer);
+        setCaptureDialogOpen(false)
+        setCaptureTarget(null)
+        setSelectedRelation(null)
+        setSelectedHelper(null)
+        setClosingDialog(false)
+      }, 400)
+      return () => clearTimeout(timer)
     }
-  }, [closingDialog]);
+  }, [closingDialog])
 
   // Function to dismiss the dialog with animation
   const dismissDialog = useCallback(() => {
-    setSelectedRelation(null);
-    setSelectedHelper(null);
-    setClosingDialog(true);
-  }, []);
+    setSelectedRelation(null)
+    setSelectedHelper(null)
+    setClosingDialog(true)
+  }, [])
 
   // Piece selection hook
-  const { selectedSquare, handleSquareClick, clearSelection } =
-    usePieceSelection(state.pieces, playerColor, isMyTurn, {
+  const { selectedSquare, handleSquareClick, clearSelection } = usePieceSelection(
+    state.pieces,
+    playerColor,
+    isMyTurn,
+    {
       onMove: (from, to, pieceId) => {
-        makeMove(from, to, pieceId);
+        makeMove(from, to, pieceId)
       },
       onCaptureAttempt: (from, to, pieceId) => {
-        setCaptureTarget({ from, to, pieceId });
-        setCaptureDialogOpen(true);
+        setCaptureTarget({ from, to, pieceId })
+        setCaptureDialogOpen(true)
       },
-    });
+    }
+  )
 
   // Find valid helper pieces for a given relation
   const findValidHelpers = (
     moverValue: number,
     targetValue: number,
-    relation: RelationKind,
+    relation: RelationKind
   ): Piece[] => {
-    if (!captureTarget) return [];
+    if (!captureTarget) return []
 
-    const validHelpers: Piece[] = [];
+    const validHelpers: Piece[] = []
     const friendlyPieces = Object.values(state.pieces).filter(
-      (p) =>
-        !p.captured &&
-        p.color === playerColor &&
-        p.id !== captureTarget.pieceId,
-    );
+      (p) => !p.captured && p.color === playerColor && p.id !== captureTarget.pieceId
+    )
 
     for (const piece of friendlyPieces) {
-      const helperValue = getEffectiveValue(piece);
-      if (helperValue === undefined || helperValue === null) continue;
+      const helperValue = getEffectiveValue(piece)
+      if (helperValue === undefined || helperValue === null) continue
 
-      let isValid = false;
+      let isValid = false
       switch (relation) {
-        case "SUM":
-          isValid = checkSum(moverValue, targetValue, helperValue).valid;
-          break;
-        case "DIFF":
-          isValid = checkDiff(moverValue, targetValue, helperValue).valid;
-          break;
-        case "PRODUCT":
-          isValid = checkProduct(moverValue, targetValue, helperValue).valid;
-          break;
-        case "RATIO":
-          isValid = checkRatio(moverValue, targetValue, helperValue).valid;
-          break;
+        case 'SUM':
+          isValid = checkSum(moverValue, targetValue, helperValue).valid
+          break
+        case 'DIFF':
+          isValid = checkDiff(moverValue, targetValue, helperValue).valid
+          break
+        case 'PRODUCT':
+          isValid = checkProduct(moverValue, targetValue, helperValue).valid
+          break
+        case 'RATIO':
+          isValid = checkRatio(moverValue, targetValue, helperValue).valid
+          break
       }
 
       if (isValid) {
-        validHelpers.push(piece);
+        validHelpers.push(piece)
       }
     }
 
-    return validHelpers;
-  };
+    return validHelpers
+  }
 
   // Find ALL available relations for this capture
-  const findAvailableRelations = (
-    moverValue: number,
-    targetValue: number,
-  ): RelationKind[] => {
-    const available: RelationKind[] = [];
+  const findAvailableRelations = (moverValue: number, targetValue: number): RelationKind[] => {
+    const available: RelationKind[] = []
 
     // Check non-helper relations
-    if (checkEqual(moverValue, targetValue).valid) available.push("EQUAL");
-    if (checkMultiple(moverValue, targetValue).valid)
-      available.push("MULTIPLE");
-    if (checkDivisor(moverValue, targetValue).valid) available.push("DIVISOR");
+    if (checkEqual(moverValue, targetValue).valid) available.push('EQUAL')
+    if (checkMultiple(moverValue, targetValue).valid) available.push('MULTIPLE')
+    if (checkDivisor(moverValue, targetValue).valid) available.push('DIVISOR')
 
     // Check helper relations - only include if at least one valid helper exists
-    if (findValidHelpers(moverValue, targetValue, "SUM").length > 0)
-      available.push("SUM");
-    if (findValidHelpers(moverValue, targetValue, "DIFF").length > 0)
-      available.push("DIFF");
-    if (findValidHelpers(moverValue, targetValue, "PRODUCT").length > 0)
-      available.push("PRODUCT");
-    if (findValidHelpers(moverValue, targetValue, "RATIO").length > 0)
-      available.push("RATIO");
+    if (findValidHelpers(moverValue, targetValue, 'SUM').length > 0) available.push('SUM')
+    if (findValidHelpers(moverValue, targetValue, 'DIFF').length > 0) available.push('DIFF')
+    if (findValidHelpers(moverValue, targetValue, 'PRODUCT').length > 0) available.push('PRODUCT')
+    if (findValidHelpers(moverValue, targetValue, 'RATIO').length > 0) available.push('RATIO')
 
-    console.log("[findAvailableRelations] available:", available);
-    return available;
-  };
+    console.log('[findAvailableRelations] available:', available)
+    return available
+  }
 
   const handleCaptureWithRelation = (relation: RelationKind) => {
-    console.log("[handleCaptureWithRelation] Called with relation:", relation);
-    console.log("[handleCaptureWithRelation] captureTarget:", captureTarget);
+    console.log('[handleCaptureWithRelation] Called with relation:', relation)
+    console.log('[handleCaptureWithRelation] captureTarget:', captureTarget)
 
     if (!captureTarget) {
-      console.log("[handleCaptureWithRelation] No capture target, returning");
-      return;
+      console.log('[handleCaptureWithRelation] No capture target, returning')
+      return
     }
 
     // Check if this relation requires a helper
-    const helperRelations: RelationKind[] = ["SUM", "DIFF", "PRODUCT", "RATIO"];
-    const needsHelper = helperRelations.includes(relation);
-    console.log("[handleCaptureWithRelation] needsHelper:", needsHelper);
+    const helperRelations: RelationKind[] = ['SUM', 'DIFF', 'PRODUCT', 'RATIO']
+    const needsHelper = helperRelations.includes(relation)
+    console.log('[handleCaptureWithRelation] needsHelper:', needsHelper)
 
     if (needsHelper) {
       // Get mover and target values
       const moverPiece = Object.values(state.pieces).find(
-        (p) => p.id === captureTarget.pieceId && !p.captured,
-      );
+        (p) => p.id === captureTarget.pieceId && !p.captured
+      )
       const targetPiece = Object.values(state.pieces).find(
-        (p) => p.square === captureTarget.to && !p.captured,
-      );
+        (p) => p.square === captureTarget.to && !p.captured
+      )
 
-      console.log("[handleCaptureWithRelation] moverPiece:", moverPiece);
-      console.log("[handleCaptureWithRelation] targetPiece:", targetPiece);
+      console.log('[handleCaptureWithRelation] moverPiece:', moverPiece)
+      console.log('[handleCaptureWithRelation] targetPiece:', targetPiece)
 
       if (!moverPiece || !targetPiece) {
-        console.log("[handleCaptureWithRelation] Missing piece, returning");
-        return;
+        console.log('[handleCaptureWithRelation] Missing piece, returning')
+        return
       }
 
-      const targetValue = getEffectiveValue(targetPiece);
+      const targetValue = getEffectiveValue(targetPiece)
 
-      console.log("[handleCaptureWithRelation] targetValue:", targetValue);
+      console.log('[handleCaptureWithRelation] targetValue:', targetValue)
 
       if (targetValue === undefined || targetValue === null) {
-        console.log(
-          "[handleCaptureWithRelation] Undefined/null target value, returning",
-        );
-        return;
+        console.log('[handleCaptureWithRelation] Undefined/null target value, returning')
+        return
       }
 
       // For pyramids, find helpers using all faces
       if (
-        moverPiece.type === "P" &&
+        moverPiece.type === 'P' &&
         moverPiece.pyramidFaces &&
         moverPiece.pyramidFaces.length === 4
       ) {
         console.log(
-          "[handleCaptureWithRelation] Pyramid - checking all faces for helpers: " +
-            moverPiece.pyramidFaces.join(", "),
-        );
+          '[handleCaptureWithRelation] Pyramid - checking all faces for helpers: ' +
+            moverPiece.pyramidFaces.join(', ')
+        )
 
         // Collect all valid helpers from all pyramid faces
-        const allValidHelpers = new Map<string, Piece>();
+        const allValidHelpers = new Map<string, Piece>()
 
         for (const faceValue of moverPiece.pyramidFaces) {
-          const helpers = findValidHelpers(faceValue, targetValue, relation);
+          const helpers = findValidHelpers(faceValue, targetValue, relation)
           console.log(
-            "[handleCaptureWithRelation] Face " +
+            '[handleCaptureWithRelation] Face ' +
               faceValue +
-              " found " +
+              ' found ' +
               helpers.length +
-              " helpers",
-          );
+              ' helpers'
+          )
           for (const helper of helpers) {
-            allValidHelpers.set(helper.id, helper);
+            allValidHelpers.set(helper.id, helper)
           }
         }
 
-        const validHelpers = Array.from(allValidHelpers.values());
-        console.log(
-          "[handleCaptureWithRelation] Total unique helpers: " +
-            validHelpers.length,
-        );
+        const validHelpers = Array.from(allValidHelpers.values())
+        console.log('[handleCaptureWithRelation] Total unique helpers: ' + validHelpers.length)
 
         if (validHelpers.length === 0) {
-          console.log(
-            "[handleCaptureWithRelation] No valid helpers found for any pyramid face",
-          );
-          return;
+          console.log('[handleCaptureWithRelation] No valid helpers found for any pyramid face')
+          return
         }
 
-        console.log(
-          "[handleCaptureWithRelation] Auto-selecting first helper:",
-          validHelpers[0],
-        );
-        setSelectedRelation(relation);
+        console.log('[handleCaptureWithRelation] Auto-selecting first helper:', validHelpers[0])
+        setSelectedRelation(relation)
         setSelectedHelper({
           helperPiece: validHelpers[0],
           moverPiece,
           targetPiece,
-        });
+        })
       } else {
         // Non-pyramid logic
-        const moverValue = getEffectiveValue(moverPiece);
-        console.log("[handleCaptureWithRelation] moverValue:", moverValue);
+        const moverValue = getEffectiveValue(moverPiece)
+        console.log('[handleCaptureWithRelation] moverValue:', moverValue)
 
         if (moverValue === undefined || moverValue === null) {
-          console.log(
-            "[handleCaptureWithRelation] Undefined/null mover value, returning",
-          );
-          return;
+          console.log('[handleCaptureWithRelation] Undefined/null mover value, returning')
+          return
         }
 
         // Find valid helpers
-        const validHelpers = findValidHelpers(
-          moverValue,
-          targetValue,
-          relation,
-        );
-        console.log("[handleCaptureWithRelation] validHelpers:", validHelpers);
+        const validHelpers = findValidHelpers(moverValue, targetValue, relation)
+        console.log('[handleCaptureWithRelation] validHelpers:', validHelpers)
 
         if (validHelpers.length === 0) {
           // No valid helpers - relation is impossible
-          console.log("[handleCaptureWithRelation] No valid helpers found");
-          return;
+          console.log('[handleCaptureWithRelation] No valid helpers found')
+          return
         }
 
         // Automatically select the first valid helper (skip helper selection UI)
-        console.log(
-          "[handleCaptureWithRelation] Auto-selecting first helper:",
-          validHelpers[0],
-        );
-        setSelectedRelation(relation);
+        console.log('[handleCaptureWithRelation] Auto-selecting first helper:', validHelpers[0])
+        setSelectedRelation(relation)
         setSelectedHelper({
           helperPiece: validHelpers[0],
           moverPiece,
           targetPiece,
-        });
+        })
       }
     } else {
-      console.log(
-        "[handleCaptureWithRelation] No helper needed, executing capture immediately",
-      );
+      console.log('[handleCaptureWithRelation] No helper needed, executing capture immediately')
       // No helper needed - execute capture immediately
       const targetPiece = Object.values(state.pieces).find(
-        (p) => p.square === captureTarget.to && !p.captured,
-      );
-      if (!targetPiece) return;
+        (p) => p.square === captureTarget.to && !p.captured
+      )
+      if (!targetPiece) return
 
       const captureData = {
         relation,
         targetPieceId: targetPiece.id,
-      };
+      }
 
-      makeMove(
-        captureTarget.from,
-        captureTarget.to,
-        captureTarget.pieceId,
-        undefined,
-        captureData,
-      );
-      dismissDialog();
-      clearSelection();
+      makeMove(captureTarget.from, captureTarget.to, captureTarget.pieceId, undefined, captureData)
+      dismissDialog()
+      clearSelection()
     }
-  };
+  }
 
   const handleHelperSelection = (helperPieceId: string) => {
-    if (!captureTarget || !selectedRelation) return;
+    if (!captureTarget || !selectedRelation) return
 
     // Get pieces for number bond visualization
     const moverPiece = Object.values(state.pieces).find(
-      (p) => p.id === captureTarget.pieceId && !p.captured,
-    );
+      (p) => p.id === captureTarget.pieceId && !p.captured
+    )
     const targetPiece = Object.values(state.pieces).find(
-      (p) => p.square === captureTarget.to && !p.captured,
-    );
+      (p) => p.square === captureTarget.to && !p.captured
+    )
     const helperPiece = Object.values(state.pieces).find(
-      (p) => p.id === helperPieceId && !p.captured,
-    );
+      (p) => p.id === helperPieceId && !p.captured
+    )
 
-    if (!moverPiece || !targetPiece || !helperPiece) return;
+    if (!moverPiece || !targetPiece || !helperPiece) return
 
     // Show number bond visualization
     setSelectedHelper({
       helperPiece,
       moverPiece,
       targetPiece,
-    });
-  };
+    })
+  }
 
   const handleNumberBondConfirm = () => {
-    if (!captureTarget || !selectedRelation || !selectedHelper) return;
+    if (!captureTarget || !selectedRelation || !selectedHelper) return
 
     const captureData = {
       relation: selectedRelation,
       targetPieceId: selectedHelper.targetPiece.id,
       helperPieceId: selectedHelper.helperPiece.id,
-    };
+    }
 
-    makeMove(
-      captureTarget.from,
-      captureTarget.to,
-      captureTarget.pieceId,
-      undefined,
-      captureData,
-    );
-    dismissDialog();
-    clearSelection();
-  };
+    makeMove(captureTarget.from, captureTarget.to, captureTarget.pieceId, undefined, captureData)
+    dismissDialog()
+    clearSelection()
+  }
 
   // Get all active pieces
-  const activePieces = Object.values(state.pieces).filter((p) => !p.captured);
+  const activePieces = Object.values(state.pieces).filter((p) => !p.captured)
 
   // SVG dimensions using layout hook
-  const { cellSize, gap, padding, rows, columns: cols } = layout;
-  const labelMargin = 30; // Space for row/column labels
-  const boardInnerWidth = cols * cellSize + (cols - 1) * gap;
-  const boardInnerHeight = rows * cellSize + (rows - 1) * gap;
-  const boardWidth = boardInnerWidth + padding * 2 + labelMargin;
-  const boardHeight = boardInnerHeight + padding * 2 + labelMargin;
+  const { cellSize, gap, padding, rows, columns: cols } = layout
+  const labelMargin = 30 // Space for row/column labels
+  const boardInnerWidth = cols * cellSize + (cols - 1) * gap
+  const boardInnerHeight = rows * cellSize + (rows - 1) * gap
+  const boardWidth = boardInnerWidth + padding * 2 + labelMargin
+  const boardHeight = boardInnerHeight + padding * 2 + labelMargin
 
   const handleSvgClick = (e: React.MouseEvent<SVGSVGElement>) => {
-    if (!isMyTurn) return;
+    if (!isMyTurn) return
 
     // If capture dialog is open, dismiss it with animation on any click (buttons have stopPropagation)
     if (captureDialogOpen && !closingDialog) {
-      dismissDialog();
-      return;
+      dismissDialog()
+      return
     }
 
-    const svg = e.currentTarget;
-    const rect = svg.getBoundingClientRect();
-    const x =
-      ((e.clientX - rect.left) / rect.width) * boardWidth -
-      labelMargin -
-      padding;
-    const y = ((e.clientY - rect.top) / rect.height) * boardHeight - padding;
+    const svg = e.currentTarget
+    const rect = svg.getBoundingClientRect()
+    const x = ((e.clientX - rect.left) / rect.width) * boardWidth - labelMargin - padding
+    const y = ((e.clientY - rect.top) / rect.height) * boardHeight - padding
 
     // Convert to grid coordinates
-    const col = Math.floor(x / (cellSize + gap));
-    const row = Math.floor(y / (cellSize + gap));
+    const col = Math.floor(x / (cellSize + gap))
+    const row = Math.floor(y / (cellSize + gap))
 
     if (col >= 0 && col < cols && row >= 0 && row < rows) {
-      const square = `${String.fromCharCode(65 + col)}${8 - row}`;
-      const piece = Object.values(state.pieces).find(
-        (p) => p.square === square && !p.captured,
-      );
-      handleSquareClick(square, piece);
+      const square = `${String.fromCharCode(65 + col)}${8 - row}`
+      const piece = Object.values(state.pieces).find((p) => p.square === square && !p.captured)
+      handleSquareClick(square, piece)
     }
-  };
+  }
 
   const handleSvgMouseMove = (e: React.MouseEvent<SVGSVGElement>) => {
     console.log(
-      "[HOVER_ERROR] Mouse move - isMyTurn: " +
-        isMyTurn +
-        ", selectedSquare: " +
-        selectedSquare,
-    );
+      '[HOVER_ERROR] Mouse move - isMyTurn: ' + isMyTurn + ', selectedSquare: ' + selectedSquare
+    )
     if (!isMyTurn || !selectedSquare) {
-      setHoveredSquare(null);
-      return;
+      setHoveredSquare(null)
+      return
     }
 
-    const svg = e.currentTarget;
-    const rect = svg.getBoundingClientRect();
-    const x =
-      ((e.clientX - rect.left) / rect.width) * boardWidth -
-      labelMargin -
-      padding;
-    const y = ((e.clientY - rect.top) / rect.height) * boardHeight - padding;
+    const svg = e.currentTarget
+    const rect = svg.getBoundingClientRect()
+    const x = ((e.clientX - rect.left) / rect.width) * boardWidth - labelMargin - padding
+    const y = ((e.clientY - rect.top) / rect.height) * boardHeight - padding
 
     // Convert to grid coordinates
-    const col = Math.floor(x / (cellSize + gap));
-    const row = Math.floor(y / (cellSize + gap));
+    const col = Math.floor(x / (cellSize + gap))
+    const row = Math.floor(y / (cellSize + gap))
 
     if (col >= 0 && col < cols && row >= 0 && row < rows) {
-      const square = `${String.fromCharCode(65 + col)}${8 - row}`;
-      const piece = Object.values(state.pieces).find(
-        (p) => p.square === square && !p.captured,
-      );
+      const square = `${String.fromCharCode(65 + col)}${8 - row}`
+      const piece = Object.values(state.pieces).find((p) => p.square === square && !p.captured)
 
       console.log(
-        "[HOVER_ERROR] Square: " +
+        '[HOVER_ERROR] Square: ' +
           square +
-          ", hasPiece: " +
+          ', hasPiece: ' +
           !!piece +
-          ", pieceColor: " +
-          (piece ? piece.color : "none") +
-          ", playerColor: " +
-          playerColor,
-      );
+          ', pieceColor: ' +
+          (piece ? piece.color : 'none') +
+          ', playerColor: ' +
+          playerColor
+      )
 
       // Only set hovered square if it's an enemy piece
       if (piece && piece.color !== playerColor) {
-        console.log("[HOVER_ERROR] Setting hoveredSquare to: " + square);
-        setHoveredSquare(square);
+        console.log('[HOVER_ERROR] Setting hoveredSquare to: ' + square)
+        setHoveredSquare(square)
       } else {
-        setHoveredSquare(null);
+        setHoveredSquare(null)
       }
     } else {
-      setHoveredSquare(null);
+      setHoveredSquare(null)
     }
-  };
+  }
 
   const handleSvgMouseLeave = () => {
-    console.log("[HOVER_ERROR] Mouse leave - clearing hoveredSquare");
-    setHoveredSquare(null);
-  };
+    console.log('[HOVER_ERROR] Mouse leave - clearing hoveredSquare')
+    setHoveredSquare(null)
+  }
 
   // Calculate target square position for floating capture options
   const getTargetSquarePosition = useCallback(() => {
-    if (!captureTarget) return null;
+    if (!captureTarget) return null
     // Add labelMargin offset to the position from utility function
-    const basePos = getSquarePosition(captureTarget.to, layout);
-    const pos = { x: basePos.x + labelMargin, y: basePos.y };
-    return pos;
-  }, [captureTarget, layout, labelMargin]);
+    const basePos = getSquarePosition(captureTarget.to, layout)
+    const pos = { x: basePos.x + labelMargin, y: basePos.y }
+    return pos
+  }, [captureTarget, layout, labelMargin])
 
-  const targetPos = getTargetSquarePosition();
+  const targetPos = getTargetSquarePosition()
 
   // Prepare helper data with board positions (if showing helpers)
   const helpersWithPositions = (() => {
     if (!selectedRelation || !captureTarget) {
-      return [];
+      return []
     }
 
     const moverPiece = Object.values(state.pieces).find(
-      (p) => p.id === captureTarget.pieceId && !p.captured,
-    );
+      (p) => p.id === captureTarget.pieceId && !p.captured
+    )
     const targetPiece = Object.values(state.pieces).find(
-      (p) => p.square === captureTarget.to && !p.captured,
-    );
+      (p) => p.square === captureTarget.to && !p.captured
+    )
 
     if (!moverPiece || !targetPiece) {
-      return [];
+      return []
     }
 
-    const targetValue = getEffectiveValue(targetPiece);
+    const targetValue = getEffectiveValue(targetPiece)
 
     if (targetValue === undefined || targetValue === null) {
-      return [];
+      return []
     }
 
     // For pyramids, collect helpers from all faces
-    let validHelpers: Piece[];
+    let validHelpers: Piece[]
     if (
-      moverPiece.type === "P" &&
+      moverPiece.type === 'P' &&
       moverPiece.pyramidFaces &&
       moverPiece.pyramidFaces.length === 4
     ) {
-      const allValidHelpers = new Map<string, Piece>();
+      const allValidHelpers = new Map<string, Piece>()
 
       for (const faceValue of moverPiece.pyramidFaces) {
-        const helpers = findValidHelpers(
-          faceValue,
-          targetValue,
-          selectedRelation,
-        );
+        const helpers = findValidHelpers(faceValue, targetValue, selectedRelation)
         for (const helper of helpers) {
-          allValidHelpers.set(helper.id, helper);
+          allValidHelpers.set(helper.id, helper)
         }
       }
 
-      validHelpers = Array.from(allValidHelpers.values());
+      validHelpers = Array.from(allValidHelpers.values())
     } else {
-      const moverValue = getEffectiveValue(moverPiece);
+      const moverValue = getEffectiveValue(moverPiece)
       if (moverValue === undefined || moverValue === null) {
-        return [];
+        return []
       }
-      validHelpers = findValidHelpers(
-        moverValue,
-        targetValue,
-        selectedRelation,
-      );
+      validHelpers = findValidHelpers(moverValue, targetValue, selectedRelation)
     }
 
     const helpersWithPos = validHelpers.map((piece) => {
-      const basePos = getSquarePosition(piece.square, layout);
+      const basePos = getSquarePosition(piece.square, layout)
       return {
         piece,
         boardPos: { x: basePos.x + labelMargin, y: basePos.y },
-      };
-    });
+      }
+    })
 
-    return helpersWithPos;
-  })();
+    return helpersWithPos
+  })()
 
   // Calculate available relations and pyramid face values for this capture
   const { availableRelations, pyramidFaceValues } = (() => {
-    if (!captureTarget)
-      return { availableRelations: [], pyramidFaceValues: null };
+    if (!captureTarget) return { availableRelations: [], pyramidFaceValues: null }
 
     const moverPiece = Object.values(state.pieces).find(
-      (p) => p.id === captureTarget.pieceId && !p.captured,
-    );
+      (p) => p.id === captureTarget.pieceId && !p.captured
+    )
     const targetPiece = Object.values(state.pieces).find(
-      (p) => p.square === captureTarget.to && !p.captured,
-    );
+      (p) => p.square === captureTarget.to && !p.captured
+    )
 
-    if (!moverPiece || !targetPiece)
-      return { availableRelations: [], pyramidFaceValues: null };
+    if (!moverPiece || !targetPiece) return { availableRelations: [], pyramidFaceValues: null }
 
-    const targetValue = getEffectiveValue(targetPiece);
+    const targetValue = getEffectiveValue(targetPiece)
 
     if (targetValue === undefined || targetValue === null)
-      return { availableRelations: [], pyramidFaceValues: null };
+      return { availableRelations: [], pyramidFaceValues: null }
 
     // For pyramids, collect ALL relations from ALL faces and track which face to use
     if (
-      moverPiece.type === "P" &&
+      moverPiece.type === 'P' &&
       moverPiece.pyramidFaces &&
       moverPiece.pyramidFaces.length === 4
     ) {
       console.log(
-        "[availableRelations] Checking pyramid with faces: " +
-          moverPiece.pyramidFaces.join(", "),
-      );
+        '[availableRelations] Checking pyramid with faces: ' + moverPiece.pyramidFaces.join(', ')
+      )
 
-      const allRelations = new Set<RelationKind>();
-      const faceMap = new Map<RelationKind, number>();
+      const allRelations = new Set<RelationKind>()
+      const faceMap = new Map<RelationKind, number>()
 
       // Check each face and collect all available relations, storing first face that works for each relation
       for (const faceValue of moverPiece.pyramidFaces) {
-        const relations = findAvailableRelations(faceValue, targetValue);
+        const relations = findAvailableRelations(faceValue, targetValue)
         console.log(
-          "[availableRelations] Face " +
-            faceValue +
-            " relations: " +
-            relations.join(", "),
-        );
+          '[availableRelations] Face ' + faceValue + ' relations: ' + relations.join(', ')
+        )
         for (const rel of relations) {
           if (!faceMap.has(rel)) {
-            faceMap.set(rel, faceValue);
+            faceMap.set(rel, faceValue)
           }
-          allRelations.add(rel);
+          allRelations.add(rel)
         }
       }
 
-      const result = Array.from(allRelations);
+      const result = Array.from(allRelations)
+      console.log('[availableRelations] All pyramid relations: ' + result.join(', '))
       console.log(
-        "[availableRelations] All pyramid relations: " + result.join(", "),
-      );
-      console.log(
-        "[availableRelations] Pyramid face map: " +
+        '[availableRelations] Pyramid face map: ' +
           Array.from(faceMap.entries())
-            .map(([r, v]) => r + "=" + v)
-            .join(", "),
-      );
-      return { availableRelations: result, pyramidFaceValues: faceMap };
+            .map(([r, v]) => r + '=' + v)
+            .join(', ')
+      )
+      return { availableRelations: result, pyramidFaceValues: faceMap }
     }
 
     // For non-pyramid pieces, use standard logic
-    const moverValue = getEffectiveValue(moverPiece);
+    const moverValue = getEffectiveValue(moverPiece)
     if (moverValue === undefined || moverValue === null)
-      return { availableRelations: [], pyramidFaceValues: null };
+      return { availableRelations: [], pyramidFaceValues: null }
 
     return {
       availableRelations: findAvailableRelations(moverValue, targetValue),
       pyramidFaceValues: null,
-    };
-  })();
+    }
+  })()
 
   // Calculate if hovered square shows error (for hover preview)
   const showHoverError = (() => {
     console.log(
-      "[HOVER_ERROR] Calculating showHoverError - hoveredSquare: " +
+      '[HOVER_ERROR] Calculating showHoverError - hoveredSquare: ' +
         hoveredSquare +
-        ", selectedSquare: " +
+        ', selectedSquare: ' +
         selectedSquare +
-        ", captureDialogOpen: " +
-        captureDialogOpen,
-    );
+        ', captureDialogOpen: ' +
+        captureDialogOpen
+    )
 
     if (!hoveredSquare || !selectedSquare || captureDialogOpen) {
-      console.log("[HOVER_ERROR] Early return - missing data or dialog open");
-      return false;
+      console.log('[HOVER_ERROR] Early return - missing data or dialog open')
+      return false
     }
 
     const moverPiece = Object.values(state.pieces).find(
-      (p) => p.square === selectedSquare && !p.captured,
-    );
+      (p) => p.square === selectedSquare && !p.captured
+    )
     const targetPiece = Object.values(state.pieces).find(
-      (p) => p.square === hoveredSquare && !p.captured,
-    );
+      (p) => p.square === hoveredSquare && !p.captured
+    )
 
     console.log(
-      "[HOVER_ERROR] Found pieces - mover: " +
-        !!moverPiece +
-        ", target: " +
-        !!targetPiece,
-    );
+      '[HOVER_ERROR] Found pieces - mover: ' + !!moverPiece + ', target: ' + !!targetPiece
+    )
 
     if (!moverPiece || !targetPiece) {
-      console.log("[HOVER_ERROR] Missing mover or target piece");
-      return false;
+      console.log('[HOVER_ERROR] Missing mover or target piece')
+      return false
     }
 
     // First check if the move path is valid
-    const validation = validateMove(
-      moverPiece,
-      selectedSquare,
-      hoveredSquare,
-      state.pieces,
-    );
-    console.log("[HOVER_ERROR] Path validation - valid: " + validation.valid);
+    const validation = validateMove(moverPiece, selectedSquare, hoveredSquare, state.pieces)
+    console.log('[HOVER_ERROR] Path validation - valid: ' + validation.valid)
 
     if (!validation.valid) {
-      console.log("[HOVER_ERROR] Path not valid - skipping relation check");
-      return false;
+      console.log('[HOVER_ERROR] Path not valid - skipping relation check')
+      return false
     }
 
     // Get target value
-    const targetValue = getEffectiveValue(targetPiece);
+    const targetValue = getEffectiveValue(targetPiece)
     if (targetValue === undefined || targetValue === null) {
-      console.log("[HOVER_ERROR] Target has no value");
-      return false;
+      console.log('[HOVER_ERROR] Target has no value')
+      return false
     }
 
     // For pyramids, check if ANY of the 4 faces can form a valid relation
     if (
-      moverPiece.type === "P" &&
+      moverPiece.type === 'P' &&
       moverPiece.pyramidFaces &&
       moverPiece.pyramidFaces.length === 4
     ) {
       console.log(
-        "[HOVER_ERROR] Checking pyramid with faces: " +
-          moverPiece.pyramidFaces.join(", "),
-      );
+        '[HOVER_ERROR] Checking pyramid with faces: ' + moverPiece.pyramidFaces.join(', ')
+      )
 
       // Check each face to see if any has valid relations
       for (const faceValue of moverPiece.pyramidFaces) {
-        const relations = findAvailableRelations(faceValue, targetValue);
-        console.log(
-          "[HOVER_ERROR] Face " + faceValue + " relations: " + relations.length,
-        );
+        const relations = findAvailableRelations(faceValue, targetValue)
+        console.log('[HOVER_ERROR] Face ' + faceValue + ' relations: ' + relations.length)
         if (relations.length > 0) {
-          console.log(
-            "[HOVER_ERROR] Found valid relations with face " +
-              faceValue +
-              " - no error",
-          );
-          return false; // At least one face has valid relations, don't show error
+          console.log('[HOVER_ERROR] Found valid relations with face ' + faceValue + ' - no error')
+          return false // At least one face has valid relations, don't show error
         }
       }
 
-      console.log(
-        "[HOVER_ERROR] No pyramid face has valid relations - show error",
-      );
-      return true; // None of the faces have valid relations
+      console.log('[HOVER_ERROR] No pyramid face has valid relations - show error')
+      return true // None of the faces have valid relations
     }
 
     // For non-pyramid pieces, use the single value
-    const moverValue = getEffectiveValue(moverPiece);
-    console.log("[HOVER_ERROR] Non-pyramid value: " + moverValue);
+    const moverValue = getEffectiveValue(moverPiece)
+    console.log('[HOVER_ERROR] Non-pyramid value: ' + moverValue)
 
     if (moverValue === undefined || moverValue === null) {
-      console.log("[HOVER_ERROR] Mover has no value");
-      return false;
+      console.log('[HOVER_ERROR] Mover has no value')
+      return false
     }
 
-    const relations = findAvailableRelations(moverValue, targetValue);
-    console.log("[HOVER_ERROR] Relations found: " + relations.length);
-    const shouldShow = relations.length === 0;
-    console.log("[HOVER_ERROR] Final result - showHoverError: " + shouldShow);
-    return shouldShow;
-  })();
+    const relations = findAvailableRelations(moverValue, targetValue)
+    console.log('[HOVER_ERROR] Relations found: ' + relations.length)
+    const shouldShow = relations.length === 0
+    console.log('[HOVER_ERROR] Final result - showHoverError: ' + shouldShow)
+    return shouldShow
+  })()
 
   // Get position for hover error tooltip
   const hoverErrorPosition = (() => {
-    if (!showHoverError || !hoveredSquare) return null;
+    if (!showHoverError || !hoveredSquare) return null
 
-    const file = hoveredSquare.charCodeAt(0) - 65; // A=0
-    const rank = Number.parseInt(hoveredSquare.slice(1), 10); // 1-8
-    const row = 8 - rank; // Invert for display
+    const file = hoveredSquare.charCodeAt(0) - 65 // A=0
+    const rank = Number.parseInt(hoveredSquare.slice(1), 10) // 1-8
+    const row = 8 - rank // Invert for display
 
-    const x = labelMargin + padding + file * (cellSize + gap) + cellSize / 2;
-    const y = padding + row * (cellSize + gap) + cellSize / 2;
+    const x = labelMargin + padding + file * (cellSize + gap) + cellSize / 2
+    const y = padding + row * (cellSize + gap) + cellSize / 2
 
-    return { x, y };
-  })();
+    return { x, y }
+  })()
 
   // Detect portrait vs landscape and calculate explicit dimensions for rotation
-  const boardAspectRatio = boardWidth / boardHeight; // ~2:1 for 16x8 board
-  const [containerAspectRatio, setContainerAspectRatio] = useState(1);
+  const boardAspectRatio = boardWidth / boardHeight // ~2:1 for 16x8 board
+  const [containerAspectRatio, setContainerAspectRatio] = useState(1)
   const [svgDimensions, setSvgDimensions] = useState<{
-    width: string;
-    height: string;
-  } | null>(null);
-  const [updateCounter, setUpdateCounter] = useState(0);
+    width: string
+    height: string
+  } | null>(null)
+  const [updateCounter, setUpdateCounter] = useState(0)
 
   useEffect(() => {
-    const container = document.querySelector(
-      '[data-component="board-container"]',
-    );
+    const container = document.querySelector('[data-component="board-container"]')
     if (!container) {
-      return;
+      return
     }
 
     // Watch the parent element - that's what gets resized by the panel
-    const parentContainer = container.parentElement;
+    const parentContainer = container.parentElement
     if (!parentContainer) {
-      return;
+      return
     }
 
     const updateDimensions = () => {
       // Measure the PARENT container, not the wrapper itself
-      const rect = parentContainer.getBoundingClientRect();
-      const containerAspect = rect.width / rect.height;
-      const shouldRotateBoard = containerAspect < 1 && boardAspectRatio > 1;
+      const rect = parentContainer.getBoundingClientRect()
+      const containerAspect = rect.width / rect.height
+      const shouldRotateBoard = containerAspect < 1 && boardAspectRatio > 1
 
       if (shouldRotateBoard) {
         // When rotating -90°, the board's dimensions swap visually:
@@ -771,74 +681,74 @@ export function BoardDisplay() {
         // In portrait mode (tall container), prioritize filling HEIGHT.
 
         // Start by filling container height
-        let visualHeight = rect.height;
-        let visualWidth = visualHeight / boardAspectRatio;
+        let visualHeight = rect.height
+        let visualWidth = visualHeight / boardAspectRatio
 
         // If visual width exceeds container width, scale down PROPORTIONALLY
         // (don't switch to filling width - keep height priority)
         if (visualWidth > rect.width) {
-          const scale = rect.width / visualWidth;
-          visualWidth = rect.width;
-          visualHeight = visualHeight * scale;
+          const scale = rect.width / visualWidth
+          visualWidth = rect.width
+          visualHeight = visualHeight * scale
         }
 
         // Convert visual dimensions back to pre-rotation SVG dimensions
-        const preRotationWidth = visualHeight;
-        const preRotationHeight = visualWidth;
+        const preRotationWidth = visualHeight
+        const preRotationHeight = visualWidth
 
         setSvgDimensions({
           width: `${preRotationWidth}px`,
           height: `${preRotationHeight}px`,
-        });
+        })
       } else {
         // Normal landscape: use percentage sizing
-        setSvgDimensions(null);
+        setSvgDimensions(null)
       }
 
-      setContainerAspectRatio(containerAspect);
-    };
+      setContainerAspectRatio(containerAspect)
+    }
 
     // Initial check - use requestAnimationFrame to ensure layout is painted
     const initialUpdate = () => {
       requestAnimationFrame(() => {
-        updateDimensions();
-      });
-    };
-    initialUpdate();
+        updateDimensions()
+      })
+    }
+    initialUpdate()
 
     // Use ResizeObserver to detect panel resizing (window resize doesn't catch panel changes!)
     const resizeObserver = new ResizeObserver((entries) => {
       // Use requestAnimationFrame to ensure we measure after layout
       requestAnimationFrame(() => {
-        updateDimensions();
-      });
-    });
+        updateDimensions()
+      })
+    })
     // Watch the parent container - that's what gets resized by the panel
-    resizeObserver.observe(parentContainer);
+    resizeObserver.observe(parentContainer)
 
     // Also listen to window resize for when the whole window changes
-    window.addEventListener("resize", updateDimensions);
+    window.addEventListener('resize', updateDimensions)
 
     return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("resize", updateDimensions);
-    };
-  }, [boardAspectRatio]);
+      resizeObserver.disconnect()
+      window.removeEventListener('resize', updateDimensions)
+    }
+  }, [boardAspectRatio])
 
   // Rotate board if container is portrait and board is landscape
-  const shouldRotate = containerAspectRatio < 1 && boardAspectRatio > 1;
+  const shouldRotate = containerAspectRatio < 1 && boardAspectRatio > 1
 
   return (
     <div
       data-component="board-container"
       className={css({
-        width: "100%",
-        height: "100%",
-        position: "relative",
+        width: '100%',
+        height: '100%',
+        position: 'relative',
         zIndex: Z_INDEX.GAME.OVERLAY,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
       })}
     >
       {/* Unified SVG Board */}
@@ -846,48 +756,39 @@ export function BoardDisplay() {
         viewBox={`0 0 ${boardWidth} ${boardHeight}`}
         style={{
           // Use explicit dimensions when rotated, percentage sizing when normal
-          width: svgDimensions ? svgDimensions.width : "100%",
-          height: svgDimensions ? svgDimensions.height : "auto",
+          width: svgDimensions ? svgDimensions.width : '100%',
+          height: svgDimensions ? svgDimensions.height : 'auto',
           // Don't constrain with max dimensions when rotating - we've already calculated exact size
-          maxWidth: svgDimensions ? "none" : "100%",
-          maxHeight: svgDimensions ? "none" : "100%",
+          maxWidth: svgDimensions ? 'none' : '100%',
+          maxHeight: svgDimensions ? 'none' : '100%',
           // Don't use aspect-ratio when rotating - it overrides explicit dimensions
-          aspectRatio: svgDimensions
-            ? "auto"
-            : `${boardWidth} / ${boardHeight}`,
-          cursor: isMyTurn ? "pointer" : "default",
-          overflow: "visible",
-          transform: shouldRotate ? "rotate(-90deg)" : "none",
-          transformOrigin: "center",
-          transition: "transform 0.3s ease",
+          aspectRatio: svgDimensions ? 'auto' : `${boardWidth} / ${boardHeight}`,
+          cursor: isMyTurn ? 'pointer' : 'default',
+          overflow: 'visible',
+          transform: shouldRotate ? 'rotate(-90deg)' : 'none',
+          transformOrigin: 'center',
+          transition: 'transform 0.3s ease',
         }}
         onClick={handleSvgClick}
         onMouseMove={handleSvgMouseMove}
         onMouseLeave={handleSvgMouseLeave}
       >
         {/* Board background */}
-        <rect
-          x={0}
-          y={0}
-          width={boardWidth}
-          height={boardHeight}
-          fill="#d1d5db"
-          rx={8}
-        />
+        <rect x={0} y={0} width={boardWidth} height={boardHeight} fill="#d1d5db" rx={8} />
 
         {/* Board squares */}
         {Array.from({ length: rows }, (_, row) => {
-          const actualRank = 8 - row;
+          const actualRank = 8 - row
           return Array.from({ length: cols }, (_, col) => {
-            const square = `${String.fromCharCode(65 + col)}${actualRank}`;
+            const square = `${String.fromCharCode(65 + col)}${actualRank}`
             const piece = Object.values(state.pieces).find(
-              (p) => p.square === square && !p.captured,
-            );
-            const isLight = (col + actualRank) % 2 === 0;
-            const isSelected = selectedSquare === square;
+              (p) => p.square === square && !p.captured
+            )
+            const isLight = (col + actualRank) % 2 === 0
+            const isSelected = selectedSquare === square
 
-            const x = labelMargin + padding + col * (cellSize + gap);
-            const y = padding + row * (cellSize + gap);
+            const x = labelMargin + padding + col * (cellSize + gap)
+            const y = padding + row * (cellSize + gap)
 
             return (
               <rect
@@ -896,20 +797,19 @@ export function BoardDisplay() {
                 y={y}
                 width={cellSize}
                 height={cellSize}
-                fill={isSelected ? "#fde047" : isLight ? "#f3f4f6" : "#e5e7eb"}
-                stroke={isSelected ? "#9333ea" : "none"}
+                fill={isSelected ? '#fde047' : isLight ? '#f3f4f6' : '#e5e7eb'}
+                stroke={isSelected ? '#9333ea' : 'none'}
                 strokeWidth={isSelected ? 2 : 0}
               />
-            );
-          });
+            )
+          })
         })}
 
         {/* Column labels (A-P) at the bottom */}
         {Array.from({ length: cols }, (_, col) => {
-          const colLabel = String.fromCharCode(65 + col);
-          const x =
-            labelMargin + padding + col * (cellSize + gap) + cellSize / 2;
-          const y = boardHeight - 10;
+          const colLabel = String.fromCharCode(65 + col)
+          const x = labelMargin + padding + col * (cellSize + gap) + cellSize / 2
+          const y = boardHeight - 10
 
           return (
             <g key={`col-${colLabel}`} transform={`translate(${x}, ${y})`}>
@@ -922,19 +822,19 @@ export function BoardDisplay() {
                 fontFamily="sans-serif"
                 textAnchor="middle"
                 dominantBaseline="middle"
-                transform={shouldRotate ? "rotate(90)" : undefined}
+                transform={shouldRotate ? 'rotate(90)' : undefined}
               >
                 {colLabel}
               </text>
             </g>
-          );
+          )
         })}
 
         {/* Row labels (1-8) on the left */}
         {Array.from({ length: rows }, (_, row) => {
-          const actualRank = 8 - row;
-          const x = 15;
-          const y = padding + row * (cellSize + gap) + cellSize / 2;
+          const actualRank = 8 - row
+          const x = 15
+          const y = padding + row * (cellSize + gap) + cellSize / 2
 
           return (
             <g key={`row-${actualRank}`} transform={`translate(${x}, ${y})`}>
@@ -947,24 +847,21 @@ export function BoardDisplay() {
                 fontFamily="sans-serif"
                 textAnchor="middle"
                 dominantBaseline="middle"
-                transform={shouldRotate ? "rotate(90)" : undefined}
+                transform={shouldRotate ? 'rotate(90)' : undefined}
               >
                 {actualRank}
               </text>
             </g>
-          );
+          )
         })}
 
         {/* Pieces */}
         {activePieces.map((piece) => {
           // Show low opacity for pieces currently being shown as helper options or in the number bond
-          const isBorrowedHelper = helpersWithPositions.some(
-            (h) => h.piece.id === piece.id,
-          );
-          const isBorrowedMover =
-            selectedHelper && selectedHelper.moverPiece.id === piece.id;
-          const isInNumberBond = isBorrowedHelper || isBorrowedMover;
-          const isSelected = piece.square === selectedSquare;
+          const isBorrowedHelper = helpersWithPositions.some((h) => h.piece.id === piece.id)
+          const isBorrowedMover = selectedHelper && selectedHelper.moverPiece.id === piece.id
+          const isInNumberBond = isBorrowedHelper || isBorrowedMover
+          const isSelected = piece.square === selectedSquare
           return (
             <SvgPiece
               key={piece.id}
@@ -977,34 +874,31 @@ export function BoardDisplay() {
               selected={isSelected}
               shouldRotate={shouldRotate}
             />
-          );
+          )
         })}
 
         {/* Floating capture relation options, helper selection, or number bond */}
         {captureDialogOpen &&
           targetPos &&
           (() => {
-            console.log("[Render] captureDialogOpen:", captureDialogOpen);
-            console.log("[Render] targetPos:", targetPos);
-            console.log("[Render] selectedRelation:", selectedRelation);
-            console.log("[Render] selectedHelper:", selectedHelper);
-            console.log(
-              "[Render] helpersWithPositions.length:",
-              helpersWithPositions.length,
-            );
-            console.log("[Render] closingDialog:", closingDialog);
+            console.log('[Render] captureDialogOpen:', captureDialogOpen)
+            console.log('[Render] targetPos:', targetPos)
+            console.log('[Render] selectedRelation:', selectedRelation)
+            console.log('[Render] selectedHelper:', selectedHelper)
+            console.log('[Render] helpersWithPositions.length:', helpersWithPositions.length)
+            console.log('[Render] closingDialog:', closingDialog)
 
             // Extract mover and target pieces
             const moverPiece = Object.values(state.pieces).find(
-              (p) => p.id === captureTarget?.pieceId,
-            );
+              (p) => p.id === captureTarget?.pieceId
+            )
             const targetPiece = Object.values(state.pieces).find(
-              (p) => p.square === captureTarget?.to && !p.captured,
-            );
+              (p) => p.square === captureTarget?.to && !p.captured
+            )
 
             if (!moverPiece || !targetPiece) {
-              console.log("[Render] Missing mover or target piece");
-              return null;
+              console.log('[Render] Missing mover or target piece')
+              return null
             }
 
             // Create context value for capture components
@@ -1028,7 +922,7 @@ export function BoardDisplay() {
               selectRelation: handleCaptureWithRelation,
               selectHelper: handleHelperSelection,
               dismissDialog,
-            };
+            }
 
             return (
               <CaptureProvider value={captureContextValue}>
@@ -1037,44 +931,38 @@ export function BoardDisplay() {
                   <NumberBondVisualization
                     onConfirm={handleNumberBondConfirm}
                     moverStartPos={(() => {
-                      const moverFile =
-                        selectedHelper.moverPiece.square.charCodeAt(0) - 65;
+                      const moverFile = selectedHelper.moverPiece.square.charCodeAt(0) - 65
                       const moverRank = Number.parseInt(
                         selectedHelper.moverPiece.square.slice(1),
-                        10,
-                      );
-                      const moverRow = 8 - moverRank;
+                        10
+                      )
+                      const moverRow = 8 - moverRank
                       return {
-                        x:
-                          padding + moverFile * (cellSize + gap) + cellSize / 2,
+                        x: padding + moverFile * (cellSize + gap) + cellSize / 2,
                         y: padding + moverRow * (cellSize + gap) + cellSize / 2,
-                      };
+                      }
                     })()}
                     helperStartPos={(() => {
                       const helperIndex = helpersWithPositions.findIndex(
-                        (h) => h.piece.id === selectedHelper.helperPiece.id,
-                      );
-                      const maxRadius = cellSize * 1.2;
+                        (h) => h.piece.id === selectedHelper.helperPiece.id
+                      )
+                      const maxRadius = cellSize * 1.2
                       const angleStep =
-                        helpersWithPositions.length > 1
-                          ? 360 / helpersWithPositions.length
-                          : 0;
-                      const angle = helperIndex * angleStep;
-                      const rad = (angle * Math.PI) / 180;
+                        helpersWithPositions.length > 1 ? 360 / helpersWithPositions.length : 0
+                      const angle = helperIndex * angleStep
+                      const rad = (angle * Math.PI) / 180
                       return {
                         x: targetPos.x + Math.cos(rad) * maxRadius,
                         y: targetPos.y + Math.sin(rad) * maxRadius,
-                      };
+                      }
                     })()}
                   />
                 )}
 
                 {/* Phase 2: Show helper selection */}
-                {selectedRelation &&
-                  !selectedHelper &&
-                  helpersWithPositions.length > 0 && (
-                    <HelperSelectionOptions helpers={helpersWithPositions} />
-                  )}
+                {selectedRelation && !selectedHelper && helpersWithPositions.length > 0 && (
+                  <HelperSelectionOptions helpers={helpersWithPositions} />
+                )}
 
                 {/* Phase 1: Show relation options OR error */}
                 {!selectedRelation && (
@@ -1082,52 +970,44 @@ export function BoardDisplay() {
                     {availableRelations.length === 0 ? (
                       <CaptureErrorDialog />
                     ) : (
-                      <CaptureRelationOptions
-                        availableRelations={availableRelations}
-                      />
+                      <CaptureRelationOptions availableRelations={availableRelations} />
                     )}
                   </>
                 )}
               </CaptureProvider>
-            );
+            )
           })()}
 
         {/* Hover error tooltip - shows when hovering over invalid capture target */}
         {showHoverError && hoverErrorPosition && (
-          <g
-            transform={`translate(${hoverErrorPosition.x}, ${hoverErrorPosition.y})`}
-          >
+          <g transform={`translate(${hoverErrorPosition.x}, ${hoverErrorPosition.y})`}>
             <foreignObject
               x={-cellSize * 1.8}
               y={-cellSize * 0.5}
               width={cellSize * 3.6}
               height={cellSize}
-              style={{ overflow: "visible", pointerEvents: "none" }}
+              style={{ overflow: 'visible', pointerEvents: 'none' }}
             >
               <div
                 style={{
-                  background:
-                    "linear-gradient(135deg, #1e293b 0%, #0f172a 100%)",
-                  color: "#f1f5f9",
+                  background: 'linear-gradient(135deg, #1e293b 0%, #0f172a 100%)',
+                  color: '#f1f5f9',
                   padding: `${cellSize * 0.12}px ${cellSize * 0.18}px`,
                   borderRadius: `${cellSize * 0.12}px`,
                   fontSize: `${cellSize * 0.16}px`,
                   fontWeight: 500,
-                  textAlign: "center",
-                  boxShadow:
-                    "0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1)",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
+                  textAlign: 'center',
+                  boxShadow: '0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
                   gap: `${cellSize * 0.1}px`,
-                  backdropFilter: "blur(8px)",
-                  letterSpacing: "0.01em",
-                  pointerEvents: "none",
+                  backdropFilter: 'blur(8px)',
+                  letterSpacing: '0.01em',
+                  pointerEvents: 'none',
                 }}
               >
-                <span style={{ fontSize: `${cellSize * 0.2}px`, opacity: 0.7 }}>
-                  ⚠
-                </span>
+                <span style={{ fontSize: `${cellSize * 0.2}px`, opacity: 0.7 }}>⚠</span>
                 <span>No valid relation</span>
               </div>
             </foreignObject>
@@ -1135,5 +1015,5 @@ export function BoardDisplay() {
         )}
       </svg>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/board/SvgPiece.tsx b/apps/web/src/arcade-games/rithmomachia/components/board/SvgPiece.tsx
index 2b15c84b..38e5aad2 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/board/SvgPiece.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/board/SvgPiece.tsx
@@ -1,18 +1,18 @@
-"use client";
+'use client'
 
-import { animated, useSpring } from "@react-spring/web";
-import type { Piece } from "../../types";
-import { PieceRenderer } from "../PieceRenderer";
+import { animated, useSpring } from '@react-spring/web'
+import type { Piece } from '../../types'
+import { PieceRenderer } from '../PieceRenderer'
 
 export interface SvgPieceProps {
-  piece: Piece;
-  cellSize: number;
-  padding: number;
-  labelMargin?: number;
-  opacity?: number;
-  useNativeAbacusNumbers?: boolean;
-  selected?: boolean;
-  shouldRotate?: boolean;
+  piece: Piece
+  cellSize: number
+  padding: number
+  labelMargin?: number
+  opacity?: number
+  useNativeAbacusNumbers?: boolean
+  selected?: boolean
+  shouldRotate?: boolean
 }
 
 export function SvgPiece({
@@ -25,52 +25,46 @@ export function SvgPiece({
   selected = false,
   shouldRotate = false,
 }: SvgPieceProps) {
-  const file = piece.square.charCodeAt(0) - 65; // A=0
-  const rank = Number.parseInt(piece.square.slice(1), 10); // 1-8
-  const row = 8 - rank; // Invert for display
+  const file = piece.square.charCodeAt(0) - 65 // A=0
+  const rank = Number.parseInt(piece.square.slice(1), 10) // 1-8
+  const row = 8 - rank // Invert for display
 
-  const x = labelMargin + padding + file * cellSize;
-  const y = padding + row * cellSize;
+  const x = labelMargin + padding + file * cellSize
+  const y = padding + row * cellSize
 
   const spring = useSpring({
     x,
     y,
     config: { tension: 280, friction: 60 },
-  });
+  })
 
-  const pieceSize = cellSize * 0.85;
+  const pieceSize = cellSize * 0.85
 
   return (
-    <animated.g
-      transform={spring.x.to((xVal) => `translate(${xVal}, ${spring.y.get()})`)}
-    >
+    <animated.g transform={spring.x.to((xVal) => `translate(${xVal}, ${spring.y.get()})`)}>
       <foreignObject x={0} y={0} width={cellSize} height={cellSize}>
         <div
           style={{
-            width: "100%",
-            height: "100%",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
             opacity,
           }}
         >
           <PieceRenderer
             type={piece.type}
             color={piece.color}
-            value={
-              piece.type === "P"
-                ? piece.pyramidFaces?.[0] || 0
-                : piece.value || 0
-            }
+            value={piece.type === 'P' ? piece.pyramidFaces?.[0] || 0 : piece.value || 0}
             size={pieceSize}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
             selected={selected}
-            pyramidFaces={piece.type === "P" ? piece.pyramidFaces : undefined}
+            pyramidFaces={piece.type === 'P' ? piece.pyramidFaces : undefined}
             shouldRotate={shouldRotate}
           />
         </div>
       </foreignObject>
     </animated.g>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/capture/AnimatedHelperPiece.tsx b/apps/web/src/arcade-games/rithmomachia/components/capture/AnimatedHelperPiece.tsx
index 56291157..8900f509 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/capture/AnimatedHelperPiece.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/capture/AnimatedHelperPiece.tsx
@@ -1,20 +1,20 @@
-"use client";
+'use client'
 
-import { animated, to, useSpring } from "@react-spring/web";
-import type { Piece } from "../../types";
-import { getEffectiveValue } from "../../utils/pieceSetup";
-import { PieceRenderer } from "../PieceRenderer";
+import { animated, to, useSpring } from '@react-spring/web'
+import type { Piece } from '../../types'
+import { getEffectiveValue } from '../../utils/pieceSetup'
+import { PieceRenderer } from '../PieceRenderer'
 
 interface AnimatedHelperPieceProps {
-  piece: Piece;
-  boardPos: { x: number; y: number };
-  ringX: number;
-  ringY: number;
-  cellSize: number;
-  onSelectHelper: (pieceId: string) => void;
-  closing: boolean;
-  onHover?: (pieceId: string | null) => void;
-  useNativeAbacusNumbers?: boolean;
+  piece: Piece
+  boardPos: { x: number; y: number }
+  ringX: number
+  ringY: number
+  cellSize: number
+  onSelectHelper: (pieceId: string) => void
+  closing: boolean
+  onHover?: (pieceId: string | null) => void
+  useNativeAbacusNumbers?: boolean
 }
 
 export function AnimatedHelperPiece({
@@ -29,8 +29,8 @@ export function AnimatedHelperPiece({
   useNativeAbacusNumbers = false,
 }: AnimatedHelperPieceProps) {
   console.log(
-    `[AnimatedHelperPiece] Rendering piece ${piece.id}: boardPos=(${boardPos.x}, ${boardPos.y}), ringPos=(${ringX}, ${ringY}), closing=${closing}`,
-  );
+    `[AnimatedHelperPiece] Rendering piece ${piece.id}: boardPos=(${boardPos.x}, ${boardPos.y}), ringPos=(${ringX}, ${ringY}), closing=${closing}`
+  )
 
   // Animate from board position to ring position
   const spring = useSpring({
@@ -39,25 +39,25 @@ export function AnimatedHelperPiece({
     y: closing ? boardPos.y : ringY,
     opacity: closing ? 0 : 1,
     config: { tension: 280, friction: 20 },
-  });
+  })
 
   console.log(
-    `[AnimatedHelperPiece] Spring config for ${piece.id}: from=(${boardPos.x}, ${boardPos.y}), to=(${closing ? boardPos.x : ringX}, ${closing ? boardPos.y : ringY})`,
-  );
+    `[AnimatedHelperPiece] Spring config for ${piece.id}: from=(${boardPos.x}, ${boardPos.y}), to=(${closing ? boardPos.x : ringX}, ${closing ? boardPos.y : ringY})`
+  )
 
-  const value = getEffectiveValue(piece);
-  if (value === undefined || value === null) return null;
+  const value = getEffectiveValue(piece)
+  if (value === undefined || value === null) return null
 
   return (
     <animated.g
       style={{
         opacity: spring.opacity,
-        cursor: "pointer",
+        cursor: 'pointer',
       }}
       transform={to([spring.x, spring.y], (x, y) => `translate(${x}, ${y})`)}
       onClick={(e) => {
-        e.stopPropagation();
-        onSelectHelper(piece.id);
+        e.stopPropagation()
+        onSelectHelper(piece.id)
       }}
       onMouseEnter={() => onHover?.(piece.id)}
       onMouseLeave={() => onHover?.(null)}
@@ -81,5 +81,5 @@ export function AnimatedHelperPiece({
         />
       </g>
     </animated.g>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/capture/CaptureErrorDialog.tsx b/apps/web/src/arcade-games/rithmomachia/components/capture/CaptureErrorDialog.tsx
index 25a4493e..f49b992a 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/capture/CaptureErrorDialog.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/capture/CaptureErrorDialog.tsx
@@ -1,54 +1,50 @@
-import { animated, to, useSpring } from "@react-spring/web";
-import { useCaptureContext } from "../../contexts/CaptureContext";
+import { animated, to, useSpring } from '@react-spring/web'
+import { useCaptureContext } from '../../contexts/CaptureContext'
 
 /**
  * Error notification when no capture is possible
  */
 export function CaptureErrorDialog() {
-  const { layout, closing } = useCaptureContext();
-  const { targetPos, cellSize } = layout;
+  const { layout, closing } = useCaptureContext()
+  const { targetPos, cellSize } = layout
   const entranceSpring = useSpring({
     from: { opacity: 0, y: -20 },
     opacity: closing ? 0 : 1,
     y: closing ? -20 : 0,
     config: { tension: 300, friction: 25 },
-  });
+  })
 
   return (
     <animated.g
       style={{
         opacity: entranceSpring.opacity,
       }}
-      transform={to(
-        [entranceSpring.y],
-        (y) => `translate(${targetPos.x}, ${targetPos.y + y})`,
-      )}
+      transform={to([entranceSpring.y], (y) => `translate(${targetPos.x}, ${targetPos.y + y})`)}
     >
       <foreignObject
         x={-cellSize * 1.8}
         y={-cellSize * 0.5}
         width={cellSize * 3.6}
         height={cellSize}
-        style={{ overflow: "visible" }}
+        style={{ overflow: 'visible' }}
       >
         <div
           style={{
-            background: "linear-gradient(135deg, #1e293b 0%, #0f172a 100%)",
-            color: "#f1f5f9",
+            background: 'linear-gradient(135deg, #1e293b 0%, #0f172a 100%)',
+            color: '#f1f5f9',
             padding: `${cellSize * 0.12}px ${cellSize * 0.18}px`,
             borderRadius: `${cellSize * 0.12}px`,
             fontSize: `${cellSize * 0.16}px`,
             fontWeight: 500,
-            textAlign: "center",
-            boxShadow:
-              "0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
+            textAlign: 'center',
+            boxShadow: '0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
             gap: `${cellSize * 0.1}px`,
-            backdropFilter: "blur(8px)",
-            letterSpacing: "0.01em",
-            pointerEvents: "none",
+            backdropFilter: 'blur(8px)',
+            letterSpacing: '0.01em',
+            pointerEvents: 'none',
           }}
         >
           <span
@@ -63,5 +59,5 @@ export function CaptureErrorDialog() {
         </div>
       </foreignObject>
     </animated.g>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/capture/CaptureRelationOptions.tsx b/apps/web/src/arcade-games/rithmomachia/components/capture/CaptureRelationOptions.tsx
index 3265686e..abbfe6bb 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/capture/CaptureRelationOptions.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/capture/CaptureRelationOptions.tsx
@@ -1,27 +1,22 @@
-"use client";
+'use client'
 
-import * as Tooltip from "@radix-ui/react-tooltip";
-import { animated, useSpring } from "@react-spring/web";
-import { useEffect, useState } from "react";
-import {
-  getRelationColor,
-  getRelationOperator,
-} from "../../constants/captureRelations";
-import type { RelationKind } from "../../types";
-import { useCaptureContext } from "../../contexts/CaptureContext";
-import { getEffectiveValue } from "../../utils/pieceSetup";
-import { getSquarePosition } from "../../utils/boardCoordinates";
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { animated, useSpring } from '@react-spring/web'
+import { useEffect, useState } from 'react'
+import { getRelationColor, getRelationOperator } from '../../constants/captureRelations'
+import type { RelationKind } from '../../types'
+import { useCaptureContext } from '../../contexts/CaptureContext'
+import { getEffectiveValue } from '../../utils/pieceSetup'
+import { getSquarePosition } from '../../utils/boardCoordinates'
 
 interface CaptureRelationOptionsProps {
-  availableRelations: RelationKind[];
+  availableRelations: RelationKind[]
 }
 
 /**
  * Animated floating capture relation options with number bond preview on hover
  */
-export function CaptureRelationOptions({
-  availableRelations,
-}: CaptureRelationOptionsProps) {
+export function CaptureRelationOptions({ availableRelations }: CaptureRelationOptionsProps) {
   const {
     layout,
     pieces,
@@ -30,31 +25,29 @@ export function CaptureRelationOptions({
     pyramidFaceValues,
     findValidHelpers,
     selectRelation,
-  } = useCaptureContext();
-  const { targetPos, cellSize, gap, padding } = layout;
-  const { mover: moverPiece, target: targetPiece } = pieces;
-  const [hoveredRelation, setHoveredRelation] = useState<RelationKind | null>(
-    null,
-  );
-  const [currentHelperIndex, setCurrentHelperIndex] = useState(0);
+  } = useCaptureContext()
+  const { targetPos, cellSize, gap, padding } = layout
+  const { mover: moverPiece, target: targetPiece } = pieces
+  const [hoveredRelation, setHoveredRelation] = useState<RelationKind | null>(null)
+  const [currentHelperIndex, setCurrentHelperIndex] = useState(0)
 
   // Get mover value - either from pyramidFaceValues map (for pyramids) or from piece directly
   const getMoverValue = (relation: RelationKind): number | null => {
     if (pyramidFaceValues && pyramidFaceValues.has(relation)) {
-      return pyramidFaceValues.get(relation) || null;
+      return pyramidFaceValues.get(relation) || null
     }
-    return getEffectiveValue(moverPiece);
-  };
+    return getEffectiveValue(moverPiece)
+  }
 
   // Cycle through valid helpers every 1.5 seconds when hovering
   useEffect(() => {
     if (!hoveredRelation) {
-      setCurrentHelperIndex(0);
-      return;
+      setCurrentHelperIndex(0)
+      return
     }
 
-    const moverValue = getMoverValue(hoveredRelation);
-    const targetValue = getEffectiveValue(targetPiece);
+    const moverValue = getMoverValue(hoveredRelation)
+    const targetValue = getEffectiveValue(targetPiece)
 
     if (
       moverValue === undefined ||
@@ -62,46 +55,42 @@ export function CaptureRelationOptions({
       targetValue === undefined ||
       targetValue === null
     ) {
-      return;
+      return
     }
 
-    const validHelpers = findValidHelpers(
-      moverValue,
-      targetValue,
-      hoveredRelation,
-    );
+    const validHelpers = findValidHelpers(moverValue, targetValue, hoveredRelation)
     if (validHelpers.length <= 1) {
       // No need to cycle if only one or zero helpers
-      setCurrentHelperIndex(0);
-      return;
+      setCurrentHelperIndex(0)
+      return
     }
 
     // Cycle through helpers every 1.5 seconds
     const interval = setInterval(() => {
-      setCurrentHelperIndex((prev) => (prev + 1) % validHelpers.length);
-    }, 1500);
+      setCurrentHelperIndex((prev) => (prev + 1) % validHelpers.length)
+    }, 1500)
 
-    return () => clearInterval(interval);
-  }, [hoveredRelation, pyramidFaceValues, targetPiece, findValidHelpers]);
+    return () => clearInterval(interval)
+  }, [hoveredRelation, pyramidFaceValues, targetPiece, findValidHelpers])
 
   // Generate tooltip text with actual numbers for the currently displayed helper
   const getTooltipText = (relation: RelationKind): string => {
     if (relation !== hoveredRelation) {
       // Not hovered, use generic text
       const genericMap: Record<RelationKind, string> = {
-        EQUAL: "Equality: a = b",
-        MULTIPLE: "Multiple: b is multiple of a",
-        DIVISOR: "Divisor: a divides b",
-        SUM: "Sum: a + h = b (helper)",
-        DIFF: "Difference: |a - h| = b (helper)",
-        PRODUCT: "Product: a × h = b (helper)",
-        RATIO: "Ratio: a/h = b/h (helper)",
-      };
-      return genericMap[relation] || relation;
+        EQUAL: 'Equality: a = b',
+        MULTIPLE: 'Multiple: b is multiple of a',
+        DIVISOR: 'Divisor: a divides b',
+        SUM: 'Sum: a + h = b (helper)',
+        DIFF: 'Difference: |a - h| = b (helper)',
+        PRODUCT: 'Product: a × h = b (helper)',
+        RATIO: 'Ratio: a/h = b/h (helper)',
+      }
+      return genericMap[relation] || relation
     }
 
-    const moverValue = getMoverValue(relation);
-    const targetValue = getEffectiveValue(targetPiece);
+    const moverValue = getMoverValue(relation)
+    const targetValue = getEffectiveValue(targetPiece)
 
     if (
       moverValue === undefined ||
@@ -109,108 +98,107 @@ export function CaptureRelationOptions({
       targetValue === undefined ||
       targetValue === null
     ) {
-      return relation;
+      return relation
     }
 
     // Relations that don't need helpers - show equation with just mover and target
-    const helperRelations: RelationKind[] = ["SUM", "DIFF", "PRODUCT", "RATIO"];
-    const needsHelper = helperRelations.includes(relation);
+    const helperRelations: RelationKind[] = ['SUM', 'DIFF', 'PRODUCT', 'RATIO']
+    const needsHelper = helperRelations.includes(relation)
 
     if (!needsHelper) {
       // Generate equation with just mover and target values
       switch (relation) {
-        case "EQUAL":
-          return `${moverValue} = ${targetValue}`;
-        case "MULTIPLE":
-          return `${targetValue} is multiple of ${moverValue}`;
-        case "DIVISOR":
-          return `${moverValue} divides ${targetValue}`;
+        case 'EQUAL':
+          return `${moverValue} = ${targetValue}`
+        case 'MULTIPLE':
+          return `${targetValue} is multiple of ${moverValue}`
+        case 'DIVISOR':
+          return `${moverValue} divides ${targetValue}`
         default:
-          return relation;
+          return relation
       }
     }
 
     // Relations that need helpers
-    const validHelpers = findValidHelpers(moverValue, targetValue, relation);
+    const validHelpers = findValidHelpers(moverValue, targetValue, relation)
     if (validHelpers.length === 0) {
-      return `${relation}: No valid helpers`;
+      return `${relation}: No valid helpers`
     }
 
-    const currentHelper = validHelpers[currentHelperIndex];
-    const helperValue = getEffectiveValue(currentHelper);
+    const currentHelper = validHelpers[currentHelperIndex]
+    const helperValue = getEffectiveValue(currentHelper)
 
     if (helperValue === undefined || helperValue === null) {
-      return relation;
+      return relation
     }
 
     // Generate equation with actual numbers including helper
     switch (relation) {
-      case "SUM":
-        return `${moverValue} + ${helperValue} = ${targetValue}`;
-      case "DIFF":
-        return `|${moverValue} - ${helperValue}| = ${targetValue}`;
-      case "PRODUCT":
-        return `${moverValue} × ${helperValue} = ${targetValue}`;
-      case "RATIO":
-        return `${moverValue}/${helperValue} = ${targetValue}/${helperValue}`;
+      case 'SUM':
+        return `${moverValue} + ${helperValue} = ${targetValue}`
+      case 'DIFF':
+        return `|${moverValue} - ${helperValue}| = ${targetValue}`
+      case 'PRODUCT':
+        return `${moverValue} × ${helperValue} = ${targetValue}`
+      case 'RATIO':
+        return `${moverValue}/${helperValue} = ${targetValue}/${helperValue}`
       default:
-        return relation;
+        return relation
     }
-  };
+  }
 
   const allRelations = [
-    { relation: "EQUAL", label: "=", angle: 0, color: "#8b5cf6" },
+    { relation: 'EQUAL', label: '=', angle: 0, color: '#8b5cf6' },
     {
-      relation: "MULTIPLE",
-      label: "×n",
+      relation: 'MULTIPLE',
+      label: '×n',
       angle: 51.4,
-      color: "#a855f7",
+      color: '#a855f7',
     },
     {
-      relation: "DIVISOR",
-      label: "÷",
+      relation: 'DIVISOR',
+      label: '÷',
       angle: 102.8,
-      color: "#c084fc",
+      color: '#c084fc',
     },
     {
-      relation: "SUM",
-      label: "+",
+      relation: 'SUM',
+      label: '+',
       angle: 154.3,
-      color: "#3b82f6",
+      color: '#3b82f6',
     },
     {
-      relation: "DIFF",
-      label: "−",
+      relation: 'DIFF',
+      label: '−',
       angle: 205.7,
-      color: "#06b6d4",
+      color: '#06b6d4',
     },
     {
-      relation: "PRODUCT",
-      label: "×",
+      relation: 'PRODUCT',
+      label: '×',
       angle: 257.1,
-      color: "#10b981",
+      color: '#10b981',
     },
     {
-      relation: "RATIO",
-      label: "÷÷",
+      relation: 'RATIO',
+      label: '÷÷',
       angle: 308.6,
-      color: "#f59e0b",
+      color: '#f59e0b',
     },
-  ];
+  ]
 
   // Filter to only available relations and redistribute angles evenly
   const availableRelationDefs = allRelations.filter((r) =>
-    availableRelations.includes(r.relation as RelationKind),
-  );
-  const angleStep =
-    availableRelationDefs.length > 1 ? 360 / availableRelationDefs.length : 0;
+    availableRelations.includes(r.relation as RelationKind)
+  )
+  const angleStep = availableRelationDefs.length > 1 ? 360 / availableRelationDefs.length : 0
   const relations = availableRelationDefs.map((r, index) => ({
     ...r,
     angle: index * angleStep,
-  }));
+  }))
 
-  const maxRadius = cellSize * 1.2;
-  const buttonSize = 64;
+  const maxRadius = cellSize * 1.2
+  const buttonSize = 64
 
   // Animate all buttons simultaneously - reverse animation when closing
   const spring = useSpring({
@@ -218,20 +206,20 @@ export function CaptureRelationOptions({
     radius: closing ? 0 : maxRadius,
     opacity: closing ? 0 : 0.85,
     config: { tension: 280, friction: 20 },
-  });
+  })
 
   return (
     <Tooltip.Provider delayDuration={0} disableHoverableContent>
       <g>
         {relations.map(({ relation, label, angle, color }) => {
-          const rad = (angle * Math.PI) / 180;
+          const rad = (angle * Math.PI) / 180
 
           return (
             <animated.g
               key={relation}
               transform={spring.radius.to(
                 (r) =>
-                  `translate(${targetPos.x + Math.cos(rad) * r}, ${targetPos.y + Math.sin(rad) * r})`,
+                  `translate(${targetPos.x + Math.cos(rad) * r}, ${targetPos.y + Math.sin(rad) * r})`
               )}
             >
               <foreignObject
@@ -239,45 +227,42 @@ export function CaptureRelationOptions({
                 y={-buttonSize / 2}
                 width={buttonSize}
                 height={buttonSize}
-                style={{ overflow: "visible" }}
+                style={{ overflow: 'visible' }}
               >
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <animated.button
                       onClick={(e) => {
-                        e.stopPropagation();
-                        selectRelation(relation as RelationKind);
+                        e.stopPropagation()
+                        selectRelation(relation as RelationKind)
                       }}
                       style={{
                         width: buttonSize,
                         height: buttonSize,
-                        borderRadius: "50%",
-                        border: "3px solid rgba(255, 255, 255, 0.9)",
+                        borderRadius: '50%',
+                        border: '3px solid rgba(255, 255, 255, 0.9)',
                         backgroundColor: color,
-                        color: "white",
-                        fontSize: "28px",
-                        fontWeight: "bold",
-                        cursor: "pointer",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
+                        color: 'white',
+                        fontSize: '28px',
+                        fontWeight: 'bold',
+                        cursor: 'pointer',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
                         opacity: spring.opacity,
-                        transition:
-                          "transform 0.15s ease, box-shadow 0.15s ease",
-                        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
-                        textShadow: "0 2px 4px rgba(0, 0, 0, 0.5)",
+                        transition: 'transform 0.15s ease, box-shadow 0.15s ease',
+                        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+                        textShadow: '0 2px 4px rgba(0, 0, 0, 0.5)',
                       }}
                       onMouseEnter={(e) => {
-                        e.currentTarget.style.transform = "scale(1.15)";
-                        e.currentTarget.style.boxShadow =
-                          "0 6px 20px rgba(0, 0, 0, 0.4)";
-                        setHoveredRelation(relation as RelationKind);
+                        e.currentTarget.style.transform = 'scale(1.15)'
+                        e.currentTarget.style.boxShadow = '0 6px 20px rgba(0, 0, 0, 0.4)'
+                        setHoveredRelation(relation as RelationKind)
                       }}
                       onMouseLeave={(e) => {
-                        e.currentTarget.style.transform = "scale(1)";
-                        e.currentTarget.style.boxShadow =
-                          "0 4px 12px rgba(0, 0, 0, 0.3)";
-                        setHoveredRelation(null);
+                        e.currentTarget.style.transform = 'scale(1)'
+                        e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)'
+                        setHoveredRelation(null)
                       }}
                     >
                       {label}
@@ -287,22 +272,22 @@ export function CaptureRelationOptions({
                     <Tooltip.Content asChild sideOffset={8}>
                       <div
                         style={{
-                          background: "rgba(0,0,0,0.95)",
-                          color: "white",
-                          padding: "8px 16px",
-                          borderRadius: "8px",
-                          fontSize: "14px",
+                          background: 'rgba(0,0,0,0.95)',
+                          color: 'white',
+                          padding: '8px 16px',
+                          borderRadius: '8px',
+                          fontSize: '14px',
                           fontWeight: 600,
-                          maxWidth: "240px",
+                          maxWidth: '240px',
                           zIndex: 10000,
-                          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.4)",
-                          pointerEvents: "none",
+                          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)',
+                          pointerEvents: 'none',
                         }}
                       >
                         {getTooltipText(relation as RelationKind)}
                         <Tooltip.Arrow
                           style={{
-                            fill: "rgba(0,0,0,0.95)",
+                            fill: 'rgba(0,0,0,0.95)',
                           }}
                         />
                       </div>
@@ -311,14 +296,14 @@ export function CaptureRelationOptions({
                 </Tooltip.Root>
               </foreignObject>
             </animated.g>
-          );
+          )
         })}
 
         {/* Number bond preview when hovering over a relation - cycle through valid helpers */}
         {hoveredRelation &&
           (() => {
-            const moverValue = getMoverValue(hoveredRelation);
-            const targetValue = getEffectiveValue(targetPiece);
+            const moverValue = getMoverValue(hoveredRelation)
+            const targetValue = getEffectiveValue(targetPiece)
 
             if (
               moverValue === undefined ||
@@ -326,33 +311,26 @@ export function CaptureRelationOptions({
               targetValue === undefined ||
               targetValue === null
             ) {
-              return null;
+              return null
             }
 
-            const validHelpers = findValidHelpers(
-              moverValue,
-              targetValue,
-              hoveredRelation,
-            );
+            const validHelpers = findValidHelpers(moverValue, targetValue, hoveredRelation)
 
             if (validHelpers.length === 0) {
-              return null;
+              return null
             }
 
             // Show only the current helper
-            const currentHelper = validHelpers[currentHelperIndex];
+            const currentHelper = validHelpers[currentHelperIndex]
 
-            const color = getRelationColor(hoveredRelation);
-            const operator = getRelationOperator(hoveredRelation);
+            const color = getRelationColor(hoveredRelation)
+            const operator = getRelationOperator(hoveredRelation)
 
             // Calculate piece positions on board
-            const layout = { cellSize, gap, padding };
-            const moverPos = getSquarePosition(moverPiece.square, layout);
-            const targetBoardPos = getSquarePosition(
-              targetPiece.square,
-              layout,
-            );
-            const helperPos = getSquarePosition(currentHelper.square, layout);
+            const layout = { cellSize, gap, padding }
+            const moverPos = getSquarePosition(moverPiece.square, layout)
+            const targetBoardPos = getSquarePosition(targetPiece.square, layout)
+            const helperPos = getSquarePosition(currentHelper.square, layout)
 
             return (
               <g key={currentHelper.id}>
@@ -387,42 +365,40 @@ export function CaptureRelationOptions({
                 {/* Operator symbol - smart placement to avoid collinear collapse */}
                 {(() => {
                   // Calculate center of triangle
-                  const centerX =
-                    (moverPos.x + helperPos.x + targetBoardPos.x) / 3;
-                  const centerY =
-                    (moverPos.y + helperPos.y + targetBoardPos.y) / 3;
+                  const centerX = (moverPos.x + helperPos.x + targetBoardPos.x) / 3
+                  const centerY = (moverPos.y + helperPos.y + targetBoardPos.y) / 3
 
                   // Check if pieces are nearly collinear using cross product
                   // Vector from mover to helper
-                  const v1x = helperPos.x - moverPos.x;
-                  const v1y = helperPos.y - moverPos.y;
+                  const v1x = helperPos.x - moverPos.x
+                  const v1y = helperPos.y - moverPos.y
                   // Vector from mover to target
-                  const v2x = targetBoardPos.x - moverPos.x;
-                  const v2y = targetBoardPos.y - moverPos.y;
+                  const v2x = targetBoardPos.x - moverPos.x
+                  const v2y = targetBoardPos.y - moverPos.y
 
                   // Cross product magnitude (2D)
-                  const crossProduct = Math.abs(v1x * v2y - v1y * v2x);
+                  const crossProduct = Math.abs(v1x * v2y - v1y * v2x)
 
                   // If cross product is small, pieces are nearly collinear
-                  const minTriangleArea = cellSize * cellSize * 0.5; // Minimum triangle area threshold
-                  const isCollinear = crossProduct < minTriangleArea;
+                  const minTriangleArea = cellSize * cellSize * 0.5 // Minimum triangle area threshold
+                  const isCollinear = crossProduct < minTriangleArea
 
-                  let operatorX = centerX;
-                  let operatorY = centerY;
+                  let operatorX = centerX
+                  let operatorY = centerY
 
                   if (isCollinear) {
                     // Find the line connecting the three points (use mover to target as reference)
-                    const lineLength = Math.sqrt(v2x * v2x + v2y * v2y);
+                    const lineLength = Math.sqrt(v2x * v2x + v2y * v2y)
 
                     if (lineLength > 0) {
                       // Perpendicular direction (rotate 90 degrees)
-                      const perpX = -v2y / lineLength;
-                      const perpY = v2x / lineLength;
+                      const perpX = -v2y / lineLength
+                      const perpY = v2x / lineLength
 
                       // Offset operator perpendicular to the line
-                      const offsetDistance = cellSize * 0.8;
-                      operatorX = centerX + perpX * offsetDistance;
-                      operatorY = centerY + perpY * offsetDistance;
+                      const offsetDistance = cellSize * 0.8
+                      operatorX = centerX + perpX * offsetDistance
+                      operatorY = centerY + perpY * offsetDistance
                     }
                   }
 
@@ -440,12 +416,12 @@ export function CaptureRelationOptions({
                     >
                       {operator}
                     </text>
-                  );
+                  )
                 })()}
               </g>
-            );
+            )
           })()}
       </g>
     </Tooltip.Provider>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/capture/HelperSelectionOptions.tsx b/apps/web/src/arcade-games/rithmomachia/components/capture/HelperSelectionOptions.tsx
index 80cd8eed..a6ddeb64 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/capture/HelperSelectionOptions.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/capture/HelperSelectionOptions.tsx
@@ -1,76 +1,68 @@
-"use client";
+'use client'
 
-import { useState } from "react";
-import { useAbacusSettings } from "@/hooks/useAbacusSettings";
-import { useCaptureContext } from "../../contexts/CaptureContext";
-import {
-  getRelationColor,
-  getRelationOperator,
-} from "../../constants/captureRelations";
-import type { Piece } from "../../types";
-import { AnimatedHelperPiece } from "./AnimatedHelperPiece";
+import { useState } from 'react'
+import { useAbacusSettings } from '@/hooks/useAbacusSettings'
+import { useCaptureContext } from '../../contexts/CaptureContext'
+import { getRelationColor, getRelationOperator } from '../../constants/captureRelations'
+import type { Piece } from '../../types'
+import { AnimatedHelperPiece } from './AnimatedHelperPiece'
 
 interface HelperSelectionOptionsProps {
-  helpers: Array<{ piece: Piece; boardPos: { x: number; y: number } }>;
+  helpers: Array<{ piece: Piece; boardPos: { x: number; y: number } }>
 }
 
 /**
  * Helper piece selection - pieces fly from board to selection ring
  * Hovering over a helper shows a preview of the number bond
  */
-export function HelperSelectionOptions({
-  helpers,
-}: HelperSelectionOptionsProps) {
-  const { layout, pieces, selectedRelation, closing, selectHelper } =
-    useCaptureContext();
-  const { targetPos, cellSize, gap, padding } = layout;
-  const { mover: moverPiece, target: targetPiece } = pieces;
-  const relation = selectedRelation!;
+export function HelperSelectionOptions({ helpers }: HelperSelectionOptionsProps) {
+  const { layout, pieces, selectedRelation, closing, selectHelper } = useCaptureContext()
+  const { targetPos, cellSize, gap, padding } = layout
+  const { mover: moverPiece, target: targetPiece } = pieces
+  const relation = selectedRelation!
 
   // Get abacus settings
-  const { data: abacusSettings } = useAbacusSettings();
-  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false;
-  const [hoveredHelperId, setHoveredHelperId] = useState<string | null>(null);
-  const maxRadius = cellSize * 1.2;
-  const angleStep = helpers.length > 1 ? 360 / helpers.length : 0;
+  const { data: abacusSettings } = useAbacusSettings()
+  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false
+  const [hoveredHelperId, setHoveredHelperId] = useState<string | null>(null)
+  const maxRadius = cellSize * 1.2
+  const angleStep = helpers.length > 1 ? 360 / helpers.length : 0
 
-  console.log("[HelperSelectionOptions] targetPos:", targetPos);
-  console.log("[HelperSelectionOptions] cellSize:", cellSize);
-  console.log("[HelperSelectionOptions] maxRadius:", maxRadius);
-  console.log("[HelperSelectionOptions] angleStep:", angleStep);
-  console.log("[HelperSelectionOptions] helpers.length:", helpers.length);
+  console.log('[HelperSelectionOptions] targetPos:', targetPos)
+  console.log('[HelperSelectionOptions] cellSize:', cellSize)
+  console.log('[HelperSelectionOptions] maxRadius:', maxRadius)
+  console.log('[HelperSelectionOptions] angleStep:', angleStep)
+  console.log('[HelperSelectionOptions] helpers.length:', helpers.length)
 
   // Find the hovered helper and its ring position
-  const hoveredHelperData = helpers.find((h) => h.piece.id === hoveredHelperId);
-  const hoveredHelperIndex = helpers.findIndex(
-    (h) => h.piece.id === hoveredHelperId,
-  );
-  let hoveredHelperRingPos = null;
+  const hoveredHelperData = helpers.find((h) => h.piece.id === hoveredHelperId)
+  const hoveredHelperIndex = helpers.findIndex((h) => h.piece.id === hoveredHelperId)
+  let hoveredHelperRingPos = null
   if (hoveredHelperIndex !== -1) {
-    const angle = hoveredHelperIndex * angleStep;
-    const rad = (angle * Math.PI) / 180;
+    const angle = hoveredHelperIndex * angleStep
+    const rad = (angle * Math.PI) / 180
     hoveredHelperRingPos = {
       x: targetPos.x + Math.cos(rad) * maxRadius,
       y: targetPos.y + Math.sin(rad) * maxRadius,
-    };
+    }
   }
 
-  const color = getRelationColor(relation);
-  const operator = getRelationOperator(relation);
+  const color = getRelationColor(relation)
+  const operator = getRelationOperator(relation)
 
   return (
     <g>
       {helpers.map(({ piece, boardPos }, index) => {
-        const angle = index * angleStep;
-        const rad = (angle * Math.PI) / 180;
+        const angle = index * angleStep
+        const rad = (angle * Math.PI) / 180
 
         // Target position in ring
-        const ringX = targetPos.x + Math.cos(rad) * maxRadius;
-        const ringY = targetPos.y + Math.sin(rad) * maxRadius;
+        const ringX = targetPos.x + Math.cos(rad) * maxRadius
+        const ringY = targetPos.y + Math.sin(rad) * maxRadius
 
         console.log(
-          `[HelperSelectionOptions] piece ${piece.id} (${piece.square}): index=${index}, angle=${angle}°, boardPos=(${boardPos.x}, ${boardPos.y}), ringPos=(${ringX}, ${ringY})`,
-        );
+          `[HelperSelectionOptions] piece ${piece.id} (${piece.square}): index=${index}, angle=${angle}°, boardPos=(${boardPos.x}, ${boardPos.y}), ringPos=(${ringX}, ${ringY})`
+        )
 
         return (
           <AnimatedHelperPiece
@@ -85,7 +77,7 @@ export function HelperSelectionOptions({
             useNativeAbacusNumbers={useNativeAbacusNumbers}
             onHover={setHoveredHelperId}
           />
-        );
+        )
       })}
 
       {/* Show number bond preview when hovering over a helper - draw triangle between actual pieces */}
@@ -93,26 +85,26 @@ export function HelperSelectionOptions({
         <g>
           {(() => {
             // Use actual positions of all three pieces
-            const helperPos = hoveredHelperRingPos; // Helper is in the ring
-            const moverBoardPos = hoveredHelperData.boardPos; // Mover is on the board at its current position
-            const targetBoardPos = targetPos; // Target is on the board at capture position
+            const helperPos = hoveredHelperRingPos // Helper is in the ring
+            const moverBoardPos = hoveredHelperData.boardPos // Mover is on the board at its current position
+            const targetBoardPos = targetPos // Target is on the board at capture position
 
             // Calculate positions from square coordinates
-            const file = moverPiece.square.charCodeAt(0) - 65;
-            const rank = Number.parseInt(moverPiece.square.slice(1), 10);
-            const row = 8 - rank;
+            const file = moverPiece.square.charCodeAt(0) - 65
+            const rank = Number.parseInt(moverPiece.square.slice(1), 10)
+            const row = 8 - rank
             const moverPos = {
               x: padding + file * (cellSize + gap) + cellSize / 2,
               y: padding + row * (cellSize + gap) + cellSize / 2,
-            };
+            }
 
-            const targetFile = targetPiece.square.charCodeAt(0) - 65;
-            const targetRank = Number.parseInt(targetPiece.square.slice(1), 10);
-            const targetRow = 8 - targetRank;
+            const targetFile = targetPiece.square.charCodeAt(0) - 65
+            const targetRank = Number.parseInt(targetPiece.square.slice(1), 10)
+            const targetRow = 8 - targetRank
             const targetBoardPosition = {
               x: padding + targetFile * (cellSize + gap) + cellSize / 2,
               y: padding + targetRow * (cellSize + gap) + cellSize / 2,
-            };
+            }
 
             return (
               <>
@@ -161,10 +153,10 @@ export function HelperSelectionOptions({
 
                 {/* No cloned pieces - using actual pieces already on board/ring */}
               </>
-            );
+            )
           })()}
         </g>
       )}
     </g>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/capture/NumberBondVisualization.tsx b/apps/web/src/arcade-games/rithmomachia/components/capture/NumberBondVisualization.tsx
index 829acd23..70fffc6a 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/capture/NumberBondVisualization.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/capture/NumberBondVisualization.tsx
@@ -1,21 +1,18 @@
-"use client";
+'use client'
 
-import { animated, to, useSpring } from "@react-spring/web";
-import { useEffect, useState } from "react";
-import { useAbacusSettings } from "@/hooks/useAbacusSettings";
-import { useCaptureContext } from "../../contexts/CaptureContext";
-import {
-  getRelationColor,
-  getRelationOperator,
-} from "../../constants/captureRelations";
-import { getEffectiveValue } from "../../utils/pieceSetup";
-import { getSquarePosition } from "../../utils/boardCoordinates";
-import { PieceRenderer } from "../PieceRenderer";
+import { animated, to, useSpring } from '@react-spring/web'
+import { useEffect, useState } from 'react'
+import { useAbacusSettings } from '@/hooks/useAbacusSettings'
+import { useCaptureContext } from '../../contexts/CaptureContext'
+import { getRelationColor, getRelationOperator } from '../../constants/captureRelations'
+import { getEffectiveValue } from '../../utils/pieceSetup'
+import { getSquarePosition } from '../../utils/boardCoordinates'
+import { PieceRenderer } from '../PieceRenderer'
 
 interface NumberBondVisualizationProps {
-  onConfirm: () => void;
-  moverStartPos: { x: number; y: number };
-  helperStartPos: { x: number; y: number };
+  onConfirm: () => void
+  moverStartPos: { x: number; y: number }
+  helperStartPos: { x: number; y: number }
 }
 
 /**
@@ -28,40 +25,36 @@ export function NumberBondVisualization({
   moverStartPos,
   helperStartPos,
 }: NumberBondVisualizationProps) {
-  const { layout, pieces, selectedRelation, closing } = useCaptureContext();
-  const { targetPos, cellSize, padding, gap } = layout;
-  const {
-    mover: moverPiece,
-    target: targetPiece,
-    helper: helperPiece,
-  } = pieces;
-  const relation = selectedRelation!;
+  const { layout, pieces, selectedRelation, closing } = useCaptureContext()
+  const { targetPos, cellSize, padding, gap } = layout
+  const { mover: moverPiece, target: targetPiece, helper: helperPiece } = pieces
+  const relation = selectedRelation!
 
   // Get abacus settings
-  const { data: abacusSettings } = useAbacusSettings();
-  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false;
+  const { data: abacusSettings } = useAbacusSettings()
+  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false
 
-  const autoAnimate = true;
-  const [animating, setAnimating] = useState(false);
+  const autoAnimate = true
+  const [animating, setAnimating] = useState(false)
 
   // Auto-trigger animation immediately when component mounts (after helper selection)
   useEffect(() => {
-    if (!autoAnimate) return;
+    if (!autoAnimate) return
     const timer = setTimeout(() => {
-      setAnimating(true);
-    }, 300); // Short delay to show the triangle briefly
-    return () => clearTimeout(timer);
-  }, [autoAnimate]);
+      setAnimating(true)
+    }, 300) // Short delay to show the triangle briefly
+    return () => clearTimeout(timer)
+  }, [autoAnimate])
 
-  const color = getRelationColor(relation);
-  const operator = getRelationOperator(relation);
+  const color = getRelationColor(relation)
+  const operator = getRelationOperator(relation)
 
   // Calculate actual board position for target
   const targetBoardPos = getSquarePosition(targetPiece.square, {
     cellSize,
     gap,
     padding,
-  });
+  })
 
   // Animation: Rotate and collapse from actual positions to target
   const captureAnimation = useSpring({
@@ -72,30 +65,26 @@ export function NumberBondVisualization({
     config: animating ? { duration: 2500 } : { tension: 280, friction: 20 },
     onRest: () => {
       if (animating) {
-        onConfirm();
+        onConfirm()
       }
     },
-  });
+  })
 
   // Type guard - this component should only be rendered when helper is selected
   // Must be after all hooks to follow Rules of Hooks
   if (!helperPiece) {
-    return null;
+    return null
   }
 
   // Get piece values
-  const getMoverValue = () => getEffectiveValue(moverPiece);
-  const getHelperValue = () => getEffectiveValue(helperPiece);
-  const getTargetValue = () => getEffectiveValue(targetPiece);
+  const getMoverValue = () => getEffectiveValue(moverPiece)
+  const getHelperValue = () => getEffectiveValue(helperPiece)
+  const getTargetValue = () => getEffectiveValue(targetPiece)
 
   return (
     <g>
       {/* Triangle connecting lines between actual piece positions - fade during animation */}
-      <animated.g
-        opacity={to([captureAnimation.opacity], (op) =>
-          animating ? op * 0.5 : 0.5,
-        )}
-      >
+      <animated.g opacity={to([captureAnimation.opacity], (op) => (animating ? op * 0.5 : 0.5))}>
         <line
           x1={moverStartPos.x}
           y1={moverStartPos.y}
@@ -132,32 +121,25 @@ export function NumberBondVisualization({
         fontSize={cellSize * 0.8}
         fontWeight="900"
         fontFamily="Georgia, 'Times New Roman', serif"
-        opacity={to([captureAnimation.opacity], (op) =>
-          animating ? op * 0.9 : 0.9,
-        )}
+        opacity={to([captureAnimation.opacity], (op) => (animating ? op * 0.9 : 0.9))}
       >
         {operator}
       </animated.text>
 
       {/* Mover piece - starts at board position, spirals to target, STAYS VISIBLE */}
       <animated.g
-        transform={to(
-          [captureAnimation.rotation, captureAnimation.progress],
-          (rot, prog) => {
-            // Interpolate from start position to target position
-            const x =
-              moverStartPos.x + (targetBoardPos.x - moverStartPos.x) * prog;
-            const y =
-              moverStartPos.y + (targetBoardPos.y - moverStartPos.y) * prog;
+        transform={to([captureAnimation.rotation, captureAnimation.progress], (rot, prog) => {
+          // Interpolate from start position to target position
+          const x = moverStartPos.x + (targetBoardPos.x - moverStartPos.x) * prog
+          const y = moverStartPos.y + (targetBoardPos.y - moverStartPos.y) * prog
 
-            // Add spiral rotation around the interpolated center
-            const spiralRadius = (1 - prog) * cellSize * 0.5;
-            const spiralX = x + Math.cos(rot) * spiralRadius;
-            const spiralY = y + Math.sin(rot) * spiralRadius;
+          // Add spiral rotation around the interpolated center
+          const spiralRadius = (1 - prog) * cellSize * 0.5
+          const spiralX = x + Math.cos(rot) * spiralRadius
+          const spiralY = y + Math.sin(rot) * spiralRadius
 
-            return `translate(${spiralX}, ${spiralY})`;
-          },
-        )}
+          return `translate(${spiralX}, ${spiralY})`
+        })}
         opacity={1} // Mover stays fully visible
       >
         <g transform={`translate(${-cellSize / 2}, ${-cellSize / 2})`}>
@@ -173,22 +155,17 @@ export function NumberBondVisualization({
 
       {/* Helper piece - starts in ring, spirals to target, FADES OUT */}
       <animated.g
-        transform={to(
-          [captureAnimation.rotation, captureAnimation.progress],
-          (rot, prog) => {
-            const x =
-              helperStartPos.x + (targetBoardPos.x - helperStartPos.x) * prog;
-            const y =
-              helperStartPos.y + (targetBoardPos.y - helperStartPos.y) * prog;
+        transform={to([captureAnimation.rotation, captureAnimation.progress], (rot, prog) => {
+          const x = helperStartPos.x + (targetBoardPos.x - helperStartPos.x) * prog
+          const y = helperStartPos.y + (targetBoardPos.y - helperStartPos.y) * prog
 
-            const spiralRadius = (1 - prog) * cellSize * 0.5;
-            const angle = rot + (Math.PI * 2) / 3; // Offset by 120°
-            const spiralX = x + Math.cos(angle) * spiralRadius;
-            const spiralY = y + Math.sin(angle) * spiralRadius;
+          const spiralRadius = (1 - prog) * cellSize * 0.5
+          const angle = rot + (Math.PI * 2) / 3 // Offset by 120°
+          const spiralX = x + Math.cos(angle) * spiralRadius
+          const spiralY = y + Math.sin(angle) * spiralRadius
 
-            return `translate(${spiralX}, ${spiralY})`;
-          },
-        )}
+          return `translate(${spiralX}, ${spiralY})`
+        })}
         opacity={to([captureAnimation.opacity], (op) => (animating ? op : 1))}
       >
         <g transform={`translate(${-cellSize / 2}, ${-cellSize / 2})`}>
@@ -204,20 +181,17 @@ export function NumberBondVisualization({
 
       {/* Target piece - stays at board position, spirals in place, FADES OUT */}
       <animated.g
-        transform={to(
-          [captureAnimation.rotation, captureAnimation.progress],
-          (rot, prog) => {
-            const x = targetBoardPos.x;
-            const y = targetBoardPos.y;
+        transform={to([captureAnimation.rotation, captureAnimation.progress], (rot, prog) => {
+          const x = targetBoardPos.x
+          const y = targetBoardPos.y
 
-            const spiralRadius = (1 - prog) * cellSize * 0.5;
-            const angle = rot + (Math.PI * 4) / 3; // Offset by 240°
-            const spiralX = x + Math.cos(angle) * spiralRadius;
-            const spiralY = y + Math.sin(angle) * spiralRadius;
+          const spiralRadius = (1 - prog) * cellSize * 0.5
+          const angle = rot + (Math.PI * 4) / 3 // Offset by 240°
+          const spiralX = x + Math.cos(angle) * spiralRadius
+          const spiralY = y + Math.sin(angle) * spiralRadius
 
-            return `translate(${spiralX}, ${spiralY})`;
-          },
-        )}
+          return `translate(${spiralX}, ${spiralY})`
+        })}
         opacity={to([captureAnimation.opacity], (op) => (animating ? op : 1))}
       >
         <g transform={`translate(${-cellSize / 2}, ${-cellSize / 2})`}>
@@ -231,5 +205,5 @@ export function NumberBondVisualization({
         </g>
       </animated.g>
     </g>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/guide-sections/CaptureSection.tsx b/apps/web/src/arcade-games/rithmomachia/components/guide-sections/CaptureSection.tsx
index 42ede4c3..583700ff 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/guide-sections/CaptureSection.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/guide-sections/CaptureSection.tsx
@@ -1,6 +1,6 @@
-import { useTranslations } from "next-intl";
-import { css } from "../../../../../styled-system/css";
-import { RithmomachiaBoard, type ExamplePiece } from "../RithmomachiaBoard";
+import { useTranslations } from 'next-intl'
+import { css } from '../../../../../styled-system/css'
+import { RithmomachiaBoard, type ExamplePiece } from '../RithmomachiaBoard'
 
 /**
  * Helper to convert square names to crop area coordinates
@@ -8,407 +8,403 @@ import { RithmomachiaBoard, type ExamplePiece } from "../RithmomachiaBoard";
  * @param bottomRight - e.g. 'H6'
  */
 function squaresToCropArea(topLeft: string, bottomRight: string) {
-  const minCol = topLeft.charCodeAt(0) - 65; // A=0
-  const maxCol = bottomRight.charCodeAt(0) - 65;
-  const maxRow = Number.parseInt(topLeft.slice(1), 10);
-  const minRow = Number.parseInt(bottomRight.slice(1), 10);
-  return { minCol, maxCol, minRow, maxRow };
+  const minCol = topLeft.charCodeAt(0) - 65 // A=0
+  const maxCol = bottomRight.charCodeAt(0) - 65
+  const maxRow = Number.parseInt(topLeft.slice(1), 10)
+  const minRow = Number.parseInt(bottomRight.slice(1), 10)
+  return { minCol, maxCol, minRow, maxRow }
 }
 
-export function CaptureSection({
-  useNativeAbacusNumbers,
-}: {
-  useNativeAbacusNumbers: boolean;
-}) {
-  const t = useTranslations("rithmomachia.guide");
+export function CaptureSection({ useNativeAbacusNumbers }: { useNativeAbacusNumbers: boolean }) {
+  const t = useTranslations('rithmomachia.guide')
 
   // Example board positions for captures
   const equalityExample: ExamplePiece[] = [
-    { square: "G4", type: "C", color: "W", value: 25 }, // White's 25
-    { square: "H4", type: "C", color: "B", value: 25 }, // Black's 25 (can be captured)
-  ];
+    { square: 'G4', type: 'C', color: 'W', value: 25 }, // White's 25
+    { square: 'H4', type: 'C', color: 'B', value: 25 }, // Black's 25 (can be captured)
+  ]
 
   const multipleExample: ExamplePiece[] = [
-    { square: "E5", type: "S", color: "W", value: 64 }, // White's 64
-    { square: "F5", type: "T", color: "B", value: 16 }, // Black's 16 (can be captured: 64÷16=4)
-  ];
+    { square: 'E5', type: 'S', color: 'W', value: 64 }, // White's 64
+    { square: 'F5', type: 'T', color: 'B', value: 16 }, // Black's 16 (can be captured: 64÷16=4)
+  ]
 
   const sumExample: ExamplePiece[] = [
-    { square: "F4", type: "C", color: "W", value: 9 }, // White's 9 (attacker)
-    { square: "E5", type: "T", color: "W", value: 16 }, // White's 16 (helper)
-    { square: "G4", type: "C", color: "B", value: 25 }, // Black's 25 (target: 9+16=25)
-  ];
+    { square: 'F4', type: 'C', color: 'W', value: 9 }, // White's 9 (attacker)
+    { square: 'E5', type: 'T', color: 'W', value: 16 }, // White's 16 (helper)
+    { square: 'G4', type: 'C', color: 'B', value: 25 }, // Black's 25 (target: 9+16=25)
+  ]
 
   const differenceExample: ExamplePiece[] = [
-    { square: "F4", type: "T", color: "W", value: 30 }, // White's 30 (attacker)
-    { square: "E5", type: "C", color: "W", value: 10 }, // White's 10 (helper)
-    { square: "G4", type: "T", color: "B", value: 20 }, // Black's 20 (target: 30-10=20)
-  ];
+    { square: 'F4', type: 'T', color: 'W', value: 30 }, // White's 30 (attacker)
+    { square: 'E5', type: 'C', color: 'W', value: 10 }, // White's 10 (helper)
+    { square: 'G4', type: 'T', color: 'B', value: 20 }, // Black's 20 (target: 30-10=20)
+  ]
 
   const productExample: ExamplePiece[] = [
-    { square: "F4", type: "C", color: "W", value: 5 }, // White's 5 (attacker)
-    { square: "E5", type: "C", color: "W", value: 5 }, // White's 5 (helper)
-    { square: "G4", type: "C", color: "B", value: 25 }, // Black's 25 (target: 5×5=25)
-  ];
+    { square: 'F4', type: 'C', color: 'W', value: 5 }, // White's 5 (attacker)
+    { square: 'E5', type: 'C', color: 'W', value: 5 }, // White's 5 (helper)
+    { square: 'G4', type: 'C', color: 'B', value: 25 }, // Black's 25 (target: 5×5=25)
+  ]
 
   const ratioExample: ExamplePiece[] = [
-    { square: "F4", type: "T", color: "W", value: 20 }, // White's 20 (attacker)
-    { square: "E5", type: "C", color: "W", value: 4 }, // White's 4 (helper)
-    { square: "G4", type: "C", color: "B", value: 5 }, // Black's 5 (target: 20÷4=5)
-  ];
+    { square: 'F4', type: 'T', color: 'W', value: 20 }, // White's 20 (attacker)
+    { square: 'E5', type: 'C', color: 'W', value: 4 }, // White's 4 (helper)
+    { square: 'G4', type: 'C', color: 'B', value: 5 }, // Black's 5 (target: 20÷4=5)
+  ]
 
   return (
     <div data-section="capture">
       <h3
         className={css({
-          fontSize: { base: "20px", md: "24px" },
-          fontWeight: "bold",
-          color: "#7c2d12",
-          mb: "16px",
+          fontSize: { base: '20px', md: '24px' },
+          fontWeight: 'bold',
+          color: '#7c2d12',
+          mb: '16px',
         })}
       >
-        {t("capture.title")}
+        {t('capture.title')}
       </h3>
       <p
         className={css({
-          fontSize: "15px",
-          lineHeight: "1.6",
-          mb: "24px",
-          color: "#374151",
+          fontSize: '15px',
+          lineHeight: '1.6',
+          mb: '24px',
+          color: '#374151',
         })}
       >
-        {t("capture.description")}
+        {t('capture.description')}
       </p>
 
       <h4
         className={css({
-          fontSize: "18px",
-          fontWeight: "bold",
-          color: "#111827",
-          mb: "12px",
-          mt: "20px",
+          fontSize: '18px',
+          fontWeight: 'bold',
+          color: '#111827',
+          mb: '12px',
+          mt: '20px',
         })}
       >
-        {t("capture.simpleTitle")}
+        {t('capture.simpleTitle')}
       </h4>
 
       {/* Equality */}
       <div
         className={css({
-          mb: "20px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '20px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '8px',
           })}
         >
-          {t("capture.equality")}
+          {t('capture.equality')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b7280", mb: "12px" })}>
-          {t("capture.equalityExample")}
+        <p className={css({ fontSize: '13px', color: '#6b7280', mb: '12px' })}>
+          {t('capture.equalityExample')}
         </p>
-        <div className={css({ display: "flex", justifyContent: "center" })}>
+        <div className={css({ display: 'flex', justifyContent: 'center' })}>
           <RithmomachiaBoard
             pieces={equalityExample}
             scale={0.4}
-            cropArea={squaresToCropArea("F5", "I3")}
-            highlightSquares={["G4", "H4"]}
+            cropArea={squaresToCropArea('F5', 'I3')}
+            highlightSquares={['G4', 'H4']}
             showLabels={true}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
           />
         </div>
         <p
           className={css({
-            fontSize: "12px",
-            color: "#9ca3af",
-            mt: "8px",
-            textAlign: "center",
-            fontStyle: "italic",
+            fontSize: '12px',
+            color: '#9ca3af',
+            mt: '8px',
+            textAlign: 'center',
+            fontStyle: 'italic',
           })}
         >
-          {t("capture.equalityCaption")}
+          {t('capture.equalityCaption')}
         </p>
       </div>
 
       {/* Multiple/Divisor */}
       <div
         className={css({
-          mb: "20px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '20px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '8px',
           })}
         >
-          {t("capture.multiple")}
+          {t('capture.multiple')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b7280", mb: "12px" })}>
-          {t("capture.multipleExample")}
+        <p className={css({ fontSize: '13px', color: '#6b7280', mb: '12px' })}>
+          {t('capture.multipleExample')}
         </p>
-        <div className={css({ display: "flex", justifyContent: "center" })}>
+        <div className={css({ display: 'flex', justifyContent: 'center' })}>
           <RithmomachiaBoard
             pieces={multipleExample}
             scale={0.4}
-            cropArea={squaresToCropArea("D6", "G4")}
-            highlightSquares={["E5", "F5"]}
+            cropArea={squaresToCropArea('D6', 'G4')}
+            highlightSquares={['E5', 'F5']}
             showLabels={true}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
           />
         </div>
         <p
           className={css({
-            fontSize: "12px",
-            color: "#9ca3af",
-            mt: "8px",
-            textAlign: "center",
-            fontStyle: "italic",
+            fontSize: '12px',
+            color: '#9ca3af',
+            mt: '8px',
+            textAlign: 'center',
+            fontStyle: 'italic',
           })}
         >
-          {t("capture.multipleCaption")}
+          {t('capture.multipleCaption')}
         </p>
       </div>
 
       <h4
         className={css({
-          fontSize: "18px",
-          fontWeight: "bold",
-          color: "#111827",
-          mb: "12px",
-          mt: "24px",
+          fontSize: '18px',
+          fontWeight: 'bold',
+          color: '#111827',
+          mb: '12px',
+          mt: '24px',
         })}
       >
-        {t("capture.advancedTitle")}
+        {t('capture.advancedTitle')}
       </h4>
 
       {/* Sum */}
       <div
         className={css({
-          mb: "20px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '20px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '8px',
           })}
         >
-          {t("capture.sum")}
+          {t('capture.sum')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b7280", mb: "12px" })}>
-          {t("capture.sumExample")}
+        <p className={css({ fontSize: '13px', color: '#6b7280', mb: '12px' })}>
+          {t('capture.sumExample')}
         </p>
-        <div className={css({ display: "flex", justifyContent: "center" })}>
+        <div className={css({ display: 'flex', justifyContent: 'center' })}>
           <RithmomachiaBoard
             pieces={sumExample}
             scale={0.4}
-            cropArea={squaresToCropArea("D6", "H3")}
-            highlightSquares={["F4", "E5", "G4"]}
+            cropArea={squaresToCropArea('D6', 'H3')}
+            highlightSquares={['F4', 'E5', 'G4']}
             showLabels={true}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
           />
         </div>
         <p
           className={css({
-            fontSize: "12px",
-            color: "#9ca3af",
-            mt: "8px",
-            textAlign: "center",
-            fontStyle: "italic",
+            fontSize: '12px',
+            color: '#9ca3af',
+            mt: '8px',
+            textAlign: 'center',
+            fontStyle: 'italic',
           })}
         >
-          {t("capture.sumCaption")}
+          {t('capture.sumCaption')}
         </p>
       </div>
 
       {/* Difference */}
       <div
         className={css({
-          mb: "20px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '20px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '8px',
           })}
         >
-          {t("capture.difference")}
+          {t('capture.difference')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b7280", mb: "12px" })}>
-          {t("capture.differenceExample")}
+        <p className={css({ fontSize: '13px', color: '#6b7280', mb: '12px' })}>
+          {t('capture.differenceExample')}
         </p>
-        <div className={css({ display: "flex", justifyContent: "center" })}>
+        <div className={css({ display: 'flex', justifyContent: 'center' })}>
           <RithmomachiaBoard
             pieces={differenceExample}
             scale={0.4}
-            cropArea={squaresToCropArea("D6", "H3")}
-            highlightSquares={["F4", "E5", "G4"]}
+            cropArea={squaresToCropArea('D6', 'H3')}
+            highlightSquares={['F4', 'E5', 'G4']}
             showLabels={true}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
           />
         </div>
         <p
           className={css({
-            fontSize: "12px",
-            color: "#9ca3af",
-            mt: "8px",
-            textAlign: "center",
-            fontStyle: "italic",
+            fontSize: '12px',
+            color: '#9ca3af',
+            mt: '8px',
+            textAlign: 'center',
+            fontStyle: 'italic',
           })}
         >
-          {t("capture.differenceCaption")}
+          {t('capture.differenceCaption')}
         </p>
       </div>
 
       {/* Product */}
       <div
         className={css({
-          mb: "20px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '20px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '8px',
           })}
         >
-          {t("capture.product")}
+          {t('capture.product')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b7280", mb: "12px" })}>
-          {t("capture.productExample")}
+        <p className={css({ fontSize: '13px', color: '#6b7280', mb: '12px' })}>
+          {t('capture.productExample')}
         </p>
-        <div className={css({ display: "flex", justifyContent: "center" })}>
+        <div className={css({ display: 'flex', justifyContent: 'center' })}>
           <RithmomachiaBoard
             pieces={productExample}
             scale={0.4}
-            cropArea={squaresToCropArea("D6", "H3")}
-            highlightSquares={["F4", "E5", "G4"]}
+            cropArea={squaresToCropArea('D6', 'H3')}
+            highlightSquares={['F4', 'E5', 'G4']}
             showLabels={true}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
           />
         </div>
         <p
           className={css({
-            fontSize: "12px",
-            color: "#9ca3af",
-            mt: "8px",
-            textAlign: "center",
-            fontStyle: "italic",
+            fontSize: '12px',
+            color: '#9ca3af',
+            mt: '8px',
+            textAlign: 'center',
+            fontStyle: 'italic',
           })}
         >
-          {t("capture.productCaption")}
+          {t('capture.productCaption')}
         </p>
       </div>
 
       {/* Ratio */}
       <div
         className={css({
-          mb: "20px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '20px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '8px',
           })}
         >
-          {t("capture.ratio")}
+          {t('capture.ratio')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b7280", mb: "12px" })}>
-          {t("capture.ratioExample")}
+        <p className={css({ fontSize: '13px', color: '#6b7280', mb: '12px' })}>
+          {t('capture.ratioExample')}
         </p>
-        <div className={css({ display: "flex", justifyContent: "center" })}>
+        <div className={css({ display: 'flex', justifyContent: 'center' })}>
           <RithmomachiaBoard
             pieces={ratioExample}
             scale={0.4}
-            cropArea={squaresToCropArea("D6", "H3")}
-            highlightSquares={["F4", "E5", "G4"]}
+            cropArea={squaresToCropArea('D6', 'H3')}
+            highlightSquares={['F4', 'E5', 'G4']}
             showLabels={true}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
           />
         </div>
         <p
           className={css({
-            fontSize: "12px",
-            color: "#9ca3af",
-            mt: "8px",
-            textAlign: "center",
-            fontStyle: "italic",
+            fontSize: '12px',
+            color: '#9ca3af',
+            mt: '8px',
+            textAlign: 'center',
+            fontStyle: 'italic',
           })}
         >
-          {t("capture.ratioCaption")}
+          {t('capture.ratioCaption')}
         </p>
       </div>
 
       <div
         className={css({
-          mt: "24px",
-          p: "16px",
-          bg: "rgba(59, 130, 246, 0.1)",
-          borderLeft: "4px solid #3b82f6",
-          borderRadius: "4px",
+          mt: '24px',
+          p: '16px',
+          bg: 'rgba(59, 130, 246, 0.1)',
+          borderLeft: '4px solid #3b82f6',
+          borderRadius: '4px',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#1e40af",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#1e40af',
+            mb: '8px',
           })}
         >
-          {t("capture.helpersTitle")}
+          {t('capture.helpersTitle')}
         </p>
         <p
           className={css({
-            fontSize: "14px",
-            color: "#1e3a8a",
-            lineHeight: "1.6",
+            fontSize: '14px',
+            color: '#1e3a8a',
+            lineHeight: '1.6',
           })}
         >
-          {t("capture.helpersDescription")}
+          {t('capture.helpersDescription')}
         </p>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/guide-sections/HarmonySection.tsx b/apps/web/src/arcade-games/rithmomachia/components/guide-sections/HarmonySection.tsx
index bc4ea996..ad9ecf64 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/guide-sections/HarmonySection.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/guide-sections/HarmonySection.tsx
@@ -1,6 +1,6 @@
-import { useTranslations } from "next-intl";
-import { css } from "../../../../../styled-system/css";
-import { RithmomachiaBoard, type ExamplePiece } from "../RithmomachiaBoard";
+import { useTranslations } from 'next-intl'
+import { css } from '../../../../../styled-system/css'
+import { RithmomachiaBoard, type ExamplePiece } from '../RithmomachiaBoard'
 
 /**
  * Helper to convert square names to crop area coordinates
@@ -8,196 +8,191 @@ import { RithmomachiaBoard, type ExamplePiece } from "../RithmomachiaBoard";
  * @param bottomRight - e.g. 'H6'
  */
 function squaresToCropArea(topLeft: string, bottomRight: string) {
-  const minCol = topLeft.charCodeAt(0) - 65; // A=0
-  const maxCol = bottomRight.charCodeAt(0) - 65;
-  const maxRow = Number.parseInt(topLeft.slice(1), 10);
-  const minRow = Number.parseInt(bottomRight.slice(1), 10);
-  return { minCol, maxCol, minRow, maxRow };
+  const minCol = topLeft.charCodeAt(0) - 65 // A=0
+  const maxCol = bottomRight.charCodeAt(0) - 65
+  const maxRow = Number.parseInt(topLeft.slice(1), 10)
+  const minRow = Number.parseInt(bottomRight.slice(1), 10)
+  return { minCol, maxCol, minRow, maxRow }
 }
 
-export function HarmonySection({
-  useNativeAbacusNumbers,
-}: {
-  useNativeAbacusNumbers: boolean;
-}) {
-  const t = useTranslations("rithmomachia.guide");
+export function HarmonySection({ useNativeAbacusNumbers }: { useNativeAbacusNumbers: boolean }) {
+  const t = useTranslations('rithmomachia.guide')
 
   // Example board positions for harmonies (White pieces in Black's territory: rows 5-8)
   const arithmeticExample: ExamplePiece[] = [
-    { square: "E6", type: "C", color: "W", value: 6 }, // White's 6
-    { square: "F6", type: "C", color: "W", value: 9 }, // White's 9 (middle)
-    { square: "G6", type: "T", color: "W", value: 12 }, // White's 12 (arithmetic: 9 = (6+12)/2)
-  ];
+    { square: 'E6', type: 'C', color: 'W', value: 6 }, // White's 6
+    { square: 'F6', type: 'C', color: 'W', value: 9 }, // White's 9 (middle)
+    { square: 'G6', type: 'T', color: 'W', value: 12 }, // White's 12 (arithmetic: 9 = (6+12)/2)
+  ]
 
   const geometricExample: ExamplePiece[] = [
-    { square: "E6", type: "C", color: "W", value: 4 }, // White's 4
-    { square: "F6", type: "C", color: "W", value: 8 }, // White's 8 (middle)
-    { square: "G6", type: "T", color: "W", value: 16 }, // White's 16 (geometric: 8² = 4×16 = 64)
-  ];
+    { square: 'E6', type: 'C', color: 'W', value: 4 }, // White's 4
+    { square: 'F6', type: 'C', color: 'W', value: 8 }, // White's 8 (middle)
+    { square: 'G6', type: 'T', color: 'W', value: 16 }, // White's 16 (geometric: 8² = 4×16 = 64)
+  ]
 
   const harmonicExample: ExamplePiece[] = [
-    { square: "E6", type: "C", color: "W", value: 6 }, // White's 6
-    { square: "F6", type: "C", color: "W", value: 8 }, // White's 8 (middle)
-    { square: "G6", type: "T", color: "W", value: 12 }, // White's 12 (harmonic: 2×6×12 = 144 = 8×18)
-  ];
+    { square: 'E6', type: 'C', color: 'W', value: 6 }, // White's 6
+    { square: 'F6', type: 'C', color: 'W', value: 8 }, // White's 8 (middle)
+    { square: 'G6', type: 'T', color: 'W', value: 12 }, // White's 12 (harmonic: 2×6×12 = 144 = 8×18)
+  ]
 
   return (
     <div data-section="harmony">
       <h3
         className={css({
-          fontSize: { base: "20px", md: "24px" },
-          fontWeight: "bold",
-          color: "#7c2d12",
-          mb: "16px",
+          fontSize: { base: '20px', md: '24px' },
+          fontWeight: 'bold',
+          color: '#7c2d12',
+          mb: '16px',
         })}
       >
-        {t("harmony.title")}
+        {t('harmony.title')}
       </h3>
       <p
         className={css({
-          fontSize: "15px",
-          lineHeight: "1.6",
-          mb: "8px",
-          color: "#374151",
+          fontSize: '15px',
+          lineHeight: '1.6',
+          mb: '8px',
+          color: '#374151',
         })}
       >
-        {t("harmony.intro")}
+        {t('harmony.intro')}
       </p>
       <p
         className={css({
-          fontSize: "14px",
-          lineHeight: "1.6",
-          mb: "24px",
-          color: "#6b7280",
+          fontSize: '14px',
+          lineHeight: '1.6',
+          mb: '24px',
+          color: '#6b7280',
         })}
       >
-        {t("harmony.introDetail")}
+        {t('harmony.introDetail')}
       </p>
 
       <div
         className={css({
-          display: "flex",
-          flexDirection: "column",
-          gap: "24px",
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '24px',
         })}
       >
         {/* Arithmetic Progression */}
         <div
           className={css({
-            p: "16px",
-            bg: "#f0fdf4",
-            border: "2px solid #86efac",
-            borderRadius: "8px",
+            p: '16px',
+            bg: '#f0fdf4',
+            border: '2px solid #86efac',
+            borderRadius: '8px',
           })}
         >
           <h4
             className={css({
-              fontSize: "18px",
-              fontWeight: "bold",
-              color: "#15803d",
-              mb: "8px",
+              fontSize: '18px',
+              fontWeight: 'bold',
+              color: '#15803d',
+              mb: '8px',
             })}
           >
-            {t("harmony.arithmetic")}
+            {t('harmony.arithmetic')}
           </h4>
           <p
             className={css({
-              fontSize: "14px",
-              color: "#166534",
-              mb: "12px",
-              lineHeight: "1.6",
+              fontSize: '14px',
+              color: '#166534',
+              mb: '12px',
+              lineHeight: '1.6',
             })}
           >
-            {t("harmony.arithmeticDesc")}
+            {t('harmony.arithmeticDesc')}
           </p>
 
           <div
             className={css({
-              bg: "white",
-              p: "12px",
-              borderRadius: "6px",
-              mb: "12px",
-              border: "1px solid #86efac",
+              bg: 'white',
+              p: '12px',
+              borderRadius: '6px',
+              mb: '12px',
+              border: '1px solid #86efac',
             })}
           >
             <p
               className={css({
-                fontSize: "13px",
-                fontWeight: "bold",
-                color: "#15803d",
-                mb: "8px",
+                fontSize: '13px',
+                fontWeight: 'bold',
+                color: '#15803d',
+                mb: '8px',
               })}
             >
-              {t("harmony.howToCheck")}
+              {t('harmony.howToCheck')}
             </p>
             <p
               className={css({
-                fontSize: "14px",
-                color: "#166534",
-                fontFamily: "monospace",
-                fontWeight: "bold",
-                mb: "12px",
+                fontSize: '14px',
+                color: '#166534',
+                fontFamily: 'monospace',
+                fontWeight: 'bold',
+                mb: '12px',
               })}
             >
-              {t("harmony.arithmeticFormula")}
+              {t('harmony.arithmeticFormula')}
             </p>
 
             <div
               className={css({
-                fontSize: "13px",
-                color: "#166534",
-                lineHeight: "1.8",
+                fontSize: '13px',
+                color: '#166534',
+                lineHeight: '1.8',
               })}
             >
-              <p className={css({ fontWeight: "bold", mb: "4px" })}>
-                {t("harmony.example")} 6, 9, 12
+              <p className={css({ fontWeight: 'bold', mb: '4px' })}>
+                {t('harmony.example')} 6, 9, 12
               </p>
               <p>
-                {t("harmony.differences")} 9−6=3, 12−9=3 {t("harmony.equal")}
+                {t('harmony.differences')} 9−6=3, 12−9=3 {t('harmony.equal')}
               </p>
-              <p>{t("harmony.check")} 9×2 = 18 = 6+12 ✓</p>
+              <p>{t('harmony.check')} 9×2 = 18 = 6+12 ✓</p>
             </div>
           </div>
 
           <div
             className={css({
-              display: "flex",
-              justifyContent: "center",
-              mb: "12px",
+              display: 'flex',
+              justifyContent: 'center',
+              mb: '12px',
             })}
           >
             <RithmomachiaBoard
               pieces={arithmeticExample}
               scale={0.4}
-              cropArea={squaresToCropArea("D7", "H5")}
-              highlightSquares={["E6", "F6", "G6"]}
+              cropArea={squaresToCropArea('D7', 'H5')}
+              highlightSquares={['E6', 'F6', 'G6']}
               showLabels={true}
               useNativeAbacusNumbers={useNativeAbacusNumbers}
             />
           </div>
           <p
             className={css({
-              fontSize: "12px",
-              color: "#166534",
-              textAlign: "center",
-              fontStyle: "italic",
-              mb: "12px",
+              fontSize: '12px',
+              color: '#166534',
+              textAlign: 'center',
+              fontStyle: 'italic',
+              mb: '12px',
             })}
           >
-            {t("harmony.arithmeticCaption")}
+            {t('harmony.arithmeticCaption')}
           </p>
 
           <div
             className={css({
-              bg: "rgba(21, 128, 61, 0.1)",
-              p: "10px",
-              borderRadius: "6px",
-              borderLeft: "3px solid #15803d",
+              bg: 'rgba(21, 128, 61, 0.1)',
+              p: '10px',
+              borderRadius: '6px',
+              borderLeft: '3px solid #15803d',
             })}
           >
-            <p className={css({ fontSize: "13px", color: "#15803d" })}>
-              <strong>{t("harmony.strategyTip")}</strong>{" "}
-              {t("harmony.arithmeticTip")}
+            <p className={css({ fontSize: '13px', color: '#15803d' })}>
+              <strong>{t('harmony.strategyTip')}</strong> {t('harmony.arithmeticTip')}
             </p>
           </div>
         </div>
@@ -205,120 +200,119 @@ export function HarmonySection({
         {/* Geometric Progression */}
         <div
           className={css({
-            p: "16px",
-            bg: "#fef3c7",
-            border: "2px solid #fcd34d",
-            borderRadius: "8px",
+            p: '16px',
+            bg: '#fef3c7',
+            border: '2px solid #fcd34d',
+            borderRadius: '8px',
           })}
         >
           <h4
             className={css({
-              fontSize: "18px",
-              fontWeight: "bold",
-              color: "#92400e",
-              mb: "8px",
+              fontSize: '18px',
+              fontWeight: 'bold',
+              color: '#92400e',
+              mb: '8px',
             })}
           >
-            {t("harmony.geometric")}
+            {t('harmony.geometric')}
           </h4>
           <p
             className={css({
-              fontSize: "14px",
-              color: "#78350f",
-              mb: "12px",
-              lineHeight: "1.6",
+              fontSize: '14px',
+              color: '#78350f',
+              mb: '12px',
+              lineHeight: '1.6',
             })}
           >
-            {t("harmony.geometricDesc")}
+            {t('harmony.geometricDesc')}
           </p>
 
           <div
             className={css({
-              bg: "white",
-              p: "12px",
-              borderRadius: "6px",
-              mb: "12px",
-              border: "1px solid #fcd34d",
+              bg: 'white',
+              p: '12px',
+              borderRadius: '6px',
+              mb: '12px',
+              border: '1px solid #fcd34d',
             })}
           >
             <p
               className={css({
-                fontSize: "13px",
-                fontWeight: "bold",
-                color: "#92400e",
-                mb: "8px",
+                fontSize: '13px',
+                fontWeight: 'bold',
+                color: '#92400e',
+                mb: '8px',
               })}
             >
-              {t("harmony.howToCheck")}
+              {t('harmony.howToCheck')}
             </p>
             <p
               className={css({
-                fontSize: "14px",
-                color: "#78350f",
-                fontFamily: "monospace",
-                fontWeight: "bold",
-                mb: "12px",
+                fontSize: '14px',
+                color: '#78350f',
+                fontFamily: 'monospace',
+                fontWeight: 'bold',
+                mb: '12px',
               })}
             >
-              {t("harmony.geometricFormula")}
+              {t('harmony.geometricFormula')}
             </p>
 
             <div
               className={css({
-                fontSize: "13px",
-                color: "#78350f",
-                lineHeight: "1.8",
+                fontSize: '13px',
+                color: '#78350f',
+                lineHeight: '1.8',
               })}
             >
-              <p className={css({ fontWeight: "bold", mb: "4px" })}>
-                {t("harmony.example")} 4, 8, 16
+              <p className={css({ fontWeight: 'bold', mb: '4px' })}>
+                {t('harmony.example')} 4, 8, 16
               </p>
               <p>
-                {t("harmony.ratios")} 8÷4=2, 16÷8=2 {t("harmony.equal")}
+                {t('harmony.ratios')} 8÷4=2, 16÷8=2 {t('harmony.equal')}
               </p>
-              <p>{t("harmony.check")} 8² = 64 = 4×16 ✓</p>
+              <p>{t('harmony.check')} 8² = 64 = 4×16 ✓</p>
             </div>
           </div>
 
           <div
             className={css({
-              display: "flex",
-              justifyContent: "center",
-              mb: "12px",
+              display: 'flex',
+              justifyContent: 'center',
+              mb: '12px',
             })}
           >
             <RithmomachiaBoard
               pieces={geometricExample}
               scale={0.4}
-              cropArea={squaresToCropArea("D7", "H5")}
-              highlightSquares={["E6", "F6", "G6"]}
+              cropArea={squaresToCropArea('D7', 'H5')}
+              highlightSquares={['E6', 'F6', 'G6']}
               showLabels={true}
               useNativeAbacusNumbers={useNativeAbacusNumbers}
             />
           </div>
           <p
             className={css({
-              fontSize: "12px",
-              color: "#78350f",
-              textAlign: "center",
-              fontStyle: "italic",
-              mb: "12px",
+              fontSize: '12px',
+              color: '#78350f',
+              textAlign: 'center',
+              fontStyle: 'italic',
+              mb: '12px',
             })}
           >
-            {t("harmony.geometricCaption")}
+            {t('harmony.geometricCaption')}
           </p>
 
           <div
             className={css({
-              bg: "rgba(146, 64, 14, 0.1)",
-              p: "10px",
-              borderRadius: "6px",
-              borderLeft: "3px solid #92400e",
+              bg: 'rgba(146, 64, 14, 0.1)',
+              p: '10px',
+              borderRadius: '6px',
+              borderLeft: '3px solid #92400e',
             })}
           >
-            <p className={css({ fontSize: "13px", color: "#92400e" })}>
-              <strong>{t("harmony.strategyTip")}</strong>{" "}
-              {t("harmony.geometricTip")}
+            <p className={css({ fontSize: '13px', color: '#92400e' })}>
+              <strong>{t('harmony.strategyTip')}</strong> {t('harmony.geometricTip')}
             </p>
           </div>
         </div>
@@ -326,162 +320,161 @@ export function HarmonySection({
         {/* Harmonic Progression */}
         <div
           className={css({
-            p: "16px",
-            bg: "#dbeafe",
-            border: "2px solid #93c5fd",
-            borderRadius: "8px",
+            p: '16px',
+            bg: '#dbeafe',
+            border: '2px solid #93c5fd',
+            borderRadius: '8px',
           })}
         >
           <h4
             className={css({
-              fontSize: "18px",
-              fontWeight: "bold",
-              color: "#1e40af",
-              mb: "8px",
+              fontSize: '18px',
+              fontWeight: 'bold',
+              color: '#1e40af',
+              mb: '8px',
             })}
           >
-            {t("harmony.harmonic")}
+            {t('harmony.harmonic')}
           </h4>
           <p
             className={css({
-              fontSize: "14px",
-              color: "#1e3a8a",
-              mb: "12px",
-              lineHeight: "1.6",
+              fontSize: '14px',
+              color: '#1e3a8a',
+              mb: '12px',
+              lineHeight: '1.6',
             })}
           >
-            {t("harmony.harmonicDesc")}
+            {t('harmony.harmonicDesc')}
           </p>
 
           <div
             className={css({
-              bg: "white",
-              p: "12px",
-              borderRadius: "6px",
-              mb: "12px",
-              border: "1px solid #93c5fd",
+              bg: 'white',
+              p: '12px',
+              borderRadius: '6px',
+              mb: '12px',
+              border: '1px solid #93c5fd',
             })}
           >
             <p
               className={css({
-                fontSize: "13px",
-                fontWeight: "bold",
-                color: "#1e40af",
-                mb: "8px",
+                fontSize: '13px',
+                fontWeight: 'bold',
+                color: '#1e40af',
+                mb: '8px',
               })}
             >
-              {t("harmony.howToCheck")}
+              {t('harmony.howToCheck')}
             </p>
             <p
               className={css({
-                fontSize: "14px",
-                color: "#1e3a8a",
-                fontFamily: "monospace",
-                fontWeight: "bold",
-                mb: "12px",
+                fontSize: '14px',
+                color: '#1e3a8a',
+                fontFamily: 'monospace',
+                fontWeight: 'bold',
+                mb: '12px',
               })}
             >
-              {t("harmony.harmonicFormula")}
+              {t('harmony.harmonicFormula')}
             </p>
 
             <div
               className={css({
-                fontSize: "13px",
-                color: "#1e3a8a",
-                lineHeight: "1.8",
+                fontSize: '13px',
+                color: '#1e3a8a',
+                lineHeight: '1.8',
               })}
             >
-              <p className={css({ fontWeight: "bold", mb: "4px" })}>
-                {t("harmony.example")} 6, 8, 12
+              <p className={css({ fontWeight: 'bold', mb: '4px' })}>
+                {t('harmony.example')} 6, 8, 12
               </p>
-              <p>{t("harmony.check")} 2×6×12 = 144 = 8×(6+12) = 8×18 ✓</p>
+              <p>{t('harmony.check')} 2×6×12 = 144 = 8×(6+12) = 8×18 ✓</p>
             </div>
           </div>
 
           <div
             className={css({
-              display: "flex",
-              justifyContent: "center",
-              mb: "12px",
+              display: 'flex',
+              justifyContent: 'center',
+              mb: '12px',
             })}
           >
             <RithmomachiaBoard
               pieces={harmonicExample}
               scale={0.4}
-              cropArea={squaresToCropArea("D7", "H5")}
-              highlightSquares={["E6", "F6", "G6"]}
+              cropArea={squaresToCropArea('D7', 'H5')}
+              highlightSquares={['E6', 'F6', 'G6']}
               showLabels={true}
               useNativeAbacusNumbers={useNativeAbacusNumbers}
             />
           </div>
           <p
             className={css({
-              fontSize: "12px",
-              color: "#1e3a8a",
-              textAlign: "center",
-              fontStyle: "italic",
-              mb: "12px",
+              fontSize: '12px',
+              color: '#1e3a8a',
+              textAlign: 'center',
+              fontStyle: 'italic',
+              mb: '12px',
             })}
           >
-            {t("harmony.harmonicCaption")}
+            {t('harmony.harmonicCaption')}
           </p>
 
           <div
             className={css({
-              bg: "rgba(30, 64, 175, 0.1)",
-              p: "10px",
-              borderRadius: "6px",
-              borderLeft: "3px solid #1e40af",
+              bg: 'rgba(30, 64, 175, 0.1)',
+              p: '10px',
+              borderRadius: '6px',
+              borderLeft: '3px solid #1e40af',
             })}
           >
-            <p className={css({ fontSize: "13px", color: "#1e40af" })}>
-              <strong>{t("harmony.strategyTip")}</strong>{" "}
-              {t("harmony.harmonicTip")}
+            <p className={css({ fontSize: '13px', color: '#1e40af' })}>
+              <strong>{t('harmony.strategyTip')}</strong> {t('harmony.harmonicTip')}
             </p>
           </div>
         </div>
       </div>
 
       {/* Strategy Section */}
-      <div className={css({ mt: "24px" })}>
+      <div className={css({ mt: '24px' })}>
         <h3
           className={css({
-            fontSize: { base: "18px", md: "20px" },
-            fontWeight: "bold",
-            color: "#7c2d12",
-            mb: "16px",
+            fontSize: { base: '18px', md: '20px' },
+            fontWeight: 'bold',
+            color: '#7c2d12',
+            mb: '16px',
           })}
         >
-          {t("harmony.strategyTitle")}
+          {t('harmony.strategyTitle')}
         </h3>
 
         <div
           className={css({
-            display: "flex",
-            flexDirection: "column",
-            gap: "16px",
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '16px',
           })}
         >
           {/* Start with 2, Add the Third */}
           <div>
             <h4
               className={css({
-                fontSize: "15px",
-                fontWeight: "bold",
-                color: "#374151",
-                mb: "8px",
+                fontSize: '15px',
+                fontWeight: 'bold',
+                color: '#374151',
+                mb: '8px',
               })}
             >
-              {t("harmony.startWith2Title")}
+              {t('harmony.startWith2Title')}
             </h4>
             <p
               className={css({
-                fontSize: "14px",
-                color: "#6b7280",
-                lineHeight: "1.6",
+                fontSize: '14px',
+                color: '#6b7280',
+                lineHeight: '1.6',
               })}
             >
-              {t("harmony.startWith2")}
+              {t('harmony.startWith2')}
             </p>
           </div>
 
@@ -489,22 +482,22 @@ export function HarmonySection({
           <div>
             <h4
               className={css({
-                fontSize: "15px",
-                fontWeight: "bold",
-                color: "#374151",
-                mb: "8px",
+                fontSize: '15px',
+                fontWeight: 'bold',
+                color: '#374151',
+                mb: '8px',
               })}
             >
-              {t("harmony.useCommonTitle")}
+              {t('harmony.useCommonTitle')}
             </h4>
             <p
               className={css({
-                fontSize: "14px",
-                color: "#6b7280",
-                lineHeight: "1.6",
+                fontSize: '14px',
+                color: '#6b7280',
+                lineHeight: '1.6',
               })}
             >
-              {t("harmony.useCommon")}
+              {t('harmony.useCommon')}
             </p>
           </div>
 
@@ -512,22 +505,22 @@ export function HarmonySection({
           <div>
             <h4
               className={css({
-                fontSize: "15px",
-                fontWeight: "bold",
-                color: "#374151",
-                mb: "8px",
+                fontSize: '15px',
+                fontWeight: 'bold',
+                color: '#374151',
+                mb: '8px',
               })}
             >
-              {t("harmony.protectTitle")}
+              {t('harmony.protectTitle')}
             </h4>
             <p
               className={css({
-                fontSize: "14px",
-                color: "#6b7280",
-                lineHeight: "1.6",
+                fontSize: '14px',
+                color: '#6b7280',
+                lineHeight: '1.6',
               })}
             >
-              {t("harmony.protect")}
+              {t('harmony.protect')}
             </p>
           </div>
 
@@ -535,22 +528,22 @@ export function HarmonySection({
           <div>
             <h4
               className={css({
-                fontSize: "15px",
-                fontWeight: "bold",
-                color: "#374151",
-                mb: "8px",
+                fontSize: '15px',
+                fontWeight: 'bold',
+                color: '#374151',
+                mb: '8px',
               })}
             >
-              {t("harmony.blockTitle")}
+              {t('harmony.blockTitle')}
             </h4>
             <p
               className={css({
-                fontSize: "14px",
-                color: "#6b7280",
-                lineHeight: "1.6",
+                fontSize: '14px',
+                color: '#6b7280',
+                lineHeight: '1.6',
               })}
             >
-              {t("harmony.block")}
+              {t('harmony.block')}
             </p>
           </div>
 
@@ -558,74 +551,74 @@ export function HarmonySection({
           <div>
             <h4
               className={css({
-                fontSize: "15px",
-                fontWeight: "bold",
-                color: "#374151",
-                mb: "8px",
+                fontSize: '15px',
+                fontWeight: 'bold',
+                color: '#374151',
+                mb: '8px',
               })}
             >
-              {t("harmony.calculateTitle")}
+              {t('harmony.calculateTitle')}
             </h4>
             <p
               className={css({
-                fontSize: "14px",
-                color: "#6b7280",
-                lineHeight: "1.6",
+                fontSize: '14px',
+                color: '#6b7280',
+                lineHeight: '1.6',
               })}
             >
-              {t("harmony.calculate")}
+              {t('harmony.calculate')}
             </p>
           </div>
         </div>
       </div>
 
       {/* Quick Reference Tables */}
-      <div className={css({ mt: "24px" })}>
+      <div className={css({ mt: '24px' })}>
         <h3
           className={css({
-            fontSize: { base: "18px", md: "20px" },
-            fontWeight: "bold",
-            color: "#7c2d12",
-            mb: "16px",
+            fontSize: { base: '18px', md: '20px' },
+            fontWeight: 'bold',
+            color: '#7c2d12',
+            mb: '16px',
           })}
         >
-          {t("harmony.quickRefTitle")}
+          {t('harmony.quickRefTitle')}
         </h3>
 
         <div
           className={css({
-            display: "grid",
-            gridTemplateColumns: { base: "1fr", md: "repeat(3, 1fr)" },
-            gap: "16px",
+            display: 'grid',
+            gridTemplateColumns: { base: '1fr', md: 'repeat(3, 1fr)' },
+            gap: '16px',
           })}
         >
           {/* Arithmetic Table */}
           <div
             className={css({
-              p: "12px",
-              bg: "#f0fdf4",
-              border: "1px solid #86efac",
-              borderRadius: "6px",
+              p: '12px',
+              bg: '#f0fdf4',
+              border: '1px solid #86efac',
+              borderRadius: '6px',
             })}
           >
             <h4
               className={css({
-                fontSize: "14px",
-                fontWeight: "bold",
-                color: "#15803d",
-                mb: "8px",
+                fontSize: '14px',
+                fontWeight: 'bold',
+                color: '#15803d',
+                mb: '8px',
               })}
             >
-              {t("harmony.arithmetic")}
+              {t('harmony.arithmetic')}
             </h4>
             <ul
               className={css({
-                fontSize: "13px",
-                color: "#166534",
-                fontFamily: "monospace",
-                lineHeight: "1.6",
-                pl: "0",
-                listStyle: "none",
+                fontSize: '13px',
+                color: '#166534',
+                fontFamily: 'monospace',
+                lineHeight: '1.6',
+                pl: '0',
+                listStyle: 'none',
               })}
             >
               <li>(4, 6, 8)</li>
@@ -639,30 +632,30 @@ export function HarmonySection({
           {/* Geometric Table */}
           <div
             className={css({
-              p: "12px",
-              bg: "#fef3c7",
-              border: "1px solid #fcd34d",
-              borderRadius: "6px",
+              p: '12px',
+              bg: '#fef3c7',
+              border: '1px solid #fcd34d',
+              borderRadius: '6px',
             })}
           >
             <h4
               className={css({
-                fontSize: "14px",
-                fontWeight: "bold",
-                color: "#92400e",
-                mb: "8px",
+                fontSize: '14px',
+                fontWeight: 'bold',
+                color: '#92400e',
+                mb: '8px',
               })}
             >
-              {t("harmony.geometric")}
+              {t('harmony.geometric')}
             </h4>
             <ul
               className={css({
-                fontSize: "13px",
-                color: "#78350f",
-                fontFamily: "monospace",
-                lineHeight: "1.6",
-                pl: "0",
-                listStyle: "none",
+                fontSize: '13px',
+                color: '#78350f',
+                fontFamily: 'monospace',
+                lineHeight: '1.6',
+                pl: '0',
+                listStyle: 'none',
               })}
             >
               <li>(2, 8, 32)</li>
@@ -676,30 +669,30 @@ export function HarmonySection({
           {/* Harmonic Table */}
           <div
             className={css({
-              p: "12px",
-              bg: "#dbeafe",
-              border: "1px solid #93c5fd",
-              borderRadius: "6px",
+              p: '12px',
+              bg: '#dbeafe',
+              border: '1px solid #93c5fd',
+              borderRadius: '6px',
             })}
           >
             <h4
               className={css({
-                fontSize: "14px",
-                fontWeight: "bold",
-                color: "#1e40af",
-                mb: "8px",
+                fontSize: '14px',
+                fontWeight: 'bold',
+                color: '#1e40af',
+                mb: '8px',
               })}
             >
-              {t("harmony.harmonic")}
+              {t('harmony.harmonic')}
             </h4>
             <ul
               className={css({
-                fontSize: "13px",
-                color: "#1e3a8a",
-                fontFamily: "monospace",
-                lineHeight: "1.6",
-                pl: "0",
-                listStyle: "none",
+                fontSize: '13px',
+                color: '#1e3a8a',
+                fontFamily: 'monospace',
+                lineHeight: '1.6',
+                pl: '0',
+                listStyle: 'none',
               })}
             >
               <li>(3, 4, 6)</li>
@@ -712,5 +705,5 @@ export function HarmonySection({
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/guide-sections/OverviewSection.tsx b/apps/web/src/arcade-games/rithmomachia/components/guide-sections/OverviewSection.tsx
index 905ceca0..a7c77221 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/guide-sections/OverviewSection.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/guide-sections/OverviewSection.tsx
@@ -1,110 +1,106 @@
-import { useTranslations } from "next-intl";
-import { css } from "../../../../../styled-system/css";
-import { RithmomachiaBoard, type ExamplePiece } from "../RithmomachiaBoard";
+import { useTranslations } from 'next-intl'
+import { css } from '../../../../../styled-system/css'
+import { RithmomachiaBoard, type ExamplePiece } from '../RithmomachiaBoard'
 
-export function OverviewSection({
-  useNativeAbacusNumbers,
-}: {
-  useNativeAbacusNumbers: boolean;
-}) {
-  const t = useTranslations("rithmomachia.guide");
+export function OverviewSection({ useNativeAbacusNumbers }: { useNativeAbacusNumbers: boolean }) {
+  const t = useTranslations('rithmomachia.guide')
 
   // Initial board setup - full starting position
   const initialSetup: ExamplePiece[] = [
     // BLACK - Column A
-    { square: "A1", type: "S", color: "B", value: 28 },
-    { square: "A2", type: "S", color: "B", value: 66 },
-    { square: "A7", type: "S", color: "B", value: 225 },
-    { square: "A8", type: "S", color: "B", value: 361 },
+    { square: 'A1', type: 'S', color: 'B', value: 28 },
+    { square: 'A2', type: 'S', color: 'B', value: 66 },
+    { square: 'A7', type: 'S', color: 'B', value: 225 },
+    { square: 'A8', type: 'S', color: 'B', value: 361 },
     // BLACK - Column B
-    { square: "B1", type: "S", color: "B", value: 28 },
-    { square: "B2", type: "S", color: "B", value: 66 },
-    { square: "B3", type: "T", color: "B", value: 36 },
-    { square: "B4", type: "T", color: "B", value: 30 },
-    { square: "B5", type: "T", color: "B", value: 56 },
-    { square: "B6", type: "T", color: "B", value: 64 },
-    { square: "B7", type: "S", color: "B", value: 120 },
-    { square: "B8", type: "P", color: "B", value: 36 },
+    { square: 'B1', type: 'S', color: 'B', value: 28 },
+    { square: 'B2', type: 'S', color: 'B', value: 66 },
+    { square: 'B3', type: 'T', color: 'B', value: 36 },
+    { square: 'B4', type: 'T', color: 'B', value: 30 },
+    { square: 'B5', type: 'T', color: 'B', value: 56 },
+    { square: 'B6', type: 'T', color: 'B', value: 64 },
+    { square: 'B7', type: 'S', color: 'B', value: 120 },
+    { square: 'B8', type: 'P', color: 'B', value: 36 },
     // BLACK - Column C
-    { square: "C1", type: "T", color: "B", value: 16 },
-    { square: "C2", type: "T", color: "B", value: 12 },
-    { square: "C3", type: "C", color: "B", value: 9 },
-    { square: "C4", type: "C", color: "B", value: 25 },
-    { square: "C5", type: "C", color: "B", value: 49 },
-    { square: "C6", type: "C", color: "B", value: 81 },
-    { square: "C7", type: "T", color: "B", value: 90 },
-    { square: "C8", type: "T", color: "B", value: 100 },
+    { square: 'C1', type: 'T', color: 'B', value: 16 },
+    { square: 'C2', type: 'T', color: 'B', value: 12 },
+    { square: 'C3', type: 'C', color: 'B', value: 9 },
+    { square: 'C4', type: 'C', color: 'B', value: 25 },
+    { square: 'C5', type: 'C', color: 'B', value: 49 },
+    { square: 'C6', type: 'C', color: 'B', value: 81 },
+    { square: 'C7', type: 'T', color: 'B', value: 90 },
+    { square: 'C8', type: 'T', color: 'B', value: 100 },
     // BLACK - Column D
-    { square: "D3", type: "C", color: "B", value: 3 },
-    { square: "D4", type: "C", color: "B", value: 5 },
-    { square: "D5", type: "C", color: "B", value: 7 },
-    { square: "D6", type: "C", color: "B", value: 9 },
+    { square: 'D3', type: 'C', color: 'B', value: 3 },
+    { square: 'D4', type: 'C', color: 'B', value: 5 },
+    { square: 'D5', type: 'C', color: 'B', value: 7 },
+    { square: 'D6', type: 'C', color: 'B', value: 9 },
     // WHITE - Column M
-    { square: "M3", type: "C", color: "W", value: 8 },
-    { square: "M4", type: "C", color: "W", value: 6 },
-    { square: "M5", type: "C", color: "W", value: 4 },
-    { square: "M6", type: "C", color: "W", value: 2 },
+    { square: 'M3', type: 'C', color: 'W', value: 8 },
+    { square: 'M4', type: 'C', color: 'W', value: 6 },
+    { square: 'M5', type: 'C', color: 'W', value: 4 },
+    { square: 'M6', type: 'C', color: 'W', value: 2 },
     // WHITE - Column N
-    { square: "N1", type: "T", color: "W", value: 81 },
-    { square: "N2", type: "T", color: "W", value: 72 },
-    { square: "N3", type: "C", color: "W", value: 64 },
-    { square: "N4", type: "C", color: "W", value: 16 },
-    { square: "N5", type: "C", color: "W", value: 16 },
-    { square: "N6", type: "C", color: "W", value: 4 },
-    { square: "N7", type: "T", color: "W", value: 6 },
-    { square: "N8", type: "T", color: "W", value: 9 },
+    { square: 'N1', type: 'T', color: 'W', value: 81 },
+    { square: 'N2', type: 'T', color: 'W', value: 72 },
+    { square: 'N3', type: 'C', color: 'W', value: 64 },
+    { square: 'N4', type: 'C', color: 'W', value: 16 },
+    { square: 'N5', type: 'C', color: 'W', value: 16 },
+    { square: 'N6', type: 'C', color: 'W', value: 4 },
+    { square: 'N7', type: 'T', color: 'W', value: 6 },
+    { square: 'N8', type: 'T', color: 'W', value: 9 },
     // WHITE - Column O
-    { square: "O1", type: "S", color: "W", value: 153 },
-    { square: "O2", type: "P", color: "W", value: 64 },
-    { square: "O3", type: "T", color: "W", value: 72 },
-    { square: "O4", type: "T", color: "W", value: 20 },
-    { square: "O5", type: "T", color: "W", value: 20 },
-    { square: "O6", type: "T", color: "W", value: 25 },
-    { square: "O7", type: "S", color: "W", value: 45 },
-    { square: "O8", type: "S", color: "W", value: 15 },
+    { square: 'O1', type: 'S', color: 'W', value: 153 },
+    { square: 'O2', type: 'P', color: 'W', value: 64 },
+    { square: 'O3', type: 'T', color: 'W', value: 72 },
+    { square: 'O4', type: 'T', color: 'W', value: 20 },
+    { square: 'O5', type: 'T', color: 'W', value: 20 },
+    { square: 'O6', type: 'T', color: 'W', value: 25 },
+    { square: 'O7', type: 'S', color: 'W', value: 45 },
+    { square: 'O8', type: 'S', color: 'W', value: 15 },
     // WHITE - Column P
-    { square: "P1", type: "S", color: "W", value: 289 },
-    { square: "P2", type: "S", color: "W", value: 169 },
-    { square: "P7", type: "S", color: "W", value: 81 },
-    { square: "P8", type: "S", color: "W", value: 25 },
-  ];
+    { square: 'P1', type: 'S', color: 'W', value: 289 },
+    { square: 'P2', type: 'S', color: 'W', value: 169 },
+    { square: 'P7', type: 'S', color: 'W', value: 81 },
+    { square: 'P8', type: 'S', color: 'W', value: 25 },
+  ]
 
   return (
     <div data-section="overview">
       <h3
         className={css({
-          fontSize: { base: "20px", md: "24px" },
-          fontWeight: "bold",
-          color: "#7c2d12",
-          mb: "16px",
+          fontSize: { base: '20px', md: '24px' },
+          fontWeight: 'bold',
+          color: '#7c2d12',
+          mb: '16px',
         })}
       >
-        {t("overview.goalTitle")}
+        {t('overview.goalTitle')}
       </h3>
       <p
         className={css({
-          fontSize: "16px",
-          lineHeight: "1.6",
-          mb: "20px",
-          color: "#374151",
+          fontSize: '16px',
+          lineHeight: '1.6',
+          mb: '20px',
+          color: '#374151',
         })}
       >
-        {t("overview.goal")}
+        {t('overview.goal')}
       </p>
 
       <h3
         className={css({
-          fontSize: { base: "18px", md: "20px" },
-          fontWeight: "bold",
-          color: "#7c2d12",
-          mb: "12px",
-          mt: "24px",
+          fontSize: { base: '18px', md: '20px' },
+          fontWeight: 'bold',
+          color: '#7c2d12',
+          mb: '12px',
+          mt: '24px',
         })}
       >
-        {t("overview.boardTitle")}
+        {t('overview.boardTitle')}
       </h3>
 
-      <div className={css({ mb: "20px" })}>
+      <div className={css({ mb: '20px' })}>
         <RithmomachiaBoard
           pieces={initialSetup}
           scale={0.6}
@@ -115,54 +111,54 @@ export function OverviewSection({
 
       <p
         className={css({
-          fontSize: "14px",
-          color: "#6b7280",
-          mb: "20px",
-          fontStyle: "italic",
+          fontSize: '14px',
+          color: '#6b7280',
+          mb: '20px',
+          fontStyle: 'italic',
         })}
       >
-        {t("overview.boardCaption")}
+        {t('overview.boardCaption')}
       </p>
 
       <ul
         className={css({
-          fontSize: "15px",
-          lineHeight: "1.8",
-          pl: "20px",
-          mb: "20px",
-          color: "#374151",
+          fontSize: '15px',
+          lineHeight: '1.8',
+          pl: '20px',
+          mb: '20px',
+          color: '#374151',
         })}
       >
-        <li>{t("overview.boardSize")}</li>
-        <li>{t("overview.territory")}</li>
-        <li>{t("overview.enemyTerritory")}</li>
+        <li>{t('overview.boardSize')}</li>
+        <li>{t('overview.territory')}</li>
+        <li>{t('overview.enemyTerritory')}</li>
       </ul>
 
       <h3
         className={css({
-          fontSize: { base: "18px", md: "20px" },
-          fontWeight: "bold",
-          color: "#7c2d12",
-          mb: "12px",
-          mt: "24px",
+          fontSize: { base: '18px', md: '20px' },
+          fontWeight: 'bold',
+          color: '#7c2d12',
+          mb: '12px',
+          mt: '24px',
         })}
       >
-        {t("overview.howToPlayTitle")}
+        {t('overview.howToPlayTitle')}
       </h3>
       <ol
         className={css({
-          fontSize: "15px",
-          lineHeight: "1.8",
-          pl: "20px",
-          color: "#374151",
+          fontSize: '15px',
+          lineHeight: '1.8',
+          pl: '20px',
+          color: '#374151',
         })}
       >
-        <li>{t("overview.step1")}</li>
-        <li>{t("overview.step2")}</li>
-        <li>{t("overview.step3")}</li>
-        <li>{t("overview.step4")}</li>
-        <li>{t("overview.step5")}</li>
+        <li>{t('overview.step1')}</li>
+        <li>{t('overview.step2')}</li>
+        <li>{t('overview.step3')}</li>
+        <li>{t('overview.step4')}</li>
+        <li>{t('overview.step5')}</li>
       </ol>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/guide-sections/PiecesSection.tsx b/apps/web/src/arcade-games/rithmomachia/components/guide-sections/PiecesSection.tsx
index cd7e3045..d025c91e 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/guide-sections/PiecesSection.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/guide-sections/PiecesSection.tsx
@@ -1,8 +1,8 @@
-import { useTranslations } from "next-intl";
-import { css } from "../../../../../styled-system/css";
-import { PieceRenderer } from "../PieceRenderer";
-import { RithmomachiaBoard } from "../RithmomachiaBoard";
-import type { PieceType } from "../../types";
+import { useTranslations } from 'next-intl'
+import { css } from '../../../../../styled-system/css'
+import { PieceRenderer } from '../PieceRenderer'
+import { RithmomachiaBoard } from '../RithmomachiaBoard'
+import type { PieceType } from '../../types'
 
 /**
  * Helper to convert square names to crop area coordinates
@@ -10,105 +10,101 @@ import type { PieceType } from "../../types";
  * @param bottomRight - e.g. 'H6'
  */
 function squaresToCropArea(topLeft: string, bottomRight: string) {
-  const minCol = topLeft.charCodeAt(0) - 65; // A=0
-  const maxCol = bottomRight.charCodeAt(0) - 65;
-  const maxRow = Number.parseInt(topLeft.slice(1), 10);
-  const minRow = Number.parseInt(bottomRight.slice(1), 10);
-  return { minCol, maxCol, minRow, maxRow };
+  const minCol = topLeft.charCodeAt(0) - 65 // A=0
+  const maxCol = bottomRight.charCodeAt(0) - 65
+  const maxRow = Number.parseInt(topLeft.slice(1), 10)
+  const minRow = Number.parseInt(bottomRight.slice(1), 10)
+  return { minCol, maxCol, minRow, maxRow }
 }
 
-export function PiecesSection({
-  useNativeAbacusNumbers,
-}: {
-  useNativeAbacusNumbers: boolean;
-}) {
-  const t = useTranslations("rithmomachia.guide");
+export function PiecesSection({ useNativeAbacusNumbers }: { useNativeAbacusNumbers: boolean }) {
+  const t = useTranslations('rithmomachia.guide')
   const pieces: {
-    type: PieceType;
-    name: string;
-    movement: string;
-    chessAnalogy: string;
-    count: number;
-    exampleValue: number;
+    type: PieceType
+    name: string
+    movement: string
+    chessAnalogy: string
+    count: number
+    exampleValue: number
   }[] = [
     {
-      type: "C",
-      name: t("pieces.circle"),
-      movement: t("pieces.circleMove"),
-      chessAnalogy: "like a bishop",
+      type: 'C',
+      name: t('pieces.circle'),
+      movement: t('pieces.circleMove'),
+      chessAnalogy: 'like a bishop',
       count: 8,
       exampleValue: 64,
     },
     {
-      type: "T",
-      name: t("pieces.triangle"),
-      movement: t("pieces.triangleMove"),
-      chessAnalogy: "like a rook",
+      type: 'T',
+      name: t('pieces.triangle'),
+      movement: t('pieces.triangleMove'),
+      chessAnalogy: 'like a rook',
       count: 8,
       exampleValue: 64,
     },
     {
-      type: "S",
-      name: t("pieces.square"),
-      movement: t("pieces.squareMove"),
-      chessAnalogy: "like a queen",
+      type: 'S',
+      name: t('pieces.square'),
+      movement: t('pieces.squareMove'),
+      chessAnalogy: 'like a queen',
       count: 7,
       exampleValue: 64,
     },
     {
-      type: "P",
-      name: t("pieces.pyramidTitle"),
-      movement: t("pieces.pyramidMovement"),
-      chessAnalogy: "like a king",
+      type: 'P',
+      name: t('pieces.pyramidTitle'),
+      movement: t('pieces.pyramidMovement'),
+      chessAnalogy: 'like a king',
       count: 1,
       exampleValue: 64,
     },
-  ];
+  ]
 
   return (
     <div data-section="pieces">
       <h3
         className={css({
-          fontSize: { base: "20px", md: "24px" },
-          fontWeight: "bold",
-          color: "#7c2d12",
-          mb: "16px",
+          fontSize: { base: '20px', md: '24px' },
+          fontWeight: 'bold',
+          color: '#7c2d12',
+          mb: '16px',
         })}
       >
-        {t("pieces.title")}
+        {t('pieces.title')}
       </h3>
-      <p className={css({ fontSize: "15px", mb: "24px", color: "#374151" })}>
-        {t("pieces.description")}
+      <p className={css({ fontSize: '15px', mb: '24px', color: '#374151' })}>
+        {t('pieces.description')}
       </p>
 
       <div
         className={css({
-          display: "flex",
-          flexDirection: "column",
-          gap: "24px",
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '24px',
         })}
       >
         {pieces.map((piece) => (
           <div
             key={piece.type}
             className={css({
-              p: "16px",
-              bg: "#f9fafb",
-              borderRadius: "8px",
-              border: "2px solid #e5e7eb",
+              p: '16px',
+              bg: '#f9fafb',
+              borderRadius: '8px',
+              border: '2px solid #e5e7eb',
             })}
           >
             <div
               className={css({
-                display: "flex",
-                alignItems: "flex-start",
-                gap: "16px",
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: '16px',
               })}
             >
               <div
                 className={css({
-                  width: "80px",
-                  height: "80px",
+                  width: '80px',
+                  height: '80px',
                   flexShrink: 0,
                 })}
               >
@@ -120,48 +116,46 @@ export function PiecesSection({
                   useNativeAbacusNumbers={useNativeAbacusNumbers}
                 />
               </div>
-              <div className={css({ flex: 1, pt: "4px" })}>
+              <div className={css({ flex: 1, pt: '4px' })}>
                 <div
                   className={css({
-                    fontSize: "24px",
-                    fontWeight: "bold",
-                    color: "#111827",
-                    mb: "4px",
+                    fontSize: '24px',
+                    fontWeight: 'bold',
+                    color: '#111827',
+                    mb: '4px',
                   })}
                 >
                   {piece.exampleValue}
                 </div>
                 <h4
                   className={css({
-                    fontSize: "18px",
-                    fontWeight: "bold",
-                    color: "#111827",
-                    mb: "6px",
+                    fontSize: '18px',
+                    fontWeight: 'bold',
+                    color: '#111827',
+                    mb: '6px',
                   })}
                 >
                   {piece.name}
                 </h4>
                 <p
                   className={css({
-                    fontSize: "14px",
-                    color: "#6b7280",
-                    mb: "4px",
+                    fontSize: '14px',
+                    color: '#6b7280',
+                    mb: '4px',
                   })}
                 >
-                  {piece.movement}{" "}
-                  <span className={css({ fontStyle: "italic" })}>
-                    {piece.chessAnalogy}
-                  </span>
+                  {piece.movement}{' '}
+                  <span className={css({ fontStyle: 'italic' })}>{piece.chessAnalogy}</span>
                 </p>
                 <p
                   className={css({
-                    fontSize: "13px",
-                    color: "#9ca3af",
-                    fontWeight: "600",
+                    fontSize: '13px',
+                    color: '#9ca3af',
+                    fontWeight: '600',
                   })}
                 >
                   Count: {piece.count}
-                  {piece.count > 1 ? " per side" : ""}
+                  {piece.count > 1 ? ' per side' : ''}
                 </p>
               </div>
             </div>
@@ -172,61 +166,61 @@ export function PiecesSection({
       {/* Pyramid section */}
       <div
         className={css({
-          mt: "32px",
-          p: "20px",
-          bg: "rgba(251, 191, 36, 0.1)",
-          borderLeft: "4px solid #f59e0b",
-          borderRadius: "4px",
+          mt: '32px',
+          p: '20px',
+          bg: 'rgba(251, 191, 36, 0.1)',
+          borderLeft: '4px solid #f59e0b',
+          borderRadius: '4px',
         })}
       >
         <h4
           className={css({
-            fontSize: "18px",
-            fontWeight: "bold",
-            color: "#92400e",
-            mb: "12px",
+            fontSize: '18px',
+            fontWeight: 'bold',
+            color: '#92400e',
+            mb: '12px',
           })}
         >
-          {t("pieces.pyramidTitle")}
+          {t('pieces.pyramidTitle')}
         </h4>
         <p
           className={css({
-            fontSize: "14px",
-            color: "#78350f",
-            lineHeight: "1.6",
-            mb: "16px",
+            fontSize: '14px',
+            color: '#78350f',
+            lineHeight: '1.6',
+            mb: '16px',
           })}
         >
-          {t("pieces.pyramidIntro")}
+          {t('pieces.pyramidIntro')}
         </p>
 
         <div
           className={css({
-            display: "flex",
-            gap: "32px",
-            flexWrap: "wrap",
-            mt: "16px",
-            mb: "20px",
+            display: 'flex',
+            gap: '32px',
+            flexWrap: 'wrap',
+            mt: '16px',
+            mb: '20px',
           })}
         >
           {/* Black Pyramid */}
           <div>
             <p
               className={css({
-                fontSize: "13px",
-                fontWeight: "bold",
-                color: "#92400e",
-                mb: "8px",
-                textAlign: "center",
+                fontSize: '13px',
+                fontWeight: 'bold',
+                color: '#92400e',
+                mb: '8px',
+                textAlign: 'center',
               })}
             >
-              {t("pieces.blackPyramid")}:
+              {t('pieces.blackPyramid')}:
             </p>
             <div
               className={css({
-                width: "80px",
-                height: "80px",
-                margin: "0 auto",
+                width: '80px',
+                height: '80px',
+                margin: '0 auto',
               })}
             >
               <PieceRenderer
@@ -239,14 +233,14 @@ export function PiecesSection({
             </div>
             <p
               className={css({
-                fontSize: "13px",
-                color: "#78350f",
-                mt: "8px",
-                textAlign: "center",
-                fontWeight: "bold",
+                fontSize: '13px',
+                color: '#78350f',
+                mt: '8px',
+                textAlign: 'center',
+                fontWeight: 'bold',
               })}
             >
-              {t("pieces.blackPyramidValues")}
+              {t('pieces.blackPyramidValues')}
             </p>
           </div>
 
@@ -254,20 +248,20 @@ export function PiecesSection({
           <div>
             <p
               className={css({
-                fontSize: "13px",
-                fontWeight: "bold",
-                color: "#92400e",
-                mb: "8px",
-                textAlign: "center",
+                fontSize: '13px',
+                fontWeight: 'bold',
+                color: '#92400e',
+                mb: '8px',
+                textAlign: 'center',
               })}
             >
-              {t("pieces.whitePyramid")}:
+              {t('pieces.whitePyramid')}:
             </p>
             <div
               className={css({
-                width: "80px",
-                height: "80px",
-                margin: "0 auto",
+                width: '80px',
+                height: '80px',
+                margin: '0 auto',
               })}
             >
               <PieceRenderer
@@ -280,14 +274,14 @@ export function PiecesSection({
             </div>
             <p
               className={css({
-                fontSize: "13px",
-                color: "#78350f",
-                mt: "8px",
-                textAlign: "center",
-                fontWeight: "bold",
+                fontSize: '13px',
+                color: '#78350f',
+                mt: '8px',
+                textAlign: 'center',
+                fontWeight: 'bold',
               })}
             >
-              {t("pieces.whitePyramidValues")}
+              {t('pieces.whitePyramidValues')}
             </p>
           </div>
         </div>
@@ -295,55 +289,55 @@ export function PiecesSection({
         {/* How face selection works */}
         <div
           className={css({
-            bg: "white",
-            p: "16px",
-            borderRadius: "6px",
-            mb: "16px",
-            border: "1px solid #fbbf24",
+            bg: 'white',
+            p: '16px',
+            borderRadius: '6px',
+            mb: '16px',
+            border: '1px solid #fbbf24',
           })}
         >
           <p
             className={css({
-              fontSize: "14px",
-              fontWeight: "bold",
-              color: "#92400e",
-              mb: "12px",
+              fontSize: '14px',
+              fontWeight: 'bold',
+              color: '#92400e',
+              mb: '12px',
             })}
           >
-            {t("pieces.pyramidHowItWorks")}
+            {t('pieces.pyramidHowItWorks')}
           </p>
           <ul
             className={css({
-              fontSize: "13px",
-              color: "#78350f",
-              lineHeight: "1.8",
-              pl: "20px",
+              fontSize: '13px',
+              color: '#78350f',
+              lineHeight: '1.8',
+              pl: '20px',
             })}
           >
-            <li>{t("pieces.pyramidRule1")}</li>
-            <li>{t("pieces.pyramidRule2")}</li>
-            <li>{t("pieces.pyramidRule3")}</li>
-            <li>{t("pieces.pyramidRule4")}</li>
+            <li>{t('pieces.pyramidRule1')}</li>
+            <li>{t('pieces.pyramidRule2')}</li>
+            <li>{t('pieces.pyramidRule3')}</li>
+            <li>{t('pieces.pyramidRule4')}</li>
           </ul>
         </div>
 
         {/* Example */}
         <div
           className={css({
-            bg: "rgba(146, 64, 14, 0.1)",
-            p: "12px",
-            borderRadius: "6px",
-            mb: "20px",
+            bg: 'rgba(146, 64, 14, 0.1)',
+            p: '12px',
+            borderRadius: '6px',
+            mb: '20px',
           })}
         >
           <p
             className={css({
-              fontSize: "13px",
-              color: "#78350f",
-              lineHeight: "1.6",
+              fontSize: '13px',
+              color: '#78350f',
+              lineHeight: '1.6',
             })}
           >
-            <strong>{t("pieces.example")}</strong> {t("pieces.pyramidExample")}
+            <strong>{t('pieces.example')}</strong> {t('pieces.pyramidExample')}
           </p>
         </div>
 
@@ -351,44 +345,44 @@ export function PiecesSection({
         <div>
           <h5
             className={css({
-              fontSize: "15px",
-              fontWeight: "bold",
-              color: "#92400e",
-              mb: "12px",
+              fontSize: '15px',
+              fontWeight: 'bold',
+              color: '#92400e',
+              mb: '12px',
             })}
           >
-            {t("pieces.pyramidVisualTitle")}
+            {t('pieces.pyramidVisualTitle')}
           </h5>
           <p
             className={css({
-              fontSize: "13px",
-              color: "#78350f",
-              mb: "12px",
-              lineHeight: "1.6",
+              fontSize: '13px',
+              color: '#78350f',
+              mb: '12px',
+              lineHeight: '1.6',
             })}
           >
-            {t("pieces.pyramidVisualDesc")}
+            {t('pieces.pyramidVisualDesc')}
           </p>
 
           <div
             className={css({
-              display: "flex",
-              justifyContent: "center",
-              mb: "12px",
+              display: 'flex',
+              justifyContent: 'center',
+              mb: '12px',
             })}
           >
             <RithmomachiaBoard
               pieces={[
                 // White Pyramid at H5
-                { square: "H5", type: "P", color: "W", value: 49 },
+                { square: 'H5', type: 'P', color: 'W', value: 49 },
                 // Black pieces that can be captured
-                { square: "I5", type: "T", color: "B", value: 16 },
-                { square: "H6", type: "S", color: "B", value: 49 },
-                { square: "G5", type: "C", color: "B", value: 25 },
+                { square: 'I5', type: 'T', color: 'B', value: 16 },
+                { square: 'H6', type: 'S', color: 'B', value: 49 },
+                { square: 'G5', type: 'C', color: 'B', value: 25 },
               ]}
               scale={0.4}
-              cropArea={squaresToCropArea("F7", "J4")}
-              highlightSquares={["H5", "I5", "H6", "G5"]}
+              cropArea={squaresToCropArea('F7', 'J4')}
+              highlightSquares={['H5', 'I5', 'H6', 'G5']}
               showLabels={true}
               useNativeAbacusNumbers={useNativeAbacusNumbers}
             />
@@ -396,37 +390,37 @@ export function PiecesSection({
 
           <div
             className={css({
-              bg: "white",
-              p: "12px",
-              borderRadius: "6px",
-              border: "1px solid #fbbf24",
+              bg: 'white',
+              p: '12px',
+              borderRadius: '6px',
+              border: '1px solid #fbbf24',
             })}
           >
             <p
               className={css({
-                fontSize: "13px",
-                fontWeight: "bold",
-                color: "#92400e",
-                mb: "8px",
+                fontSize: '13px',
+                fontWeight: 'bold',
+                color: '#92400e',
+                mb: '8px',
               })}
             >
-              {t("pieces.pyramidCaptureOptions")}
+              {t('pieces.pyramidCaptureOptions')}
             </p>
             <ul
               className={css({
-                fontSize: "13px",
-                color: "#78350f",
-                lineHeight: "1.8",
-                pl: "20px",
+                fontSize: '13px',
+                color: '#78350f',
+                lineHeight: '1.8',
+                pl: '20px',
               })}
             >
-              <li>{t("pieces.pyramidOption1")}</li>
-              <li>{t("pieces.pyramidOption2")}</li>
-              <li>{t("pieces.pyramidOption3")}</li>
+              <li>{t('pieces.pyramidOption1')}</li>
+              <li>{t('pieces.pyramidOption2')}</li>
+              <li>{t('pieces.pyramidOption3')}</li>
             </ul>
           </div>
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/guide-sections/StrategySection.tsx b/apps/web/src/arcade-games/rithmomachia/components/guide-sections/StrategySection.tsx
index 8e6cdbe2..5ce724d5 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/guide-sections/StrategySection.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/guide-sections/StrategySection.tsx
@@ -1,6 +1,6 @@
-import { useTranslations } from "next-intl";
-import { css } from "../../../../../styled-system/css";
-import { RithmomachiaBoard, type ExamplePiece } from "../RithmomachiaBoard";
+import { useTranslations } from 'next-intl'
+import { css } from '../../../../../styled-system/css'
+import { RithmomachiaBoard, type ExamplePiece } from '../RithmomachiaBoard'
 
 /**
  * Helper to convert square names to crop area coordinates
@@ -8,218 +8,214 @@ import { RithmomachiaBoard, type ExamplePiece } from "../RithmomachiaBoard";
  * @param bottomRight - e.g. 'H6'
  */
 function squaresToCropArea(topLeft: string, bottomRight: string) {
-  const minCol = topLeft.charCodeAt(0) - 65; // A=0
-  const maxCol = bottomRight.charCodeAt(0) - 65;
-  const maxRow = Number.parseInt(topLeft.slice(1), 10);
-  const minRow = Number.parseInt(bottomRight.slice(1), 10);
-  return { minCol, maxCol, minRow, maxRow };
+  const minCol = topLeft.charCodeAt(0) - 65 // A=0
+  const maxCol = bottomRight.charCodeAt(0) - 65
+  const maxRow = Number.parseInt(topLeft.slice(1), 10)
+  const minRow = Number.parseInt(bottomRight.slice(1), 10)
+  return { minCol, maxCol, minRow, maxRow }
 }
 
-export function StrategySection({
-  useNativeAbacusNumbers,
-}: {
-  useNativeAbacusNumbers: boolean;
-}) {
-  const t = useTranslations("rithmomachia.guide");
+export function StrategySection({ useNativeAbacusNumbers }: { useNativeAbacusNumbers: boolean }) {
+  const t = useTranslations('rithmomachia.guide')
 
   // Example: Good opening position with central control
   const openingExample: ExamplePiece[] = [
     // White pieces controlling center
-    { square: "E4", type: "T", color: "W", value: 20 },
-    { square: "F3", type: "C", color: "W", value: 9 },
-    { square: "G3", type: "C", color: "W", value: 16 },
+    { square: 'E4', type: 'T', color: 'W', value: 20 },
+    { square: 'F3', type: 'C', color: 'W', value: 9 },
+    { square: 'G3', type: 'C', color: 'W', value: 16 },
     // Black pieces
-    { square: "E6", type: "T", color: "B", value: 28 },
-    { square: "F7", type: "C", color: "B", value: 9 },
-  ];
+    { square: 'E6', type: 'T', color: 'B', value: 28 },
+    { square: 'F7', type: 'C', color: 'B', value: 9 },
+  ]
 
   // Example: Helper network for complex captures
   const helperNetworkExample: ExamplePiece[] = [
     // White's helper network
-    { square: "D4", type: "C", color: "W", value: 4 },
-    { square: "E4", type: "C", color: "W", value: 5 },
-    { square: "F4", type: "C", color: "W", value: 6 },
+    { square: 'D4', type: 'C', color: 'W', value: 4 },
+    { square: 'E4', type: 'C', color: 'W', value: 5 },
+    { square: 'F4', type: 'C', color: 'W', value: 6 },
     // Black target that can be captured via helpers
-    { square: "G4", type: "C", color: "B", value: 9 }, // 4+5=9
-  ];
+    { square: 'G4', type: 'C', color: 'B', value: 9 }, // 4+5=9
+  ]
 
   // Example: Defensive positioning
   const defensiveExample: ExamplePiece[] = [
     // White pyramid protected by support pieces
-    { square: "E4", type: "P", color: "W", value: 36 },
-    { square: "D4", type: "C", color: "W", value: 9 },
-    { square: "F4", type: "T", color: "W", value: 20 },
+    { square: 'E4', type: 'P', color: 'W', value: 36 },
+    { square: 'D4', type: 'C', color: 'W', value: 9 },
+    { square: 'F4', type: 'T', color: 'W', value: 20 },
     // Black attackers
-    { square: "E6", type: "S", color: "B", value: 36 },
-  ];
+    { square: 'E6', type: 'S', color: 'B', value: 36 },
+  ]
 
   // Example: Arithmetic harmony setup
   const harmonySetupExample: ExamplePiece[] = [
     // White pieces forming arithmetic progression: 6, 9, 12
-    { square: "E6", type: "C", color: "W", value: 6 },
-    { square: "F6", type: "C", color: "W", value: 9 },
-    { square: "G6", type: "T", color: "W", value: 12 },
-  ];
+    { square: 'E6', type: 'C', color: 'W', value: 6 },
+    { square: 'F6', type: 'C', color: 'W', value: 9 },
+    { square: 'G6', type: 'T', color: 'W', value: 12 },
+  ]
 
   // Example: Exposed pyramid (common mistake)
   const exposedPyramidExample: ExamplePiece[] = [
     // White pyramid alone in Black territory
-    { square: "E7", type: "P", color: "W", value: 91 },
+    { square: 'E7', type: 'P', color: 'W', value: 91 },
     // Black pieces that can capture it
-    { square: "D7", type: "S", color: "B", value: 81 },
-    { square: "F7", type: "C", color: "B", value: 10 },
-  ];
+    { square: 'D7', type: 'S', color: 'B', value: 81 },
+    { square: 'F7', type: 'C', color: 'B', value: 10 },
+  ]
 
   // Example: Defensive mistake - pieces too close
   const defensiveMistakeExample: ExamplePiece[] = [
     // White pieces clustered together (vulnerable to same attack)
-    { square: "E4", type: "C", color: "W", value: 25 },
-    { square: "F4", type: "C", color: "W", value: 25 },
-    { square: "G4", type: "C", color: "W", value: 25 },
+    { square: 'E4', type: 'C', color: 'W', value: 25 },
+    { square: 'F4', type: 'C', color: 'W', value: 25 },
+    { square: 'G4', type: 'C', color: 'W', value: 25 },
     // Black piece that threatens all three
-    { square: "E5", type: "C", color: "B", value: 25 },
-  ];
+    { square: 'E5', type: 'C', color: 'B', value: 25 },
+  ]
 
   // Example: Tempo play with positional sacrifice
   const tempoExample: ExamplePiece[] = [
     // White sacrifices a low-value piece to gain better position
-    { square: "E5", type: "C", color: "W", value: 4 }, // Sacrifice target
-    { square: "G3", type: "P", color: "W", value: 36 }, // Pyramid advancing
+    { square: 'E5', type: 'C', color: 'W', value: 4 }, // Sacrifice target
+    { square: 'G3', type: 'P', color: 'W', value: 36 }, // Pyramid advancing
     // Black pieces
-    { square: "D6", type: "C", color: "B", value: 4 }, // Will capture but lose tempo
-    { square: "F7", type: "S", color: "B", value: 49 },
-  ];
+    { square: 'D6', type: 'C', color: 'B', value: 4 }, // Will capture but lose tempo
+    { square: 'F7', type: 'S', color: 'B', value: 49 },
+  ]
 
   return (
     <div data-section="strategy">
       <h3
         className={css({
-          fontSize: { base: "20px", md: "24px" },
-          fontWeight: "bold",
-          color: "#7c2d12",
-          mb: "16px",
+          fontSize: { base: '20px', md: '24px' },
+          fontWeight: 'bold',
+          color: '#7c2d12',
+          mb: '16px',
         })}
       >
-        {t("strategy.title")}
+        {t('strategy.title')}
       </h3>
       <p
         className={css({
-          fontSize: "15px",
-          lineHeight: "1.6",
-          mb: "24px",
-          color: "#374151",
+          fontSize: '15px',
+          lineHeight: '1.6',
+          mb: '24px',
+          color: '#374151',
         })}
       >
-        {t("strategy.intro")}
+        {t('strategy.intro')}
       </p>
 
       {/* Opening Principles */}
       <h4
         className={css({
-          fontSize: "18px",
-          fontWeight: "bold",
-          color: "#111827",
-          mb: "12px",
-          mt: "20px",
+          fontSize: '18px',
+          fontWeight: 'bold',
+          color: '#111827',
+          mb: '12px',
+          mt: '20px',
         })}
       >
-        {t("strategy.openingPrinciples.title")}
+        {t('strategy.openingPrinciples.title')}
       </h4>
 
       <div
         className={css({
-          display: "flex",
-          flexDirection: "column",
-          gap: "12px",
-          mb: "20px",
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px',
+          mb: '20px',
         })}
       >
         <div
           className={css({
-            p: "12px",
-            bg: "#f0fdf4",
-            borderRadius: "6px",
-            border: "1px solid #86efac",
+            p: '12px',
+            bg: '#f0fdf4',
+            borderRadius: '6px',
+            border: '1px solid #86efac',
           })}
         >
           <p
             className={css({
-              fontSize: "14px",
-              fontWeight: "bold",
-              color: "#15803d",
-              mb: "4px",
+              fontSize: '14px',
+              fontWeight: 'bold',
+              color: '#15803d',
+              mb: '4px',
             })}
           >
-            {t("strategy.openingPrinciples.controlCenter.title")}
+            {t('strategy.openingPrinciples.controlCenter.title')}
           </p>
-          <p className={css({ fontSize: "13px", color: "#166534" })}>
-            {t("strategy.openingPrinciples.controlCenter.desc")}
+          <p className={css({ fontSize: '13px', color: '#166534' })}>
+            {t('strategy.openingPrinciples.controlCenter.desc')}
           </p>
         </div>
         <div
           className={css({
-            p: "12px",
-            bg: "#f0fdf4",
-            borderRadius: "6px",
-            border: "1px solid #86efac",
+            p: '12px',
+            bg: '#f0fdf4',
+            borderRadius: '6px',
+            border: '1px solid #86efac',
           })}
         >
           <p
             className={css({
-              fontSize: "14px",
-              fontWeight: "bold",
-              color: "#15803d",
-              mb: "4px",
+              fontSize: '14px',
+              fontWeight: 'bold',
+              color: '#15803d',
+              mb: '4px',
             })}
           >
-            {t("strategy.openingPrinciples.developCircles.title")}
+            {t('strategy.openingPrinciples.developCircles.title')}
           </p>
-          <p className={css({ fontSize: "13px", color: "#166534" })}>
-            {t("strategy.openingPrinciples.developCircles.desc")}
+          <p className={css({ fontSize: '13px', color: '#166534' })}>
+            {t('strategy.openingPrinciples.developCircles.desc')}
           </p>
         </div>
         <div
           className={css({
-            p: "12px",
-            bg: "#f0fdf4",
-            borderRadius: "6px",
-            border: "1px solid #86efac",
+            p: '12px',
+            bg: '#f0fdf4',
+            borderRadius: '6px',
+            border: '1px solid #86efac',
           })}
         >
           <p
             className={css({
-              fontSize: "14px",
-              fontWeight: "bold",
-              color: "#15803d",
-              mb: "4px",
+              fontSize: '14px',
+              fontWeight: 'bold',
+              color: '#15803d',
+              mb: '4px',
             })}
           >
-            {t("strategy.openingPrinciples.protectPyramid.title")}
+            {t('strategy.openingPrinciples.protectPyramid.title')}
           </p>
-          <p className={css({ fontSize: "13px", color: "#166534" })}>
-            {t("strategy.openingPrinciples.protectPyramid.desc")}
+          <p className={css({ fontSize: '13px', color: '#166534' })}>
+            {t('strategy.openingPrinciples.protectPyramid.desc')}
           </p>
         </div>
         <div
           className={css({
-            p: "12px",
-            bg: "#f0fdf4",
-            borderRadius: "6px",
-            border: "1px solid #86efac",
+            p: '12px',
+            bg: '#f0fdf4',
+            borderRadius: '6px',
+            border: '1px solid #86efac',
           })}
         >
           <p
             className={css({
-              fontSize: "14px",
-              fontWeight: "bold",
-              color: "#15803d",
-              mb: "4px",
+              fontSize: '14px',
+              fontWeight: 'bold',
+              color: '#15803d',
+              mb: '4px',
             })}
           >
-            {t("strategy.openingPrinciples.knowNumbers.title")}
+            {t('strategy.openingPrinciples.knowNumbers.title')}
           </p>
-          <p className={css({ fontSize: "13px", color: "#166534" })}>
-            {t("strategy.openingPrinciples.knowNumbers.desc")}
+          <p className={css({ fontSize: '13px', color: '#166534' })}>
+            {t('strategy.openingPrinciples.knowNumbers.desc')}
           </p>
         </div>
       </div>
@@ -227,237 +223,235 @@ export function StrategySection({
       {/* Opening Example */}
       <div
         className={css({
-          mb: "24px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '24px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "12px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '12px',
           })}
         >
           Example: Good Opening Position
         </p>
-        <div className={css({ display: "flex", justifyContent: "center" })}>
+        <div className={css({ display: 'flex', justifyContent: 'center' })}>
           <RithmomachiaBoard
             pieces={openingExample}
             scale={0.4}
-            cropArea={squaresToCropArea("D8", "H2")}
-            highlightSquares={["E4", "F3", "G3"]}
+            cropArea={squaresToCropArea('D8', 'H2')}
+            highlightSquares={['E4', 'F3', 'G3']}
             showLabels={true}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
           />
         </div>
         <p
           className={css({
-            fontSize: "12px",
-            color: "#9ca3af",
-            mt: "8px",
-            textAlign: "center",
-            fontStyle: "italic",
+            fontSize: '12px',
+            color: '#9ca3af',
+            mt: '8px',
+            textAlign: 'center',
+            fontStyle: 'italic',
           })}
         >
-          White controls the center with mobile pieces creating flexible capture
-          opportunities
+          White controls the center with mobile pieces creating flexible capture opportunities
         </p>
       </div>
 
       {/* Mid-Game Tactics */}
       <h4
         className={css({
-          fontSize: "18px",
-          fontWeight: "bold",
-          color: "#111827",
-          mb: "12px",
-          mt: "24px",
+          fontSize: '18px',
+          fontWeight: 'bold',
+          color: '#111827',
+          mb: '12px',
+          mt: '24px',
         })}
       >
-        {t("strategy.midGame.title")}
+        {t('strategy.midGame.title')}
       </h4>
 
       <div
         className={css({
-          mb: "16px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '16px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '8px',
           })}
         >
-          {t("strategy.midGame.helperNetworks.title")}
+          {t('strategy.midGame.helperNetworks.title')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b7280" })}>
-          {t("strategy.midGame.helperNetworks.desc")}
+        <p className={css({ fontSize: '13px', color: '#6b7280' })}>
+          {t('strategy.midGame.helperNetworks.desc')}
         </p>
       </div>
 
       <div
         className={css({
-          mb: "16px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '16px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '8px',
           })}
         >
-          {t("strategy.midGame.createThreats.title")}
+          {t('strategy.midGame.createThreats.title')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b7280" })}>
-          {t("strategy.midGame.createThreats.desc")}
+        <p className={css({ fontSize: '13px', color: '#6b7280' })}>
+          {t('strategy.midGame.createThreats.desc')}
         </p>
       </div>
 
       <div
         className={css({
-          mb: "16px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '16px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '8px',
           })}
         >
-          {t("strategy.midGame.thinkDefensively.title")}
+          {t('strategy.midGame.thinkDefensively.title')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b7280" })}>
-          {t("strategy.midGame.thinkDefensively.desc")}
+        <p className={css({ fontSize: '13px', color: '#6b7280' })}>
+          {t('strategy.midGame.thinkDefensively.desc')}
         </p>
       </div>
 
       <div
         className={css({
-          mb: "20px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '20px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '8px',
           })}
         >
-          {t("strategy.midGame.exchangeWhenAhead.title")}
+          {t('strategy.midGame.exchangeWhenAhead.title')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b7280" })}>
-          {t("strategy.midGame.exchangeWhenAhead.desc")}
+        <p className={css({ fontSize: '13px', color: '#6b7280' })}>
+          {t('strategy.midGame.exchangeWhenAhead.desc')}
         </p>
       </div>
 
       {/* Helper Network Example */}
       <div
         className={css({
-          mb: "16px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '16px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "12px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '12px',
           })}
         >
           Example: Helper Network
         </p>
-        <div className={css({ display: "flex", justifyContent: "center" })}>
+        <div className={css({ display: 'flex', justifyContent: 'center' })}>
           <RithmomachiaBoard
             pieces={helperNetworkExample}
             scale={0.4}
-            cropArea={squaresToCropArea("C5", "H3")}
-            highlightSquares={["D4", "E4", "F4", "G4"]}
+            cropArea={squaresToCropArea('C5', 'H3')}
+            highlightSquares={['D4', 'E4', 'F4', 'G4']}
             showLabels={true}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
           />
         </div>
         <p
           className={css({
-            fontSize: "12px",
-            color: "#9ca3af",
-            mt: "8px",
-            textAlign: "center",
-            fontStyle: "italic",
+            fontSize: '12px',
+            color: '#9ca3af',
+            mt: '8px',
+            textAlign: 'center',
+            fontStyle: 'italic',
           })}
         >
-          White pieces 4, 5, 6 form a helper network that can capture
-          Black&apos;s 9 (4+5=9)
+          White pieces 4, 5, 6 form a helper network that can capture Black&apos;s 9 (4+5=9)
         </p>
       </div>
 
       {/* Defensive Positioning Example */}
       <div
         className={css({
-          mb: "24px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '24px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "12px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '12px',
           })}
         >
           Example: Defensive Positioning
         </p>
-        <div className={css({ display: "flex", justifyContent: "center" })}>
+        <div className={css({ display: 'flex', justifyContent: 'center' })}>
           <RithmomachiaBoard
             pieces={defensiveExample}
             scale={0.4}
-            cropArea={squaresToCropArea("C7", "G3")}
-            highlightSquares={["E4", "D4", "F4"]}
+            cropArea={squaresToCropArea('C7', 'G3')}
+            highlightSquares={['E4', 'D4', 'F4']}
             showLabels={true}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
           />
         </div>
         <p
           className={css({
-            fontSize: "12px",
-            color: "#9ca3af",
-            mt: "8px",
-            textAlign: "center",
-            fontStyle: "italic",
+            fontSize: '12px',
+            color: '#9ca3af',
+            mt: '8px',
+            textAlign: 'center',
+            fontStyle: 'italic',
           })}
         >
           White Pyramid protected by supporting pieces
@@ -467,52 +461,52 @@ export function StrategySection({
       {/* Paths to Victory */}
       <h4
         className={css({
-          fontSize: "18px",
-          fontWeight: "bold",
-          color: "#111827",
-          mb: "12px",
-          mt: "24px",
+          fontSize: '18px',
+          fontWeight: 'bold',
+          color: '#111827',
+          mb: '12px',
+          mt: '24px',
         })}
       >
-        {t("strategy.victoryPaths.title")}
+        {t('strategy.victoryPaths.title')}
       </h4>
 
       <div
         className={css({
-          mb: "16px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '16px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '8px',
           })}
         >
-          {t("strategy.victoryPaths.harmony.title")}
+          {t('strategy.victoryPaths.harmony.title')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b7280", mb: "8px" })}>
-          {t("strategy.victoryPaths.harmony.desc")}
+        <p className={css({ fontSize: '13px', color: '#6b7280', mb: '8px' })}>
+          {t('strategy.victoryPaths.harmony.desc')}
         </p>
-        <ul className={css({ fontSize: "13px", color: "#6b7280", pl: "20px" })}>
+        <ul className={css({ fontSize: '13px', color: '#6b7280', pl: '20px' })}>
           <li
             dangerouslySetInnerHTML={{
-              __html: t.raw("strategy.victoryPaths.harmony.arithmetic"),
+              __html: t.raw('strategy.victoryPaths.harmony.arithmetic'),
             }}
           />
           <li
             dangerouslySetInnerHTML={{
-              __html: t.raw("strategy.victoryPaths.harmony.geometric"),
+              __html: t.raw('strategy.victoryPaths.harmony.geometric'),
             }}
           />
           <li
             dangerouslySetInnerHTML={{
-              __html: t.raw("strategy.victoryPaths.harmony.harmonic"),
+              __html: t.raw('strategy.victoryPaths.harmony.harmonic'),
             }}
           />
         </ul>
@@ -520,143 +514,142 @@ export function StrategySection({
 
       <div
         className={css({
-          mb: "16px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '16px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '8px',
           })}
         >
-          {t("strategy.victoryPaths.exhaustion.title")}
+          {t('strategy.victoryPaths.exhaustion.title')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b7280" })}>
-          {t("strategy.victoryPaths.exhaustion.desc")}
+        <p className={css({ fontSize: '13px', color: '#6b7280' })}>
+          {t('strategy.victoryPaths.exhaustion.desc')}
         </p>
       </div>
 
       <div
         className={css({
-          mb: "20px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #e5e7eb",
+          mb: '20px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #e5e7eb',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#111827",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#111827',
+            mb: '8px',
           })}
         >
-          {t("strategy.victoryPaths.points.title")}
+          {t('strategy.victoryPaths.points.title')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b7280" })}>
-          {t("strategy.victoryPaths.points.desc")}
+        <p className={css({ fontSize: '13px', color: '#6b7280' })}>
+          {t('strategy.victoryPaths.points.desc')}
         </p>
       </div>
 
       {/* Harmony Setup Example */}
       <div
         className={css({
-          mb: "24px",
-          p: "16px",
-          bg: "#f9fafb",
-          borderRadius: "8px",
-          border: "2px solid #86efac",
+          mb: '24px',
+          p: '16px',
+          bg: '#f9fafb',
+          borderRadius: '8px',
+          border: '2px solid #86efac',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#15803d",
-            mb: "12px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#15803d',
+            mb: '12px',
           })}
         >
           Example: Arithmetic Harmony Setup
         </p>
-        <div className={css({ display: "flex", justifyContent: "center" })}>
+        <div className={css({ display: 'flex', justifyContent: 'center' })}>
           <RithmomachiaBoard
             pieces={harmonySetupExample}
             scale={0.4}
-            cropArea={squaresToCropArea("D7", "H5")}
-            highlightSquares={["E6", "F6", "G6"]}
+            cropArea={squaresToCropArea('D7', 'H5')}
+            highlightSquares={['E6', 'F6', 'G6']}
             showLabels={true}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
           />
         </div>
         <p
           className={css({
-            fontSize: "12px",
-            color: "#166534",
-            mt: "8px",
-            textAlign: "center",
-            fontStyle: "italic",
+            fontSize: '12px',
+            color: '#166534',
+            mt: '8px',
+            textAlign: 'center',
+            fontStyle: 'italic',
           })}
         >
-          White pieces 6, 9, 12 in enemy territory form an arithmetic
-          progression (difference = 3)
+          White pieces 6, 9, 12 in enemy territory form an arithmetic progression (difference = 3)
         </p>
       </div>
 
       {/* Common Mistakes */}
       <div
         className={css({
-          mt: "24px",
-          mb: "20px",
-          p: "16px",
-          bg: "rgba(239, 68, 68, 0.1)",
-          borderLeft: "4px solid #ef4444",
-          borderRadius: "4px",
+          mt: '24px',
+          mb: '20px',
+          p: '16px',
+          bg: 'rgba(239, 68, 68, 0.1)',
+          borderLeft: '4px solid #ef4444',
+          borderRadius: '4px',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#991b1b",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#991b1b',
+            mb: '8px',
           })}
         >
-          {t("strategy.commonMistakes.title")}
+          {t('strategy.commonMistakes.title')}
         </p>
         <ul
           className={css({
-            fontSize: "14px",
-            color: "#7f1d1d",
-            lineHeight: "1.6",
-            pl: "20px",
+            fontSize: '14px',
+            color: '#7f1d1d',
+            lineHeight: '1.6',
+            pl: '20px',
           })}
         >
           <li
             dangerouslySetInnerHTML={{
-              __html: t.raw("strategy.commonMistakes.movingWithoutCalc"),
+              __html: t.raw('strategy.commonMistakes.movingWithoutCalc'),
             }}
           />
           <li
             dangerouslySetInnerHTML={{
-              __html: t.raw("strategy.commonMistakes.ignoringGeometry"),
+              __html: t.raw('strategy.commonMistakes.ignoringGeometry'),
             }}
           />
           <li
             dangerouslySetInnerHTML={{
-              __html: t.raw("strategy.commonMistakes.neglectingHarmony"),
+              __html: t.raw('strategy.commonMistakes.neglectingHarmony'),
             }}
           />
           <li
             dangerouslySetInnerHTML={{
-              __html: t.raw("strategy.commonMistakes.exposingPyramid"),
+              __html: t.raw('strategy.commonMistakes.exposingPyramid'),
             }}
           />
         </ul>
@@ -665,40 +658,40 @@ export function StrategySection({
       {/* Exposed Pyramid Example */}
       <div
         className={css({
-          mb: "16px",
-          p: "16px",
-          bg: "#fef2f2",
-          borderRadius: "8px",
-          border: "2px solid #fca5a5",
+          mb: '16px',
+          p: '16px',
+          bg: '#fef2f2',
+          borderRadius: '8px',
+          border: '2px solid #fca5a5',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#991b1b",
-            mb: "12px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#991b1b',
+            mb: '12px',
           })}
         >
           Example: Exposed Pyramid
         </p>
-        <div className={css({ display: "flex", justifyContent: "center" })}>
+        <div className={css({ display: 'flex', justifyContent: 'center' })}>
           <RithmomachiaBoard
             pieces={exposedPyramidExample}
             scale={0.4}
-            cropArea={squaresToCropArea("C8", "G6")}
-            highlightSquares={["E7"]}
+            cropArea={squaresToCropArea('C8', 'G6')}
+            highlightSquares={['E7']}
             showLabels={true}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
           />
         </div>
         <p
           className={css({
-            fontSize: "12px",
-            color: "#7f1d1d",
-            mt: "8px",
-            textAlign: "center",
-            fontStyle: "italic",
+            fontSize: '12px',
+            color: '#7f1d1d',
+            mt: '8px',
+            textAlign: 'center',
+            fontStyle: 'italic',
           })}
         >
           White Pyramid alone in enemy territory is vulnerable to capture
@@ -708,175 +701,173 @@ export function StrategySection({
       {/* Defensive Mistake Example */}
       <div
         className={css({
-          mb: "24px",
-          p: "16px",
-          bg: "#fef2f2",
-          borderRadius: "8px",
-          border: "2px solid #fca5a5",
+          mb: '24px',
+          p: '16px',
+          bg: '#fef2f2',
+          borderRadius: '8px',
+          border: '2px solid #fca5a5',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#991b1b",
-            mb: "12px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#991b1b',
+            mb: '12px',
           })}
         >
           Example: Pieces Too Close
         </p>
-        <div className={css({ display: "flex", justifyContent: "center" })}>
+        <div className={css({ display: 'flex', justifyContent: 'center' })}>
           <RithmomachiaBoard
             pieces={defensiveMistakeExample}
             scale={0.4}
-            cropArea={squaresToCropArea("D6", "H3")}
-            highlightSquares={["E4", "F4", "G4", "E5"]}
+            cropArea={squaresToCropArea('D6', 'H3')}
+            highlightSquares={['E4', 'F4', 'G4', 'E5']}
             showLabels={true}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
           />
         </div>
         <p
           className={css({
-            fontSize: "12px",
-            color: "#7f1d1d",
-            mt: "8px",
-            textAlign: "center",
-            fontStyle: "italic",
+            fontSize: '12px',
+            color: '#7f1d1d',
+            mt: '8px',
+            textAlign: 'center',
+            fontStyle: 'italic',
           })}
         >
-          White pieces clustered together are all vulnerable to the same Black
-          attacker
+          White pieces clustered together are all vulnerable to the same Black attacker
         </p>
       </div>
 
       {/* Advanced Concepts */}
       <h4
         className={css({
-          fontSize: "18px",
-          fontWeight: "bold",
-          color: "#111827",
-          mb: "12px",
-          mt: "24px",
+          fontSize: '18px',
+          fontWeight: 'bold',
+          color: '#111827',
+          mb: '12px',
+          mt: '24px',
         })}
       >
-        {t("strategy.advanced.title")}
+        {t('strategy.advanced.title')}
       </h4>
 
       <div
         className={css({
-          mb: "16px",
-          p: "16px",
-          bg: "rgba(139, 92, 246, 0.1)",
-          borderRadius: "8px",
-          border: "2px solid rgba(139, 92, 246, 0.3)",
+          mb: '16px',
+          p: '16px',
+          bg: 'rgba(139, 92, 246, 0.1)',
+          borderRadius: '8px',
+          border: '2px solid rgba(139, 92, 246, 0.3)',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#5b21b6",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#5b21b6',
+            mb: '8px',
           })}
         >
-          {t("strategy.advanced.sacrifices.title")}
+          {t('strategy.advanced.sacrifices.title')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b21a8" })}>
-          {t("strategy.advanced.sacrifices.desc")}
+        <p className={css({ fontSize: '13px', color: '#6b21a8' })}>
+          {t('strategy.advanced.sacrifices.desc')}
         </p>
       </div>
 
       <div
         className={css({
-          mb: "16px",
-          p: "16px",
-          bg: "rgba(139, 92, 246, 0.1)",
-          borderRadius: "8px",
-          border: "2px solid rgba(139, 92, 246, 0.3)",
+          mb: '16px',
+          p: '16px',
+          bg: 'rgba(139, 92, 246, 0.1)',
+          borderRadius: '8px',
+          border: '2px solid rgba(139, 92, 246, 0.3)',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#5b21b6",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#5b21b6',
+            mb: '8px',
           })}
         >
-          {t("strategy.advanced.pyramidFaces.title")}
+          {t('strategy.advanced.pyramidFaces.title')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b21a8" })}>
-          {t("strategy.advanced.pyramidFaces.desc")}
+        <p className={css({ fontSize: '13px', color: '#6b21a8' })}>
+          {t('strategy.advanced.pyramidFaces.desc')}
         </p>
       </div>
 
       <div
         className={css({
-          mb: "20px",
-          p: "16px",
-          bg: "rgba(139, 92, 246, 0.1)",
-          borderRadius: "8px",
-          border: "2px solid rgba(139, 92, 246, 0.3)",
+          mb: '20px',
+          p: '16px',
+          bg: 'rgba(139, 92, 246, 0.1)',
+          borderRadius: '8px',
+          border: '2px solid rgba(139, 92, 246, 0.3)',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#5b21b6",
-            mb: "8px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#5b21b6',
+            mb: '8px',
           })}
         >
-          {t("strategy.advanced.tempo.title")}
+          {t('strategy.advanced.tempo.title')}
         </p>
-        <p className={css({ fontSize: "13px", color: "#6b21a8" })}>
-          {t("strategy.advanced.tempo.desc")}
+        <p className={css({ fontSize: '13px', color: '#6b21a8' })}>
+          {t('strategy.advanced.tempo.desc')}
         </p>
       </div>
 
       {/* Tempo Example */}
       <div
         className={css({
-          mb: "16px",
-          p: "16px",
-          bg: "rgba(139, 92, 246, 0.05)",
-          borderRadius: "8px",
-          border: "2px solid rgba(139, 92, 246, 0.3)",
+          mb: '16px',
+          p: '16px',
+          bg: 'rgba(139, 92, 246, 0.05)',
+          borderRadius: '8px',
+          border: '2px solid rgba(139, 92, 246, 0.3)',
         })}
       >
         <p
           className={css({
-            fontSize: "14px",
-            fontWeight: "bold",
-            color: "#5b21b6",
-            mb: "12px",
+            fontSize: '14px',
+            fontWeight: 'bold',
+            color: '#5b21b6',
+            mb: '12px',
           })}
         >
           Example: Tempo Play
         </p>
-        <div className={css({ display: "flex", justifyContent: "center" })}>
+        <div className={css({ display: 'flex', justifyContent: 'center' })}>
           <RithmomachiaBoard
             pieces={tempoExample}
             scale={0.4}
-            cropArea={squaresToCropArea("C8", "H2")}
-            highlightSquares={["E5", "G3"]}
+            cropArea={squaresToCropArea('C8', 'H2')}
+            highlightSquares={['E5', 'G3']}
             showLabels={true}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
           />
         </div>
         <p
           className={css({
-            fontSize: "12px",
-            color: "#6b21a8",
-            mt: "8px",
-            textAlign: "center",
-            fontStyle: "italic",
+            fontSize: '12px',
+            color: '#6b21a8',
+            mt: '8px',
+            textAlign: 'center',
+            fontStyle: 'italic',
           })}
         >
-          White sacrifices a low-value piece to gain tempo and advance the
-          Pyramid
+          White sacrifices a low-value piece to gain tempo and advance the Pyramid
         </p>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/guide-sections/VictorySection.tsx b/apps/web/src/arcade-games/rithmomachia/components/guide-sections/VictorySection.tsx
index 98549d06..aca0c048 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/guide-sections/VictorySection.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/guide-sections/VictorySection.tsx
@@ -1,6 +1,6 @@
-import { useTranslations } from "next-intl";
-import { css } from "../../../../../styled-system/css";
-import { RithmomachiaBoard, type ExamplePiece } from "../RithmomachiaBoard";
+import { useTranslations } from 'next-intl'
+import { css } from '../../../../../styled-system/css'
+import { RithmomachiaBoard, type ExamplePiece } from '../RithmomachiaBoard'
 
 /**
  * Helper to convert square names to crop area coordinates
@@ -8,124 +8,115 @@ import { RithmomachiaBoard, type ExamplePiece } from "../RithmomachiaBoard";
  * @param bottomRight - e.g. 'H6'
  */
 function squaresToCropArea(topLeft: string, bottomRight: string) {
-  const minCol = topLeft.charCodeAt(0) - 65; // A=0
-  const maxCol = bottomRight.charCodeAt(0) - 65;
-  const maxRow = Number.parseInt(topLeft.slice(1), 10);
-  const minRow = Number.parseInt(bottomRight.slice(1), 10);
-  return { minCol, maxCol, minRow, maxRow };
+  const minCol = topLeft.charCodeAt(0) - 65 // A=0
+  const maxCol = bottomRight.charCodeAt(0) - 65
+  const maxRow = Number.parseInt(topLeft.slice(1), 10)
+  const minRow = Number.parseInt(bottomRight.slice(1), 10)
+  return { minCol, maxCol, minRow, maxRow }
 }
 
-export function VictorySection({
-  useNativeAbacusNumbers,
-}: {
-  useNativeAbacusNumbers: boolean;
-}) {
-  const t = useTranslations("rithmomachia.guide");
+export function VictorySection({ useNativeAbacusNumbers }: { useNativeAbacusNumbers: boolean }) {
+  const t = useTranslations('rithmomachia.guide')
 
   // Example winning position: White has formed a geometric progression in Black's territory
   const winningExample: ExamplePiece[] = [
     // White's winning progression in enemy territory (rows 5-8)
-    { square: "E6", type: "C", color: "W", value: 4 },
-    { square: "F6", type: "C", color: "W", value: 8 },
-    { square: "G6", type: "T", color: "W", value: 16 },
+    { square: 'E6', type: 'C', color: 'W', value: 4 },
+    { square: 'F6', type: 'C', color: 'W', value: 8 },
+    { square: 'G6', type: 'T', color: 'W', value: 16 },
     // Some Black pieces remaining (unable to break the harmony)
-    { square: "C7", type: "S", color: "B", value: 49 },
-    { square: "J6", type: "T", color: "B", value: 30 },
-  ];
+    { square: 'C7', type: 'S', color: 'B', value: 49 },
+    { square: 'J6', type: 'T', color: 'B', value: 30 },
+  ]
 
   return (
     <div data-section="victory">
       <h3
         className={css({
-          fontSize: { base: "20px", md: "24px" },
-          fontWeight: "bold",
-          color: "#7c2d12",
-          mb: "16px",
+          fontSize: { base: '20px', md: '24px' },
+          fontWeight: 'bold',
+          color: '#7c2d12',
+          mb: '16px',
         })}
       >
-        {t("victory.title")}
+        {t('victory.title')}
       </h3>
 
       <div
         className={css({
-          display: "flex",
-          flexDirection: "column",
-          gap: "24px",
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '24px',
         })}
       >
         <div>
           <h4
             className={css({
-              fontSize: "18px",
-              fontWeight: "bold",
-              color: "#111827",
-              mb: "12px",
-              display: "flex",
-              alignItems: "center",
-              gap: "8px",
+              fontSize: '18px',
+              fontWeight: 'bold',
+              color: '#111827',
+              mb: '12px',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
             })}
           >
             <span>👑</span>
-            <span>{t("victory.harmony")}</span>
+            <span>{t('victory.harmony')}</span>
           </h4>
           <p
             className={css({
-              fontSize: "15px",
-              lineHeight: "1.6",
-              color: "#374151",
-              mb: "16px",
+              fontSize: '15px',
+              lineHeight: '1.6',
+              color: '#374151',
+              mb: '16px',
             })}
           >
-            {t("victory.harmonyDesc")}
+            {t('victory.harmonyDesc')}
           </p>
 
           {/* Requirements Section */}
           <div
             className={css({
-              mb: "16px",
-              p: "16px",
-              bg: "rgba(251, 191, 36, 0.1)",
-              borderLeft: "4px solid #f59e0b",
-              borderRadius: "4px",
+              mb: '16px',
+              p: '16px',
+              bg: 'rgba(251, 191, 36, 0.1)',
+              borderLeft: '4px solid #f59e0b',
+              borderRadius: '4px',
             })}
           >
             <p
               className={css({
-                fontSize: "16px",
-                fontWeight: "bold",
-                color: "#92400e",
-                mb: "12px",
+                fontSize: '16px',
+                fontWeight: 'bold',
+                color: '#92400e',
+                mb: '12px',
               })}
             >
-              {t("victory.requirementsTitle")}
+              {t('victory.requirementsTitle')}
             </p>
             <ul
               className={css({
-                fontSize: "14px",
-                color: "#78350f",
-                lineHeight: "1.8",
-                pl: "20px",
+                fontSize: '14px',
+                color: '#78350f',
+                lineHeight: '1.8',
+                pl: '20px',
               })}
             >
               <li>
-                <strong>{t("victory.enemyTerritoryTitle")}</strong>{" "}
-                {t("victory.enemyTerritory")}
+                <strong>{t('victory.enemyTerritoryTitle')}</strong> {t('victory.enemyTerritory')}
               </li>
               <li>
-                <strong>{t("victory.straightLineTitle")}</strong>{" "}
-                {t("victory.straightLine")}
+                <strong>{t('victory.straightLineTitle')}</strong> {t('victory.straightLine')}
               </li>
               <li>
-                <strong>{t("victory.adjacentTitle")}</strong>{" "}
-                {t("victory.adjacent")}
+                <strong>{t('victory.adjacentTitle')}</strong> {t('victory.adjacent')}
               </li>
               <li>
-                <strong>{t("victory.progressionTitle")}</strong>{" "}
-                {t("victory.progression")}
+                <strong>{t('victory.progressionTitle')}</strong> {t('victory.progression')}
               </li>
               <li>
-                <strong>{t("victory.survivalTitle")}</strong>{" "}
-                {t("victory.survival")}
+                <strong>{t('victory.survivalTitle')}</strong> {t('victory.survival')}
               </li>
             </ul>
           </div>
@@ -133,57 +124,57 @@ export function VictorySection({
           {/* Visual example of winning harmony */}
           <div
             className={css({
-              mb: "16px",
-              p: "16px",
-              bg: "#f9fafb",
-              borderRadius: "8px",
-              border: "2px solid #86efac",
+              mb: '16px',
+              p: '16px',
+              bg: '#f9fafb',
+              borderRadius: '8px',
+              border: '2px solid #86efac',
             })}
           >
             <p
               className={css({
-                fontSize: "14px",
-                fontWeight: "bold",
-                color: "#15803d",
-                mb: "12px",
-                textAlign: "center",
+                fontSize: '14px',
+                fontWeight: 'bold',
+                color: '#15803d',
+                mb: '12px',
+                textAlign: 'center',
               })}
             >
-              {t("victory.exampleTitle")}
+              {t('victory.exampleTitle')}
             </p>
-            <div className={css({ display: "flex", justifyContent: "center" })}>
+            <div className={css({ display: 'flex', justifyContent: 'center' })}>
               <RithmomachiaBoard
                 pieces={winningExample}
                 scale={0.4}
-                cropArea={squaresToCropArea("B8", "K5")}
-                highlightSquares={["E6", "F6", "G6"]}
+                cropArea={squaresToCropArea('B8', 'K5')}
+                highlightSquares={['E6', 'F6', 'G6']}
                 showLabels={true}
                 useNativeAbacusNumbers={useNativeAbacusNumbers}
               />
             </div>
             <p
               className={css({
-                fontSize: "12px",
-                color: "#166534",
-                mt: "12px",
-                textAlign: "center",
-                fontStyle: "italic",
+                fontSize: '12px',
+                color: '#166534',
+                mt: '12px',
+                textAlign: 'center',
+                fontStyle: 'italic',
               })}
             >
-              {t("victory.exampleCaption")}
+              {t('victory.exampleCaption')}
             </p>
           </div>
 
           <div
             className={css({
-              p: "12px",
-              bg: "#dbeafe",
-              borderRadius: "6px",
-              border: "1px solid #93c5fd",
+              p: '12px',
+              bg: '#dbeafe',
+              borderRadius: '6px',
+              border: '1px solid #93c5fd',
             })}
           >
-            <p className={css({ fontSize: "13px", color: "#1e40af" })}>
-              💡 {t("victory.harmonyNote")}
+            <p className={css({ fontSize: '13px', color: '#1e40af' })}>
+              💡 {t('victory.harmonyNote')}
             </p>
           </div>
         </div>
@@ -191,56 +182,56 @@ export function VictorySection({
         <div>
           <h4
             className={css({
-              fontSize: "18px",
-              fontWeight: "bold",
-              color: "#111827",
-              mb: "12px",
-              display: "flex",
-              alignItems: "center",
-              gap: "8px",
+              fontSize: '18px',
+              fontWeight: 'bold',
+              color: '#111827',
+              mb: '12px',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
             })}
           >
             <span>🚫</span>
-            <span>{t("victory.exhaustion")}</span>
+            <span>{t('victory.exhaustion')}</span>
           </h4>
           <p
             className={css({
-              fontSize: "15px",
-              lineHeight: "1.6",
-              color: "#374151",
+              fontSize: '15px',
+              lineHeight: '1.6',
+              color: '#374151',
             })}
           >
-            {t("victory.exhaustionDesc")}
+            {t('victory.exhaustionDesc')}
           </p>
         </div>
       </div>
 
-      <div className={css({ mt: "32px" })}>
+      <div className={css({ mt: '32px' })}>
         <h3
           className={css({
-            fontSize: { base: "18px", md: "20px" },
-            fontWeight: "bold",
-            color: "#7c2d12",
-            mb: "12px",
+            fontSize: { base: '18px', md: '20px' },
+            fontWeight: 'bold',
+            color: '#7c2d12',
+            mb: '12px',
           })}
         >
-          {t("victory.strategyTitle")}
+          {t('victory.strategyTitle')}
         </h3>
         <ul
           className={css({
-            fontSize: "14px",
-            lineHeight: "1.8",
-            pl: "20px",
-            color: "#374151",
+            fontSize: '14px',
+            lineHeight: '1.8',
+            pl: '20px',
+            color: '#374151',
           })}
         >
-          <li>{t("victory.tip1")}</li>
-          <li>{t("victory.tip2")}</li>
-          <li>{t("victory.tip3")}</li>
-          <li>{t("victory.tip4")}</li>
-          <li>{t("victory.tip5")}</li>
+          <li>{t('victory.tip1')}</li>
+          <li>{t('victory.tip2')}</li>
+          <li>{t('victory.tip3')}</li>
+          <li>{t('victory.tip4')}</li>
+          <li>{t('victory.tip5')}</li>
         </ul>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/phases/GameRuleCard.tsx b/apps/web/src/arcade-games/rithmomachia/components/phases/GameRuleCard.tsx
index 15d2798d..6603b3dc 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/phases/GameRuleCard.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/phases/GameRuleCard.tsx
@@ -1,13 +1,13 @@
-import type { ReactNode } from "react";
-import { css } from "../../../../../styled-system/css";
+import type { ReactNode } from 'react'
+import { css } from '../../../../../styled-system/css'
 
 export interface GameRuleCardProps {
-  title: string;
-  description: string;
-  enabled: boolean;
-  onClick: () => void;
-  dataAttribute?: string;
-  children?: ReactNode;
+  title: string
+  description: string
+  enabled: boolean
+  onClick: () => void
+  dataAttribute?: string
+  children?: ReactNode
 }
 
 export function GameRuleCard({
@@ -23,71 +23,65 @@ export function GameRuleCard({
       data-setting={dataAttribute}
       onClick={onClick}
       className={css({
-        display: "flex",
-        flexDirection: children ? "column" : "row",
-        gap: children ? "1vh" : undefined,
-        justifyContent: children ? undefined : "space-between",
-        alignItems: children ? undefined : "center",
-        p: "1.5vh",
-        bg: enabled ? "rgba(251, 191, 36, 0.25)" : "rgba(139, 92, 246, 0.1)",
-        borderRadius: "1vh",
-        border: "0.3vh solid",
-        borderColor: enabled
-          ? "rgba(251, 191, 36, 0.8)"
-          : "rgba(139, 92, 246, 0.3)",
-        transition: "all 0.3s ease",
-        cursor: "pointer",
-        position: "relative",
-        overflow: "hidden",
+        display: 'flex',
+        flexDirection: children ? 'column' : 'row',
+        gap: children ? '1vh' : undefined,
+        justifyContent: children ? undefined : 'space-between',
+        alignItems: children ? undefined : 'center',
+        p: '1.5vh',
+        bg: enabled ? 'rgba(251, 191, 36, 0.25)' : 'rgba(139, 92, 246, 0.1)',
+        borderRadius: '1vh',
+        border: '0.3vh solid',
+        borderColor: enabled ? 'rgba(251, 191, 36, 0.8)' : 'rgba(139, 92, 246, 0.3)',
+        transition: 'all 0.3s ease',
+        cursor: 'pointer',
+        position: 'relative',
+        overflow: 'hidden',
         boxShadow: enabled
-          ? "0 0.5vh 2vh rgba(251, 191, 36, 0.4)"
-          : "0 0.2vh 0.5vh rgba(0,0,0,0.1)",
+          ? '0 0.5vh 2vh rgba(251, 191, 36, 0.4)'
+          : '0 0.2vh 0.5vh rgba(0,0,0,0.1)',
         _hover: {
-          bg: enabled ? "rgba(251, 191, 36, 0.35)" : "rgba(139, 92, 246, 0.2)",
-          borderColor: enabled
-            ? "rgba(251, 191, 36, 1)"
-            : "rgba(139, 92, 246, 0.5)",
-          transform: "translateY(-0.2vh)",
+          bg: enabled ? 'rgba(251, 191, 36, 0.35)' : 'rgba(139, 92, 246, 0.2)',
+          borderColor: enabled ? 'rgba(251, 191, 36, 1)' : 'rgba(139, 92, 246, 0.5)',
+          transform: 'translateY(-0.2vh)',
         },
         _active: {
-          transform: "scale(0.98)",
+          transform: 'scale(0.98)',
         },
       })}
     >
       <div
         className={css({
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
           flex: children ? undefined : 1,
         })}
       >
-        <div className={css({ flex: 1, pointerEvents: "none" })}>
+        <div className={css({ flex: 1, pointerEvents: 'none' })}>
           <div
             className={css({
-              fontWeight: "bold",
-              fontSize: "1.6vh",
-              color: enabled ? "#92400e" : "#7c2d12",
+              fontWeight: 'bold',
+              fontSize: '1.6vh',
+              color: enabled ? '#92400e' : '#7c2d12',
             })}
           >
-            {enabled && "✓ "}
+            {enabled && '✓ '}
             {title}
           </div>
-          <div className={css({ fontSize: "1.3vh", color: "#78350f" })}>
-            {description}
-          </div>
+          <div className={css({ fontSize: '1.3vh', color: '#78350f' })}>{description}</div>
         </div>
         {enabled && (
           <div
             className={css({
-              position: "absolute",
+              position: 'absolute',
               top: 0,
               right: 0,
-              width: "4vh",
-              height: "4vh",
-              borderRadius: "0 1vh 0 100%",
-              bg: "rgba(251, 191, 36, 0.4)",
-              pointerEvents: "none",
+              width: '4vh',
+              height: '4vh',
+              borderRadius: '0 1vh 0 100%',
+              bg: 'rgba(251, 191, 36, 0.4)',
+              pointerEvents: 'none',
             })}
           />
         )}
@@ -95,5 +89,5 @@ export function GameRuleCard({
 
       {children}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/phases/PlayingPhase.tsx b/apps/web/src/arcade-games/rithmomachia/components/phases/PlayingPhase.tsx
index c2dda50e..753ac97c 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/phases/PlayingPhase.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/phases/PlayingPhase.tsx
@@ -1,91 +1,83 @@
-"use client";
+'use client'
 
-import { useAbacusSettings } from "@/hooks/useAbacusSettings";
-import { css } from "../../../../../styled-system/css";
-import { useRithmomachia } from "../../Provider";
-import { BoardDisplay } from "../board/BoardDisplay";
+import { useAbacusSettings } from '@/hooks/useAbacusSettings'
+import { css } from '../../../../../styled-system/css'
+import { useRithmomachia } from '../../Provider'
+import { BoardDisplay } from '../board/BoardDisplay'
 
 export interface PlayingPhaseProps {
-  onOpenGuide: () => void;
-  isGuideOpen: boolean;
+  onOpenGuide: () => void
+  isGuideOpen: boolean
 }
 
 export function PlayingPhase({ onOpenGuide, isGuideOpen }: PlayingPhaseProps) {
-  const { state, lastError, clearError } = useRithmomachia();
+  const { state, lastError, clearError } = useRithmomachia()
 
   // Get abacus settings for native abacus numbers
-  const { data: abacusSettings } = useAbacusSettings();
-  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false;
+  const { data: abacusSettings } = useAbacusSettings()
+  const useNativeAbacusNumbers = abacusSettings?.nativeAbacusNumbers ?? false
 
   return (
     <div
       className={css({
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        overflow: "hidden",
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        overflow: 'hidden',
       })}
     >
       {/* Compact Header Bar */}
       <div
         className={css({
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          px: "4",
-          py: "3",
-          bg: "rgba(255, 255, 255, 0.95)",
-          borderBottom: "2px solid",
-          borderColor: "rgba(251, 191, 36, 0.3)",
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          px: '4',
+          py: '3',
+          bg: 'rgba(255, 255, 255, 0.95)',
+          borderBottom: '2px solid',
+          borderColor: 'rgba(251, 191, 36, 0.3)',
           flexShrink: 0,
-          gap: "4",
+          gap: '4',
         })}
       >
         {/* Captured pieces info */}
         <div
           className={css({
-            display: "flex",
-            gap: { base: "4", md: "6" },
-            alignItems: "center",
+            display: 'flex',
+            gap: { base: '4', md: '6' },
+            alignItems: 'center',
             flex: 1,
           })}
         >
           <div
             className={css({
-              display: "flex",
-              alignItems: "center",
-              gap: "2",
-              fontSize: { base: "sm", md: "md" },
-              fontWeight: "semibold",
-              color: "gray.700",
+              display: 'flex',
+              alignItems: 'center',
+              gap: '2',
+              fontSize: { base: 'sm', md: 'md' },
+              fontWeight: 'semibold',
+              color: 'gray.700',
             })}
           >
             <span>⚪</span>
-            <span className={css({ display: { base: "none", sm: "inline" } })}>
-              White:
-            </span>
-            <span className={css({ color: "gray.900" })}>
-              {state.capturedPieces.W.length}
-            </span>
+            <span className={css({ display: { base: 'none', sm: 'inline' } })}>White:</span>
+            <span className={css({ color: 'gray.900' })}>{state.capturedPieces.W.length}</span>
           </div>
 
           <div
             className={css({
-              display: "flex",
-              alignItems: "center",
-              gap: "2",
-              fontSize: { base: "sm", md: "md" },
-              fontWeight: "semibold",
-              color: "gray.700",
+              display: 'flex',
+              alignItems: 'center',
+              gap: '2',
+              fontSize: { base: 'sm', md: 'md' },
+              fontWeight: 'semibold',
+              color: 'gray.700',
             })}
           >
             <span>⚫</span>
-            <span className={css({ display: { base: "none", sm: "inline" } })}>
-              Black:
-            </span>
-            <span className={css({ color: "gray.900" })}>
-              {state.capturedPieces.B.length}
-            </span>
+            <span className={css({ display: { base: 'none', sm: 'inline' } })}>Black:</span>
+            <span className={css({ color: 'gray.900' })}>{state.capturedPieces.B.length}</span>
           </div>
         </div>
 
@@ -96,32 +88,30 @@ export function PlayingPhase({ onOpenGuide, isGuideOpen }: PlayingPhaseProps) {
             data-action="open-guide-playing"
             onClick={onOpenGuide}
             className={css({
-              px: { base: "3", md: "4" },
-              py: { base: "1.5", md: "2" },
-              bg: "linear-gradient(135deg, #7c2d12, #92400e)",
-              color: "white",
-              border: "2px solid rgba(251, 191, 36, 0.6)",
-              borderRadius: "lg",
-              fontSize: { base: "sm", md: "md" },
-              fontWeight: "bold",
-              cursor: "pointer",
-              display: "flex",
-              alignItems: "center",
-              gap: "2",
-              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
-              transition: "all 0.2s",
+              px: { base: '3', md: '4' },
+              py: { base: '1.5', md: '2' },
+              bg: 'linear-gradient(135deg, #7c2d12, #92400e)',
+              color: 'white',
+              border: '2px solid rgba(251, 191, 36, 0.6)',
+              borderRadius: 'lg',
+              fontSize: { base: 'sm', md: 'md' },
+              fontWeight: 'bold',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '2',
+              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
+              transition: 'all 0.2s',
               flexShrink: 0,
               _hover: {
-                bg: "linear-gradient(135deg, #92400e, #7c2d12)",
-                transform: "translateY(-1px)",
-                boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
+                bg: 'linear-gradient(135deg, #92400e, #7c2d12)',
+                transform: 'translateY(-1px)',
+                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
               },
             })}
           >
             <span>📖</span>
-            <span className={css({ display: { base: "none", sm: "inline" } })}>
-              Guide
-            </span>
+            <span className={css({ display: { base: 'none', sm: 'inline' } })}>Guide</span>
           </button>
         )}
       </div>
@@ -130,34 +120,32 @@ export function PlayingPhase({ onOpenGuide, isGuideOpen }: PlayingPhaseProps) {
       {lastError && (
         <div
           className={css({
-            mx: "4",
-            mt: "4",
-            p: "4",
-            bg: "red.100",
-            borderColor: "red.400",
-            borderWidth: "2px",
-            borderRadius: "md",
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
+            mx: '4',
+            mt: '4',
+            p: '4',
+            bg: 'red.100',
+            borderColor: 'red.400',
+            borderWidth: '2px',
+            borderRadius: 'md',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
             flexShrink: 0,
           })}
         >
-          <span className={css({ color: "red.800", fontWeight: "semibold" })}>
-            ⚠️ {lastError}
-          </span>
+          <span className={css({ color: 'red.800', fontWeight: 'semibold' })}>⚠️ {lastError}</span>
           <button
             type="button"
             onClick={clearError}
             className={css({
-              px: "3",
-              py: "1",
-              bg: "red.200",
-              color: "red.800",
-              borderRadius: "sm",
-              fontWeight: "semibold",
-              cursor: "pointer",
-              _hover: { bg: "red.300" },
+              px: '3',
+              py: '1',
+              bg: 'red.200',
+              color: 'red.800',
+              borderRadius: 'sm',
+              fontWeight: 'semibold',
+              cursor: 'pointer',
+              _hover: { bg: 'red.300' },
             })}
           >
             Dismiss
@@ -170,15 +158,15 @@ export function PlayingPhase({ onOpenGuide, isGuideOpen }: PlayingPhaseProps) {
         className={css({
           flex: 1,
           minHeight: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          p: "4",
-          overflow: "auto",
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          p: '4',
+          overflow: 'auto',
         })}
       >
         <BoardDisplay />
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/phases/ResultsPhase.tsx b/apps/web/src/arcade-games/rithmomachia/components/phases/ResultsPhase.tsx
index 195421fc..af87387d 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/phases/ResultsPhase.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/phases/ResultsPhase.tsx
@@ -1,58 +1,55 @@
-"use client";
+'use client'
 
-import { css } from "../../../../../styled-system/css";
-import { useRithmomachia } from "../../Provider";
+import { css } from '../../../../../styled-system/css'
+import { useRithmomachia } from '../../Provider'
 
 /**
  * Results phase: show winner and game summary.
  */
 export function ResultsPhase() {
-  const { state, resetGame, goToSetup, exitSession, lastError, clearError } =
-    useRithmomachia();
-  const winnerText = state.winner === "W" ? "White" : "Black";
-  const totalMoves = state.history.length;
+  const { state, resetGame, goToSetup, exitSession, lastError, clearError } = useRithmomachia()
+  const winnerText = state.winner === 'W' ? 'White' : 'Black'
+  const totalMoves = state.history.length
 
   return (
     <div
       className={css({
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        minHeight: "400px",
-        gap: "4",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '400px',
+        gap: '4',
       })}
     >
       {lastError && (
         <div
           className={css({
-            width: "100%",
-            maxWidth: "600px",
-            p: "4",
-            bg: "red.100",
-            borderColor: "red.400",
-            borderWidth: "2px",
-            borderRadius: "md",
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
+            width: '100%',
+            maxWidth: '600px',
+            p: '4',
+            bg: 'red.100',
+            borderColor: 'red.400',
+            borderWidth: '2px',
+            borderRadius: 'md',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
           })}
         >
-          <span className={css({ color: "red.800", fontWeight: "semibold" })}>
-            ⚠️ {lastError}
-          </span>
+          <span className={css({ color: 'red.800', fontWeight: 'semibold' })}>⚠️ {lastError}</span>
           <button
             type="button"
             onClick={clearError}
             className={css({
-              px: "3",
-              py: "1",
-              bg: "red.200",
-              color: "red.800",
-              borderRadius: "sm",
-              fontWeight: "semibold",
-              cursor: "pointer",
-              _hover: { bg: "red.300" },
+              px: '3',
+              py: '1',
+              bg: 'red.200',
+              color: 'red.800',
+              borderRadius: 'sm',
+              fontWeight: 'semibold',
+              cursor: 'pointer',
+              _hover: { bg: 'red.300' },
             })}
           >
             Dismiss
@@ -60,93 +57,83 @@ export function ResultsPhase() {
         </div>
       )}
 
-      <h1 className={css({ fontSize: "3xl", fontWeight: "bold" })}>
-        Game Over
-      </h1>
+      <h1 className={css({ fontSize: '3xl', fontWeight: 'bold' })}>Game Over</h1>
 
       {state.winner ? (
         <>
           <div
             className={css({
-              fontSize: "2xl",
-              color: "purple.600",
-              fontWeight: "semibold",
+              fontSize: '2xl',
+              color: 'purple.600',
+              fontWeight: 'semibold',
             })}
           >
             {winnerText} Wins!
           </div>
-          <div className={css({ fontSize: "lg", color: "gray.600" })}>
-            Victory by {state.winCondition?.toLowerCase().replace("_", " ")}
+          <div className={css({ fontSize: 'lg', color: 'gray.600' })}>
+            Victory by {state.winCondition?.toLowerCase().replace('_', ' ')}
           </div>
         </>
       ) : (
-        <div className={css({ fontSize: "2xl", color: "gray.600" })}>Draw</div>
+        <div className={css({ fontSize: '2xl', color: 'gray.600' })}>Draw</div>
       )}
 
-      <div className={css({ display: "flex", gap: "4", mt: "4" })}>
-        <div className={css({ p: "4", bg: "gray.100", borderRadius: "md" })}>
-          <div className={css({ fontWeight: "bold" })}>White Captured</div>
+      <div className={css({ display: 'flex', gap: '4', mt: '4' })}>
+        <div className={css({ p: '4', bg: 'gray.100', borderRadius: 'md' })}>
+          <div className={css({ fontWeight: 'bold' })}>White Captured</div>
           <div>{state.capturedPieces.W.length} pieces</div>
         </div>
-        <div className={css({ p: "4", bg: "gray.100", borderRadius: "md" })}>
-          <div className={css({ fontWeight: "bold" })}>Black Captured</div>
+        <div className={css({ p: '4', bg: 'gray.100', borderRadius: 'md' })}>
+          <div className={css({ fontWeight: 'bold' })}>Black Captured</div>
           <div>{state.capturedPieces.B.length} pieces</div>
         </div>
       </div>
 
       {state.pointsCaptured && (
-        <div className={css({ display: "flex", gap: "4" })}>
-          <div
-            className={css({ p: "4", bg: "purple.100", borderRadius: "md" })}
-          >
-            <div className={css({ fontWeight: "bold", color: "purple.700" })}>
-              White Points
-            </div>
-            <div className={css({ fontSize: "lg", fontWeight: "semibold" })}>
+        <div className={css({ display: 'flex', gap: '4' })}>
+          <div className={css({ p: '4', bg: 'purple.100', borderRadius: 'md' })}>
+            <div className={css({ fontWeight: 'bold', color: 'purple.700' })}>White Points</div>
+            <div className={css({ fontSize: 'lg', fontWeight: 'semibold' })}>
               {state.pointsCaptured.W}
             </div>
           </div>
-          <div
-            className={css({ p: "4", bg: "purple.100", borderRadius: "md" })}
-          >
-            <div className={css({ fontWeight: "bold", color: "purple.700" })}>
-              Black Points
-            </div>
-            <div className={css({ fontSize: "lg", fontWeight: "semibold" })}>
+          <div className={css({ p: '4', bg: 'purple.100', borderRadius: 'md' })}>
+            <div className={css({ fontWeight: 'bold', color: 'purple.700' })}>Black Points</div>
+            <div className={css({ fontSize: 'lg', fontWeight: 'semibold' })}>
               {state.pointsCaptured.B}
             </div>
           </div>
         </div>
       )}
 
-      <div className={css({ fontSize: "sm", color: "gray.500", mt: "4" })}>
+      <div className={css({ fontSize: 'sm', color: 'gray.500', mt: '4' })}>
         Total moves: {totalMoves}
       </div>
 
       {/* Action Buttons */}
       <div
         className={css({
-          display: "flex",
-          flexDirection: { base: "column", sm: "row" },
-          gap: "3",
-          mt: "6",
+          display: 'flex',
+          flexDirection: { base: 'column', sm: 'row' },
+          gap: '3',
+          mt: '6',
         })}
       >
         <button
           type="button"
           onClick={resetGame}
           className={css({
-            px: "6",
-            py: "3",
-            bg: "purple.600",
-            color: "white",
-            borderRadius: "md",
-            fontWeight: "semibold",
-            cursor: "pointer",
-            transition: "all 0.2s ease",
+            px: '6',
+            py: '3',
+            bg: 'purple.600',
+            color: 'white',
+            borderRadius: 'md',
+            fontWeight: 'semibold',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
             _hover: {
-              bg: "purple.700",
-              transform: "translateY(-2px)",
+              bg: 'purple.700',
+              transform: 'translateY(-2px)',
             },
           })}
         >
@@ -157,19 +144,19 @@ export function ResultsPhase() {
           type="button"
           onClick={goToSetup}
           className={css({
-            px: "6",
-            py: "3",
-            bg: "white",
-            color: "gray.700",
-            border: "2px solid",
-            borderColor: "gray.300",
-            borderRadius: "md",
-            fontWeight: "semibold",
-            cursor: "pointer",
-            transition: "all 0.2s ease",
+            px: '6',
+            py: '3',
+            bg: 'white',
+            color: 'gray.700',
+            border: '2px solid',
+            borderColor: 'gray.300',
+            borderRadius: 'md',
+            fontWeight: 'semibold',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
             _hover: {
-              borderColor: "gray.400",
-              bg: "gray.50",
+              borderColor: 'gray.400',
+              bg: 'gray.50',
             },
           })}
         >
@@ -180,19 +167,19 @@ export function ResultsPhase() {
           type="button"
           onClick={exitSession}
           className={css({
-            px: "6",
-            py: "3",
-            bg: "white",
-            color: "red.700",
-            border: "2px solid",
-            borderColor: "red.300",
-            borderRadius: "md",
-            fontWeight: "semibold",
-            cursor: "pointer",
-            transition: "all 0.2s ease",
+            px: '6',
+            py: '3',
+            bg: 'white',
+            color: 'red.700',
+            border: '2px solid',
+            borderColor: 'red.300',
+            borderRadius: 'md',
+            fontWeight: 'semibold',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
             _hover: {
-              borderColor: "red.400",
-              bg: "red.50",
+              borderColor: 'red.400',
+              bg: 'red.50',
             },
           })}
         >
@@ -200,5 +187,5 @@ export function ResultsPhase() {
         </button>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/phases/SetupHeader.tsx b/apps/web/src/arcade-games/rithmomachia/components/phases/SetupHeader.tsx
index 58a4a89a..bffc1b8a 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/phases/SetupHeader.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/phases/SetupHeader.tsx
@@ -1,8 +1,8 @@
-import { css } from "../../../../../styled-system/css";
+import { css } from '../../../../../styled-system/css'
 
 export interface SetupHeaderProps {
-  onOpenGuide: () => void;
-  isGuideOpen: boolean;
+  onOpenGuide: () => void
+  isGuideOpen: boolean
 }
 
 export function SetupHeader({ onOpenGuide, isGuideOpen }: SetupHeaderProps) {
@@ -10,113 +10,111 @@ export function SetupHeader({ onOpenGuide, isGuideOpen }: SetupHeaderProps) {
     <div
       data-element="title-section"
       className={css({
-        textAlign: "center",
-        bg: "rgba(255, 255, 255, 0.95)",
-        borderRadius: "1.5vh",
-        p: "1.5vh",
-        boxShadow: "0 1vh 3vh rgba(0,0,0,0.5)",
-        width: "100%",
-        position: "relative",
-        border: "0.3vh solid",
-        borderColor: "rgba(251, 191, 36, 0.6)",
-        backdropFilter: "blur(10px)",
+        textAlign: 'center',
+        bg: 'rgba(255, 255, 255, 0.95)',
+        borderRadius: '1.5vh',
+        p: '1.5vh',
+        boxShadow: '0 1vh 3vh rgba(0,0,0,0.5)',
+        width: '100%',
+        position: 'relative',
+        border: '0.3vh solid',
+        borderColor: 'rgba(251, 191, 36, 0.6)',
+        backdropFilter: 'blur(10px)',
         flexShrink: 0,
       })}
     >
       {/* Ornamental corners */}
       <div
         className={css({
-          position: "absolute",
-          top: "-0.5vh",
-          left: "-0.5vh",
-          width: "2.5vh",
-          height: "2.5vh",
-          borderTop: "0.3vh solid",
-          borderLeft: "0.3vh solid",
-          borderColor: "rgba(251, 191, 36, 0.8)",
-          borderRadius: "1.5vh 0 0 0",
+          position: 'absolute',
+          top: '-0.5vh',
+          left: '-0.5vh',
+          width: '2.5vh',
+          height: '2.5vh',
+          borderTop: '0.3vh solid',
+          borderLeft: '0.3vh solid',
+          borderColor: 'rgba(251, 191, 36, 0.8)',
+          borderRadius: '1.5vh 0 0 0',
         })}
       />
       <div
         className={css({
-          position: "absolute",
-          top: "-0.5vh",
-          right: "-0.5vh",
-          width: "2.5vh",
-          height: "2.5vh",
-          borderTop: "0.3vh solid",
-          borderRight: "0.3vh solid",
-          borderColor: "rgba(251, 191, 36, 0.8)",
-          borderRadius: "0 1.5vh 0 0",
+          position: 'absolute',
+          top: '-0.5vh',
+          right: '-0.5vh',
+          width: '2.5vh',
+          height: '2.5vh',
+          borderTop: '0.3vh solid',
+          borderRight: '0.3vh solid',
+          borderColor: 'rgba(251, 191, 36, 0.8)',
+          borderRadius: '0 1.5vh 0 0',
         })}
       />
       <div
         className={css({
-          position: "absolute",
-          bottom: "-0.5vh",
-          left: "-0.5vh",
-          width: "2.5vh",
-          height: "2.5vh",
-          borderBottom: "0.3vh solid",
-          borderLeft: "0.3vh solid",
-          borderColor: "rgba(251, 191, 36, 0.8)",
-          borderRadius: "0 0 0 1.5vh",
+          position: 'absolute',
+          bottom: '-0.5vh',
+          left: '-0.5vh',
+          width: '2.5vh',
+          height: '2.5vh',
+          borderBottom: '0.3vh solid',
+          borderLeft: '0.3vh solid',
+          borderColor: 'rgba(251, 191, 36, 0.8)',
+          borderRadius: '0 0 0 1.5vh',
         })}
       />
       <div
         className={css({
-          position: "absolute",
-          bottom: "-0.5vh",
-          right: "-0.5vh",
-          width: "2.5vh",
-          height: "2.5vh",
-          borderBottom: "0.3vh solid",
-          borderRight: "0.3vh solid",
-          borderColor: "rgba(251, 191, 36, 0.8)",
-          borderRadius: "0 0 1.5vh 0",
+          position: 'absolute',
+          bottom: '-0.5vh',
+          right: '-0.5vh',
+          width: '2.5vh',
+          height: '2.5vh',
+          borderBottom: '0.3vh solid',
+          borderRight: '0.3vh solid',
+          borderColor: 'rgba(251, 191, 36, 0.8)',
+          borderRadius: '0 0 1.5vh 0',
         })}
       />
 
       <h1
         className={css({
-          fontSize: "3.5vh",
-          fontWeight: "bold",
-          mb: "0.5vh",
-          color: "#7c2d12",
-          textShadow:
-            "0.15vh 0.15vh 0 rgba(251, 191, 36, 0.5), 0.3vh 0.3vh 0.5vh rgba(0,0,0,0.3)",
-          letterSpacing: "0.2vh",
+          fontSize: '3.5vh',
+          fontWeight: 'bold',
+          mb: '0.5vh',
+          color: '#7c2d12',
+          textShadow: '0.15vh 0.15vh 0 rgba(251, 191, 36, 0.5), 0.3vh 0.3vh 0.5vh rgba(0,0,0,0.3)',
+          letterSpacing: '0.2vh',
         })}
       >
         ⚔️ RITHMOMACHIA ⚔️
       </h1>
       <div
         className={css({
-          height: "0.2vh",
-          width: "60%",
-          margin: "0 auto 0.5vh",
-          background:
-            "linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.8), transparent)",
+          height: '0.2vh',
+          width: '60%',
+          margin: '0 auto 0.5vh',
+          background: 'linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.8), transparent)',
         })}
       />
       <p
         className={css({
-          color: "#92400e",
-          fontSize: "1.8vh",
-          fontWeight: "bold",
-          mb: "0.3vh",
-          fontStyle: "italic",
+          color: '#92400e',
+          fontSize: '1.8vh',
+          fontWeight: 'bold',
+          mb: '0.3vh',
+          fontStyle: 'italic',
         })}
       >
         The Philosopher's Game
       </p>
       <p
         className={css({
-          color: "#78350f",
-          fontSize: "1.2vh",
-          lineHeight: "1.4",
-          fontWeight: "500",
-          mb: "0.8vh",
+          color: '#78350f',
+          fontSize: '1.2vh',
+          lineHeight: '1.4',
+          fontWeight: '500',
+          mb: '0.8vh',
         })}
       >
         Win by forming mathematical progressions in enemy territory
@@ -127,25 +125,25 @@ export function SetupHeader({ onOpenGuide, isGuideOpen }: SetupHeaderProps) {
           data-action="open-guide"
           onClick={onOpenGuide}
           className={css({
-            bg: "linear-gradient(135deg, #7c2d12, #92400e)",
-            color: "white",
-            border: "2px solid rgba(251, 191, 36, 0.6)",
-            borderRadius: "0.8vh",
-            px: "1.5vh",
-            py: "0.8vh",
-            fontSize: "1.3vh",
-            fontWeight: "bold",
-            cursor: "pointer",
-            transition: "all 0.2s",
-            display: "flex",
-            alignItems: "center",
-            gap: "0.5vh",
-            mx: "auto",
-            boxShadow: "0 0.3vh 0.8vh rgba(0, 0, 0, 0.3)",
+            bg: 'linear-gradient(135deg, #7c2d12, #92400e)',
+            color: 'white',
+            border: '2px solid rgba(251, 191, 36, 0.6)',
+            borderRadius: '0.8vh',
+            px: '1.5vh',
+            py: '0.8vh',
+            fontSize: '1.3vh',
+            fontWeight: 'bold',
+            cursor: 'pointer',
+            transition: 'all 0.2s',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5vh',
+            mx: 'auto',
+            boxShadow: '0 0.3vh 0.8vh rgba(0, 0, 0, 0.3)',
             _hover: {
-              bg: "linear-gradient(135deg, #92400e, #7c2d12)",
-              transform: "translateY(-0.2vh)",
-              boxShadow: "0 0.5vh 1.2vh rgba(0, 0, 0, 0.4)",
+              bg: 'linear-gradient(135deg, #92400e, #7c2d12)',
+              transform: 'translateY(-0.2vh)',
+              boxShadow: '0 0.5vh 1.2vh rgba(0, 0, 0, 0.4)',
             },
           })}
         >
@@ -154,5 +152,5 @@ export function SetupHeader({ onOpenGuide, isGuideOpen }: SetupHeaderProps) {
         </button>
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/components/phases/SetupPhase.tsx b/apps/web/src/arcade-games/rithmomachia/components/phases/SetupPhase.tsx
index efabe3ae..1569ff23 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/phases/SetupPhase.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/phases/SetupPhase.tsx
@@ -1,79 +1,68 @@
-"use client";
+'use client'
 
-import { SetupPlayerRequirement } from "@/components/nav/SetupPlayerRequirement";
-import { useGameMode } from "@/contexts/GameModeContext";
-import { css } from "../../../../../styled-system/css";
-import { useRithmomachia } from "../../Provider";
-import type { RithmomachiaConfig } from "../../types";
-import { GameRuleCard } from "./GameRuleCard";
-import { SetupHeader } from "./SetupHeader";
-import { StartButton } from "./StartButton";
+import { SetupPlayerRequirement } from '@/components/nav/SetupPlayerRequirement'
+import { useGameMode } from '@/contexts/GameModeContext'
+import { css } from '../../../../../styled-system/css'
+import { useRithmomachia } from '../../Provider'
+import type { RithmomachiaConfig } from '../../types'
+import { GameRuleCard } from './GameRuleCard'
+import { SetupHeader } from './SetupHeader'
+import { StartButton } from './StartButton'
 
 export interface SetupPhaseProps {
-  onOpenGuide: () => void;
-  isGuideOpen: boolean;
+  onOpenGuide: () => void
+  isGuideOpen: boolean
 }
 
 export function SetupPhase({ onOpenGuide, isGuideOpen }: SetupPhaseProps) {
-  const { state, startGame, setConfig, lastError, clearError, rosterStatus } =
-    useRithmomachia();
-  const {
-    players: playerMap,
-    activePlayers: activePlayerIds,
-    addPlayer,
-    setActive,
-  } = useGameMode();
-  const startDisabled = rosterStatus.status !== "ok";
+  const { state, startGame, setConfig, lastError, clearError, rosterStatus } = useRithmomachia()
+  const { players: playerMap, activePlayers: activePlayerIds, addPlayer, setActive } = useGameMode()
+  const startDisabled = rosterStatus.status !== 'ok'
 
   const toggleSetting = (key: keyof typeof state) => {
-    if (typeof state[key] === "boolean") {
-      setConfig(key as keyof RithmomachiaConfig, !state[key]);
+    if (typeof state[key] === 'boolean') {
+      setConfig(key as keyof RithmomachiaConfig, !state[key])
     }
-  };
+  }
 
   const updateThreshold = (value: number) => {
-    setConfig("pointWinThreshold", Math.max(1, value));
-  };
+    setConfig('pointWinThreshold', Math.max(1, value))
+  }
 
   // Prepare data for SetupPlayerRequirement
-  const activePlayers = Array.from(playerMap.values()).filter((p) =>
-    activePlayerIds.has(p.id),
-  );
-  const inactivePlayers = Array.from(playerMap.values()).filter(
-    (p) => !activePlayerIds.has(p.id),
-  );
+  const activePlayers = Array.from(playerMap.values()).filter((p) => activePlayerIds.has(p.id))
+  const inactivePlayers = Array.from(playerMap.values()).filter((p) => !activePlayerIds.has(p.id))
 
   return (
     <div
       data-component="setup-phase-container"
       className={css({
-        position: "absolute",
+        position: 'absolute',
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        overflow: "hidden",
-        background:
-          "linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        overflow: 'hidden',
+        background: 'linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
       })}
     >
       {/* Animated mathematical symbols background */}
       <div
         data-element="background-symbols"
         className={css({
-          position: "absolute",
+          position: 'absolute',
           inset: 0,
           opacity: 0.1,
-          fontSize: "20vh",
-          color: "white",
-          pointerEvents: "none",
-          display: "flex",
-          flexWrap: "wrap",
-          justifyContent: "space-around",
-          alignItems: "center",
+          fontSize: '20vh',
+          color: 'white',
+          pointerEvents: 'none',
+          display: 'flex',
+          flexWrap: 'wrap',
+          justifyContent: 'space-around',
+          alignItems: 'center',
         })}
       >
         <span>∑</span>
@@ -88,34 +77,34 @@ export function SetupPhase({ onOpenGuide, isGuideOpen }: SetupPhaseProps) {
       <div
         data-element="main-content"
         className={css({
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          gap: "1vh",
-          overflow: "hidden",
-          p: "1.5vh",
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1vh',
+          overflow: 'hidden',
+          p: '1.5vh',
         })}
       >
         {lastError && (
           <div
             data-element="error-banner"
             className={css({
-              width: "100%",
-              p: "2vh",
-              bg: "rgba(220, 38, 38, 0.9)",
-              borderRadius: "lg",
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              backdropFilter: "blur(10px)",
+              width: '100%',
+              p: '2vh',
+              bg: 'rgba(220, 38, 38, 0.9)',
+              borderRadius: 'lg',
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              backdropFilter: 'blur(10px)',
             })}
           >
             <span
               className={css({
-                color: "white",
-                fontWeight: "bold",
-                fontSize: "1.8vh",
+                color: 'white',
+                fontWeight: 'bold',
+                fontSize: '1.8vh',
               })}
             >
               ⚠️ {lastError}
@@ -124,15 +113,15 @@ export function SetupPhase({ onOpenGuide, isGuideOpen }: SetupPhaseProps) {
               type="button"
               onClick={clearError}
               className={css({
-                px: "2vh",
-                py: "1vh",
-                bg: "rgba(255, 255, 255, 0.3)",
-                color: "white",
-                borderRadius: "md",
-                fontWeight: "bold",
-                cursor: "pointer",
-                fontSize: "1.6vh",
-                _hover: { bg: "rgba(255, 255, 255, 0.5)" },
+                px: '2vh',
+                py: '1vh',
+                bg: 'rgba(255, 255, 255, 0.3)',
+                color: 'white',
+                borderRadius: 'md',
+                fontWeight: 'bold',
+                cursor: 'pointer',
+                fontSize: '1.6vh',
+                _hover: { bg: 'rgba(255, 255, 255, 0.5)' },
               })}
             >
               Dismiss
@@ -141,30 +130,30 @@ export function SetupPhase({ onOpenGuide, isGuideOpen }: SetupPhaseProps) {
         )}
 
         {/* Player requirement panel - styled for medieval theme */}
-        {rosterStatus.status === "tooFew" && (
+        {rosterStatus.status === 'tooFew' && (
           <div
             className={css({
-              "& > div": {
-                maxWidth: "100%",
-                margin: "0",
-                padding: "1.5vh",
-                background: "rgba(30, 27, 75, 0.85)",
-                border: "0.3vh solid rgba(251, 191, 36, 0.6)",
-                borderRadius: "1.5vh",
-                backdropFilter: "blur(10px)",
-                "& h2": {
-                  fontSize: "2vh",
-                  background: "linear-gradient(135deg, #fbbf24, #f59e0b)",
-                  color: "transparent",
-                  backgroundClip: "text",
+              '& > div': {
+                maxWidth: '100%',
+                margin: '0',
+                padding: '1.5vh',
+                background: 'rgba(30, 27, 75, 0.85)',
+                border: '0.3vh solid rgba(251, 191, 36, 0.6)',
+                borderRadius: '1.5vh',
+                backdropFilter: 'blur(10px)',
+                '& h2': {
+                  fontSize: '2vh',
+                  background: 'linear-gradient(135deg, #fbbf24, #f59e0b)',
+                  color: 'transparent',
+                  backgroundClip: 'text',
                 },
-                "& p": {
-                  fontSize: "1.4vh",
-                  color: "rgba(255, 255, 255, 0.8)",
+                '& p': {
+                  fontSize: '1.4vh',
+                  color: 'rgba(255, 255, 255, 0.8)',
                 },
-                "& button": {
-                  fontSize: "1.4vh",
-                  padding: "0.8vh 1.5vh",
+                '& button': {
+                  fontSize: '1.4vh',
+                  padding: '0.8vh 1.5vh',
                 },
               },
             })}
@@ -183,7 +172,7 @@ export function SetupPhase({ onOpenGuide, isGuideOpen }: SetupPhaseProps) {
         )}
 
         {/* Only show setup config when we have enough players */}
-        {rosterStatus.status !== "tooFew" && (
+        {rosterStatus.status !== 'tooFew' && (
           <>
             <SetupHeader onOpenGuide={onOpenGuide} isGuideOpen={isGuideOpen} />
 
@@ -191,30 +180,30 @@ export function SetupPhase({ onOpenGuide, isGuideOpen }: SetupPhaseProps) {
             <div
               data-element="game-settings"
               className={css({
-                width: "100%",
+                width: '100%',
                 flex: 1,
                 minHeight: 0,
-                bg: "rgba(255, 255, 255, 0.95)",
-                borderRadius: "1.5vh",
-                p: "1.5vh",
-                boxShadow: "0 1vh 3vh rgba(0,0,0,0.5)",
-                border: "0.2vh solid",
-                borderColor: "rgba(251, 191, 36, 0.4)",
-                backdropFilter: "blur(10px)",
-                display: "flex",
-                flexDirection: "column",
-                overflow: "hidden",
+                bg: 'rgba(255, 255, 255, 0.95)',
+                borderRadius: '1.5vh',
+                p: '1.5vh',
+                boxShadow: '0 1vh 3vh rgba(0,0,0,0.5)',
+                border: '0.2vh solid',
+                borderColor: 'rgba(251, 191, 36, 0.4)',
+                backdropFilter: 'blur(10px)',
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
               })}
             >
               <h2
                 className={css({
-                  fontSize: "2vh",
-                  fontWeight: "bold",
-                  mb: "1vh",
-                  color: "#7c2d12",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "0.5vh",
+                  fontSize: '2vh',
+                  fontWeight: 'bold',
+                  mb: '1vh',
+                  color: '#7c2d12',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '0.5vh',
                   flexShrink: 0,
                 })}
               >
@@ -224,19 +213,19 @@ export function SetupPhase({ onOpenGuide, isGuideOpen }: SetupPhaseProps) {
 
               <div
                 className={css({
-                  display: "grid",
-                  gridTemplateColumns: "repeat(auto-fit, minmax(35%, 1fr))",
-                  gap: "1vh",
+                  display: 'grid',
+                  gridTemplateColumns: 'repeat(auto-fit, minmax(35%, 1fr))',
+                  gap: '1vh',
                   flex: 1,
                   minHeight: 0,
-                  alignContent: "start",
+                  alignContent: 'start',
                 })}
               >
                 <GameRuleCard
                   title="Point Victory"
                   description={`Win at ${state.pointWinThreshold}pts`}
                   enabled={state.pointWinEnabled}
-                  onClick={() => toggleSetting("pointWinEnabled")}
+                  onClick={() => toggleSetting('pointWinEnabled')}
                   dataAttribute="point-victory"
                 >
                   {state.pointWinEnabled && (
@@ -244,19 +233,19 @@ export function SetupPhase({ onOpenGuide, isGuideOpen }: SetupPhaseProps) {
                       data-element="threshold-input-container"
                       onClick={(e) => e.stopPropagation()}
                       className={css({
-                        display: "flex",
-                        justifyContent: "space-between",
-                        alignItems: "center",
-                        pt: "0.8vh",
-                        borderTop: "0.15vh solid",
-                        borderColor: "rgba(251, 191, 36, 0.3)",
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        pt: '0.8vh',
+                        borderTop: '0.15vh solid',
+                        borderColor: 'rgba(251, 191, 36, 0.3)',
                       })}
                     >
                       <div
                         className={css({
-                          fontSize: "1.2vh",
-                          fontWeight: "bold",
-                          color: "#92400e",
+                          fontSize: '1.2vh',
+                          fontWeight: 'bold',
+                          color: '#92400e',
                         })}
                       >
                         Threshold:
@@ -264,28 +253,26 @@ export function SetupPhase({ onOpenGuide, isGuideOpen }: SetupPhaseProps) {
                       <input
                         type="number"
                         value={state.pointWinThreshold}
-                        onChange={(e) =>
-                          updateThreshold(Number.parseInt(e.target.value, 10))
-                        }
+                        onChange={(e) => updateThreshold(Number.parseInt(e.target.value, 10))}
                         onClick={(e) => e.stopPropagation()}
                         min="1"
                         className={css({
-                          width: "6vh",
-                          minHeight: "2.5vh",
-                          px: "0.5vh",
-                          py: "0.3vh",
-                          borderRadius: "0.5vh",
-                          border: "0.15vh solid",
-                          borderColor: "rgba(251, 191, 36, 0.6)",
-                          bg: "rgba(255, 255, 255, 0.9)",
-                          textAlign: "center",
-                          fontSize: "1.4vh",
-                          fontWeight: "bold",
-                          color: "#7c2d12",
+                          width: '6vh',
+                          minHeight: '2.5vh',
+                          px: '0.5vh',
+                          py: '0.3vh',
+                          borderRadius: '0.5vh',
+                          border: '0.15vh solid',
+                          borderColor: 'rgba(251, 191, 36, 0.6)',
+                          bg: 'rgba(255, 255, 255, 0.9)',
+                          textAlign: 'center',
+                          fontSize: '1.4vh',
+                          fontWeight: 'bold',
+                          color: '#7c2d12',
                           _focus: {
-                            outline: "none",
-                            borderColor: "rgba(251, 191, 36, 1)",
-                            boxShadow: "0 0 0.5vh rgba(251, 191, 36, 0.5)",
+                            outline: 'none',
+                            borderColor: 'rgba(251, 191, 36, 1)',
+                            boxShadow: '0 0 0.5vh rgba(251, 191, 36, 0.5)',
                           },
                         })}
                       />
@@ -297,7 +284,7 @@ export function SetupPhase({ onOpenGuide, isGuideOpen }: SetupPhaseProps) {
                   title="Threefold Draw"
                   description="Same position 3x"
                   enabled={state.repetitionRule}
-                  onClick={() => toggleSetting("repetitionRule")}
+                  onClick={() => toggleSetting('repetitionRule')}
                   dataAttribute="threefold-repetition"
                 />
 
@@ -305,7 +292,7 @@ export function SetupPhase({ onOpenGuide, isGuideOpen }: SetupPhaseProps) {
                   title="Fifty-Move Draw"
                   description="50 moves no event"
                   enabled={state.fiftyMoveRule}
-                  onClick={() => toggleSetting("fiftyMoveRule")}
+                  onClick={() => toggleSetting('fiftyMoveRule')}
                   dataAttribute="fifty-move-rule"
                 />
 
@@ -313,7 +300,7 @@ export function SetupPhase({ onOpenGuide, isGuideOpen }: SetupPhaseProps) {
                   title="Flexible Harmony"
                   description="Any valid set"
                   enabled={state.allowAnySetOnRecheck}
-                  onClick={() => toggleSetting("allowAnySetOnRecheck")}
+                  onClick={() => toggleSetting('allowAnySetOnRecheck')}
                   dataAttribute="flexible-harmony"
                 />
               </div>
@@ -324,7 +311,7 @@ export function SetupPhase({ onOpenGuide, isGuideOpen }: SetupPhaseProps) {
         )}
       </div>
     </div>
-  );
+  )
 }
 
 /**
diff --git a/apps/web/src/arcade-games/rithmomachia/components/phases/StartButton.tsx b/apps/web/src/arcade-games/rithmomachia/components/phases/StartButton.tsx
index bd46cb54..86059e25 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/phases/StartButton.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/phases/StartButton.tsx
@@ -1,8 +1,8 @@
-import { css } from "../../../../../styled-system/css";
+import { css } from '../../../../../styled-system/css'
 
 export interface StartButtonProps {
-  onClick: () => void;
-  disabled: boolean;
+  onClick: () => void
+  disabled: boolean
 }
 
 export function StartButton({ onClick, disabled }: StartButtonProps) {
@@ -13,61 +13,59 @@ export function StartButton({ onClick, disabled }: StartButtonProps) {
       onClick={onClick}
       disabled={disabled}
       className={css({
-        width: "100%",
-        py: "2vh",
+        width: '100%',
+        py: '2vh',
         bg: disabled
-          ? "rgba(100, 100, 100, 0.5)"
-          : "linear-gradient(135deg, rgba(251, 191, 36, 0.95) 0%, rgba(245, 158, 11, 0.95) 100%)",
-        color: disabled ? "rgba(200, 200, 200, 0.7)" : "#7c2d12",
-        borderRadius: "1.5vh",
-        fontSize: "2.5vh",
-        fontWeight: "bold",
-        cursor: disabled ? "not-allowed" : "pointer",
-        transition: "all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+          ? 'rgba(100, 100, 100, 0.5)'
+          : 'linear-gradient(135deg, rgba(251, 191, 36, 0.95) 0%, rgba(245, 158, 11, 0.95) 100%)',
+        color: disabled ? 'rgba(200, 200, 200, 0.7)' : '#7c2d12',
+        borderRadius: '1.5vh',
+        fontSize: '2.5vh',
+        fontWeight: 'bold',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        transition: 'all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
         boxShadow: disabled
-          ? "0 0.5vh 1.5vh rgba(0,0,0,0.2)"
-          : "0 1vh 3vh rgba(251, 191, 36, 0.6), inset 0 -0.3vh 0.5vh rgba(124, 45, 18, 0.3)",
-        border: "0.3vh solid",
-        borderColor: disabled
-          ? "rgba(100, 100, 100, 0.3)"
-          : "rgba(245, 158, 11, 0.8)",
-        textTransform: "uppercase",
-        letterSpacing: "0.3vh",
+          ? '0 0.5vh 1.5vh rgba(0,0,0,0.2)'
+          : '0 1vh 3vh rgba(251, 191, 36, 0.6), inset 0 -0.3vh 0.5vh rgba(124, 45, 18, 0.3)',
+        border: '0.3vh solid',
+        borderColor: disabled ? 'rgba(100, 100, 100, 0.3)' : 'rgba(245, 158, 11, 0.8)',
+        textTransform: 'uppercase',
+        letterSpacing: '0.3vh',
         textShadow: disabled
-          ? "none"
-          : "0.1vh 0.1vh 0.3vh rgba(124, 45, 18, 0.5), 0 0 1vh rgba(255, 255, 255, 0.3)",
+          ? 'none'
+          : '0.1vh 0.1vh 0.3vh rgba(124, 45, 18, 0.5), 0 0 1vh rgba(255, 255, 255, 0.3)',
         flexShrink: 0,
-        position: "relative",
-        overflow: "hidden",
+        position: 'relative',
+        overflow: 'hidden',
         _hover: disabled
           ? undefined
           : {
-              transform: "translateY(-0.5vh) scale(1.02)",
+              transform: 'translateY(-0.5vh) scale(1.02)',
               boxShadow:
-                "0 1.5vh 4vh rgba(251, 191, 36, 0.8), inset 0 -0.3vh 0.5vh rgba(124, 45, 18, 0.4)",
-              borderColor: "rgba(251, 191, 36, 1)",
+                '0 1.5vh 4vh rgba(251, 191, 36, 0.8), inset 0 -0.3vh 0.5vh rgba(124, 45, 18, 0.4)',
+              borderColor: 'rgba(251, 191, 36, 1)',
             },
         _active: disabled
           ? undefined
           : {
-              transform: "translateY(-0.2vh) scale(0.98)",
+              transform: 'translateY(-0.2vh) scale(0.98)',
             },
         _before: disabled
           ? undefined
           : {
               content: '""',
-              position: "absolute",
+              position: 'absolute',
               top: 0,
-              left: "-100%",
-              width: "100%",
-              height: "100%",
+              left: '-100%',
+              width: '100%',
+              height: '100%',
               background:
-                "linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent)",
-              animation: "shimmer 3s infinite",
+                'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent)',
+              animation: 'shimmer 3s infinite',
             },
       })}
     >
       ⚔️ BEGIN BATTLE ⚔️
     </button>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/constants/board.ts b/apps/web/src/arcade-games/rithmomachia/constants/board.ts
index 6230a796..58876489 100644
--- a/apps/web/src/arcade-games/rithmomachia/constants/board.ts
+++ b/apps/web/src/arcade-games/rithmomachia/constants/board.ts
@@ -3,39 +3,39 @@
  * Rithmomachia uses a 16x8 board (16 columns, 8 rows)
  */
 
-export const BOARD_ROWS = 8;
-export const BOARD_COLUMNS = 16;
+export const BOARD_ROWS = 8
+export const BOARD_COLUMNS = 16
 
 /**
  * Column labels (A-P for 16 columns)
  */
 export const COLUMN_LABELS = [
-  "A",
-  "B",
-  "C",
-  "D",
-  "E",
-  "F",
-  "G",
-  "H",
-  "I",
-  "J",
-  "K",
-  "L",
-  "M",
-  "N",
-  "O",
-  "P",
-] as const;
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'I',
+  'J',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+] as const
 
 /**
  * Row labels (1-8)
  */
-export const ROW_LABELS = [1, 2, 3, 4, 5, 6, 7, 8] as const;
+export const ROW_LABELS = [1, 2, 3, 4, 5, 6, 7, 8] as const
 
 /**
  * Default board dimensions (can be overridden)
  */
-export const DEFAULT_CELL_SIZE = 64;
-export const DEFAULT_GAP = 4;
-export const DEFAULT_PADDING = 32;
+export const DEFAULT_CELL_SIZE = 64
+export const DEFAULT_GAP = 4
+export const DEFAULT_PADDING = 32
diff --git a/apps/web/src/arcade-games/rithmomachia/constants/captureRelations.ts b/apps/web/src/arcade-games/rithmomachia/constants/captureRelations.ts
index 43b36690..b1166e3c 100644
--- a/apps/web/src/arcade-games/rithmomachia/constants/captureRelations.ts
+++ b/apps/web/src/arcade-games/rithmomachia/constants/captureRelations.ts
@@ -1,56 +1,56 @@
-import type { RelationKind } from "../types";
+import type { RelationKind } from '../types'
 
 /**
  * Color scheme for each capture relation type
  */
 export const RELATION_COLORS: Record<RelationKind, string> = {
-  SUM: "#ef4444", // red
-  DIFF: "#f97316", // orange
-  PRODUCT: "#8b5cf6", // purple
-  RATIO: "#3b82f6", // blue
-  EQUAL: "#10b981", // green
-  MULTIPLE: "#eab308", // yellow
-  DIVISOR: "#06b6d4", // cyan
-};
+  SUM: '#ef4444', // red
+  DIFF: '#f97316', // orange
+  PRODUCT: '#8b5cf6', // purple
+  RATIO: '#3b82f6', // blue
+  EQUAL: '#10b981', // green
+  MULTIPLE: '#eab308', // yellow
+  DIVISOR: '#06b6d4', // cyan
+}
 
 /**
  * Mathematical operator symbols for each relation
  */
 export const RELATION_OPERATORS: Record<RelationKind, string> = {
-  SUM: "+",
-  DIFF: "−",
-  PRODUCT: "×",
-  RATIO: "÷",
-  EQUAL: "=",
-  MULTIPLE: "×",
-  DIVISOR: "÷",
-};
+  SUM: '+',
+  DIFF: '−',
+  PRODUCT: '×',
+  RATIO: '÷',
+  EQUAL: '=',
+  MULTIPLE: '×',
+  DIVISOR: '÷',
+}
 
 /**
  * Human-readable descriptions for relation tooltips
  */
 export const RELATION_TOOLTIPS: Record<RelationKind, string> = {
-  EQUAL: "Equality: a = b",
-  MULTIPLE: "Multiple: b is a multiple of a",
-  DIVISOR: "Divisor: a divides evenly into b",
-  SUM: "Arithmetic Sum: a + c = b",
-  DIFF: "Arithmetic Difference: b − a = c",
-  PRODUCT: "Geometric Product: a × c = b",
-  RATIO: "Geometric Ratio: b ÷ a = c",
-};
+  EQUAL: 'Equality: a = b',
+  MULTIPLE: 'Multiple: b is a multiple of a',
+  DIVISOR: 'Divisor: a divides evenly into b',
+  SUM: 'Arithmetic Sum: a + c = b',
+  DIFF: 'Arithmetic Difference: b − a = c',
+  PRODUCT: 'Geometric Product: a × c = b',
+  RATIO: 'Geometric Ratio: b ÷ a = c',
+}
 
 /**
  * Get relation color with fallback
  */
 export function getRelationColor(relation: RelationKind | null): string {
-  if (!relation) return "#6b7280"; // gray fallback
-  return RELATION_COLORS[relation] || "#6b7280";
+  if (!relation) return '#6b7280' // gray fallback
+  return RELATION_COLORS[relation] || '#6b7280'
 }
 
 /**
  * Get relation operator symbol with fallback
  */
 export function getRelationOperator(relation: RelationKind | null): string {
-  if (!relation) return "?";
-  return RELATION_OPERATORS[relation] || "?";
+  if (!relation) return '?'
+  return RELATION_OPERATORS[relation] || '?'
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/contexts/CaptureContext.tsx b/apps/web/src/arcade-games/rithmomachia/contexts/CaptureContext.tsx
index b81ce3f3..aa6b15fc 100644
--- a/apps/web/src/arcade-games/rithmomachia/contexts/CaptureContext.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/contexts/CaptureContext.tsx
@@ -1,25 +1,25 @@
-"use client";
+'use client'
 
-import { createContext, type ReactNode, useContext } from "react";
-import type { Piece, RelationKind } from "../types";
+import { createContext, type ReactNode, useContext } from 'react'
+import type { Piece, RelationKind } from '../types'
 
 /**
  * Layout information for the capture dialog
  */
 export interface CaptureLayout {
-  targetPos: { x: number; y: number };
-  cellSize: number;
-  gap: number;
-  padding: number;
+  targetPos: { x: number; y: number }
+  cellSize: number
+  gap: number
+  padding: number
 }
 
 /**
  * Pieces involved in the current capture attempt
  */
 export interface CapturePieces {
-  mover: Piece;
-  target: Piece;
-  helper: Piece | null;
+  mover: Piece
+  target: Piece
+  helper: Piece | null
 }
 
 /**
@@ -27,45 +27,41 @@ export interface CapturePieces {
  */
 export interface CaptureContextValue {
   // Layout (calculated once, shared by all capture components)
-  layout: CaptureLayout;
+  layout: CaptureLayout
 
   // Pieces involved in capture
-  pieces: CapturePieces;
+  pieces: CapturePieces
 
   // Capture state
-  selectedRelation: RelationKind | null;
-  closing: boolean;
+  selectedRelation: RelationKind | null
+  closing: boolean
 
   // All pieces on the board (for validation)
-  allPieces: Piece[];
+  allPieces: Piece[]
 
   // For pyramid pieces, maps relation to which face value to use
-  pyramidFaceValues: Map<RelationKind, number> | null;
+  pyramidFaceValues: Map<RelationKind, number> | null
 
   // Helper functions
-  findValidHelpers: (
-    moverValue: number,
-    targetValue: number,
-    relation: RelationKind,
-  ) => Piece[];
+  findValidHelpers: (moverValue: number, targetValue: number, relation: RelationKind) => Piece[]
 
   // Actions
-  selectRelation: (relation: RelationKind) => void;
-  selectHelper: (pieceId: string) => void;
-  dismissDialog: () => void;
+  selectRelation: (relation: RelationKind) => void
+  selectHelper: (pieceId: string) => void
+  dismissDialog: () => void
 }
 
-const CaptureContext = createContext<CaptureContextValue | null>(null);
+const CaptureContext = createContext<CaptureContextValue | null>(null)
 
 /**
  * Hook to access capture context
  */
 export function useCaptureContext(): CaptureContextValue {
-  const context = useContext(CaptureContext);
+  const context = useContext(CaptureContext)
   if (!context) {
-    throw new Error("useCaptureContext must be used within CaptureProvider");
+    throw new Error('useCaptureContext must be used within CaptureProvider')
   }
-  return context;
+  return context
 }
 
 /**
@@ -75,10 +71,8 @@ export function CaptureProvider({
   children,
   value,
 }: {
-  children: ReactNode;
-  value: CaptureContextValue;
+  children: ReactNode
+  value: CaptureContextValue
 }) {
-  return (
-    <CaptureContext.Provider value={value}>{children}</CaptureContext.Provider>
-  );
+  return <CaptureContext.Provider value={value}>{children}</CaptureContext.Provider>
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/hooks/useBoardLayout.ts b/apps/web/src/arcade-games/rithmomachia/hooks/useBoardLayout.ts
index 55b09ccc..7e5caab3 100644
--- a/apps/web/src/arcade-games/rithmomachia/hooks/useBoardLayout.ts
+++ b/apps/web/src/arcade-games/rithmomachia/hooks/useBoardLayout.ts
@@ -1,19 +1,16 @@
-import { useMemo } from "react";
-import { BOARD_COLUMNS, BOARD_ROWS } from "../constants/board";
-import {
-  getBoardDimensions,
-  getSquarePosition,
-} from "../utils/boardCoordinates";
+import { useMemo } from 'react'
+import { BOARD_COLUMNS, BOARD_ROWS } from '../constants/board'
+import { getBoardDimensions, getSquarePosition } from '../utils/boardCoordinates'
 
 /**
  * Layout configuration for the game board
  */
 export interface BoardLayout {
-  cellSize: number;
-  gap: number;
-  padding: number;
-  rows: number;
-  columns: number;
+  cellSize: number
+  gap: number
+  padding: number
+  rows: number
+  columns: number
 }
 
 /**
@@ -28,15 +25,15 @@ export function useBoardLayout(): BoardLayout {
       rows: BOARD_ROWS,
       columns: BOARD_COLUMNS,
     }),
-    [],
-  );
+    []
+  )
 }
 
 /**
  * Hook that provides layout with derived values
  */
 export function useBoardLayoutWithUtils() {
-  const layout = useBoardLayout();
+  const layout = useBoardLayout()
 
   return useMemo(
     () => ({
@@ -46,6 +43,6 @@ export function useBoardLayoutWithUtils() {
       dimensions: getBoardDimensions(layout),
       getSquarePosition: (square: string) => getSquarePosition(square, layout),
     }),
-    [layout],
-  );
+    [layout]
+  )
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/hooks/usePieceSelection.ts b/apps/web/src/arcade-games/rithmomachia/hooks/usePieceSelection.ts
index bd20dedf..d3018036 100644
--- a/apps/web/src/arcade-games/rithmomachia/hooks/usePieceSelection.ts
+++ b/apps/web/src/arcade-games/rithmomachia/hooks/usePieceSelection.ts
@@ -1,13 +1,13 @@
-import { useCallback, useState } from "react";
-import type { Color, Piece } from "../types";
-import { validateMove } from "../utils/pathValidator";
+import { useCallback, useState } from 'react'
+import type { Color, Piece } from '../types'
+import { validateMove } from '../utils/pathValidator'
 
 /**
  * Callbacks for piece selection events
  */
 export interface PieceSelectionCallbacks {
-  onMove: (from: string, to: string, pieceId: string) => void;
-  onCaptureAttempt: (from: string, to: string, pieceId: string) => void;
+  onMove: (from: string, to: string, pieceId: string) => void
+  onCaptureAttempt: (from: string, to: string, pieceId: string) => void
 }
 
 /**
@@ -17,72 +17,67 @@ export function usePieceSelection(
   pieces: Record<string, Piece>,
   playerColor: Color | null,
   isMyTurn: boolean,
-  callbacks: PieceSelectionCallbacks,
+  callbacks: PieceSelectionCallbacks
 ) {
-  const [selectedSquare, setSelectedSquare] = useState<string | null>(null);
+  const [selectedSquare, setSelectedSquare] = useState<string | null>(null)
 
   const handleSquareClick = useCallback(
     (square: string, piece: Piece | undefined) => {
-      if (!isMyTurn) return;
+      if (!isMyTurn) return
 
       // If no piece selected, select this piece if it's yours
       if (!selectedSquare) {
         if (piece && piece.color === playerColor) {
-          setSelectedSquare(square);
+          setSelectedSquare(square)
         }
-        return;
+        return
       }
 
       // If clicking the same square, deselect
       if (selectedSquare === square) {
-        setSelectedSquare(null);
-        return;
+        setSelectedSquare(null)
+        return
       }
 
       // If clicking another piece of yours, select that instead
       if (piece && piece.color === playerColor) {
-        setSelectedSquare(square);
-        return;
+        setSelectedSquare(square)
+        return
       }
 
       // Otherwise, attempt to move
       const selectedPiece = Object.values(pieces).find(
-        (p) => p.square === selectedSquare && !p.captured,
-      );
+        (p) => p.square === selectedSquare && !p.captured
+      )
       if (selectedPiece) {
         // Validate the move is legal before proceeding
-        const validation = validateMove(
-          selectedPiece,
-          selectedSquare,
-          square,
-          pieces,
-        );
+        const validation = validateMove(selectedPiece, selectedSquare, square, pieces)
 
         if (!validation.valid) {
           // Invalid move - silently ignore
-          return;
+          return
         }
 
         // If target square has an enemy piece, open capture dialog
         if (piece && piece.color !== playerColor) {
-          callbacks.onCaptureAttempt(selectedSquare, square, selectedPiece.id);
+          callbacks.onCaptureAttempt(selectedSquare, square, selectedPiece.id)
         } else {
           // Simple move (no capture)
-          callbacks.onMove(selectedSquare, square, selectedPiece.id);
-          setSelectedSquare(null);
+          callbacks.onMove(selectedSquare, square, selectedPiece.id)
+          setSelectedSquare(null)
         }
       }
     },
-    [selectedSquare, isMyTurn, playerColor, pieces, callbacks],
-  );
+    [selectedSquare, isMyTurn, playerColor, pieces, callbacks]
+  )
 
   const clearSelection = useCallback(() => {
-    setSelectedSquare(null);
-  }, []);
+    setSelectedSquare(null)
+  }, [])
 
   return {
     selectedSquare,
     handleSquareClick,
     clearSelection,
-  };
+  }
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/hooks/useRosterWarning.ts b/apps/web/src/arcade-games/rithmomachia/hooks/useRosterWarning.ts
index 01d7b480..4064e2f9 100644
--- a/apps/web/src/arcade-games/rithmomachia/hooks/useRosterWarning.ts
+++ b/apps/web/src/arcade-games/rithmomachia/hooks/useRosterWarning.ts
@@ -1,67 +1,52 @@
-import { useMemo } from "react";
-import type { RosterWarning } from "@/components/nav/GameContextNav";
-import { useGameMode } from "@/contexts/GameModeContext";
-import {
-  useDeactivatePlayer,
-  useKickUser,
-  useRoomData,
-} from "@/hooks/useRoomData";
-import { useViewerId } from "@/hooks/useViewerId";
-import { useRithmomachia } from "../Provider";
+import { useMemo } from 'react'
+import type { RosterWarning } from '@/components/nav/GameContextNav'
+import { useGameMode } from '@/contexts/GameModeContext'
+import { useDeactivatePlayer, useKickUser, useRoomData } from '@/hooks/useRoomData'
+import { useViewerId } from '@/hooks/useViewerId'
+import { useRithmomachia } from '../Provider'
 
-export function useRosterWarning(
-  phase: "setup" | "playing",
-): RosterWarning | undefined {
-  const { rosterStatus, whitePlayerId, blackPlayerId } = useRithmomachia();
-  const {
-    players: playerMap,
-    activePlayers: activePlayerIds,
-    addPlayer,
-    setActive,
-  } = useGameMode();
-  const { roomData } = useRoomData();
-  const { data: viewerId } = useViewerId();
-  const { mutate: kickUser } = useKickUser();
-  const { mutate: deactivatePlayer } = useDeactivatePlayer();
+export function useRosterWarning(phase: 'setup' | 'playing'): RosterWarning | undefined {
+  const { rosterStatus, whitePlayerId, blackPlayerId } = useRithmomachia()
+  const { players: playerMap, activePlayers: activePlayerIds, addPlayer, setActive } = useGameMode()
+  const { roomData } = useRoomData()
+  const { data: viewerId } = useViewerId()
+  const { mutate: kickUser } = useKickUser()
+  const { mutate: deactivatePlayer } = useDeactivatePlayer()
 
   return useMemo(() => {
     // Don't show notice for 'ok' or 'noLocalControl' (observers are allowed)
-    if (
-      rosterStatus.status === "ok" ||
-      rosterStatus.status === "noLocalControl"
-    ) {
-      return undefined;
+    if (rosterStatus.status === 'ok' || rosterStatus.status === 'noLocalControl') {
+      return undefined
     }
 
     const playersArray = Array.from(playerMap.values()).sort((a, b) => {
       const aTime =
-        typeof a.createdAt === "number"
+        typeof a.createdAt === 'number'
           ? a.createdAt
           : a.createdAt instanceof Date
             ? a.createdAt.getTime()
-            : 0;
+            : 0
       const bTime =
-        typeof b.createdAt === "number"
+        typeof b.createdAt === 'number'
           ? b.createdAt
           : b.createdAt instanceof Date
             ? b.createdAt.getTime()
-            : 0;
-      return aTime - bTime;
-    });
+            : 0
+      return aTime - bTime
+    })
 
     const isHost =
       roomData && viewerId
-        ? roomData.members.find((m) => m.userId === viewerId)?.isCreator ===
-          true
-        : false;
+        ? roomData.members.find((m) => m.userId === viewerId)?.isCreator === true
+        : false
 
     const removableLocalPlayers = playersArray.filter(
       (player) =>
         player.isLocal !== false &&
         activePlayerIds.has(player.id) &&
         player.id !== whitePlayerId &&
-        player.id !== blackPlayerId,
-    );
+        player.id !== blackPlayerId
+    )
 
     const kickablePlayers =
       isHost && roomData
@@ -70,52 +55,52 @@ export function useRosterWarning(
               player.isLocal === false &&
               activePlayerIds.has(player.id) &&
               player.id !== whitePlayerId &&
-              player.id !== blackPlayerId,
+              player.id !== blackPlayerId
           )
-        : [];
+        : []
 
     const inactiveLocalPlayer = playersArray.find(
-      (player) => player.isLocal !== false && !activePlayerIds.has(player.id),
-    );
+      (player) => player.isLocal !== false && !activePlayerIds.has(player.id)
+    )
 
     const handleKick = (player: any) => {
-      if (!roomData) return;
+      if (!roomData) return
       for (const [userId, players] of Object.entries(roomData.memberPlayers)) {
         if (players.some((p) => p.id === player.id)) {
-          kickUser({ roomId: roomData.id, userId });
-          break;
+          kickUser({ roomId: roomData.id, userId })
+          break
         }
       }
-    };
+    }
 
-    if (rosterStatus.status === "tooFew") {
+    if (rosterStatus.status === 'tooFew') {
       // During setup, don't show nav banner - SetupPlayerRequirement panel handles this
-      if (phase === "setup") {
-        return undefined;
+      if (phase === 'setup') {
+        return undefined
       }
 
       // During playing phase, show nav warning banner
-      const actions = [];
+      const actions = []
       if (inactiveLocalPlayer) {
         actions.push({
           label: `Activate ${inactiveLocalPlayer.name}`,
           onClick: () => setActive(inactiveLocalPlayer.id, true),
-        });
+        })
       } else {
         actions.push({
-          label: "Create local player",
+          label: 'Create local player',
           onClick: () => addPlayer({ isActive: true }),
-        });
+        })
       }
 
       return {
-        heading: "Need two active players",
-        description: "Gameplay is paused until two players are active.",
+        heading: 'Need two active players',
+        description: 'Gameplay is paused until two players are active.',
         actions,
-      };
+      }
     }
 
-    return undefined;
+    return undefined
   }, [
     rosterStatus.status,
     phase,
@@ -129,5 +114,5 @@ export function useRosterWarning(
     setActive,
     kickUser,
     deactivatePlayer,
-  ]);
+  ])
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/index.ts b/apps/web/src/arcade-games/rithmomachia/index.ts
index 16c6871a..e9791b2d 100644
--- a/apps/web/src/arcade-games/rithmomachia/index.ts
+++ b/apps/web/src/arcade-games/rithmomachia/index.ts
@@ -1,33 +1,25 @@
-import {
-  defineGame,
-  type GameManifest,
-  getGameTheme,
-} from "@/lib/arcade/game-sdk";
-import { RithmomachiaGame } from "./components/RithmomachiaGame";
-import { RithmomachiaProvider } from "./Provider";
-import type {
-  RithmomachiaConfig,
-  RithmomachiaMove,
-  RithmomachiaState,
-} from "./types";
-import { rithmomachiaValidator } from "./Validator";
+import { defineGame, type GameManifest, getGameTheme } from '@/lib/arcade/game-sdk'
+import { RithmomachiaGame } from './components/RithmomachiaGame'
+import { RithmomachiaProvider } from './Provider'
+import type { RithmomachiaConfig, RithmomachiaMove, RithmomachiaState } from './types'
+import { rithmomachiaValidator } from './Validator'
 
 /**
  * Game manifest for Rithmomachia.
  */
 const manifest: GameManifest = {
-  name: "rithmomachia",
-  displayName: "Rithmomachia",
-  icon: "🎲",
-  description: "Medieval mathematical battle game",
+  name: 'rithmomachia',
+  displayName: 'Rithmomachia',
+  icon: '🎲',
+  description: 'Medieval mathematical battle game',
   longDescription:
-    "Rithmomachia (Battle of Numbers) is a medieval strategy game where pieces with numerical values capture each other through mathematical relations. Win by achieving harmony (a mathematical progression) in enemy territory, or by capturing enough pieces to exhaust your opponent.",
+    'Rithmomachia (Battle of Numbers) is a medieval strategy game where pieces with numerical values capture each other through mathematical relations. Win by achieving harmony (a mathematical progression) in enemy territory, or by capturing enough pieces to exhaust your opponent.',
   maxPlayers: 2,
-  difficulty: "Advanced",
-  chips: ["⚔️ Strategy", "🔢 Mathematical", "🏛️ Historical", "🎯 Two-Player"],
-  ...getGameTheme("purple"),
+  difficulty: 'Advanced',
+  chips: ['⚔️ Strategy', '🔢 Mathematical', '🏛️ Historical', '🎯 Two-Player'],
+  ...getGameTheme('purple'),
   available: true,
-};
+}
 
 /**
  * Default configuration for Rithmomachia.
@@ -39,76 +31,68 @@ const defaultConfig: RithmomachiaConfig = {
   fiftyMoveRule: true,
   allowAnySetOnRecheck: true,
   timeControlMs: null,
-};
+}
 
 /**
  * Config validation (type guard).
  * Validates all config fields and their constraints.
  */
 function validateConfig(config: unknown): config is RithmomachiaConfig {
-  if (typeof config !== "object" || config === null) {
-    return false;
+  if (typeof config !== 'object' || config === null) {
+    return false
   }
 
-  const c = config as Record<string, unknown>;
+  const c = config as Record<string, unknown>
 
   // Validate pointWinEnabled
-  if (!("pointWinEnabled" in c) || typeof c.pointWinEnabled !== "boolean") {
-    return false;
+  if (!('pointWinEnabled' in c) || typeof c.pointWinEnabled !== 'boolean') {
+    return false
   }
 
   // Validate pointWinThreshold
   if (
-    !("pointWinThreshold" in c) ||
-    typeof c.pointWinThreshold !== "number" ||
+    !('pointWinThreshold' in c) ||
+    typeof c.pointWinThreshold !== 'number' ||
     c.pointWinThreshold < 1
   ) {
-    return false;
+    return false
   }
 
   // Validate repetitionRule
-  if (!("repetitionRule" in c) || typeof c.repetitionRule !== "boolean") {
-    return false;
+  if (!('repetitionRule' in c) || typeof c.repetitionRule !== 'boolean') {
+    return false
   }
 
   // Validate fiftyMoveRule
-  if (!("fiftyMoveRule" in c) || typeof c.fiftyMoveRule !== "boolean") {
-    return false;
+  if (!('fiftyMoveRule' in c) || typeof c.fiftyMoveRule !== 'boolean') {
+    return false
   }
 
   // Validate allowAnySetOnRecheck
-  if (
-    !("allowAnySetOnRecheck" in c) ||
-    typeof c.allowAnySetOnRecheck !== "boolean"
-  ) {
-    return false;
+  if (!('allowAnySetOnRecheck' in c) || typeof c.allowAnySetOnRecheck !== 'boolean') {
+    return false
   }
 
   // Validate timeControlMs
-  if ("timeControlMs" in c) {
-    if (
-      c.timeControlMs !== null &&
-      (typeof c.timeControlMs !== "number" || c.timeControlMs < 0)
-    ) {
-      return false;
+  if ('timeControlMs' in c) {
+    if (c.timeControlMs !== null && (typeof c.timeControlMs !== 'number' || c.timeControlMs < 0)) {
+      return false
     }
   }
 
-  return true;
+  return true
 }
 
 /**
  * Rithmomachia game definition.
  */
-export const rithmomachiaGame = defineGame<
-  RithmomachiaConfig,
-  RithmomachiaState,
-  RithmomachiaMove
->({
-  manifest,
-  Provider: RithmomachiaProvider,
-  GameComponent: RithmomachiaGame,
-  validator: rithmomachiaValidator,
-  defaultConfig,
-  validateConfig,
-});
+export const rithmomachiaGame = defineGame<RithmomachiaConfig, RithmomachiaState, RithmomachiaMove>(
+  {
+    manifest,
+    Provider: RithmomachiaProvider,
+    GameComponent: RithmomachiaGame,
+    validator: rithmomachiaValidator,
+    defaultConfig,
+    validateConfig,
+  }
+)
diff --git a/apps/web/src/arcade-games/rithmomachia/messages.ts b/apps/web/src/arcade-games/rithmomachia/messages.ts
index 701f161c..6f705409 100644
--- a/apps/web/src/arcade-games/rithmomachia/messages.ts
+++ b/apps/web/src/arcade-games/rithmomachia/messages.ts
@@ -4,13 +4,13 @@
  */
 
 // Import existing locale files
-import enGuide from "./i18n/locales/en.json";
-import deGuide from "./i18n/locales/de.json";
-import jaGuide from "./i18n/locales/ja.json";
-import hiGuide from "./i18n/locales/hi.json";
-import esGuide from "./i18n/locales/es.json";
-import laGuide from "./i18n/locales/la.json";
-import gohGuide from "./i18n/locales/goh.json";
+import enGuide from './i18n/locales/en.json'
+import deGuide from './i18n/locales/de.json'
+import jaGuide from './i18n/locales/ja.json'
+import hiGuide from './i18n/locales/hi.json'
+import esGuide from './i18n/locales/es.json'
+import laGuide from './i18n/locales/la.json'
+import gohGuide from './i18n/locales/goh.json'
 
 export const rithmomachiaMessages = {
   en: { rithmomachia: enGuide },
@@ -20,4 +20,4 @@ export const rithmomachiaMessages = {
   es: { rithmomachia: esGuide },
   la: { rithmomachia: laGuide },
   goh: { rithmomachia: gohGuide },
-} as const;
+} as const
diff --git a/apps/web/src/arcade-games/rithmomachia/types.ts b/apps/web/src/arcade-games/rithmomachia/types.ts
index 3e0cc05c..f9ca6096 100644
--- a/apps/web/src/arcade-games/rithmomachia/types.ts
+++ b/apps/web/src/arcade-games/rithmomachia/types.ts
@@ -1,286 +1,286 @@
-import type { GameConfig, GameState } from "@/lib/arcade/game-sdk";
+import type { GameConfig, GameState } from '@/lib/arcade/game-sdk'
 
 // === PIECE TYPES ===
 
-export type PieceType = "C" | "T" | "S" | "P"; // Circle, Triangle, Square, Pyramid
-export type Color = "W" | "B"; // White, Black
+export type PieceType = 'C' | 'T' | 'S' | 'P' // Circle, Triangle, Square, Pyramid
+export type Color = 'W' | 'B' // White, Black
 
 export interface Piece {
-  id: string; // stable UUID (e.g., "W_C_01")
-  color: Color;
-  type: PieceType;
-  value?: number; // for C/T/S always present
-  pyramidFaces?: number[]; // for P only (length 4)
-  activePyramidFace?: number | null; // last chosen face for logging/captures
-  square: string; // "A1".."P8"
-  captured: boolean;
+  id: string // stable UUID (e.g., "W_C_01")
+  color: Color
+  type: PieceType
+  value?: number // for C/T/S always present
+  pyramidFaces?: number[] // for P only (length 4)
+  activePyramidFace?: number | null // last chosen face for logging/captures
+  square: string // "A1".."P8"
+  captured: boolean
 }
 
 // === RELATIONS ===
 
 export type RelationKind =
-  | "EQUAL" // a == b
-  | "MULTIPLE" // a % b == 0
-  | "DIVISOR" // b % a == 0
-  | "SUM" // a + h == b or b + h == a
-  | "DIFF" // |a - h| == b or |b - h| == a
-  | "PRODUCT" // a * h == b or b * h == a
-  | "RATIO"; // a * r == b or b * r == a (r = helper value)
+  | 'EQUAL' // a == b
+  | 'MULTIPLE' // a % b == 0
+  | 'DIVISOR' // b % a == 0
+  | 'SUM' // a + h == b or b + h == a
+  | 'DIFF' // |a - h| == b or |b - h| == a
+  | 'PRODUCT' // a * h == b or b * h == a
+  | 'RATIO' // a * r == b or b * r == a (r = helper value)
 
 export interface CaptureContext {
-  relation: RelationKind;
-  moverPieceId: string;
-  targetPieceId: string;
-  helperPieceId?: string; // required for SUM/DIFF/PRODUCT/RATIO
-  moverFaceUsed?: number | null; // if mover was a Pyramid
+  relation: RelationKind
+  moverPieceId: string
+  targetPieceId: string
+  helperPieceId?: string // required for SUM/DIFF/PRODUCT/RATIO
+  moverFaceUsed?: number | null // if mover was a Pyramid
 }
 
 export interface AmbushContext {
-  relation: RelationKind;
-  enemyPieceId: string;
-  helper1Id: string;
-  helper2Id: string; // two helpers for ambush
+  relation: RelationKind
+  enemyPieceId: string
+  helper1Id: string
+  helper2Id: string // two helpers for ambush
 }
 
 // === HARMONY ===
 
-export type HarmonyType = "ARITH" | "GEOM" | "HARM";
+export type HarmonyType = 'ARITH' | 'GEOM' | 'HARM'
 
 export interface HarmonyDeclaration {
-  by: Color;
-  pieceIds: string[]; // exactly 3 for classical three-piece proportions
-  type: HarmonyType;
+  by: Color
+  pieceIds: string[] // exactly 3 for classical three-piece proportions
+  type: HarmonyType
   params: {
-    a?: string; // first value in proportion (A-M-B structure)
-    m?: string; // middle value in proportion
-    b?: string; // last value in proportion
-  };
-  declaredAtPly: number;
+    a?: string // first value in proportion (A-M-B structure)
+    m?: string // middle value in proportion
+    b?: string // last value in proportion
+  }
+  declaredAtPly: number
 }
 
 // === MOVE RECORDS ===
 
 export interface MoveRecord {
-  ply: number;
-  color: Color;
-  from: string; // e.g., "C2"
-  to: string; // e.g., "C6"
-  pieceId: string;
-  pyramidFaceUsed?: number | null;
-  capture?: CaptureContext | null;
-  ambush?: AmbushContext | null;
-  harmonyDeclared?: HarmonyDeclaration | null;
-  pointsCapturedThisMove?: number; // if point scoring is on
-  fenLikeHash?: string; // for repetition detection
-  noProgressCount?: number; // for 50-move rule
-  resultAfter?: "ONGOING" | "WINS_W" | "WINS_B" | "DRAW";
+  ply: number
+  color: Color
+  from: string // e.g., "C2"
+  to: string // e.g., "C6"
+  pieceId: string
+  pyramidFaceUsed?: number | null
+  capture?: CaptureContext | null
+  ambush?: AmbushContext | null
+  harmonyDeclared?: HarmonyDeclaration | null
+  pointsCapturedThisMove?: number // if point scoring is on
+  fenLikeHash?: string // for repetition detection
+  noProgressCount?: number // for 50-move rule
+  resultAfter?: 'ONGOING' | 'WINS_W' | 'WINS_B' | 'DRAW'
 }
 
 // === GAME STATE ===
 
 export interface RithmomachiaState extends GameState {
   // Configuration (stored in state per arcade pattern)
-  pointWinEnabled: boolean;
-  pointWinThreshold: number;
-  repetitionRule: boolean;
-  fiftyMoveRule: boolean;
-  allowAnySetOnRecheck: boolean;
-  timeControlMs: number | null;
-  whitePlayerId?: string | null;
-  blackPlayerId?: string | null;
+  pointWinEnabled: boolean
+  pointWinThreshold: number
+  repetitionRule: boolean
+  fiftyMoveRule: boolean
+  allowAnySetOnRecheck: boolean
+  timeControlMs: number | null
+  whitePlayerId?: string | null
+  blackPlayerId?: string | null
 
   // Game phase
-  gamePhase: "setup" | "playing" | "results";
+  gamePhase: 'setup' | 'playing' | 'results'
 
   // Board dimensions
-  boardCols: number; // 16
-  boardRows: number; // 8
+  boardCols: number // 16
+  boardRows: number // 8
 
   // Current turn
-  turn: Color; // 'W' or 'B'
+  turn: Color // 'W' or 'B'
 
   // Pieces (key = piece.id)
-  pieces: Record<string, Piece>;
+  pieces: Record<string, Piece>
 
   // Captured pieces
   capturedPieces: {
-    W: Piece[];
-    B: Piece[];
-  };
+    W: Piece[]
+    B: Piece[]
+  }
 
   // Move history
-  history: MoveRecord[];
+  history: MoveRecord[]
 
   // Pending harmony (declared last turn, awaiting validation)
-  pendingHarmony: HarmonyDeclaration | null;
+  pendingHarmony: HarmonyDeclaration | null
 
   // Draw/repetition tracking
-  noProgressCount: number; // for 50-move rule
-  stateHashes: string[]; // Zobrist hashes for repetition detection
+  noProgressCount: number // for 50-move rule
+  stateHashes: string[] // Zobrist hashes for repetition detection
 
   // Victory state
-  winner: Color | null;
+  winner: Color | null
   winCondition:
-    | "HARMONY"
-    | "EXHAUSTION"
-    | "RESIGNATION"
-    | "POINTS"
-    | "AGREEMENT"
-    | "REPETITION"
-    | "FIFTY"
-    | null;
+    | 'HARMONY'
+    | 'EXHAUSTION'
+    | 'RESIGNATION'
+    | 'POINTS'
+    | 'AGREEMENT'
+    | 'REPETITION'
+    | 'FIFTY'
+    | null
 
   // Points (if enabled by config)
   pointsCaptured?: {
-    W: number;
-    B: number;
-  };
+    W: number
+    B: number
+  }
 }
 
 // === GAME CONFIG ===
 
 export interface RithmomachiaConfig extends GameConfig {
   // Rule toggles
-  pointWinEnabled: boolean; // default: false
-  pointWinThreshold: number; // default: 30
-  repetitionRule: boolean; // default: true
-  fiftyMoveRule: boolean; // default: true
-  allowAnySetOnRecheck: boolean; // default: true (harmony revalidation)
+  pointWinEnabled: boolean // default: false
+  pointWinThreshold: number // default: 30
+  repetitionRule: boolean // default: true
+  fiftyMoveRule: boolean // default: true
+  allowAnySetOnRecheck: boolean // default: true (harmony revalidation)
 
   // Optional time controls (not implemented in v1)
-  timeControlMs?: number | null;
+  timeControlMs?: number | null
 
   // Player assignments (null = auto-assign)
-  whitePlayerId?: string | null; // default: null (auto-assign first active player)
-  blackPlayerId?: string | null; // default: null (auto-assign second active player)
+  whitePlayerId?: string | null // default: null (auto-assign first active player)
+  blackPlayerId?: string | null // default: null (auto-assign second active player)
 }
 
 // === GAME MOVES ===
 
 export type RithmomachiaMove =
   | {
-      type: "START_GAME";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'START_GAME'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        playerColor: Color;
-        activePlayers: string[];
-      };
+        playerColor: Color
+        activePlayers: string[]
+      }
     }
   | {
-      type: "MOVE";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'MOVE'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        from: string;
-        to: string;
-        pieceId: string;
-        pyramidFaceUsed?: number | null;
-        capture?: Omit<CaptureContext, "moverPieceId" | "targetPieceId"> & {
-          targetPieceId: string;
-        };
-        ambush?: AmbushContext;
-      };
+        from: string
+        to: string
+        pieceId: string
+        pyramidFaceUsed?: number | null
+        capture?: Omit<CaptureContext, 'moverPieceId' | 'targetPieceId'> & {
+          targetPieceId: string
+        }
+        ambush?: AmbushContext
+      }
     }
   | {
-      type: "DECLARE_HARMONY";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'DECLARE_HARMONY'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        pieceIds: string[];
-        harmonyType: HarmonyType;
-        params: HarmonyDeclaration["params"];
-      };
+        pieceIds: string[]
+        harmonyType: HarmonyType
+        params: HarmonyDeclaration['params']
+      }
     }
   | {
-      type: "RESIGN";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'RESIGN'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "OFFER_DRAW";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'OFFER_DRAW'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "ACCEPT_DRAW";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'ACCEPT_DRAW'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "CLAIM_REPETITION";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'CLAIM_REPETITION'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "CLAIM_FIFTY_MOVE";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'CLAIM_FIFTY_MOVE'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "SET_CONFIG";
-      playerId: string;
-      userId: string;
-      timestamp: number;
+      type: 'SET_CONFIG'
+      playerId: string
+      userId: string
+      timestamp: number
       data: {
-        field: string;
-        value: any;
-      };
+        field: string
+        value: any
+      }
     }
   | {
-      type: "RESET_GAME";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'RESET_GAME'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "GO_TO_SETUP";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
-    };
+      type: 'GO_TO_SETUP'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
+    }
 
 // === HELPER TYPES ===
 
 // Square notation helpers
 export type File =
-  | "A"
-  | "B"
-  | "C"
-  | "D"
-  | "E"
-  | "F"
-  | "G"
-  | "H"
-  | "I"
-  | "J"
-  | "K"
-  | "L"
-  | "M"
-  | "N"
-  | "O"
-  | "P";
-export type Rank = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-export type Square = `${File}${Rank}`;
+  | 'A'
+  | 'B'
+  | 'C'
+  | 'D'
+  | 'E'
+  | 'F'
+  | 'G'
+  | 'H'
+  | 'I'
+  | 'J'
+  | 'K'
+  | 'L'
+  | 'M'
+  | 'N'
+  | 'O'
+  | 'P'
+export type Rank = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
+export type Square = `${File}${Rank}`
 
 // Board boundaries
-export const WHITE_HALF_ROWS = [1, 2, 3, 4] as const;
-export const BLACK_HALF_ROWS = [5, 6, 7, 8] as const;
+export const WHITE_HALF_ROWS = [1, 2, 3, 4] as const
+export const BLACK_HALF_ROWS = [5, 6, 7, 8] as const
 
 // Point values for pieces
 export const PIECE_POINTS: Record<PieceType, number> = {
@@ -288,30 +288,30 @@ export const PIECE_POINTS: Record<PieceType, number> = {
   T: 2, // Triangle
   S: 3, // Square
   P: 5, // Pyramid
-};
+}
 
 // Utility: check if square is in enemy half
 export function isInEnemyHalf(square: string, color: Color): boolean {
-  const rank = Number.parseInt(square[1], 10);
-  if (color === "W") {
-    return (BLACK_HALF_ROWS as readonly number[]).includes(rank);
+  const rank = Number.parseInt(square[1], 10)
+  if (color === 'W') {
+    return (BLACK_HALF_ROWS as readonly number[]).includes(rank)
   }
-  return (WHITE_HALF_ROWS as readonly number[]).includes(rank);
+  return (WHITE_HALF_ROWS as readonly number[]).includes(rank)
 }
 
 // Utility: parse square notation
 export function parseSquare(square: string): { file: number; rank: number } {
-  const file = square.charCodeAt(0) - 65; // A=0, B=1, ..., P=15
-  const rank = Number.parseInt(square[1], 10); // 1-8
-  return { file, rank };
+  const file = square.charCodeAt(0) - 65 // A=0, B=1, ..., P=15
+  const rank = Number.parseInt(square[1], 10) // 1-8
+  return { file, rank }
 }
 
 // Utility: create square notation
 export function makeSquare(file: number, rank: number): string {
-  return `${String.fromCharCode(65 + file)}${rank}`;
+  return `${String.fromCharCode(65 + file)}${rank}`
 }
 
 // Utility: get opponent color
 export function opponentColor(color: Color): Color {
-  return color === "W" ? "B" : "W";
+  return color === 'W' ? 'B' : 'W'
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/utils/boardCoordinates.ts b/apps/web/src/arcade-games/rithmomachia/utils/boardCoordinates.ts
index e740d39b..cad7af90 100644
--- a/apps/web/src/arcade-games/rithmomachia/utils/boardCoordinates.ts
+++ b/apps/web/src/arcade-games/rithmomachia/utils/boardCoordinates.ts
@@ -3,14 +3,14 @@
  */
 
 export interface BoardPosition {
-  x: number;
-  y: number;
+  x: number
+  y: number
 }
 
 export interface BoardLayout {
-  cellSize: number;
-  gap: number;
-  padding: number;
+  cellSize: number
+  gap: number
+  padding: number
 }
 
 /**
@@ -19,9 +19,9 @@ export interface BoardLayout {
  * @returns Object with file (0-7) and rank (1-8)
  */
 export function parseSquare(square: string): { file: number; rank: number } {
-  const file = square.charCodeAt(0) - 65; // 'A' = 0, 'B' = 1, etc.
-  const rank = Number.parseInt(square.slice(1), 10);
-  return { file, rank };
+  const file = square.charCodeAt(0) - 65 // 'A' = 0, 'B' = 1, etc.
+  const rank = Number.parseInt(square.slice(1), 10)
+  return { file, rank }
 }
 
 /**
@@ -30,7 +30,7 @@ export function parseSquare(square: string): { file: number; rank: number } {
  * @returns Row index (0-7)
  */
 export function rankToRow(rank: number): number {
-  return 8 - rank;
+  return 8 - rank
 }
 
 /**
@@ -39,23 +39,14 @@ export function rankToRow(rank: number): number {
  * @param layout - Board layout configuration
  * @returns Center position {x, y} in pixels
  */
-export function getSquarePosition(
-  square: string,
-  layout: BoardLayout,
-): BoardPosition {
-  const { file, rank } = parseSquare(square);
-  const row = rankToRow(rank);
+export function getSquarePosition(square: string, layout: BoardLayout): BoardPosition {
+  const { file, rank } = parseSquare(square)
+  const row = rankToRow(rank)
 
   return {
-    x:
-      layout.padding +
-      file * (layout.cellSize + layout.gap) +
-      layout.cellSize / 2,
-    y:
-      layout.padding +
-      row * (layout.cellSize + layout.gap) +
-      layout.cellSize / 2,
-  };
+    x: layout.padding + file * (layout.cellSize + layout.gap) + layout.cellSize / 2,
+    y: layout.padding + row * (layout.cellSize + layout.gap) + layout.cellSize / 2,
+  }
 }
 
 /**
@@ -64,17 +55,14 @@ export function getSquarePosition(
  * @param layout - Board layout configuration
  * @returns Top-left position {x, y} in pixels
  */
-export function getSquareCorner(
-  square: string,
-  layout: BoardLayout,
-): BoardPosition {
-  const { file, rank } = parseSquare(square);
-  const row = rankToRow(rank);
+export function getSquareCorner(square: string, layout: BoardLayout): BoardPosition {
+  const { file, rank } = parseSquare(square)
+  const row = rankToRow(rank)
 
   return {
     x: layout.padding + file * (layout.cellSize + layout.gap),
     y: layout.padding + row * (layout.cellSize + layout.gap),
-  };
+  }
 }
 
 /**
@@ -83,12 +71,12 @@ export function getSquareCorner(
  * @returns Total width and height in pixels
  */
 export function getBoardDimensions(layout: BoardLayout): {
-  width: number;
-  height: number;
+  width: number
+  height: number
 } {
-  const boardSize = 8 * layout.cellSize + 7 * layout.gap;
+  const boardSize = 8 * layout.cellSize + 7 * layout.gap
   return {
     width: boardSize + 2 * layout.padding,
     height: boardSize + 2 * layout.padding,
-  };
+  }
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/utils/harmonyValidator.ts b/apps/web/src/arcade-games/rithmomachia/utils/harmonyValidator.ts
index 836da4c8..64536c8f 100644
--- a/apps/web/src/arcade-games/rithmomachia/utils/harmonyValidator.ts
+++ b/apps/web/src/arcade-games/rithmomachia/utils/harmonyValidator.ts
@@ -1,6 +1,6 @@
-import type { Color, HarmonyDeclaration, HarmonyType, Piece } from "../types";
-import { isInEnemyHalf, parseSquare } from "../types";
-import { getEffectiveValue } from "./pieceSetup";
+import type { Color, HarmonyDeclaration, HarmonyType, Piece } from '../types'
+import { isInEnemyHalf, parseSquare } from '../types'
+import { getEffectiveValue } from './pieceSetup'
 
 /**
  * Harmony (progression) validator for Rithmomachia.
@@ -13,50 +13,50 @@ import { getEffectiveValue } from "./pieceSetup";
  */
 
 export interface HarmonyValidationResult {
-  valid: boolean;
-  type?: HarmonyType;
-  params?: HarmonyDeclaration["params"];
-  reason?: string;
+  valid: boolean
+  type?: HarmonyType
+  params?: HarmonyDeclaration['params']
+  reason?: string
 }
 
-export type HarmonyLayoutMode = "adjacent" | "equalSpacing" | "collinear";
+export type HarmonyLayoutMode = 'adjacent' | 'equalSpacing' | 'collinear'
 
 /**
  * Check if three squares are collinear (on same row, column, or diagonal)
  */
 function areCollinear(sq1: string, sq2: string, sq3: string): boolean {
-  const p1 = parseSquare(sq1);
-  const p2 = parseSquare(sq2);
-  const p3 = parseSquare(sq3);
+  const p1 = parseSquare(sq1)
+  const p2 = parseSquare(sq2)
+  const p3 = parseSquare(sq3)
 
-  if (!p1 || !p2 || !p3) return false;
+  if (!p1 || !p2 || !p3) return false
 
   // Same rank (horizontal row)
-  if (p1.rank === p2.rank && p2.rank === p3.rank) return true;
+  if (p1.rank === p2.rank && p2.rank === p3.rank) return true
 
   // Same file (vertical column)
-  if (p1.file === p2.file && p2.file === p3.file) return true;
+  if (p1.file === p2.file && p2.file === p3.file) return true
 
   // Diagonal: check if slope is consistent
-  const dx12 = p2.file - p1.file;
-  const dy12 = p2.rank - p1.rank;
-  const dx23 = p3.file - p2.file;
-  const dy23 = p3.rank - p2.rank;
+  const dx12 = p2.file - p1.file
+  const dy12 = p2.rank - p1.rank
+  const dx23 = p3.file - p2.file
+  const dy23 = p3.rank - p2.rank
 
   // Cross product should be zero for collinear points
-  return dx12 * dy23 === dy12 * dx23;
+  return dx12 * dy23 === dy12 * dx23
 }
 
 /**
  * Get the distance between two squares (Manhattan or diagonal)
  */
 function getDistance(sq1: string, sq2: string): number {
-  const p1 = parseSquare(sq1);
-  const p2 = parseSquare(sq2);
+  const p1 = parseSquare(sq1)
+  const p2 = parseSquare(sq2)
 
-  if (!p1 || !p2) return Infinity;
+  if (!p1 || !p2) return Infinity
 
-  return Math.max(Math.abs(p2.file - p1.file), Math.abs(p2.rank - p1.rank));
+  return Math.max(Math.abs(p2.file - p1.file), Math.abs(p2.rank - p1.rank))
 }
 
 /**
@@ -64,131 +64,119 @@ function getDistance(sq1: string, sq2: string): number {
  * Returns the middle piece, or null if they're not properly ordered
  */
 function findMiddlePiece(pieces: Piece[]): Piece | null {
-  if (pieces.length !== 3) return null;
+  if (pieces.length !== 3) return null
 
-  const [p1, p2, p3] = pieces;
+  const [p1, p2, p3] = pieces
 
   // Check all permutations to find which one is in the middle
-  const positions = [
-    parseSquare(p1.square),
-    parseSquare(p2.square),
-    parseSquare(p3.square),
-  ];
+  const positions = [parseSquare(p1.square), parseSquare(p2.square), parseSquare(p3.square)]
 
-  if (!positions[0] || !positions[1] || !positions[2]) return null;
+  if (!positions[0] || !positions[1] || !positions[2]) return null
 
   // For each piece, check if it's between the other two
   for (let i = 0; i < 3; i++) {
-    const candidate = positions[i];
-    const others = [positions[(i + 1) % 3], positions[(i + 2) % 3]];
+    const candidate = positions[i]
+    const others = [positions[(i + 1) % 3], positions[(i + 2) % 3]]
 
     // Check if candidate is between the other two on all axes
     const betweenX =
       (candidate.file >= others[0].file && candidate.file <= others[1].file) ||
-      (candidate.file >= others[1].file && candidate.file <= others[0].file);
+      (candidate.file >= others[1].file && candidate.file <= others[0].file)
 
     const betweenY =
       (candidate.rank >= others[0].rank && candidate.rank <= others[1].rank) ||
-      (candidate.rank >= others[1].rank && candidate.rank <= others[0].rank);
+      (candidate.rank >= others[1].rank && candidate.rank <= others[0].rank)
 
     if (betweenX && betweenY) {
-      return pieces[i];
+      return pieces[i]
     }
   }
 
-  return null;
+  return null
 }
 
 /**
  * Check if three pieces satisfy layout constraint
  */
 function checkLayout(pieces: Piece[], mode: HarmonyLayoutMode): boolean {
-  if (pieces.length !== 3) return false;
+  if (pieces.length !== 3) return false
 
-  const [p1, p2, p3] = pieces;
-  const squares = [p1.square, p2.square, p3.square];
+  const [p1, p2, p3] = pieces
+  const squares = [p1.square, p2.square, p3.square]
 
   // All modes require collinearity
   if (!areCollinear(squares[0], squares[1], squares[2])) {
-    return false;
+    return false
   }
 
   // Find which piece is in the middle
-  const middle = findMiddlePiece(pieces);
-  if (!middle) return false;
+  const middle = findMiddlePiece(pieces)
+  if (!middle) return false
 
-  const others = pieces.filter((p) => p !== middle);
+  const others = pieces.filter((p) => p !== middle)
 
-  if (mode === "adjacent") {
+  if (mode === 'adjacent') {
     // All distances must be 1
-    const d1 = getDistance(middle.square, others[0].square);
-    const d2 = getDistance(middle.square, others[1].square);
-    return d1 === 1 && d2 === 1;
+    const d1 = getDistance(middle.square, others[0].square)
+    const d2 = getDistance(middle.square, others[1].square)
+    return d1 === 1 && d2 === 1
   }
 
-  if (mode === "equalSpacing") {
+  if (mode === 'equalSpacing') {
     // Distances must be equal (and can be 1 or 2)
-    const d1 = getDistance(middle.square, others[0].square);
-    const d2 = getDistance(middle.square, others[1].square);
-    return d1 === d2 && (d1 === 1 || d1 === 2);
+    const d1 = getDistance(middle.square, others[0].square)
+    const d2 = getDistance(middle.square, others[1].square)
+    return d1 === d2 && (d1 === 1 || d1 === 2)
   }
 
   // mode === 'collinear': any spacing is OK (already checked collinearity)
-  return true;
+  return true
 }
 
 /**
  * Check if three values form an arithmetic proportion (A-M-B).
  * AP: 2M = A + B (middle is arithmetic mean)
  */
-function isArithmeticProportion(
-  a: number,
-  m: number,
-  b: number,
-): HarmonyValidationResult {
+function isArithmeticProportion(a: number, m: number, b: number): HarmonyValidationResult {
   if (2 * m === a + b) {
     return {
       valid: true,
-      type: "ARITH",
+      type: 'ARITH',
       params: {
         a: a.toString(),
         m: m.toString(),
         b: b.toString(),
       },
-    };
+    }
   }
 
   return {
     valid: false,
     reason: `Not arithmetic: 2·${m} ≠ ${a} + ${b} (${2 * m} ≠ ${a + b})`,
-  };
+  }
 }
 
 /**
  * Check if three values form a geometric proportion (A-M-B).
  * GP: M² = A · B (middle is geometric mean)
  */
-function isGeometricProportion(
-  a: number,
-  m: number,
-  b: number,
-): HarmonyValidationResult {
+function isGeometricProportion(a: number, m: number, b: number): HarmonyValidationResult {
   if (m * m === a * b) {
     return {
       valid: true,
-      type: "GEOM",
+      type: 'GEOM',
       params: {
         a: a.toString(),
         m: m.toString(),
         b: b.toString(),
       },
-    };
+    }
   }
 
   return {
     valid: false,
     reason: `Not geometric: ${m}² ≠ ${a} · ${b} (${m * m} ≠ ${a * b})`,
-  };
+  }
 }
 
 /**
@@ -196,34 +184,30 @@ function isGeometricProportion(
  * HP: 2AB = M(A + B) (middle is harmonic mean)
  * Equivalently: 1/A, 1/M, 1/B forms an arithmetic progression
  */
-function isHarmonicProportion(
-  a: number,
-  m: number,
-  b: number,
-): HarmonyValidationResult {
+function isHarmonicProportion(a: number, m: number, b: number): HarmonyValidationResult {
   if (a === 0 || b === 0 || m === 0) {
     return {
       valid: false,
-      reason: "Harmonic proportion cannot contain 0",
-    };
+      reason: 'Harmonic proportion cannot contain 0',
+    }
   }
 
   if (2 * a * b === m * (a + b)) {
     return {
       valid: true,
-      type: "HARM",
+      type: 'HARM',
       params: {
         a: a.toString(),
         m: m.toString(),
         b: b.toString(),
       },
-    };
+    }
   }
 
   return {
     valid: false,
     reason: `Not harmonic: 2·${a}·${b} ≠ ${m}·(${a}+${b}) (${2 * a * b} ≠ ${m * (a + b)})`,
-  };
+  }
 }
 
 /**
@@ -233,20 +217,20 @@ function isHarmonicProportion(
 export function validateHarmony(
   pieces: Piece[],
   color: Color,
-  layoutMode: HarmonyLayoutMode = "adjacent",
+  layoutMode: HarmonyLayoutMode = 'adjacent'
 ): HarmonyValidationResult {
   // Check: exactly 3 pieces
   if (pieces.length !== 3) {
-    return { valid: false, reason: "Harmony requires exactly 3 pieces" };
+    return { valid: false, reason: 'Harmony requires exactly 3 pieces' }
   }
 
   // Check: all pieces must be in enemy half
-  const notInEnemyHalf = pieces.filter((p) => !isInEnemyHalf(p.square, color));
+  const notInEnemyHalf = pieces.filter((p) => !isInEnemyHalf(p.square, color))
   if (notInEnemyHalf.length > 0) {
     return {
       valid: false,
-      reason: `Pieces not in enemy half: ${notInEnemyHalf.map((p) => p.square).join(", ")}`,
-    };
+      reason: `Pieces not in enemy half: ${notInEnemyHalf.map((p) => p.square).join(', ')}`,
+    }
   }
 
   // Check: must satisfy layout constraint
@@ -254,54 +238,52 @@ export function validateHarmony(
     return {
       valid: false,
       reason: `Pieces not in valid ${layoutMode} layout (must be collinear with correct spacing)`,
-    };
+    }
   }
 
   // Find middle piece
-  const middle = findMiddlePiece(pieces);
+  const middle = findMiddlePiece(pieces)
   if (!middle) {
-    return { valid: false, reason: "Could not determine middle piece" };
+    return { valid: false, reason: 'Could not determine middle piece' }
   }
 
-  const others = pieces.filter((p) => p !== middle);
+  const others = pieces.filter((p) => p !== middle)
 
   // Extract values (handling Pyramids)
   const getVal = (p: Piece) => {
-    const val = getEffectiveValue(p);
+    const val = getEffectiveValue(p)
     if (val === null) {
-      throw new Error(
-        `Piece ${p.id} has no effective value (Pyramid face not set?)`,
-      );
+      throw new Error(`Piece ${p.id} has no effective value (Pyramid face not set?)`)
     }
-    return val;
-  };
+    return val
+  }
 
   try {
-    const m = getVal(middle);
-    const a = getVal(others[0]);
-    const b = getVal(others[1]);
+    const m = getVal(middle)
+    const a = getVal(others[0])
+    const b = getVal(others[1])
 
     // Check for duplicates
     if (a === m || m === b || a === b) {
       return {
         valid: false,
-        reason: "Harmony cannot contain duplicate values",
-      };
+        reason: 'Harmony cannot contain duplicate values',
+      }
     }
 
     // Try all three proportion types
-    const apCheck = isArithmeticProportion(a, m, b);
-    if (apCheck.valid) return apCheck;
+    const apCheck = isArithmeticProportion(a, m, b)
+    if (apCheck.valid) return apCheck
 
-    const gpCheck = isGeometricProportion(a, m, b);
-    if (gpCheck.valid) return gpCheck;
+    const gpCheck = isGeometricProportion(a, m, b)
+    if (gpCheck.valid) return gpCheck
 
-    const hpCheck = isHarmonicProportion(a, m, b);
-    if (hpCheck.valid) return hpCheck;
+    const hpCheck = isHarmonicProportion(a, m, b)
+    if (hpCheck.valid) return hpCheck
 
-    return { valid: false, reason: "Values do not form any valid proportion" };
+    return { valid: false, reason: 'Values do not form any valid proportion' }
   } catch (err) {
-    return { valid: false, reason: (err as Error).message };
+    return { valid: false, reason: (err as Error).message }
   }
 }
 
@@ -312,43 +294,39 @@ export function validateHarmony(
 export function findPossibleHarmonies(
   pieces: Record<string, Piece>,
   color: Color,
-  layoutMode: HarmonyLayoutMode = "adjacent",
+  layoutMode: HarmonyLayoutMode = 'adjacent'
 ): Array<{ pieceIds: string[]; validation: HarmonyValidationResult }> {
   const results: Array<{
-    pieceIds: string[];
-    validation: HarmonyValidationResult;
-  }> = [];
+    pieceIds: string[]
+    validation: HarmonyValidationResult
+  }> = []
 
   // Get all live pieces for this color in enemy half
   const candidatePieces = Object.values(pieces).filter(
-    (p) => p.color === color && !p.captured && isInEnemyHalf(p.square, color),
-  );
+    (p) => p.color === color && !p.captured && isInEnemyHalf(p.square, color)
+  )
 
   if (candidatePieces.length < 3) {
-    return results;
+    return results
   }
 
   // Generate all combinations of exactly 3 pieces
   for (let i = 0; i < candidatePieces.length; i++) {
     for (let j = i + 1; j < candidatePieces.length; j++) {
       for (let k = j + 1; k < candidatePieces.length; k++) {
-        const combo = [
-          candidatePieces[i],
-          candidatePieces[j],
-          candidatePieces[k],
-        ];
-        const validation = validateHarmony(combo, color, layoutMode);
+        const combo = [candidatePieces[i], candidatePieces[j], candidatePieces[k]]
+        const validation = validateHarmony(combo, color, layoutMode)
         if (validation.valid) {
           results.push({
             pieceIds: combo.map((p) => p.id),
             validation,
-          });
+          })
         }
       }
     }
   }
 
-  return results;
+  return results
 }
 
 /**
@@ -358,18 +336,16 @@ export function findPossibleHarmonies(
 export function isHarmonyStillValid(
   pieces: Record<string, Piece>,
   harmony: HarmonyDeclaration,
-  layoutMode: HarmonyLayoutMode = "adjacent",
+  layoutMode: HarmonyLayoutMode = 'adjacent'
 ): boolean {
-  const relevantPieces = harmony.pieceIds
-    .map((id) => pieces[id])
-    .filter((p) => p && !p.captured);
+  const relevantPieces = harmony.pieceIds.map((id) => pieces[id]).filter((p) => p && !p.captured)
 
   if (relevantPieces.length !== 3) {
-    return false;
+    return false
   }
 
-  const validation = validateHarmony(relevantPieces, harmony.by, layoutMode);
-  return validation.valid;
+  const validation = validateHarmony(relevantPieces, harmony.by, layoutMode)
+  return validation.valid
 }
 
 /**
@@ -378,8 +354,8 @@ export function isHarmonyStillValid(
 export function hasAnyValidHarmony(
   pieces: Record<string, Piece>,
   color: Color,
-  layoutMode: HarmonyLayoutMode = "adjacent",
+  layoutMode: HarmonyLayoutMode = 'adjacent'
 ): boolean {
-  const harmonies = findPossibleHarmonies(pieces, color, layoutMode);
-  return harmonies.length > 0;
+  const harmonies = findPossibleHarmonies(pieces, color, layoutMode)
+  return harmonies.length > 0
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/utils/parseBoardCSV.ts b/apps/web/src/arcade-games/rithmomachia/utils/parseBoardCSV.ts
index 591e9b74..65470c21 100644
--- a/apps/web/src/arcade-games/rithmomachia/utils/parseBoardCSV.ts
+++ b/apps/web/src/arcade-games/rithmomachia/utils/parseBoardCSV.ts
@@ -15,81 +15,81 @@
  * - CSV rank 15 → game column P (rightmost, white side)
  */
 
-import type { Color, Piece, PieceType } from "../types";
+import type { Color, Piece, PieceType } from '../types'
 
 interface CSVPiece {
-  color: Color;
-  type: PieceType;
-  value?: number;
-  pyramidFaces?: number[];
-  square: string;
+  color: Color
+  type: PieceType
+  value?: number
+  pyramidFaces?: number[]
+  square: string
 }
 
 /**
  * Parse CSV content into structured board layout.
  */
 export function parseCSV(csvContent: string): CSVPiece[] {
-  const lines = csvContent.trim().split("\n");
-  const pieces: CSVPiece[] = [];
+  const lines = csvContent.trim().split('\n')
+  const pieces: CSVPiece[] = []
 
   // Process in triplets (color, shape, number)
   for (let rankIndex = 0; rankIndex < 16; rankIndex++) {
-    const colorRowIndex = rankIndex * 3;
-    const shapeRowIndex = rankIndex * 3 + 1;
-    const numberRowIndex = rankIndex * 3 + 2;
+    const colorRowIndex = rankIndex * 3
+    const shapeRowIndex = rankIndex * 3 + 1
+    const numberRowIndex = rankIndex * 3 + 2
 
-    if (numberRowIndex >= lines.length) break;
+    if (numberRowIndex >= lines.length) break
 
-    const colorRow = lines[colorRowIndex].split(",");
-    const shapeRow = lines[shapeRowIndex].split(",");
-    const numberRow = lines[numberRowIndex].split(",");
+    const colorRow = lines[colorRowIndex].split(',')
+    const shapeRow = lines[shapeRowIndex].split(',')
+    const numberRow = lines[numberRowIndex].split(',')
 
     // Process each column (8 total)
     for (let colIndex = 0; colIndex < 8; colIndex++) {
-      const color = colorRow[colIndex]?.trim();
-      const shape = shapeRow[colIndex]?.trim();
-      const numberStr = numberRow[colIndex]?.trim();
+      const color = colorRow[colIndex]?.trim()
+      const shape = shapeRow[colIndex]?.trim()
+      const numberStr = numberRow[colIndex]?.trim()
 
       // Skip empty cells
-      if (!color || !shape || !numberStr) continue;
+      if (!color || !shape || !numberStr) continue
 
       // Map CSV position to game square
       // CSV column → game row (1-8)
       // CSV rank → game column (A-P)
-      const gameRow = colIndex + 1; // CSV col 0 → row 1, col 7 → row 8
-      const gameCol = String.fromCharCode(65 + rankIndex); // rank 0 → A, rank 15 → P
-      const square = `${gameCol}${gameRow}`;
+      const gameRow = colIndex + 1 // CSV col 0 → row 1, col 7 → row 8
+      const gameCol = String.fromCharCode(65 + rankIndex) // rank 0 → A, rank 15 → P
+      const square = `${gameCol}${gameRow}`
 
       // Parse color
-      const pieceColor: Color = color.toLowerCase() === "black" ? "B" : "W";
+      const pieceColor: Color = color.toLowerCase() === 'black' ? 'B' : 'W'
 
       // Parse type
-      let pieceType: PieceType;
-      const shapeLower = shape.toLowerCase();
-      if (shapeLower === "circle") pieceType = "C";
-      else if (shapeLower === "triangle" || shapeLower === "traingle")
-        pieceType = "T"; // Handle typo
-      else if (shapeLower === "square") pieceType = "S";
-      else if (shapeLower === "pyramid") pieceType = "P";
+      let pieceType: PieceType
+      const shapeLower = shape.toLowerCase()
+      if (shapeLower === 'circle') pieceType = 'C'
+      else if (shapeLower === 'triangle' || shapeLower === 'traingle')
+        pieceType = 'T' // Handle typo
+      else if (shapeLower === 'square') pieceType = 'S'
+      else if (shapeLower === 'pyramid') pieceType = 'P'
       else {
-        console.warn(`Unknown shape "${shape}" at ${square}`);
-        continue;
+        console.warn(`Unknown shape "${shape}" at ${square}`)
+        continue
       }
 
       // Parse value/pyramid faces
-      if (pieceType === "P") {
+      if (pieceType === 'P') {
         // Pyramid - for now use default faces, we'll need to determine these
         pieces.push({
           color: pieceColor,
           type: pieceType,
-          pyramidFaces: pieceColor === "B" ? [36, 25, 16, 4] : [64, 49, 36, 25],
+          pyramidFaces: pieceColor === 'B' ? [36, 25, 16, 4] : [64, 49, 36, 25],
           square,
-        });
+        })
       } else {
-        const value = parseInt(numberStr, 10);
+        const value = parseInt(numberStr, 10)
         if (isNaN(value)) {
-          console.warn(`Invalid number "${numberStr}" at ${square}`);
-          continue;
+          console.warn(`Invalid number "${numberStr}" at ${square}`)
+          continue
         }
 
         pieces.push({
@@ -97,35 +97,33 @@ export function parseCSV(csvContent: string): CSVPiece[] {
           type: pieceType,
           value,
           square,
-        });
+        })
       }
     }
   }
 
-  return pieces;
+  return pieces
 }
 
 /**
  * Convert CSV pieces to full Piece objects with IDs.
  */
-export function createBoardFromCSV(
-  csvPieces: CSVPiece[],
-): Record<string, Piece> {
-  const pieces: Record<string, Piece> = {};
+export function createBoardFromCSV(csvPieces: CSVPiece[]): Record<string, Piece> {
+  const pieces: Record<string, Piece> = {}
 
   // Count pieces by color and type for ID generation
   const counts = {
     B: { C: 0, T: 0, S: 0, P: 0 },
     W: { C: 0, T: 0, S: 0, P: 0 },
-  };
+  }
 
   for (const csvPiece of csvPieces) {
-    const color = csvPiece.color;
-    const type = csvPiece.type;
+    const color = csvPiece.color
+    const type = csvPiece.type
 
     // Generate piece ID
-    const count = ++counts[color][type];
-    const id = `${color}_${type}_${String(count).padStart(2, "0")}`;
+    const count = ++counts[color][type]
+    const id = `${color}_${type}_${String(count).padStart(2, '0')}`
 
     // Create full piece
     const piece: Piece = {
@@ -134,85 +132,80 @@ export function createBoardFromCSV(
       type,
       square: csvPiece.square,
       captured: false,
-    };
-
-    if (type === "P") {
-      piece.pyramidFaces = csvPiece.pyramidFaces;
-      piece.activePyramidFace = null;
-    } else {
-      piece.value = csvPiece.value;
     }
 
-    pieces[id] = piece;
+    if (type === 'P') {
+      piece.pyramidFaces = csvPiece.pyramidFaces
+      piece.activePyramidFace = null
+    } else {
+      piece.value = csvPiece.value
+    }
+
+    pieces[id] = piece
   }
 
-  return pieces;
+  return pieces
 }
 
 /**
  * Main entry point: read CSV and generate board.
  */
-export async function loadBoardFromCSV(
-  csvPath: string,
-): Promise<Record<string, Piece>> {
-  const fs = await import("fs");
-  const csvContent = fs.readFileSync(csvPath, "utf-8");
-  const csvPieces = parseCSV(csvContent);
-  return createBoardFromCSV(csvPieces);
+export async function loadBoardFromCSV(csvPath: string): Promise<Record<string, Piece>> {
+  const fs = await import('fs')
+  const csvContent = fs.readFileSync(csvPath, 'utf-8')
+  const csvPieces = parseCSV(csvContent)
+  return createBoardFromCSV(csvPieces)
 }
 
 /**
  * Generate board layout summary for verification.
  */
 export function generateBoardSummary(pieces: Record<string, Piece>): string {
-  const lines: string[] = [];
+  const lines: string[] = []
 
   // Generate grid view (A-P columns, 1-8 rows)
-  lines.push("\n=== Board Layout (Game Orientation) ===\n");
-  lines.push(
-    "   A    B    C    D    E    F    G    H    I    J    K    L    M    N    O    P",
-  );
+  lines.push('\n=== Board Layout (Game Orientation) ===\n')
+  lines.push('   A    B    C    D    E    F    G    H    I    J    K    L    M    N    O    P')
 
   for (let row = 8; row >= 1; row--) {
-    let line = `${row} `;
+    let line = `${row} `
     for (let colCode = 65; colCode <= 80; colCode++) {
-      const col = String.fromCharCode(colCode);
-      const square = `${col}${row}`;
-      const piece = Object.values(pieces).find((p) => p.square === square);
+      const col = String.fromCharCode(colCode)
+      const square = `${col}${row}`
+      const piece = Object.values(pieces).find((p) => p.square === square)
 
       if (piece) {
-        const colorChar = piece.color;
-        const typeChar = piece.type;
-        const value =
-          piece.type === "P" ? "P" : piece.value?.toString().padStart(3, " ");
-        line += ` ${colorChar}${typeChar}${value}`;
+        const colorChar = piece.color
+        const typeChar = piece.type
+        const value = piece.type === 'P' ? 'P' : piece.value?.toString().padStart(3, ' ')
+        line += ` ${colorChar}${typeChar}${value}`
       } else {
-        line += "  ---";
+        line += '  ---'
       }
     }
-    lines.push(line);
+    lines.push(line)
   }
 
   // Piece counts
-  lines.push("\n=== Piece Counts ===");
-  const blackPieces = Object.values(pieces).filter((p) => p.color === "B");
-  const whitePieces = Object.values(pieces).filter((p) => p.color === "W");
+  lines.push('\n=== Piece Counts ===')
+  const blackPieces = Object.values(pieces).filter((p) => p.color === 'B')
+  const whitePieces = Object.values(pieces).filter((p) => p.color === 'W')
 
   const countByType = (pieces: Piece[]) => {
-    const counts = { C: 0, T: 0, S: 0, P: 0 };
-    for (const p of pieces) counts[p.type]++;
-    return counts;
-  };
+    const counts = { C: 0, T: 0, S: 0, P: 0 }
+    for (const p of pieces) counts[p.type]++
+    return counts
+  }
 
-  const blackCounts = countByType(blackPieces);
-  const whiteCounts = countByType(whitePieces);
+  const blackCounts = countByType(blackPieces)
+  const whiteCounts = countByType(whitePieces)
 
   lines.push(
-    `Black: ${blackPieces.length} total (C:${blackCounts.C}, T:${blackCounts.T}, S:${blackCounts.S}, P:${blackCounts.P})`,
-  );
+    `Black: ${blackPieces.length} total (C:${blackCounts.C}, T:${blackCounts.T}, S:${blackCounts.S}, P:${blackCounts.P})`
+  )
   lines.push(
-    `White: ${whitePieces.length} total (C:${whiteCounts.C}, T:${whiteCounts.T}, S:${whiteCounts.S}, P:${whiteCounts.P})`,
-  );
+    `White: ${whitePieces.length} total (C:${whiteCounts.C}, T:${whiteCounts.T}, S:${whiteCounts.S}, P:${whiteCounts.P})`
+  )
 
-  return lines.join("\n");
+  return lines.join('\n')
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/utils/pathValidator.ts b/apps/web/src/arcade-games/rithmomachia/utils/pathValidator.ts
index 61edacf5..e9ad2f73 100644
--- a/apps/web/src/arcade-games/rithmomachia/utils/pathValidator.ts
+++ b/apps/web/src/arcade-games/rithmomachia/utils/pathValidator.ts
@@ -1,5 +1,5 @@
-import type { Piece, PieceType } from "../types";
-import { makeSquare, parseSquare } from "../types";
+import type { Piece, PieceType } from '../types'
+import { makeSquare, parseSquare } from '../types'
 
 /**
  * Path validation for Rithmomachia piece movement.
@@ -7,8 +7,8 @@ import { makeSquare, parseSquare } from "../types";
  */
 
 export interface PathValidationResult {
-  valid: boolean;
-  reason?: string;
+  valid: boolean
+  reason?: string
 }
 
 /**
@@ -18,70 +18,62 @@ export interface PathValidationResult {
 export function isGeometryLegal(
   pieceType: PieceType,
   from: string,
-  to: string,
+  to: string
 ): PathValidationResult {
   if (from === to) {
-    return { valid: false, reason: "Cannot move to the same square" };
+    return { valid: false, reason: 'Cannot move to the same square' }
   }
 
-  const fromCoords = parseSquare(from);
-  const toCoords = parseSquare(to);
+  const fromCoords = parseSquare(from)
+  const toCoords = parseSquare(to)
 
-  const deltaFile = toCoords.file - fromCoords.file;
-  const deltaRank = toCoords.rank - fromCoords.rank;
+  const deltaFile = toCoords.file - fromCoords.file
+  const deltaRank = toCoords.rank - fromCoords.rank
 
-  const absDeltaFile = Math.abs(deltaFile);
-  const absDeltaRank = Math.abs(deltaRank);
+  const absDeltaFile = Math.abs(deltaFile)
+  const absDeltaRank = Math.abs(deltaRank)
 
   switch (pieceType) {
-    case "C": {
+    case 'C': {
       // Circle: diagonal only (like bishop)
       if (absDeltaFile === absDeltaRank && absDeltaFile > 0) {
-        return { valid: true };
+        return { valid: true }
       }
-      return { valid: false, reason: "Circles move diagonally" };
+      return { valid: false, reason: 'Circles move diagonally' }
     }
 
-    case "T": {
+    case 'T': {
       // Triangle: orthogonal only (like rook)
-      if (
-        (deltaFile === 0 && deltaRank !== 0) ||
-        (deltaRank === 0 && deltaFile !== 0)
-      ) {
-        return { valid: true };
+      if ((deltaFile === 0 && deltaRank !== 0) || (deltaRank === 0 && deltaFile !== 0)) {
+        return { valid: true }
       }
-      return { valid: false, reason: "Triangles move orthogonally" };
+      return { valid: false, reason: 'Triangles move orthogonally' }
     }
 
-    case "S": {
+    case 'S': {
       // Square: queen-like (orthogonal or diagonal)
-      const isDiagonal = absDeltaFile === absDeltaRank && absDeltaFile > 0;
+      const isDiagonal = absDeltaFile === absDeltaRank && absDeltaFile > 0
       const isOrthogonal =
-        (deltaFile === 0 && deltaRank !== 0) ||
-        (deltaRank === 0 && deltaFile !== 0);
+        (deltaFile === 0 && deltaRank !== 0) || (deltaRank === 0 && deltaFile !== 0)
       if (isDiagonal || isOrthogonal) {
-        return { valid: true };
+        return { valid: true }
       }
       return {
         valid: false,
-        reason: "Squares move orthogonally or diagonally",
-      };
+        reason: 'Squares move orthogonally or diagonally',
+      }
     }
 
-    case "P": {
+    case 'P': {
       // Pyramid: king-like (1 step in any direction)
-      if (
-        absDeltaFile <= 1 &&
-        absDeltaRank <= 1 &&
-        (absDeltaFile > 0 || absDeltaRank > 0)
-      ) {
-        return { valid: true };
+      if (absDeltaFile <= 1 && absDeltaRank <= 1 && (absDeltaFile > 0 || absDeltaRank > 0)) {
+        return { valid: true }
       }
-      return { valid: false, reason: "Pyramids move 1 step in any direction" };
+      return { valid: false, reason: 'Pyramids move 1 step in any direction' }
     }
 
     default:
-      return { valid: false, reason: "Unknown piece type" };
+      return { valid: false, reason: 'Unknown piece type' }
   }
 }
 
@@ -92,43 +84,41 @@ export function isGeometryLegal(
 export function isPathClear(
   pieces: Record<string, Piece>,
   from: string,
-  to: string,
+  to: string
 ): PathValidationResult {
-  const fromCoords = parseSquare(from);
-  const toCoords = parseSquare(to);
+  const fromCoords = parseSquare(from)
+  const toCoords = parseSquare(to)
 
-  const deltaFile = toCoords.file - fromCoords.file;
-  const deltaRank = toCoords.rank - fromCoords.rank;
+  const deltaFile = toCoords.file - fromCoords.file
+  const deltaRank = toCoords.rank - fromCoords.rank
 
   // Calculate step direction
-  const stepFile = deltaFile === 0 ? 0 : deltaFile > 0 ? 1 : -1;
-  const stepRank = deltaRank === 0 ? 0 : deltaRank > 0 ? 1 : -1;
+  const stepFile = deltaFile === 0 ? 0 : deltaFile > 0 ? 1 : -1
+  const stepRank = deltaRank === 0 ? 0 : deltaRank > 0 ? 1 : -1
 
   // Calculate number of steps (excluding start and end)
-  const steps = Math.max(Math.abs(deltaFile), Math.abs(deltaRank)) - 1;
+  const steps = Math.max(Math.abs(deltaFile), Math.abs(deltaRank)) - 1
 
   // Check each intermediate square
-  let currentFile = fromCoords.file + stepFile;
-  let currentRank = fromCoords.rank + stepRank;
+  let currentFile = fromCoords.file + stepFile
+  let currentRank = fromCoords.rank + stepRank
 
   for (let i = 0; i < steps; i++) {
-    const square = makeSquare(currentFile, currentRank);
-    const pieceAtSquare = Object.values(pieces).find(
-      (p) => p.square === square && !p.captured,
-    );
+    const square = makeSquare(currentFile, currentRank)
+    const pieceAtSquare = Object.values(pieces).find((p) => p.square === square && !p.captured)
 
     if (pieceAtSquare) {
       return {
         valid: false,
         reason: `Path blocked by ${pieceAtSquare.id} at ${square}`,
-      };
+      }
     }
 
-    currentFile += stepFile;
-    currentRank += stepRank;
+    currentFile += stepFile
+    currentRank += stepRank
   }
 
-  return { valid: true };
+  return { valid: true }
 }
 
 /**
@@ -138,67 +128,59 @@ export function validateMove(
   piece: Piece,
   from: string,
   to: string,
-  pieces: Record<string, Piece>,
+  pieces: Record<string, Piece>
 ): PathValidationResult {
   // Check geometry
-  const geometryCheck = isGeometryLegal(piece.type, from, to);
+  const geometryCheck = isGeometryLegal(piece.type, from, to)
   if (!geometryCheck.valid) {
-    return geometryCheck;
+    return geometryCheck
   }
 
   // Check path clearance
-  const pathCheck = isPathClear(pieces, from, to);
+  const pathCheck = isPathClear(pieces, from, to)
   if (!pathCheck.valid) {
-    return pathCheck;
+    return pathCheck
   }
 
-  return { valid: true };
+  return { valid: true }
 }
 
 /**
  * Get all legal move destinations for a piece (ignoring captures/relations).
  * Returns an array of square notations.
  */
-export function getLegalMoves(
-  piece: Piece,
-  pieces: Record<string, Piece>,
-): string[] {
-  const legalMoves: string[] = [];
+export function getLegalMoves(piece: Piece, pieces: Record<string, Piece>): string[] {
+  const legalMoves: string[] = []
 
   // Generate all possible squares on the board
   for (let file = 0; file < 16; file++) {
     for (let rank = 1; rank <= 8; rank++) {
-      const targetSquare = makeSquare(file, rank);
+      const targetSquare = makeSquare(file, rank)
 
       // Skip if same square
-      if (targetSquare === piece.square) continue;
+      if (targetSquare === piece.square) continue
 
       // Check if move is legal
-      const validation = validateMove(
-        piece,
-        piece.square,
-        targetSquare,
-        pieces,
-      );
+      const validation = validateMove(piece, piece.square, targetSquare, pieces)
       if (validation.valid) {
-        legalMoves.push(targetSquare);
+        legalMoves.push(targetSquare)
       }
     }
   }
 
-  return legalMoves;
+  return legalMoves
 }
 
 /**
  * Check if a square is within board bounds.
  */
 export function isSquareValid(square: string): boolean {
-  if (square.length !== 2) return false;
+  if (square.length !== 2) return false
 
-  const file = square.charCodeAt(0) - 65; // A=0, B=1, ..., P=15
-  const rank = Number.parseInt(square[1], 10);
+  const file = square.charCodeAt(0) - 65 // A=0, B=1, ..., P=15
+  const rank = Number.parseInt(square[1], 10)
 
-  return file >= 0 && file <= 15 && rank >= 1 && rank <= 8;
+  return file >= 0 && file <= 15 && rank >= 1 && rank <= 8
 }
 
 /**
@@ -206,19 +188,19 @@ export function isSquareValid(square: string): boolean {
  */
 export function getDirection(
   from: string,
-  to: string,
+  to: string
 ): {
-  horizontal: "left" | "right" | "none";
-  vertical: "up" | "down" | "none";
+  horizontal: 'left' | 'right' | 'none'
+  vertical: 'up' | 'down' | 'none'
 } {
-  const fromCoords = parseSquare(from);
-  const toCoords = parseSquare(to);
+  const fromCoords = parseSquare(from)
+  const toCoords = parseSquare(to)
 
-  const deltaFile = toCoords.file - fromCoords.file;
-  const deltaRank = toCoords.rank - fromCoords.rank;
+  const deltaFile = toCoords.file - fromCoords.file
+  const deltaRank = toCoords.rank - fromCoords.rank
 
   return {
-    horizontal: deltaFile < 0 ? "left" : deltaFile > 0 ? "right" : "none",
-    vertical: deltaRank < 0 ? "down" : deltaRank > 0 ? "up" : "none",
-  };
+    horizontal: deltaFile < 0 ? 'left' : deltaFile > 0 ? 'right' : 'none',
+    vertical: deltaRank < 0 ? 'down' : deltaRank > 0 ? 'up' : 'none',
+  }
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/utils/pieceSetup.ts b/apps/web/src/arcade-games/rithmomachia/utils/pieceSetup.ts
index 86b4fb91..2f13574c 100644
--- a/apps/web/src/arcade-games/rithmomachia/utils/pieceSetup.ts
+++ b/apps/web/src/arcade-games/rithmomachia/utils/pieceSetup.ts
@@ -1,4 +1,4 @@
-import type { Color, Piece } from "../types";
+import type { Color, Piece } from '../types'
 
 /**
  * Generate the initial board setup for traditional Rithmomachia.
@@ -10,181 +10,171 @@ import type { Color, Piece } from "../types";
  * - 24 pieces per side (48 total)
  */
 export function createInitialBoard(): Record<string, Piece> {
-  const pieces: Record<string, Piece> = {};
+  const pieces: Record<string, Piece> = {}
 
   // === BLACK PIECES (Left side) ===
   // Layout from CSV: portrait → rotated 90° CCW for game orientation
 
   // Column A: Outer edge (sparse)
   const blackColumnA = [
-    { type: "S", value: 28, square: "A1" },
-    { type: "S", value: 66, square: "A2" },
-    { type: "S", value: 225, square: "A7" },
-    { type: "S", value: 361, square: "A8" },
-  ] as const;
+    { type: 'S', value: 28, square: 'A1' },
+    { type: 'S', value: 66, square: 'A2' },
+    { type: 'S', value: 225, square: 'A7' },
+    { type: 'S', value: 361, square: 'A8' },
+  ] as const
 
   // Column B: Mixed with Pyramid at B8
   const blackColumnB = [
-    { type: "S", value: 28, square: "B1" },
-    { type: "S", value: 66, square: "B2" },
-    { type: "T", value: 36, square: "B3" },
-    { type: "T", value: 30, square: "B4" },
-    { type: "T", value: 56, square: "B5" },
-    { type: "T", value: 64, square: "B6" },
-    { type: "S", value: 120, square: "B7" },
+    { type: 'S', value: 28, square: 'B1' },
+    { type: 'S', value: 66, square: 'B2' },
+    { type: 'T', value: 36, square: 'B3' },
+    { type: 'T', value: 30, square: 'B4' },
+    { type: 'T', value: 56, square: 'B5' },
+    { type: 'T', value: 64, square: 'B6' },
+    { type: 'S', value: 120, square: 'B7' },
     // B8: Pyramid (see below)
-  ] as const;
+  ] as const
 
   // Column C: Triangles and circles
   const blackColumnC = [
-    { type: "T", value: 16, square: "C1" },
-    { type: "T", value: 12, square: "C2" },
-    { type: "C", value: 9, square: "C3" },
-    { type: "C", value: 25, square: "C4" },
-    { type: "C", value: 49, square: "C5" },
-    { type: "C", value: 81, square: "C6" },
-    { type: "T", value: 90, square: "C7" },
-    { type: "T", value: 100, square: "C8" },
-  ] as const;
+    { type: 'T', value: 16, square: 'C1' },
+    { type: 'T', value: 12, square: 'C2' },
+    { type: 'C', value: 9, square: 'C3' },
+    { type: 'C', value: 25, square: 'C4' },
+    { type: 'C', value: 49, square: 'C5' },
+    { type: 'C', value: 81, square: 'C6' },
+    { type: 'T', value: 90, square: 'C7' },
+    { type: 'T', value: 100, square: 'C8' },
+  ] as const
 
   // Column D: Small circles (sparse)
   const blackColumnD = [
-    { type: "C", value: 3, square: "D3" },
-    { type: "C", value: 5, square: "D4" },
-    { type: "C", value: 7, square: "D5" },
-    { type: "C", value: 9, square: "D6" },
-  ] as const;
+    { type: 'C', value: 3, square: 'D3' },
+    { type: 'C', value: 5, square: 'D4' },
+    { type: 'C', value: 7, square: 'D5' },
+    { type: 'C', value: 9, square: 'D6' },
+  ] as const
 
-  let blackSquareCount = 0;
-  let blackTriangleCount = 0;
-  let blackCircleCount = 0;
+  let blackSquareCount = 0
+  let blackTriangleCount = 0
+  let blackCircleCount = 0
 
-  for (const piece of [
-    ...blackColumnA,
-    ...blackColumnB,
-    ...blackColumnC,
-    ...blackColumnD,
-  ]) {
-    let id: string;
-    let count: number;
-    if (piece.type === "S") {
-      count = ++blackSquareCount;
-      id = `B_S_${String(count).padStart(2, "0")}`;
-    } else if (piece.type === "T") {
-      count = ++blackTriangleCount;
-      id = `B_T_${String(count).padStart(2, "0")}`;
+  for (const piece of [...blackColumnA, ...blackColumnB, ...blackColumnC, ...blackColumnD]) {
+    let id: string
+    let count: number
+    if (piece.type === 'S') {
+      count = ++blackSquareCount
+      id = `B_S_${String(count).padStart(2, '0')}`
+    } else if (piece.type === 'T') {
+      count = ++blackTriangleCount
+      id = `B_T_${String(count).padStart(2, '0')}`
     } else {
-      count = ++blackCircleCount;
-      id = `B_C_${String(count).padStart(2, "0")}`;
+      count = ++blackCircleCount
+      id = `B_C_${String(count).padStart(2, '0')}`
     }
     pieces[id] = {
       id,
-      color: "B",
+      color: 'B',
       type: piece.type,
       value: piece.value,
       square: piece.square,
       captured: false,
-    };
+    }
   }
 
   // Black Pyramid at B8
   pieces.B_P_01 = {
-    id: "B_P_01",
-    color: "B",
-    type: "P",
+    id: 'B_P_01',
+    color: 'B',
+    type: 'P',
     pyramidFaces: [36, 25, 16, 4],
     activePyramidFace: null,
-    square: "B8",
+    square: 'B8',
     captured: false,
-  };
+  }
 
   // === WHITE PIECES (Right side) ===
   // Layout from CSV: portrait → rotated 90° CCW for game orientation
 
   // Column M: Small circles (sparse)
   const whiteColumnM = [
-    { type: "C", value: 8, square: "M3" },
-    { type: "C", value: 6, square: "M4" },
-    { type: "C", value: 4, square: "M5" },
-    { type: "C", value: 2, square: "M6" },
-  ] as const;
+    { type: 'C', value: 8, square: 'M3' },
+    { type: 'C', value: 6, square: 'M4' },
+    { type: 'C', value: 4, square: 'M5' },
+    { type: 'C', value: 2, square: 'M6' },
+  ] as const
 
   // Column N: Triangles and circles
   const whiteColumnN = [
-    { type: "T", value: 81, square: "N1" },
-    { type: "T", value: 72, square: "N2" },
-    { type: "C", value: 64, square: "N3" },
-    { type: "C", value: 16, square: "N4" },
-    { type: "C", value: 16, square: "N5" },
-    { type: "C", value: 4, square: "N6" },
-    { type: "T", value: 6, square: "N7" },
-    { type: "T", value: 9, square: "N8" },
-  ] as const;
+    { type: 'T', value: 81, square: 'N1' },
+    { type: 'T', value: 72, square: 'N2' },
+    { type: 'C', value: 64, square: 'N3' },
+    { type: 'C', value: 16, square: 'N4' },
+    { type: 'C', value: 16, square: 'N5' },
+    { type: 'C', value: 4, square: 'N6' },
+    { type: 'T', value: 6, square: 'N7' },
+    { type: 'T', value: 9, square: 'N8' },
+  ] as const
 
   // Column O: Mixed with Pyramid at O2
   const whiteColumnO = [
-    { type: "S", value: 153, square: "O1" },
+    { type: 'S', value: 153, square: 'O1' },
     // O2: Pyramid (see below)
-    { type: "T", value: 72, square: "O3" },
-    { type: "T", value: 20, square: "O4" },
-    { type: "T", value: 20, square: "O5" },
-    { type: "T", value: 25, square: "O6" },
-    { type: "S", value: 45, square: "O7" },
-    { type: "S", value: 15, square: "O8" },
-  ] as const;
+    { type: 'T', value: 72, square: 'O3' },
+    { type: 'T', value: 20, square: 'O4' },
+    { type: 'T', value: 20, square: 'O5' },
+    { type: 'T', value: 25, square: 'O6' },
+    { type: 'S', value: 45, square: 'O7' },
+    { type: 'S', value: 15, square: 'O8' },
+  ] as const
 
   // Column P: Outer edge (sparse)
   const whiteColumnP = [
-    { type: "S", value: 289, square: "P1" },
-    { type: "S", value: 169, square: "P2" },
-    { type: "S", value: 81, square: "P7" },
-    { type: "S", value: 25, square: "P8" },
-  ] as const;
+    { type: 'S', value: 289, square: 'P1' },
+    { type: 'S', value: 169, square: 'P2' },
+    { type: 'S', value: 81, square: 'P7' },
+    { type: 'S', value: 25, square: 'P8' },
+  ] as const
 
-  let whiteSquareCount = 0;
-  let whiteTriangleCount = 0;
-  let whiteCircleCount = 0;
+  let whiteSquareCount = 0
+  let whiteTriangleCount = 0
+  let whiteCircleCount = 0
 
-  for (const piece of [
-    ...whiteColumnM,
-    ...whiteColumnN,
-    ...whiteColumnO,
-    ...whiteColumnP,
-  ]) {
-    let id: string;
-    let count: number;
-    if (piece.type === "S") {
-      count = ++whiteSquareCount;
-      id = `W_S_${String(count).padStart(2, "0")}`;
-    } else if (piece.type === "T") {
-      count = ++whiteTriangleCount;
-      id = `W_T_${String(count).padStart(2, "0")}`;
+  for (const piece of [...whiteColumnM, ...whiteColumnN, ...whiteColumnO, ...whiteColumnP]) {
+    let id: string
+    let count: number
+    if (piece.type === 'S') {
+      count = ++whiteSquareCount
+      id = `W_S_${String(count).padStart(2, '0')}`
+    } else if (piece.type === 'T') {
+      count = ++whiteTriangleCount
+      id = `W_T_${String(count).padStart(2, '0')}`
     } else {
-      count = ++whiteCircleCount;
-      id = `W_C_${String(count).padStart(2, "0")}`;
+      count = ++whiteCircleCount
+      id = `W_C_${String(count).padStart(2, '0')}`
     }
     pieces[id] = {
       id,
-      color: "W",
+      color: 'W',
       type: piece.type,
       value: piece.value,
       square: piece.square,
       captured: false,
-    };
+    }
   }
 
   // White Pyramid at O2
   pieces.W_P_01 = {
-    id: "W_P_01",
-    color: "W",
-    type: "P",
+    id: 'W_P_01',
+    color: 'W',
+    type: 'P',
     pyramidFaces: [64, 49, 36, 25],
     activePyramidFace: null,
-    square: "O2",
+    square: 'O2',
     captured: false,
-  };
+  }
 
-  return pieces;
+  return pieces
 }
 
 /**
@@ -193,65 +183,51 @@ export function createInitialBoard(): Record<string, Piece> {
  * For Pyramids, returns the activePyramidFace (or null if not set).
  */
 export function getEffectiveValue(piece: Piece): number | null {
-  if (piece.type === "P") {
-    return piece.activePyramidFace ?? null;
+  if (piece.type === 'P') {
+    return piece.activePyramidFace ?? null
   }
-  return piece.value ?? null;
+  return piece.value ?? null
 }
 
 /**
  * Get all live (non-captured) pieces for a given color.
  */
-export function getLivePiecesForColor(
-  pieces: Record<string, Piece>,
-  color: Color,
-): Piece[] {
-  return Object.values(pieces).filter((p) => p.color === color && !p.captured);
+export function getLivePiecesForColor(pieces: Record<string, Piece>, color: Color): Piece[] {
+  return Object.values(pieces).filter((p) => p.color === color && !p.captured)
 }
 
 /**
  * Get the piece at a specific square (if any).
  */
-export function getPieceAt(
-  pieces: Record<string, Piece>,
-  square: string,
-): Piece | null {
-  return (
-    Object.values(pieces).find((p) => p.square === square && !p.captured) ??
-    null
-  );
+export function getPieceAt(pieces: Record<string, Piece>, square: string): Piece | null {
+  return Object.values(pieces).find((p) => p.square === square && !p.captured) ?? null
 }
 
 /**
  * Check if a square is occupied by a live piece.
  */
-export function isSquareOccupied(
-  pieces: Record<string, Piece>,
-  square: string,
-): boolean {
-  return getPieceAt(pieces, square) !== null;
+export function isSquareOccupied(pieces: Record<string, Piece>, square: string): boolean {
+  return getPieceAt(pieces, square) !== null
 }
 
 /**
  * Get a piece by ID (throws if not found).
  */
 export function getPieceById(pieces: Record<string, Piece>, id: string): Piece {
-  const piece = pieces[id];
+  const piece = pieces[id]
   if (!piece) {
-    throw new Error(`Piece not found: ${id}`);
+    throw new Error(`Piece not found: ${id}`)
   }
-  return piece;
+  return piece
 }
 
 /**
  * Clone a pieces record (shallow clone for immutability).
  */
-export function clonePieces(
-  pieces: Record<string, Piece>,
-): Record<string, Piece> {
-  const result: Record<string, Piece> = {};
+export function clonePieces(pieces: Record<string, Piece>): Record<string, Piece> {
+  const result: Record<string, Piece> = {}
   for (const [id, piece] of Object.entries(pieces)) {
-    result[id] = { ...piece };
+    result[id] = { ...piece }
   }
-  return result;
+  return result
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/utils/relationEngine.ts b/apps/web/src/arcade-games/rithmomachia/utils/relationEngine.ts
index a1fa0420..69542bdc 100644
--- a/apps/web/src/arcade-games/rithmomachia/utils/relationEngine.ts
+++ b/apps/web/src/arcade-games/rithmomachia/utils/relationEngine.ts
@@ -1,4 +1,4 @@
-import type { RelationKind } from "../types";
+import type { RelationKind } from '../types'
 
 /**
  * Relation checking engine for Rithmomachia captures.
@@ -6,9 +6,9 @@ import type { RelationKind } from "../types";
  */
 
 export interface RelationCheckResult {
-  valid: boolean;
-  relation?: RelationKind;
-  explanation?: string;
+  valid: boolean
+  relation?: RelationKind
+  explanation?: string
 }
 
 /**
@@ -19,14 +19,14 @@ export function checkEqual(a: number, b: number): RelationCheckResult {
   if (a === b) {
     return {
       valid: true,
-      relation: "EQUAL",
+      relation: 'EQUAL',
       explanation: `${a} == ${b}`,
-    };
+    }
   }
   return {
     valid: false,
     explanation: `${a} ≠ ${b} (values are not equal)`,
-  };
+  }
 }
 
 /**
@@ -34,19 +34,18 @@ export function checkEqual(a: number, b: number): RelationCheckResult {
  * a % b == 0 (a is a multiple of b)
  */
 export function checkMultiple(a: number, b: number): RelationCheckResult {
-  if (b === 0)
-    return { valid: false, explanation: "Cannot check multiple with zero" };
+  if (b === 0) return { valid: false, explanation: 'Cannot check multiple with zero' }
   if (a % b === 0) {
     return {
       valid: true,
-      relation: "MULTIPLE",
+      relation: 'MULTIPLE',
       explanation: `${a} is a multiple of ${b} (${a}÷${b}=${a / b})`,
-    };
+    }
   }
   return {
     valid: false,
     explanation: `${a} is not a multiple of ${b} (${a}÷${b}=${(a / b).toFixed(2)}...)`,
-  };
+  }
 }
 
 /**
@@ -54,18 +53,18 @@ export function checkMultiple(a: number, b: number): RelationCheckResult {
  * b % a == 0 (a is a divisor of b)
  */
 export function checkDivisor(a: number, b: number): RelationCheckResult {
-  if (a === 0) return { valid: false, explanation: "Cannot divide by zero" };
+  if (a === 0) return { valid: false, explanation: 'Cannot divide by zero' }
   if (b % a === 0) {
     return {
       valid: true,
-      relation: "DIVISOR",
+      relation: 'DIVISOR',
       explanation: `${a} divides ${b} (${b}÷${a}=${b / a})`,
-    };
+    }
   }
   return {
     valid: false,
     explanation: `${a} does not divide ${b} evenly (${b}÷${a}=${(b / a).toFixed(2)}...)`,
-  };
+  }
 }
 
 /**
@@ -76,87 +75,79 @@ export function checkSum(a: number, b: number, h: number): RelationCheckResult {
   if (a + h === b) {
     return {
       valid: true,
-      relation: "SUM",
+      relation: 'SUM',
       explanation: `${a} + ${h} = ${b}`,
-    };
+    }
   }
   if (b + h === a) {
     return {
       valid: true,
-      relation: "SUM",
+      relation: 'SUM',
       explanation: `${b} + ${h} = ${a}`,
-    };
+    }
   }
   return {
     valid: false,
     explanation: `Helper ${h} doesn't satisfy sum (need ${Math.abs(b - a)} but got ${h})`,
-  };
+  }
 }
 
 /**
  * Check if three values satisfy the DIFF relation.
  * |a - h| == b OR |b - h| == a
  */
-export function checkDiff(
-  a: number,
-  b: number,
-  h: number,
-): RelationCheckResult {
-  const abs = (x: number) => (x < 0 ? -x : x);
+export function checkDiff(a: number, b: number, h: number): RelationCheckResult {
+  const abs = (x: number) => (x < 0 ? -x : x)
 
-  const diff1 = abs(a - h);
+  const diff1 = abs(a - h)
   if (diff1 === b) {
     return {
       valid: true,
-      relation: "DIFF",
+      relation: 'DIFF',
       explanation: `|${a} - ${h}| = ${b}`,
-    };
+    }
   }
 
-  const diff2 = abs(b - h);
+  const diff2 = abs(b - h)
   if (diff2 === a) {
     return {
       valid: true,
-      relation: "DIFF",
+      relation: 'DIFF',
       explanation: `|${b} - ${h}| = ${a}`,
-    };
+    }
   }
 
   return {
     valid: false,
     explanation: `Helper ${h} doesn't satisfy difference (|${a}-${h}|=${diff1}, |${b}-${h}|=${diff2})`,
-  };
+  }
 }
 
 /**
  * Check if three values satisfy the PRODUCT relation.
  * a * h == b OR b * h == a
  */
-export function checkProduct(
-  a: number,
-  b: number,
-  h: number,
-): RelationCheckResult {
+export function checkProduct(a: number, b: number, h: number): RelationCheckResult {
   if (a * h === b) {
     return {
       valid: true,
-      relation: "PRODUCT",
+      relation: 'PRODUCT',
       explanation: `${a} × ${h} = ${b}`,
-    };
+    }
   }
   if (b * h === a) {
     return {
       valid: true,
-      relation: "PRODUCT",
+      relation: 'PRODUCT',
       explanation: `${b} × ${h} = ${a}`,
-    };
+    }
   }
-  const needed1 = a === 0 ? "undefined" : (b / a).toFixed(2);
-  const needed2 = b === 0 ? "undefined" : (a / b).toFixed(2);
+  const needed1 = a === 0 ? 'undefined' : (b / a).toFixed(2)
+  const needed2 = b === 0 ? 'undefined' : (a / b).toFixed(2)
   return {
     valid: false,
     explanation: `Helper ${h} doesn't satisfy product (need ${needed1} or ${needed2})`,
-  };
+  }
 }
 
 /**
@@ -164,34 +155,29 @@ export function checkProduct(
  * a * r == b OR b * r == a (where r is the helper value)
  * This is similar to PRODUCT but with explicit ratio semantics.
  */
-export function checkRatio(
-  a: number,
-  b: number,
-  r: number,
-): RelationCheckResult {
-  if (r === 0)
-    return { valid: false, explanation: "Cannot use zero as ratio helper" };
+export function checkRatio(a: number, b: number, r: number): RelationCheckResult {
+  if (r === 0) return { valid: false, explanation: 'Cannot use zero as ratio helper' }
 
   if (a * r === b) {
     return {
       valid: true,
-      relation: "RATIO",
+      relation: 'RATIO',
       explanation: `${a} × ${r} = ${b}`,
-    };
+    }
   }
   if (b * r === a) {
     return {
       valid: true,
-      relation: "RATIO",
+      relation: 'RATIO',
       explanation: `${b} × ${r} = ${a}`,
-    };
+    }
   }
-  const needed1 = a === 0 ? "undefined" : (b / a).toFixed(2);
-  const needed2 = b === 0 ? "undefined" : (a / b).toFixed(2);
+  const needed1 = a === 0 ? 'undefined' : (b / a).toFixed(2)
+  const needed2 = b === 0 ? 'undefined' : (a / b).toFixed(2)
   return {
     valid: false,
     explanation: `Helper ${r} doesn't satisfy ratio (need ${needed1} or ${needed2})`,
-  };
+  }
 }
 
 /**
@@ -202,44 +188,44 @@ export function checkRelation(
   relation: RelationKind,
   moverValue: number,
   targetValue: number,
-  helperValue?: number,
+  helperValue?: number
 ): RelationCheckResult {
   switch (relation) {
-    case "EQUAL":
-      return checkEqual(moverValue, targetValue);
+    case 'EQUAL':
+      return checkEqual(moverValue, targetValue)
 
-    case "MULTIPLE":
-      return checkMultiple(moverValue, targetValue);
+    case 'MULTIPLE':
+      return checkMultiple(moverValue, targetValue)
 
-    case "DIVISOR":
-      return checkDivisor(moverValue, targetValue);
+    case 'DIVISOR':
+      return checkDivisor(moverValue, targetValue)
 
-    case "SUM":
+    case 'SUM':
       if (helperValue === undefined) {
-        return { valid: false, explanation: "SUM requires a helper" };
+        return { valid: false, explanation: 'SUM requires a helper' }
       }
-      return checkSum(moverValue, targetValue, helperValue);
+      return checkSum(moverValue, targetValue, helperValue)
 
-    case "DIFF":
+    case 'DIFF':
       if (helperValue === undefined) {
-        return { valid: false, explanation: "DIFF requires a helper" };
+        return { valid: false, explanation: 'DIFF requires a helper' }
       }
-      return checkDiff(moverValue, targetValue, helperValue);
+      return checkDiff(moverValue, targetValue, helperValue)
 
-    case "PRODUCT":
+    case 'PRODUCT':
       if (helperValue === undefined) {
-        return { valid: false, explanation: "PRODUCT requires a helper" };
+        return { valid: false, explanation: 'PRODUCT requires a helper' }
       }
-      return checkProduct(moverValue, targetValue, helperValue);
+      return checkProduct(moverValue, targetValue, helperValue)
 
-    case "RATIO":
+    case 'RATIO':
       if (helperValue === undefined) {
-        return { valid: false, explanation: "RATIO requires a helper" };
+        return { valid: false, explanation: 'RATIO requires a helper' }
       }
-      return checkRatio(moverValue, targetValue, helperValue);
+      return checkRatio(moverValue, targetValue, helperValue)
 
     default:
-      return { valid: false, explanation: "Unknown relation type" };
+      return { valid: false, explanation: 'Unknown relation type' }
   }
 }
 
@@ -247,55 +233,45 @@ export function checkRelation(
  * Find all valid relations between two values (without helper).
  * Returns an array of valid relations.
  */
-export function findValidRelationsNoHelper(
-  a: number,
-  b: number,
-): RelationKind[] {
-  const valid: RelationKind[] = [];
+export function findValidRelationsNoHelper(a: number, b: number): RelationKind[] {
+  const valid: RelationKind[] = []
 
-  if (checkEqual(a, b).valid) valid.push("EQUAL");
-  if (checkMultiple(a, b).valid) valid.push("MULTIPLE");
-  if (checkDivisor(a, b).valid) valid.push("DIVISOR");
+  if (checkEqual(a, b).valid) valid.push('EQUAL')
+  if (checkMultiple(a, b).valid) valid.push('MULTIPLE')
+  if (checkDivisor(a, b).valid) valid.push('DIVISOR')
 
-  return valid;
+  return valid
 }
 
 /**
  * Find all valid relations between two values WITH a helper.
  * Returns an array of valid relations.
  */
-export function findValidRelationsWithHelper(
-  a: number,
-  b: number,
-  h: number,
-): RelationKind[] {
-  const valid: RelationKind[] = [];
+export function findValidRelationsWithHelper(a: number, b: number, h: number): RelationKind[] {
+  const valid: RelationKind[] = []
 
   // First check no-helper relations
-  valid.push(...findValidRelationsNoHelper(a, b));
+  valid.push(...findValidRelationsNoHelper(a, b))
 
   // Then check helper-based relations
-  if (checkSum(a, b, h).valid) valid.push("SUM");
-  if (checkDiff(a, b, h).valid) valid.push("DIFF");
-  if (checkProduct(a, b, h).valid) valid.push("PRODUCT");
-  if (checkRatio(a, b, h).valid) valid.push("RATIO");
+  if (checkSum(a, b, h).valid) valid.push('SUM')
+  if (checkDiff(a, b, h).valid) valid.push('DIFF')
+  if (checkProduct(a, b, h).valid) valid.push('PRODUCT')
+  if (checkRatio(a, b, h).valid) valid.push('RATIO')
 
-  return valid;
+  return valid
 }
 
 /**
  * Check if ANY relation holds between mover and target (no helper).
  * Returns the first valid relation or null.
  */
-export function findAnyValidRelation(
-  a: number,
-  b: number,
-): RelationCheckResult | null {
-  const relations = findValidRelationsNoHelper(a, b);
+export function findAnyValidRelation(a: number, b: number): RelationCheckResult | null {
+  const relations = findValidRelationsNoHelper(a, b)
   if (relations.length > 0) {
-    return checkRelation(relations[0], a, b);
+    return checkRelation(relations[0], a, b)
   }
-  return null;
+  return null
 }
 
 /**
@@ -305,18 +281,18 @@ export function findAnyValidRelation(
 export function findAnyValidRelationWithHelper(
   a: number,
   b: number,
-  h: number,
+  h: number
 ): RelationCheckResult | null {
-  const relations = findValidRelationsWithHelper(a, b, h);
+  const relations = findValidRelationsWithHelper(a, b, h)
   if (relations.length > 0) {
-    return checkRelation(relations[0], a, b, h);
+    return checkRelation(relations[0], a, b, h)
   }
-  return null;
+  return null
 }
 
 /**
  * Format a BigInt value for display (commas for readability).
  */
 export function formatValue(value: number): string {
-  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 }
diff --git a/apps/web/src/arcade-games/rithmomachia/utils/zobristHash.ts b/apps/web/src/arcade-games/rithmomachia/utils/zobristHash.ts
index c13e8c0f..ac76d24a 100644
--- a/apps/web/src/arcade-games/rithmomachia/utils/zobristHash.ts
+++ b/apps/web/src/arcade-games/rithmomachia/utils/zobristHash.ts
@@ -1,4 +1,4 @@
-import type { Color, Piece, PieceType } from "../types";
+import type { Color, Piece, PieceType } from '../types'
 
 /**
  * Zobrist hashing for efficient board state comparison and repetition detection.
@@ -7,37 +7,37 @@ import type { Color, Piece, PieceType } from "../types";
  */
 
 // Zobrist hash table: [pieceType][color][square] => hash
-type ZobristTable = Record<PieceType, Record<Color, Record<string, bigint>>>;
+type ZobristTable = Record<PieceType, Record<Color, Record<string, bigint>>>
 
 // Single zobrist table instance (initialized lazily)
-let zobristTable: ZobristTable | null = null;
+let zobristTable: ZobristTable | null = null
 
 // Turn hash (XOR this when it's Black's turn)
-let turnHash: bigint | null = null;
+let turnHash: bigint | null = null
 
 /**
  * Simple seedable PRNG using xorshift128+
  */
 class SeededRandom {
-  private state0: bigint;
-  private state1: bigint;
+  private state0: bigint
+  private state1: bigint
 
   constructor(seed: number) {
     // Initialize state from seed
-    this.state0 = BigInt(seed);
-    this.state1 = BigInt(seed * 2 + 1);
+    this.state0 = BigInt(seed)
+    this.state1 = BigInt(seed * 2 + 1)
   }
 
   next(): bigint {
-    let s1 = this.state0;
-    const s0 = this.state1;
-    this.state0 = s0;
-    s1 ^= s1 << 23n;
-    s1 ^= s1 >> 17n;
-    s1 ^= s0;
-    s1 ^= s0 >> 26n;
-    this.state1 = s1;
-    return (s0 + s1) & 0xffffffffffffffffn; // 64-bit mask
+    let s1 = this.state0
+    const s0 = this.state1
+    this.state0 = s0
+    s1 ^= s1 << 23n
+    s1 ^= s1 >> 17n
+    s1 ^= s0
+    s1 ^= s0 >> 26n
+    this.state1 = s1
+    return (s0 + s1) & 0xffffffffffffffffn // 64-bit mask
   }
 }
 
@@ -45,31 +45,31 @@ class SeededRandom {
  * Initialize the Zobrist hash table with deterministic random values.
  */
 function initZobristTable(): ZobristTable {
-  const rng = new SeededRandom(0x52495448); // "RITH" as seed
+  const rng = new SeededRandom(0x52495448) // "RITH" as seed
 
   const table: ZobristTable = {
     C: { W: {}, B: {} },
     T: { W: {}, B: {} },
     S: { W: {}, B: {} },
     P: { W: {}, B: {} },
-  };
+  }
 
-  const pieceTypes: PieceType[] = ["C", "T", "S", "P"];
-  const colors: Color[] = ["W", "B"];
+  const pieceTypes: PieceType[] = ['C', 'T', 'S', 'P']
+  const colors: Color[] = ['W', 'B']
 
   // Generate hash for each (pieceType, color, square) combination
   for (const type of pieceTypes) {
     for (const color of colors) {
       for (let file = 0; file < 16; file++) {
         for (let rank = 1; rank <= 8; rank++) {
-          const square = `${String.fromCharCode(65 + file)}${rank}`;
-          table[type][color][square] = rng.next();
+          const square = `${String.fromCharCode(65 + file)}${rank}`
+          table[type][color][square] = rng.next()
         }
       }
     }
   }
 
-  return table;
+  return table
 }
 
 /**
@@ -77,12 +77,12 @@ function initZobristTable(): ZobristTable {
  */
 function getZobristTable(): ZobristTable {
   if (!zobristTable) {
-    zobristTable = initZobristTable();
+    zobristTable = initZobristTable()
     // Also initialize turn hash
-    const rng = new SeededRandom(0x5455524e); // "TURN" as seed
-    turnHash = rng.next();
+    const rng = new SeededRandom(0x5455524e) // "TURN" as seed
+    turnHash = rng.next()
   }
-  return zobristTable;
+  return zobristTable
 }
 
 /**
@@ -90,58 +90,52 @@ function getZobristTable(): ZobristTable {
  */
 function getTurnHash(): bigint {
   if (turnHash === null) {
-    getZobristTable(); // This will also initialize turnHash
+    getZobristTable() // This will also initialize turnHash
   }
-  return turnHash!;
+  return turnHash!
 }
 
 /**
  * Compute the Zobrist hash for a board position.
  */
-export function computeZobristHash(
-  pieces: Record<string, Piece>,
-  turn: Color,
-): string {
-  const table = getZobristTable();
-  let hash = 0n;
+export function computeZobristHash(pieces: Record<string, Piece>, turn: Color): string {
+  const table = getZobristTable()
+  let hash = 0n
 
   // XOR all piece hashes
   for (const piece of Object.values(pieces)) {
-    if (piece.captured) continue;
+    if (piece.captured) continue
 
-    const pieceHash = table[piece.type][piece.color][piece.square];
+    const pieceHash = table[piece.type][piece.color][piece.square]
     if (pieceHash) {
-      hash ^= pieceHash;
+      hash ^= pieceHash
     }
   }
 
   // XOR turn hash if it's Black's turn
-  if (turn === "B") {
-    hash ^= getTurnHash();
+  if (turn === 'B') {
+    hash ^= getTurnHash()
   }
 
   // Return as hex string
-  return hash.toString(16).padStart(16, "0");
+  return hash.toString(16).padStart(16, '0')
 }
 
 /**
  * Check if a hash appears N times in the history (for repetition detection).
  */
-export function countHashOccurrences(
-  hashes: string[],
-  targetHash: string,
-): number {
-  return hashes.filter((h) => h === targetHash).length;
+export function countHashOccurrences(hashes: string[], targetHash: string): number {
+  return hashes.filter((h) => h === targetHash).length
 }
 
 /**
  * Check for threefold repetition (hash appears 3 times).
  */
 export function isThreefoldRepetition(hashes: string[]): boolean {
-  if (hashes.length < 3) return false;
+  if (hashes.length < 3) return false
 
-  const currentHash = hashes[hashes.length - 1];
-  return countHashOccurrences(hashes, currentHash) >= 3;
+  const currentHash = hashes[hashes.length - 1]
+  return countHashOccurrences(hashes, currentHash) >= 3
 }
 
 /**
@@ -154,34 +148,33 @@ export function updateZobristHash(
   fromSquare: string,
   toSquare: string,
   capturedPiece: Piece | null,
-  newTurn: Color,
+  newTurn: Color
 ): string {
-  const table = getZobristTable();
-  let hash = BigInt(`0x${currentHash}`);
+  const table = getZobristTable()
+  let hash = BigInt(`0x${currentHash}`)
 
   // Remove moved piece from old square
-  const oldPieceHash = table[movedPiece.type][movedPiece.color][fromSquare];
+  const oldPieceHash = table[movedPiece.type][movedPiece.color][fromSquare]
   if (oldPieceHash) {
-    hash ^= oldPieceHash;
+    hash ^= oldPieceHash
   }
 
   // Add moved piece to new square
-  const newPieceHash = table[movedPiece.type][movedPiece.color][toSquare];
+  const newPieceHash = table[movedPiece.type][movedPiece.color][toSquare]
   if (newPieceHash) {
-    hash ^= newPieceHash;
+    hash ^= newPieceHash
   }
 
   // Remove captured piece (if any)
   if (capturedPiece) {
-    const capturedHash =
-      table[capturedPiece.type][capturedPiece.color][capturedPiece.square];
+    const capturedHash = table[capturedPiece.type][capturedPiece.color][capturedPiece.square]
     if (capturedHash) {
-      hash ^= capturedHash;
+      hash ^= capturedHash
     }
   }
 
   // Toggle turn (XOR turn hash twice = no change, once = change)
-  hash ^= getTurnHash();
+  hash ^= getTurnHash()
 
-  return hash.toString(16).padStart(16, "0");
+  return hash.toString(16).padStart(16, '0')
 }
diff --git a/apps/web/src/arcade-games/yjs-demo/Provider.tsx b/apps/web/src/arcade-games/yjs-demo/Provider.tsx
index 7b2eb0ab..990086a6 100644
--- a/apps/web/src/arcade-games/yjs-demo/Provider.tsx
+++ b/apps/web/src/arcade-games/yjs-demo/Provider.tsx
@@ -1,252 +1,233 @@
-"use client";
+'use client'
 
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import type * as Y from "yjs";
-import { useArcadeSession } from "@/hooks/useArcadeSession";
-import { useArcadeSocket } from "@/hooks/useArcadeSocket";
-import { useGameMode } from "@/contexts/GameModeContext";
-import { useRoomData } from "@/hooks/useRoomData";
-import { useViewerId } from "@/hooks/useViewerId";
-import type { GridCell, YjsDemoState } from "./types";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import type * as Y from 'yjs'
+import { useArcadeSession } from '@/hooks/useArcadeSession'
+import { useArcadeSocket } from '@/hooks/useArcadeSocket'
+import { useGameMode } from '@/contexts/GameModeContext'
+import { useRoomData } from '@/hooks/useRoomData'
+import { useViewerId } from '@/hooks/useViewerId'
+import type { GridCell, YjsDemoState } from './types'
 
 interface YjsDemoContextValue {
-  state: YjsDemoState;
+  state: YjsDemoState
   yjsState: {
-    cells: Y.Array<GridCell> | null;
-    awareness: any;
-  };
-  addCell: (x: number, y: number) => void;
-  startGame: () => void;
-  endGame: () => void;
-  goToSetup: () => void;
-  exitSession: () => void;
-  lastError: string | null;
-  clearError: () => void;
+    cells: Y.Array<GridCell> | null
+    awareness: any
+  }
+  addCell: (x: number, y: number) => void
+  startGame: () => void
+  endGame: () => void
+  goToSetup: () => void
+  exitSession: () => void
+  lastError: string | null
+  clearError: () => void
 }
 
-const YjsDemoContext = createContext<YjsDemoContextValue | null>(null);
+const YjsDemoContext = createContext<YjsDemoContextValue | null>(null)
 
 export function useYjsDemo() {
-  const context = useContext(YjsDemoContext);
+  const context = useContext(YjsDemoContext)
   if (!context) {
-    throw new Error("useYjsDemo must be used within YjsDemoProvider");
+    throw new Error('useYjsDemo must be used within YjsDemoProvider')
   }
-  return context;
+  return context
 }
 
 export function YjsDemoProvider({ children }: { children: React.ReactNode }) {
-  const { data: viewerId } = useViewerId();
-  const { roomData } = useRoomData();
-  const { activePlayers: activePlayerIds } = useGameMode();
-  const [forceUpdate, setForceUpdate] = useState(0);
+  const { data: viewerId } = useViewerId()
+  const { roomData } = useRoomData()
+  const { activePlayers: activePlayerIds } = useGameMode()
+  const [forceUpdate, setForceUpdate] = useState(0)
 
   // Initial state for arcade session
   const initialState: YjsDemoState = {
-    gamePhase: "setup",
+    gamePhase: 'setup',
     gridSize: 8,
     duration: 60,
     activePlayers: [],
     playerScores: {},
-  };
+  }
 
   // Use arcade session for phase transitions
-  const { state, sendMove, exitSession, lastError, clearError } =
-    useArcadeSession<YjsDemoState>({
-      userId: viewerId || "",
-      roomId: roomData?.id,
-      initialState,
-      applyMove: (currentState) => currentState, // Server handles state
-    });
+  const { state, sendMove, exitSession, lastError, clearError } = useArcadeSession<YjsDemoState>({
+    userId: viewerId || '',
+    roomId: roomData?.id,
+    initialState,
+    applyMove: (currentState) => currentState, // Server handles state
+  })
 
   // Yjs setup - Socket.IO based sync
-  const docRef = useRef<Y.Doc | null>(null);
-  const awarenessRef = useRef<any>(null);
-  const cellsRef = useRef<Y.Array<GridCell> | null>(null);
+  const docRef = useRef<Y.Doc | null>(null)
+  const awarenessRef = useRef<any>(null)
+  const cellsRef = useRef<Y.Array<GridCell> | null>(null)
 
   // Get socket from arcade socket hook
-  const { socket } = useArcadeSocket();
+  const { socket } = useArcadeSocket()
 
   useEffect(() => {
-    if (!roomData?.id || !socket) return;
+    if (!roomData?.id || !socket) return
 
-    let doc: Y.Doc;
-    let awareness: any;
-    let cells: Y.Array<GridCell>;
+    let doc: Y.Doc
+    let awareness: any
+    let cells: Y.Array<GridCell>
 
     // Dynamic import to avoid loading Yjs in server bundle
     const initYjs = async () => {
-      const Y = await import("yjs");
-      const awarenessProtocol = await import("y-protocols/awareness");
-      const syncProtocol = await import("y-protocols/sync");
-      const encoding = await import("lib0/encoding");
-      const decoding = await import("lib0/decoding");
+      const Y = await import('yjs')
+      const awarenessProtocol = await import('y-protocols/awareness')
+      const syncProtocol = await import('y-protocols/sync')
+      const encoding = await import('lib0/encoding')
+      const decoding = await import('lib0/decoding')
 
-      doc = new Y.Doc();
-      docRef.current = doc;
+      doc = new Y.Doc()
+      docRef.current = doc
 
       // Create awareness
-      awareness = new awarenessProtocol.Awareness(doc);
-      awarenessRef.current = awareness;
+      awareness = new awarenessProtocol.Awareness(doc)
+      awarenessRef.current = awareness
 
-      cells = doc.getArray<GridCell>("cells");
-      cellsRef.current = cells;
+      cells = doc.getArray<GridCell>('cells')
+      cellsRef.current = cells
 
       // Listen for changes in cells array to trigger re-renders
       const observer = () => {
-        setForceUpdate((n) => n + 1);
-      };
-      cells.observe(observer);
+        setForceUpdate((n) => n + 1)
+      }
+      cells.observe(observer)
 
       // Set up Socket.IO handlers for Yjs sync
 
       // Handle incoming sync/update messages from server
       const handleYjsMessage = (data: number[]) => {
-        const message = new Uint8Array(data);
-        const decoder = decoding.createDecoder(message);
-        const messageType = decoding.readVarUint(decoder);
+        const message = new Uint8Array(data)
+        const decoder = decoding.createDecoder(message)
+        const messageType = decoding.readVarUint(decoder)
 
         if (messageType === 0) {
           // Sync protocol message (sync step or update)
-          const encoder = encoding.createEncoder();
-          encoding.writeVarUint(encoder, 0);
-          syncProtocol.readSyncMessage(decoder, encoder, doc, socket.id);
+          const encoder = encoding.createEncoder()
+          encoding.writeVarUint(encoder, 0)
+          syncProtocol.readSyncMessage(decoder, encoder, doc, socket.id)
 
           // Send response if there's content
           if (encoding.length(encoder) > 1) {
-            socket.emit(
-              "yjs-update",
-              Array.from(encoding.toUint8Array(encoder)),
-            );
+            socket.emit('yjs-update', Array.from(encoding.toUint8Array(encoder)))
           }
         }
-      };
+      }
 
       // Handle incoming awareness updates
       const handleYjsAwareness = (data: number[]) => {
-        const message = new Uint8Array(data);
-        const decoder = decoding.createDecoder(message);
-        const messageType = decoding.readVarUint(decoder);
+        const message = new Uint8Array(data)
+        const decoder = decoding.createDecoder(message)
+        const messageType = decoding.readVarUint(decoder)
 
         if (messageType === 0) {
           // Read the awareness update from the message
-          const awarenessUpdate = decoding.readVarUint8Array(decoder);
-          awarenessProtocol.applyAwarenessUpdate(
-            awareness,
-            awarenessUpdate,
-            socket.id,
-          );
+          const awarenessUpdate = decoding.readVarUint8Array(decoder)
+          awarenessProtocol.applyAwarenessUpdate(awareness, awarenessUpdate, socket.id)
         }
-      };
+      }
 
       // Register Socket.IO event handlers
       // Both sync and update events use the same handler since readSyncMessage handles both
-      socket.on("yjs-sync", handleYjsMessage);
-      socket.on("yjs-update", handleYjsMessage);
-      socket.on("yjs-awareness", handleYjsAwareness);
+      socket.on('yjs-sync', handleYjsMessage)
+      socket.on('yjs-update', handleYjsMessage)
+      socket.on('yjs-awareness', handleYjsAwareness)
 
       // Send updates to server when document changes
       const updateHandler = (update: Uint8Array, origin: any) => {
         // Don't send updates that came from the server
-        if (origin === socket.id) return;
+        if (origin === socket.id) return
 
-        const encoder = encoding.createEncoder();
-        encoding.writeVarUint(encoder, 0); // Message type: sync
-        syncProtocol.writeUpdate(encoder, update);
-        const message = encoding.toUint8Array(encoder);
+        const encoder = encoding.createEncoder()
+        encoding.writeVarUint(encoder, 0) // Message type: sync
+        syncProtocol.writeUpdate(encoder, update)
+        const message = encoding.toUint8Array(encoder)
 
-        socket.emit("yjs-update", Array.from(message));
-      };
-      doc.on("update", updateHandler);
+        socket.emit('yjs-update', Array.from(message))
+      }
+      doc.on('update', updateHandler)
 
       // Send awareness updates to server
       const awarenessUpdateHandler = ({ added, updated, removed }: any) => {
-        const changedClients = added.concat(updated).concat(removed);
-        const update = awarenessProtocol.encodeAwarenessUpdate(
-          awareness,
-          changedClients,
-        );
-        socket.emit("yjs-awareness", Array.from(update));
-      };
-      awareness.on("update", awarenessUpdateHandler);
+        const changedClients = added.concat(updated).concat(removed)
+        const update = awarenessProtocol.encodeAwarenessUpdate(awareness, changedClients)
+        socket.emit('yjs-awareness', Array.from(update))
+      }
+      awareness.on('update', awarenessUpdateHandler)
 
       // Set local awareness state
       if (viewerId) {
-        awareness.setLocalStateField("user", {
+        awareness.setLocalStateField('user', {
           id: viewerId,
           timestamp: Date.now(),
-        });
+        })
       }
 
       // Join the Yjs room
-      console.log("[YjsDemo] Joining Yjs room:", roomData.id);
-      socket.emit("yjs-join", roomData.id);
+      console.log('[YjsDemo] Joining Yjs room:', roomData.id)
+      socket.emit('yjs-join', roomData.id)
 
       // Cleanup function stored for later
       return () => {
-        socket.off("yjs-sync", handleYjsMessage);
-        socket.off("yjs-update", handleYjsMessage);
-        socket.off("yjs-awareness", handleYjsAwareness);
-        doc.off("update", updateHandler);
-        awareness.off("update", awarenessUpdateHandler);
-      };
-    };
+        socket.off('yjs-sync', handleYjsMessage)
+        socket.off('yjs-update', handleYjsMessage)
+        socket.off('yjs-awareness', handleYjsAwareness)
+        doc.off('update', updateHandler)
+        awareness.off('update', awarenessUpdateHandler)
+      }
+    }
 
-    let cleanup: (() => void) | undefined;
+    let cleanup: (() => void) | undefined
 
     void initYjs().then((cleanupFn) => {
-      cleanup = cleanupFn;
-    });
+      cleanup = cleanupFn
+    })
 
     return () => {
       if (cleanup) {
-        cleanup();
+        cleanup()
       }
       if (awarenessRef.current) {
-        awarenessRef.current.setLocalState(null);
-        awarenessRef.current.destroy();
+        awarenessRef.current.setLocalState(null)
+        awarenessRef.current.destroy()
       }
       if (docRef.current) {
-        docRef.current.destroy();
+        docRef.current.destroy()
       }
-      docRef.current = null;
-      awarenessRef.current = null;
-      cellsRef.current = null;
-    };
-  }, [roomData?.id, viewerId, socket]);
+      docRef.current = null
+      awarenessRef.current = null
+      cellsRef.current = null
+    }
+  }, [roomData?.id, viewerId, socket])
 
   // Player colors
   const playerColors = useMemo(() => {
     const colors = [
-      "#FF6B6B",
-      "#4ECDC4",
-      "#45B7D1",
-      "#FFA07A",
-      "#98D8C8",
-      "#F7DC6F",
-      "#BB8FCE",
-      "#85C1E2",
-    ];
-    const playerList = Array.from(activePlayerIds);
-    const colorMap: Record<string, string> = {};
+      '#FF6B6B',
+      '#4ECDC4',
+      '#45B7D1',
+      '#FFA07A',
+      '#98D8C8',
+      '#F7DC6F',
+      '#BB8FCE',
+      '#85C1E2',
+    ]
+    const playerList = Array.from(activePlayerIds)
+    const colorMap: Record<string, string> = {}
     for (let i = 0; i < playerList.length; i++) {
-      colorMap[playerList[i]] = colors[i % colors.length];
+      colorMap[playerList[i]] = colors[i % colors.length]
     }
-    return colorMap;
-  }, [activePlayerIds]);
+    return colorMap
+  }, [activePlayerIds])
 
   // Actions
   const addCell = useCallback(
     (x: number, y: number) => {
-      if (!cellsRef.current || !viewerId || !docRef.current) return;
-      if (state.gamePhase !== "playing") return;
+      if (!cellsRef.current || !viewerId || !docRef.current) return
+      if (state.gamePhase !== 'playing') return
 
       const cell: GridCell = {
         id: `${viewerId}-${Date.now()}`,
@@ -254,51 +235,51 @@ export function YjsDemoProvider({ children }: { children: React.ReactNode }) {
         y,
         playerId: viewerId,
         timestamp: Date.now(),
-        color: playerColors[viewerId] || "#999999",
-      };
+        color: playerColors[viewerId] || '#999999',
+      }
 
       docRef.current.transact(() => {
-        cellsRef.current?.push([cell]);
-      });
+        cellsRef.current?.push([cell])
+      })
 
       // Update score in local state (this would be synced via Yjs in a real impl)
       // For now, we're just showing the concept
     },
-    [viewerId, state.gamePhase, playerColors],
-  );
+    [viewerId, state.gamePhase, playerColors]
+  )
 
   const startGame = useCallback(() => {
-    const players = Array.from(activePlayerIds);
+    const players = Array.from(activePlayerIds)
     sendMove({
-      type: "START_GAME",
-      playerId: players[0] || viewerId || "",
-      userId: viewerId || "",
+      type: 'START_GAME',
+      playerId: players[0] || viewerId || '',
+      userId: viewerId || '',
       data: { activePlayers: players },
-    });
-  }, [activePlayerIds, viewerId, sendMove]);
+    })
+  }, [activePlayerIds, viewerId, sendMove])
 
   const endGame = useCallback(() => {
     sendMove({
-      type: "END_GAME",
-      playerId: viewerId || "",
-      userId: viewerId || "",
+      type: 'END_GAME',
+      playerId: viewerId || '',
+      userId: viewerId || '',
       data: {},
-    });
-  }, [viewerId, sendMove]);
+    })
+  }, [viewerId, sendMove])
 
   const goToSetup = useCallback(() => {
     sendMove({
-      type: "GO_TO_SETUP",
-      playerId: viewerId || "",
-      userId: viewerId || "",
+      type: 'GO_TO_SETUP',
+      playerId: viewerId || '',
+      userId: viewerId || '',
       data: {},
-    });
-  }, [viewerId, sendMove]);
+    })
+  }, [viewerId, sendMove])
 
   const yjsState = {
     cells: cellsRef.current,
     awareness: awarenessRef.current || null,
-  };
+  }
 
   return (
     <YjsDemoContext.Provider
@@ -316,5 +297,5 @@ export function YjsDemoProvider({ children }: { children: React.ReactNode }) {
     >
       {children}
     </YjsDemoContext.Provider>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/yjs-demo/Validator.ts b/apps/web/src/arcade-games/yjs-demo/Validator.ts
index b46fbe24..19f84b56 100644
--- a/apps/web/src/arcade-games/yjs-demo/Validator.ts
+++ b/apps/web/src/arcade-games/yjs-demo/Validator.ts
@@ -1,93 +1,85 @@
-import type {
-  GameValidator,
-  ValidationResult,
-} from "@/lib/arcade/validation/types";
-import type { YjsDemoConfig, YjsDemoMove, YjsDemoState } from "./types";
+import type { GameValidator, ValidationResult } from '@/lib/arcade/validation/types'
+import type { YjsDemoConfig, YjsDemoMove, YjsDemoState } from './types'
 
-export class YjsDemoValidator
-  implements GameValidator<YjsDemoState, YjsDemoMove>
-{
+export class YjsDemoValidator implements GameValidator<YjsDemoState, YjsDemoMove> {
   validateMove(state: YjsDemoState, move: YjsDemoMove): ValidationResult {
     switch (move.type) {
-      case "START_GAME":
-        return this.validateStartGame(state, move.data.activePlayers);
-      case "END_GAME":
-        return this.validateEndGame(state);
-      case "GO_TO_SETUP":
-        return this.validateGoToSetup(state);
+      case 'START_GAME':
+        return this.validateStartGame(state, move.data.activePlayers)
+      case 'END_GAME':
+        return this.validateEndGame(state)
+      case 'GO_TO_SETUP':
+        return this.validateGoToSetup(state)
       default:
-        return { valid: false, error: "Unknown move type" };
+        return { valid: false, error: 'Unknown move type' }
     }
   }
 
-  private validateStartGame(
-    state: YjsDemoState,
-    activePlayers: string[],
-  ): ValidationResult {
-    if (state.gamePhase !== "setup") {
-      return { valid: false, error: "Game already started" };
+  private validateStartGame(state: YjsDemoState, activePlayers: string[]): ValidationResult {
+    if (state.gamePhase !== 'setup') {
+      return { valid: false, error: 'Game already started' }
     }
 
     if (activePlayers.length === 0) {
-      return { valid: false, error: "No players selected" };
+      return { valid: false, error: 'No players selected' }
     }
 
-    const playerScores: Record<string, number> = {};
+    const playerScores: Record<string, number> = {}
     for (const playerId of activePlayers) {
-      playerScores[playerId] = 0;
+      playerScores[playerId] = 0
     }
 
     const newState: YjsDemoState = {
       ...state,
-      gamePhase: "playing",
+      gamePhase: 'playing',
       activePlayers,
       playerScores,
       startTime: Date.now(),
-    };
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   private validateEndGame(state: YjsDemoState): ValidationResult {
-    if (state.gamePhase !== "playing") {
-      return { valid: false, error: "Game is not in progress" };
+    if (state.gamePhase !== 'playing') {
+      return { valid: false, error: 'Game is not in progress' }
     }
 
     const newState: YjsDemoState = {
       ...state,
-      gamePhase: "results",
+      gamePhase: 'results',
       endTime: Date.now(),
-    };
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   private validateGoToSetup(state: YjsDemoState): ValidationResult {
     const newState: YjsDemoState = {
       ...state,
-      gamePhase: "setup",
+      gamePhase: 'setup',
       activePlayers: [],
       playerScores: {},
       startTime: undefined,
       endTime: undefined,
-    };
+    }
 
-    return { valid: true, newState };
+    return { valid: true, newState }
   }
 
   isGameComplete(state: YjsDemoState): boolean {
-    return state.gamePhase === "results";
+    return state.gamePhase === 'results'
   }
 
   getInitialState(config: YjsDemoConfig): YjsDemoState {
     return {
-      gamePhase: "setup",
+      gamePhase: 'setup',
       gridSize: config.gridSize,
       duration: config.duration,
       activePlayers: [],
       playerScores: {},
-    };
+    }
   }
 }
 
-export const yjsDemoValidator = new YjsDemoValidator();
+export const yjsDemoValidator = new YjsDemoValidator()
diff --git a/apps/web/src/arcade-games/yjs-demo/components/PlayingPhase.tsx b/apps/web/src/arcade-games/yjs-demo/components/PlayingPhase.tsx
index 1e08fc5b..da44731a 100644
--- a/apps/web/src/arcade-games/yjs-demo/components/PlayingPhase.tsx
+++ b/apps/web/src/arcade-games/yjs-demo/components/PlayingPhase.tsx
@@ -1,45 +1,45 @@
-"use client";
+'use client'
 
-import { useMemo } from "react";
-import { css } from "../../../../styled-system/css";
-import { useYjsDemo } from "../Provider";
-import { useViewerId } from "@/hooks/useViewerId";
+import { useMemo } from 'react'
+import { css } from '../../../../styled-system/css'
+import { useYjsDemo } from '../Provider'
+import { useViewerId } from '@/hooks/useViewerId'
 
 export function PlayingPhase() {
-  const { state, yjsState, addCell, endGame } = useYjsDemo();
-  const { data: viewerId } = useViewerId();
-  const { gridSize } = state;
+  const { state, yjsState, addCell, endGame } = useYjsDemo()
+  const { data: viewerId } = useViewerId()
+  const { gridSize } = state
 
   // Convert Yjs array to regular array for rendering
   const cells = useMemo(() => {
-    if (!yjsState.cells) return [];
-    return yjsState.cells.toArray();
-  }, [yjsState.cells]);
+    if (!yjsState.cells) return []
+    return yjsState.cells.toArray()
+  }, [yjsState.cells])
 
   // Create a map of occupied cells
   const occupiedCells = useMemo(() => {
-    const map = new Map<string, { color: string; playerId: string }>();
+    const map = new Map<string, { color: string; playerId: string }>()
     for (const cell of cells) {
-      const key = `${cell.x}-${cell.y}`;
-      map.set(key, { color: cell.color, playerId: cell.playerId });
+      const key = `${cell.x}-${cell.y}`
+      map.set(key, { color: cell.color, playerId: cell.playerId })
     }
-    return map;
-  }, [cells]);
+    return map
+  }, [cells])
 
   // Calculate scores
   const scores = useMemo(() => {
-    const scoreMap: Record<string, number> = {};
+    const scoreMap: Record<string, number> = {}
     for (const cell of cells) {
-      scoreMap[cell.playerId] = (scoreMap[cell.playerId] || 0) + 1;
+      scoreMap[cell.playerId] = (scoreMap[cell.playerId] || 0) + 1
     }
-    return scoreMap;
-  }, [cells]);
+    return scoreMap
+  }, [cells])
 
   const handleCellClick = (x: number, y: number) => {
-    const key = `${x}-${y}`;
-    if (occupiedCells.has(key)) return; // Already occupied
-    addCell(x, y);
-  };
+    const key = `${x}-${y}`
+    if (occupiedCells.has(key)) return // Already occupied
+    addCell(x, y)
+  }
 
   return (
     <div className={containerStyle}>
@@ -58,11 +58,11 @@ export function PlayingPhase() {
         }}
       >
         {Array.from({ length: gridSize * gridSize }).map((_, index) => {
-          const x = Math.floor(index / gridSize);
-          const y = index % gridSize;
-          const key = `${x}-${y}`;
-          const cellData = occupiedCells.get(key);
-          const isOwn = cellData?.playerId === viewerId;
+          const x = Math.floor(index / gridSize)
+          const y = index % gridSize
+          const key = `${x}-${y}`
+          const cellData = occupiedCells.get(key)
+          const isOwn = cellData?.playerId === viewerId
 
           return (
             <button
@@ -72,15 +72,13 @@ export function PlayingPhase() {
               disabled={!!cellData}
               className={cellStyle}
               style={{
-                backgroundColor: cellData ? cellData.color : "#f0f0f0",
-                cursor: cellData ? "default" : "pointer",
-                border: isOwn ? "3px solid #333" : "1px solid #ccc",
+                backgroundColor: cellData ? cellData.color : '#f0f0f0',
+                cursor: cellData ? 'default' : 'pointer',
+                border: isOwn ? '3px solid #333' : '1px solid #ccc',
               }}
-              title={
-                cellData ? `Claimed by ${cellData.playerId}` : "Click to claim"
-              }
+              title={cellData ? `Claimed by ${cellData.playerId}` : 'Click to claim'}
             />
-          );
+          )
         })}
       </div>
 
@@ -92,7 +90,7 @@ export function PlayingPhase() {
             .map(([playerId, score]) => (
               <div key={playerId} className={scoreItemStyle}>
                 <span className={scorePlayerStyle}>
-                  {playerId === viewerId ? "You" : playerId.slice(0, 8)}
+                  {playerId === viewerId ? 'You' : playerId.slice(0, 8)}
                 </span>
                 <span className={scoreValueStyle}>{score} cells</span>
               </div>
@@ -104,114 +102,114 @@ export function PlayingPhase() {
         End Game
       </button>
     </div>
-  );
+  )
 }
 
 const containerStyle = css({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  padding: { base: "12px", md: "24px" },
-  gap: "20px",
-  minHeight: "70vh",
-});
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  padding: { base: '12px', md: '24px' },
+  gap: '20px',
+  minHeight: '70vh',
+})
 
 const headerStyle = css({
-  textAlign: "center",
-});
+  textAlign: 'center',
+})
 
 const titleStyle = css({
-  fontSize: { base: "20px", md: "24px" },
-  fontWeight: "bold",
-  color: "blue.600",
-  marginBottom: "8px",
-});
+  fontSize: { base: '20px', md: '24px' },
+  fontWeight: 'bold',
+  color: 'blue.600',
+  marginBottom: '8px',
+})
 
 const statsStyle = css({
-  fontSize: { base: "14px", md: "16px" },
-  color: "gray.600",
-});
+  fontSize: { base: '14px', md: '16px' },
+  color: 'gray.600',
+})
 
 const gridStyle = css({
-  display: "grid",
-  gap: "4px",
-  padding: "12px",
-  backgroundColor: "gray.100",
-  borderRadius: "8px",
-  maxWidth: { base: "320px", sm: "400px", md: "500px" },
-  width: "100%",
-  aspectRatio: "1",
-});
+  display: 'grid',
+  gap: '4px',
+  padding: '12px',
+  backgroundColor: 'gray.100',
+  borderRadius: '8px',
+  maxWidth: { base: '320px', sm: '400px', md: '500px' },
+  width: '100%',
+  aspectRatio: '1',
+})
 
 const cellStyle = css({
-  border: "1px solid",
-  borderColor: "gray.300",
-  borderRadius: "4px",
-  transition: "all 0.2s",
-  "&:not(:disabled):hover": {
-    transform: "scale(1.1)",
-    boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+  border: '1px solid',
+  borderColor: 'gray.300',
+  borderRadius: '4px',
+  transition: 'all 0.2s',
+  '&:not(:disabled):hover': {
+    transform: 'scale(1.1)',
+    boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
   },
-  "&:disabled": {
-    cursor: "default",
+  '&:disabled': {
+    cursor: 'default',
   },
-});
+})
 
 const scoresContainerStyle = css({
-  backgroundColor: "white",
-  borderRadius: "8px",
-  padding: "16px",
-  border: "1px solid",
-  borderColor: "gray.200",
-  minWidth: "250px",
-});
+  backgroundColor: 'white',
+  borderRadius: '8px',
+  padding: '16px',
+  border: '1px solid',
+  borderColor: 'gray.200',
+  minWidth: '250px',
+})
 
 const scoresTitleStyle = css({
-  fontSize: "16px",
-  fontWeight: "bold",
-  color: "gray.700",
-  marginBottom: "12px",
-});
+  fontSize: '16px',
+  fontWeight: 'bold',
+  color: 'gray.700',
+  marginBottom: '12px',
+})
 
 const scoresListStyle = css({
-  display: "flex",
-  flexDirection: "column",
-  gap: "8px",
-});
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px',
+})
 
 const scoreItemStyle = css({
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  padding: "8px",
-  backgroundColor: "gray.50",
-  borderRadius: "4px",
-});
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '8px',
+  backgroundColor: 'gray.50',
+  borderRadius: '4px',
+})
 
 const scorePlayerStyle = css({
-  fontSize: "14px",
-  fontWeight: "500",
-  color: "gray.700",
-});
+  fontSize: '14px',
+  fontWeight: '500',
+  color: 'gray.700',
+})
 
 const scoreValueStyle = css({
-  fontSize: "14px",
-  fontWeight: "bold",
-  color: "blue.600",
-});
+  fontSize: '14px',
+  fontWeight: 'bold',
+  color: 'blue.600',
+})
 
 const endButtonStyle = css({
-  padding: "12px 24px",
-  fontSize: "16px",
-  fontWeight: "bold",
-  backgroundColor: "red.500",
-  color: "white",
-  border: "none",
-  borderRadius: "8px",
-  cursor: "pointer",
-  transition: "all 0.2s",
+  padding: '12px 24px',
+  fontSize: '16px',
+  fontWeight: 'bold',
+  backgroundColor: 'red.500',
+  color: 'white',
+  border: 'none',
+  borderRadius: '8px',
+  cursor: 'pointer',
+  transition: 'all 0.2s',
   _hover: {
-    backgroundColor: "red.600",
-    transform: "scale(1.05)",
+    backgroundColor: 'red.600',
+    transform: 'scale(1.05)',
   },
-});
+})
diff --git a/apps/web/src/arcade-games/yjs-demo/components/ResultsPhase.tsx b/apps/web/src/arcade-games/yjs-demo/components/ResultsPhase.tsx
index ccf46862..84757f9f 100644
--- a/apps/web/src/arcade-games/yjs-demo/components/ResultsPhase.tsx
+++ b/apps/web/src/arcade-games/yjs-demo/components/ResultsPhase.tsx
@@ -1,36 +1,36 @@
-"use client";
+'use client'
 
-import { useMemo } from "react";
-import { css } from "../../../../styled-system/css";
-import { useYjsDemo } from "../Provider";
-import { useViewerId } from "@/hooks/useViewerId";
+import { useMemo } from 'react'
+import { css } from '../../../../styled-system/css'
+import { useYjsDemo } from '../Provider'
+import { useViewerId } from '@/hooks/useViewerId'
 
 export function ResultsPhase() {
-  const { state, yjsState, goToSetup } = useYjsDemo();
-  const { data: viewerId } = useViewerId();
+  const { state, yjsState, goToSetup } = useYjsDemo()
+  const { data: viewerId } = useViewerId()
 
   // Convert Yjs array to regular array for rendering
   const cells = useMemo(() => {
-    if (!yjsState.cells) return [];
-    return yjsState.cells.toArray();
-  }, [yjsState.cells]);
+    if (!yjsState.cells) return []
+    return yjsState.cells.toArray()
+  }, [yjsState.cells])
 
   // Calculate final scores
   const scores = useMemo(() => {
-    const scoreMap: Record<string, number> = {};
+    const scoreMap: Record<string, number> = {}
     for (const cell of cells) {
-      scoreMap[cell.playerId] = (scoreMap[cell.playerId] || 0) + 1;
+      scoreMap[cell.playerId] = (scoreMap[cell.playerId] || 0) + 1
     }
-    return scoreMap;
-  }, [cells]);
+    return scoreMap
+  }, [cells])
 
   const sortedScores = useMemo(() => {
     return Object.entries(scores)
       .sort(([, a], [, b]) => b - a)
-      .map(([playerId, score]) => ({ playerId, score }));
-  }, [scores]);
+      .map(([playerId, score]) => ({ playerId, score }))
+  }, [scores])
 
-  const winner = sortedScores[0];
+  const winner = sortedScores[0]
 
   return (
     <div className={containerStyle}>
@@ -40,7 +40,7 @@ export function ResultsPhase() {
         <div className={winnerBoxStyle}>
           <div className={winnerTitleStyle}>Winner!</div>
           <div className={winnerNameStyle}>
-            {winner.playerId === viewerId ? "You" : winner.playerId}
+            {winner.playerId === viewerId ? 'You' : winner.playerId}
           </div>
           <div className={winnerScoreStyle}>{winner.score} cells claimed</div>
         </div>
@@ -53,7 +53,7 @@ export function ResultsPhase() {
             <div key={playerId} className={scoreItemStyle}>
               <span className={scoreRankStyle}>#{index + 1}</span>
               <span className={scorePlayerStyle}>
-                {playerId === viewerId ? "You" : playerId.slice(0, 8)}
+                {playerId === viewerId ? 'You' : playerId.slice(0, 8)}
               </span>
               <span className={scoreValueStyle}>{score} cells</span>
             </div>
@@ -74,156 +74,152 @@ export function ResultsPhase() {
         </div>
       </div>
 
-      <button
-        type="button"
-        onClick={goToSetup}
-        className={playAgainButtonStyle}
-      >
+      <button type="button" onClick={goToSetup} className={playAgainButtonStyle}>
         Play Again
       </button>
     </div>
-  );
+  )
 }
 
 const containerStyle = css({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  padding: { base: "20px", md: "40px" },
-  gap: "24px",
-  minHeight: "70vh",
-});
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  padding: { base: '20px', md: '40px' },
+  gap: '24px',
+  minHeight: '70vh',
+})
 
 const titleStyle = css({
-  fontSize: { base: "28px", md: "36px" },
-  fontWeight: "bold",
-  color: "blue.600",
-  textAlign: "center",
-});
+  fontSize: { base: '28px', md: '36px' },
+  fontWeight: 'bold',
+  color: 'blue.600',
+  textAlign: 'center',
+})
 
 const winnerBoxStyle = css({
-  backgroundColor: "yellow.100",
-  borderRadius: "16px",
-  padding: "24px",
-  border: "3px solid",
-  borderColor: "yellow.400",
-  textAlign: "center",
-  minWidth: "250px",
-});
+  backgroundColor: 'yellow.100',
+  borderRadius: '16px',
+  padding: '24px',
+  border: '3px solid',
+  borderColor: 'yellow.400',
+  textAlign: 'center',
+  minWidth: '250px',
+})
 
 const winnerTitleStyle = css({
-  fontSize: "20px",
-  fontWeight: "bold",
-  color: "yellow.700",
-  marginBottom: "8px",
-});
+  fontSize: '20px',
+  fontWeight: 'bold',
+  color: 'yellow.700',
+  marginBottom: '8px',
+})
 
 const winnerNameStyle = css({
-  fontSize: "32px",
-  fontWeight: "bold",
-  color: "yellow.800",
-  marginBottom: "4px",
-});
+  fontSize: '32px',
+  fontWeight: 'bold',
+  color: 'yellow.800',
+  marginBottom: '4px',
+})
 
 const winnerScoreStyle = css({
-  fontSize: "18px",
-  color: "yellow.700",
-});
+  fontSize: '18px',
+  color: 'yellow.700',
+})
 
 const scoresContainerStyle = css({
-  backgroundColor: "white",
-  borderRadius: "12px",
-  padding: "20px",
-  border: "1px solid",
-  borderColor: "gray.200",
-  minWidth: "300px",
-});
+  backgroundColor: 'white',
+  borderRadius: '12px',
+  padding: '20px',
+  border: '1px solid',
+  borderColor: 'gray.200',
+  minWidth: '300px',
+})
 
 const scoresTitleStyle = css({
-  fontSize: "18px",
-  fontWeight: "bold",
-  color: "gray.700",
-  marginBottom: "16px",
-});
+  fontSize: '18px',
+  fontWeight: 'bold',
+  color: 'gray.700',
+  marginBottom: '16px',
+})
 
 const scoresListStyle = css({
-  display: "flex",
-  flexDirection: "column",
-  gap: "12px",
-});
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px',
+})
 
 const scoreItemStyle = css({
-  display: "flex",
-  alignItems: "center",
-  gap: "12px",
-  padding: "12px",
-  backgroundColor: "gray.50",
-  borderRadius: "8px",
-});
+  display: 'flex',
+  alignItems: 'center',
+  gap: '12px',
+  padding: '12px',
+  backgroundColor: 'gray.50',
+  borderRadius: '8px',
+})
 
 const scoreRankStyle = css({
-  fontSize: "16px",
-  fontWeight: "bold",
-  color: "gray.500",
-  minWidth: "32px",
-});
+  fontSize: '16px',
+  fontWeight: 'bold',
+  color: 'gray.500',
+  minWidth: '32px',
+})
 
 const scorePlayerStyle = css({
   flex: 1,
-  fontSize: "16px",
-  fontWeight: "500",
-  color: "gray.700",
-});
+  fontSize: '16px',
+  fontWeight: '500',
+  color: 'gray.700',
+})
 
 const scoreValueStyle = css({
-  fontSize: "16px",
-  fontWeight: "bold",
-  color: "blue.600",
-});
+  fontSize: '16px',
+  fontWeight: 'bold',
+  color: 'blue.600',
+})
 
 const statsBoxStyle = css({
-  backgroundColor: "blue.50",
-  borderRadius: "8px",
-  padding: "16px",
-  border: "1px solid",
-  borderColor: "blue.200",
-  minWidth: "250px",
-});
+  backgroundColor: 'blue.50',
+  borderRadius: '8px',
+  padding: '16px',
+  border: '1px solid',
+  borderColor: 'blue.200',
+  minWidth: '250px',
+})
 
 const statItemStyle = css({
-  display: "flex",
-  justifyContent: "space-between",
-  padding: "8px 0",
-  borderBottom: "1px solid",
-  borderColor: "blue.100",
-  "&:last-child": {
-    borderBottom: "none",
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '8px 0',
+  borderBottom: '1px solid',
+  borderColor: 'blue.100',
+  '&:last-child': {
+    borderBottom: 'none',
   },
-});
+})
 
 const statLabelStyle = css({
-  fontSize: "14px",
-  color: "gray.600",
-});
+  fontSize: '14px',
+  color: 'gray.600',
+})
 
 const statValueStyle = css({
-  fontSize: "14px",
-  fontWeight: "bold",
-  color: "blue.700",
-});
+  fontSize: '14px',
+  fontWeight: 'bold',
+  color: 'blue.700',
+})
 
 const playAgainButtonStyle = css({
-  padding: "16px 32px",
-  fontSize: "18px",
-  fontWeight: "bold",
-  backgroundColor: "blue.500",
-  color: "white",
-  border: "none",
-  borderRadius: "8px",
-  cursor: "pointer",
-  transition: "all 0.2s",
+  padding: '16px 32px',
+  fontSize: '18px',
+  fontWeight: 'bold',
+  backgroundColor: 'blue.500',
+  color: 'white',
+  border: 'none',
+  borderRadius: '8px',
+  cursor: 'pointer',
+  transition: 'all 0.2s',
   _hover: {
-    backgroundColor: "blue.600",
-    transform: "scale(1.05)",
+    backgroundColor: 'blue.600',
+    transform: 'scale(1.05)',
   },
-});
+})
diff --git a/apps/web/src/arcade-games/yjs-demo/components/SetupPhase.tsx b/apps/web/src/arcade-games/yjs-demo/components/SetupPhase.tsx
index edfd294f..feeb69de 100644
--- a/apps/web/src/arcade-games/yjs-demo/components/SetupPhase.tsx
+++ b/apps/web/src/arcade-games/yjs-demo/components/SetupPhase.tsx
@@ -1,21 +1,21 @@
-"use client";
+'use client'
 
-import { useGameMode } from "@/contexts/GameModeContext";
-import { css } from "../../../../styled-system/css";
-import { useYjsDemo } from "../Provider";
+import { useGameMode } from '@/contexts/GameModeContext'
+import { css } from '../../../../styled-system/css'
+import { useYjsDemo } from '../Provider'
 
 export function SetupPhase() {
-  const { activePlayers } = useGameMode();
-  const { startGame } = useYjsDemo();
+  const { activePlayers } = useGameMode()
+  const { startGame } = useYjsDemo()
 
-  const canStart = activePlayers.size >= 1;
+  const canStart = activePlayers.size >= 1
 
   return (
     <div className={containerStyle}>
       <div className={titleStyle}>Collaborative Grid Demo</div>
       <div className={descriptionStyle}>
-        Click on the grid to add colored cells. See other players&apos; clicks
-        in real-time using Yjs!
+        Click on the grid to add colored cells. See other players&apos; clicks in real-time using
+        Yjs!
       </div>
 
       <div className={infoBoxStyle}>
@@ -34,71 +34,69 @@ export function SetupPhase() {
         onClick={startGame}
         disabled={!canStart}
         className={css({
-          padding: "16px 32px",
-          fontSize: "18px",
-          fontWeight: "bold",
-          backgroundColor: canStart ? "blue.500" : "gray.300",
-          color: "white",
-          border: "none",
-          borderRadius: "8px",
-          cursor: canStart ? "pointer" : "not-allowed",
-          transition: "all 0.2s",
-          _hover: canStart
-            ? { backgroundColor: "blue.600", transform: "scale(1.05)" }
-            : {},
+          padding: '16px 32px',
+          fontSize: '18px',
+          fontWeight: 'bold',
+          backgroundColor: canStart ? 'blue.500' : 'gray.300',
+          color: 'white',
+          border: 'none',
+          borderRadius: '8px',
+          cursor: canStart ? 'pointer' : 'not-allowed',
+          transition: 'all 0.2s',
+          _hover: canStart ? { backgroundColor: 'blue.600', transform: 'scale(1.05)' } : {},
         })}
       >
-        {canStart ? "Start Demo" : "Select at least 1 player"}
+        {canStart ? 'Start Demo' : 'Select at least 1 player'}
       </button>
     </div>
-  );
+  )
 }
 
 const containerStyle = css({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: { base: "20px", md: "40px" },
-  gap: "24px",
-  minHeight: "60vh",
-});
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: { base: '20px', md: '40px' },
+  gap: '24px',
+  minHeight: '60vh',
+})
 
 const titleStyle = css({
-  fontSize: { base: "28px", md: "36px" },
-  fontWeight: "bold",
-  color: "blue.600",
-  textAlign: "center",
-});
+  fontSize: { base: '28px', md: '36px' },
+  fontWeight: 'bold',
+  color: 'blue.600',
+  textAlign: 'center',
+})
 
 const descriptionStyle = css({
-  fontSize: { base: "16px", md: "18px" },
-  color: "gray.700",
-  textAlign: "center",
-  maxWidth: "600px",
-});
+  fontSize: { base: '16px', md: '18px' },
+  color: 'gray.700',
+  textAlign: 'center',
+  maxWidth: '600px',
+})
 
 const infoBoxStyle = css({
-  backgroundColor: "blue.50",
-  borderRadius: "12px",
-  padding: "20px",
-  maxWidth: "500px",
-  border: "2px solid",
-  borderColor: "blue.200",
-});
+  backgroundColor: 'blue.50',
+  borderRadius: '12px',
+  padding: '20px',
+  maxWidth: '500px',
+  border: '2px solid',
+  borderColor: 'blue.200',
+})
 
 const infoTitleStyle = css({
-  fontSize: "18px",
-  fontWeight: "bold",
-  color: "blue.700",
-  marginBottom: "12px",
-});
+  fontSize: '18px',
+  fontWeight: 'bold',
+  color: 'blue.700',
+  marginBottom: '12px',
+})
 
 const listStyle = css({
-  fontSize: "14px",
-  color: "gray.700",
-  paddingLeft: "20px",
-  "& li": {
-    marginBottom: "8px",
+  fontSize: '14px',
+  color: 'gray.700',
+  paddingLeft: '20px',
+  '& li': {
+    marginBottom: '8px',
   },
-});
+})
diff --git a/apps/web/src/arcade-games/yjs-demo/components/YjsDemoGame.tsx b/apps/web/src/arcade-games/yjs-demo/components/YjsDemoGame.tsx
index e02ee8f5..77254b37 100644
--- a/apps/web/src/arcade-games/yjs-demo/components/YjsDemoGame.tsx
+++ b/apps/web/src/arcade-games/yjs-demo/components/YjsDemoGame.tsx
@@ -1,31 +1,31 @@
-"use client";
+'use client'
 
-import { useRouter } from "next/navigation";
-import { PageWithNav } from "@/components/PageWithNav";
-import { useYjsDemo } from "../Provider";
-import { SetupPhase } from "./SetupPhase";
-import { PlayingPhase } from "./PlayingPhase";
-import { ResultsPhase } from "./ResultsPhase";
+import { useRouter } from 'next/navigation'
+import { PageWithNav } from '@/components/PageWithNav'
+import { useYjsDemo } from '../Provider'
+import { SetupPhase } from './SetupPhase'
+import { PlayingPhase } from './PlayingPhase'
+import { ResultsPhase } from './ResultsPhase'
 
 export function YjsDemoGame() {
-  const router = useRouter();
-  const { state, exitSession, goToSetup } = useYjsDemo();
+  const router = useRouter()
+  const { state, exitSession, goToSetup } = useYjsDemo()
 
   return (
     <PageWithNav
       navTitle="Yjs Demo"
       navEmoji="🔄"
-      emphasizePlayerSelection={state.gamePhase === "setup"}
+      emphasizePlayerSelection={state.gamePhase === 'setup'}
       playerScores={state.playerScores}
       onExitSession={() => {
-        exitSession();
-        router.push("/arcade");
+        exitSession()
+        router.push('/arcade')
       }}
-      onSetup={state.gamePhase !== "setup" ? () => goToSetup() : undefined}
+      onSetup={state.gamePhase !== 'setup' ? () => goToSetup() : undefined}
     >
-      {state.gamePhase === "setup" && <SetupPhase />}
-      {state.gamePhase === "playing" && <PlayingPhase />}
-      {state.gamePhase === "results" && <ResultsPhase />}
+      {state.gamePhase === 'setup' && <SetupPhase />}
+      {state.gamePhase === 'playing' && <PlayingPhase />}
+      {state.gamePhase === 'results' && <ResultsPhase />}
     </PageWithNav>
-  );
+  )
 }
diff --git a/apps/web/src/arcade-games/yjs-demo/components/index.ts b/apps/web/src/arcade-games/yjs-demo/components/index.ts
index f8889432..54afa5fd 100644
--- a/apps/web/src/arcade-games/yjs-demo/components/index.ts
+++ b/apps/web/src/arcade-games/yjs-demo/components/index.ts
@@ -1,4 +1,4 @@
-export { YjsDemoGame } from "./YjsDemoGame";
-export { SetupPhase } from "./SetupPhase";
-export { PlayingPhase } from "./PlayingPhase";
-export { ResultsPhase } from "./ResultsPhase";
+export { YjsDemoGame } from './YjsDemoGame'
+export { SetupPhase } from './SetupPhase'
+export { PlayingPhase } from './PlayingPhase'
+export { ResultsPhase } from './ResultsPhase'
diff --git a/apps/web/src/arcade-games/yjs-demo/index.ts b/apps/web/src/arcade-games/yjs-demo/index.ts
index 5eda07be..5a72e39c 100644
--- a/apps/web/src/arcade-games/yjs-demo/index.ts
+++ b/apps/web/src/arcade-games/yjs-demo/index.ts
@@ -5,62 +5,60 @@
  * Players collaborate on a shared grid, with state synchronized via Yjs WebSockets.
  */
 
-import { defineGame, getGameTheme } from "@/lib/arcade/game-sdk";
-import type { GameManifest } from "@/lib/arcade/game-sdk";
-import { YjsDemoGame } from "./components/YjsDemoGame";
-import { YjsDemoProvider } from "./Provider";
-import type { YjsDemoConfig, YjsDemoMove, YjsDemoState } from "./types";
-import { yjsDemoValidator } from "./Validator";
+import { defineGame, getGameTheme } from '@/lib/arcade/game-sdk'
+import type { GameManifest } from '@/lib/arcade/game-sdk'
+import { YjsDemoGame } from './components/YjsDemoGame'
+import { YjsDemoProvider } from './Provider'
+import type { YjsDemoConfig, YjsDemoMove, YjsDemoState } from './types'
+import { yjsDemoValidator } from './Validator'
 
 const manifest: GameManifest = {
-  name: "yjs-demo",
-  displayName: "Yjs Sync Demo",
-  icon: "🔄",
-  description: "Real-time collaboration demo with Yjs",
+  name: 'yjs-demo',
+  displayName: 'Yjs Sync Demo',
+  icon: '🔄',
+  description: 'Real-time collaboration demo with Yjs',
   longDescription:
-    "Experience the power of Yjs CRDTs in action! This demo shows how multiple players can interact with a shared grid in real-time. " +
-    "Click on cells to claim them, and watch as other players do the same. Yjs handles all the conflict resolution automatically, " +
-    "ensuring everyone sees a consistent view of the game state without traditional server validation.",
+    'Experience the power of Yjs CRDTs in action! This demo shows how multiple players can interact with a shared grid in real-time. ' +
+    'Click on cells to claim them, and watch as other players do the same. Yjs handles all the conflict resolution automatically, ' +
+    'ensuring everyone sees a consistent view of the game state without traditional server validation.',
   maxPlayers: 8,
-  difficulty: "Beginner",
-  chips: ["🤝 Collaborative", "⚡ Real-time", "🔬 Demo"],
-  ...getGameTheme("teal"),
+  difficulty: 'Beginner',
+  chips: ['🤝 Collaborative', '⚡ Real-time', '🔬 Demo'],
+  ...getGameTheme('teal'),
   available: true,
-};
+}
 
 const defaultConfig: YjsDemoConfig = {
   gridSize: 8,
   duration: 60,
-};
+}
 
 // Config validation function
 function validateYjsDemoConfig(config: unknown): config is YjsDemoConfig {
-  if (typeof config !== "object" || config === null) {
-    return false;
+  if (typeof config !== 'object' || config === null) {
+    return false
   }
 
-  const c = config as any;
+  const c = config as any
 
   // Validate gridSize
-  if (!("gridSize" in c) || ![8, 12, 16].includes(c.gridSize)) {
-    return false;
+  if (!('gridSize' in c) || ![8, 12, 16].includes(c.gridSize)) {
+    return false
   }
 
   // Validate duration
-  if (!("duration" in c) || ![60, 120, 180].includes(c.duration)) {
-    return false;
+  if (!('duration' in c) || ![60, 120, 180].includes(c.duration)) {
+    return false
   }
 
-  return true;
+  return true
 }
 
-export const yjsDemoGame = defineGame<YjsDemoConfig, YjsDemoState, YjsDemoMove>(
-  {
-    manifest,
-    Provider: YjsDemoProvider,
-    GameComponent: YjsDemoGame,
-    validator: yjsDemoValidator,
-    defaultConfig,
-    validateConfig: validateYjsDemoConfig,
-  },
-);
+export const yjsDemoGame = defineGame<YjsDemoConfig, YjsDemoState, YjsDemoMove>({
+  manifest,
+  Provider: YjsDemoProvider,
+  GameComponent: YjsDemoGame,
+  validator: yjsDemoValidator,
+  defaultConfig,
+  validateConfig: validateYjsDemoConfig,
+})
diff --git a/apps/web/src/arcade-games/yjs-demo/types.ts b/apps/web/src/arcade-games/yjs-demo/types.ts
index 8c8a15fe..bf9b6807 100644
--- a/apps/web/src/arcade-games/yjs-demo/types.ts
+++ b/apps/web/src/arcade-games/yjs-demo/types.ts
@@ -1,54 +1,54 @@
-import type { GameConfig, GameState } from "@/lib/arcade/game-sdk/types";
+import type { GameConfig, GameState } from '@/lib/arcade/game-sdk/types'
 
 export interface YjsDemoConfig extends GameConfig {
-  gridSize: 8 | 12 | 16;
-  duration: 60 | 120 | 180;
-  [key: string]: unknown;
+  gridSize: 8 | 12 | 16
+  duration: 60 | 120 | 180
+  [key: string]: unknown
 }
 
 export interface YjsDemoState extends GameState {
-  gamePhase: "setup" | "playing" | "results";
-  gridSize: number;
-  duration: number;
-  startTime?: number;
-  endTime?: number;
-  activePlayers: string[];
-  playerScores: Record<string, number>;
+  gamePhase: 'setup' | 'playing' | 'results'
+  gridSize: number
+  duration: number
+  startTime?: number
+  endTime?: number
+  activePlayers: string[]
+  playerScores: Record<string, number>
   // Cells array for persistence (synced from Y.Doc)
-  cells?: GridCell[];
+  cells?: GridCell[]
 }
 
 // For Yjs synchronization
 export interface GridCell {
-  id: string;
-  x: number;
-  y: number;
-  playerId: string;
-  timestamp: number;
-  color: string;
+  id: string
+  x: number
+  y: number
+  playerId: string
+  timestamp: number
+  color: string
 }
 
 // Moves are not used in Yjs demo (everything goes through Y.Doc)
 // but we need this for arcade compatibility
 export type YjsDemoMove =
   | {
-      type: "START_GAME";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: { activePlayers: string[] };
+      type: 'START_GAME'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: { activePlayers: string[] }
     }
   | {
-      type: "END_GAME";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
+      type: 'END_GAME'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
     }
   | {
-      type: "GO_TO_SETUP";
-      playerId: string;
-      userId: string;
-      timestamp: number;
-      data: Record<string, never>;
-    };
+      type: 'GO_TO_SETUP'
+      playerId: string
+      userId: string
+      timestamp: number
+      data: Record<string, never>
+    }
diff --git a/apps/web/src/auth.ts b/apps/web/src/auth.ts
index b38c123d..5206d34b 100644
--- a/apps/web/src/auth.ts
+++ b/apps/web/src/auth.ts
@@ -1,6 +1,6 @@
-import NextAuth from "next-auth";
-import Credentials from "next-auth/providers/credentials";
-import { GUEST_COOKIE_NAME, verifyGuestToken } from "@/lib/guest-token";
+import NextAuth from 'next-auth'
+import Credentials from 'next-auth/providers/credentials'
+import { GUEST_COOKIE_NAME, verifyGuestToken } from '@/lib/guest-token'
 
 /**
  * NextAuth v5 configuration with guest session support
@@ -9,26 +9,26 @@ import { GUEST_COOKIE_NAME, verifyGuestToken } from "@/lib/guest-token";
  * Supports both guest users and future full authentication.
  */
 
-export type Role = "guest" | "user";
+export type Role = 'guest' | 'user'
 
 // Extend NextAuth types to include our custom fields
-declare module "next-auth" {
+declare module 'next-auth' {
   interface Session {
     user: {
-      id: string;
-      name?: string | null;
-      email?: string | null;
-      image?: string | null;
-    };
-    isGuest?: boolean;
-    guestId?: string | null;
+      id: string
+      name?: string | null
+      email?: string | null
+      image?: string | null
+    }
+    isGuest?: boolean
+    guestId?: string | null
   }
 }
 
-declare module "next-auth/jwt" {
+declare module 'next-auth/jwt' {
   interface JWT {
-    role?: Role;
-    guestId?: string | null;
+    role?: Role
+    guestId?: string | null
   }
 }
 
@@ -39,14 +39,14 @@ declare module "next-auth/jwt" {
  * a single code path for both guest and authenticated users.
  */
 const GuestProvider = Credentials({
-  id: "guest",
-  name: "Guest",
+  id: 'guest',
+  name: 'Guest',
   credentials: {},
   async authorize() {
     // Create a synthetic user ID for the guest session
-    return { id: `guest:${crypto.randomUUID()}`, name: "Guest" } as any;
+    return { id: `guest:${crypto.randomUUID()}`, name: 'Guest' } as any
   },
-});
+})
 
 /**
  * NextAuth configuration with lazy initialization
@@ -57,7 +57,7 @@ const GuestProvider = Credentials({
 export const { handlers, auth, signIn, signOut } = NextAuth((req) => ({
   // JWT strategy for stateless sessions (no database lookups)
   session: {
-    strategy: "jwt",
+    strategy: 'jwt',
     maxAge: 60 * 60 * 24 * 30, // 30 days
   },
 
@@ -81,27 +81,27 @@ export const { handlers, auth, signIn, signOut } = NextAuth((req) => ({
      */
     async jwt({ token, user, account, trigger }) {
       // Handle guest sign-in
-      if (trigger === "signIn" && account?.provider === "guest" && user) {
-        token.sub = user.id;
-        token.role = "guest";
+      if (trigger === 'signIn' && account?.provider === 'guest' && user) {
+        token.sub = user.id
+        token.role = 'guest'
       }
 
       // Handle upgrade from guest to full account
-      if (trigger === "signIn" && account && account.provider !== "guest") {
+      if (trigger === 'signIn' && account && account.provider !== 'guest') {
         // Capture the guest ID from the cookie for data migration
-        const guestCookie = req?.cookies.get(GUEST_COOKIE_NAME)?.value;
+        const guestCookie = req?.cookies.get(GUEST_COOKIE_NAME)?.value
         if (guestCookie) {
           try {
-            const { sid } = await verifyGuestToken(guestCookie);
-            token.guestId = sid; // Store for merge/migration
+            const { sid } = await verifyGuestToken(guestCookie)
+            token.guestId = sid // Store for merge/migration
           } catch {
             // Invalid guest token, ignore
           }
         }
-        token.role = "user";
+        token.role = 'user'
       }
 
-      return token;
+      return token
     },
 
     /**
@@ -113,24 +113,24 @@ export const { handlers, auth, signIn, signOut } = NextAuth((req) => ({
      */
     async session({ session, token }) {
       if (session.user && token.sub) {
-        session.user.id = token.sub;
+        session.user.id = token.sub
       }
 
-      session.isGuest = token.role === "guest";
+      session.isGuest = token.role === 'guest'
 
       // Expose the stable guest ID from the cookie
-      const guestCookie = req?.cookies.get(GUEST_COOKIE_NAME)?.value;
-      session.guestId = null;
+      const guestCookie = req?.cookies.get(GUEST_COOKIE_NAME)?.value
+      session.guestId = null
       if (guestCookie) {
         try {
-          const { sid } = await verifyGuestToken(guestCookie);
-          session.guestId = sid;
+          const { sid } = await verifyGuestToken(guestCookie)
+          session.guestId = sid
         } catch {
           // Invalid guest token, ignore
         }
       }
 
-      return session;
+      return session
     },
 
     /**
@@ -141,7 +141,7 @@ export const { handlers, auth, signIn, signOut } = NextAuth((req) => ({
     authorized({ auth }) {
       // For now, allow all visitors (guests + authenticated)
       // Add role-based checks here later if needed
-      return true;
+      return true
     },
   },
 
@@ -161,4 +161,4 @@ export const { handlers, auth, signIn, signOut } = NextAuth((req) => ({
       // }
     },
   },
-}));
+}))
diff --git a/apps/web/src/components/AbacusDisplayDropdown.tsx b/apps/web/src/components/AbacusDisplayDropdown.tsx
index 7f926c07..af7e80af 100644
--- a/apps/web/src/components/AbacusDisplayDropdown.tsx
+++ b/apps/web/src/components/AbacusDisplayDropdown.tsx
@@ -1,114 +1,94 @@
-"use client";
+'use client'
 
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import * as Label from "@radix-ui/react-label";
-import * as RadioGroup from "@radix-ui/react-radio-group";
-import * as Switch from "@radix-ui/react-switch";
-import {
-  type BeadShape,
-  type ColorScheme,
-  useAbacusDisplay,
-} from "@soroban/abacus-react";
-import { useState } from "react";
-import { Z_INDEX } from "../constants/zIndex";
-import { css } from "../../styled-system/css";
-import { hstack, stack } from "../../styled-system/patterns";
-import {
-  useAbacusSettings,
-  useUpdateAbacusSettings,
-} from "../hooks/useAbacusSettings";
-import { useTheme } from "../contexts/ThemeContext";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import * as Label from '@radix-ui/react-label'
+import * as RadioGroup from '@radix-ui/react-radio-group'
+import * as Switch from '@radix-ui/react-switch'
+import { type BeadShape, type ColorScheme, useAbacusDisplay } from '@soroban/abacus-react'
+import { useState } from 'react'
+import { Z_INDEX } from '../constants/zIndex'
+import { css } from '../../styled-system/css'
+import { hstack, stack } from '../../styled-system/patterns'
+import { useAbacusSettings, useUpdateAbacusSettings } from '../hooks/useAbacusSettings'
+import { useTheme } from '../contexts/ThemeContext'
 
 interface AbacusDisplayDropdownProps {
-  isFullscreen?: boolean;
-  onOpenChange?: (open: boolean) => void;
+  isFullscreen?: boolean
+  onOpenChange?: (open: boolean) => void
 }
 
 export function AbacusDisplayDropdown({
   isFullscreen = false,
   onOpenChange: onOpenChangeProp,
 }: AbacusDisplayDropdownProps) {
-  const [open, setOpen] = useState(false);
-  const { config, updateConfig, resetToDefaults } = useAbacusDisplay();
-  const { data: abacusSettings } = useAbacusSettings();
-  const { mutate: updateAbacusSettings } = useUpdateAbacusSettings();
-  const { resolvedTheme } = useTheme();
-  const isDark = resolvedTheme === "dark";
+  const [open, setOpen] = useState(false)
+  const { config, updateConfig, resetToDefaults } = useAbacusDisplay()
+  const { data: abacusSettings } = useAbacusSettings()
+  const { mutate: updateAbacusSettings } = useUpdateAbacusSettings()
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === 'dark'
 
   const handleOpenChange = (isOpen: boolean) => {
-    setOpen(isOpen);
+    setOpen(isOpen)
     // Notify parent component
-    onOpenChangeProp?.(isOpen);
-  };
+    onOpenChangeProp?.(isOpen)
+  }
 
   return (
     <DropdownMenu.Root open={open} onOpenChange={handleOpenChange}>
       <DropdownMenu.Trigger asChild>
         <button
           className={css({
-            display: "flex",
-            alignItems: "center",
-            gap: "2",
-            px: "3",
-            py: "2",
-            fontSize: "sm",
-            fontWeight: "medium",
-            color: isFullscreen ? "white" : isDark ? "gray.200" : "gray.600",
-            bg: isFullscreen
-              ? "rgba(0, 0, 0, 0.85)"
-              : isDark
-                ? "gray.800"
-                : "white",
-            border: "1px solid",
+            display: 'flex',
+            alignItems: 'center',
+            gap: '2',
+            px: '3',
+            py: '2',
+            fontSize: 'sm',
+            fontWeight: 'medium',
+            color: isFullscreen ? 'white' : isDark ? 'gray.200' : 'gray.600',
+            bg: isFullscreen ? 'rgba(0, 0, 0, 0.85)' : isDark ? 'gray.800' : 'white',
+            border: '1px solid',
             borderColor: isFullscreen
-              ? "rgba(255, 255, 255, 0.1)"
+              ? 'rgba(255, 255, 255, 0.1)'
               : isDark
-                ? "gray.700"
-                : "gray.200",
-            rounded: "lg",
-            shadow: "lg",
-            backdropFilter: isFullscreen ? "blur(15px)" : "none",
-            transition: "all",
-            cursor: "pointer",
+                ? 'gray.700'
+                : 'gray.200',
+            rounded: 'lg',
+            shadow: 'lg',
+            backdropFilter: isFullscreen ? 'blur(15px)' : 'none',
+            transition: 'all',
+            cursor: 'pointer',
             _hover: {
-              bg: isFullscreen
-                ? "rgba(0, 0, 0, 0.9)"
-                : isDark
-                  ? "gray.700"
-                  : "gray.50",
+              bg: isFullscreen ? 'rgba(0, 0, 0, 0.9)' : isDark ? 'gray.700' : 'gray.50',
               borderColor: isFullscreen
-                ? "rgba(255, 255, 255, 0.2)"
+                ? 'rgba(255, 255, 255, 0.2)'
                 : isDark
-                  ? "gray.600"
-                  : "gray.300",
+                  ? 'gray.600'
+                  : 'gray.300',
             },
             _focus: {
-              outline: "none",
-              ring: "2px",
-              ringColor: isFullscreen ? "blue.400" : "brand.500",
-              ringOffset: "1px",
+              outline: 'none',
+              ring: '2px',
+              ringColor: isFullscreen ? 'blue.400' : 'brand.500',
+              ringOffset: '1px',
             },
           })}
         >
-          <span className={css({ fontSize: "lg" })}>🧮</span>
+          <span className={css({ fontSize: 'lg' })}>🧮</span>
           <span>Style</span>
           <svg
             className={css({
-              w: "4",
-              h: "4",
-              transition: "transform",
-              transform: open ? "rotate(180deg)" : "rotate(0deg)",
+              w: '4',
+              h: '4',
+              transition: 'transform',
+              transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
             })}
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M19 9l-7 7-7-7"
-            />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
           </svg>
         </button>
       </DropdownMenu.Trigger>
@@ -116,26 +96,22 @@ export function AbacusDisplayDropdown({
       <DropdownMenu.Portal>
         <DropdownMenu.Content
           className={css({
-            bg: isFullscreen
-              ? "rgba(0, 0, 0, 0.85)"
-              : isDark
-                ? "gray.900"
-                : "white",
-            rounded: "xl",
-            shadow: "lg",
-            border: "1px solid",
+            bg: isFullscreen ? 'rgba(0, 0, 0, 0.85)' : isDark ? 'gray.900' : 'white',
+            rounded: 'xl',
+            shadow: 'lg',
+            border: '1px solid',
             borderColor: isFullscreen
-              ? "rgba(255, 255, 255, 0.1)"
+              ? 'rgba(255, 255, 255, 0.1)'
               : isDark
-                ? "gray.800"
-                : "gray.200",
-            backdropFilter: isFullscreen ? "blur(15px)" : "none",
-            p: "6",
-            minW: "320px",
-            maxW: "400px",
-            maxH: "80vh",
-            overflowY: "auto",
-            position: "relative",
+                ? 'gray.800'
+                : 'gray.200',
+            backdropFilter: isFullscreen ? 'blur(15px)' : 'none',
+            p: '6',
+            minW: '320px',
+            maxW: '400px',
+            maxH: '80vh',
+            overflowY: 'auto',
+            position: 'relative',
           })}
           style={{
             zIndex: Z_INDEX.GAME_NAV.HAMBURGER_NESTED_DROPDOWN,
@@ -144,24 +120,20 @@ export function AbacusDisplayDropdown({
           sideOffset={8}
           align="start"
         >
-          <div className={stack({ gap: "6" })}>
+          <div className={stack({ gap: '6' })}>
             {/* Header */}
-            <div className={stack({ gap: "1" })}>
+            <div className={stack({ gap: '1' })}>
               <div
                 className={hstack({
-                  justify: "space-between",
-                  alignItems: "center",
+                  justify: 'space-between',
+                  alignItems: 'center',
                 })}
               >
                 <h3
                   className={css({
-                    fontSize: "lg",
-                    fontWeight: "semibold",
-                    color: isFullscreen
-                      ? "white"
-                      : isDark
-                        ? "gray.100"
-                        : "gray.900",
+                    fontSize: 'lg',
+                    fontWeight: 'semibold',
+                    color: isFullscreen ? 'white' : isDark ? 'gray.100' : 'gray.900',
                   })}
                 >
                   🎨 Abacus Style
@@ -169,18 +141,10 @@ export function AbacusDisplayDropdown({
                 <button
                   onClick={resetToDefaults}
                   className={css({
-                    fontSize: "xs",
-                    color: isFullscreen
-                      ? "gray.300"
-                      : isDark
-                        ? "gray.400"
-                        : "gray.500",
+                    fontSize: 'xs',
+                    color: isFullscreen ? 'gray.300' : isDark ? 'gray.400' : 'gray.500',
                     _hover: {
-                      color: isFullscreen
-                        ? "white"
-                        : isDark
-                          ? "gray.200"
-                          : "gray.700",
+                      color: isFullscreen ? 'white' : isDark ? 'gray.200' : 'gray.700',
                     },
                   })}
                 >
@@ -189,12 +153,8 @@ export function AbacusDisplayDropdown({
               </div>
               <p
                 className={css({
-                  fontSize: "sm",
-                  color: isFullscreen
-                    ? "gray.300"
-                    : isDark
-                      ? "gray.400"
-                      : "gray.600",
+                  fontSize: 'sm',
+                  color: isFullscreen ? 'gray.300' : isDark ? 'gray.400' : 'gray.600',
                 })}
               >
                 Configure display across the entire app
@@ -202,21 +162,15 @@ export function AbacusDisplayDropdown({
             </div>
 
             {/* Color Scheme */}
-            <FormField
-              label="Color Scheme"
-              isFullscreen={isFullscreen}
-              isDark={isDark}
-            >
+            <FormField label="Color Scheme" isFullscreen={isFullscreen} isDark={isDark}>
               <RadioGroupField
                 value={config.colorScheme}
-                onValueChange={(value) =>
-                  updateConfig({ colorScheme: value as ColorScheme })
-                }
+                onValueChange={(value) => updateConfig({ colorScheme: value as ColorScheme })}
                 options={[
-                  { value: "monochrome", label: "Monochrome" },
-                  { value: "place-value", label: "Place Value" },
-                  { value: "heaven-earth", label: "Heaven-Earth" },
-                  { value: "alternating", label: "Alternating" },
+                  { value: 'monochrome', label: 'Monochrome' },
+                  { value: 'place-value', label: 'Place Value' },
+                  { value: 'heaven-earth', label: 'Heaven-Earth' },
+                  { value: 'alternating', label: 'Alternating' },
                 ]}
                 isFullscreen={isFullscreen}
                 isDark={isDark}
@@ -224,20 +178,14 @@ export function AbacusDisplayDropdown({
             </FormField>
 
             {/* Bead Shape */}
-            <FormField
-              label="Bead Shape"
-              isFullscreen={isFullscreen}
-              isDark={isDark}
-            >
+            <FormField label="Bead Shape" isFullscreen={isFullscreen} isDark={isDark}>
               <RadioGroupField
                 value={config.beadShape}
-                onValueChange={(value) =>
-                  updateConfig({ beadShape: value as BeadShape })
-                }
+                onValueChange={(value) => updateConfig({ beadShape: value as BeadShape })}
                 options={[
-                  { value: "diamond", label: "💎 Diamond" },
-                  { value: "circle", label: "⭕ Circle" },
-                  { value: "square", label: "⬜ Square" },
+                  { value: 'diamond', label: '💎 Diamond' },
+                  { value: 'circle', label: '⭕ Circle' },
+                  { value: 'square', label: '⬜ Square' },
                 ]}
                 isFullscreen={isFullscreen}
                 isDark={isDark}
@@ -245,47 +193,29 @@ export function AbacusDisplayDropdown({
             </FormField>
 
             {/* Toggle Options */}
-            <div className={stack({ gap: "4" })}>
-              <FormField
-                label="Hide Inactive Beads"
-                isFullscreen={isFullscreen}
-                isDark={isDark}
-              >
+            <div className={stack({ gap: '4' })}>
+              <FormField label="Hide Inactive Beads" isFullscreen={isFullscreen} isDark={isDark}>
                 <SwitchField
                   checked={config.hideInactiveBeads}
-                  onCheckedChange={(checked) =>
-                    updateConfig({ hideInactiveBeads: checked })
-                  }
+                  onCheckedChange={(checked) => updateConfig({ hideInactiveBeads: checked })}
                   isFullscreen={isFullscreen}
                   isDark={isDark}
                 />
               </FormField>
 
-              <FormField
-                label="Colored Numerals"
-                isFullscreen={isFullscreen}
-                isDark={isDark}
-              >
+              <FormField label="Colored Numerals" isFullscreen={isFullscreen} isDark={isDark}>
                 <SwitchField
                   checked={config.coloredNumerals}
-                  onCheckedChange={(checked) =>
-                    updateConfig({ coloredNumerals: checked })
-                  }
+                  onCheckedChange={(checked) => updateConfig({ coloredNumerals: checked })}
                   isFullscreen={isFullscreen}
                   isDark={isDark}
                 />
               </FormField>
 
-              <FormField
-                label="Sound Effects"
-                isFullscreen={isFullscreen}
-                isDark={isDark}
-              >
+              <FormField label="Sound Effects" isFullscreen={isFullscreen} isDark={isDark}>
                 <SwitchField
                   checked={config.soundEnabled}
-                  onCheckedChange={(checked) =>
-                    updateConfig({ soundEnabled: checked })
-                  }
+                  onCheckedChange={(checked) => updateConfig({ soundEnabled: checked })}
                   isFullscreen={isFullscreen}
                   isDark={isDark}
                 />
@@ -303,45 +233,43 @@ export function AbacusDisplayDropdown({
                     max="1"
                     step="0.1"
                     value={config.soundVolume}
-                    onChange={(e) =>
-                      updateConfig({ soundVolume: parseFloat(e.target.value) })
-                    }
+                    onChange={(e) => updateConfig({ soundVolume: parseFloat(e.target.value) })}
                     className={css({
-                      w: "full",
-                      h: "2",
+                      w: 'full',
+                      h: '2',
                       bg: isFullscreen
-                        ? "rgba(255, 255, 255, 0.2)"
+                        ? 'rgba(255, 255, 255, 0.2)'
                         : isDark
-                          ? "gray.700"
-                          : "gray.200",
-                      rounded: "full",
-                      appearance: "none",
-                      cursor: "pointer",
+                          ? 'gray.700'
+                          : 'gray.200',
+                      rounded: 'full',
+                      appearance: 'none',
+                      cursor: 'pointer',
                       _focusVisible: {
-                        outline: "none",
-                        ring: "2px",
-                        ringColor: isFullscreen ? "blue.400" : "brand.500",
+                        outline: 'none',
+                        ring: '2px',
+                        ringColor: isFullscreen ? 'blue.400' : 'brand.500',
                       },
-                      "&::-webkit-slider-thumb": {
-                        appearance: "none",
-                        w: "4",
-                        h: "4",
-                        bg: isFullscreen ? "blue.400" : "brand.600",
-                        rounded: "full",
-                        cursor: "pointer",
-                        transition: "all",
+                      '&::-webkit-slider-thumb': {
+                        appearance: 'none',
+                        w: '4',
+                        h: '4',
+                        bg: isFullscreen ? 'blue.400' : 'brand.600',
+                        rounded: 'full',
+                        cursor: 'pointer',
+                        transition: 'all',
                         _hover: {
-                          bg: isFullscreen ? "blue.500" : "brand.700",
-                          transform: "scale(1.1)",
+                          bg: isFullscreen ? 'blue.500' : 'brand.700',
+                          transform: 'scale(1.1)',
                         },
                       },
-                      "&::-moz-range-thumb": {
-                        w: "4",
-                        h: "4",
-                        bg: isFullscreen ? "blue.400" : "brand.600",
-                        rounded: "full",
-                        border: "none",
-                        cursor: "pointer",
+                      '&::-moz-range-thumb': {
+                        w: '4',
+                        h: '4',
+                        bg: isFullscreen ? 'blue.400' : 'brand.600',
+                        rounded: 'full',
+                        border: 'none',
+                        cursor: 'pointer',
                       },
                     })}
                     onClick={(e) => e.stopPropagation()} // Prevent dropdown close
@@ -349,11 +277,7 @@ export function AbacusDisplayDropdown({
                 </FormField>
               )}
 
-              <FormField
-                label="Native Abacus Numbers"
-                isFullscreen={isFullscreen}
-                isDark={isDark}
-              >
+              <FormField label="Native Abacus Numbers" isFullscreen={isFullscreen} isDark={isDark}>
                 <SwitchField
                   checked={abacusSettings?.nativeAbacusNumbers ?? false}
                   onCheckedChange={(checked) =>
@@ -368,7 +292,7 @@ export function AbacusDisplayDropdown({
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>
-  );
+  )
 }
 
 // Helper Components (simplified versions of StyleControls components)
@@ -378,25 +302,25 @@ function FormField({
   isFullscreen = false,
   isDark = false,
 }: {
-  label: string;
-  children: React.ReactNode;
-  isFullscreen?: boolean;
-  isDark?: boolean;
+  label: string
+  children: React.ReactNode
+  isFullscreen?: boolean
+  isDark?: boolean
 }) {
   return (
-    <div className={stack({ gap: "2" })}>
+    <div className={stack({ gap: '2' })}>
       <Label.Root
         className={css({
-          fontSize: "sm",
-          fontWeight: "medium",
-          color: isFullscreen ? "white" : isDark ? "gray.100" : "gray.900",
+          fontSize: 'sm',
+          fontWeight: 'medium',
+          color: isFullscreen ? 'white' : isDark ? 'gray.100' : 'gray.900',
         })}
       >
         {label}
       </Label.Root>
       {children}
     </div>
-  );
+  )
 }
 
 function SwitchField({
@@ -405,60 +329,60 @@ function SwitchField({
   isFullscreen = false,
   isDark = false,
 }: {
-  checked: boolean;
-  onCheckedChange: (checked: boolean) => void;
-  isFullscreen?: boolean;
-  isDark?: boolean;
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+  isFullscreen?: boolean
+  isDark?: boolean
 }) {
   return (
     <Switch.Root
       checked={checked}
       onCheckedChange={onCheckedChange}
       className={css({
-        w: "11",
-        h: "6",
+        w: '11',
+        h: '6',
         bg: checked
           ? isFullscreen
-            ? "blue.500"
-            : "brand.600"
+            ? 'blue.500'
+            : 'brand.600'
           : isFullscreen
-            ? "rgba(255, 255, 255, 0.2)"
+            ? 'rgba(255, 255, 255, 0.2)'
             : isDark
-              ? "gray.700"
-              : "gray.300",
-        rounded: "full",
-        position: "relative",
-        transition: "all",
-        cursor: "pointer",
+              ? 'gray.700'
+              : 'gray.300',
+        rounded: 'full',
+        position: 'relative',
+        transition: 'all',
+        cursor: 'pointer',
         _hover: {
           bg: checked
             ? isFullscreen
-              ? "blue.600"
-              : "brand.700"
+              ? 'blue.600'
+              : 'brand.700'
             : isFullscreen
-              ? "rgba(255, 255, 255, 0.3)"
+              ? 'rgba(255, 255, 255, 0.3)'
               : isDark
-                ? "gray.600"
-                : "gray.400",
+                ? 'gray.600'
+                : 'gray.400',
         },
       })}
       onClick={(e) => e.stopPropagation()} // Prevent dropdown close only on the switch itself
     >
       <Switch.Thumb
         className={css({
-          display: "block",
-          w: "5",
-          h: "5",
-          bg: "white",
-          rounded: "full",
-          shadow: "sm",
-          transition: "transform 0.2s",
-          transform: checked ? "translateX(20px)" : "translateX(0px)",
-          willChange: "transform",
+          display: 'block',
+          w: '5',
+          h: '5',
+          bg: 'white',
+          rounded: 'full',
+          shadow: 'sm',
+          transition: 'transform 0.2s',
+          transform: checked ? 'translateX(20px)' : 'translateX(0px)',
+          willChange: 'transform',
         })}
       />
     </Switch.Root>
-  );
+  )
 }
 
 function RadioGroupField({
@@ -468,73 +392,62 @@ function RadioGroupField({
   isFullscreen = false,
   isDark = false,
 }: {
-  value: string;
-  onValueChange: (value: string) => void;
-  options: Array<{ value: string; label: string }>;
-  isFullscreen?: boolean;
-  isDark?: boolean;
+  value: string
+  onValueChange: (value: string) => void
+  options: Array<{ value: string; label: string }>
+  isFullscreen?: boolean
+  isDark?: boolean
 }) {
   return (
-    <RadioGroup.Root
-      value={value}
-      onValueChange={onValueChange}
-      className={stack({ gap: "2" })}
-    >
+    <RadioGroup.Root value={value} onValueChange={onValueChange} className={stack({ gap: '2' })}>
       {options.map((option) => (
-        <div
-          key={option.value}
-          className={hstack({ gap: "3", alignItems: "center" })}
-        >
+        <div key={option.value} className={hstack({ gap: '3', alignItems: 'center' })}>
           <RadioGroup.Item
             value={option.value}
             className={css({
-              w: "4",
-              h: "4",
-              rounded: "full",
-              border: "2px solid",
+              w: '4',
+              h: '4',
+              rounded: 'full',
+              border: '2px solid',
               borderColor: isFullscreen
-                ? "rgba(255, 255, 255, 0.3)"
+                ? 'rgba(255, 255, 255, 0.3)'
                 : isDark
-                  ? "gray.600"
-                  : "gray.300",
-              bg: isFullscreen
-                ? "rgba(255, 255, 255, 0.1)"
-                : isDark
-                  ? "gray.800"
-                  : "white",
-              cursor: "pointer",
-              transition: "all",
-              _hover: { borderColor: isFullscreen ? "blue.400" : "brand.400" },
-              "&[data-state=checked]": {
-                borderColor: isFullscreen ? "blue.500" : "brand.600",
+                  ? 'gray.600'
+                  : 'gray.300',
+              bg: isFullscreen ? 'rgba(255, 255, 255, 0.1)' : isDark ? 'gray.800' : 'white',
+              cursor: 'pointer',
+              transition: 'all',
+              _hover: { borderColor: isFullscreen ? 'blue.400' : 'brand.400' },
+              '&[data-state=checked]': {
+                borderColor: isFullscreen ? 'blue.500' : 'brand.600',
               },
             })}
             onClick={(e) => e.stopPropagation()} // Prevent dropdown close only on radio button
           >
             <RadioGroup.Indicator
               className={css({
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                w: "full",
-                h: "full",
-                position: "relative",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                w: 'full',
+                h: 'full',
+                position: 'relative',
                 _after: {
                   content: '""',
-                  display: "block",
-                  w: "1.5",
-                  h: "1.5",
-                  rounded: "full",
-                  bg: isFullscreen ? "blue.400" : "brand.600",
+                  display: 'block',
+                  w: '1.5',
+                  h: '1.5',
+                  rounded: 'full',
+                  bg: isFullscreen ? 'blue.400' : 'brand.600',
                 },
               })}
             />
           </RadioGroup.Item>
           <label
             className={css({
-              fontSize: "sm",
-              color: isFullscreen ? "white" : isDark ? "gray.200" : "gray.900",
-              cursor: "pointer",
+              fontSize: 'sm',
+              color: isFullscreen ? 'white' : isDark ? 'gray.200' : 'gray.900',
+              cursor: 'pointer',
               flex: 1,
             })}
             onClick={(e) => e.stopPropagation()} // Prevent dropdown close on label click too
@@ -544,5 +457,5 @@ function RadioGroupField({
         </div>
       ))}
     </RadioGroup.Root>
-  );
+  )
 }
diff --git a/apps/web/src/components/AbacusSettingsSync.tsx b/apps/web/src/components/AbacusSettingsSync.tsx
index 08745819..6c821266 100644
--- a/apps/web/src/components/AbacusSettingsSync.tsx
+++ b/apps/web/src/components/AbacusSettingsSync.tsx
@@ -1,11 +1,8 @@
-"use client";
+'use client'
 
-import { useAbacusDisplay } from "@soroban/abacus-react";
-import { useEffect, useRef } from "react";
-import {
-  useAbacusSettings,
-  useUpdateAbacusSettings,
-} from "@/hooks/useAbacusSettings";
+import { useAbacusDisplay } from '@soroban/abacus-react'
+import { useEffect, useRef } from 'react'
+import { useAbacusSettings, useUpdateAbacusSettings } from '@/hooks/useAbacusSettings'
 
 /**
  * Syncs abacus settings between API and localStorage
@@ -16,38 +13,38 @@ import {
  * This component should be rendered once at the app root level.
  */
 export function AbacusSettingsSync() {
-  const { config, updateConfig } = useAbacusDisplay();
-  const { data: apiSettings, isLoading } = useAbacusSettings();
-  const { mutate: updateApiSettings } = useUpdateAbacusSettings();
-  const isInitializedRef = useRef(false);
-  const lastSyncedConfigRef = useRef<string | null>(null);
+  const { config, updateConfig } = useAbacusDisplay()
+  const { data: apiSettings, isLoading } = useAbacusSettings()
+  const { mutate: updateApiSettings } = useUpdateAbacusSettings()
+  const isInitializedRef = useRef(false)
+  const lastSyncedConfigRef = useRef<string | null>(null)
 
   // On mount: load settings from API into context (which will trigger localStorage save)
   useEffect(() => {
     if (!isLoading && apiSettings && !isInitializedRef.current) {
       // Only update if API settings differ from current config
-      const apiConfigJson = JSON.stringify(apiSettings);
-      const currentConfigJson = JSON.stringify(config);
+      const apiConfigJson = JSON.stringify(apiSettings)
+      const currentConfigJson = JSON.stringify(config)
 
       if (apiConfigJson !== currentConfigJson) {
-        console.log("💾 Loading abacus settings from API");
-        updateConfig(apiSettings);
-        lastSyncedConfigRef.current = apiConfigJson;
+        console.log('💾 Loading abacus settings from API')
+        updateConfig(apiSettings)
+        lastSyncedConfigRef.current = apiConfigJson
       }
 
-      isInitializedRef.current = true;
+      isInitializedRef.current = true
     }
-  }, [apiSettings, isLoading, config, updateConfig]);
+  }, [apiSettings, isLoading, config, updateConfig])
 
   // On config change: save to API (but skip the initial load to avoid race conditions)
   useEffect(() => {
-    if (!isInitializedRef.current) return;
+    if (!isInitializedRef.current) return
 
-    const configJson = JSON.stringify(config);
+    const configJson = JSON.stringify(config)
 
     // Only sync if config has changed since last sync
     if (configJson !== lastSyncedConfigRef.current) {
-      console.log("🔄 Syncing abacus settings to API");
+      console.log('🔄 Syncing abacus settings to API')
 
       // Only sync abacus-react config fields, not app-specific fields like nativeAbacusNumbers
       const abacusReactFields = {
@@ -63,12 +60,12 @@ export function AbacusSettingsSync() {
         gestures: config.gestures,
         soundEnabled: config.soundEnabled,
         soundVolume: config.soundVolume,
-      };
+      }
 
-      updateApiSettings(abacusReactFields);
-      lastSyncedConfigRef.current = configJson;
+      updateApiSettings(abacusReactFields)
+      lastSyncedConfigRef.current = configJson
     }
-  }, [config, updateApiSettings]);
+  }, [config, updateApiSettings])
 
-  return null;
+  return null
 }
diff --git a/apps/web/src/components/AppNavBar.tsx b/apps/web/src/components/AppNavBar.tsx
index b3f03467..aa03176d 100644
--- a/apps/web/src/components/AppNavBar.tsx
+++ b/apps/web/src/components/AppNavBar.tsx
@@ -1,49 +1,48 @@
-"use client";
+'use client'
 
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import * as Tooltip from "@radix-ui/react-tooltip";
-import Link from "next/link";
-import { usePathname, useRouter } from "next/navigation";
-import React, { useContext, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
-import { css } from "../../styled-system/css";
-import { container, hstack } from "../../styled-system/patterns";
-import { Z_INDEX } from "../constants/zIndex";
-import { useFullscreen } from "../contexts/FullscreenContext";
-import { useTheme } from "../contexts/ThemeContext";
-import { getRandomSubtitle } from "../data/abaciOneSubtitles";
-import { AbacusDisplayDropdown } from "./AbacusDisplayDropdown";
-import { LanguageSelector } from "./LanguageSelector";
-import { ThemeToggle } from "./ThemeToggle";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import Link from 'next/link'
+import { usePathname, useRouter } from 'next/navigation'
+import React, { useContext, useMemo, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { css } from '../../styled-system/css'
+import { container, hstack } from '../../styled-system/patterns'
+import { Z_INDEX } from '../constants/zIndex'
+import { useFullscreen } from '../contexts/FullscreenContext'
+import { useTheme } from '../contexts/ThemeContext'
+import { getRandomSubtitle } from '../data/abaciOneSubtitles'
+import { AbacusDisplayDropdown } from './AbacusDisplayDropdown'
+import { LanguageSelector } from './LanguageSelector'
+import { ThemeToggle } from './ThemeToggle'
 
 // Import HomeHeroContext for optional usage
-import type { Subtitle } from "../data/abaciOneSubtitles";
+import type { Subtitle } from '../data/abaciOneSubtitles'
 
 type HomeHeroContextValue = {
-  subtitle: Subtitle;
-  isHeroVisible: boolean;
-} | null;
+  subtitle: Subtitle
+  isHeroVisible: boolean
+} | null
 
 // HomeHeroContext - imported dynamically to avoid circular deps
-let HomeHeroContextModule: any = null;
+let HomeHeroContextModule: any = null
 try {
-  HomeHeroContextModule = require("../contexts/HomeHeroContext");
+  HomeHeroContextModule = require('../contexts/HomeHeroContext')
 } catch {
   // Context not available
 }
 
 const HomeHeroContext: React.Context<HomeHeroContextValue> =
-  HomeHeroContextModule?.HomeHeroContext ||
-  React.createContext<HomeHeroContextValue>(null);
+  HomeHeroContextModule?.HomeHeroContext || React.createContext<HomeHeroContextValue>(null)
 
 // Use HomeHeroContext without requiring it
 function useOptionalHomeHero(): HomeHeroContextValue {
-  return useContext(HomeHeroContext);
+  return useContext(HomeHeroContext)
 }
 
 interface AppNavBarProps {
-  variant?: "full" | "minimal";
-  navSlot?: React.ReactNode;
+  variant?: 'full' | 'minimal'
+  navSlot?: React.ReactNode
 }
 
 /**
@@ -61,54 +60,54 @@ function MenuContent({
   isMobile,
   resolvedTheme,
 }: {
-  isFullscreen: boolean;
-  isArcadePage: boolean;
-  pathname: string | null;
-  toggleFullscreen: () => void;
-  router: any;
-  onNavigate?: () => void;
-  handleNestedDropdownChange?: (isOpen: boolean) => void;
-  isMobile?: boolean;
-  resolvedTheme?: "light" | "dark";
+  isFullscreen: boolean
+  isArcadePage: boolean
+  pathname: string | null
+  toggleFullscreen: () => void
+  router: any
+  onNavigate?: () => void
+  handleNestedDropdownChange?: (isOpen: boolean) => void
+  isMobile?: boolean
+  resolvedTheme?: 'light' | 'dark'
 }) {
-  const isDark = resolvedTheme === "dark";
+  const isDark = resolvedTheme === 'dark'
 
   const linkStyle = {
-    display: "flex",
-    alignItems: "center",
-    gap: isMobile ? "10px" : "10px",
-    padding: isMobile ? "8px 12px" : "10px 14px",
-    borderRadius: "8px",
-    color: isDark ? "rgba(209, 213, 219, 1)" : "rgba(55, 65, 81, 1)",
-    fontSize: isMobile ? "14px" : "14px",
-    fontWeight: "500",
-    textDecoration: "none",
-    transition: "all 0.2s ease",
-  };
+    display: 'flex',
+    alignItems: 'center',
+    gap: isMobile ? '10px' : '10px',
+    padding: isMobile ? '8px 12px' : '10px 14px',
+    borderRadius: '8px',
+    color: isDark ? 'rgba(209, 213, 219, 1)' : 'rgba(55, 65, 81, 1)',
+    fontSize: isMobile ? '14px' : '14px',
+    fontWeight: '500',
+    textDecoration: 'none',
+    transition: 'all 0.2s ease',
+  }
 
   const separatorStyle = {
-    height: "1px",
-    background: isDark ? "rgba(75, 85, 99, 0.5)" : "rgba(229, 231, 235, 0.8)",
-    margin: isMobile ? "8px 0" : "6px 0",
-  };
+    height: '1px',
+    background: isDark ? 'rgba(75, 85, 99, 0.5)' : 'rgba(229, 231, 235, 0.8)',
+    margin: isMobile ? '8px 0' : '6px 0',
+  }
 
   const sectionHeaderStyle = {
-    fontSize: isMobile ? "10px" : "10px",
-    fontWeight: "600",
-    color: isDark ? "rgba(196, 181, 253, 0.7)" : "rgba(139, 92, 246, 0.7)",
-    marginBottom: isMobile ? "6px" : "6px",
-    marginLeft: isMobile ? "12px" : "12px",
-    marginTop: isMobile ? "6px" : "6px",
-    textTransform: "uppercase" as const,
-    letterSpacing: "0.5px",
-  };
+    fontSize: isMobile ? '10px' : '10px',
+    fontWeight: '600',
+    color: isDark ? 'rgba(196, 181, 253, 0.7)' : 'rgba(139, 92, 246, 0.7)',
+    marginBottom: isMobile ? '6px' : '6px',
+    marginLeft: isMobile ? '12px' : '12px',
+    marginTop: isMobile ? '6px' : '6px',
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.5px',
+  }
 
   const handleLinkClick = (href: string) => {
     if (isMobile) {
-      router.push(href);
-      onNavigate?.();
+      router.push(href)
+      onNavigate?.()
     }
-  };
+  }
 
   const renderNavLink = (href: string, icon: string, label: string) => {
     const linkElement = (
@@ -117,85 +116,77 @@ function MenuContent({
         onClick={
           isMobile
             ? (e) => {
-                e.preventDefault();
-                handleLinkClick(href);
+                e.preventDefault()
+                handleLinkClick(href)
               }
             : undefined
         }
         style={linkStyle}
         onMouseEnter={(e) => {
           e.currentTarget.style.background = isDark
-            ? "rgba(139, 92, 246, 0.2)"
-            : "rgba(139, 92, 246, 0.1)";
-          e.currentTarget.style.color = isDark
-            ? "rgba(196, 181, 253, 1)"
-            : "rgba(109, 40, 217, 1)";
+            ? 'rgba(139, 92, 246, 0.2)'
+            : 'rgba(139, 92, 246, 0.1)'
+          e.currentTarget.style.color = isDark ? 'rgba(196, 181, 253, 1)' : 'rgba(109, 40, 217, 1)'
         }}
         onMouseLeave={(e) => {
-          e.currentTarget.style.background = "transparent";
-          e.currentTarget.style.color = isDark
-            ? "rgba(209, 213, 219, 1)"
-            : "rgba(55, 65, 81, 1)";
+          e.currentTarget.style.background = 'transparent'
+          e.currentTarget.style.color = isDark ? 'rgba(209, 213, 219, 1)' : 'rgba(55, 65, 81, 1)'
         }}
       >
-        <span style={{ fontSize: isMobile ? "18px" : "16px" }}>{icon}</span>
+        <span style={{ fontSize: isMobile ? '18px' : '16px' }}>{icon}</span>
         <span>{label}</span>
       </Link>
-    );
+    )
 
-    return isMobile ? (
-      linkElement
-    ) : (
-      <DropdownMenu.Item asChild>{linkElement}</DropdownMenu.Item>
-    );
-  };
+    return isMobile ? linkElement : <DropdownMenu.Item asChild>{linkElement}</DropdownMenu.Item>
+  }
 
   const containerStyle = isMobile
     ? {
-        width: "100%",
-        maxWidth: "1000px",
-        margin: "0 auto",
-        padding: "60px 16px 16px",
-        boxSizing: "border-box" as const,
+        width: '100%',
+        maxWidth: '1000px',
+        margin: '0 auto',
+        padding: '60px 16px 16px',
+        boxSizing: 'border-box' as const,
         minHeight: 0, // Allow flex children to shrink
-        flex: "1 1 auto",
-        display: "flex",
-        flexDirection: "column" as const,
+        flex: '1 1 auto',
+        display: 'flex',
+        flexDirection: 'column' as const,
       }
-    : {};
+    : {}
 
   const controlButtonStyle = {
-    display: "flex",
-    alignItems: "center",
-    gap: isMobile ? "10px" : "10px",
-    padding: isMobile ? "8px 12px" : "10px 14px",
-    borderRadius: "8px",
-    color: isDark ? "rgba(209, 213, 219, 1)" : "rgba(55, 65, 81, 1)",
-    fontSize: isMobile ? "14px" : "14px",
-    fontWeight: "500",
-    cursor: "pointer",
-    transition: "all 0.2s ease",
-  };
+    display: 'flex',
+    alignItems: 'center',
+    gap: isMobile ? '10px' : '10px',
+    padding: isMobile ? '8px 12px' : '10px 14px',
+    borderRadius: '8px',
+    color: isDark ? 'rgba(209, 213, 219, 1)' : 'rgba(55, 65, 81, 1)',
+    fontSize: isMobile ? '14px' : '14px',
+    fontWeight: '500',
+    cursor: 'pointer',
+    transition: 'all 0.2s ease',
+  }
 
   return (
     <div style={containerStyle}>
       {isMobile ? (
         <div
           className={css({
-            display: "grid",
-            gridTemplateColumns: "1fr",
-            gap: "16px",
+            display: 'grid',
+            gridTemplateColumns: '1fr',
+            gap: '16px',
             minHeight: 0, // Allow grid to shrink
-            flex: "1 1 auto",
-            alignContent: "start",
-            overflowY: "auto",
-            "@media (min-width: 480px) and (orientation: landscape)": {
-              gridTemplateColumns: "repeat(2, 1fr)",
-              gap: "20px",
-              gridTemplateRows: "min-content",
+            flex: '1 1 auto',
+            alignContent: 'start',
+            overflowY: 'auto',
+            '@media (min-width: 480px) and (orientation: landscape)': {
+              gridTemplateColumns: 'repeat(2, 1fr)',
+              gap: '20px',
+              gridTemplateRows: 'min-content',
             },
-            "@media (max-height: 600px)": {
-              gap: "8px",
+            '@media (max-height: 600px)': {
+              gap: '8px',
             },
           })}
         >
@@ -204,11 +195,11 @@ function MenuContent({
             {/* Site Navigation Section */}
             <div style={sectionHeaderStyle}>Navigation</div>
 
-            {renderNavLink("/", "🧮", "Home")}
-            {renderNavLink("/create", "✏️", "Create")}
-            {renderNavLink("/guide", "📖", "Guide")}
-            {renderNavLink("/games", "🎮", "Games")}
-            {renderNavLink("/blog", "📝", "Blog")}
+            {renderNavLink('/', '🧮', 'Home')}
+            {renderNavLink('/create', '✏️', 'Create')}
+            {renderNavLink('/guide', '📖', 'Guide')}
+            {renderNavLink('/games', '🎮', 'Games')}
+            {renderNavLink('/blog', '📝', 'Blog')}
 
             <div style={separatorStyle} />
 
@@ -217,56 +208,52 @@ function MenuContent({
 
             <div
               onClick={() => {
-                toggleFullscreen();
-                onNavigate?.();
+                toggleFullscreen()
+                onNavigate?.()
               }}
               style={controlButtonStyle}
               onMouseEnter={(e) => {
                 e.currentTarget.style.background = isDark
-                  ? "rgba(59, 130, 246, 0.2)"
-                  : "rgba(59, 130, 246, 0.1)";
+                  ? 'rgba(59, 130, 246, 0.2)'
+                  : 'rgba(59, 130, 246, 0.1)'
                 e.currentTarget.style.color = isDark
-                  ? "rgba(147, 197, 253, 1)"
-                  : "rgba(29, 78, 216, 1)";
+                  ? 'rgba(147, 197, 253, 1)'
+                  : 'rgba(29, 78, 216, 1)'
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.background = "transparent";
+                e.currentTarget.style.background = 'transparent'
                 e.currentTarget.style.color = isDark
-                  ? "rgba(209, 213, 219, 1)"
-                  : "rgba(55, 65, 81, 1)";
+                  ? 'rgba(209, 213, 219, 1)'
+                  : 'rgba(55, 65, 81, 1)'
               }}
             >
-              <span style={{ fontSize: "18px" }}>
-                {isFullscreen ? "🪟" : "⛶"}
-              </span>
-              <span>
-                {isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
-              </span>
+              <span style={{ fontSize: '18px' }}>{isFullscreen ? '🪟' : '⛶'}</span>
+              <span>{isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}</span>
             </div>
 
             {isArcadePage && (
               <div
                 onClick={() => {
-                  router.push("/games");
-                  onNavigate?.();
+                  router.push('/games')
+                  onNavigate?.()
                 }}
                 style={controlButtonStyle}
                 onMouseEnter={(e) => {
                   e.currentTarget.style.background = isDark
-                    ? "rgba(239, 68, 68, 0.2)"
-                    : "rgba(239, 68, 68, 0.1)";
+                    ? 'rgba(239, 68, 68, 0.2)'
+                    : 'rgba(239, 68, 68, 0.1)'
                   e.currentTarget.style.color = isDark
-                    ? "rgba(252, 165, 165, 1)"
-                    : "rgba(185, 28, 28, 1)";
+                    ? 'rgba(252, 165, 165, 1)'
+                    : 'rgba(185, 28, 28, 1)'
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.background = "transparent";
+                  e.currentTarget.style.background = 'transparent'
                   e.currentTarget.style.color = isDark
-                    ? "rgba(209, 213, 219, 1)"
-                    : "rgba(55, 65, 81, 1)";
+                    ? 'rgba(209, 213, 219, 1)'
+                    : 'rgba(55, 65, 81, 1)'
                 }}
               >
-                <span style={{ fontSize: "18px" }}>🚪</span>
+                <span style={{ fontSize: '18px' }}>🚪</span>
                 <span>Exit Arcade</span>
               </div>
             )}
@@ -277,7 +264,7 @@ function MenuContent({
             {/* Style Section */}
             <div style={sectionHeaderStyle}>Abacus Style</div>
 
-            <div style={{ padding: "0 6px" }}>
+            <div style={{ padding: '0 6px' }}>
               <AbacusDisplayDropdown
                 isFullscreen={isFullscreen}
                 onOpenChange={handleNestedDropdownChange}
@@ -289,17 +276,14 @@ function MenuContent({
             {/* Language Section */}
             <div style={sectionHeaderStyle}>Language</div>
 
-            <LanguageSelector
-              variant="dropdown-item"
-              isFullscreen={isFullscreen}
-            />
+            <LanguageSelector variant="dropdown-item" isFullscreen={isFullscreen} />
 
             <div style={separatorStyle} />
 
             {/* Theme Section */}
             <div style={sectionHeaderStyle}>Theme</div>
 
-            <div style={{ padding: "0 6px" }}>
+            <div style={{ padding: '0 6px' }}>
               <ThemeToggle />
             </div>
           </div>
@@ -310,11 +294,11 @@ function MenuContent({
           {/* Site Navigation Section */}
           <div style={sectionHeaderStyle}>Navigation</div>
 
-          {renderNavLink("/", "🧮", "Home")}
-          {renderNavLink("/create", "✏️", "Create")}
-          {renderNavLink("/guide", "📖", "Guide")}
-          {renderNavLink("/games", "🎮", "Games")}
-          {renderNavLink("/blog", "📝", "Blog")}
+          {renderNavLink('/', '🧮', 'Home')}
+          {renderNavLink('/create', '✏️', 'Create')}
+          {renderNavLink('/guide', '📖', 'Guide')}
+          {renderNavLink('/games', '🎮', 'Games')}
+          {renderNavLink('/blog', '📝', 'Blog')}
 
           <DropdownMenu.Separator style={separatorStyle} />
 
@@ -326,45 +310,43 @@ function MenuContent({
             style={controlButtonStyle}
             onMouseEnter={(e) => {
               e.currentTarget.style.background = isDark
-                ? "rgba(59, 130, 246, 0.2)"
-                : "rgba(59, 130, 246, 0.1)";
+                ? 'rgba(59, 130, 246, 0.2)'
+                : 'rgba(59, 130, 246, 0.1)'
               e.currentTarget.style.color = isDark
-                ? "rgba(147, 197, 253, 1)"
-                : "rgba(29, 78, 216, 1)";
+                ? 'rgba(147, 197, 253, 1)'
+                : 'rgba(29, 78, 216, 1)'
             }}
             onMouseLeave={(e) => {
-              e.currentTarget.style.background = "transparent";
+              e.currentTarget.style.background = 'transparent'
               e.currentTarget.style.color = isDark
-                ? "rgba(209, 213, 219, 1)"
-                : "rgba(55, 65, 81, 1)";
+                ? 'rgba(209, 213, 219, 1)'
+                : 'rgba(55, 65, 81, 1)'
             }}
           >
-            <span style={{ fontSize: "16px" }}>
-              {isFullscreen ? "🪟" : "⛶"}
-            </span>
-            <span>{isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}</span>
+            <span style={{ fontSize: '16px' }}>{isFullscreen ? '🪟' : '⛶'}</span>
+            <span>{isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}</span>
           </DropdownMenu.Item>
 
           {isArcadePage && (
             <DropdownMenu.Item
-              onSelect={() => router.push("/games")}
+              onSelect={() => router.push('/games')}
               style={controlButtonStyle}
               onMouseEnter={(e) => {
                 e.currentTarget.style.background = isDark
-                  ? "rgba(239, 68, 68, 0.2)"
-                  : "rgba(239, 68, 68, 0.1)";
+                  ? 'rgba(239, 68, 68, 0.2)'
+                  : 'rgba(239, 68, 68, 0.1)'
                 e.currentTarget.style.color = isDark
-                  ? "rgba(252, 165, 165, 1)"
-                  : "rgba(185, 28, 28, 1)";
+                  ? 'rgba(252, 165, 165, 1)'
+                  : 'rgba(185, 28, 28, 1)'
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.background = "transparent";
+                e.currentTarget.style.background = 'transparent'
                 e.currentTarget.style.color = isDark
-                  ? "rgba(209, 213, 219, 1)"
-                  : "rgba(55, 65, 81, 1)";
+                  ? 'rgba(209, 213, 219, 1)'
+                  : 'rgba(55, 65, 81, 1)'
               }}
             >
-              <span style={{ fontSize: "16px" }}>🚪</span>
+              <span style={{ fontSize: '16px' }}>🚪</span>
               <span>Exit Arcade</span>
             </DropdownMenu.Item>
           )}
@@ -374,7 +356,7 @@ function MenuContent({
           {/* Style Section */}
           <div style={sectionHeaderStyle}>Abacus Style</div>
 
-          <div style={{ padding: "0 6px" }}>
+          <div style={{ padding: '0 6px' }}>
             <AbacusDisplayDropdown
               isFullscreen={isFullscreen}
               onOpenChange={handleNestedDropdownChange}
@@ -386,26 +368,20 @@ function MenuContent({
           {/* Language Section */}
           <div style={sectionHeaderStyle}>Language</div>
 
-          <LanguageSelector
-            variant="dropdown-item"
-            isFullscreen={isFullscreen}
-          />
+          <LanguageSelector variant="dropdown-item" isFullscreen={isFullscreen} />
 
           <DropdownMenu.Separator style={separatorStyle} />
 
           {/* Theme Section */}
           <div style={sectionHeaderStyle}>Theme</div>
 
-          <DropdownMenu.Item
-            onSelect={(e) => e.preventDefault()}
-            style={{ padding: "0 6px" }}
-          >
+          <DropdownMenu.Item onSelect={(e) => e.preventDefault()} style={{ padding: '0 6px' }}>
             <ThemeToggle />
           </DropdownMenu.Item>
         </>
       )}
     </div>
-  );
+  )
 }
 
 function HamburgerMenu({
@@ -415,43 +391,43 @@ function HamburgerMenu({
   toggleFullscreen,
   router,
 }: {
-  isFullscreen: boolean;
-  isArcadePage: boolean;
-  pathname: string | null;
-  toggleFullscreen: () => void;
-  router: any;
+  isFullscreen: boolean
+  isArcadePage: boolean
+  pathname: string | null
+  toggleFullscreen: () => void
+  router: any
 }) {
-  const [open, setOpen] = useState(false);
-  const [nestedDropdownOpen, setNestedDropdownOpen] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
-  const { resolvedTheme } = useTheme();
+  const [open, setOpen] = useState(false)
+  const [nestedDropdownOpen, setNestedDropdownOpen] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
+  const { resolvedTheme } = useTheme()
 
   // Detect mobile viewport - check the smaller dimension to catch landscape orientation
   React.useEffect(() => {
     const checkMobile = () => {
       // Mobile if the smaller dimension is less than 640px (catches both portrait and landscape)
-      const smallerDimension = Math.min(window.innerWidth, window.innerHeight);
-      setIsMobile(smallerDimension < 640);
-    };
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-    return () => window.removeEventListener("resize", checkMobile);
-  }, []);
+      const smallerDimension = Math.min(window.innerWidth, window.innerHeight)
+      setIsMobile(smallerDimension < 640)
+    }
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
 
   // Open on click OR if nested dropdown is open
-  const isOpen = open || nestedDropdownOpen;
+  const isOpen = open || nestedDropdownOpen
 
   const handleOpenChange = (newOpen: boolean) => {
-    setOpen(newOpen);
-  };
+    setOpen(newOpen)
+  }
 
   const handleNestedDropdownChange = (isNestedOpen: boolean) => {
-    setNestedDropdownOpen(isNestedOpen);
-  };
+    setNestedDropdownOpen(isNestedOpen)
+  }
 
   const handleClose = () => {
-    setOpen(false);
-  };
+    setOpen(false)
+  }
 
   // Mobile full-screen menu
   if (isMobile) {
@@ -461,56 +437,54 @@ function HamburgerMenu({
           type="button"
           onClick={() => setOpen(!open)}
           style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "44px",
-            height: "44px",
-            padding: "8px",
-            background: isFullscreen ? "rgba(0, 0, 0, 0.85)" : "white",
-            border: isFullscreen
-              ? "1px solid rgba(255, 255, 255, 0.1)"
-              : "1px solid #e5e7eb",
-            borderRadius: "8px",
-            boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
-            backdropFilter: isFullscreen ? "blur(15px)" : "none",
-            cursor: "pointer",
-            transition: "all 0.2s ease",
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '44px',
+            height: '44px',
+            padding: '8px',
+            background: isFullscreen ? 'rgba(0, 0, 0, 0.85)' : 'white',
+            border: isFullscreen ? '1px solid rgba(255, 255, 255, 0.1)' : '1px solid #e5e7eb',
+            borderRadius: '8px',
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+            backdropFilter: isFullscreen ? 'blur(15px)' : 'none',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
           }}
         >
           <span
             style={{
-              fontSize: "20px",
-              color: isFullscreen ? "white" : "#374151",
+              fontSize: '20px',
+              color: isFullscreen ? 'white' : '#374151',
             }}
           >
-            {open ? "✕" : "☰"}
+            {open ? '✕' : '☰'}
           </span>
         </button>
 
         {open &&
-          typeof document !== "undefined" &&
+          typeof document !== 'undefined' &&
           createPortal(
             <>
               <div
                 className={css({
-                  position: "fixed",
+                  position: 'fixed',
                   inset: 0,
                   background:
-                    resolvedTheme === "dark"
-                      ? "linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))"
-                      : "linear-gradient(135deg, rgba(249, 250, 251, 0.97), rgba(243, 244, 246, 0.97))",
-                  backdropFilter: "blur(12px)",
+                    resolvedTheme === 'dark'
+                      ? 'linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))'
+                      : 'linear-gradient(135deg, rgba(249, 250, 251, 0.97), rgba(243, 244, 246, 0.97))',
+                  backdropFilter: 'blur(12px)',
                   zIndex: Z_INDEX.GAME_NAV.HAMBURGER_MENU,
-                  display: "flex",
-                  flexDirection: "column",
+                  display: 'flex',
+                  flexDirection: 'column',
                   minHeight: 0,
-                  animation: "mobileMenuFadeIn 0.2s ease-out",
+                  animation: 'mobileMenuFadeIn 0.2s ease-out',
                 })}
                 onClick={(e) => {
                   // Close if clicking the backdrop
                   if (e.target === e.currentTarget) {
-                    handleClose();
+                    handleClose()
                   }
                 }}
               >
@@ -519,41 +493,35 @@ function HamburgerMenu({
                   type="button"
                   onClick={handleClose}
                   className={css({
-                    position: "fixed",
-                    top: "16px",
-                    right: "16px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: "44px",
-                    height: "44px",
-                    padding: "8px",
-                    background:
-                      resolvedTheme === "dark"
-                        ? "rgba(31, 41, 55, 0.9)"
-                        : "white",
+                    position: 'fixed',
+                    top: '16px',
+                    right: '16px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '44px',
+                    height: '44px',
+                    padding: '8px',
+                    background: resolvedTheme === 'dark' ? 'rgba(31, 41, 55, 0.9)' : 'white',
                     border:
-                      resolvedTheme === "dark"
-                        ? "1px solid rgba(255, 255, 255, 0.1)"
-                        : "1px solid #e5e7eb",
-                    borderRadius: "8px",
-                    boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
-                    cursor: "pointer",
-                    transition: "all 0.2s ease",
+                      resolvedTheme === 'dark'
+                        ? '1px solid rgba(255, 255, 255, 0.1)'
+                        : '1px solid #e5e7eb',
+                    borderRadius: '8px',
+                    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s ease',
                     zIndex: 1,
                     _hover: {
-                      background:
-                        resolvedTheme === "dark"
-                          ? "rgba(55, 65, 81, 0.9)"
-                          : "#f9fafb",
+                      background: resolvedTheme === 'dark' ? 'rgba(55, 65, 81, 0.9)' : '#f9fafb',
                     },
                   })}
                   aria-label="Close menu"
                 >
                   <span
                     style={{
-                      fontSize: "20px",
-                      color: resolvedTheme === "dark" ? "white" : "#374151",
+                      fontSize: '20px',
+                      color: resolvedTheme === 'dark' ? 'white' : '#374151',
                     }}
                   >
                     ✕
@@ -588,10 +556,10 @@ function HamburgerMenu({
                 }}
               />
             </>,
-            document.body,
+            document.body
           )}
       </>
-    );
+    )
   }
 
   // Desktop dropdown menu
@@ -601,37 +569,37 @@ function HamburgerMenu({
         <button
           type="button"
           style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "44px",
-            height: "44px",
-            padding: "8px",
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '44px',
+            height: '44px',
+            padding: '8px',
             background: isFullscreen
-              ? "rgba(0, 0, 0, 0.85)"
-              : resolvedTheme === "dark"
-                ? "rgba(31, 41, 55, 0.9)"
-                : "white",
+              ? 'rgba(0, 0, 0, 0.85)'
+              : resolvedTheme === 'dark'
+                ? 'rgba(31, 41, 55, 0.9)'
+                : 'white',
             border: isFullscreen
-              ? "1px solid rgba(255, 255, 255, 0.1)"
-              : resolvedTheme === "dark"
-                ? "1px solid rgba(75, 85, 99, 0.5)"
-                : "1px solid #e5e7eb",
-            borderRadius: "8px",
-            boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
-            backdropFilter: isFullscreen ? "blur(15px)" : "none",
-            cursor: "pointer",
-            transition: "all 0.2s ease",
+              ? '1px solid rgba(255, 255, 255, 0.1)'
+              : resolvedTheme === 'dark'
+                ? '1px solid rgba(75, 85, 99, 0.5)'
+                : '1px solid #e5e7eb',
+            borderRadius: '8px',
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+            backdropFilter: isFullscreen ? 'blur(15px)' : 'none',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
           }}
         >
           <span
             style={{
-              fontSize: "20px",
+              fontSize: '20px',
               color: isFullscreen
-                ? "white"
-                : resolvedTheme === "dark"
-                  ? "rgba(209, 213, 219, 1)"
-                  : "#374151",
+                ? 'white'
+                : resolvedTheme === 'dark'
+                  ? 'rgba(209, 213, 219, 1)'
+                  : '#374151',
             }}
           >
             ☰
@@ -646,29 +614,29 @@ function HamburgerMenu({
           sideOffset={8}
           onInteractOutside={(e) => {
             // Don't close the hamburger menu when clicking inside the nested style dropdown
-            const target = e.target as HTMLElement;
+            const target = e.target as HTMLElement
             if (
               target.closest('[role="dialog"]') ||
-              target.closest("[data-radix-popper-content-wrapper]")
+              target.closest('[data-radix-popper-content-wrapper]')
             ) {
-              e.preventDefault();
+              e.preventDefault()
             }
           }}
           className={css({
             background:
-              resolvedTheme === "dark"
-                ? "linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))"
-                : "linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(249, 250, 251, 0.97))",
-            backdropFilter: "blur(12px)",
-            borderRadius: "12px",
-            padding: "8px",
+              resolvedTheme === 'dark'
+                ? 'linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))'
+                : 'linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(249, 250, 251, 0.97))',
+            backdropFilter: 'blur(12px)',
+            borderRadius: '12px',
+            padding: '8px',
             boxShadow:
-              resolvedTheme === "dark"
-                ? "0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.3)"
-                : "0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(139, 92, 246, 0.2)",
-            minWidth: "220px",
+              resolvedTheme === 'dark'
+                ? '0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.3)'
+                : '0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(139, 92, 246, 0.2)',
+            minWidth: '220px',
             zIndex: Z_INDEX.GAME_NAV.HAMBURGER_MENU,
-            animation: "dropdownFadeIn 0.2s ease-out",
+            animation: 'dropdownFadeIn 0.2s ease-out',
           })}
         >
           <MenuContent
@@ -701,7 +669,7 @@ function HamburgerMenu({
         }}
       />
     </DropdownMenu.Root>
-  );
+  )
 }
 
 /**
@@ -716,39 +684,39 @@ function MinimalNav({
   exitFullscreen,
   router,
 }: {
-  isFullscreen: boolean;
-  isArcadePage: boolean;
-  pathname: string | null;
-  navSlot: React.ReactNode;
-  toggleFullscreen: () => void;
-  exitFullscreen: () => void;
-  router: any;
+  isFullscreen: boolean
+  isArcadePage: boolean
+  pathname: string | null
+  navSlot: React.ReactNode
+  toggleFullscreen: () => void
+  exitFullscreen: () => void
+  router: any
 }) {
   return (
     <header
       style={{
-        position: "fixed",
-        top: "16px",
-        left: "16px",
-        right: "16px",
+        position: 'fixed',
+        top: '16px',
+        left: '16px',
+        right: '16px',
         zIndex: Z_INDEX.NAV_BAR,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "flex-start",
-        pointerEvents: "none",
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'flex-start',
+        pointerEvents: 'none',
         // Set active nav height for content to use
-        ["--app-nav-height" as any]: "var(--app-nav-height-minimal)",
+        ['--app-nav-height' as any]: 'var(--app-nav-height-minimal)',
         // Use the variable for min-height to ensure consistency
-        minHeight: "var(--app-nav-height-minimal)",
+        minHeight: 'var(--app-nav-height-minimal)',
       }}
     >
       {/* Hamburger Menu - positioned absolutely on left */}
       <div
         style={{
-          position: "absolute",
+          position: 'absolute',
           left: 0,
           top: 0,
-          pointerEvents: "auto",
+          pointerEvents: 'auto',
         }}
       >
         <HamburgerMenu
@@ -764,42 +732,40 @@ function MinimalNav({
       {navSlot && (
         <div
           style={{
-            display: "flex",
-            alignItems: "center",
-            gap: "12px",
-            padding: "8px 16px",
-            background: isFullscreen ? "rgba(0, 0, 0, 0.85)" : "white",
-            border: isFullscreen
-              ? "1px solid rgba(255, 255, 255, 0.1)"
-              : "1px solid #e5e7eb",
-            borderRadius: "8px",
-            boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
-            backdropFilter: isFullscreen ? "blur(15px)" : "none",
-            opacity: "0.95",
-            transition: "opacity 0.3s ease",
-            pointerEvents: "auto",
-            maxWidth: "calc(100% - 128px)", // Leave space for hamburger + margin
-            whiteSpace: "nowrap",
-            overflow: "visible",
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            padding: '8px 16px',
+            background: isFullscreen ? 'rgba(0, 0, 0, 0.85)' : 'white',
+            border: isFullscreen ? '1px solid rgba(255, 255, 255, 0.1)' : '1px solid #e5e7eb',
+            borderRadius: '8px',
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+            backdropFilter: isFullscreen ? 'blur(15px)' : 'none',
+            opacity: '0.95',
+            transition: 'opacity 0.3s ease',
+            pointerEvents: 'auto',
+            maxWidth: 'calc(100% - 128px)', // Leave space for hamburger + margin
+            whiteSpace: 'nowrap',
+            overflow: 'visible',
           }}
           onMouseEnter={(e) => {
-            e.currentTarget.style.opacity = "1";
+            e.currentTarget.style.opacity = '1'
           }}
           onMouseLeave={(e) => {
-            e.currentTarget.style.opacity = "0.95";
+            e.currentTarget.style.opacity = '0.95'
           }}
         >
           {navSlot}
           {isFullscreen && (
             <div
               style={{
-                padding: "4px 8px",
-                background: "rgba(34, 197, 94, 0.2)",
-                border: "1px solid rgba(34, 197, 94, 0.3)",
-                borderRadius: "9999px",
-                fontSize: "12px",
-                color: "rgb(134, 239, 172)",
-                fontWeight: "600",
+                padding: '4px 8px',
+                background: 'rgba(34, 197, 94, 0.2)',
+                border: '1px solid rgba(34, 197, 94, 0.3)',
+                borderRadius: '9999px',
+                fontSize: '12px',
+                color: 'rgb(134, 239, 172)',
+                fontWeight: '600',
               }}
             >
               ✨ FULLSCREEN
@@ -808,34 +774,33 @@ function MinimalNav({
         </div>
       )}
     </header>
-  );
+  )
 }
 
-export function AppNavBar({ variant = "full", navSlot }: AppNavBarProps) {
-  const pathname = usePathname();
-  const router = useRouter();
-  const isArcadePage = pathname?.startsWith("/arcade");
-  const isHomePage = pathname === "/";
-  const { isFullscreen, toggleFullscreen, exitFullscreen } = useFullscreen();
+export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
+  const pathname = usePathname()
+  const router = useRouter()
+  const isArcadePage = pathname?.startsWith('/arcade')
+  const isHomePage = pathname === '/'
+  const { isFullscreen, toggleFullscreen, exitFullscreen } = useFullscreen()
 
   // Try to get home hero context (if on homepage)
-  const homeHero = useOptionalHomeHero();
+  const homeHero = useOptionalHomeHero()
 
   // Select a random subtitle once on mount (performance: won't change on re-renders)
   // Use homeHero subtitle if available, otherwise generate one
-  const fallbackSubtitle = useMemo(() => getRandomSubtitle(), []);
-  const subtitle = homeHero?.subtitle || fallbackSubtitle;
+  const fallbackSubtitle = useMemo(() => getRandomSubtitle(), [])
+  const subtitle = homeHero?.subtitle || fallbackSubtitle
 
   // Show branding unless we're on homepage with visible hero
-  const showBranding = !isHomePage || !homeHero || !homeHero.isHeroVisible;
+  const showBranding = !isHomePage || !homeHero || !homeHero.isHeroVisible
 
   // Auto-detect variant based on context
   // Only arcade pages (not /games) should use minimal nav
-  const actualVariant =
-    variant === "full" && isArcadePage ? "minimal" : variant;
+  const actualVariant = variant === 'full' && isArcadePage ? 'minimal' : variant
 
   // Mini nav for games/arcade (both fullscreen and non-fullscreen)
-  if (actualVariant === "minimal") {
+  if (actualVariant === 'minimal') {
     return (
       <MinimalNav
         isFullscreen={isFullscreen}
@@ -846,42 +811,40 @@ export function AppNavBar({ variant = "full", navSlot }: AppNavBarProps) {
         exitFullscreen={exitFullscreen}
         router={router}
       />
-    );
+    )
   }
 
   // Check if we should use transparent styling (when hero is visible on home page)
-  const isTransparent = isHomePage && homeHero?.isHeroVisible;
+  const isTransparent = isHomePage && homeHero?.isHeroVisible
 
   return (
     <Tooltip.Provider delayDuration={200}>
       <header
         style={{
           // Set active nav height for content to use
-          ["--app-nav-height" as any]: "var(--app-nav-height-full)",
+          ['--app-nav-height' as any]: 'var(--app-nav-height-full)',
           // Use the variable for min-height to ensure consistency
-          minHeight: "var(--app-nav-height-full)",
+          minHeight: 'var(--app-nav-height-full)',
         }}
         className={css({
-          bg: isTransparent ? "transparent" : "rgba(0, 0, 0, 0.5)",
-          backdropFilter: isTransparent ? "none" : "blur(12px)",
-          shadow: isTransparent ? "none" : "lg",
-          borderBottom: isTransparent ? "none" : "1px solid",
-          borderColor: isTransparent
-            ? "transparent"
-            : "rgba(139, 92, 246, 0.2)",
-          position: "fixed",
+          bg: isTransparent ? 'transparent' : 'rgba(0, 0, 0, 0.5)',
+          backdropFilter: isTransparent ? 'none' : 'blur(12px)',
+          shadow: isTransparent ? 'none' : 'lg',
+          borderBottom: isTransparent ? 'none' : '1px solid',
+          borderColor: isTransparent ? 'transparent' : 'rgba(139, 92, 246, 0.2)',
+          position: 'fixed',
           top: 0,
           left: 0,
           right: 0,
           zIndex: Z_INDEX.NAV_BAR,
-          transition: "all 0.3s ease",
+          transition: 'all 0.3s ease',
         })}
       >
-        <div className={container({ maxW: "7xl", px: "4", py: "3" })}>
+        <div className={container({ maxW: '7xl', px: '4', py: '3' })}>
           <div
             className={hstack({
-              justify: "space-between",
-              alignItems: "center",
+              justify: 'space-between',
+              alignItems: 'center',
             })}
           >
             {/* Logo - conditionally shown based on hero visibility */}
@@ -889,22 +852,22 @@ export function AppNavBar({ variant = "full", navSlot }: AppNavBarProps) {
               <Link
                 href="/"
                 className={css({
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "0",
-                  textDecoration: "none",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '0',
+                  textDecoration: 'none',
                   _hover: {
-                    "& > .brand-name": { color: "rgba(196, 181, 253, 1)" },
+                    '& > .brand-name': { color: 'rgba(196, 181, 253, 1)' },
                   },
                   opacity: 0,
-                  animation: "fadeIn 0.3s ease-out forwards",
+                  animation: 'fadeIn 0.3s ease-out forwards',
                 })}
               >
                 <span
                   className={css({
-                    fontSize: "xl",
-                    fontWeight: "bold",
-                    color: "rgba(255, 255, 255, 0.95)",
+                    fontSize: 'xl',
+                    fontWeight: 'bold',
+                    color: 'rgba(255, 255, 255, 0.95)',
                   })}
                 >
                   Abaci One
@@ -913,13 +876,13 @@ export function AppNavBar({ variant = "full", navSlot }: AppNavBarProps) {
                   <Tooltip.Trigger asChild>
                     <span
                       className={css({
-                        fontSize: "xs",
-                        fontWeight: "medium",
-                        color: "rgba(196, 181, 253, 0.8)",
-                        fontStyle: "italic",
-                        cursor: "help",
-                        whiteSpace: "nowrap",
-                        _hover: { color: "rgba(196, 181, 253, 1)" },
+                        fontSize: 'xs',
+                        fontWeight: 'medium',
+                        color: 'rgba(196, 181, 253, 0.8)',
+                        fontStyle: 'italic',
+                        cursor: 'help',
+                        whiteSpace: 'nowrap',
+                        _hover: { color: 'rgba(196, 181, 253, 1)' },
                       })}
                     >
                       {subtitle.text}
@@ -931,21 +894,21 @@ export function AppNavBar({ variant = "full", navSlot }: AppNavBarProps) {
                       align="start"
                       sideOffset={4}
                       className={css({
-                        bg: "gray.900",
-                        color: "white",
-                        px: "3",
-                        py: "2",
-                        rounded: "md",
-                        fontSize: "sm",
-                        maxW: "250px",
-                        shadow: "lg",
+                        bg: 'gray.900',
+                        color: 'white',
+                        px: '3',
+                        py: '2',
+                        rounded: 'md',
+                        fontSize: 'sm',
+                        maxW: '250px',
+                        shadow: 'lg',
                         zIndex: Z_INDEX.TOOLTIP,
                       })}
                     >
                       {subtitle.description}
                       <Tooltip.Arrow
                         className={css({
-                          fill: "gray.900",
+                          fill: 'gray.900',
                         })}
                       />
                     </Tooltip.Content>
@@ -956,57 +919,33 @@ export function AppNavBar({ variant = "full", navSlot }: AppNavBarProps) {
               <div />
             )}
 
-            <div className={hstack({ gap: "6", alignItems: "center" })}>
+            <div className={hstack({ gap: '6', alignItems: 'center' })}>
               {/* Navigation Links - progressively hide as viewport narrows */}
-              <nav className={hstack({ gap: "4" })}>
+              <nav className={hstack({ gap: '4' })}>
                 {/* Create - always visible when nav is shown */}
-                <div
-                  className={css({ display: { base: "none", sm: "block" } })}
-                >
-                  <NavLink
-                    href="/create"
-                    currentPath={pathname}
-                    isTransparent={isTransparent}
-                  >
+                <div className={css({ display: { base: 'none', sm: 'block' } })}>
+                  <NavLink href="/create" currentPath={pathname} isTransparent={isTransparent}>
                     Create
                   </NavLink>
                 </div>
 
                 {/* Guide - hidden below md breakpoint */}
-                <div
-                  className={css({ display: { base: "none", md: "block" } })}
-                >
-                  <NavLink
-                    href="/guide"
-                    currentPath={pathname}
-                    isTransparent={isTransparent}
-                  >
+                <div className={css({ display: { base: 'none', md: 'block' } })}>
+                  <NavLink href="/guide" currentPath={pathname} isTransparent={isTransparent}>
                     Guide
                   </NavLink>
                 </div>
 
                 {/* Games - hidden below lg breakpoint */}
-                <div
-                  className={css({ display: { base: "none", lg: "block" } })}
-                >
-                  <NavLink
-                    href="/games"
-                    currentPath={pathname}
-                    isTransparent={isTransparent}
-                  >
+                <div className={css({ display: { base: 'none', lg: 'block' } })}>
+                  <NavLink href="/games" currentPath={pathname} isTransparent={isTransparent}>
                     Games
                   </NavLink>
                 </div>
 
                 {/* Blog - hidden below xl breakpoint */}
-                <div
-                  className={css({ display: { base: "none", xl: "block" } })}
-                >
-                  <NavLink
-                    href="/blog"
-                    currentPath={pathname}
-                    isTransparent={isTransparent}
-                  >
+                <div className={css({ display: { base: 'none', xl: 'block' } })}>
+                  <NavLink href="/blog" currentPath={pathname} isTransparent={isTransparent}>
                     Blog
                   </NavLink>
                 </div>
@@ -1043,7 +982,7 @@ export function AppNavBar({ variant = "full", navSlot }: AppNavBarProps) {
         }}
       />
     </Tooltip.Provider>
-  );
+  )
 }
 
 function NavLink({
@@ -1052,63 +991,62 @@ function NavLink({
   children,
   isTransparent,
 }: {
-  href: string;
-  currentPath: string | null;
-  children: React.ReactNode;
-  isTransparent?: boolean;
+  href: string
+  currentPath: string | null
+  children: React.ReactNode
+  isTransparent?: boolean
 }) {
-  const isActive =
-    currentPath === href || (href !== "/" && currentPath?.startsWith(href));
+  const isActive = currentPath === href || (href !== '/' && currentPath?.startsWith(href))
 
   return (
     <Link
       href={href}
       style={{
-        backdropFilter: isTransparent ? "blur(8px)" : "none",
+        backdropFilter: isTransparent ? 'blur(8px)' : 'none',
       }}
       className={css({
-        px: { base: "4", md: "3" },
-        py: { base: "3", md: "2" },
-        minH: { base: "44px", md: "auto" },
-        minW: { base: "44px", md: "auto" },
-        fontSize: "sm",
-        fontWeight: "medium",
+        px: { base: '4', md: '3' },
+        py: { base: '3', md: '2' },
+        minH: { base: '44px', md: 'auto' },
+        minW: { base: '44px', md: 'auto' },
+        fontSize: 'sm',
+        fontWeight: 'medium',
         color: isTransparent
           ? isActive
-            ? "text.primary"
-            : "text.secondary"
+            ? 'text.primary'
+            : 'text.secondary'
           : isActive
-            ? "rgba(196, 181, 253, 1)"
-            : "rgba(209, 213, 219, 0.9)",
+            ? 'rgba(196, 181, 253, 1)'
+            : 'rgba(209, 213, 219, 0.9)',
         bg: isTransparent
           ? isActive
-            ? "bg.muted"
-            : "bg.subtle"
+            ? 'bg.muted'
+            : 'bg.subtle'
           : isActive
-            ? "rgba(139, 92, 246, 0.2)"
-            : "transparent",
-        border: isTransparent ? "1px solid" : "none",
+            ? 'rgba(139, 92, 246, 0.2)'
+            : 'transparent',
+        border: isTransparent ? '1px solid' : 'none',
         borderColor: isTransparent
           ? isActive
-            ? "border.default"
-            : "border.subtle"
-          : "transparent",
-        rounded: "lg",
-        transition: "all",
-        textDecoration: "none",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        boxShadow: isTransparent ? "0 2px 8px rgba(0, 0, 0, 0.2)" : "none",
+            ? 'border.default'
+            : 'border.subtle'
+          : 'transparent',
+        rounded: 'lg',
+        transition: 'all',
+        textDecoration: 'none',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxShadow: isTransparent ? '0 2px 8px rgba(0, 0, 0, 0.2)' : 'none',
         _hover: {
-          color: isTransparent ? "text.primary" : "rgba(196, 181, 253, 1)",
-          bg: isTransparent ? "interactive.hover" : "rgba(139, 92, 246, 0.25)",
-          borderColor: isTransparent ? "border.emphasis" : "transparent",
-          boxShadow: isTransparent ? "0 4px 12px rgba(0, 0, 0, 0.3)" : "none",
+          color: isTransparent ? 'text.primary' : 'rgba(196, 181, 253, 1)',
+          bg: isTransparent ? 'interactive.hover' : 'rgba(139, 92, 246, 0.25)',
+          borderColor: isTransparent ? 'border.emphasis' : 'transparent',
+          boxShadow: isTransparent ? '0 4px 12px rgba(0, 0, 0, 0.3)' : 'none',
         },
       })}
     >
       {children}
     </Link>
-  );
+  )
 }
diff --git a/apps/web/src/components/ChampionArena.tsx b/apps/web/src/components/ChampionArena.tsx
index 0b7331dc..1b3621be 100644
--- a/apps/web/src/components/ChampionArena.tsx
+++ b/apps/web/src/components/ChampionArena.tsx
@@ -1,15 +1,15 @@
-"use client";
+'use client'
 
-import { useRef, useState } from "react";
-import { css } from "../../styled-system/css";
-import { useGameMode } from "../contexts/GameModeContext";
-import { useUserProfile } from "../contexts/UserProfileContext";
-import { GameSelector } from "./GameSelector";
+import { useRef, useState } from 'react'
+import { css } from '../../styled-system/css'
+import { useGameMode } from '../contexts/GameModeContext'
+import { useUserProfile } from '../contexts/UserProfileContext'
+import { GameSelector } from './GameSelector'
 
 interface ChampionArenaProps {
-  onGameModeChange?: (mode: "single" | "battle" | "tournament") => void;
-  onConfigurePlayer?: (playerId: number) => void;
-  className?: string;
+  onGameModeChange?: (mode: 'single' | 'battle' | 'tournament') => void
+  onConfigurePlayer?: (playerId: number) => void
+  className?: string
 }
 
 export function ChampionArena({
@@ -17,224 +17,212 @@ export function ChampionArena({
   onConfigurePlayer,
   className,
 }: ChampionArenaProps) {
-  const { profile, updatePlayerEmoji, updatePlayerName } = useUserProfile();
-  const { gameMode, players, updatePlayer, activePlayerCount } = useGameMode();
-  const [draggedPlayer, setDraggedPlayer] = useState<number | null>(null);
-  const [isDragOver, setIsDragOver] = useState(false);
-  const [isRosterDragOver, setIsRosterDragOver] = useState(false);
-  const [_configurePlayer, _setConfigurePlayer] = useState<number | null>(null);
-  const [_tempName, _setTempName] = useState("");
-  const arenaRef = useRef<HTMLDivElement>(null);
+  const { profile, updatePlayerEmoji, updatePlayerName } = useUserProfile()
+  const { gameMode, players, updatePlayer, activePlayerCount } = useGameMode()
+  const [draggedPlayer, setDraggedPlayer] = useState<number | null>(null)
+  const [isDragOver, setIsDragOver] = useState(false)
+  const [isRosterDragOver, setIsRosterDragOver] = useState(false)
+  const [_configurePlayer, _setConfigurePlayer] = useState<number | null>(null)
+  const [_tempName, _setTempName] = useState('')
+  const arenaRef = useRef<HTMLDivElement>(null)
 
-  const availablePlayers = players.filter((player) => !player.isActive);
-  const arenaPlayers = players.filter((player) => player.isActive);
+  const availablePlayers = players.filter((player) => !player.isActive)
+  const arenaPlayers = players.filter((player) => player.isActive)
 
   const handleDragStart = (playerId: number) => {
-    setDraggedPlayer(playerId);
-  };
+    setDraggedPlayer(playerId)
+  }
 
   const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragOver(true);
-  };
+    e.preventDefault()
+    setIsDragOver(true)
+  }
 
   const handleDragLeave = (e: React.DragEvent) => {
     if (!arenaRef.current?.contains(e.relatedTarget as Node)) {
-      setIsDragOver(false);
+      setIsDragOver(false)
     }
-  };
+  }
 
   const handleArenaDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragOver(false);
+    e.preventDefault()
+    setIsDragOver(false)
 
     if (draggedPlayer) {
       // Check if player is being dragged from arena (to avoid self-drop)
-      const playerInArena = arenaPlayers.find((p) => p.id === draggedPlayer);
+      const playerInArena = arenaPlayers.find((p) => p.id === draggedPlayer)
       if (playerInArena) {
-        setDraggedPlayer(null);
-        return;
+        setDraggedPlayer(null)
+        return
       }
 
       // Activate the dragged player
-      updatePlayer(draggedPlayer, { isActive: true });
+      updatePlayer(draggedPlayer, { isActive: true })
 
       // Determine new game mode based on active player count
-      const newActiveCount = arenaPlayers.length + 1;
-      let newMode: "single" | "battle" | "tournament" = "single";
+      const newActiveCount = arenaPlayers.length + 1
+      let newMode: 'single' | 'battle' | 'tournament' = 'single'
 
       if (newActiveCount === 1) {
-        newMode = "single";
+        newMode = 'single'
       } else if (newActiveCount === 2) {
-        newMode = "battle";
+        newMode = 'battle'
       } else {
-        newMode = "tournament";
+        newMode = 'tournament'
       }
 
       // gameMode is now computed from active player count
-      onGameModeChange?.(newMode);
-      setDraggedPlayer(null);
+      onGameModeChange?.(newMode)
+      setDraggedPlayer(null)
     }
-  };
+  }
 
   const handleRosterDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsRosterDragOver(true);
-  };
+    e.preventDefault()
+    setIsRosterDragOver(true)
+  }
 
   const handleRosterDragLeave = (e: React.DragEvent) => {
-    const rosterContainer = e.currentTarget as HTMLElement;
+    const rosterContainer = e.currentTarget as HTMLElement
     if (!rosterContainer.contains(e.relatedTarget as Node)) {
-      setIsRosterDragOver(false);
+      setIsRosterDragOver(false)
     }
-  };
+  }
 
   const handleRosterDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsRosterDragOver(false);
+    e.preventDefault()
+    setIsRosterDragOver(false)
 
     if (draggedPlayer) {
       // Check if player is being dragged from arena
-      const playerInArena = arenaPlayers.find((p) => p.id === draggedPlayer);
+      const playerInArena = arenaPlayers.find((p) => p.id === draggedPlayer)
       if (playerInArena) {
-        console.log("Removing player from arena via drag:", draggedPlayer);
-        handleRemoveFromArena(draggedPlayer);
+        console.log('Removing player from arena via drag:', draggedPlayer)
+        handleRemoveFromArena(draggedPlayer)
       }
-      setDraggedPlayer(null);
+      setDraggedPlayer(null)
     }
-  };
+  }
 
   const handleAddToArena = (playerId: number) => {
-    console.log("Adding player to arena:", playerId);
+    console.log('Adding player to arena:', playerId)
 
     // Check if player is already in the arena
-    const playerInArena = arenaPlayers.find((p) => p.id === playerId);
+    const playerInArena = arenaPlayers.find((p) => p.id === playerId)
     if (playerInArena) {
-      console.log("Player already in arena, skipping addition");
-      return;
+      console.log('Player already in arena, skipping addition')
+      return
     }
 
     // Activate the player
-    updatePlayer(playerId, { isActive: true });
+    updatePlayer(playerId, { isActive: true })
 
     // Determine new game mode based on new active player count
-    const newActiveCount = arenaPlayers.length + 1;
-    let newMode: "single" | "battle" | "tournament" = "single";
+    const newActiveCount = arenaPlayers.length + 1
+    let newMode: 'single' | 'battle' | 'tournament' = 'single'
 
     if (newActiveCount === 1) {
-      newMode = "single";
+      newMode = 'single'
     } else if (newActiveCount === 2) {
-      newMode = "battle";
+      newMode = 'battle'
     } else {
-      newMode = "tournament";
+      newMode = 'tournament'
     }
 
-    console.log(
-      "New mode will be:",
-      newMode,
-      "with",
-      newActiveCount,
-      "active players",
-    );
+    console.log('New mode will be:', newMode, 'with', newActiveCount, 'active players')
 
     // Update game mode
     // gameMode is now computed from active player count
-    onGameModeChange?.(newMode);
-  };
+    onGameModeChange?.(newMode)
+  }
 
   const handleRemoveFromArena = (playerId: number) => {
-    console.log("Removing player from arena:", playerId);
+    console.log('Removing player from arena:', playerId)
 
     // Check if player is actually in the arena
-    const playerInArena = arenaPlayers.find((p) => p.id === playerId);
+    const playerInArena = arenaPlayers.find((p) => p.id === playerId)
     if (!playerInArena) {
-      console.log("Player not in arena, skipping removal");
-      return;
+      console.log('Player not in arena, skipping removal')
+      return
     }
 
     // Calculate what the new count will be after removing this player
-    const newActiveCount = arenaPlayers.length - 1;
-    let newMode: "single" | "battle" | "tournament" = "single";
+    const newActiveCount = arenaPlayers.length - 1
+    let newMode: 'single' | 'battle' | 'tournament' = 'single'
 
     // Determine new mode first
     if (newActiveCount === 0) {
-      newMode = "single";
+      newMode = 'single'
     } else if (newActiveCount === 1) {
-      newMode = "single";
+      newMode = 'single'
     } else if (newActiveCount === 2) {
-      newMode = "battle";
+      newMode = 'battle'
     } else {
-      newMode = "tournament";
+      newMode = 'tournament'
     }
 
-    console.log(
-      "New mode will be:",
-      newMode,
-      "with",
-      newActiveCount,
-      "active players",
-    );
+    console.log('New mode will be:', newMode, 'with', newActiveCount, 'active players')
 
     // Remove the player
-    updatePlayer(playerId, { isActive: false });
+    updatePlayer(playerId, { isActive: false })
 
     // Note: Allow arena to be completely empty - user can drag champions back in
 
     // Update game mode
     // gameMode is now computed from active player count
-    onGameModeChange?.(newMode);
-  };
+    onGameModeChange?.(newMode)
+  }
 
   const getPlayerEmoji = (id: number) => {
-    if (id === 1) return profile.player1Emoji;
-    if (id === 2) return profile.player2Emoji;
-    const player = players.find((p) => p.id === id);
-    return player?.emoji || "😀";
-  };
+    if (id === 1) return profile.player1Emoji
+    if (id === 2) return profile.player2Emoji
+    const player = players.find((p) => p.id === id)
+    return player?.emoji || '😀'
+  }
 
   const getPlayerName = (id: number) => {
-    if (id === 1) return profile.player1Name;
-    if (id === 2) return profile.player2Name;
-    const player = players.find((p) => p.id === id);
-    return player?.name || `Player ${id}`;
-  };
+    if (id === 1) return profile.player1Name
+    if (id === 2) return profile.player2Name
+    const player = players.find((p) => p.id === id)
+    return player?.name || `Player ${id}`
+  }
 
   return (
     <div
       className={
         css({
-          background: "white",
-          rounded: "3xl",
-          p: "8",
-          border: "2px solid",
-          borderColor: "gray.200",
-          boxShadow: "0 20px 40px rgba(0, 0, 0, 0.1)",
-          transition: "all 0.3s ease",
-        }) + (className ? ` ${className}` : "")
+          background: 'white',
+          rounded: '3xl',
+          p: '8',
+          border: '2px solid',
+          borderColor: 'gray.200',
+          boxShadow: '0 20px 40px rgba(0, 0, 0, 0.1)',
+          transition: 'all 0.3s ease',
+        }) + (className ? ` ${className}` : '')
       }
     >
       {/* Header */}
       <div
         className={css({
-          textAlign: "center",
-          mb: "8",
+          textAlign: 'center',
+          mb: '8',
         })}
       >
         <h2
           className={css({
-            fontSize: { base: "2xl", md: "3xl" },
-            fontWeight: "bold",
-            color: "gray.900",
-            mb: "2",
+            fontSize: { base: '2xl', md: '3xl' },
+            fontWeight: 'bold',
+            color: 'gray.900',
+            mb: '2',
           })}
         >
           🏟️ Champion Arena
         </h2>
         <p
           className={css({
-            color: "gray.600",
-            fontSize: "lg",
-            mb: "4",
+            color: 'gray.600',
+            fontSize: 'lg',
+            mb: '4',
           })}
         >
           Drag or click champions to move them between roster and arena!
@@ -243,72 +231,72 @@ export function ChampionArena({
         {/* Current Mode Indicator */}
         <div
           className={css({
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "2",
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '2',
             background:
               arenaPlayers.length === 0
-                ? "linear-gradient(135deg, #f3f4f6, #e5e7eb)"
-                : gameMode === "single"
-                  ? "linear-gradient(135deg, #dbeafe, #bfdbfe)"
-                  : gameMode === "battle"
-                    ? "linear-gradient(135deg, #e9d5ff, #ddd6fe)"
-                    : "linear-gradient(135deg, #fef3c7, #fde68a)",
-            px: "4",
-            py: "2",
-            rounded: "full",
-            border: "2px solid",
+                ? 'linear-gradient(135deg, #f3f4f6, #e5e7eb)'
+                : gameMode === 'single'
+                  ? 'linear-gradient(135deg, #dbeafe, #bfdbfe)'
+                  : gameMode === 'battle'
+                    ? 'linear-gradient(135deg, #e9d5ff, #ddd6fe)'
+                    : 'linear-gradient(135deg, #fef3c7, #fde68a)',
+            px: '4',
+            py: '2',
+            rounded: 'full',
+            border: '2px solid',
             borderColor:
               arenaPlayers.length === 0
-                ? "gray.300"
-                : gameMode === "single"
-                  ? "blue.300"
-                  : gameMode === "battle"
-                    ? "purple.300"
-                    : "yellow.300",
+                ? 'gray.300'
+                : gameMode === 'single'
+                  ? 'blue.300'
+                  : gameMode === 'battle'
+                    ? 'purple.300'
+                    : 'yellow.300',
           })}
         >
-          <span className={css({ fontSize: "lg" })}>
+          <span className={css({ fontSize: 'lg' })}>
             {arenaPlayers.length === 0
-              ? "🎯"
-              : gameMode === "single"
-                ? "👤"
-                : gameMode === "battle"
-                  ? "⚔️"
-                  : "🏆"}
+              ? '🎯'
+              : gameMode === 'single'
+                ? '👤'
+                : gameMode === 'battle'
+                  ? '⚔️'
+                  : '🏆'}
           </span>
           <span
             className={css({
-              fontWeight: "bold",
+              fontWeight: 'bold',
               color:
                 arenaPlayers.length === 0
-                  ? "gray.700"
-                  : gameMode === "single"
-                    ? "blue.800"
-                    : gameMode === "battle"
-                      ? "purple.800"
-                      : "yellow.800",
-              textTransform: "uppercase",
-              fontSize: "sm",
+                  ? 'gray.700'
+                  : gameMode === 'single'
+                    ? 'blue.800'
+                    : gameMode === 'battle'
+                      ? 'purple.800'
+                      : 'yellow.800',
+              textTransform: 'uppercase',
+              fontSize: 'sm',
             })}
           >
             {arenaPlayers.length === 0
-              ? "Select Champions"
-              : gameMode === "single"
-                ? "Solo Mode"
-                : gameMode === "battle"
-                  ? "Battle Mode"
-                  : "Tournament Mode"}
+              ? 'Select Champions'
+              : gameMode === 'single'
+                ? 'Solo Mode'
+                : gameMode === 'battle'
+                  ? 'Battle Mode'
+                  : 'Tournament Mode'}
           </span>
         </div>
       </div>
 
       <div
         className={css({
-          display: "grid",
-          gridTemplateColumns: { base: "1fr", lg: "1fr 1fr" },
-          gap: "8",
-          alignItems: "start",
+          display: 'grid',
+          gridTemplateColumns: { base: '1fr', lg: '1fr 1fr' },
+          gap: '8',
+          alignItems: 'start',
         })}
       >
         {/* Available Champions Roster */}
@@ -319,11 +307,11 @@ export function ChampionArena({
         >
           <h3
             className={css({
-              fontSize: "xl",
-              fontWeight: "bold",
-              color: "gray.800",
-              mb: "4",
-              textAlign: "center",
+              fontSize: 'xl',
+              fontWeight: 'bold',
+              color: 'gray.800',
+              mb: '4',
+              textAlign: 'center',
             })}
           >
             🎯 Available Champions
@@ -334,19 +322,19 @@ export function ChampionArena({
             onDragLeave={handleRosterDragLeave}
             onDrop={handleRosterDrop}
             className={css({
-              display: "flex",
-              flexWrap: "wrap",
-              gap: "4",
-              justifyContent: "center",
-              p: "6",
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: '4',
+              justifyContent: 'center',
+              p: '6',
               background: isRosterDragOver
-                ? "linear-gradient(135deg, #fef3c7, #fde68a)"
-                : "linear-gradient(135deg, #f8fafc, #f1f5f9)",
-              rounded: "2xl",
-              border: "2px dashed",
-              borderColor: isRosterDragOver ? "yellow.400" : "gray.300",
-              minH: "32",
-              transition: "all 0.3s ease",
+                ? 'linear-gradient(135deg, #fef3c7, #fde68a)'
+                : 'linear-gradient(135deg, #f8fafc, #f1f5f9)',
+              rounded: '2xl',
+              border: '2px dashed',
+              borderColor: isRosterDragOver ? 'yellow.400' : 'gray.300',
+              minH: '32',
+              transition: 'all 0.3s ease',
             })}
           >
             {availablePlayers.map((player) => (
@@ -355,90 +343,90 @@ export function ChampionArena({
                 draggable
                 onDragStart={() => handleDragStart(player.id)}
                 onClick={() => {
-                  console.log("Roster card clicked for player:", player.id);
-                  handleAddToArena(player.id);
+                  console.log('Roster card clicked for player:', player.id)
+                  handleAddToArena(player.id)
                 }}
                 className={css({
-                  position: "relative",
-                  background: "white",
-                  rounded: "2xl",
-                  p: "4",
-                  textAlign: "center",
-                  cursor: "grab",
-                  border: "2px solid",
+                  position: 'relative',
+                  background: 'white',
+                  rounded: '2xl',
+                  p: '4',
+                  textAlign: 'center',
+                  cursor: 'grab',
+                  border: '2px solid',
                   borderColor: player.color,
-                  boxShadow: "0 8px 20px rgba(0, 0, 0, 0.1)",
-                  transition: "all 0.3s ease",
-                  width: "120px",
-                  minWidth: "120px",
+                  boxShadow: '0 8px 20px rgba(0, 0, 0, 0.1)',
+                  transition: 'all 0.3s ease',
+                  width: '120px',
+                  minWidth: '120px',
                   flexShrink: 0,
                   _hover: {
-                    transform: "translateY(-4px) scale(1.05)",
-                    boxShadow: "0 12px 30px rgba(0, 0, 0, 0.15)",
-                    "& .champion-emoji": {
-                      transform: "scale(1.2) rotate(10deg)",
-                      animation: "championBounce 0.6s ease-in-out",
+                    transform: 'translateY(-4px) scale(1.05)',
+                    boxShadow: '0 12px 30px rgba(0, 0, 0, 0.15)',
+                    '& .champion-emoji': {
+                      transform: 'scale(1.2) rotate(10deg)',
+                      animation: 'championBounce 0.6s ease-in-out',
                     },
                   },
                   _active: {
-                    cursor: "grabbing",
-                    transform: "scale(0.95)",
+                    cursor: 'grabbing',
+                    transform: 'scale(0.95)',
                   },
                 })}
               >
                 <div
                   className={`${css({
-                    fontSize: "3xl",
-                    mb: "2",
-                    transition: "all 0.3s ease",
+                    fontSize: '3xl',
+                    mb: '2',
+                    transition: 'all 0.3s ease',
                   })} champion-emoji`}
                 >
                   {getPlayerEmoji(player.id)}
                 </div>
                 <div
                   className={css({
-                    fontSize: "sm",
-                    fontWeight: "bold",
-                    color: "gray.800",
+                    fontSize: 'sm',
+                    fontWeight: 'bold',
+                    color: 'gray.800',
                   })}
                 >
                   {getPlayerName(player.id)}
                 </div>
                 <div
                   className={css({
-                    fontSize: "xs",
-                    color: "gray.600",
-                    mt: "1",
+                    fontSize: 'xs',
+                    color: 'gray.600',
+                    mt: '1',
                   })}
                 >
                   Level {Math.floor((profile.gamesPlayed || 0) / 5) + 1}
                 </div>
                 <button
                   onClick={(e) => {
-                    e.stopPropagation();
-                    onConfigurePlayer?.(player.id);
+                    e.stopPropagation()
+                    onConfigurePlayer?.(player.id)
                   }}
                   className={css({
-                    position: "absolute",
-                    top: "2",
-                    right: "2",
-                    background: "rgba(255, 255, 255, 0.9)",
-                    border: "1px solid",
-                    borderColor: "gray.300",
-                    rounded: "full",
-                    w: "6",
-                    h: "6",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    fontSize: "xs",
-                    cursor: "pointer",
-                    transition: "all 0.2s ease",
+                    position: 'absolute',
+                    top: '2',
+                    right: '2',
+                    background: 'rgba(255, 255, 255, 0.9)',
+                    border: '1px solid',
+                    borderColor: 'gray.300',
+                    rounded: 'full',
+                    w: '6',
+                    h: '6',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: 'xs',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s ease',
                     zIndex: 10,
                     _hover: {
-                      background: "white",
+                      background: 'white',
                       borderColor: player.color,
-                      transform: "scale(1.1)",
+                      transform: 'scale(1.1)',
                     },
                   })}
                 >
@@ -450,12 +438,12 @@ export function ChampionArena({
             {availablePlayers.length === 0 && (
               <div
                 className={css({
-                  gridColumn: "1 / -1",
-                  textAlign: "center",
-                  color: "gray.500",
-                  fontSize: "sm",
-                  fontStyle: "italic",
-                  py: "8",
+                  gridColumn: '1 / -1',
+                  textAlign: 'center',
+                  color: 'gray.500',
+                  fontSize: 'sm',
+                  fontStyle: 'italic',
+                  py: '8',
                 })}
               >
                 All champions are in the arena! 🎮
@@ -472,11 +460,11 @@ export function ChampionArena({
         >
           <h3
             className={css({
-              fontSize: "xl",
-              fontWeight: "bold",
-              color: "gray.800",
-              mb: "4",
-              textAlign: "center",
+              fontSize: 'xl',
+              fontWeight: 'bold',
+              color: 'gray.800',
+              mb: '4',
+              textAlign: 'center',
             })}
           >
             🏟️ Battle Arena
@@ -488,70 +476,68 @@ export function ChampionArena({
             onDragLeave={handleDragLeave}
             onDrop={handleArenaDrop}
             className={css({
-              p: "8",
+              p: '8',
               background: isDragOver
-                ? "linear-gradient(135deg, #dcfce7, #bbf7d0)"
-                : "linear-gradient(135deg, #fef3c7, #fde68a)",
-              rounded: "3xl",
-              border: "3px dashed",
-              borderColor: isDragOver ? "green.400" : "yellow.400",
-              minH: "64",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              transition: "all 0.3s ease",
-              position: "relative",
-              overflow: "hidden",
+                ? 'linear-gradient(135deg, #dcfce7, #bbf7d0)'
+                : 'linear-gradient(135deg, #fef3c7, #fde68a)',
+              rounded: '3xl',
+              border: '3px dashed',
+              borderColor: isDragOver ? 'green.400' : 'yellow.400',
+              minH: '64',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'all 0.3s ease',
+              position: 'relative',
+              overflow: 'hidden',
             })}
           >
             {/* Arena Background Pattern */}
             <div
               className={css({
-                position: "absolute",
+                position: 'absolute',
                 top: 0,
                 left: 0,
                 right: 0,
                 bottom: 0,
                 backgroundImage:
-                  "radial-gradient(circle at 25% 25%, rgba(251, 191, 36, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(245, 158, 11, 0.1) 0%, transparent 50%)",
-                pointerEvents: "none",
+                  'radial-gradient(circle at 25% 25%, rgba(251, 191, 36, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(245, 158, 11, 0.1) 0%, transparent 50%)',
+                pointerEvents: 'none',
               })}
             />
 
             {arenaPlayers.length === 0 ? (
               <div
                 className={css({
-                  textAlign: "center",
+                  textAlign: 'center',
                   zIndex: 1,
                 })}
               >
                 <div
                   className={css({
-                    fontSize: "4xl",
-                    mb: "4",
+                    fontSize: '4xl',
+                    mb: '4',
                     opacity: isDragOver ? 1 : 0.6,
-                    transition: "all 0.3s ease",
+                    transition: 'all 0.3s ease',
                   })}
                 >
-                  {isDragOver ? "✨" : "🏟️"}
+                  {isDragOver ? '✨' : '🏟️'}
                 </div>
                 <p
                   className={css({
-                    color: "gray.700",
-                    fontWeight: "semibold",
-                    fontSize: "lg",
+                    color: 'gray.700',
+                    fontWeight: 'semibold',
+                    fontSize: 'lg',
                   })}
                 >
-                  {isDragOver
-                    ? "Drop to enter the arena!"
-                    : "Drag champions here"}
+                  {isDragOver ? 'Drop to enter the arena!' : 'Drag champions here'}
                 </p>
                 <p
                   className={css({
-                    color: "gray.600",
-                    fontSize: "sm",
-                    mt: "2",
+                    color: 'gray.600',
+                    fontSize: 'sm',
+                    mt: '2',
                   })}
                 >
                   1 champion = Solo • 2 = Battle • 3+ = Tournament
@@ -560,11 +546,11 @@ export function ChampionArena({
             ) : (
               <div
                 className={css({
-                  display: "flex",
-                  flexWrap: "wrap",
-                  gap: "4",
-                  justifyContent: "center",
-                  w: "full",
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: '4',
+                  justifyContent: 'center',
+                  w: 'full',
                   zIndex: 1,
                 })}
               >
@@ -574,64 +560,61 @@ export function ChampionArena({
                     draggable
                     onDragStart={() => handleDragStart(player.id)}
                     className={css({
-                      background: "white",
-                      rounded: "2xl",
-                      p: "4",
-                      textAlign: "center",
-                      border: "3px solid",
+                      background: 'white',
+                      rounded: '2xl',
+                      p: '4',
+                      textAlign: 'center',
+                      border: '3px solid',
                       borderColor: player.color,
                       boxShadow: `0 0 20px ${player.color}40`,
-                      position: "relative",
+                      position: 'relative',
                       animation: `arenaEntry 0.6s ease-out ${index * 0.1}s both`,
-                      cursor: "grab",
-                      transition: "all 0.3s ease",
+                      cursor: 'grab',
+                      transition: 'all 0.3s ease',
                       _active: {
-                        cursor: "grabbing",
+                        cursor: 'grabbing',
                       },
-                      width: "120px",
-                      minWidth: "120px",
+                      width: '120px',
+                      minWidth: '120px',
                       flexShrink: 0,
                       _hover: {
-                        transform: "translateY(-2px) scale(1.05)",
+                        transform: 'translateY(-2px) scale(1.05)',
                         boxShadow: `0 8px 25px ${player.color}60`,
                       },
                     })}
                     onClick={() => {
-                      console.log("Arena card clicked for player:", player.id);
-                      handleRemoveFromArena(player.id);
+                      console.log('Arena card clicked for player:', player.id)
+                      handleRemoveFromArena(player.id)
                     }}
                   >
                     {/* Remove Button */}
                     <button
                       onClick={(e) => {
-                        e.stopPropagation();
-                        console.log(
-                          "Remove button clicked for player:",
-                          player.id,
-                        );
-                        handleRemoveFromArena(player.id);
+                        e.stopPropagation()
+                        console.log('Remove button clicked for player:', player.id)
+                        handleRemoveFromArena(player.id)
                       }}
                       className={css({
-                        position: "absolute",
-                        top: "-2",
-                        right: "-2",
-                        w: "6",
-                        h: "6",
-                        background: "red.500",
-                        rounded: "full",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        fontSize: "xs",
-                        color: "white",
-                        cursor: "pointer",
-                        border: "none",
+                        position: 'absolute',
+                        top: '-2',
+                        right: '-2',
+                        w: '6',
+                        h: '6',
+                        background: 'red.500',
+                        rounded: 'full',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontSize: 'xs',
+                        color: 'white',
+                        cursor: 'pointer',
+                        border: 'none',
                         opacity: 1,
-                        transition: "all 0.3s ease",
+                        transition: 'all 0.3s ease',
                         zIndex: 10,
                         _hover: {
-                          background: "red.600",
-                          transform: "scale(1.1)",
+                          background: 'red.600',
+                          transform: 'scale(1.1)',
                         },
                       })}
                     >
@@ -641,43 +624,43 @@ export function ChampionArena({
                     {/* Champion Ready Animation */}
                     <div
                       className={css({
-                        position: "absolute",
-                        top: "-4px",
-                        left: "-4px",
-                        right: "-4px",
-                        bottom: "-4px",
-                        borderRadius: "20px",
-                        border: "2px solid",
+                        position: 'absolute',
+                        top: '-4px',
+                        left: '-4px',
+                        right: '-4px',
+                        bottom: '-4px',
+                        borderRadius: '20px',
+                        border: '2px solid',
                         borderColor: player.color,
-                        animation: "championReady 2s ease-in-out infinite",
+                        animation: 'championReady 2s ease-in-out infinite',
                         opacity: 0.6,
                       })}
                     />
 
                     <div
                       className={css({
-                        fontSize: "3xl",
-                        mb: "2",
-                        animation: "championFloat 3s ease-in-out infinite",
+                        fontSize: '3xl',
+                        mb: '2',
+                        animation: 'championFloat 3s ease-in-out infinite',
                       })}
                     >
                       {getPlayerEmoji(player.id)}
                     </div>
                     <div
                       className={css({
-                        fontSize: "sm",
-                        fontWeight: "bold",
-                        color: "gray.800",
+                        fontSize: 'sm',
+                        fontWeight: 'bold',
+                        color: 'gray.800',
                       })}
                     >
                       {getPlayerName(player.id)}
                     </div>
                     <div
                       className={css({
-                        fontSize: "xs",
-                        color: "green.700",
-                        fontWeight: "semibold",
-                        mt: "1",
+                        fontSize: 'xs',
+                        color: 'green.700',
+                        fontWeight: 'semibold',
+                        mt: '1',
                       })}
                     >
                       READY! 🔥
@@ -694,14 +677,14 @@ export function ChampionArena({
       <GameSelector
         variant="detailed"
         className={css({
-          mt: "8",
-          pt: "8",
-          borderTop: "2px solid",
-          borderColor: "gray.200",
+          mt: '8',
+          pt: '8',
+          borderTop: '2px solid',
+          borderColor: 'gray.200',
         })}
       />
     </div>
-  );
+  )
 }
 
 // Enhanced animations for champion arena
@@ -757,15 +740,12 @@ const championArenaAnimations = `
     box-shadow: 0 0 30px rgba(251, 191, 36, 0.6);
   }
 }
-`;
+`
 
 // Inject champion arena animations
-if (
-  typeof document !== "undefined" &&
-  !document.getElementById("champion-arena-animations")
-) {
-  const style = document.createElement("style");
-  style.id = "champion-arena-animations";
-  style.textContent = championArenaAnimations;
-  document.head.appendChild(style);
+if (typeof document !== 'undefined' && !document.getElementById('champion-arena-animations')) {
+  const style = document.createElement('style')
+  style.id = 'champion-arena-animations'
+  style.textContent = championArenaAnimations
+  document.head.appendChild(style)
 }
diff --git a/apps/web/src/components/ClientProviders.tsx b/apps/web/src/components/ClientProviders.tsx
index 18a1cc36..64eabc68 100644
--- a/apps/web/src/components/ClientProviders.tsx
+++ b/apps/web/src/components/ClientProviders.tsx
@@ -1,31 +1,31 @@
-"use client";
+'use client'
 
-import { AbacusDisplayProvider } from "@soroban/abacus-react";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { NextIntlClientProvider } from "next-intl";
-import { type ReactNode, useState } from "react";
-import { ToastProvider } from "@/components/common/ToastContext";
-import { FullscreenProvider } from "@/contexts/FullscreenContext";
-import { GameModeProvider } from "@/contexts/GameModeContext";
-import { UserProfileProvider } from "@/contexts/UserProfileContext";
-import { LocaleProvider, useLocaleContext } from "@/contexts/LocaleContext";
-import { ThemeProvider } from "@/contexts/ThemeContext";
-import { createQueryClient } from "@/lib/queryClient";
-import type { Locale } from "@/i18n/messages";
-import { AbacusSettingsSync } from "./AbacusSettingsSync";
-import { DeploymentInfo } from "./DeploymentInfo";
-import { MyAbacusProvider } from "@/contexts/MyAbacusContext";
-import { MyAbacus } from "./MyAbacus";
-import { HomeHeroProvider } from "@/contexts/HomeHeroContext";
+import { AbacusDisplayProvider } from '@soroban/abacus-react'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { NextIntlClientProvider } from 'next-intl'
+import { type ReactNode, useState } from 'react'
+import { ToastProvider } from '@/components/common/ToastContext'
+import { FullscreenProvider } from '@/contexts/FullscreenContext'
+import { GameModeProvider } from '@/contexts/GameModeContext'
+import { UserProfileProvider } from '@/contexts/UserProfileContext'
+import { LocaleProvider, useLocaleContext } from '@/contexts/LocaleContext'
+import { ThemeProvider } from '@/contexts/ThemeContext'
+import { createQueryClient } from '@/lib/queryClient'
+import type { Locale } from '@/i18n/messages'
+import { AbacusSettingsSync } from './AbacusSettingsSync'
+import { DeploymentInfo } from './DeploymentInfo'
+import { MyAbacusProvider } from '@/contexts/MyAbacusContext'
+import { MyAbacus } from './MyAbacus'
+import { HomeHeroProvider } from '@/contexts/HomeHeroContext'
 
 interface ClientProvidersProps {
-  children: ReactNode;
-  initialLocale: Locale;
-  initialMessages: Record<string, any>;
+  children: ReactNode
+  initialLocale: Locale
+  initialMessages: Record<string, any>
 }
 
 function InnerProviders({ children }: { children: ReactNode }) {
-  const { locale, messages } = useLocaleContext();
+  const { locale, messages } = useLocaleContext()
 
   return (
     <NextIntlClientProvider locale={locale} messages={messages} timeZone="UTC">
@@ -48,7 +48,7 @@ function InnerProviders({ children }: { children: ReactNode }) {
         </AbacusDisplayProvider>
       </ToastProvider>
     </NextIntlClientProvider>
-  );
+  )
 }
 
 export function ClientProviders({
@@ -57,18 +57,15 @@ export function ClientProviders({
   initialMessages,
 }: ClientProvidersProps) {
   // Create a stable QueryClient instance that persists across renders
-  const [queryClient] = useState(() => createQueryClient());
+  const [queryClient] = useState(() => createQueryClient())
 
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeProvider>
-        <LocaleProvider
-          initialLocale={initialLocale}
-          initialMessages={initialMessages}
-        >
+        <LocaleProvider initialLocale={initialLocale} initialMessages={initialMessages}>
           <InnerProviders>{children}</InnerProviders>
         </LocaleProvider>
       </ThemeProvider>
     </QueryClientProvider>
-  );
+  )
 }
diff --git a/apps/web/src/components/ConfigurationForm.tsx b/apps/web/src/components/ConfigurationForm.tsx
index 4d8ab20a..f3b9538b 100644
--- a/apps/web/src/components/ConfigurationForm.tsx
+++ b/apps/web/src/components/ConfigurationForm.tsx
@@ -1,98 +1,94 @@
-"use client";
+'use client'
 
-import * as Label from "@radix-ui/react-label";
-import * as RadioGroup from "@radix-ui/react-radio-group";
-import * as Select from "@radix-ui/react-select";
-import * as Slider from "@radix-ui/react-slider";
-import * as Switch from "@radix-ui/react-switch";
-import * as Tabs from "@radix-ui/react-tabs";
-import type { FormApi } from "@tanstack/react-form";
-import { ChevronDown, Sparkles } from "lucide-react";
-import type { FlashcardFormState } from "@/app/create/page";
-import { css } from "../../styled-system/css";
-import { grid, hstack, stack } from "../../styled-system/patterns";
+import * as Label from '@radix-ui/react-label'
+import * as RadioGroup from '@radix-ui/react-radio-group'
+import * as Select from '@radix-ui/react-select'
+import * as Slider from '@radix-ui/react-slider'
+import * as Switch from '@radix-ui/react-switch'
+import * as Tabs from '@radix-ui/react-tabs'
+import type { FormApi } from '@tanstack/react-form'
+import { ChevronDown, Sparkles } from 'lucide-react'
+import type { FlashcardFormState } from '@/app/create/page'
+import { css } from '../../styled-system/css'
+import { grid, hstack, stack } from '../../styled-system/patterns'
 
 interface ConfigurationFormProps {
-  form: FormApi<FlashcardFormState>;
-  onGenerate: (formState: FlashcardFormState) => Promise<void>;
-  isGenerating: boolean;
+  form: FormApi<FlashcardFormState>
+  onGenerate: (formState: FlashcardFormState) => Promise<void>
+  isGenerating: boolean
 }
 
-export function ConfigurationForm({
-  form,
-  onGenerate,
-  isGenerating,
-}: ConfigurationFormProps) {
+export function ConfigurationForm({ form, onGenerate, isGenerating }: ConfigurationFormProps) {
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    onGenerate(form.state.values);
-  };
+    e.preventDefault()
+    onGenerate(form.state.values)
+  }
 
   return (
-    <form onSubmit={handleSubmit} className={stack({ gap: "6" })}>
-      <div className={stack({ gap: "2" })}>
+    <form onSubmit={handleSubmit} className={stack({ gap: '6' })}>
+      <div className={stack({ gap: '2' })}>
         <h2
           className={css({
-            fontSize: "2xl",
-            fontWeight: "bold",
-            color: "gray.900",
+            fontSize: '2xl',
+            fontWeight: 'bold',
+            color: 'gray.900',
           })}
         >
           Configuration
         </h2>
         <p
           className={css({
-            color: "gray.600",
+            color: 'gray.600',
           })}
         >
           Content, layout, and output settings
         </p>
       </div>
 
-      <Tabs.Root defaultValue="content" className={css({ w: "full" })}>
+      <Tabs.Root defaultValue="content" className={css({ w: 'full' })}>
         <Tabs.List
           className={css({
-            display: "flex",
-            gap: "1",
-            bg: "gray.100",
-            p: "1",
-            rounded: "xl",
+            display: 'flex',
+            gap: '1',
+            bg: 'gray.100',
+            p: '1',
+            rounded: 'xl',
           })}
         >
           {[
-            { value: "content", label: "📝 Content", icon: "🔢" },
-            { value: "layout", label: "📐 Layout", icon: "📐" },
-            { value: "output", label: "💾 Output", icon: "💾" },
+            { value: 'content', label: '📝 Content', icon: '🔢' },
+            { value: 'layout', label: '📐 Layout', icon: '📐' },
+            { value: 'output', label: '💾 Output', icon: '💾' },
           ].map((tab) => (
             <Tabs.Trigger
               key={tab.value}
               value={tab.value}
               className={css({
                 flex: 1,
-                px: "3",
-                py: "2",
-                fontSize: "sm",
-                fontWeight: "medium",
-                rounded: "lg",
-                transition: "all",
-                color: "gray.600",
-                _hover: { color: "gray.900" },
-                "&[data-state=active]": {
-                  bg: "white",
-                  color: "brand.600",
-                  shadow: "card",
+                px: '3',
+                py: '2',
+                fontSize: 'sm',
+                fontWeight: 'medium',
+                rounded: 'lg',
+                transition: 'all',
+                color: 'gray.600',
+                _hover: { color: 'gray.900' },
+                '&[data-state=active]': {
+                  bg: 'white',
+                  color: 'brand.600',
+                  shadow: 'card',
                 },
               })}
             >
-              <span className={css({ mr: "2" })}>{tab.icon}</span>
+              <span className={css({ mr: '2' })}>{tab.icon}</span>
               {tab.label}
             </Tabs.Trigger>
           ))}
         </Tabs.List>
 
         {/* Content Tab */}
-        <Tabs.Content value="content" className={css({ mt: "6" })}>
-          <div className={stack({ gap: "6" })}>
+        <Tabs.Content value="content" className={css({ mt: '6' })}>
+          <div className={stack({ gap: '6' })}>
             <FormField
               label="Number Range"
               description="Define which numbers to include (e.g., '0-99' or '1,2,5,10')"
@@ -100,7 +96,7 @@ export function ConfigurationForm({
               <form.Field name="range">
                 {(field) => (
                   <input
-                    value={field.state.value || ""}
+                    value={field.state.value || ''}
                     onChange={(e) => field.handleChange(e.target.value)}
                     placeholder="0-99"
                     className={inputStyles}
@@ -109,30 +105,22 @@ export function ConfigurationForm({
               </form.Field>
             </FormField>
 
-            <div className={grid({ columns: 2, gap: "4" })}>
-              <FormField
-                label="Step Size"
-                description="For ranges, increment by this amount"
-              >
+            <div className={grid({ columns: 2, gap: '4' })}>
+              <FormField label="Step Size" description="For ranges, increment by this amount">
                 <form.Field name="step">
                   {(field) => (
                     <input
                       type="number"
                       min="1"
                       value={field.state.value || 1}
-                      onChange={(e) =>
-                        field.handleChange(parseInt(e.target.value, 10))
-                      }
+                      onChange={(e) => field.handleChange(parseInt(e.target.value, 10))}
                       className={inputStyles}
                     />
                   )}
                 </form.Field>
               </FormField>
 
-              <FormField
-                label="Shuffle Cards"
-                description="Randomize the order"
-              >
+              <FormField label="Shuffle Cards" description="Randomize the order">
                 <form.Field name="shuffle">
                   {(field) => (
                     <SwitchField
@@ -147,13 +135,10 @@ export function ConfigurationForm({
         </Tabs.Content>
 
         {/* Layout Tab */}
-        <Tabs.Content value="layout" className={css({ mt: "6" })}>
-          <div className={stack({ gap: "6" })}>
-            <div className={grid({ columns: 2, gap: "4" })}>
-              <FormField
-                label="Cards Per Page"
-                description="Number of flashcards on each page"
-              >
+        <Tabs.Content value="layout" className={css({ mt: '6' })}>
+          <div className={stack({ gap: '6' })}>
+            <div className={grid({ columns: 2, gap: '4' })}>
+              <FormField label="Cards Per Page" description="Number of flashcards on each page">
                 <form.Field name="cardsPerPage">
                   {(field) => (
                     <SliderField
@@ -168,22 +153,17 @@ export function ConfigurationForm({
                 </form.Field>
               </FormField>
 
-              <FormField
-                label="Paper Size"
-                description="Output paper dimensions"
-              >
+              <FormField label="Paper Size" description="Output paper dimensions">
                 <form.Field name="paperSize">
                   {(field) => (
                     <SelectField
-                      value={field.state.value || "us-letter"}
-                      onValueChange={(value) =>
-                        field.handleChange(value as any)
-                      }
+                      value={field.state.value || 'us-letter'}
+                      onValueChange={(value) => field.handleChange(value as any)}
                       options={[
-                        { value: "us-letter", label: 'US Letter (8.5×11")' },
-                        { value: "a4", label: "A4 (210×297mm)" },
-                        { value: "a3", label: "A3 (297×420mm)" },
-                        { value: "a5", label: "A5 (148×210mm)" },
+                        { value: 'us-letter', label: 'US Letter (8.5×11")' },
+                        { value: 'a4', label: 'A4 (210×297mm)' },
+                        { value: 'a3', label: 'A3 (297×420mm)' },
+                        { value: 'a5', label: 'A5 (148×210mm)' },
                       ]}
                     />
                   )}
@@ -195,18 +175,18 @@ export function ConfigurationForm({
               <form.Field name="orientation">
                 {(field) => (
                   <RadioGroupField
-                    value={field.state.value || "portrait"}
+                    value={field.state.value || 'portrait'}
                     onValueChange={(value) => field.handleChange(value as any)}
                     options={[
                       {
-                        value: "portrait",
-                        label: "📄 Portrait",
-                        desc: "Taller than wide",
+                        value: 'portrait',
+                        label: '📄 Portrait',
+                        desc: 'Taller than wide',
                       },
                       {
-                        value: "landscape",
-                        label: "📃 Landscape",
-                        desc: "Wider than tall",
+                        value: 'landscape',
+                        label: '📃 Landscape',
+                        desc: 'Wider than tall',
                       },
                     ]}
                   />
@@ -214,11 +194,8 @@ export function ConfigurationForm({
               </form.Field>
             </FormField>
 
-            <div className={grid({ columns: 2, gap: "4" })}>
-              <FormField
-                label="Show Cut Marks"
-                description="Add guides for cutting cards"
-              >
+            <div className={grid({ columns: 2, gap: '4' })}>
+              <FormField label="Show Cut Marks" description="Add guides for cutting cards">
                 <form.Field name="showCutMarks">
                   {(field) => (
                     <SwitchField
@@ -247,37 +224,34 @@ export function ConfigurationForm({
         </Tabs.Content>
 
         {/* Output Tab */}
-        <Tabs.Content value="output" className={css({ mt: "6" })}>
-          <div className={stack({ gap: "6" })}>
-            <FormField
-              label="Output Format"
-              description="Choose your preferred file format"
-            >
+        <Tabs.Content value="output" className={css({ mt: '6' })}>
+          <div className={stack({ gap: '6' })}>
+            <FormField label="Output Format" description="Choose your preferred file format">
               <form.Field name="format">
                 {(field) => (
                   <RadioGroupField
-                    value={field.state.value || "pdf"}
+                    value={field.state.value || 'pdf'}
                     onValueChange={(value) => field.handleChange(value as any)}
                     options={[
                       {
-                        value: "pdf",
-                        label: "📄 PDF",
-                        desc: "Print-ready vector document",
+                        value: 'pdf',
+                        label: '📄 PDF',
+                        desc: 'Print-ready vector document',
                       },
                       {
-                        value: "html",
-                        label: "🌐 HTML",
-                        desc: "Interactive web flashcards",
+                        value: 'html',
+                        label: '🌐 HTML',
+                        desc: 'Interactive web flashcards',
                       },
                       {
-                        value: "svg",
-                        label: "🖼️ SVG",
-                        desc: "Scalable vector images",
+                        value: 'svg',
+                        label: '🖼️ SVG',
+                        desc: 'Scalable vector images',
                       },
                       {
-                        value: "png",
-                        label: "📷 PNG",
-                        desc: "High-resolution images",
+                        value: 'png',
+                        label: '📷 PNG',
+                        desc: 'High-resolution images',
                       },
                     ]}
                   />
@@ -285,10 +259,7 @@ export function ConfigurationForm({
               </form.Field>
             </FormField>
 
-            <FormField
-              label="Scale Factor"
-              description="Adjust the overall size of flashcards"
-            >
+            <FormField label="Scale Factor" description="Adjust the overall size of flashcards">
               <form.Field name="scaleFactor">
                 {(field) => (
                   <SliderField
@@ -309,48 +280,48 @@ export function ConfigurationForm({
       {/* Generate Button */}
       <div
         className={css({
-          pt: "6",
-          borderTop: "1px solid",
-          borderColor: "gray.200",
+          pt: '6',
+          borderTop: '1px solid',
+          borderColor: 'gray.200',
         })}
       >
         <button
           type="submit"
           disabled={isGenerating}
           className={css({
-            w: "full",
-            px: "6",
-            py: "4",
-            bg: "brand.600",
-            color: "white",
-            fontSize: "lg",
-            fontWeight: "semibold",
-            rounded: "xl",
-            shadow: "card",
-            transition: "all",
-            cursor: isGenerating ? "not-allowed" : "pointer",
-            opacity: isGenerating ? "0.7" : "1",
+            w: 'full',
+            px: '6',
+            py: '4',
+            bg: 'brand.600',
+            color: 'white',
+            fontSize: 'lg',
+            fontWeight: 'semibold',
+            rounded: 'xl',
+            shadow: 'card',
+            transition: 'all',
+            cursor: isGenerating ? 'not-allowed' : 'pointer',
+            opacity: isGenerating ? '0.7' : '1',
             _hover: isGenerating
               ? {}
               : {
-                  bg: "brand.700",
-                  transform: "translateY(-1px)",
-                  shadow: "modal",
+                  bg: 'brand.700',
+                  transform: 'translateY(-1px)',
+                  shadow: 'modal',
                 },
           })}
         >
-          <span className={hstack({ gap: "3", justify: "center" })}>
+          <span className={hstack({ gap: '3', justify: 'center' })}>
             {isGenerating ? (
               <>
                 <div
                   className={css({
-                    w: "5",
-                    h: "5",
-                    border: "2px solid",
-                    borderColor: "white",
-                    borderTopColor: "transparent",
-                    rounded: "full",
-                    animation: "spin 1s linear infinite",
+                    w: '5',
+                    h: '5',
+                    border: '2px solid',
+                    borderColor: 'white',
+                    borderTopColor: 'transparent',
+                    rounded: 'full',
+                    animation: 'spin 1s linear infinite',
                   })}
                 />
                 Generating...
@@ -365,7 +336,7 @@ export function ConfigurationForm({
         </button>
       </div>
     </form>
-  );
+  )
 }
 
 // Helper Components
@@ -374,17 +345,17 @@ function FormField({
   description,
   children,
 }: {
-  label: string;
-  description?: string;
-  children: React.ReactNode;
+  label: string
+  description?: string
+  children: React.ReactNode
 }) {
   return (
-    <div className={stack({ gap: "2" })}>
+    <div className={stack({ gap: '2' })}>
       <Label.Root
         className={css({
-          fontSize: "sm",
-          fontWeight: "semibold",
-          color: "gray.900",
+          fontSize: 'sm',
+          fontWeight: 'semibold',
+          color: 'gray.900',
         })}
       >
         {label}
@@ -392,8 +363,8 @@ function FormField({
       {description && (
         <p
           className={css({
-            fontSize: "xs",
-            color: "gray.600",
+            fontSize: 'xs',
+            color: 'gray.600',
           })}
         >
           {description}
@@ -401,46 +372,46 @@ function FormField({
       )}
       {children}
     </div>
-  );
+  )
 }
 
 function SwitchField({
   checked,
   onCheckedChange,
 }: {
-  checked: boolean;
-  onCheckedChange: (checked: boolean) => void;
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
 }) {
   return (
     <Switch.Root
       checked={checked}
       onCheckedChange={onCheckedChange}
       className={css({
-        w: "11",
-        h: "6",
-        bg: checked ? "brand.600" : "gray.300",
-        rounded: "full",
-        position: "relative",
-        transition: "all",
-        cursor: "pointer",
-        _hover: { bg: checked ? "brand.700" : "gray.400" },
+        w: '11',
+        h: '6',
+        bg: checked ? 'brand.600' : 'gray.300',
+        rounded: 'full',
+        position: 'relative',
+        transition: 'all',
+        cursor: 'pointer',
+        _hover: { bg: checked ? 'brand.700' : 'gray.400' },
       })}
     >
       <Switch.Thumb
         className={css({
-          display: "block",
-          w: "5",
-          h: "5",
-          bg: "white",
-          rounded: "full",
-          shadow: "card",
-          transition: "transform 0.2s",
-          transform: checked ? "translateX(20px)" : "translateX(0px)",
-          willChange: "transform",
+          display: 'block',
+          w: '5',
+          h: '5',
+          bg: 'white',
+          rounded: 'full',
+          shadow: 'card',
+          transition: 'transform 0.2s',
+          transform: checked ? 'translateX(20px)' : 'translateX(0px)',
+          willChange: 'transform',
         })}
       />
     </Switch.Root>
-  );
+  )
 }
 
 function RadioGroupField({
@@ -448,62 +419,55 @@ function RadioGroupField({
   onValueChange,
   options,
 }: {
-  value: string;
-  onValueChange: (value: string) => void;
-  options: Array<{ value: string; label: string; desc?: string }>;
+  value: string
+  onValueChange: (value: string) => void
+  options: Array<{ value: string; label: string; desc?: string }>
 }) {
   return (
-    <RadioGroup.Root
-      value={value}
-      onValueChange={onValueChange}
-      className={stack({ gap: "3" })}
-    >
+    <RadioGroup.Root value={value} onValueChange={onValueChange} className={stack({ gap: '3' })}>
       {options.map((option) => (
-        <div
-          key={option.value}
-          className={hstack({ gap: "3", alignItems: "start" })}
-        >
+        <div key={option.value} className={hstack({ gap: '3', alignItems: 'start' })}>
           <RadioGroup.Item
             value={option.value}
             className={css({
-              w: "5",
-              h: "5",
-              rounded: "full",
-              border: "2px solid",
-              borderColor: "gray.300",
-              bg: "white",
-              cursor: "pointer",
-              transition: "all",
-              _hover: { borderColor: "brand.400" },
-              "&[data-state=checked]": { borderColor: "brand.600" },
+              w: '5',
+              h: '5',
+              rounded: 'full',
+              border: '2px solid',
+              borderColor: 'gray.300',
+              bg: 'white',
+              cursor: 'pointer',
+              transition: 'all',
+              _hover: { borderColor: 'brand.400' },
+              '&[data-state=checked]': { borderColor: 'brand.600' },
             })}
           >
             <RadioGroup.Indicator
               className={css({
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                w: "full",
-                h: "full",
-                position: "relative",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                w: 'full',
+                h: 'full',
+                position: 'relative',
                 _after: {
                   content: '""',
-                  display: "block",
-                  w: "2",
-                  h: "2",
-                  rounded: "full",
-                  bg: "brand.600",
+                  display: 'block',
+                  w: '2',
+                  h: '2',
+                  rounded: 'full',
+                  bg: 'brand.600',
                 },
               })}
             />
           </RadioGroup.Item>
-          <div className={stack({ gap: "1", flex: 1 })}>
+          <div className={stack({ gap: '1', flex: 1 })}>
             <label
               className={css({
-                fontSize: "sm",
-                fontWeight: "medium",
-                color: "gray.900",
-                cursor: "pointer",
+                fontSize: 'sm',
+                fontWeight: 'medium',
+                color: 'gray.900',
+                cursor: 'pointer',
               })}
             >
               {option.label}
@@ -511,8 +475,8 @@ function RadioGroupField({
             {option.desc && (
               <p
                 className={css({
-                  fontSize: "xs",
-                  color: "gray.600",
+                  fontSize: 'xs',
+                  color: 'gray.600',
                 })}
               >
                 {option.desc}
@@ -522,19 +486,19 @@ function RadioGroupField({
         </div>
       ))}
     </RadioGroup.Root>
-  );
+  )
 }
 
 function SelectField({
   value,
   onValueChange,
   options,
-  placeholder = "Select...",
+  placeholder = 'Select...',
 }: {
-  value: string;
-  onValueChange: (value: string) => void;
-  options: Array<{ value: string; label: string }>;
-  placeholder?: string;
+  value: string
+  onValueChange: (value: string) => void
+  options: Array<{ value: string; label: string }>
+  placeholder?: string
 }) {
   return (
     <Select.Root value={value} onValueChange={onValueChange}>
@@ -548,12 +512,12 @@ function SelectField({
       <Select.Portal>
         <Select.Content
           className={css({
-            bg: "white",
-            rounded: "xl",
-            shadow: "modal",
-            border: "1px solid",
-            borderColor: "gray.200",
-            p: "2",
+            bg: 'white',
+            rounded: 'xl',
+            shadow: 'modal',
+            border: '1px solid',
+            borderColor: 'gray.200',
+            p: '2',
             zIndex: 50,
           })}
         >
@@ -563,16 +527,16 @@ function SelectField({
                 key={option.value}
                 value={option.value}
                 className={css({
-                  px: "3",
-                  py: "2",
-                  fontSize: "sm",
-                  rounded: "lg",
-                  cursor: "pointer",
-                  transition: "all",
-                  _hover: { bg: "brand.50" },
-                  "&[data-state=checked]": {
-                    bg: "brand.100",
-                    color: "brand.800",
+                  px: '3',
+                  py: '2',
+                  fontSize: 'sm',
+                  rounded: 'lg',
+                  cursor: 'pointer',
+                  transition: 'all',
+                  _hover: { bg: 'brand.50' },
+                  '&[data-state=checked]': {
+                    bg: 'brand.100',
+                    color: 'brand.800',
                   },
                 })}
               >
@@ -583,7 +547,7 @@ function SelectField({
         </Select.Content>
       </Select.Portal>
     </Select.Root>
-  );
+  )
 }
 
 function SliderField({
@@ -594,31 +558,27 @@ function SliderField({
   step,
   formatValue,
 }: {
-  value: number[];
-  onValueChange: (value: number[]) => void;
-  min: number;
-  max: number;
-  step: number;
-  formatValue: (value: number) => string;
+  value: number[]
+  onValueChange: (value: number[]) => void
+  min: number
+  max: number
+  step: number
+  formatValue: (value: number) => string
 }) {
   return (
-    <div className={stack({ gap: "3" })}>
-      <div className={hstack({ justify: "space-between" })}>
-        <span className={css({ fontSize: "sm", color: "gray.600" })}>
-          {formatValue(min)}
-        </span>
+    <div className={stack({ gap: '3' })}>
+      <div className={hstack({ justify: 'space-between' })}>
+        <span className={css({ fontSize: 'sm', color: 'gray.600' })}>{formatValue(min)}</span>
         <span
           className={css({
-            fontSize: "sm",
-            fontWeight: "medium",
-            color: "brand.600",
+            fontSize: 'sm',
+            fontWeight: 'medium',
+            color: 'brand.600',
           })}
         >
           {formatValue(value[0])}
         </span>
-        <span className={css({ fontSize: "sm", color: "gray.600" })}>
-          {formatValue(max)}
-        </span>
+        <span className={css({ fontSize: 'sm', color: 'gray.600' })}>{formatValue(max)}</span>
       </div>
 
       <Slider.Root
@@ -628,71 +588,71 @@ function SliderField({
         max={max}
         step={step}
         className={css({
-          position: "relative",
-          display: "flex",
-          alignItems: "center",
-          userSelect: "none",
-          touchAction: "none",
-          w: "full",
-          h: "5",
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          userSelect: 'none',
+          touchAction: 'none',
+          w: 'full',
+          h: '5',
         })}
       >
         <Slider.Track
           className={css({
-            bg: "gray.200",
-            position: "relative",
+            bg: 'gray.200',
+            position: 'relative',
             flexGrow: 1,
-            rounded: "full",
-            h: "2",
+            rounded: 'full',
+            h: '2',
           })}
         >
           <Slider.Range
             className={css({
-              position: "absolute",
-              bg: "brand.600",
-              rounded: "full",
-              h: "full",
+              position: 'absolute',
+              bg: 'brand.600',
+              rounded: 'full',
+              h: 'full',
             })}
           />
         </Slider.Track>
         <Slider.Thumb
           className={css({
-            display: "block",
-            w: "5",
-            h: "5",
-            bg: "white",
-            shadow: "card",
-            rounded: "full",
-            border: "2px solid",
-            borderColor: "brand.600",
-            cursor: "pointer",
-            transition: "all",
-            _hover: { transform: "scale(1.1)" },
+            display: 'block',
+            w: '5',
+            h: '5',
+            bg: 'white',
+            shadow: 'card',
+            rounded: 'full',
+            border: '2px solid',
+            borderColor: 'brand.600',
+            cursor: 'pointer',
+            transition: 'all',
+            _hover: { transform: 'scale(1.1)' },
             _focus: {
-              outline: "none",
-              boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.1)",
+              outline: 'none',
+              boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)',
             },
           })}
         />
       </Slider.Root>
     </div>
-  );
+  )
 }
 
 const inputStyles = css({
-  w: "full",
-  px: "4",
-  py: "3",
-  bg: "white",
-  border: "1px solid",
-  borderColor: "gray.300",
-  rounded: "lg",
-  fontSize: "sm",
-  transition: "all",
-  _hover: { borderColor: "gray.400" },
+  w: 'full',
+  px: '4',
+  py: '3',
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'gray.300',
+  rounded: 'lg',
+  fontSize: 'sm',
+  transition: 'all',
+  _hover: { borderColor: 'gray.400' },
   _focus: {
-    outline: "none",
-    borderColor: "brand.500",
-    boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.1)",
+    outline: 'none',
+    borderColor: 'brand.500',
+    boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)',
   },
-});
+})
diff --git a/apps/web/src/components/ConfigurationFormWithoutGenerate.tsx b/apps/web/src/components/ConfigurationFormWithoutGenerate.tsx
index 2064202e..49627fe3 100644
--- a/apps/web/src/components/ConfigurationFormWithoutGenerate.tsx
+++ b/apps/web/src/components/ConfigurationFormWithoutGenerate.tsx
@@ -1,40 +1,38 @@
-"use client";
+'use client'
 
-import * as Label from "@radix-ui/react-label";
-import * as RadioGroup from "@radix-ui/react-radio-group";
-import * as Select from "@radix-ui/react-select";
-import * as Slider from "@radix-ui/react-slider";
-import * as Switch from "@radix-ui/react-switch";
-import * as Tabs from "@radix-ui/react-tabs";
-import type { FormApi } from "@tanstack/react-form";
-import { ChevronDown } from "lucide-react";
-import type { FlashcardFormState } from "@/app/create/page";
-import { css } from "../../styled-system/css";
-import { grid, hstack, stack } from "../../styled-system/patterns";
-import { FormatSelectField } from "./FormatSelectField";
+import * as Label from '@radix-ui/react-label'
+import * as RadioGroup from '@radix-ui/react-radio-group'
+import * as Select from '@radix-ui/react-select'
+import * as Slider from '@radix-ui/react-slider'
+import * as Switch from '@radix-ui/react-switch'
+import * as Tabs from '@radix-ui/react-tabs'
+import type { FormApi } from '@tanstack/react-form'
+import { ChevronDown } from 'lucide-react'
+import type { FlashcardFormState } from '@/app/create/page'
+import { css } from '../../styled-system/css'
+import { grid, hstack, stack } from '../../styled-system/patterns'
+import { FormatSelectField } from './FormatSelectField'
 
 interface ConfigurationFormProps {
-  form: FormApi<FlashcardFormState>;
+  form: FormApi<FlashcardFormState>
 }
 
-export function ConfigurationFormWithoutGenerate({
-  form,
-}: ConfigurationFormProps) {
+export function ConfigurationFormWithoutGenerate({ form }: ConfigurationFormProps) {
   return (
-    <div className={stack({ gap: "6" })}>
-      <div className={stack({ gap: "2" })}>
+    <div className={stack({ gap: '6' })}>
+      <div className={stack({ gap: '2' })}>
         <h2
           className={css({
-            fontSize: "2xl",
-            fontWeight: "bold",
-            color: "gray.900",
+            fontSize: '2xl',
+            fontWeight: 'bold',
+            color: 'gray.900',
           })}
         >
           Configuration
         </h2>
         <p
           className={css({
-            color: "gray.600",
+            color: 'gray.600',
           })}
         >
           Content, layout, and output settings
@@ -43,54 +41,54 @@ export function ConfigurationFormWithoutGenerate({
 
       <form.Field name="format">
         {(formatField) => {
-          const isPdf = formatField.state.value === "pdf";
+          const isPdf = formatField.state.value === 'pdf'
           // Auto-switch away from layout tab if format changed to non-PDF
-          const defaultTab = !isPdf ? "content" : "content";
+          const defaultTab = !isPdf ? 'content' : 'content'
 
           return (
-            <Tabs.Root defaultValue={defaultTab} className={css({ w: "full" })}>
+            <Tabs.Root defaultValue={defaultTab} className={css({ w: 'full' })}>
               <Tabs.List
                 className={css({
-                  display: "flex",
-                  gap: "1",
-                  bg: "gray.100",
-                  p: "1",
-                  rounded: "xl",
+                  display: 'flex',
+                  gap: '1',
+                  bg: 'gray.100',
+                  p: '1',
+                  rounded: 'xl',
                 })}
               >
                 {[
-                  { value: "content", label: "📝 Content", icon: "🔢" },
-                  { value: "output", label: "💾 Output", icon: "💾" },
+                  { value: 'content', label: '📝 Content', icon: '🔢' },
+                  { value: 'output', label: '💾 Output', icon: '💾' },
                 ].map((tab) => (
                   <Tabs.Trigger
                     key={tab.value}
                     value={tab.value}
                     className={css({
                       flex: 1,
-                      px: "3",
-                      py: "2",
-                      fontSize: "sm",
-                      fontWeight: "medium",
-                      rounded: "lg",
-                      transition: "all",
-                      color: "gray.600",
-                      _hover: { color: "gray.900" },
-                      "&[data-state=active]": {
-                        bg: "white",
-                        color: "brand.600",
-                        shadow: "card",
+                      px: '3',
+                      py: '2',
+                      fontSize: 'sm',
+                      fontWeight: 'medium',
+                      rounded: 'lg',
+                      transition: 'all',
+                      color: 'gray.600',
+                      _hover: { color: 'gray.900' },
+                      '&[data-state=active]': {
+                        bg: 'white',
+                        color: 'brand.600',
+                        shadow: 'card',
                       },
                     })}
                   >
-                    <span className={css({ mr: "2" })}>{tab.icon}</span>
+                    <span className={css({ mr: '2' })}>{tab.icon}</span>
                     {tab.label}
                   </Tabs.Trigger>
                 ))}
               </Tabs.List>
 
               {/* Content Tab */}
-              <Tabs.Content value="content" className={css({ mt: "6" })}>
-                <div className={stack({ gap: "6" })}>
+              <Tabs.Content value="content" className={css({ mt: '6' })}>
+                <div className={stack({ gap: '6' })}>
                   <FormField
                     label="Number Range"
                     description="Define which numbers to include (e.g., '0-99' or '1,2,5,10')"
@@ -98,7 +96,7 @@ export function ConfigurationFormWithoutGenerate({
                     <form.Field name="range">
                       {(field) => (
                         <input
-                          value={field.state.value || ""}
+                          value={field.state.value || ''}
                           onChange={(e) => field.handleChange(e.target.value)}
                           placeholder="0-99"
                           className={inputStyles}
@@ -107,30 +105,22 @@ export function ConfigurationFormWithoutGenerate({
                     </form.Field>
                   </FormField>
 
-                  <div className={grid({ columns: 2, gap: "4" })}>
-                    <FormField
-                      label="Step Size"
-                      description="For ranges, increment by this amount"
-                    >
+                  <div className={grid({ columns: 2, gap: '4' })}>
+                    <FormField label="Step Size" description="For ranges, increment by this amount">
                       <form.Field name="step">
                         {(field) => (
                           <input
                             type="number"
                             min="1"
                             value={field.state.value || 1}
-                            onChange={(e) =>
-                              field.handleChange(parseInt(e.target.value, 10))
-                            }
+                            onChange={(e) => field.handleChange(parseInt(e.target.value, 10))}
                             className={inputStyles}
                           />
                         )}
                       </form.Field>
                     </FormField>
 
-                    <FormField
-                      label="Shuffle Cards"
-                      description="Randomize the order"
-                    >
+                    <FormField label="Shuffle Cards" description="Randomize the order">
                       <form.Field name="shuffle">
                         {(field) => (
                           <SwitchField
@@ -145,19 +135,14 @@ export function ConfigurationFormWithoutGenerate({
               </Tabs.Content>
 
               {/* Output Tab */}
-              <Tabs.Content value="output" className={css({ mt: "6" })}>
-                <div className={stack({ gap: "6" })}>
-                  <FormField
-                    label="Output Format"
-                    description="Choose your preferred file format"
-                  >
+              <Tabs.Content value="output" className={css({ mt: '6' })}>
+                <div className={stack({ gap: '6' })}>
+                  <FormField label="Output Format" description="Choose your preferred file format">
                     <form.Field name="format">
                       {(field) => (
                         <FormatSelectField
-                          value={field.state.value || "pdf"}
-                          onValueChange={(value) =>
-                            field.handleChange(value as any)
-                          }
+                          value={field.state.value || 'pdf'}
+                          onValueChange={(value) => field.handleChange(value as any)}
                         />
                       )}
                     </form.Field>
@@ -166,42 +151,41 @@ export function ConfigurationFormWithoutGenerate({
                   {/* PDF-Specific Options */}
                   <form.Field name="format">
                     {(formatField) => {
-                      const isPdf = formatField.state.value === "pdf";
+                      const isPdf = formatField.state.value === 'pdf'
 
                       return isPdf ? (
-                        <div className={stack({ gap: "6" })}>
+                        <div className={stack({ gap: '6' })}>
                           <div
                             className={css({
-                              p: "4",
-                              bg: "blue.50",
-                              border: "1px solid",
-                              borderColor: "blue.200",
-                              rounded: "xl",
+                              p: '4',
+                              bg: 'blue.50',
+                              border: '1px solid',
+                              borderColor: 'blue.200',
+                              rounded: 'xl',
                             })}
                           >
-                            <div className={stack({ gap: "4" })}>
-                              <div className={stack({ gap: "2" })}>
+                            <div className={stack({ gap: '4' })}>
+                              <div className={stack({ gap: '2' })}>
                                 <h3
                                   className={css({
-                                    fontSize: "md",
-                                    fontWeight: "semibold",
-                                    color: "blue.800",
+                                    fontSize: 'md',
+                                    fontWeight: 'semibold',
+                                    color: 'blue.800',
                                   })}
                                 >
                                   📄 PDF Layout Options
                                 </h3>
                                 <p
                                   className={css({
-                                    fontSize: "sm",
-                                    color: "blue.700",
+                                    fontSize: 'sm',
+                                    color: 'blue.700',
                                   })}
                                 >
-                                  Configure page layout and printing options for
-                                  your PDF
+                                  Configure page layout and printing options for your PDF
                                 </p>
                               </div>
 
-                              <div className={grid({ columns: 2, gap: "4" })}>
+                              <div className={grid({ columns: 2, gap: '4' })}>
                                 <FormField
                                   label="Cards Per Page"
                                   description="Number of flashcards on each page"
@@ -210,47 +194,38 @@ export function ConfigurationFormWithoutGenerate({
                                     {(field) => (
                                       <SliderField
                                         value={[field.state.value || 6]}
-                                        onValueChange={([value]) =>
-                                          field.handleChange(value)
-                                        }
+                                        onValueChange={([value]) => field.handleChange(value)}
                                         min={1}
                                         max={12}
                                         step={1}
-                                        formatValue={(value) =>
-                                          `${value} cards`
-                                        }
+                                        formatValue={(value) => `${value} cards`}
                                       />
                                     )}
                                   </form.Field>
                                 </FormField>
 
-                                <FormField
-                                  label="Paper Size"
-                                  description="Output paper dimensions"
-                                >
+                                <FormField label="Paper Size" description="Output paper dimensions">
                                   <form.Field name="paperSize">
                                     {(field) => (
                                       <SelectField
-                                        value={field.state.value || "us-letter"}
-                                        onValueChange={(value) =>
-                                          field.handleChange(value as any)
-                                        }
+                                        value={field.state.value || 'us-letter'}
+                                        onValueChange={(value) => field.handleChange(value as any)}
                                         options={[
                                           {
-                                            value: "us-letter",
+                                            value: 'us-letter',
                                             label: 'US Letter (8.5×11")',
                                           },
                                           {
-                                            value: "a4",
-                                            label: "A4 (210×297mm)",
+                                            value: 'a4',
+                                            label: 'A4 (210×297mm)',
                                           },
                                           {
-                                            value: "a3",
-                                            label: "A3 (297×420mm)",
+                                            value: 'a3',
+                                            label: 'A3 (297×420mm)',
                                           },
                                           {
-                                            value: "a5",
-                                            label: "A5 (148×210mm)",
+                                            value: 'a5',
+                                            label: 'A5 (148×210mm)',
                                           },
                                         ]}
                                       />
@@ -259,27 +234,22 @@ export function ConfigurationFormWithoutGenerate({
                                 </FormField>
                               </div>
 
-                              <FormField
-                                label="Orientation"
-                                description="Page layout direction"
-                              >
+                              <FormField label="Orientation" description="Page layout direction">
                                 <form.Field name="orientation">
                                   {(field) => (
                                     <RadioGroupField
-                                      value={field.state.value || "portrait"}
-                                      onValueChange={(value) =>
-                                        field.handleChange(value as any)
-                                      }
+                                      value={field.state.value || 'portrait'}
+                                      onValueChange={(value) => field.handleChange(value as any)}
                                       options={[
                                         {
-                                          value: "portrait",
-                                          label: "📄 Portrait",
-                                          desc: "Taller than wide",
+                                          value: 'portrait',
+                                          label: '📄 Portrait',
+                                          desc: 'Taller than wide',
                                         },
                                         {
-                                          value: "landscape",
-                                          label: "📃 Landscape",
-                                          desc: "Wider than tall",
+                                          value: 'landscape',
+                                          label: '📃 Landscape',
+                                          desc: 'Wider than tall',
                                         },
                                       ]}
                                     />
@@ -287,7 +257,7 @@ export function ConfigurationFormWithoutGenerate({
                                 </form.Field>
                               </FormField>
 
-                              <div className={grid({ columns: 2, gap: "4" })}>
+                              <div className={grid({ columns: 2, gap: '4' })}>
                                 <FormField
                                   label="Show Cut Marks"
                                   description="Add guides for cutting cards"
@@ -319,7 +289,7 @@ export function ConfigurationFormWithoutGenerate({
                             </div>
                           </div>
                         </div>
-                      ) : null;
+                      ) : null
                     }}
                   </form.Field>
 
@@ -343,11 +313,11 @@ export function ConfigurationFormWithoutGenerate({
                 </div>
               </Tabs.Content>
             </Tabs.Root>
-          );
+          )
         }}
       </form.Field>
     </div>
-  );
+  )
 }
 
 // Helper Components
@@ -356,17 +326,17 @@ function FormField({
   description,
   children,
 }: {
-  label: string;
-  description?: string;
-  children: React.ReactNode;
+  label: string
+  description?: string
+  children: React.ReactNode
 }) {
   return (
-    <div className={stack({ gap: "2" })}>
+    <div className={stack({ gap: '2' })}>
       <Label.Root
         className={css({
-          fontSize: "sm",
-          fontWeight: "semibold",
-          color: "gray.900",
+          fontSize: 'sm',
+          fontWeight: 'semibold',
+          color: 'gray.900',
         })}
       >
         {label}
@@ -374,8 +344,8 @@ function FormField({
       {description && (
         <p
           className={css({
-            fontSize: "xs",
-            color: "gray.600",
+            fontSize: 'xs',
+            color: 'gray.600',
           })}
         >
           {description}
@@ -383,46 +353,46 @@ function FormField({
       )}
       {children}
     </div>
-  );
+  )
 }
 
 function SwitchField({
   checked,
   onCheckedChange,
 }: {
-  checked: boolean;
-  onCheckedChange: (checked: boolean) => void;
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
 }) {
   return (
     <Switch.Root
       checked={checked}
       onCheckedChange={onCheckedChange}
       className={css({
-        w: "11",
-        h: "6",
-        bg: checked ? "brand.600" : "gray.300",
-        rounded: "full",
-        position: "relative",
-        transition: "all",
-        cursor: "pointer",
-        _hover: { bg: checked ? "brand.700" : "gray.400" },
+        w: '11',
+        h: '6',
+        bg: checked ? 'brand.600' : 'gray.300',
+        rounded: 'full',
+        position: 'relative',
+        transition: 'all',
+        cursor: 'pointer',
+        _hover: { bg: checked ? 'brand.700' : 'gray.400' },
       })}
     >
       <Switch.Thumb
         className={css({
-          display: "block",
-          w: "5",
-          h: "5",
-          bg: "white",
-          rounded: "full",
-          shadow: "card",
-          transition: "transform 0.2s",
-          transform: checked ? "translateX(20px)" : "translateX(0px)",
-          willChange: "transform",
+          display: 'block',
+          w: '5',
+          h: '5',
+          bg: 'white',
+          rounded: 'full',
+          shadow: 'card',
+          transition: 'transform 0.2s',
+          transform: checked ? 'translateX(20px)' : 'translateX(0px)',
+          willChange: 'transform',
         })}
       />
     </Switch.Root>
-  );
+  )
 }
 
 function RadioGroupField({
@@ -430,62 +400,55 @@ function RadioGroupField({
   onValueChange,
   options,
 }: {
-  value: string;
-  onValueChange: (value: string) => void;
-  options: Array<{ value: string; label: string; desc?: string }>;
+  value: string
+  onValueChange: (value: string) => void
+  options: Array<{ value: string; label: string; desc?: string }>
 }) {
   return (
-    <RadioGroup.Root
-      value={value}
-      onValueChange={onValueChange}
-      className={stack({ gap: "3" })}
-    >
+    <RadioGroup.Root value={value} onValueChange={onValueChange} className={stack({ gap: '3' })}>
       {options.map((option) => (
-        <div
-          key={option.value}
-          className={hstack({ gap: "3", alignItems: "start" })}
-        >
+        <div key={option.value} className={hstack({ gap: '3', alignItems: 'start' })}>
           <RadioGroup.Item
             value={option.value}
             className={css({
-              w: "5",
-              h: "5",
-              rounded: "full",
-              border: "2px solid",
-              borderColor: "gray.300",
-              bg: "white",
-              cursor: "pointer",
-              transition: "all",
-              _hover: { borderColor: "brand.400" },
-              "&[data-state=checked]": { borderColor: "brand.600" },
+              w: '5',
+              h: '5',
+              rounded: 'full',
+              border: '2px solid',
+              borderColor: 'gray.300',
+              bg: 'white',
+              cursor: 'pointer',
+              transition: 'all',
+              _hover: { borderColor: 'brand.400' },
+              '&[data-state=checked]': { borderColor: 'brand.600' },
             })}
           >
             <RadioGroup.Indicator
               className={css({
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                w: "full",
-                h: "full",
-                position: "relative",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                w: 'full',
+                h: 'full',
+                position: 'relative',
                 _after: {
                   content: '""',
-                  display: "block",
-                  w: "2",
-                  h: "2",
-                  rounded: "full",
-                  bg: "brand.600",
+                  display: 'block',
+                  w: '2',
+                  h: '2',
+                  rounded: 'full',
+                  bg: 'brand.600',
                 },
               })}
             />
           </RadioGroup.Item>
-          <div className={stack({ gap: "1", flex: 1 })}>
+          <div className={stack({ gap: '1', flex: 1 })}>
             <label
               className={css({
-                fontSize: "sm",
-                fontWeight: "medium",
-                color: "gray.900",
-                cursor: "pointer",
+                fontSize: 'sm',
+                fontWeight: 'medium',
+                color: 'gray.900',
+                cursor: 'pointer',
               })}
             >
               {option.label}
@@ -493,8 +456,8 @@ function RadioGroupField({
             {option.desc && (
               <p
                 className={css({
-                  fontSize: "xs",
-                  color: "gray.600",
+                  fontSize: 'xs',
+                  color: 'gray.600',
                 })}
               >
                 {option.desc}
@@ -504,19 +467,19 @@ function RadioGroupField({
         </div>
       ))}
     </RadioGroup.Root>
-  );
+  )
 }
 
 function SelectField({
   value,
   onValueChange,
   options,
-  placeholder = "Select...",
+  placeholder = 'Select...',
 }: {
-  value: string;
-  onValueChange: (value: string) => void;
-  options: Array<{ value: string; label: string }>;
-  placeholder?: string;
+  value: string
+  onValueChange: (value: string) => void
+  options: Array<{ value: string; label: string }>
+  placeholder?: string
 }) {
   return (
     <Select.Root value={value} onValueChange={onValueChange}>
@@ -530,12 +493,12 @@ function SelectField({
       <Select.Portal>
         <Select.Content
           className={css({
-            bg: "white",
-            rounded: "xl",
-            shadow: "modal",
-            border: "1px solid",
-            borderColor: "gray.200",
-            p: "2",
+            bg: 'white',
+            rounded: 'xl',
+            shadow: 'modal',
+            border: '1px solid',
+            borderColor: 'gray.200',
+            p: '2',
             zIndex: 50,
           })}
         >
@@ -545,16 +508,16 @@ function SelectField({
                 key={option.value}
                 value={option.value}
                 className={css({
-                  px: "3",
-                  py: "2",
-                  fontSize: "sm",
-                  rounded: "lg",
-                  cursor: "pointer",
-                  transition: "all",
-                  _hover: { bg: "brand.50" },
-                  "&[data-state=checked]": {
-                    bg: "brand.100",
-                    color: "brand.800",
+                  px: '3',
+                  py: '2',
+                  fontSize: 'sm',
+                  rounded: 'lg',
+                  cursor: 'pointer',
+                  transition: 'all',
+                  _hover: { bg: 'brand.50' },
+                  '&[data-state=checked]': {
+                    bg: 'brand.100',
+                    color: 'brand.800',
                   },
                 })}
               >
@@ -565,7 +528,7 @@ function SelectField({
         </Select.Content>
       </Select.Portal>
     </Select.Root>
-  );
+  )
 }
 
 function SliderField({
@@ -576,31 +539,27 @@ function SliderField({
   step,
   formatValue,
 }: {
-  value: number[];
-  onValueChange: (value: number[]) => void;
-  min: number;
-  max: number;
-  step: number;
-  formatValue: (value: number) => string;
+  value: number[]
+  onValueChange: (value: number[]) => void
+  min: number
+  max: number
+  step: number
+  formatValue: (value: number) => string
 }) {
   return (
-    <div className={stack({ gap: "3" })}>
-      <div className={hstack({ justify: "space-between" })}>
-        <span className={css({ fontSize: "sm", color: "gray.600" })}>
-          {formatValue(min)}
-        </span>
+    <div className={stack({ gap: '3' })}>
+      <div className={hstack({ justify: 'space-between' })}>
+        <span className={css({ fontSize: 'sm', color: 'gray.600' })}>{formatValue(min)}</span>
         <span
           className={css({
-            fontSize: "sm",
-            fontWeight: "medium",
-            color: "brand.600",
+            fontSize: 'sm',
+            fontWeight: 'medium',
+            color: 'brand.600',
           })}
         >
           {formatValue(value[0])}
         </span>
-        <span className={css({ fontSize: "sm", color: "gray.600" })}>
-          {formatValue(max)}
-        </span>
+        <span className={css({ fontSize: 'sm', color: 'gray.600' })}>{formatValue(max)}</span>
       </div>
 
       <Slider.Root
@@ -610,71 +569,71 @@ function SliderField({
         max={max}
         step={step}
         className={css({
-          position: "relative",
-          display: "flex",
-          alignItems: "center",
-          userSelect: "none",
-          touchAction: "none",
-          w: "full",
-          h: "5",
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          userSelect: 'none',
+          touchAction: 'none',
+          w: 'full',
+          h: '5',
         })}
       >
         <Slider.Track
           className={css({
-            bg: "gray.200",
-            position: "relative",
+            bg: 'gray.200',
+            position: 'relative',
             flexGrow: 1,
-            rounded: "full",
-            h: "2",
+            rounded: 'full',
+            h: '2',
           })}
         >
           <Slider.Range
             className={css({
-              position: "absolute",
-              bg: "brand.600",
-              rounded: "full",
-              h: "full",
+              position: 'absolute',
+              bg: 'brand.600',
+              rounded: 'full',
+              h: 'full',
             })}
           />
         </Slider.Track>
         <Slider.Thumb
           className={css({
-            display: "block",
-            w: "5",
-            h: "5",
-            bg: "white",
-            shadow: "card",
-            rounded: "full",
-            border: "2px solid",
-            borderColor: "brand.600",
-            cursor: "pointer",
-            transition: "all",
-            _hover: { transform: "scale(1.1)" },
+            display: 'block',
+            w: '5',
+            h: '5',
+            bg: 'white',
+            shadow: 'card',
+            rounded: 'full',
+            border: '2px solid',
+            borderColor: 'brand.600',
+            cursor: 'pointer',
+            transition: 'all',
+            _hover: { transform: 'scale(1.1)' },
             _focus: {
-              outline: "none",
-              boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.1)",
+              outline: 'none',
+              boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)',
             },
           })}
         />
       </Slider.Root>
     </div>
-  );
+  )
 }
 
 const inputStyles = css({
-  w: "full",
-  px: "4",
-  py: "3",
-  bg: "white",
-  border: "1px solid",
-  borderColor: "gray.300",
-  rounded: "lg",
-  fontSize: "sm",
-  transition: "all",
-  _hover: { borderColor: "gray.400" },
+  w: 'full',
+  px: '4',
+  py: '3',
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'gray.300',
+  rounded: 'lg',
+  fontSize: 'sm',
+  transition: 'all',
+  _hover: { borderColor: 'gray.400' },
   _focus: {
-    outline: "none",
-    borderColor: "brand.500",
-    boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.1)",
+    outline: 'none',
+    borderColor: 'brand.500',
+    boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)',
   },
-});
+})
diff --git a/apps/web/src/components/DeploymentInfo.tsx b/apps/web/src/components/DeploymentInfo.tsx
index cac6fd35..fadd6654 100644
--- a/apps/web/src/components/DeploymentInfo.tsx
+++ b/apps/web/src/components/DeploymentInfo.tsx
@@ -1,10 +1,10 @@
-import { DeploymentInfoContent } from "./DeploymentInfoContent";
-import { DeploymentInfoModal } from "./DeploymentInfoModal";
+import { DeploymentInfoContent } from './DeploymentInfoContent'
+import { DeploymentInfoModal } from './DeploymentInfoModal'
 
 export function DeploymentInfo() {
   return (
     <DeploymentInfoModal>
       <DeploymentInfoContent />
     </DeploymentInfoModal>
-  );
+  )
 }
diff --git a/apps/web/src/components/DeploymentInfoContent.tsx b/apps/web/src/components/DeploymentInfoContent.tsx
index 2be6ee69..2b21829f 100644
--- a/apps/web/src/components/DeploymentInfoContent.tsx
+++ b/apps/web/src/components/DeploymentInfoContent.tsx
@@ -1,24 +1,24 @@
-import { Clock, GitBranch, GitCommit, Package, Server } from "lucide-react";
-import type React from "react";
-import buildInfo from "@/generated/build-info.json";
-import { css } from "../../styled-system/css";
-import { hstack, vstack } from "../../styled-system/patterns";
+import { Clock, GitBranch, GitCommit, Package, Server } from 'lucide-react'
+import type React from 'react'
+import buildInfo from '@/generated/build-info.json'
+import { css } from '../../styled-system/css'
+import { hstack, vstack } from '../../styled-system/patterns'
 
 function formatTimestamp(timestamp: number) {
-  const date = new Date(timestamp);
-  return date.toLocaleString("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    timeZoneName: "short",
-  });
+  const date = new Date(timestamp)
+  return date.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    timeZoneName: 'short',
+  })
 }
 
 function getTimeAgo(timestamp: number) {
-  const seconds = Math.floor((Date.now() - timestamp) / 1000);
+  const seconds = Math.floor((Date.now() - timestamp) / 1000)
 
   const intervals = {
     year: 31536000,
@@ -28,33 +28,29 @@ function getTimeAgo(timestamp: number) {
     hour: 3600,
     minute: 60,
     second: 1,
-  };
+  }
 
   for (const [unit, secondsInUnit] of Object.entries(intervals)) {
-    const interval = Math.floor(seconds / secondsInUnit);
+    const interval = Math.floor(seconds / secondsInUnit)
     if (interval >= 1) {
-      return `${interval} ${unit}${interval === 1 ? "" : "s"} ago`;
+      return `${interval} ${unit}${interval === 1 ? '' : 's'} ago`
     }
   }
-  return "just now";
+  return 'just now'
 }
 
 export function DeploymentInfoContent() {
   return (
-    <div className={vstack({ alignItems: "stretch", gap: "4" })}>
-      <InfoRow
-        icon={<Package size={18} />}
-        label="Version"
-        value={buildInfo.version}
-      />
+    <div className={vstack({ alignItems: 'stretch', gap: '4' })}>
+      <InfoRow icon={<Package size={18} />} label="Version" value={buildInfo.version} />
 
       <InfoRow
         icon={<Clock size={18} />}
         label="Build Time"
         value={
-          <div className={vstack({ alignItems: "flex-start", gap: "1" })}>
+          <div className={vstack({ alignItems: 'flex-start', gap: '1' })}>
             <span>{formatTimestamp(buildInfo.buildTimestamp)}</span>
-            <span className={css({ fontSize: "sm", color: "gray.600" })}>
+            <span className={css({ fontSize: 'sm', color: 'gray.600' })}>
               {getTimeAgo(buildInfo.buildTimestamp)}
             </span>
           </div>
@@ -68,18 +64,16 @@ export function DeploymentInfoContent() {
           value={
             <span
               className={css({
-                fontFamily: "mono",
-                fontSize: "sm",
-                backgroundColor: "gray.100",
-                padding: "1 2",
-                borderRadius: "sm",
+                fontFamily: 'mono',
+                fontSize: 'sm',
+                backgroundColor: 'gray.100',
+                padding: '1 2',
+                borderRadius: 'sm',
               })}
             >
               {buildInfo.git.branch}
               {buildInfo.git.isDirty && (
-                <span className={css({ color: "orange.600", marginLeft: "2" })}>
-                  (dirty)
-                </span>
+                <span className={css({ color: 'orange.600', marginLeft: '2' })}>(dirty)</span>
               )}
             </span>
           }
@@ -91,14 +85,14 @@ export function DeploymentInfoContent() {
           icon={<GitCommit size={18} />}
           label="Commit"
           value={
-            <div className={vstack({ alignItems: "flex-start", gap: "1" })}>
+            <div className={vstack({ alignItems: 'flex-start', gap: '1' })}>
               <span
                 className={css({
-                  fontFamily: "mono",
-                  fontSize: "sm",
-                  backgroundColor: "gray.100",
-                  padding: "1 2",
-                  borderRadius: "sm",
+                  fontFamily: 'mono',
+                  fontSize: 'sm',
+                  backgroundColor: 'gray.100',
+                  padding: '1 2',
+                  borderRadius: 'sm',
                 })}
               >
                 {buildInfo.git.commitShort}
@@ -106,9 +100,9 @@ export function DeploymentInfoContent() {
               {buildInfo.git.commit && (
                 <span
                   className={css({
-                    fontFamily: "mono",
-                    fontSize: "xs",
-                    color: "gray.500",
+                    fontFamily: 'mono',
+                    fontSize: 'xs',
+                    color: 'gray.500',
                   })}
                 >
                   {buildInfo.git.commit}
@@ -126,12 +120,12 @@ export function DeploymentInfoContent() {
           value={
             <span
               className={css({
-                fontFamily: "mono",
-                fontSize: "sm",
-                backgroundColor: "blue.100",
-                color: "blue.700",
-                padding: "1 2",
-                borderRadius: "sm",
+                fontFamily: 'mono',
+                fontSize: 'sm',
+                backgroundColor: 'blue.100',
+                color: 'blue.700',
+                padding: '1 2',
+                borderRadius: 'sm',
               })}
             >
               {buildInfo.git.tag}
@@ -146,18 +140,12 @@ export function DeploymentInfoContent() {
         value={
           <span
             className={css({
-              fontFamily: "mono",
-              fontSize: "sm",
-              backgroundColor:
-                buildInfo.environment === "production"
-                  ? "green.100"
-                  : "yellow.100",
-              color:
-                buildInfo.environment === "production"
-                  ? "green.700"
-                  : "yellow.700",
-              padding: "1 2",
-              borderRadius: "sm",
+              fontFamily: 'mono',
+              fontSize: 'sm',
+              backgroundColor: buildInfo.environment === 'production' ? 'green.100' : 'yellow.100',
+              color: buildInfo.environment === 'production' ? 'green.700' : 'yellow.700',
+              padding: '1 2',
+              borderRadius: 'sm',
             })}
           >
             {buildInfo.environment}
@@ -165,20 +153,18 @@ export function DeploymentInfoContent() {
         }
       />
 
-      {buildInfo.buildNumber && (
-        <InfoRow label="Build Number" value={buildInfo.buildNumber} />
-      )}
+      {buildInfo.buildNumber && <InfoRow label="Build Number" value={buildInfo.buildNumber} />}
 
       <InfoRow
         label="Node Version"
         value={
-          <span className={css({ fontFamily: "mono", fontSize: "sm" })}>
+          <span className={css({ fontFamily: 'mono', fontSize: 'sm' })}>
             {buildInfo.nodeVersion}
           </span>
         }
       />
     </div>
-  );
+  )
 }
 
 function InfoRow({
@@ -186,25 +172,25 @@ function InfoRow({
   label,
   value,
 }: {
-  icon?: React.ReactNode;
-  label: string;
-  value: React.ReactNode;
+  icon?: React.ReactNode
+  label: string
+  value: React.ReactNode
 }) {
   return (
     <div
       className={hstack({
-        justifyContent: "space-between",
-        gap: "4",
-        paddingY: "2",
-        borderBottom: "1px solid",
-        borderColor: "gray.100",
+        justifyContent: 'space-between',
+        gap: '4',
+        paddingY: '2',
+        borderBottom: '1px solid',
+        borderColor: 'gray.100',
       })}
     >
-      <div className={hstack({ gap: "2", color: "gray.700" })}>
+      <div className={hstack({ gap: '2', color: 'gray.700' })}>
         {icon}
-        <span className={css({ fontWeight: "medium" })}>{label}</span>
+        <span className={css({ fontWeight: 'medium' })}>{label}</span>
       </div>
-      <div className={css({ textAlign: "right", flex: "1" })}>{value}</div>
+      <div className={css({ textAlign: 'right', flex: '1' })}>{value}</div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/DeploymentInfoModal.tsx b/apps/web/src/components/DeploymentInfoModal.tsx
index c24d42c4..4c2bdb74 100644
--- a/apps/web/src/components/DeploymentInfoModal.tsx
+++ b/apps/web/src/components/DeploymentInfoModal.tsx
@@ -1,26 +1,26 @@
-"use client";
+'use client'
 
-import * as Dialog from "@radix-ui/react-dialog";
-import { Info, X } from "lucide-react";
-import type React from "react";
-import { useEffect, useState } from "react";
-import { css } from "../../styled-system/css";
+import * as Dialog from '@radix-ui/react-dialog'
+import { Info, X } from 'lucide-react'
+import type React from 'react'
+import { useEffect, useState } from 'react'
+import { css } from '../../styled-system/css'
 
 interface DeploymentInfoModalProps {
-  children: React.ReactNode;
+  children: React.ReactNode
 }
 
 export function DeploymentInfoModal({ children }: DeploymentInfoModalProps) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     // Keyboard shortcut: Cmd/Ctrl + Shift + I
     const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === "I") {
-        e.preventDefault();
-        setOpen((prev) => !prev);
+      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'I') {
+        e.preventDefault()
+        setOpen((prev) => !prev)
       }
-    };
+    }
 
     const gesture = {
       tracking: false,
@@ -29,74 +29,71 @@ export function DeploymentInfoModal({ children }: DeploymentInfoModalProps) {
       startTime: 0,
       lastX: 0,
       lastY: 0,
-    };
+    }
 
     const handleTouchStart = (event: TouchEvent) => {
       if (event.touches.length !== 1) {
-        gesture.tracking = false;
-        return;
+        gesture.tracking = false
+        return
       }
 
-      const touch = event.touches[0];
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-      const cornerThresholdX = viewportWidth * 0.15;
-      const cornerThresholdY = viewportHeight * 0.15;
+      const touch = event.touches[0]
+      const viewportWidth = window.innerWidth
+      const viewportHeight = window.innerHeight
+      const cornerThresholdX = viewportWidth * 0.15
+      const cornerThresholdY = viewportHeight * 0.15
 
-      if (
-        touch.clientX <= cornerThresholdX &&
-        touch.clientY <= cornerThresholdY
-      ) {
-        gesture.tracking = true;
-        gesture.startX = touch.clientX;
-        gesture.startY = touch.clientY;
-        gesture.startTime = performance.now();
-        gesture.lastX = touch.clientX;
-        gesture.lastY = touch.clientY;
+      if (touch.clientX <= cornerThresholdX && touch.clientY <= cornerThresholdY) {
+        gesture.tracking = true
+        gesture.startX = touch.clientX
+        gesture.startY = touch.clientY
+        gesture.startTime = performance.now()
+        gesture.lastX = touch.clientX
+        gesture.lastY = touch.clientY
       } else {
-        gesture.tracking = false;
+        gesture.tracking = false
       }
-    };
+    }
 
     const handleTouchMove = (event: TouchEvent) => {
       if (!gesture.tracking) {
-        return;
+        return
       }
 
       if (event.touches.length !== 1) {
-        gesture.tracking = false;
-        return;
+        gesture.tracking = false
+        return
       }
 
-      const touch = event.touches[0];
-      gesture.lastX = touch.clientX;
-      gesture.lastY = touch.clientY;
-    };
+      const touch = event.touches[0]
+      gesture.lastX = touch.clientX
+      gesture.lastY = touch.clientY
+    }
 
     const handleTouchCancel = () => {
-      gesture.tracking = false;
-    };
+      gesture.tracking = false
+    }
 
     const handleTouchEnd = (event: TouchEvent) => {
       if (!gesture.tracking) {
-        return;
+        return
       }
 
-      const { startX, startY, startTime } = gesture;
-      const touch = event.changedTouches[0];
-      const endX = touch?.clientX ?? gesture.lastX;
-      const endY = touch?.clientY ?? gesture.lastY;
-      const elapsed = performance.now() - startTime;
+      const { startX, startY, startTime } = gesture
+      const touch = event.changedTouches[0]
+      const endX = touch?.clientX ?? gesture.lastX
+      const endY = touch?.clientY ?? gesture.lastY
+      const elapsed = performance.now() - startTime
 
-      gesture.tracking = false;
+      gesture.tracking = false
 
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-      const bottomThresholdX = viewportWidth * 0.85;
-      const bottomThresholdY = viewportHeight * 0.85;
-      const minimumDistance = Math.hypot(endX - startX, endY - startY);
-      const diagonal = Math.hypot(viewportWidth, viewportHeight);
-      const minimumRequiredDistance = diagonal * 0.25;
+      const viewportWidth = window.innerWidth
+      const viewportHeight = window.innerHeight
+      const bottomThresholdX = viewportWidth * 0.85
+      const bottomThresholdY = viewportHeight * 0.85
+      const minimumDistance = Math.hypot(endX - startX, endY - startY)
+      const diagonal = Math.hypot(viewportWidth, viewportHeight)
+      const minimumRequiredDistance = diagonal * 0.25
 
       if (
         endX >= bottomThresholdX &&
@@ -104,63 +101,63 @@ export function DeploymentInfoModal({ children }: DeploymentInfoModalProps) {
         minimumDistance >= minimumRequiredDistance &&
         elapsed <= 1500
       ) {
-        setOpen((prev) => !prev);
+        setOpen((prev) => !prev)
       }
-    };
+    }
 
-    window.addEventListener("keydown", handleKeyDown);
-    window.addEventListener("touchstart", handleTouchStart, { passive: true });
-    window.addEventListener("touchmove", handleTouchMove, { passive: true });
-    window.addEventListener("touchend", handleTouchEnd);
-    window.addEventListener("touchcancel", handleTouchCancel);
+    window.addEventListener('keydown', handleKeyDown)
+    window.addEventListener('touchstart', handleTouchStart, { passive: true })
+    window.addEventListener('touchmove', handleTouchMove, { passive: true })
+    window.addEventListener('touchend', handleTouchEnd)
+    window.addEventListener('touchcancel', handleTouchCancel)
 
     return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-      window.removeEventListener("touchstart", handleTouchStart);
-      window.removeEventListener("touchmove", handleTouchMove);
-      window.removeEventListener("touchend", handleTouchEnd);
-      window.removeEventListener("touchcancel", handleTouchCancel);
-    };
-  }, []);
+      window.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('touchstart', handleTouchStart)
+      window.removeEventListener('touchmove', handleTouchMove)
+      window.removeEventListener('touchend', handleTouchEnd)
+      window.removeEventListener('touchcancel', handleTouchCancel)
+    }
+  }, [])
 
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
       <Dialog.Portal>
         <Dialog.Overlay
           className={css({
-            position: "fixed",
-            inset: "0",
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            position: 'fixed',
+            inset: '0',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
             zIndex: 9998,
-            animation: "fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+            animation: 'fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1)',
           })}
         />
         <Dialog.Content
           className={css({
-            position: "fixed",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            backgroundColor: "white",
-            borderRadius: "lg",
-            boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
-            padding: "6",
-            width: "90vw",
-            maxWidth: "500px",
-            maxHeight: "85vh",
-            overflow: "auto",
+            position: 'fixed',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            backgroundColor: 'white',
+            borderRadius: 'lg',
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+            padding: '6',
+            width: '90vw',
+            maxWidth: '500px',
+            maxHeight: '85vh',
+            overflow: 'auto',
             zIndex: 9999,
-            animation: "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+            animation: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
           })}
         >
           <Dialog.Title
             className={css({
-              fontSize: "xl",
-              fontWeight: "semibold",
-              marginBottom: "4",
-              display: "flex",
-              alignItems: "center",
-              gap: "2",
+              fontSize: 'xl',
+              fontWeight: 'semibold',
+              marginBottom: '4',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '2',
             })}
           >
             <Info size={24} />
@@ -171,58 +168,58 @@ export function DeploymentInfoModal({ children }: DeploymentInfoModalProps) {
 
           <div
             className={css({
-              marginTop: "6",
-              paddingTop: "4",
-              borderTop: "1px solid",
-              borderColor: "gray.200",
-              fontSize: "sm",
-              color: "gray.600",
-              textAlign: "center",
+              marginTop: '6',
+              paddingTop: '4',
+              borderTop: '1px solid',
+              borderColor: 'gray.200',
+              fontSize: 'sm',
+              color: 'gray.600',
+              textAlign: 'center',
             })}
           >
-            Press{" "}
+            Press{' '}
             <kbd
               className={css({
-                fontFamily: "mono",
-                backgroundColor: "gray.100",
-                padding: "0.5 1.5",
-                borderRadius: "sm",
-                border: "1px solid",
-                borderColor: "gray.300",
+                fontFamily: 'mono',
+                backgroundColor: 'gray.100',
+                padding: '0.5 1.5',
+                borderRadius: 'sm',
+                border: '1px solid',
+                borderColor: 'gray.300',
               })}
             >
               ⌘⇧I
-            </kbd>{" "}
-            or{" "}
+            </kbd>{' '}
+            or{' '}
             <kbd
               className={css({
-                fontFamily: "mono",
-                backgroundColor: "gray.100",
-                padding: "0.5 1.5",
-                borderRadius: "sm",
-                border: "1px solid",
-                borderColor: "gray.300",
+                fontFamily: 'mono',
+                backgroundColor: 'gray.100',
+                padding: '0.5 1.5',
+                borderRadius: 'sm',
+                border: '1px solid',
+                borderColor: 'gray.300',
               })}
             >
               Ctrl⇧I
-            </kbd>{" "}
+            </kbd>{' '}
             to toggle
           </div>
 
           <Dialog.Close
             className={css({
-              position: "absolute",
-              top: "4",
-              right: "4",
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              borderRadius: "md",
-              padding: "2",
-              color: "gray.700",
-              cursor: "pointer",
+              position: 'absolute',
+              top: '4',
+              right: '4',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: 'md',
+              padding: '2',
+              color: 'gray.700',
+              cursor: 'pointer',
               _hover: {
-                backgroundColor: "gray.100",
+                backgroundColor: 'gray.100',
               },
             })}
           >
@@ -231,5 +228,5 @@ export function DeploymentInfoModal({ children }: DeploymentInfoModalProps) {
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
-  );
+  )
 }
diff --git a/apps/web/src/components/DownloadCard.tsx b/apps/web/src/components/DownloadCard.tsx
index 2d5e6b04..1b500eb6 100644
--- a/apps/web/src/components/DownloadCard.tsx
+++ b/apps/web/src/components/DownloadCard.tsx
@@ -1,157 +1,150 @@
-"use client";
+'use client'
 
-import {
-  Download,
-  ExternalLink,
-  FileText,
-  Globe,
-  Image,
-  Sparkles,
-} from "lucide-react";
-import { useState } from "react";
-import { css } from "../../styled-system/css";
-import { hstack, stack } from "../../styled-system/patterns";
+import { Download, ExternalLink, FileText, Globe, Image, Sparkles } from 'lucide-react'
+import { useState } from 'react'
+import { css } from '../../styled-system/css'
+import { hstack, stack } from '../../styled-system/patterns'
 
 interface GenerationResult {
-  id: string;
-  downloadUrl: string;
+  id: string
+  downloadUrl: string
   metadata: {
-    cardCount: number;
-    numbers: number[];
-    format: string;
-    filename: string;
-    fileSize: number;
-  };
+    cardCount: number
+    numbers: number[]
+    format: string
+    filename: string
+    fileSize: number
+  }
 }
 
 interface DownloadCardProps {
-  result: GenerationResult;
-  onNewGeneration: () => void;
+  result: GenerationResult
+  onNewGeneration: () => void
 }
 
 export function DownloadCard({ result, onNewGeneration }: DownloadCardProps) {
-  const [isDownloading, setIsDownloading] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false)
 
   const handleDownload = async () => {
-    setIsDownloading(true);
+    setIsDownloading(true)
 
     try {
       // Trigger download
-      const link = document.createElement("a");
-      link.href = result.downloadUrl;
-      link.download = result.metadata.filename;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
+      const link = document.createElement('a')
+      link.href = result.downloadUrl
+      link.download = result.metadata.filename
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
 
       // Optional: Track download success
-      console.log("📥 Download started:", result.metadata.filename);
+      console.log('📥 Download started:', result.metadata.filename)
     } catch (error) {
-      console.error("Download failed:", error);
+      console.error('Download failed:', error)
     } finally {
-      setIsDownloading(false);
+      setIsDownloading(false)
     }
-  };
+  }
 
   const handlePreview = () => {
-    window.open(result.downloadUrl, "_blank");
-  };
+    window.open(result.downloadUrl, '_blank')
+  }
 
   const formatFileSize = (bytes: number): string => {
-    if (bytes === 0) return "0 B";
-    const k = 1024;
-    const sizes = ["B", "KB", "MB", "GB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`;
-  };
+    if (bytes === 0) return '0 B'
+    const k = 1024
+    const sizes = ['B', 'KB', 'MB', 'GB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`
+  }
 
   const getFormatIcon = (format: string) => {
     switch (format.toLowerCase()) {
-      case "pdf":
-        return <FileText size={20} />;
-      case "html":
-        return <Globe size={20} />;
-      case "svg":
-      case "png":
-        return <Image size={20} />;
+      case 'pdf':
+        return <FileText size={20} />
+      case 'html':
+        return <Globe size={20} />
+      case 'svg':
+      case 'png':
+        return <Image size={20} />
       default:
-        return <FileText size={20} />;
+        return <FileText size={20} />
     }
-  };
+  }
 
   const getFormatColor = (format: string) => {
     switch (format.toLowerCase()) {
-      case "pdf":
-        return "red";
-      case "html":
-        return "blue";
-      case "svg":
-        return "purple";
-      case "png":
-        return "green";
+      case 'pdf':
+        return 'red'
+      case 'html':
+        return 'blue'
+      case 'svg':
+        return 'purple'
+      case 'png':
+        return 'green'
       default:
-        return "gray";
+        return 'gray'
     }
-  };
+  }
 
-  const formatColor = getFormatColor(result.metadata.format);
+  const formatColor = getFormatColor(result.metadata.format)
 
   return (
     <div
       className={css({
-        bg: "gradient-to-r from-green.50 to-emerald.50",
-        border: "2px solid",
-        borderColor: "green.200",
-        rounded: "2xl",
-        p: "8",
-        position: "relative",
-        overflow: "hidden",
+        bg: 'gradient-to-r from-green.50 to-emerald.50',
+        border: '2px solid',
+        borderColor: 'green.200',
+        rounded: '2xl',
+        p: '8',
+        position: 'relative',
+        overflow: 'hidden',
       })}
     >
       {/* Success decoration */}
       <div
         className={css({
-          position: "absolute",
-          top: "-20px",
-          right: "-20px",
-          w: "40px",
-          h: "40px",
-          bg: "green.100",
-          rounded: "full",
+          position: 'absolute',
+          top: '-20px',
+          right: '-20px',
+          w: '40px',
+          h: '40px',
+          bg: 'green.100',
+          rounded: 'full',
           opacity: 0.6,
         })}
       />
 
-      <div className={stack({ gap: "6" })}>
+      <div className={stack({ gap: '6' })}>
         {/* Header */}
-        <div className={hstack({ gap: "4", alignItems: "center" })}>
+        <div className={hstack({ gap: '4', alignItems: 'center' })}>
           <div
             className={css({
-              w: "12",
-              h: "12",
-              bg: "green.100",
-              rounded: "full",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
+              w: '12',
+              h: '12',
+              bg: 'green.100',
+              rounded: 'full',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
             })}
           >
-            <Sparkles size={24} className={css({ color: "green.600" })} />
+            <Sparkles size={24} className={css({ color: 'green.600' })} />
           </div>
 
-          <div className={stack({ gap: "1", flex: 1 })}>
+          <div className={stack({ gap: '1', flex: 1 })}>
             <h3
               className={css({
-                fontSize: "xl",
-                fontWeight: "bold",
-                color: "gray.900",
+                fontSize: 'xl',
+                fontWeight: 'bold',
+                color: 'gray.900',
               })}
             >
               ✨ Your Flashcards Are Ready!
             </h3>
             <p
               className={css({
-                color: "gray.600",
+                color: 'gray.600',
               })}
             >
               Generated {result.metadata.cardCount} beautiful soroban flashcards
@@ -162,56 +155,55 @@ export function DownloadCard({ result, onNewGeneration }: DownloadCardProps) {
         {/* File Details */}
         <div
           className={css({
-            p: "4",
-            bg: "white",
-            rounded: "xl",
-            border: "1px solid",
-            borderColor: "gray.200",
+            p: '4',
+            bg: 'white',
+            rounded: 'xl',
+            border: '1px solid',
+            borderColor: 'gray.200',
           })}
         >
-          <div className={hstack({ gap: "3", alignItems: "center", mb: "3" })}>
+          <div className={hstack({ gap: '3', alignItems: 'center', mb: '3' })}>
             <div
               className={css({
-                p: "2",
+                p: '2',
                 bg: `${formatColor}.100`,
                 color: `${formatColor}.600`,
-                rounded: "lg",
+                rounded: 'lg',
               })}
             >
               {getFormatIcon(result.metadata.format)}
             </div>
 
-            <div className={stack({ gap: "0", flex: 1 })}>
+            <div className={stack({ gap: '0', flex: 1 })}>
               <div
                 className={css({
-                  fontSize: "sm",
-                  fontWeight: "semibold",
-                  color: "gray.900",
-                  fontFamily: "mono",
+                  fontSize: 'sm',
+                  fontWeight: 'semibold',
+                  color: 'gray.900',
+                  fontFamily: 'mono',
                 })}
               >
                 {result.metadata.filename}
               </div>
               <div
                 className={css({
-                  fontSize: "xs",
-                  color: "gray.600",
+                  fontSize: 'xs',
+                  color: 'gray.600',
                 })}
               >
-                {result.metadata.format.toUpperCase()} •{" "}
-                {formatFileSize(result.metadata.fileSize)}
+                {result.metadata.format.toUpperCase()} • {formatFileSize(result.metadata.fileSize)}
               </div>
             </div>
 
             <div
               className={css({
-                px: "3",
-                py: "1",
+                px: '3',
+                py: '1',
                 bg: `${formatColor}.100`,
                 color: `${formatColor}.800`,
-                fontSize: "xs",
-                fontWeight: "medium",
-                rounded: "full",
+                fontSize: 'xs',
+                fontWeight: 'medium',
+                rounded: 'full',
               })}
             >
               {result.metadata.cardCount} cards
@@ -219,34 +211,34 @@ export function DownloadCard({ result, onNewGeneration }: DownloadCardProps) {
           </div>
 
           {/* Sample Numbers */}
-          <div className={stack({ gap: "2" })}>
+          <div className={stack({ gap: '2' })}>
             <div
               className={css({
-                fontSize: "xs",
-                fontWeight: "medium",
-                color: "gray.700",
+                fontSize: 'xs',
+                fontWeight: 'medium',
+                color: 'gray.700',
               })}
             >
               Sample numbers:
             </div>
             <div
               className={css({
-                display: "flex",
-                flexWrap: "wrap",
-                gap: "1",
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '1',
               })}
             >
               {result.metadata.numbers.slice(0, 8).map((number, i) => (
                 <span
                   key={i}
                   className={css({
-                    px: "2",
-                    py: "1",
-                    bg: "gray.100",
-                    color: "gray.700",
-                    fontSize: "xs",
-                    fontFamily: "mono",
-                    rounded: "md",
+                    px: '2',
+                    py: '1',
+                    bg: 'gray.100',
+                    color: 'gray.700',
+                    fontSize: 'xs',
+                    fontFamily: 'mono',
+                    rounded: 'md',
                   })}
                 >
                   {number}
@@ -255,10 +247,10 @@ export function DownloadCard({ result, onNewGeneration }: DownloadCardProps) {
               {result.metadata.numbers.length > 8 && (
                 <span
                   className={css({
-                    px: "2",
-                    py: "1",
-                    color: "gray.500",
-                    fontSize: "xs",
+                    px: '2',
+                    py: '1',
+                    color: 'gray.500',
+                    fontSize: 'xs',
                   })}
                 >
                   +{result.metadata.numbers.length - 8} more
@@ -269,44 +261,44 @@ export function DownloadCard({ result, onNewGeneration }: DownloadCardProps) {
         </div>
 
         {/* Action Buttons */}
-        <div className={hstack({ gap: "3" })}>
+        <div className={hstack({ gap: '3' })}>
           <button
             onClick={handleDownload}
             disabled={isDownloading}
             className={css({
               flex: 1,
-              px: "6",
-              py: "4",
-              bg: "green.600",
-              color: "white",
-              fontSize: "lg",
-              fontWeight: "semibold",
-              rounded: "xl",
-              shadow: "card",
-              transition: "all",
-              cursor: isDownloading ? "not-allowed" : "pointer",
-              opacity: isDownloading ? "0.7" : "1",
+              px: '6',
+              py: '4',
+              bg: 'green.600',
+              color: 'white',
+              fontSize: 'lg',
+              fontWeight: 'semibold',
+              rounded: 'xl',
+              shadow: 'card',
+              transition: 'all',
+              cursor: isDownloading ? 'not-allowed' : 'pointer',
+              opacity: isDownloading ? '0.7' : '1',
               _hover: isDownloading
                 ? {}
                 : {
-                    bg: "green.700",
-                    transform: "translateY(-1px)",
-                    shadow: "modal",
+                    bg: 'green.700',
+                    transform: 'translateY(-1px)',
+                    shadow: 'modal',
                   },
             })}
           >
-            <span className={hstack({ gap: "3", justify: "center" })}>
+            <span className={hstack({ gap: '3', justify: 'center' })}>
               {isDownloading ? (
                 <>
                   <div
                     className={css({
-                      w: "5",
-                      h: "5",
-                      border: "2px solid",
-                      borderColor: "white",
-                      borderTopColor: "transparent",
-                      rounded: "full",
-                      animation: "spin 1s linear infinite",
+                      w: '5',
+                      h: '5',
+                      border: '2px solid',
+                      borderColor: 'white',
+                      borderTopColor: 'transparent',
+                      rounded: 'full',
+                      animation: 'spin 1s linear infinite',
                     })}
                   />
                   Downloading...
@@ -320,24 +312,24 @@ export function DownloadCard({ result, onNewGeneration }: DownloadCardProps) {
             </span>
           </button>
 
-          {result.metadata.format === "html" && (
+          {result.metadata.format === 'html' && (
             <button
               onClick={handlePreview}
               className={css({
-                px: "4",
-                py: "4",
-                bg: "white",
-                color: "blue.600",
-                fontSize: "lg",
-                fontWeight: "semibold",
-                rounded: "xl",
-                shadow: "card",
-                border: "2px solid",
-                borderColor: "blue.200",
-                transition: "all",
+                px: '4',
+                py: '4',
+                bg: 'white',
+                color: 'blue.600',
+                fontSize: 'lg',
+                fontWeight: 'semibold',
+                rounded: 'xl',
+                shadow: 'card',
+                border: '2px solid',
+                borderColor: 'blue.200',
+                transition: 'all',
                 _hover: {
-                  borderColor: "blue.400",
-                  transform: "translateY(-1px)",
+                  borderColor: 'blue.400',
+                  transform: 'translateY(-1px)',
                 },
               })}
             >
@@ -349,28 +341,28 @@ export function DownloadCard({ result, onNewGeneration }: DownloadCardProps) {
         {/* New Generation Button */}
         <div
           className={css({
-            pt: "4",
-            borderTop: "1px solid",
-            borderColor: "green.200",
+            pt: '4',
+            borderTop: '1px solid',
+            borderColor: 'green.200',
           })}
         >
           <button
             onClick={onNewGeneration}
             className={css({
-              w: "full",
-              px: "4",
-              py: "3",
-              bg: "transparent",
-              color: "green.700",
-              fontSize: "sm",
-              fontWeight: "medium",
-              rounded: "lg",
-              border: "1px solid",
-              borderColor: "green.300",
-              transition: "all",
+              w: 'full',
+              px: '4',
+              py: '3',
+              bg: 'transparent',
+              color: 'green.700',
+              fontSize: 'sm',
+              fontWeight: 'medium',
+              rounded: 'lg',
+              border: '1px solid',
+              borderColor: 'green.300',
+              transition: 'all',
               _hover: {
-                bg: "green.100",
-                borderColor: "green.400",
+                bg: 'green.100',
+                borderColor: 'green.400',
               },
             })}
           >
@@ -382,15 +374,15 @@ export function DownloadCard({ result, onNewGeneration }: DownloadCardProps) {
       {/* Success celebration effect */}
       <div
         className={css({
-          position: "absolute",
-          top: "4",
-          right: "4",
-          fontSize: "2xl",
+          position: 'absolute',
+          top: '4',
+          right: '4',
+          fontSize: '2xl',
           opacity: 0.3,
         })}
       >
         🎉
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/EnhancedChampionArena.tsx b/apps/web/src/components/EnhancedChampionArena.tsx
index d4fbf99d..5adbb44b 100644
--- a/apps/web/src/components/EnhancedChampionArena.tsx
+++ b/apps/web/src/components/EnhancedChampionArena.tsx
@@ -1,27 +1,25 @@
-"use client";
+'use client'
 
-import { css } from "../../styled-system/css";
-import { GameSelector } from "./GameSelector";
+import { css } from '../../styled-system/css'
+import { GameSelector } from './GameSelector'
 
 interface EnhancedChampionArenaProps {
-  onGameModeChange?: (mode: "single" | "battle" | "tournament") => void;
-  onConfigurePlayer?: (playerId: number) => void;
-  className?: string;
+  onGameModeChange?: (mode: 'single' | 'battle' | 'tournament') => void
+  onConfigurePlayer?: (playerId: number) => void
+  className?: string
 }
 
-export function EnhancedChampionArena({
-  className,
-}: EnhancedChampionArenaProps) {
+export function EnhancedChampionArena({ className }: EnhancedChampionArenaProps) {
   return (
     <div
       className={
         css({
-          rounded: { base: "xl", md: "2xl" },
-          padding: { base: "2", sm: "3", md: "4" },
-          display: "flex",
-          flexDirection: "column",
-          overflow: "hidden",
-        }) + (className ? ` ${className}` : "")
+          rounded: { base: 'xl', md: '2xl' },
+          padding: { base: '2', sm: '3', md: '4' },
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+        }) + (className ? ` ${className}` : '')
       }
     >
       {/* Game Selector - takes full height */}
@@ -29,13 +27,13 @@ export function EnhancedChampionArena({
         className={css({
           flex: 1,
           minHeight: 0,
-          overflow: "hidden",
-          display: "flex",
-          flexDirection: "column",
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
         })}
       >
         <GameSelector variant="detailed" showHeader={true} />
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/FlashcardPreview.tsx b/apps/web/src/components/FlashcardPreview.tsx
index 44082cc5..7c2abe8c 100644
--- a/apps/web/src/components/FlashcardPreview.tsx
+++ b/apps/web/src/components/FlashcardPreview.tsx
@@ -1,36 +1,32 @@
-"use client";
+'use client'
 
-import { useQuery } from "@tanstack/react-query";
-import { useTranslations } from "next-intl";
-import { css } from "../../styled-system/css";
-import type { FlashcardFormState } from "@/app/create/flashcards/page";
+import { useQuery } from '@tanstack/react-query'
+import { useTranslations } from 'next-intl'
+import { css } from '../../styled-system/css'
+import type { FlashcardFormState } from '@/app/create/flashcards/page'
 
 interface FlashcardPreviewProps {
-  config: Partial<FlashcardFormState>;
+  config: Partial<FlashcardFormState>
 }
 
-async function fetchFlashcardPreview(
-  config: Partial<FlashcardFormState>,
-): Promise<string | null> {
-  const response = await fetch("/api/create/flashcards/preview", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
+async function fetchFlashcardPreview(config: Partial<FlashcardFormState>): Promise<string | null> {
+  const response = await fetch('/api/create/flashcards/preview', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(config),
-  });
+  })
 
   if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    throw new Error(
-      errorData.error || errorData.message || "Failed to fetch preview",
-    );
+    const errorData = await response.json().catch(() => ({}))
+    throw new Error(errorData.error || errorData.message || 'Failed to fetch preview')
   }
 
-  const data = await response.json();
-  return data.svg;
+  const data = await response.json()
+  return data.svg
 }
 
 export function FlashcardPreview({ config }: FlashcardPreviewProps) {
-  const t = useTranslations("create.flashcards");
+  const t = useTranslations('create.flashcards')
 
   // Use React Query to fetch preview (with automatic caching and updates)
   const {
@@ -38,43 +34,43 @@ export function FlashcardPreview({ config }: FlashcardPreviewProps) {
     isLoading,
     error,
   } = useQuery({
-    queryKey: ["flashcard-preview", config],
+    queryKey: ['flashcard-preview', config],
     queryFn: () => fetchFlashcardPreview(config),
-    enabled: typeof window !== "undefined" && !!config.range,
+    enabled: typeof window !== 'undefined' && !!config.range,
     staleTime: 30000, // Consider data fresh for 30 seconds
     retry: 1,
-  });
+  })
 
   // Show loading state
   if (isLoading || !previewSvg) {
     return (
       <div
         className={css({
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          minHeight: "400px",
-          color: "gray.600",
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '400px',
+          color: 'gray.600',
         })}
       >
         <div
           className={css({
-            w: "8",
-            h: "8",
-            border: "3px solid",
-            borderColor: "gray.200",
-            borderTopColor: "brand.600",
-            rounded: "full",
-            animation: "spin 1s linear infinite",
-            mb: "4",
+            w: '8',
+            h: '8',
+            border: '3px solid',
+            borderColor: 'gray.200',
+            borderTopColor: 'brand.600',
+            rounded: 'full',
+            animation: 'spin 1s linear infinite',
+            mb: '4',
           })}
         />
-        <p className={css({ fontSize: "lg" })}>
-          {isLoading ? t("preview.loading") : t("preview.noPreview")}
+        <p className={css({ fontSize: 'lg' })}>
+          {isLoading ? t('preview.loading') : t('preview.noPreview')}
         </p>
       </div>
-    );
+    )
   }
 
   // Show error state
@@ -82,65 +78,65 @@ export function FlashcardPreview({ config }: FlashcardPreviewProps) {
     return (
       <div
         className={css({
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          minHeight: "400px",
-          color: "red.600",
-          p: "6",
-          textAlign: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '400px',
+          color: 'red.600',
+          p: '6',
+          textAlign: 'center',
         })}
       >
-        <p className={css({ fontSize: "lg", fontWeight: "semibold", mb: "2" })}>
-          {t("preview.error")}
+        <p className={css({ fontSize: 'lg', fontWeight: 'semibold', mb: '2' })}>
+          {t('preview.error')}
         </p>
-        <p className={css({ fontSize: "sm", color: "red.500" })}>
-          {error instanceof Error ? error.message : "Unknown error"}
+        <p className={css({ fontSize: 'sm', color: 'red.500' })}>
+          {error instanceof Error ? error.message : 'Unknown error'}
         </p>
       </div>
-    );
+    )
   }
 
   return (
     <div
       className={css({
-        display: "flex",
-        flexDirection: "column",
-        gap: "4",
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4',
       })}
     >
       <div
         className={css({
-          fontSize: "sm",
-          fontWeight: "medium",
-          color: "brand.700",
-          textAlign: "center",
+          fontSize: 'sm',
+          fontWeight: 'medium',
+          color: 'brand.700',
+          textAlign: 'center',
         })}
       >
-        {t("preview.livePreview")}
+        {t('preview.livePreview')}
       </div>
       <div
         className={css({
-          bg: "white",
-          rounded: "lg",
-          p: "4",
-          border: "2px solid",
-          borderColor: "gray.200",
-          overflow: "auto",
-          maxHeight: "600px",
+          bg: 'white',
+          rounded: 'lg',
+          p: '4',
+          border: '2px solid',
+          borderColor: 'gray.200',
+          overflow: 'auto',
+          maxHeight: '600px',
         })}
         dangerouslySetInnerHTML={{ __html: previewSvg }}
       />
       <div
         className={css({
-          fontSize: "xs",
-          color: "gray.500",
-          textAlign: "center",
+          fontSize: 'xs',
+          color: 'gray.500',
+          textAlign: 'center',
         })}
       >
-        {t("preview.hint")}
+        {t('preview.hint')}
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/FormatSelectField.tsx b/apps/web/src/components/FormatSelectField.tsx
index 540cded5..b447bd5c 100644
--- a/apps/web/src/components/FormatSelectField.tsx
+++ b/apps/web/src/components/FormatSelectField.tsx
@@ -1,104 +1,96 @@
-"use client";
+'use client'
 
-import * as Select from "@radix-ui/react-select";
-import { ChevronDown } from "lucide-react";
-import { css } from "../../styled-system/css";
-import { hstack, stack } from "../../styled-system/patterns";
+import * as Select from '@radix-ui/react-select'
+import { ChevronDown } from 'lucide-react'
+import { css } from '../../styled-system/css'
+import { hstack, stack } from '../../styled-system/patterns'
 
 interface FormatOption {
-  value: string;
-  label: string;
-  icon: string;
-  description: string;
+  value: string
+  label: string
+  icon: string
+  description: string
 }
 
 interface FormatSelectFieldProps {
-  value: string;
-  onValueChange: (value: string) => void;
+  value: string
+  onValueChange: (value: string) => void
 }
 
 const formatOptions: FormatOption[] = [
   {
-    value: "pdf",
-    label: "PDF",
-    icon: "📄",
-    description: "Print-ready vector document with layout options",
+    value: 'pdf',
+    label: 'PDF',
+    icon: '📄',
+    description: 'Print-ready vector document with layout options',
   },
   {
-    value: "html",
-    label: "HTML",
-    icon: "🌐",
-    description: "Interactive web flashcards",
+    value: 'html',
+    label: 'HTML',
+    icon: '🌐',
+    description: 'Interactive web flashcards',
   },
   {
-    value: "svg",
-    label: "SVG",
-    icon: "🖼️",
-    description: "Scalable vector images",
+    value: 'svg',
+    label: 'SVG',
+    icon: '🖼️',
+    description: 'Scalable vector images',
   },
   {
-    value: "png",
-    label: "PNG",
-    icon: "📷",
-    description: "High-resolution images",
+    value: 'png',
+    label: 'PNG',
+    icon: '📷',
+    description: 'High-resolution images',
   },
-];
+]
 
-export function FormatSelectField({
-  value,
-  onValueChange,
-}: FormatSelectFieldProps) {
-  const selectedOption =
-    formatOptions.find((option) => option.value === value) || formatOptions[0];
+export function FormatSelectField({ value, onValueChange }: FormatSelectFieldProps) {
+  const selectedOption = formatOptions.find((option) => option.value === value) || formatOptions[0]
 
   return (
     <Select.Root value={value} onValueChange={onValueChange}>
       <Select.Trigger
         asChild={false}
         className={css({
-          w: "full",
-          px: "4",
-          py: "3",
-          bg: "white",
-          border: "1px solid",
-          borderColor: "gray.300",
-          rounded: "lg",
-          fontSize: "sm",
-          transition: "all",
-          cursor: "pointer",
-          userSelect: "none",
-          _hover: { borderColor: "gray.400" },
+          w: 'full',
+          px: '4',
+          py: '3',
+          bg: 'white',
+          border: '1px solid',
+          borderColor: 'gray.300',
+          rounded: 'lg',
+          fontSize: 'sm',
+          transition: 'all',
+          cursor: 'pointer',
+          userSelect: 'none',
+          _hover: { borderColor: 'gray.400' },
           _focus: {
-            outline: "none",
-            borderColor: "brand.500",
-            boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.1)",
+            outline: 'none',
+            borderColor: 'brand.500',
+            boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)',
           },
-          "&[data-state=open]": {
-            borderColor: "brand.500",
-            boxShadow: "0 0 0 3px rgba(59, 130, 246, 0.1)",
+          '&[data-state=open]': {
+            borderColor: 'brand.500',
+            boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)',
           },
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          minH: "12",
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          minH: '12',
         })}
       >
         <Select.Value asChild>
-          <div className={hstack({ gap: "3", alignItems: "center" })}>
-            <span className={css({ fontSize: "lg" })}>
-              {selectedOption.icon}
-            </span>
-            <div className={stack({ gap: "0", alignItems: "start" })}>
-              <span
-                className={css({ fontWeight: "medium", color: "gray.900" })}
-              >
+          <div className={hstack({ gap: '3', alignItems: 'center' })}>
+            <span className={css({ fontSize: 'lg' })}>{selectedOption.icon}</span>
+            <div className={stack({ gap: '0', alignItems: 'start' })}>
+              <span className={css({ fontWeight: 'medium', color: 'gray.900' })}>
                 {selectedOption.label}
               </span>
               <span
                 className={css({
-                  fontSize: "xs",
-                  color: "gray.500",
-                  lineHeight: "tight",
+                  fontSize: 'xs',
+                  color: 'gray.500',
+                  lineHeight: 'tight',
                 })}
               >
                 {selectedOption.description}
@@ -107,23 +99,23 @@ export function FormatSelectField({
           </div>
         </Select.Value>
         <Select.Icon>
-          <ChevronDown size={16} className={css({ color: "gray.400" })} />
+          <ChevronDown size={16} className={css({ color: 'gray.400' })} />
         </Select.Icon>
       </Select.Trigger>
 
       <Select.Portal>
         <Select.Content
           className={css({
-            bg: "white",
-            rounded: "xl",
-            shadow: "modal",
-            border: "1px solid",
-            borderColor: "gray.200",
-            p: "2",
+            bg: 'white',
+            rounded: 'xl',
+            shadow: 'modal',
+            border: '1px solid',
+            borderColor: 'gray.200',
+            p: '2',
             zIndex: 999,
-            minW: "320px",
-            maxH: "300px",
-            overflow: "hidden",
+            minW: '320px',
+            maxH: '300px',
+            overflow: 'hidden',
           })}
           position="popper"
           sideOffset={4}
@@ -134,41 +126,41 @@ export function FormatSelectField({
                 key={option.value}
                 value={option.value}
                 className={css({
-                  px: "3",
-                  py: "3",
-                  rounded: "lg",
-                  cursor: "pointer",
-                  transition: "all",
-                  outline: "none",
-                  _hover: { bg: "brand.50" },
-                  "&[data-state=checked]": {
-                    bg: "brand.100",
-                    color: "brand.800",
+                  px: '3',
+                  py: '3',
+                  rounded: 'lg',
+                  cursor: 'pointer',
+                  transition: 'all',
+                  outline: 'none',
+                  _hover: { bg: 'brand.50' },
+                  '&[data-state=checked]': {
+                    bg: 'brand.100',
+                    color: 'brand.800',
                   },
                 })}
               >
-                <div className={hstack({ gap: "3", alignItems: "center" })}>
-                  <span className={css({ fontSize: "xl" })}>{option.icon}</span>
+                <div className={hstack({ gap: '3', alignItems: 'center' })}>
+                  <span className={css({ fontSize: 'xl' })}>{option.icon}</span>
                   <div
                     className={stack({
-                      gap: "1",
-                      alignItems: "start",
+                      gap: '1',
+                      alignItems: 'start',
                       flex: 1,
                     })}
                   >
                     <Select.ItemText
                       className={css({
-                        fontWeight: "medium",
-                        fontSize: "sm",
+                        fontWeight: 'medium',
+                        fontSize: 'sm',
                       })}
                     >
                       {option.label}
                     </Select.ItemText>
                     <div
                       className={css({
-                        fontSize: "xs",
-                        color: "gray.600",
-                        lineHeight: "relaxed",
+                        fontSize: 'xs',
+                        color: 'gray.600',
+                        lineHeight: 'relaxed',
                       })}
                     >
                       {option.description}
@@ -181,5 +173,5 @@ export function FormatSelectField({
         </Select.Content>
       </Select.Portal>
     </Select.Root>
-  );
+  )
 }
diff --git a/apps/web/src/components/FullscreenGameLayout.tsx b/apps/web/src/components/FullscreenGameLayout.tsx
index ffc95382..7bcaf43f 100644
--- a/apps/web/src/components/FullscreenGameLayout.tsx
+++ b/apps/web/src/components/FullscreenGameLayout.tsx
@@ -1,40 +1,37 @@
-"use client";
+'use client'
 
-import { useRouter } from "next/navigation";
-import type { ReactNode } from "react";
-import { css } from "../../styled-system/css";
-import {
-  FullscreenProvider,
-  useFullscreen,
-} from "../contexts/FullscreenContext";
+import { useRouter } from 'next/navigation'
+import type { ReactNode } from 'react'
+import { css } from '../../styled-system/css'
+import { FullscreenProvider, useFullscreen } from '../contexts/FullscreenContext'
 
 interface FullscreenGameLayoutProps {
-  children: ReactNode;
-  title: string;
+  children: ReactNode
+  title: string
 }
 
 function FullscreenGameContent({ children, title }: FullscreenGameLayoutProps) {
-  const router = useRouter();
-  const { isFullscreen, enterFullscreen, exitFullscreen } = useFullscreen();
+  const router = useRouter()
+  const { isFullscreen, enterFullscreen, exitFullscreen } = useFullscreen()
 
   // Note: Automatic fullscreen entry removed - users must manually enter fullscreen
   // Client-side navigation now preserves fullscreen state without needing auto-entry
 
   const _handleExitGame = () => {
     console.log(
-      "🔄 FullscreenGameLayout: Navigating to arcade with Next.js router (no page reload)",
-    );
+      '🔄 FullscreenGameLayout: Navigating to arcade with Next.js router (no page reload)'
+    )
     // Navigate back to arcade using client-side routing
-    router.push("/arcade");
-  };
+    router.push('/arcade')
+  }
 
   return (
     <div
       className={css({
-        minH: "screen",
+        minH: 'screen',
         background: isFullscreen
-          ? "linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)"
-          : "white",
+          ? 'linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)'
+          : 'white',
       })}
     >
       {/* Note: Fullscreen navigation is now handled by the enhanced AppNavBar */}
@@ -42,23 +39,20 @@ function FullscreenGameContent({ children, title }: FullscreenGameLayoutProps) {
       {/* Game content */}
       <div
         className={css({
-          pt: isFullscreen ? "16" : "0", // Account for fixed nav in fullscreen
-          minH: "screen",
+          pt: isFullscreen ? '16' : '0', // Account for fixed nav in fullscreen
+          minH: 'screen',
         })}
       >
         {children}
       </div>
     </div>
-  );
+  )
 }
 
-export function FullscreenGameLayout({
-  children,
-  title,
-}: FullscreenGameLayoutProps) {
+export function FullscreenGameLayout({ children, title }: FullscreenGameLayoutProps) {
   return (
     <FullscreenProvider>
       <FullscreenGameContent title={title}>{children}</FullscreenGameContent>
     </FullscreenProvider>
-  );
+  )
 }
diff --git a/apps/web/src/components/GameCard.tsx b/apps/web/src/components/GameCard.tsx
index 79200f22..67313519 100644
--- a/apps/web/src/components/GameCard.tsx
+++ b/apps/web/src/components/GameCard.tsx
@@ -1,31 +1,26 @@
-"use client";
+'use client'
 
-import { useRouter } from "next/navigation";
-import { css } from "../../styled-system/css";
-import { useGameMode } from "../contexts/GameModeContext";
-import type { GAMES_CONFIG, GameType } from "./GameSelector";
+import { useRouter } from 'next/navigation'
+import { css } from '../../styled-system/css'
+import { useGameMode } from '../contexts/GameModeContext'
+import type { GAMES_CONFIG, GameType } from './GameSelector'
 
 interface GameCardProps {
-  gameType: GameType;
-  config: (typeof GAMES_CONFIG)[GameType];
-  variant?: "compact" | "detailed";
-  className?: string;
+  gameType: GameType
+  config: (typeof GAMES_CONFIG)[GameType]
+  variant?: 'compact' | 'detailed'
+  className?: string
 }
 
-export function GameCard({
-  gameType,
-  config,
-  variant = "detailed",
-  className,
-}: GameCardProps) {
-  const { activePlayerCount } = useGameMode();
-  const router = useRouter();
+export function GameCard({ gameType, config, variant = 'detailed', className }: GameCardProps) {
+  const { activePlayerCount } = useGameMode()
+  const router = useRouter()
 
   // Check if a game is available based on active player count
   // Games are always visible but only available with valid player count
   const isGameAvailable = () => {
-    return activePlayerCount > 0 && activePlayerCount <= config.maxPlayers;
-  };
+    return activePlayerCount > 0 && activePlayerCount <= config.maxPlayers
+  }
 
   const handleGameClick = () => {
     console.log(`[GameCard] Clicked on ${config.name}:`, {
@@ -35,79 +30,73 @@ export function GameCard({
       configAvailable: config.available,
       willNavigate: isGameAvailable() && config.available !== false,
       url: config.url,
-    });
+    })
 
     if (isGameAvailable() && config.available !== false) {
-      console.log(
-        "🔄 GameCard: Navigating with Next.js router (no page reload)",
-      );
+      console.log('🔄 GameCard: Navigating with Next.js router (no page reload)')
       // Use Next.js router for client-side navigation - this preserves fullscreen!
-      router.push(config.url);
+      router.push(config.url)
     } else {
-      console.warn("❌ GameCard: Navigation blocked", {
-        reason: !isGameAvailable()
-          ? "Player count mismatch"
-          : "Game not available",
-      });
+      console.warn('❌ GameCard: Navigation blocked', {
+        reason: !isGameAvailable() ? 'Player count mismatch' : 'Game not available',
+      })
     }
-  };
+  }
 
-  const available = isGameAvailable() && config.available !== false;
+  const available = isGameAvailable() && config.available !== false
 
   return (
     <div
       onClick={handleGameClick}
       className={css(
         {
-          background: config.gradient || "white",
-          rounded: variant === "compact" ? "xl" : "2xl",
-          p: variant === "compact" ? "3" : { base: "3", md: "4", lg: "6" },
-          border: "2px solid",
-          borderColor: available
-            ? config.borderColor || "blue.200"
-            : "gray.200",
+          background: config.gradient || 'white',
+          rounded: variant === 'compact' ? 'xl' : '2xl',
+          p: variant === 'compact' ? '3' : { base: '3', md: '4', lg: '6' },
+          border: '2px solid',
+          borderColor: available ? config.borderColor || 'blue.200' : 'gray.200',
           boxShadow:
-            variant === "compact"
-              ? "0 4px 12px rgba(0, 0, 0, 0.1)"
-              : "0 10px 40px rgba(0, 0, 0, 0.1)",
+            variant === 'compact'
+              ? '0 4px 12px rgba(0, 0, 0, 0.1)'
+              : '0 10px 40px rgba(0, 0, 0, 0.1)',
           opacity: available ? 1 : 0.5,
-          cursor: available ? "pointer" : "not-allowed",
-          transition: "all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-          position: "relative",
-          overflow: "hidden",
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
+          cursor: available ? 'pointer' : 'not-allowed',
+          transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+          position: 'relative',
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
           _hover: available
             ? {
                 transform:
-                  variant === "compact"
-                    ? "translateY(-2px) scale(1.02)"
-                    : "translateY(-8px) scale(1.02)",
+                  variant === 'compact'
+                    ? 'translateY(-2px) scale(1.02)'
+                    : 'translateY(-8px) scale(1.02)',
                 boxShadow:
-                  variant === "compact"
-                    ? "0 8px 25px rgba(59, 130, 246, 0.15)"
-                    : "0 25px 50px rgba(59, 130, 246, 0.15)",
+                  variant === 'compact'
+                    ? '0 8px 25px rgba(59, 130, 246, 0.15)'
+                    : '0 25px 50px rgba(59, 130, 246, 0.15)',
                 borderColor:
-                  config.color === "green"
-                    ? "green.300"
-                    : config.color === "purple"
-                      ? "purple.300"
-                      : "blue.300",
+                  config.color === 'green'
+                    ? 'green.300'
+                    : config.color === 'purple'
+                      ? 'purple.300'
+                      : 'blue.300',
               }
             : {},
         },
-        className,
+        className
       )}
     >
       {/* Game icon with enhanced styling */}
       <div
         className={css({
-          textAlign: "center",
+          textAlign: 'center',
           flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-between",
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
           minHeight: 0,
         })}
       >
@@ -119,14 +108,11 @@ export function GameCard({
         >
           <div
             className={css({
-              fontSize:
-                variant === "compact"
-                  ? "xl"
-                  : { base: "xl", md: "2xl", lg: "3xl" },
-              mb: variant === "compact" ? "1" : { base: "1", md: "2" },
-              display: "inline-block",
-              transform: "perspective(1000px)",
-              transition: "all 0.3s ease",
+              fontSize: variant === 'compact' ? 'xl' : { base: 'xl', md: '2xl', lg: '3xl' },
+              mb: variant === 'compact' ? '1' : { base: '1', md: '2' },
+              display: 'inline-block',
+              transform: 'perspective(1000px)',
+              transition: 'all 0.3s ease',
             })}
           >
             {config.icon}
@@ -134,39 +120,34 @@ export function GameCard({
 
           <h4
             className={css({
-              fontSize:
-                variant === "compact"
-                  ? "md"
-                  : { base: "lg", md: "xl", lg: "2xl" },
-              fontWeight: "bold",
-              color: "gray.900",
-              mb: variant === "compact" ? "0.5" : { base: "1", md: "2" },
+              fontSize: variant === 'compact' ? 'md' : { base: 'lg', md: 'xl', lg: '2xl' },
+              fontWeight: 'bold',
+              color: 'gray.900',
+              mb: variant === 'compact' ? '0.5' : { base: '1', md: '2' },
             })}
           >
-            {variant === "detailed"
-              ? config.fullName || config.name
-              : config.name}
+            {variant === 'detailed' ? config.fullName || config.name : config.name}
           </h4>
         </div>
 
         {/* Middle section - description (flexible) */}
-        {variant === "detailed" && (
+        {variant === 'detailed' && (
           <div
             className={css({
               flex: 1,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
               minHeight: 0,
             })}
           >
             <p
               className={css({
-                fontSize: { base: "xs", md: "sm", lg: "base" },
-                color: "gray.600",
-                lineHeight: "relaxed",
-                display: { base: "none", sm: "block" },
-                overflow: "hidden",
+                fontSize: { base: 'xs', md: 'sm', lg: 'base' },
+                color: 'gray.600',
+                lineHeight: 'relaxed',
+                display: { base: 'none', sm: 'block' },
+                overflow: 'hidden',
               })}
             >
               {config.description}
@@ -178,48 +159,48 @@ export function GameCard({
         <div
           className={css({
             flexShrink: 0,
-            mt: "auto",
+            mt: 'auto',
           })}
         >
           {/* Feature chips */}
-          {variant === "detailed" && config.chips && (
+          {variant === 'detailed' && config.chips && (
             <div
               className={css({
-                display: "flex",
-                flexWrap: "wrap",
-                gap: { base: "1", md: "2" },
-                justifyContent: "center",
-                mb: { base: "2", md: "3" },
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: { base: '1', md: '2' },
+                justifyContent: 'center',
+                mb: { base: '2', md: '3' },
               })}
             >
               {config.chips.slice(0, 2).map((chip, index) => (
                 <span
                   key={index}
                   className={css({
-                    px: { base: "2", md: "3" },
-                    py: { base: "0.5", md: "1" },
+                    px: { base: '2', md: '3' },
+                    py: { base: '0.5', md: '1' },
                     background:
-                      config.color === "green"
-                        ? "linear-gradient(135deg, #d1fae5, #a7f3d0)"
-                        : config.color === "purple"
-                          ? "linear-gradient(135deg, #e0e7ff, #c7d2fe)"
-                          : "linear-gradient(135deg, #dbeafe, #bfdbfe)",
+                      config.color === 'green'
+                        ? 'linear-gradient(135deg, #d1fae5, #a7f3d0)'
+                        : config.color === 'purple'
+                          ? 'linear-gradient(135deg, #e0e7ff, #c7d2fe)'
+                          : 'linear-gradient(135deg, #dbeafe, #bfdbfe)',
                     color:
-                      config.color === "green"
-                        ? "green.800"
-                        : config.color === "purple"
-                          ? "indigo.800"
-                          : "blue.800",
-                    rounded: "full",
-                    fontSize: { base: "2xs", md: "xs" },
-                    fontWeight: "semibold",
-                    border: "1px solid",
+                      config.color === 'green'
+                        ? 'green.800'
+                        : config.color === 'purple'
+                          ? 'indigo.800'
+                          : 'blue.800',
+                    rounded: 'full',
+                    fontSize: { base: '2xs', md: 'xs' },
+                    fontWeight: 'semibold',
+                    border: '1px solid',
                     borderColor:
-                      config.color === "green"
-                        ? "green.200"
-                        : config.color === "purple"
-                          ? "indigo.200"
-                          : "blue.200",
+                      config.color === 'green'
+                        ? 'green.200'
+                        : config.color === 'purple'
+                          ? 'indigo.200'
+                          : 'blue.200',
                     opacity: available ? 1 : 0.8,
                   })}
                 >
@@ -232,33 +213,28 @@ export function GameCard({
           {/* Player availability indicator */}
           <div
             className={css({
-              fontSize:
-                variant === "compact"
-                  ? "2xs"
-                  : { base: "2xs", md: "xs", lg: "sm" },
-              color: available ? "green.600" : "red.600",
-              fontWeight: "semibold",
-              display: "inline-flex",
-              alignItems: "center",
-              gap: "1",
-              px: { base: "1.5", md: "2" },
-              py: { base: "0.5", md: "1" },
-              background: available
-                ? "rgba(16, 185, 129, 0.1)"
-                : "rgba(239, 68, 68, 0.1)",
-              rounded: "full",
-              border: "1px solid",
-              borderColor: available ? "green.200" : "red.200",
+              fontSize: variant === 'compact' ? '2xs' : { base: '2xs', md: 'xs', lg: 'sm' },
+              color: available ? 'green.600' : 'red.600',
+              fontWeight: 'semibold',
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '1',
+              px: { base: '1.5', md: '2' },
+              py: { base: '0.5', md: '1' },
+              background: available ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)',
+              rounded: 'full',
+              border: '1px solid',
+              borderColor: available ? 'green.200' : 'red.200',
             })}
           >
             {activePlayerCount === 0
-              ? `⚠️ Select ${config.maxPlayers} ${config.maxPlayers === 1 ? "player" : "players"}`
+              ? `⚠️ Select ${config.maxPlayers} ${config.maxPlayers === 1 ? 'player' : 'players'}`
               : activePlayerCount <= config.maxPlayers
-                ? `✓ ${activePlayerCount}/${config.maxPlayers} ${activePlayerCount === 1 ? "player" : "players"}`
+                ? `✓ ${activePlayerCount}/${config.maxPlayers} ${activePlayerCount === 1 ? 'player' : 'players'}`
                 : `✗ Too many players (max ${config.maxPlayers})`}
           </div>
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/GamePreview.tsx b/apps/web/src/components/GamePreview.tsx
index 17c42086..0ff36052 100644
--- a/apps/web/src/components/GamePreview.tsx
+++ b/apps/web/src/components/GamePreview.tsx
@@ -1,26 +1,23 @@
-"use client";
+'use client'
 
-import { Component, createContext, useEffect, useMemo, useState } from "react";
-import type { ReactNode } from "react";
-import type {
-  GameComponent,
-  GameProviderComponent,
-} from "@/lib/arcade/game-sdk/types";
-import { MockArcadeEnvironment } from "./MockArcadeEnvironment";
-import { GameModeProvider } from "@/contexts/GameModeContext";
-import { ViewportProvider } from "@/contexts/ViewportContext";
-import { getMockGameState } from "./MockGameStates";
+import { Component, createContext, useEffect, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import type { GameComponent, GameProviderComponent } from '@/lib/arcade/game-sdk/types'
+import { MockArcadeEnvironment } from './MockArcadeEnvironment'
+import { GameModeProvider } from '@/contexts/GameModeContext'
+import { ViewportProvider } from '@/contexts/ViewportContext'
+import { getMockGameState } from './MockGameStates'
 
 // Export context so useArcadeSession can check for preview mode
 export const PreviewModeContext = createContext<{
-  isPreview: boolean;
-  mockState: any;
-} | null>(null);
+  isPreview: boolean
+  mockState: any
+} | null>(null)
 
 interface GamePreviewProps {
-  GameComponent: GameComponent;
-  Provider: GameProviderComponent;
-  gameName: string;
+  GameComponent: GameComponent
+  Provider: GameProviderComponent
+  gameName: string
 }
 
 /**
@@ -31,23 +28,23 @@ class GameErrorBoundary extends Component<
   { hasError: boolean }
 > {
   constructor(props: { children: ReactNode; fallback: ReactNode }) {
-    super(props);
-    this.state = { hasError: false };
+    super(props)
+    this.state = { hasError: false }
   }
 
   static getDerivedStateFromError() {
-    return { hasError: true };
+    return { hasError: true }
   }
 
   componentDidCatch(error: Error) {
-    console.error(`Game preview error (${error.message}):`, error);
+    console.error(`Game preview error (${error.message}):`, error)
   }
 
   render() {
     if (this.state.hasError) {
-      return this.props.fallback;
+      return this.props.fallback
     }
-    return this.props.children;
+    return this.props.children
   }
 }
 
@@ -55,19 +52,15 @@ class GameErrorBoundary extends Component<
  * Wrapper for displaying games in demo/preview mode
  * Provides mock arcade contexts so games can render
  */
-export function GamePreview({
-  GameComponent,
-  Provider,
-  gameName,
-}: GamePreviewProps) {
+export function GamePreview({ GameComponent, Provider, gameName }: GamePreviewProps) {
   // Don't render on first mount to avoid hydration issues
-  const [mounted, setMounted] = useState(false);
+  const [mounted, setMounted] = useState(false)
   useEffect(() => {
-    setMounted(true);
-  }, []);
+    setMounted(true)
+  }, [])
 
   // Get mock state for this game
-  const mockState = useMemo(() => getMockGameState(gameName), [gameName]);
+  const mockState = useMemo(() => getMockGameState(gameName), [gameName])
 
   // Preview mode context value
   const previewModeValue = useMemo(
@@ -75,11 +68,11 @@ export function GamePreview({
       isPreview: true,
       mockState,
     }),
-    [mockState],
-  );
+    [mockState]
+  )
 
   if (!mounted) {
-    return null;
+    return null
   }
 
   return (
@@ -87,18 +80,18 @@ export function GamePreview({
       fallback={
         <div
           style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            height: "100%",
-            color: "rgba(255, 255, 255, 0.4)",
-            fontSize: "14px",
-            textAlign: "center",
-            padding: "20px",
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            color: 'rgba(255, 255, 255, 0.4)',
+            fontSize: '14px',
+            textAlign: 'center',
+            padding: '20px',
           }}
         >
-          <span style={{ fontSize: "48px", marginBottom: "10px" }}>🎮</span>
+          <span style={{ fontSize: '48px', marginBottom: '10px' }}>🎮</span>
           Game Demo
         </div>
       }
@@ -113,10 +106,10 @@ export function GamePreview({
             <ViewportProvider width={1440} height={900}>
               <div
                 style={{
-                  width: "1440px",
-                  height: "900px",
-                  position: "relative",
-                  overflow: "hidden",
+                  width: '1440px',
+                  height: '900px',
+                  position: 'relative',
+                  overflow: 'hidden',
                 }}
               >
                 <Provider>
@@ -128,5 +121,5 @@ export function GamePreview({
         </MockArcadeEnvironment>
       </PreviewModeContext.Provider>
     </GameErrorBoundary>
-  );
+  )
 }
diff --git a/apps/web/src/components/GameSelector.tsx b/apps/web/src/components/GameSelector.tsx
index 63402a2c..3dcad481 100644
--- a/apps/web/src/components/GameSelector.tsx
+++ b/apps/web/src/components/GameSelector.tsx
@@ -1,28 +1,26 @@
-"use client";
+'use client'
 
-import { useMemo } from "react";
-import { css } from "../../styled-system/css";
-import { useGameMode } from "../contexts/GameModeContext";
-import { getAllGames } from "../lib/arcade/game-registry";
-import { GameCard } from "./GameCard";
+import { useMemo } from 'react'
+import { css } from '../../styled-system/css'
+import { useGameMode } from '../contexts/GameModeContext'
+import { getAllGames } from '../lib/arcade/game-registry'
+import { GameCard } from './GameCard'
 
 // Game configuration defining player limits
 // Note: Most games have been migrated to the modular game system (see game-registry.ts)
 // Only games not yet migrated remain here
-export const GAMES_CONFIG = {} as const;
+export const GAMES_CONFIG = {} as const
 
-export type GameType = keyof typeof GAMES_CONFIG | string;
+export type GameType = keyof typeof GAMES_CONFIG | string
 
 /**
  * Get all games from both legacy config and new registry
  */
 function getAllGameConfigs() {
-  const legacyGames = Object.entries(GAMES_CONFIG).map(
-    ([gameType, config]) => ({
-      gameType,
-      config,
-    }),
-  );
+  const legacyGames = Object.entries(GAMES_CONFIG).map(([gameType, config]) => ({
+    gameType,
+    config,
+  }))
 
   // Get games from registry and transform to legacy format
   const registryGames = getAllGames().map((gameDef) => ({
@@ -33,7 +31,7 @@ function getAllGameConfigs() {
       maxPlayers: gameDef.manifest.maxPlayers,
       description: gameDef.manifest.description,
       longDescription: gameDef.manifest.longDescription,
-      url: "/arcade", // Arcade page handles game selection through UI
+      url: '/arcade', // Arcade page handles game selection through UI
       icon: gameDef.manifest.icon,
       chips: gameDef.manifest.chips,
       color: gameDef.manifest.color,
@@ -42,46 +40,46 @@ function getAllGameConfigs() {
       difficulty: gameDef.manifest.difficulty,
       available: gameDef.manifest.available,
     },
-  }));
+  }))
 
-  return [...legacyGames, ...registryGames];
+  return [...legacyGames, ...registryGames]
 }
 
 interface GameSelectorProps {
-  variant?: "compact" | "detailed";
-  showHeader?: boolean;
-  emptyStateMessage?: string;
-  className?: string;
+  variant?: 'compact' | 'detailed'
+  showHeader?: boolean
+  emptyStateMessage?: string
+  className?: string
 }
 
 export function GameSelector({
-  variant = "detailed",
+  variant = 'detailed',
   showHeader = true,
-  emptyStateMessage = "Select champions to see available games",
+  emptyStateMessage = 'Select champions to see available games',
   className,
 }: GameSelectorProps) {
-  const { activePlayerCount } = useGameMode();
+  const { activePlayerCount } = useGameMode()
 
   // Memoize the combined games list
-  const allGames = useMemo(() => getAllGameConfigs(), []);
+  const allGames = useMemo(() => getAllGameConfigs(), [])
 
   return (
     <div
       className={`${css({
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
-      })} ${className || ""}`}
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+      })} ${className || ''}`}
     >
       {showHeader && (
         <h3
           className={css({
-            fontSize: variant === "compact" ? "lg" : { base: "lg", md: "xl" },
-            fontWeight: "bold",
-            color: "gray.800",
-            mb: { base: "2", md: "3" },
-            textAlign: "center",
+            fontSize: variant === 'compact' ? 'lg' : { base: 'lg', md: 'xl' },
+            fontWeight: 'bold',
+            color: 'gray.800',
+            mb: { base: '2', md: '3' },
+            textAlign: 'center',
             flexShrink: 0,
           })}
         >
@@ -91,13 +89,13 @@ export function GameSelector({
 
       <div
         className={css({
-          display: "grid",
-          gridTemplateColumns: { base: "1fr", md: "repeat(2, 1fr)" },
-          gridTemplateRows: { base: "repeat(4, 1fr)", md: "repeat(2, 1fr)" },
-          gap: variant === "compact" ? "2" : { base: "2", md: "3" },
+          display: 'grid',
+          gridTemplateColumns: { base: '1fr', md: 'repeat(2, 1fr)' },
+          gridTemplateRows: { base: 'repeat(4, 1fr)', md: 'repeat(2, 1fr)' },
+          gap: variant === 'compact' ? '2' : { base: '2', md: '3' },
           flex: 1,
           minHeight: 0,
-          overflow: "hidden",
+          overflow: 'hidden',
         })}
       >
         {allGames.map(({ gameType, config }) => (
@@ -110,5 +108,5 @@ export function GameSelector({
         ))}
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/GenerationProgress.tsx b/apps/web/src/components/GenerationProgress.tsx
index ef75a9c4..c509ab1e 100644
--- a/apps/web/src/components/GenerationProgress.tsx
+++ b/apps/web/src/components/GenerationProgress.tsx
@@ -1,120 +1,111 @@
-"use client";
+'use client'
 
-import * as Progress from "@radix-ui/react-progress";
-import { CheckCircle, Sparkles, Zap } from "lucide-react";
-import { useEffect, useState } from "react";
-import type { FlashcardFormState } from "@/app/create/page";
-import { css } from "../../styled-system/css";
-import { hstack, stack } from "../../styled-system/patterns";
+import * as Progress from '@radix-ui/react-progress'
+import { CheckCircle, Sparkles, Zap } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import type { FlashcardFormState } from '@/app/create/page'
+import { css } from '../../styled-system/css'
+import { hstack, stack } from '../../styled-system/patterns'
 
 interface GenerationProgressProps {
-  config: FlashcardFormState;
+  config: FlashcardFormState
 }
 
 interface ProgressStep {
-  id: string;
-  label: string;
-  description: string;
-  icon: React.ReactNode;
-  status: "pending" | "active" | "complete";
+  id: string
+  label: string
+  description: string
+  icon: React.ReactNode
+  status: 'pending' | 'active' | 'complete'
 }
 
 export function GenerationProgress({ config }: GenerationProgressProps) {
-  const [progress, setProgress] = useState(0);
-  const [currentStep, setCurrentStep] = useState(0);
-  const [steps, setSteps] = useState<ProgressStep[]>([]);
+  const [progress, setProgress] = useState(0)
+  const [currentStep, setCurrentStep] = useState(0)
+  const [steps, setSteps] = useState<ProgressStep[]>([])
 
   useEffect(() => {
     // Initialize steps based on config
     const generationSteps: ProgressStep[] = [
       {
-        id: "validate",
-        label: "Validating Configuration",
-        description: "Checking parameters and dependencies",
+        id: 'validate',
+        label: 'Validating Configuration',
+        description: 'Checking parameters and dependencies',
         icon: <CheckCircle size={20} />,
-        status: "pending",
+        status: 'pending',
       },
       {
-        id: "generate",
-        label: "Generating Soroban Patterns",
+        id: 'generate',
+        label: 'Generating Soroban Patterns',
         description: `Creating ${getEstimatedCardCount(config)} flashcard patterns`,
         icon: <Sparkles size={20} />,
-        status: "pending",
+        status: 'pending',
       },
       {
-        id: "render",
-        label: `Rendering ${config.format?.toUpperCase() || "PDF"}`,
-        description: "Converting to your chosen format",
+        id: 'render',
+        label: `Rendering ${config.format?.toUpperCase() || 'PDF'}`,
+        description: 'Converting to your chosen format',
         icon: <Zap size={20} />,
-        status: "pending",
+        status: 'pending',
       },
       {
-        id: "finalize",
-        label: "Finalizing Download",
-        description: "Preparing your flashcards for download",
+        id: 'finalize',
+        label: 'Finalizing Download',
+        description: 'Preparing your flashcards for download',
         icon: <CheckCircle size={20} />,
-        status: "pending",
+        status: 'pending',
       },
-    ];
+    ]
 
-    setSteps(generationSteps);
+    setSteps(generationSteps)
 
     // Simulate progress
     const progressInterval = setInterval(() => {
       setProgress((prev) => {
-        const newProgress = Math.min(prev + Math.random() * 15, 95);
+        const newProgress = Math.min(prev + Math.random() * 15, 95)
 
         // Update current step based on progress
-        const stepIndex = Math.floor(
-          (newProgress / 100) * generationSteps.length,
-        );
-        setCurrentStep(stepIndex);
+        const stepIndex = Math.floor((newProgress / 100) * generationSteps.length)
+        setCurrentStep(stepIndex)
 
-        return newProgress;
-      });
-    }, 500);
+        return newProgress
+      })
+    }, 500)
 
-    return () => clearInterval(progressInterval);
-  }, [config]);
+    return () => clearInterval(progressInterval)
+  }, [config])
 
   useEffect(() => {
     // Update step statuses based on current step
     setSteps((prevSteps) =>
       prevSteps.map((step, index) => ({
         ...step,
-        status:
-          index < currentStep
-            ? "complete"
-            : index === currentStep
-              ? "active"
-              : "pending",
-      })),
-    );
-  }, [currentStep]);
+        status: index < currentStep ? 'complete' : index === currentStep ? 'active' : 'pending',
+      }))
+    )
+  }, [currentStep])
 
-  const estimatedTime = getEstimatedTime(config);
-  const currentStepData = steps[currentStep];
+  const estimatedTime = getEstimatedTime(config)
+  const currentStepData = steps[currentStep]
 
   return (
-    <div className={stack({ gap: "6" })}>
-      <div className={stack({ gap: "2" })}>
-        <div
-          className={hstack({ justify: "space-between", alignItems: "center" })}
-        >
+    <div className={stack({ gap: '6' })}>
+      <div className={stack({ gap: '2' })}>
+        <div className={hstack({ justify: 'space-between', alignItems: 'center' })}>
           <h3
             className={css({
-              fontSize: "xl",
-              fontWeight: "bold",
-              color: "gray.900",
+              fontSize: 'xl',
+              fontWeight: 'bold',
+              color: 'gray.900',
             })}
           >
             Generating Your Flashcards
           </h3>
           <div
             className={css({
-              fontSize: "sm",
-              color: "brand.600",
-              fontWeight: "medium",
+              fontSize: 'sm',
+              color: 'brand.600',
+              fontWeight: 'medium',
             })}
           >
             ~{estimatedTime} seconds
@@ -123,30 +114,30 @@ export function GenerationProgress({ config }: GenerationProgressProps) {
 
         {/* Current Step Indicator */}
         {currentStepData && (
-          <div className={hstack({ gap: "3", alignItems: "center", py: "2" })}>
+          <div className={hstack({ gap: '3', alignItems: 'center', py: '2' })}>
             <div
               className={css({
-                color: "brand.600",
-                display: "flex",
-                alignItems: "center",
+                color: 'brand.600',
+                display: 'flex',
+                alignItems: 'center',
               })}
             >
               {currentStepData.icon}
             </div>
-            <div className={stack({ gap: "0" })}>
+            <div className={stack({ gap: '0' })}>
               <div
                 className={css({
-                  fontSize: "sm",
-                  fontWeight: "medium",
-                  color: "gray.900",
+                  fontSize: 'sm',
+                  fontWeight: 'medium',
+                  color: 'gray.900',
                 })}
               >
                 {currentStepData.label}
               </div>
               <div
                 className={css({
-                  fontSize: "xs",
-                  color: "gray.600",
+                  fontSize: 'xs',
+                  color: 'gray.600',
                 })}
               >
                 {currentStepData.description}
@@ -157,46 +148,46 @@ export function GenerationProgress({ config }: GenerationProgressProps) {
       </div>
 
       {/* Progress Bar */}
-      <div className={stack({ gap: "3" })}>
+      <div className={stack({ gap: '3' })}>
         <Progress.Root
           value={progress}
           max={100}
           className={css({
-            position: "relative",
-            overflow: "hidden",
-            bg: "gray.200",
-            rounded: "full",
-            w: "full",
-            h: "3",
-            transform: "translateZ(0)",
+            position: 'relative',
+            overflow: 'hidden',
+            bg: 'gray.200',
+            rounded: 'full',
+            w: 'full',
+            h: '3',
+            transform: 'translateZ(0)',
           })}
         >
           <Progress.Indicator
             className={css({
-              bg: "gradient-to-r from-brand.500 to-brand.600",
-              w: "full",
-              h: "full",
-              transition: "transform 0.3s cubic-bezier(0.65, 0, 0.35, 1)",
-              transformOrigin: "left",
+              bg: 'gradient-to-r from-brand.500 to-brand.600',
+              w: 'full',
+              h: 'full',
+              transition: 'transform 0.3s cubic-bezier(0.65, 0, 0.35, 1)',
+              transformOrigin: 'left',
             })}
             style={{ transform: `translateX(-${100 - progress}%)` }}
           />
         </Progress.Root>
 
-        <div className={hstack({ justify: "space-between" })}>
+        <div className={hstack({ justify: 'space-between' })}>
           <span
             className={css({
-              fontSize: "sm",
-              color: "gray.600",
+              fontSize: 'sm',
+              color: 'gray.600',
             })}
           >
             {Math.round(progress)}% complete
           </span>
           <span
             className={css({
-              fontSize: "sm",
-              fontWeight: "medium",
-              color: "brand.600",
+              fontSize: 'sm',
+              fontWeight: 'medium',
+              color: 'brand.600',
             })}
           >
             Step {currentStep + 1} of {steps.length}
@@ -205,98 +196,95 @@ export function GenerationProgress({ config }: GenerationProgressProps) {
       </div>
 
       {/* Steps List */}
-      <div className={stack({ gap: "3" })}>
+      <div className={stack({ gap: '3' })}>
         {steps.map((step, _index) => (
-          <div
-            key={step.id}
-            className={hstack({ gap: "3", alignItems: "center", py: "2" })}
-          >
+          <div key={step.id} className={hstack({ gap: '3', alignItems: 'center', py: '2' })}>
             <div
               className={css({
-                w: "8",
-                h: "8",
-                rounded: "full",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                border: "2px solid",
+                w: '8',
+                h: '8',
+                rounded: 'full',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                border: '2px solid',
                 borderColor:
-                  step.status === "complete"
-                    ? "green.500"
-                    : step.status === "active"
-                      ? "brand.500"
-                      : "gray.300",
+                  step.status === 'complete'
+                    ? 'green.500'
+                    : step.status === 'active'
+                      ? 'brand.500'
+                      : 'gray.300',
                 bg:
-                  step.status === "complete"
-                    ? "green.50"
-                    : step.status === "active"
-                      ? "brand.50"
-                      : "white",
+                  step.status === 'complete'
+                    ? 'green.50'
+                    : step.status === 'active'
+                      ? 'brand.50'
+                      : 'white',
                 color:
-                  step.status === "complete"
-                    ? "green.600"
-                    : step.status === "active"
-                      ? "brand.600"
-                      : "gray.400",
-                transition: "all",
+                  step.status === 'complete'
+                    ? 'green.600'
+                    : step.status === 'active'
+                      ? 'brand.600'
+                      : 'gray.400',
+                transition: 'all',
               })}
             >
-              {step.status === "complete" ? (
+              {step.status === 'complete' ? (
                 <CheckCircle size={16} />
-              ) : step.status === "active" ? (
+              ) : step.status === 'active' ? (
                 <div
                   className={css({
-                    w: "3",
-                    h: "3",
-                    bg: "brand.600",
-                    rounded: "full",
-                    animation: "pulse",
+                    w: '3',
+                    h: '3',
+                    bg: 'brand.600',
+                    rounded: 'full',
+                    animation: 'pulse',
                   })}
                 />
               ) : (
                 <div
                   className={css({
-                    w: "2",
-                    h: "2",
-                    bg: "gray.400",
-                    rounded: "full",
+                    w: '2',
+                    h: '2',
+                    bg: 'gray.400',
+                    rounded: 'full',
                   })}
                 />
               )}
             </div>
 
-            <div className={stack({ gap: "0", flex: 1 })}>
+            <div className={stack({ gap: '0', flex: 1 })}>
               <div
                 className={css({
-                  fontSize: "sm",
-                  fontWeight: "medium",
+                  fontSize: 'sm',
+                  fontWeight: 'medium',
                   color:
-                    step.status === "complete"
-                      ? "green.800"
-                      : step.status === "active"
-                        ? "gray.900"
-                        : "gray.600",
+                    step.status === 'complete'
+                      ? 'green.800'
+                      : step.status === 'active'
+                        ? 'gray.900'
+                        : 'gray.600',
                 })}
               >
                 {step.label}
               </div>
               <div
                 className={css({
-                  fontSize: "xs",
+                  fontSize: 'xs',
                   color:
-                    step.status === "complete"
-                      ? "green.600"
-                      : step.status === "active"
-                        ? "gray.600"
-                        : "gray.500",
+                    step.status === 'complete'
+                      ? 'green.600'
+                      : step.status === 'active'
+                        ? 'gray.600'
+                        : 'gray.500',
                 })}
               >
                 {step.description}
               </div>
             </div>
 
-            {step.status === "complete" && (
-              <CheckCircle size={16} className={css({ color: "green.600" })} />
+            {step.status === 'complete' && (
+              <CheckCircle size={16} className={css({ color: 'green.600' })} />
             )}
           </div>
         ))}
@@ -305,79 +293,79 @@ export function GenerationProgress({ config }: GenerationProgressProps) {
       {/* Fun Facts */}
       <div
         className={css({
-          p: "4",
-          bg: "blue.50",
-          border: "1px solid",
-          borderColor: "blue.200",
-          rounded: "xl",
+          p: '4',
+          bg: 'blue.50',
+          border: '1px solid',
+          borderColor: 'blue.200',
+          rounded: 'xl',
         })}
       >
         <h4
           className={css({
-            fontSize: "sm",
-            fontWeight: "semibold",
-            color: "blue.800",
-            mb: "2",
+            fontSize: 'sm',
+            fontWeight: 'semibold',
+            color: 'blue.800',
+            mb: '2',
           })}
         >
           💡 Did you know?
         </h4>
         <p
           className={css({
-            fontSize: "sm",
-            color: "blue.700",
-            lineHeight: "relaxed",
+            fontSize: 'sm',
+            color: 'blue.700',
+            lineHeight: 'relaxed',
           })}
         >
           {getFunFact(config)}
         </p>
       </div>
     </div>
-  );
+  )
 }
 
 // Helper functions
 function getEstimatedCardCount(config: FlashcardFormState): number {
-  const range = config.range || "0-99"; // Safe default for form state
+  const range = config.range || '0-99' // Safe default for form state
 
-  if (range.includes("-")) {
-    const [start, end] = range.split("-").map((n) => parseInt(n, 10) || 0);
-    return Math.floor((end - start + 1) / (config.step || 1));
+  if (range.includes('-')) {
+    const [start, end] = range.split('-').map((n) => parseInt(n, 10) || 0)
+    return Math.floor((end - start + 1) / (config.step || 1))
   }
 
-  if (range.includes(",")) {
-    return range.split(",").length;
+  if (range.includes(',')) {
+    return range.split(',').length
   }
 
-  return 1;
+  return 1
 }
 
 function getEstimatedTime(config: FlashcardFormState): number {
-  const cardCount = getEstimatedCardCount(config);
-  const baseTime = 3; // Base generation time
-  const cardTime = Math.max(cardCount * 0.1, 1);
+  const cardCount = getEstimatedCardCount(config)
+  const baseTime = 3 // Base generation time
+  const cardTime = Math.max(cardCount * 0.1, 1)
   const formatMultiplier =
     {
       pdf: 1,
       html: 1.2,
       svg: 1.5,
       png: 2,
-    }[config.format || "pdf"] || 1;
+    }[config.format || 'pdf'] || 1
 
-  return Math.round((baseTime + cardTime) * formatMultiplier);
+  return Math.round((baseTime + cardTime) * formatMultiplier)
 }
 
 function getFunFact(_config: FlashcardFormState): string {
   const facts = [
-    "The soroban is a Japanese counting tool that dates back over 400 years!",
-    "Master soroban users can calculate faster than electronic calculators.",
-    "Each bead position on a soroban represents a specific numeric value.",
+    'The soroban is a Japanese counting tool that dates back over 400 years!',
+    'Master soroban users can calculate faster than electronic calculators.',
+    'Each bead position on a soroban represents a specific numeric value.',
     'The word "soroban" comes from ancient Chinese "suanpan" (counting board).',
-    "Soroban training improves mathematical intuition and mental calculation speed.",
-    "Modern soroban competitions feature lightning-fast calculations.",
-    "The soroban method strengthens both logical and creative thinking.",
-    "Japanese students often learn soroban alongside traditional mathematics.",
-  ];
+    'Soroban training improves mathematical intuition and mental calculation speed.',
+    'Modern soroban competitions feature lightning-fast calculations.',
+    'The soroban method strengthens both logical and creative thinking.',
+    'Japanese students often learn soroban alongside traditional mathematics.',
+  ]
 
-  return facts[Math.floor(Math.random() * facts.length)];
+  return facts[Math.floor(Math.random() * facts.length)]
 }
diff --git a/apps/web/src/components/GuidedAdditionTutorial.tsx b/apps/web/src/components/GuidedAdditionTutorial.tsx
index 0d548e7b..7622c771 100644
--- a/apps/web/src/components/GuidedAdditionTutorial.tsx
+++ b/apps/web/src/components/GuidedAdditionTutorial.tsx
@@ -1,588 +1,568 @@
-"use client";
+'use client'
 
-import {
-  AbacusReact,
-  type EarthBeadPosition,
-  type ValidPlaceValues,
-} from "@soroban/abacus-react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { css } from "../../styled-system/css";
-import { hstack, stack } from "../../styled-system/patterns";
+import { AbacusReact, type EarthBeadPosition, type ValidPlaceValues } from '@soroban/abacus-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { css } from '../../styled-system/css'
+import { hstack, stack } from '../../styled-system/patterns'
 
 // Type-safe tutorial bead helper functions
 const _TutorialBeads = {
   ones: {
     earth: (position: EarthBeadPosition) => ({
       placeValue: 0,
-      beadType: "earth" as const,
+      beadType: 'earth' as const,
       position,
     }),
     heaven: () => ({
       placeValue: 0,
-      beadType: "heaven" as const,
+      beadType: 'heaven' as const,
     }),
   },
   tens: {
     earth: (position: EarthBeadPosition) => ({
       placeValue: 1,
-      beadType: "earth" as const,
+      beadType: 'earth' as const,
       position,
     }),
     heaven: () => ({
       placeValue: 1,
-      beadType: "heaven" as const,
+      beadType: 'heaven' as const,
     }),
   },
-} as const;
+} as const
 
 interface TutorialStep {
-  id: string;
-  title: string;
-  problem: string;
-  description: string;
-  startValue: number;
-  targetValue: number;
+  id: string
+  title: string
+  problem: string
+  description: string
+  startValue: number
+  targetValue: number
   highlightBeads?: Array<{
-    placeValue: ValidPlaceValues; // Type-safe place values (0=ones, 1=tens, etc.)
-    beadType: "heaven" | "earth";
-    position?: EarthBeadPosition; // Type-safe earth bead positions (0-3)
-  }>;
-  expectedAction: "add" | "remove" | "multi-step";
-  actionDescription: string;
+    placeValue: ValidPlaceValues // Type-safe place values (0=ones, 1=tens, etc.)
+    beadType: 'heaven' | 'earth'
+    position?: EarthBeadPosition // Type-safe earth bead positions (0-3)
+  }>
+  expectedAction: 'add' | 'remove' | 'multi-step'
+  actionDescription: string
   tooltip: {
-    content: string;
-    explanation: string;
-  };
+    content: string
+    explanation: string
+  }
   errorMessages: {
-    wrongBead: string;
-    wrongAction: string;
-    hint: string;
-  };
-  multiStepInstructions?: string[];
+    wrongBead: string
+    wrongAction: string
+    hint: string
+  }
+  multiStepInstructions?: string[]
 }
 
 interface PracticeStep {
-  id: string;
-  title: string;
-  description: string;
-  skillLevel: "basic" | "heaven" | "five-complements" | "mixed";
-  problemCount: number;
-  maxTerms: number; // max numbers to add in a single problem
+  id: string
+  title: string
+  description: string
+  skillLevel: 'basic' | 'heaven' | 'five-complements' | 'mixed'
+  problemCount: number
+  maxTerms: number // max numbers to add in a single problem
 }
 
 interface Problem {
-  id: string;
-  terms: number[];
-  userAnswer?: number;
-  isCorrect?: boolean;
+  id: string
+  terms: number[]
+  userAnswer?: number
+  isCorrect?: boolean
 }
 
 const tutorialSteps: TutorialStep[] = [
   // Phase 1: Basic Addition (1-4)
   {
-    id: "basic-1",
-    title: "Basic Addition: 0 + 1",
-    problem: "0 + 1",
-    description: "Start by adding your first earth bead",
+    id: 'basic-1',
+    title: 'Basic Addition: 0 + 1',
+    problem: '0 + 1',
+    description: 'Start by adding your first earth bead',
     startValue: 0,
     targetValue: 1,
-    highlightBeads: [{ placeValue: 0, beadType: "earth", position: 0 }],
-    expectedAction: "add",
-    actionDescription: "Click the first earth bead to move it up",
+    highlightBeads: [{ placeValue: 0, beadType: 'earth', position: 0 }],
+    expectedAction: 'add',
+    actionDescription: 'Click the first earth bead to move it up',
     tooltip: {
-      content: "Adding earth beads",
-      explanation:
-        "Earth beads (bottom) are worth 1 each. Push them UP to activate them.",
+      content: 'Adding earth beads',
+      explanation: 'Earth beads (bottom) are worth 1 each. Push them UP to activate them.',
     },
     errorMessages: {
-      wrongBead: "Click the highlighted earth bead at the bottom",
-      wrongAction: "Move the bead UP to add it",
-      hint: "Earth beads move up when adding numbers 1-4",
+      wrongBead: 'Click the highlighted earth bead at the bottom',
+      wrongAction: 'Move the bead UP to add it',
+      hint: 'Earth beads move up when adding numbers 1-4',
     },
   },
   {
-    id: "basic-2",
-    title: "Basic Addition: 1 + 1",
-    problem: "1 + 1",
-    description: "Add the second earth bead to make 2",
+    id: 'basic-2',
+    title: 'Basic Addition: 1 + 1',
+    problem: '1 + 1',
+    description: 'Add the second earth bead to make 2',
     startValue: 1,
     targetValue: 2,
-    highlightBeads: [{ placeValue: 0, beadType: "earth", position: 1 }],
-    expectedAction: "add",
-    actionDescription: "Click the second earth bead to move it up",
+    highlightBeads: [{ placeValue: 0, beadType: 'earth', position: 1 }],
+    expectedAction: 'add',
+    actionDescription: 'Click the second earth bead to move it up',
     tooltip: {
-      content: "Building up earth beads",
-      explanation:
-        "Continue adding earth beads one by one for numbers 2, 3, and 4",
+      content: 'Building up earth beads',
+      explanation: 'Continue adding earth beads one by one for numbers 2, 3, and 4',
     },
     errorMessages: {
-      wrongBead: "Click the highlighted earth bead",
-      wrongAction: "Move the bead UP to add it",
-      hint: "You need 2 earth beads for the number 2",
+      wrongBead: 'Click the highlighted earth bead',
+      wrongAction: 'Move the bead UP to add it',
+      hint: 'You need 2 earth beads for the number 2',
     },
   },
   {
-    id: "basic-3",
-    title: "Basic Addition: 2 + 1",
-    problem: "2 + 1",
-    description: "Add the third earth bead to make 3",
+    id: 'basic-3',
+    title: 'Basic Addition: 2 + 1',
+    problem: '2 + 1',
+    description: 'Add the third earth bead to make 3',
     startValue: 2,
     targetValue: 3,
-    highlightBeads: [{ placeValue: 0, beadType: "earth", position: 2 }],
-    expectedAction: "add",
-    actionDescription: "Click the third earth bead to move it up",
+    highlightBeads: [{ placeValue: 0, beadType: 'earth', position: 2 }],
+    expectedAction: 'add',
+    actionDescription: 'Click the third earth bead to move it up',
     tooltip: {
-      content: "Adding earth beads in sequence",
-      explanation: "Continue adding earth beads one by one until you reach 4",
+      content: 'Adding earth beads in sequence',
+      explanation: 'Continue adding earth beads one by one until you reach 4',
     },
     errorMessages: {
-      wrongBead: "Click the highlighted earth bead",
-      wrongAction: "Move the bead UP to add it",
-      hint: "You need 3 earth beads for the number 3",
+      wrongBead: 'Click the highlighted earth bead',
+      wrongAction: 'Move the bead UP to add it',
+      hint: 'You need 3 earth beads for the number 3',
     },
   },
   {
-    id: "basic-4",
-    title: "Basic Addition: 3 + 1",
-    problem: "3 + 1",
-    description: "Add the fourth earth bead to make 4",
+    id: 'basic-4',
+    title: 'Basic Addition: 3 + 1',
+    problem: '3 + 1',
+    description: 'Add the fourth earth bead to make 4',
     startValue: 3,
     targetValue: 4,
-    highlightBeads: [{ placeValue: 0, beadType: "earth", position: 3 }],
-    expectedAction: "add",
-    actionDescription: "Click the fourth earth bead to complete 4",
+    highlightBeads: [{ placeValue: 0, beadType: 'earth', position: 3 }],
+    expectedAction: 'add',
+    actionDescription: 'Click the fourth earth bead to complete 4',
     tooltip: {
-      content: "Maximum earth beads",
-      explanation:
-        "Four earth beads is the maximum - next we need a different approach",
+      content: 'Maximum earth beads',
+      explanation: 'Four earth beads is the maximum - next we need a different approach',
     },
     errorMessages: {
-      wrongBead: "Click the highlighted earth bead",
-      wrongAction: "Move the bead UP to add it",
-      hint: "Four earth beads represent the number 4",
+      wrongBead: 'Click the highlighted earth bead',
+      wrongAction: 'Move the bead UP to add it',
+      hint: 'Four earth beads represent the number 4',
     },
   },
 
   // Phase 2: Introduction to Heaven Bead
   {
-    id: "heaven-intro",
-    title: "Heaven Bead: 0 + 5",
-    problem: "0 + 5",
-    description: "Use the heaven bead to represent 5",
+    id: 'heaven-intro',
+    title: 'Heaven Bead: 0 + 5',
+    problem: '0 + 5',
+    description: 'Use the heaven bead to represent 5',
     startValue: 0,
     targetValue: 5,
-    highlightBeads: [{ placeValue: 0, beadType: "heaven" }],
-    expectedAction: "add",
-    actionDescription: "Click the heaven bead to activate it",
+    highlightBeads: [{ placeValue: 0, beadType: 'heaven' }],
+    expectedAction: 'add',
+    actionDescription: 'Click the heaven bead to activate it',
     tooltip: {
-      content: "Heaven bead = 5",
-      explanation: "The single bead above the bar represents 5",
+      content: 'Heaven bead = 5',
+      explanation: 'The single bead above the bar represents 5',
     },
     errorMessages: {
-      wrongBead: "Click the heaven bead at the top",
-      wrongAction: "Move the heaven bead DOWN to activate it",
-      hint: "The heaven bead is worth 5 points",
+      wrongBead: 'Click the heaven bead at the top',
+      wrongAction: 'Move the heaven bead DOWN to activate it',
+      hint: 'The heaven bead is worth 5 points',
     },
   },
   {
-    id: "heaven-plus-earth",
-    title: "Combining: 5 + 1",
-    problem: "5 + 1",
-    description: "Add 1 to 5 by activating one earth bead",
+    id: 'heaven-plus-earth',
+    title: 'Combining: 5 + 1',
+    problem: '5 + 1',
+    description: 'Add 1 to 5 by activating one earth bead',
     startValue: 5,
     targetValue: 6,
-    highlightBeads: [{ placeValue: 0, beadType: "earth", position: 0 }],
-    expectedAction: "add",
-    actionDescription: "Click the first earth bead to make 6",
+    highlightBeads: [{ placeValue: 0, beadType: 'earth', position: 0 }],
+    expectedAction: 'add',
+    actionDescription: 'Click the first earth bead to make 6',
     tooltip: {
-      content: "Heaven + Earth = 6",
-      explanation:
-        "When you have room in the earth section, simply add directly",
+      content: 'Heaven + Earth = 6',
+      explanation: 'When you have room in the earth section, simply add directly',
     },
     errorMessages: {
-      wrongBead: "Click the first earth bead",
-      wrongAction: "Move the earth bead UP to add it",
-      hint: "With the heaven bead active, add earth beads for 6, 7, 8, 9",
+      wrongBead: 'Click the first earth bead',
+      wrongAction: 'Move the earth bead UP to add it',
+      hint: 'With the heaven bead active, add earth beads for 6, 7, 8, 9',
     },
   },
 
   // Phase 3: Five Complements (when earth section is full)
   {
-    id: "complement-intro",
-    title: "Five Complement: 3 + 4",
-    problem: "3 + 4",
-    description:
-      "Need to add 4, but only have 1 earth bead space. Use complement: 4 = 5 - 1",
+    id: 'complement-intro',
+    title: 'Five Complement: 3 + 4',
+    problem: '3 + 4',
+    description: 'Need to add 4, but only have 1 earth bead space. Use complement: 4 = 5 - 1',
     startValue: 3,
     targetValue: 7,
     highlightBeads: [
-      { placeValue: 0, beadType: "heaven" },
-      { placeValue: 0, beadType: "earth", position: 0 },
+      { placeValue: 0, beadType: 'heaven' },
+      { placeValue: 0, beadType: 'earth', position: 0 },
     ],
-    expectedAction: "multi-step",
-    actionDescription: "First add heaven bead (5), then remove 1 earth bead",
+    expectedAction: 'multi-step',
+    actionDescription: 'First add heaven bead (5), then remove 1 earth bead',
     multiStepInstructions: [
-      "Click the heaven bead to add 5",
-      "Click the first earth bead to remove 1",
+      'Click the heaven bead to add 5',
+      'Click the first earth bead to remove 1',
     ],
     tooltip: {
-      content: "Five Complement: 4 = 5 - 1",
-      explanation:
-        "When you need to add 4 but only have 1 space, use: add 5, remove 1",
+      content: 'Five Complement: 4 = 5 - 1',
+      explanation: 'When you need to add 4 but only have 1 space, use: add 5, remove 1',
     },
     errorMessages: {
-      wrongBead:
-        "Follow the two-step process: heaven bead first, then remove earth bead",
-      wrongAction: "Add heaven bead, then remove earth bead",
-      hint: "Complement thinking: 4 = 5 - 1, so add 5 and take away 1",
+      wrongBead: 'Follow the two-step process: heaven bead first, then remove earth bead',
+      wrongAction: 'Add heaven bead, then remove earth bead',
+      hint: 'Complement thinking: 4 = 5 - 1, so add 5 and take away 1',
     },
   },
   {
-    id: "complement-2",
-    title: "Five Complement: 2 + 4",
-    problem: "2 + 4",
-    description: "Add 4 when you have 2 spaces. Use complement: 4 = 5 - 1",
+    id: 'complement-2',
+    title: 'Five Complement: 2 + 4',
+    problem: '2 + 4',
+    description: 'Add 4 when you have 2 spaces. Use complement: 4 = 5 - 1',
     startValue: 2,
     targetValue: 6,
     highlightBeads: [
-      { placeValue: 0, beadType: "heaven" },
-      { placeValue: 0, beadType: "earth", position: 0 },
+      { placeValue: 0, beadType: 'heaven' },
+      { placeValue: 0, beadType: 'earth', position: 0 },
     ],
-    expectedAction: "multi-step",
-    actionDescription: "Add heaven bead (5), then remove 1 earth bead",
+    expectedAction: 'multi-step',
+    actionDescription: 'Add heaven bead (5), then remove 1 earth bead',
     multiStepInstructions: [
-      "Click the heaven bead to add 5",
-      "Click the first earth bead to remove 1",
+      'Click the heaven bead to add 5',
+      'Click the first earth bead to remove 1',
     ],
     tooltip: {
-      content: "Same complement: 4 = 5 - 1",
-      explanation:
-        "Even with space for 2, using complement for 4 is more efficient",
+      content: 'Same complement: 4 = 5 - 1',
+      explanation: 'Even with space for 2, using complement for 4 is more efficient',
     },
     errorMessages: {
-      wrongBead:
-        "Use the complement method: heaven bead, then remove earth bead",
-      wrongAction: "Add 5, then subtract 1",
-      hint: "Practice the complement: 4 = 5 - 1",
+      wrongBead: 'Use the complement method: heaven bead, then remove earth bead',
+      wrongAction: 'Add 5, then subtract 1',
+      hint: 'Practice the complement: 4 = 5 - 1',
     },
   },
   {
-    id: "direct-addition-3",
-    title: "Direct Addition: 1 + 3",
-    problem: "1 + 3",
-    description: "Add 3 to 1. You have space, so add directly.",
+    id: 'direct-addition-3',
+    title: 'Direct Addition: 1 + 3',
+    problem: '1 + 3',
+    description: 'Add 3 to 1. You have space, so add directly.',
     startValue: 1,
     targetValue: 4,
     highlightBeads: [
-      { placeValue: 0, beadType: "earth", position: 1 },
-      { placeValue: 0, beadType: "earth", position: 2 },
-      { placeValue: 0, beadType: "earth", position: 3 },
+      { placeValue: 0, beadType: 'earth', position: 1 },
+      { placeValue: 0, beadType: 'earth', position: 2 },
+      { placeValue: 0, beadType: 'earth', position: 3 },
     ],
-    expectedAction: "multi-step",
-    actionDescription: "Add 3 earth beads one by one",
+    expectedAction: 'multi-step',
+    actionDescription: 'Add 3 earth beads one by one',
     multiStepInstructions: [
-      "Click the second earth bead to add it",
-      "Click the third earth bead to add it",
-      "Click the fourth earth bead to add it",
+      'Click the second earth bead to add it',
+      'Click the third earth bead to add it',
+      'Click the fourth earth bead to add it',
     ],
     tooltip: {
-      content: "Direct Addition - Check Your Space",
+      content: 'Direct Addition - Check Your Space',
       explanation:
-        "You have 1 earth bead up and need to add 3 more. Since there are 4 earth positions total, you have 3 spaces available - perfect!",
+        'You have 1 earth bead up and need to add 3 more. Since there are 4 earth positions total, you have 3 spaces available - perfect!',
     },
     errorMessages: {
-      wrongBead: "Add the earth beads directly - you have space!",
-      wrongAction: "Move the earth beads UP to add them",
-      hint: "No complement needed! Just add the remaining 3 earth beads directly.",
+      wrongBead: 'Add the earth beads directly - you have space!',
+      wrongAction: 'Move the earth beads UP to add them',
+      hint: 'No complement needed! Just add the remaining 3 earth beads directly.',
     },
   },
   {
-    id: "complement-4",
-    title: "Five Complement: 4 + 2",
-    problem: "4 + 2",
-    description:
-      "Add 2 when you have no earth space. Use complement: 2 = 5 - 3",
+    id: 'complement-4',
+    title: 'Five Complement: 4 + 2',
+    problem: '4 + 2',
+    description: 'Add 2 when you have no earth space. Use complement: 2 = 5 - 3',
     startValue: 4,
     targetValue: 6,
     highlightBeads: [
-      { placeValue: 0, beadType: "heaven" },
-      { placeValue: 0, beadType: "earth", position: 0 },
-      { placeValue: 0, beadType: "earth", position: 1 },
-      { placeValue: 0, beadType: "earth", position: 2 },
+      { placeValue: 0, beadType: 'heaven' },
+      { placeValue: 0, beadType: 'earth', position: 0 },
+      { placeValue: 0, beadType: 'earth', position: 1 },
+      { placeValue: 0, beadType: 'earth', position: 2 },
     ],
-    expectedAction: "multi-step",
-    actionDescription: "Add heaven bead (5), then remove 3 earth beads",
+    expectedAction: 'multi-step',
+    actionDescription: 'Add heaven bead (5), then remove 3 earth beads',
     multiStepInstructions: [
-      "Click the heaven bead to add 5",
-      "Click the first earth bead to remove it",
-      "Click the second earth bead to remove it",
-      "Click the third earth bead to remove it",
+      'Click the heaven bead to add 5',
+      'Click the first earth bead to remove it',
+      'Click the second earth bead to remove it',
+      'Click the third earth bead to remove it',
     ],
     tooltip: {
-      content: "Five Complement: 2 = 5 - 3",
-      explanation:
-        "To add 2 when earth section is full: add 5, then subtract 3",
+      content: 'Five Complement: 2 = 5 - 3',
+      explanation: 'To add 2 when earth section is full: add 5, then subtract 3',
     },
     errorMessages: {
-      wrongBead: "Use complement: add heaven, remove 3 earth beads",
-      wrongAction: "Add 5, then subtract 3",
-      hint: "Complement: 2 = 5 - 3",
+      wrongBead: 'Use complement: add heaven, remove 3 earth beads',
+      wrongAction: 'Add 5, then subtract 3',
+      hint: 'Complement: 2 = 5 - 3',
     },
   },
   {
-    id: "complement-5",
-    title: "Five Complement: 4 + 1",
-    problem: "4 + 1",
-    description: "Add 1 when earth section is full. Use complement: 1 = 5 - 4",
+    id: 'complement-5',
+    title: 'Five Complement: 4 + 1',
+    problem: '4 + 1',
+    description: 'Add 1 when earth section is full. Use complement: 1 = 5 - 4',
     startValue: 4,
     targetValue: 5,
     highlightBeads: [
-      { placeValue: 0, beadType: "heaven" },
-      { placeValue: 0, beadType: "earth", position: 0 },
-      { placeValue: 0, beadType: "earth", position: 1 },
-      { placeValue: 0, beadType: "earth", position: 2 },
-      { placeValue: 0, beadType: "earth", position: 3 },
+      { placeValue: 0, beadType: 'heaven' },
+      { placeValue: 0, beadType: 'earth', position: 0 },
+      { placeValue: 0, beadType: 'earth', position: 1 },
+      { placeValue: 0, beadType: 'earth', position: 2 },
+      { placeValue: 0, beadType: 'earth', position: 3 },
     ],
-    expectedAction: "multi-step",
-    actionDescription: "Add heaven bead (5), then remove all 4 earth beads",
+    expectedAction: 'multi-step',
+    actionDescription: 'Add heaven bead (5), then remove all 4 earth beads',
     multiStepInstructions: [
-      "Click the heaven bead to add 5",
-      "Click all 4 earth beads to remove them (they should all go down)",
+      'Click the heaven bead to add 5',
+      'Click all 4 earth beads to remove them (they should all go down)',
     ],
     tooltip: {
-      content: "Five Complement: 1 = 5 - 4",
-      explanation:
-        "To add 1 when no space: add 5, then subtract 4 (remove all earth beads)",
+      content: 'Five Complement: 1 = 5 - 4',
+      explanation: 'To add 1 when no space: add 5, then subtract 4 (remove all earth beads)',
     },
     errorMessages: {
-      wrongBead: "Add heaven bead, then remove all 4 earth beads",
-      wrongAction: "Add 5, then subtract 4",
-      hint: "Complement: 1 = 5 - 4, so add heaven and remove all earth",
+      wrongBead: 'Add heaven bead, then remove all 4 earth beads',
+      wrongAction: 'Add 5, then subtract 4',
+      hint: 'Complement: 1 = 5 - 4, so add heaven and remove all earth',
     },
   },
 
   // Phase 4: Practice mixed problems
   {
-    id: "mixed-1",
-    title: "Practice: 2 + 3",
-    problem: "2 + 3",
-    description: "Add 3 to 2. You have space, so add directly.",
+    id: 'mixed-1',
+    title: 'Practice: 2 + 3',
+    problem: '2 + 3',
+    description: 'Add 3 to 2. You have space, so add directly.',
     startValue: 2,
     targetValue: 5,
-    highlightBeads: [{ placeValue: 0, beadType: "earth", position: 2 }],
-    expectedAction: "add",
-    actionDescription: "Add the third earth bead to complete 5",
+    highlightBeads: [{ placeValue: 0, beadType: 'earth', position: 2 }],
+    expectedAction: 'add',
+    actionDescription: 'Add the third earth bead to complete 5',
     tooltip: {
-      content: "Direct Addition",
+      content: 'Direct Addition',
       explanation:
-        "Since you have space (only 2 earth beads are up), simply add the third earth bead",
+        'Since you have space (only 2 earth beads are up), simply add the third earth bead',
     },
     errorMessages: {
-      wrongBead: "Click the highlighted third earth bead",
-      wrongAction: "Move the earth bead UP to add it",
-      hint: "You have space for one more earth bead - no complement needed!",
+      wrongBead: 'Click the highlighted third earth bead',
+      wrongAction: 'Move the earth bead UP to add it',
+      hint: 'You have space for one more earth bead - no complement needed!',
     },
   },
   {
-    id: "mixed-2",
-    title: "Practice: 1 + 4",
-    problem: "1 + 4",
-    description: "Add 4 to 1. Must use complement: 4 = 5 - 1",
+    id: 'mixed-2',
+    title: 'Practice: 1 + 4',
+    problem: '1 + 4',
+    description: 'Add 4 to 1. Must use complement: 4 = 5 - 1',
     startValue: 1,
     targetValue: 5,
     highlightBeads: [
-      { placeValue: 0, beadType: "heaven" },
-      { placeValue: 0, beadType: "earth", position: 0 },
+      { placeValue: 0, beadType: 'heaven' },
+      { placeValue: 0, beadType: 'earth', position: 0 },
     ],
-    expectedAction: "multi-step",
-    actionDescription: "Add heaven bead (5), then remove 1 earth bead",
+    expectedAction: 'multi-step',
+    actionDescription: 'Add heaven bead (5), then remove 1 earth bead',
     multiStepInstructions: [
-      "Click the heaven bead to add 5",
-      "Click the first earth bead to remove 1",
+      'Click the heaven bead to add 5',
+      'Click the first earth bead to remove 1',
     ],
     tooltip: {
-      content: "Must use complement",
-      explanation: "No space for 4 earth beads, so use 4 = 5 - 1",
+      content: 'Must use complement',
+      explanation: 'No space for 4 earth beads, so use 4 = 5 - 1',
     },
     errorMessages: {
-      wrongBead: "Use complement: heaven bead then remove earth bead",
-      wrongAction: "Add 5, subtract 1",
-      hint: "Only way to add 4: use complement 4 = 5 - 1",
+      wrongBead: 'Use complement: heaven bead then remove earth bead',
+      wrongAction: 'Add 5, subtract 1',
+      hint: 'Only way to add 4: use complement 4 = 5 - 1',
     },
   },
-];
+]
 
 const practiceSteps: PracticeStep[] = [
   {
-    id: "practice-basic",
-    title: "Practice: Basic Addition (1-4)",
-    description: "Practice adding numbers 1-4 using only earth beads",
-    skillLevel: "basic",
+    id: 'practice-basic',
+    title: 'Practice: Basic Addition (1-4)',
+    description: 'Practice adding numbers 1-4 using only earth beads',
+    skillLevel: 'basic',
     problemCount: 12,
     maxTerms: 3,
   },
   {
-    id: "practice-heaven",
-    title: "Practice: Heaven Bead & Simple Combinations",
-    description:
-      "Practice using the heaven bead (5) and combining it with earth beads",
-    skillLevel: "heaven",
+    id: 'practice-heaven',
+    title: 'Practice: Heaven Bead & Simple Combinations',
+    description: 'Practice using the heaven bead (5) and combining it with earth beads',
+    skillLevel: 'heaven',
     problemCount: 15,
     maxTerms: 3,
   },
   {
-    id: "practice-complements",
-    title: "Practice: Five Complements",
-    description: "Practice using five complements when you run out of space",
-    skillLevel: "five-complements",
+    id: 'practice-complements',
+    title: 'Practice: Five Complements',
+    description: 'Practice using five complements when you run out of space',
+    skillLevel: 'five-complements',
     problemCount: 20,
     maxTerms: 4,
   },
   {
-    id: "practice-mixed",
-    title: "Practice: Mixed Problems",
-    description: "Practice all techniques together with varied problem types",
-    skillLevel: "mixed",
+    id: 'practice-mixed',
+    title: 'Practice: Mixed Problems',
+    description: 'Practice all techniques together with varied problem types',
+    skillLevel: 'mixed',
     problemCount: 18,
     maxTerms: 5,
   },
-];
+]
 
 // Problem generation functions
 function generateBasicProblems(count: number, maxTerms: number): Problem[] {
-  const problems: Problem[] = [];
+  const problems: Problem[] = []
 
   for (let i = 0; i < count; i++) {
-    const termCount = Math.floor(Math.random() * (maxTerms - 1)) + 2; // 2-maxTerms terms
-    const terms: number[] = [];
+    const termCount = Math.floor(Math.random() * (maxTerms - 1)) + 2 // 2-maxTerms terms
+    const terms: number[] = []
 
     for (let j = 0; j < termCount; j++) {
       // Only use 1-4 for basic problems
-      terms.push(Math.floor(Math.random() * 4) + 1);
+      terms.push(Math.floor(Math.random() * 4) + 1)
     }
 
     // Ensure the sum doesn't exceed 9 (single digit)
-    const sum = terms.reduce((a, b) => a + b, 0);
+    const sum = terms.reduce((a, b) => a + b, 0)
     if (sum <= 9) {
       problems.push({
         id: `basic-${i}`,
         terms,
-      });
+      })
     } else {
-      i--; // Try again if sum is too large
+      i-- // Try again if sum is too large
     }
   }
 
-  return problems;
+  return problems
 }
 
 function generateHeavenProblems(count: number, maxTerms: number): Problem[] {
-  const problems: Problem[] = [];
+  const problems: Problem[] = []
 
   for (let i = 0; i < count; i++) {
-    const termCount = Math.floor(Math.random() * (maxTerms - 1)) + 2;
-    const terms: number[] = [];
+    const termCount = Math.floor(Math.random() * (maxTerms - 1)) + 2
+    const terms: number[] = []
 
     for (let j = 0; j < termCount; j++) {
       // Use 1-9, but ensure at least one term needs heaven bead (5 or more)
-      const num = Math.floor(Math.random() * 9) + 1;
-      terms.push(num);
+      const num = Math.floor(Math.random() * 9) + 1
+      terms.push(num)
     }
 
     // Ensure we have at least one 5+ or the sum involves 5+
-    const hasLargeNum = terms.some((t) => t >= 5);
-    const sum = terms.reduce((a, b) => a + b, 0);
+    const hasLargeNum = terms.some((t) => t >= 5)
+    const sum = terms.reduce((a, b) => a + b, 0)
 
     if ((hasLargeNum || sum >= 5) && sum <= 9) {
       problems.push({
         id: `heaven-${i}`,
         terms,
-      });
+      })
     } else {
-      i--; // Try again
+      i-- // Try again
     }
   }
 
-  return problems;
+  return problems
 }
 
-function generateComplementProblems(
-  count: number,
-  maxTerms: number,
-): Problem[] {
-  const problems: Problem[] = [];
+function generateComplementProblems(count: number, maxTerms: number): Problem[] {
+  const problems: Problem[] = []
 
   for (let i = 0; i < count; i++) {
-    const termCount = Math.floor(Math.random() * (maxTerms - 1)) + 2;
-    const terms: number[] = [];
+    const termCount = Math.floor(Math.random() * (maxTerms - 1)) + 2
+    const terms: number[] = []
 
     // Generate problems that specifically require complements
     // This means having a situation where direct addition won't work
-    const firstTerm = Math.floor(Math.random() * 4) + 1; // 1-4
-    terms.push(firstTerm);
+    const firstTerm = Math.floor(Math.random() * 4) + 1 // 1-4
+    terms.push(firstTerm)
 
     // Add a term that forces complement usage
-    const secondTerm = Math.floor(Math.random() * 3) + 3; // 3-5
-    terms.push(secondTerm);
+    const secondTerm = Math.floor(Math.random() * 3) + 3 // 3-5
+    terms.push(secondTerm)
 
     // Maybe add more terms
     for (let j = 2; j < termCount; j++) {
-      const num = Math.floor(Math.random() * 4) + 1; // 1-4
-      terms.push(num);
+      const num = Math.floor(Math.random() * 4) + 1 // 1-4
+      terms.push(num)
     }
 
-    const sum = terms.reduce((a, b) => a + b, 0);
+    const sum = terms.reduce((a, b) => a + b, 0)
     if (sum <= 9) {
       problems.push({
         id: `complement-${i}`,
         terms,
-      });
+      })
     } else {
-      i--; // Try again
+      i-- // Try again
     }
   }
 
-  return problems;
+  return problems
 }
 
 function generateMixedProblems(count: number, maxTerms: number): Problem[] {
-  const problems: Problem[] = [];
+  const problems: Problem[] = []
 
   for (let i = 0; i < count; i++) {
-    const termCount = Math.floor(Math.random() * (maxTerms - 1)) + 2;
-    const terms: number[] = [];
+    const termCount = Math.floor(Math.random() * (maxTerms - 1)) + 2
+    const terms: number[] = []
 
     for (let j = 0; j < termCount; j++) {
       // Use full range 1-9
-      terms.push(Math.floor(Math.random() * 9) + 1);
+      terms.push(Math.floor(Math.random() * 9) + 1)
     }
 
-    const sum = terms.reduce((a, b) => a + b, 0);
+    const sum = terms.reduce((a, b) => a + b, 0)
     if (sum <= 9) {
       problems.push({
         id: `mixed-${i}`,
         terms,
-      });
+      })
     } else {
-      i--; // Try again
+      i-- // Try again
     }
   }
 
-  return problems;
+  return problems
 }
 
 function generateProblems(step: PracticeStep): Problem[] {
   switch (step.skillLevel) {
-    case "basic":
-      return generateBasicProblems(step.problemCount, step.maxTerms);
-    case "heaven":
-      return generateHeavenProblems(step.problemCount, step.maxTerms);
-    case "five-complements":
-      return generateComplementProblems(step.problemCount, step.maxTerms);
-    case "mixed":
-      return generateMixedProblems(step.problemCount, step.maxTerms);
+    case 'basic':
+      return generateBasicProblems(step.problemCount, step.maxTerms)
+    case 'heaven':
+      return generateHeavenProblems(step.problemCount, step.maxTerms)
+    case 'five-complements':
+      return generateComplementProblems(step.problemCount, step.maxTerms)
+    case 'mixed':
+      return generateMixedProblems(step.problemCount, step.maxTerms)
     default:
-      return [];
+      return []
   }
 }
 
@@ -620,156 +600,145 @@ const combinedSteps = [
 
   // Final mixed practice
   practiceSteps[3], // practice-mixed
-];
+]
 
-type StepType = TutorialStep | PracticeStep;
+type StepType = TutorialStep | PracticeStep
 
 function isTutorialStep(step: StepType): step is TutorialStep {
-  return "problem" in step && "startValue" in step;
+  return 'problem' in step && 'startValue' in step
 }
 
 function isPracticeStep(step: StepType): step is PracticeStep {
-  return "skillLevel" in step && "problemCount" in step;
+  return 'skillLevel' in step && 'problemCount' in step
 }
 
 export function GuidedAdditionTutorial() {
-  const [currentStepIndex, setCurrentStepIndex] = useState(0);
-  const [currentValue, setCurrentValue] = useState(0);
-  const [feedback, setFeedback] = useState<string | null>(null);
-  const [isCorrect, setIsCorrect] = useState(false);
-  const [multiStepProgress, setMultiStepProgress] = useState(0);
-  const [isTransitioning, setIsTransitioning] = useState(false);
-  const transitionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const lastProcessedValueRef = useRef<number | null>(null);
+  const [currentStepIndex, setCurrentStepIndex] = useState(0)
+  const [currentValue, setCurrentValue] = useState(0)
+  const [feedback, setFeedback] = useState<string | null>(null)
+  const [isCorrect, setIsCorrect] = useState(false)
+  const [multiStepProgress, setMultiStepProgress] = useState(0)
+  const [isTransitioning, setIsTransitioning] = useState(false)
+  const transitionTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const lastProcessedValueRef = useRef<number | null>(null)
 
   // Practice-specific state
-  const [currentProblems, setCurrentProblems] = useState<Problem[]>([]);
-  const [showPracticeResults, setShowPracticeResults] = useState(false);
+  const [currentProblems, setCurrentProblems] = useState<Problem[]>([])
+  const [showPracticeResults, setShowPracticeResults] = useState(false)
 
-  const currentStep = combinedSteps[currentStepIndex];
-  const isLastStep = currentStepIndex === combinedSteps.length - 1;
+  const currentStep = combinedSteps[currentStepIndex]
+  const isLastStep = currentStepIndex === combinedSteps.length - 1
 
   const nextStep = useCallback(() => {
-    if (isLastStep || isTransitioning) return;
+    if (isLastStep || isTransitioning) return
 
-    setIsTransitioning(true);
+    setIsTransitioning(true)
 
     // Small delay to prevent UI flashing
     setTimeout(() => {
-      const nextStepIndex = currentStepIndex + 1;
-      setCurrentStepIndex(nextStepIndex);
+      const nextStepIndex = currentStepIndex + 1
+      setCurrentStepIndex(nextStepIndex)
 
-      const nextStep = combinedSteps[nextStepIndex];
+      const nextStep = combinedSteps[nextStepIndex]
       if (isTutorialStep(nextStep)) {
-        setCurrentValue(nextStep.startValue);
+        setCurrentValue(nextStep.startValue)
       } else {
         // Practice step - generate problems
-        const problems = generateProblems(nextStep);
-        setCurrentProblems(problems);
-        setCurrentValue(0);
-        setShowPracticeResults(false);
+        const problems = generateProblems(nextStep)
+        setCurrentProblems(problems)
+        setCurrentValue(0)
+        setShowPracticeResults(false)
       }
 
-      setFeedback(null);
-      setIsCorrect(false);
-      setMultiStepProgress(0);
-      setIsTransitioning(false);
-      lastProcessedValueRef.current = null; // Reset for new step
-    }, 100);
-  }, [currentStepIndex, isLastStep, isTransitioning]);
+      setFeedback(null)
+      setIsCorrect(false)
+      setMultiStepProgress(0)
+      setIsTransitioning(false)
+      lastProcessedValueRef.current = null // Reset for new step
+    }, 100)
+  }, [currentStepIndex, isLastStep, isTransitioning])
 
   const checkStep = useCallback(
     (newValue: number) => {
       // Only check tutorial steps, not practice steps
-      if (!isTutorialStep(currentStep)) return;
+      if (!isTutorialStep(currentStep)) return
 
       // Prevent processing the same value multiple times
-      if (lastProcessedValueRef.current === newValue) return;
-      lastProcessedValueRef.current = newValue;
+      if (lastProcessedValueRef.current === newValue) return
+      lastProcessedValueRef.current = newValue
 
       // Prevent multiple rapid calls during transitions
-      if (isTransitioning) return;
+      if (isTransitioning) return
 
-      if (currentStep.expectedAction === "multi-step") {
+      if (currentStep.expectedAction === 'multi-step') {
         // Handle multi-step validation
-        const targetSteps = currentStep.multiStepInstructions?.length || 2;
-        const nextProgress = multiStepProgress + 1;
+        const targetSteps = currentStep.multiStepInstructions?.length || 2
+        const nextProgress = multiStepProgress + 1
 
         if (nextProgress < targetSteps) {
-          setMultiStepProgress(nextProgress);
+          setMultiStepProgress(nextProgress)
           setFeedback(
-            `Step ${nextProgress + 1} of ${targetSteps}: ${currentStep.multiStepInstructions?.[nextProgress] || "Continue"}`,
-          );
-          return;
+            `Step ${nextProgress + 1} of ${targetSteps}: ${currentStep.multiStepInstructions?.[nextProgress] || 'Continue'}`
+          )
+          return
         }
       }
 
       if (newValue === currentStep.targetValue) {
-        setIsCorrect(true);
-        setFeedback("Perfect! Well done.");
-        setMultiStepProgress(0);
+        setIsCorrect(true)
+        setFeedback('Perfect! Well done.')
+        setMultiStepProgress(0)
 
         // Clear any existing transition timeout
         if (transitionTimeoutRef.current) {
-          clearTimeout(transitionTimeoutRef.current);
+          clearTimeout(transitionTimeoutRef.current)
         }
 
         // Auto-advance to next step after a brief delay
         transitionTimeoutRef.current = setTimeout(() => {
           if (currentStepIndex < combinedSteps.length - 1) {
-            nextStep();
+            nextStep()
           }
-          transitionTimeoutRef.current = null;
-        }, 1500);
+          transitionTimeoutRef.current = null
+        }, 1500)
       } else {
-        setFeedback(currentStep.errorMessages.hint);
+        setFeedback(currentStep.errorMessages.hint)
       }
     },
-    [
-      currentStep,
-      multiStepProgress,
-      currentStepIndex,
-      nextStep,
-      isTransitioning,
-    ],
-  );
+    [currentStep, multiStepProgress, currentStepIndex, nextStep, isTransitioning]
+  )
 
   // Practice step functions
-  const updateProblemAnswer = useCallback(
-    (problemId: string, answer: number) => {
-      setCurrentProblems((prev) =>
-        prev.map((p) =>
-          p.id === problemId ? { ...p, userAnswer: answer } : p,
-        ),
-      );
-    },
-    [],
-  );
+  const updateProblemAnswer = useCallback((problemId: string, answer: number) => {
+    setCurrentProblems((prev) =>
+      prev.map((p) => (p.id === problemId ? { ...p, userAnswer: answer } : p))
+    )
+  }, [])
 
   const checkPracticeWork = useCallback(() => {
-    if (!isPracticeStep(currentStep)) return;
+    if (!isPracticeStep(currentStep)) return
 
     const updatedProblems = currentProblems.map((problem) => {
-      const correctAnswer = problem.terms.reduce((sum, term) => sum + term, 0);
+      const correctAnswer = problem.terms.reduce((sum, term) => sum + term, 0)
       return {
         ...problem,
         isCorrect: problem.userAnswer === correctAnswer,
-      };
-    });
+      }
+    })
 
-    setCurrentProblems(updatedProblems);
-    setShowPracticeResults(true);
+    setCurrentProblems(updatedProblems)
+    setShowPracticeResults(true)
 
     // Remove correct problems after a delay
     setTimeout(() => {
-      const incorrectProblems = updatedProblems.filter((p) => !p.isCorrect);
+      const incorrectProblems = updatedProblems.filter((p) => !p.isCorrect)
 
       if (incorrectProblems.length === 0) {
         // All correct - advance to next step
-        setFeedback("Perfect! All problems completed correctly.");
+        setFeedback('Perfect! All problems completed correctly.')
         setTimeout(() => {
-          nextStep();
-        }, 2000);
+          nextStep()
+        }, 2000)
       } else {
         // Keep only incorrect problems
         setCurrentProblems(
@@ -777,91 +746,84 @@ export function GuidedAdditionTutorial() {
             ...p,
             userAnswer: undefined,
             isCorrect: undefined,
-          })),
-        );
-        setShowPracticeResults(false);
-        setFeedback(
-          `${incorrectProblems.length} problem(s) need correction. Try again!`,
-        );
+          }))
+        )
+        setShowPracticeResults(false)
+        setFeedback(`${incorrectProblems.length} problem(s) need correction. Try again!`)
 
         setTimeout(() => {
-          setFeedback(null);
-        }, 3000);
+          setFeedback(null)
+        }, 3000)
       }
-    }, 2000);
-  }, [currentStep, currentProblems, nextStep]);
+    }, 2000)
+  }, [currentStep, currentProblems, nextStep])
 
   // Initialize practice problems when entering a practice step
   useEffect(() => {
     if (isPracticeStep(currentStep)) {
-      const step = currentStep as PracticeStep;
-      let problems: Problem[] = [];
+      const step = currentStep as PracticeStep
+      let problems: Problem[] = []
 
       switch (step.skillLevel) {
-        case "basic":
-          problems = generateBasicProblems(step.problemCount, step.maxTerms);
-          break;
-        case "heaven":
-          problems = generateHeavenProblems(step.problemCount, step.maxTerms);
-          break;
-        case "five-complements":
-          problems = generateComplementProblems(
-            step.problemCount,
-            step.maxTerms,
-          );
-          break;
-        case "mixed":
-          problems = generateMixedProblems(step.problemCount, step.maxTerms);
-          break;
+        case 'basic':
+          problems = generateBasicProblems(step.problemCount, step.maxTerms)
+          break
+        case 'heaven':
+          problems = generateHeavenProblems(step.problemCount, step.maxTerms)
+          break
+        case 'five-complements':
+          problems = generateComplementProblems(step.problemCount, step.maxTerms)
+          break
+        case 'mixed':
+          problems = generateMixedProblems(step.problemCount, step.maxTerms)
+          break
       }
 
-      setCurrentProblems(problems);
-      setShowPracticeResults(false);
+      setCurrentProblems(problems)
+      setShowPracticeResults(false)
     } else {
       // Reset practice state for tutorial steps
-      setCurrentProblems([]);
-      setShowPracticeResults(false);
+      setCurrentProblems([])
+      setShowPracticeResults(false)
     }
-  }, [currentStep]);
+  }, [currentStep])
 
   const resetTutorial = useCallback(() => {
     // Clear any pending transition timeout
     if (transitionTimeoutRef.current) {
-      clearTimeout(transitionTimeoutRef.current);
-      transitionTimeoutRef.current = null;
+      clearTimeout(transitionTimeoutRef.current)
+      transitionTimeoutRef.current = null
     }
 
-    setCurrentStepIndex(0);
+    setCurrentStepIndex(0)
     setCurrentValue(
-      combinedSteps[0] && isTutorialStep(combinedSteps[0])
-        ? combinedSteps[0].startValue
-        : 0,
-    );
-    setFeedback(null);
-    setIsCorrect(false);
-    setMultiStepProgress(0);
-    setIsTransitioning(false);
-    setCurrentProblems([]);
-    setShowPracticeResults(false);
-    lastProcessedValueRef.current = null; // Reset for restart
-  }, []);
+      combinedSteps[0] && isTutorialStep(combinedSteps[0]) ? combinedSteps[0].startValue : 0
+    )
+    setFeedback(null)
+    setIsCorrect(false)
+    setMultiStepProgress(0)
+    setIsTransitioning(false)
+    setCurrentProblems([])
+    setShowPracticeResults(false)
+    lastProcessedValueRef.current = null // Reset for restart
+  }, [])
 
   return (
-    <div className={stack({ gap: "6" })}>
+    <div className={stack({ gap: '6' })}>
       {/* Progress indicator */}
       <div
         className={css({
-          bg: "gray.100",
-          rounded: "full",
-          h: "2",
-          overflow: "hidden",
+          bg: 'gray.100',
+          rounded: 'full',
+          h: '2',
+          overflow: 'hidden',
         })}
       >
         <div
           className={css({
-            bg: "blue.500",
-            h: "full",
-            transition: "width",
+            bg: 'blue.500',
+            h: 'full',
+            transition: 'width',
             width: `${((currentStepIndex + 1) / combinedSteps.length) * 100}%`,
           })}
         />
@@ -870,31 +832,31 @@ export function GuidedAdditionTutorial() {
       {/* Step info */}
       <div
         className={css({
-          textAlign: "center",
-          p: "4",
-          bg: isPracticeStep(currentStep) ? "purple.50" : "blue.50",
-          rounded: "lg",
-          border: "1px solid",
-          borderColor: isPracticeStep(currentStep) ? "purple.200" : "blue.200",
+          textAlign: 'center',
+          p: '4',
+          bg: isPracticeStep(currentStep) ? 'purple.50' : 'blue.50',
+          rounded: 'lg',
+          border: '1px solid',
+          borderColor: isPracticeStep(currentStep) ? 'purple.200' : 'blue.200',
         })}
       >
         <h4
           className={css({
-            fontSize: "lg",
-            fontWeight: "semibold",
-            color: isPracticeStep(currentStep) ? "purple.800" : "blue.800",
-            mb: "2",
+            fontSize: 'lg',
+            fontWeight: 'semibold',
+            color: isPracticeStep(currentStep) ? 'purple.800' : 'blue.800',
+            mb: '2',
           })}
         >
-          Step {currentStepIndex + 1} of {combinedSteps.length}:{" "}
+          Step {currentStepIndex + 1} of {combinedSteps.length}:{' '}
           {isPracticeStep(currentStep) ? currentStep.title : currentStep.title}
         </h4>
         {isPracticeStep(currentStep) ? (
           <p
             className={css({
-              fontSize: "md",
-              color: "purple.700",
-              mb: "2",
+              fontSize: 'md',
+              color: 'purple.700',
+              mb: '2',
             })}
           >
             Complete all problems using the techniques you've learned
@@ -903,17 +865,17 @@ export function GuidedAdditionTutorial() {
           <>
             <p
               className={css({
-                fontSize: "md",
-                color: "blue.700",
-                mb: "2",
+                fontSize: 'md',
+                color: 'blue.700',
+                mb: '2',
               })}
             >
               Problem: <strong>{currentStep.problem}</strong>
             </p>
             <p
               className={css({
-                fontSize: "sm",
-                color: "blue.600",
+                fontSize: 'sm',
+                color: 'blue.600',
               })}
             >
               {currentStep.description}
@@ -926,19 +888,19 @@ export function GuidedAdditionTutorial() {
       {isPracticeStep(currentStep) ? (
         <div
           className={css({
-            bg: "purple.50",
-            border: "1px solid",
-            borderColor: "purple.300",
-            rounded: "lg",
-            p: "4",
+            bg: 'purple.50',
+            border: '1px solid',
+            borderColor: 'purple.300',
+            rounded: 'lg',
+            p: '4',
           })}
         >
           <h5
             className={css({
-              fontWeight: "semibold",
-              color: "purple.800",
-              mb: "4",
-              textAlign: "center",
+              fontWeight: 'semibold',
+              color: 'purple.800',
+              mb: '4',
+              textAlign: 'center',
             })}
           >
             Practice Problems
@@ -947,74 +909,71 @@ export function GuidedAdditionTutorial() {
           {/* Problem grid */}
           <div
             className={css({
-              display: "grid",
-              gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
-              gap: "3",
-              mb: "4",
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+              gap: '3',
+              mb: '4',
             })}
           >
             {currentProblems.map((problem, index) => (
               <div
                 key={problem.id}
                 className={css({
-                  p: "3",
-                  bg: "white",
-                  border: "1px solid",
+                  p: '3',
+                  bg: 'white',
+                  border: '1px solid',
                   borderColor:
                     problem.isCorrect === true
-                      ? "green.300"
+                      ? 'green.300'
                       : problem.isCorrect === false
-                        ? "red.300"
-                        : "gray.300",
-                  rounded: "md",
-                  textAlign: "center",
+                        ? 'red.300'
+                        : 'gray.300',
+                  rounded: 'md',
+                  textAlign: 'center',
                 })}
               >
                 <div
                   className={css({
-                    fontSize: "sm",
-                    fontWeight: "medium",
-                    color: "gray.600",
-                    mb: "2",
+                    fontSize: 'sm',
+                    fontWeight: 'medium',
+                    color: 'gray.600',
+                    mb: '2',
                   })}
                 >
                   #{index + 1}
                 </div>
                 <div
                   className={css({
-                    fontSize: "lg",
-                    fontWeight: "semibold",
-                    mb: "2",
+                    fontSize: 'lg',
+                    fontWeight: 'semibold',
+                    mb: '2',
                   })}
                 >
-                  {problem.terms.join(" + ")} = ?
+                  {problem.terms.join(' + ')} = ?
                 </div>
                 <input
                   type="number"
-                  value={problem.userAnswer || ""}
+                  value={problem.userAnswer || ''}
                   onChange={(e) =>
-                    updateProblemAnswer(
-                      problem.id,
-                      parseInt(e.target.value, 10) || 0,
-                    )
+                    updateProblemAnswer(problem.id, parseInt(e.target.value, 10) || 0)
                   }
                   className={css({
-                    w: "full",
-                    p: "2",
-                    border: "1px solid",
-                    borderColor: "gray.300",
-                    rounded: "md",
-                    textAlign: "center",
-                    fontSize: "md",
+                    w: 'full',
+                    p: '2',
+                    border: '1px solid',
+                    borderColor: 'gray.300',
+                    rounded: 'md',
+                    textAlign: 'center',
+                    fontSize: 'md',
                   })}
                   placeholder="Answer"
                 />
                 {showPracticeResults && problem.isCorrect === false && (
                   <div
                     className={css({
-                      mt: "2",
-                      fontSize: "sm",
-                      color: "red.600",
+                      mt: '2',
+                      fontSize: 'sm',
+                      color: 'red.600',
                     })}
                   >
                     Incorrect. Try again!
@@ -1026,18 +985,18 @@ export function GuidedAdditionTutorial() {
 
           {/* Check work button */}
           {!showPracticeResults && currentProblems.length > 0 && (
-            <div className={css({ textAlign: "center" })}>
+            <div className={css({ textAlign: 'center' })}>
               <button
                 onClick={checkPracticeWork}
                 className={css({
-                  px: "6",
-                  py: "3",
-                  bg: "purple.500",
-                  color: "white",
-                  rounded: "lg",
-                  fontWeight: "semibold",
-                  cursor: "pointer",
-                  _hover: { bg: "purple.600" },
+                  px: '6',
+                  py: '3',
+                  bg: 'purple.500',
+                  color: 'white',
+                  rounded: 'lg',
+                  fontWeight: 'semibold',
+                  cursor: 'pointer',
+                  _hover: { bg: 'purple.600' },
                 })}
               >
                 Check Work
@@ -1047,13 +1006,13 @@ export function GuidedAdditionTutorial() {
 
           {/* Continue button after all problems correct */}
           {showPracticeResults && currentProblems.every((p) => p.isCorrect) && (
-            <div className={css({ textAlign: "center" })}>
+            <div className={css({ textAlign: 'center' })}>
               <p
                 className={css({
-                  fontSize: "lg",
-                  fontWeight: "semibold",
-                  color: "green.600",
-                  mb: "3",
+                  fontSize: 'lg',
+                  fontWeight: 'semibold',
+                  color: 'green.600',
+                  mb: '3',
                 })}
               >
                 🎉 All problems correct! Great job!
@@ -1061,14 +1020,14 @@ export function GuidedAdditionTutorial() {
               <button
                 onClick={nextStep}
                 className={css({
-                  px: "6",
-                  py: "3",
-                  bg: "green.500",
-                  color: "white",
-                  rounded: "lg",
-                  fontWeight: "semibold",
-                  cursor: "pointer",
-                  _hover: { bg: "green.600" },
+                  px: '6',
+                  py: '3',
+                  bg: 'green.500',
+                  color: 'white',
+                  rounded: 'lg',
+                  fontWeight: 'semibold',
+                  cursor: 'pointer',
+                  _hover: { bg: 'green.600' },
                 })}
               >
                 Continue Tutorial
@@ -1079,19 +1038,19 @@ export function GuidedAdditionTutorial() {
           {/* Practice Abacus */}
           <div
             className={css({
-              bg: "white",
-              border: "2px solid",
-              borderColor: "purple.300",
-              rounded: "xl",
-              p: "4",
-              display: "flex",
-              justifyContent: "center",
-              minHeight: "350px",
-              alignItems: "center",
-              overflow: "visible",
+              bg: 'white',
+              border: '2px solid',
+              borderColor: 'purple.300',
+              rounded: 'xl',
+              p: '4',
+              display: 'flex',
+              justifyContent: 'center',
+              minHeight: '350px',
+              alignItems: 'center',
+              overflow: 'visible',
             })}
           >
-            <div style={{ width: "fit-content", height: "fit-content" }}>
+            <div style={{ width: 'fit-content', height: 'fit-content' }}>
               <AbacusReact
                 value={0}
                 columns={3}
@@ -1109,57 +1068,56 @@ export function GuidedAdditionTutorial() {
       ) : (
         <div
           className={css({
-            bg: "yellow.50",
-            border: "1px solid",
-            borderColor: "yellow.300",
-            rounded: "lg",
-            p: "4",
+            bg: 'yellow.50',
+            border: '1px solid',
+            borderColor: 'yellow.300',
+            rounded: 'lg',
+            p: '4',
           })}
         >
           <h5
             className={css({
-              fontWeight: "semibold",
-              color: "yellow.800",
-              mb: "2",
+              fontWeight: 'semibold',
+              color: 'yellow.800',
+              mb: '2',
             })}
           >
             💡 {currentStep.tooltip.content}
           </h5>
           <p
             className={css({
-              fontSize: "sm",
-              color: "yellow.700",
+              fontSize: 'sm',
+              color: 'yellow.700',
             })}
           >
             {currentStep.tooltip.explanation}
           </p>
           {currentStep.multiStepInstructions && (
-            <div className={css({ mt: "3" })}>
+            <div className={css({ mt: '3' })}>
               <p
                 className={css({
-                  fontSize: "sm",
-                  fontWeight: "medium",
-                  color: "yellow.800",
-                  mb: "1",
+                  fontSize: 'sm',
+                  fontWeight: 'medium',
+                  color: 'yellow.800',
+                  mb: '1',
                 })}
               >
                 Instructions:
               </p>
               <ol
                 className={css({
-                  fontSize: "sm",
-                  color: "yellow.700",
-                  pl: "4",
+                  fontSize: 'sm',
+                  color: 'yellow.700',
+                  pl: '4',
                 })}
               >
                 {currentStep.multiStepInstructions.map((instruction, index) => (
                   <li
                     key={index}
                     className={css({
-                      mb: "1",
-                      opacity: index <= multiStepProgress ? "1" : "0.6",
-                      fontWeight:
-                        index === multiStepProgress ? "semibold" : "normal",
+                      mb: '1',
+                      opacity: index <= multiStepProgress ? '1' : '0.6',
+                      fontWeight: index === multiStepProgress ? 'semibold' : 'normal',
                     })}
                   >
                     {index + 1}. {instruction}
@@ -1175,15 +1133,15 @@ export function GuidedAdditionTutorial() {
       {!isPracticeStep(currentStep) && (
         <div
           className={css({
-            bg: "white",
-            border: "2px solid",
-            borderColor: "blue.300",
-            rounded: "xl",
-            p: "6",
-            display: "flex",
-            justifyContent: "center",
-            minHeight: "400px",
-            alignItems: "center",
+            bg: 'white',
+            border: '2px solid',
+            borderColor: 'blue.300',
+            rounded: 'xl',
+            p: '6',
+            display: 'flex',
+            justifyContent: 'center',
+            minHeight: '400px',
+            alignItems: 'center',
           })}
         >
           <AbacusReact
@@ -1200,15 +1158,15 @@ export function GuidedAdditionTutorial() {
             customStyles={{
               beadHighlight: currentStep.highlightBeads?.reduce(
                 (acc, bead) => {
-                  const key = `${bead.columnIndex}-${bead.beadType}${bead.position !== undefined ? `-${bead.position}` : ""}`;
+                  const key = `${bead.columnIndex}-${bead.beadType}${bead.position !== undefined ? `-${bead.position}` : ''}`
                   acc[key] = {
-                    stroke: "#3B82F6",
+                    stroke: '#3B82F6',
                     strokeWidth: 3,
-                    filter: "drop-shadow(0 0 8px rgba(59, 130, 246, 0.6))",
-                  };
-                  return acc;
+                    filter: 'drop-shadow(0 0 8px rgba(59, 130, 246, 0.6))',
+                  }
+                  return acc
                 },
-                {} as Record<string, any>,
+                {} as Record<string, any>
               ),
             }}
           />
@@ -1219,18 +1177,18 @@ export function GuidedAdditionTutorial() {
       {feedback && (
         <div
           className={css({
-            p: "4",
-            rounded: "lg",
-            border: "1px solid",
-            borderColor: isCorrect ? "green.300" : "orange.300",
-            bg: isCorrect ? "green.50" : "orange.50",
-            textAlign: "center",
+            p: '4',
+            rounded: 'lg',
+            border: '1px solid',
+            borderColor: isCorrect ? 'green.300' : 'orange.300',
+            bg: isCorrect ? 'green.50' : 'orange.50',
+            textAlign: 'center',
           })}
         >
           <p
             className={css({
-              color: isCorrect ? "green.800" : "orange.800",
-              fontWeight: "medium",
+              color: isCorrect ? 'green.800' : 'orange.800',
+              fontWeight: 'medium',
             })}
           >
             {feedback}
@@ -1239,15 +1197,15 @@ export function GuidedAdditionTutorial() {
       )}
 
       {/* Controls */}
-      <div className={hstack({ gap: "4", justifyContent: "center" })}>
+      <div className={hstack({ gap: '4', justifyContent: 'center' })}>
         {isLastStep && isCorrect && (
-          <div className={css({ textAlign: "center" })}>
+          <div className={css({ textAlign: 'center' })}>
             <p
               className={css({
-                fontSize: "lg",
-                fontWeight: "semibold",
-                color: "green.600",
-                mb: "4",
+                fontSize: 'lg',
+                fontWeight: 'semibold',
+                color: 'green.600',
+                mb: '4',
               })}
             >
               🎉 Congratulations! You've completed the guided addition tutorial!
@@ -1255,14 +1213,14 @@ export function GuidedAdditionTutorial() {
             <button
               onClick={resetTutorial}
               className={css({
-                px: "6",
-                py: "3",
-                bg: "green.500",
-                color: "white",
-                rounded: "lg",
-                fontWeight: "semibold",
-                cursor: "pointer",
-                _hover: { bg: "green.600" },
+                px: '6',
+                py: '3',
+                bg: 'green.500',
+                color: 'white',
+                rounded: 'lg',
+                fontWeight: 'semibold',
+                cursor: 'pointer',
+                _hover: { bg: 'green.600' },
               })}
             >
               Start Over
@@ -1271,5 +1229,5 @@ export function GuidedAdditionTutorial() {
         )}
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/HeroAbacus.tsx b/apps/web/src/components/HeroAbacus.tsx
index 4d075de6..c6684366 100644
--- a/apps/web/src/components/HeroAbacus.tsx
+++ b/apps/web/src/components/HeroAbacus.tsx
@@ -1,13 +1,9 @@
-"use client";
+'use client'
 
-import { useEffect, useRef } from "react";
-import {
-  AbacusReact,
-  useAbacusConfig,
-  ABACUS_THEMES,
-} from "@soroban/abacus-react";
-import { css } from "../../styled-system/css";
-import { useHomeHero } from "../contexts/HomeHeroContext";
+import { useEffect, useRef } from 'react'
+import { AbacusReact, useAbacusConfig, ABACUS_THEMES } from '@soroban/abacus-react'
+import { css } from '../../styled-system/css'
+import { useHomeHero } from '../contexts/HomeHeroContext'
 
 export function HeroAbacus() {
   const {
@@ -17,92 +13,91 @@ export function HeroAbacus() {
     setIsHeroVisible,
     isAbacusLoaded,
     isSubtitleLoaded,
-  } = useHomeHero();
-  const appConfig = useAbacusConfig();
-  const heroRef = useRef<HTMLDivElement>(null);
+  } = useHomeHero()
+  const appConfig = useAbacusConfig()
+  const heroRef = useRef<HTMLDivElement>(null)
 
   // Use theme preset from abacus-react instead of manual definition
-  const structuralStyles = ABACUS_THEMES.light;
+  const structuralStyles = ABACUS_THEMES.light
 
   // Detect when hero scrolls out of view
   useEffect(() => {
-    if (!heroRef.current) return;
+    if (!heroRef.current) return
 
     const observer = new IntersectionObserver(
       ([entry]) => {
         // Hero is visible if more than 20% is in viewport
-        setIsHeroVisible(entry.intersectionRatio > 0.2);
+        setIsHeroVisible(entry.intersectionRatio > 0.2)
       },
       {
         threshold: [0, 0.2, 0.5, 1],
-      },
-    );
+      }
+    )
 
-    observer.observe(heroRef.current);
+    observer.observe(heroRef.current)
 
-    return () => observer.disconnect();
-  }, [setIsHeroVisible]);
+    return () => observer.disconnect()
+  }, [setIsHeroVisible])
 
   return (
     <div
       ref={heroRef}
       className={css({
-        height: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "space-between",
-        bg: "gray.900",
-        position: "relative",
-        overflow: "hidden",
-        px: "4",
-        py: "12",
+        height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        bg: 'gray.900',
+        position: 'relative',
+        overflow: 'hidden',
+        px: '4',
+        py: '12',
       })}
     >
       {/* Background pattern */}
       <div
         className={css({
-          position: "absolute",
+          position: 'absolute',
           inset: 0,
           opacity: 0.1,
           backgroundImage:
-            "radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)",
-          backgroundSize: "40px 40px",
+            'radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)',
+          backgroundSize: '40px 40px',
         })}
       />
 
       {/* Title and Subtitle Section - DIRECT CHILD */}
       <div
         className={css({
-          position: "relative",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: "2",
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '2',
           zIndex: 10,
         })}
       >
         <h1
           className={css({
-            fontSize: { base: "4xl", md: "6xl", lg: "7xl" },
-            fontWeight: "bold",
-            background:
-              "linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)",
-            backgroundClip: "text",
-            color: "transparent",
+            fontSize: { base: '4xl', md: '6xl', lg: '7xl' },
+            fontWeight: 'bold',
+            background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)',
+            backgroundClip: 'text',
+            color: 'transparent',
           })}
         >
           Abaci One
         </h1>
         <p
           className={css({
-            fontSize: { base: "xl", md: "2xl" },
-            fontWeight: "medium",
-            color: "purple.300",
-            fontStyle: "italic",
-            marginBottom: "8",
+            fontSize: { base: 'xl', md: '2xl' },
+            fontWeight: 'medium',
+            color: 'purple.300',
+            fontStyle: 'italic',
+            marginBottom: '8',
             opacity: isSubtitleLoaded ? 1 : 0,
-            transition: "opacity 0.5s ease-in-out",
+            transition: 'opacity 0.5s ease-in-out',
           })}
         >
           {subtitle.text}
@@ -112,26 +107,26 @@ export function HeroAbacus() {
       {/* Large Interactive Abacus - DIRECT CHILD */}
       <div
         className={css({
-          position: "relative",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          flex: "1",
-          width: "100%",
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flex: '1',
+          width: '100%',
           zIndex: 10,
           opacity: isAbacusLoaded ? 1 : 0,
-          transition: "opacity 0.5s ease-in-out",
+          transition: 'opacity 0.5s ease-in-out',
         })}
       >
         <div
           className={css({
             transform: {
-              base: "scale(3.5)",
-              md: "scale(3.5)",
-              lg: "scale(4.25)",
+              base: 'scale(3.5)',
+              md: 'scale(3.5)',
+              lg: 'scale(4.25)',
             },
-            transformOrigin: "center center",
-            transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
+            transformOrigin: 'center center',
+            transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
           })}
         >
           <AbacusReact
@@ -150,14 +145,14 @@ export function HeroAbacus() {
       {/* Subtle hint to scroll - DIRECT CHILD */}
       <div
         className={css({
-          position: "relative",
-          fontSize: "sm",
-          color: "gray.400",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: "2",
-          animation: "bounce 2s ease-in-out infinite",
+          position: 'relative',
+          fontSize: 'sm',
+          color: 'gray.400',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '2',
+          animation: 'bounce 2s ease-in-out infinite',
           zIndex: 10,
         })}
       >
@@ -183,5 +178,5 @@ export function HeroAbacus() {
         }}
       />
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/HomeBlogSection.tsx b/apps/web/src/components/HomeBlogSection.tsx
index f749e467..d198425f 100644
--- a/apps/web/src/components/HomeBlogSection.tsx
+++ b/apps/web/src/components/HomeBlogSection.tsx
@@ -1,73 +1,72 @@
-"use client";
+'use client'
 
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import type { BlogPostMetadata } from "@/lib/blog";
-import { css } from "../../styled-system/css";
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import type { BlogPostMetadata } from '@/lib/blog'
+import { css } from '../../styled-system/css'
 
 export function HomeBlogSection() {
-  const [featuredPosts, setFeaturedPosts] = useState<BlogPostMetadata[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [featuredPosts, setFeaturedPosts] = useState<BlogPostMetadata[]>([])
+  const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     // Fetch featured posts from API
     async function fetchPosts() {
       try {
-        const response = await fetch("/api/blog/featured");
+        const response = await fetch('/api/blog/featured')
         if (response.ok) {
-          const posts = await response.json();
-          setFeaturedPosts(posts);
+          const posts = await response.json()
+          setFeaturedPosts(posts)
         }
       } catch (error) {
-        console.error("Failed to fetch featured blog posts:", error);
+        console.error('Failed to fetch featured blog posts:', error)
       } finally {
-        setLoading(false);
+        setLoading(false)
       }
     }
 
-    fetchPosts();
-  }, []);
+    fetchPosts()
+  }, [])
 
   if (loading) {
-    return null; // Don't show anything while loading
+    return null // Don't show anything while loading
   }
 
   if (featuredPosts.length === 0) {
-    return null; // Don't show section if no posts
+    return null // Don't show section if no posts
   }
 
   return (
     <section
       data-section="blog-preview"
       className={css({
-        display: "flex",
-        flexDirection: "column",
-        gap: "8",
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8',
       })}
     >
       {/* Section Header */}
       <div
         className={css({
-          textAlign: "center",
+          textAlign: 'center',
         })}
       >
         <h2
           className={css({
-            fontSize: { base: "2xl", md: "3xl" },
-            fontWeight: "bold",
-            mb: "2",
-            background:
-              "linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)",
-            backgroundClip: "text",
-            color: "transparent",
+            fontSize: { base: '2xl', md: '3xl' },
+            fontWeight: 'bold',
+            mb: '2',
+            background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)',
+            backgroundClip: 'text',
+            color: 'transparent',
           })}
         >
           From the Blog
         </h2>
         <p
           className={css({
-            fontSize: { base: "sm", md: "md" },
-            color: "text.secondary",
+            fontSize: { base: 'sm', md: 'md' },
+            color: 'text.secondary',
           })}
         >
           Insights on ed-tech and pedagogy
@@ -77,71 +76,68 @@ export function HomeBlogSection() {
       {/* Featured Posts List */}
       <div
         className={css({
-          display: "flex",
-          flexDirection: "column",
-          gap: "4",
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '4',
         })}
       >
         {featuredPosts.map((post) => {
-          const publishedDate = new Date(post.publishedAt).toLocaleDateString(
-            "en-US",
-            {
-              year: "numeric",
-              month: "long",
-              day: "numeric",
-            },
-          );
+          const publishedDate = new Date(post.publishedAt).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+          })
 
           return (
             <Link
               key={post.slug}
               href={`/blog/${post.slug}`}
               className={css({
-                display: "block",
-                p: "4",
-                bg: "accent.subtle",
-                backdropFilter: "blur(10px)",
-                borderRadius: "0.5rem",
-                border: "1px solid",
-                borderColor: "accent.muted",
-                transition: "all 0.3s",
+                display: 'block',
+                p: '4',
+                bg: 'accent.subtle',
+                backdropFilter: 'blur(10px)',
+                borderRadius: '0.5rem',
+                border: '1px solid',
+                borderColor: 'accent.muted',
+                transition: 'all 0.3s',
                 _hover: {
-                  bg: "accent.muted",
-                  borderColor: "accent.default",
-                  transform: "translateY(-2px)",
-                  boxShadow: "0 8px 24px token(colors.accent.muted)",
+                  bg: 'accent.muted',
+                  borderColor: 'accent.default',
+                  transform: 'translateY(-2px)',
+                  boxShadow: '0 8px 24px token(colors.accent.muted)',
                 },
               })}
             >
               <h3
                 className={css({
-                  fontSize: { base: "lg", md: "xl" },
-                  fontWeight: "600",
-                  mb: "2",
-                  color: "text.primary",
-                  lineHeight: "1.3",
+                  fontSize: { base: 'lg', md: 'xl' },
+                  fontWeight: '600',
+                  mb: '2',
+                  color: 'text.primary',
+                  lineHeight: '1.3',
                 })}
               >
                 {post.title}
               </h3>
               <p
                 className={css({
-                  color: "text.secondary",
-                  mb: "3",
-                  lineHeight: "1.5",
-                  fontSize: "sm",
+                  color: 'text.secondary',
+                  mb: '3',
+                  lineHeight: '1.5',
+                  fontSize: 'sm',
                 })}
               >
                 {post.excerpt || post.description}
               </p>
               <div
                 className={css({
-                  display: "flex",
-                  flexWrap: "wrap",
-                  gap: "2",
-                  alignItems: "center",
-                  fontSize: "xs",
-                  color: "text.muted",
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: '2',
+                  alignItems: 'center',
+                  fontSize: 'xs',
+                  color: 'text.muted',
                 })}
               >
                 <span>{post.author}</span>
@@ -151,23 +147,23 @@ export function HomeBlogSection() {
               {post.tags.length > 0 && (
                 <div
                   className={css({
-                    display: "flex",
-                    flexWrap: "wrap",
-                    gap: "1.5",
-                    mt: "2",
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '1.5',
+                    mt: '2',
                   })}
                 >
                   {post.tags.slice(0, 2).map((tag) => (
                     <span
                       key={tag}
                       className={css({
-                        px: "1.5",
-                        py: "0.25",
-                        bg: "accent.muted",
-                        color: "accent.emphasis",
-                        borderRadius: "0.25rem",
-                        fontSize: "2xs",
-                        fontWeight: "500",
+                        px: '1.5',
+                        py: '0.25',
+                        bg: 'accent.muted',
+                        color: 'accent.emphasis',
+                        borderRadius: '0.25rem',
+                        fontSize: '2xs',
+                        fontWeight: '500',
                       })}
                     >
                       {tag}
@@ -176,35 +172,35 @@ export function HomeBlogSection() {
                 </div>
               )}
             </Link>
-          );
+          )
         })}
       </div>
 
       {/* View All Link */}
       <div
         className={css({
-          textAlign: "center",
+          textAlign: 'center',
         })}
       >
         <Link
           href="/blog"
           className={css({
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "2",
-            px: "4",
-            py: "2",
-            bg: "accent.subtle",
-            color: "accent.emphasis",
-            fontWeight: "600",
-            fontSize: "sm",
-            borderRadius: "0.5rem",
-            border: "1px solid",
-            borderColor: "accent.muted",
-            transition: "all 0.2s",
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '2',
+            px: '4',
+            py: '2',
+            bg: 'accent.subtle',
+            color: 'accent.emphasis',
+            fontWeight: '600',
+            fontSize: 'sm',
+            borderRadius: '0.5rem',
+            border: '1px solid',
+            borderColor: 'accent.muted',
+            transition: 'all 0.2s',
             _hover: {
-              bg: "accent.muted",
-              borderColor: "accent.default",
+              bg: 'accent.muted',
+              borderColor: 'accent.default',
             },
           })}
         >
@@ -213,5 +209,5 @@ export function HomeBlogSection() {
         </Link>
       </div>
     </section>
-  );
+  )
 }
diff --git a/apps/web/src/components/InteractiveAbacus.tsx b/apps/web/src/components/InteractiveAbacus.tsx
index 10109fd2..91451f58 100644
--- a/apps/web/src/components/InteractiveAbacus.tsx
+++ b/apps/web/src/components/InteractiveAbacus.tsx
@@ -1,20 +1,20 @@
-"use client";
+'use client'
 
-import NumberFlow from "@number-flow/react";
-import { useSpring } from "@react-spring/web";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { css } from "../../styled-system/css";
-import { TypstSoroban } from "./TypstSoroban";
+import NumberFlow from '@number-flow/react'
+import { useSpring } from '@react-spring/web'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { css } from '../../styled-system/css'
+import { TypstSoroban } from './TypstSoroban'
 
 interface InteractiveAbacusProps {
-  initialValue?: number;
-  columns?: number;
-  className?: string;
-  onValueChange?: (value: number) => void;
-  showValue?: boolean;
-  showControls?: boolean;
-  showManualInput?: boolean;
-  compact?: boolean;
+  initialValue?: number
+  columns?: number
+  className?: string
+  onValueChange?: (value: number) => void
+  showValue?: boolean
+  showControls?: boolean
+  showManualInput?: boolean
+  compact?: boolean
 }
 
 export function InteractiveAbacus({
@@ -27,77 +27,74 @@ export function InteractiveAbacus({
   showManualInput = false,
   compact = false,
 }: InteractiveAbacusProps) {
-  const [currentValue, setCurrentValue] = useState(initialValue);
-  const [isChanging, setIsChanging] = useState(false);
-  const [_previousValue, setPreviousValue] = useState(initialValue);
-  const [isEditing, setIsEditing] = useState(false);
-  const [editingValue, setEditingValue] = useState("");
-  const [disableAnimation, setDisableAnimation] = useState(false);
-  const svgRef = useRef<HTMLDivElement>(null);
-  const numberRef = useRef<HTMLDivElement>(null);
+  const [currentValue, setCurrentValue] = useState(initialValue)
+  const [isChanging, setIsChanging] = useState(false)
+  const [_previousValue, setPreviousValue] = useState(initialValue)
+  const [isEditing, setIsEditing] = useState(false)
+  const [editingValue, setEditingValue] = useState('')
+  const [disableAnimation, setDisableAnimation] = useState(false)
+  const svgRef = useRef<HTMLDivElement>(null)
+  const numberRef = useRef<HTMLDivElement>(null)
 
   // Remove the old spring animation since we're using NumberFlow now
 
   // Container animation for feedback
   const containerSpring = useSpring({
     scale: isChanging ? 1.02 : 1,
-    borderColor: isChanging ? "#fbbf24" : "#d97706", // amber-400 vs amber-600
+    borderColor: isChanging ? '#fbbf24' : '#d97706', // amber-400 vs amber-600
     config: { tension: 400, friction: 25 },
-  });
+  })
 
   // Crossfade animation between old and new SVG states
   const _crossfadeSpring = useSpring({
     opacity: isChanging ? 0.7 : 1,
-    transform: isChanging ? "scale(0.98)" : "scale(1)",
+    transform: isChanging ? 'scale(0.98)' : 'scale(1)',
     config: { tension: 300, friction: 30 },
-  });
+  })
 
   // Handle bead clicks to toggle values
   const handleBeadClick = useCallback(
     (event: Event) => {
-      const target = event.target as Element;
+      const target = event.target as Element
 
       // Find the closest element with bead data attributes
-      const beadElement = target.closest("[data-bead-type]");
-      if (!beadElement) return;
+      const beadElement = target.closest('[data-bead-type]')
+      if (!beadElement) return
 
-      const beadType = beadElement.getAttribute("data-bead-type");
-      const beadColumn = parseInt(
-        beadElement.getAttribute("data-bead-column") || "0",
-        10,
-      );
-      const beadPosition = beadElement.getAttribute("data-bead-position");
-      const isActive = beadElement.getAttribute("data-bead-active") === "1";
+      const beadType = beadElement.getAttribute('data-bead-type')
+      const beadColumn = parseInt(beadElement.getAttribute('data-bead-column') || '0', 10)
+      const beadPosition = beadElement.getAttribute('data-bead-position')
+      const isActive = beadElement.getAttribute('data-bead-active') === '1'
 
-      if (beadType === "heaven") {
+      if (beadType === 'heaven') {
         // Toggle heaven bead (worth 5)
         // Now using place-value based column numbering: 0=ones, 1=tens, 2=hundreds
-        const placeValue = beadColumn;
-        const columnPower = 10 ** placeValue;
-        const heavenValue = 5 * columnPower;
+        const placeValue = beadColumn
+        const columnPower = 10 ** placeValue
+        const heavenValue = 5 * columnPower
 
-        const maxValue = 10 ** columns - 1;
+        const maxValue = 10 ** columns - 1
 
         if (isActive) {
           // Deactivate heaven bead - subtract 5 from this column
-          setCurrentValue((prev) => Math.max(0, prev - heavenValue));
+          setCurrentValue((prev) => Math.max(0, prev - heavenValue))
         } else {
           // Activate heaven bead - add 5 to this column
-          setCurrentValue((prev) => Math.min(prev + heavenValue, maxValue));
+          setCurrentValue((prev) => Math.min(prev + heavenValue, maxValue))
         }
-      } else if (beadType === "earth" && beadPosition) {
+      } else if (beadType === 'earth' && beadPosition) {
         // Toggle earth bead (worth 1 each)
-        const position = parseInt(beadPosition, 10); // 0-3 where 0 is top (closest to bar), 3 is bottom
+        const position = parseInt(beadPosition, 10) // 0-3 where 0 is top (closest to bar), 3 is bottom
         // Now using place-value based column numbering: 0=ones, 1=tens, 2=hundreds
-        const placeValue = beadColumn;
-        const columnPower = 10 ** placeValue;
+        const placeValue = beadColumn
+        const columnPower = 10 ** placeValue
 
         // Calculate current digit in this column
-        const currentDigit = Math.floor(currentValue / columnPower) % 10;
-        const heavenContribution = Math.floor(currentDigit / 5) * 5;
-        const earthContribution = currentDigit % 5;
+        const currentDigit = Math.floor(currentValue / columnPower) % 10
+        const heavenContribution = Math.floor(currentDigit / 5) * 5
+        const earthContribution = currentDigit % 5
 
-        let newEarthContribution: number;
+        let newEarthContribution: number
 
         // Earth beads are numbered 0-3 from top to bottom (0 is closest to bar)
         // In traditional abacus logic:
@@ -109,171 +106,169 @@ export function InteractiveAbacus({
           // This bead is currently active, so we deactivate it and all beads below it
           // If position 2 is clicked and active, we want positions 0,1 to remain active
           // So earthContribution should be position (2)
-          newEarthContribution = position;
+          newEarthContribution = position
         } else {
           // This bead is currently inactive, so we activate it and all beads above it
           // If position 2 is clicked and inactive, we want positions 0,1,2 to be active
           // So earthContribution should be position + 1 (3)
-          newEarthContribution = position + 1;
+          newEarthContribution = position + 1
         }
 
         // Calculate the new digit for this column
-        const newDigit = heavenContribution + newEarthContribution;
+        const newDigit = heavenContribution + newEarthContribution
 
         // Calculate the new total value
-        const columnContribution =
-          (Math.floor(currentValue / columnPower) % 10) * columnPower;
-        const newValue =
-          currentValue - columnContribution + newDigit * columnPower;
+        const columnContribution = (Math.floor(currentValue / columnPower) % 10) * columnPower
+        const newValue = currentValue - columnContribution + newDigit * columnPower
 
         // Ensure value doesn't exceed maximum for this number of columns
-        const maxValue = 10 ** columns - 1;
-        setCurrentValue(Math.max(0, Math.min(newValue, maxValue)));
+        const maxValue = 10 ** columns - 1
+        setCurrentValue(Math.max(0, Math.min(newValue, maxValue)))
       }
 
       // Visual feedback with extended timing for smoother transition
-      setIsChanging(true);
+      setIsChanging(true)
 
       // Update previous value for crossfade effect
-      setPreviousValue(currentValue);
+      setPreviousValue(currentValue)
 
       // Extended timing to allow for smoother crossfade
-      setTimeout(() => setIsChanging(false), 300);
+      setTimeout(() => setIsChanging(false), 300)
     },
-    [currentValue, columns],
-  );
+    [currentValue, columns]
+  )
 
   // Add click event listener for bead interactions
   useEffect(() => {
-    const svgContainer = svgRef.current;
-    if (!svgContainer) return;
+    const svgContainer = svgRef.current
+    if (!svgContainer) return
 
-    svgContainer.addEventListener("click", handleBeadClick);
+    svgContainer.addEventListener('click', handleBeadClick)
     return () => {
-      svgContainer.removeEventListener("click", handleBeadClick);
-    };
-  }, [handleBeadClick]);
+      svgContainer.removeEventListener('click', handleBeadClick)
+    }
+  }, [handleBeadClick])
 
   // Notify parent of value changes
   useMemo(() => {
-    onValueChange?.(currentValue);
-  }, [currentValue, onValueChange]);
+    onValueChange?.(currentValue)
+  }, [currentValue, onValueChange])
 
   const handleReset = useCallback(() => {
-    setIsChanging(true);
-    setTimeout(() => setIsChanging(false), 150);
-    setCurrentValue(0);
-  }, []);
+    setIsChanging(true)
+    setTimeout(() => setIsChanging(false), 150)
+    setCurrentValue(0)
+  }, [])
 
   const handleSetValue = useCallback((value: number) => {
-    setIsChanging(true);
-    setTimeout(() => setIsChanging(false), 150);
-    setCurrentValue(value);
-  }, []);
+    setIsChanging(true)
+    setTimeout(() => setIsChanging(false), 150)
+    setCurrentValue(value)
+  }, [])
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent) => {
-      if (!showManualInput) return;
+      if (!showManualInput) return
 
       // Handle number keys and editing
-      if (event.key >= "0" && event.key <= "9") {
-        event.preventDefault();
-        let newEditingValue: string;
+      if (event.key >= '0' && event.key <= '9') {
+        event.preventDefault()
+        let newEditingValue: string
         if (!isEditing) {
-          setIsEditing(true);
-          newEditingValue = event.key;
-          setEditingValue(newEditingValue);
+          setIsEditing(true)
+          newEditingValue = event.key
+          setEditingValue(newEditingValue)
         } else {
-          newEditingValue = editingValue + event.key;
-          const numValue = parseInt(newEditingValue, 10);
-          const maxValue = 10 ** columns - 1;
+          newEditingValue = editingValue + event.key
+          const numValue = parseInt(newEditingValue, 10)
+          const maxValue = 10 ** columns - 1
           if (numValue <= maxValue) {
-            setEditingValue(newEditingValue);
+            setEditingValue(newEditingValue)
           } else {
-            return; // Don't update if exceeds max
+            return // Don't update if exceeds max
           }
         }
         // Disable animation for keyboard input changes
-        setDisableAnimation(true);
+        setDisableAnimation(true)
         // Update abacus immediately
-        const liveValue = parseInt(newEditingValue, 10) || 0;
-        setCurrentValue(liveValue);
+        const liveValue = parseInt(newEditingValue, 10) || 0
+        setCurrentValue(liveValue)
         // Re-enable animation after a brief delay
-        setTimeout(() => setDisableAnimation(false), 100);
-      } else if (event.key === "Backspace") {
-        event.preventDefault();
+        setTimeout(() => setDisableAnimation(false), 100)
+      } else if (event.key === 'Backspace') {
+        event.preventDefault()
         if (isEditing) {
-          let newEditingValue: string;
+          let newEditingValue: string
           if (editingValue.length > 1) {
-            newEditingValue = editingValue.slice(0, -1);
+            newEditingValue = editingValue.slice(0, -1)
           } else {
-            newEditingValue = "0";
+            newEditingValue = '0'
           }
-          setEditingValue(newEditingValue);
+          setEditingValue(newEditingValue)
           // Disable animation for potentially jarring backspace changes
-          setDisableAnimation(true);
-          const liveValue = parseInt(newEditingValue, 10) || 0;
-          setCurrentValue(liveValue);
+          setDisableAnimation(true)
+          const liveValue = parseInt(newEditingValue, 10) || 0
+          setCurrentValue(liveValue)
           // Re-enable animation after a brief delay
-          setTimeout(() => setDisableAnimation(false), 100);
+          setTimeout(() => setDisableAnimation(false), 100)
         }
-      } else if (event.key === "Enter" || event.key === "Escape") {
-        event.preventDefault();
+      } else if (event.key === 'Enter' || event.key === 'Escape') {
+        event.preventDefault()
         if (isEditing) {
-          setIsEditing(false);
-          setEditingValue("");
+          setIsEditing(false)
+          setEditingValue('')
           // Value is already set from live updates
         }
-      } else if (event.key === "Delete") {
-        event.preventDefault();
-        setEditingValue("0");
-        setIsEditing(true);
+      } else if (event.key === 'Delete') {
+        event.preventDefault()
+        setEditingValue('0')
+        setIsEditing(true)
         // Disable animation for potentially jarring delete changes
-        setDisableAnimation(true);
+        setDisableAnimation(true)
         // Update abacus immediately
-        setCurrentValue(0);
+        setCurrentValue(0)
         // Re-enable animation after a brief delay
-        setTimeout(() => setDisableAnimation(false), 100);
+        setTimeout(() => setDisableAnimation(false), 100)
       }
     },
-    [showManualInput, isEditing, editingValue, columns],
-  );
+    [showManualInput, isEditing, editingValue, columns]
+  )
 
   const handleNumberClick = useCallback(() => {
     if (showManualInput && numberRef.current) {
-      numberRef.current.focus();
+      numberRef.current.focus()
       if (!isEditing) {
-        setIsEditing(true);
-        setEditingValue(String(currentValue));
+        setIsEditing(true)
+        setEditingValue(String(currentValue))
       }
     }
-  }, [showManualInput, isEditing, currentValue]);
+  }, [showManualInput, isEditing, currentValue])
 
   const handleNumberBlur = useCallback(() => {
     if (isEditing) {
-      setIsEditing(false);
-      setEditingValue("");
+      setIsEditing(false)
+      setEditingValue('')
       // Value is already live-updated, no need to set again
     }
-  }, [isEditing]);
+  }, [isEditing])
 
   return (
     <div className={className}>
       <div
         className={css({
-          display: "flex",
-          flexDirection: compact ? "row" : "column",
-          gap: compact ? "4" : "6",
-          alignItems: "center",
+          display: 'flex',
+          flexDirection: compact ? 'row' : 'column',
+          gap: compact ? '4' : '6',
+          alignItems: 'center',
         })}
       >
         {/* Interactive Abacus Container */}
         <div
           className={css({
-            position: "relative",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
           })}
         >
           {/* Abacus with integrated value display */}
@@ -281,51 +276,51 @@ export function InteractiveAbacus({
             ref={svgRef}
             style={containerSpring as any}
             className={css({
-              width: compact ? "240px" : "300px",
-              height: compact ? "320px" : "400px",
-              border: "3px solid",
-              borderRadius: "12px",
-              bg: "gradient-to-br",
-              gradientFrom: "amber.50",
-              gradientTo: "orange.100",
-              padding: compact ? "16px" : "20px",
-              boxShadow: "0 8px 24px rgba(0, 0, 0, 0.1)",
-              position: "relative",
-              transition: "all 0.2s ease",
+              width: compact ? '240px' : '300px',
+              height: compact ? '320px' : '400px',
+              border: '3px solid',
+              borderRadius: '12px',
+              bg: 'gradient-to-br',
+              gradientFrom: 'amber.50',
+              gradientTo: 'orange.100',
+              padding: compact ? '16px' : '20px',
+              boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1)',
+              position: 'relative',
+              transition: 'all 0.2s ease',
               _hover: {
-                boxShadow: "0 12px 32px rgba(0, 0, 0, 0.15)",
+                boxShadow: '0 12px 32px rgba(0, 0, 0, 0.15)',
               },
             })}
           >
             <div
               className={css({
-                width: "100%",
-                height: "100%",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                overflow: "hidden",
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                overflow: 'hidden',
               })}
             >
               <div
                 className={css({
-                  transform: "scale(2.2)",
-                  transformOrigin: "center",
+                  transform: 'scale(2.2)',
+                  transformOrigin: 'center',
                 })}
               >
                 <TypstSoroban
                   number={currentValue}
-                  width={compact ? "144pt" : "180pt"}
-                  height={compact ? "192pt" : "240pt"}
+                  width={compact ? '144pt' : '180pt'}
+                  height={compact ? '192pt' : '240pt'}
                   className={css({
-                    transition: "all 0.3s ease",
-                    cursor: "pointer",
-                    "& [data-bead-type]": {
-                      cursor: "pointer",
-                      transition: "all 0.2s ease",
+                    transition: 'all 0.3s ease',
+                    cursor: 'pointer',
+                    '& [data-bead-type]': {
+                      cursor: 'pointer',
+                      transition: 'all 0.2s ease',
                       _hover: {
-                        filter: "brightness(1.2)",
-                        transform: "scale(1.05)",
+                        filter: 'brightness(1.2)',
+                        transform: 'scale(1.05)',
                       },
                     },
                   })}
@@ -338,77 +333,62 @@ export function InteractiveAbacus({
           {showValue && (
             <div
               className={css({
-                position: "absolute",
-                bottom: compact ? "-45px" : "-55px",
-                left: "50%",
-                transform: "translateX(-50%)",
-                display: "flex",
-                alignItems: "center",
-                gap: "0",
-                width: compact ? "240px" : "300px",
-                justifyContent: "center",
+                position: 'absolute',
+                bottom: compact ? '-45px' : '-55px',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0',
+                width: compact ? '240px' : '300px',
+                justifyContent: 'center',
               })}
             >
               {/* Position digits above their respective columns */}
               {Array.from({ length: columns }, (_, colIndex) => {
-                const placeValue = columns - 1 - colIndex; // rightmost is 0 (ones), leftmost is highest
+                const placeValue = columns - 1 - colIndex // rightmost is 0 (ones), leftmost is highest
                 const digit =
                   Math.floor(
-                    (isEditing
-                      ? parseInt(editingValue, 10) || 0
-                      : currentValue) /
-                      10 ** placeValue,
-                  ) % 10;
-                const columnWidth = compact ? 240 / columns : 300 / columns;
+                    (isEditing ? parseInt(editingValue, 10) || 0 : currentValue) / 10 ** placeValue
+                  ) % 10
+                const columnWidth = compact ? 240 / columns : 300 / columns
 
                 return (
                   <div
                     key={colIndex}
                     className={css({
-                      position: "relative",
+                      position: 'relative',
                       width: `${columnWidth}px`,
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center',
                     })}
                   >
                     <div
-                      ref={
-                        colIndex === 0 && showManualInput
-                          ? numberRef
-                          : undefined
-                      }
+                      ref={colIndex === 0 && showManualInput ? numberRef : undefined}
                       tabIndex={showManualInput && colIndex === 0 ? 0 : -1}
                       onClick={showManualInput ? handleNumberClick : undefined}
-                      onKeyDown={
-                        showManualInput && colIndex === 0
-                          ? handleKeyDown
-                          : undefined
-                      }
-                      onBlur={
-                        showManualInput && colIndex === 0
-                          ? handleNumberBlur
-                          : undefined
-                      }
+                      onKeyDown={showManualInput && colIndex === 0 ? handleKeyDown : undefined}
+                      onBlur={showManualInput && colIndex === 0 ? handleNumberBlur : undefined}
                       className={css({
-                        bg: "white",
-                        border: "2px solid",
-                        borderColor: "blue.200",
-                        rounded: "xl",
-                        boxShadow: "0 4px 12px rgba(59, 130, 246, 0.15)",
-                        px: "2",
-                        py: "1",
-                        minW: compact ? "32px" : "40px",
-                        position: "relative",
-                        outline: "none",
-                        cursor: showManualInput ? "pointer" : "default",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
+                        bg: 'white',
+                        border: '2px solid',
+                        borderColor: 'blue.200',
+                        rounded: 'xl',
+                        boxShadow: '0 4px 12px rgba(59, 130, 246, 0.15)',
+                        px: '2',
+                        py: '1',
+                        minW: compact ? '32px' : '40px',
+                        position: 'relative',
+                        outline: 'none',
+                        cursor: showManualInput ? 'pointer' : 'default',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
                       })}
                       title={
                         showManualInput && colIndex === 0
-                          ? "Click to edit, type numbers, Enter to confirm"
+                          ? 'Click to edit, type numbers, Enter to confirm'
                           : undefined
                       }
                     >
@@ -416,11 +396,11 @@ export function InteractiveAbacus({
                         value={digit}
                         animated={!disableAnimation && !isEditing}
                         style={{
-                          fontSize: compact ? "1.25rem" : "1.5rem",
-                          fontWeight: "bold",
-                          color: isEditing ? "#1d4ed8" : "#2563eb",
-                          textAlign: "center",
-                          minWidth: compact ? "20px" : "24px",
+                          fontSize: compact ? '1.25rem' : '1.5rem',
+                          fontWeight: 'bold',
+                          color: isEditing ? '#1d4ed8' : '#2563eb',
+                          textAlign: 'center',
+                          minWidth: compact ? '20px' : '24px',
                         }}
                       />
 
@@ -428,21 +408,21 @@ export function InteractiveAbacus({
                       {isEditing && colIndex === 0 && (
                         <div
                           className={css({
-                            position: "absolute",
-                            bottom: "-2px",
-                            left: "50%",
-                            transform: "translateX(-50%)",
-                            width: "80%",
-                            height: "2px",
-                            bg: "blue.400",
-                            rounded: "full",
-                            animation: "pulse 1s infinite",
+                            position: 'absolute',
+                            bottom: '-2px',
+                            left: '50%',
+                            transform: 'translateX(-50%)',
+                            width: '80%',
+                            height: '2px',
+                            bg: 'blue.400',
+                            rounded: 'full',
+                            animation: 'pulse 1s infinite',
                           })}
                         />
                       )}
                     </div>
                   </div>
-                );
+                )
               })}
             </div>
           )}
@@ -452,37 +432,37 @@ export function InteractiveAbacus({
         {showControls && (
           <div
             className={css({
-              display: "flex",
-              flexDirection: compact ? "column" : "row",
-              alignItems: "center",
-              gap: "2",
-              flexWrap: compact ? "nowrap" : "wrap",
-              justifyContent: "center",
-              mt: showValue ? (compact ? "0" : "16") : "0",
+              display: 'flex',
+              flexDirection: compact ? 'column' : 'row',
+              alignItems: 'center',
+              gap: '2',
+              flexWrap: compact ? 'nowrap' : 'wrap',
+              justifyContent: 'center',
+              mt: showValue ? (compact ? '0' : '16') : '0',
             })}
           >
             <button
               onClick={handleReset}
               className={css({
-                px: "3",
-                py: "2",
-                bg: "gray.100",
-                color: "gray.700",
-                border: "1px solid",
-                borderColor: "gray.300",
-                rounded: "md",
-                fontSize: "xs",
-                fontWeight: "medium",
-                cursor: "pointer",
-                transition: "all 0.2s ease",
-                minW: compact ? "60px" : "auto",
+                px: '3',
+                py: '2',
+                bg: 'gray.100',
+                color: 'gray.700',
+                border: '1px solid',
+                borderColor: 'gray.300',
+                rounded: 'md',
+                fontSize: 'xs',
+                fontWeight: 'medium',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
+                minW: compact ? '60px' : 'auto',
                 _hover: {
-                  bg: "gray.200",
-                  borderColor: "gray.400",
-                  transform: "translateY(-1px)",
+                  bg: 'gray.200',
+                  borderColor: 'gray.400',
+                  transform: 'translateY(-1px)',
                 },
                 _active: {
-                  transform: "scale(0.95)",
+                  transform: 'scale(0.95)',
                 },
               })}
             >
@@ -492,44 +472,42 @@ export function InteractiveAbacus({
             {/* Compact preset buttons */}
             <div
               className={css({
-                display: "flex",
-                flexDirection: compact ? "column" : "row",
-                gap: "1",
-                flexWrap: "wrap",
+                display: 'flex',
+                flexDirection: compact ? 'column' : 'row',
+                gap: '1',
+                flexWrap: 'wrap',
               })}
             >
-              {(compact ? [1, 5, 10, 25] : [1, 5, 10, 25, 50, 99]).map(
-                (preset) => (
-                  <button
-                    key={preset}
-                    onClick={() => handleSetValue(preset)}
-                    className={css({
-                      px: "2",
-                      py: "1",
-                      bg: "blue.100",
-                      color: "blue.700",
-                      border: "1px solid",
-                      borderColor: "blue.300",
-                      rounded: "md",
-                      fontSize: "xs",
-                      fontWeight: "medium",
-                      cursor: "pointer",
-                      transition: "all 0.2s ease",
-                      minW: compact ? "40px" : "32px",
-                      _hover: {
-                        bg: "blue.200",
-                        borderColor: "blue.400",
-                        transform: "translateY(-1px)",
-                      },
-                      _active: {
-                        transform: "scale(0.95)",
-                      },
-                    })}
-                  >
-                    {preset}
-                  </button>
-                ),
-              )}
+              {(compact ? [1, 5, 10, 25] : [1, 5, 10, 25, 50, 99]).map((preset) => (
+                <button
+                  key={preset}
+                  onClick={() => handleSetValue(preset)}
+                  className={css({
+                    px: '2',
+                    py: '1',
+                    bg: 'blue.100',
+                    color: 'blue.700',
+                    border: '1px solid',
+                    borderColor: 'blue.300',
+                    rounded: 'md',
+                    fontSize: 'xs',
+                    fontWeight: 'medium',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s ease',
+                    minW: compact ? '40px' : '32px',
+                    _hover: {
+                      bg: 'blue.200',
+                      borderColor: 'blue.400',
+                      transform: 'translateY(-1px)',
+                    },
+                    _active: {
+                      transform: 'scale(0.95)',
+                    },
+                  })}
+                >
+                  {preset}
+                </button>
+              ))}
             </div>
           </div>
         )}
@@ -538,28 +516,26 @@ export function InteractiveAbacus({
         {!compact && (
           <div
             className={css({
-              fontSize: "sm",
-              color: "gray.600",
-              textAlign: "center",
-              maxW: "450px",
-              lineHeight: "relaxed",
-              bg: "gray.50",
-              px: "4",
-              py: "3",
-              rounded: "lg",
-              border: "1px solid",
-              borderColor: "gray.200",
-              mt: showValue ? "16" : "0",
+              fontSize: 'sm',
+              color: 'gray.600',
+              textAlign: 'center',
+              maxW: '450px',
+              lineHeight: 'relaxed',
+              bg: 'gray.50',
+              px: '4',
+              py: '3',
+              rounded: 'lg',
+              border: '1px solid',
+              borderColor: 'gray.200',
+              mt: showValue ? '16' : '0',
             })}
           >
-            <strong>How to use:</strong> Click on the beads to activate or
-            deactivate them! Heaven beads (top) are worth 5 each, earth beads
-            (bottom) are worth 1 each.
-            {showManualInput &&
-              " You can also click the number to type directly."}
+            <strong>How to use:</strong> Click on the beads to activate or deactivate them! Heaven
+            beads (top) are worth 5 each, earth beads (bottom) are worth 1 each.
+            {showManualInput && ' You can also click the number to type directly.'}
           </div>
         )}
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/InteractiveFlashcards.tsx b/apps/web/src/components/InteractiveFlashcards.tsx
index 27c17cd7..dad3c575 100644
--- a/apps/web/src/components/InteractiveFlashcards.tsx
+++ b/apps/web/src/components/InteractiveFlashcards.tsx
@@ -1,16 +1,16 @@
-"use client";
+'use client'
 
-import { AbacusReact, useAbacusConfig } from "@soroban/abacus-react";
-import { useEffect, useRef, useState } from "react";
-import { css } from "../../styled-system/css";
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import { useEffect, useRef, useState } from 'react'
+import { css } from '../../styled-system/css'
 
 interface Flashcard {
-  id: number;
-  number: number;
-  initialX: number;
-  initialY: number;
-  initialRotation: number;
-  zIndex: number;
+  id: number
+  number: number
+  initialX: number
+  initialY: number
+  initialRotation: number
+  zIndex: number
 }
 
 /**
@@ -18,31 +18,31 @@ interface Flashcard {
  * Cards stay where you drop them - simple and intuitive
  */
 export function InteractiveFlashcards() {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [cards, setCards] = useState<Flashcard[]>([]);
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [cards, setCards] = useState<Flashcard[]>([])
 
   useEffect(() => {
-    if (!containerRef.current) return;
+    if (!containerRef.current) return
 
     // Double rAF pattern - ensures layout is fully complete
     const frameId1 = requestAnimationFrame(() => {
       const frameId2 = requestAnimationFrame(() => {
-        if (!containerRef.current) return;
+        if (!containerRef.current) return
 
-        const containerWidth = containerRef.current.offsetWidth;
-        const containerHeight = containerRef.current.offsetHeight;
+        const containerWidth = containerRef.current.offsetWidth
+        const containerHeight = containerRef.current.offsetHeight
 
         // Only generate cards once we have proper dimensions
         if (containerWidth < 100 || containerHeight < 100) {
-          return;
+          return
         }
 
-        const count = Math.floor(Math.random() * 8) + 8; // 8-15 cards
-        const generated: Flashcard[] = [];
+        const count = Math.floor(Math.random() * 8) + 8 // 8-15 cards
+        const generated: Flashcard[] = []
 
         // Position cards within the actual container bounds
-        const cardWidth = 120; // approximate card width
-        const cardHeight = 200; // approximate card height
+        const cardWidth = 120 // approximate card width
+        const cardHeight = 200 // approximate card height
 
         for (let i = 0; i < count; i++) {
           const card = {
@@ -52,33 +52,33 @@ export function InteractiveFlashcards() {
             initialY: Math.random() * (containerHeight - cardHeight - 40) + 20,
             initialRotation: Math.random() * 40 - 20, // -20 to 20 degrees
             zIndex: i,
-          };
-          generated.push(card);
+          }
+          generated.push(card)
         }
 
-        setCards(generated);
-      });
-    });
+        setCards(generated)
+      })
+    })
 
     return () => {
       // Note: can't cancel nested rAF properly, but component cleanup will prevent state updates
-    };
-  }, []);
+    }
+  }, [])
 
   return (
     <div
       ref={containerRef}
       data-component="interactive-flashcards"
       className={css({
-        position: "relative",
-        width: "100%",
-        maxW: "1200px",
-        mx: "auto",
-        height: { base: "400px", md: "500px" },
-        overflow: "visible",
-        bg: "rgba(0, 0, 0, 0.3)",
-        rounded: "xl",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
+        position: 'relative',
+        width: '100%',
+        maxW: '1200px',
+        mx: 'auto',
+        height: { base: '400px', md: '500px' },
+        overflow: 'visible',
+        bg: 'rgba(0, 0, 0, 0.3)',
+        rounded: 'xl',
+        border: '1px solid rgba(255, 255, 255, 0.1)',
         zIndex: 1, // Create stacking context so child z-indexes are relative
       })}
     >
@@ -86,48 +86,48 @@ export function InteractiveFlashcards() {
         <DraggableCard key={card.id} card={card} containerRef={containerRef} />
       ))}
     </div>
-  );
+  )
 }
 
 interface DraggableCardProps {
-  card: Flashcard;
-  containerRef: React.RefObject<HTMLDivElement>;
+  card: Flashcard
+  containerRef: React.RefObject<HTMLDivElement>
 }
 
 function DraggableCard({ card, containerRef }: DraggableCardProps) {
-  const appConfig = useAbacusConfig();
+  const appConfig = useAbacusConfig()
 
   // Track position - starts at initial, updates when dragged
   const [position, setPosition] = useState({
     x: card.initialX,
     y: card.initialY,
-  });
-  const [rotation, setRotation] = useState(card.initialRotation); // Now dynamic!
-  const [zIndex, setZIndex] = useState(card.zIndex);
-  const [isDragging, setIsDragging] = useState(false);
-  const [dragSpeed, setDragSpeed] = useState(0); // Speed for dynamic shadow
+  })
+  const [rotation, setRotation] = useState(card.initialRotation) // Now dynamic!
+  const [zIndex, setZIndex] = useState(card.zIndex)
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragSpeed, setDragSpeed] = useState(0) // Speed for dynamic shadow
 
   // Track drag state
   const dragStartRef = useRef<{
-    x: number;
-    y: number;
-    cardX: number;
-    cardY: number;
-  } | null>(null);
-  const grabOffsetRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 }); // Offset from card center where grabbed
-  const baseRotationRef = useRef(card.initialRotation); // Starting rotation
-  const lastMoveTimeRef = useRef<number>(0);
-  const lastMovePositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
-  const lastLogTimeRef = useRef<number>(0); // Separate throttling for logging
-  const cardRef = useRef<HTMLDivElement>(null); // Reference to card element
+    x: number
+    y: number
+    cardX: number
+    cardY: number
+  } | null>(null)
+  const grabOffsetRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 }) // Offset from card center where grabbed
+  const baseRotationRef = useRef(card.initialRotation) // Starting rotation
+  const lastMoveTimeRef = useRef<number>(0)
+  const lastMovePositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+  const lastLogTimeRef = useRef<number>(0) // Separate throttling for logging
+  const cardRef = useRef<HTMLDivElement>(null) // Reference to card element
 
   const handlePointerDown = (e: React.PointerEvent) => {
-    setIsDragging(true);
-    setZIndex(10); // Bring to front within container stacking context
-    setDragSpeed(0);
+    setIsDragging(true)
+    setZIndex(10) // Bring to front within container stacking context
+    setDragSpeed(0)
 
     // Capture the pointer
-    e.currentTarget.setPointerCapture(e.pointerId);
+    e.currentTarget.setPointerCapture(e.pointerId)
 
     // Record where the drag started (pointer position and card position)
     dragStartRef.current = {
@@ -135,112 +135,109 @@ function DraggableCard({ card, containerRef }: DraggableCardProps) {
       y: e.clientY,
       cardX: position.x,
       cardY: position.y,
-    };
+    }
 
     // Calculate grab offset from card center IN LOCAL COORDINATES (unrotated)
     if (cardRef.current) {
-      const rect = cardRef.current.getBoundingClientRect();
-      const cardCenterX = rect.left + rect.width / 2;
-      const cardCenterY = rect.top + rect.height / 2;
+      const rect = cardRef.current.getBoundingClientRect()
+      const cardCenterX = rect.left + rect.width / 2
+      const cardCenterY = rect.top + rect.height / 2
 
       // Screen-space offset from center
-      const screenOffsetX = e.clientX - cardCenterX;
-      const screenOffsetY = e.clientY - cardCenterY;
+      const screenOffsetX = e.clientX - cardCenterX
+      const screenOffsetY = e.clientY - cardCenterY
 
       // Convert to local coordinates by rotating by -rotation
-      const currentRotationRad = (rotation * Math.PI) / 180;
-      const cosRot = Math.cos(-currentRotationRad);
-      const sinRot = Math.sin(-currentRotationRad);
+      const currentRotationRad = (rotation * Math.PI) / 180
+      const cosRot = Math.cos(-currentRotationRad)
+      const sinRot = Math.sin(-currentRotationRad)
 
       grabOffsetRef.current = {
         x: screenOffsetX * cosRot - screenOffsetY * sinRot,
         y: screenOffsetX * sinRot + screenOffsetY * cosRot,
-      };
+      }
       console.log(
-        `[GrabPoint] Grabbed at local offset: (${grabOffsetRef.current.x.toFixed(0)}, ${grabOffsetRef.current.y.toFixed(0)})px (screen offset: ${screenOffsetX.toFixed(0)}, ${screenOffsetY.toFixed(0)}px, rotation: ${rotation.toFixed(1)}°)`,
-      );
+        `[GrabPoint] Grabbed at local offset: (${grabOffsetRef.current.x.toFixed(0)}, ${grabOffsetRef.current.y.toFixed(0)})px (screen offset: ${screenOffsetX.toFixed(0)}, ${screenOffsetY.toFixed(0)}px, rotation: ${rotation.toFixed(1)}°)`
+      )
     }
 
     // Store the current rotation as the base for this drag
-    baseRotationRef.current = rotation;
+    baseRotationRef.current = rotation
 
     // Initialize velocity tracking
-    const now = Date.now();
-    lastMoveTimeRef.current = now;
-    lastMovePositionRef.current = { x: e.clientX, y: e.clientY };
-    lastLogTimeRef.current = now;
+    const now = Date.now()
+    lastMoveTimeRef.current = now
+    lastMovePositionRef.current = { x: e.clientX, y: e.clientY }
+    lastLogTimeRef.current = now
 
-    console.log("[Shadow] Drag started, speed reset to 0");
-  };
+    console.log('[Shadow] Drag started, speed reset to 0')
+  }
 
   const handlePointerMove = (e: React.PointerEvent) => {
-    if (!isDragging || !dragStartRef.current) return;
+    if (!isDragging || !dragStartRef.current) return
 
     // Calculate how far the pointer has moved since drag started
-    const deltaX = e.clientX - dragStartRef.current.x;
-    const deltaY = e.clientY - dragStartRef.current.y;
+    const deltaX = e.clientX - dragStartRef.current.x
+    const deltaY = e.clientY - dragStartRef.current.y
 
     // Calculate velocity for dynamic shadow
-    const now = Date.now();
-    const timeDelta = now - lastMoveTimeRef.current;
+    const now = Date.now()
+    const timeDelta = now - lastMoveTimeRef.current
 
     if (timeDelta > 0) {
       // Distance moved since last frame
-      const distX = e.clientX - lastMovePositionRef.current.x;
-      const distY = e.clientY - lastMovePositionRef.current.y;
-      const distance = Math.sqrt(distX * distX + distY * distY);
+      const distX = e.clientX - lastMovePositionRef.current.x
+      const distY = e.clientY - lastMovePositionRef.current.y
+      const distance = Math.sqrt(distX * distX + distY * distY)
 
       // Speed in pixels per millisecond, then convert to reasonable scale
-      const speed = distance / timeDelta;
-      const scaledSpeed = Math.min(speed * 100, 100); // Cap at 100 for reasonable shadow size
+      const speed = distance / timeDelta
+      const scaledSpeed = Math.min(speed * 100, 100) // Cap at 100 for reasonable shadow size
 
-      setDragSpeed(scaledSpeed);
+      setDragSpeed(scaledSpeed)
 
       // Log occasionally (every ~200ms) to avoid console spam
-      const timeSinceLastLog = now - lastLogTimeRef.current;
+      const timeSinceLastLog = now - lastLogTimeRef.current
       if (timeSinceLastLog > 200) {
         console.log(
-          `[Shadow] Speed: ${scaledSpeed.toFixed(1)}, distance: ${distance.toFixed(0)}px, timeDelta: ${timeDelta}ms`,
-        );
-        lastLogTimeRef.current = now;
+          `[Shadow] Speed: ${scaledSpeed.toFixed(1)}, distance: ${distance.toFixed(0)}px, timeDelta: ${timeDelta}ms`
+        )
+        lastLogTimeRef.current = now
       }
 
-      lastMoveTimeRef.current = now;
-      lastMovePositionRef.current = { x: e.clientX, y: e.clientY };
+      lastMoveTimeRef.current = now
+      lastMovePositionRef.current = { x: e.clientX, y: e.clientY }
     }
 
     // Calculate rotation based on grab point physics
     // Cross product of grab offset and drag direction determines rotation
     // If grabbed on left and dragged right → clockwise rotation
     // If grabbed on right and dragged left → counter-clockwise rotation
-    const crossProduct =
-      grabOffsetRef.current.x * deltaY - grabOffsetRef.current.y * deltaX;
-    const rotationInfluence = crossProduct / 500; // Reduced scale factor for more visible rotation
-    const newRotation = baseRotationRef.current + rotationInfluence;
+    const crossProduct = grabOffsetRef.current.x * deltaY - grabOffsetRef.current.y * deltaX
+    const rotationInfluence = crossProduct / 500 // Reduced scale factor for more visible rotation
+    const newRotation = baseRotationRef.current + rotationInfluence
 
     // Clamp rotation to prevent excessive spinning
-    const clampedRotation = Math.max(-45, Math.min(45, newRotation));
-    setRotation(clampedRotation);
+    const clampedRotation = Math.max(-45, Math.min(45, newRotation))
+    setRotation(clampedRotation)
 
     // Log rotation changes occasionally (same throttle as shadow logging)
-    const timeSinceLastLog = now - lastLogTimeRef.current;
+    const timeSinceLastLog = now - lastLogTimeRef.current
     if (timeSinceLastLog > 200) {
       console.log(
-        `[GrabPoint] Rotation: ${clampedRotation.toFixed(1)}° (influence: ${rotationInfluence.toFixed(1)}°, cross: ${crossProduct.toFixed(0)})`,
-      );
+        `[GrabPoint] Rotation: ${clampedRotation.toFixed(1)}° (influence: ${rotationInfluence.toFixed(1)}°, cross: ${crossProduct.toFixed(0)})`
+      )
     }
 
     // Update card position - keep grab point under cursor while rotating
     // Calculate the rotated grab offset
-    const rotationRad = (clampedRotation * Math.PI) / 180;
-    const cosRot = Math.cos(rotationRad);
-    const sinRot = Math.sin(rotationRad);
+    const rotationRad = (clampedRotation * Math.PI) / 180
+    const cosRot = Math.cos(rotationRad)
+    const sinRot = Math.sin(rotationRad)
 
     // Rotate the grab offset by the current rotation angle
-    const rotatedGrabX =
-      grabOffsetRef.current.x * cosRot - grabOffsetRef.current.y * sinRot;
-    const rotatedGrabY =
-      grabOffsetRef.current.x * sinRot + grabOffsetRef.current.y * cosRot;
+    const rotatedGrabX = grabOffsetRef.current.x * cosRot - grabOffsetRef.current.y * sinRot
+    const rotatedGrabY = grabOffsetRef.current.x * sinRot + grabOffsetRef.current.y * cosRot
 
     // Get container bounds for coordinate conversion
     if (!containerRef.current || !cardRef.current) {
@@ -248,65 +245,65 @@ function DraggableCard({ card, containerRef }: DraggableCardProps) {
       setPosition({
         x: dragStartRef.current.cardX + deltaX,
         y: dragStartRef.current.cardY + deltaY,
-      });
-      return;
+      })
+      return
     }
 
-    const containerRect = containerRef.current.getBoundingClientRect();
-    const cardRect = cardRef.current.getBoundingClientRect();
+    const containerRect = containerRef.current.getBoundingClientRect()
+    const cardRect = cardRef.current.getBoundingClientRect()
 
     // Current cursor position in viewport space
-    const cursorViewportX = e.clientX;
-    const cursorViewportY = e.clientY;
+    const cursorViewportX = e.clientX
+    const cursorViewportY = e.clientY
 
     // Card center should be at: cursor - rotated grab offset (viewport space)
-    const cardCenterViewportX = cursorViewportX - rotatedGrabX;
-    const cardCenterViewportY = cursorViewportY - rotatedGrabY;
+    const cardCenterViewportX = cursorViewportX - rotatedGrabX
+    const cardCenterViewportY = cursorViewportY - rotatedGrabY
 
     // Convert card center from viewport space to container space
-    const cardCenterContainerX = cardCenterViewportX - containerRect.left;
-    const cardCenterContainerY = cardCenterViewportY - containerRect.top;
+    const cardCenterContainerX = cardCenterViewportX - containerRect.left
+    const cardCenterContainerY = cardCenterViewportY - containerRect.top
 
     // position.x/y represents translate() which positions the top-left corner
     // So we need: top-left = center - (width/2, height/2)
     setPosition({
       x: cardCenterContainerX - cardRect.width / 2,
       y: cardCenterContainerY - cardRect.height / 2,
-    });
-  };
+    })
+  }
 
   const handlePointerUp = (e: React.PointerEvent) => {
-    setIsDragging(false);
-    dragStartRef.current = null;
+    setIsDragging(false)
+    dragStartRef.current = null
 
-    console.log("[Shadow] Drag released, speed decaying to 0");
+    console.log('[Shadow] Drag released, speed decaying to 0')
     console.log(
-      `[GrabPoint] Final rotation: ${rotation.toFixed(1)}° (base was ${baseRotationRef.current.toFixed(1)}°)`,
-    );
+      `[GrabPoint] Final rotation: ${rotation.toFixed(1)}° (base was ${baseRotationRef.current.toFixed(1)}°)`
+    )
 
     // Gradually decay speed back to 0 for smooth shadow transition
     const decayInterval = setInterval(() => {
       setDragSpeed((prev) => {
-        const newSpeed = prev * 0.8; // Decay by 20% each frame
+        const newSpeed = prev * 0.8 // Decay by 20% each frame
         if (newSpeed < 1) {
-          clearInterval(decayInterval);
-          return 0;
+          clearInterval(decayInterval)
+          return 0
         }
-        return newSpeed;
-      });
-    }, 50); // Update every 50ms
+        return newSpeed
+      })
+    }, 50) // Update every 50ms
 
     // Release the pointer capture
-    e.currentTarget.releasePointerCapture(e.pointerId);
-  };
+    e.currentTarget.releasePointerCapture(e.pointerId)
+  }
 
   // Calculate dynamic shadow based on drag speed
   // Base shadow: 0 8px 24px rgba(0, 0, 0, 0.3)
   // Fast drag: 0 32px 64px rgba(0, 0, 0, 0.6)
-  const shadowY = 8 + (dragSpeed / 100) * 24; // 8px to 32px
-  const shadowBlur = 24 + (dragSpeed / 100) * 40; // 24px to 64px
-  const shadowOpacity = 0.3 + (dragSpeed / 100) * 0.3; // 0.3 to 0.6
-  const boxShadow = `0 ${shadowY}px ${shadowBlur}px rgba(0, 0, 0, ${shadowOpacity})`;
+  const shadowY = 8 + (dragSpeed / 100) * 24 // 8px to 32px
+  const shadowBlur = 24 + (dragSpeed / 100) * 40 // 24px to 64px
+  const shadowOpacity = 0.3 + (dragSpeed / 100) * 0.3 // 0.3 to 0.6
+  const boxShadow = `0 ${shadowY}px ${shadowBlur}px rgba(0, 0, 0, ${shadowOpacity})`
 
   return (
     <div
@@ -315,17 +312,17 @@ function DraggableCard({ card, containerRef }: DraggableCardProps) {
       onPointerMove={handlePointerMove}
       onPointerUp={handlePointerUp}
       style={{
-        position: "absolute",
+        position: 'absolute',
         left: 0,
         top: 0,
         transform: `translate(${position.x}px, ${position.y}px) rotate(${rotation}deg) scale(${isDragging ? 1.05 : 1})`,
         zIndex,
-        touchAction: "none",
-        cursor: isDragging ? "grabbing" : "grab",
-        transition: isDragging ? "none" : "transform 0.2s ease-out",
+        touchAction: 'none',
+        cursor: isDragging ? 'grabbing' : 'grab',
+        transition: isDragging ? 'none' : 'transform 0.2s ease-out',
       }}
       className={css({
-        userSelect: "none",
+        userSelect: 'none',
       })}
     >
       <div
@@ -333,44 +330,40 @@ function DraggableCard({ card, containerRef }: DraggableCardProps) {
           boxShadow, // Dynamic shadow based on drag speed
         }}
         className={css({
-          bg: "white",
-          rounded: "lg",
-          p: "4",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: "2",
-          minW: "120px",
-          border: "2px solid rgba(0, 0, 0, 0.1)",
-          transition: "box-shadow 0.1s", // Quick transition for responsive feel
+          bg: 'white',
+          rounded: 'lg',
+          p: '4',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '2',
+          minW: '120px',
+          border: '2px solid rgba(0, 0, 0, 0.1)',
+          transition: 'box-shadow 0.1s', // Quick transition for responsive feel
         })}
       >
         {/* Abacus visualization */}
         <div
           className={css({
-            transform: "scale(0.6)",
-            transformOrigin: "center",
+            transform: 'scale(0.6)',
+            transformOrigin: 'center',
           })}
         >
-          <AbacusReact
-            value={card.number}
-            columns={3}
-            beadShape={appConfig.beadShape}
-          />
+          <AbacusReact value={card.number} columns={3} beadShape={appConfig.beadShape} />
         </div>
 
         {/* Number display */}
         <div
           className={css({
-            fontSize: "xl",
-            fontWeight: "bold",
-            color: "gray.800",
-            fontFamily: "mono",
+            fontSize: 'xl',
+            fontWeight: 'bold',
+            color: 'gray.800',
+            fontFamily: 'mono',
           })}
         >
           {card.number}
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/LanguageSelector.tsx b/apps/web/src/components/LanguageSelector.tsx
index 8ce7a595..0baf11aa 100644
--- a/apps/web/src/components/LanguageSelector.tsx
+++ b/apps/web/src/components/LanguageSelector.tsx
@@ -1,92 +1,92 @@
-"use client";
+'use client'
 
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { useLocale } from "next-intl";
-import { useState } from "react";
-import { useLocaleContext } from "@/contexts/LocaleContext";
-import { useTheme } from "@/contexts/ThemeContext";
-import { locales } from "@/i18n/routing";
-import { css } from "../../styled-system/css";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { useLocale } from 'next-intl'
+import { useState } from 'react'
+import { useLocaleContext } from '@/contexts/LocaleContext'
+import { useTheme } from '@/contexts/ThemeContext'
+import { locales } from '@/i18n/routing'
+import { css } from '../../styled-system/css'
 
 interface LanguageSelectorProps {
-  variant?: "dropdown-item" | "inline";
-  isFullscreen?: boolean;
+  variant?: 'dropdown-item' | 'inline'
+  isFullscreen?: boolean
 }
 
 const LANGUAGE_LABELS: Record<string, string> = {
-  en: "English",
-  de: "Deutsch",
-  ja: "日本語",
-  hi: "हिन्दी",
-  es: "Español",
-  la: "Latina",
-  goh: "Diutisc",
-};
+  en: 'English',
+  de: 'Deutsch',
+  ja: '日本語',
+  hi: 'हिन्दी',
+  es: 'Español',
+  la: 'Latina',
+  goh: 'Diutisc',
+}
 
 const LANGUAGE_FLAGS: Record<string, string> = {
-  en: "🇬🇧",
-  de: "🇩🇪",
-  ja: "🇯🇵",
-  hi: "🇮🇳",
-  es: "🇪🇸",
-  la: "🏛️",
-  goh: "🏰",
-};
+  en: '🇬🇧',
+  de: '🇩🇪',
+  ja: '🇯🇵',
+  hi: '🇮🇳',
+  es: '🇪🇸',
+  la: '🏛️',
+  goh: '🏰',
+}
 
 export function LanguageSelector({
-  variant = "inline",
+  variant = 'inline',
   isFullscreen = false,
 }: LanguageSelectorProps) {
-  const locale = useLocale();
-  const { changeLocale } = useLocaleContext();
-  const { resolvedTheme } = useTheme();
-  const isDark = resolvedTheme === "dark";
-  const [open, setOpen] = useState(false);
+  const locale = useLocale()
+  const { changeLocale } = useLocaleContext()
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === 'dark'
+  const [open, setOpen] = useState(false)
 
   const handleLanguageChange = (langCode: string) => {
-    changeLocale(langCode as (typeof locales)[number]);
-    setOpen(false);
-  };
+    changeLocale(langCode as (typeof locales)[number])
+    setOpen(false)
+  }
 
-  if (variant === "dropdown-item") {
+  if (variant === 'dropdown-item') {
     // Simple inline version for use inside other dropdowns
     return (
       <DropdownMenu.Root open={open} onOpenChange={setOpen}>
         <DropdownMenu.Trigger asChild>
           <button
             className={css({
-              display: "flex",
-              alignItems: "center",
-              gap: "10px",
-              padding: "8px 12px",
-              borderRadius: "8px",
-              bg: "transparent",
-              color: isFullscreen ? "white" : isDark ? "gray.200" : "gray.900",
-              fontSize: "14px",
-              fontWeight: "500",
-              cursor: "pointer",
-              border: "none",
-              transition: "all 0.2s ease",
-              width: "100%",
+              display: 'flex',
+              alignItems: 'center',
+              gap: '10px',
+              padding: '8px 12px',
+              borderRadius: '8px',
+              bg: 'transparent',
+              color: isFullscreen ? 'white' : isDark ? 'gray.200' : 'gray.900',
+              fontSize: '14px',
+              fontWeight: '500',
+              cursor: 'pointer',
+              border: 'none',
+              transition: 'all 0.2s ease',
+              width: '100%',
               _hover: {
                 bg: isFullscreen
-                  ? "rgba(139, 92, 246, 0.2)"
+                  ? 'rgba(139, 92, 246, 0.2)'
                   : isDark
-                    ? "rgba(139, 92, 246, 0.2)"
-                    : "rgba(139, 92, 246, 0.1)",
+                    ? 'rgba(139, 92, 246, 0.2)'
+                    : 'rgba(139, 92, 246, 0.1)',
               },
             })}
           >
-            <span style={{ fontSize: "18px" }}>🌐</span>
-            <span style={{ flex: 1, textAlign: "left" }}>
+            <span style={{ fontSize: '18px' }}>🌐</span>
+            <span style={{ flex: 1, textAlign: 'left' }}>
               {LANGUAGE_FLAGS[locale]} {LANGUAGE_LABELS[locale]}
             </span>
             <svg
               className={css({
-                w: "4",
-                h: "4",
-                transition: "transform",
-                transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                w: '4',
+                h: '4',
+                transition: 'transform',
+                transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
               })}
               fill="none"
               stroke="currentColor"
@@ -105,24 +105,20 @@ export function LanguageSelector({
         <DropdownMenu.Portal>
           <DropdownMenu.Content
             className={css({
-              bg: isFullscreen
-                ? "rgba(0, 0, 0, 0.95)"
-                : isDark
-                  ? "gray.900"
-                  : "white",
-              border: "1px solid",
+              bg: isFullscreen ? 'rgba(0, 0, 0, 0.95)' : isDark ? 'gray.900' : 'white',
+              border: '1px solid',
               borderColor: isFullscreen
-                ? "rgba(255, 255, 255, 0.1)"
+                ? 'rgba(255, 255, 255, 0.1)'
                 : isDark
-                  ? "gray.700"
-                  : "gray.200",
-              borderRadius: "8px",
-              padding: "6px",
-              minWidth: "200px",
+                  ? 'gray.700'
+                  : 'gray.200',
+              borderRadius: '8px',
+              padding: '6px',
+              minWidth: '200px',
               boxShadow: isDark
-                ? "0 8px 24px rgba(0, 0, 0, 0.4)"
-                : "0 8px 24px rgba(0, 0, 0, 0.15)",
-              backdropFilter: isFullscreen ? "blur(12px)" : "none",
+                ? '0 8px 24px rgba(0, 0, 0, 0.4)'
+                : '0 8px 24px rgba(0, 0, 0, 0.15)',
+              backdropFilter: isFullscreen ? 'blur(12px)' : 'none',
               zIndex: 10000,
             })}
             side="right"
@@ -134,46 +130,31 @@ export function LanguageSelector({
                 key={langCode}
                 onSelect={() => handleLanguageChange(langCode)}
                 className={css({
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "10px",
-                  padding: "8px 12px",
-                  borderRadius: "6px",
-                  fontSize: "14px",
-                  color: isFullscreen
-                    ? "white"
-                    : isDark
-                      ? "gray.200"
-                      : "gray.900",
-                  bg:
-                    locale === langCode
-                      ? isDark
-                        ? "gray.800"
-                        : "gray.100"
-                      : "transparent",
-                  cursor: "pointer",
-                  outline: "none",
-                  transition: "all 0.2s ease",
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '10px',
+                  padding: '8px 12px',
+                  borderRadius: '6px',
+                  fontSize: '14px',
+                  color: isFullscreen ? 'white' : isDark ? 'gray.200' : 'gray.900',
+                  bg: locale === langCode ? (isDark ? 'gray.800' : 'gray.100') : 'transparent',
+                  cursor: 'pointer',
+                  outline: 'none',
+                  transition: 'all 0.2s ease',
                   _hover: {
-                    bg: isFullscreen
-                      ? "rgba(139, 92, 246, 0.3)"
-                      : isDark
-                        ? "gray.800"
-                        : "gray.100",
+                    bg: isFullscreen ? 'rgba(139, 92, 246, 0.3)' : isDark ? 'gray.800' : 'gray.100',
                   },
                 })}
               >
                 <span>{LANGUAGE_FLAGS[langCode]}</span>
                 <span>{LANGUAGE_LABELS[langCode]}</span>
-                {locale === langCode && (
-                  <span style={{ marginLeft: "auto" }}>✓</span>
-                )}
+                {locale === langCode && <span style={{ marginLeft: 'auto' }}>✓</span>}
               </DropdownMenu.Item>
             ))}
           </DropdownMenu.Content>
         </DropdownMenu.Portal>
       </DropdownMenu.Root>
-    );
+    )
   }
 
   // Inline variant for full navbar
@@ -182,47 +163,31 @@ export function LanguageSelector({
       <DropdownMenu.Trigger asChild>
         <button
           className={css({
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-            padding: "8px 12px",
-            bg: isFullscreen
-              ? "rgba(0, 0, 0, 0.85)"
-              : isDark
-                ? "gray.800"
-                : "white",
-            backdropFilter: isFullscreen ? "blur(8px)" : "none",
-            border: "1px solid",
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            padding: '8px 12px',
+            bg: isFullscreen ? 'rgba(0, 0, 0, 0.85)' : isDark ? 'gray.800' : 'white',
+            backdropFilter: isFullscreen ? 'blur(8px)' : 'none',
+            border: '1px solid',
             borderColor: isFullscreen
-              ? "rgba(139, 92, 246, 0.3)"
+              ? 'rgba(139, 92, 246, 0.3)'
               : isDark
-                ? "gray.700"
-                : "gray.300",
-            borderRadius: "8px",
-            color: isFullscreen
-              ? "rgba(209, 213, 219, 0.9)"
-              : isDark
-                ? "gray.200"
-                : "gray.700",
-            fontSize: "14px",
-            fontWeight: "500",
-            cursor: "pointer",
-            outline: "none",
-            transition: "all 0.2s ease",
-            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
+                ? 'gray.700'
+                : 'gray.300',
+            borderRadius: '8px',
+            color: isFullscreen ? 'rgba(209, 213, 219, 0.9)' : isDark ? 'gray.200' : 'gray.700',
+            fontSize: '14px',
+            fontWeight: '500',
+            cursor: 'pointer',
+            outline: 'none',
+            transition: 'all 0.2s ease',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
             _hover: {
-              bg: isFullscreen
-                ? "rgba(139, 92, 246, 0.25)"
-                : isDark
-                  ? "gray.700"
-                  : "gray.50",
-              color: isFullscreen
-                ? "rgba(196, 181, 253, 1)"
-                : isDark
-                  ? "gray.100"
-                  : "gray.900",
-              borderColor: "rgba(139, 92, 246, 0.5)",
-              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
+              bg: isFullscreen ? 'rgba(139, 92, 246, 0.25)' : isDark ? 'gray.700' : 'gray.50',
+              color: isFullscreen ? 'rgba(196, 181, 253, 1)' : isDark ? 'gray.100' : 'gray.900',
+              borderColor: 'rgba(139, 92, 246, 0.5)',
+              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
             },
           })}
         >
@@ -230,21 +195,16 @@ export function LanguageSelector({
           <span>{LANGUAGE_LABELS[locale]}</span>
           <svg
             className={css({
-              w: "4",
-              h: "4",
-              transition: "transform",
-              transform: open ? "rotate(180deg)" : "rotate(0deg)",
+              w: '4',
+              h: '4',
+              transition: 'transform',
+              transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
             })}
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M19 9l-7 7-7-7"
-            />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
           </svg>
         </button>
       </DropdownMenu.Trigger>
@@ -252,24 +212,18 @@ export function LanguageSelector({
       <DropdownMenu.Portal>
         <DropdownMenu.Content
           className={css({
-            bg: isFullscreen
-              ? "rgba(0, 0, 0, 0.95)"
-              : isDark
-                ? "gray.900"
-                : "white",
-            border: "1px solid",
+            bg: isFullscreen ? 'rgba(0, 0, 0, 0.95)' : isDark ? 'gray.900' : 'white',
+            border: '1px solid',
             borderColor: isFullscreen
-              ? "rgba(255, 255, 255, 0.1)"
+              ? 'rgba(255, 255, 255, 0.1)'
               : isDark
-                ? "gray.700"
-                : "gray.200",
-            borderRadius: "8px",
-            padding: "6px",
-            minWidth: "200px",
-            boxShadow: isDark
-              ? "0 8px 24px rgba(0, 0, 0, 0.4)"
-              : "0 8px 24px rgba(0, 0, 0, 0.15)",
-            backdropFilter: isFullscreen ? "blur(12px)" : "none",
+                ? 'gray.700'
+                : 'gray.200',
+            borderRadius: '8px',
+            padding: '6px',
+            minWidth: '200px',
+            boxShadow: isDark ? '0 8px 24px rgba(0, 0, 0, 0.4)' : '0 8px 24px rgba(0, 0, 0, 0.15)',
+            backdropFilter: isFullscreen ? 'blur(12px)' : 'none',
             zIndex: 10000,
           })}
           side="bottom"
@@ -281,44 +235,29 @@ export function LanguageSelector({
               key={langCode}
               onSelect={() => handleLanguageChange(langCode)}
               className={css({
-                display: "flex",
-                alignItems: "center",
-                gap: "10px",
-                padding: "8px 12px",
-                borderRadius: "6px",
-                fontSize: "14px",
-                color: isFullscreen
-                  ? "white"
-                  : isDark
-                    ? "gray.200"
-                    : "gray.900",
-                bg:
-                  locale === langCode
-                    ? isDark
-                      ? "gray.800"
-                      : "gray.100"
-                    : "transparent",
-                cursor: "pointer",
-                outline: "none",
-                transition: "all 0.2s ease",
+                display: 'flex',
+                alignItems: 'center',
+                gap: '10px',
+                padding: '8px 12px',
+                borderRadius: '6px',
+                fontSize: '14px',
+                color: isFullscreen ? 'white' : isDark ? 'gray.200' : 'gray.900',
+                bg: locale === langCode ? (isDark ? 'gray.800' : 'gray.100') : 'transparent',
+                cursor: 'pointer',
+                outline: 'none',
+                transition: 'all 0.2s ease',
                 _hover: {
-                  bg: isFullscreen
-                    ? "rgba(139, 92, 246, 0.3)"
-                    : isDark
-                      ? "gray.800"
-                      : "gray.100",
+                  bg: isFullscreen ? 'rgba(139, 92, 246, 0.3)' : isDark ? 'gray.800' : 'gray.100',
                 },
               })}
             >
               <span>{LANGUAGE_FLAGS[langCode]}</span>
               <span>{LANGUAGE_LABELS[langCode]}</span>
-              {locale === langCode && (
-                <span style={{ marginLeft: "auto" }}>✓</span>
-              )}
+              {locale === langCode && <span style={{ marginLeft: 'auto' }}>✓</span>}
             </DropdownMenu.Item>
           ))}
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>
-  );
+  )
 }
diff --git a/apps/web/src/components/LevelSliderDisplay.tsx b/apps/web/src/components/LevelSliderDisplay.tsx
index b2f27f1c..ca3d1459 100644
--- a/apps/web/src/components/LevelSliderDisplay.tsx
+++ b/apps/web/src/components/LevelSliderDisplay.tsx
@@ -1,279 +1,273 @@
-"use client";
+'use client'
 
-import { useState, useEffect } from "react";
-import { useSpring, useTransition, animated } from "@react-spring/web";
-import * as Slider from "@radix-ui/react-slider";
-import {
-  AbacusReact,
-  StandaloneBead,
-  ABACUS_THEMES,
-} from "@soroban/abacus-react";
-import { css } from "../../styled-system/css";
-import { stack } from "../../styled-system/patterns";
-import { kyuLevelDetails } from "@/data/kyuLevelDetails";
+import { useState, useEffect } from 'react'
+import { useSpring, useTransition, animated } from '@react-spring/web'
+import * as Slider from '@radix-ui/react-slider'
+import { AbacusReact, StandaloneBead, ABACUS_THEMES } from '@soroban/abacus-react'
+import { css } from '../../styled-system/css'
+import { stack } from '../../styled-system/patterns'
+import { kyuLevelDetails } from '@/data/kyuLevelDetails'
 
 // Combine all levels into one array for the slider
 const allLevels = [
   {
-    level: "10th Kyu",
-    emoji: "🧒",
-    color: "green",
+    level: '10th Kyu',
+    emoji: '🧒',
+    color: 'green',
     digits: 2,
-    type: "kyu" as const,
+    type: 'kyu' as const,
   },
   {
-    level: "9th Kyu",
-    emoji: "🧒",
-    color: "green",
+    level: '9th Kyu',
+    emoji: '🧒',
+    color: 'green',
     digits: 2,
-    type: "kyu" as const,
+    type: 'kyu' as const,
   },
   {
-    level: "8th Kyu",
-    emoji: "🧒",
-    color: "green",
+    level: '8th Kyu',
+    emoji: '🧒',
+    color: 'green',
     digits: 3,
-    type: "kyu" as const,
+    type: 'kyu' as const,
   },
   {
-    level: "7th Kyu",
-    emoji: "🧒",
-    color: "green",
+    level: '7th Kyu',
+    emoji: '🧒',
+    color: 'green',
     digits: 4,
-    type: "kyu" as const,
+    type: 'kyu' as const,
   },
   {
-    level: "6th Kyu",
-    emoji: "🧑",
-    color: "blue",
+    level: '6th Kyu',
+    emoji: '🧑',
+    color: 'blue',
     digits: 5,
-    type: "kyu" as const,
+    type: 'kyu' as const,
   },
   {
-    level: "5th Kyu",
-    emoji: "🧑",
-    color: "blue",
+    level: '5th Kyu',
+    emoji: '🧑',
+    color: 'blue',
     digits: 6,
-    type: "kyu" as const,
+    type: 'kyu' as const,
   },
   {
-    level: "4th Kyu",
-    emoji: "🧑",
-    color: "blue",
+    level: '4th Kyu',
+    emoji: '🧑',
+    color: 'blue',
     digits: 7,
-    type: "kyu" as const,
+    type: 'kyu' as const,
   },
   {
-    level: "3rd Kyu",
-    emoji: "🧔",
-    color: "violet",
+    level: '3rd Kyu',
+    emoji: '🧔',
+    color: 'violet',
     digits: 8,
-    type: "kyu" as const,
+    type: 'kyu' as const,
   },
   {
-    level: "2nd Kyu",
-    emoji: "🧔",
-    color: "violet",
+    level: '2nd Kyu',
+    emoji: '🧔',
+    color: 'violet',
     digits: 9,
-    type: "kyu" as const,
+    type: 'kyu' as const,
   },
   {
-    level: "1st Kyu",
-    emoji: "🧔",
-    color: "violet",
+    level: '1st Kyu',
+    emoji: '🧔',
+    color: 'violet',
     digits: 10,
-    type: "kyu" as const,
+    type: 'kyu' as const,
   },
   {
-    level: "Pre-1st Dan",
-    name: "Jun-Shodan",
+    level: 'Pre-1st Dan',
+    name: 'Jun-Shodan',
     minScore: 90,
-    emoji: "🧙",
-    color: "amber",
+    emoji: '🧙',
+    color: 'amber',
     digits: 30,
-    type: "dan" as const,
+    type: 'dan' as const,
   },
   {
-    level: "1st Dan",
-    name: "Shodan",
+    level: '1st Dan',
+    name: 'Shodan',
     minScore: 100,
-    emoji: "🧙",
-    color: "amber",
+    emoji: '🧙',
+    color: 'amber',
     digits: 30,
-    type: "dan" as const,
+    type: 'dan' as const,
   },
   {
-    level: "2nd Dan",
-    name: "Nidan",
+    level: '2nd Dan',
+    name: 'Nidan',
     minScore: 120,
-    emoji: "🧙‍♂️",
-    color: "amber",
+    emoji: '🧙‍♂️',
+    color: 'amber',
     digits: 30,
-    type: "dan" as const,
+    type: 'dan' as const,
   },
   {
-    level: "3rd Dan",
-    name: "Sandan",
+    level: '3rd Dan',
+    name: 'Sandan',
     minScore: 140,
-    emoji: "🧙‍♂️",
-    color: "amber",
+    emoji: '🧙‍♂️',
+    color: 'amber',
     digits: 30,
-    type: "dan" as const,
+    type: 'dan' as const,
   },
   {
-    level: "4th Dan",
-    name: "Yondan",
+    level: '4th Dan',
+    name: 'Yondan',
     minScore: 160,
-    emoji: "🧙‍♀️",
-    color: "amber",
+    emoji: '🧙‍♀️',
+    color: 'amber',
     digits: 30,
-    type: "dan" as const,
+    type: 'dan' as const,
   },
   {
-    level: "5th Dan",
-    name: "Godan",
+    level: '5th Dan',
+    name: 'Godan',
     minScore: 180,
-    emoji: "🧙‍♀️",
-    color: "amber",
+    emoji: '🧙‍♀️',
+    color: 'amber',
     digits: 30,
-    type: "dan" as const,
+    type: 'dan' as const,
   },
   {
-    level: "6th Dan",
-    name: "Rokudan",
+    level: '6th Dan',
+    name: 'Rokudan',
     minScore: 200,
-    emoji: "🧝",
-    color: "amber",
+    emoji: '🧝',
+    color: 'amber',
     digits: 30,
-    type: "dan" as const,
+    type: 'dan' as const,
   },
   {
-    level: "7th Dan",
-    name: "Nanadan",
+    level: '7th Dan',
+    name: 'Nanadan',
     minScore: 220,
-    emoji: "🧝",
-    color: "amber",
+    emoji: '🧝',
+    color: 'amber',
     digits: 30,
-    type: "dan" as const,
+    type: 'dan' as const,
   },
   {
-    level: "8th Dan",
-    name: "Hachidan",
+    level: '8th Dan',
+    name: 'Hachidan',
     minScore: 250,
-    emoji: "🧝‍♂️",
-    color: "amber",
+    emoji: '🧝‍♂️',
+    color: 'amber',
     digits: 30,
-    type: "dan" as const,
+    type: 'dan' as const,
   },
   {
-    level: "9th Dan",
-    name: "Kudan",
+    level: '9th Dan',
+    name: 'Kudan',
     minScore: 270,
-    emoji: "🧝‍♀️",
-    color: "amber",
+    emoji: '🧝‍♀️',
+    color: 'amber',
     digits: 30,
-    type: "dan" as const,
+    type: 'dan' as const,
   },
   {
-    level: "10th Dan",
-    name: "Judan",
+    level: '10th Dan',
+    name: 'Judan',
     minScore: 290,
-    emoji: "👑",
-    color: "amber",
+    emoji: '👑',
+    color: 'amber',
     digits: 30,
-    type: "dan" as const,
+    type: 'dan' as const,
   },
-] as const;
+] as const
 
 // Helper function to map level names to kyuLevelDetails keys
 function getLevelDetailsKey(levelName: string): string | null {
   // Convert "10th Kyu" → "10-kyu", "3rd Kyu" → "3-kyu", etc.
-  const match = levelName.match(/^(\d+)(?:st|nd|rd|th)\s+Kyu$/);
+  const match = levelName.match(/^(\d+)(?:st|nd|rd|th)\s+Kyu$/)
   if (match) {
-    return `${match[1]}-kyu`;
+    return `${match[1]}-kyu`
   }
-  return null;
+  return null
 }
 
 // Parse and format kyu level details into structured sections with icons
 function parseKyuDetails(rawText: string) {
-  const lines = rawText
-    .split("\n")
-    .filter((line) => line.trim() && !line.includes("shuzan.jp"));
+  const lines = rawText.split('\n').filter((line) => line.trim() && !line.includes('shuzan.jp'))
 
   // Always return sections in consistent order: Add/Sub, Multiply, Divide
   const sections: Array<{
-    type: "addSub" | "multiply" | "divide";
-    icon: string;
-    label: string;
-    digits: string | null;
-    rows: string | null;
-    chars: string | null;
-    problems: string | null;
+    type: 'addSub' | 'multiply' | 'divide'
+    icon: string
+    label: string
+    digits: string | null
+    rows: string | null
+    chars: string | null
+    problems: string | null
   }> = [
     {
-      type: "addSub",
-      icon: "➕➖",
-      label: "Add/Sub",
+      type: 'addSub',
+      icon: '➕➖',
+      label: 'Add/Sub',
       digits: null,
       rows: null,
       chars: null,
       problems: null,
     },
     {
-      type: "multiply",
-      icon: "✖️",
-      label: "Multiply",
+      type: 'multiply',
+      icon: '✖️',
+      label: 'Multiply',
       digits: null,
       rows: null,
       chars: null,
       problems: null,
     },
     {
-      type: "divide",
-      icon: "➗",
-      label: "Divide",
+      type: 'divide',
+      icon: '➗',
+      label: 'Divide',
       digits: null,
       rows: null,
       chars: null,
       problems: null,
     },
-  ];
+  ]
 
   for (const line of lines) {
-    if (line.includes("Add/Sub:")) {
-      const match = line.match(/(\d+)-digit.*?(\d+)口.*?(\d+)字/);
+    if (line.includes('Add/Sub:')) {
+      const match = line.match(/(\d+)-digit.*?(\d+)口.*?(\d+)字/)
       if (match) {
-        sections[0].digits = match[1];
-        sections[0].rows = match[2];
-        sections[0].chars = match[3];
+        sections[0].digits = match[1]
+        sections[0].rows = match[2]
+        sections[0].chars = match[3]
       }
-    } else if (line.includes("×:")) {
-      const match = line.match(/(\d+) digits.*?\((\d+)/);
+    } else if (line.includes('×:')) {
+      const match = line.match(/(\d+) digits.*?\((\d+)/)
       if (match) {
-        sections[1].digits = match[1];
-        sections[1].problems = match[2];
+        sections[1].digits = match[1]
+        sections[1].problems = match[2]
       }
-    } else if (line.includes("÷:")) {
-      const match = line.match(/(\d+) digits.*?\((\d+)/);
+    } else if (line.includes('÷:')) {
+      const match = line.match(/(\d+) digits.*?\((\d+)/)
       if (match) {
-        sections[2].digits = match[1];
-        sections[2].problems = match[2];
+        sections[2].digits = match[1]
+        sections[2].problems = match[2]
       }
     }
   }
 
-  return sections;
+  return sections
 }
 
 // Use dark theme preset from abacus-react instead of manual definition
-const darkStyles = ABACUS_THEMES.dark;
+const darkStyles = ABACUS_THEMES.dark
 
 interface LevelSliderDisplayProps {
-  initialIndex?: number;
-  autoAdvanceEnabled?: boolean;
-  autoAdvanceInterval?: number;
-  showLegend?: boolean;
+  initialIndex?: number
+  autoAdvanceEnabled?: boolean
+  autoAdvanceInterval?: number
+  showLegend?: boolean
 }
 
 export function LevelSliderDisplay({
@@ -282,23 +276,21 @@ export function LevelSliderDisplay({
   autoAdvanceInterval = 3000,
   showLegend = true,
 }: LevelSliderDisplayProps) {
-  const [currentIndex, setCurrentIndex] = useState(initialIndex);
-  const [isHovering, setIsHovering] = useState(false);
-  const [isPaneHovered, setIsPaneHovered] = useState(false);
-  const currentLevel = allLevels[currentIndex];
+  const [currentIndex, setCurrentIndex] = useState(initialIndex)
+  const [isHovering, setIsHovering] = useState(false)
+  const [isPaneHovered, setIsPaneHovered] = useState(false)
+  const currentLevel = allLevels[currentIndex]
 
   // State for animated abacus digits
-  const [animatedDigits, setAnimatedDigits] = useState<string>("");
+  const [animatedDigits, setAnimatedDigits] = useState<string>('')
 
   // Initialize animated digits when level changes
   useEffect(() => {
     const generateRandomDigits = (numDigits: number) => {
-      return Array.from({ length: numDigits }, () =>
-        Math.floor(Math.random() * 10),
-      ).join("");
-    };
-    setAnimatedDigits(generateRandomDigits(currentLevel.digits));
-  }, [currentLevel.digits]);
+      return Array.from({ length: numDigits }, () => Math.floor(Math.random() * 10)).join('')
+    }
+    setAnimatedDigits(generateRandomDigits(currentLevel.digits))
+  }, [currentLevel.digits])
 
   // Animate abacus calculations - speed increases with Dan level
   useEffect(() => {
@@ -309,77 +301,71 @@ export function LevelSliderDisplay({
     const getAnimationInterval = () => {
       if (currentIndex < 11) {
         // Kyu levels and Pre-1st Dan: constant 500ms
-        return 500;
+        return 500
       }
       // 1st Dan through 10th Dan: speed up from 500ms to 10ms
       // Index 11 (1st Dan) → 500ms
       // Index 20 (10th Dan) → 10ms
-      const danProgress = (currentIndex - 11) / 9; // 0.0 to 1.0
-      return 500 - danProgress * 490; // 500ms down to 10ms
-    };
+      const danProgress = (currentIndex - 11) / 9 // 0.0 to 1.0
+      return 500 - danProgress * 490 // 500ms down to 10ms
+    }
 
-    const intervalMs = getAnimationInterval();
+    const intervalMs = getAnimationInterval()
 
     const interval = setInterval(() => {
       setAnimatedDigits((prev) => {
-        const digits = prev.split("").map(Number);
-        const numColumns = digits.length;
+        const digits = prev.split('').map(Number)
+        const numColumns = digits.length
 
         // Pick 1-3 adjacent columns to change (grouping effect)
-        const groupSize = Math.floor(Math.random() * 3) + 1;
-        const startCol = Math.floor(
-          Math.random() * (numColumns - groupSize + 1),
-        );
+        const groupSize = Math.floor(Math.random() * 3) + 1
+        const startCol = Math.floor(Math.random() * (numColumns - groupSize + 1))
 
         // Change the selected columns
-        for (
-          let i = startCol;
-          i < startCol + groupSize && i < numColumns;
-          i++
-        ) {
-          digits[i] = Math.floor(Math.random() * 10);
+        for (let i = startCol; i < startCol + groupSize && i < numColumns; i++) {
+          digits[i] = Math.floor(Math.random() * 10)
         }
 
-        return digits.join("");
-      });
-    }, intervalMs);
+        return digits.join('')
+      })
+    }, intervalMs)
 
-    return () => clearInterval(interval);
-  }, [currentIndex]);
+    return () => clearInterval(interval)
+  }, [currentIndex])
 
   // Auto-advance slider position every 3 seconds (unless pane is hovered)
   useEffect(() => {
-    if (!autoAdvanceEnabled || isPaneHovered) return;
+    if (!autoAdvanceEnabled || isPaneHovered) return
 
     const interval = setInterval(() => {
       setCurrentIndex((prev) => {
         // Cycle back to 0 when reaching the end
-        return prev >= allLevels.length - 1 ? 0 : prev + 1;
-      });
-    }, autoAdvanceInterval);
+        return prev >= allLevels.length - 1 ? 0 : prev + 1
+      })
+    }, autoAdvanceInterval)
 
-    return () => clearInterval(interval);
-  }, [autoAdvanceEnabled, isPaneHovered, autoAdvanceInterval]);
+    return () => clearInterval(interval)
+  }, [autoAdvanceEnabled, isPaneHovered, autoAdvanceInterval])
 
   // Handle hover on slider track
   const handleSliderHover = (e: React.MouseEvent<HTMLSpanElement>) => {
-    const rect = e.currentTarget.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const percentage = x / rect.width;
-    const index = Math.round(percentage * (allLevels.length - 1));
-    setCurrentIndex(Math.max(0, Math.min(allLevels.length - 1, index)));
-  };
+    const rect = e.currentTarget.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const percentage = x / rect.width
+    const index = Math.round(percentage * (allLevels.length - 1))
+    setCurrentIndex(Math.max(0, Math.min(allLevels.length - 1, index)))
+  }
 
   // Calculate scale factor based on number of columns to fit the page
   // Use constrained range to prevent huge size differences between levels
   // Min 1.2 (for 30-column Dan levels) to Max 2.0 (for 2-column Kyu levels)
-  const scaleFactor = Math.max(1.2, Math.min(2.0, 20 / currentLevel.digits));
+  const scaleFactor = Math.max(1.2, Math.min(2.0, 20 / currentLevel.digits))
 
   // Animate scale factor with React Spring for smooth transitions
   const animatedProps = useSpring({
     scaleFactor,
     config: { tension: 350, friction: 45 },
-  });
+  })
 
   // Animate emoji with proper cross-fade (old fades out, new fades in)
   const emojiTransitions = useTransition(currentLevel.emoji, {
@@ -388,63 +374,63 @@ export function LevelSliderDisplay({
     enter: { opacity: 1 },
     leave: { opacity: 0 },
     config: { duration: 120 },
-  });
+  })
 
   // Convert animated digits to a number/BigInt for the abacus display
   // Use BigInt for large numbers to get full 30-digit precision
   const displayValue =
     animatedDigits.length > 15
-      ? BigInt(animatedDigits || "0")
-      : Number.parseInt(animatedDigits || "0", 10);
+      ? BigInt(animatedDigits || '0')
+      : Number.parseInt(animatedDigits || '0', 10)
 
   return (
-    <div className={stack({ gap: "8" })}>
+    <div className={stack({ gap: '8' })}>
       {/* Current Level Display */}
       <div
         onMouseEnter={() => setIsPaneHovered(true)}
         onMouseLeave={() => setIsPaneHovered(false)}
         className={css({
-          bg: "transparent",
-          border: "2px solid",
+          bg: 'transparent',
+          border: '2px solid',
           borderColor:
-            currentLevel.color === "green"
-              ? "green.500"
-              : currentLevel.color === "blue"
-                ? "blue.500"
-                : currentLevel.color === "violet"
-                  ? "violet.500"
-                  : "amber.500",
-          rounded: "xl",
-          p: { base: "4", md: "8" },
-          height: { base: "auto", md: "700px" },
-          maxHeight: { base: "500px", md: "none" },
-          display: "flex",
-          flexDirection: "column",
+            currentLevel.color === 'green'
+              ? 'green.500'
+              : currentLevel.color === 'blue'
+                ? 'blue.500'
+                : currentLevel.color === 'violet'
+                  ? 'violet.500'
+                  : 'amber.500',
+          rounded: 'xl',
+          p: { base: '4', md: '8' },
+          height: { base: 'auto', md: '700px' },
+          maxHeight: { base: '500px', md: 'none' },
+          display: 'flex',
+          flexDirection: 'column',
         })}
       >
         {/* Abacus-themed Radix Slider */}
-        <div className={css({ mb: "6", px: { base: "2", md: "8" } })}>
-          <div className={css({ position: "relative", py: "12" })}>
+        <div className={css({ mb: '6', px: { base: '2', md: '8' } })}>
+          <div className={css({ position: 'relative', py: '12' })}>
             {/* Emoji tick marks */}
             <div
               className={css({
-                position: "absolute",
-                top: "0",
-                left: "0",
-                right: "0",
-                h: "full",
-                display: "flex",
-                alignItems: "center",
-                pointerEvents: "none",
-                px: "0", // Use full width for tick spacing
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                right: '0',
+                h: 'full',
+                display: 'flex',
+                alignItems: 'center',
+                pointerEvents: 'none',
+                px: '0', // Use full width for tick spacing
               })}
             >
               <div
                 className={css({
-                  position: "relative",
-                  w: "full",
-                  display: "flex",
-                  justifyContent: "space-between",
+                  position: 'relative',
+                  w: 'full',
+                  display: 'flex',
+                  justifyContent: 'space-between',
                 })}
               >
                 {allLevels.map((level, index) => (
@@ -452,12 +438,12 @@ export function LevelSliderDisplay({
                     key={index}
                     onClick={() => setCurrentIndex(index)}
                     className={css({
-                      fontSize: { base: "2xl", sm: "3xl", md: "4xl" },
-                      opacity: index === currentIndex ? "1" : "0.3",
-                      transition: "all 0.2s",
-                      cursor: "pointer",
-                      pointerEvents: "auto",
-                      _hover: { opacity: index === currentIndex ? "1" : "0.6" },
+                      fontSize: { base: '2xl', sm: '3xl', md: '4xl' },
+                      opacity: index === currentIndex ? '1' : '0.3',
+                      transition: 'all 0.2s',
+                      cursor: 'pointer',
+                      pointerEvents: 'auto',
+                      _hover: { opacity: index === currentIndex ? '1' : '0.6' },
                     })}
                   >
                     {level.emoji}
@@ -476,59 +462,57 @@ export function LevelSliderDisplay({
               onMouseEnter={() => setIsHovering(true)}
               onMouseLeave={() => setIsHovering(false)}
               className={css({
-                position: "relative",
-                display: "flex",
-                alignItems: "center",
-                userSelect: "none",
-                touchAction: "none",
-                w: "full",
-                h: "32",
-                cursor: "pointer",
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                userSelect: 'none',
+                touchAction: 'none',
+                w: 'full',
+                h: '32',
+                cursor: 'pointer',
               })}
             >
               <Slider.Track
                 className={css({
-                  bg: "rgba(255, 255, 255, 0.2)",
-                  position: "relative",
+                  bg: 'rgba(255, 255, 255, 0.2)',
+                  position: 'relative',
                   flexGrow: 1,
-                  rounded: "full",
-                  h: "3px",
+                  rounded: 'full',
+                  h: '3px',
                 })}
               >
-                <Slider.Range className={css({ display: "none" })} />
+                <Slider.Range className={css({ display: 'none' })} />
               </Slider.Track>
 
               <Slider.Thumb
                 className={css({
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  position: "relative",
-                  w: { base: "120px", md: "180px" },
-                  h: { base: "96px", md: "128px" },
-                  bg: "transparent",
-                  cursor: "grab",
-                  transition: "transform 0.15s ease-out, left 0.3s ease-out",
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  position: 'relative',
+                  w: { base: '120px', md: '180px' },
+                  h: { base: '96px', md: '128px' },
+                  bg: 'transparent',
+                  cursor: 'grab',
+                  transition: 'transform 0.15s ease-out, left 0.3s ease-out',
                   zIndex: 10,
-                  _hover: { transform: "scale(1.15)" },
+                  _hover: { transform: 'scale(1.15)' },
                   _focus: {
-                    outline: "none",
-                    transform: "scale(1.15)",
+                    outline: 'none',
+                    transform: 'scale(1.15)',
                   },
-                  _active: { cursor: "grabbing" },
+                  _active: { cursor: 'grabbing' },
                 })}
               >
                 <div
                   className={css({
                     opacity: 0.75,
-                    transform: { base: "scale(0.75)", md: "scale(1)" },
+                    transform: { base: 'scale(0.75)', md: 'scale(1)' },
                   })}
                 >
                   <StandaloneBead
                     size={128}
-                    color={
-                      currentLevel.color === "violet" ? "#8b5cf6" : "#22c55e"
-                    }
+                    color={currentLevel.color === 'violet' ? '#8b5cf6' : '#22c55e'}
                     animated={false}
                   />
                 </div>
@@ -536,12 +520,12 @@ export function LevelSliderDisplay({
                   <animated.div
                     style={style}
                     className={css({
-                      position: "absolute",
-                      fontSize: "9xl",
-                      pointerEvents: "none",
-                      top: "50%",
-                      left: "50%",
-                      transform: "translate(-50%, -50%)",
+                      position: 'absolute',
+                      fontSize: '9xl',
+                      pointerEvents: 'none',
+                      top: '50%',
+                      left: '50%',
+                      transform: 'translate(-50%, -50%)',
                     })}
                   >
                     {emoji}
@@ -551,45 +535,45 @@ export function LevelSliderDisplay({
                 {/* Level text as part of the bead display */}
                 <div
                   className={css({
-                    position: "absolute",
-                    bottom: "-80px",
-                    left: "50%",
-                    transform: "translateX(-50%)",
-                    textAlign: "center",
-                    pointerEvents: "none",
-                    whiteSpace: "nowrap",
+                    position: 'absolute',
+                    bottom: '-80px',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    textAlign: 'center',
+                    pointerEvents: 'none',
+                    whiteSpace: 'nowrap',
                   })}
                 >
                   <h2
                     className={css({
-                      fontSize: "2xl",
-                      fontWeight: "bold",
+                      fontSize: '2xl',
+                      fontWeight: 'bold',
                       color:
-                        currentLevel.color === "green"
-                          ? "green.400"
-                          : currentLevel.color === "blue"
-                            ? "blue.400"
-                            : currentLevel.color === "violet"
-                              ? "violet.400"
-                              : "amber.400",
-                      mb: "0.5",
+                        currentLevel.color === 'green'
+                          ? 'green.400'
+                          : currentLevel.color === 'blue'
+                            ? 'blue.400'
+                            : currentLevel.color === 'violet'
+                              ? 'violet.400'
+                              : 'amber.400',
+                      mb: '0.5',
                     })}
                   >
                     {currentLevel.level}
                   </h2>
-                  {"name" in currentLevel && (
+                  {'name' in currentLevel && (
                     <div
                       className={css({
-                        fontSize: "md",
-                        color: "gray.300",
-                        mb: "0.5",
+                        fontSize: 'md',
+                        color: 'gray.300',
+                        mb: '0.5',
                       })}
                     >
                       {currentLevel.name}
                     </div>
                   )}
-                  {"minScore" in currentLevel && (
-                    <div className={css({ fontSize: "sm", color: "gray.400" })}>
+                  {'minScore' in currentLevel && (
+                    <div className={css({ fontSize: 'sm', color: 'gray.400' })}>
                       Min: {currentLevel.minScore}pts
                     </div>
                   )}
@@ -601,11 +585,11 @@ export function LevelSliderDisplay({
           {/* Level Markers */}
           <div
             className={css({
-              display: "flex",
-              justifyContent: "space-between",
-              mt: "1",
-              fontSize: "xs",
-              color: "gray.500",
+              display: 'flex',
+              justifyContent: 'space-between',
+              mt: '1',
+              fontSize: 'xs',
+              color: 'gray.500',
             })}
           >
             <span>10th Kyu</span>
@@ -617,80 +601,78 @@ export function LevelSliderDisplay({
         {/* Abacus Display with Level Details */}
         <div
           className={css({
-            display: "flex",
-            flexDirection: { base: "column", lg: "row" },
-            gap: "4",
-            p: { base: "4", md: "6" },
-            bg: "rgba(0, 0, 0, 0.3)",
-            rounded: "lg",
-            border: "1px solid",
-            borderColor: "gray.700",
-            overflow: "hidden",
+            display: 'flex',
+            flexDirection: { base: 'column', lg: 'row' },
+            gap: '4',
+            p: { base: '4', md: '6' },
+            bg: 'rgba(0, 0, 0, 0.3)',
+            rounded: 'lg',
+            border: '1px solid',
+            borderColor: 'gray.700',
+            overflow: 'hidden',
             flex: 1,
             minH: 0, // Allow flex shrinking
           })}
         >
           {/* Level Details (only for Kyu levels) */}
-          {currentLevel.type === "kyu" &&
+          {currentLevel.type === 'kyu' &&
             (() => {
-              const detailsKey = getLevelDetailsKey(currentLevel.level);
+              const detailsKey = getLevelDetailsKey(currentLevel.level)
               const rawText = detailsKey
                 ? kyuLevelDetails[detailsKey as keyof typeof kyuLevelDetails]
-                : null;
-              const sections = rawText ? parseKyuDetails(rawText) : [];
+                : null
+              const sections = rawText ? parseKyuDetails(rawText) : []
 
               // Use consistent sizing across all levels
-              const sizing = { fontSize: "md", gap: "3", iconSize: "4xl" };
+              const sizing = { fontSize: 'md', gap: '3', iconSize: '4xl' }
 
               return sections.length > 0 ? (
                 <div
                   className={css({
-                    flex: "0 0 auto",
-                    display: { base: "none", lg: "grid" },
-                    gridTemplateColumns: "repeat(2, 1fr)",
-                    gap: "2",
-                    p: "2",
-                    w: "100%",
-                    maxW: "400px",
-                    alignContent: "center",
-                    justifyItems: "center",
+                    flex: '0 0 auto',
+                    display: { base: 'none', lg: 'grid' },
+                    gridTemplateColumns: 'repeat(2, 1fr)',
+                    gap: '2',
+                    p: '2',
+                    w: '100%',
+                    maxW: '400px',
+                    alignContent: 'center',
+                    justifyItems: 'center',
                   })}
                 >
                   {sections.map((section, idx) => {
-                    const hasData = section.digits !== null;
+                    const hasData = section.digits !== null
                     const levelColor =
-                      currentLevel.color === "green"
-                        ? "green.300"
-                        : currentLevel.color === "blue"
-                          ? "blue.300"
-                          : "violet.300";
+                      currentLevel.color === 'green'
+                        ? 'green.300'
+                        : currentLevel.color === 'blue'
+                          ? 'blue.300'
+                          : 'violet.300'
 
                     return (
                       <div
                         key={idx}
                         className={css({
-                          bg: hasData
-                            ? "rgba(0, 0, 0, 0.4)"
-                            : "rgba(0, 0, 0, 0.2)",
-                          border: "1px solid",
-                          borderColor: hasData ? "gray.700" : "gray.800",
-                          rounded: "md",
-                          p: "3",
-                          transition: "all 0.2s",
-                          display: "flex",
-                          flexDirection: "column",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          gap: "1.5",
+                          bg: hasData ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0.2)',
+                          border: '1px solid',
+                          borderColor: hasData ? 'gray.700' : 'gray.800',
+                          rounded: 'md',
+                          p: '3',
+                          transition: 'all 0.2s',
+                          display: 'flex',
+                          flexDirection: 'column',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          gap: '1.5',
                           opacity: hasData ? 1 : 0.3,
-                          w: { base: "100%", sm: "auto" },
-                          minW: { sm: "140px" },
-                          maxW: { base: "170px", sm: "170px" },
-                          minH: "150px",
+                          w: { base: '100%', sm: 'auto' },
+                          minW: { sm: '140px' },
+                          maxW: { base: '170px', sm: '170px' },
+                          minH: '150px',
                           _hover: hasData
                             ? {
-                                borderColor: "gray.500",
-                                transform: "scale(1.05)",
+                                borderColor: 'gray.500',
+                                transform: 'scale(1.05)',
                               }
                             : {},
                         })}
@@ -698,7 +680,7 @@ export function LevelSliderDisplay({
                         <span
                           className={css({
                             fontSize: sizing.iconSize,
-                            lineHeight: "1",
+                            lineHeight: '1',
                           })}
                         >
                           {section.icon}
@@ -707,8 +689,8 @@ export function LevelSliderDisplay({
                           <>
                             <div
                               className={css({
-                                fontSize: "2xl",
-                                fontWeight: "bold",
+                                fontSize: '2xl',
+                                fontWeight: 'bold',
                                 color: levelColor,
                               })}
                             >
@@ -717,22 +699,22 @@ export function LevelSliderDisplay({
                             {(section.rows || section.chars) && (
                               <div
                                 className={css({
-                                  fontSize: "sm",
-                                  color: "gray.400",
-                                  textAlign: "center",
+                                  fontSize: 'sm',
+                                  color: 'gray.400',
+                                  textAlign: 'center',
                                 })}
                               >
                                 {section.rows && `${section.rows} rows`}
-                                {section.rows && section.chars && " • "}
+                                {section.rows && section.chars && ' • '}
                                 {section.chars && `${section.chars} chars`}
                               </div>
                             )}
                             {section.problems && (
                               <div
                                 className={css({
-                                  fontSize: "sm",
-                                  color: "gray.400",
-                                  textAlign: "center",
+                                  fontSize: 'sm',
+                                  color: 'gray.400',
+                                  textAlign: 'center',
                                 })}
                               >
                                 {section.problems} problems
@@ -742,42 +724,38 @@ export function LevelSliderDisplay({
                         )}
                         <div
                           className={css({
-                            fontSize: "xs",
-                            color: hasData ? "gray.500" : "gray.700",
-                            textAlign: "center",
-                            fontWeight: hasData ? "normal" : "bold",
+                            fontSize: 'xs',
+                            color: hasData ? 'gray.500' : 'gray.700',
+                            textAlign: 'center',
+                            fontWeight: hasData ? 'normal' : 'bold',
                           })}
                         >
                           {section.label}
                         </div>
                       </div>
-                    );
+                    )
                   })}
                 </div>
-              ) : null;
+              ) : null
             })()}
 
           {/* Abacus (centered on mobile, right-aligned for Kyu on desktop, centered for Dan) */}
           <div
             className={css({
-              display: "flex",
+              display: 'flex',
               justifyContent:
-                currentLevel.type === "kyu"
-                  ? { base: "center", lg: "flex-end" }
-                  : "center",
-              alignItems: "center",
+                currentLevel.type === 'kyu' ? { base: 'center', lg: 'flex-end' } : 'center',
+              alignItems: 'center',
               flex: 1,
-              overflowX: "auto",
-              overflowY: "hidden",
+              overflowX: 'auto',
+              overflowY: 'hidden',
               minW: 0, // Allow flex shrinking
               minH: 0, // Allow flex shrinking
             })}
           >
             <animated.div
               style={{
-                transform: animatedProps.scaleFactor.to(
-                  (s) => `scale(${s / scaleFactor})`,
-                ),
+                transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
               }}
             >
               <AbacusReact
@@ -794,13 +772,12 @@ export function LevelSliderDisplay({
         {/* Digit Count */}
         <div
           className={css({
-            textAlign: "center",
-            color: "gray.400",
-            fontSize: "sm",
+            textAlign: 'center',
+            color: 'gray.400',
+            fontSize: 'sm',
           })}
         >
-          Requires mastery of <strong>{currentLevel.digits}-digit</strong>{" "}
-          calculations
+          Requires mastery of <strong>{currentLevel.digits}-digit</strong> calculations
         </div>
       </div>
 
@@ -808,95 +785,89 @@ export function LevelSliderDisplay({
       {showLegend && (
         <div
           className={css({
-            display: "flex",
-            flexWrap: "wrap",
-            gap: "6",
-            justifyContent: "center",
-            p: "6",
-            bg: "rgba(0, 0, 0, 0.3)",
-            rounded: "lg",
-            border: "1px solid",
-            borderColor: "gray.700",
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '6',
+            justifyContent: 'center',
+            p: '6',
+            bg: 'rgba(0, 0, 0, 0.3)',
+            rounded: 'lg',
+            border: '1px solid',
+            borderColor: 'gray.700',
           })}
         >
           <div
             className={css({
-              display: "flex",
-              alignItems: "center",
-              gap: "2",
+              display: 'flex',
+              alignItems: 'center',
+              gap: '2',
             })}
           >
             <div
               className={css({
-                w: "4",
-                h: "4",
-                bg: "green.500",
-                rounded: "sm",
+                w: '4',
+                h: '4',
+                bg: 'green.500',
+                rounded: 'sm',
               })}
             />
-            <span className={css({ fontSize: "sm", color: "gray.300" })}>
-              Beginner (10-7 Kyu)
-            </span>
+            <span className={css({ fontSize: 'sm', color: 'gray.300' })}>Beginner (10-7 Kyu)</span>
           </div>
           <div
             className={css({
-              display: "flex",
-              alignItems: "center",
-              gap: "2",
+              display: 'flex',
+              alignItems: 'center',
+              gap: '2',
             })}
           >
             <div
               className={css({
-                w: "4",
-                h: "4",
-                bg: "blue.500",
-                rounded: "sm",
+                w: '4',
+                h: '4',
+                bg: 'blue.500',
+                rounded: 'sm',
               })}
             />
-            <span className={css({ fontSize: "sm", color: "gray.300" })}>
+            <span className={css({ fontSize: 'sm', color: 'gray.300' })}>
               Intermediate (6-4 Kyu)
             </span>
           </div>
           <div
             className={css({
-              display: "flex",
-              alignItems: "center",
-              gap: "2",
+              display: 'flex',
+              alignItems: 'center',
+              gap: '2',
             })}
           >
             <div
               className={css({
-                w: "4",
-                h: "4",
-                bg: "violet.500",
-                rounded: "sm",
+                w: '4',
+                h: '4',
+                bg: 'violet.500',
+                rounded: 'sm',
               })}
             />
-            <span className={css({ fontSize: "sm", color: "gray.300" })}>
-              Advanced (3-1 Kyu)
-            </span>
+            <span className={css({ fontSize: 'sm', color: 'gray.300' })}>Advanced (3-1 Kyu)</span>
           </div>
           <div
             className={css({
-              display: "flex",
-              alignItems: "center",
-              gap: "2",
+              display: 'flex',
+              alignItems: 'center',
+              gap: '2',
             })}
           >
             <div
               className={css({
-                w: "4",
-                h: "4",
-                bg: "amber.500",
-                rounded: "sm",
+                w: '4',
+                h: '4',
+                bg: 'amber.500',
+                rounded: 'sm',
               })}
             />
-            <span className={css({ fontSize: "sm", color: "gray.300" })}>
-              Master (Dan ranks)
-            </span>
+            <span className={css({ fontSize: 'sm', color: 'gray.300' })}>Master (Dan ranks)</span>
           </div>
         </div>
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/LivePreview.tsx b/apps/web/src/components/LivePreview.tsx
index 403aa892..3926baf4 100644
--- a/apps/web/src/components/LivePreview.tsx
+++ b/apps/web/src/components/LivePreview.tsx
@@ -1,58 +1,56 @@
-"use client";
+'use client'
 
-import { AbacusReact } from "@soroban/abacus-react";
-import { Eye } from "lucide-react";
-import { useMemo, useState } from "react";
-import type { FlashcardFormState } from "@/app/create/page";
-import { css } from "../../styled-system/css";
-import { grid, hstack, stack } from "../../styled-system/patterns";
+import { AbacusReact } from '@soroban/abacus-react'
+import { Eye } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import type { FlashcardFormState } from '@/app/create/page'
+import { css } from '../../styled-system/css'
+import { grid, hstack, stack } from '../../styled-system/patterns'
 
 interface LivePreviewProps {
-  config: FlashcardFormState;
+  config: FlashcardFormState
 }
 
 export function LivePreview({ config }: LivePreviewProps) {
   // Generate preview numbers directly from config
   const previewNumbers = useMemo(() => {
-    return getPreviewNumbers(config.range || "1-10");
-  }, [config.range]);
+    return getPreviewNumbers(config.range || '1-10')
+  }, [config.range])
 
-  const previewCount = previewNumbers.length;
+  const previewCount = previewNumbers.length
 
   return (
-    <div className={stack({ gap: "6" })}>
-      <div
-        className={hstack({ justify: "space-between", alignItems: "center" })}
-      >
-        <div className={stack({ gap: "1" })}>
+    <div className={stack({ gap: '6' })}>
+      <div className={hstack({ justify: 'space-between', alignItems: 'center' })}>
+        <div className={stack({ gap: '1' })}>
           <h3
             className={css({
-              fontSize: "xl",
-              fontWeight: "bold",
-              color: "gray.900",
+              fontSize: 'xl',
+              fontWeight: 'bold',
+              color: 'gray.900',
             })}
           >
             Live Preview
           </h3>
           <p
             className={css({
-              fontSize: "sm",
-              color: "gray.600",
+              fontSize: 'sm',
+              color: 'gray.600',
             })}
           >
             See how your flashcards will look
           </p>
         </div>
-        <div className={hstack({ gap: "3", alignItems: "center" })}>
+        <div className={hstack({ gap: '3', alignItems: 'center' })}>
           <div
             className={css({
-              px: "3",
-              py: "1",
-              bg: "brand.100",
-              color: "brand.800",
-              fontSize: "xs",
-              fontWeight: "medium",
-              rounded: "full",
+              px: '3',
+              py: '1',
+              bg: 'brand.100',
+              color: 'brand.800',
+              fontSize: 'xs',
+              fontWeight: 'medium',
+              rounded: 'full',
             })}
           >
             {previewCount} cards • {config.format?.toUpperCase()}
@@ -64,7 +62,7 @@ export function LivePreview({ config }: LivePreviewProps) {
       <div
         className={grid({
           columns: { base: 1, md: 2, lg: 3 },
-          gap: "4",
+          gap: '4',
         })}
       >
         {previewNumbers.map((number) => (
@@ -75,68 +73,53 @@ export function LivePreview({ config }: LivePreviewProps) {
       {/* Configuration Summary */}
       <div
         className={css({
-          p: "4",
-          bg: "gray.50",
-          rounded: "xl",
-          border: "1px solid",
-          borderColor: "gray.200",
+          p: '4',
+          bg: 'gray.50',
+          rounded: 'xl',
+          border: '1px solid',
+          borderColor: 'gray.200',
         })}
       >
         <h4
           className={css({
-            fontSize: "sm",
-            fontWeight: "semibold",
-            color: "gray.900",
-            mb: "2",
+            fontSize: 'sm',
+            fontWeight: 'semibold',
+            color: 'gray.900',
+            mb: '2',
           })}
         >
           Configuration Summary
         </h4>
-        <div className={grid({ columns: { base: 1, md: 2 }, gap: "3" })}>
-          <ConfigItem label="Range" value={config.range || "Not set"} />
-          <ConfigItem
-            label="Format"
-            value={config.format?.toUpperCase() || "PDF"}
-          />
-          <ConfigItem
-            label="Cards per page"
-            value={config.cardsPerPage?.toString() || "6"}
-          />
-          <ConfigItem
-            label="Paper size"
-            value={config.paperSize?.toUpperCase() || "US-LETTER"}
-          />
+        <div className={grid({ columns: { base: 1, md: 2 }, gap: '3' })}>
+          <ConfigItem label="Range" value={config.range || 'Not set'} />
+          <ConfigItem label="Format" value={config.format?.toUpperCase() || 'PDF'} />
+          <ConfigItem label="Cards per page" value={config.cardsPerPage?.toString() || '6'} />
+          <ConfigItem label="Paper size" value={config.paperSize?.toUpperCase() || 'US-LETTER'} />
         </div>
       </div>
     </div>
-  );
+  )
 }
 
-function FlashcardPreview({
-  number,
-  config,
-}: {
-  number: number;
-  config: FlashcardFormState;
-}) {
-  const [showBack, setShowBack] = useState(false);
+function FlashcardPreview({ number, config }: { number: number; config: FlashcardFormState }) {
+  const [showBack, setShowBack] = useState(false)
 
   return (
     <div
       className={css({
-        aspectRatio: "3/4",
-        bg: "white",
-        rounded: "xl",
-        border: "2px solid",
-        borderColor: "gray.200",
-        position: "relative",
-        overflow: "hidden",
-        cursor: "pointer",
-        transition: "all",
+        aspectRatio: '3/4',
+        bg: 'white',
+        rounded: 'xl',
+        border: '2px solid',
+        borderColor: 'gray.200',
+        position: 'relative',
+        overflow: 'hidden',
+        cursor: 'pointer',
+        transition: 'all',
         _hover: {
-          borderColor: "brand.300",
-          transform: "translateY(-2px)",
-          shadow: "card",
+          borderColor: 'brand.300',
+          transform: 'translateY(-2px)',
+          shadow: 'card',
         },
       })}
       onClick={() => setShowBack(!showBack)}
@@ -144,37 +127,37 @@ function FlashcardPreview({
       {/* Flip indicator */}
       <div
         className={css({
-          position: "absolute",
-          top: "2",
-          right: "2",
-          p: "1",
-          bg: "white",
-          rounded: "full",
-          shadow: "card",
+          position: 'absolute',
+          top: '2',
+          right: '2',
+          p: '1',
+          bg: 'white',
+          rounded: 'full',
+          shadow: 'card',
           zIndex: 10,
         })}
       >
-        <Eye size={12} className={css({ color: "gray.600" })} />
+        <Eye size={12} className={css({ color: 'gray.600' })} />
       </div>
 
       {showBack ? (
         // Back side - Numeral
         <div
           className={css({
-            w: "full",
-            h: "full",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            bg: "gray.50",
+            w: 'full',
+            h: 'full',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            bg: 'gray.50',
           })}
         >
           <div
             className={css({
-              fontSize: "4xl",
-              fontWeight: "bold",
-              color: "gray.900",
-              fontFamily: "mono",
+              fontSize: '4xl',
+              fontWeight: 'bold',
+              color: 'gray.900',
+              fontFamily: 'mono',
             })}
           >
             {number}
@@ -184,20 +167,20 @@ function FlashcardPreview({
         // Front side - Soroban using React component
         <div
           className={css({
-            w: "full",
-            h: "full",
-            p: "2",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            overflow: "hidden",
+            w: 'full',
+            h: 'full',
+            p: '2',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden',
           })}
         >
           <AbacusReact
             value={number}
-            columns={"auto"}
-            beadShape={(config.beadShape as any) || "diamond"}
-            colorScheme={(config.colorScheme as any) || "place-value"}
+            columns={'auto'}
+            beadShape={(config.beadShape as any) || 'diamond'}
+            colorScheme={(config.colorScheme as any) || 'place-value'}
             scaleFactor={(config.scaleFactor || 1) * 1.2}
             interactive={false}
             showNumbers="always"
@@ -207,50 +190,49 @@ function FlashcardPreview({
         </div>
       )}
     </div>
-  );
+  )
 }
 
 function ConfigItem({ label, value }: { label: string; value: string }) {
   return (
     <div
       className={css({
-        fontSize: "xs",
-        color: "gray.600",
+        fontSize: 'xs',
+        color: 'gray.600',
       })}
     >
-      <span className={css({ fontWeight: "medium" })}>{label}:</span>{" "}
-      <span>{value}</span>
+      <span className={css({ fontWeight: 'medium' })}>{label}:</span> <span>{value}</span>
     </div>
-  );
+  )
 }
 
 // Helper function to extract numbers from range for preview
 function getPreviewNumbers(range?: string): number[] {
-  if (!range) return [1, 2, 3];
+  if (!range) return [1, 2, 3]
 
   // Handle comma-separated values
-  if (range.includes(",")) {
+  if (range.includes(',')) {
     return range
-      .split(",")
+      .split(',')
       .slice(0, 3)
       .map((n) => parseInt(n.trim(), 10))
-      .filter((n) => !Number.isNaN(n));
+      .filter((n) => !Number.isNaN(n))
   }
 
   // Handle range format like "1-10"
-  if (range.includes("-")) {
-    const [start] = range.split("-").map((n) => parseInt(n.trim(), 10));
+  if (range.includes('-')) {
+    const [start] = range.split('-').map((n) => parseInt(n.trim(), 10))
     if (!Number.isNaN(start)) {
-      return [start, start + 1, start + 2];
+      return [start, start + 1, start + 2]
     }
   }
 
   // Handle single number
-  const singleNum = parseInt(range, 10);
+  const singleNum = parseInt(range, 10)
   if (!Number.isNaN(singleNum)) {
-    return [singleNum, singleNum + 1, singleNum + 2];
+    return [singleNum, singleNum + 1, singleNum + 2]
   }
 
   // Fallback
-  return [1, 2, 3];
+  return [1, 2, 3]
 }
diff --git a/apps/web/src/components/MockArcadeEnvironment.tsx b/apps/web/src/components/MockArcadeEnvironment.tsx
index 7a57af2d..4669629a 100644
--- a/apps/web/src/components/MockArcadeEnvironment.tsx
+++ b/apps/web/src/components/MockArcadeEnvironment.tsx
@@ -1,24 +1,18 @@
-"use client";
+'use client'
 
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  type ReactNode,
-} from "react";
-import type { Player } from "@/contexts/GameModeContext";
-import type { GameMove } from "@/lib/arcade/validation";
-import type { RetryState } from "@/lib/arcade/error-handling";
+import { createContext, useCallback, useContext, useMemo, type ReactNode } from 'react'
+import type { Player } from '@/contexts/GameModeContext'
+import type { GameMove } from '@/lib/arcade/validation'
+import type { RetryState } from '@/lib/arcade/error-handling'
 
 // ============================================================================
 // Mock ViewerId Context
 // ============================================================================
 
-const MockViewerIdContext = createContext<string>("demo-viewer-id");
+const MockViewerIdContext = createContext<string>('demo-viewer-id')
 
 export function useMockViewerId() {
-  return useContext(MockViewerIdContext);
+  return useContext(MockViewerIdContext)
 }
 
 // ============================================================================
@@ -26,60 +20,56 @@ export function useMockViewerId() {
 // ============================================================================
 
 interface MockRoomData {
-  id: string;
-  name: string;
-  code: string;
-  gameName: string;
-  gameConfig: Record<string, unknown>;
+  id: string
+  name: string
+  code: string
+  gameName: string
+  gameConfig: Record<string, unknown>
 }
 
-const MockRoomDataContext = createContext<MockRoomData | null>(null);
+const MockRoomDataContext = createContext<MockRoomData | null>(null)
 
 export function useMockRoomData() {
-  const room = useContext(MockRoomDataContext);
-  if (!room)
-    throw new Error("useMockRoomData must be used within MockRoomDataProvider");
-  return room;
+  const room = useContext(MockRoomDataContext)
+  if (!room) throw new Error('useMockRoomData must be used within MockRoomDataProvider')
+  return room
 }
 
 export function useMockUpdateGameConfig() {
   return useCallback((config: Record<string, unknown>) => {
     // Mock: do nothing in preview mode
-    console.log("Mock updateGameConfig:", config);
-  }, []);
+    console.log('Mock updateGameConfig:', config)
+  }, [])
 }
 
 // ============================================================================
 // Mock Game Mode Context
 // ============================================================================
 
-type GameMode = "single" | "battle" | "tournament";
+type GameMode = 'single' | 'battle' | 'tournament'
 
 interface GameModeContextType {
-  gameMode: GameMode;
-  players: Map<string, Player>;
-  activePlayers: Set<string>;
-  activePlayerCount: number;
-  addPlayer: (player?: Partial<Player>) => void;
-  updatePlayer: (id: string, updates: Partial<Player>) => void;
-  removePlayer: (id: string) => void;
-  setActive: (id: string, active: boolean) => void;
-  getActivePlayers: () => Player[];
-  getPlayer: (id: string) => Player | undefined;
-  getAllPlayers: () => Player[];
-  resetPlayers: () => void;
-  isLoading: boolean;
+  gameMode: GameMode
+  players: Map<string, Player>
+  activePlayers: Set<string>
+  activePlayerCount: number
+  addPlayer: (player?: Partial<Player>) => void
+  updatePlayer: (id: string, updates: Partial<Player>) => void
+  removePlayer: (id: string) => void
+  setActive: (id: string, active: boolean) => void
+  getActivePlayers: () => Player[]
+  getPlayer: (id: string) => Player | undefined
+  getAllPlayers: () => Player[]
+  resetPlayers: () => void
+  isLoading: boolean
 }
 
-const MockGameModeContextValue = createContext<GameModeContextType | null>(
-  null,
-);
+const MockGameModeContextValue = createContext<GameModeContextType | null>(null)
 
 export function useMockGameMode() {
-  const ctx = useContext(MockGameModeContextValue);
-  if (!ctx)
-    throw new Error("useMockGameMode must be used within MockGameModeProvider");
-  return ctx;
+  const ctx = useContext(MockGameModeContextValue)
+  if (!ctx) throw new Error('useMockGameMode must be used within MockGameModeProvider')
+  return ctx
 }
 
 // ============================================================================
@@ -87,27 +77,27 @@ export function useMockGameMode() {
 // ============================================================================
 
 interface MockArcadeSessionReturn<TState> {
-  state: TState;
-  version: number;
-  connected: boolean;
-  hasPendingMoves: boolean;
-  lastError: string | null;
-  retryState: RetryState;
-  sendMove: (move: Omit<GameMove, "timestamp">) => void;
-  exitSession: () => void;
-  clearError: () => void;
-  refresh: () => void;
+  state: TState
+  version: number
+  connected: boolean
+  hasPendingMoves: boolean
+  lastError: string | null
+  retryState: RetryState
+  sendMove: (move: Omit<GameMove, 'timestamp'>) => void
+  exitSession: () => void
+  clearError: () => void
+  refresh: () => void
 }
 
 export function createMockArcadeSession<TState>(
-  initialState: TState,
+  initialState: TState
 ): MockArcadeSessionReturn<TState> {
   const mockRetryState: RetryState = {
     isRetrying: false,
     retryCount: 0,
     move: null,
     timestamp: null,
-  };
+  }
 
   return {
     state: initialState,
@@ -128,7 +118,7 @@ export function createMockArcadeSession<TState>(
     refresh: () => {
       // Mock: do nothing in preview
     },
-  };
+  }
 }
 
 // ============================================================================
@@ -136,9 +126,9 @@ export function createMockArcadeSession<TState>(
 // ============================================================================
 
 interface MockArcadeEnvironmentProps {
-  children: ReactNode;
-  gameName: string;
-  gameConfig?: Record<string, unknown>;
+  children: ReactNode
+  gameName: string
+  gameConfig?: Record<string, unknown>
 }
 
 export function MockArcadeEnvironment({
@@ -149,32 +139,29 @@ export function MockArcadeEnvironment({
   const mockPlayers = useMemo(
     (): Player[] => [
       {
-        id: "demo-player-1",
-        name: "Demo Player",
-        emoji: "🎮",
-        color: "#3b82f6",
+        id: 'demo-player-1',
+        name: 'Demo Player',
+        emoji: '🎮',
+        color: '#3b82f6',
         createdAt: Date.now(),
       },
     ],
-    [],
-  );
+    []
+  )
 
   const playersMap = useMemo(() => {
-    const map = new Map<string, Player>();
+    const map = new Map<string, Player>()
     for (const p of mockPlayers) {
-      map.set(p.id, p);
+      map.set(p.id, p)
     }
-    return map;
-  }, [mockPlayers]);
+    return map
+  }, [mockPlayers])
 
-  const activePlayers = useMemo(
-    () => new Set(mockPlayers.map((p) => p.id)),
-    [mockPlayers],
-  );
+  const activePlayers = useMemo(() => new Set(mockPlayers.map((p) => p.id)), [mockPlayers])
 
   const mockGameModeCtx: GameModeContextType = useMemo(
     () => ({
-      gameMode: "single",
+      gameMode: 'single',
       players: playersMap,
       activePlayers,
       activePlayerCount: activePlayers.size,
@@ -198,19 +185,19 @@ export function MockArcadeEnvironment({
       },
       isLoading: false,
     }),
-    [mockPlayers, playersMap, activePlayers],
-  );
+    [mockPlayers, playersMap, activePlayers]
+  )
 
   const mockRoomData: MockRoomData = useMemo(
     () => ({
       id: `demo-room-${gameName}`,
-      name: "Demo Room",
-      code: "DEMO",
+      name: 'Demo Room',
+      code: 'DEMO',
       gameName,
       gameConfig,
     }),
-    [gameName, gameConfig],
-  );
+    [gameName, gameConfig]
+  )
 
   return (
     <MockViewerIdContext.Provider value="demo-viewer-id">
@@ -220,5 +207,5 @@ export function MockArcadeEnvironment({
         </MockGameModeContextValue.Provider>
       </MockRoomDataContext.Provider>
     </MockViewerIdContext.Provider>
-  );
+  )
 }
diff --git a/apps/web/src/components/MockArcadeHooks.tsx b/apps/web/src/components/MockArcadeHooks.tsx
index c6280cc9..a2f6af83 100644
--- a/apps/web/src/components/MockArcadeHooks.tsx
+++ b/apps/web/src/components/MockArcadeHooks.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client'
 
 /**
  * Mock implementations of arcade SDK hooks for game previews
@@ -10,12 +10,12 @@ import {
   useMockRoomData,
   useMockUpdateGameConfig,
   useMockGameMode,
-} from "./MockArcadeEnvironment";
+} from './MockArcadeEnvironment'
 
 // Re-export with SDK names
-export const useViewerId = useMockViewerId;
-export const useRoomData = useMockRoomData;
-export const useUpdateGameConfig = useMockUpdateGameConfig;
-export const useGameMode = useMockGameMode;
+export const useViewerId = useMockViewerId
+export const useRoomData = useMockRoomData
+export const useUpdateGameConfig = useMockUpdateGameConfig
+export const useGameMode = useMockGameMode
 
 // Note: useArcadeSession must be handled per-game since it needs type parameters
diff --git a/apps/web/src/components/MockGameStates.ts b/apps/web/src/components/MockGameStates.ts
index d781f8d1..6ea1d457 100644
--- a/apps/web/src/components/MockGameStates.ts
+++ b/apps/web/src/components/MockGameStates.ts
@@ -3,94 +3,92 @@
  * Creates proper initial states in "playing" phase for each game type
  */
 
-import { complementRaceValidator } from "@/arcade-games/complement-race/Validator";
-import { matchingGameValidator } from "@/arcade-games/matching/Validator";
-import { memoryQuizGameValidator } from "@/arcade-games/memory-quiz/Validator";
-import { cardSortingValidator } from "@/arcade-games/card-sorting/Validator";
-import { rithmomachiaValidator } from "@/arcade-games/rithmomachia/Validator";
+import { complementRaceValidator } from '@/arcade-games/complement-race/Validator'
+import { matchingGameValidator } from '@/arcade-games/matching/Validator'
+import { memoryQuizGameValidator } from '@/arcade-games/memory-quiz/Validator'
+import { cardSortingValidator } from '@/arcade-games/card-sorting/Validator'
+import { rithmomachiaValidator } from '@/arcade-games/rithmomachia/Validator'
 import {
   DEFAULT_COMPLEMENT_RACE_CONFIG,
   DEFAULT_MATCHING_CONFIG,
   DEFAULT_MEMORY_QUIZ_CONFIG,
   DEFAULT_CARD_SORTING_CONFIG,
   DEFAULT_RITHMOMACHIA_CONFIG,
-} from "@/lib/arcade/game-configs";
-import type { ComplementRaceState } from "@/arcade-games/complement-race/types";
-import type { MatchingState } from "@/arcade-games/matching/types";
-import type { MemoryQuizState } from "@/arcade-games/memory-quiz/types";
-import type { CardSortingState } from "@/arcade-games/card-sorting/types";
-import type { RithmomachiaState } from "@/arcade-games/rithmomachia/types";
+} from '@/lib/arcade/game-configs'
+import type { ComplementRaceState } from '@/arcade-games/complement-race/types'
+import type { MatchingState } from '@/arcade-games/matching/types'
+import type { MemoryQuizState } from '@/arcade-games/memory-quiz/types'
+import type { CardSortingState } from '@/arcade-games/card-sorting/types'
+import type { RithmomachiaState } from '@/arcade-games/rithmomachia/types'
 
 /**
  * Create a mock state for Complement Race in playing phase
  * Shows mid-game state with progress and activity
  */
 export function createMockComplementRaceState(): ComplementRaceState {
-  const baseState = complementRaceValidator.getInitialState(
-    DEFAULT_COMPLEMENT_RACE_CONFIG,
-  );
+  const baseState = complementRaceValidator.getInitialState(DEFAULT_COMPLEMENT_RACE_CONFIG)
 
   // Create some passengers for visual interest
   const mockPassengers = [
     {
-      id: "p1",
-      name: "Alice",
-      avatar: "👩‍💼",
-      originStationId: "depot",
-      destinationStationId: "canyon",
+      id: 'p1',
+      name: 'Alice',
+      avatar: '👩‍💼',
+      originStationId: 'depot',
+      destinationStationId: 'canyon',
       isUrgent: false,
-      claimedBy: "demo-player-1",
+      claimedBy: 'demo-player-1',
       deliveredBy: null,
       carIndex: 0,
       timestamp: Date.now() - 10000,
     },
     {
-      id: "p2",
-      name: "Bob",
-      avatar: "👨‍🎓",
-      originStationId: "riverside",
-      destinationStationId: "grand-central",
+      id: 'p2',
+      name: 'Bob',
+      avatar: '👨‍🎓',
+      originStationId: 'riverside',
+      destinationStationId: 'grand-central',
       isUrgent: true,
       claimedBy: null,
       deliveredBy: null,
       carIndex: null,
       timestamp: Date.now() - 5000,
     },
-  ];
+  ]
 
   // Create stations for sprint mode
   const mockStations = [
-    { id: "station-0", name: "Depot", position: 0, icon: "🏭", emoji: "🏭" },
+    { id: 'station-0', name: 'Depot', position: 0, icon: '🏭', emoji: '🏭' },
     {
-      id: "station-1",
-      name: "Riverside",
+      id: 'station-1',
+      name: 'Riverside',
       position: 20,
-      icon: "🌊",
-      emoji: "🌊",
+      icon: '🌊',
+      emoji: '🌊',
     },
     {
-      id: "station-2",
-      name: "Hillside",
+      id: 'station-2',
+      name: 'Hillside',
       position: 40,
-      icon: "⛰️",
-      emoji: "⛰️",
+      icon: '⛰️',
+      emoji: '⛰️',
     },
     {
-      id: "station-3",
-      name: "Canyon View",
+      id: 'station-3',
+      name: 'Canyon View',
       position: 60,
-      icon: "🏜️",
-      emoji: "🏜️",
+      icon: '🏜️',
+      emoji: '🏜️',
     },
-    { id: "station-4", name: "Meadows", position: 80, icon: "🌾", emoji: "🌾" },
+    { id: 'station-4', name: 'Meadows', position: 80, icon: '🌾', emoji: '🌾' },
     {
-      id: "station-5",
-      name: "Grand Central",
+      id: 'station-5',
+      name: 'Grand Central',
       position: 100,
-      icon: "🏛️",
-      emoji: "🏛️",
+      icon: '🏛️',
+      emoji: '🏛️',
     },
-  ];
+  ]
 
   // Override to playing phase with mid-game action
   // IMPORTANT: Set style to 'sprint' for Steam Sprint mode with train visualization
@@ -98,23 +96,23 @@ export function createMockComplementRaceState(): ComplementRaceState {
     ...baseState,
     config: {
       ...baseState.config,
-      style: "sprint", // Steam Sprint mode with train and passengers
+      style: 'sprint', // Steam Sprint mode with train and passengers
     },
-    style: "sprint", // Also set at top level for local context
-    gamePhase: "playing",
+    style: 'sprint', // Also set at top level for local context
+    gamePhase: 'playing',
     isGameActive: true,
-    activePlayers: ["demo-player-1"],
+    activePlayers: ['demo-player-1'],
     playerMetadata: {
-      "demo-player-1": {
-        name: "Demo Player",
-        color: "#3b82f6",
+      'demo-player-1': {
+        name: 'Demo Player',
+        color: '#3b82f6',
       },
     },
     players: {
-      "demo-player-1": {
-        id: "demo-player-1",
-        name: "Demo Player",
-        color: "#3b82f6",
+      'demo-player-1': {
+        id: 'demo-player-1',
+        name: 'Demo Player',
+        color: '#3b82f6',
         score: 420,
         streak: 5,
         bestStreak: 8,
@@ -125,13 +123,13 @@ export function createMockComplementRaceState(): ComplementRaceState {
         isActive: true,
         currentAnswer: null,
         lastAnswerTime: Date.now() - 2000,
-        passengers: ["p1"],
+        passengers: ['p1'],
         deliveredPassengers: 5,
       },
     },
     currentQuestions: {
-      "demo-player-1": {
-        id: "demo-q-current",
+      'demo-player-1': {
+        id: 'demo-q-current',
         number: 6,
         targetSum: 10,
         correctAnswer: 4,
@@ -140,7 +138,7 @@ export function createMockComplementRaceState(): ComplementRaceState {
       },
     },
     currentQuestion: {
-      id: "demo-q-current",
+      id: 'demo-q-current',
       number: 6,
       targetSum: 10,
       correctAnswer: 4,
@@ -168,8 +166,8 @@ export function createMockComplementRaceState(): ComplementRaceState {
     bestStreak: 8,
     correctAnswers: 18,
     totalQuestions: 21,
-    currentInput: "",
-  };
+    currentInput: '',
+  }
 }
 
 /**
@@ -177,80 +175,78 @@ export function createMockComplementRaceState(): ComplementRaceState {
  * Shows mid-game with some cards matched and one card flipped
  */
 export function createMockMatchingState(): MatchingState {
-  const baseState = matchingGameValidator.getInitialState(
-    DEFAULT_MATCHING_CONFIG,
-  );
+  const baseState = matchingGameValidator.getInitialState(DEFAULT_MATCHING_CONFIG)
 
   // Create mock cards showing mid-game progress
   // 2 pairs matched, 1 card currently flipped (looking for its match)
   const mockGameCards = [
     // Matched pair 1
     {
-      id: "c1",
-      type: "number" as const,
+      id: 'c1',
+      type: 'number' as const,
       number: 5,
       matched: true,
-      matchedBy: "demo-player-1",
+      matchedBy: 'demo-player-1',
     },
     {
-      id: "c2",
-      type: "number" as const,
+      id: 'c2',
+      type: 'number' as const,
       number: 5,
       matched: true,
-      matchedBy: "demo-player-1",
+      matchedBy: 'demo-player-1',
     },
     // Matched pair 2
     {
-      id: "c3",
-      type: "number" as const,
+      id: 'c3',
+      type: 'number' as const,
       number: 8,
       matched: true,
-      matchedBy: "demo-player-1",
+      matchedBy: 'demo-player-1',
     },
     {
-      id: "c4",
-      type: "number" as const,
+      id: 'c4',
+      type: 'number' as const,
       number: 8,
       matched: true,
-      matchedBy: "demo-player-1",
+      matchedBy: 'demo-player-1',
     },
     // Unmatched cards - player is looking for matches
-    { id: "c5", type: "number" as const, number: 3, matched: false },
-    { id: "c6", type: "number" as const, number: 7, matched: false },
-    { id: "c7", type: "number" as const, number: 3, matched: false },
-    { id: "c8", type: "number" as const, number: 7, matched: false },
-    { id: "c9", type: "number" as const, number: 2, matched: false },
-    { id: "c10", type: "number" as const, number: 2, matched: false },
-    { id: "c11", type: "number" as const, number: 9, matched: false },
-    { id: "c12", type: "number" as const, number: 9, matched: false },
-  ];
+    { id: 'c5', type: 'number' as const, number: 3, matched: false },
+    { id: 'c6', type: 'number' as const, number: 7, matched: false },
+    { id: 'c7', type: 'number' as const, number: 3, matched: false },
+    { id: 'c8', type: 'number' as const, number: 7, matched: false },
+    { id: 'c9', type: 'number' as const, number: 2, matched: false },
+    { id: 'c10', type: 'number' as const, number: 2, matched: false },
+    { id: 'c11', type: 'number' as const, number: 9, matched: false },
+    { id: 'c12', type: 'number' as const, number: 9, matched: false },
+  ]
 
   // One card is currently flipped
-  const flippedCard = mockGameCards[4]; // The first "3"
+  const flippedCard = mockGameCards[4] // The first "3"
 
   // Override to playing phase
   return {
     ...baseState,
-    gamePhase: "playing",
-    activePlayers: ["demo-player-1"],
+    gamePhase: 'playing',
+    activePlayers: ['demo-player-1'],
     playerMetadata: {
-      "demo-player-1": {
-        id: "demo-player-1",
-        name: "Demo Player",
-        emoji: "🎮",
-        userId: "demo-viewer-id",
-        color: "#3b82f6",
+      'demo-player-1': {
+        id: 'demo-player-1',
+        name: 'Demo Player',
+        emoji: '🎮',
+        userId: 'demo-viewer-id',
+        color: '#3b82f6',
       },
     },
-    currentPlayer: "demo-player-1",
+    currentPlayer: 'demo-player-1',
     gameCards: mockGameCards,
     cards: mockGameCards,
     flippedCards: [flippedCard],
     scores: {
-      "demo-player-1": 2,
+      'demo-player-1': 2,
     },
     consecutiveMatches: {
-      "demo-player-1": 2,
+      'demo-player-1': 2,
     },
     matchedPairs: 2,
     totalPairs: 6,
@@ -259,7 +255,7 @@ export function createMockMatchingState(): MatchingState {
     currentMoveStartTime: Date.now() - 500,
     isProcessingMove: false,
     showMismatchFeedback: false,
-  };
+  }
 }
 
 /**
@@ -267,9 +263,7 @@ export function createMockMatchingState(): MatchingState {
  * Shows mid-game with some numbers already found
  */
 export function createMockMemoryQuizState(): MemoryQuizState {
-  const baseState = memoryQuizGameValidator.getInitialState(
-    DEFAULT_MEMORY_QUIZ_CONFIG,
-  );
+  const baseState = memoryQuizGameValidator.getInitialState(DEFAULT_MEMORY_QUIZ_CONFIG)
 
   // Create mock quiz cards
   const mockQuizCards = [
@@ -278,43 +272,43 @@ export function createMockMemoryQuizState(): MemoryQuizState {
     { number: 789, svgComponent: null, element: null },
     { number: 234, svgComponent: null, element: null },
     { number: 567, svgComponent: null, element: null },
-  ];
+  ]
 
   // Override to input phase with some numbers found
   return {
     ...baseState,
-    gamePhase: "input",
+    gamePhase: 'input',
     quizCards: mockQuizCards,
     correctAnswers: mockQuizCards.map((c) => c.number),
     cards: mockQuizCards,
     currentCardIndex: mockQuizCards.length, // Display phase complete
     foundNumbers: [123, 456], // 2 out of 5 found
     guessesRemaining: 3,
-    currentInput: "",
+    currentInput: '',
     incorrectGuesses: 1,
-    activePlayers: ["demo-player-1"],
+    activePlayers: ['demo-player-1'],
     playerMetadata: {
-      "demo-player-1": {
-        id: "demo-player-1",
-        name: "Demo Player",
-        emoji: "🎮",
-        userId: "demo-viewer-id",
-        color: "#3b82f6",
+      'demo-player-1': {
+        id: 'demo-player-1',
+        name: 'Demo Player',
+        emoji: '🎮',
+        userId: 'demo-viewer-id',
+        color: '#3b82f6',
       },
     },
     playerScores: {
-      "demo-viewer-id": {
+      'demo-viewer-id': {
         correct: 2,
         incorrect: 1,
       },
     },
     numberFoundBy: {
-      123: "demo-viewer-id",
-      456: "demo-viewer-id",
+      123: 'demo-viewer-id',
+      456: 'demo-viewer-id',
     },
-    playMode: "cooperative",
+    playMode: 'cooperative',
     selectedCount: 5,
-    selectedDifficulty: "medium",
+    selectedDifficulty: 'medium',
     displayTime: 3000,
     hasPhysicalKeyboard: true,
     testingMode: false,
@@ -322,7 +316,7 @@ export function createMockMemoryQuizState(): MemoryQuizState {
     prefixAcceptanceTimeout: null,
     finishButtonsBound: false,
     wrongGuessAnimations: [],
-  };
+  }
 }
 
 /**
@@ -330,42 +324,40 @@ export function createMockMemoryQuizState(): MemoryQuizState {
  * Shows mid-game with some cards placed in sorting area
  */
 export function createMockCardSortingState(): CardSortingState {
-  const baseState = cardSortingValidator.getInitialState(
-    DEFAULT_CARD_SORTING_CONFIG,
-  );
+  const baseState = cardSortingValidator.getInitialState(DEFAULT_CARD_SORTING_CONFIG)
 
   // Create mock cards with AbacusReact SVG placeholders
   const mockCards = [
-    { id: "c1", number: 23, svgContent: "<svg>23</svg>" },
-    { id: "c2", number: 45, svgContent: "<svg>45</svg>" },
-    { id: "c3", number: 12, svgContent: "<svg>12</svg>" },
-    { id: "c4", number: 78, svgContent: "<svg>78</svg>" },
-    { id: "c5", number: 56, svgContent: "<svg>56</svg>" },
-  ];
+    { id: 'c1', number: 23, svgContent: '<svg>23</svg>' },
+    { id: 'c2', number: 45, svgContent: '<svg>45</svg>' },
+    { id: 'c3', number: 12, svgContent: '<svg>12</svg>' },
+    { id: 'c4', number: 78, svgContent: '<svg>78</svg>' },
+    { id: 'c5', number: 56, svgContent: '<svg>56</svg>' },
+  ]
 
   // Correct order (sorted)
-  const correctOrder = [...mockCards].sort((a, b) => a.number - b.number);
+  const correctOrder = [...mockCards].sort((a, b) => a.number - b.number)
 
   // Show 3 cards placed, 2 still available
   return {
     ...baseState,
-    gamePhase: "playing",
-    playerId: "demo-player-1",
+    gamePhase: 'playing',
+    playerId: 'demo-player-1',
     playerMetadata: {
-      id: "demo-player-1",
-      name: "Demo Player",
-      emoji: "🎮",
-      userId: "demo-viewer-id",
+      id: 'demo-player-1',
+      name: 'Demo Player',
+      emoji: '🎮',
+      userId: 'demo-viewer-id',
     },
-    activePlayers: ["demo-player-1"],
+    activePlayers: ['demo-player-1'],
     allPlayerMetadata: new Map([
       [
-        "demo-player-1",
+        'demo-player-1',
         {
-          id: "demo-player-1",
-          name: "Demo Player",
-          emoji: "🎮",
-          userId: "demo-viewer-id",
+          id: 'demo-player-1',
+          name: 'Demo Player',
+          emoji: '🎮',
+          userId: 'demo-viewer-id',
         },
       ],
     ]),
@@ -376,7 +368,7 @@ export function createMockCardSortingState(): CardSortingState {
     placedCards: [mockCards[2], mockCards[0], mockCards[1], null, null], // 12, 23, 45, empty, empty
     cardPositions: [],
     cursorPositions: new Map(),
-  };
+  }
 }
 
 /**
@@ -384,44 +376,42 @@ export function createMockCardSortingState(): CardSortingState {
  * Shows mid-game with some pieces captured
  */
 export function createMockRithmomachiaState(): RithmomachiaState {
-  const baseState = rithmomachiaValidator.getInitialState(
-    DEFAULT_RITHMOMACHIA_CONFIG,
-  );
+  const baseState = rithmomachiaValidator.getInitialState(DEFAULT_RITHMOMACHIA_CONFIG)
 
   // Start the game (transitions to playing phase)
   return {
     ...baseState,
-    gamePhase: "playing",
-    turn: "W", // White's turn
+    gamePhase: 'playing',
+    turn: 'W', // White's turn
     // Captured pieces show some progress
     capturedPieces: {
       W: [
         // White has captured 2 black pieces
         {
-          id: "B_C_01",
-          color: "B",
-          type: "C",
+          id: 'B_C_01',
+          color: 'B',
+          type: 'C',
           value: 4,
-          square: "CAPTURED",
+          square: 'CAPTURED',
           captured: true,
         },
         {
-          id: "B_T_01",
-          color: "B",
-          type: "T",
+          id: 'B_T_01',
+          color: 'B',
+          type: 'T',
           value: 9,
-          square: "CAPTURED",
+          square: 'CAPTURED',
           captured: true,
         },
       ],
       B: [
         // Black has captured 1 white piece
         {
-          id: "W_C_02",
-          color: "W",
-          type: "C",
+          id: 'W_C_02',
+          color: 'W',
+          type: 'C',
           value: 6,
-          square: "CAPTURED",
+          square: 'CAPTURED',
           captured: true,
         },
       ],
@@ -430,32 +420,32 @@ export function createMockRithmomachiaState(): RithmomachiaState {
       // Add a few moves to show activity
       {
         ply: 1,
-        color: "W",
-        from: "C2",
-        to: "C4",
-        pieceId: "W_C_01",
+        color: 'W',
+        from: 'C2',
+        to: 'C4',
+        pieceId: 'W_C_01',
         capture: null,
         ambush: null,
-        fenLikeHash: "mock-hash-1",
+        fenLikeHash: 'mock-hash-1',
         noProgressCount: 1,
-        resultAfter: "ONGOING",
+        resultAfter: 'ONGOING',
       },
       {
         ply: 2,
-        color: "B",
-        from: "N7",
-        to: "N5",
-        pieceId: "B_T_02",
+        color: 'B',
+        from: 'N7',
+        to: 'N5',
+        pieceId: 'B_T_02',
         capture: null,
         ambush: null,
-        fenLikeHash: "mock-hash-2",
+        fenLikeHash: 'mock-hash-2',
         noProgressCount: 2,
-        resultAfter: "ONGOING",
+        resultAfter: 'ONGOING',
       },
     ],
     noProgressCount: 2,
-    stateHashes: ["initial-hash", "mock-hash-1", "mock-hash-2"],
-  };
+    stateHashes: ['initial-hash', 'mock-hash-1', 'mock-hash-2'],
+  }
 }
 
 /**
@@ -463,30 +453,30 @@ export function createMockRithmomachiaState(): RithmomachiaState {
  */
 export function getMockGameState(gameName: string): any {
   switch (gameName) {
-    case "complement-race":
-      return createMockComplementRaceState();
-    case "matching":
-      return createMockMatchingState();
-    case "memory-quiz":
-      return createMockMemoryQuizState();
-    case "card-sorting":
-      return createMockCardSortingState();
-    case "rithmomachia":
-      return createMockRithmomachiaState();
+    case 'complement-race':
+      return createMockComplementRaceState()
+    case 'matching':
+      return createMockMatchingState()
+    case 'memory-quiz':
+      return createMockMemoryQuizState()
+    case 'card-sorting':
+      return createMockCardSortingState()
+    case 'rithmomachia':
+      return createMockRithmomachiaState()
     // For games we haven't implemented yet, return a basic "playing" state
     default:
       return {
-        gamePhase: "playing",
-        activePlayers: ["demo-player-1"],
+        gamePhase: 'playing',
+        activePlayers: ['demo-player-1'],
         playerMetadata: {
-          "demo-player-1": {
-            id: "demo-player-1",
-            name: "Demo Player",
-            emoji: "🎮",
-            color: "#3b82f6",
-            userId: "demo-viewer-id",
+          'demo-player-1': {
+            id: 'demo-player-1',
+            name: 'Demo Player',
+            emoji: '🎮',
+            color: '#3b82f6',
+            userId: 'demo-viewer-id',
           },
         },
-      };
+      }
   }
 }
diff --git a/apps/web/src/components/MyAbacus.tsx b/apps/web/src/components/MyAbacus.tsx
index de025aa2..4ab8fd9b 100644
--- a/apps/web/src/components/MyAbacus.tsx
+++ b/apps/web/src/components/MyAbacus.tsx
@@ -1,71 +1,67 @@
-"use client";
+'use client'
 
-import { useContext, useEffect, useState } from "react";
-import { usePathname } from "next/navigation";
-import {
-  AbacusReact,
-  useAbacusConfig,
-  ABACUS_THEMES,
-} from "@soroban/abacus-react";
-import { css } from "../../styled-system/css";
-import { useMyAbacus } from "@/contexts/MyAbacusContext";
-import { HomeHeroContext } from "@/contexts/HomeHeroContext";
-import { useTheme } from "@/contexts/ThemeContext";
+import { useContext, useEffect, useState } from 'react'
+import { usePathname } from 'next/navigation'
+import { AbacusReact, useAbacusConfig, ABACUS_THEMES } from '@soroban/abacus-react'
+import { css } from '../../styled-system/css'
+import { useMyAbacus } from '@/contexts/MyAbacusContext'
+import { HomeHeroContext } from '@/contexts/HomeHeroContext'
+import { useTheme } from '@/contexts/ThemeContext'
 
 export function MyAbacus() {
-  const { isOpen, close, toggle } = useMyAbacus();
-  const appConfig = useAbacusConfig();
-  const pathname = usePathname();
-  const { resolvedTheme } = useTheme();
-  const isDark = resolvedTheme === "dark";
+  const { isOpen, close, toggle } = useMyAbacus()
+  const appConfig = useAbacusConfig()
+  const pathname = usePathname()
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === 'dark'
 
   // Sync with hero context if on home page
-  const homeHeroContext = useContext(HomeHeroContext);
-  const [localAbacusValue, setLocalAbacusValue] = useState(1234);
-  const abacusValue = homeHeroContext?.abacusValue ?? localAbacusValue;
-  const setAbacusValue = homeHeroContext?.setAbacusValue ?? setLocalAbacusValue;
+  const homeHeroContext = useContext(HomeHeroContext)
+  const [localAbacusValue, setLocalAbacusValue] = useState(1234)
+  const abacusValue = homeHeroContext?.abacusValue ?? localAbacusValue
+  const setAbacusValue = homeHeroContext?.setAbacusValue ?? setLocalAbacusValue
 
   // Determine display mode - only hero mode on actual home page
   const isOnHomePage =
-    pathname === "/" ||
-    pathname === "/en" ||
-    pathname === "/de" ||
-    pathname === "/ja" ||
-    pathname === "/hi" ||
-    pathname === "/es" ||
-    pathname === "/la";
-  const isHeroVisible = homeHeroContext?.isHeroVisible ?? false;
-  const isHeroMode = isOnHomePage && isHeroVisible && !isOpen;
+    pathname === '/' ||
+    pathname === '/en' ||
+    pathname === '/de' ||
+    pathname === '/ja' ||
+    pathname === '/hi' ||
+    pathname === '/es' ||
+    pathname === '/la'
+  const isHeroVisible = homeHeroContext?.isHeroVisible ?? false
+  const isHeroMode = isOnHomePage && isHeroVisible && !isOpen
 
   // Close on Escape key
   useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen) return
 
     const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        close();
+      if (e.key === 'Escape') {
+        close()
       }
-    };
+    }
 
-    window.addEventListener("keydown", handleEscape);
-    return () => window.removeEventListener("keydown", handleEscape);
-  }, [isOpen, close]);
+    window.addEventListener('keydown', handleEscape)
+    return () => window.removeEventListener('keydown', handleEscape)
+  }, [isOpen, close])
 
   // Prevent body scroll when open
   useEffect(() => {
     if (isOpen) {
-      document.body.style.overflow = "hidden";
+      document.body.style.overflow = 'hidden'
     } else {
-      document.body.style.overflow = "";
+      document.body.style.overflow = ''
     }
     return () => {
-      document.body.style.overflow = "";
-    };
-  }, [isOpen]);
+      document.body.style.overflow = ''
+    }
+  }, [isOpen])
 
   // Use theme presets from abacus-react instead of manual definitions
-  const structuralStyles = ABACUS_THEMES.light;
-  const trophyStyles = ABACUS_THEMES.trophy;
+  const structuralStyles = ABACUS_THEMES.light
+  const trophyStyles = ABACUS_THEMES.trophy
 
   return (
     <>
@@ -74,15 +70,15 @@ export function MyAbacus() {
         <div
           data-component="my-abacus-backdrop"
           style={{
-            WebkitBackdropFilter: "blur(12px)",
+            WebkitBackdropFilter: 'blur(12px)',
           }}
           className={css({
-            position: "fixed",
+            position: 'fixed',
             inset: 0,
-            bg: "rgba(0, 0, 0, 0.8)",
-            backdropFilter: "blur(12px)",
+            bg: 'rgba(0, 0, 0, 0.8)',
+            backdropFilter: 'blur(12px)',
             zIndex: 101,
-            animation: "backdropFadeIn 0.4s ease-out",
+            animation: 'backdropFadeIn 0.4s ease-out',
           })}
           onClick={close}
         />
@@ -94,29 +90,29 @@ export function MyAbacus() {
           data-action="close-my-abacus"
           onClick={close}
           className={css({
-            position: "fixed",
-            top: { base: "4", md: "8" },
-            right: { base: "4", md: "8" },
-            w: "12",
-            h: "12",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            bg: "rgba(255, 255, 255, 0.1)",
-            backdropFilter: "blur(8px)",
-            border: "2px solid rgba(255, 255, 255, 0.2)",
-            borderRadius: "full",
-            color: "white",
-            fontSize: "2xl",
-            fontWeight: "bold",
-            cursor: "pointer",
-            transition: "all 0.2s",
+            position: 'fixed',
+            top: { base: '4', md: '8' },
+            right: { base: '4', md: '8' },
+            w: '12',
+            h: '12',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            bg: 'rgba(255, 255, 255, 0.1)',
+            backdropFilter: 'blur(8px)',
+            border: '2px solid rgba(255, 255, 255, 0.2)',
+            borderRadius: 'full',
+            color: 'white',
+            fontSize: '2xl',
+            fontWeight: 'bold',
+            cursor: 'pointer',
+            transition: 'all 0.2s',
             zIndex: 103,
-            animation: "fadeIn 0.3s ease-out 0.2s both",
+            animation: 'fadeIn 0.3s ease-out 0.2s both',
             _hover: {
-              bg: "rgba(255, 255, 255, 0.2)",
-              borderColor: "rgba(255, 255, 255, 0.4)",
-              transform: "scale(1.1)",
+              bg: 'rgba(255, 255, 255, 0.2)',
+              borderColor: 'rgba(255, 255, 255, 0.4)',
+              transform: 'scale(1.1)',
             },
           })}
         >
@@ -127,73 +123,71 @@ export function MyAbacus() {
       {/* Single abacus element that morphs between states */}
       <div
         data-component="my-abacus"
-        data-mode={isOpen ? "open" : isHeroMode ? "hero" : "button"}
+        data-mode={isOpen ? 'open' : isHeroMode ? 'hero' : 'button'}
         onClick={isOpen || isHeroMode ? undefined : toggle}
         className={css({
-          position: isHeroMode ? "absolute" : "fixed",
+          position: isHeroMode ? 'absolute' : 'fixed',
           zIndex: 102,
-          cursor: isOpen || isHeroMode ? "default" : "pointer",
-          transition: "all 0.6s cubic-bezier(0.4, 0, 0.2, 1)",
+          cursor: isOpen || isHeroMode ? 'default' : 'pointer',
+          transition: 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
           // Three modes: hero (absolute - scrolls with document), button (fixed), open (fixed)
           ...(isOpen
             ? {
                 // Open mode: fixed to center of viewport
-                top: "50%",
-                left: "50%",
-                transform: "translate(-50%, -50%)",
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
               }
             : isHeroMode
               ? {
                   // Hero mode: absolute positioning - scrolls naturally with document
-                  top: "60vh",
-                  left: "50%",
-                  transform: "translate(-50%, -50%)",
+                  top: '60vh',
+                  left: '50%',
+                  transform: 'translate(-50%, -50%)',
                 }
               : {
                   // Button mode: fixed to bottom-right corner
-                  bottom: { base: "4", md: "6" },
-                  right: { base: "4", md: "6" },
-                  transform: "translate(0, 0)",
+                  bottom: { base: '4', md: '6' },
+                  right: { base: '4', md: '6' },
+                  transform: 'translate(0, 0)',
                 }),
         })}
       >
         {/* Container that changes between hero, button, and open states */}
         <div
           className={css({
-            transition: "all 0.6s cubic-bezier(0.4, 0, 0.2, 1)",
+            transition: 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
             ...(isOpen || isHeroMode
               ? {
                   // Open/Hero state: no background, just the abacus
-                  bg: "transparent",
-                  border: "none",
-                  boxShadow: "none",
-                  borderRadius: "0",
+                  bg: 'transparent',
+                  border: 'none',
+                  boxShadow: 'none',
+                  borderRadius: '0',
                 }
               : {
                   // Button state: button styling
-                  bg: isDark
-                    ? "rgba(0, 0, 0, 0.7)"
-                    : "rgba(255, 255, 255, 0.9)",
-                  backdropFilter: "blur(8px)",
+                  bg: isDark ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.9)',
+                  backdropFilter: 'blur(8px)',
                   border: isDark
-                    ? "3px solid rgba(251, 191, 36, 0.5)"
-                    : "3px solid rgba(251, 191, 36, 0.6)",
+                    ? '3px solid rgba(251, 191, 36, 0.5)'
+                    : '3px solid rgba(251, 191, 36, 0.6)',
                   boxShadow: isDark
-                    ? "0 8px 32px rgba(251, 191, 36, 0.4)"
-                    : "0 8px 32px rgba(251, 191, 36, 0.5)",
-                  borderRadius: "xl",
-                  w: { base: "80px", md: "100px" },
-                  h: { base: "80px", md: "100px" },
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  animation: "pulse 2s ease-in-out infinite",
+                    ? '0 8px 32px rgba(251, 191, 36, 0.4)'
+                    : '0 8px 32px rgba(251, 191, 36, 0.5)',
+                  borderRadius: 'xl',
+                  w: { base: '80px', md: '100px' },
+                  h: { base: '80px', md: '100px' },
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  animation: 'pulse 2s ease-in-out infinite',
                   _hover: {
-                    transform: "scale(1.1)",
+                    transform: 'scale(1.1)',
                     boxShadow: isDark
-                      ? "0 12px 48px rgba(251, 191, 36, 0.6)"
-                      : "0 12px 48px rgba(251, 191, 36, 0.7)",
-                    borderColor: "rgba(251, 191, 36, 0.8)",
+                      ? '0 12px 48px rgba(251, 191, 36, 0.6)'
+                      : '0 12px 48px rgba(251, 191, 36, 0.7)',
+                    borderColor: 'rgba(251, 191, 36, 0.8)',
                   },
                 }),
           })}
@@ -203,22 +197,21 @@ export function MyAbacus() {
             data-element="abacus-display"
             className={css({
               transform: isOpen
-                ? { base: "scale(2.5)", md: "scale(3.5)", lg: "scale(4.5)" }
+                ? { base: 'scale(2.5)', md: 'scale(3.5)', lg: 'scale(4.5)' }
                 : isHeroMode
-                  ? { base: "scale(3)", md: "scale(3.5)", lg: "scale(4.25)" }
-                  : "scale(0.35)",
-              transformOrigin: "center center",
-              transition:
-                "transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s ease",
+                  ? { base: 'scale(3)', md: 'scale(3.5)', lg: 'scale(4.25)' }
+                  : 'scale(0.35)',
+              transformOrigin: 'center center',
+              transition: 'transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s ease',
               filter:
                 isOpen || isHeroMode
-                  ? "drop-shadow(0 10px 40px rgba(251, 191, 36, 0.3))"
-                  : "drop-shadow(0 4px 12px rgba(251, 191, 36, 0.2))",
-              pointerEvents: isOpen || isHeroMode ? "auto" : "none",
+                  ? 'drop-shadow(0 10px 40px rgba(251, 191, 36, 0.3))'
+                  : 'drop-shadow(0 4px 12px rgba(251, 191, 36, 0.2))',
+              pointerEvents: isOpen || isHeroMode ? 'auto' : 'none',
             })}
           >
             <AbacusReact
-              key={isHeroMode ? "hero" : isOpen ? "open" : "closed"}
+              key={isHeroMode ? 'hero' : isOpen ? 'open' : 'closed'}
               value={abacusValue}
               columns={isHeroMode ? 4 : 5}
               beadShape={appConfig.beadShape}
@@ -228,13 +221,13 @@ export function MyAbacus() {
               customStyles={isHeroMode ? structuralStyles : trophyStyles}
               onValueChange={setAbacusValue}
               // 3D Enhancement - realistic mode for hero and open states
-              enhanced3d={isOpen || isHeroMode ? "realistic" : undefined}
+              enhanced3d={isOpen || isHeroMode ? 'realistic' : undefined}
               material3d={
                 isOpen || isHeroMode
                   ? {
-                      heavenBeads: "glossy",
-                      earthBeads: "satin",
-                      lighting: "dramatic",
+                      heavenBeads: 'glossy',
+                      earthBeads: 'satin',
+                      lighting: 'dramatic',
                       woodGrain: true,
                     }
                   : undefined
@@ -264,5 +257,5 @@ export function MyAbacus() {
         }}
       />
     </>
-  );
+  )
 }
diff --git a/apps/web/src/components/PageWithNav.tsx b/apps/web/src/components/PageWithNav.tsx
index e6a8bcd7..b3bafe66 100644
--- a/apps/web/src/components/PageWithNav.tsx
+++ b/apps/web/src/components/PageWithNav.tsx
@@ -1,40 +1,40 @@
-"use client";
+'use client'
 
-import React, { useContext } from "react";
-import { useGameMode } from "../contexts/GameModeContext";
-import { useRoomData } from "../hooks/useRoomData";
-import { useViewerId } from "../hooks/useViewerId";
-import { AppNavBar } from "./AppNavBar";
-import { GameContextNav, type RosterWarning } from "./nav/GameContextNav";
-import type { PlayerBadge } from "./nav/types";
-import { PlayerConfigDialog } from "./nav/PlayerConfigDialog";
-import { ModerationNotifications } from "./nav/ModerationNotifications";
-import { PreviewModeContext } from "./GamePreview";
+import React, { useContext } from 'react'
+import { useGameMode } from '../contexts/GameModeContext'
+import { useRoomData } from '../hooks/useRoomData'
+import { useViewerId } from '../hooks/useViewerId'
+import { AppNavBar } from './AppNavBar'
+import { GameContextNav, type RosterWarning } from './nav/GameContextNav'
+import type { PlayerBadge } from './nav/types'
+import { PlayerConfigDialog } from './nav/PlayerConfigDialog'
+import { ModerationNotifications } from './nav/ModerationNotifications'
+import { PreviewModeContext } from './GamePreview'
 
 interface PageWithNavProps {
-  navTitle?: string;
-  navEmoji?: string;
-  gameName?: "matching" | "memory-quiz" | "complement-race"; // Internal game name for API
-  emphasizePlayerSelection?: boolean;
-  disableFullscreenSelection?: boolean; // Disable "Select Your Champions" overlay
-  onExitSession?: () => void;
-  onSetup?: () => void;
-  onNewGame?: () => void;
-  children: React.ReactNode;
+  navTitle?: string
+  navEmoji?: string
+  gameName?: 'matching' | 'memory-quiz' | 'complement-race' // Internal game name for API
+  emphasizePlayerSelection?: boolean
+  disableFullscreenSelection?: boolean // Disable "Select Your Champions" overlay
+  onExitSession?: () => void
+  onSetup?: () => void
+  onNewGame?: () => void
+  children: React.ReactNode
   // Game state for turn indicator
-  currentPlayerId?: string;
-  playerScores?: Record<string, number>;
-  playerStreaks?: Record<string, number>;
-  playerBadges?: Record<string, PlayerBadge>;
+  currentPlayerId?: string
+  playerScores?: Record<string, number>
+  playerStreaks?: Record<string, number>
+  playerBadges?: Record<string, PlayerBadge>
   // Game-specific roster warnings
-  rosterWarning?: RosterWarning;
+  rosterWarning?: RosterWarning
   // Side assignments (for 2-player games like Rithmomachia)
-  whitePlayerId?: string | null;
-  blackPlayerId?: string | null;
-  onAssignWhitePlayer?: (playerId: string | null) => void;
-  onAssignBlackPlayer?: (playerId: string | null) => void;
+  whitePlayerId?: string | null
+  blackPlayerId?: string | null
+  onAssignWhitePlayer?: (playerId: string | null) => void
+  onAssignBlackPlayer?: (playerId: string | null) => void
   // Game phase (for showing spectating vs assign)
-  gamePhase?: "setup" | "playing" | "results";
+  gamePhase?: 'setup' | 'playing' | 'results'
 }
 
 export function PageWithNav({
@@ -59,51 +59,47 @@ export function PageWithNav({
   gamePhase,
 }: PageWithNavProps) {
   // In preview mode, render just the children without navigation
-  const previewMode = useContext(PreviewModeContext);
+  const previewMode = useContext(PreviewModeContext)
   if (previewMode?.isPreview) {
-    return <>{children}</>;
+    return <>{children}</>
   }
 
-  const { players, activePlayers, setActive, activePlayerCount } =
-    useGameMode();
-  const { roomData, isInRoom, moderationEvent, clearModerationEvent } =
-    useRoomData();
-  const { data: viewerId } = useViewerId();
-  const [mounted, setMounted] = React.useState(false);
-  const [configurePlayerId, setConfigurePlayerId] = React.useState<
-    string | null
-  >(null);
+  const { players, activePlayers, setActive, activePlayerCount } = useGameMode()
+  const { roomData, isInRoom, moderationEvent, clearModerationEvent } = useRoomData()
+  const { data: viewerId } = useViewerId()
+  const [mounted, setMounted] = React.useState(false)
+  const [configurePlayerId, setConfigurePlayerId] = React.useState<string | null>(null)
 
   // Lift AddPlayerButton popover state here to survive GameContextNav remounts
-  const [showPopover, setShowPopover] = React.useState(false);
-  const [activeTab, setActiveTab] = React.useState<"add" | "invite">("add");
+  const [showPopover, setShowPopover] = React.useState(false)
+  const [activeTab, setActiveTab] = React.useState<'add' | 'invite'>('add')
 
   // Delay mounting animation slightly for smooth transition
   React.useEffect(() => {
-    const timer = setTimeout(() => setMounted(true), 50);
-    return () => clearTimeout(timer);
-  }, []);
+    const timer = setTimeout(() => setMounted(true), 50)
+    return () => clearTimeout(timer)
+  }, [])
 
   const handleRemovePlayer = React.useCallback(
     (playerId: string) => {
-      setActive(playerId, false);
+      setActive(playerId, false)
     },
-    [setActive],
-  );
+    [setActive]
+  )
 
   const handleAddPlayer = React.useCallback(
     (playerId: string) => {
-      setActive(playerId, true);
+      setActive(playerId, true)
     },
-    [setActive],
-  );
+    [setActive]
+  )
 
   const handleConfigurePlayer = React.useCallback(
     (playerId: string) => {
-      setConfigurePlayerId(playerId);
+      setConfigurePlayerId(playerId)
     },
-    [setConfigurePlayerId],
-  );
+    [setConfigurePlayerId]
+  )
 
   // Get active and inactive players as arrays
   // Only show LOCAL players in the active/inactive lists (remote players shown separately in networkPlayers)
@@ -112,36 +108,31 @@ export function PageWithNav({
     () =>
       Array.from(activePlayers)
         .map((id) => players.get(id))
-        .filter(
-          (p): p is NonNullable<typeof p> =>
-            p !== undefined && p.isLocal !== false,
-        ),
-    [activePlayers, players],
-  );
+        .filter((p): p is NonNullable<typeof p> => p !== undefined && p.isLocal !== false),
+    [activePlayers, players]
+  )
 
   const inactivePlayerList = React.useMemo(
     () =>
-      Array.from(players.values()).filter(
-        (p) => !activePlayers.has(p.id) && p.isLocal !== false,
-      ),
-    [players, activePlayers],
-  );
+      Array.from(players.values()).filter((p) => !activePlayers.has(p.id) && p.isLocal !== false),
+    [players, activePlayers]
+  )
 
   // Compute game mode from active player count
   const gameMode =
     activePlayerCount === 0
-      ? "none"
+      ? 'none'
       : activePlayerCount === 1
-        ? "single"
+        ? 'single'
         : activePlayerCount === 2
-          ? "battle"
+          ? 'battle'
           : activePlayerCount >= 3
-            ? "tournament"
-            : "none";
+            ? 'tournament'
+            : 'none'
 
-  const shouldEmphasize = emphasizePlayerSelection && mounted;
+  const shouldEmphasize = emphasizePlayerSelection && mounted
   const showFullscreenSelection =
-    !disableFullscreenSelection && shouldEmphasize && activePlayerCount === 0;
+    !disableFullscreenSelection && shouldEmphasize && activePlayerCount === 0
 
   // Compute arcade session info for display
   // Memoized to prevent unnecessary re-renders
@@ -156,20 +147,20 @@ export function PageWithNav({
             joinCode: roomData.code,
           }
         : undefined,
-    [isInRoom, roomData],
-  );
+    [isInRoom, roomData]
+  )
 
   // Compute network players (other players in the room, excluding current user)
   // Memoized to prevent unnecessary re-renders
   const networkPlayers = React.useMemo(() => {
     if (!isInRoom || !roomData?.members || !roomData?.memberPlayers) {
-      return [];
+      return []
     }
 
     return roomData.members
       .filter((member) => member.userId !== viewerId)
       .flatMap((member) => {
-        const memberPlayerList = roomData.memberPlayers[member.userId] || [];
+        const memberPlayerList = roomData.memberPlayers[member.userId] || []
         return memberPlayerList.map((player) => ({
           id: player.id,
           emoji: player.emoji,
@@ -178,9 +169,9 @@ export function PageWithNav({
           memberName: member.displayName,
           userId: member.userId, // Add userId for moderation
           isOnline: member.isOnline,
-        }));
-      });
-  }, [isInRoom, roomData, viewerId]);
+        }))
+      })
+  }, [isInRoom, roomData, viewerId])
 
   // Create nav content if title is provided
   // Pass lifted state to preserve popover state across remounts
@@ -217,7 +208,7 @@ export function PageWithNav({
       onAssignBlackPlayer={onAssignBlackPlayer}
       gamePhase={gamePhase}
     />
-  ) : null;
+  ) : null
 
   return (
     <>
@@ -229,10 +220,7 @@ export function PageWithNav({
           onClose={() => setConfigurePlayerId(null)}
         />
       )}
-      <ModerationNotifications
-        moderationEvent={moderationEvent}
-        onClose={clearModerationEvent}
-      />
+      <ModerationNotifications moderationEvent={moderationEvent} onClose={clearModerationEvent} />
     </>
-  );
+  )
 }
diff --git a/apps/web/src/components/StandardGameLayout.tsx b/apps/web/src/components/StandardGameLayout.tsx
index e0b872c2..3fe7c8c6 100644
--- a/apps/web/src/components/StandardGameLayout.tsx
+++ b/apps/web/src/components/StandardGameLayout.tsx
@@ -1,11 +1,11 @@
-"use client";
+'use client'
 
-import { useEffect, useState, type ReactNode } from "react";
-import { css } from "../../styled-system/css";
+import { useEffect, useState, type ReactNode } from 'react'
+import { css } from '../../styled-system/css'
 
 interface StandardGameLayoutProps {
-  children: ReactNode;
-  className?: string;
+  children: ReactNode
+  className?: string
 }
 
 /**
@@ -16,36 +16,33 @@ interface StandardGameLayoutProps {
  * 4. Consistent experience across all games
  * 5. Dynamically calculates nav height for proper spacing
  */
-export function StandardGameLayout({
-  children,
-  className,
-}: StandardGameLayoutProps) {
-  const [navHeight, setNavHeight] = useState(80); // Default fallback
+export function StandardGameLayout({ children, className }: StandardGameLayoutProps) {
+  const [navHeight, setNavHeight] = useState(80) // Default fallback
 
   useEffect(() => {
     // Measure the actual nav height from the fixed header
     const measureNavHeight = () => {
-      const header = document.querySelector("header");
+      const header = document.querySelector('header')
       if (header) {
-        const rect = header.getBoundingClientRect();
+        const rect = header.getBoundingClientRect()
         // Add extra spacing for safety (nav top position + nav height + margin)
-        const calculatedHeight = rect.top + rect.height + 20;
-        setNavHeight(calculatedHeight);
+        const calculatedHeight = rect.top + rect.height + 20
+        setNavHeight(calculatedHeight)
       }
-    };
+    }
 
     // Measure on mount and when window resizes
-    measureNavHeight();
-    window.addEventListener("resize", measureNavHeight);
+    measureNavHeight()
+    window.addEventListener('resize', measureNavHeight)
 
     // Also measure after a short delay to catch any late-rendering nav elements
-    const timer = setTimeout(measureNavHeight, 100);
+    const timer = setTimeout(measureNavHeight, 100)
 
     return () => {
-      window.removeEventListener("resize", measureNavHeight);
-      clearTimeout(timer);
-    };
-  }, []);
+      window.removeEventListener('resize', measureNavHeight)
+      clearTimeout(timer)
+    }
+  }, [])
 
   return (
     <div
@@ -53,24 +50,24 @@ export function StandardGameLayout({
       data-nav-height={navHeight}
       className={`${css({
         // Exact viewport sizing - no scrolling ever
-        height: "100vh",
-        width: "100vw",
-        overflow: "hidden",
+        height: '100vh',
+        width: '100vw',
+        overflow: 'hidden',
 
-        paddingRight: "4px", // Ensure nav doesn't overlap content on right side
-        paddingBottom: "4px",
-        paddingLeft: "4px",
+        paddingRight: '4px', // Ensure nav doesn't overlap content on right side
+        paddingBottom: '4px',
+        paddingLeft: '4px',
 
         // Box sizing to include padding in dimensions
-        boxSizing: "border-box",
+        boxSizing: 'border-box',
 
         // Flex container for game content
-        display: "flex",
-        flexDirection: "column",
+        display: 'flex',
+        flexDirection: 'column',
 
         // Transparent background - themes will be applied at nav level
-        background: "transparent",
-      })} ${className || ""}`}
+        background: 'transparent',
+      })} ${className || ''}`}
       style={{
         // Dynamic padding based on measured nav height
         paddingTop: `${navHeight}px`,
@@ -78,5 +75,5 @@ export function StandardGameLayout({
     >
       {children}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/StyleControls.tsx b/apps/web/src/components/StyleControls.tsx
index 3e16c26d..6c1e8bfc 100644
--- a/apps/web/src/components/StyleControls.tsx
+++ b/apps/web/src/components/StyleControls.tsx
@@ -1,63 +1,60 @@
-"use client";
+'use client'
 
-import * as Label from "@radix-ui/react-label";
-import * as RadioGroup from "@radix-ui/react-radio-group";
-import * as Switch from "@radix-ui/react-switch";
-import { useAbacusDisplay } from "@soroban/abacus-react";
-import type { FormApi } from "@tanstack/react-form";
-import { useEffect } from "react";
-import type { FlashcardFormState } from "@/app/create/page";
-import { css } from "../../styled-system/css";
-import { grid, hstack, stack } from "../../styled-system/patterns";
+import * as Label from '@radix-ui/react-label'
+import * as RadioGroup from '@radix-ui/react-radio-group'
+import * as Switch from '@radix-ui/react-switch'
+import { useAbacusDisplay } from '@soroban/abacus-react'
+import type { FormApi } from '@tanstack/react-form'
+import { useEffect } from 'react'
+import type { FlashcardFormState } from '@/app/create/page'
+import { css } from '../../styled-system/css'
+import { grid, hstack, stack } from '../../styled-system/patterns'
 
 interface StyleControlsProps {
-  form: FormApi<FlashcardFormState>;
+  form: FormApi<FlashcardFormState>
 }
 
 export function StyleControls({ form }: StyleControlsProps) {
-  const { config, updateConfig } = useAbacusDisplay();
+  const { config, updateConfig } = useAbacusDisplay()
 
   // Sync form values with global context
   useEffect(() => {
-    form.setFieldValue("colorScheme", config.colorScheme);
-    form.setFieldValue("beadShape", config.beadShape);
-    form.setFieldValue("hideInactiveBeads", config.hideInactiveBeads);
-    form.setFieldValue("coloredNumerals", config.coloredNumerals);
-  }, [config, form]);
+    form.setFieldValue('colorScheme', config.colorScheme)
+    form.setFieldValue('beadShape', config.beadShape)
+    form.setFieldValue('hideInactiveBeads', config.hideInactiveBeads)
+    form.setFieldValue('coloredNumerals', config.coloredNumerals)
+  }, [config, form])
   return (
-    <div className={stack({ gap: "4" })}>
-      <FormField
-        label="Color Scheme"
-        description="Choose how colors are applied to beads"
-      >
+    <div className={stack({ gap: '4' })}>
+      <FormField label="Color Scheme" description="Choose how colors are applied to beads">
         <form.Field name="colorScheme">
           {(field) => (
             <RadioGroupField
-              value={field.state.value || "place-value"}
+              value={field.state.value || 'place-value'}
               onValueChange={(value) => {
-                field.handleChange(value as any);
-                updateConfig({ colorScheme: value as any });
+                field.handleChange(value as any)
+                updateConfig({ colorScheme: value as any })
               }}
               options={[
                 {
-                  value: "monochrome",
-                  label: "Monochrome",
-                  desc: "Classic black and white",
+                  value: 'monochrome',
+                  label: 'Monochrome',
+                  desc: 'Classic black and white',
                 },
                 {
-                  value: "place-value",
-                  label: "Place Value",
-                  desc: "Colors by digit position",
+                  value: 'place-value',
+                  label: 'Place Value',
+                  desc: 'Colors by digit position',
                 },
                 {
-                  value: "heaven-earth",
-                  label: "Heaven-Earth",
-                  desc: "Different colors for 5s and 1s",
+                  value: 'heaven-earth',
+                  label: 'Heaven-Earth',
+                  desc: 'Different colors for 5s and 1s',
                 },
                 {
-                  value: "alternating",
-                  label: "Alternating",
-                  desc: "Alternating column colors",
+                  value: 'alternating',
+                  label: 'Alternating',
+                  desc: 'Alternating column colors',
                 },
               ]}
             />
@@ -65,33 +62,30 @@ export function StyleControls({ form }: StyleControlsProps) {
         </form.Field>
       </FormField>
 
-      <FormField
-        label="Bead Shape"
-        description="Choose the visual style of the beads"
-      >
+      <FormField label="Bead Shape" description="Choose the visual style of the beads">
         <form.Field name="beadShape">
           {(field) => (
             <RadioGroupField
-              value={field.state.value || "diamond"}
+              value={field.state.value || 'diamond'}
               onValueChange={(value) => {
-                field.handleChange(value as any);
-                updateConfig({ beadShape: value as any });
+                field.handleChange(value as any)
+                updateConfig({ beadShape: value as any })
               }}
               options={[
                 {
-                  value: "diamond",
-                  label: "💎 Diamond",
-                  desc: "Realistic 3D appearance",
+                  value: 'diamond',
+                  label: '💎 Diamond',
+                  desc: 'Realistic 3D appearance',
                 },
                 {
-                  value: "circle",
-                  label: "⭕ Circle",
-                  desc: "Traditional round beads",
+                  value: 'circle',
+                  label: '⭕ Circle',
+                  desc: 'Traditional round beads',
                 },
                 {
-                  value: "square",
-                  label: "⬜ Square",
-                  desc: "Modern geometric style",
+                  value: 'square',
+                  label: '⬜ Square',
+                  desc: 'Modern geometric style',
                 },
               ]}
             />
@@ -99,35 +93,29 @@ export function StyleControls({ form }: StyleControlsProps) {
         </form.Field>
       </FormField>
 
-      <div className={grid({ columns: 1, gap: "4" })}>
-        <FormField
-          label="Colored Numerals"
-          description="Match numeral colors to bead colors"
-        >
+      <div className={grid({ columns: 1, gap: '4' })}>
+        <FormField label="Colored Numerals" description="Match numeral colors to bead colors">
           <form.Field name="coloredNumerals">
             {(field) => (
               <SwitchField
                 checked={field.state.value || false}
                 onCheckedChange={(checked) => {
-                  field.handleChange(checked);
-                  updateConfig({ coloredNumerals: checked });
+                  field.handleChange(checked)
+                  updateConfig({ coloredNumerals: checked })
                 }}
               />
             )}
           </form.Field>
         </FormField>
 
-        <FormField
-          label="Hide Inactive Beads"
-          description="Show only active beads for clarity"
-        >
+        <FormField label="Hide Inactive Beads" description="Show only active beads for clarity">
           <form.Field name="hideInactiveBeads">
             {(field) => (
               <SwitchField
                 checked={field.state.value || false}
                 onCheckedChange={(checked) => {
-                  field.handleChange(checked);
-                  updateConfig({ hideInactiveBeads: checked });
+                  field.handleChange(checked)
+                  updateConfig({ hideInactiveBeads: checked })
                 }}
               />
             )}
@@ -135,7 +123,7 @@ export function StyleControls({ form }: StyleControlsProps) {
         </FormField>
       </div>
     </div>
-  );
+  )
 }
 
 // Helper Components
@@ -144,17 +132,17 @@ function FormField({
   description,
   children,
 }: {
-  label: string;
-  description?: string;
-  children: React.ReactNode;
+  label: string
+  description?: string
+  children: React.ReactNode
 }) {
   return (
-    <div className={stack({ gap: "2" })}>
+    <div className={stack({ gap: '2' })}>
       <Label.Root
         className={css({
-          fontSize: "sm",
-          fontWeight: "semibold",
-          color: "gray.900",
+          fontSize: 'sm',
+          fontWeight: 'semibold',
+          color: 'gray.900',
         })}
       >
         {label}
@@ -162,8 +150,8 @@ function FormField({
       {description && (
         <p
           className={css({
-            fontSize: "xs",
-            color: "gray.600",
+            fontSize: 'xs',
+            color: 'gray.600',
           })}
         >
           {description}
@@ -171,46 +159,46 @@ function FormField({
       )}
       {children}
     </div>
-  );
+  )
 }
 
 function SwitchField({
   checked,
   onCheckedChange,
 }: {
-  checked: boolean;
-  onCheckedChange: (checked: boolean) => void;
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
 }) {
   return (
     <Switch.Root
       checked={checked}
       onCheckedChange={onCheckedChange}
       className={css({
-        w: "11",
-        h: "6",
-        bg: checked ? "brand.600" : "gray.300",
-        rounded: "full",
-        position: "relative",
-        transition: "all",
-        cursor: "pointer",
-        _hover: { bg: checked ? "brand.700" : "gray.400" },
+        w: '11',
+        h: '6',
+        bg: checked ? 'brand.600' : 'gray.300',
+        rounded: 'full',
+        position: 'relative',
+        transition: 'all',
+        cursor: 'pointer',
+        _hover: { bg: checked ? 'brand.700' : 'gray.400' },
       })}
     >
       <Switch.Thumb
         className={css({
-          display: "block",
-          w: "5",
-          h: "5",
-          bg: "white",
-          rounded: "full",
-          shadow: "card",
-          transition: "transform 0.2s",
-          transform: checked ? "translateX(20px)" : "translateX(0px)",
-          willChange: "transform",
+          display: 'block',
+          w: '5',
+          h: '5',
+          bg: 'white',
+          rounded: 'full',
+          shadow: 'card',
+          transition: 'transform 0.2s',
+          transform: checked ? 'translateX(20px)' : 'translateX(0px)',
+          willChange: 'transform',
         })}
       />
     </Switch.Root>
-  );
+  )
 }
 
 function RadioGroupField({
@@ -218,63 +206,56 @@ function RadioGroupField({
   onValueChange,
   options,
 }: {
-  value: string;
-  onValueChange: (value: string) => void;
-  options: Array<{ value: string; label: string; desc?: string }>;
+  value: string
+  onValueChange: (value: string) => void
+  options: Array<{ value: string; label: string; desc?: string }>
 }) {
   return (
-    <RadioGroup.Root
-      value={value}
-      onValueChange={onValueChange}
-      className={stack({ gap: "3" })}
-    >
+    <RadioGroup.Root value={value} onValueChange={onValueChange} className={stack({ gap: '3' })}>
       {options.map((option) => (
-        <div
-          key={option.value}
-          className={hstack({ gap: "3", alignItems: "start" })}
-        >
+        <div key={option.value} className={hstack({ gap: '3', alignItems: 'start' })}>
           <RadioGroup.Item
             value={option.value}
             className={css({
-              w: "5",
-              h: "5",
-              rounded: "full",
-              border: "2px solid",
-              borderColor: "gray.300",
-              bg: "white",
-              cursor: "pointer",
-              transition: "all",
-              _hover: { borderColor: "brand.400" },
-              "&[data-state=checked]": { borderColor: "brand.600" },
-              mt: "0.5",
+              w: '5',
+              h: '5',
+              rounded: 'full',
+              border: '2px solid',
+              borderColor: 'gray.300',
+              bg: 'white',
+              cursor: 'pointer',
+              transition: 'all',
+              _hover: { borderColor: 'brand.400' },
+              '&[data-state=checked]': { borderColor: 'brand.600' },
+              mt: '0.5',
             })}
           >
             <RadioGroup.Indicator
               className={css({
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                w: "full",
-                h: "full",
-                position: "relative",
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                w: 'full',
+                h: 'full',
+                position: 'relative',
                 _after: {
                   content: '""',
-                  display: "block",
-                  w: "2",
-                  h: "2",
-                  rounded: "full",
-                  bg: "brand.600",
+                  display: 'block',
+                  w: '2',
+                  h: '2',
+                  rounded: 'full',
+                  bg: 'brand.600',
                 },
               })}
             />
           </RadioGroup.Item>
-          <div className={stack({ gap: "0.5", flex: 1 })}>
+          <div className={stack({ gap: '0.5', flex: 1 })}>
             <label
               className={css({
-                fontSize: "sm",
-                fontWeight: "medium",
-                color: "gray.900",
-                cursor: "pointer",
+                fontSize: 'sm',
+                fontWeight: 'medium',
+                color: 'gray.900',
+                cursor: 'pointer',
               })}
             >
               {option.label}
@@ -282,9 +263,9 @@ function RadioGroupField({
             {option.desc && (
               <p
                 className={css({
-                  fontSize: "xs",
-                  color: "gray.600",
-                  lineHeight: "tight",
+                  fontSize: 'xs',
+                  color: 'gray.600',
+                  lineHeight: 'tight',
                 })}
               >
                 {option.desc}
@@ -294,5 +275,5 @@ function RadioGroupField({
         </div>
       ))}
     </RadioGroup.Root>
-  );
+  )
 }
diff --git a/apps/web/src/components/ThemeToggle.tsx b/apps/web/src/components/ThemeToggle.tsx
index bc3da637..6fee5c61 100644
--- a/apps/web/src/components/ThemeToggle.tsx
+++ b/apps/web/src/components/ThemeToggle.tsx
@@ -1,35 +1,35 @@
-"use client";
+'use client'
 
-import { useTheme } from "@/contexts/ThemeContext";
-import { css } from "../../styled-system/css";
+import { useTheme } from '@/contexts/ThemeContext'
+import { css } from '../../styled-system/css'
 
 export function ThemeToggle() {
-  const { theme, resolvedTheme, setTheme } = useTheme();
+  const { theme, resolvedTheme, setTheme } = useTheme()
 
   const cycleTheme = () => {
     // Cycle: light → dark → system → light
-    if (theme === "light") {
-      setTheme("dark");
-    } else if (theme === "dark") {
-      setTheme("system");
+    if (theme === 'light') {
+      setTheme('dark')
+    } else if (theme === 'dark') {
+      setTheme('system')
     } else {
-      setTheme("light");
+      setTheme('light')
     }
-  };
+  }
 
   const getThemeLabel = () => {
-    if (theme === "system") {
-      return `Auto (${resolvedTheme === "dark" ? "Dark" : "Light"})`;
+    if (theme === 'system') {
+      return `Auto (${resolvedTheme === 'dark' ? 'Dark' : 'Light'})`
     }
-    return theme === "dark" ? "Dark" : "Light";
-  };
+    return theme === 'dark' ? 'Dark' : 'Light'
+  }
 
   const getThemeIcon = () => {
-    if (theme === "system") {
-      return "🌗"; // Half moon for system/auto
+    if (theme === 'system') {
+      return '🌗' // Half moon for system/auto
     }
-    return resolvedTheme === "dark" ? "🌙" : "☀️";
-  };
+    return resolvedTheme === 'dark' ? '🌙' : '☀️'
+  }
 
   return (
     <button
@@ -38,28 +38,28 @@ export function ThemeToggle() {
       aria-label={`Current theme: ${getThemeLabel()}. Click to cycle.`}
       title={`Current: ${getThemeLabel()}. Click to cycle themes.`}
       className={css({
-        display: "flex",
-        alignItems: "center",
-        gap: "0.5rem",
-        px: "1rem",
-        py: "0.5rem",
-        bg: "bg.surface",
-        color: "text.primary",
-        border: "1px solid",
-        borderColor: "border.default",
-        borderRadius: "0.5rem",
-        cursor: "pointer",
-        fontSize: "0.875rem",
-        fontWeight: "500",
-        transition: "all 0.2s",
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        px: '1rem',
+        py: '0.5rem',
+        bg: 'bg.surface',
+        color: 'text.primary',
+        border: '1px solid',
+        borderColor: 'border.default',
+        borderRadius: '0.5rem',
+        cursor: 'pointer',
+        fontSize: '0.875rem',
+        fontWeight: '500',
+        transition: 'all 0.2s',
         _hover: {
-          bg: "interactive.hover",
-          borderColor: "border.emphasis",
+          bg: 'interactive.hover',
+          borderColor: 'border.emphasis',
         },
       })}
     >
       {getThemeIcon()}
       <span>{getThemeLabel()}</span>
     </button>
-  );
+  )
 }
diff --git a/apps/web/src/components/__tests__/AppNavBar.integration.test.tsx b/apps/web/src/components/__tests__/AppNavBar.integration.test.tsx
index c21b6e3d..533eec16 100644
--- a/apps/web/src/components/__tests__/AppNavBar.integration.test.tsx
+++ b/apps/web/src/components/__tests__/AppNavBar.integration.test.tsx
@@ -1,107 +1,101 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import React, { Suspense } from "react";
-import { vi } from "vitest";
-import { AppNavBar } from "../AppNavBar";
+import { render, screen, waitFor } from '@testing-library/react'
+import React, { Suspense } from 'react'
+import { vi } from 'vitest'
+import { AppNavBar } from '../AppNavBar'
 
 // Mock Next.js hooks
-vi.mock("next/navigation", () => ({
-  usePathname: () => "/games/matching",
+vi.mock('next/navigation', () => ({
+  usePathname: () => '/games/matching',
   useRouter: () => ({
     push: vi.fn(),
   }),
-}));
+}))
 
 // Mock contexts
-vi.mock("../../contexts/FullscreenContext", () => ({
+vi.mock('../../contexts/FullscreenContext', () => ({
   useFullscreen: () => ({
     isFullscreen: false,
     toggleFullscreen: vi.fn(),
     exitFullscreen: vi.fn(),
   }),
-}));
+}))
 
 // Mock AbacusDisplayDropdown
-vi.mock("../AbacusDisplayDropdown", () => ({
-  AbacusDisplayDropdown: () => (
-    <div data-testid="abacus-dropdown">Dropdown</div>
-  ),
-}));
+vi.mock('../AbacusDisplayDropdown', () => ({
+  AbacusDisplayDropdown: () => <div data-testid="abacus-dropdown">Dropdown</div>,
+}))
 
-describe("AppNavBar Nav Slot Integration", () => {
-  it("renders actual nav slot content from lazy component", async () => {
+describe('AppNavBar Nav Slot Integration', () => {
+  it('renders actual nav slot content from lazy component', async () => {
     // Create a lazy component that simulates the @nav slot behavior
     const MatchingNavContent = () => (
       <h1
         style={{
-          fontSize: "18px",
-          fontWeight: "bold",
-          background: "linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)",
-          backgroundClip: "text",
-          color: "transparent",
+          fontSize: '18px',
+          fontWeight: 'bold',
+          background: 'linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)',
+          backgroundClip: 'text',
+          color: 'transparent',
           margin: 0,
         }}
       >
         🧩 Memory Pairs
       </h1>
-    );
+    )
 
-    const LazyMatchingNav = React.lazy(() =>
-      Promise.resolve({ default: MatchingNavContent }),
-    );
+    const LazyMatchingNav = React.lazy(() => Promise.resolve({ default: MatchingNavContent }))
 
     const navSlot = (
       <Suspense fallback={<div data-testid="nav-loading">Loading...</div>}>
         <LazyMatchingNav />
       </Suspense>
-    );
+    )
 
-    render(<AppNavBar navSlot={navSlot} />);
+    render(<AppNavBar navSlot={navSlot} />)
 
     // Initially should show loading fallback
-    expect(screen.getByTestId("nav-loading")).toBeInTheDocument();
+    expect(screen.getByTestId('nav-loading')).toBeInTheDocument()
 
     // Wait for lazy component to load and render
     await waitFor(() => {
-      expect(screen.getByText("🧩 Memory Pairs")).toBeInTheDocument();
-    });
+      expect(screen.getByText('🧩 Memory Pairs')).toBeInTheDocument()
+    })
 
     // Verify loading state is gone
-    expect(screen.queryByTestId("nav-loading")).not.toBeInTheDocument();
-  });
+    expect(screen.queryByTestId('nav-loading')).not.toBeInTheDocument()
+  })
 
-  it("reproduces the issue: lazy component without Suspense boundary fails to render", async () => {
+  it('reproduces the issue: lazy component without Suspense boundary fails to render', async () => {
     // This test reproduces the actual issue - lazy components need Suspense
-    const MatchingNavContent = () => <h1>🧩 Memory Pairs</h1>;
+    const MatchingNavContent = () => <h1>🧩 Memory Pairs</h1>
 
-    const LazyMatchingNav = React.lazy(() =>
-      Promise.resolve({ default: MatchingNavContent }),
-    );
+    const LazyMatchingNav = React.lazy(() => Promise.resolve({ default: MatchingNavContent }))
 
     // This is what's happening in the actual app - lazy component without Suspense
-    const navSlot = <LazyMatchingNav />;
+    const navSlot = <LazyMatchingNav />
 
     // This should throw an error or not render properly
-    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
     try {
-      render(<AppNavBar navSlot={navSlot} />);
+      render(<AppNavBar navSlot={navSlot} />)
 
       // The lazy component should not render without Suspense
-      expect(screen.queryByText("🧩 Memory Pairs")).not.toBeInTheDocument();
+      expect(screen.queryByText('🧩 Memory Pairs')).not.toBeInTheDocument()
     } catch (error) {
       // Expected to fail - lazy components need Suspense boundary
-      expect(error.message).toContain("Suspense");
+      expect(error.message).toContain('Suspense')
     }
 
-    consoleSpy.mockRestore();
-  });
+    consoleSpy.mockRestore()
+  })
 
-  it("simulates Next.js App Router parallel route slot structure", async () => {
+  it('simulates Next.js App Router parallel route slot structure', async () => {
     // This mimics the actual navSlot structure from Next.js App Router
     const mockParallelRouteSlot = {
-      $$typeof: Symbol.for("react.element"),
+      $$typeof: Symbol.for('react.element'),
       type: {
-        $$typeof: Symbol.for("react.lazy"),
+        $$typeof: Symbol.for('react.lazy'),
         _payload: Promise.resolve({
           default: () => <h1>🧩 Memory Pairs</h1>,
         }),
@@ -110,17 +104,17 @@ describe("AppNavBar Nav Slot Integration", () => {
       key: null,
       ref: null,
       props: {
-        parallelRouterKey: "nav",
-        segmentPath: ["nav"],
+        parallelRouterKey: 'nav',
+        segmentPath: ['nav'],
         template: {},
         notFoundStyles: [],
       },
-    };
+    }
 
     // This is the structure we're actually receiving from Next.js
-    render(<AppNavBar navSlot={mockParallelRouteSlot as any} />);
+    render(<AppNavBar navSlot={mockParallelRouteSlot as any} />)
 
     // This should fail to render the content without proper handling
-    expect(screen.queryByText("🧩 Memory Pairs")).not.toBeInTheDocument();
-  });
-});
+    expect(screen.queryByText('🧩 Memory Pairs')).not.toBeInTheDocument()
+  })
+})
diff --git a/apps/web/src/components/__tests__/AppNavBar.suspense.test.tsx b/apps/web/src/components/__tests__/AppNavBar.suspense.test.tsx
index be42bf8d..1bbfca22 100644
--- a/apps/web/src/components/__tests__/AppNavBar.suspense.test.tsx
+++ b/apps/web/src/components/__tests__/AppNavBar.suspense.test.tsx
@@ -1,109 +1,101 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import React from "react";
-import { vi } from "vitest";
-import { AppNavBar } from "../AppNavBar";
+import { render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import { vi } from 'vitest'
+import { AppNavBar } from '../AppNavBar'
 
 // Mock Next.js hooks
-vi.mock("next/navigation", () => ({
-  usePathname: () => "/games/matching",
+vi.mock('next/navigation', () => ({
+  usePathname: () => '/games/matching',
   useRouter: () => ({
     push: vi.fn(),
   }),
-}));
+}))
 
 // Mock contexts
-vi.mock("../../contexts/FullscreenContext", () => ({
+vi.mock('../../contexts/FullscreenContext', () => ({
   useFullscreen: () => ({
     isFullscreen: false,
     toggleFullscreen: vi.fn(),
     exitFullscreen: vi.fn(),
   }),
-}));
+}))
 
 // Mock AbacusDisplayDropdown
-vi.mock("../AbacusDisplayDropdown", () => ({
-  AbacusDisplayDropdown: () => (
-    <div data-testid="abacus-dropdown">Dropdown</div>
-  ),
-}));
+vi.mock('../AbacusDisplayDropdown', () => ({
+  AbacusDisplayDropdown: () => <div data-testid="abacus-dropdown">Dropdown</div>,
+}))
 
-describe("AppNavBar Suspense Fix", () => {
-  it("renders nav slot content with Suspense boundary (FIXED)", async () => {
+describe('AppNavBar Suspense Fix', () => {
+  it('renders nav slot content with Suspense boundary (FIXED)', async () => {
     // Simulate the exact structure that Next.js App Router provides
     const MatchingNavContent = () => (
       <h1
         style={{
-          fontSize: "18px",
-          fontWeight: "bold",
-          background: "linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)",
-          backgroundClip: "text",
-          color: "transparent",
+          fontSize: '18px',
+          fontWeight: 'bold',
+          background: 'linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)',
+          backgroundClip: 'text',
+          color: 'transparent',
           margin: 0,
         }}
       >
         🧩 Memory Pairs
       </h1>
-    );
+    )
 
     // Create a lazy component like Next.js does
-    const LazyMatchingNav = React.lazy(() =>
-      Promise.resolve({ default: MatchingNavContent }),
-    );
+    const LazyMatchingNav = React.lazy(() => Promise.resolve({ default: MatchingNavContent }))
 
     // This is what Next.js App Router passes to our component
-    const navSlot = <LazyMatchingNav />;
+    const navSlot = <LazyMatchingNav />
 
-    render(<AppNavBar navSlot={navSlot} />);
+    render(<AppNavBar navSlot={navSlot} />)
 
     // Should show loading state briefly
-    expect(screen.getByText("Loading...")).toBeInTheDocument();
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
 
     // Wait for the lazy component to load and render
     await waitFor(() => {
-      expect(screen.getByText("🧩 Memory Pairs")).toBeInTheDocument();
-    });
+      expect(screen.getByText('🧩 Memory Pairs')).toBeInTheDocument()
+    })
 
     // Loading state should be gone
-    expect(screen.queryByText("Loading...")).not.toBeInTheDocument();
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument()
 
     // Game name should be visible in the nav
-    expect(screen.getByText("🧩 Memory Pairs")).toBeInTheDocument();
-  });
+    expect(screen.getByText('🧩 Memory Pairs')).toBeInTheDocument()
+  })
 
-  it("demonstrates the original issue was fixed", async () => {
+  it('demonstrates the original issue was fixed', async () => {
     // This test shows that without our Suspense fix, this would have failed
-    const MemoryQuizContent = () => <h1>🧠 Memory Lightning</h1>;
-    const LazyMemoryQuizNav = React.lazy(() =>
-      Promise.resolve({ default: MemoryQuizContent }),
-    );
+    const MemoryQuizContent = () => <h1>🧠 Memory Lightning</h1>
+    const LazyMemoryQuizNav = React.lazy(() => Promise.resolve({ default: MemoryQuizContent }))
 
-    const navSlot = <LazyMemoryQuizNav />;
+    const navSlot = <LazyMemoryQuizNav />
 
-    render(<AppNavBar navSlot={navSlot} />);
+    render(<AppNavBar navSlot={navSlot} />)
 
     // Without Suspense boundary in AppNavBar, this would fail to render
     // But now it works because we wrap navSlot in Suspense
     await waitFor(() => {
-      expect(screen.getByText("🧠 Memory Lightning")).toBeInTheDocument();
-    });
-  });
+      expect(screen.getByText('🧠 Memory Lightning')).toBeInTheDocument()
+    })
+  })
 
-  it("shows that lazy components need Suspense to render", () => {
+  it('shows that lazy components need Suspense to render', () => {
     // This test shows what happens without Suspense - it should fail
-    const TestContent = () => <h1>Test Content</h1>;
-    const LazyTest = React.lazy(() =>
-      Promise.resolve({ default: TestContent }),
-    );
+    const TestContent = () => <h1>Test Content</h1>
+    const LazyTest = React.lazy(() => Promise.resolve({ default: TestContent }))
 
     // Trying to render lazy component without Suspense should fail
-    expect(() => render(<LazyTest />)).toThrow();
-  });
+    expect(() => render(<LazyTest />)).toThrow()
+  })
 
-  it("handles nav slot gracefully when null or undefined", () => {
-    render(<AppNavBar navSlot={null} />);
-    expect(screen.queryByText("Loading...")).not.toBeInTheDocument();
+  it('handles nav slot gracefully when null or undefined', () => {
+    render(<AppNavBar navSlot={null} />)
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument()
 
-    render(<AppNavBar navSlot={undefined} />);
-    expect(screen.queryByText("Loading...")).not.toBeInTheDocument();
-  });
-});
+    render(<AppNavBar navSlot={undefined} />)
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument()
+  })
+})
diff --git a/apps/web/src/components/__tests__/AppNavBar.test.tsx b/apps/web/src/components/__tests__/AppNavBar.test.tsx
index d06bd690..a00c3e9c 100644
--- a/apps/web/src/components/__tests__/AppNavBar.test.tsx
+++ b/apps/web/src/components/__tests__/AppNavBar.test.tsx
@@ -1,68 +1,66 @@
-import { render, screen } from "@testing-library/react";
-import { vi } from "vitest";
-import { AppNavBar } from "../AppNavBar";
+import { render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import { AppNavBar } from '../AppNavBar'
 
 // Mock Next.js hooks
-vi.mock("next/navigation", () => ({
-  usePathname: () => "/games/matching",
+vi.mock('next/navigation', () => ({
+  usePathname: () => '/games/matching',
   useRouter: () => ({
     push: vi.fn(),
   }),
-}));
+}))
 
 // Mock contexts
-vi.mock("../../contexts/FullscreenContext", () => ({
+vi.mock('../../contexts/FullscreenContext', () => ({
   useFullscreen: () => ({
     isFullscreen: false,
     toggleFullscreen: vi.fn(),
     exitFullscreen: vi.fn(),
   }),
-}));
+}))
 
 // Mock AbacusDisplayDropdown
-vi.mock("../AbacusDisplayDropdown", () => ({
-  AbacusDisplayDropdown: () => (
-    <div data-testid="abacus-dropdown">Dropdown</div>
-  ),
-}));
+vi.mock('../AbacusDisplayDropdown', () => ({
+  AbacusDisplayDropdown: () => <div data-testid="abacus-dropdown">Dropdown</div>,
+}))
 
-describe("AppNavBar", () => {
-  it("renders navSlot when provided", () => {
-    const navSlot = <div data-testid="nav-slot">🧩 Memory Pairs</div>;
+describe('AppNavBar', () => {
+  it('renders navSlot when provided', () => {
+    const navSlot = <div data-testid="nav-slot">🧩 Memory Pairs</div>
 
-    render(<AppNavBar navSlot={navSlot} />);
+    render(<AppNavBar navSlot={navSlot} />)
 
-    expect(screen.getByTestId("nav-slot")).toBeInTheDocument();
-    expect(screen.getByText("🧩 Memory Pairs")).toBeInTheDocument();
-  });
+    expect(screen.getByTestId('nav-slot')).toBeInTheDocument()
+    expect(screen.getByText('🧩 Memory Pairs')).toBeInTheDocument()
+  })
 
-  it("does not render nav branding when navSlot is null", () => {
-    render(<AppNavBar navSlot={null} />);
+  it('does not render nav branding when navSlot is null', () => {
+    render(<AppNavBar navSlot={null} />)
 
-    expect(screen.queryByTestId("nav-slot")).not.toBeInTheDocument();
-  });
+    expect(screen.queryByTestId('nav-slot')).not.toBeInTheDocument()
+  })
 
-  it("does not render nav branding when navSlot is undefined", () => {
-    render(<AppNavBar />);
+  it('does not render nav branding when navSlot is undefined', () => {
+    render(<AppNavBar />)
 
-    expect(screen.queryByTestId("nav-slot")).not.toBeInTheDocument();
-  });
+    expect(screen.queryByTestId('nav-slot')).not.toBeInTheDocument()
+  })
 
-  it("renders minimal variant for game pages", () => {
-    const navSlot = <div data-testid="nav-slot">Game Name</div>;
+  it('renders minimal variant for game pages', () => {
+    const navSlot = <div data-testid="nav-slot">Game Name</div>
 
-    render(<AppNavBar variant="full" navSlot={navSlot} />);
+    render(<AppNavBar variant="full" navSlot={navSlot} />)
 
     // Should auto-detect minimal variant for /games/matching path
-    expect(screen.getByTestId("nav-slot")).toBeInTheDocument();
-  });
+    expect(screen.getByTestId('nav-slot')).toBeInTheDocument()
+  })
 
-  it("renders fullscreen toggle button", () => {
-    const navSlot = <div data-testid="nav-slot">Game Name</div>;
+  it('renders fullscreen toggle button', () => {
+    const navSlot = <div data-testid="nav-slot">Game Name</div>
 
-    render(<AppNavBar navSlot={navSlot} />);
+    render(<AppNavBar navSlot={navSlot} />)
 
     // Check that fullscreen toggle button is present
-    expect(screen.getByTitle("Enter Fullscreen")).toBeInTheDocument();
-  });
-});
+    expect(screen.getByTitle('Enter Fullscreen')).toBeInTheDocument()
+  })
+})
diff --git a/apps/web/src/components/common/CopyButton.tsx b/apps/web/src/components/common/CopyButton.tsx
index bbfa30da..1422f08c 100644
--- a/apps/web/src/components/common/CopyButton.tsx
+++ b/apps/web/src/components/common/CopyButton.tsx
@@ -1,36 +1,36 @@
-import type { CSSProperties } from "react";
-import { useClipboard } from "@/hooks/useClipboard";
+import type { CSSProperties } from 'react'
+import { useClipboard } from '@/hooks/useClipboard'
 
 export interface CopyButtonProps {
   /**
    * Text to copy to clipboard
    */
-  text: string;
+  text: string
 
   /**
    * Button label when not copied
    */
-  label: string | React.ReactNode;
+  label: string | React.ReactNode
 
   /**
    * Button label when copied
    */
-  copiedLabel?: string | React.ReactNode;
+  copiedLabel?: string | React.ReactNode
 
   /**
    * Visual variant
    */
-  variant?: "code" | "link";
+  variant?: 'code' | 'link'
 
   /**
    * Optional custom styles
    */
-  style?: CSSProperties;
+  style?: CSSProperties
 
   /**
    * Optional click handler (in addition to copy)
    */
-  onClick?: (e: React.MouseEvent) => void;
+  onClick?: (e: React.MouseEvent) => void
 }
 
 /**
@@ -50,80 +50,74 @@ export function CopyButton({
   text,
   label,
   copiedLabel,
-  variant = "code",
+  variant = 'code',
   style,
   onClick,
 }: CopyButtonProps) {
-  const { copied, copy } = useClipboard();
+  const { copied, copy } = useClipboard()
 
   const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    copy(text);
-    onClick?.(e);
-  };
+    e.preventDefault()
+    e.stopPropagation()
+    copy(text)
+    onClick?.(e)
+  }
 
   const baseStyles: CSSProperties = {
-    width: "100%",
-    cursor: "pointer",
-    transition: "all 0.2s ease",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "8px",
-    marginBottom: "6px",
-    border: "none",
-  };
+    width: '100%',
+    cursor: 'pointer',
+    transition: 'all 0.2s ease',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '8px',
+    marginBottom: '6px',
+    border: 'none',
+  }
 
-  const variantStyles: Record<"code" | "link", CSSProperties> = {
+  const variantStyles: Record<'code' | 'link', CSSProperties> = {
     code: {
       background: copied
-        ? "linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.3))"
-        : "linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.3))",
-      border: copied
-        ? "2px solid rgba(34, 197, 94, 0.5)"
-        : "2px solid rgba(139, 92, 246, 0.4)",
-      borderRadius: "8px",
-      padding: "10px 16px",
-      fontFamily: "monospace",
-      fontSize: "16px",
-      fontWeight: "bold",
-      color: copied ? "rgba(134, 239, 172, 1)" : "rgba(196, 181, 253, 1)",
-      letterSpacing: "2px",
+        ? 'linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.3))'
+        : 'linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.3))',
+      border: copied ? '2px solid rgba(34, 197, 94, 0.5)' : '2px solid rgba(139, 92, 246, 0.4)',
+      borderRadius: '8px',
+      padding: '10px 16px',
+      fontFamily: 'monospace',
+      fontSize: '16px',
+      fontWeight: 'bold',
+      color: copied ? 'rgba(134, 239, 172, 1)' : 'rgba(196, 181, 253, 1)',
+      letterSpacing: '2px',
     },
     link: {
       background: copied
-        ? "linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.3))"
-        : "linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.3))",
-      border: copied
-        ? "2px solid rgba(34, 197, 94, 0.5)"
-        : "2px solid rgba(59, 130, 246, 0.4)",
-      borderRadius: "8px",
-      padding: "10px 16px",
-      fontSize: "13px",
-      fontWeight: "600",
-      color: copied ? "rgba(134, 239, 172, 1)" : "rgba(147, 197, 253, 1)",
+        ? 'linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.3))'
+        : 'linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.3))',
+      border: copied ? '2px solid rgba(34, 197, 94, 0.5)' : '2px solid rgba(59, 130, 246, 0.4)',
+      borderRadius: '8px',
+      padding: '10px 16px',
+      fontSize: '13px',
+      fontWeight: '600',
+      color: copied ? 'rgba(134, 239, 172, 1)' : 'rgba(147, 197, 253, 1)',
     },
-  };
+  }
 
-  const hoverStyles: Record<"code" | "link", CSSProperties> = {
+  const hoverStyles: Record<'code' | 'link', CSSProperties> = {
     code: {
-      background:
-        "linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.4))",
-      borderColor: "rgba(139, 92, 246, 0.6)",
+      background: 'linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.4))',
+      borderColor: 'rgba(139, 92, 246, 0.6)',
     },
     link: {
-      background:
-        "linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.4))",
-      borderColor: "rgba(59, 130, 246, 0.6)",
+      background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.4))',
+      borderColor: 'rgba(59, 130, 246, 0.6)',
     },
-  };
+  }
 
   const combinedStyles = {
     ...baseStyles,
     ...variantStyles[variant],
     ...style,
-  };
+  }
 
   return (
     <button
@@ -132,23 +126,23 @@ export function CopyButton({
       style={combinedStyles}
       onMouseEnter={(e) => {
         if (!copied) {
-          Object.assign(e.currentTarget.style, hoverStyles[variant]);
+          Object.assign(e.currentTarget.style, hoverStyles[variant])
         }
       }}
       onMouseLeave={(e) => {
         if (!copied) {
-          Object.assign(e.currentTarget.style, variantStyles[variant]);
+          Object.assign(e.currentTarget.style, variantStyles[variant])
         }
       }}
     >
       {copied ? (
         <>
-          <span style={{ fontSize: "14px" }}>✓</span>
-          <span>{copiedLabel || "Copied!"}</span>
+          <span style={{ fontSize: '14px' }}>✓</span>
+          <span>{copiedLabel || 'Copied!'}</span>
         </>
       ) : (
         label
       )}
     </button>
-  );
+  )
 }
diff --git a/apps/web/src/components/common/Modal.tsx b/apps/web/src/components/common/Modal.tsx
index 601e8293..f2b98f0d 100644
--- a/apps/web/src/components/common/Modal.tsx
+++ b/apps/web/src/components/common/Modal.tsx
@@ -1,25 +1,25 @@
-import type { ReactNode } from "react";
+import type { ReactNode } from 'react'
 
 export interface ModalProps {
   /**
    * Whether the modal is open
    */
-  isOpen: boolean;
+  isOpen: boolean
 
   /**
    * Callback when modal should close (clicking overlay or ESC)
    */
-  onClose: () => void;
+  onClose: () => void
 
   /**
    * Modal content
    */
-  children: ReactNode;
+  children: ReactNode
 
   /**
    * Optional CSS class for the modal content
    */
-  className?: string;
+  className?: string
 }
 
 /**
@@ -41,27 +41,27 @@ export interface ModalProps {
  * ```
  */
 export function Modal({ isOpen, onClose, children, className }: ModalProps) {
-  if (!isOpen) return null;
+  if (!isOpen) return null
 
   return (
     <div
       style={{
-        position: "fixed",
+        position: 'fixed',
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        background: "rgba(0, 0, 0, 0.7)",
-        backdropFilter: "blur(4px)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        background: 'rgba(0, 0, 0, 0.7)',
+        backdropFilter: 'blur(4px)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
         zIndex: 10000,
       }}
       onClick={onClose}
       onKeyDown={(e) => {
-        if (e.key === "Escape") {
-          onClose();
+        if (e.key === 'Escape') {
+          onClose()
         }
       }}
     >
@@ -69,49 +69,48 @@ export function Modal({ isOpen, onClose, children, className }: ModalProps) {
         className={className}
         onClick={(e) => e.stopPropagation()}
         style={{
-          background:
-            "linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.98))",
-          borderRadius: "16px",
-          padding: "32px",
-          maxWidth: className ? "none" : "500px",
-          width: "90%",
-          maxHeight: "90vh",
-          overflow: "auto",
-          boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)",
-          boxSizing: "border-box",
+          background: 'linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.98))',
+          borderRadius: '16px',
+          padding: '32px',
+          maxWidth: className ? 'none' : '500px',
+          width: '90%',
+          maxHeight: '90vh',
+          overflow: 'auto',
+          boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
+          boxSizing: 'border-box',
         }}
       >
         {children}
       </div>
     </div>
-  );
+  )
 }
 
 export interface ModalContentProps {
   /**
    * Modal title
    */
-  title: string;
+  title: string
 
   /**
    * Modal description/subtitle
    */
-  description?: string;
+  description?: string
 
   /**
    * Modal content
    */
-  children: ReactNode;
+  children: ReactNode
 
   /**
    * Border color for the modal
    */
-  borderColor?: string;
+  borderColor?: string
 
   /**
    * Title color
    */
-  titleColor?: string;
+  titleColor?: string
 }
 
 /**
@@ -121,22 +120,22 @@ export function ModalContent({
   title,
   description,
   children,
-  borderColor = "rgba(139, 92, 246, 0.3)",
-  titleColor = "rgba(196, 181, 253, 1)",
+  borderColor = 'rgba(139, 92, 246, 0.3)',
+  titleColor = 'rgba(196, 181, 253, 1)',
 }: ModalContentProps) {
   return (
     <div
       style={{
         border: `2px solid ${borderColor}`,
-        borderRadius: "16px",
+        borderRadius: '16px',
         padding: 0,
       }}
     >
       <h2
         style={{
-          fontSize: "24px",
-          fontWeight: "bold",
-          marginBottom: description ? "8px" : "24px",
+          fontSize: '24px',
+          fontWeight: 'bold',
+          marginBottom: description ? '8px' : '24px',
           color: titleColor,
         }}
       >
@@ -145,9 +144,9 @@ export function ModalContent({
       {description && (
         <p
           style={{
-            fontSize: "14px",
-            color: "rgba(209, 213, 219, 0.8)",
-            marginBottom: "24px",
+            fontSize: '14px',
+            color: 'rgba(209, 213, 219, 0.8)',
+            marginBottom: '24px',
           }}
         >
           {description}
@@ -155,5 +154,5 @@ export function ModalContent({
       )}
       {children}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/common/QRCodeButton.tsx b/apps/web/src/components/common/QRCodeButton.tsx
index 0a7afc63..6b85cd64 100644
--- a/apps/web/src/components/common/QRCodeButton.tsx
+++ b/apps/web/src/components/common/QRCodeButton.tsx
@@ -1,20 +1,20 @@
-import * as Popover from "@radix-ui/react-popover";
-import type { CSSProperties } from "react";
-import { useState } from "react";
-import { QRCodeSVG } from "qrcode.react";
-import { useClipboard } from "@/hooks/useClipboard";
-import { Z_INDEX } from "@/constants/zIndex";
+import * as Popover from '@radix-ui/react-popover'
+import type { CSSProperties } from 'react'
+import { useState } from 'react'
+import { QRCodeSVG } from 'qrcode.react'
+import { useClipboard } from '@/hooks/useClipboard'
+import { Z_INDEX } from '@/constants/zIndex'
 
 export interface QRCodeButtonProps {
   /**
    * The URL to encode in the QR code and display
    */
-  url: string;
+  url: string
 
   /**
    * Optional custom styles for the trigger button
    */
-  style?: CSSProperties;
+  style?: CSSProperties
 }
 
 /**
@@ -22,33 +22,31 @@ export interface QRCodeButtonProps {
  * Includes the URL text with a copy button
  */
 export function QRCodeButton({ url, style }: QRCodeButtonProps) {
-  const [open, setOpen] = useState(false);
-  const { copied, copy } = useClipboard();
+  const [open, setOpen] = useState(false)
+  const { copied, copy } = useClipboard()
 
   const buttonStyles: CSSProperties = {
-    cursor: "pointer",
-    transition: "all 0.2s ease",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    border: "2px solid rgba(251, 146, 60, 0.4)",
-    background:
-      "linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(251, 146, 60, 0.3))",
-    borderRadius: "8px",
-    padding: "4px",
-    fontSize: "16px",
-    color: "rgba(253, 186, 116, 1)",
-    height: "100%",
-    aspectRatio: "1",
+    cursor: 'pointer',
+    transition: 'all 0.2s ease',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    border: '2px solid rgba(251, 146, 60, 0.4)',
+    background: 'linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(251, 146, 60, 0.3))',
+    borderRadius: '8px',
+    padding: '4px',
+    fontSize: '16px',
+    color: 'rgba(253, 186, 116, 1)',
+    height: '100%',
+    aspectRatio: '1',
     flexShrink: 0,
     ...style,
-  };
+  }
 
   const hoverStyles: CSSProperties = {
-    background:
-      "linear-gradient(135deg, rgba(251, 146, 60, 0.3), rgba(251, 146, 60, 0.4))",
-    borderColor: "rgba(251, 146, 60, 0.6)",
-  };
+    background: 'linear-gradient(135deg, rgba(251, 146, 60, 0.3), rgba(251, 146, 60, 0.4))',
+    borderColor: 'rgba(251, 146, 60, 0.6)',
+  }
 
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
@@ -57,10 +55,10 @@ export function QRCodeButton({ url, style }: QRCodeButtonProps) {
           type="button"
           style={buttonStyles}
           onMouseEnter={(e) => {
-            Object.assign(e.currentTarget.style, hoverStyles);
+            Object.assign(e.currentTarget.style, hoverStyles)
           }}
           onMouseLeave={(e) => {
-            Object.assign(e.currentTarget.style, buttonStyles);
+            Object.assign(e.currentTarget.style, buttonStyles)
           }}
         >
           <QRCodeSVG value={url} size={84} level="L" />
@@ -73,23 +71,23 @@ export function QRCodeButton({ url, style }: QRCodeButtonProps) {
           side="bottom"
           sideOffset={8}
           style={{
-            background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
-            border: "2px solid rgba(251, 146, 60, 0.4)",
-            borderRadius: "12px",
-            padding: "20px",
-            boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
+            background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
+            border: '2px solid rgba(251, 146, 60, 0.4)',
+            borderRadius: '12px',
+            padding: '20px',
+            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4)',
             zIndex: Z_INDEX.GAME_NAV.HAMBURGER_NESTED_DROPDOWN,
-            maxWidth: "320px",
+            maxWidth: '320px',
           }}
         >
           {/* Title */}
           <div
             style={{
-              fontSize: "16px",
-              fontWeight: "bold",
-              color: "rgba(253, 186, 116, 1)",
-              marginBottom: "12px",
-              textAlign: "center",
+              fontSize: '16px',
+              fontWeight: 'bold',
+              color: 'rgba(253, 186, 116, 1)',
+              marginBottom: '12px',
+              textAlign: 'center',
             }}
           >
             Scan to Join
@@ -98,13 +96,13 @@ export function QRCodeButton({ url, style }: QRCodeButtonProps) {
           {/* QR Code */}
           <div
             style={{
-              background: "white",
-              padding: "16px",
-              borderRadius: "8px",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              marginBottom: "16px",
+              background: 'white',
+              padding: '16px',
+              borderRadius: '8px',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              marginBottom: '16px',
             }}
           >
             <QRCodeSVG value={url} size={200} level="H" />
@@ -113,15 +111,15 @@ export function QRCodeButton({ url, style }: QRCodeButtonProps) {
           {/* URL with copy button */}
           <div
             style={{
-              marginBottom: "8px",
+              marginBottom: '8px',
             }}
           >
             <div
               style={{
-                fontSize: "11px",
-                color: "rgba(209, 213, 219, 0.7)",
-                marginBottom: "6px",
-                textAlign: "center",
+                fontSize: '11px',
+                color: 'rgba(209, 213, 219, 0.7)',
+                marginBottom: '6px',
+                textAlign: 'center',
               }}
             >
               Or copy link:
@@ -130,56 +128,54 @@ export function QRCodeButton({ url, style }: QRCodeButtonProps) {
               type="button"
               onClick={() => copy(url)}
               style={{
-                width: "100%",
-                cursor: "pointer",
-                transition: "all 0.2s ease",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: "6px",
+                width: '100%',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '6px',
                 background: copied
-                  ? "linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.3))"
-                  : "linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.3))",
+                  ? 'linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.3))'
+                  : 'linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.3))',
                 border: copied
-                  ? "2px solid rgba(34, 197, 94, 0.5)"
-                  : "2px solid rgba(59, 130, 246, 0.4)",
-                borderRadius: "8px",
-                padding: "8px 12px",
-                fontSize: "11px",
-                fontWeight: "600",
-                color: copied
-                  ? "rgba(134, 239, 172, 1)"
-                  : "rgba(147, 197, 253, 1)",
+                  ? '2px solid rgba(34, 197, 94, 0.5)'
+                  : '2px solid rgba(59, 130, 246, 0.4)',
+                borderRadius: '8px',
+                padding: '8px 12px',
+                fontSize: '11px',
+                fontWeight: '600',
+                color: copied ? 'rgba(134, 239, 172, 1)' : 'rgba(147, 197, 253, 1)',
               }}
               onMouseEnter={(e) => {
                 if (!copied) {
                   e.currentTarget.style.background =
-                    "linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.4))";
-                  e.currentTarget.style.borderColor = "rgba(59, 130, 246, 0.6)";
+                    'linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.4))'
+                  e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.6)'
                 }
               }}
               onMouseLeave={(e) => {
                 if (!copied) {
                   e.currentTarget.style.background =
-                    "linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.3))";
-                  e.currentTarget.style.borderColor = "rgba(59, 130, 246, 0.4)";
+                    'linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.3))'
+                  e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.4)'
                 }
               }}
             >
               {copied ? (
                 <>
-                  <span style={{ fontSize: "12px" }}>✓</span>
+                  <span style={{ fontSize: '12px' }}>✓</span>
                   <span>Copied!</span>
                 </>
               ) : (
                 <>
-                  <span style={{ fontSize: "12px" }}>🔗</span>
+                  <span style={{ fontSize: '12px' }}>🔗</span>
                   <span
                     style={{
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap",
-                      maxWidth: "200px",
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                      maxWidth: '200px',
                     }}
                   >
                     {url}
@@ -191,11 +187,11 @@ export function QRCodeButton({ url, style }: QRCodeButtonProps) {
 
           <Popover.Arrow
             style={{
-              fill: "rgba(251, 146, 60, 0.4)",
+              fill: 'rgba(251, 146, 60, 0.4)',
             }}
           />
         </Popover.Content>
       </Popover.Portal>
     </Popover.Root>
-  );
+  )
 }
diff --git a/apps/web/src/components/common/ToastContext.tsx b/apps/web/src/components/common/ToastContext.tsx
index 30b13ba9..243245b9 100644
--- a/apps/web/src/components/common/ToastContext.tsx
+++ b/apps/web/src/components/common/ToastContext.tsx
@@ -1,140 +1,127 @@
-"use client";
+'use client'
 
-import * as Toast from "@radix-ui/react-toast";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useState,
-  type ReactNode,
-} from "react";
+import * as Toast from '@radix-ui/react-toast'
+import { createContext, useCallback, useContext, useState, type ReactNode } from 'react'
 
 export interface ToastMessage {
-  id: string;
-  type: "success" | "error" | "info";
-  title: string;
-  description?: string;
-  duration?: number;
+  id: string
+  type: 'success' | 'error' | 'info'
+  title: string
+  description?: string
+  duration?: number
 }
 
 interface ToastContextValue {
-  showToast: (toast: Omit<ToastMessage, "id">) => void;
-  showSuccess: (title: string, description?: string) => void;
-  showError: (title: string, description?: string) => void;
-  showInfo: (title: string, description?: string) => void;
+  showToast: (toast: Omit<ToastMessage, 'id'>) => void
+  showSuccess: (title: string, description?: string) => void
+  showError: (title: string, description?: string) => void
+  showInfo: (title: string, description?: string) => void
 }
 
-const ToastContext = createContext<ToastContextValue | null>(null);
+const ToastContext = createContext<ToastContextValue | null>(null)
 
 export function useToast() {
-  const context = useContext(ToastContext);
+  const context = useContext(ToastContext)
   if (!context) {
-    throw new Error("useToast must be used within ToastProvider");
+    throw new Error('useToast must be used within ToastProvider')
   }
-  return context;
+  return context
 }
 
 export function ToastProvider({ children }: { children: ReactNode }) {
-  const [toasts, setToasts] = useState<ToastMessage[]>([]);
+  const [toasts, setToasts] = useState<ToastMessage[]>([])
 
-  const showToast = useCallback((toast: Omit<ToastMessage, "id">) => {
-    const id = Math.random().toString(36).substring(7);
-    setToasts((prev) => [...prev, { ...toast, id }]);
-  }, []);
+  const showToast = useCallback((toast: Omit<ToastMessage, 'id'>) => {
+    const id = Math.random().toString(36).substring(7)
+    setToasts((prev) => [...prev, { ...toast, id }])
+  }, [])
 
   const showSuccess = useCallback(
     (title: string, description?: string) => {
-      showToast({ type: "success", title, description, duration: 5000 });
+      showToast({ type: 'success', title, description, duration: 5000 })
     },
-    [showToast],
-  );
+    [showToast]
+  )
 
   const showError = useCallback(
     (title: string, description?: string) => {
-      showToast({ type: "error", title, description, duration: 7000 });
+      showToast({ type: 'error', title, description, duration: 7000 })
     },
-    [showToast],
-  );
+    [showToast]
+  )
 
   const showInfo = useCallback(
     (title: string, description?: string) => {
-      showToast({ type: "info", title, description, duration: 5000 });
+      showToast({ type: 'info', title, description, duration: 5000 })
     },
-    [showToast],
-  );
+    [showToast]
+  )
 
   const removeToast = useCallback((id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+  }, [])
 
-  const getToastStyles = (type: ToastMessage["type"]) => {
+  const getToastStyles = (type: ToastMessage['type']) => {
     switch (type) {
-      case "success":
+      case 'success':
         return {
-          background:
-            "linear-gradient(135deg, rgba(34, 197, 94, 0.97), rgba(22, 163, 74, 0.97))",
-          border: "2px solid rgba(34, 197, 94, 0.6)",
-          icon: "✓",
-        };
-      case "error":
+          background: 'linear-gradient(135deg, rgba(34, 197, 94, 0.97), rgba(22, 163, 74, 0.97))',
+          border: '2px solid rgba(34, 197, 94, 0.6)',
+          icon: '✓',
+        }
+      case 'error':
         return {
-          background:
-            "linear-gradient(135deg, rgba(239, 68, 68, 0.97), rgba(220, 38, 38, 0.97))",
-          border: "2px solid rgba(239, 68, 68, 0.6)",
-          icon: "⚠",
-        };
-      case "info":
+          background: 'linear-gradient(135deg, rgba(239, 68, 68, 0.97), rgba(220, 38, 38, 0.97))',
+          border: '2px solid rgba(239, 68, 68, 0.6)',
+          icon: '⚠',
+        }
+      case 'info':
         return {
-          background:
-            "linear-gradient(135deg, rgba(59, 130, 246, 0.97), rgba(37, 99, 235, 0.97))",
-          border: "2px solid rgba(59, 130, 246, 0.6)",
-          icon: "ℹ",
-        };
+          background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.97), rgba(37, 99, 235, 0.97))',
+          border: '2px solid rgba(59, 130, 246, 0.6)',
+          icon: 'ℹ',
+        }
     }
-  };
+  }
 
   return (
-    <ToastContext.Provider
-      value={{ showToast, showSuccess, showError, showInfo }}
-    >
+    <ToastContext.Provider value={{ showToast, showSuccess, showError, showInfo }}>
       {children}
       <Toast.Provider swipeDirection="right">
         {toasts.map((toast) => {
-          const styles = getToastStyles(toast.type);
+          const styles = getToastStyles(toast.type)
           return (
             <Toast.Root
               key={toast.id}
               open={true}
               onOpenChange={(open) => {
                 if (!open) {
-                  removeToast(toast.id);
+                  removeToast(toast.id)
                 }
               }}
               duration={toast.duration}
               style={{
                 background: styles.background,
                 border: styles.border,
-                borderRadius: "12px",
-                padding: "16px",
-                boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)",
-                display: "flex",
-                gap: "12px",
-                alignItems: "flex-start",
-                minWidth: "300px",
-                maxWidth: "450px",
-                transition: "all 0.2s ease",
+                borderRadius: '12px',
+                padding: '16px',
+                boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
+                display: 'flex',
+                gap: '12px',
+                alignItems: 'flex-start',
+                minWidth: '300px',
+                maxWidth: '450px',
+                transition: 'all 0.2s ease',
               }}
             >
-              <div style={{ fontSize: "20px", flexShrink: 0 }}>
-                {styles.icon}
-              </div>
+              <div style={{ fontSize: '20px', flexShrink: 0 }}>{styles.icon}</div>
               <div style={{ flex: 1 }}>
                 <Toast.Title
                   style={{
-                    fontSize: "14px",
-                    fontWeight: "bold",
-                    color: "white",
-                    marginBottom: toast.description ? "4px" : 0,
+                    fontSize: '14px',
+                    fontWeight: 'bold',
+                    color: 'white',
+                    marginBottom: toast.description ? '4px' : 0,
                   }}
                 >
                   {toast.title}
@@ -142,8 +129,8 @@ export function ToastProvider({ children }: { children: ReactNode }) {
                 {toast.description && (
                   <Toast.Description
                     style={{
-                      fontSize: "13px",
-                      color: "rgba(255, 255, 255, 0.9)",
+                      fontSize: '13px',
+                      color: 'rgba(255, 255, 255, 0.9)',
                     }}
                   >
                     {toast.description}
@@ -152,17 +139,17 @@ export function ToastProvider({ children }: { children: ReactNode }) {
               </div>
               <Toast.Close
                 style={{
-                  background: "rgba(255, 255, 255, 0.2)",
-                  border: "none",
-                  borderRadius: "50%",
-                  width: "24px",
-                  height: "24px",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  cursor: "pointer",
-                  color: "white",
-                  fontSize: "16px",
+                  background: 'rgba(255, 255, 255, 0.2)',
+                  border: 'none',
+                  borderRadius: '50%',
+                  width: '24px',
+                  height: '24px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  cursor: 'pointer',
+                  color: 'white',
+                  fontSize: '16px',
                   lineHeight: 1,
                   flexShrink: 0,
                 }}
@@ -170,22 +157,22 @@ export function ToastProvider({ children }: { children: ReactNode }) {
                 ×
               </Toast.Close>
             </Toast.Root>
-          );
+          )
         })}
 
         <Toast.Viewport
           style={{
-            position: "fixed",
-            top: "80px",
-            right: "20px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "10px",
+            position: 'fixed',
+            top: '80px',
+            right: '20px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '10px',
             zIndex: 10001,
-            maxWidth: "100vw",
+            maxWidth: '100vw',
             margin: 0,
-            listStyle: "none",
-            outline: "none",
+            listStyle: 'none',
+            outline: 'none',
           }}
         />
 
@@ -244,5 +231,5 @@ export function ToastProvider({ children }: { children: ReactNode }) {
         />
       </Toast.Provider>
     </ToastContext.Provider>
-  );
+  )
 }
diff --git a/apps/web/src/components/matching/HoverAvatar.tsx b/apps/web/src/components/matching/HoverAvatar.tsx
index 137933e4..99d6c1ba 100644
--- a/apps/web/src/components/matching/HoverAvatar.tsx
+++ b/apps/web/src/components/matching/HoverAvatar.tsx
@@ -1,15 +1,15 @@
-"use client";
+'use client'
 
-import { animated, useSpring } from "@react-spring/web";
-import { useEffect, useRef, useState } from "react";
-import { css } from "../../../styled-system/css";
+import { animated, useSpring } from '@react-spring/web'
+import { useEffect, useRef, useState } from 'react'
+import { css } from '../../../styled-system/css'
 
 export interface HoverAvatarProps {
-  playerId: string;
-  playerInfo: { emoji: string; name: string; color?: string };
-  cardElement: HTMLElement | null;
-  isPlayersTurn: boolean;
-  isCardFlipped: boolean;
+  playerId: string
+  playerInfo: { emoji: string; name: string; color?: string }
+  cardElement: HTMLElement | null
+  isPlayersTurn: boolean
+  isCardFlipped: boolean
 }
 
 /**
@@ -23,25 +23,23 @@ export function HoverAvatar({
   isPlayersTurn,
   isCardFlipped,
 }: HoverAvatarProps) {
-  const [position, setPosition] = useState<{ x: number; y: number } | null>(
-    null,
-  );
-  const isFirstRender = useRef(true);
+  const [position, setPosition] = useState<{ x: number; y: number } | null>(null)
+  const isFirstRender = useRef(true)
 
   // Update position when card element changes
   useEffect(() => {
     if (cardElement) {
-      const rect = cardElement.getBoundingClientRect();
+      const rect = cardElement.getBoundingClientRect()
       // Calculate the center of the card for avatar positioning
-      const avatarCenterX = rect.left + rect.width / 2;
-      const avatarCenterY = rect.top + rect.height / 2;
+      const avatarCenterX = rect.left + rect.width / 2
+      const avatarCenterY = rect.top + rect.height / 2
 
       setPosition({
         x: avatarCenterX,
         y: avatarCenterY,
-      });
+      })
     }
-  }, [cardElement]);
+  }, [cardElement])
 
   // Smooth spring animation for position changes
   const springProps = useSpring({
@@ -55,53 +53,52 @@ export function HoverAvatar({
       mass: 1,
     },
     immediate: isFirstRender.current, // Skip animation on first render only
-  });
+  })
 
   // Clear first render flag after initial render
   useEffect(() => {
     if (position && isFirstRender.current) {
-      isFirstRender.current = false;
+      isFirstRender.current = false
     }
-  }, [position]);
+  }, [position])
 
   // Don't render until we have a position
-  if (!position) return null;
+  if (!position) return null
 
   return (
     <animated.div
       style={{
-        position: "fixed",
+        position: 'fixed',
         // Don't use translate, just position directly at the calculated point
         left: springProps.x.to((x) => `${x}px`),
         top: springProps.y.to((y) => `${y}px`),
         opacity: springProps.opacity,
-        width: "80px",
-        height: "80px",
-        marginLeft: "-40px", // Center horizontally (half of width)
-        marginTop: "-40px", // Center vertically (half of height)
-        borderRadius: "50%",
-        background:
-          playerInfo.color || "linear-gradient(135deg, #667eea, #764ba2)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontSize: "48px",
+        width: '80px',
+        height: '80px',
+        marginLeft: '-40px', // Center horizontally (half of width)
+        marginTop: '-40px', // Center vertically (half of height)
+        borderRadius: '50%',
+        background: playerInfo.color || 'linear-gradient(135deg, #667eea, #764ba2)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '48px',
         // 3D elevation effect
         boxShadow:
-          "0 12px 30px rgba(0,0,0,0.5), 0 6px 12px rgba(0,0,0,0.4), 0 0 40px rgba(102, 126, 234, 0.8)",
-        border: "4px solid white",
+          '0 12px 30px rgba(0,0,0,0.5), 0 6px 12px rgba(0,0,0,0.4), 0 0 40px rgba(102, 126, 234, 0.8)',
+        border: '4px solid white',
         zIndex: 1000,
-        pointerEvents: "none",
-        filter: "drop-shadow(0 0 12px rgba(102, 126, 234, 0.9))",
+        pointerEvents: 'none',
+        filter: 'drop-shadow(0 0 12px rgba(102, 126, 234, 0.9))',
       }}
       className={css({
-        animation: "hoverFloat 2s ease-in-out infinite",
+        animation: 'hoverFloat 2s ease-in-out infinite',
       })}
       title={`${playerInfo.name} is considering this card`}
     >
       {playerInfo.emoji}
     </animated.div>
-  );
+  )
 }
 
 // Add hover float animation
@@ -114,15 +111,12 @@ const hoverFloatAnimation = `
     transform: translateY(-6px);
   }
 }
-`;
+`
 
 // Inject animation styles
-if (
-  typeof document !== "undefined" &&
-  !document.getElementById("hover-avatar-animations")
-) {
-  const style = document.createElement("style");
-  style.id = "hover-avatar-animations";
-  style.textContent = hoverFloatAnimation;
-  document.head.appendChild(style);
+if (typeof document !== 'undefined' && !document.getElementById('hover-avatar-animations')) {
+  const style = document.createElement('style')
+  style.id = 'hover-avatar-animations'
+  style.textContent = hoverFloatAnimation
+  document.head.appendChild(style)
 }
diff --git a/apps/web/src/components/matching/MemoryGrid.tsx b/apps/web/src/components/matching/MemoryGrid.tsx
index 35c0b540..e6f2457b 100644
--- a/apps/web/src/components/matching/MemoryGrid.tsx
+++ b/apps/web/src/components/matching/MemoryGrid.tsx
@@ -1,124 +1,115 @@
-"use client";
+'use client'
 
-import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import { css } from "../../../styled-system/css";
-import { HoverAvatar } from "./HoverAvatar";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { css } from '../../../styled-system/css'
+import { HoverAvatar } from './HoverAvatar'
 
 // Grid calculation utilities
 function calculateOptimalGrid(cards: number, aspectRatio: number, config: any) {
   // For consistent grid layout, we need to ensure r×c = totalCards
   // Choose columns based on viewport, then calculate exact rows needed
 
-  let targetColumns;
-  const width = typeof window !== "undefined" ? window.innerWidth : 1024;
+  let targetColumns
+  const width = typeof window !== 'undefined' ? window.innerWidth : 1024
 
   // Choose column count based on viewport
   if (aspectRatio >= 1.6 && width >= 1200) {
     // Ultra-wide: prefer wider grids
-    targetColumns = config.landscapeColumns || config.desktopColumns || 6;
+    targetColumns = config.landscapeColumns || config.desktopColumns || 6
   } else if (aspectRatio >= 1.33 && width >= 768) {
     // Desktop/landscape: use desktop columns
-    targetColumns = config.desktopColumns || config.landscapeColumns || 6;
+    targetColumns = config.desktopColumns || config.landscapeColumns || 6
   } else if (aspectRatio >= 1.0 && width >= 600) {
     // Tablet: use tablet columns
-    targetColumns = config.tabletColumns || config.desktopColumns || 4;
+    targetColumns = config.tabletColumns || config.desktopColumns || 4
   } else {
     // Mobile: use mobile columns
-    targetColumns = config.mobileColumns || 3;
+    targetColumns = config.mobileColumns || 3
   }
 
   // Calculate exact rows needed for this column count
-  const rows = Math.ceil(cards / targetColumns);
+  const rows = Math.ceil(cards / targetColumns)
 
   // If we have leftover cards that would create an uneven bottom row,
   // try to redistribute for a more balanced grid
-  const leftoverCards = cards % targetColumns;
-  if (
-    leftoverCards > 0 &&
-    leftoverCards < targetColumns / 2 &&
-    targetColumns > 3
-  ) {
+  const leftoverCards = cards % targetColumns
+  if (leftoverCards > 0 && leftoverCards < targetColumns / 2 && targetColumns > 3) {
     // Try one less column for a more balanced grid
-    const altColumns = targetColumns - 1;
-    const altRows = Math.ceil(cards / altColumns);
-    const altLeftover = cards % altColumns;
+    const altColumns = targetColumns - 1
+    const altRows = Math.ceil(cards / altColumns)
+    const altLeftover = cards % altColumns
 
     // Use alternative if it creates a more balanced grid
     if (altLeftover === 0 || altLeftover > leftoverCards) {
-      return { columns: altColumns, rows: altRows };
+      return { columns: altColumns, rows: altRows }
     }
   }
 
-  return { columns: targetColumns, rows };
+  return { columns: targetColumns, rows }
 }
 
 // Custom hook to calculate proper grid dimensions for consistent r×c layout
 function useGridDimensions(gridConfig: any, totalCards: number) {
   const [gridDimensions, setGridDimensions] = useState(() => {
     // Calculate optimal rows and columns based on total cards and viewport
-    if (typeof window !== "undefined") {
-      const aspectRatio = window.innerWidth / window.innerHeight;
-      return calculateOptimalGrid(totalCards, aspectRatio, gridConfig);
+    if (typeof window !== 'undefined') {
+      const aspectRatio = window.innerWidth / window.innerHeight
+      return calculateOptimalGrid(totalCards, aspectRatio, gridConfig)
     }
     return {
       columns: gridConfig.mobileColumns || 3,
       rows: Math.ceil(totalCards / (gridConfig.mobileColumns || 3)),
-    };
-  });
+    }
+  })
 
   useEffect(() => {
     const updateGrid = () => {
-      if (typeof window === "undefined") return;
+      if (typeof window === 'undefined') return
 
-      const aspectRatio = window.innerWidth / window.innerHeight;
-      setGridDimensions(
-        calculateOptimalGrid(totalCards, aspectRatio, gridConfig),
-      );
-    };
+      const aspectRatio = window.innerWidth / window.innerHeight
+      setGridDimensions(calculateOptimalGrid(totalCards, aspectRatio, gridConfig))
+    }
 
-    updateGrid();
-    window.addEventListener("resize", updateGrid);
-    return () => window.removeEventListener("resize", updateGrid);
-  }, [gridConfig, totalCards]);
+    updateGrid()
+    window.addEventListener('resize', updateGrid)
+    return () => window.removeEventListener('resize', updateGrid)
+  }, [gridConfig, totalCards])
 
-  return gridDimensions;
+  return gridDimensions
 }
 
 // Type definitions
 export interface MemoryGridState<TCard = any> {
-  gameCards: TCard[];
-  flippedCards: TCard[];
-  showMismatchFeedback: boolean;
-  isProcessingMove: boolean;
-  gameType: string;
-  playerMetadata?: Record<
-    string,
-    { emoji: string; name: string; color?: string; userId?: string }
-  >;
-  playerHovers?: Record<string, string | null>;
-  currentPlayer?: string;
+  gameCards: TCard[]
+  flippedCards: TCard[]
+  showMismatchFeedback: boolean
+  isProcessingMove: boolean
+  gameType: string
+  playerMetadata?: Record<string, { emoji: string; name: string; color?: string; userId?: string }>
+  playerHovers?: Record<string, string | null>
+  currentPlayer?: string
 }
 
 export interface MemoryGridProps<TCard = any> {
   // Core game state and actions
-  state: MemoryGridState<TCard>;
-  gridConfig: any;
-  flipCard: (cardId: string) => void;
+  state: MemoryGridState<TCard>
+  gridConfig: any
+  flipCard: (cardId: string) => void
 
   // Multiplayer presence features (optional)
-  enableMultiplayerPresence?: boolean;
-  hoverCard?: (cardId: string | null) => void;
-  viewerId?: string | null;
-  gameMode?: "single" | "multiplayer";
+  enableMultiplayerPresence?: boolean
+  hoverCard?: (cardId: string | null) => void
+  viewerId?: string | null
+  gameMode?: 'single' | 'multiplayer'
 
   // Card rendering
   renderCard: (props: {
-    card: TCard;
-    isFlipped: boolean;
-    isMatched: boolean;
-    onClick: () => void;
-    disabled: boolean;
-  }) => ReactNode;
+    card: TCard
+    isFlipped: boolean
+    isMatched: boolean
+    onClick: () => void
+    disabled: boolean
+  }) => ReactNode
 }
 
 /**
@@ -135,121 +126,109 @@ export function MemoryGrid<
   enableMultiplayerPresence = false,
   hoverCard,
   viewerId,
-  gameMode = "single",
+  gameMode = 'single',
 }: MemoryGridProps<TCard>) {
-  const cardRefs = useRef<Map<string, HTMLElement>>(new Map());
-  const gridDimensions = useGridDimensions(gridConfig, state.gameCards.length);
+  const cardRefs = useRef<Map<string, HTMLElement>>(new Map())
+  const gridDimensions = useGridDimensions(gridConfig, state.gameCards.length)
 
   // Check if it's the local player's turn (for multiplayer mode)
   const isMyTurn = useMemo(() => {
-    if (!enableMultiplayerPresence || gameMode === "single") return true;
+    if (!enableMultiplayerPresence || gameMode === 'single') return true
 
     // In local games, all players belong to current user, so always their turn
     // In room games, check if current player belongs to this user
-    const currentPlayerMetadata =
-      state.playerMetadata?.[state.currentPlayer || ""];
-    return currentPlayerMetadata?.userId === viewerId;
-  }, [
-    enableMultiplayerPresence,
-    gameMode,
-    state.currentPlayer,
-    state.playerMetadata,
-    viewerId,
-  ]);
+    const currentPlayerMetadata = state.playerMetadata?.[state.currentPlayer || '']
+    return currentPlayerMetadata?.userId === viewerId
+  }, [enableMultiplayerPresence, gameMode, state.currentPlayer, state.playerMetadata, viewerId])
 
   if (!state.gameCards.length) {
-    return null;
+    return null
   }
 
   const handleCardClick = (cardId: string) => {
-    flipCard(cardId);
-  };
+    flipCard(cardId)
+  }
 
   // Get player metadata for hover avatars
   const getPlayerHoverInfo = (playerId: string) => {
-    const player = state.playerMetadata?.[playerId];
+    const player = state.playerMetadata?.[playerId]
     return player
       ? {
           emoji: player.emoji,
           name: player.name,
           color: player.color,
         }
-      : null;
-  };
+      : null
+  }
 
   // Set card ref callback
   const setCardRef = (cardId: string) => (element: HTMLDivElement | null) => {
     if (element) {
-      cardRefs.current.set(cardId, element);
+      cardRefs.current.set(cardId, element)
     } else {
-      cardRefs.current.delete(cardId);
+      cardRefs.current.delete(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" },
+        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={{
-          display: "grid",
-          gap: "6px",
-          justifyContent: "center",
-          maxWidth: "100%",
-          margin: "0 auto",
-          padding: "0 8px",
+          display: 'grid',
+          gap: '6px',
+          justifyContent: 'center',
+          maxWidth: '100%',
+          margin: '0 auto',
+          padding: '0 8px',
           // Consistent grid ensuring all cards fit in r×c layout
           gridTemplateColumns: `repeat(${gridDimensions.columns}, 1fr)`,
           gridTemplateRows: `repeat(${gridDimensions.rows}, 1fr)`,
         }}
       >
         {state.gameCards.map((card) => {
-          const isFlipped =
-            state.flippedCards.some((c) => c.id === card.id) || card.matched;
-          const isMatched = card.matched;
+          const isFlipped = state.flippedCards.some((c) => c.id === card.id) || card.matched
+          const isMatched = card.matched
           const shouldShake =
-            state.showMismatchFeedback &&
-            state.flippedCards.some((c) => c.id === card.id);
+            state.showMismatchFeedback && state.flippedCards.some((c) => c.id === card.id)
 
           // Smart card filtering for abacus-numeral mode
-          let isValidForSelection = true;
-          let isDimmed = false;
+          let isValidForSelection = true
+          let isDimmed = false
 
           if (
-            state.gameType === "abacus-numeral" &&
+            state.gameType === 'abacus-numeral' &&
             state.flippedCards.length === 1 &&
             !isFlipped &&
             !isMatched
           ) {
-            const firstFlippedCard = state.flippedCards[0];
+            const firstFlippedCard = state.flippedCards[0]
 
             // If first card is abacus, only numeral cards should be clickable
-            if (firstFlippedCard.type === "abacus" && card.type !== "number") {
-              isValidForSelection = false;
-              isDimmed = true;
+            if (firstFlippedCard.type === 'abacus' && card.type !== 'number') {
+              isValidForSelection = false
+              isDimmed = true
             }
             // If first card is numeral, only abacus cards should be clickable
-            else if (
-              firstFlippedCard.type === "number" &&
-              card.type !== "abacus"
-            ) {
-              isValidForSelection = false;
-              isDimmed = true;
+            else if (firstFlippedCard.type === 'number' && card.type !== 'abacus') {
+              isValidForSelection = false
+              isDimmed = true
             }
             // Also check if it's a potential match by number
             else if (
-              (firstFlippedCard.type === "abacus" &&
-                card.type === "number" &&
+              (firstFlippedCard.type === 'abacus' &&
+                card.type === 'number' &&
                 card.number !== firstFlippedCard.number) ||
-              (firstFlippedCard.type === "number" &&
-                card.type === "abacus" &&
+              (firstFlippedCard.type === 'number' &&
+                card.type === 'abacus' &&
                 card.number !== firstFlippedCard.number)
             ) {
               // Don't completely disable, but could add subtle visual hint for non-matching numbers
@@ -262,25 +241,25 @@ export function MemoryGrid<
               key={card.id}
               ref={enableMultiplayerPresence ? setCardRef(card.id) : undefined}
               className={css({
-                aspectRatio: "3/4",
+                aspectRatio: '3/4',
                 // Fully responsive card sizing - no fixed pixel sizes
-                width: "100%",
-                minWidth: "100px",
-                maxWidth: "200px",
+                width: '100%',
+                minWidth: '100px',
+                maxWidth: '200px',
                 // Dimming effect for invalid cards
                 opacity: isDimmed ? 0.3 : 1,
-                transition: "opacity 0.3s ease",
-                filter: isDimmed ? "grayscale(0.7)" : "none",
-                position: "relative",
+                transition: 'opacity 0.3s ease',
+                filter: isDimmed ? 'grayscale(0.7)' : 'none',
+                position: 'relative',
                 // Shake animation for mismatched cards
-                animation: shouldShake ? "cardShake 0.5s ease-in-out" : "none",
+                animation: shouldShake ? 'cardShake 0.5s ease-in-out' : 'none',
               })}
               onMouseEnter={
                 enableMultiplayerPresence && hoverCard
                   ? () => {
                       // Only send hover if it's your turn and card is not matched
                       if (!isMatched && isMyTurn) {
-                        hoverCard(card.id);
+                        hoverCard(card.id)
                       }
                     }
                   : undefined
@@ -290,7 +269,7 @@ export function MemoryGrid<
                   ? () => {
                       // Clear hover state when mouse leaves card
                       if (!isMatched && isMyTurn) {
-                        hoverCard(null);
+                        hoverCard(null)
                       }
                     }
                   : undefined
@@ -300,12 +279,11 @@ export function MemoryGrid<
                 card,
                 isFlipped,
                 isMatched,
-                onClick: () =>
-                  isValidForSelection ? handleCardClick(card.id) : undefined,
+                onClick: () => (isValidForSelection ? handleCardClick(card.id) : undefined),
                 disabled: state.isProcessingMove || !isValidForSelection,
               })}
             </div>
-          );
+          )
         })}
       </div>
 
@@ -313,14 +291,14 @@ export function MemoryGrid<
       {state.isProcessingMove && (
         <div
           className={css({
-            position: "fixed",
+            position: 'fixed',
             top: 0,
             left: 0,
             right: 0,
             bottom: 0,
-            background: "rgba(0,0,0,0.1)",
+            background: 'rgba(0,0,0,0.1)',
             zIndex: 999,
-            pointerEvents: "none",
+            pointerEvents: 'none',
           })}
         />
       )}
@@ -332,30 +310,25 @@ export function MemoryGrid<
           .filter(([playerId]) => {
             // Only show hover avatars for REMOTE players (not the current user's own players)
             // This provides "presence" for opponents without cluttering your own view
-            const playerMetadata = state.playerMetadata?.[playerId];
-            const isRemotePlayer = playerMetadata?.userId !== viewerId;
+            const playerMetadata = state.playerMetadata?.[playerId]
+            const isRemotePlayer = playerMetadata?.userId !== viewerId
             // Also ensure it's the current player's turn (so we only show active hovers)
-            const isCurrentPlayer = playerId === state.currentPlayer;
-            return isRemotePlayer && isCurrentPlayer;
+            const isCurrentPlayer = playerId === state.currentPlayer
+            return isRemotePlayer && isCurrentPlayer
           })
           .map(([playerId, cardId]) => {
-            const playerInfo = getPlayerHoverInfo(playerId);
+            const playerInfo = getPlayerHoverInfo(playerId)
             // Get card element if player is hovering (cardId might be null)
-            const cardElement = cardId
-              ? (cardRefs.current.get(cardId) ?? null)
-              : null;
+            const cardElement = cardId ? (cardRefs.current.get(cardId) ?? null) : null
             // Check if it's this player's turn
-            const isPlayersTurn = state.currentPlayer === playerId;
+            const isPlayersTurn = state.currentPlayer === playerId
             // Check if the card being hovered is flipped
-            const hoveredCard = cardId
-              ? state.gameCards.find((c) => c.id === cardId)
-              : null;
+            const hoveredCard = cardId ? state.gameCards.find((c) => c.id === cardId) : null
             const isCardFlipped = hoveredCard
-              ? state.flippedCards.some((c) => c.id === hoveredCard.id) ||
-                hoveredCard.matched
-              : false;
+              ? state.flippedCards.some((c) => c.id === hoveredCard.id) || hoveredCard.matched
+              : false
 
-            if (!playerInfo) return null;
+            if (!playerInfo) return null
 
             // Render avatar even if no cardElement (it will handle hiding itself)
             return (
@@ -367,10 +340,10 @@ export function MemoryGrid<
                 isPlayersTurn={isPlayersTurn}
                 isCardFlipped={isCardFlipped}
               />
-            );
+            )
           })}
     </div>
-  );
+  )
 }
 
 // Add shake animation for mismatched cards
@@ -380,15 +353,12 @@ const cardShakeAnimation = `
   10%, 30%, 50%, 70%, 90% { transform: translateX(-8px) rotate(-2deg); }
   20%, 40%, 60%, 80% { transform: translateX(8px) rotate(2deg); }
 }
-`;
+`
 
 // Inject animation styles
-if (
-  typeof document !== "undefined" &&
-  !document.getElementById("memory-grid-animations")
-) {
-  const style = document.createElement("style");
-  style.id = "memory-grid-animations";
-  style.textContent = cardShakeAnimation;
-  document.head.appendChild(style);
+if (typeof document !== 'undefined' && !document.getElementById('memory-grid-animations')) {
+  const style = document.createElement('style')
+  style.id = 'memory-grid-animations'
+  style.textContent = cardShakeAnimation
+  document.head.appendChild(style)
 }
diff --git a/apps/web/src/components/nav/ActivePlayersList.tsx b/apps/web/src/components/nav/ActivePlayersList.tsx
index 6c04cfc1..6327368d 100644
--- a/apps/web/src/components/nav/ActivePlayersList.tsx
+++ b/apps/web/src/components/nav/ActivePlayersList.tsx
@@ -1,36 +1,36 @@
-import React from "react";
-import { PlayerTooltip } from "./PlayerTooltip";
-import type { PlayerBadge } from "./types";
+import React from 'react'
+import { PlayerTooltip } from './PlayerTooltip'
+import type { PlayerBadge } from './types'
 
 interface Player {
-  id: string;
-  name: string;
-  emoji: string;
-  color?: string;
-  createdAt?: Date | number;
-  isLocal?: boolean;
+  id: string
+  name: string
+  emoji: string
+  color?: string
+  createdAt?: Date | number
+  isLocal?: boolean
 }
 
 interface ActivePlayersListProps {
-  activePlayers: Player[];
-  shouldEmphasize: boolean;
-  onRemovePlayer: (playerId: string) => void;
-  onConfigurePlayer: (playerId: string) => void;
+  activePlayers: Player[]
+  shouldEmphasize: boolean
+  onRemovePlayer: (playerId: string) => void
+  onConfigurePlayer: (playerId: string) => void
   // Game state for turn indicator
-  currentPlayerId?: string;
-  playerScores?: Record<string, number>;
-  playerStreaks?: Record<string, number>;
-  playerBadges?: Record<string, PlayerBadge>;
+  currentPlayerId?: string
+  playerScores?: Record<string, number>
+  playerStreaks?: Record<string, number>
+  playerBadges?: Record<string, PlayerBadge>
   // Side assignments (for 2-player games)
-  whitePlayerId?: string | null;
-  blackPlayerId?: string | null;
-  onAssignWhitePlayer?: (playerId: string | null) => void;
-  onAssignBlackPlayer?: (playerId: string | null) => void;
+  whitePlayerId?: string | null
+  blackPlayerId?: string | null
+  onAssignWhitePlayer?: (playerId: string | null) => void
+  onAssignBlackPlayer?: (playerId: string | null) => void
   // Room/host context for assignment permissions
-  isInRoom?: boolean;
-  isCurrentUserHost?: boolean;
+  isInRoom?: boolean
+  isCurrentUserHost?: boolean
   // Game phase (for showing spectating vs assign)
-  gamePhase?: "setup" | "playing" | "results";
+  gamePhase?: 'setup' | 'playing' | 'results'
 }
 
 export function ActivePlayersList({
@@ -50,78 +50,74 @@ export function ActivePlayersList({
   isCurrentUserHost = false,
   gamePhase,
 }: ActivePlayersListProps) {
-  const [hoveredPlayerId, setHoveredPlayerId] = React.useState<string | null>(
-    null,
-  );
-  const [hoveredBadge, setHoveredBadge] = React.useState<string | null>(null);
-  const [clickCooldown, setClickCooldown] = React.useState<string | null>(null);
+  const [hoveredPlayerId, setHoveredPlayerId] = React.useState<string | null>(null)
+  const [hoveredBadge, setHoveredBadge] = React.useState<string | null>(null)
+  const [clickCooldown, setClickCooldown] = React.useState<string | null>(null)
 
   // Determine if user can assign players
   // Can assign if: not in room (local play) OR in room and is host
-  const canAssignPlayers = !isInRoom || isCurrentUserHost;
+  const canAssignPlayers = !isInRoom || isCurrentUserHost
 
   // Handler to assign to white
   const handleAssignWhite = React.useCallback(
     (playerId: string, e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (!onAssignWhitePlayer) return;
-      onAssignWhitePlayer(playerId);
-      setClickCooldown(playerId);
+      e.stopPropagation()
+      if (!onAssignWhitePlayer) return
+      onAssignWhitePlayer(playerId)
+      setClickCooldown(playerId)
     },
-    [onAssignWhitePlayer],
-  );
+    [onAssignWhitePlayer]
+  )
 
   // Handler to assign to black
   const handleAssignBlack = React.useCallback(
     (playerId: string, e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (!onAssignBlackPlayer) return;
-      onAssignBlackPlayer(playerId);
-      setClickCooldown(playerId);
+      e.stopPropagation()
+      if (!onAssignBlackPlayer) return
+      onAssignBlackPlayer(playerId)
+      setClickCooldown(playerId)
     },
-    [onAssignBlackPlayer],
-  );
+    [onAssignBlackPlayer]
+  )
 
   // Handler to swap sides
   const handleSwap = React.useCallback(
     (playerId: string, e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (!onAssignWhitePlayer || !onAssignBlackPlayer) return;
+      e.stopPropagation()
+      if (!onAssignWhitePlayer || !onAssignBlackPlayer) return
 
       if (whitePlayerId === playerId) {
         // Currently white, swap with black player
-        const currentBlack = blackPlayerId ?? null;
-        onAssignWhitePlayer(currentBlack);
-        onAssignBlackPlayer(playerId);
+        const currentBlack = blackPlayerId ?? null
+        onAssignWhitePlayer(currentBlack)
+        onAssignBlackPlayer(playerId)
       } else if (blackPlayerId === playerId) {
         // Currently black, swap with white player
-        const currentWhite = whitePlayerId ?? null;
-        onAssignBlackPlayer(currentWhite);
-        onAssignWhitePlayer(playerId);
+        const currentWhite = whitePlayerId ?? null
+        onAssignBlackPlayer(currentWhite)
+        onAssignWhitePlayer(playerId)
       }
     },
-    [whitePlayerId, blackPlayerId, onAssignWhitePlayer, onAssignBlackPlayer],
-  );
+    [whitePlayerId, blackPlayerId, onAssignWhitePlayer, onAssignBlackPlayer]
+  )
 
   // Helper to get celebration level based on consecutive matches
   const getCelebrationLevel = (consecutiveMatches: number) => {
-    if (consecutiveMatches >= 5) return "legendary";
-    if (consecutiveMatches >= 3) return "epic";
-    if (consecutiveMatches >= 2) return "great";
-    return "normal";
-  };
+    if (consecutiveMatches >= 5) return 'legendary'
+    if (consecutiveMatches >= 3) return 'epic'
+    if (consecutiveMatches >= 2) return 'great'
+    return 'normal'
+  }
 
   return (
     <>
       {activePlayers.map((player) => {
-        const isCurrentPlayer = currentPlayerId
-          ? player.id === currentPlayerId
-          : false;
-        const hasGameState = currentPlayerId !== undefined;
-        const score = playerScores[player.id] || 0;
-        const streak = playerStreaks[player.id] || 0;
-        const celebrationLevel = getCelebrationLevel(streak);
-        const badge = playerBadges[player.id];
+        const isCurrentPlayer = currentPlayerId ? player.id === currentPlayerId : false
+        const hasGameState = currentPlayerId !== undefined
+        const score = playerScores[player.id] || 0
+        const streak = playerStreaks[player.id] || 0
+        const celebrationLevel = getCelebrationLevel(streak)
+        const badge = playerBadges[player.id]
 
         return (
           <PlayerTooltip
@@ -133,47 +129,44 @@ export function ActivePlayersList({
           >
             <div
               style={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                gap: "4px",
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '4px',
               }}
             >
               <div
                 style={{
-                  position: "relative",
-                  fontSize: isCurrentPlayer && hasGameState ? "70px" : "56px",
+                  position: 'relative',
+                  fontSize: isCurrentPlayer && hasGameState ? '70px' : '56px',
                   lineHeight: 1,
-                  transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-                  filter: "drop-shadow(0 6px 12px rgba(0,0,0,0.3))",
-                  cursor: shouldEmphasize ? "pointer" : "default",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
+                  transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+                  filter: 'drop-shadow(0 6px 12px rgba(0,0,0,0.3))',
+                  cursor: shouldEmphasize ? 'pointer' : 'default',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
                   opacity: hasGameState ? (isCurrentPlayer ? 1 : 0.65) : 1,
-                  transform:
-                    isCurrentPlayer && hasGameState ? "scale(1.1)" : "scale(1)",
+                  transform: isCurrentPlayer && hasGameState ? 'scale(1.1)' : 'scale(1)',
                   animation:
                     isCurrentPlayer && hasGameState
-                      ? "avatarFloat 3s ease-in-out infinite"
-                      : "none",
+                      ? 'avatarFloat 3s ease-in-out infinite'
+                      : 'none',
                 }}
                 onClick={() => shouldEmphasize && onConfigurePlayer(player.id)}
-                onMouseEnter={() =>
-                  shouldEmphasize && setHoveredPlayerId(player.id)
-                }
+                onMouseEnter={() => shouldEmphasize && setHoveredPlayerId(player.id)}
                 onMouseLeave={() => shouldEmphasize && setHoveredPlayerId(null)}
               >
                 {/* Border ring for current player */}
                 {isCurrentPlayer && hasGameState && (
                   <div
                     style={{
-                      position: "absolute",
-                      inset: "-8px",
-                      borderRadius: "50%",
-                      border: `4px solid ${player.color || "#3b82f6"}`,
-                      boxShadow: `0 0 0 2px white, 0 0 20px ${player.color || "#3b82f6"}80`,
-                      animation: "borderPulse 2s ease-in-out infinite",
+                      position: 'absolute',
+                      inset: '-8px',
+                      borderRadius: '50%',
+                      border: `4px solid ${player.color || '#3b82f6'}`,
+                      boxShadow: `0 0 0 2px white, 0 0 20px ${player.color || '#3b82f6'}80`,
+                      animation: 'borderPulse 2s ease-in-out infinite',
                       zIndex: -1,
                     }}
                   />
@@ -185,21 +178,21 @@ export function ActivePlayersList({
                 {hasGameState && score > 0 && (
                   <div
                     style={{
-                      position: "absolute",
-                      bottom: "-6px",
-                      right: "-6px",
-                      width: "24px",
-                      height: "24px",
-                      borderRadius: "50%",
-                      border: "3px solid white",
-                      background: player.color || "#3b82f6",
-                      color: "white",
-                      fontSize: "11px",
-                      fontWeight: "bold",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      boxShadow: "0 4px 10px rgba(0,0,0,0.4)",
+                      position: 'absolute',
+                      bottom: '-6px',
+                      right: '-6px',
+                      width: '24px',
+                      height: '24px',
+                      borderRadius: '50%',
+                      border: '3px solid white',
+                      background: player.color || '#3b82f6',
+                      color: 'white',
+                      fontSize: '11px',
+                      fontWeight: 'bold',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      boxShadow: '0 4px 10px rgba(0,0,0,0.4)',
                       zIndex: 2,
                       lineHeight: 1,
                     }}
@@ -212,19 +205,17 @@ export function ActivePlayersList({
                 {hasGameState && streak >= 2 && (
                   <div
                     style={{
-                      position: "absolute",
-                      top: "-8px",
-                      right: "-8px",
-                      fontSize: "20px",
+                      position: 'absolute',
+                      top: '-8px',
+                      right: '-8px',
+                      fontSize: '20px',
                       filter:
-                        celebrationLevel === "legendary"
-                          ? "drop-shadow(0 0 8px #a855f7)"
-                          : celebrationLevel === "epic"
-                            ? "drop-shadow(0 0 8px #f97316)"
-                            : "drop-shadow(0 0 8px #22c55e)",
-                      animation: isCurrentPlayer
-                        ? "streakPulse 1s ease-in-out infinite"
-                        : "none",
+                        celebrationLevel === 'legendary'
+                          ? 'drop-shadow(0 0 8px #a855f7)'
+                          : celebrationLevel === 'epic'
+                            ? 'drop-shadow(0 0 8px #f97316)'
+                            : 'drop-shadow(0 0 8px #22c55e)',
+                      animation: isCurrentPlayer ? 'streakPulse 1s ease-in-out infinite' : 'none',
                       zIndex: 2,
                     }}
                   >
@@ -236,35 +227,34 @@ export function ActivePlayersList({
                 {badge && !onAssignWhitePlayer && !onAssignBlackPlayer && (
                   <div
                     style={{
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: "6px",
-                      padding: "4px 10px",
-                      borderRadius: "999px",
-                      background:
-                        badge.background ?? "rgba(148, 163, 184, 0.25)",
-                      color: badge.color ?? "#0f172a",
-                      fontSize: "11px",
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      gap: '6px',
+                      padding: '4px 10px',
+                      borderRadius: '999px',
+                      background: badge.background ?? 'rgba(148, 163, 184, 0.25)',
+                      color: badge.color ?? '#0f172a',
+                      fontSize: '11px',
                       fontWeight: 700,
-                      letterSpacing: "0.04em",
-                      textTransform: "uppercase",
+                      letterSpacing: '0.04em',
+                      textTransform: 'uppercase',
                       boxShadow: badge.shadowColor
                         ? `0 4px 12px ${badge.shadowColor}`
-                        : "0 4px 12px rgba(15, 23, 42, 0.25)",
+                        : '0 4px 12px rgba(15, 23, 42, 0.25)',
                       border: badge.borderColor
                         ? `2px solid ${badge.borderColor}`
-                        : "2px solid rgba(255,255,255,0.4)",
-                      backdropFilter: "blur(4px)",
-                      marginTop: "6px",
-                      whiteSpace: "nowrap",
+                        : '2px solid rgba(255,255,255,0.4)',
+                      backdropFilter: 'blur(4px)',
+                      marginTop: '6px',
+                      whiteSpace: 'nowrap',
                     }}
                   >
                     {badge.icon && (
                       <span
                         aria-hidden
                         style={{
-                          fontSize: "14px",
-                          filter: "drop-shadow(0 2px 4px rgba(15,23,42,0.35))",
+                          fontSize: '14px',
+                          filter: 'drop-shadow(0 2px 4px rgba(15,23,42,0.35))',
                         }}
                       >
                         {badge.icon}
@@ -280,42 +270,40 @@ export function ActivePlayersList({
                     <button
                       type="button"
                       onClick={(e) => {
-                        e.stopPropagation();
-                        onConfigurePlayer(player.id);
+                        e.stopPropagation()
+                        onConfigurePlayer(player.id)
                       }}
                       style={{
-                        position: "absolute",
-                        bottom: "-6px",
-                        left: "-6px",
-                        width: "24px",
-                        height: "24px",
-                        borderRadius: "50%",
-                        border: "3px solid white",
-                        background: "linear-gradient(135deg, #6b7280, #4b5563)",
-                        color: "white",
-                        fontSize: "12px",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        cursor: "pointer",
-                        boxShadow: "0 4px 12px rgba(0,0,0,0.4)",
-                        transition: "all 0.2s ease",
+                        position: 'absolute',
+                        bottom: '-6px',
+                        left: '-6px',
+                        width: '24px',
+                        height: '24px',
+                        borderRadius: '50%',
+                        border: '3px solid white',
+                        background: 'linear-gradient(135deg, #6b7280, #4b5563)',
+                        color: 'white',
+                        fontSize: '12px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        cursor: 'pointer',
+                        boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
+                        transition: 'all 0.2s ease',
                         padding: 0,
                         lineHeight: 1,
                       }}
                       onMouseEnter={(e) => {
                         e.currentTarget.style.background =
-                          "linear-gradient(135deg, #3b82f6, #2563eb)";
-                        e.currentTarget.style.transform = "scale(1.2)";
-                        e.currentTarget.style.boxShadow =
-                          "0 6px 16px rgba(59, 130, 246, 0.5)";
+                          'linear-gradient(135deg, #3b82f6, #2563eb)'
+                        e.currentTarget.style.transform = 'scale(1.2)'
+                        e.currentTarget.style.boxShadow = '0 6px 16px rgba(59, 130, 246, 0.5)'
                       }}
                       onMouseLeave={(e) => {
                         e.currentTarget.style.background =
-                          "linear-gradient(135deg, #6b7280, #4b5563)";
-                        e.currentTarget.style.transform = "scale(1)";
-                        e.currentTarget.style.boxShadow =
-                          "0 4px 12px rgba(0,0,0,0.4)";
+                          'linear-gradient(135deg, #6b7280, #4b5563)'
+                        e.currentTarget.style.transform = 'scale(1)'
+                        e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.4)'
                       }}
                       aria-label={`Configure ${player.name}`}
                     >
@@ -326,43 +314,41 @@ export function ActivePlayersList({
                     <button
                       type="button"
                       onClick={(e) => {
-                        e.stopPropagation();
-                        onRemovePlayer(player.id);
+                        e.stopPropagation()
+                        onRemovePlayer(player.id)
                       }}
                       style={{
-                        position: "absolute",
-                        top: "-6px",
-                        right: "-6px",
-                        width: "26px",
-                        height: "26px",
-                        borderRadius: "50%",
-                        border: "3px solid white",
-                        background: "linear-gradient(135deg, #ef4444, #dc2626)",
-                        color: "white",
-                        fontSize: "14px",
-                        fontWeight: "bold",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        cursor: "pointer",
-                        boxShadow: "0 4px 12px rgba(0,0,0,0.4)",
-                        transition: "all 0.2s ease",
+                        position: 'absolute',
+                        top: '-6px',
+                        right: '-6px',
+                        width: '26px',
+                        height: '26px',
+                        borderRadius: '50%',
+                        border: '3px solid white',
+                        background: 'linear-gradient(135deg, #ef4444, #dc2626)',
+                        color: 'white',
+                        fontSize: '14px',
+                        fontWeight: 'bold',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        cursor: 'pointer',
+                        boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
+                        transition: 'all 0.2s ease',
                         padding: 0,
                         lineHeight: 1,
                       }}
                       onMouseEnter={(e) => {
                         e.currentTarget.style.background =
-                          "linear-gradient(135deg, #dc2626, #b91c1c)";
-                        e.currentTarget.style.transform = "scale(1.15)";
-                        e.currentTarget.style.boxShadow =
-                          "0 6px 16px rgba(239, 68, 68, 0.5)";
+                          'linear-gradient(135deg, #dc2626, #b91c1c)'
+                        e.currentTarget.style.transform = 'scale(1.15)'
+                        e.currentTarget.style.boxShadow = '0 6px 16px rgba(239, 68, 68, 0.5)'
                       }}
                       onMouseLeave={(e) => {
                         e.currentTarget.style.background =
-                          "linear-gradient(135deg, #ef4444, #dc2626)";
-                        e.currentTarget.style.transform = "scale(1)";
-                        e.currentTarget.style.boxShadow =
-                          "0 4px 12px rgba(0,0,0,0.4)";
+                          'linear-gradient(135deg, #ef4444, #dc2626)'
+                        e.currentTarget.style.transform = 'scale(1)'
+                        e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.4)'
                       }}
                       aria-label={`Remove ${player.name}`}
                     >
@@ -376,11 +362,11 @@ export function ActivePlayersList({
               {isCurrentPlayer && hasGameState && (
                 <div
                   style={{
-                    fontSize: "12px",
-                    fontWeight: "900",
-                    color: player.color || "#3b82f6",
-                    textTransform: "uppercase",
-                    letterSpacing: "0.5px",
+                    fontSize: '12px',
+                    fontWeight: '900',
+                    color: player.color || '#3b82f6',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.5px',
                     textShadow: `
                       -1px -1px 0 white,
                       1px -1px 0 white,
@@ -388,8 +374,8 @@ export function ActivePlayersList({
                       1px 1px 0 white,
                       0 2px 4px rgba(0,0,0,0.3)
                     `,
-                    marginTop: "-2px",
-                    position: "relative",
+                    marginTop: '-2px',
+                    position: 'relative',
                     zIndex: 10,
                   }}
                 >
@@ -401,131 +387,118 @@ export function ActivePlayersList({
               {onAssignWhitePlayer && onAssignBlackPlayer && (
                 <div
                   style={{
-                    marginTop: "8px",
-                    width: "88px", // Fixed width to prevent layout shift
-                    transition: "none", // Prevent any inherited transitions
+                    marginTop: '8px',
+                    width: '88px', // Fixed width to prevent layout shift
+                    transition: 'none', // Prevent any inherited transitions
                   }}
-                  onMouseEnter={() =>
-                    canAssignPlayers && setHoveredBadge(player.id)
-                  }
+                  onMouseEnter={() => canAssignPlayers && setHoveredBadge(player.id)}
                   onMouseLeave={() => {
-                    setHoveredBadge(null);
-                    setClickCooldown(null);
+                    setHoveredBadge(null)
+                    setClickCooldown(null)
                   }}
                 >
                   {/* Unassigned player - show split button on hover */}
-                  {whitePlayerId !== player.id &&
-                    blackPlayerId !== player.id && (
-                      <>
-                        {canAssignPlayers ? (
-                          // Host/local play: show interactive assignment buttons
-                          <>
-                            {hoveredBadge === player.id &&
-                            clickCooldown !== player.id ? (
-                              // Hover state: split button
-                              <div style={{ display: "flex", width: "100%" }}>
-                                <div
-                                  onClick={(e) =>
-                                    handleAssignWhite(player.id, e)
-                                  }
-                                  style={{
-                                    flex: 1,
-                                    padding: "4px 0",
-                                    borderRadius: "12px 0 0 12px",
-                                    fontSize: "10px",
-                                    fontWeight: "800",
-                                    letterSpacing: "0.5px",
-                                    textTransform: "uppercase",
-                                    cursor: "pointer",
-                                    background:
-                                      "linear-gradient(135deg, #f0f0f0, #ffffff)",
-                                    color: "#1a202c",
-                                    border: "2px solid #cbd5e0",
-                                    borderRight: "none",
-                                    boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-                                    textAlign: "center",
-                                  }}
-                                >
-                                  W
-                                </div>
-                                <div
-                                  onClick={(e) =>
-                                    handleAssignBlack(player.id, e)
-                                  }
-                                  style={{
-                                    flex: 1,
-                                    padding: "4px 0",
-                                    borderRadius: "0 12px 12px 0",
-                                    fontSize: "10px",
-                                    fontWeight: "800",
-                                    letterSpacing: "0.5px",
-                                    textTransform: "uppercase",
-                                    cursor: "pointer",
-                                    background:
-                                      "linear-gradient(135deg, #2d3748, #1a202c)",
-                                    color: "#ffffff",
-                                    border: "2px solid #4a5568",
-                                    borderLeft: "none",
-                                    boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-                                    textAlign: "center",
-                                  }}
-                                >
-                                  B
-                                </div>
-                              </div>
-                            ) : (
-                              // Normal state: ASSIGN or SPECTATING button
+                  {whitePlayerId !== player.id && blackPlayerId !== player.id && (
+                    <>
+                      {canAssignPlayers ? (
+                        // Host/local play: show interactive assignment buttons
+                        <>
+                          {hoveredBadge === player.id && clickCooldown !== player.id ? (
+                            // Hover state: split button
+                            <div style={{ display: 'flex', width: '100%' }}>
                               <div
+                                onClick={(e) => handleAssignWhite(player.id, e)}
                                 style={{
-                                  width: "100%",
-                                  padding: "4px 0",
-                                  borderRadius: "12px",
-                                  fontSize: "10px",
-                                  fontWeight: "800",
-                                  letterSpacing: "0.5px",
-                                  textTransform: "uppercase",
-                                  cursor: "pointer",
-                                  background:
-                                    "linear-gradient(135deg, #e5e7eb, #d1d5db)",
-                                  color: "#6b7280",
-                                  border: "2px solid #9ca3af",
-                                  boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-                                  textAlign: "center",
-                                  transition: "none",
+                                  flex: 1,
+                                  padding: '4px 0',
+                                  borderRadius: '12px 0 0 12px',
+                                  fontSize: '10px',
+                                  fontWeight: '800',
+                                  letterSpacing: '0.5px',
+                                  textTransform: 'uppercase',
+                                  cursor: 'pointer',
+                                  background: 'linear-gradient(135deg, #f0f0f0, #ffffff)',
+                                  color: '#1a202c',
+                                  border: '2px solid #cbd5e0',
+                                  borderRight: 'none',
+                                  boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                                  textAlign: 'center',
                                 }}
                               >
-                                {gamePhase === "playing"
-                                  ? "SPECTATING"
-                                  : "ASSIGN"}
+                                W
                               </div>
-                            )}
-                          </>
-                        ) : // Guest in room: show SPECTATING during gameplay, nothing during setup
-                        gamePhase === "playing" ? (
-                          <div
-                            style={{
-                              width: "100%",
-                              padding: "4px 0",
-                              borderRadius: "12px",
-                              fontSize: "10px",
-                              fontWeight: "800",
-                              letterSpacing: "0.5px",
-                              textTransform: "uppercase",
-                              background: "transparent",
-                              color: "#9ca3af",
-                              border: "2px solid transparent",
-                              textAlign: "center",
-                              opacity: 0.5,
-                            }}
-                          >
-                            SPECTATING
-                          </div>
-                        ) : (
-                          // During setup/results: show nothing
-                          <div style={{ width: "100%", height: "28px" }} />
-                        )}
-                      </>
-                    )}
+                              <div
+                                onClick={(e) => handleAssignBlack(player.id, e)}
+                                style={{
+                                  flex: 1,
+                                  padding: '4px 0',
+                                  borderRadius: '0 12px 12px 0',
+                                  fontSize: '10px',
+                                  fontWeight: '800',
+                                  letterSpacing: '0.5px',
+                                  textTransform: 'uppercase',
+                                  cursor: 'pointer',
+                                  background: 'linear-gradient(135deg, #2d3748, #1a202c)',
+                                  color: '#ffffff',
+                                  border: '2px solid #4a5568',
+                                  borderLeft: 'none',
+                                  boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                                  textAlign: 'center',
+                                }}
+                              >
+                                B
+                              </div>
+                            </div>
+                          ) : (
+                            // Normal state: ASSIGN or SPECTATING button
+                            <div
+                              style={{
+                                width: '100%',
+                                padding: '4px 0',
+                                borderRadius: '12px',
+                                fontSize: '10px',
+                                fontWeight: '800',
+                                letterSpacing: '0.5px',
+                                textTransform: 'uppercase',
+                                cursor: 'pointer',
+                                background: 'linear-gradient(135deg, #e5e7eb, #d1d5db)',
+                                color: '#6b7280',
+                                border: '2px solid #9ca3af',
+                                boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                                textAlign: 'center',
+                                transition: 'none',
+                              }}
+                            >
+                              {gamePhase === 'playing' ? 'SPECTATING' : 'ASSIGN'}
+                            </div>
+                          )}
+                        </>
+                      ) : // Guest in room: show SPECTATING during gameplay, nothing during setup
+                      gamePhase === 'playing' ? (
+                        <div
+                          style={{
+                            width: '100%',
+                            padding: '4px 0',
+                            borderRadius: '12px',
+                            fontSize: '10px',
+                            fontWeight: '800',
+                            letterSpacing: '0.5px',
+                            textTransform: 'uppercase',
+                            background: 'transparent',
+                            color: '#9ca3af',
+                            border: '2px solid transparent',
+                            textAlign: 'center',
+                            opacity: 0.5,
+                          }}
+                        >
+                          SPECTATING
+                        </div>
+                      ) : (
+                        // During setup/results: show nothing
+                        <div style={{ width: '100%', height: '28px' }} />
+                      )}
+                    </>
+                  )}
 
                   {/* White player - show SWAP to black on hover */}
                   {whitePlayerId === player.id && (
@@ -533,27 +506,25 @@ export function ActivePlayersList({
                       {canAssignPlayers ? (
                         // Host/local play: show interactive swap
                         <>
-                          {hoveredBadge === player.id &&
-                          clickCooldown !== player.id ? (
+                          {hoveredBadge === player.id && clickCooldown !== player.id ? (
                             // Hover state: SWAP with black styling
                             <div
                               onClick={(e) => handleSwap(player.id, e)}
                               style={{
-                                width: "100%",
-                                padding: "4px 0",
-                                borderRadius: "12px",
-                                fontSize: "10px",
-                                fontWeight: "800",
-                                letterSpacing: "0.5px",
-                                textTransform: "uppercase",
-                                cursor: "pointer",
-                                transition: "all 0.2s ease",
-                                background:
-                                  "linear-gradient(135deg, #2d3748, #1a202c)",
-                                color: "#ffffff",
-                                border: "2px solid #4a5568",
-                                boxShadow: "0 4px 12px rgba(0,0,0,0.25)",
-                                textAlign: "center",
+                                width: '100%',
+                                padding: '4px 0',
+                                borderRadius: '12px',
+                                fontSize: '10px',
+                                fontWeight: '800',
+                                letterSpacing: '0.5px',
+                                textTransform: 'uppercase',
+                                cursor: 'pointer',
+                                transition: 'all 0.2s ease',
+                                background: 'linear-gradient(135deg, #2d3748, #1a202c)',
+                                color: '#ffffff',
+                                border: '2px solid #4a5568',
+                                boxShadow: '0 4px 12px rgba(0,0,0,0.25)',
+                                textAlign: 'center',
                               }}
                             >
                               SWAP
@@ -562,21 +533,20 @@ export function ActivePlayersList({
                             // Normal state: WHITE
                             <div
                               style={{
-                                width: "100%",
-                                padding: "4px 0",
-                                borderRadius: "12px",
-                                fontSize: "10px",
-                                fontWeight: "800",
-                                letterSpacing: "0.5px",
-                                textTransform: "uppercase",
-                                cursor: "pointer",
-                                transition: "all 0.2s ease",
-                                background:
-                                  "linear-gradient(135deg, #f0f0f0, #ffffff)",
-                                color: "#1a202c",
-                                border: "2px solid #cbd5e0",
-                                boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-                                textAlign: "center",
+                                width: '100%',
+                                padding: '4px 0',
+                                borderRadius: '12px',
+                                fontSize: '10px',
+                                fontWeight: '800',
+                                letterSpacing: '0.5px',
+                                textTransform: 'uppercase',
+                                cursor: 'pointer',
+                                transition: 'all 0.2s ease',
+                                background: 'linear-gradient(135deg, #f0f0f0, #ffffff)',
+                                color: '#1a202c',
+                                border: '2px solid #cbd5e0',
+                                boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                                textAlign: 'center',
                               }}
                             >
                               WHITE
@@ -587,20 +557,19 @@ export function ActivePlayersList({
                         // Guest in room: show static WHITE label
                         <div
                           style={{
-                            width: "100%",
-                            padding: "4px 0",
-                            borderRadius: "12px",
-                            fontSize: "10px",
-                            fontWeight: "800",
-                            letterSpacing: "0.5px",
-                            textTransform: "uppercase",
-                            cursor: "default",
-                            background:
-                              "linear-gradient(135deg, #f0f0f0, #ffffff)",
-                            color: "#1a202c",
-                            border: "2px solid #cbd5e0",
-                            boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-                            textAlign: "center",
+                            width: '100%',
+                            padding: '4px 0',
+                            borderRadius: '12px',
+                            fontSize: '10px',
+                            fontWeight: '800',
+                            letterSpacing: '0.5px',
+                            textTransform: 'uppercase',
+                            cursor: 'default',
+                            background: 'linear-gradient(135deg, #f0f0f0, #ffffff)',
+                            color: '#1a202c',
+                            border: '2px solid #cbd5e0',
+                            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                            textAlign: 'center',
                             opacity: 0.8,
                           }}
                         >
@@ -616,27 +585,25 @@ export function ActivePlayersList({
                       {canAssignPlayers ? (
                         // Host/local play: show interactive swap
                         <>
-                          {hoveredBadge === player.id &&
-                          clickCooldown !== player.id ? (
+                          {hoveredBadge === player.id && clickCooldown !== player.id ? (
                             // Hover state: SWAP with white styling
                             <div
                               onClick={(e) => handleSwap(player.id, e)}
                               style={{
-                                width: "100%",
-                                padding: "4px 0",
-                                borderRadius: "12px",
-                                fontSize: "10px",
-                                fontWeight: "800",
-                                letterSpacing: "0.5px",
-                                textTransform: "uppercase",
-                                cursor: "pointer",
-                                transition: "all 0.2s ease",
-                                background:
-                                  "linear-gradient(135deg, #f0f0f0, #ffffff)",
-                                color: "#1a202c",
-                                border: "2px solid #cbd5e0",
-                                boxShadow: "0 4px 12px rgba(0,0,0,0.25)",
-                                textAlign: "center",
+                                width: '100%',
+                                padding: '4px 0',
+                                borderRadius: '12px',
+                                fontSize: '10px',
+                                fontWeight: '800',
+                                letterSpacing: '0.5px',
+                                textTransform: 'uppercase',
+                                cursor: 'pointer',
+                                transition: 'all 0.2s ease',
+                                background: 'linear-gradient(135deg, #f0f0f0, #ffffff)',
+                                color: '#1a202c',
+                                border: '2px solid #cbd5e0',
+                                boxShadow: '0 4px 12px rgba(0,0,0,0.25)',
+                                textAlign: 'center',
                               }}
                             >
                               SWAP
@@ -645,21 +612,20 @@ export function ActivePlayersList({
                             // Normal state: BLACK
                             <div
                               style={{
-                                width: "100%",
-                                padding: "4px 0",
-                                borderRadius: "12px",
-                                fontSize: "10px",
-                                fontWeight: "800",
-                                letterSpacing: "0.5px",
-                                textTransform: "uppercase",
-                                cursor: "pointer",
-                                transition: "all 0.2s ease",
-                                background:
-                                  "linear-gradient(135deg, #2d3748, #1a202c)",
-                                color: "#ffffff",
-                                border: "2px solid #4a5568",
-                                boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-                                textAlign: "center",
+                                width: '100%',
+                                padding: '4px 0',
+                                borderRadius: '12px',
+                                fontSize: '10px',
+                                fontWeight: '800',
+                                letterSpacing: '0.5px',
+                                textTransform: 'uppercase',
+                                cursor: 'pointer',
+                                transition: 'all 0.2s ease',
+                                background: 'linear-gradient(135deg, #2d3748, #1a202c)',
+                                color: '#ffffff',
+                                border: '2px solid #4a5568',
+                                boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                                textAlign: 'center',
                               }}
                             >
                               BLACK
@@ -670,20 +636,19 @@ export function ActivePlayersList({
                         // Guest in room: show static BLACK label
                         <div
                           style={{
-                            width: "100%",
-                            padding: "4px 0",
-                            borderRadius: "12px",
-                            fontSize: "10px",
-                            fontWeight: "800",
-                            letterSpacing: "0.5px",
-                            textTransform: "uppercase",
-                            cursor: "default",
-                            background:
-                              "linear-gradient(135deg, #2d3748, #1a202c)",
-                            color: "#ffffff",
-                            border: "2px solid #4a5568",
-                            boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-                            textAlign: "center",
+                            width: '100%',
+                            padding: '4px 0',
+                            borderRadius: '12px',
+                            fontSize: '10px',
+                            fontWeight: '800',
+                            letterSpacing: '0.5px',
+                            textTransform: 'uppercase',
+                            cursor: 'default',
+                            background: 'linear-gradient(135deg, #2d3748, #1a202c)',
+                            color: '#ffffff',
+                            border: '2px solid #4a5568',
+                            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                            textAlign: 'center',
                             opacity: 0.8,
                           }}
                         >
@@ -696,7 +661,7 @@ export function ActivePlayersList({
               )}
             </div>
           </PlayerTooltip>
-        );
+        )
       })}
 
       {/* Animation styles */}
@@ -748,5 +713,5 @@ export function ActivePlayersList({
         }}
       />
     </>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/AddPlayerButton.tsx b/apps/web/src/components/nav/AddPlayerButton.tsx
index 8588bb59..905e274b 100644
--- a/apps/web/src/components/nav/AddPlayerButton.tsx
+++ b/apps/web/src/components/nav/AddPlayerButton.tsx
@@ -1,36 +1,32 @@
-import React from "react";
-import { useRouter } from "next/navigation";
-import { useToast } from "@/components/common/ToastContext";
-import { InvitePlayersTab } from "./InvitePlayersTab";
-import { PlayOnlineTab } from "./PlayOnlineTab";
-import { addToRecentRooms } from "./RecentRoomsList";
-import {
-  useCreateRoom,
-  useGetRoomByCode,
-  useJoinRoom,
-} from "@/hooks/useRoomData";
+import React from 'react'
+import { useRouter } from 'next/navigation'
+import { useToast } from '@/components/common/ToastContext'
+import { InvitePlayersTab } from './InvitePlayersTab'
+import { PlayOnlineTab } from './PlayOnlineTab'
+import { addToRecentRooms } from './RecentRoomsList'
+import { useCreateRoom, useGetRoomByCode, useJoinRoom } from '@/hooks/useRoomData'
 
 interface Player {
-  id: string;
-  name: string;
-  emoji: string;
+  id: string
+  name: string
+  emoji: string
 }
 
-export type TabType = "add" | "invite";
+export type TabType = 'add' | 'invite'
 
 interface AddPlayerButtonProps {
-  inactivePlayers: Player[];
-  shouldEmphasize: boolean;
-  onAddPlayer: (playerId: string) => void;
+  inactivePlayers: Player[]
+  shouldEmphasize: boolean
+  onAddPlayer: (playerId: string) => void
   // Lifted state from PageWithNav
-  showPopover?: boolean;
-  setShowPopover?: (show: boolean) => void;
-  activeTab?: TabType;
-  setActiveTab?: (tab: TabType) => void;
+  showPopover?: boolean
+  setShowPopover?: (show: boolean) => void
+  activeTab?: TabType
+  setActiveTab?: (tab: TabType) => void
   // Context-aware: show different content based on room state
-  isInRoom?: boolean;
+  isInRoom?: boolean
   // Game info for room creation
-  gameName?: string | null;
+  gameName?: string | null
 }
 
 export function AddPlayerButton({
@@ -44,28 +40,27 @@ export function AddPlayerButton({
   isInRoom = false,
   gameName = null,
 }: AddPlayerButtonProps) {
-  const popoverRef = React.useRef<HTMLDivElement>(null);
-  const router = useRouter();
-  const { showError } = useToast();
+  const popoverRef = React.useRef<HTMLDivElement>(null)
+  const router = useRouter()
+  const { showError } = useToast()
 
   // Use lifted state if provided, otherwise fallback to internal state
-  const [internalShowPopover, setInternalShowPopover] = React.useState(false);
-  const [internalActiveTab, setInternalActiveTab] =
-    React.useState<TabType>("add");
+  const [internalShowPopover, setInternalShowPopover] = React.useState(false)
+  const [internalActiveTab, setInternalActiveTab] = React.useState<TabType>('add')
 
-  const showPopover = showPopoverProp ?? internalShowPopover;
-  const setShowPopover = setShowPopoverProp ?? setInternalShowPopover;
-  const activeTab = activeTabProp ?? internalActiveTab;
-  const setActiveTab = setActiveTabProp ?? setInternalActiveTab;
+  const showPopover = showPopoverProp ?? internalShowPopover
+  const setShowPopover = setShowPopoverProp ?? setInternalShowPopover
+  const activeTab = activeTabProp ?? internalActiveTab
+  const setActiveTab = setActiveTabProp ?? setInternalActiveTab
 
   // Context-aware tab label
-  const secondTabLabel = isInRoom ? "📨 Invite More" : "🌐 Play Online";
-  const secondTabColor = isInRoom ? "#8b5cf6" : "#3b82f6";
+  const secondTabLabel = isInRoom ? '📨 Invite More' : '🌐 Play Online'
+  const secondTabColor = isInRoom ? '#8b5cf6' : '#3b82f6'
 
   // Room creation and joining hooks
-  const { mutate: createRoom } = useCreateRoom();
-  const { mutate: joinRoom } = useJoinRoom();
-  const { mutateAsync: getRoomByCode } = useGetRoomByCode();
+  const { mutate: createRoom } = useCreateRoom()
+  const { mutate: joinRoom } = useJoinRoom()
+  const { mutateAsync: getRoomByCode } = useGetRoomByCode()
 
   // Handler for creating a new room (without a game - game will be selected in room)
   const handleCreateRoom = () => {
@@ -73,7 +68,7 @@ export function AddPlayerButton({
       {
         name: null, // Auto-generated from code
         gameName: null, // No game selected yet - will be chosen in room
-        creatorName: "Player",
+        creatorName: 'Player',
       },
       {
         onSuccess: (data) => {
@@ -82,28 +77,28 @@ export function AddPlayerButton({
             code: data.code,
             name: data.name,
             gameName: data.gameName,
-          });
+          })
           // Close popover and navigate to room to choose game
-          setShowPopover(false);
-          router.push("/arcade");
+          setShowPopover(false)
+          router.push('/arcade')
         },
         onError: (error) => {
-          console.error("Failed to create room:", error);
-          showError("Failed to create room", error.message);
+          console.error('Failed to create room:', error)
+          showError('Failed to create room', error.message)
         },
-      },
-    );
-  };
+      }
+    )
+  }
 
   // Handler for joining a room
   const handleJoinRoom = async (code: string) => {
     try {
       // First, get the room by code to get the roomId
-      const room = await getRoomByCode(code);
+      const room = await getRoomByCode(code)
 
       // Then join the room by ID
       joinRoom(
-        { roomId: room.id, displayName: "Player" },
+        { roomId: room.id, displayName: 'Player' },
         {
           onSuccess: (data) => {
             // Add to recent rooms
@@ -112,92 +107,86 @@ export function AddPlayerButton({
                 code: data.room.code,
                 name: data.room.name,
                 gameName: data.room.gameName,
-              });
+              })
             }
             // Close popover and navigate to room
-            setShowPopover(false);
-            router.push("/arcade");
+            setShowPopover(false)
+            router.push('/arcade')
           },
-        },
-      );
+        }
+      )
     } catch (error) {
-      console.error("Failed to join room:", error);
+      console.error('Failed to join room:', error)
       // Error will be shown by JoinRoomInput validation
     }
-  };
+  }
 
   // Close popover when clicking outside
   React.useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (
-        popoverRef.current &&
-        !popoverRef.current.contains(event.target as Node)
-      ) {
-        setShowPopover(false);
+      if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
+        setShowPopover(false)
       }
-    };
+    }
 
     if (showPopover) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () =>
-        document.removeEventListener("mousedown", handleClickOutside);
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [showPopover, setShowPopover]);
+  }, [showPopover, setShowPopover])
 
   const handleAddPlayerClick = (playerId: string) => {
-    onAddPlayer(playerId);
-    setShowPopover(false);
-  };
+    onAddPlayer(playerId)
+    setShowPopover(false)
+  }
 
   if (!shouldEmphasize || inactivePlayers.length === 0) {
-    return null;
+    return null
   }
 
   return (
-    <div style={{ position: "relative" }} ref={popoverRef}>
+    <div style={{ position: 'relative' }} ref={popoverRef}>
       <button
         type="button"
         onClick={() => setShowPopover(!showPopover)}
         style={{
-          fontSize: "36px",
-          width: "56px",
-          height: "56px",
-          borderRadius: "50%",
-          border: "3px solid #10b981",
+          fontSize: '36px',
+          width: '56px',
+          height: '56px',
+          borderRadius: '50%',
+          border: '3px solid #10b981',
           background: showPopover
-            ? "linear-gradient(135deg, #10b981, #059669)"
-            : "linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.1))",
-          color: showPopover ? "white" : "#10b981",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "pointer",
-          transition: "all 0.3s ease",
+            ? 'linear-gradient(135deg, #10b981, #059669)'
+            : 'linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.1))',
+          color: showPopover ? 'white' : '#10b981',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: 'pointer',
+          transition: 'all 0.3s ease',
           padding: 0,
           lineHeight: 1,
-          fontWeight: "bold",
+          fontWeight: 'bold',
           boxShadow: showPopover
-            ? "0 6px 16px rgba(16, 185, 129, 0.5)"
-            : "0 6px 12px rgba(0,0,0,0.3)",
+            ? '0 6px 16px rgba(16, 185, 129, 0.5)'
+            : '0 6px 12px rgba(0,0,0,0.3)',
           flexShrink: 0,
         }}
         onMouseEnter={(e) => {
           if (!showPopover) {
-            e.currentTarget.style.background =
-              "linear-gradient(135deg, #10b981, #059669)";
-            e.currentTarget.style.color = "white";
-            e.currentTarget.style.transform = "scale(1.08)";
-            e.currentTarget.style.boxShadow =
-              "0 6px 16px rgba(16, 185, 129, 0.5)";
+            e.currentTarget.style.background = 'linear-gradient(135deg, #10b981, #059669)'
+            e.currentTarget.style.color = 'white'
+            e.currentTarget.style.transform = 'scale(1.08)'
+            e.currentTarget.style.boxShadow = '0 6px 16px rgba(16, 185, 129, 0.5)'
           }
         }}
         onMouseLeave={(e) => {
           if (!showPopover) {
             e.currentTarget.style.background =
-              "linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.1))";
-            e.currentTarget.style.color = "#10b981";
-            e.currentTarget.style.transform = "scale(1)";
-            e.currentTarget.style.boxShadow = "0 6px 12px rgba(0,0,0,0.3)";
+              'linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.1))'
+            e.currentTarget.style.color = '#10b981'
+            e.currentTarget.style.transform = 'scale(1)'
+            e.currentTarget.style.boxShadow = '0 6px 12px rgba(0,0,0,0.3)'
           }
         }}
         title="Add player"
@@ -209,54 +198,51 @@ export function AddPlayerButton({
       {showPopover && (
         <div
           style={{
-            position: "absolute",
-            top: "calc(100% + 12px)",
+            position: 'absolute',
+            top: 'calc(100% + 12px)',
             right: 0,
-            background: "white",
-            borderRadius: "12px",
-            boxShadow: "0 10px 40px rgba(0, 0, 0, 0.2)",
-            border: "2px solid #e5e7eb",
-            minWidth: "240px",
+            background: 'white',
+            borderRadius: '12px',
+            boxShadow: '0 10px 40px rgba(0, 0, 0, 0.2)',
+            border: '2px solid #e5e7eb',
+            minWidth: '240px',
             zIndex: 1000,
-            animation: "fadeIn 0.2s ease",
-            overflow: "hidden",
+            animation: 'fadeIn 0.2s ease',
+            overflow: 'hidden',
           }}
         >
           {/* Tab Headers */}
           <div
             style={{
-              display: "flex",
-              borderBottom: "2px solid #e5e7eb",
-              background: "#f9fafb",
+              display: 'flex',
+              borderBottom: '2px solid #e5e7eb',
+              background: '#f9fafb',
             }}
           >
             <button
               type="button"
-              onClick={() => setActiveTab("add")}
+              onClick={() => setActiveTab('add')}
               style={{
                 flex: 1,
-                padding: "10px 16px",
-                background: activeTab === "add" ? "white" : "transparent",
-                border: "none",
-                borderBottom:
-                  activeTab === "add"
-                    ? "2px solid #10b981"
-                    : "2px solid transparent",
-                color: activeTab === "add" ? "#10b981" : "#6b7280",
-                fontSize: "13px",
-                fontWeight: activeTab === "add" ? "700" : "600",
-                cursor: "pointer",
-                transition: "all 0.2s ease",
-                marginBottom: "-2px",
+                padding: '10px 16px',
+                background: activeTab === 'add' ? 'white' : 'transparent',
+                border: 'none',
+                borderBottom: activeTab === 'add' ? '2px solid #10b981' : '2px solid transparent',
+                color: activeTab === 'add' ? '#10b981' : '#6b7280',
+                fontSize: '13px',
+                fontWeight: activeTab === 'add' ? '700' : '600',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
+                marginBottom: '-2px',
               }}
               onMouseEnter={(e) => {
-                if (activeTab !== "add") {
-                  e.currentTarget.style.color = "#374151";
+                if (activeTab !== 'add') {
+                  e.currentTarget.style.color = '#374151'
                 }
               }}
               onMouseLeave={(e) => {
-                if (activeTab !== "add") {
-                  e.currentTarget.style.color = "#6b7280";
+                if (activeTab !== 'add') {
+                  e.currentTarget.style.color = '#6b7280'
                 }
               }}
             >
@@ -264,31 +250,29 @@ export function AddPlayerButton({
             </button>
             <button
               type="button"
-              onClick={() => setActiveTab("invite")}
+              onClick={() => setActiveTab('invite')}
               style={{
                 flex: 1,
-                padding: "10px 16px",
-                background: activeTab === "invite" ? "white" : "transparent",
-                border: "none",
+                padding: '10px 16px',
+                background: activeTab === 'invite' ? 'white' : 'transparent',
+                border: 'none',
                 borderBottom:
-                  activeTab === "invite"
-                    ? `2px solid ${secondTabColor}`
-                    : "2px solid transparent",
-                color: activeTab === "invite" ? secondTabColor : "#6b7280",
-                fontSize: "13px",
-                fontWeight: activeTab === "invite" ? "700" : "600",
-                cursor: "pointer",
-                transition: "all 0.2s ease",
-                marginBottom: "-2px",
+                  activeTab === 'invite' ? `2px solid ${secondTabColor}` : '2px solid transparent',
+                color: activeTab === 'invite' ? secondTabColor : '#6b7280',
+                fontSize: '13px',
+                fontWeight: activeTab === 'invite' ? '700' : '600',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
+                marginBottom: '-2px',
               }}
               onMouseEnter={(e) => {
-                if (activeTab !== "invite") {
-                  e.currentTarget.style.color = "#374151";
+                if (activeTab !== 'invite') {
+                  e.currentTarget.style.color = '#374151'
                 }
               }}
               onMouseLeave={(e) => {
-                if (activeTab !== "invite") {
-                  e.currentTarget.style.color = "#6b7280";
+                if (activeTab !== 'invite') {
+                  e.currentTarget.style.color = '#6b7280'
                 }
               }}
             >
@@ -297,13 +281,13 @@ export function AddPlayerButton({
           </div>
 
           {/* Tab Content */}
-          <div style={{ padding: "12px" }}>
-            {activeTab === "add" && (
+          <div style={{ padding: '12px' }}>
+            {activeTab === 'add' && (
               <div
                 style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "4px",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '4px',
                 }}
               >
                 {inactivePlayers.map((player) => (
@@ -311,32 +295,30 @@ export function AddPlayerButton({
                     key={player.id}
                     onClick={() => handleAddPlayerClick(player.id)}
                     style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "12px",
-                      padding: "8px 12px",
-                      background: "transparent",
-                      border: "none",
-                      borderRadius: "8px",
-                      cursor: "pointer",
-                      transition: "all 0.2s ease",
-                      textAlign: "left",
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '12px',
+                      padding: '8px 12px',
+                      background: 'transparent',
+                      border: 'none',
+                      borderRadius: '8px',
+                      cursor: 'pointer',
+                      transition: 'all 0.2s ease',
+                      textAlign: 'left',
                     }}
                     onMouseEnter={(e) => {
-                      e.currentTarget.style.background = "#f3f4f6";
+                      e.currentTarget.style.background = '#f3f4f6'
                     }}
                     onMouseLeave={(e) => {
-                      e.currentTarget.style.background = "transparent";
+                      e.currentTarget.style.background = 'transparent'
                     }}
                   >
-                    <span style={{ fontSize: "24px", lineHeight: 1 }}>
-                      {player.emoji}
-                    </span>
+                    <span style={{ fontSize: '24px', lineHeight: 1 }}>{player.emoji}</span>
                     <span
                       style={{
-                        fontSize: "14px",
-                        fontWeight: "500",
-                        color: "#1f2937",
+                        fontSize: '14px',
+                        fontWeight: '500',
+                        color: '#1f2937',
                       }}
                     >
                       {player.name}
@@ -346,18 +328,15 @@ export function AddPlayerButton({
               </div>
             )}
 
-            {activeTab === "invite" &&
+            {activeTab === 'invite' &&
               (isInRoom ? (
                 <InvitePlayersTab />
               ) : (
-                <PlayOnlineTab
-                  onCreateRoom={handleCreateRoom}
-                  onJoinRoom={handleJoinRoom}
-                />
+                <PlayOnlineTab onCreateRoom={handleCreateRoom} onJoinRoom={handleJoinRoom} />
               ))}
           </div>
         </div>
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/CreateRoomModal.tsx b/apps/web/src/components/nav/CreateRoomModal.tsx
index 884d501d..e28ea6e4 100644
--- a/apps/web/src/components/nav/CreateRoomModal.tsx
+++ b/apps/web/src/components/nav/CreateRoomModal.tsx
@@ -1,135 +1,129 @@
-import { useState } from "react";
-import * as Select from "@radix-ui/react-select";
-import { animated } from "@react-spring/web";
-import { Modal } from "@/components/common/Modal";
-import { useCreateRoom, useRoomData } from "@/hooks/useRoomData";
-import { getAvailableGames } from "@/lib/arcade/game-registry";
-import { RoomShareButtons } from "./RoomShareButtons";
+import { useState } from 'react'
+import * as Select from '@radix-ui/react-select'
+import { animated } from '@react-spring/web'
+import { Modal } from '@/components/common/Modal'
+import { useCreateRoom, useRoomData } from '@/hooks/useRoomData'
+import { getAvailableGames } from '@/lib/arcade/game-registry'
+import { RoomShareButtons } from './RoomShareButtons'
 
 export interface CreateRoomModalProps {
   /**
    * Whether the modal is open
    */
-  isOpen: boolean;
+  isOpen: boolean
 
   /**
    * Callback when modal should close
    */
-  onClose: () => void;
+  onClose: () => void
 
   /**
    * Optional callback when room is successfully created
    */
-  onSuccess?: () => void;
+  onSuccess?: () => void
 }
 
-type ModalState = "creating" | "created";
+type ModalState = 'creating' | 'created'
 
 /**
  * Modal for creating a new multiplayer room
  */
-export function CreateRoomModal({
-  isOpen,
-  onClose,
-  onSuccess,
-}: CreateRoomModalProps) {
-  const { mutateAsync: createRoom, isPending } = useCreateRoom();
-  const { getRoomShareUrl } = useRoomData();
-  const availableGames = getAvailableGames();
-  const [error, setError] = useState("");
-  const [gameName, setGameName] = useState<string>("__choose_later__"); // Special value = user will choose later
+export function CreateRoomModal({ isOpen, onClose, onSuccess }: CreateRoomModalProps) {
+  const { mutateAsync: createRoom, isPending } = useCreateRoom()
+  const { getRoomShareUrl } = useRoomData()
+  const availableGames = getAvailableGames()
+  const [error, setError] = useState('')
+  const [gameName, setGameName] = useState<string>('__choose_later__') // Special value = user will choose later
   const [accessMode, setAccessMode] = useState<
-    "open" | "password" | "approval-only" | "restricted"
-  >("open");
-  const [password, setPassword] = useState("");
-  const [modalState, setModalState] = useState<ModalState>("creating");
-  const [createdRoomCode, setCreatedRoomCode] = useState<string | null>(null);
+    'open' | 'password' | 'approval-only' | 'restricted'
+  >('open')
+  const [password, setPassword] = useState('')
+  const [modalState, setModalState] = useState<ModalState>('creating')
+  const [createdRoomCode, setCreatedRoomCode] = useState<string | null>(null)
 
   const handleClose = () => {
-    setError("");
-    setGameName("__choose_later__");
-    setAccessMode("open");
-    setPassword("");
-    setModalState("creating");
-    setCreatedRoomCode(null);
-    onClose();
-  };
+    setError('')
+    setGameName('__choose_later__')
+    setAccessMode('open')
+    setPassword('')
+    setModalState('creating')
+    setCreatedRoomCode(null)
+    onClose()
+  }
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setError("");
+    e.preventDefault()
+    setError('')
 
-    const formData = new FormData(e.currentTarget);
-    const nameValue = formData.get("name") as string;
+    const formData = new FormData(e.currentTarget)
+    const nameValue = formData.get('name') as string
 
     // Treat empty name as null
-    const name = nameValue?.trim() || null;
+    const name = nameValue?.trim() || null
 
     // Validate password for password-protected rooms
-    if (accessMode === "password" && !password) {
-      setError("Password is required for password-protected rooms");
-      return;
+    if (accessMode === 'password' && !password) {
+      setError('Password is required for password-protected rooms')
+      return
     }
 
     try {
       // Create the room (creator is auto-added as first member)
       // If no game selected (choose later), use first available game as default
       const selectedGame =
-        gameName === "__choose_later__"
-          ? availableGames[0]?.manifest.name || "matching"
-          : gameName;
+        gameName === '__choose_later__' ? availableGames[0]?.manifest.name || 'matching' : gameName
 
       const newRoom = await createRoom({
         name,
         gameName: selectedGame,
-        creatorName: "Player",
+        creatorName: 'Player',
         gameConfig: { difficulty: 6 },
         accessMode,
-        password: accessMode === "password" ? password : undefined,
-      });
+        password: accessMode === 'password' ? password : undefined,
+      })
 
       // Success! Transition to success view
-      setCreatedRoomCode(newRoom.code);
-      setModalState("created");
+      setCreatedRoomCode(newRoom.code)
+      setModalState('created')
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to create room");
+      setError(err instanceof Error ? err.message : 'Failed to create room')
     }
-  };
+  }
 
   const handleStartPlaying = () => {
-    handleClose();
-    onSuccess?.();
-  };
+    handleClose()
+    onSuccess?.()
+  }
 
-  const shareUrl = createdRoomCode ? getRoomShareUrl(createdRoomCode) : "";
+  const shareUrl = createdRoomCode ? getRoomShareUrl(createdRoomCode) : ''
 
   return (
     <Modal isOpen={isOpen} onClose={handleClose}>
       <div
         style={{
-          border: "2px solid rgba(34, 197, 94, 0.3)",
-          borderRadius: "16px",
-          padding: "24px",
-          transition: "all 0.3s ease",
+          border: '2px solid rgba(34, 197, 94, 0.3)',
+          borderRadius: '16px',
+          padding: '24px',
+          transition: 'all 0.3s ease',
         }}
       >
-        {modalState === "creating" ? (
+        {modalState === 'creating' ? (
           <>
             <h2
               style={{
-                fontSize: "24px",
-                fontWeight: "bold",
-                marginBottom: "8px",
-                color: "rgba(134, 239, 172, 1)",
+                fontSize: '24px',
+                fontWeight: 'bold',
+                marginBottom: '8px',
+                color: 'rgba(134, 239, 172, 1)',
               }}
             >
               Create New Room
             </h2>
             <p
               style={{
-                fontSize: "14px",
-                color: "rgba(209, 213, 219, 0.8)",
-                marginBottom: "24px",
+                fontSize: '14px',
+                color: 'rgba(209, 213, 219, 0.8)',
+                marginBottom: '24px',
               }}
             >
               You'll leave the current room and create a new one
@@ -137,22 +131,22 @@ export function CreateRoomModal({
 
             <form onSubmit={handleSubmit}>
               {/* Room Name */}
-              <div style={{ marginBottom: "16px" }}>
+              <div style={{ marginBottom: '16px' }}>
                 <label
                   style={{
-                    display: "block",
-                    marginBottom: "6px",
-                    fontWeight: "600",
-                    color: "rgba(209, 213, 219, 1)",
-                    fontSize: "13px",
+                    display: 'block',
+                    marginBottom: '6px',
+                    fontWeight: '600',
+                    color: 'rgba(209, 213, 219, 1)',
+                    fontSize: '13px',
                   }}
                 >
-                  Room Name{" "}
+                  Room Name{' '}
                   <span
                     style={{
-                      fontWeight: "400",
-                      color: "rgba(156, 163, 175, 1)",
-                      fontSize: "12px",
+                      fontWeight: '400',
+                      color: 'rgba(156, 163, 175, 1)',
+                      fontSize: '12px',
                     }}
                   >
                     (optional)
@@ -164,89 +158,78 @@ export function CreateRoomModal({
                   placeholder="e.g., Friday Night Games (defaults to: 🎮 CODE)"
                   disabled={isPending}
                   style={{
-                    width: "100%",
-                    padding: "10px 12px",
-                    border: "2px solid rgba(75, 85, 99, 0.5)",
-                    borderRadius: "8px",
-                    background: "rgba(255, 255, 255, 0.05)",
-                    color: "rgba(209, 213, 219, 1)",
-                    fontSize: "14px",
-                    outline: "none",
+                    width: '100%',
+                    padding: '10px 12px',
+                    border: '2px solid rgba(75, 85, 99, 0.5)',
+                    borderRadius: '8px',
+                    background: 'rgba(255, 255, 255, 0.05)',
+                    color: 'rgba(209, 213, 219, 1)',
+                    fontSize: '14px',
+                    outline: 'none',
                   }}
                   onFocus={(e) => {
-                    e.currentTarget.style.borderColor =
-                      "rgba(34, 197, 94, 0.6)";
+                    e.currentTarget.style.borderColor = 'rgba(34, 197, 94, 0.6)'
                   }}
                   onBlur={(e) => {
-                    e.currentTarget.style.borderColor = "rgba(75, 85, 99, 0.5)";
+                    e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
                   }}
                 />
               </div>
 
               {/* Game Selection */}
-              <div style={{ marginBottom: "16px" }}>
+              <div style={{ marginBottom: '16px' }}>
                 <label
                   style={{
-                    display: "block",
-                    marginBottom: "6px",
-                    fontWeight: "600",
-                    color: "rgba(209, 213, 219, 1)",
-                    fontSize: "13px",
+                    display: 'block',
+                    marginBottom: '6px',
+                    fontWeight: '600',
+                    color: 'rgba(209, 213, 219, 1)',
+                    fontSize: '13px',
                   }}
                 >
-                  🎮 Choose Your Game{" "}
+                  🎮 Choose Your Game{' '}
                   <span
                     style={{
-                      fontWeight: "400",
-                      color: "rgba(156, 163, 175, 1)",
-                      fontSize: "12px",
+                      fontWeight: '400',
+                      color: 'rgba(156, 163, 175, 1)',
+                      fontSize: '12px',
                     }}
                   >
                     (optional)
                   </span>
                 </label>
-                <Select.Root
-                  value={gameName}
-                  onValueChange={setGameName}
-                  disabled={isPending}
-                >
+                <Select.Root value={gameName} onValueChange={setGameName} disabled={isPending}>
                   <Select.Trigger
                     style={{
-                      width: "100%",
-                      padding: "12px 14px",
-                      border: "2px solid rgba(75, 85, 99, 0.5)",
-                      borderRadius: "10px",
-                      background: "rgba(255, 255, 255, 0.05)",
-                      color: gameName
-                        ? "rgba(209, 213, 219, 1)"
-                        : "rgba(156, 163, 175, 1)",
-                      fontSize: "14px",
-                      fontWeight: "500",
-                      cursor: isPending ? "not-allowed" : "pointer",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "space-between",
-                      transition: "all 0.2s ease",
-                      outline: "none",
+                      width: '100%',
+                      padding: '12px 14px',
+                      border: '2px solid rgba(75, 85, 99, 0.5)',
+                      borderRadius: '10px',
+                      background: 'rgba(255, 255, 255, 0.05)',
+                      color: gameName ? 'rgba(209, 213, 219, 1)' : 'rgba(156, 163, 175, 1)',
+                      fontSize: '14px',
+                      fontWeight: '500',
+                      cursor: isPending ? 'not-allowed' : 'pointer',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      transition: 'all 0.2s ease',
+                      outline: 'none',
                     }}
                     onMouseEnter={(e) => {
                       if (!isPending) {
-                        e.currentTarget.style.background =
-                          "rgba(255, 255, 255, 0.08)";
-                        e.currentTarget.style.borderColor =
-                          "rgba(34, 197, 94, 0.5)";
+                        e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)'
+                        e.currentTarget.style.borderColor = 'rgba(34, 197, 94, 0.5)'
                       }
                     }}
                     onMouseLeave={(e) => {
-                      e.currentTarget.style.background =
-                        "rgba(255, 255, 255, 0.05)";
-                      e.currentTarget.style.borderColor =
-                        "rgba(75, 85, 99, 0.5)";
+                      e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
+                      e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
                     }}
                   >
                     <Select.Value placeholder="Select a game..." />
                     <Select.Icon>
-                      <span style={{ fontSize: "12px" }}>▼</span>
+                      <span style={{ fontSize: '12px' }}>▼</span>
                     </Select.Icon>
                   </Select.Trigger>
 
@@ -259,45 +242,44 @@ export function CreateRoomModal({
                       collisionPadding={30}
                       avoidCollisions={true}
                       style={{
-                        background:
-                          "linear-gradient(180deg, #1f2937 0%, #111827 100%)",
-                        borderRadius: "12px",
-                        border: "2px solid rgba(34, 197, 94, 0.3)",
-                        padding: "6px",
-                        boxShadow: "0 10px 40px rgba(0, 0, 0, 0.5)",
+                        background: 'linear-gradient(180deg, #1f2937 0%, #111827 100%)',
+                        borderRadius: '12px',
+                        border: '2px solid rgba(34, 197, 94, 0.3)',
+                        padding: '6px',
+                        boxShadow: '0 10px 40px rgba(0, 0, 0, 0.5)',
                         zIndex: 1000,
-                        minWidth: "300px",
-                        maxWidth: "min(400px, 90vw)",
-                        maxHeight: "min(300px, 50vh)",
-                        overflow: "hidden",
-                        position: "relative",
+                        minWidth: '300px',
+                        maxWidth: 'min(400px, 90vw)',
+                        maxHeight: 'min(300px, 50vh)',
+                        overflow: 'hidden',
+                        position: 'relative',
                       }}
                     >
                       <Select.ScrollUpButton asChild>
                         <animated.div
                           style={{
-                            position: "absolute",
-                            top: "6px",
-                            left: "6px",
-                            right: "6px",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            height: "30px",
+                            position: 'absolute',
+                            top: '6px',
+                            left: '6px',
+                            right: '6px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            height: '30px',
                             background:
-                              "linear-gradient(180deg, rgba(31, 41, 55, 0.98) 0%, rgba(31, 41, 55, 0.7) 70%, transparent 100%)",
-                            cursor: "default",
-                            color: "rgba(34, 197, 94, 1)",
-                            fontSize: "14px",
-                            transition: "opacity 0.2s ease",
+                              'linear-gradient(180deg, rgba(31, 41, 55, 0.98) 0%, rgba(31, 41, 55, 0.7) 70%, transparent 100%)',
+                            cursor: 'default',
+                            color: 'rgba(34, 197, 94, 1)',
+                            fontSize: '14px',
+                            transition: 'opacity 0.2s ease',
                             zIndex: 10,
-                            pointerEvents: "auto",
+                            pointerEvents: 'auto',
                           }}
                           onMouseEnter={(e) => {
-                            e.currentTarget.style.opacity = "0.7";
+                            e.currentTarget.style.opacity = '0.7'
                           }}
                           onMouseLeave={(e) => {
-                            e.currentTarget.style.opacity = "1";
+                            e.currentTarget.style.opacity = '1'
                           }}
                         >
                           ▲
@@ -305,65 +287,64 @@ export function CreateRoomModal({
                       </Select.ScrollUpButton>
                       <Select.Viewport
                         style={{
-                          maxHeight: "inherit",
-                          scrollBehavior: "smooth",
-                          overflowY: "auto",
+                          maxHeight: 'inherit',
+                          scrollBehavior: 'smooth',
+                          overflowY: 'auto',
                         }}
                       >
                         <Select.Item
                           value="__choose_later__"
                           style={{
-                            padding: "12px 14px",
-                            borderRadius: "8px",
-                            cursor: "pointer",
-                            outline: "none",
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "10px",
-                            transition: "all 0.15s ease",
+                            padding: '12px 14px',
+                            borderRadius: '8px',
+                            cursor: 'pointer',
+                            outline: 'none',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '10px',
+                            transition: 'all 0.15s ease',
                             background:
-                              gameName === "__choose_later__"
-                                ? "rgba(34, 197, 94, 0.15)"
-                                : "transparent",
-                            color: "rgba(209, 213, 219, 0.9)",
-                            fontSize: "14px",
-                            marginBottom: "4px",
+                              gameName === '__choose_later__'
+                                ? 'rgba(34, 197, 94, 0.15)'
+                                : 'transparent',
+                            color: 'rgba(209, 213, 219, 0.9)',
+                            fontSize: '14px',
+                            marginBottom: '4px',
                           }}
                           onMouseEnter={(e) => {
-                            if (gameName !== "__choose_later__") {
-                              e.currentTarget.style.background =
-                                "rgba(255, 255, 255, 0.08)";
+                            if (gameName !== '__choose_later__') {
+                              e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)'
                             }
                           }}
                           onMouseLeave={(e) => {
-                            if (gameName !== "__choose_later__") {
-                              e.currentTarget.style.background = "transparent";
+                            if (gameName !== '__choose_later__') {
+                              e.currentTarget.style.background = 'transparent'
                             }
                           }}
                         >
                           <Select.ItemText>
                             <div
                               style={{
-                                display: "flex",
-                                alignItems: "center",
-                                gap: "10px",
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '10px',
                               }}
                             >
-                              <span style={{ fontSize: "20px" }}>✨</span>
+                              <span style={{ fontSize: '20px' }}>✨</span>
                               <div>
                                 <div
                                   style={{
-                                    fontWeight: "500",
-                                    fontSize: "14px",
+                                    fontWeight: '500',
+                                    fontSize: '14px',
                                   }}
                                 >
                                   Choose later
                                 </div>
                                 <div
                                   style={{
-                                    fontSize: "12px",
+                                    fontSize: '12px',
                                     opacity: 0.7,
-                                    color: "rgba(156, 163, 175, 1)",
+                                    color: 'rgba(156, 163, 175, 1)',
                                   }}
                                 >
                                   Pick on the game selection page
@@ -375,117 +356,111 @@ export function CreateRoomModal({
 
                         <div
                           style={{
-                            height: "1px",
-                            background: "rgba(75, 85, 99, 0.5)",
-                            margin: "6px 0",
+                            height: '1px',
+                            background: 'rgba(75, 85, 99, 0.5)',
+                            margin: '6px 0',
                           }}
                         />
 
                         {availableGames.map((game) => {
-                          const gameId = game.manifest.name;
+                          const gameId = game.manifest.name
                           // Map game gradients to colors
                           const gradientColors: Record<string, string> = {
-                            pink: "rgba(236, 72, 153, 0.2)",
-                            purple: "rgba(168, 85, 247, 0.2)",
-                            blue: "rgba(59, 130, 246, 0.2)",
-                            green: "rgba(34, 197, 94, 0.2)",
-                            orange: "rgba(249, 115, 22, 0.2)",
-                            red: "rgba(239, 68, 68, 0.2)",
-                          };
+                            pink: 'rgba(236, 72, 153, 0.2)',
+                            purple: 'rgba(168, 85, 247, 0.2)',
+                            blue: 'rgba(59, 130, 246, 0.2)',
+                            green: 'rgba(34, 197, 94, 0.2)',
+                            orange: 'rgba(249, 115, 22, 0.2)',
+                            red: 'rgba(239, 68, 68, 0.2)',
+                          }
                           const bgColor =
-                            gradientColors[game.manifest.gradient || "blue"] ||
-                            gradientColors.blue;
+                            gradientColors[game.manifest.gradient || 'blue'] || gradientColors.blue
 
                           return (
                             <Select.Item
                               key={gameId}
                               value={gameId}
                               style={{
-                                padding: "12px 14px",
-                                borderRadius: "8px",
-                                cursor: "pointer",
-                                outline: "none",
-                                display: "flex",
-                                alignItems: "center",
-                                gap: "12px",
-                                transition: "all 0.15s ease",
-                                background:
-                                  gameName === gameId ? bgColor : "transparent",
-                                marginBottom: "4px",
+                                padding: '12px 14px',
+                                borderRadius: '8px',
+                                cursor: 'pointer',
+                                outline: 'none',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '12px',
+                                transition: 'all 0.15s ease',
+                                background: gameName === gameId ? bgColor : 'transparent',
+                                marginBottom: '4px',
                               }}
                               onMouseEnter={(e) => {
                                 if (gameName !== gameId) {
-                                  e.currentTarget.style.background =
-                                    "rgba(255, 255, 255, 0.05)";
+                                  e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
                                 }
                               }}
                               onMouseLeave={(e) => {
                                 if (gameName !== gameId) {
-                                  e.currentTarget.style.background =
-                                    "transparent";
+                                  e.currentTarget.style.background = 'transparent'
                                 }
                               }}
                             >
                               <Select.ItemText>
                                 <div
                                   style={{
-                                    display: "flex",
-                                    alignItems: "center",
-                                    gap: "12px",
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '12px',
                                   }}
                                 >
-                                  <span style={{ fontSize: "28px" }}>
-                                    {game.manifest.icon}
-                                  </span>
+                                  <span style={{ fontSize: '28px' }}>{game.manifest.icon}</span>
                                   <div style={{ flex: 1 }}>
                                     <div
                                       style={{
-                                        fontWeight: "600",
-                                        fontSize: "15px",
-                                        color: "rgba(209, 213, 219, 1)",
-                                        marginBottom: "2px",
+                                        fontWeight: '600',
+                                        fontSize: '15px',
+                                        color: 'rgba(209, 213, 219, 1)',
+                                        marginBottom: '2px',
                                       }}
                                     >
                                       {game.manifest.displayName}
                                     </div>
                                     <div
                                       style={{
-                                        fontSize: "12px",
-                                        color: "rgba(156, 163, 175, 1)",
-                                        lineHeight: "1.3",
+                                        fontSize: '12px',
+                                        color: 'rgba(156, 163, 175, 1)',
+                                        lineHeight: '1.3',
                                       }}
                                     >
                                       {game.manifest.description}
                                     </div>
                                     <div
                                       style={{
-                                        fontSize: "11px",
-                                        marginTop: "4px",
-                                        display: "flex",
-                                        gap: "8px",
-                                        flexWrap: "wrap",
+                                        fontSize: '11px',
+                                        marginTop: '4px',
+                                        display: 'flex',
+                                        gap: '8px',
+                                        flexWrap: 'wrap',
                                       }}
                                     >
                                       <span
                                         style={{
-                                          background: "rgba(59, 130, 246, 0.2)",
-                                          padding: "2px 8px",
-                                          borderRadius: "4px",
-                                          color: "rgba(147, 197, 253, 1)",
-                                          fontWeight: "500",
+                                          background: 'rgba(59, 130, 246, 0.2)',
+                                          padding: '2px 8px',
+                                          borderRadius: '4px',
+                                          color: 'rgba(147, 197, 253, 1)',
+                                          fontWeight: '500',
                                         }}
                                       >
                                         {game.manifest.maxPlayers === 1
-                                          ? "👤 Solo"
+                                          ? '👤 Solo'
                                           : `👥 ${game.manifest.maxPlayers}p`}
                                       </span>
                                       <span
                                         style={{
-                                          background: "rgba(168, 85, 247, 0.2)",
-                                          padding: "2px 8px",
-                                          borderRadius: "4px",
-                                          color: "rgba(196, 181, 253, 1)",
-                                          fontWeight: "500",
+                                          background: 'rgba(168, 85, 247, 0.2)',
+                                          padding: '2px 8px',
+                                          borderRadius: '4px',
+                                          color: 'rgba(196, 181, 253, 1)',
+                                          fontWeight: '500',
                                         }}
                                       >
                                         {game.manifest.difficulty}
@@ -495,34 +470,34 @@ export function CreateRoomModal({
                                 </div>
                               </Select.ItemText>
                             </Select.Item>
-                          );
+                          )
                         })}
                       </Select.Viewport>
                       <Select.ScrollDownButton asChild>
                         <animated.div
                           style={{
-                            position: "absolute",
-                            bottom: "6px",
-                            left: "6px",
-                            right: "6px",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            height: "30px",
+                            position: 'absolute',
+                            bottom: '6px',
+                            left: '6px',
+                            right: '6px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            height: '30px',
                             background:
-                              "linear-gradient(0deg, rgba(31, 41, 55, 0.98) 0%, rgba(31, 41, 55, 0.7) 70%, transparent 100%)",
-                            cursor: "default",
-                            color: "rgba(34, 197, 94, 1)",
-                            fontSize: "14px",
-                            transition: "opacity 0.2s ease",
+                              'linear-gradient(0deg, rgba(31, 41, 55, 0.98) 0%, rgba(31, 41, 55, 0.7) 70%, transparent 100%)',
+                            cursor: 'default',
+                            color: 'rgba(34, 197, 94, 1)',
+                            fontSize: '14px',
+                            transition: 'opacity 0.2s ease',
                             zIndex: 10,
-                            pointerEvents: "auto",
+                            pointerEvents: 'auto',
                           }}
                           onMouseEnter={(e) => {
-                            e.currentTarget.style.opacity = "0.7";
+                            e.currentTarget.style.opacity = '0.7'
                           }}
                           onMouseLeave={(e) => {
-                            e.currentTarget.style.opacity = "1";
+                            e.currentTarget.style.opacity = '1'
                           }}
                         >
                           ▼
@@ -534,49 +509,49 @@ export function CreateRoomModal({
               </div>
 
               {/* Access Mode Selection */}
-              <div style={{ marginBottom: "16px" }}>
+              <div style={{ marginBottom: '16px' }}>
                 <label
                   style={{
-                    display: "block",
-                    marginBottom: "8px",
-                    fontWeight: "600",
-                    color: "rgba(209, 213, 219, 1)",
-                    fontSize: "13px",
+                    display: 'block',
+                    marginBottom: '8px',
+                    fontWeight: '600',
+                    color: 'rgba(209, 213, 219, 1)',
+                    fontSize: '13px',
                   }}
                 >
                   Who Can Join
                 </label>
                 <div
                   style={{
-                    display: "grid",
-                    gridTemplateColumns: "1fr 1fr",
-                    gap: "8px",
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr',
+                    gap: '8px',
                   }}
                 >
                   {[
                     {
-                      value: "open",
-                      emoji: "🌐",
-                      label: "Open",
-                      desc: "Anyone",
+                      value: 'open',
+                      emoji: '🌐',
+                      label: 'Open',
+                      desc: 'Anyone',
                     },
                     {
-                      value: "password",
-                      emoji: "🔑",
-                      label: "Password",
-                      desc: "With key",
+                      value: 'password',
+                      emoji: '🔑',
+                      label: 'Password',
+                      desc: 'With key',
                     },
                     {
-                      value: "approval-only",
-                      emoji: "✋",
-                      label: "Approval",
-                      desc: "Request",
+                      value: 'approval-only',
+                      emoji: '✋',
+                      label: 'Approval',
+                      desc: 'Request',
                     },
                     {
-                      value: "restricted",
-                      emoji: "🚫",
-                      label: "Restricted",
-                      desc: "Invite only",
+                      value: 'restricted',
+                      emoji: '🚫',
+                      label: 'Restricted',
+                      desc: 'Invite only',
                     },
                   ].map((mode) => (
                     <button
@@ -584,79 +559,71 @@ export function CreateRoomModal({
                       type="button"
                       disabled={isPending}
                       onClick={() => {
-                        setAccessMode(mode.value as typeof accessMode);
-                        if (mode.value !== "password") setPassword("");
+                        setAccessMode(mode.value as typeof accessMode)
+                        if (mode.value !== 'password') setPassword('')
                       }}
                       style={{
-                        padding: "10px 12px",
+                        padding: '10px 12px',
                         background:
                           accessMode === mode.value
-                            ? "rgba(34, 197, 94, 0.15)"
-                            : "rgba(255, 255, 255, 0.05)",
+                            ? 'rgba(34, 197, 94, 0.15)'
+                            : 'rgba(255, 255, 255, 0.05)',
                         border:
                           accessMode === mode.value
-                            ? "2px solid rgba(34, 197, 94, 0.6)"
-                            : "2px solid rgba(75, 85, 99, 0.5)",
-                        borderRadius: "8px",
+                            ? '2px solid rgba(34, 197, 94, 0.6)'
+                            : '2px solid rgba(75, 85, 99, 0.5)',
+                        borderRadius: '8px',
                         color:
                           accessMode === mode.value
-                            ? "rgba(134, 239, 172, 1)"
-                            : "rgba(209, 213, 219, 0.8)",
-                        fontSize: "13px",
-                        fontWeight: "500",
-                        cursor: isPending ? "not-allowed" : "pointer",
+                            ? 'rgba(134, 239, 172, 1)'
+                            : 'rgba(209, 213, 219, 0.8)',
+                        fontSize: '13px',
+                        fontWeight: '500',
+                        cursor: isPending ? 'not-allowed' : 'pointer',
                         opacity: isPending ? 0.5 : 1,
-                        transition: "all 0.2s ease",
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "8px",
+                        transition: 'all 0.2s ease',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '8px',
                       }}
                       onMouseEnter={(e) => {
                         if (!isPending && accessMode !== mode.value) {
-                          e.currentTarget.style.background =
-                            "rgba(255, 255, 255, 0.08)";
-                          e.currentTarget.style.borderColor =
-                            "rgba(34, 197, 94, 0.4)";
+                          e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)'
+                          e.currentTarget.style.borderColor = 'rgba(34, 197, 94, 0.4)'
                         }
                       }}
                       onMouseLeave={(e) => {
                         if (accessMode !== mode.value) {
-                          e.currentTarget.style.background =
-                            "rgba(255, 255, 255, 0.05)";
-                          e.currentTarget.style.borderColor =
-                            "rgba(75, 85, 99, 0.5)";
+                          e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
+                          e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
                         }
                       }}
                     >
-                      <span style={{ fontSize: "18px" }}>{mode.emoji}</span>
+                      <span style={{ fontSize: '18px' }}>{mode.emoji}</span>
                       <div
                         style={{
-                          textAlign: "left",
+                          textAlign: 'left',
                           flex: 1,
-                          lineHeight: "1.2",
+                          lineHeight: '1.2',
                         }}
                       >
-                        <div style={{ fontSize: "13px", fontWeight: "600" }}>
-                          {mode.label}
-                        </div>
-                        <div style={{ fontSize: "11px", opacity: 0.7 }}>
-                          {mode.desc}
-                        </div>
+                        <div style={{ fontSize: '13px', fontWeight: '600' }}>{mode.label}</div>
+                        <div style={{ fontSize: '11px', opacity: 0.7 }}>{mode.desc}</div>
                       </div>
                     </button>
                   ))}
                 </div>
               </div>
 
-              {accessMode === "password" && (
-                <div style={{ marginBottom: "20px" }}>
+              {accessMode === 'password' && (
+                <div style={{ marginBottom: '20px' }}>
                   <label
                     style={{
-                      display: "block",
-                      marginBottom: "8px",
-                      fontWeight: "600",
-                      color: "rgba(209, 213, 219, 1)",
-                      fontSize: "14px",
+                      display: 'block',
+                      marginBottom: '8px',
+                      fontWeight: '600',
+                      color: 'rgba(209, 213, 219, 1)',
+                      fontSize: '14px',
                     }}
                   >
                     Room Password
@@ -668,22 +635,20 @@ export function CreateRoomModal({
                     placeholder="Enter a password"
                     disabled={isPending}
                     style={{
-                      width: "100%",
-                      padding: "12px",
-                      border: "2px solid rgba(75, 85, 99, 0.5)",
-                      borderRadius: "10px",
-                      background: "rgba(255, 255, 255, 0.05)",
-                      color: "rgba(209, 213, 219, 1)",
-                      fontSize: "15px",
-                      outline: "none",
+                      width: '100%',
+                      padding: '12px',
+                      border: '2px solid rgba(75, 85, 99, 0.5)',
+                      borderRadius: '10px',
+                      background: 'rgba(255, 255, 255, 0.05)',
+                      color: 'rgba(209, 213, 219, 1)',
+                      fontSize: '15px',
+                      outline: 'none',
                     }}
                     onFocus={(e) => {
-                      e.currentTarget.style.borderColor =
-                        "rgba(34, 197, 94, 0.6)";
+                      e.currentTarget.style.borderColor = 'rgba(34, 197, 94, 0.6)'
                     }}
                     onBlur={(e) => {
-                      e.currentTarget.style.borderColor =
-                        "rgba(75, 85, 99, 0.5)";
+                      e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
                     }}
                   />
                 </div>
@@ -692,44 +657,42 @@ export function CreateRoomModal({
               {error && (
                 <p
                   style={{
-                    fontSize: "13px",
-                    color: "rgba(248, 113, 113, 1)",
-                    marginBottom: "16px",
-                    textAlign: "center",
+                    fontSize: '13px',
+                    color: 'rgba(248, 113, 113, 1)',
+                    marginBottom: '16px',
+                    textAlign: 'center',
                   }}
                 >
                   {error}
                 </p>
               )}
 
-              <div style={{ display: "flex", gap: "12px" }}>
+              <div style={{ display: 'flex', gap: '12px' }}>
                 <button
                   type="button"
                   onClick={handleClose}
                   disabled={isPending}
                   style={{
                     flex: 1,
-                    padding: "12px",
-                    background: "rgba(75, 85, 99, 0.3)",
-                    color: "rgba(209, 213, 219, 1)",
-                    border: "2px solid rgba(75, 85, 99, 0.5)",
-                    borderRadius: "10px",
-                    fontSize: "15px",
-                    fontWeight: "600",
-                    cursor: isPending ? "not-allowed" : "pointer",
+                    padding: '12px',
+                    background: 'rgba(75, 85, 99, 0.3)',
+                    color: 'rgba(209, 213, 219, 1)',
+                    border: '2px solid rgba(75, 85, 99, 0.5)',
+                    borderRadius: '10px',
+                    fontSize: '15px',
+                    fontWeight: '600',
+                    cursor: isPending ? 'not-allowed' : 'pointer',
                     opacity: isPending ? 0.5 : 1,
-                    transition: "all 0.2s ease",
+                    transition: 'all 0.2s ease',
                   }}
                   onMouseEnter={(e) => {
                     if (!isPending) {
-                      e.currentTarget.style.background =
-                        "rgba(75, 85, 99, 0.4)";
+                      e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
                     }
                   }}
                   onMouseLeave={(e) => {
                     if (!isPending) {
-                      e.currentTarget.style.background =
-                        "rgba(75, 85, 99, 0.3)";
+                      e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
                     }
                   }}
                 >
@@ -740,35 +703,35 @@ export function CreateRoomModal({
                   disabled={isPending}
                   style={{
                     flex: 1,
-                    padding: "12px",
+                    padding: '12px',
                     background: isPending
-                      ? "rgba(75, 85, 99, 0.3)"
-                      : "linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))",
-                    color: "rgba(255, 255, 255, 1)",
+                      ? 'rgba(75, 85, 99, 0.3)'
+                      : 'linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))',
+                    color: 'rgba(255, 255, 255, 1)',
                     border: isPending
-                      ? "2px solid rgba(75, 85, 99, 0.5)"
-                      : "2px solid rgba(34, 197, 94, 0.6)",
-                    borderRadius: "10px",
-                    fontSize: "15px",
-                    fontWeight: "600",
-                    cursor: isPending ? "not-allowed" : "pointer",
+                      ? '2px solid rgba(75, 85, 99, 0.5)'
+                      : '2px solid rgba(34, 197, 94, 0.6)',
+                    borderRadius: '10px',
+                    fontSize: '15px',
+                    fontWeight: '600',
+                    cursor: isPending ? 'not-allowed' : 'pointer',
                     opacity: isPending ? 0.5 : 1,
-                    transition: "all 0.2s ease",
+                    transition: 'all 0.2s ease',
                   }}
                   onMouseEnter={(e) => {
                     if (!isPending) {
                       e.currentTarget.style.background =
-                        "linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9))";
+                        'linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9))'
                     }
                   }}
                   onMouseLeave={(e) => {
                     if (!isPending) {
                       e.currentTarget.style.background =
-                        "linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))";
+                        'linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))'
                     }
                   }}
                 >
-                  {isPending ? "Creating..." : "Create Room"}
+                  {isPending ? 'Creating...' : 'Create Room'}
                 </button>
               </div>
             </form>
@@ -778,15 +741,15 @@ export function CreateRoomModal({
             {/* Success View */}
             <div
               style={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                gap: "20px",
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '20px',
               }}
             >
               <div
                 style={{
-                  fontSize: "48px",
+                  fontSize: '48px',
                   lineHeight: 1,
                 }}
               >
@@ -794,23 +757,23 @@ export function CreateRoomModal({
               </div>
               <div
                 style={{
-                  textAlign: "center",
+                  textAlign: 'center',
                 }}
               >
                 <h2
                   style={{
-                    fontSize: "24px",
-                    fontWeight: "bold",
-                    marginBottom: "8px",
-                    color: "rgba(134, 239, 172, 1)",
+                    fontSize: '24px',
+                    fontWeight: 'bold',
+                    marginBottom: '8px',
+                    color: 'rgba(134, 239, 172, 1)',
                   }}
                 >
                   Room Created!
                 </h2>
                 <p
                   style={{
-                    fontSize: "14px",
-                    color: "rgba(209, 213, 219, 0.8)",
+                    fontSize: '14px',
+                    color: 'rgba(209, 213, 219, 0.8)',
                   }}
                 >
                   Ready to play
@@ -821,37 +784,34 @@ export function CreateRoomModal({
               {createdRoomCode && (
                 <div
                   style={{
-                    width: "100%",
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "8px",
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '8px',
                   }}
                 >
                   <div
                     style={{
-                      fontSize: "12px",
-                      fontWeight: "600",
-                      color: "rgba(156, 163, 175, 1)",
-                      textAlign: "center",
-                      marginBottom: "4px",
+                      fontSize: '12px',
+                      fontWeight: '600',
+                      color: 'rgba(156, 163, 175, 1)',
+                      textAlign: 'center',
+                      marginBottom: '4px',
                     }}
                   >
                     Invite friends (optional)
                   </div>
-                  <RoomShareButtons
-                    joinCode={createdRoomCode}
-                    shareUrl={shareUrl}
-                  />
+                  <RoomShareButtons joinCode={createdRoomCode} shareUrl={shareUrl} />
                 </div>
               )}
 
               {/* Action buttons */}
               <div
                 style={{
-                  display: "flex",
-                  gap: "12px",
-                  width: "100%",
-                  marginTop: "8px",
+                  display: 'flex',
+                  gap: '12px',
+                  width: '100%',
+                  marginTop: '8px',
                 }}
               >
                 <button
@@ -859,21 +819,21 @@ export function CreateRoomModal({
                   onClick={handleClose}
                   style={{
                     flex: 1,
-                    padding: "12px",
-                    background: "rgba(75, 85, 99, 0.3)",
-                    color: "rgba(209, 213, 219, 1)",
-                    border: "2px solid rgba(75, 85, 99, 0.5)",
-                    borderRadius: "10px",
-                    fontSize: "15px",
-                    fontWeight: "600",
-                    cursor: "pointer",
-                    transition: "all 0.2s ease",
+                    padding: '12px',
+                    background: 'rgba(75, 85, 99, 0.3)',
+                    color: 'rgba(209, 213, 219, 1)',
+                    border: '2px solid rgba(75, 85, 99, 0.5)',
+                    borderRadius: '10px',
+                    fontSize: '15px',
+                    fontWeight: '600',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s ease',
                   }}
                   onMouseEnter={(e) => {
-                    e.currentTarget.style.background = "rgba(75, 85, 99, 0.4)";
+                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
                   }}
                   onMouseLeave={(e) => {
-                    e.currentTarget.style.background = "rgba(75, 85, 99, 0.3)";
+                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
                   }}
                 >
                   Close
@@ -883,24 +843,24 @@ export function CreateRoomModal({
                   onClick={handleStartPlaying}
                   style={{
                     flex: 1,
-                    padding: "12px",
+                    padding: '12px',
                     background:
-                      "linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))",
-                    color: "rgba(255, 255, 255, 1)",
-                    border: "2px solid rgba(34, 197, 94, 0.6)",
-                    borderRadius: "10px",
-                    fontSize: "15px",
-                    fontWeight: "600",
-                    cursor: "pointer",
-                    transition: "all 0.2s ease",
+                      'linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))',
+                    color: 'rgba(255, 255, 255, 1)',
+                    border: '2px solid rgba(34, 197, 94, 0.6)',
+                    borderRadius: '10px',
+                    fontSize: '15px',
+                    fontWeight: '600',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s ease',
                   }}
                   onMouseEnter={(e) => {
                     e.currentTarget.style.background =
-                      "linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9))";
+                      'linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9))'
                   }}
                   onMouseLeave={(e) => {
                     e.currentTarget.style.background =
-                      "linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))";
+                      'linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))'
                   }}
                 >
                   Start Playing
@@ -911,5 +871,5 @@ export function CreateRoomModal({
         )}
       </div>
     </Modal>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/FullscreenPlayerSelection.tsx b/apps/web/src/components/nav/FullscreenPlayerSelection.tsx
index 38336089..645c6786 100644
--- a/apps/web/src/components/nav/FullscreenPlayerSelection.tsx
+++ b/apps/web/src/components/nav/FullscreenPlayerSelection.tsx
@@ -1,14 +1,14 @@
 interface Player {
-  id: string;
-  name: string;
-  emoji: string;
+  id: string
+  name: string
+  emoji: string
 }
 
 interface FullscreenPlayerSelectionProps {
-  inactivePlayers: Player[];
-  onSelectPlayer: (playerId: string) => void;
-  onConfigurePlayer: (playerId: string) => void;
-  isVisible: boolean;
+  inactivePlayers: Player[]
+  onSelectPlayer: (playerId: string) => void
+  onConfigurePlayer: (playerId: string) => void
+  isVisible: boolean
 }
 
 export function FullscreenPlayerSelection({
@@ -20,49 +20,49 @@ export function FullscreenPlayerSelection({
   return (
     <div
       style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: "32px",
-        width: isVisible ? "100%" : "0",
-        padding: isVisible ? "40px 20px" : "0",
-        maxHeight: isVisible ? "800px" : "0",
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '32px',
+        width: isVisible ? '100%' : '0',
+        padding: isVisible ? '40px 20px' : '0',
+        maxHeight: isVisible ? '800px' : '0',
         opacity: isVisible ? 1 : 0,
-        overflow: "hidden",
-        transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-        pointerEvents: isVisible ? "auto" : "none",
+        overflow: 'hidden',
+        transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+        pointerEvents: isVisible ? 'auto' : 'none',
       }}
     >
       <div
         style={{
-          textAlign: "center",
-          maxWidth: "600px",
+          textAlign: 'center',
+          maxWidth: '600px',
         }}
       >
         <h2
           style={{
-            fontSize: "28px",
-            fontWeight: "bold",
-            color: "white",
-            marginBottom: "12px",
-            textShadow: "0 2px 10px rgba(0,0,0,0.2)",
+            fontSize: '28px',
+            fontWeight: 'bold',
+            color: 'white',
+            marginBottom: '12px',
+            textShadow: '0 2px 10px rgba(0,0,0,0.2)',
           }}
         >
           👥 Select Your Champions
         </h2>
         <p
           style={{
-            fontSize: "16px",
-            color: "rgba(255, 255, 255, 0.9)",
-            marginBottom: "8px",
+            fontSize: '16px',
+            color: 'rgba(255, 255, 255, 0.9)',
+            marginBottom: '8px',
           }}
         >
           Choose one or more players to begin
         </p>
         <p
           style={{
-            fontSize: "14px",
-            color: "rgba(255, 255, 255, 0.7)",
+            fontSize: '14px',
+            color: 'rgba(255, 255, 255, 0.7)',
           }}
         >
           💡 Select 2+ players for multiplayer battles
@@ -71,49 +71,46 @@ export function FullscreenPlayerSelection({
 
       <div
         style={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
-          gap: "20px",
-          maxWidth: "800px",
-          width: "100%",
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+          gap: '20px',
+          maxWidth: '800px',
+          width: '100%',
         }}
       >
         {inactivePlayers.map((player) => (
           <div
             key={player.id}
             style={{
-              position: "relative",
+              position: 'relative',
             }}
           >
             <button
               onClick={() => onSelectPlayer(player.id)}
               style={{
-                width: "100%",
-                background: "white",
-                borderRadius: "16px",
-                padding: "24px",
-                border: "2px solid rgba(255, 255, 255, 0.3)",
-                cursor: "pointer",
-                transition: "all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-                boxShadow: "0 8px 30px rgba(0, 0, 0, 0.15)",
-                textAlign: "center",
+                width: '100%',
+                background: 'white',
+                borderRadius: '16px',
+                padding: '24px',
+                border: '2px solid rgba(255, 255, 255, 0.3)',
+                cursor: 'pointer',
+                transition: 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+                boxShadow: '0 8px 30px rgba(0, 0, 0, 0.15)',
+                textAlign: 'center',
               }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.transform =
-                  "translateY(-6px) scale(1.03)";
-                e.currentTarget.style.boxShadow =
-                  "0 15px 50px rgba(0, 0, 0, 0.25)";
+                e.currentTarget.style.transform = 'translateY(-6px) scale(1.03)'
+                e.currentTarget.style.boxShadow = '0 15px 50px rgba(0, 0, 0, 0.25)'
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.transform = "translateY(0) scale(1)";
-                e.currentTarget.style.boxShadow =
-                  "0 8px 30px rgba(0, 0, 0, 0.15)";
+                e.currentTarget.style.transform = 'translateY(0) scale(1)'
+                e.currentTarget.style.boxShadow = '0 8px 30px rgba(0, 0, 0, 0.15)'
               }}
             >
               <div
                 style={{
-                  fontSize: "64px",
-                  marginBottom: "12px",
+                  fontSize: '64px',
+                  marginBottom: '12px',
                   lineHeight: 1,
                 }}
               >
@@ -121,23 +118,23 @@ export function FullscreenPlayerSelection({
               </div>
               <div
                 style={{
-                  fontSize: "20px",
-                  fontWeight: "bold",
-                  color: "#1f2937",
-                  marginBottom: "8px",
+                  fontSize: '20px',
+                  fontWeight: 'bold',
+                  color: '#1f2937',
+                  marginBottom: '8px',
                 }}
               >
                 {player.name}
               </div>
               <div
                 style={{
-                  display: "inline-block",
-                  padding: "6px 12px",
-                  background: "linear-gradient(135deg, #10b981, #059669)",
-                  color: "white",
-                  borderRadius: "12px",
-                  fontSize: "12px",
-                  fontWeight: "bold",
+                  display: 'inline-block',
+                  padding: '6px 12px',
+                  background: 'linear-gradient(135deg, #10b981, #059669)',
+                  color: 'white',
+                  borderRadius: '12px',
+                  fontSize: '12px',
+                  fontWeight: 'bold',
                 }}
               >
                 + Select
@@ -147,43 +144,42 @@ export function FullscreenPlayerSelection({
             {/* Subtle gear icon for configuration */}
             <button
               onClick={(e) => {
-                e.stopPropagation();
-                onConfigurePlayer(player.id);
+                e.stopPropagation()
+                onConfigurePlayer(player.id)
               }}
               style={{
-                position: "absolute",
-                top: "8px",
-                right: "8px",
-                width: "32px",
-                height: "32px",
-                borderRadius: "50%",
-                border: "2px solid #e5e7eb",
-                background: "rgba(255, 255, 255, 0.95)",
-                color: "#6b7280",
-                fontSize: "16px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                cursor: "pointer",
-                transition: "all 0.2s ease",
+                position: 'absolute',
+                top: '8px',
+                right: '8px',
+                width: '32px',
+                height: '32px',
+                borderRadius: '50%',
+                border: '2px solid #e5e7eb',
+                background: 'rgba(255, 255, 255, 0.95)',
+                color: '#6b7280',
+                fontSize: '16px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
                 padding: 0,
                 lineHeight: 1,
-                boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+                boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
               }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.background = "white";
-                e.currentTarget.style.borderColor = "#3b82f6";
-                e.currentTarget.style.color = "#3b82f6";
-                e.currentTarget.style.transform = "scale(1.1)";
-                e.currentTarget.style.boxShadow =
-                  "0 4px 12px rgba(59, 130, 246, 0.3)";
+                e.currentTarget.style.background = 'white'
+                e.currentTarget.style.borderColor = '#3b82f6'
+                e.currentTarget.style.color = '#3b82f6'
+                e.currentTarget.style.transform = 'scale(1.1)'
+                e.currentTarget.style.boxShadow = '0 4px 12px rgba(59, 130, 246, 0.3)'
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.background = "rgba(255, 255, 255, 0.95)";
-                e.currentTarget.style.borderColor = "#e5e7eb";
-                e.currentTarget.style.color = "#6b7280";
-                e.currentTarget.style.transform = "scale(1)";
-                e.currentTarget.style.boxShadow = "0 2px 8px rgba(0,0,0,0.1)";
+                e.currentTarget.style.background = 'rgba(255, 255, 255, 0.95)'
+                e.currentTarget.style.borderColor = '#e5e7eb'
+                e.currentTarget.style.color = '#6b7280'
+                e.currentTarget.style.transform = 'scale(1)'
+                e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)'
               }}
               title={`Configure ${player.name}`}
             >
@@ -193,5 +189,5 @@ export function FullscreenPlayerSelection({
         ))}
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/GameContextNav.tsx b/apps/web/src/components/nav/GameContextNav.tsx
index ce4f78e6..cfb15200 100644
--- a/apps/web/src/components/nav/GameContextNav.tsx
+++ b/apps/web/src/components/nav/GameContextNav.tsx
@@ -1,88 +1,88 @@
-import { useRoomData } from "@/hooks/useRoomData";
-import { useViewerId } from "@/hooks/useViewerId";
-import { ActivePlayersList } from "./ActivePlayersList";
-import { AddPlayerButton } from "./AddPlayerButton";
-import { FullscreenPlayerSelection } from "./FullscreenPlayerSelection";
-import { GameModeIndicator } from "./GameModeIndicator";
-import { GameTitleMenu } from "./GameTitleMenu";
-import { NetworkPlayerIndicator } from "./NetworkPlayerIndicator";
-import { PendingInvitations } from "./PendingInvitations";
-import { RoomInfo } from "./RoomInfo";
-import type { PlayerBadge } from "./types";
+import { useRoomData } from '@/hooks/useRoomData'
+import { useViewerId } from '@/hooks/useViewerId'
+import { ActivePlayersList } from './ActivePlayersList'
+import { AddPlayerButton } from './AddPlayerButton'
+import { FullscreenPlayerSelection } from './FullscreenPlayerSelection'
+import { GameModeIndicator } from './GameModeIndicator'
+import { GameTitleMenu } from './GameTitleMenu'
+import { NetworkPlayerIndicator } from './NetworkPlayerIndicator'
+import { PendingInvitations } from './PendingInvitations'
+import { RoomInfo } from './RoomInfo'
+import type { PlayerBadge } from './types'
 
-type GameMode = "none" | "single" | "battle" | "tournament";
+type GameMode = 'none' | 'single' | 'battle' | 'tournament'
 
 interface Player {
-  id: string;
-  name: string;
-  emoji: string;
+  id: string
+  name: string
+  emoji: string
 }
 
 interface NetworkPlayer {
-  id: string;
-  emoji?: string;
-  name?: string;
-  isOnline?: boolean;
-  userId?: string; // The user ID controlling this player
+  id: string
+  emoji?: string
+  name?: string
+  isOnline?: boolean
+  userId?: string // The user ID controlling this player
 }
 
 interface ArcadeRoomInfo {
-  roomId?: string;
-  roomName?: string;
-  gameName: string | null;
-  playerCount: number;
-  joinCode?: string;
+  roomId?: string
+  roomName?: string
+  gameName: string | null
+  playerCount: number
+  joinCode?: string
 }
 
 export interface RosterWarningAction {
-  label: string;
-  onClick: () => void;
-  variant?: "primary" | "danger";
+  label: string
+  onClick: () => void
+  variant?: 'primary' | 'danger'
 }
 
 export interface RosterWarning {
-  heading: string;
-  description: string;
-  actions?: RosterWarningAction[];
+  heading: string
+  description: string
+  actions?: RosterWarningAction[]
 }
 
 interface GameContextNavProps {
-  navTitle: string;
-  navEmoji?: string;
-  gameName?: "matching" | "memory-quiz" | "complement-race";
-  gameMode: GameMode;
-  activePlayers: Player[];
-  inactivePlayers: Player[];
-  shouldEmphasize: boolean;
-  showFullscreenSelection: boolean;
-  onAddPlayer: (playerId: string) => void;
-  onRemovePlayer: (playerId: string) => void;
-  onConfigurePlayer: (playerId: string) => void;
-  onExitSession?: () => void;
-  onSetup?: () => void;
-  onNewGame?: () => void;
+  navTitle: string
+  navEmoji?: string
+  gameName?: 'matching' | 'memory-quiz' | 'complement-race'
+  gameMode: GameMode
+  activePlayers: Player[]
+  inactivePlayers: Player[]
+  shouldEmphasize: boolean
+  showFullscreenSelection: boolean
+  onAddPlayer: (playerId: string) => void
+  onRemovePlayer: (playerId: string) => void
+  onConfigurePlayer: (playerId: string) => void
+  onExitSession?: () => void
+  onSetup?: () => void
+  onNewGame?: () => void
   // Arcade session info
-  networkPlayers?: NetworkPlayer[];
-  roomInfo?: ArcadeRoomInfo;
+  networkPlayers?: NetworkPlayer[]
+  roomInfo?: ArcadeRoomInfo
   // Game state for turn indicator
-  currentPlayerId?: string;
-  playerScores?: Record<string, number>;
-  playerStreaks?: Record<string, number>;
-  playerBadges?: Record<string, PlayerBadge>;
+  currentPlayerId?: string
+  playerScores?: Record<string, number>
+  playerStreaks?: Record<string, number>
+  playerBadges?: Record<string, PlayerBadge>
   // Lifted popover state from PageWithNav
-  showPopover?: boolean;
-  setShowPopover?: (show: boolean) => void;
-  activeTab?: "add" | "invite";
-  setActiveTab?: (tab: "add" | "invite") => void;
+  showPopover?: boolean
+  setShowPopover?: (show: boolean) => void
+  activeTab?: 'add' | 'invite'
+  setActiveTab?: (tab: 'add' | 'invite') => void
   // Game-specific roster warnings
-  rosterWarning?: RosterWarning;
+  rosterWarning?: RosterWarning
   // Side assignments (for 2-player games)
-  whitePlayerId?: string | null;
-  blackPlayerId?: string | null;
-  onAssignWhitePlayer?: (playerId: string | null) => void;
-  onAssignBlackPlayer?: (playerId: string | null) => void;
+  whitePlayerId?: string | null
+  blackPlayerId?: string | null
+  onAssignWhitePlayer?: (playerId: string | null) => void
+  onAssignBlackPlayer?: (playerId: string | null) => void
   // Game phase (for showing spectating vs assign)
-  gamePhase?: "setup" | "playing" | "results";
+  gamePhase?: 'setup' | 'playing' | 'results'
 }
 
 export function GameContextNav({
@@ -118,36 +118,34 @@ export function GameContextNav({
   gamePhase,
 }: GameContextNavProps) {
   // Get current user info for moderation
-  const { data: currentUserId } = useViewerId();
-  const { roomData, refetch: refetchRoomData } = useRoomData();
+  const { data: currentUserId } = useViewerId()
+  const { roomData, refetch: refetchRoomData } = useRoomData()
 
   // Check if current user is the host
-  const currentMember = roomData?.members.find(
-    (m) => m.userId === currentUserId,
-  );
-  const isCurrentUserHost = currentMember?.isCreator ?? false;
+  const currentMember = roomData?.members.find((m) => m.userId === currentUserId)
+  const isCurrentUserHost = currentMember?.isCreator ?? false
 
   // 2x2 grid layout for normal mode, column for fullscreen
   if (showFullscreenSelection) {
     return (
       <div
         style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: "16px",
-          width: "100%",
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '16px',
+          width: '100%',
         }}
       >
         <h1
           style={{
-            fontSize: "32px",
-            fontWeight: "bold",
-            background: "linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)",
-            backgroundClip: "text",
-            color: "transparent",
+            fontSize: '32px',
+            fontWeight: 'bold',
+            background: 'linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)',
+            backgroundClip: 'text',
+            color: 'transparent',
             margin: 0,
-            transition: "font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
+            transition: 'font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
           }}
         >
           {navEmoji && `${navEmoji} `}
@@ -194,13 +192,12 @@ export function GameContextNav({
           }}
         />
       </div>
-    );
+    )
   }
 
   // Completely flat layout: ALL components always mounted, shown/hidden via display
   // This ensures AddPlayerButton never unmounts, preserving its state
-  const showPlayers =
-    activePlayers.length > 0 || (shouldEmphasize && inactivePlayers.length > 0);
+  const showPlayers = activePlayers.length > 0 || (shouldEmphasize && inactivePlayers.length > 0)
 
   return (
     <>
@@ -214,73 +211,72 @@ export function GameContextNav({
       {rosterWarning && (
         <div
           style={{
-            width: "100%",
-            padding: "12px 16px",
+            width: '100%',
+            padding: '12px 16px',
             background:
-              "linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1))",
-            borderLeft: "4px solid #f59e0b",
-            borderRadius: "8px",
-            marginBottom: "12px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "8px",
+              'linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1))',
+            borderLeft: '4px solid #f59e0b',
+            borderRadius: '8px',
+            marginBottom: '12px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
           }}
         >
           <div>
             <h4
               style={{
                 margin: 0,
-                fontSize: "14px",
-                fontWeight: "600",
-                color: "#92400e",
+                fontSize: '14px',
+                fontWeight: '600',
+                color: '#92400e',
               }}
             >
               {rosterWarning.heading}
             </h4>
             <p
               style={{
-                margin: "4px 0 0 0",
-                fontSize: "13px",
-                color: "#78350f",
-                lineHeight: "1.4",
+                margin: '4px 0 0 0',
+                fontSize: '13px',
+                color: '#78350f',
+                lineHeight: '1.4',
               }}
             >
               {rosterWarning.description}
             </p>
           </div>
           {rosterWarning.actions && rosterWarning.actions.length > 0 && (
-            <div style={{ display: "flex", flexWrap: "wrap", gap: "6px" }}>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
               {rosterWarning.actions.map((action, index) => (
                 <button
                   key={index}
                   onClick={action.onClick}
                   style={{
-                    padding: "6px 12px",
-                    fontSize: "12px",
-                    fontWeight: "600",
-                    borderRadius: "6px",
-                    border: "none",
-                    cursor: "pointer",
-                    background:
-                      action.variant === "danger" ? "#dc2626" : "#f59e0b",
-                    color: "white",
-                    transition: "all 0.2s ease",
+                    padding: '6px 12px',
+                    fontSize: '12px',
+                    fontWeight: '600',
+                    borderRadius: '6px',
+                    border: 'none',
+                    cursor: 'pointer',
+                    background: action.variant === 'danger' ? '#dc2626' : '#f59e0b',
+                    color: 'white',
+                    transition: 'all 0.2s ease',
                   }}
                   onMouseOver={(e) => {
                     e.currentTarget.style.background =
-                      action.variant === "danger" ? "#b91c1c" : "#d97706";
+                      action.variant === 'danger' ? '#b91c1c' : '#d97706'
                   }}
                   onMouseOut={(e) => {
                     e.currentTarget.style.background =
-                      action.variant === "danger" ? "#dc2626" : "#f59e0b";
+                      action.variant === 'danger' ? '#dc2626' : '#f59e0b'
                   }}
                   onFocus={(e) => {
                     e.currentTarget.style.background =
-                      action.variant === "danger" ? "#b91c1c" : "#d97706";
+                      action.variant === 'danger' ? '#b91c1c' : '#d97706'
                   }}
                   onBlur={(e) => {
                     e.currentTarget.style.background =
-                      action.variant === "danger" ? "#dc2626" : "#f59e0b";
+                      action.variant === 'danger' ? '#dc2626' : '#f59e0b'
                   }}
                   type="button"
                 >
@@ -294,20 +290,20 @@ export function GameContextNav({
 
       <div
         style={{
-          display: "flex",
-          gap: "20px",
-          alignItems: "center",
-          width: "auto",
-          whiteSpace: "nowrap",
-          overflow: "visible",
+          display: 'flex',
+          gap: '20px',
+          alignItems: 'center',
+          width: 'auto',
+          whiteSpace: 'nowrap',
+          overflow: 'visible',
         }}
       >
         {/* Game Title Section - Always mounted, hidden when in room */}
         <div
           style={{
-            display: roomInfo ? "none" : "flex",
-            alignItems: "center",
-            gap: "12px",
+            display: roomInfo ? 'none' : 'flex',
+            alignItems: 'center',
+            gap: '12px',
             flex: 1,
           }}
         >
@@ -319,7 +315,7 @@ export function GameContextNav({
             onQuit={onExitSession}
             showMenu={true}
           />
-          <div style={{ marginLeft: "auto" }}>
+          <div style={{ marginLeft: 'auto' }}>
             <GameModeIndicator
               gameMode={gameMode}
               shouldEmphasize={shouldEmphasize}
@@ -331,52 +327,52 @@ export function GameContextNav({
         {/* Room Info Section - Always mounted, hidden when not in room */}
         <div
           style={{
-            display: roomInfo ? "flex" : "none",
-            alignItems: "flex-end",
-            gap: "12px",
-            padding: "6px 12px 12px 12px",
+            display: roomInfo ? 'flex' : 'none',
+            alignItems: 'flex-end',
+            gap: '12px',
+            padding: '6px 12px 12px 12px',
             background:
-              "linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05))",
-            borderRadius: "12px",
-            border: "2px solid rgba(255, 255, 255, 0.15)",
-            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
-            transition: "all 0.3s ease",
+              'linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05))',
+            borderRadius: '12px',
+            border: '2px solid rgba(255, 255, 255, 0.15)',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+            transition: 'all 0.3s ease',
           }}
         >
           <RoomInfo
             roomId={roomInfo?.roomId}
             roomName={roomInfo?.roomName}
-            gameName={roomInfo?.gameName ?? ""}
+            gameName={roomInfo?.gameName ?? ''}
             playerCount={roomInfo?.playerCount ?? 0}
             joinCode={roomInfo?.joinCode}
             shouldEmphasize={shouldEmphasize}
             gameMode={gameMode}
             modeColor={
-              gameMode === "battle"
-                ? "#8b5cf6"
-                : gameMode === "single"
-                  ? "#3b82f6"
-                  : gameMode === "tournament"
-                    ? "#f59e0b"
-                    : "#6b7280"
+              gameMode === 'battle'
+                ? '#8b5cf6'
+                : gameMode === 'single'
+                  ? '#3b82f6'
+                  : gameMode === 'tournament'
+                    ? '#f59e0b'
+                    : '#6b7280'
             }
             modeEmoji={
-              gameMode === "battle"
-                ? "⚔️"
-                : gameMode === "single"
-                  ? "🎯"
-                  : gameMode === "tournament"
-                    ? "🏆"
-                    : "👥"
+              gameMode === 'battle'
+                ? '⚔️'
+                : gameMode === 'single'
+                  ? '🎯'
+                  : gameMode === 'tournament'
+                    ? '🏆'
+                    : '👥'
             }
             modeLabel={
-              gameMode === "battle"
-                ? "Battle"
-                : gameMode === "single"
-                  ? "Solo"
-                  : gameMode === "tournament"
-                    ? "Tournament"
-                    : "Select Players"
+              gameMode === 'battle'
+                ? 'Battle'
+                : gameMode === 'single'
+                  ? 'Solo'
+                  : gameMode === 'tournament'
+                    ? 'Tournament'
+                    : 'Select Players'
             }
             navTitle={navTitle}
             navEmoji={navEmoji}
@@ -390,10 +386,10 @@ export function GameContextNav({
             <>
               <div
                 style={{
-                  width: "1px",
-                  height: "48px",
-                  background: "rgba(255, 255, 255, 0.2)",
-                  margin: "0 4px",
+                  width: '1px',
+                  height: '48px',
+                  background: 'rgba(255, 255, 255, 0.2)',
+                  margin: '0 4px',
                 }}
               />
               {networkPlayers.map((player) => (
@@ -423,24 +419,22 @@ export function GameContextNav({
         {/* Player Section - Always mounted, hidden when no players */}
         <div
           style={{
-            display: showPlayers ? "flex" : "none",
-            alignItems: "flex-end",
-            gap: shouldEmphasize ? "12px" : "8px",
-            padding: shouldEmphasize
-              ? "12px 20px 16px 20px"
-              : "6px 12px 12px 12px",
+            display: showPlayers ? 'flex' : 'none',
+            alignItems: 'flex-end',
+            gap: shouldEmphasize ? '12px' : '8px',
+            padding: shouldEmphasize ? '12px 20px 16px 20px' : '6px 12px 12px 12px',
             background: shouldEmphasize
-              ? "linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10))"
-              : "linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05))",
-            borderRadius: shouldEmphasize ? "16px" : "12px",
+              ? 'linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10))'
+              : 'linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05))',
+            borderRadius: shouldEmphasize ? '16px' : '12px',
             border: shouldEmphasize
-              ? "3px solid rgba(255, 255, 255, 0.3)"
-              : "2px solid rgba(255, 255, 255, 0.15)",
+              ? '3px solid rgba(255, 255, 255, 0.3)'
+              : '2px solid rgba(255, 255, 255, 0.15)',
             boxShadow: shouldEmphasize
-              ? "0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255,255,255,0.3)"
-              : "0 4px 12px rgba(0, 0, 0, 0.1)",
-            transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-            transform: shouldEmphasize ? "scale(1.05)" : "scale(1)",
+              ? '0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255,255,255,0.3)'
+              : '0 4px 12px rgba(0, 0, 0, 0.1)',
+            transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+            transform: shouldEmphasize ? 'scale(1.05)' : 'scale(1)',
           }}
         >
           <ActivePlayersList
@@ -470,7 +464,7 @@ export function GameContextNav({
             activeTab={activeTab}
             setActiveTab={setActiveTab}
             isInRoom={!!roomInfo}
-            gameName={gameName || "matching"}
+            gameName={gameName || 'matching'}
           />
         </div>
 
@@ -502,5 +496,5 @@ export function GameContextNav({
         />
       </div>
     </>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/GameControlButtons.tsx b/apps/web/src/components/nav/GameControlButtons.tsx
index 5a7cb1d1..f0554061 100644
--- a/apps/web/src/components/nav/GameControlButtons.tsx
+++ b/apps/web/src/components/nav/GameControlButtons.tsx
@@ -1,85 +1,70 @@
-import type React from "react";
+import type React from 'react'
 
 interface GameControlButtonsProps {
-  onSetup?: () => void;
-  onNewGame?: () => void;
-  onQuit?: () => void;
+  onSetup?: () => void
+  onNewGame?: () => void
+  onQuit?: () => void
 }
 
 // Button configurations matching the refined translucent aesthetic
 const buttonConfigs = {
   setup: {
-    emoji: "⚙️",
-    label: "Setup",
-    color: "#6b7280", // neutral gray
+    emoji: '⚙️',
+    label: 'Setup',
+    color: '#6b7280', // neutral gray
   },
   newGame: {
-    emoji: "🎮",
-    label: "New Game",
-    color: "#3b82f6", // blue
+    emoji: '🎮',
+    label: 'New Game',
+    color: '#3b82f6', // blue
   },
   quit: {
-    emoji: "🏟️",
-    label: "Quit",
-    color: "#f59e0b", // amber/orange
+    emoji: '🏟️',
+    label: 'Quit',
+    color: '#f59e0b', // amber/orange
   },
-};
+}
 
-export function GameControlButtons({
-  onSetup,
-  onNewGame,
-  onQuit,
-}: GameControlButtonsProps) {
-  const createButtonStyle = (
-    color: string,
-    isHovered = false,
-  ): React.CSSProperties => ({
-    background: isHovered
-      ? `linear-gradient(135deg, ${color}30, ${color}40)`
-      : `${color}20`,
-    border: `2px solid ${color}${isHovered ? "60" : "40"}`,
-    borderRadius: "6px",
-    padding: "4px 10px",
-    fontSize: "12px",
-    fontWeight: "bold",
+export function GameControlButtons({ onSetup, onNewGame, onQuit }: GameControlButtonsProps) {
+  const createButtonStyle = (color: string, isHovered = false): React.CSSProperties => ({
+    background: isHovered ? `linear-gradient(135deg, ${color}30, ${color}40)` : `${color}20`,
+    border: `2px solid ${color}${isHovered ? '60' : '40'}`,
+    borderRadius: '6px',
+    padding: '4px 10px',
+    fontSize: '12px',
+    fontWeight: 'bold',
     color: color,
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    gap: "4px",
-    transition: "all 0.2s ease",
-    boxShadow: isHovered ? `0 2px 8px ${color}30` : "none",
-  });
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+    transition: 'all 0.2s ease',
+    boxShadow: isHovered ? `0 2px 8px ${color}30` : 'none',
+  })
 
-  const handleMouseEnter = (
-    e: React.MouseEvent<HTMLButtonElement>,
-    color: string,
-  ) => {
-    const btn = e.currentTarget;
-    btn.style.background = `linear-gradient(135deg, ${color}30, ${color}40)`;
-    btn.style.borderColor = `${color}60`;
-    btn.style.boxShadow = `0 2px 8px ${color}30`;
-    btn.style.transform = "translateY(-1px)";
-  };
+  const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>, color: string) => {
+    const btn = e.currentTarget
+    btn.style.background = `linear-gradient(135deg, ${color}30, ${color}40)`
+    btn.style.borderColor = `${color}60`
+    btn.style.boxShadow = `0 2px 8px ${color}30`
+    btn.style.transform = 'translateY(-1px)'
+  }
 
-  const handleMouseLeave = (
-    e: React.MouseEvent<HTMLButtonElement>,
-    color: string,
-  ) => {
-    const btn = e.currentTarget;
-    btn.style.background = `${color}20`;
-    btn.style.borderColor = `${color}40`;
-    btn.style.boxShadow = "none";
-    btn.style.transform = "translateY(0)";
-  };
+  const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>, color: string) => {
+    const btn = e.currentTarget
+    btn.style.background = `${color}20`
+    btn.style.borderColor = `${color}40`
+    btn.style.boxShadow = 'none'
+    btn.style.transform = 'translateY(0)'
+  }
 
   return (
     <div
       style={{
-        display: "flex",
-        gap: "6px",
-        alignItems: "center",
-        flexWrap: "nowrap",
+        display: 'flex',
+        gap: '6px',
+        alignItems: 'center',
+        flexWrap: 'nowrap',
       }}
     >
       {onSetup && (
@@ -91,10 +76,8 @@ export function GameControlButtons({
           onMouseLeave={(e) => handleMouseLeave(e, buttonConfigs.setup.color)}
           aria-label="Setup game"
         >
-          <span style={{ fontSize: "12px" }}>{buttonConfigs.setup.emoji}</span>
-          <span style={{ whiteSpace: "nowrap" }}>
-            {buttonConfigs.setup.label}
-          </span>
+          <span style={{ fontSize: '12px' }}>{buttonConfigs.setup.emoji}</span>
+          <span style={{ whiteSpace: 'nowrap' }}>{buttonConfigs.setup.label}</span>
         </button>
       )}
 
@@ -107,12 +90,8 @@ export function GameControlButtons({
           onMouseLeave={(e) => handleMouseLeave(e, buttonConfigs.newGame.color)}
           aria-label="Start new game"
         >
-          <span style={{ fontSize: "12px" }}>
-            {buttonConfigs.newGame.emoji}
-          </span>
-          <span style={{ whiteSpace: "nowrap" }}>
-            {buttonConfigs.newGame.label}
-          </span>
+          <span style={{ fontSize: '12px' }}>{buttonConfigs.newGame.emoji}</span>
+          <span style={{ whiteSpace: 'nowrap' }}>{buttonConfigs.newGame.label}</span>
         </button>
       )}
 
@@ -125,12 +104,10 @@ export function GameControlButtons({
           onMouseLeave={(e) => handleMouseLeave(e, buttonConfigs.quit.color)}
           aria-label="Quit to arcade"
         >
-          <span style={{ fontSize: "12px" }}>{buttonConfigs.quit.emoji}</span>
-          <span style={{ whiteSpace: "nowrap" }}>
-            {buttonConfigs.quit.label}
-          </span>
+          <span style={{ fontSize: '12px' }}>{buttonConfigs.quit.emoji}</span>
+          <span style={{ whiteSpace: 'nowrap' }}>{buttonConfigs.quit.label}</span>
         </button>
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/GameModeIndicator.tsx b/apps/web/src/components/nav/GameModeIndicator.tsx
index 063cd8cd..e19a2265 100644
--- a/apps/web/src/components/nav/GameModeIndicator.tsx
+++ b/apps/web/src/components/nav/GameModeIndicator.tsx
@@ -1,52 +1,52 @@
-type GameMode = "none" | "single" | "battle" | "tournament";
+type GameMode = 'none' | 'single' | 'battle' | 'tournament'
 
 interface GameModeIndicatorProps {
-  gameMode: GameMode;
-  shouldEmphasize: boolean;
-  showFullscreenSelection: boolean;
+  gameMode: GameMode
+  shouldEmphasize: boolean
+  showFullscreenSelection: boolean
 }
 
 const gameModeConfig = {
-  none: { label: "Select Players", emoji: "👥", color: "#6b7280" },
-  single: { label: "Solo", emoji: "🎯", color: "#3b82f6" },
-  battle: { label: "Battle", emoji: "⚔️", color: "#8b5cf6" },
-  tournament: { label: "Tournament", emoji: "🏆", color: "#f59e0b" },
-};
+  none: { label: 'Select Players', emoji: '👥', color: '#6b7280' },
+  single: { label: 'Solo', emoji: '🎯', color: '#3b82f6' },
+  battle: { label: 'Battle', emoji: '⚔️', color: '#8b5cf6' },
+  tournament: { label: 'Tournament', emoji: '🏆', color: '#f59e0b' },
+}
 
 export function GameModeIndicator({
   gameMode,
   shouldEmphasize,
   showFullscreenSelection,
 }: GameModeIndicatorProps) {
-  const modeInfo = gameModeConfig[gameMode];
+  const modeInfo = gameModeConfig[gameMode]
 
   return (
     <div
       style={{
-        display: "inline-flex",
-        alignItems: "center",
-        gap: shouldEmphasize ? "10px" : "4px",
-        padding: shouldEmphasize ? "12px 24px" : "4px 8px",
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: shouldEmphasize ? '10px' : '4px',
+        padding: shouldEmphasize ? '12px 24px' : '4px 8px',
         background: shouldEmphasize
           ? `linear-gradient(135deg, ${modeInfo.color}25, ${modeInfo.color}35)`
           : `${modeInfo.color}20`,
-        border: `${shouldEmphasize ? "3px" : "2px"} solid ${modeInfo.color}${shouldEmphasize ? "70" : "40"}`,
-        borderRadius: shouldEmphasize ? "16px" : "6px",
-        fontSize: shouldEmphasize ? "20px" : "12px",
-        fontWeight: "bold",
+        border: `${shouldEmphasize ? '3px' : '2px'} solid ${modeInfo.color}${shouldEmphasize ? '70' : '40'}`,
+        borderRadius: shouldEmphasize ? '16px' : '6px',
+        fontSize: shouldEmphasize ? '20px' : '12px',
+        fontWeight: 'bold',
         color: modeInfo.color,
         boxShadow: shouldEmphasize
           ? `0 6px 20px ${modeInfo.color}40, inset 0 1px 0 rgba(255,255,255,0.3)`
-          : "none",
-        transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-        transform: shouldEmphasize ? "scale(1.05)" : "scale(1)",
+          : 'none',
+        transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+        transform: shouldEmphasize ? 'scale(1.05)' : 'scale(1)',
         lineHeight: 1,
       }}
     >
       <span
         style={{
-          fontSize: shouldEmphasize ? "28px" : "12px",
-          transition: "font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
+          fontSize: shouldEmphasize ? '28px' : '12px',
+          transition: 'font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
           lineHeight: 1,
         }}
       >
@@ -54,5 +54,5 @@ export function GameModeIndicator({
       </span>
       <span style={{ lineHeight: 1 }}>{modeInfo.label}</span>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/GameTitleMenu.tsx b/apps/web/src/components/nav/GameTitleMenu.tsx
index 5b986893..d239de3f 100644
--- a/apps/web/src/components/nav/GameTitleMenu.tsx
+++ b/apps/web/src/components/nav/GameTitleMenu.tsx
@@ -1,13 +1,13 @@
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import React from "react";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import React from 'react'
 
 interface GameTitleMenuProps {
-  navTitle: string;
-  navEmoji?: string;
-  onSetup?: () => void;
-  onNewGame?: () => void;
-  onQuit?: () => void;
-  showMenu: boolean;
+  navTitle: string
+  navEmoji?: string
+  onSetup?: () => void
+  onNewGame?: () => void
+  onQuit?: () => void
+  showMenu: boolean
 }
 
 export function GameTitleMenu({
@@ -18,30 +18,30 @@ export function GameTitleMenu({
   onQuit,
   showMenu,
 }: GameTitleMenuProps) {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(false)
 
   // Don't show dropdown if no menu items
   if (!showMenu) {
     return (
       <h1
         style={{
-          fontSize: "22px",
-          fontWeight: "bold",
-          background: "linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)",
-          backgroundClip: "text",
-          color: "transparent",
+          fontSize: '22px',
+          fontWeight: 'bold',
+          background: 'linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)',
+          backgroundClip: 'text',
+          color: 'transparent',
           margin: 0,
           padding: 0,
-          whiteSpace: "nowrap",
+          whiteSpace: 'nowrap',
           lineHeight: 1,
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
         }}
       >
         {navEmoji && `${navEmoji} `}
         {navTitle}
       </h1>
-    );
+    )
   }
 
   return (
@@ -50,38 +50,38 @@ export function GameTitleMenu({
         <button
           type="button"
           style={{
-            fontSize: "22px",
-            fontWeight: "bold",
-            border: "none",
-            padding: "6px 10px",
-            margin: "-6px -10px",
-            whiteSpace: "nowrap",
-            cursor: "pointer",
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "6px",
-            borderRadius: "8px",
-            background: open ? "rgba(139, 92, 246, 0.08)" : "transparent",
-            transition: "all 0.2s ease",
+            fontSize: '22px',
+            fontWeight: 'bold',
+            border: 'none',
+            padding: '6px 10px',
+            margin: '-6px -10px',
+            whiteSpace: 'nowrap',
+            cursor: 'pointer',
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '6px',
+            borderRadius: '8px',
+            background: open ? 'rgba(139, 92, 246, 0.08)' : 'transparent',
+            transition: 'all 0.2s ease',
             lineHeight: 1,
           }}
           onMouseEnter={(e) => {
             if (!open) {
-              e.currentTarget.style.background = "rgba(139, 92, 246, 0.06)";
+              e.currentTarget.style.background = 'rgba(139, 92, 246, 0.06)'
             }
           }}
           onMouseLeave={(e) => {
             if (!open) {
-              e.currentTarget.style.background = "transparent";
+              e.currentTarget.style.background = 'transparent'
             }
           }}
         >
           <span
             style={{
-              background: "linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)",
-              backgroundClip: "text",
-              WebkitBackgroundClip: "text",
-              color: "transparent",
+              background: 'linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)',
+              backgroundClip: 'text',
+              WebkitBackgroundClip: 'text',
+              color: 'transparent',
               lineHeight: 1,
             }}
           >
@@ -90,13 +90,13 @@ export function GameTitleMenu({
           </span>
           <span
             style={{
-              fontSize: "10px",
-              color: "rgba(139, 92, 246, 0.5)",
-              transition: "transform 0.2s ease",
-              transform: open ? "rotate(180deg)" : "rotate(0deg)",
+              fontSize: '10px',
+              color: 'rgba(139, 92, 246, 0.5)',
+              transition: 'transform 0.2s ease',
+              transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
               lineHeight: 1,
-              display: "flex",
-              alignItems: "center",
+              display: 'flex',
+              alignItems: 'center',
             }}
           >
             ▼
@@ -110,46 +110,44 @@ export function GameTitleMenu({
           align="start"
           sideOffset={8}
           style={{
-            background:
-              "linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))",
-            backdropFilter: "blur(12px)",
-            borderRadius: "12px",
-            padding: "6px",
-            boxShadow:
-              "0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.3)",
-            minWidth: "180px",
+            background: 'linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))',
+            backdropFilter: 'blur(12px)',
+            borderRadius: '12px',
+            padding: '6px',
+            boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.3)',
+            minWidth: '180px',
             zIndex: 9999,
-            animation: "dropdownFadeIn 0.2s ease-out",
+            animation: 'dropdownFadeIn 0.2s ease-out',
           }}
         >
           {onSetup && (
             <DropdownMenu.Item
               onSelect={onSetup}
               style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "10px",
-                padding: "10px 14px",
-                borderRadius: "8px",
-                border: "none",
-                background: "transparent",
-                color: "rgba(209, 213, 219, 1)",
-                fontSize: "14px",
-                fontWeight: "500",
-                cursor: "pointer",
-                outline: "none",
-                transition: "all 0.2s ease",
+                display: 'flex',
+                alignItems: 'center',
+                gap: '10px',
+                padding: '10px 14px',
+                borderRadius: '8px',
+                border: 'none',
+                background: 'transparent',
+                color: 'rgba(209, 213, 219, 1)',
+                fontSize: '14px',
+                fontWeight: '500',
+                cursor: 'pointer',
+                outline: 'none',
+                transition: 'all 0.2s ease',
               }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.background = "rgba(139, 92, 246, 0.2)";
-                e.currentTarget.style.color = "rgba(196, 181, 253, 1)";
+                e.currentTarget.style.background = 'rgba(139, 92, 246, 0.2)'
+                e.currentTarget.style.color = 'rgba(196, 181, 253, 1)'
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.background = "transparent";
-                e.currentTarget.style.color = "rgba(209, 213, 219, 1)";
+                e.currentTarget.style.background = 'transparent'
+                e.currentTarget.style.color = 'rgba(209, 213, 219, 1)'
               }}
             >
-              <span style={{ fontSize: "16px" }}>⚙️</span>
+              <span style={{ fontSize: '16px' }}>⚙️</span>
               <span>Setup</span>
             </DropdownMenu.Item>
           )}
@@ -158,30 +156,30 @@ export function GameTitleMenu({
             <DropdownMenu.Item
               onSelect={onNewGame}
               style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "10px",
-                padding: "10px 14px",
-                borderRadius: "8px",
-                border: "none",
-                background: "transparent",
-                color: "rgba(209, 213, 219, 1)",
-                fontSize: "14px",
-                fontWeight: "500",
-                cursor: "pointer",
-                outline: "none",
-                transition: "all 0.2s ease",
+                display: 'flex',
+                alignItems: 'center',
+                gap: '10px',
+                padding: '10px 14px',
+                borderRadius: '8px',
+                border: 'none',
+                background: 'transparent',
+                color: 'rgba(209, 213, 219, 1)',
+                fontSize: '14px',
+                fontWeight: '500',
+                cursor: 'pointer',
+                outline: 'none',
+                transition: 'all 0.2s ease',
               }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.background = "rgba(59, 130, 246, 0.2)";
-                e.currentTarget.style.color = "rgba(147, 197, 253, 1)";
+                e.currentTarget.style.background = 'rgba(59, 130, 246, 0.2)'
+                e.currentTarget.style.color = 'rgba(147, 197, 253, 1)'
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.background = "transparent";
-                e.currentTarget.style.color = "rgba(209, 213, 219, 1)";
+                e.currentTarget.style.background = 'transparent'
+                e.currentTarget.style.color = 'rgba(209, 213, 219, 1)'
               }}
             >
-              <span style={{ fontSize: "16px" }}>🎮</span>
+              <span style={{ fontSize: '16px' }}>🎮</span>
               <span>New Game</span>
             </DropdownMenu.Item>
           )}
@@ -191,39 +189,39 @@ export function GameTitleMenu({
               {(onSetup || onNewGame) && (
                 <DropdownMenu.Separator
                   style={{
-                    height: "1px",
-                    background: "rgba(75, 85, 99, 0.5)",
-                    margin: "4px 0",
+                    height: '1px',
+                    background: 'rgba(75, 85, 99, 0.5)',
+                    margin: '4px 0',
                   }}
                 />
               )}
               <DropdownMenu.Item
                 onSelect={onQuit}
                 style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "10px",
-                  padding: "10px 14px",
-                  borderRadius: "8px",
-                  border: "none",
-                  background: "transparent",
-                  color: "rgba(209, 213, 219, 1)",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  cursor: "pointer",
-                  outline: "none",
-                  transition: "all 0.2s ease",
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '10px',
+                  padding: '10px 14px',
+                  borderRadius: '8px',
+                  border: 'none',
+                  background: 'transparent',
+                  color: 'rgba(209, 213, 219, 1)',
+                  fontSize: '14px',
+                  fontWeight: '500',
+                  cursor: 'pointer',
+                  outline: 'none',
+                  transition: 'all 0.2s ease',
                 }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.background = "rgba(251, 146, 60, 0.2)";
-                  e.currentTarget.style.color = "rgba(253, 186, 116, 1)";
+                  e.currentTarget.style.background = 'rgba(251, 146, 60, 0.2)'
+                  e.currentTarget.style.color = 'rgba(253, 186, 116, 1)'
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.color = "rgba(209, 213, 219, 1)";
+                  e.currentTarget.style.background = 'transparent'
+                  e.currentTarget.style.color = 'rgba(209, 213, 219, 1)'
                 }}
               >
-                <span style={{ fontSize: "16px" }}>🏟️</span>
+                <span style={{ fontSize: '16px' }}>🏟️</span>
                 <span>Quit to Arcade</span>
               </DropdownMenu.Item>
             </>
@@ -248,5 +246,5 @@ export function GameTitleMenu({
         }}
       />
     </DropdownMenu.Root>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/HistoricalPlayersInvite.tsx b/apps/web/src/components/nav/HistoricalPlayersInvite.tsx
index c76fccb4..70f33d44 100644
--- a/apps/web/src/components/nav/HistoricalPlayersInvite.tsx
+++ b/apps/web/src/components/nav/HistoricalPlayersInvite.tsx
@@ -1,15 +1,15 @@
-import { useState, useEffect } from "react";
-import { useRoomData } from "@/hooks/useRoomData";
-import { useToast } from "@/components/common/ToastContext";
+import { useState, useEffect } from 'react'
+import { useRoomData } from '@/hooks/useRoomData'
+import { useToast } from '@/components/common/ToastContext'
 
 interface HistoricalMember {
-  userId: string;
-  displayName: string;
-  firstJoinedAt: string;
-  lastSeenAt: string;
-  status: "active" | "banned" | "kicked" | "left";
-  isCurrentlyInRoom: boolean;
-  isBanned: boolean;
+  userId: string
+  displayName: string
+  firstJoinedAt: string
+  lastSeenAt: string
+  status: 'active' | 'banned' | 'kicked' | 'left'
+  isCurrentlyInRoom: boolean
+  isBanned: boolean
 }
 
 /**
@@ -17,107 +17,103 @@ interface HistoricalMember {
  * with invite buttons to bring them back
  */
 export function HistoricalPlayersInvite() {
-  const { roomData } = useRoomData();
-  const [historicalMembers, setHistoricalMembers] = useState<
-    HistoricalMember[]
-  >([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [invitingUserId, setInvitingUserId] = useState<string | null>(null);
-  const { showSuccess, showError } = useToast();
+  const { roomData } = useRoomData()
+  const [historicalMembers, setHistoricalMembers] = useState<HistoricalMember[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [invitingUserId, setInvitingUserId] = useState<string | null>(null)
+  const { showSuccess, showError } = useToast()
 
   // Fetch historical members
   useEffect(() => {
-    if (!roomData?.id) return;
+    if (!roomData?.id) return
 
     const loadHistoricalMembers = async () => {
-      setIsLoading(true);
+      setIsLoading(true)
       try {
-        const res = await fetch(`/api/arcade/rooms/${roomData.id}/history`);
+        const res = await fetch(`/api/arcade/rooms/${roomData.id}/history`)
         if (res.ok) {
-          const data = await res.json();
+          const data = await res.json()
           // Filter to only show members who are NOT currently in the room and NOT banned
           const notInRoom = (data.historicalMembers || []).filter(
-            (m: HistoricalMember) => !m.isCurrentlyInRoom && !m.isBanned,
-          );
-          setHistoricalMembers(notInRoom);
+            (m: HistoricalMember) => !m.isCurrentlyInRoom && !m.isBanned
+          )
+          setHistoricalMembers(notInRoom)
         }
       } catch (err) {
-        console.error("Failed to load historical members:", err);
+        console.error('Failed to load historical members:', err)
       } finally {
-        setIsLoading(false);
+        setIsLoading(false)
       }
-    };
+    }
 
-    loadHistoricalMembers();
-  }, [roomData?.id]);
+    loadHistoricalMembers()
+  }, [roomData?.id])
 
   const handleInvite = async (userId: string, displayName: string) => {
-    if (!roomData?.id) return;
+    if (!roomData?.id) return
 
-    setInvitingUserId(userId);
+    setInvitingUserId(userId)
     try {
       const res = await fetch(`/api/arcade/rooms/${roomData.id}/invite`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ userId, userName: displayName }),
-      });
+      })
 
       if (!res.ok) {
-        const errorData = await res.json();
-        throw new Error(errorData.error || "Failed to send invitation");
+        const errorData = await res.json()
+        throw new Error(errorData.error || 'Failed to send invitation')
       }
 
-      showSuccess(`Invitation sent to ${displayName}`);
+      showSuccess(`Invitation sent to ${displayName}`)
 
       // Remove from list after inviting
-      setHistoricalMembers((prev) => prev.filter((m) => m.userId !== userId));
+      setHistoricalMembers((prev) => prev.filter((m) => m.userId !== userId))
     } catch (err) {
-      showError(
-        err instanceof Error ? err.message : "Failed to send invitation",
-      );
+      showError(err instanceof Error ? err.message : 'Failed to send invitation')
     } finally {
-      setInvitingUserId(null);
+      setInvitingUserId(null)
     }
-  };
+  }
 
   if (!roomData?.id) {
-    return null;
+    return null
   }
 
   if (isLoading) {
     return (
       <div
         style={{
-          padding: "16px",
-          textAlign: "center",
-          fontSize: "13px",
-          color: "#6b7280",
+          padding: '16px',
+          textAlign: 'center',
+          fontSize: '13px',
+          color: '#6b7280',
         }}
       >
         Loading past players...
       </div>
-    );
+    )
   }
 
   if (historicalMembers.length === 0) {
-    return null;
+    return null
   }
 
   return (
     <div
       style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "12px",
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
       }}
     >
       <div
         style={{
-          fontSize: "12px",
-          fontWeight: "700",
-          color: "#6b7280",
-          textTransform: "uppercase",
-          letterSpacing: "0.5px",
+          fontSize: '12px',
+          fontWeight: '700',
+          color: '#6b7280',
+          textTransform: 'uppercase',
+          letterSpacing: '0.5px',
         }}
       >
         Past Players
@@ -125,39 +121,39 @@ export function HistoricalPlayersInvite() {
 
       <div
         style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "8px",
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
         }}
       >
         {historicalMembers.map((member) => (
           <div
             key={member.userId}
             style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              padding: "10px 12px",
-              background: "rgba(255, 255, 255, 0.5)",
-              borderRadius: "8px",
-              border: "1px solid rgba(139, 92, 246, 0.2)",
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: '10px 12px',
+              background: 'rgba(255, 255, 255, 0.5)',
+              borderRadius: '8px',
+              border: '1px solid rgba(139, 92, 246, 0.2)',
             }}
           >
             <div style={{ flex: 1 }}>
               <div
                 style={{
-                  fontSize: "14px",
-                  fontWeight: "600",
-                  color: "#1e293b",
+                  fontSize: '14px',
+                  fontWeight: '600',
+                  color: '#1e293b',
                 }}
               >
                 {member.displayName}
               </div>
               <div
                 style={{
-                  fontSize: "11px",
-                  color: "#64748b",
-                  marginTop: "2px",
+                  fontSize: '11px',
+                  color: '#64748b',
+                  marginTop: '2px',
                 }}
               >
                 Last seen: {new Date(member.lastSeenAt).toLocaleDateString()}
@@ -169,41 +165,38 @@ export function HistoricalPlayersInvite() {
               onClick={() => handleInvite(member.userId, member.displayName)}
               disabled={invitingUserId === member.userId}
               style={{
-                padding: "6px 14px",
-                fontSize: "12px",
-                fontWeight: "700",
-                borderRadius: "6px",
-                border: "none",
+                padding: '6px 14px',
+                fontSize: '12px',
+                fontWeight: '700',
+                borderRadius: '6px',
+                border: 'none',
                 background:
                   invitingUserId === member.userId
-                    ? "#d1d5db"
-                    : "linear-gradient(135deg, #8b5cf6, #7c3aed)",
-                color: "white",
-                cursor:
-                  invitingUserId === member.userId ? "not-allowed" : "pointer",
-                transition: "all 0.2s ease",
+                    ? '#d1d5db'
+                    : 'linear-gradient(135deg, #8b5cf6, #7c3aed)',
+                color: 'white',
+                cursor: invitingUserId === member.userId ? 'not-allowed' : 'pointer',
+                transition: 'all 0.2s ease',
                 opacity: invitingUserId === member.userId ? 0.6 : 1,
               }}
               onMouseEnter={(e) => {
                 if (invitingUserId !== member.userId) {
-                  e.currentTarget.style.background =
-                    "linear-gradient(135deg, #7c3aed, #6d28d9)";
-                  e.currentTarget.style.transform = "scale(1.05)";
+                  e.currentTarget.style.background = 'linear-gradient(135deg, #7c3aed, #6d28d9)'
+                  e.currentTarget.style.transform = 'scale(1.05)'
                 }
               }}
               onMouseLeave={(e) => {
                 if (invitingUserId !== member.userId) {
-                  e.currentTarget.style.background =
-                    "linear-gradient(135deg, #8b5cf6, #7c3aed)";
-                  e.currentTarget.style.transform = "scale(1)";
+                  e.currentTarget.style.background = 'linear-gradient(135deg, #8b5cf6, #7c3aed)'
+                  e.currentTarget.style.transform = 'scale(1)'
                 }
               }}
             >
-              {invitingUserId === member.userId ? "Inviting..." : "Invite"}
+              {invitingUserId === member.userId ? 'Inviting...' : 'Invite'}
             </button>
           </div>
         ))}
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/InvitePlayersTab.tsx b/apps/web/src/components/nav/InvitePlayersTab.tsx
index d451873a..92db53ed 100644
--- a/apps/web/src/components/nav/InvitePlayersTab.tsx
+++ b/apps/web/src/components/nav/InvitePlayersTab.tsx
@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useCreateRoom, useRoomData } from "@/hooks/useRoomData";
-import { RoomShareButtons } from "./RoomShareButtons";
-import { HistoricalPlayersInvite } from "./HistoricalPlayersInvite";
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCreateRoom, useRoomData } from '@/hooks/useRoomData'
+import { RoomShareButtons } from './RoomShareButtons'
+import { HistoricalPlayersInvite } from './HistoricalPlayersInvite'
 
 /**
  * Tab content for inviting players to a room
@@ -13,90 +13,74 @@ import { HistoricalPlayersInvite } from "./HistoricalPlayersInvite";
  * - Shows error state if room creation fails
  */
 export function InvitePlayersTab() {
-  const {
-    roomData,
-    isInRoom,
-    getRoomShareUrl,
-    isLoading: isRoomDataLoading,
-  } = useRoomData();
-  const { mutateAsync: createRoom, isPending: isCreating } = useCreateRoom();
-  const [error, setError] = useState<string | null>(null);
-  const hasAttemptedCreation = useRef(false);
+  const { roomData, isInRoom, getRoomShareUrl, isLoading: isRoomDataLoading } = useRoomData()
+  const { mutateAsync: createRoom, isPending: isCreating } = useCreateRoom()
+  const [error, setError] = useState<string | null>(null)
+  const hasAttemptedCreation = useRef(false)
 
   // Lazy room creation: only create if not already in a room
   const createQuickRoom = useCallback(async () => {
-    if (
-      isRoomDataLoading ||
-      isInRoom ||
-      isCreating ||
-      hasAttemptedCreation.current
-    ) {
-      return; // Already in a room, loading, creating, or already attempted
+    if (isRoomDataLoading || isInRoom || isCreating || hasAttemptedCreation.current) {
+      return // Already in a room, loading, creating, or already attempted
     }
 
-    hasAttemptedCreation.current = true;
-    setError(null);
+    hasAttemptedCreation.current = true
+    setError(null)
 
     try {
       await createRoom({
-        name: "Quick Room",
-        gameName: "matching",
-        creatorName: "Player",
+        name: 'Quick Room',
+        gameName: 'matching',
+        creatorName: 'Player',
         gameConfig: {
           difficulty: 6,
-          gameType: "abacus-numeral",
+          gameType: 'abacus-numeral',
           turnTimer: 30,
         },
-      });
+      })
       // Room will be automatically updated in cache by the mutation's onSuccess
     } catch (err) {
-      console.error("[InvitePlayersTab] Failed to create room:", err);
-      setError(err instanceof Error ? err.message : "Failed to create room");
-      hasAttemptedCreation.current = false; // Allow retry on error
+      console.error('[InvitePlayersTab] Failed to create room:', err)
+      setError(err instanceof Error ? err.message : 'Failed to create room')
+      hasAttemptedCreation.current = false // Allow retry on error
     }
-  }, [isRoomDataLoading, isInRoom, isCreating, createRoom]);
+  }, [isRoomDataLoading, isInRoom, isCreating, createRoom])
 
   // Auto-create room on mount if not in one
   useEffect(() => {
-    if (
-      !isRoomDataLoading &&
-      !isInRoom &&
-      !isCreating &&
-      !error &&
-      !hasAttemptedCreation.current
-    ) {
-      createQuickRoom();
+    if (!isRoomDataLoading && !isInRoom && !isCreating && !error && !hasAttemptedCreation.current) {
+      createQuickRoom()
     }
-  }, [isRoomDataLoading, isInRoom, isCreating, error, createQuickRoom]);
+  }, [isRoomDataLoading, isInRoom, isCreating, error, createQuickRoom])
 
   // Loading state - show loading only if we're truly loading and not in a room yet
   if ((isRoomDataLoading || isCreating) && !isInRoom && !error) {
     return (
       <div
         style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: "24px 16px",
-          gap: "12px",
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '24px 16px',
+          gap: '12px',
         }}
       >
         <div
           style={{
-            width: "32px",
-            height: "32px",
-            border: "3px solid rgba(139, 92, 246, 0.3)",
-            borderTop: "3px solid rgba(139, 92, 246, 1)",
-            borderRadius: "50%",
-            animation: "spin 0.8s linear infinite",
+            width: '32px',
+            height: '32px',
+            border: '3px solid rgba(139, 92, 246, 0.3)',
+            borderTop: '3px solid rgba(139, 92, 246, 1)',
+            borderRadius: '50%',
+            animation: 'spin 0.8s linear infinite',
           }}
         />
         <div
           style={{
-            fontSize: "13px",
-            color: "#6b7280",
-            fontWeight: "500",
+            fontSize: '13px',
+            color: '#6b7280',
+            fontWeight: '500',
           }}
         >
           Creating room...
@@ -112,7 +96,7 @@ export function InvitePlayersTab() {
           }}
         />
       </div>
-    );
+    )
   }
 
   // Error state
@@ -120,20 +104,20 @@ export function InvitePlayersTab() {
     return (
       <div
         style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          padding: "20px 16px",
-          gap: "12px",
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          padding: '20px 16px',
+          gap: '12px',
         }}
       >
-        <div style={{ fontSize: "32px" }}>⚠️</div>
+        <div style={{ fontSize: '32px' }}>⚠️</div>
         <div
           style={{
-            fontSize: "13px",
-            color: "#ef4444",
-            fontWeight: "500",
-            textAlign: "center",
+            fontSize: '13px',
+            color: '#ef4444',
+            fontWeight: '500',
+            textAlign: 'center',
           }}
         >
           {error}
@@ -141,58 +125,57 @@ export function InvitePlayersTab() {
         <button
           type="button"
           onClick={() => {
-            setError(null);
-            createQuickRoom();
+            setError(null)
+            createQuickRoom()
           }}
           style={{
-            padding: "8px 16px",
-            background:
-              "linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.3))",
-            border: "2px solid rgba(139, 92, 246, 0.4)",
-            borderRadius: "8px",
-            color: "#8b5cf6",
-            fontSize: "13px",
-            fontWeight: "600",
-            cursor: "pointer",
-            transition: "all 0.2s ease",
+            padding: '8px 16px',
+            background: 'linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.3))',
+            border: '2px solid rgba(139, 92, 246, 0.4)',
+            borderRadius: '8px',
+            color: '#8b5cf6',
+            fontSize: '13px',
+            fontWeight: '600',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
           }}
           onMouseEnter={(e) => {
             e.currentTarget.style.background =
-              "linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.4))";
-            e.currentTarget.style.borderColor = "rgba(139, 92, 246, 0.6)";
+              'linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.4))'
+            e.currentTarget.style.borderColor = 'rgba(139, 92, 246, 0.6)'
           }}
           onMouseLeave={(e) => {
             e.currentTarget.style.background =
-              "linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.3))";
-            e.currentTarget.style.borderColor = "rgba(139, 92, 246, 0.4)";
+              'linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.3))'
+            e.currentTarget.style.borderColor = 'rgba(139, 92, 246, 0.4)'
           }}
         >
           Try Again
         </button>
       </div>
-    );
+    )
   }
 
   // Success state: Show room share buttons
   if (isInRoom && roomData) {
-    const shareUrl = getRoomShareUrl(roomData.code);
+    const shareUrl = getRoomShareUrl(roomData.code)
 
     return (
       <div
         style={{
-          display: "flex",
-          flexDirection: "column",
-          padding: "12px 8px 8px 8px",
-          gap: "8px",
+          display: 'flex',
+          flexDirection: 'column',
+          padding: '12px 8px 8px 8px',
+          gap: '8px',
         }}
       >
         <div
           style={{
-            fontSize: "11px",
-            fontWeight: "600",
-            color: "#6b7280",
-            textAlign: "center",
-            marginBottom: "4px",
+            fontSize: '11px',
+            fontWeight: '600',
+            color: '#6b7280',
+            textAlign: 'center',
+            marginBottom: '4px',
           }}
         >
           Share to invite players
@@ -200,13 +183,13 @@ export function InvitePlayersTab() {
         <RoomShareButtons joinCode={roomData.code} shareUrl={shareUrl} />
 
         {/* Historical players who can be invited back */}
-        <div style={{ marginTop: "8px" }}>
+        <div style={{ marginTop: '8px' }}>
           <HistoricalPlayersInvite />
         </div>
       </div>
-    );
+    )
   }
 
   // Fallback (should not reach here)
-  return null;
+  return null
 }
diff --git a/apps/web/src/components/nav/JoinRoomInput.tsx b/apps/web/src/components/nav/JoinRoomInput.tsx
index a53f18db..5b5d8249 100644
--- a/apps/web/src/components/nav/JoinRoomInput.tsx
+++ b/apps/web/src/components/nav/JoinRoomInput.tsx
@@ -1,104 +1,103 @@
-import React from "react";
+import React from 'react'
 
 interface JoinRoomInputProps {
-  onJoin: (code: string) => void;
+  onJoin: (code: string) => void
 }
 
-type ValidationState = "idle" | "checking" | "valid" | "invalid";
+type ValidationState = 'idle' | 'checking' | 'valid' | 'invalid'
 
 export function JoinRoomInput({ onJoin }: JoinRoomInputProps) {
-  const [code, setCode] = React.useState("");
-  const [validationState, setValidationState] =
-    React.useState<ValidationState>("idle");
-  const [error, setError] = React.useState<string>("");
-  const inputRef = React.useRef<HTMLInputElement>(null);
+  const [code, setCode] = React.useState('')
+  const [validationState, setValidationState] = React.useState<ValidationState>('idle')
+  const [error, setError] = React.useState<string>('')
+  const inputRef = React.useRef<HTMLInputElement>(null)
 
   // Format code as user types: ABC123 → ABC-123
   const formatCode = (value: string): string => {
-    const cleaned = value.toUpperCase().replace(/[^A-Z0-9]/g, "");
-    if (cleaned.length <= 3) return cleaned;
-    return `${cleaned.slice(0, 3)}-${cleaned.slice(3, 6)}`;
-  };
+    const cleaned = value.toUpperCase().replace(/[^A-Z0-9]/g, '')
+    if (cleaned.length <= 3) return cleaned
+    return `${cleaned.slice(0, 3)}-${cleaned.slice(3, 6)}`
+  }
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const formatted = formatCode(e.target.value);
-    setCode(formatted);
-    setError("");
+    const formatted = formatCode(e.target.value)
+    setCode(formatted)
+    setError('')
 
     // Reset validation when user types
-    if (validationState !== "idle") {
-      setValidationState("idle");
+    if (validationState !== 'idle') {
+      setValidationState('idle')
     }
 
     // Auto-validate when 6 characters entered
-    const cleanCode = formatted.replace("-", "");
+    const cleanCode = formatted.replace('-', '')
     if (cleanCode.length === 6) {
-      validateCode(cleanCode);
+      validateCode(cleanCode)
     }
-  };
+  }
 
   const validateCode = async (codeToValidate: string) => {
-    setValidationState("checking");
+    setValidationState('checking')
 
     try {
       // Check if room exists via API
-      const response = await fetch(`/api/arcade/rooms/code/${codeToValidate}`);
+      const response = await fetch(`/api/arcade/rooms/code/${codeToValidate}`)
 
       if (response.ok) {
-        setValidationState("valid");
+        setValidationState('valid')
       } else {
-        setValidationState("invalid");
-        setError("Room not found");
+        setValidationState('invalid')
+        setError('Room not found')
       }
     } catch (err) {
-      setValidationState("invalid");
-      setError("Unable to validate code");
+      setValidationState('invalid')
+      setError('Unable to validate code')
     }
-  };
+  }
 
   const handleJoin = () => {
-    const cleanCode = code.replace("-", "");
-    if (cleanCode.length === 6 && validationState === "valid") {
-      onJoin(cleanCode);
+    const cleanCode = code.replace('-', '')
+    if (cleanCode.length === 6 && validationState === 'valid') {
+      onJoin(cleanCode)
     }
-  };
+  }
 
   const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && validationState === "valid") {
-      handleJoin();
+    if (e.key === 'Enter' && validationState === 'valid') {
+      handleJoin()
     }
-  };
+  }
 
   // Visual state colors
   const getBorderColor = () => {
     switch (validationState) {
-      case "valid":
-        return "#10b981";
-      case "invalid":
-        return "#ef4444";
-      case "checking":
-        return "#3b82f6";
+      case 'valid':
+        return '#10b981'
+      case 'invalid':
+        return '#ef4444'
+      case 'checking':
+        return '#3b82f6'
       default:
-        return "#e5e7eb";
+        return '#e5e7eb'
     }
-  };
+  }
 
   const getIcon = () => {
     switch (validationState) {
-      case "valid":
-        return "✅";
-      case "invalid":
-        return "❌";
-      case "checking":
-        return "🔄";
+      case 'valid':
+        return '✅'
+      case 'invalid':
+        return '❌'
+      case 'checking':
+        return '🔄'
       default:
-        return "";
+        return ''
     }
-  };
+  }
 
   return (
     <div>
-      <div style={{ position: "relative" }}>
+      <div style={{ position: 'relative' }}>
         <input
           ref={inputRef}
           type="text"
@@ -108,33 +107,30 @@ export function JoinRoomInput({ onJoin }: JoinRoomInputProps) {
           placeholder="ABC-123"
           maxLength={7} // ABC-123
           style={{
-            width: "100%",
-            padding: "12px 40px 12px 12px",
-            fontSize: "16px",
-            fontWeight: "600",
-            letterSpacing: "2px",
-            textAlign: "center",
+            width: '100%',
+            padding: '12px 40px 12px 12px',
+            fontSize: '16px',
+            fontWeight: '600',
+            letterSpacing: '2px',
+            textAlign: 'center',
             border: `2px solid ${getBorderColor()}`,
-            borderRadius: "8px",
-            outline: "none",
-            transition: "all 0.2s ease",
-            fontFamily: "monospace",
+            borderRadius: '8px',
+            outline: 'none',
+            transition: 'all 0.2s ease',
+            fontFamily: 'monospace',
           }}
         />
 
         {/* Validation Icon */}
-        {validationState !== "idle" && (
+        {validationState !== 'idle' && (
           <div
             style={{
-              position: "absolute",
-              right: "12px",
-              top: "50%",
-              transform: "translateY(-50%)",
-              fontSize: "18px",
-              animation:
-                validationState === "checking"
-                  ? "spin 1s linear infinite"
-                  : "none",
+              position: 'absolute',
+              right: '12px',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              fontSize: '18px',
+              animation: validationState === 'checking' ? 'spin 1s linear infinite' : 'none',
             }}
           >
             {getIcon()}
@@ -146,10 +142,10 @@ export function JoinRoomInput({ onJoin }: JoinRoomInputProps) {
       {error && (
         <div
           style={{
-            marginTop: "6px",
-            fontSize: "12px",
-            color: "#ef4444",
-            textAlign: "center",
+            marginTop: '6px',
+            fontSize: '12px',
+            color: '#ef4444',
+            textAlign: 'center',
           }}
         >
           {error}
@@ -157,33 +153,31 @@ export function JoinRoomInput({ onJoin }: JoinRoomInputProps) {
       )}
 
       {/* Join button */}
-      {validationState === "valid" && (
+      {validationState === 'valid' && (
         <button
           type="button"
           onClick={handleJoin}
           style={{
-            width: "100%",
-            marginTop: "8px",
-            padding: "10px 16px",
-            background: "linear-gradient(135deg, #3b82f6, #2563eb)",
-            border: "none",
-            borderRadius: "8px",
-            color: "white",
-            fontSize: "14px",
-            fontWeight: "600",
-            cursor: "pointer",
-            transition: "all 0.2s ease",
-            boxShadow: "0 2px 4px rgba(59, 130, 246, 0.3)",
+            width: '100%',
+            marginTop: '8px',
+            padding: '10px 16px',
+            background: 'linear-gradient(135deg, #3b82f6, #2563eb)',
+            border: 'none',
+            borderRadius: '8px',
+            color: 'white',
+            fontSize: '14px',
+            fontWeight: '600',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
+            boxShadow: '0 2px 4px rgba(59, 130, 246, 0.3)',
           }}
           onMouseEnter={(e) => {
-            e.currentTarget.style.transform = "translateY(-1px)";
-            e.currentTarget.style.boxShadow =
-              "0 4px 8px rgba(59, 130, 246, 0.4)";
+            e.currentTarget.style.transform = 'translateY(-1px)'
+            e.currentTarget.style.boxShadow = '0 4px 8px rgba(59, 130, 246, 0.4)'
           }}
           onMouseLeave={(e) => {
-            e.currentTarget.style.transform = "translateY(0)";
-            e.currentTarget.style.boxShadow =
-              "0 2px 4px rgba(59, 130, 246, 0.3)";
+            e.currentTarget.style.transform = 'translateY(0)'
+            e.currentTarget.style.boxShadow = '0 2px 4px rgba(59, 130, 246, 0.3)'
           }}
         >
           🚀 Join Room
@@ -201,5 +195,5 @@ export function JoinRoomInput({ onJoin }: JoinRoomInputProps) {
         }}
       />
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/JoinRoomModal.tsx b/apps/web/src/components/nav/JoinRoomModal.tsx
index 38d39a39..d142dea3 100644
--- a/apps/web/src/components/nav/JoinRoomModal.tsx
+++ b/apps/web/src/components/nav/JoinRoomModal.tsx
@@ -1,255 +1,238 @@
-import { useEffect, useState } from "react";
-import { io } from "socket.io-client";
-import { Modal } from "@/components/common/Modal";
-import type { RoomData } from "@/hooks/useRoomData";
-import { useGetRoomByCode, useJoinRoom } from "@/hooks/useRoomData";
+import { useEffect, useState } from 'react'
+import { io } from 'socket.io-client'
+import { Modal } from '@/components/common/Modal'
+import type { RoomData } from '@/hooks/useRoomData'
+import { useGetRoomByCode, useJoinRoom } from '@/hooks/useRoomData'
 
 export interface JoinRoomModalProps {
   /**
    * Whether the modal is open
    */
-  isOpen: boolean;
+  isOpen: boolean
 
   /**
    * Callback when modal should close
    */
-  onClose: () => void;
+  onClose: () => void
 
   /**
    * Optional callback when room is successfully joined
    */
-  onSuccess?: () => void;
+  onSuccess?: () => void
 }
 
 /**
  * Modal for joining a room by entering a 6-character code
  */
-export function JoinRoomModal({
-  isOpen,
-  onClose,
-  onSuccess,
-}: JoinRoomModalProps) {
-  const { mutateAsync: getRoomByCode } = useGetRoomByCode();
-  const { mutateAsync: joinRoom } = useJoinRoom();
-  const [code, setCode] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [roomInfo, setRoomInfo] = useState<RoomData | null>(null);
-  const [needsPassword, setNeedsPassword] = useState(false);
-  const [needsApproval, setNeedsApproval] = useState(false);
-  const [approvalRequested, setApprovalRequested] = useState(false);
+export function JoinRoomModal({ isOpen, onClose, onSuccess }: JoinRoomModalProps) {
+  const { mutateAsync: getRoomByCode } = useGetRoomByCode()
+  const { mutateAsync: joinRoom } = useJoinRoom()
+  const [code, setCode] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [roomInfo, setRoomInfo] = useState<RoomData | null>(null)
+  const [needsPassword, setNeedsPassword] = useState(false)
+  const [needsApproval, setNeedsApproval] = useState(false)
+  const [approvalRequested, setApprovalRequested] = useState(false)
 
   const handleClose = () => {
-    setCode("");
-    setPassword("");
-    setError("");
-    setIsLoading(false);
-    setRoomInfo(null);
-    setNeedsPassword(false);
-    setNeedsApproval(false);
-    setApprovalRequested(false);
-    onClose();
-  };
+    setCode('')
+    setPassword('')
+    setError('')
+    setIsLoading(false)
+    setRoomInfo(null)
+    setNeedsPassword(false)
+    setNeedsApproval(false)
+    setApprovalRequested(false)
+    onClose()
+  }
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
+    e.preventDefault()
+    setError('')
 
-    const normalizedCode = code.trim().toUpperCase();
+    const normalizedCode = code.trim().toUpperCase()
     if (normalizedCode.length !== 6) {
-      setError("Code must be 6 characters");
-      return;
+      setError('Code must be 6 characters')
+      return
     }
 
-    setIsLoading(true);
+    setIsLoading(true)
 
     try {
       // Look up room by code
-      const room = await getRoomByCode(normalizedCode);
-      setRoomInfo(room);
+      const room = await getRoomByCode(normalizedCode)
+      setRoomInfo(room)
 
       // Check access mode
-      if (room.accessMode === "retired") {
-        setError(
-          "This room has been retired and is no longer accepting members",
-        );
-        setIsLoading(false);
-        return;
+      if (room.accessMode === 'retired') {
+        setError('This room has been retired and is no longer accepting members')
+        setIsLoading(false)
+        return
       }
 
-      if (room.accessMode === "locked") {
-        setError("This room is locked and not accepting new members");
-        setIsLoading(false);
-        return;
+      if (room.accessMode === 'locked') {
+        setError('This room is locked and not accepting new members')
+        setIsLoading(false)
+        return
       }
 
-      if (room.accessMode === "approval-only") {
-        setNeedsApproval(true);
-        setIsLoading(false);
-        return;
+      if (room.accessMode === 'approval-only') {
+        setNeedsApproval(true)
+        setIsLoading(false)
+        return
       }
 
       // For restricted rooms, try to join - the API will check for invitation
 
-      if (room.accessMode === "password") {
+      if (room.accessMode === 'password') {
         // Check if password is provided
         if (!needsPassword) {
-          setNeedsPassword(true);
-          setIsLoading(false);
-          return;
+          setNeedsPassword(true)
+          setIsLoading(false)
+          return
         }
 
         if (!password) {
-          setError("Password is required");
-          setIsLoading(false);
-          return;
+          setError('Password is required')
+          setIsLoading(false)
+          return
         }
       }
 
       // Join the room (with password if needed)
-      await joinRoom({ roomId: room.id, password: password || undefined });
+      await joinRoom({ roomId: room.id, password: password || undefined })
 
       // Success! Close modal
-      handleClose();
-      onSuccess?.();
+      handleClose()
+      onSuccess?.()
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to join room");
+      setError(err instanceof Error ? err.message : 'Failed to join room')
     } finally {
-      setIsLoading(false);
+      setIsLoading(false)
     }
-  };
+  }
 
   const handleRequestAccess = async () => {
-    if (!roomInfo) return;
+    if (!roomInfo) return
 
-    setIsLoading(true);
-    setError("");
+    setIsLoading(true)
+    setError('')
 
     try {
-      const res = await fetch(
-        `/api/arcade/rooms/${roomInfo.id}/join-requests`,
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-        },
-      );
+      const res = await fetch(`/api/arcade/rooms/${roomInfo.id}/join-requests`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      })
 
       if (!res.ok) {
-        const errorData = await res.json();
-        throw new Error(errorData.error || "Failed to request access");
+        const errorData = await res.json()
+        throw new Error(errorData.error || 'Failed to request access')
       }
 
       // Success! Show waiting state
-      setApprovalRequested(true);
-      setIsLoading(false);
+      setApprovalRequested(true)
+      setIsLoading(false)
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to request access");
-      setIsLoading(false);
+      setError(err instanceof Error ? err.message : 'Failed to request access')
+      setIsLoading(false)
     }
-  };
+  }
 
   // Socket listener for approval notifications
   useEffect(() => {
-    if (!approvalRequested || !roomInfo) return;
+    if (!approvalRequested || !roomInfo) return
 
-    console.log(
-      "[JoinRoomModal] Setting up approval listener for room:",
-      roomInfo.id,
-    );
+    console.log('[JoinRoomModal] Setting up approval listener for room:', roomInfo.id)
 
-    let socket: ReturnType<typeof io> | null = null;
+    let socket: ReturnType<typeof io> | null = null
 
     // Fetch viewer ID and set up socket
     const setupSocket = async () => {
       try {
         // Get current user's viewer ID
-        const res = await fetch("/api/viewer");
+        const res = await fetch('/api/viewer')
         if (!res.ok) {
-          console.error("[JoinRoomModal] Failed to get viewer ID");
-          return;
+          console.error('[JoinRoomModal] Failed to get viewer ID')
+          return
         }
 
-        const { viewerId } = await res.json();
-        console.log("[JoinRoomModal] Got viewer ID:", viewerId);
+        const { viewerId } = await res.json()
+        console.log('[JoinRoomModal] Got viewer ID:', viewerId)
 
         // Connect socket
-        socket = io({ path: "/api/socket" });
+        socket = io({ path: '/api/socket' })
 
-        socket.on("connect", () => {
-          console.log("[JoinRoomModal] Socket connected, joining user channel");
+        socket.on('connect', () => {
+          console.log('[JoinRoomModal] Socket connected, joining user channel')
           // Join user-specific channel to receive moderation events
-          socket?.emit("join-user-channel", { userId: viewerId });
-        });
+          socket?.emit('join-user-channel', { userId: viewerId })
+        })
 
-        socket.on(
-          "join-request-approved",
-          async (data: { roomId: string; requestId: string }) => {
-            console.log("[JoinRoomModal] Request approved via socket!", data);
-            if (data.roomId === roomInfo.id) {
-              console.log("[JoinRoomModal] Joining room automatically...");
-              try {
-                await joinRoom({ roomId: roomInfo.id });
-                handleClose();
-                onSuccess?.();
-              } catch (err) {
-                setError(
-                  err instanceof Error ? err.message : "Failed to join room",
-                );
-                setIsLoading(false);
-              }
+        socket.on('join-request-approved', async (data: { roomId: string; requestId: string }) => {
+          console.log('[JoinRoomModal] Request approved via socket!', data)
+          if (data.roomId === roomInfo.id) {
+            console.log('[JoinRoomModal] Joining room automatically...')
+            try {
+              await joinRoom({ roomId: roomInfo.id })
+              handleClose()
+              onSuccess?.()
+            } catch (err) {
+              setError(err instanceof Error ? err.message : 'Failed to join room')
+              setIsLoading(false)
             }
-          },
-        );
+          }
+        })
 
-        socket.on("connect_error", (error) => {
-          console.error("[JoinRoomModal] Socket connection error:", error);
-        });
+        socket.on('connect_error', (error) => {
+          console.error('[JoinRoomModal] Socket connection error:', error)
+        })
       } catch (error) {
-        console.error("[JoinRoomModal] Error setting up socket:", error);
+        console.error('[JoinRoomModal] Error setting up socket:', error)
       }
-    };
+    }
 
-    setupSocket();
+    setupSocket()
 
     return () => {
-      console.log("[JoinRoomModal] Cleaning up approval listener");
-      socket?.disconnect();
-    };
-  }, [approvalRequested, roomInfo, joinRoom, handleClose, onSuccess]);
+      console.log('[JoinRoomModal] Cleaning up approval listener')
+      socket?.disconnect()
+    }
+  }, [approvalRequested, roomInfo, joinRoom, handleClose, onSuccess])
 
   return (
     <Modal isOpen={isOpen} onClose={handleClose}>
       <div
         style={{
-          border: "2px solid rgba(139, 92, 246, 0.3)",
-          borderRadius: "16px",
+          border: '2px solid rgba(139, 92, 246, 0.3)',
+          borderRadius: '16px',
         }}
       >
         <h2
           style={{
-            fontSize: "24px",
-            fontWeight: "bold",
-            marginBottom: "8px",
-            color: "rgba(196, 181, 253, 1)",
+            fontSize: '24px',
+            fontWeight: 'bold',
+            marginBottom: '8px',
+            color: 'rgba(196, 181, 253, 1)',
           }}
         >
-          {needsApproval ? "Request to Join Room" : "Join Room by Code"}
+          {needsApproval ? 'Request to Join Room' : 'Join Room by Code'}
         </h2>
         <p
           style={{
-            fontSize: "14px",
-            color: "rgba(209, 213, 219, 0.8)",
-            marginBottom: "24px",
+            fontSize: '14px',
+            color: 'rgba(209, 213, 219, 0.8)',
+            marginBottom: '24px',
           }}
         >
           {needsApproval
             ? approvalRequested
-              ? "Your request has been sent to the room moderator."
-              : "This room requires host approval. Send a request to join?"
+              ? 'Your request has been sent to the room moderator.'
+              : 'This room requires host approval. Send a request to join?'
             : needsPassword
-              ? "This room is password protected"
-              : "Enter the 6-character room code"}
+              ? 'This room is password protected'
+              : 'Enter the 6-character room code'}
         </p>
 
         {needsApproval ? (
@@ -258,16 +241,14 @@ export function JoinRoomModal({
             {approvalRequested ? (
               // Waiting for approval state
               <>
-                <div style={{ textAlign: "center", marginBottom: "20px" }}>
-                  <div style={{ fontSize: "48px", marginBottom: "16px" }}>
-                    ⏳
-                  </div>
+                <div style={{ textAlign: 'center', marginBottom: '20px' }}>
+                  <div style={{ fontSize: '48px', marginBottom: '16px' }}>⏳</div>
                   <h3
                     style={{
-                      fontSize: "18px",
-                      fontWeight: "bold",
-                      marginBottom: "8px",
-                      color: "rgba(96, 165, 250, 1)",
+                      fontSize: '18px',
+                      fontWeight: 'bold',
+                      marginBottom: '8px',
+                      color: 'rgba(96, 165, 250, 1)',
                     }}
                   >
                     Waiting for Approval
@@ -276,26 +257,26 @@ export function JoinRoomModal({
 
                 <div
                   style={{
-                    padding: "16px",
-                    background: "rgba(59, 130, 246, 0.1)",
-                    border: "1px solid rgba(59, 130, 246, 0.3)",
-                    borderRadius: "8px",
-                    marginBottom: "20px",
+                    padding: '16px',
+                    background: 'rgba(59, 130, 246, 0.1)',
+                    border: '1px solid rgba(59, 130, 246, 0.3)',
+                    borderRadius: '8px',
+                    marginBottom: '20px',
                   }}
                 >
                   <p
                     style={{
-                      fontSize: "14px",
-                      color: "rgba(209, 213, 219, 1)",
-                      marginBottom: "8px",
+                      fontSize: '14px',
+                      color: 'rgba(209, 213, 219, 1)',
+                      marginBottom: '8px',
                     }}
                   >
                     <strong>{roomInfo?.name}</strong>
                   </p>
                   <p
                     style={{
-                      fontSize: "13px",
-                      color: "rgba(156, 163, 175, 1)",
+                      fontSize: '13px',
+                      color: 'rgba(156, 163, 175, 1)',
                     }}
                   >
                     Code: {roomInfo?.code}
@@ -304,36 +285,36 @@ export function JoinRoomModal({
 
                 <p
                   style={{
-                    fontSize: "13px",
-                    color: "rgba(156, 163, 175, 1)",
-                    textAlign: "center",
-                    marginBottom: "20px",
+                    fontSize: '13px',
+                    color: 'rgba(156, 163, 175, 1)',
+                    textAlign: 'center',
+                    marginBottom: '20px',
                   }}
                 >
-                  You'll be able to join once the host approves your request.
-                  You can close this dialog and check back later.
+                  You'll be able to join once the host approves your request. You can close this
+                  dialog and check back later.
                 </p>
 
                 <button
                   type="button"
                   onClick={handleClose}
                   style={{
-                    width: "100%",
-                    padding: "12px",
-                    background: "rgba(75, 85, 99, 0.3)",
-                    color: "rgba(209, 213, 219, 1)",
-                    border: "2px solid rgba(75, 85, 99, 0.5)",
-                    borderRadius: "10px",
-                    fontSize: "15px",
-                    fontWeight: "600",
-                    cursor: "pointer",
-                    transition: "all 0.2s ease",
+                    width: '100%',
+                    padding: '12px',
+                    background: 'rgba(75, 85, 99, 0.3)',
+                    color: 'rgba(209, 213, 219, 1)',
+                    border: '2px solid rgba(75, 85, 99, 0.5)',
+                    borderRadius: '10px',
+                    fontSize: '15px',
+                    fontWeight: '600',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s ease',
                   }}
                   onMouseEnter={(e) => {
-                    e.currentTarget.style.background = "rgba(75, 85, 99, 0.4)";
+                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
                   }}
                   onMouseLeave={(e) => {
-                    e.currentTarget.style.background = "rgba(75, 85, 99, 0.3)";
+                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
                   }}
                 >
                   Close
@@ -344,26 +325,26 @@ export function JoinRoomModal({
               <>
                 <div
                   style={{
-                    padding: "16px",
-                    background: "rgba(59, 130, 246, 0.1)",
-                    border: "1px solid rgba(59, 130, 246, 0.3)",
-                    borderRadius: "8px",
-                    marginBottom: "20px",
+                    padding: '16px',
+                    background: 'rgba(59, 130, 246, 0.1)',
+                    border: '1px solid rgba(59, 130, 246, 0.3)',
+                    borderRadius: '8px',
+                    marginBottom: '20px',
                   }}
                 >
                   <p
                     style={{
-                      fontSize: "14px",
-                      color: "rgba(209, 213, 219, 1)",
-                      marginBottom: "8px",
+                      fontSize: '14px',
+                      color: 'rgba(209, 213, 219, 1)',
+                      marginBottom: '8px',
                     }}
                   >
                     <strong>{roomInfo?.name}</strong>
                   </p>
                   <p
                     style={{
-                      fontSize: "13px",
-                      color: "rgba(156, 163, 175, 1)",
+                      fontSize: '13px',
+                      color: 'rgba(156, 163, 175, 1)',
                     }}
                   >
                     Code: {roomInfo?.code}
@@ -373,44 +354,42 @@ export function JoinRoomModal({
                 {error && (
                   <p
                     style={{
-                      fontSize: "13px",
-                      color: "rgba(248, 113, 113, 1)",
-                      marginBottom: "16px",
-                      textAlign: "center",
+                      fontSize: '13px',
+                      color: 'rgba(248, 113, 113, 1)',
+                      marginBottom: '16px',
+                      textAlign: 'center',
                     }}
                   >
                     {error}
                   </p>
                 )}
 
-                <div style={{ display: "flex", gap: "12px" }}>
+                <div style={{ display: 'flex', gap: '12px' }}>
                   <button
                     type="button"
                     onClick={handleClose}
                     disabled={isLoading}
                     style={{
                       flex: 1,
-                      padding: "12px",
-                      background: "rgba(75, 85, 99, 0.3)",
-                      color: "rgba(209, 213, 219, 1)",
-                      border: "2px solid rgba(75, 85, 99, 0.5)",
-                      borderRadius: "10px",
-                      fontSize: "15px",
-                      fontWeight: "600",
-                      cursor: isLoading ? "not-allowed" : "pointer",
+                      padding: '12px',
+                      background: 'rgba(75, 85, 99, 0.3)',
+                      color: 'rgba(209, 213, 219, 1)',
+                      border: '2px solid rgba(75, 85, 99, 0.5)',
+                      borderRadius: '10px',
+                      fontSize: '15px',
+                      fontWeight: '600',
+                      cursor: isLoading ? 'not-allowed' : 'pointer',
                       opacity: isLoading ? 0.5 : 1,
-                      transition: "all 0.2s ease",
+                      transition: 'all 0.2s ease',
                     }}
                     onMouseEnter={(e) => {
                       if (!isLoading) {
-                        e.currentTarget.style.background =
-                          "rgba(75, 85, 99, 0.4)";
+                        e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
                       }
                     }}
                     onMouseLeave={(e) => {
                       if (!isLoading) {
-                        e.currentTarget.style.background =
-                          "rgba(75, 85, 99, 0.3)";
+                        e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
                       }
                     }}
                   >
@@ -422,37 +401,35 @@ export function JoinRoomModal({
                     disabled={isLoading}
                     style={{
                       flex: 1,
-                      padding: "12px",
+                      padding: '12px',
                       background: isLoading
-                        ? "rgba(75, 85, 99, 0.3)"
-                        : "linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))",
-                      color: isLoading
-                        ? "rgba(156, 163, 175, 1)"
-                        : "rgba(255, 255, 255, 1)",
+                        ? 'rgba(75, 85, 99, 0.3)'
+                        : 'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))',
+                      color: isLoading ? 'rgba(156, 163, 175, 1)' : 'rgba(255, 255, 255, 1)',
                       border: isLoading
-                        ? "2px solid rgba(75, 85, 99, 0.5)"
-                        : "2px solid rgba(59, 130, 246, 0.6)",
-                      borderRadius: "10px",
-                      fontSize: "15px",
-                      fontWeight: "600",
-                      cursor: isLoading ? "not-allowed" : "pointer",
+                        ? '2px solid rgba(75, 85, 99, 0.5)'
+                        : '2px solid rgba(59, 130, 246, 0.6)',
+                      borderRadius: '10px',
+                      fontSize: '15px',
+                      fontWeight: '600',
+                      cursor: isLoading ? 'not-allowed' : 'pointer',
                       opacity: isLoading ? 0.5 : 1,
-                      transition: "all 0.2s ease",
+                      transition: 'all 0.2s ease',
                     }}
                     onMouseEnter={(e) => {
                       if (!isLoading) {
                         e.currentTarget.style.background =
-                          "linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9))";
+                          'linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9))'
                       }
                     }}
                     onMouseLeave={(e) => {
                       if (!isLoading) {
                         e.currentTarget.style.background =
-                          "linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))";
+                          'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))'
                       }
                     }}
                   >
-                    {isLoading ? "Sending..." : "Send Request"}
+                    {isLoading ? 'Sending...' : 'Send Request'}
                   </button>
                 </div>
               </>
@@ -465,30 +442,30 @@ export function JoinRoomModal({
               type="text"
               value={code}
               onChange={(e) => {
-                setCode(e.target.value.toUpperCase());
-                setError("");
-                setNeedsPassword(false);
-                setNeedsApproval(false);
+                setCode(e.target.value.toUpperCase())
+                setError('')
+                setNeedsPassword(false)
+                setNeedsApproval(false)
               }}
               placeholder="ABC123"
               maxLength={6}
               disabled={isLoading || needsPassword}
               style={{
-                width: "100%",
-                padding: "14px",
+                width: '100%',
+                padding: '14px',
                 border: error
-                  ? "2px solid rgba(239, 68, 68, 0.6)"
-                  : "2px solid rgba(139, 92, 246, 0.4)",
-                borderRadius: "10px",
-                fontSize: "18px",
-                fontWeight: "bold",
-                fontFamily: "monospace",
-                textAlign: "center",
-                letterSpacing: "4px",
-                background: "rgba(255, 255, 255, 0.05)",
-                color: "rgba(196, 181, 253, 1)",
-                outline: "none",
-                marginBottom: "8px",
+                  ? '2px solid rgba(239, 68, 68, 0.6)'
+                  : '2px solid rgba(139, 92, 246, 0.4)',
+                borderRadius: '10px',
+                fontSize: '18px',
+                fontWeight: 'bold',
+                fontFamily: 'monospace',
+                textAlign: 'center',
+                letterSpacing: '4px',
+                background: 'rgba(255, 255, 255, 0.05)',
+                color: 'rgba(196, 181, 253, 1)',
+                outline: 'none',
+                marginBottom: '8px',
               }}
             />
 
@@ -497,25 +474,25 @@ export function JoinRoomModal({
                 type="password"
                 value={password}
                 onChange={(e) => {
-                  setPassword(e.target.value);
-                  setError("");
+                  setPassword(e.target.value)
+                  setError('')
                 }}
                 placeholder="Enter password"
                 disabled={isLoading}
                 style={{
-                  width: "100%",
-                  padding: "14px",
+                  width: '100%',
+                  padding: '14px',
                   border: error
-                    ? "2px solid rgba(239, 68, 68, 0.6)"
-                    : "2px solid rgba(251, 191, 36, 0.4)",
-                  borderRadius: "10px",
-                  fontSize: "16px",
-                  textAlign: "center",
-                  background: "rgba(255, 255, 255, 0.05)",
-                  color: "rgba(251, 191, 36, 1)",
-                  outline: "none",
-                  marginBottom: "8px",
-                  marginTop: "12px",
+                    ? '2px solid rgba(239, 68, 68, 0.6)'
+                    : '2px solid rgba(251, 191, 36, 0.4)',
+                  borderRadius: '10px',
+                  fontSize: '16px',
+                  textAlign: 'center',
+                  background: 'rgba(255, 255, 255, 0.05)',
+                  color: 'rgba(251, 191, 36, 1)',
+                  outline: 'none',
+                  marginBottom: '8px',
+                  marginTop: '12px',
                 }}
               />
             )}
@@ -523,42 +500,42 @@ export function JoinRoomModal({
             {error && (
               <p
                 style={{
-                  fontSize: "13px",
-                  color: "rgba(248, 113, 113, 1)",
-                  marginBottom: "16px",
-                  textAlign: "center",
+                  fontSize: '13px',
+                  color: 'rgba(248, 113, 113, 1)',
+                  marginBottom: '16px',
+                  textAlign: 'center',
                 }}
               >
                 {error}
               </p>
             )}
 
-            <div style={{ display: "flex", gap: "12px", marginTop: "24px" }}>
+            <div style={{ display: 'flex', gap: '12px', marginTop: '24px' }}>
               <button
                 type="button"
                 onClick={handleClose}
                 disabled={isLoading}
                 style={{
                   flex: 1,
-                  padding: "12px",
-                  background: "rgba(75, 85, 99, 0.3)",
-                  color: "rgba(209, 213, 219, 1)",
-                  border: "2px solid rgba(75, 85, 99, 0.5)",
-                  borderRadius: "10px",
-                  fontSize: "15px",
-                  fontWeight: "600",
-                  cursor: isLoading ? "not-allowed" : "pointer",
+                  padding: '12px',
+                  background: 'rgba(75, 85, 99, 0.3)',
+                  color: 'rgba(209, 213, 219, 1)',
+                  border: '2px solid rgba(75, 85, 99, 0.5)',
+                  borderRadius: '10px',
+                  fontSize: '15px',
+                  fontWeight: '600',
+                  cursor: isLoading ? 'not-allowed' : 'pointer',
                   opacity: isLoading ? 0.5 : 1,
-                  transition: "all 0.2s ease",
+                  transition: 'all 0.2s ease',
                 }}
                 onMouseEnter={(e) => {
                   if (!isLoading) {
-                    e.currentTarget.style.background = "rgba(75, 85, 99, 0.4)";
+                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
                   }
                 }}
                 onMouseLeave={(e) => {
                   if (!isLoading) {
-                    e.currentTarget.style.background = "rgba(75, 85, 99, 0.3)";
+                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
                   }
                 }}
               >
@@ -569,52 +546,45 @@ export function JoinRoomModal({
                 disabled={code.trim().length !== 6 || isLoading}
                 style={{
                   flex: 1,
-                  padding: "12px",
+                  padding: '12px',
                   background:
                     code.trim().length === 6 && !isLoading
-                      ? "linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))"
-                      : "rgba(75, 85, 99, 0.3)",
+                      ? 'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))'
+                      : 'rgba(75, 85, 99, 0.3)',
                   color:
                     code.trim().length === 6 && !isLoading
-                      ? "rgba(255, 255, 255, 1)"
-                      : "rgba(156, 163, 175, 1)",
+                      ? 'rgba(255, 255, 255, 1)'
+                      : 'rgba(156, 163, 175, 1)',
                   border:
                     code.trim().length === 6 && !isLoading
-                      ? "2px solid rgba(59, 130, 246, 0.6)"
-                      : "2px solid rgba(75, 85, 99, 0.5)",
-                  borderRadius: "10px",
-                  fontSize: "15px",
-                  fontWeight: "600",
-                  cursor:
-                    code.trim().length === 6 && !isLoading
-                      ? "pointer"
-                      : "not-allowed",
+                      ? '2px solid rgba(59, 130, 246, 0.6)'
+                      : '2px solid rgba(75, 85, 99, 0.5)',
+                  borderRadius: '10px',
+                  fontSize: '15px',
+                  fontWeight: '600',
+                  cursor: code.trim().length === 6 && !isLoading ? 'pointer' : 'not-allowed',
                   opacity: code.trim().length === 6 && !isLoading ? 1 : 0.5,
-                  transition: "all 0.2s ease",
+                  transition: 'all 0.2s ease',
                 }}
                 onMouseEnter={(e) => {
                   if (code.trim().length === 6 && !isLoading) {
                     e.currentTarget.style.background =
-                      "linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9))";
+                      'linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9))'
                   }
                 }}
                 onMouseLeave={(e) => {
                   if (code.trim().length === 6 && !isLoading) {
                     e.currentTarget.style.background =
-                      "linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))";
+                      'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))'
                   }
                 }}
               >
-                {isLoading
-                  ? "Joining..."
-                  : needsPassword
-                    ? "Join with Password"
-                    : "Join Room"}
+                {isLoading ? 'Joining...' : needsPassword ? 'Join with Password' : 'Join Room'}
               </button>
             </div>
           </form>
         )}
       </div>
     </Modal>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/ModerationNotifications.tsx b/apps/web/src/components/nav/ModerationNotifications.tsx
index 293b17b2..11e8ac89 100644
--- a/apps/web/src/components/nav/ModerationNotifications.tsx
+++ b/apps/web/src/components/nav/ModerationNotifications.tsx
@@ -1,22 +1,22 @@
-import * as Toast from "@radix-ui/react-toast";
-import { useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { Modal } from "@/components/common/Modal";
-import { useToast } from "@/components/common/ToastContext";
-import type { ModerationEvent } from "@/hooks/useRoomData";
-import { useJoinRoom } from "@/hooks/useRoomData";
+import * as Toast from '@radix-ui/react-toast'
+import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { Modal } from '@/components/common/Modal'
+import { useToast } from '@/components/common/ToastContext'
+import type { ModerationEvent } from '@/hooks/useRoomData'
+import { useJoinRoom } from '@/hooks/useRoomData'
 
 export interface ModerationNotificationsProps {
   /**
    * The moderation event to display
    */
-  moderationEvent: ModerationEvent | null;
+  moderationEvent: ModerationEvent | null
 
   /**
    * Callback when the user acknowledges the event
    */
-  onClose: () => void;
+  onClose: () => void
 }
 
 /**
@@ -26,161 +26,151 @@ export function ModerationNotifications({
   moderationEvent,
   onClose,
 }: ModerationNotificationsProps) {
-  const router = useRouter();
-  const queryClient = useQueryClient();
-  const { showError } = useToast();
-  const [showToast, setShowToast] = useState(false);
-  const [showJoinRequestToast, setShowJoinRequestToast] = useState(false);
-  const [isAcceptingInvitation, setIsAcceptingInvitation] = useState(false);
-  const [isProcessingRequest, setIsProcessingRequest] = useState(false);
-  const [requestError, setRequestError] = useState<string | null>(null);
-  const { mutateAsync: joinRoom } = useJoinRoom();
+  const router = useRouter()
+  const queryClient = useQueryClient()
+  const { showError } = useToast()
+  const [showToast, setShowToast] = useState(false)
+  const [showJoinRequestToast, setShowJoinRequestToast] = useState(false)
+  const [isAcceptingInvitation, setIsAcceptingInvitation] = useState(false)
+  const [isProcessingRequest, setIsProcessingRequest] = useState(false)
+  const [requestError, setRequestError] = useState<string | null>(null)
+  const { mutateAsync: joinRoom } = useJoinRoom()
 
   // Handle report toast (for hosts)
   useEffect(() => {
-    if (moderationEvent?.type === "report") {
-      setShowToast(true);
+    if (moderationEvent?.type === 'report') {
+      setShowToast(true)
       // Auto-dismiss after 5 seconds
       const timer = setTimeout(() => {
-        setShowToast(false);
-        onClose();
-      }, 5000);
-      return () => clearTimeout(timer);
+        setShowToast(false)
+        onClose()
+      }, 5000)
+      return () => clearTimeout(timer)
     }
-  }, [moderationEvent, onClose]);
+  }, [moderationEvent, onClose])
 
   // Handle join request toast (for hosts)
   useEffect(() => {
-    if (moderationEvent?.type === "join-request") {
-      setShowJoinRequestToast(true);
-      setRequestError(null); // Clear any previous errors
+    if (moderationEvent?.type === 'join-request') {
+      setShowJoinRequestToast(true)
+      setRequestError(null) // Clear any previous errors
     } else {
       // Reset toast state when event is cleared or changes type
-      setShowJoinRequestToast(false);
-      setRequestError(null);
+      setShowJoinRequestToast(false)
+      setRequestError(null)
     }
-  }, [moderationEvent]);
+  }, [moderationEvent])
 
   // Handle approve join request
   const handleApprove = async () => {
-    if (!moderationEvent?.data.requestId || !moderationEvent?.data.roomId)
-      return;
+    if (!moderationEvent?.data.requestId || !moderationEvent?.data.roomId) return
 
-    setIsProcessingRequest(true);
-    setRequestError(null); // Clear any previous errors
+    setIsProcessingRequest(true)
+    setRequestError(null) // Clear any previous errors
 
     try {
       const response = await fetch(
         `/api/arcade/rooms/${moderationEvent.data.roomId}/join-requests/${moderationEvent.data.requestId}/approve`,
         {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-        },
-      );
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+        }
+      )
 
       if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || "Failed to approve join request");
+        const errorData = await response.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Failed to approve join request')
       }
 
       // Close toast and event on success
-      setShowJoinRequestToast(false);
-      onClose();
+      setShowJoinRequestToast(false)
+      onClose()
 
       // Invalidate join requests query to refresh the list
-      queryClient.invalidateQueries({ queryKey: ["join-requests"] });
+      queryClient.invalidateQueries({ queryKey: ['join-requests'] })
     } catch (error) {
-      console.error("Failed to approve join request:", error);
+      console.error('Failed to approve join request:', error)
       // Keep toast visible and show error message
-      setRequestError(
-        error instanceof Error ? error.message : "Failed to approve request",
-      );
+      setRequestError(error instanceof Error ? error.message : 'Failed to approve request')
     } finally {
-      setIsProcessingRequest(false);
+      setIsProcessingRequest(false)
     }
-  };
+  }
 
   // Handle deny join request
   const handleDeny = async () => {
-    if (!moderationEvent?.data.requestId || !moderationEvent?.data.roomId)
-      return;
+    if (!moderationEvent?.data.requestId || !moderationEvent?.data.roomId) return
 
-    setIsProcessingRequest(true);
-    setRequestError(null); // Clear any previous errors
+    setIsProcessingRequest(true)
+    setRequestError(null) // Clear any previous errors
 
     try {
       const response = await fetch(
         `/api/arcade/rooms/${moderationEvent.data.roomId}/join-requests/${moderationEvent.data.requestId}/deny`,
         {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-        },
-      );
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+        }
+      )
 
       if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || "Failed to deny join request");
+        const errorData = await response.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Failed to deny join request')
       }
 
       // Close toast and event on success
-      setShowJoinRequestToast(false);
-      onClose();
+      setShowJoinRequestToast(false)
+      onClose()
 
       // Invalidate join requests query to refresh the list
-      queryClient.invalidateQueries({ queryKey: ["join-requests"] });
+      queryClient.invalidateQueries({ queryKey: ['join-requests'] })
     } catch (error) {
-      console.error("Failed to deny join request:", error);
+      console.error('Failed to deny join request:', error)
       // Keep toast visible and show error message
-      setRequestError(
-        error instanceof Error ? error.message : "Failed to deny request",
-      );
+      setRequestError(error instanceof Error ? error.message : 'Failed to deny request')
     } finally {
-      setIsProcessingRequest(false);
+      setIsProcessingRequest(false)
     }
-  };
+  }
 
   // Kicked modal
-  if (moderationEvent?.type === "kicked") {
-    const isRetired = moderationEvent.data.reason?.includes("retired");
+  if (moderationEvent?.type === 'kicked') {
+    const isRetired = moderationEvent.data.reason?.includes('retired')
 
     return (
       <Modal isOpen={true} onClose={() => {}}>
         <div
           style={{
-            border: "2px solid rgba(251, 146, 60, 0.3)",
-            borderRadius: "16px",
-            textAlign: "center",
-            minWidth: "400px",
+            border: '2px solid rgba(251, 146, 60, 0.3)',
+            borderRadius: '16px',
+            textAlign: 'center',
+            minWidth: '400px',
           }}
         >
-          <div style={{ fontSize: "48px", marginBottom: "16px" }}>
-            {isRetired ? "🏁" : "⚠️"}
-          </div>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>{isRetired ? '🏁' : '⚠️'}</div>
           <h2
             style={{
-              fontSize: "24px",
-              fontWeight: "bold",
-              marginBottom: "12px",
-              color: "rgba(253, 186, 116, 1)",
+              fontSize: '24px',
+              fontWeight: 'bold',
+              marginBottom: '12px',
+              color: 'rgba(253, 186, 116, 1)',
             }}
           >
-            {isRetired ? "Room Retired" : "Kicked from Room"}
+            {isRetired ? 'Room Retired' : 'Kicked from Room'}
           </h2>
           <p
             style={{
-              fontSize: "14px",
-              color: "rgba(209, 213, 219, 0.9)",
-              marginBottom: "8px",
+              fontSize: '14px',
+              color: 'rgba(209, 213, 219, 0.9)',
+              marginBottom: '8px',
             }}
           >
             {isRetired ? (
-              <>
-                The room owner has retired this room and access has been closed
-              </>
+              <>The room owner has retired this room and access has been closed</>
             ) : (
               <>
-                You were kicked from the room by{" "}
-                <strong style={{ color: "rgba(253, 186, 116, 1)" }}>
+                You were kicked from the room by{' '}
+                <strong style={{ color: 'rgba(253, 186, 116, 1)' }}>
                   {moderationEvent.data.kickedBy}
                 </strong>
               </>
@@ -188,103 +178,102 @@ export function ModerationNotifications({
           </p>
           <p
             style={{
-              fontSize: "13px",
-              color: "rgba(156, 163, 175, 1)",
-              marginBottom: "24px",
+              fontSize: '13px',
+              color: 'rgba(156, 163, 175, 1)',
+              marginBottom: '24px',
             }}
           >
             {isRetired
-              ? "Only the room owner can access retired rooms"
-              : "You can rejoin if the host sends you a new invite"}
+              ? 'Only the room owner can access retired rooms'
+              : 'You can rejoin if the host sends you a new invite'}
           </p>
 
           <button
             type="button"
             onClick={() => {
-              onClose();
-              router.push("/arcade");
+              onClose()
+              router.push('/arcade')
             }}
             style={{
-              width: "100%",
-              padding: "12px",
+              width: '100%',
+              padding: '12px',
               background:
-                "linear-gradient(135deg, rgba(251, 146, 60, 0.8), rgba(249, 115, 22, 0.8))",
-              color: "white",
-              border: "2px solid rgba(251, 146, 60, 0.6)",
-              borderRadius: "10px",
-              fontSize: "15px",
-              fontWeight: "600",
-              cursor: "pointer",
-              transition: "all 0.2s ease",
+                'linear-gradient(135deg, rgba(251, 146, 60, 0.8), rgba(249, 115, 22, 0.8))',
+              color: 'white',
+              border: '2px solid rgba(251, 146, 60, 0.6)',
+              borderRadius: '10px',
+              fontSize: '15px',
+              fontWeight: '600',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
             }}
             onMouseEnter={(e) => {
               e.currentTarget.style.background =
-                "linear-gradient(135deg, rgba(251, 146, 60, 0.9), rgba(249, 115, 22, 0.9))";
+                'linear-gradient(135deg, rgba(251, 146, 60, 0.9), rgba(249, 115, 22, 0.9))'
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.background =
-                "linear-gradient(135deg, rgba(251, 146, 60, 0.8), rgba(249, 115, 22, 0.8))";
+                'linear-gradient(135deg, rgba(251, 146, 60, 0.8), rgba(249, 115, 22, 0.8))'
             }}
           >
             Return to Arcade
           </button>
         </div>
       </Modal>
-    );
+    )
   }
 
   // Banned modal
-  if (moderationEvent?.type === "banned") {
-    const reasonLabel =
-      moderationEvent.data.reason?.replace(/-/g, " ") || "unspecified";
+  if (moderationEvent?.type === 'banned') {
+    const reasonLabel = moderationEvent.data.reason?.replace(/-/g, ' ') || 'unspecified'
 
     return (
       <Modal isOpen={true} onClose={() => {}}>
         <div
           style={{
-            border: "2px solid rgba(239, 68, 68, 0.3)",
-            borderRadius: "16px",
-            textAlign: "center",
-            minWidth: "400px",
+            border: '2px solid rgba(239, 68, 68, 0.3)',
+            borderRadius: '16px',
+            textAlign: 'center',
+            minWidth: '400px',
           }}
         >
-          <div style={{ fontSize: "48px", marginBottom: "16px" }}>🚫</div>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>🚫</div>
           <h2
             style={{
-              fontSize: "24px",
-              fontWeight: "bold",
-              marginBottom: "12px",
-              color: "rgba(252, 165, 165, 1)",
+              fontSize: '24px',
+              fontWeight: 'bold',
+              marginBottom: '12px',
+              color: 'rgba(252, 165, 165, 1)',
             }}
           >
             Banned from Room
           </h2>
           <p
             style={{
-              fontSize: "14px",
-              color: "rgba(209, 213, 219, 0.9)",
-              marginBottom: "8px",
+              fontSize: '14px',
+              color: 'rgba(209, 213, 219, 0.9)',
+              marginBottom: '8px',
             }}
           >
-            You were banned from the room by{" "}
-            <strong style={{ color: "rgba(252, 165, 165, 1)" }}>
+            You were banned from the room by{' '}
+            <strong style={{ color: 'rgba(252, 165, 165, 1)' }}>
               {moderationEvent.data.bannedBy}
             </strong>
           </p>
           <p
             style={{
-              fontSize: "13px",
-              color: "rgba(156, 163, 175, 1)",
-              marginBottom: "4px",
+              fontSize: '13px',
+              color: 'rgba(156, 163, 175, 1)',
+              marginBottom: '4px',
             }}
           >
             Reason: <strong>{reasonLabel}</strong>
           </p>
           <p
             style={{
-              fontSize: "13px",
-              color: "rgba(156, 163, 175, 1)",
-              marginBottom: "24px",
+              fontSize: '13px',
+              color: 'rgba(156, 163, 175, 1)',
+              marginBottom: '24px',
             }}
           >
             You cannot rejoin this room
@@ -293,119 +282,117 @@ export function ModerationNotifications({
           <button
             type="button"
             onClick={() => {
-              onClose();
-              router.push("/arcade");
+              onClose()
+              router.push('/arcade')
             }}
             style={{
-              width: "100%",
-              padding: "12px",
-              background:
-                "linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8))",
-              color: "white",
-              border: "2px solid rgba(239, 68, 68, 0.6)",
-              borderRadius: "10px",
-              fontSize: "15px",
-              fontWeight: "600",
-              cursor: "pointer",
-              transition: "all 0.2s ease",
+              width: '100%',
+              padding: '12px',
+              background: 'linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8))',
+              color: 'white',
+              border: '2px solid rgba(239, 68, 68, 0.6)',
+              borderRadius: '10px',
+              fontSize: '15px',
+              fontWeight: '600',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
             }}
             onMouseEnter={(e) => {
               e.currentTarget.style.background =
-                "linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9))";
+                'linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9))'
             }}
             onMouseLeave={(e) => {
               e.currentTarget.style.background =
-                "linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8))";
+                'linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8))'
             }}
           >
             Return to Arcade
           </button>
         </div>
       </Modal>
-    );
+    )
   }
 
   // Report toast (for hosts)
-  if (moderationEvent?.type === "report") {
+  if (moderationEvent?.type === 'report') {
     return (
       <Toast.Provider swipeDirection="right" duration={5000}>
         <Toast.Root
           open={showToast}
           onOpenChange={(open) => {
             if (!open) {
-              setShowToast(false);
-              onClose();
+              setShowToast(false)
+              onClose()
             }
           }}
           onClick={() => {
             // Open moderation panel focused on reported player
-            const reportedUserId = moderationEvent.data.reportedUserId;
+            const reportedUserId = moderationEvent.data.reportedUserId
             if (reportedUserId && (window as any).__openModerationWithFocus) {
-              (window as any).__openModerationWithFocus(reportedUserId);
-              setShowToast(false);
-              onClose();
+              ;(window as any).__openModerationWithFocus(reportedUserId)
+              setShowToast(false)
+              onClose()
             }
           }}
           style={{
-            background:
-              "linear-gradient(135deg, rgba(239, 68, 68, 0.97), rgba(220, 38, 38, 0.97))",
-            border: "2px solid rgba(239, 68, 68, 0.6)",
-            borderRadius: "12px",
-            padding: "16px",
-            boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)",
-            display: "flex",
-            gap: "12px",
-            alignItems: "flex-start",
-            minWidth: "350px",
-            maxWidth: "450px",
-            cursor: "pointer",
-            transition: "all 0.2s ease",
+            background: 'linear-gradient(135deg, rgba(239, 68, 68, 0.97), rgba(220, 38, 38, 0.97))',
+            border: '2px solid rgba(239, 68, 68, 0.6)',
+            borderRadius: '12px',
+            padding: '16px',
+            boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
+            display: 'flex',
+            gap: '12px',
+            alignItems: 'flex-start',
+            minWidth: '350px',
+            maxWidth: '450px',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
           }}
           onMouseEnter={(e) => {
-            e.currentTarget.style.transform = "scale(1.02)";
-            e.currentTarget.style.boxShadow = "0 12px 32px rgba(0, 0, 0, 0.5)";
+            e.currentTarget.style.transform = 'scale(1.02)'
+            e.currentTarget.style.boxShadow = '0 12px 32px rgba(0, 0, 0, 0.5)'
           }}
           onMouseLeave={(e) => {
-            e.currentTarget.style.transform = "scale(1)";
-            e.currentTarget.style.boxShadow = "0 8px 24px rgba(0, 0, 0, 0.4)";
+            e.currentTarget.style.transform = 'scale(1)'
+            e.currentTarget.style.boxShadow = '0 8px 24px rgba(0, 0, 0, 0.4)'
           }}
         >
-          <div style={{ fontSize: "24px", flexShrink: 0 }}>🚩</div>
+          <div style={{ fontSize: '24px', flexShrink: 0 }}>🚩</div>
           <div style={{ flex: 1 }}>
             <Toast.Title
               style={{
-                fontSize: "15px",
-                fontWeight: "bold",
-                color: "white",
-                marginBottom: "4px",
+                fontSize: '15px',
+                fontWeight: 'bold',
+                color: 'white',
+                marginBottom: '4px',
               }}
             >
               New Player Report
             </Toast.Title>
             <Toast.Description
               style={{
-                fontSize: "13px",
-                color: "rgba(255, 255, 255, 0.9)",
-                marginBottom: "4px",
+                fontSize: '13px',
+                color: 'rgba(255, 255, 255, 0.9)',
+                marginBottom: '4px',
               }}
             >
-              <strong>{moderationEvent.data.reporterName}</strong> reported{" "}
+              <strong>{moderationEvent.data.reporterName}</strong> reported{' '}
               <strong>{moderationEvent.data.reportedUserName}</strong>
             </Toast.Description>
             <Toast.Description
               style={{
-                fontSize: "12px",
-                color: "rgba(255, 255, 255, 0.8)",
+                fontSize: '12px',
+                color: 'rgba(255, 255, 255, 0.8)',
               }}
             >
-              Reason: {moderationEvent.data.reason?.replace(/-/g, " ")}
+              Reason: {moderationEvent.data.reason?.replace(/-/g, ' ')}
             </Toast.Description>
             <Toast.Description
               style={{
-                fontSize: "11px",
-                color: "rgba(255, 255, 255, 0.7)",
-                marginTop: "6px",
-                fontStyle: "italic",
+                fontSize: '11px',
+                color: 'rgba(255, 255, 255, 0.7)',
+                marginTop: '6px',
+                fontStyle: 'italic',
               }}
             >
               👆 Click to view in moderation panel
@@ -413,17 +400,17 @@ export function ModerationNotifications({
           </div>
           <Toast.Close
             style={{
-              background: "rgba(255, 255, 255, 0.2)",
-              border: "none",
-              borderRadius: "50%",
-              width: "24px",
-              height: "24px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              cursor: "pointer",
-              color: "white",
-              fontSize: "16px",
+              background: 'rgba(255, 255, 255, 0.2)',
+              border: 'none',
+              borderRadius: '50%',
+              width: '24px',
+              height: '24px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              color: 'white',
+              fontSize: '16px',
               lineHeight: 1,
               flexShrink: 0,
             }}
@@ -434,17 +421,17 @@ export function ModerationNotifications({
 
         <Toast.Viewport
           style={{
-            position: "fixed",
-            top: "80px",
-            right: "20px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "10px",
+            position: 'fixed',
+            top: '80px',
+            right: '20px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '10px',
             zIndex: 10001,
-            maxWidth: "100vw",
+            maxWidth: '100vw',
             margin: 0,
-            listStyle: "none",
-            outline: "none",
+            listStyle: 'none',
+            outline: 'none',
           }}
         />
 
@@ -502,84 +489,83 @@ export function ModerationNotifications({
           }}
         />
       </Toast.Provider>
-    );
+    )
   }
 
   // Join request toast (for hosts)
-  if (moderationEvent?.type === "join-request") {
+  if (moderationEvent?.type === 'join-request') {
     return (
       <Toast.Provider swipeDirection="right" duration={Infinity}>
         <Toast.Root
           open={showJoinRequestToast}
           onOpenChange={(open) => {
             if (!open) {
-              setShowJoinRequestToast(false);
-              onClose();
+              setShowJoinRequestToast(false)
+              onClose()
             }
           }}
           style={{
             background:
-              "linear-gradient(135deg, rgba(59, 130, 246, 0.97), rgba(37, 99, 235, 0.97))",
-            border: "2px solid rgba(59, 130, 246, 0.6)",
-            borderRadius: "12px",
-            padding: "16px",
-            boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)",
-            display: "flex",
-            gap: "12px",
-            alignItems: "flex-start",
-            minWidth: "350px",
-            maxWidth: "450px",
-            transition: "all 0.2s ease",
+              'linear-gradient(135deg, rgba(59, 130, 246, 0.97), rgba(37, 99, 235, 0.97))',
+            border: '2px solid rgba(59, 130, 246, 0.6)',
+            borderRadius: '12px',
+            padding: '16px',
+            boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
+            display: 'flex',
+            gap: '12px',
+            alignItems: 'flex-start',
+            minWidth: '350px',
+            maxWidth: '450px',
+            transition: 'all 0.2s ease',
           }}
         >
-          <div style={{ fontSize: "24px", flexShrink: 0 }}>✋</div>
+          <div style={{ fontSize: '24px', flexShrink: 0 }}>✋</div>
           <div style={{ flex: 1 }}>
             <Toast.Title
               style={{
-                fontSize: "15px",
-                fontWeight: "bold",
-                color: "white",
-                marginBottom: "4px",
+                fontSize: '15px',
+                fontWeight: 'bold',
+                color: 'white',
+                marginBottom: '4px',
               }}
             >
               Join Request
             </Toast.Title>
             <Toast.Description
               style={{
-                fontSize: "13px",
-                color: "rgba(255, 255, 255, 0.9)",
-                marginBottom: "12px",
+                fontSize: '13px',
+                color: 'rgba(255, 255, 255, 0.9)',
+                marginBottom: '12px',
               }}
             >
-              <strong>{moderationEvent.data.requesterName}</strong> wants to
-              join your room
+              <strong>{moderationEvent.data.requesterName}</strong> wants to join your room
             </Toast.Description>
 
             {/* Error message */}
             {requestError && (
               <div
                 style={{
-                  padding: "8px 10px",
-                  background: "rgba(239, 68, 68, 0.2)",
-                  border: "1px solid rgba(239, 68, 68, 0.4)",
-                  borderRadius: "6px",
-                  marginBottom: "12px",
+                  padding: '8px 10px',
+                  background: 'rgba(239, 68, 68, 0.2)',
+                  border: '1px solid rgba(239, 68, 68, 0.4)',
+                  borderRadius: '6px',
+                  marginBottom: '12px',
                 }}
               >
                 <div
                   style={{
-                    fontSize: "12px",
-                    color: "rgba(254, 202, 202, 1)",
-                    fontWeight: "600",
-                    marginBottom: "2px",
+                    fontSize: '12px',
+                    color: 'rgba(254, 202, 202, 1)',
+                    fontWeight: '600',
+                    marginBottom: '2px',
                   }}
                 >
                   ⚠️ Error
                 </div>
                 <div
                   style={{
-                    fontSize: "11px",
-                    color: "rgba(255, 255, 255, 0.9)",
+                    fontSize: '11px',
+                    color: 'rgba(255, 255, 255, 0.9)',
                   }}
                 >
                   {requestError}
@@ -588,39 +574,37 @@ export function ModerationNotifications({
             )}
 
             {/* Action buttons */}
-            <div style={{ display: "flex", gap: "8px" }}>
+            <div style={{ display: 'flex', gap: '8px' }}>
               <button
                 type="button"
                 disabled={isProcessingRequest}
                 onClick={(e) => {
-                  e.stopPropagation();
-                  handleDeny();
+                  e.stopPropagation()
+                  handleDeny()
                 }}
                 style={{
                   flex: 1,
-                  padding: "8px 12px",
+                  padding: '8px 12px',
                   background: isProcessingRequest
-                    ? "rgba(75, 85, 99, 0.3)"
-                    : "rgba(255, 255, 255, 0.2)",
-                  color: "white",
-                  border: "1px solid rgba(255, 255, 255, 0.3)",
-                  borderRadius: "8px",
-                  fontSize: "13px",
-                  fontWeight: "600",
-                  cursor: isProcessingRequest ? "not-allowed" : "pointer",
-                  transition: "all 0.2s ease",
+                    ? 'rgba(75, 85, 99, 0.3)'
+                    : 'rgba(255, 255, 255, 0.2)',
+                  color: 'white',
+                  border: '1px solid rgba(255, 255, 255, 0.3)',
+                  borderRadius: '8px',
+                  fontSize: '13px',
+                  fontWeight: '600',
+                  cursor: isProcessingRequest ? 'not-allowed' : 'pointer',
+                  transition: 'all 0.2s ease',
                   opacity: isProcessingRequest ? 0.5 : 1,
                 }}
                 onMouseEnter={(e) => {
                   if (!isProcessingRequest) {
-                    e.currentTarget.style.background =
-                      "rgba(255, 255, 255, 0.25)";
+                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.25)'
                   }
                 }}
                 onMouseLeave={(e) => {
                   if (!isProcessingRequest) {
-                    e.currentTarget.style.background =
-                      "rgba(255, 255, 255, 0.2)";
+                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.2)'
                   }
                 }}
               >
@@ -630,52 +614,52 @@ export function ModerationNotifications({
                 type="button"
                 disabled={isProcessingRequest}
                 onClick={(e) => {
-                  e.stopPropagation();
-                  handleApprove();
+                  e.stopPropagation()
+                  handleApprove()
                 }}
                 style={{
                   flex: 1,
-                  padding: "8px 12px",
+                  padding: '8px 12px',
                   background: isProcessingRequest
-                    ? "rgba(75, 85, 99, 0.3)"
-                    : "rgba(34, 197, 94, 0.9)",
-                  color: "white",
-                  border: "1px solid rgba(34, 197, 94, 0.8)",
-                  borderRadius: "8px",
-                  fontSize: "13px",
-                  fontWeight: "600",
-                  cursor: isProcessingRequest ? "not-allowed" : "pointer",
-                  transition: "all 0.2s ease",
+                    ? 'rgba(75, 85, 99, 0.3)'
+                    : 'rgba(34, 197, 94, 0.9)',
+                  color: 'white',
+                  border: '1px solid rgba(34, 197, 94, 0.8)',
+                  borderRadius: '8px',
+                  fontSize: '13px',
+                  fontWeight: '600',
+                  cursor: isProcessingRequest ? 'not-allowed' : 'pointer',
+                  transition: 'all 0.2s ease',
                   opacity: isProcessingRequest ? 0.5 : 1,
                 }}
                 onMouseEnter={(e) => {
                   if (!isProcessingRequest) {
-                    e.currentTarget.style.background = "rgba(34, 197, 94, 1)";
+                    e.currentTarget.style.background = 'rgba(34, 197, 94, 1)'
                   }
                 }}
                 onMouseLeave={(e) => {
                   if (!isProcessingRequest) {
-                    e.currentTarget.style.background = "rgba(34, 197, 94, 0.9)";
+                    e.currentTarget.style.background = 'rgba(34, 197, 94, 0.9)'
                   }
                 }}
               >
-                {isProcessingRequest ? "Processing..." : "Approve"}
+                {isProcessingRequest ? 'Processing...' : 'Approve'}
               </button>
             </div>
           </div>
           <Toast.Close
             style={{
-              background: "rgba(255, 255, 255, 0.2)",
-              border: "none",
-              borderRadius: "50%",
-              width: "24px",
-              height: "24px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              cursor: "pointer",
-              color: "white",
-              fontSize: "16px",
+              background: 'rgba(255, 255, 255, 0.2)',
+              border: 'none',
+              borderRadius: '50%',
+              width: '24px',
+              height: '24px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              color: 'white',
+              fontSize: '16px',
               lineHeight: 1,
               flexShrink: 0,
             }}
@@ -686,17 +670,17 @@ export function ModerationNotifications({
 
         <Toast.Viewport
           style={{
-            position: "fixed",
-            top: "80px",
-            right: "20px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "10px",
+            position: 'fixed',
+            top: '80px',
+            right: '20px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '10px',
             zIndex: 10001,
-            maxWidth: "100vw",
+            maxWidth: '100vw',
             margin: 0,
-            listStyle: "none",
-            outline: "none",
+            listStyle: 'none',
+            outline: 'none',
           }}
         />
 
@@ -754,85 +738,83 @@ export function ModerationNotifications({
           }}
         />
       </Toast.Provider>
-    );
+    )
   }
 
   // Invitation modal
-  if (moderationEvent?.type === "invitation") {
-    const invitationType = moderationEvent.data.invitationType;
-    const isAutoUnban = invitationType === "auto-unban";
+  if (moderationEvent?.type === 'invitation') {
+    const invitationType = moderationEvent.data.invitationType
+    const isAutoUnban = invitationType === 'auto-unban'
 
     return (
       <Modal isOpen={true} onClose={() => {}}>
         <div
           style={{
-            border: "2px solid rgba(59, 130, 246, 0.3)",
-            borderRadius: "16px",
-            textAlign: "center",
-            minWidth: "400px",
+            border: '2px solid rgba(59, 130, 246, 0.3)',
+            borderRadius: '16px',
+            textAlign: 'center',
+            minWidth: '400px',
           }}
         >
-          <div style={{ fontSize: "48px", marginBottom: "16px" }}>
-            {isAutoUnban ? "🎉" : "✉️"}
-          </div>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>{isAutoUnban ? '🎉' : '✉️'}</div>
           <h2
             style={{
-              fontSize: "24px",
-              fontWeight: "bold",
-              marginBottom: "12px",
-              color: "rgba(147, 197, 253, 1)",
+              fontSize: '24px',
+              fontWeight: 'bold',
+              marginBottom: '12px',
+              color: 'rgba(147, 197, 253, 1)',
             }}
           >
-            {isAutoUnban ? "You have been unbanned!" : "Room Invitation"}
+            {isAutoUnban ? 'You have been unbanned!' : 'Room Invitation'}
           </h2>
           <p
             style={{
-              fontSize: "14px",
-              color: "rgba(209, 213, 219, 0.9)",
-              marginBottom: "8px",
+              fontSize: '14px',
+              color: 'rgba(209, 213, 219, 0.9)',
+              marginBottom: '8px',
             }}
           >
-            <strong style={{ color: "rgba(147, 197, 253, 1)" }}>
+            <strong style={{ color: 'rgba(147, 197, 253, 1)' }}>
               {moderationEvent.data.invitedByName}
-            </strong>{" "}
+            </strong>{' '}
             has invited you to rejoin the room
           </p>
           {moderationEvent.data.message && (
             <p
               style={{
-                fontSize: "13px",
-                color: "rgba(156, 163, 175, 1)",
-                marginBottom: "24px",
-                fontStyle: "italic",
+                fontSize: '13px',
+                color: 'rgba(156, 163, 175, 1)',
+                marginBottom: '24px',
+                fontStyle: 'italic',
               }}
             >
               "{moderationEvent.data.message}"
             </p>
           )}
 
-          <div style={{ display: "flex", gap: "12px" }}>
+          <div style={{ display: 'flex', gap: '12px' }}>
             <button
               type="button"
               onClick={() => {
-                onClose();
+                onClose()
               }}
               style={{
                 flex: 1,
-                padding: "12px",
-                background: "rgba(75, 85, 99, 0.3)",
-                color: "rgba(209, 213, 219, 1)",
-                border: "2px solid rgba(75, 85, 99, 0.5)",
-                borderRadius: "10px",
-                fontSize: "15px",
-                fontWeight: "600",
-                cursor: "pointer",
-                transition: "all 0.2s ease",
+                padding: '12px',
+                background: 'rgba(75, 85, 99, 0.3)',
+                color: 'rgba(209, 213, 219, 1)',
+                border: '2px solid rgba(75, 85, 99, 0.5)',
+                borderRadius: '10px',
+                fontSize: '15px',
+                fontWeight: '600',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
               }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.background = "rgba(75, 85, 99, 0.4)";
+                e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.background = "rgba(75, 85, 99, 0.3)";
+                e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
               }}
             >
               Decline
@@ -841,61 +823,61 @@ export function ModerationNotifications({
               type="button"
               disabled={isAcceptingInvitation}
               onClick={async () => {
-                const roomId = moderationEvent.data.roomId;
-                if (!roomId) return;
+                const roomId = moderationEvent.data.roomId
+                if (!roomId) return
 
-                setIsAcceptingInvitation(true);
+                setIsAcceptingInvitation(true)
                 try {
                   // Join the room
-                  await joinRoom({ roomId });
+                  await joinRoom({ roomId })
                   // Close the modal
-                  onClose();
+                  onClose()
                   // Navigate to the room
-                  router.push("/arcade");
+                  router.push('/arcade')
                 } catch (error) {
-                  console.error("Failed to join room:", error);
+                  console.error('Failed to join room:', error)
                   showError(
-                    "Failed to join room",
-                    error instanceof Error ? error.message : undefined,
-                  );
-                  setIsAcceptingInvitation(false);
+                    'Failed to join room',
+                    error instanceof Error ? error.message : undefined
+                  )
+                  setIsAcceptingInvitation(false)
                 }
               }}
               style={{
                 flex: 1,
-                padding: "12px",
+                padding: '12px',
                 background: isAcceptingInvitation
-                  ? "rgba(75, 85, 99, 0.5)"
-                  : "linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))",
-                color: "white",
-                border: "2px solid rgba(59, 130, 246, 0.6)",
-                borderRadius: "10px",
-                fontSize: "15px",
-                fontWeight: "600",
-                cursor: isAcceptingInvitation ? "not-allowed" : "pointer",
-                transition: "all 0.2s ease",
+                  ? 'rgba(75, 85, 99, 0.5)'
+                  : 'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))',
+                color: 'white',
+                border: '2px solid rgba(59, 130, 246, 0.6)',
+                borderRadius: '10px',
+                fontSize: '15px',
+                fontWeight: '600',
+                cursor: isAcceptingInvitation ? 'not-allowed' : 'pointer',
+                transition: 'all 0.2s ease',
                 opacity: isAcceptingInvitation ? 0.6 : 1,
               }}
               onMouseEnter={(e) => {
                 if (!isAcceptingInvitation) {
                   e.currentTarget.style.background =
-                    "linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9))";
+                    'linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9))'
                 }
               }}
               onMouseLeave={(e) => {
                 if (!isAcceptingInvitation) {
                   e.currentTarget.style.background =
-                    "linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))";
+                    'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))'
                 }
               }}
             >
-              {isAcceptingInvitation ? "Joining..." : "Accept & Join"}
+              {isAcceptingInvitation ? 'Joining...' : 'Accept & Join'}
             </button>
           </div>
         </div>
       </Modal>
-    );
+    )
   }
 
-  return null;
+  return null
 }
diff --git a/apps/web/src/components/nav/ModerationPanel.tsx b/apps/web/src/components/nav/ModerationPanel.tsx
index 1cdaf8cd..7047dc8b 100644
--- a/apps/web/src/components/nav/ModerationPanel.tsx
+++ b/apps/web/src/components/nav/ModerationPanel.tsx
@@ -1,70 +1,70 @@
-import * as Dialog from "@radix-ui/react-dialog";
-import { useEffect, useState } from "react";
-import { Modal } from "@/components/common/Modal";
-import type { RoomBan, RoomReport } from "@/db/schema";
-import type { RoomMember } from "@/hooks/useRoomData";
+import * as Dialog from '@radix-ui/react-dialog'
+import { useEffect, useState } from 'react'
+import { Modal } from '@/components/common/Modal'
+import type { RoomBan, RoomReport } from '@/db/schema'
+import type { RoomMember } from '@/hooks/useRoomData'
 
 export interface RoomPlayer {
-  id: string;
-  name: string;
-  emoji: string;
-  color: string;
+  id: string
+  name: string
+  emoji: string
+  color: string
 }
 
 export interface ModerationPanelProps {
   /**
    * Whether the panel is open
    */
-  isOpen: boolean;
+  isOpen: boolean
 
   /**
    * Callback when panel should close
    */
-  onClose: () => void;
+  onClose: () => void
 
   /**
    * The room ID
    */
-  roomId: string;
+  roomId: string
 
   /**
    * Current room members
    */
-  members: RoomMember[];
+  members: RoomMember[]
 
   /**
    * Member players (userId -> players)
    */
-  memberPlayers: Record<string, RoomPlayer[]>;
+  memberPlayers: Record<string, RoomPlayer[]>
 
   /**
    * Current user ID (the host)
    */
-  currentUserId: string;
+  currentUserId: string
 
   /**
    * Optional: User ID to focus/highlight when opening the panel
    */
-  focusedUserId?: string;
+  focusedUserId?: string
 }
 
-type Tab = "members" | "bans" | "history" | "settings";
+type Tab = 'members' | 'bans' | 'history' | 'settings'
 
 export interface HistoricalMemberWithStatus {
-  userId: string;
-  displayName: string;
-  firstJoinedAt: Date;
-  lastSeenAt: Date;
-  status: "active" | "banned" | "kicked" | "left";
-  isCurrentlyInRoom: boolean;
-  isBanned: boolean;
+  userId: string
+  displayName: string
+  firstJoinedAt: Date
+  lastSeenAt: Date
+  status: 'active' | 'banned' | 'kicked' | 'left'
+  isCurrentlyInRoom: boolean
+  isBanned: boolean
   banDetails?: {
-    reason: string;
-    bannedBy: string;
-    bannedByName: string;
-    bannedAt: Date;
-  };
-  invitationStatus?: "pending" | "accepted" | "declined" | "expired" | null;
+    reason: string
+    bannedBy: string
+    bannedByName: string
+    bannedAt: Date
+  }
+  invitationStatus?: 'pending' | 'accepted' | 'declined' | 'expired' | null
 }
 
 /**
@@ -79,521 +79,491 @@ export function ModerationPanel({
   currentUserId,
   focusedUserId,
 }: ModerationPanelProps) {
-  const [activeTab, setActiveTab] = useState<Tab>("members");
-  const [reports, setReports] = useState<RoomReport[]>([]);
-  const [bans, setBans] = useState<RoomBan[]>([]);
-  const [historicalMembers, setHistoricalMembers] = useState<
-    HistoricalMemberWithStatus[]
-  >([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [actionLoading, setActionLoading] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<Tab>('members')
+  const [reports, setReports] = useState<RoomReport[]>([])
+  const [bans, setBans] = useState<RoomBan[]>([])
+  const [historicalMembers, setHistoricalMembers] = useState<HistoricalMemberWithStatus[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [actionLoading, setActionLoading] = useState<string | null>(null)
 
   // Settings state
-  const [accessMode, setAccessMode] = useState<string>("open");
-  const [originalAccessMode, setOriginalAccessMode] = useState<string>("open");
-  const [roomPassword, setRoomPassword] = useState("");
-  const [showPasswordInput, setShowPasswordInput] = useState(false);
-  const [selectedNewOwner, setSelectedNewOwner] = useState<string>("");
-  const [joinRequests, setJoinRequests] = useState<any[]>([]);
-  const [passwordCopied, setPasswordCopied] = useState(false);
+  const [accessMode, setAccessMode] = useState<string>('open')
+  const [originalAccessMode, setOriginalAccessMode] = useState<string>('open')
+  const [roomPassword, setRoomPassword] = useState('')
+  const [showPasswordInput, setShowPasswordInput] = useState(false)
+  const [selectedNewOwner, setSelectedNewOwner] = useState<string>('')
+  const [joinRequests, setJoinRequests] = useState<any[]>([])
+  const [passwordCopied, setPasswordCopied] = useState(false)
 
   // Inline feedback state
-  const [successMessage, setSuccessMessage] = useState<string>("");
-  const [errorMessage, setErrorMessage] = useState<string>("");
+  const [successMessage, setSuccessMessage] = useState<string>('')
+  const [errorMessage, setErrorMessage] = useState<string>('')
 
   // Ban modal state
-  const [showBanModal, setShowBanModal] = useState(false);
-  const [banTargetUserId, setBanTargetUserId] = useState<string | null>(null);
-  const [banTargetUserName, setBanTargetUserName] = useState<string | null>(
-    null,
-  );
-  const [selectedBanReason, setSelectedBanReason] =
-    useState<string>("harassment");
+  const [showBanModal, setShowBanModal] = useState(false)
+  const [banTargetUserId, setBanTargetUserId] = useState<string | null>(null)
+  const [banTargetUserName, setBanTargetUserName] = useState<string | null>(null)
+  const [selectedBanReason, setSelectedBanReason] = useState<string>('harassment')
 
   // Unban confirmation state
-  const [confirmingUnbanUserId, setConfirmingUnbanUserId] = useState<
-    string | null
-  >(null);
+  const [confirmingUnbanUserId, setConfirmingUnbanUserId] = useState<string | null>(null)
 
   // Unban & invite confirmation state (for history tab)
-  const [confirmingUnbanInviteUserId, setConfirmingUnbanInviteUserId] =
-    useState<string | null>(null);
+  const [confirmingUnbanInviteUserId, setConfirmingUnbanInviteUserId] = useState<string | null>(
+    null
+  )
 
   // Transfer ownership confirmation state
-  const [confirmingTransferOwnership, setConfirmingTransferOwnership] =
-    useState(false);
+  const [confirmingTransferOwnership, setConfirmingTransferOwnership] = useState(false)
 
   // Auto-switch to Members tab when focusedUserId is provided
   useEffect(() => {
     if (isOpen && focusedUserId) {
-      setActiveTab("members");
+      setActiveTab('members')
     }
-  }, [isOpen, focusedUserId]);
+  }, [isOpen, focusedUserId])
 
   // Load reports and bans when panel opens
   useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen) return
 
     const loadData = async () => {
-      setIsLoading(true);
-      setError("");
+      setIsLoading(true)
+      setError('')
 
       try {
         // Load reports
-        const reportsRes = await fetch(`/api/arcade/rooms/${roomId}/reports`);
+        const reportsRes = await fetch(`/api/arcade/rooms/${roomId}/reports`)
         if (reportsRes.ok) {
-          const data = await reportsRes.json();
-          setReports(data.reports || []);
+          const data = await reportsRes.json()
+          setReports(data.reports || [])
         } else {
-          const errorData = await reportsRes.json().catch(() => ({}));
-          throw new Error(errorData.error || "Failed to load reports");
+          const errorData = await reportsRes.json().catch(() => ({}))
+          throw new Error(errorData.error || 'Failed to load reports')
         }
 
         // Load bans
-        const bansRes = await fetch(`/api/arcade/rooms/${roomId}/ban`);
+        const bansRes = await fetch(`/api/arcade/rooms/${roomId}/ban`)
         if (bansRes.ok) {
-          const data = await bansRes.json();
-          setBans(data.bans || []);
+          const data = await bansRes.json()
+          setBans(data.bans || [])
         } else {
-          const errorData = await bansRes.json().catch(() => ({}));
-          throw new Error(errorData.error || "Failed to load bans");
+          const errorData = await bansRes.json().catch(() => ({}))
+          throw new Error(errorData.error || 'Failed to load bans')
         }
 
         // Load historical members
-        const historyRes = await fetch(`/api/arcade/rooms/${roomId}/history`);
+        const historyRes = await fetch(`/api/arcade/rooms/${roomId}/history`)
         if (historyRes.ok) {
-          const data = await historyRes.json();
-          setHistoricalMembers(data.historicalMembers || []);
+          const data = await historyRes.json()
+          setHistoricalMembers(data.historicalMembers || [])
         } else {
-          const errorData = await historyRes.json().catch(() => ({}));
-          throw new Error(errorData.error || "Failed to load history");
+          const errorData = await historyRes.json().catch(() => ({}))
+          throw new Error(errorData.error || 'Failed to load history')
         }
       } catch (err) {
-        console.error("Failed to load moderation data:", err);
-        setError(err instanceof Error ? err.message : "Failed to load data");
+        console.error('Failed to load moderation data:', err)
+        setError(err instanceof Error ? err.message : 'Failed to load data')
       } finally {
-        setIsLoading(false);
+        setIsLoading(false)
       }
-    };
+    }
 
-    loadData();
-  }, [isOpen, roomId, members]);
+    loadData()
+  }, [isOpen, roomId, members])
 
   const handleKick = async (userId: string) => {
-    setActionLoading(`kick-${userId}`);
+    setActionLoading(`kick-${userId}`)
     try {
       const res = await fetch(`/api/arcade/rooms/${roomId}/kick`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ userId }),
-      });
+      })
 
       if (!res.ok) {
-        const errorData = await res.json().catch(() => ({}));
-        throw new Error(errorData.error || "Failed to kick player");
+        const errorData = await res.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Failed to kick player')
       }
 
       // Success - member will be removed via socket update
-      showSuccess("Player kicked from room");
+      showSuccess('Player kicked from room')
     } catch (err) {
-      showError(err instanceof Error ? err.message : "Failed to kick player");
+      showError(err instanceof Error ? err.message : 'Failed to kick player')
     } finally {
-      setActionLoading(null);
+      setActionLoading(null)
     }
-  };
+  }
 
   const handleBan = (userId: string, userName: string) => {
-    setBanTargetUserId(userId);
-    setBanTargetUserName(userName);
-    setSelectedBanReason("harassment");
-    setShowBanModal(true);
-  };
+    setBanTargetUserId(userId)
+    setBanTargetUserName(userName)
+    setSelectedBanReason('harassment')
+    setShowBanModal(true)
+  }
 
   const handleConfirmBan = async () => {
-    if (!banTargetUserId) return;
+    if (!banTargetUserId) return
 
-    setActionLoading(`ban-${banTargetUserId}`);
-    setShowBanModal(false);
+    setActionLoading(`ban-${banTargetUserId}`)
+    setShowBanModal(false)
 
     try {
       const res = await fetch(`/api/arcade/rooms/${roomId}/ban`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           userId: banTargetUserId,
           reason: selectedBanReason,
         }),
-      });
+      })
 
       if (!res.ok) {
-        const errorData = await res.json().catch(() => ({}));
-        throw new Error(errorData.error || "Failed to ban player");
+        const errorData = await res.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Failed to ban player')
       }
 
       // Reload bans
-      const bansRes = await fetch(`/api/arcade/rooms/${roomId}/ban`);
+      const bansRes = await fetch(`/api/arcade/rooms/${roomId}/ban`)
       if (bansRes.ok) {
-        const data = await bansRes.json();
-        setBans(data.bans || []);
+        const data = await bansRes.json()
+        setBans(data.bans || [])
       }
 
-      showSuccess("Player banned from room");
+      showSuccess('Player banned from room')
     } catch (err) {
-      showError(err instanceof Error ? err.message : "Failed to ban player");
+      showError(err instanceof Error ? err.message : 'Failed to ban player')
     } finally {
-      setActionLoading(null);
-      setBanTargetUserId(null);
-      setBanTargetUserName(null);
+      setActionLoading(null)
+      setBanTargetUserId(null)
+      setBanTargetUserName(null)
     }
-  };
+  }
 
   const handleUnban = async (userId: string) => {
-    setActionLoading(`unban-${userId}`);
-    setConfirmingUnbanUserId(null);
+    setActionLoading(`unban-${userId}`)
+    setConfirmingUnbanUserId(null)
 
     try {
       const res = await fetch(`/api/arcade/rooms/${roomId}/ban`, {
-        method: "DELETE",
-        headers: { "Content-Type": "application/json" },
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ userId }),
-      });
+      })
 
       if (!res.ok) {
-        const errorData = await res.json().catch(() => ({}));
-        throw new Error(errorData.error || "Failed to unban player");
+        const errorData = await res.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Failed to unban player')
       }
 
       // Reload bans and history
-      const bansRes = await fetch(`/api/arcade/rooms/${roomId}/ban`);
+      const bansRes = await fetch(`/api/arcade/rooms/${roomId}/ban`)
       if (bansRes.ok) {
-        const data = await bansRes.json();
-        setBans(data.bans || []);
+        const data = await bansRes.json()
+        setBans(data.bans || [])
       }
 
-      const historyRes = await fetch(`/api/arcade/rooms/${roomId}/history`);
+      const historyRes = await fetch(`/api/arcade/rooms/${roomId}/history`)
       if (historyRes.ok) {
-        const data = await historyRes.json();
-        setHistoricalMembers(data.historicalMembers || []);
+        const data = await historyRes.json()
+        setHistoricalMembers(data.historicalMembers || [])
       }
 
-      showSuccess("Player unbanned");
+      showSuccess('Player unbanned')
     } catch (err) {
-      showError(err instanceof Error ? err.message : "Failed to unban player");
+      showError(err instanceof Error ? err.message : 'Failed to unban player')
     } finally {
-      setActionLoading(null);
+      setActionLoading(null)
     }
-  };
+  }
 
   const handleUnbanAndInvite = async (userId: string, userName: string) => {
-    setActionLoading(`unban-invite-${userId}`);
-    setConfirmingUnbanInviteUserId(null);
+    setActionLoading(`unban-invite-${userId}`)
+    setConfirmingUnbanInviteUserId(null)
 
     try {
       // Unban the user (which also auto-invites them)
       const res = await fetch(`/api/arcade/rooms/${roomId}/ban`, {
-        method: "DELETE",
-        headers: { "Content-Type": "application/json" },
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ userId }),
-      });
+      })
 
       if (!res.ok) {
-        const errorData = await res.json().catch(() => ({}));
-        throw new Error(errorData.error || "Failed to unban player");
+        const errorData = await res.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Failed to unban player')
       }
 
       // Reload bans and history
-      const bansRes = await fetch(`/api/arcade/rooms/${roomId}/ban`);
+      const bansRes = await fetch(`/api/arcade/rooms/${roomId}/ban`)
       if (bansRes.ok) {
-        const data = await bansRes.json();
-        setBans(data.bans || []);
+        const data = await bansRes.json()
+        setBans(data.bans || [])
       }
 
-      const historyRes = await fetch(`/api/arcade/rooms/${roomId}/history`);
+      const historyRes = await fetch(`/api/arcade/rooms/${roomId}/history`)
       if (historyRes.ok) {
-        const data = await historyRes.json();
-        setHistoricalMembers(data.historicalMembers || []);
+        const data = await historyRes.json()
+        setHistoricalMembers(data.historicalMembers || [])
       }
 
-      showSuccess(`${userName} has been unbanned and invited back to the room`);
+      showSuccess(`${userName} has been unbanned and invited back to the room`)
     } catch (err) {
-      showError(err instanceof Error ? err.message : "Failed to unban player");
+      showError(err instanceof Error ? err.message : 'Failed to unban player')
     } finally {
-      setActionLoading(null);
+      setActionLoading(null)
     }
-  };
+  }
 
   const handleInvite = async (userId: string, userName: string) => {
-    setActionLoading(`invite-${userId}`);
+    setActionLoading(`invite-${userId}`)
 
     try {
       const res = await fetch(`/api/arcade/rooms/${roomId}/invite`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ userId, userName }),
-      });
+      })
 
       if (!res.ok) {
-        const errorData = await res.json();
-        throw new Error(errorData.error || "Failed to send invitation");
+        const errorData = await res.json()
+        throw new Error(errorData.error || 'Failed to send invitation')
       }
 
       // Reload history to update invitation status
-      const historyRes = await fetch(`/api/arcade/rooms/${roomId}/history`);
+      const historyRes = await fetch(`/api/arcade/rooms/${roomId}/history`)
       if (historyRes.ok) {
-        const data = await historyRes.json();
-        setHistoricalMembers(data.historicalMembers || []);
+        const data = await historyRes.json()
+        setHistoricalMembers(data.historicalMembers || [])
       }
 
-      showSuccess(`Invitation sent to ${userName}`);
+      showSuccess(`Invitation sent to ${userName}`)
     } catch (err) {
-      showError(
-        err instanceof Error ? err.message : "Failed to send invitation",
-      );
+      showError(err instanceof Error ? err.message : 'Failed to send invitation')
     } finally {
-      setActionLoading(null);
+      setActionLoading(null)
     }
-  };
+  }
 
   // Load room settings and join requests when Settings tab is opened
   useEffect(() => {
-    if (!isOpen || activeTab !== "settings") return;
+    if (!isOpen || activeTab !== 'settings') return
 
     const loadSettings = async () => {
       try {
         // Fetch current room data to get access mode and password
-        const roomRes = await fetch(`/api/arcade/rooms/${roomId}`);
+        const roomRes = await fetch(`/api/arcade/rooms/${roomId}`)
         if (roomRes.ok) {
-          const data = await roomRes.json();
-          const currentAccessMode = data.room?.accessMode || "open";
-          setAccessMode(currentAccessMode);
-          setOriginalAccessMode(currentAccessMode);
+          const data = await roomRes.json()
+          const currentAccessMode = data.room?.accessMode || 'open'
+          setAccessMode(currentAccessMode)
+          setOriginalAccessMode(currentAccessMode)
 
           // Set password field if room has a password and user is the creator
-          if (currentAccessMode === "password" && data.room?.displayPassword) {
-            setRoomPassword(data.room.displayPassword);
-            setShowPasswordInput(true);
+          if (currentAccessMode === 'password' && data.room?.displayPassword) {
+            setRoomPassword(data.room.displayPassword)
+            setShowPasswordInput(true)
           }
         }
 
         // Fetch join requests if any
-        const requestsRes = await fetch(
-          `/api/arcade/rooms/${roomId}/join-requests`,
-        );
+        const requestsRes = await fetch(`/api/arcade/rooms/${roomId}/join-requests`)
         if (requestsRes.ok) {
-          const data = await requestsRes.json();
-          setJoinRequests(data.requests || []);
+          const data = await requestsRes.json()
+          setJoinRequests(data.requests || [])
         }
       } catch (err) {
-        console.error("Failed to load settings:", err);
+        console.error('Failed to load settings:', err)
       }
-    };
+    }
 
-    loadSettings();
-  }, [isOpen, activeTab, roomId]);
+    loadSettings()
+  }, [isOpen, activeTab, roomId])
 
   // Handlers for Settings tab
   const handleUpdateAccessMode = async () => {
-    setActionLoading("update-settings");
+    setActionLoading('update-settings')
     try {
-      const body: any = { accessMode };
-      if (accessMode === "password" && roomPassword) {
-        body.password = roomPassword;
+      const body: any = { accessMode }
+      if (accessMode === 'password' && roomPassword) {
+        body.password = roomPassword
       }
 
       const res = await fetch(`/api/arcade/rooms/${roomId}/settings`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(body),
-      });
+      })
 
       if (!res.ok) {
-        const errorData = await res.json();
-        throw new Error(errorData.error || "Failed to update settings");
+        const errorData = await res.json()
+        throw new Error(errorData.error || 'Failed to update settings')
       }
 
-      showSuccess("Room settings updated successfully");
-      setOriginalAccessMode(accessMode); // Update original to current
-      setShowPasswordInput(false);
-      setRoomPassword("");
+      showSuccess('Room settings updated successfully')
+      setOriginalAccessMode(accessMode) // Update original to current
+      setShowPasswordInput(false)
+      setRoomPassword('')
     } catch (err) {
-      showError(
-        err instanceof Error ? err.message : "Failed to update settings",
-      );
+      showError(err instanceof Error ? err.message : 'Failed to update settings')
     } finally {
-      setActionLoading(null);
+      setActionLoading(null)
     }
-  };
+  }
 
   const handleTransferOwnership = async () => {
-    if (!selectedNewOwner) return;
+    if (!selectedNewOwner) return
 
-    const newOwner = members.find((m) => m.userId === selectedNewOwner);
-    if (!newOwner) return;
+    const newOwner = members.find((m) => m.userId === selectedNewOwner)
+    if (!newOwner) return
 
-    setConfirmingTransferOwnership(false);
-    setActionLoading("transfer-ownership");
+    setConfirmingTransferOwnership(false)
+    setActionLoading('transfer-ownership')
 
     try {
-      const res = await fetch(
-        `/api/arcade/rooms/${roomId}/transfer-ownership`,
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ newOwnerId: selectedNewOwner }),
-        },
-      );
+      const res = await fetch(`/api/arcade/rooms/${roomId}/transfer-ownership`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ newOwnerId: selectedNewOwner }),
+      })
 
       if (!res.ok) {
-        const errorData = await res.json();
-        throw new Error(errorData.error || "Failed to transfer ownership");
+        const errorData = await res.json()
+        throw new Error(errorData.error || 'Failed to transfer ownership')
       }
 
-      showSuccess(`Ownership transferred to ${newOwner.displayName}`);
-      setTimeout(() => onClose(), 2000); // Close panel after showing message
+      showSuccess(`Ownership transferred to ${newOwner.displayName}`)
+      setTimeout(() => onClose(), 2000) // Close panel after showing message
     } catch (err) {
-      showError(
-        err instanceof Error ? err.message : "Failed to transfer ownership",
-      );
+      showError(err instanceof Error ? err.message : 'Failed to transfer ownership')
     } finally {
-      setActionLoading(null);
-      setSelectedNewOwner(""); // Reset selection
+      setActionLoading(null)
+      setSelectedNewOwner('') // Reset selection
     }
-  };
+  }
 
   const handleApproveJoinRequest = async (requestId: string) => {
-    setActionLoading(`approve-request-${requestId}`);
+    setActionLoading(`approve-request-${requestId}`)
     try {
-      const res = await fetch(
-        `/api/arcade/rooms/${roomId}/join-requests/${requestId}/approve`,
-        {
-          method: "POST",
-        },
-      );
+      const res = await fetch(`/api/arcade/rooms/${roomId}/join-requests/${requestId}/approve`, {
+        method: 'POST',
+      })
 
       if (!res.ok) {
-        const errorData = await res.json();
-        throw new Error(errorData.error || "Failed to approve request");
+        const errorData = await res.json()
+        throw new Error(errorData.error || 'Failed to approve request')
       }
 
       // Reload requests
-      const requestsRes = await fetch(
-        `/api/arcade/rooms/${roomId}/join-requests`,
-      );
+      const requestsRes = await fetch(`/api/arcade/rooms/${roomId}/join-requests`)
       if (requestsRes.ok) {
-        const data = await requestsRes.json();
-        setJoinRequests(data.requests || []);
+        const data = await requestsRes.json()
+        setJoinRequests(data.requests || [])
       }
 
-      showSuccess("Join request approved");
+      showSuccess('Join request approved')
     } catch (err) {
-      showError(
-        err instanceof Error ? err.message : "Failed to approve request",
-      );
+      showError(err instanceof Error ? err.message : 'Failed to approve request')
     } finally {
-      setActionLoading(null);
+      setActionLoading(null)
     }
-  };
+  }
 
   const handleDenyJoinRequest = async (requestId: string) => {
-    setActionLoading(`deny-request-${requestId}`);
+    setActionLoading(`deny-request-${requestId}`)
     try {
-      const res = await fetch(
-        `/api/arcade/rooms/${roomId}/join-requests/${requestId}/deny`,
-        {
-          method: "POST",
-        },
-      );
+      const res = await fetch(`/api/arcade/rooms/${roomId}/join-requests/${requestId}/deny`, {
+        method: 'POST',
+      })
 
       if (!res.ok) {
-        const errorData = await res.json();
-        throw new Error(errorData.error || "Failed to deny request");
+        const errorData = await res.json()
+        throw new Error(errorData.error || 'Failed to deny request')
       }
 
       // Reload requests
-      const requestsRes = await fetch(
-        `/api/arcade/rooms/${roomId}/join-requests`,
-      );
+      const requestsRes = await fetch(`/api/arcade/rooms/${roomId}/join-requests`)
       if (requestsRes.ok) {
-        const data = await requestsRes.json();
-        setJoinRequests(data.requests || []);
+        const data = await requestsRes.json()
+        setJoinRequests(data.requests || [])
       }
 
-      showSuccess("Join request denied");
+      showSuccess('Join request denied')
     } catch (err) {
-      showError(err instanceof Error ? err.message : "Failed to deny request");
+      showError(err instanceof Error ? err.message : 'Failed to deny request')
     } finally {
-      setActionLoading(null);
+      setActionLoading(null)
     }
-  };
+  }
 
   const handleCopyPassword = async () => {
-    if (!roomPassword) return;
+    if (!roomPassword) return
 
     try {
-      await navigator.clipboard.writeText(roomPassword);
-      setPasswordCopied(true);
-      setTimeout(() => setPasswordCopied(false), 2000);
+      await navigator.clipboard.writeText(roomPassword)
+      setPasswordCopied(true)
+      setTimeout(() => setPasswordCopied(false), 2000)
     } catch (err) {
-      console.error("Failed to copy password:", err);
-      showError("Failed to copy password to clipboard");
+      console.error('Failed to copy password:', err)
+      showError('Failed to copy password to clipboard')
     }
-  };
+  }
 
   // Utility functions for showing feedback
   const showSuccess = (message: string) => {
-    setSuccessMessage(message);
-    setErrorMessage("");
-    setTimeout(() => setSuccessMessage(""), 5000);
-  };
+    setSuccessMessage(message)
+    setErrorMessage('')
+    setTimeout(() => setSuccessMessage(''), 5000)
+  }
 
   const showError = (message: string) => {
-    setErrorMessage(message);
-    setSuccessMessage("");
-    setTimeout(() => setErrorMessage(""), 5000);
-  };
+    setErrorMessage(message)
+    setSuccessMessage('')
+    setTimeout(() => setErrorMessage(''), 5000)
+  }
 
-  const pendingReports = reports.filter((r) => r.status === "pending");
-  const otherMembers = members.filter((m) => m.userId !== currentUserId);
+  const pendingReports = reports.filter((r) => r.status === 'pending')
+  const otherMembers = members.filter((m) => m.userId !== currentUserId)
 
   // Check if there are unsaved changes in settings
-  const hasUnsavedAccessModeChanges = accessMode !== originalAccessMode;
+  const hasUnsavedAccessModeChanges = accessMode !== originalAccessMode
 
   // Group reports by reported user ID
   const reportsByUser = pendingReports.reduce(
     (acc, report) => {
       if (!acc[report.reportedUserId]) {
-        acc[report.reportedUserId] = [];
+        acc[report.reportedUserId] = []
       }
-      acc[report.reportedUserId].push(report);
-      return acc;
+      acc[report.reportedUserId].push(report)
+      return acc
     },
-    {} as Record<string, typeof pendingReports>,
-  );
+    {} as Record<string, typeof pendingReports>
+  )
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} className="moderation-modal">
       <div
         style={{
-          width: "100%",
-          boxSizing: "border-box",
+          width: '100%',
+          boxSizing: 'border-box',
         }}
       >
         <h2
           style={{
-            fontSize: "24px",
-            fontWeight: "bold",
-            marginBottom: "8px",
-            color: "rgba(253, 186, 116, 1)",
+            fontSize: '24px',
+            fontWeight: 'bold',
+            marginBottom: '8px',
+            color: 'rgba(253, 186, 116, 1)',
           }}
         >
           👑 Room Moderation
         </h2>
         <p
           style={{
-            fontSize: "14px",
-            color: "rgba(209, 213, 219, 0.8)",
-            marginBottom: "20px",
+            fontSize: '14px',
+            color: 'rgba(209, 213, 219, 0.8)',
+            marginBottom: '20px',
           }}
         >
           Manage members, reports, and bans
@@ -603,39 +573,33 @@ export function ModerationPanel({
         {(successMessage || errorMessage) && (
           <div
             style={{
-              padding: "12px 16px",
-              background: successMessage
-                ? "rgba(34, 197, 94, 0.1)"
-                : "rgba(239, 68, 68, 0.1)",
+              padding: '12px 16px',
+              background: successMessage ? 'rgba(34, 197, 94, 0.1)' : 'rgba(239, 68, 68, 0.1)',
               border: successMessage
-                ? "1px solid rgba(34, 197, 94, 0.4)"
-                : "1px solid rgba(239, 68, 68, 0.4)",
-              borderRadius: "8px",
-              marginBottom: "16px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              animation: "fadeIn 0.2s ease",
+                ? '1px solid rgba(34, 197, 94, 0.4)'
+                : '1px solid rgba(239, 68, 68, 0.4)',
+              borderRadius: '8px',
+              marginBottom: '16px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              animation: 'fadeIn 0.2s ease',
             }}
           >
             <div
               style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
                 flex: 1,
               }}
             >
-              <span style={{ fontSize: "16px" }}>
-                {successMessage ? "✓" : "⚠"}
-              </span>
+              <span style={{ fontSize: '16px' }}>{successMessage ? '✓' : '⚠'}</span>
               <span
                 style={{
-                  fontSize: "14px",
-                  fontWeight: "600",
-                  color: successMessage
-                    ? "rgba(34, 197, 94, 1)"
-                    : "rgba(239, 68, 68, 1)",
+                  fontSize: '14px',
+                  fontWeight: '600',
+                  color: successMessage ? 'rgba(34, 197, 94, 1)' : 'rgba(239, 68, 68, 1)',
                 }}
               >
                 {successMessage || errorMessage}
@@ -644,25 +608,23 @@ export function ModerationPanel({
             <button
               type="button"
               onClick={() => {
-                setSuccessMessage("");
-                setErrorMessage("");
+                setSuccessMessage('')
+                setErrorMessage('')
               }}
               style={{
-                background: "none",
-                border: "none",
-                color: successMessage
-                  ? "rgba(34, 197, 94, 0.8)"
-                  : "rgba(239, 68, 68, 0.8)",
-                fontSize: "18px",
-                cursor: "pointer",
-                padding: "0 4px",
+                background: 'none',
+                border: 'none',
+                color: successMessage ? 'rgba(34, 197, 94, 0.8)' : 'rgba(239, 68, 68, 0.8)',
+                fontSize: '18px',
+                cursor: 'pointer',
+                padding: '0 4px',
                 lineHeight: 1,
               }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.opacity = "1";
+                e.currentTarget.style.opacity = '1'
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.opacity = "0.8";
+                e.currentTarget.style.opacity = '0.8'
               }}
             >
               ✕
@@ -673,80 +635,69 @@ export function ModerationPanel({
         {/* Tabs */}
         <div
           style={{
-            display: "flex",
-            gap: "8px",
-            marginBottom: "20px",
-            borderBottom: "1px solid rgba(75, 85, 99, 0.3)",
+            display: 'flex',
+            gap: '8px',
+            marginBottom: '20px',
+            borderBottom: '1px solid rgba(75, 85, 99, 0.3)',
           }}
         >
-          {(["members", "bans", "history", "settings"] as Tab[]).map((tab) => (
+          {(['members', 'bans', 'history', 'settings'] as Tab[]).map((tab) => (
             <button
               key={tab}
               type="button"
               onClick={() => setActiveTab(tab)}
               style={{
-                padding: "10px 16px",
-                background:
-                  activeTab === tab ? "rgba(251, 146, 60, 0.2)" : "transparent",
-                color:
-                  activeTab === tab
-                    ? "rgba(253, 186, 116, 1)"
-                    : "rgba(156, 163, 175, 1)",
-                border: "none",
+                padding: '10px 16px',
+                background: activeTab === tab ? 'rgba(251, 146, 60, 0.2)' : 'transparent',
+                color: activeTab === tab ? 'rgba(253, 186, 116, 1)' : 'rgba(156, 163, 175, 1)',
+                border: 'none',
                 borderBottom:
-                  activeTab === tab
-                    ? "2px solid rgba(251, 146, 60, 1)"
-                    : "2px solid transparent",
-                fontSize: "14px",
-                fontWeight: "600",
-                cursor: "pointer",
-                transition: "all 0.2s ease",
+                  activeTab === tab ? '2px solid rgba(251, 146, 60, 1)' : '2px solid transparent',
+                fontSize: '14px',
+                fontWeight: '600',
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
               }}
             >
-              {tab === "members" && (
+              {tab === 'members' && (
                 <span>
                   Members ({otherMembers.length})
                   {pendingReports.length > 0 && (
                     <span
                       style={{
-                        marginLeft: "6px",
-                        padding: "2px 6px",
-                        borderRadius: "10px",
-                        background: "rgba(239, 68, 68, 0.8)",
-                        color: "white",
-                        fontSize: "11px",
-                        fontWeight: "700",
+                        marginLeft: '6px',
+                        padding: '2px 6px',
+                        borderRadius: '10px',
+                        background: 'rgba(239, 68, 68, 0.8)',
+                        color: 'white',
+                        fontSize: '11px',
+                        fontWeight: '700',
                       }}
                     >
                       {pendingReports.length} report
-                      {pendingReports.length > 1 ? "s" : ""}
+                      {pendingReports.length > 1 ? 's' : ''}
                     </span>
                   )}
                 </span>
               )}
-              {tab === "bans" && `Banned (${bans.length})`}
-              {tab === "history" && `History (${historicalMembers.length})`}
-              {tab === "settings" && (
+              {tab === 'bans' && `Banned (${bans.length})`}
+              {tab === 'history' && `History (${historicalMembers.length})`}
+              {tab === 'settings' && (
                 <span>
                   ⚙️ Settings
-                  {joinRequests.filter((r: any) => r.status === "pending")
-                    .length > 0 && (
+                  {joinRequests.filter((r: any) => r.status === 'pending').length > 0 && (
                     <span
                       style={{
-                        marginLeft: "6px",
-                        padding: "2px 6px",
-                        borderRadius: "10px",
-                        background: "rgba(59, 130, 246, 0.8)",
-                        color: "white",
-                        fontSize: "11px",
-                        fontWeight: "700",
+                        marginLeft: '6px',
+                        padding: '2px 6px',
+                        borderRadius: '10px',
+                        background: 'rgba(59, 130, 246, 0.8)',
+                        color: 'white',
+                        fontSize: '11px',
+                        fontWeight: '700',
                       }}
                     >
-                      {
-                        joinRequests.filter((r: any) => r.status === "pending")
-                          .length
-                      }{" "}
-                      pending
+                      {joinRequests.filter((r: any) => r.status === 'pending').length} pending
                     </span>
                   )}
                 </span>
@@ -758,40 +709,38 @@ export function ModerationPanel({
         {error && (
           <div
             style={{
-              padding: "12px",
-              background: "rgba(239, 68, 68, 0.1)",
-              border: "1px solid rgba(239, 68, 68, 0.3)",
-              borderRadius: "8px",
-              marginBottom: "16px",
+              padding: '12px',
+              background: 'rgba(239, 68, 68, 0.1)',
+              border: '1px solid rgba(239, 68, 68, 0.3)',
+              borderRadius: '8px',
+              marginBottom: '16px',
             }}
           >
-            <p style={{ fontSize: "13px", color: "rgba(248, 113, 113, 1)" }}>
-              {error}
-            </p>
+            <p style={{ fontSize: '13px', color: 'rgba(248, 113, 113, 1)' }}>{error}</p>
           </div>
         )}
 
         {isLoading ? (
           <div
             style={{
-              textAlign: "center",
-              padding: "40px",
-              color: "rgba(156, 163, 175, 1)",
+              textAlign: 'center',
+              padding: '40px',
+              color: 'rgba(156, 163, 175, 1)',
             }}
           >
             Loading...
           </div>
         ) : (
-          <div style={{ maxHeight: "400px", overflowY: "auto" }}>
+          <div style={{ maxHeight: '400px', overflowY: 'auto' }}>
             {/* Members Tab */}
-            {activeTab === "members" && (
+            {activeTab === 'members' && (
               <div>
                 {otherMembers.length === 0 ? (
                   <div
                     style={{
-                      textAlign: "center",
-                      padding: "40px",
-                      color: "rgba(156, 163, 175, 1)",
+                      textAlign: 'center',
+                      padding: '40px',
+                      color: 'rgba(156, 163, 175, 1)',
                     }}
                   >
                     No other members
@@ -799,54 +748,52 @@ export function ModerationPanel({
                 ) : (
                   <div
                     style={{
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: "12px",
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '12px',
                     }}
                   >
                     {otherMembers.map((member) => {
-                      const memberReports = reportsByUser[member.userId] || [];
-                      const hasReports = memberReports.length > 0;
-                      const isFocused = focusedUserId === member.userId;
+                      const memberReports = reportsByUser[member.userId] || []
+                      const hasReports = memberReports.length > 0
+                      const isFocused = focusedUserId === member.userId
 
                       return (
                         <div
                           key={member.id}
                           style={{
-                            padding: "12px",
+                            padding: '12px',
                             background: hasReports
-                              ? "rgba(239, 68, 68, 0.08)"
-                              : "rgba(255, 255, 255, 0.05)",
+                              ? 'rgba(239, 68, 68, 0.08)'
+                              : 'rgba(255, 255, 255, 0.05)',
                             border: isFocused
-                              ? "2px solid rgba(251, 146, 60, 1)"
+                              ? '2px solid rgba(251, 146, 60, 1)'
                               : hasReports
-                                ? "1px solid rgba(239, 68, 68, 0.6)"
-                                : "1px solid rgba(75, 85, 99, 0.3)",
-                            borderRadius: "8px",
-                            boxShadow: isFocused
-                              ? "0 0 0 3px rgba(251, 146, 60, 0.2)"
-                              : "none",
-                            transition: "all 0.2s ease",
+                                ? '1px solid rgba(239, 68, 68, 0.6)'
+                                : '1px solid rgba(75, 85, 99, 0.3)',
+                            borderRadius: '8px',
+                            boxShadow: isFocused ? '0 0 0 3px rgba(251, 146, 60, 0.2)' : 'none',
+                            transition: 'all 0.2s ease',
                           }}
                         >
                           {/* Member header */}
                           <div
                             style={{
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "space-between",
-                              marginBottom: hasReports ? "12px" : 0,
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'space-between',
+                              marginBottom: hasReports ? '12px' : 0,
                             }}
                           >
                             <div>
                               <div
                                 style={{
-                                  fontSize: "14px",
-                                  fontWeight: "600",
-                                  color: "rgba(209, 213, 219, 1)",
-                                  display: "flex",
-                                  alignItems: "center",
-                                  gap: "8px",
+                                  fontSize: '14px',
+                                  fontWeight: '600',
+                                  color: 'rgba(209, 213, 219, 1)',
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  gap: '8px',
                                 }}
                               >
                                 {/* Player emojis */}
@@ -854,7 +801,7 @@ export function ModerationPanel({
                                   <span
                                     key={player.id}
                                     style={{
-                                      fontSize: "18px",
+                                      fontSize: '18px',
                                       lineHeight: 1,
                                     }}
                                     title={player.name}
@@ -866,86 +813,70 @@ export function ModerationPanel({
                                 {hasReports && (
                                   <span
                                     style={{
-                                      padding: "2px 8px",
-                                      borderRadius: "10px",
-                                      background: "rgba(239, 68, 68, 0.8)",
-                                      color: "white",
-                                      fontSize: "11px",
-                                      fontWeight: "700",
+                                      padding: '2px 8px',
+                                      borderRadius: '10px',
+                                      background: 'rgba(239, 68, 68, 0.8)',
+                                      color: 'white',
+                                      fontSize: '11px',
+                                      fontWeight: '700',
                                     }}
                                   >
                                     {memberReports.length} report
-                                    {memberReports.length > 1 ? "s" : ""}
+                                    {memberReports.length > 1 ? 's' : ''}
                                   </span>
                                 )}
                               </div>
                               <div
                                 style={{
-                                  fontSize: "12px",
-                                  color: "rgba(156, 163, 175, 1)",
+                                  fontSize: '12px',
+                                  color: 'rgba(156, 163, 175, 1)',
                                 }}
                               >
-                                {member.isOnline ? "🟢 Online" : "⚫ Offline"}
+                                {member.isOnline ? '🟢 Online' : '⚫ Offline'}
                               </div>
                             </div>
-                            <div style={{ display: "flex", gap: "8px" }}>
+                            <div style={{ display: 'flex', gap: '8px' }}>
                               <button
                                 type="button"
                                 onClick={() => handleKick(member.userId)}
-                                disabled={
-                                  actionLoading === `kick-${member.userId}`
-                                }
+                                disabled={actionLoading === `kick-${member.userId}`}
                                 style={{
-                                  padding: "6px 12px",
-                                  background: "rgba(251, 146, 60, 0.2)",
-                                  color: "rgba(251, 146, 60, 1)",
-                                  border: "1px solid rgba(251, 146, 60, 0.4)",
-                                  borderRadius: "6px",
-                                  fontSize: "13px",
-                                  fontWeight: "600",
+                                  padding: '6px 12px',
+                                  background: 'rgba(251, 146, 60, 0.2)',
+                                  color: 'rgba(251, 146, 60, 1)',
+                                  border: '1px solid rgba(251, 146, 60, 0.4)',
+                                  borderRadius: '6px',
+                                  fontSize: '13px',
+                                  fontWeight: '600',
                                   cursor:
                                     actionLoading === `kick-${member.userId}`
-                                      ? "not-allowed"
-                                      : "pointer",
-                                  opacity:
-                                    actionLoading === `kick-${member.userId}`
-                                      ? 0.5
-                                      : 1,
+                                      ? 'not-allowed'
+                                      : 'pointer',
+                                  opacity: actionLoading === `kick-${member.userId}` ? 0.5 : 1,
                                 }}
                               >
-                                {actionLoading === `kick-${member.userId}`
-                                  ? "Kicking..."
-                                  : "Kick"}
+                                {actionLoading === `kick-${member.userId}` ? 'Kicking...' : 'Kick'}
                               </button>
                               <button
                                 type="button"
-                                onClick={() =>
-                                  handleBan(member.userId, member.displayName)
-                                }
-                                disabled={
-                                  actionLoading === `ban-${member.userId}`
-                                }
+                                onClick={() => handleBan(member.userId, member.displayName)}
+                                disabled={actionLoading === `ban-${member.userId}`}
                                 style={{
-                                  padding: "6px 12px",
-                                  background: "rgba(239, 68, 68, 0.2)",
-                                  color: "rgba(239, 68, 68, 1)",
-                                  border: "1px solid rgba(239, 68, 68, 0.4)",
-                                  borderRadius: "6px",
-                                  fontSize: "13px",
-                                  fontWeight: "600",
+                                  padding: '6px 12px',
+                                  background: 'rgba(239, 68, 68, 0.2)',
+                                  color: 'rgba(239, 68, 68, 1)',
+                                  border: '1px solid rgba(239, 68, 68, 0.4)',
+                                  borderRadius: '6px',
+                                  fontSize: '13px',
+                                  fontWeight: '600',
                                   cursor:
                                     actionLoading === `ban-${member.userId}`
-                                      ? "not-allowed"
-                                      : "pointer",
-                                  opacity:
-                                    actionLoading === `ban-${member.userId}`
-                                      ? 0.5
-                                      : 1,
+                                      ? 'not-allowed'
+                                      : 'pointer',
+                                  opacity: actionLoading === `ban-${member.userId}` ? 0.5 : 1,
                                 }}
                               >
-                                {actionLoading === `ban-${member.userId}`
-                                  ? "Banning..."
-                                  : "Ban"}
+                                {actionLoading === `ban-${member.userId}` ? 'Banning...' : 'Ban'}
                               </button>
                             </div>
                           </div>
@@ -954,19 +885,19 @@ export function ModerationPanel({
                           {hasReports && (
                             <div
                               style={{
-                                marginTop: "12px",
-                                paddingTop: "12px",
-                                borderTop: "1px solid rgba(239, 68, 68, 0.2)",
+                                marginTop: '12px',
+                                paddingTop: '12px',
+                                borderTop: '1px solid rgba(239, 68, 68, 0.2)',
                               }}
                             >
                               <div
                                 style={{
-                                  fontSize: "11px",
-                                  fontWeight: "700",
-                                  color: "rgba(239, 68, 68, 1)",
-                                  marginBottom: "8px",
-                                  textTransform: "uppercase",
-                                  letterSpacing: "0.5px",
+                                  fontSize: '11px',
+                                  fontWeight: '700',
+                                  color: 'rgba(239, 68, 68, 1)',
+                                  marginBottom: '8px',
+                                  textTransform: 'uppercase',
+                                  letterSpacing: '0.5px',
                                 }}
                               >
                                 Reports:
@@ -975,30 +906,29 @@ export function ModerationPanel({
                                 <div
                                   key={report.id}
                                   style={{
-                                    fontSize: "12px",
-                                    color: "rgba(209, 213, 219, 0.9)",
-                                    marginBottom: "6px",
-                                    paddingLeft: "8px",
-                                    borderLeft:
-                                      "2px solid rgba(239, 68, 68, 0.4)",
+                                    fontSize: '12px',
+                                    color: 'rgba(209, 213, 219, 0.9)',
+                                    marginBottom: '6px',
+                                    paddingLeft: '8px',
+                                    borderLeft: '2px solid rgba(239, 68, 68, 0.4)',
                                   }}
                                 >
-                                  <div style={{ marginBottom: "2px" }}>
+                                  <div style={{ marginBottom: '2px' }}>
                                     <strong
                                       style={{
-                                        color: "rgba(252, 165, 165, 1)",
+                                        color: 'rgba(252, 165, 165, 1)',
                                       }}
                                     >
                                       {report.reporterName}:
-                                    </strong>{" "}
-                                    {report.reason.replace(/-/g, " ")}
+                                    </strong>{' '}
+                                    {report.reason.replace(/-/g, ' ')}
                                   </div>
                                   {report.details && (
                                     <div
                                       style={{
-                                        fontSize: "11px",
-                                        color: "rgba(156, 163, 175, 1)",
-                                        fontStyle: "italic",
+                                        fontSize: '11px',
+                                        color: 'rgba(156, 163, 175, 1)',
+                                        fontStyle: 'italic',
                                       }}
                                     >
                                       "{report.details}"
@@ -1009,7 +939,7 @@ export function ModerationPanel({
                             </div>
                           )}
                         </div>
-                      );
+                      )
                     })}
                   </div>
                 )}
@@ -1017,14 +947,14 @@ export function ModerationPanel({
             )}
 
             {/* Bans Tab */}
-            {activeTab === "bans" && (
+            {activeTab === 'bans' && (
               <div>
                 {bans.length === 0 ? (
                   <div
                     style={{
-                      textAlign: "center",
-                      padding: "40px",
-                      color: "rgba(156, 163, 175, 1)",
+                      textAlign: 'center',
+                      padding: '40px',
+                      color: 'rgba(156, 163, 175, 1)',
                     }}
                   >
                     No banned users
@@ -1032,62 +962,62 @@ export function ModerationPanel({
                 ) : (
                   <div
                     style={{
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: "8px",
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '8px',
                     }}
                   >
                     {bans.map((ban) => {
-                      const isConfirming = confirmingUnbanUserId === ban.userId;
+                      const isConfirming = confirmingUnbanUserId === ban.userId
 
                       return (
                         <div
                           key={ban.id}
                           style={{
-                            padding: "12px",
+                            padding: '12px',
                             background: isConfirming
-                              ? "rgba(34, 197, 94, 0.08)"
-                              : "rgba(255, 255, 255, 0.05)",
+                              ? 'rgba(34, 197, 94, 0.08)'
+                              : 'rgba(255, 255, 255, 0.05)',
                             border: isConfirming
-                              ? "1px solid rgba(34, 197, 94, 0.6)"
-                              : "1px solid rgba(75, 85, 99, 0.3)",
-                            borderRadius: "8px",
+                              ? '1px solid rgba(34, 197, 94, 0.6)'
+                              : '1px solid rgba(75, 85, 99, 0.3)',
+                            borderRadius: '8px',
                           }}
                         >
                           {/* Ban info */}
                           <div
                             style={{
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "space-between",
-                              marginBottom: isConfirming ? "12px" : 0,
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'space-between',
+                              marginBottom: isConfirming ? '12px' : 0,
                             }}
                           >
                             <div>
                               <div
                                 style={{
-                                  fontSize: "14px",
-                                  fontWeight: "600",
-                                  color: "rgba(209, 213, 219, 1)",
+                                  fontSize: '14px',
+                                  fontWeight: '600',
+                                  color: 'rgba(209, 213, 219, 1)',
                                 }}
                               >
                                 {ban.userName}
                               </div>
                               <div
                                 style={{
-                                  fontSize: "12px",
-                                  color: "rgba(156, 163, 175, 1)",
+                                  fontSize: '12px',
+                                  color: 'rgba(156, 163, 175, 1)',
                                 }}
                               >
-                                {ban.reason.replace(/-/g, " ")}
+                                {ban.reason.replace(/-/g, ' ')}
                               </div>
                               {ban.notes && (
                                 <div
                                   style={{
-                                    fontSize: "11px",
-                                    color: "rgba(156, 163, 175, 1)",
-                                    fontStyle: "italic",
-                                    marginTop: "4px",
+                                    fontSize: '11px',
+                                    color: 'rgba(156, 163, 175, 1)',
+                                    fontStyle: 'italic',
+                                    marginTop: '4px',
                                   }}
                                 >
                                   "{ban.notes}"
@@ -1099,33 +1029,24 @@ export function ModerationPanel({
                             {!isConfirming && (
                               <button
                                 type="button"
-                                onClick={() =>
-                                  setConfirmingUnbanUserId(ban.userId)
-                                }
-                                disabled={
-                                  actionLoading === `unban-${ban.userId}`
-                                }
+                                onClick={() => setConfirmingUnbanUserId(ban.userId)}
+                                disabled={actionLoading === `unban-${ban.userId}`}
                                 style={{
-                                  padding: "6px 12px",
-                                  background: "rgba(34, 197, 94, 0.2)",
-                                  color: "rgba(34, 197, 94, 1)",
-                                  border: "1px solid rgba(34, 197, 94, 0.4)",
-                                  borderRadius: "6px",
-                                  fontSize: "13px",
-                                  fontWeight: "600",
+                                  padding: '6px 12px',
+                                  background: 'rgba(34, 197, 94, 0.2)',
+                                  color: 'rgba(34, 197, 94, 1)',
+                                  border: '1px solid rgba(34, 197, 94, 0.4)',
+                                  borderRadius: '6px',
+                                  fontSize: '13px',
+                                  fontWeight: '600',
                                   cursor:
                                     actionLoading === `unban-${ban.userId}`
-                                      ? "not-allowed"
-                                      : "pointer",
-                                  opacity:
-                                    actionLoading === `unban-${ban.userId}`
-                                      ? 0.5
-                                      : 1,
+                                      ? 'not-allowed'
+                                      : 'pointer',
+                                  opacity: actionLoading === `unban-${ban.userId}` ? 0.5 : 1,
                                 }}
                               >
-                                {actionLoading === `unban-${ban.userId}`
-                                  ? "Unbanning..."
-                                  : "Unban"}
+                                {actionLoading === `unban-${ban.userId}` ? 'Unbanning...' : 'Unban'}
                               </button>
                             )}
                           </div>
@@ -1134,58 +1055,56 @@ export function ModerationPanel({
                           {isConfirming && (
                             <div
                               style={{
-                                marginTop: "12px",
-                                paddingTop: "12px",
-                                borderTop: "1px solid rgba(34, 197, 94, 0.2)",
+                                marginTop: '12px',
+                                paddingTop: '12px',
+                                borderTop: '1px solid rgba(34, 197, 94, 0.2)',
                               }}
                             >
                               <div
                                 style={{
-                                  fontSize: "13px",
-                                  fontWeight: "600",
-                                  color: "rgba(134, 239, 172, 1)",
-                                  marginBottom: "12px",
+                                  fontSize: '13px',
+                                  fontWeight: '600',
+                                  color: 'rgba(134, 239, 172, 1)',
+                                  marginBottom: '12px',
                                 }}
                               >
                                 ✓ Unban {ban.userName}?
                               </div>
                               <div
                                 style={{
-                                  fontSize: "12px",
-                                  color: "rgba(209, 213, 219, 0.8)",
-                                  marginBottom: "12px",
+                                  fontSize: '12px',
+                                  color: 'rgba(209, 213, 219, 0.8)',
+                                  marginBottom: '12px',
                                 }}
                               >
                                 This player will be able to rejoin the room.
                               </div>
                               <div
                                 style={{
-                                  display: "flex",
-                                  gap: "8px",
-                                  justifyContent: "flex-end",
+                                  display: 'flex',
+                                  gap: '8px',
+                                  justifyContent: 'flex-end',
                                 }}
                               >
                                 <button
                                   type="button"
                                   onClick={() => setConfirmingUnbanUserId(null)}
                                   style={{
-                                    padding: "6px 12px",
-                                    background: "rgba(75, 85, 99, 0.3)",
-                                    color: "rgba(209, 213, 219, 1)",
-                                    border: "1px solid rgba(75, 85, 99, 0.5)",
-                                    borderRadius: "6px",
-                                    fontSize: "13px",
-                                    fontWeight: "600",
-                                    cursor: "pointer",
-                                    transition: "all 0.2s ease",
+                                    padding: '6px 12px',
+                                    background: 'rgba(75, 85, 99, 0.3)',
+                                    color: 'rgba(209, 213, 219, 1)',
+                                    border: '1px solid rgba(75, 85, 99, 0.5)',
+                                    borderRadius: '6px',
+                                    fontSize: '13px',
+                                    fontWeight: '600',
+                                    cursor: 'pointer',
+                                    transition: 'all 0.2s ease',
                                   }}
                                   onMouseEnter={(e) => {
-                                    e.currentTarget.style.background =
-                                      "rgba(75, 85, 99, 0.4)";
+                                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
                                   }}
                                   onMouseLeave={(e) => {
-                                    e.currentTarget.style.background =
-                                      "rgba(75, 85, 99, 0.3)";
+                                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
                                   }}
                                 >
                                   Cancel
@@ -1194,24 +1113,24 @@ export function ModerationPanel({
                                   type="button"
                                   onClick={() => handleUnban(ban.userId)}
                                   style={{
-                                    padding: "6px 12px",
+                                    padding: '6px 12px',
                                     background:
-                                      "linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))",
-                                    color: "white",
-                                    border: "1px solid rgba(34, 197, 94, 0.6)",
-                                    borderRadius: "6px",
-                                    fontSize: "13px",
-                                    fontWeight: "600",
-                                    cursor: "pointer",
-                                    transition: "all 0.2s ease",
+                                      'linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))',
+                                    color: 'white',
+                                    border: '1px solid rgba(34, 197, 94, 0.6)',
+                                    borderRadius: '6px',
+                                    fontSize: '13px',
+                                    fontWeight: '600',
+                                    cursor: 'pointer',
+                                    transition: 'all 0.2s ease',
                                   }}
                                   onMouseEnter={(e) => {
                                     e.currentTarget.style.background =
-                                      "linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9))";
+                                      'linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9))'
                                   }}
                                   onMouseLeave={(e) => {
                                     e.currentTarget.style.background =
-                                      "linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))";
+                                      'linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))'
                                   }}
                                 >
                                   Confirm Unban
@@ -1220,7 +1139,7 @@ export function ModerationPanel({
                             </div>
                           )}
                         </div>
-                      );
+                      )
                     })}
                   </div>
                 )}
@@ -1228,14 +1147,14 @@ export function ModerationPanel({
             )}
 
             {/* History Tab */}
-            {activeTab === "history" && (
+            {activeTab === 'history' && (
               <div>
                 {historicalMembers.length === 0 ? (
                   <div
                     style={{
-                      textAlign: "center",
-                      padding: "40px",
-                      color: "rgba(156, 163, 175, 1)",
+                      textAlign: 'center',
+                      padding: '40px',
+                      color: 'rgba(156, 163, 175, 1)',
                     }}
                   >
                     No historical members
@@ -1243,400 +1162,353 @@ export function ModerationPanel({
                 ) : (
                   <div>
                     {/* Group by status */}
-                    {["active", "banned", "kicked", "left"].map(
-                      (statusFilter) => {
-                        const filteredMembers = historicalMembers.filter(
-                          (h) => h.status === statusFilter,
-                        );
-                        if (filteredMembers.length === 0) return null;
+                    {['active', 'banned', 'kicked', 'left'].map((statusFilter) => {
+                      const filteredMembers = historicalMembers.filter(
+                        (h) => h.status === statusFilter
+                      )
+                      if (filteredMembers.length === 0) return null
 
-                        const statusConfig: Record<
-                          string,
-                          { label: string; emoji: string; color: string }
-                        > = {
-                          active: {
-                            label: "Active",
-                            emoji: "🟢",
-                            color: "rgba(34, 197, 94, 1)",
-                          },
-                          banned: {
-                            label: "Banned",
-                            emoji: "🚫",
-                            color: "rgba(239, 68, 68, 1)",
-                          },
-                          kicked: {
-                            label: "Kicked",
-                            emoji: "👢",
-                            color: "rgba(251, 146, 60, 1)",
-                          },
-                          left: {
-                            label: "Left",
-                            emoji: "👋",
-                            color: "rgba(156, 163, 175, 1)",
-                          },
-                        };
+                      const statusConfig: Record<
+                        string,
+                        { label: string; emoji: string; color: string }
+                      > = {
+                        active: {
+                          label: 'Active',
+                          emoji: '🟢',
+                          color: 'rgba(34, 197, 94, 1)',
+                        },
+                        banned: {
+                          label: 'Banned',
+                          emoji: '🚫',
+                          color: 'rgba(239, 68, 68, 1)',
+                        },
+                        kicked: {
+                          label: 'Kicked',
+                          emoji: '👢',
+                          color: 'rgba(251, 146, 60, 1)',
+                        },
+                        left: {
+                          label: 'Left',
+                          emoji: '👋',
+                          color: 'rgba(156, 163, 175, 1)',
+                        },
+                      }
 
-                        const config = statusConfig[statusFilter];
+                      const config = statusConfig[statusFilter]
 
-                        return (
+                      return (
+                        <div key={statusFilter} style={{ marginBottom: '20px' }}>
+                          {/* Status header */}
                           <div
-                            key={statusFilter}
-                            style={{ marginBottom: "20px" }}
+                            style={{
+                              fontSize: '12px',
+                              fontWeight: '700',
+                              color: config.color,
+                              marginBottom: '12px',
+                              textTransform: 'uppercase',
+                              letterSpacing: '0.5px',
+                              display: 'flex',
+                              alignItems: 'center',
+                              gap: '6px',
+                            }}
                           >
-                            {/* Status header */}
-                            <div
-                              style={{
-                                fontSize: "12px",
-                                fontWeight: "700",
-                                color: config.color,
-                                marginBottom: "12px",
-                                textTransform: "uppercase",
-                                letterSpacing: "0.5px",
-                                display: "flex",
-                                alignItems: "center",
-                                gap: "6px",
-                              }}
-                            >
-                              <span>{config.emoji}</span>
-                              {config.label} ({filteredMembers.length})
-                            </div>
+                            <span>{config.emoji}</span>
+                            {config.label} ({filteredMembers.length})
+                          </div>
 
-                            {/* Members in this status */}
-                            <div
-                              style={{
-                                display: "flex",
-                                flexDirection: "column",
-                                gap: "8px",
-                              }}
-                            >
-                              {filteredMembers.map((member) => {
-                                const isConfirmingUnbanInvite =
-                                  confirmingUnbanInviteUserId === member.userId;
+                          {/* Members in this status */}
+                          <div
+                            style={{
+                              display: 'flex',
+                              flexDirection: 'column',
+                              gap: '8px',
+                            }}
+                          >
+                            {filteredMembers.map((member) => {
+                              const isConfirmingUnbanInvite =
+                                confirmingUnbanInviteUserId === member.userId
 
-                                return (
+                              return (
+                                <div
+                                  key={member.userId}
+                                  style={{
+                                    padding: '12px',
+                                    background: isConfirmingUnbanInvite
+                                      ? 'rgba(34, 197, 94, 0.08)'
+                                      : 'rgba(255, 255, 255, 0.05)',
+                                    border: isConfirmingUnbanInvite
+                                      ? '1px solid rgba(34, 197, 94, 0.6)'
+                                      : '1px solid rgba(75, 85, 99, 0.3)',
+                                    borderRadius: '8px',
+                                  }}
+                                >
                                   <div
-                                    key={member.userId}
                                     style={{
-                                      padding: "12px",
-                                      background: isConfirmingUnbanInvite
-                                        ? "rgba(34, 197, 94, 0.08)"
-                                        : "rgba(255, 255, 255, 0.05)",
-                                      border: isConfirmingUnbanInvite
-                                        ? "1px solid rgba(34, 197, 94, 0.6)"
-                                        : "1px solid rgba(75, 85, 99, 0.3)",
-                                      borderRadius: "8px",
+                                      display: 'flex',
+                                      alignItems: 'center',
+                                      justifyContent: 'space-between',
+                                      marginBottom: isConfirmingUnbanInvite ? '12px' : 0,
                                     }}
                                   >
-                                    <div
-                                      style={{
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "space-between",
-                                        marginBottom: isConfirmingUnbanInvite
-                                          ? "12px"
-                                          : 0,
-                                      }}
-                                    >
-                                      <div>
-                                        <div
-                                          style={{
-                                            fontSize: "14px",
-                                            fontWeight: "600",
-                                            color: "rgba(209, 213, 219, 1)",
-                                          }}
-                                        >
-                                          {member.displayName}
-                                        </div>
-                                        <div
-                                          style={{
-                                            fontSize: "11px",
-                                            color: "rgba(156, 163, 175, 1)",
-                                            marginTop: "2px",
-                                          }}
-                                        >
-                                          First joined:{" "}
-                                          {new Date(
-                                            member.firstJoinedAt,
-                                          ).toLocaleDateString()}
-                                        </div>
-                                        {member.invitationStatus ===
-                                          "pending" &&
-                                          !member.isBanned &&
-                                          !member.isCurrentlyInRoom && (
-                                            <div
-                                              style={{
-                                                fontSize: "11px",
-                                                color: "rgba(139, 92, 246, 1)",
-                                                marginTop: "4px",
-                                                fontWeight: "600",
-                                              }}
-                                            >
-                                              ✉️ Pending invitation
-                                            </div>
-                                          )}
-                                      </div>
-
-                                      {/* Actions */}
-                                      {!isConfirmingUnbanInvite && (
-                                        <div
-                                          style={{
-                                            display: "flex",
-                                            gap: "8px",
-                                          }}
-                                        >
-                                          {!member.isCurrentlyInRoom &&
-                                            !member.isBanned && (
-                                              <button
-                                                type="button"
-                                                onClick={() =>
-                                                  handleInvite(
-                                                    member.userId,
-                                                    member.displayName,
-                                                  )
-                                                }
-                                                disabled={
-                                                  actionLoading ===
-                                                  `invite-${member.userId}`
-                                                }
-                                                style={{
-                                                  padding: "6px 12px",
-                                                  background:
-                                                    member.invitationStatus ===
-                                                    "pending"
-                                                      ? "rgba(139, 92, 246, 0.2)"
-                                                      : "rgba(59, 130, 246, 0.2)",
-                                                  color:
-                                                    member.invitationStatus ===
-                                                    "pending"
-                                                      ? "rgba(139, 92, 246, 1)"
-                                                      : "rgba(59, 130, 246, 1)",
-                                                  border:
-                                                    member.invitationStatus ===
-                                                    "pending"
-                                                      ? "1px solid rgba(139, 92, 246, 0.4)"
-                                                      : "1px solid rgba(59, 130, 246, 0.4)",
-                                                  borderRadius: "6px",
-                                                  fontSize: "13px",
-                                                  fontWeight: "600",
-                                                  cursor:
-                                                    actionLoading ===
-                                                    `invite-${member.userId}`
-                                                      ? "not-allowed"
-                                                      : "pointer",
-                                                  opacity:
-                                                    actionLoading ===
-                                                    `invite-${member.userId}`
-                                                      ? 0.5
-                                                      : 1,
-                                                }}
-                                              >
-                                                {actionLoading ===
-                                                `invite-${member.userId}`
-                                                  ? "Inviting..."
-                                                  : member.invitationStatus ===
-                                                      "pending"
-                                                    ? "🔔 Re-Invite"
-                                                    : "Invite"}
-                                              </button>
-                                            )}
-                                          {member.isCurrentlyInRoom && (
-                                            <div
-                                              style={{
-                                                padding: "6px 12px",
-                                                background:
-                                                  "rgba(34, 197, 94, 0.2)",
-                                                color: "rgba(34, 197, 94, 1)",
-                                                border:
-                                                  "1px solid rgba(34, 197, 94, 0.4)",
-                                                borderRadius: "6px",
-                                                fontSize: "13px",
-                                                fontWeight: "600",
-                                              }}
-                                            >
-                                              In Room
-                                            </div>
-                                          )}
-                                          {member.isBanned && (
-                                            <button
-                                              type="button"
-                                              onClick={() =>
-                                                setConfirmingUnbanInviteUserId(
-                                                  member.userId,
-                                                )
-                                              }
-                                              disabled={
-                                                actionLoading ===
-                                                `unban-invite-${member.userId}`
-                                              }
-                                              style={{
-                                                padding: "6px 12px",
-                                                background:
-                                                  "rgba(34, 197, 94, 0.2)",
-                                                color: "rgba(34, 197, 94, 1)",
-                                                border:
-                                                  "1px solid rgba(34, 197, 94, 0.4)",
-                                                borderRadius: "6px",
-                                                fontSize: "13px",
-                                                fontWeight: "600",
-                                                cursor:
-                                                  actionLoading ===
-                                                  `unban-invite-${member.userId}`
-                                                    ? "not-allowed"
-                                                    : "pointer",
-                                                opacity:
-                                                  actionLoading ===
-                                                  `unban-invite-${member.userId}`
-                                                    ? 0.5
-                                                    : 1,
-                                              }}
-                                            >
-                                              {actionLoading ===
-                                              `unban-invite-${member.userId}`
-                                                ? "Processing..."
-                                                : "Unban & Invite"}
-                                            </button>
-                                          )}
-                                        </div>
-                                      )}
-                                    </div>
-
-                                    {/* Inline confirmation for unban & invite */}
-                                    {isConfirmingUnbanInvite && (
+                                    <div>
                                       <div
                                         style={{
-                                          marginTop: "12px",
-                                          paddingTop: "12px",
-                                          borderTop:
-                                            "1px solid rgba(34, 197, 94, 0.2)",
+                                          fontSize: '14px',
+                                          fontWeight: '600',
+                                          color: 'rgba(209, 213, 219, 1)',
                                         }}
                                       >
-                                        <div
-                                          style={{
-                                            fontSize: "13px",
-                                            fontWeight: "600",
-                                            color: "rgba(134, 239, 172, 1)",
-                                            marginBottom: "8px",
-                                          }}
-                                        >
-                                          🚫 → ✉️ Unban and invite{" "}
-                                          {member.displayName}?
-                                        </div>
-                                        <div
-                                          style={{
-                                            fontSize: "12px",
-                                            color: "rgba(209, 213, 219, 0.8)",
-                                            marginBottom: "12px",
-                                          }}
-                                        >
-                                          This player is currently banned. They
-                                          will be unbanned and automatically
-                                          sent an invitation to rejoin the room.
-                                        </div>
-                                        <div
-                                          style={{
-                                            display: "flex",
-                                            gap: "8px",
-                                            justifyContent: "flex-end",
-                                          }}
-                                        >
+                                        {member.displayName}
+                                      </div>
+                                      <div
+                                        style={{
+                                          fontSize: '11px',
+                                          color: 'rgba(156, 163, 175, 1)',
+                                          marginTop: '2px',
+                                        }}
+                                      >
+                                        First joined:{' '}
+                                        {new Date(member.firstJoinedAt).toLocaleDateString()}
+                                      </div>
+                                      {member.invitationStatus === 'pending' &&
+                                        !member.isBanned &&
+                                        !member.isCurrentlyInRoom && (
+                                          <div
+                                            style={{
+                                              fontSize: '11px',
+                                              color: 'rgba(139, 92, 246, 1)',
+                                              marginTop: '4px',
+                                              fontWeight: '600',
+                                            }}
+                                          >
+                                            ✉️ Pending invitation
+                                          </div>
+                                        )}
+                                    </div>
+
+                                    {/* Actions */}
+                                    {!isConfirmingUnbanInvite && (
+                                      <div
+                                        style={{
+                                          display: 'flex',
+                                          gap: '8px',
+                                        }}
+                                      >
+                                        {!member.isCurrentlyInRoom && !member.isBanned && (
                                           <button
                                             type="button"
                                             onClick={() =>
-                                              setConfirmingUnbanInviteUserId(
-                                                null,
-                                              )
+                                              handleInvite(member.userId, member.displayName)
                                             }
+                                            disabled={actionLoading === `invite-${member.userId}`}
                                             style={{
-                                              padding: "6px 12px",
+                                              padding: '6px 12px',
                                               background:
-                                                "rgba(75, 85, 99, 0.3)",
-                                              color: "rgba(209, 213, 219, 1)",
+                                                member.invitationStatus === 'pending'
+                                                  ? 'rgba(139, 92, 246, 0.2)'
+                                                  : 'rgba(59, 130, 246, 0.2)',
+                                              color:
+                                                member.invitationStatus === 'pending'
+                                                  ? 'rgba(139, 92, 246, 1)'
+                                                  : 'rgba(59, 130, 246, 1)',
                                               border:
-                                                "1px solid rgba(75, 85, 99, 0.5)",
-                                              borderRadius: "6px",
-                                              fontSize: "13px",
-                                              fontWeight: "600",
-                                              cursor: "pointer",
-                                              transition: "all 0.2s ease",
-                                            }}
-                                            onMouseEnter={(e) => {
-                                              e.currentTarget.style.background =
-                                                "rgba(75, 85, 99, 0.4)";
-                                            }}
-                                            onMouseLeave={(e) => {
-                                              e.currentTarget.style.background =
-                                                "rgba(75, 85, 99, 0.3)";
+                                                member.invitationStatus === 'pending'
+                                                  ? '1px solid rgba(139, 92, 246, 0.4)'
+                                                  : '1px solid rgba(59, 130, 246, 0.4)',
+                                              borderRadius: '6px',
+                                              fontSize: '13px',
+                                              fontWeight: '600',
+                                              cursor:
+                                                actionLoading === `invite-${member.userId}`
+                                                  ? 'not-allowed'
+                                                  : 'pointer',
+                                              opacity:
+                                                actionLoading === `invite-${member.userId}`
+                                                  ? 0.5
+                                                  : 1,
                                             }}
                                           >
-                                            Cancel
+                                            {actionLoading === `invite-${member.userId}`
+                                              ? 'Inviting...'
+                                              : member.invitationStatus === 'pending'
+                                                ? '🔔 Re-Invite'
+                                                : 'Invite'}
                                           </button>
+                                        )}
+                                        {member.isCurrentlyInRoom && (
+                                          <div
+                                            style={{
+                                              padding: '6px 12px',
+                                              background: 'rgba(34, 197, 94, 0.2)',
+                                              color: 'rgba(34, 197, 94, 1)',
+                                              border: '1px solid rgba(34, 197, 94, 0.4)',
+                                              borderRadius: '6px',
+                                              fontSize: '13px',
+                                              fontWeight: '600',
+                                            }}
+                                          >
+                                            In Room
+                                          </div>
+                                        )}
+                                        {member.isBanned && (
                                           <button
                                             type="button"
                                             onClick={() =>
-                                              handleUnbanAndInvite(
-                                                member.userId,
-                                                member.displayName,
-                                              )
+                                              setConfirmingUnbanInviteUserId(member.userId)
+                                            }
+                                            disabled={
+                                              actionLoading === `unban-invite-${member.userId}`
                                             }
                                             style={{
-                                              padding: "6px 12px",
-                                              background:
-                                                "linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))",
-                                              color: "white",
-                                              border:
-                                                "1px solid rgba(34, 197, 94, 0.6)",
-                                              borderRadius: "6px",
-                                              fontSize: "13px",
-                                              fontWeight: "600",
-                                              cursor: "pointer",
-                                              transition: "all 0.2s ease",
-                                            }}
-                                            onMouseEnter={(e) => {
-                                              e.currentTarget.style.background =
-                                                "linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9))";
-                                            }}
-                                            onMouseLeave={(e) => {
-                                              e.currentTarget.style.background =
-                                                "linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))";
+                                              padding: '6px 12px',
+                                              background: 'rgba(34, 197, 94, 0.2)',
+                                              color: 'rgba(34, 197, 94, 1)',
+                                              border: '1px solid rgba(34, 197, 94, 0.4)',
+                                              borderRadius: '6px',
+                                              fontSize: '13px',
+                                              fontWeight: '600',
+                                              cursor:
+                                                actionLoading === `unban-invite-${member.userId}`
+                                                  ? 'not-allowed'
+                                                  : 'pointer',
+                                              opacity:
+                                                actionLoading === `unban-invite-${member.userId}`
+                                                  ? 0.5
+                                                  : 1,
                                             }}
                                           >
-                                            Confirm Unban & Invite
+                                            {actionLoading === `unban-invite-${member.userId}`
+                                              ? 'Processing...'
+                                              : 'Unban & Invite'}
                                           </button>
-                                        </div>
+                                        )}
                                       </div>
                                     )}
                                   </div>
-                                );
-                              })}
-                            </div>
+
+                                  {/* Inline confirmation for unban & invite */}
+                                  {isConfirmingUnbanInvite && (
+                                    <div
+                                      style={{
+                                        marginTop: '12px',
+                                        paddingTop: '12px',
+                                        borderTop: '1px solid rgba(34, 197, 94, 0.2)',
+                                      }}
+                                    >
+                                      <div
+                                        style={{
+                                          fontSize: '13px',
+                                          fontWeight: '600',
+                                          color: 'rgba(134, 239, 172, 1)',
+                                          marginBottom: '8px',
+                                        }}
+                                      >
+                                        🚫 → ✉️ Unban and invite {member.displayName}?
+                                      </div>
+                                      <div
+                                        style={{
+                                          fontSize: '12px',
+                                          color: 'rgba(209, 213, 219, 0.8)',
+                                          marginBottom: '12px',
+                                        }}
+                                      >
+                                        This player is currently banned. They will be unbanned and
+                                        automatically sent an invitation to rejoin the room.
+                                      </div>
+                                      <div
+                                        style={{
+                                          display: 'flex',
+                                          gap: '8px',
+                                          justifyContent: 'flex-end',
+                                        }}
+                                      >
+                                        <button
+                                          type="button"
+                                          onClick={() => setConfirmingUnbanInviteUserId(null)}
+                                          style={{
+                                            padding: '6px 12px',
+                                            background: 'rgba(75, 85, 99, 0.3)',
+                                            color: 'rgba(209, 213, 219, 1)',
+                                            border: '1px solid rgba(75, 85, 99, 0.5)',
+                                            borderRadius: '6px',
+                                            fontSize: '13px',
+                                            fontWeight: '600',
+                                            cursor: 'pointer',
+                                            transition: 'all 0.2s ease',
+                                          }}
+                                          onMouseEnter={(e) => {
+                                            e.currentTarget.style.background =
+                                              'rgba(75, 85, 99, 0.4)'
+                                          }}
+                                          onMouseLeave={(e) => {
+                                            e.currentTarget.style.background =
+                                              'rgba(75, 85, 99, 0.3)'
+                                          }}
+                                        >
+                                          Cancel
+                                        </button>
+                                        <button
+                                          type="button"
+                                          onClick={() =>
+                                            handleUnbanAndInvite(member.userId, member.displayName)
+                                          }
+                                          style={{
+                                            padding: '6px 12px',
+                                            background:
+                                              'linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))',
+                                            color: 'white',
+                                            border: '1px solid rgba(34, 197, 94, 0.6)',
+                                            borderRadius: '6px',
+                                            fontSize: '13px',
+                                            fontWeight: '600',
+                                            cursor: 'pointer',
+                                            transition: 'all 0.2s ease',
+                                          }}
+                                          onMouseEnter={(e) => {
+                                            e.currentTarget.style.background =
+                                              'linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9))'
+                                          }}
+                                          onMouseLeave={(e) => {
+                                            e.currentTarget.style.background =
+                                              'linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.8))'
+                                          }}
+                                        >
+                                          Confirm Unban & Invite
+                                        </button>
+                                      </div>
+                                    </div>
+                                  )}
+                                </div>
+                              )
+                            })}
                           </div>
-                        );
-                      },
-                    )}
+                        </div>
+                      )
+                    })}
                   </div>
                 )}
               </div>
             )}
 
             {/* Settings Tab */}
-            {activeTab === "settings" && (
+            {activeTab === 'settings' && (
               <div
                 style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "24px",
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '24px',
                 }}
               >
                 {/* Access Mode Section */}
                 <div>
                   <div
                     style={{
-                      fontSize: "14px",
-                      fontWeight: "700",
-                      color: "rgba(253, 186, 116, 1)",
-                      marginBottom: "12px",
-                      textTransform: "uppercase",
-                      letterSpacing: "0.5px",
+                      fontSize: '14px',
+                      fontWeight: '700',
+                      color: 'rgba(253, 186, 116, 1)',
+                      marginBottom: '12px',
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.5px',
                     }}
                   >
                     🔒 Room Access Mode
@@ -1644,151 +1516,134 @@ export function ModerationPanel({
 
                   <div
                     style={{
-                      padding: "16px",
-                      background: "rgba(255, 255, 255, 0.05)",
-                      border: "1px solid rgba(75, 85, 99, 0.3)",
-                      borderRadius: "8px",
+                      padding: '16px',
+                      background: 'rgba(255, 255, 255, 0.05)',
+                      border: '1px solid rgba(75, 85, 99, 0.3)',
+                      borderRadius: '8px',
                     }}
                   >
                     {/* Access mode button grid */}
                     <div
                       style={{
-                        display: "grid",
-                        gridTemplateColumns: "1fr 1fr",
-                        gap: "8px",
-                        marginBottom: "12px",
+                        display: 'grid',
+                        gridTemplateColumns: '1fr 1fr',
+                        gap: '8px',
+                        marginBottom: '12px',
                       }}
                     >
                       {[
                         {
-                          value: "open",
-                          emoji: "🌐",
-                          label: "Open",
-                          desc: "Anyone",
+                          value: 'open',
+                          emoji: '🌐',
+                          label: 'Open',
+                          desc: 'Anyone',
                         },
                         {
-                          value: "password",
-                          emoji: "🔑",
-                          label: "Password",
-                          desc: "With key",
+                          value: 'password',
+                          emoji: '🔑',
+                          label: 'Password',
+                          desc: 'With key',
                         },
                         {
-                          value: "approval-only",
-                          emoji: "✋",
-                          label: "Approval",
-                          desc: "Request",
+                          value: 'approval-only',
+                          emoji: '✋',
+                          label: 'Approval',
+                          desc: 'Request',
                         },
                         {
-                          value: "restricted",
-                          emoji: "🚫",
-                          label: "Restricted",
-                          desc: "Invite only",
+                          value: 'restricted',
+                          emoji: '🚫',
+                          label: 'Restricted',
+                          desc: 'Invite only',
                         },
                         {
-                          value: "locked",
-                          emoji: "🔒",
-                          label: "Locked",
-                          desc: "No new members",
+                          value: 'locked',
+                          emoji: '🔒',
+                          label: 'Locked',
+                          desc: 'No new members',
                         },
                         {
-                          value: "retired",
-                          emoji: "🏁",
-                          label: "Retired",
-                          desc: "Closed",
+                          value: 'retired',
+                          emoji: '🏁',
+                          label: 'Retired',
+                          desc: 'Closed',
                         },
                       ].map((mode) => (
                         <button
                           key={mode.value}
                           type="button"
-                          disabled={actionLoading === "update-settings"}
+                          disabled={actionLoading === 'update-settings'}
                           onClick={() => {
-                            setAccessMode(mode.value);
-                            setShowPasswordInput(mode.value === "password");
+                            setAccessMode(mode.value)
+                            setShowPasswordInput(mode.value === 'password')
                           }}
                           style={{
-                            padding: "10px 12px",
+                            padding: '10px 12px',
                             background:
                               accessMode === mode.value
-                                ? "rgba(253, 186, 116, 0.15)"
-                                : "rgba(255, 255, 255, 0.05)",
+                                ? 'rgba(253, 186, 116, 0.15)'
+                                : 'rgba(255, 255, 255, 0.05)',
                             border:
                               accessMode === mode.value
-                                ? "2px solid rgba(253, 186, 116, 0.6)"
-                                : "2px solid rgba(75, 85, 99, 0.5)",
-                            borderRadius: "8px",
+                                ? '2px solid rgba(253, 186, 116, 0.6)'
+                                : '2px solid rgba(75, 85, 99, 0.5)',
+                            borderRadius: '8px',
                             color:
                               accessMode === mode.value
-                                ? "rgba(253, 186, 116, 1)"
-                                : "rgba(209, 213, 219, 0.8)",
-                            fontSize: "13px",
-                            fontWeight: "500",
-                            cursor:
-                              actionLoading === "update-settings"
-                                ? "not-allowed"
-                                : "pointer",
-                            opacity:
-                              actionLoading === "update-settings" ? 0.5 : 1,
-                            transition: "all 0.2s ease",
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "8px",
+                                ? 'rgba(253, 186, 116, 1)'
+                                : 'rgba(209, 213, 219, 0.8)',
+                            fontSize: '13px',
+                            fontWeight: '500',
+                            cursor: actionLoading === 'update-settings' ? 'not-allowed' : 'pointer',
+                            opacity: actionLoading === 'update-settings' ? 0.5 : 1,
+                            transition: 'all 0.2s ease',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '8px',
                           }}
                           onMouseEnter={(e) => {
-                            if (
-                              actionLoading !== "update-settings" &&
-                              accessMode !== mode.value
-                            ) {
-                              e.currentTarget.style.background =
-                                "rgba(255, 255, 255, 0.08)";
-                              e.currentTarget.style.borderColor =
-                                "rgba(253, 186, 116, 0.4)";
+                            if (actionLoading !== 'update-settings' && accessMode !== mode.value) {
+                              e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)'
+                              e.currentTarget.style.borderColor = 'rgba(253, 186, 116, 0.4)'
                             }
                           }}
                           onMouseLeave={(e) => {
                             if (accessMode !== mode.value) {
-                              e.currentTarget.style.background =
-                                "rgba(255, 255, 255, 0.05)";
-                              e.currentTarget.style.borderColor =
-                                "rgba(75, 85, 99, 0.5)";
+                              e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
+                              e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
                             }
                           }}
                         >
-                          <span style={{ fontSize: "18px" }}>{mode.emoji}</span>
+                          <span style={{ fontSize: '18px' }}>{mode.emoji}</span>
                           <div
                             style={{
-                              textAlign: "left",
+                              textAlign: 'left',
                               flex: 1,
-                              lineHeight: "1.2",
+                              lineHeight: '1.2',
                             }}
                           >
-                            <div
-                              style={{ fontSize: "13px", fontWeight: "600" }}
-                            >
-                              {mode.label}
-                            </div>
-                            <div style={{ fontSize: "11px", opacity: 0.7 }}>
-                              {mode.desc}
-                            </div>
+                            <div style={{ fontSize: '13px', fontWeight: '600' }}>{mode.label}</div>
+                            <div style={{ fontSize: '11px', opacity: 0.7 }}>{mode.desc}</div>
                           </div>
                         </button>
                       ))}
                     </div>
 
                     {/* Password input (conditional) */}
-                    {(accessMode === "password" || showPasswordInput) && (
-                      <div style={{ marginBottom: "12px" }}>
+                    {(accessMode === 'password' || showPasswordInput) && (
+                      <div style={{ marginBottom: '12px' }}>
                         <label
                           style={{
-                            display: "block",
-                            fontSize: "12px",
-                            fontWeight: "600",
-                            color: "rgba(209, 213, 219, 0.8)",
-                            marginBottom: "6px",
+                            display: 'block',
+                            fontSize: '12px',
+                            fontWeight: '600',
+                            color: 'rgba(209, 213, 219, 0.8)',
+                            marginBottom: '6px',
                           }}
                         >
                           Room Password
                         </label>
-                        <div style={{ display: "flex", gap: "8px" }}>
+                        <div style={{ display: 'flex', gap: '8px' }}>
                           <input
                             type="text"
                             value={roomPassword}
@@ -1796,22 +1651,20 @@ export function ModerationPanel({
                             placeholder="Enter password to share with guests"
                             style={{
                               flex: 1,
-                              padding: "10px 12px",
-                              background: "rgba(255, 255, 255, 0.05)",
-                              border: "1px solid rgba(75, 85, 99, 0.5)",
-                              borderRadius: "6px",
-                              color: "rgba(209, 213, 219, 1)",
-                              fontSize: "14px",
-                              outline: "none",
-                              transition: "border-color 0.2s ease",
+                              padding: '10px 12px',
+                              background: 'rgba(255, 255, 255, 0.05)',
+                              border: '1px solid rgba(75, 85, 99, 0.5)',
+                              borderRadius: '6px',
+                              color: 'rgba(209, 213, 219, 1)',
+                              fontSize: '14px',
+                              outline: 'none',
+                              transition: 'border-color 0.2s ease',
                             }}
                             onFocus={(e) => {
-                              e.currentTarget.style.borderColor =
-                                "rgba(253, 186, 116, 0.6)";
+                              e.currentTarget.style.borderColor = 'rgba(253, 186, 116, 0.6)'
                             }}
                             onBlur={(e) => {
-                              e.currentTarget.style.borderColor =
-                                "rgba(75, 85, 99, 0.5)";
+                              e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
                             }}
                           />
                           <button
@@ -1820,51 +1673,49 @@ export function ModerationPanel({
                             disabled={!roomPassword}
                             title="Copy password to clipboard"
                             style={{
-                              padding: "10px 16px",
+                              padding: '10px 16px',
                               background: passwordCopied
-                                ? "rgba(34, 197, 94, 0.2)"
+                                ? 'rgba(34, 197, 94, 0.2)'
                                 : roomPassword
-                                  ? "rgba(59, 130, 246, 0.2)"
-                                  : "rgba(75, 85, 99, 0.2)",
+                                  ? 'rgba(59, 130, 246, 0.2)'
+                                  : 'rgba(75, 85, 99, 0.2)',
                               color: passwordCopied
-                                ? "rgba(34, 197, 94, 1)"
+                                ? 'rgba(34, 197, 94, 1)'
                                 : roomPassword
-                                  ? "rgba(59, 130, 246, 1)"
-                                  : "rgba(156, 163, 175, 1)",
+                                  ? 'rgba(59, 130, 246, 1)'
+                                  : 'rgba(156, 163, 175, 1)',
                               border: passwordCopied
-                                ? "1px solid rgba(34, 197, 94, 0.4)"
+                                ? '1px solid rgba(34, 197, 94, 0.4)'
                                 : roomPassword
-                                  ? "1px solid rgba(59, 130, 246, 0.4)"
-                                  : "1px solid rgba(75, 85, 99, 0.3)",
-                              borderRadius: "6px",
-                              fontSize: "14px",
-                              fontWeight: "600",
-                              cursor: roomPassword ? "pointer" : "not-allowed",
+                                  ? '1px solid rgba(59, 130, 246, 0.4)'
+                                  : '1px solid rgba(75, 85, 99, 0.3)',
+                              borderRadius: '6px',
+                              fontSize: '14px',
+                              fontWeight: '600',
+                              cursor: roomPassword ? 'pointer' : 'not-allowed',
                               opacity: roomPassword ? 1 : 0.5,
-                              transition: "all 0.2s ease",
-                              whiteSpace: "nowrap",
+                              transition: 'all 0.2s ease',
+                              whiteSpace: 'nowrap',
                             }}
                             onMouseEnter={(e) => {
                               if (roomPassword && !passwordCopied) {
-                                e.currentTarget.style.background =
-                                  "rgba(59, 130, 246, 0.3)";
+                                e.currentTarget.style.background = 'rgba(59, 130, 246, 0.3)'
                               }
                             }}
                             onMouseLeave={(e) => {
                               if (roomPassword && !passwordCopied) {
-                                e.currentTarget.style.background =
-                                  "rgba(59, 130, 246, 0.2)";
+                                e.currentTarget.style.background = 'rgba(59, 130, 246, 0.2)'
                               }
                             }}
                           >
-                            {passwordCopied ? "✓ Copied!" : "📋 Copy"}
+                            {passwordCopied ? '✓ Copied!' : '📋 Copy'}
                           </button>
                         </div>
                         <div
                           style={{
-                            fontSize: "11px",
-                            color: "rgba(156, 163, 175, 1)",
-                            marginTop: "4px",
+                            fontSize: '11px',
+                            color: 'rgba(156, 163, 175, 1)',
+                            marginTop: '4px',
                           }}
                         >
                           Share this password with guests to allow them to join
@@ -1876,50 +1727,43 @@ export function ModerationPanel({
                       <button
                         type="button"
                         onClick={handleUpdateAccessMode}
-                        disabled={actionLoading === "update-settings"}
+                        disabled={actionLoading === 'update-settings'}
                         style={{
-                          width: "100%",
-                          padding: "10px",
+                          width: '100%',
+                          padding: '10px',
                           background:
-                            actionLoading === "update-settings"
-                              ? "rgba(75, 85, 99, 0.3)"
-                              : "linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))",
-                          color: "white",
+                            actionLoading === 'update-settings'
+                              ? 'rgba(75, 85, 99, 0.3)'
+                              : 'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))',
+                          color: 'white',
                           border:
-                            actionLoading === "update-settings"
-                              ? "1px solid rgba(75, 85, 99, 0.5)"
-                              : "1px solid rgba(59, 130, 246, 0.6)",
-                          borderRadius: "6px",
-                          fontSize: "14px",
-                          fontWeight: "600",
-                          cursor:
-                            actionLoading === "update-settings"
-                              ? "not-allowed"
-                              : "pointer",
-                          opacity:
-                            actionLoading === "update-settings" ? 0.5 : 1,
+                            actionLoading === 'update-settings'
+                              ? '1px solid rgba(75, 85, 99, 0.5)'
+                              : '1px solid rgba(59, 130, 246, 0.6)',
+                          borderRadius: '6px',
+                          fontSize: '14px',
+                          fontWeight: '600',
+                          cursor: actionLoading === 'update-settings' ? 'not-allowed' : 'pointer',
+                          opacity: actionLoading === 'update-settings' ? 0.5 : 1,
                         }}
                       >
-                        {actionLoading === "update-settings"
-                          ? "Updating..."
-                          : "Update Access Mode"}
+                        {actionLoading === 'update-settings' ? 'Updating...' : 'Update Access Mode'}
                       </button>
                     )}
                   </div>
                 </div>
 
                 {/* Join Requests Section (for approval-only mode) */}
-                {joinRequests.filter((r: any) => r.status === "pending")
-                  .length > 0 && (
+                {joinRequests.filter((r: any) => r.status === 'pending').length > 0 && (
                   <div>
                     <div
                       style={{
-                        fontSize: "14px",
-                        fontWeight: "700",
-                        color: "rgba(59, 130, 246, 1)",
-                        marginBottom: "12px",
-                        textTransform: "uppercase",
-                        letterSpacing: "0.5px",
+                        fontSize: '14px',
+                        fontWeight: '700',
+                        color: 'rgba(59, 130, 246, 1)',
+                        marginBottom: '12px',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.5px',
                       }}
                     >
                       🙋 Pending Join Requests
@@ -1927,114 +1771,94 @@ export function ModerationPanel({
 
                     <div
                       style={{
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: "8px",
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '8px',
                       }}
                     >
                       {joinRequests
-                        .filter((r: any) => r.status === "pending")
+                        .filter((r: any) => r.status === 'pending')
                         .map((request: any) => (
                           <div
                             key={request.id}
                             style={{
-                              padding: "12px",
-                              background: "rgba(59, 130, 246, 0.08)",
-                              border: "1px solid rgba(59, 130, 246, 0.3)",
-                              borderRadius: "8px",
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "space-between",
+                              padding: '12px',
+                              background: 'rgba(59, 130, 246, 0.08)',
+                              border: '1px solid rgba(59, 130, 246, 0.3)',
+                              borderRadius: '8px',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'space-between',
                             }}
                           >
                             <div>
                               <div
                                 style={{
-                                  fontSize: "14px",
-                                  fontWeight: "600",
-                                  color: "rgba(209, 213, 219, 1)",
+                                  fontSize: '14px',
+                                  fontWeight: '600',
+                                  color: 'rgba(209, 213, 219, 1)',
                                 }}
                               >
-                                {request.userName || "Anonymous User"}
+                                {request.userName || 'Anonymous User'}
                               </div>
                               <div
                                 style={{
-                                  fontSize: "12px",
-                                  color: "rgba(156, 163, 175, 1)",
-                                  marginTop: "2px",
+                                  fontSize: '12px',
+                                  color: 'rgba(156, 163, 175, 1)',
+                                  marginTop: '2px',
                                 }}
                               >
-                                Requested{" "}
-                                {new Date(request.createdAt).toLocaleString()}
+                                Requested {new Date(request.createdAt).toLocaleString()}
                               </div>
                             </div>
 
-                            <div style={{ display: "flex", gap: "8px" }}>
+                            <div style={{ display: 'flex', gap: '8px' }}>
                               <button
                                 type="button"
-                                onClick={() =>
-                                  handleDenyJoinRequest(request.id)
-                                }
-                                disabled={
-                                  actionLoading === `deny-request-${request.id}`
-                                }
+                                onClick={() => handleDenyJoinRequest(request.id)}
+                                disabled={actionLoading === `deny-request-${request.id}`}
                                 style={{
-                                  padding: "6px 12px",
-                                  background: "rgba(239, 68, 68, 0.2)",
-                                  color: "rgba(239, 68, 68, 1)",
-                                  border: "1px solid rgba(239, 68, 68, 0.4)",
-                                  borderRadius: "6px",
-                                  fontSize: "13px",
-                                  fontWeight: "600",
+                                  padding: '6px 12px',
+                                  background: 'rgba(239, 68, 68, 0.2)',
+                                  color: 'rgba(239, 68, 68, 1)',
+                                  border: '1px solid rgba(239, 68, 68, 0.4)',
+                                  borderRadius: '6px',
+                                  fontSize: '13px',
+                                  fontWeight: '600',
                                   cursor:
-                                    actionLoading ===
-                                    `deny-request-${request.id}`
-                                      ? "not-allowed"
-                                      : "pointer",
-                                  opacity:
-                                    actionLoading ===
-                                    `deny-request-${request.id}`
-                                      ? 0.5
-                                      : 1,
+                                    actionLoading === `deny-request-${request.id}`
+                                      ? 'not-allowed'
+                                      : 'pointer',
+                                  opacity: actionLoading === `deny-request-${request.id}` ? 0.5 : 1,
                                 }}
                               >
                                 {actionLoading === `deny-request-${request.id}`
-                                  ? "Denying..."
-                                  : "Deny"}
+                                  ? 'Denying...'
+                                  : 'Deny'}
                               </button>
                               <button
                                 type="button"
-                                onClick={() =>
-                                  handleApproveJoinRequest(request.id)
-                                }
-                                disabled={
-                                  actionLoading ===
-                                  `approve-request-${request.id}`
-                                }
+                                onClick={() => handleApproveJoinRequest(request.id)}
+                                disabled={actionLoading === `approve-request-${request.id}`}
                                 style={{
-                                  padding: "6px 12px",
-                                  background: "rgba(34, 197, 94, 0.2)",
-                                  color: "rgba(34, 197, 94, 1)",
-                                  border: "1px solid rgba(34, 197, 94, 0.4)",
-                                  borderRadius: "6px",
-                                  fontSize: "13px",
-                                  fontWeight: "600",
+                                  padding: '6px 12px',
+                                  background: 'rgba(34, 197, 94, 0.2)',
+                                  color: 'rgba(34, 197, 94, 1)',
+                                  border: '1px solid rgba(34, 197, 94, 0.4)',
+                                  borderRadius: '6px',
+                                  fontSize: '13px',
+                                  fontWeight: '600',
                                   cursor:
-                                    actionLoading ===
-                                    `approve-request-${request.id}`
-                                      ? "not-allowed"
-                                      : "pointer",
+                                    actionLoading === `approve-request-${request.id}`
+                                      ? 'not-allowed'
+                                      : 'pointer',
                                   opacity:
-                                    actionLoading ===
-                                    `approve-request-${request.id}`
-                                      ? 0.5
-                                      : 1,
+                                    actionLoading === `approve-request-${request.id}` ? 0.5 : 1,
                                 }}
                               >
-                                {actionLoading ===
-                                `approve-request-${request.id}`
-                                  ? "Approving..."
-                                  : "Approve"}
+                                {actionLoading === `approve-request-${request.id}`
+                                  ? 'Approving...'
+                                  : 'Approve'}
                               </button>
                             </div>
                           </div>
@@ -2047,12 +1871,12 @@ export function ModerationPanel({
                 <div>
                   <div
                     style={{
-                      fontSize: "14px",
-                      fontWeight: "700",
-                      color: "rgba(251, 146, 60, 1)",
-                      marginBottom: "12px",
-                      textTransform: "uppercase",
-                      letterSpacing: "0.5px",
+                      fontSize: '14px',
+                      fontWeight: '700',
+                      color: 'rgba(251, 146, 60, 1)',
+                      marginBottom: '12px',
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.5px',
                     }}
                   >
                     👑 Transfer Ownership
@@ -2060,21 +1884,20 @@ export function ModerationPanel({
 
                   <div
                     style={{
-                      padding: "16px",
-                      background: "rgba(251, 146, 60, 0.08)",
-                      border: "1px solid rgba(251, 146, 60, 0.3)",
-                      borderRadius: "8px",
+                      padding: '16px',
+                      background: 'rgba(251, 146, 60, 0.08)',
+                      border: '1px solid rgba(251, 146, 60, 0.3)',
+                      borderRadius: '8px',
                     }}
                   >
                     <p
                       style={{
-                        fontSize: "13px",
-                        color: "rgba(209, 213, 219, 0.8)",
-                        marginBottom: "12px",
+                        fontSize: '13px',
+                        color: 'rgba(209, 213, 219, 0.8)',
+                        marginBottom: '12px',
                       }}
                     >
-                      Transfer host privileges to another member. You will no
-                      longer be the host.
+                      Transfer host privileges to another member. You will no longer be the host.
                     </p>
 
                     {!confirmingTransferOwnership ? (
@@ -2083,22 +1906,22 @@ export function ModerationPanel({
                           value={selectedNewOwner}
                           onChange={(e) => setSelectedNewOwner(e.target.value)}
                           style={{
-                            width: "100%",
-                            padding: "10px",
-                            background: "rgba(255, 255, 255, 0.05)",
-                            border: "1px solid rgba(75, 85, 99, 0.5)",
-                            borderRadius: "6px",
-                            color: "rgba(209, 213, 219, 1)",
-                            fontSize: "14px",
-                            marginBottom: "12px",
-                            cursor: "pointer",
+                            width: '100%',
+                            padding: '10px',
+                            background: 'rgba(255, 255, 255, 0.05)',
+                            border: '1px solid rgba(75, 85, 99, 0.5)',
+                            borderRadius: '6px',
+                            color: 'rgba(209, 213, 219, 1)',
+                            fontSize: '14px',
+                            marginBottom: '12px',
+                            cursor: 'pointer',
                           }}
                         >
                           <option value="">Select new owner...</option>
                           {otherMembers.map((member) => (
                             <option key={member.userId} value={member.userId}>
                               {member.displayName}
-                              {member.isOnline ? " (Online)" : " (Offline)"}
+                              {member.isOnline ? ' (Online)' : ' (Offline)'}
                             </option>
                           ))}
                         </select>
@@ -2108,21 +1931,19 @@ export function ModerationPanel({
                           onClick={() => setConfirmingTransferOwnership(true)}
                           disabled={!selectedNewOwner}
                           style={{
-                            width: "100%",
-                            padding: "10px",
+                            width: '100%',
+                            padding: '10px',
                             background: !selectedNewOwner
-                              ? "rgba(75, 85, 99, 0.3)"
-                              : "linear-gradient(135deg, rgba(251, 146, 60, 0.8), rgba(249, 115, 22, 0.8))",
-                            color: "white",
+                              ? 'rgba(75, 85, 99, 0.3)'
+                              : 'linear-gradient(135deg, rgba(251, 146, 60, 0.8), rgba(249, 115, 22, 0.8))',
+                            color: 'white',
                             border: !selectedNewOwner
-                              ? "1px solid rgba(75, 85, 99, 0.5)"
-                              : "1px solid rgba(251, 146, 60, 0.6)",
-                            borderRadius: "6px",
-                            fontSize: "14px",
-                            fontWeight: "600",
-                            cursor: !selectedNewOwner
-                              ? "not-allowed"
-                              : "pointer",
+                              ? '1px solid rgba(75, 85, 99, 0.5)'
+                              : '1px solid rgba(251, 146, 60, 0.6)',
+                            borderRadius: '6px',
+                            fontSize: '14px',
+                            fontWeight: '600',
+                            cursor: !selectedNewOwner ? 'not-allowed' : 'pointer',
                             opacity: !selectedNewOwner ? 0.5 : 1,
                           }}
                         >
@@ -2133,65 +1954,52 @@ export function ModerationPanel({
                       <div>
                         <div
                           style={{
-                            fontSize: "13px",
-                            fontWeight: "600",
-                            color: "rgba(251, 191, 36, 1)",
-                            marginBottom: "8px",
+                            fontSize: '13px',
+                            fontWeight: '600',
+                            color: 'rgba(251, 191, 36, 1)',
+                            marginBottom: '8px',
                           }}
                         >
-                          ⚠️ Confirm Transfer to{" "}
-                          {
-                            members.find((m) => m.userId === selectedNewOwner)
-                              ?.displayName
-                          }
-                          ?
+                          ⚠️ Confirm Transfer to{' '}
+                          {members.find((m) => m.userId === selectedNewOwner)?.displayName}?
                         </div>
                         <div
                           style={{
-                            fontSize: "12px",
-                            color: "rgba(209, 213, 219, 0.8)",
-                            marginBottom: "12px",
+                            fontSize: '12px',
+                            color: 'rgba(209, 213, 219, 0.8)',
+                            marginBottom: '12px',
                           }}
                         >
-                          You will no longer be the host and will lose
-                          moderation privileges. This cannot be undone.
+                          You will no longer be the host and will lose moderation privileges. This
+                          cannot be undone.
                         </div>
-                        <div style={{ display: "flex", gap: "8px" }}>
+                        <div style={{ display: 'flex', gap: '8px' }}>
                           <button
                             type="button"
-                            onClick={() =>
-                              setConfirmingTransferOwnership(false)
-                            }
-                            disabled={actionLoading === "transfer-ownership"}
+                            onClick={() => setConfirmingTransferOwnership(false)}
+                            disabled={actionLoading === 'transfer-ownership'}
                             style={{
                               flex: 1,
-                              padding: "10px",
-                              background: "rgba(75, 85, 99, 0.3)",
-                              color: "rgba(209, 213, 219, 1)",
-                              border: "1px solid rgba(75, 85, 99, 0.5)",
-                              borderRadius: "6px",
-                              fontSize: "14px",
-                              fontWeight: "600",
+                              padding: '10px',
+                              background: 'rgba(75, 85, 99, 0.3)',
+                              color: 'rgba(209, 213, 219, 1)',
+                              border: '1px solid rgba(75, 85, 99, 0.5)',
+                              borderRadius: '6px',
+                              fontSize: '14px',
+                              fontWeight: '600',
                               cursor:
-                                actionLoading === "transfer-ownership"
-                                  ? "not-allowed"
-                                  : "pointer",
-                              opacity:
-                                actionLoading === "transfer-ownership"
-                                  ? 0.5
-                                  : 1,
-                              transition: "all 0.2s ease",
+                                actionLoading === 'transfer-ownership' ? 'not-allowed' : 'pointer',
+                              opacity: actionLoading === 'transfer-ownership' ? 0.5 : 1,
+                              transition: 'all 0.2s ease',
                             }}
                             onMouseEnter={(e) => {
-                              if (actionLoading !== "transfer-ownership") {
-                                e.currentTarget.style.background =
-                                  "rgba(75, 85, 99, 0.4)";
+                              if (actionLoading !== 'transfer-ownership') {
+                                e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
                               }
                             }}
                             onMouseLeave={(e) => {
-                              if (actionLoading !== "transfer-ownership") {
-                                e.currentTarget.style.background =
-                                  "rgba(75, 85, 99, 0.3)";
+                              if (actionLoading !== 'transfer-ownership') {
+                                e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
                               }
                             }}
                           >
@@ -2200,36 +2008,31 @@ export function ModerationPanel({
                           <button
                             type="button"
                             onClick={handleTransferOwnership}
-                            disabled={actionLoading === "transfer-ownership"}
+                            disabled={actionLoading === 'transfer-ownership'}
                             style={{
                               flex: 1,
-                              padding: "10px",
+                              padding: '10px',
                               background:
-                                actionLoading === "transfer-ownership"
-                                  ? "rgba(75, 85, 99, 0.3)"
-                                  : "linear-gradient(135deg, rgba(251, 146, 60, 0.8), rgba(249, 115, 22, 0.8))",
-                              color: "white",
+                                actionLoading === 'transfer-ownership'
+                                  ? 'rgba(75, 85, 99, 0.3)'
+                                  : 'linear-gradient(135deg, rgba(251, 146, 60, 0.8), rgba(249, 115, 22, 0.8))',
+                              color: 'white',
                               border:
-                                actionLoading === "transfer-ownership"
-                                  ? "1px solid rgba(75, 85, 99, 0.5)"
-                                  : "1px solid rgba(251, 146, 60, 0.6)",
-                              borderRadius: "6px",
-                              fontSize: "14px",
-                              fontWeight: "600",
+                                actionLoading === 'transfer-ownership'
+                                  ? '1px solid rgba(75, 85, 99, 0.5)'
+                                  : '1px solid rgba(251, 146, 60, 0.6)',
+                              borderRadius: '6px',
+                              fontSize: '14px',
+                              fontWeight: '600',
                               cursor:
-                                actionLoading === "transfer-ownership"
-                                  ? "not-allowed"
-                                  : "pointer",
-                              opacity:
-                                actionLoading === "transfer-ownership"
-                                  ? 0.5
-                                  : 1,
-                              transition: "all 0.2s ease",
+                                actionLoading === 'transfer-ownership' ? 'not-allowed' : 'pointer',
+                              opacity: actionLoading === 'transfer-ownership' ? 0.5 : 1,
+                              transition: 'all 0.2s ease',
                             }}
                           >
-                            {actionLoading === "transfer-ownership"
-                              ? "Transferring..."
-                              : "Confirm Transfer"}
+                            {actionLoading === 'transfer-ownership'
+                              ? 'Transferring...'
+                              : 'Confirm Transfer'}
                           </button>
                         </div>
                       </div>
@@ -2243,9 +2046,9 @@ export function ModerationPanel({
 
         <div
           style={{
-            display: "flex",
-            justifyContent: "flex-end",
-            marginTop: "20px",
+            display: 'flex',
+            justifyContent: 'flex-end',
+            marginTop: '20px',
           }}
         >
           <button
@@ -2254,39 +2057,39 @@ export function ModerationPanel({
             disabled={hasUnsavedAccessModeChanges}
             title={
               hasUnsavedAccessModeChanges
-                ? "Please update access mode settings before closing"
+                ? 'Please update access mode settings before closing'
                 : undefined
             }
             style={{
-              padding: "10px 20px",
+              padding: '10px 20px',
               background: hasUnsavedAccessModeChanges
-                ? "rgba(75, 85, 99, 0.2)"
-                : "rgba(75, 85, 99, 0.3)",
+                ? 'rgba(75, 85, 99, 0.2)'
+                : 'rgba(75, 85, 99, 0.3)',
               color: hasUnsavedAccessModeChanges
-                ? "rgba(156, 163, 175, 1)"
-                : "rgba(209, 213, 219, 1)",
+                ? 'rgba(156, 163, 175, 1)'
+                : 'rgba(209, 213, 219, 1)',
               border: hasUnsavedAccessModeChanges
-                ? "1px solid rgba(251, 146, 60, 0.4)"
-                : "1px solid rgba(75, 85, 99, 0.5)",
-              borderRadius: "10px",
-              fontSize: "14px",
-              fontWeight: "600",
-              cursor: hasUnsavedAccessModeChanges ? "not-allowed" : "pointer",
+                ? '1px solid rgba(251, 146, 60, 0.4)'
+                : '1px solid rgba(75, 85, 99, 0.5)',
+              borderRadius: '10px',
+              fontSize: '14px',
+              fontWeight: '600',
+              cursor: hasUnsavedAccessModeChanges ? 'not-allowed' : 'pointer',
               opacity: hasUnsavedAccessModeChanges ? 0.6 : 1,
-              transition: "all 0.2s ease",
+              transition: 'all 0.2s ease',
             }}
             onMouseEnter={(e) => {
               if (!hasUnsavedAccessModeChanges) {
-                e.currentTarget.style.background = "rgba(75, 85, 99, 0.4)";
+                e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
               } else {
-                e.currentTarget.style.borderColor = "rgba(251, 146, 60, 0.8)";
+                e.currentTarget.style.borderColor = 'rgba(251, 146, 60, 0.8)'
               }
             }}
             onMouseLeave={(e) => {
               if (!hasUnsavedAccessModeChanges) {
-                e.currentTarget.style.background = "rgba(75, 85, 99, 0.3)";
+                e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
               } else {
-                e.currentTarget.style.borderColor = "rgba(251, 146, 60, 0.4)";
+                e.currentTarget.style.borderColor = 'rgba(251, 146, 60, 0.4)'
               }
             }}
           >
@@ -2300,95 +2103,91 @@ export function ModerationPanel({
         <Dialog.Portal>
           <Dialog.Overlay
             style={{
-              position: "fixed",
+              position: 'fixed',
               inset: 0,
-              background: "rgba(0, 0, 0, 0.5)",
-              backdropFilter: "blur(4px)",
+              background: 'rgba(0, 0, 0, 0.5)',
+              backdropFilter: 'blur(4px)',
               zIndex: 10001,
             }}
           />
           <Dialog.Content
             style={{
-              position: "fixed",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              background:
-                "linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))",
-              border: "1px solid rgba(239, 68, 68, 0.4)",
-              borderRadius: "16px",
-              padding: "24px",
-              minWidth: "400px",
-              maxWidth: "500px",
+              position: 'fixed',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              background: 'linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))',
+              border: '1px solid rgba(239, 68, 68, 0.4)',
+              borderRadius: '16px',
+              padding: '24px',
+              minWidth: '400px',
+              maxWidth: '500px',
               zIndex: 10002,
-              boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)",
+              boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
             }}
           >
             <Dialog.Title
               style={{
-                fontSize: "20px",
-                fontWeight: "bold",
-                marginBottom: "8px",
-                color: "rgba(252, 165, 165, 1)",
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
+                fontSize: '20px',
+                fontWeight: 'bold',
+                marginBottom: '8px',
+                color: 'rgba(252, 165, 165, 1)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
               }}
             >
-              <span style={{ fontSize: "24px" }}>🚫</span>
+              <span style={{ fontSize: '24px' }}>🚫</span>
               Ban {banTargetUserName}
             </Dialog.Title>
             <Dialog.Description
               style={{
-                fontSize: "14px",
-                color: "rgba(209, 213, 219, 0.8)",
-                marginBottom: "20px",
+                fontSize: '14px',
+                color: 'rgba(209, 213, 219, 0.8)',
+                marginBottom: '20px',
               }}
             >
-              Select a reason for banning this player. They will not be able to
-              rejoin this room.
+              Select a reason for banning this player. They will not be able to rejoin this room.
             </Dialog.Description>
 
             {/* Ban reason options */}
-            <div style={{ marginBottom: "24px" }}>
+            <div style={{ marginBottom: '24px' }}>
               {[
-                { value: "harassment", label: "Harassment" },
-                { value: "cheating", label: "Cheating" },
-                { value: "inappropriate-name", label: "Inappropriate Name" },
-                { value: "spam", label: "Spam" },
-                { value: "afk", label: "AFK / Inactive" },
-                { value: "other", label: "Other" },
+                { value: 'harassment', label: 'Harassment' },
+                { value: 'cheating', label: 'Cheating' },
+                { value: 'inappropriate-name', label: 'Inappropriate Name' },
+                { value: 'spam', label: 'Spam' },
+                { value: 'afk', label: 'AFK / Inactive' },
+                { value: 'other', label: 'Other' },
               ].map((reason) => (
                 <label
                   key={reason.value}
                   style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "10px",
-                    padding: "10px 12px",
-                    marginBottom: "8px",
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '10px',
+                    padding: '10px 12px',
+                    marginBottom: '8px',
                     background:
                       selectedBanReason === reason.value
-                        ? "rgba(239, 68, 68, 0.15)"
-                        : "rgba(255, 255, 255, 0.05)",
+                        ? 'rgba(239, 68, 68, 0.15)'
+                        : 'rgba(255, 255, 255, 0.05)',
                     border:
                       selectedBanReason === reason.value
-                        ? "1px solid rgba(239, 68, 68, 0.6)"
-                        : "1px solid rgba(75, 85, 99, 0.3)",
-                    borderRadius: "8px",
-                    cursor: "pointer",
-                    transition: "all 0.2s ease",
+                        ? '1px solid rgba(239, 68, 68, 0.6)'
+                        : '1px solid rgba(75, 85, 99, 0.3)',
+                    borderRadius: '8px',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s ease',
                   }}
                   onMouseEnter={(e) => {
                     if (selectedBanReason !== reason.value) {
-                      e.currentTarget.style.background =
-                        "rgba(255, 255, 255, 0.08)";
+                      e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)'
                     }
                   }}
                   onMouseLeave={(e) => {
                     if (selectedBanReason !== reason.value) {
-                      e.currentTarget.style.background =
-                        "rgba(255, 255, 255, 0.05)";
+                      e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
                     }
                   }}
                 >
@@ -2399,20 +2198,19 @@ export function ModerationPanel({
                     checked={selectedBanReason === reason.value}
                     onChange={(e) => setSelectedBanReason(e.target.value)}
                     style={{
-                      width: "16px",
-                      height: "16px",
-                      cursor: "pointer",
+                      width: '16px',
+                      height: '16px',
+                      cursor: 'pointer',
                     }}
                   />
                   <span
                     style={{
-                      fontSize: "14px",
-                      fontWeight:
-                        selectedBanReason === reason.value ? "600" : "500",
+                      fontSize: '14px',
+                      fontWeight: selectedBanReason === reason.value ? '600' : '500',
                       color:
                         selectedBanReason === reason.value
-                          ? "rgba(252, 165, 165, 1)"
-                          : "rgba(209, 213, 219, 1)",
+                          ? 'rgba(252, 165, 165, 1)'
+                          : 'rgba(209, 213, 219, 1)',
                     }}
                   >
                     {reason.label}
@@ -2424,30 +2222,30 @@ export function ModerationPanel({
             {/* Actions */}
             <div
               style={{
-                display: "flex",
-                gap: "12px",
-                justifyContent: "flex-end",
+                display: 'flex',
+                gap: '12px',
+                justifyContent: 'flex-end',
               }}
             >
               <Dialog.Close asChild>
                 <button
                   type="button"
                   style={{
-                    padding: "10px 20px",
-                    background: "rgba(75, 85, 99, 0.3)",
-                    color: "rgba(209, 213, 219, 1)",
-                    border: "1px solid rgba(75, 85, 99, 0.5)",
-                    borderRadius: "10px",
-                    fontSize: "14px",
-                    fontWeight: "600",
-                    cursor: "pointer",
-                    transition: "all 0.2s ease",
+                    padding: '10px 20px',
+                    background: 'rgba(75, 85, 99, 0.3)',
+                    color: 'rgba(209, 213, 219, 1)',
+                    border: '1px solid rgba(75, 85, 99, 0.5)',
+                    borderRadius: '10px',
+                    fontSize: '14px',
+                    fontWeight: '600',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s ease',
                   }}
                   onMouseEnter={(e) => {
-                    e.currentTarget.style.background = "rgba(75, 85, 99, 0.4)";
+                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
                   }}
                   onMouseLeave={(e) => {
-                    e.currentTarget.style.background = "rgba(75, 85, 99, 0.3)";
+                    e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
                   }}
                 >
                   Cancel
@@ -2457,24 +2255,24 @@ export function ModerationPanel({
                 type="button"
                 onClick={handleConfirmBan}
                 style={{
-                  padding: "10px 20px",
+                  padding: '10px 20px',
                   background:
-                    "linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8))",
-                  color: "white",
-                  border: "1px solid rgba(239, 68, 68, 0.6)",
-                  borderRadius: "10px",
-                  fontSize: "14px",
-                  fontWeight: "600",
-                  cursor: "pointer",
-                  transition: "all 0.2s ease",
+                    'linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8))',
+                  color: 'white',
+                  border: '1px solid rgba(239, 68, 68, 0.6)',
+                  borderRadius: '10px',
+                  fontSize: '14px',
+                  fontWeight: '600',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s ease',
                 }}
                 onMouseEnter={(e) => {
                   e.currentTarget.style.background =
-                    "linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9))";
+                    'linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9))'
                 }}
                 onMouseLeave={(e) => {
                   e.currentTarget.style.background =
-                    "linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8))";
+                    'linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8))'
                 }}
               >
                 Confirm Ban
@@ -2484,5 +2282,5 @@ export function ModerationPanel({
         </Dialog.Portal>
       </Dialog.Root>
     </Modal>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/NetworkPlayerIndicator.tsx b/apps/web/src/components/nav/NetworkPlayerIndicator.tsx
index 9cd2f94d..0cb7a70e 100644
--- a/apps/web/src/components/nav/NetworkPlayerIndicator.tsx
+++ b/apps/web/src/components/nav/NetworkPlayerIndicator.tsx
@@ -1,40 +1,40 @@
-import { useState } from "react";
-import { PlayerTooltip } from "./PlayerTooltip";
-import { ReportPlayerModal } from "./ReportPlayerModal";
-import type { PlayerBadge } from "./types";
-import { useDeactivatePlayer } from "@/hooks/useRoomData";
+import { useState } from 'react'
+import { PlayerTooltip } from './PlayerTooltip'
+import { ReportPlayerModal } from './ReportPlayerModal'
+import type { PlayerBadge } from './types'
+import { useDeactivatePlayer } from '@/hooks/useRoomData'
 
 interface NetworkPlayer {
-  id: string;
-  emoji?: string;
-  name?: string;
-  color?: string;
-  memberName?: string;
-  isOnline?: boolean;
-  userId?: string; // The actual user ID controlling this player
+  id: string
+  emoji?: string
+  name?: string
+  color?: string
+  memberName?: string
+  isOnline?: boolean
+  userId?: string // The actual user ID controlling this player
 }
 
 interface NetworkPlayerIndicatorProps {
-  player: NetworkPlayer;
-  shouldEmphasize: boolean;
+  player: NetworkPlayer
+  shouldEmphasize: boolean
   // Game state for turn indicator
-  currentPlayerId?: string;
-  playerScores?: Record<string, number>;
-  playerStreaks?: Record<string, number>;
-  playerBadges?: Record<string, PlayerBadge>;
+  currentPlayerId?: string
+  playerScores?: Record<string, number>
+  playerStreaks?: Record<string, number>
+  playerBadges?: Record<string, PlayerBadge>
   // Moderation props
-  roomId?: string;
-  currentUserId?: string;
-  isCurrentUserHost?: boolean;
+  roomId?: string
+  currentUserId?: string
+  isCurrentUserHost?: boolean
   // Side assignments (for 2-player games)
-  whitePlayerId?: string | null;
-  blackPlayerId?: string | null;
-  onAssignWhitePlayer?: (playerId: string | null) => void;
-  onAssignBlackPlayer?: (playerId: string | null) => void;
+  whitePlayerId?: string | null
+  blackPlayerId?: string | null
+  onAssignWhitePlayer?: (playerId: string | null) => void
+  onAssignBlackPlayer?: (playerId: string | null) => void
   // Room context for assignment permissions
-  isInRoom?: boolean;
+  isInRoom?: boolean
   // Game phase (for showing spectating vs assign)
-  gamePhase?: "setup" | "playing" | "results";
+  gamePhase?: 'setup' | 'playing' | 'results'
 }
 
 /**
@@ -58,21 +58,19 @@ export function NetworkPlayerIndicator({
   isInRoom = true, // Network players are always in a room
   gamePhase,
 }: NetworkPlayerIndicatorProps) {
-  const [showReportModal, setShowReportModal] = useState(false);
-  const [hoveredPlayerId, setHoveredPlayerId] = useState<string | null>(null);
-  const [hoveredBadge, setHoveredBadge] = useState(false);
-  const [clickCooldown, setClickCooldown] = useState(false);
-  const { mutate: deactivatePlayer } = useDeactivatePlayer();
+  const [showReportModal, setShowReportModal] = useState(false)
+  const [hoveredPlayerId, setHoveredPlayerId] = useState<string | null>(null)
+  const [hoveredBadge, setHoveredBadge] = useState(false)
+  const [clickCooldown, setClickCooldown] = useState(false)
+  const { mutate: deactivatePlayer } = useDeactivatePlayer()
 
   // Determine if user can assign players
   // For network players: Can assign only if user is host (always in a room)
-  const canAssignPlayers = isCurrentUserHost;
+  const canAssignPlayers = isCurrentUserHost
 
-  const playerName = player.name || `Network Player ${player.id.slice(0, 8)}`;
-  const extraInfo = player.memberName
-    ? `Controlled by ${player.memberName}`
-    : undefined;
-  const isOnline = player.isOnline !== false; // Default to online if not specified
+  const playerName = player.name || `Network Player ${player.id.slice(0, 8)}`
+  const extraInfo = player.memberName ? `Controlled by ${player.memberName}` : undefined
+  const isOnline = player.isOnline !== false // Default to online if not specified
 
   // Show report button if:
   // - We have roomId and currentUserId
@@ -84,66 +82,64 @@ export function NetworkPlayerIndicator({
       currentUserId &&
       !isCurrentUserHost &&
       player.userId &&
-      player.userId !== currentUserId,
-  );
+      player.userId !== currentUserId
+  )
 
   // Turn indicator logic (same as ActivePlayersList)
-  const isCurrentPlayer = currentPlayerId
-    ? player.id === currentPlayerId
-    : false;
-  const hasGameState = currentPlayerId !== undefined;
-  const score = playerScores[player.id] || 0;
-  const streak = playerStreaks[player.id] || 0;
+  const isCurrentPlayer = currentPlayerId ? player.id === currentPlayerId : false
+  const hasGameState = currentPlayerId !== undefined
+  const score = playerScores[player.id] || 0
+  const streak = playerStreaks[player.id] || 0
 
   // Helper to get celebration level based on consecutive matches
   const getCelebrationLevel = (consecutiveMatches: number) => {
-    if (consecutiveMatches >= 5) return "legendary";
-    if (consecutiveMatches >= 3) return "epic";
-    if (consecutiveMatches >= 2) return "great";
-    return "normal";
-  };
-  const celebrationLevel = getCelebrationLevel(streak);
-  const badge = playerBadges[player.id];
+    if (consecutiveMatches >= 5) return 'legendary'
+    if (consecutiveMatches >= 3) return 'epic'
+    if (consecutiveMatches >= 2) return 'great'
+    return 'normal'
+  }
+  const celebrationLevel = getCelebrationLevel(streak)
+  const badge = playerBadges[player.id]
 
   // Handler for deactivating player (host only)
   const handleDeactivate = () => {
-    if (!roomId || !isCurrentUserHost) return;
-    deactivatePlayer({ roomId, playerId: player.id });
-  };
+    if (!roomId || !isCurrentUserHost) return
+    deactivatePlayer({ roomId, playerId: player.id })
+  }
 
   // Handler to assign to white
   const handleAssignWhite = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (!onAssignWhitePlayer) return;
-    onAssignWhitePlayer(player.id);
-    setClickCooldown(true);
-  };
+    e.stopPropagation()
+    if (!onAssignWhitePlayer) return
+    onAssignWhitePlayer(player.id)
+    setClickCooldown(true)
+  }
 
   // Handler to assign to black
   const handleAssignBlack = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (!onAssignBlackPlayer) return;
-    onAssignBlackPlayer(player.id);
-    setClickCooldown(true);
-  };
+    e.stopPropagation()
+    if (!onAssignBlackPlayer) return
+    onAssignBlackPlayer(player.id)
+    setClickCooldown(true)
+  }
 
   // Handler to swap sides
   const handleSwap = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (!onAssignWhitePlayer || !onAssignBlackPlayer) return;
+    e.stopPropagation()
+    if (!onAssignWhitePlayer || !onAssignBlackPlayer) return
 
     if (whitePlayerId === player.id) {
       // Currently white, swap with black player
-      const currentBlack = blackPlayerId ?? null;
-      onAssignWhitePlayer(currentBlack);
-      onAssignBlackPlayer(player.id);
+      const currentBlack = blackPlayerId ?? null
+      onAssignWhitePlayer(currentBlack)
+      onAssignBlackPlayer(player.id)
     } else if (blackPlayerId === player.id) {
       // Currently black, swap with white player
-      const currentWhite = whitePlayerId ?? null;
-      onAssignBlackPlayer(currentWhite);
-      onAssignWhitePlayer(player.id);
+      const currentWhite = whitePlayerId ?? null
+      onAssignBlackPlayer(currentWhite)
+      onAssignWhitePlayer(player.id)
     }
-  };
+  }
 
   return (
     <>
@@ -157,23 +153,23 @@ export function NetworkPlayerIndicator({
       >
         <div
           style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: "4px",
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '4px',
           }}
         >
           <div
             style={{
-              position: "relative",
-              fontSize: "56px",
+              position: 'relative',
+              fontSize: '56px',
               lineHeight: 1,
-              transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
-              filter: "drop-shadow(0 6px 12px rgba(0,0,0,0.3))",
-              cursor: "default",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
+              transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+              filter: 'drop-shadow(0 6px 12px rgba(0,0,0,0.3))',
+              cursor: 'default',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
               opacity: hasGameState ? (isCurrentPlayer ? 1 : 0.65) : 1,
             }}
             onMouseEnter={() => setHoveredPlayerId(player.id)}
@@ -183,39 +179,39 @@ export function NetworkPlayerIndicator({
             {isCurrentPlayer && hasGameState && (
               <div
                 style={{
-                  position: "absolute",
-                  inset: "-8px",
-                  borderRadius: "50%",
-                  border: `4px solid ${player.color || "#3b82f6"}`,
-                  boxShadow: `0 0 0 2px white, 0 0 20px ${player.color || "#3b82f6"}80`,
-                  animation: "borderPulse 2s ease-in-out infinite",
+                  position: 'absolute',
+                  inset: '-8px',
+                  borderRadius: '50%',
+                  border: `4px solid ${player.color || '#3b82f6'}`,
+                  boxShadow: `0 0 0 2px white, 0 0 20px ${player.color || '#3b82f6'}80`,
+                  animation: 'borderPulse 2s ease-in-out infinite',
                   zIndex: -1,
                 }}
               />
             )}
 
             {/* Player emoji or fallback */}
-            {player.emoji || "🌐"}
+            {player.emoji || '🌐'}
 
             {/* Score badge - bottom right (same position as network badge when no score) */}
             {hasGameState && score > 0 ? (
               <div
                 style={{
-                  position: "absolute",
-                  bottom: "-6px",
-                  right: "-6px",
-                  width: "24px",
-                  height: "24px",
-                  borderRadius: "50%",
-                  border: "3px solid white",
-                  background: player.color || "#3b82f6",
-                  color: "white",
-                  fontSize: "11px",
-                  fontWeight: "bold",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  boxShadow: "0 4px 10px rgba(0,0,0,0.4)",
+                  position: 'absolute',
+                  bottom: '-6px',
+                  right: '-6px',
+                  width: '24px',
+                  height: '24px',
+                  borderRadius: '50%',
+                  border: '3px solid white',
+                  background: player.color || '#3b82f6',
+                  color: 'white',
+                  fontSize: '11px',
+                  fontWeight: 'bold',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  boxShadow: '0 4px 10px rgba(0,0,0,0.4)',
                   zIndex: 2,
                   lineHeight: 1,
                 }}
@@ -226,24 +222,22 @@ export function NetworkPlayerIndicator({
               /* Network icon badge - show when no score */
               <div
                 style={{
-                  position: "absolute",
-                  bottom: "-6px",
-                  left: "-6px",
-                  width: "22px",
-                  height: "22px",
-                  borderRadius: "50%",
-                  border: "3px solid white",
-                  background: "linear-gradient(135deg, #3b82f6, #8b5cf6)",
-                  color: "white",
-                  fontSize: "11px",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  boxShadow: "0 4px 10px rgba(0,0,0,0.4)",
+                  position: 'absolute',
+                  bottom: '-6px',
+                  left: '-6px',
+                  width: '22px',
+                  height: '22px',
+                  borderRadius: '50%',
+                  border: '3px solid white',
+                  background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
+                  color: 'white',
+                  fontSize: '11px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  boxShadow: '0 4px 10px rgba(0,0,0,0.4)',
                   zIndex: 1,
-                  animation: isOnline
-                    ? "none"
-                    : "offlinePulse 2s ease-in-out infinite",
+                  animation: isOnline ? 'none' : 'offlinePulse 2s ease-in-out infinite',
                 }}
               >
                 📡
@@ -254,19 +248,17 @@ export function NetworkPlayerIndicator({
             {hasGameState && streak >= 2 && (
               <div
                 style={{
-                  position: "absolute",
-                  top: "-8px",
-                  right: "-8px",
-                  fontSize: "20px",
+                  position: 'absolute',
+                  top: '-8px',
+                  right: '-8px',
+                  fontSize: '20px',
                   filter:
-                    celebrationLevel === "legendary"
-                      ? "drop-shadow(0 0 8px #a855f7)"
-                      : celebrationLevel === "epic"
-                        ? "drop-shadow(0 0 8px #f97316)"
-                        : "drop-shadow(0 0 8px #22c55e)",
-                  animation: isCurrentPlayer
-                    ? "streakPulse 1s ease-in-out infinite"
-                    : "none",
+                    celebrationLevel === 'legendary'
+                      ? 'drop-shadow(0 0 8px #a855f7)'
+                      : celebrationLevel === 'epic'
+                        ? 'drop-shadow(0 0 8px #f97316)'
+                        : 'drop-shadow(0 0 8px #22c55e)',
+                  animation: isCurrentPlayer ? 'streakPulse 1s ease-in-out infinite' : 'none',
                   zIndex: 2,
                 }}
               >
@@ -275,69 +267,59 @@ export function NetworkPlayerIndicator({
             )}
 
             {/* Close button - top left (host only, on hover) */}
-            {shouldEmphasize &&
-              isCurrentUserHost &&
-              hoveredPlayerId === player.id && (
-                <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleDeactivate();
-                  }}
-                  style={{
-                    position: "absolute",
-                    top: "-6px",
-                    left: "-6px",
-                    width: "26px",
-                    height: "26px",
-                    borderRadius: "50%",
-                    border: "3px solid white",
-                    background: "linear-gradient(135deg, #ef4444, #dc2626)",
-                    color: "white",
-                    fontSize: "14px",
-                    fontWeight: "bold",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    cursor: "pointer",
-                    boxShadow: "0 4px 12px rgba(0,0,0,0.4)",
-                    transition: "all 0.2s ease",
-                    padding: 0,
-                    lineHeight: 1,
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.background =
-                      "linear-gradient(135deg, #dc2626, #b91c1c)";
-                    e.currentTarget.style.transform = "scale(1.15)";
-                    e.currentTarget.style.boxShadow =
-                      "0 6px 16px rgba(239, 68, 68, 0.5)";
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.background =
-                      "linear-gradient(135deg, #ef4444, #dc2626)";
-                    e.currentTarget.style.transform = "scale(1)";
-                    e.currentTarget.style.boxShadow =
-                      "0 4px 12px rgba(0,0,0,0.4)";
-                  }}
-                  onFocus={(e) => {
-                    e.currentTarget.style.background =
-                      "linear-gradient(135deg, #dc2626, #b91c1c)";
-                    e.currentTarget.style.transform = "scale(1.15)";
-                    e.currentTarget.style.boxShadow =
-                      "0 6px 16px rgba(239, 68, 68, 0.5)";
-                  }}
-                  onBlur={(e) => {
-                    e.currentTarget.style.background =
-                      "linear-gradient(135deg, #ef4444, #dc2626)";
-                    e.currentTarget.style.transform = "scale(1)";
-                    e.currentTarget.style.boxShadow =
-                      "0 4px 12px rgba(0,0,0,0.4)";
-                  }}
-                  aria-label={`Deactivate ${playerName}`}
-                >
-                  ×
-                </button>
-              )}
+            {shouldEmphasize && isCurrentUserHost && hoveredPlayerId === player.id && (
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handleDeactivate()
+                }}
+                style={{
+                  position: 'absolute',
+                  top: '-6px',
+                  left: '-6px',
+                  width: '26px',
+                  height: '26px',
+                  borderRadius: '50%',
+                  border: '3px solid white',
+                  background: 'linear-gradient(135deg, #ef4444, #dc2626)',
+                  color: 'white',
+                  fontSize: '14px',
+                  fontWeight: 'bold',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  cursor: 'pointer',
+                  boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
+                  transition: 'all 0.2s ease',
+                  padding: 0,
+                  lineHeight: 1,
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = 'linear-gradient(135deg, #dc2626, #b91c1c)'
+                  e.currentTarget.style.transform = 'scale(1.15)'
+                  e.currentTarget.style.boxShadow = '0 6px 16px rgba(239, 68, 68, 0.5)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = 'linear-gradient(135deg, #ef4444, #dc2626)'
+                  e.currentTarget.style.transform = 'scale(1)'
+                  e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.4)'
+                }}
+                onFocus={(e) => {
+                  e.currentTarget.style.background = 'linear-gradient(135deg, #dc2626, #b91c1c)'
+                  e.currentTarget.style.transform = 'scale(1.15)'
+                  e.currentTarget.style.boxShadow = '0 6px 16px rgba(239, 68, 68, 0.5)'
+                }}
+                onBlur={(e) => {
+                  e.currentTarget.style.background = 'linear-gradient(135deg, #ef4444, #dc2626)'
+                  e.currentTarget.style.transform = 'scale(1)'
+                  e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.4)'
+                }}
+                aria-label={`Deactivate ${playerName}`}
+              >
+                ×
+              </button>
+            )}
 
             <style
               dangerouslySetInnerHTML={{
@@ -401,34 +383,34 @@ export function NetworkPlayerIndicator({
           {badge && !onAssignWhitePlayer && !onAssignBlackPlayer && (
             <div
               style={{
-                display: "inline-flex",
-                alignItems: "center",
-                gap: "6px",
-                padding: "4px 10px",
-                borderRadius: "999px",
-                background: badge.background ?? "rgba(148, 163, 184, 0.25)",
-                color: badge.color ?? "#0f172a",
-                fontSize: "11px",
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '6px',
+                padding: '4px 10px',
+                borderRadius: '999px',
+                background: badge.background ?? 'rgba(148, 163, 184, 0.25)',
+                color: badge.color ?? '#0f172a',
+                fontSize: '11px',
                 fontWeight: 700,
-                letterSpacing: "0.04em",
-                textTransform: "uppercase",
+                letterSpacing: '0.04em',
+                textTransform: 'uppercase',
                 boxShadow: badge.shadowColor
                   ? `0 4px 12px ${badge.shadowColor}`
-                  : "0 4px 12px rgba(15, 23, 42, 0.25)",
+                  : '0 4px 12px rgba(15, 23, 42, 0.25)',
                 border: badge.borderColor
                   ? `2px solid ${badge.borderColor}`
-                  : "2px solid rgba(255,255,255,0.4)",
-                backdropFilter: "blur(4px)",
-                marginTop: "6px",
-                whiteSpace: "nowrap",
+                  : '2px solid rgba(255,255,255,0.4)',
+                backdropFilter: 'blur(4px)',
+                marginTop: '6px',
+                whiteSpace: 'nowrap',
               }}
             >
               {badge.icon && (
                 <span
                   aria-hidden
                   style={{
-                    fontSize: "14px",
-                    filter: "drop-shadow(0 2px 4px rgba(15,23,42,0.35))",
+                    fontSize: '14px',
+                    filter: 'drop-shadow(0 2px 4px rgba(15,23,42,0.35))',
                   }}
                 >
                   {badge.icon}
@@ -442,11 +424,11 @@ export function NetworkPlayerIndicator({
           {isCurrentPlayer && hasGameState && (
             <div
               style={{
-                fontSize: "12px",
-                fontWeight: "900",
-                color: player.color || "#3b82f6",
-                textTransform: "uppercase",
-                letterSpacing: "0.5px",
+                fontSize: '12px',
+                fontWeight: '900',
+                color: player.color || '#3b82f6',
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px',
                 textShadow: `
                 -1px -1px 0 white,
                 1px -1px 0 white,
@@ -454,8 +436,8 @@ export function NetworkPlayerIndicator({
                 1px 1px 0 white,
                 0 2px 4px rgba(0,0,0,0.3)
               `,
-                marginTop: "-2px",
-                position: "relative",
+                marginTop: '-2px',
+                position: 'relative',
                 zIndex: 10,
               }}
             >
@@ -467,14 +449,14 @@ export function NetworkPlayerIndicator({
           {onAssignWhitePlayer && onAssignBlackPlayer && (
             <div
               style={{
-                marginTop: "8px",
-                width: "88px", // Fixed width to prevent layout shift
-                transition: "none", // Prevent any inherited transitions
+                marginTop: '8px',
+                width: '88px', // Fixed width to prevent layout shift
+                transition: 'none', // Prevent any inherited transitions
               }}
               onMouseEnter={() => canAssignPlayers && setHoveredBadge(true)}
               onMouseLeave={() => {
-                setHoveredBadge(false);
-                setClickCooldown(false);
+                setHoveredBadge(false)
+                setClickCooldown(false)
               }}
             >
               {/* Unassigned player - show split button on hover */}
@@ -485,25 +467,24 @@ export function NetworkPlayerIndicator({
                     <>
                       {hoveredBadge && !clickCooldown ? (
                         // Hover state: split button
-                        <div style={{ display: "flex", width: "100%" }}>
+                        <div style={{ display: 'flex', width: '100%' }}>
                           <div
                             onClick={handleAssignWhite}
                             style={{
                               flex: 1,
-                              padding: "4px 0",
-                              borderRadius: "12px 0 0 12px",
-                              fontSize: "10px",
-                              fontWeight: "800",
-                              letterSpacing: "0.5px",
-                              textTransform: "uppercase",
-                              cursor: "pointer",
-                              background:
-                                "linear-gradient(135deg, #f0f0f0, #ffffff)",
-                              color: "#1a202c",
-                              border: "2px solid #cbd5e0",
-                              borderRight: "none",
-                              boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-                              textAlign: "center",
+                              padding: '4px 0',
+                              borderRadius: '12px 0 0 12px',
+                              fontSize: '10px',
+                              fontWeight: '800',
+                              letterSpacing: '0.5px',
+                              textTransform: 'uppercase',
+                              cursor: 'pointer',
+                              background: 'linear-gradient(135deg, #f0f0f0, #ffffff)',
+                              color: '#1a202c',
+                              border: '2px solid #cbd5e0',
+                              borderRight: 'none',
+                              boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                              textAlign: 'center',
                             }}
                           >
                             W
@@ -512,20 +493,19 @@ export function NetworkPlayerIndicator({
                             onClick={handleAssignBlack}
                             style={{
                               flex: 1,
-                              padding: "4px 0",
-                              borderRadius: "0 12px 12px 0",
-                              fontSize: "10px",
-                              fontWeight: "800",
-                              letterSpacing: "0.5px",
-                              textTransform: "uppercase",
-                              cursor: "pointer",
-                              background:
-                                "linear-gradient(135deg, #2d3748, #1a202c)",
-                              color: "#ffffff",
-                              border: "2px solid #4a5568",
-                              borderLeft: "none",
-                              boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-                              textAlign: "center",
+                              padding: '4px 0',
+                              borderRadius: '0 12px 12px 0',
+                              fontSize: '10px',
+                              fontWeight: '800',
+                              letterSpacing: '0.5px',
+                              textTransform: 'uppercase',
+                              cursor: 'pointer',
+                              background: 'linear-gradient(135deg, #2d3748, #1a202c)',
+                              color: '#ffffff',
+                              border: '2px solid #4a5568',
+                              borderLeft: 'none',
+                              boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                              textAlign: 'center',
                             }}
                           >
                             B
@@ -535,42 +515,41 @@ export function NetworkPlayerIndicator({
                         // Normal state: ASSIGN or SPECTATING button
                         <div
                           style={{
-                            width: "100%",
-                            padding: "4px 0",
-                            borderRadius: "12px",
-                            fontSize: "10px",
-                            fontWeight: "800",
-                            letterSpacing: "0.5px",
-                            textTransform: "uppercase",
-                            cursor: "pointer",
-                            background:
-                              "linear-gradient(135deg, #e5e7eb, #d1d5db)",
-                            color: "#6b7280",
-                            border: "2px solid #9ca3af",
-                            boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-                            textAlign: "center",
-                            transition: "none",
+                            width: '100%',
+                            padding: '4px 0',
+                            borderRadius: '12px',
+                            fontSize: '10px',
+                            fontWeight: '800',
+                            letterSpacing: '0.5px',
+                            textTransform: 'uppercase',
+                            cursor: 'pointer',
+                            background: 'linear-gradient(135deg, #e5e7eb, #d1d5db)',
+                            color: '#6b7280',
+                            border: '2px solid #9ca3af',
+                            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                            textAlign: 'center',
+                            transition: 'none',
                           }}
                         >
-                          {gamePhase === "playing" ? "SPECTATING" : "ASSIGN"}
+                          {gamePhase === 'playing' ? 'SPECTATING' : 'ASSIGN'}
                         </div>
                       )}
                     </>
                   ) : // Guest: show SPECTATING during gameplay, nothing during setup
-                  gamePhase === "playing" ? (
+                  gamePhase === 'playing' ? (
                     <div
                       style={{
-                        width: "100%",
-                        padding: "4px 0",
-                        borderRadius: "12px",
-                        fontSize: "10px",
-                        fontWeight: "800",
-                        letterSpacing: "0.5px",
-                        textTransform: "uppercase",
-                        background: "transparent",
-                        color: "#9ca3af",
-                        border: "2px solid transparent",
-                        textAlign: "center",
+                        width: '100%',
+                        padding: '4px 0',
+                        borderRadius: '12px',
+                        fontSize: '10px',
+                        fontWeight: '800',
+                        letterSpacing: '0.5px',
+                        textTransform: 'uppercase',
+                        background: 'transparent',
+                        color: '#9ca3af',
+                        border: '2px solid transparent',
+                        textAlign: 'center',
                         opacity: 0.5,
                       }}
                     >
@@ -578,7 +557,7 @@ export function NetworkPlayerIndicator({
                     </div>
                   ) : (
                     // During setup/results: show nothing
-                    <div style={{ width: "100%", height: "28px" }} />
+                    <div style={{ width: '100%', height: '28px' }} />
                   )}
                 </>
               )}
@@ -594,21 +573,20 @@ export function NetworkPlayerIndicator({
                         <div
                           onClick={handleSwap}
                           style={{
-                            width: "100%",
-                            padding: "4px 0",
-                            borderRadius: "12px",
-                            fontSize: "10px",
-                            fontWeight: "800",
-                            letterSpacing: "0.5px",
-                            textTransform: "uppercase",
-                            cursor: "pointer",
-                            transition: "all 0.2s ease",
-                            background:
-                              "linear-gradient(135deg, #2d3748, #1a202c)",
-                            color: "#ffffff",
-                            border: "2px solid #4a5568",
-                            boxShadow: "0 4px 12px rgba(0,0,0,0.25)",
-                            textAlign: "center",
+                            width: '100%',
+                            padding: '4px 0',
+                            borderRadius: '12px',
+                            fontSize: '10px',
+                            fontWeight: '800',
+                            letterSpacing: '0.5px',
+                            textTransform: 'uppercase',
+                            cursor: 'pointer',
+                            transition: 'all 0.2s ease',
+                            background: 'linear-gradient(135deg, #2d3748, #1a202c)',
+                            color: '#ffffff',
+                            border: '2px solid #4a5568',
+                            boxShadow: '0 4px 12px rgba(0,0,0,0.25)',
+                            textAlign: 'center',
                           }}
                         >
                           SWAP
@@ -617,21 +595,20 @@ export function NetworkPlayerIndicator({
                         // Normal state: WHITE
                         <div
                           style={{
-                            width: "100%",
-                            padding: "4px 0",
-                            borderRadius: "12px",
-                            fontSize: "10px",
-                            fontWeight: "800",
-                            letterSpacing: "0.5px",
-                            textTransform: "uppercase",
-                            cursor: "pointer",
-                            transition: "all 0.2s ease",
-                            background:
-                              "linear-gradient(135deg, #f0f0f0, #ffffff)",
-                            color: "#1a202c",
-                            border: "2px solid #cbd5e0",
-                            boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-                            textAlign: "center",
+                            width: '100%',
+                            padding: '4px 0',
+                            borderRadius: '12px',
+                            fontSize: '10px',
+                            fontWeight: '800',
+                            letterSpacing: '0.5px',
+                            textTransform: 'uppercase',
+                            cursor: 'pointer',
+                            transition: 'all 0.2s ease',
+                            background: 'linear-gradient(135deg, #f0f0f0, #ffffff)',
+                            color: '#1a202c',
+                            border: '2px solid #cbd5e0',
+                            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                            textAlign: 'center',
                           }}
                         >
                           WHITE
@@ -642,19 +619,19 @@ export function NetworkPlayerIndicator({
                     // Guest: show static WHITE label
                     <div
                       style={{
-                        width: "100%",
-                        padding: "4px 0",
-                        borderRadius: "12px",
-                        fontSize: "10px",
-                        fontWeight: "800",
-                        letterSpacing: "0.5px",
-                        textTransform: "uppercase",
-                        cursor: "default",
-                        background: "linear-gradient(135deg, #f0f0f0, #ffffff)",
-                        color: "#1a202c",
-                        border: "2px solid #cbd5e0",
-                        boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-                        textAlign: "center",
+                        width: '100%',
+                        padding: '4px 0',
+                        borderRadius: '12px',
+                        fontSize: '10px',
+                        fontWeight: '800',
+                        letterSpacing: '0.5px',
+                        textTransform: 'uppercase',
+                        cursor: 'default',
+                        background: 'linear-gradient(135deg, #f0f0f0, #ffffff)',
+                        color: '#1a202c',
+                        border: '2px solid #cbd5e0',
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                        textAlign: 'center',
                         opacity: 0.8,
                       }}
                     >
@@ -675,21 +652,20 @@ export function NetworkPlayerIndicator({
                         <div
                           onClick={handleSwap}
                           style={{
-                            width: "100%",
-                            padding: "4px 0",
-                            borderRadius: "12px",
-                            fontSize: "10px",
-                            fontWeight: "800",
-                            letterSpacing: "0.5px",
-                            textTransform: "uppercase",
-                            cursor: "pointer",
-                            transition: "all 0.2s ease",
-                            background:
-                              "linear-gradient(135deg, #f0f0f0, #ffffff)",
-                            color: "#1a202c",
-                            border: "2px solid #cbd5e0",
-                            boxShadow: "0 4px 12px rgba(0,0,0,0.25)",
-                            textAlign: "center",
+                            width: '100%',
+                            padding: '4px 0',
+                            borderRadius: '12px',
+                            fontSize: '10px',
+                            fontWeight: '800',
+                            letterSpacing: '0.5px',
+                            textTransform: 'uppercase',
+                            cursor: 'pointer',
+                            transition: 'all 0.2s ease',
+                            background: 'linear-gradient(135deg, #f0f0f0, #ffffff)',
+                            color: '#1a202c',
+                            border: '2px solid #cbd5e0',
+                            boxShadow: '0 4px 12px rgba(0,0,0,0.25)',
+                            textAlign: 'center',
                           }}
                         >
                           SWAP
@@ -698,21 +674,20 @@ export function NetworkPlayerIndicator({
                         // Normal state: BLACK
                         <div
                           style={{
-                            width: "100%",
-                            padding: "4px 0",
-                            borderRadius: "12px",
-                            fontSize: "10px",
-                            fontWeight: "800",
-                            letterSpacing: "0.5px",
-                            textTransform: "uppercase",
-                            cursor: "pointer",
-                            transition: "all 0.2s ease",
-                            background:
-                              "linear-gradient(135deg, #2d3748, #1a202c)",
-                            color: "#ffffff",
-                            border: "2px solid #4a5568",
-                            boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-                            textAlign: "center",
+                            width: '100%',
+                            padding: '4px 0',
+                            borderRadius: '12px',
+                            fontSize: '10px',
+                            fontWeight: '800',
+                            letterSpacing: '0.5px',
+                            textTransform: 'uppercase',
+                            cursor: 'pointer',
+                            transition: 'all 0.2s ease',
+                            background: 'linear-gradient(135deg, #2d3748, #1a202c)',
+                            color: '#ffffff',
+                            border: '2px solid #4a5568',
+                            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                            textAlign: 'center',
                           }}
                         >
                           BLACK
@@ -723,19 +698,19 @@ export function NetworkPlayerIndicator({
                     // Guest: show static BLACK label
                     <div
                       style={{
-                        width: "100%",
-                        padding: "4px 0",
-                        borderRadius: "12px",
-                        fontSize: "10px",
-                        fontWeight: "800",
-                        letterSpacing: "0.5px",
-                        textTransform: "uppercase",
-                        cursor: "default",
-                        background: "linear-gradient(135deg, #2d3748, #1a202c)",
-                        color: "#ffffff",
-                        border: "2px solid #4a5568",
-                        boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
-                        textAlign: "center",
+                        width: '100%',
+                        padding: '4px 0',
+                        borderRadius: '12px',
+                        fontSize: '10px',
+                        fontWeight: '800',
+                        letterSpacing: '0.5px',
+                        textTransform: 'uppercase',
+                        cursor: 'default',
+                        background: 'linear-gradient(135deg, #2d3748, #1a202c)',
+                        color: '#ffffff',
+                        border: '2px solid #4a5568',
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                        textAlign: 'center',
                         opacity: 0.8,
                       }}
                     >
@@ -762,5 +737,5 @@ export function NetworkPlayerIndicator({
         />
       )}
     </>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/PendingInvitations.tsx b/apps/web/src/components/nav/PendingInvitations.tsx
index f3bd29c9..be1950dd 100644
--- a/apps/web/src/components/nav/PendingInvitations.tsx
+++ b/apps/web/src/components/nav/PendingInvitations.tsx
@@ -1,185 +1,173 @@
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { useToast } from "@/components/common/ToastContext";
-import { useJoinRoom } from "@/hooks/useRoomData";
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { useToast } from '@/components/common/ToastContext'
+import { useJoinRoom } from '@/hooks/useRoomData'
 
 interface PendingInvitation {
-  id: string;
-  roomId: string;
-  roomName: string;
-  roomGameName: string;
-  invitedBy: string;
-  invitedByName: string;
-  invitationType: "manual" | "auto-unban" | "auto-create";
-  message?: string | null;
-  createdAt: Date;
-  expiresAt?: Date | null;
+  id: string
+  roomId: string
+  roomName: string
+  roomGameName: string
+  invitedBy: string
+  invitedByName: string
+  invitationType: 'manual' | 'auto-unban' | 'auto-create'
+  message?: string | null
+  createdAt: Date
+  expiresAt?: Date | null
 }
 
 export interface PendingInvitationsProps {
   /**
    * Called when invitations change (for refreshing)
    */
-  onInvitationChange?: () => void;
+  onInvitationChange?: () => void
   /**
    * Optional: Room ID to exclude (if user is already in this room)
    */
-  currentRoomId?: string;
+  currentRoomId?: string
 }
 
 /**
  * Displays a list of pending room invitations for the current user
  * Excludes invitations for the room the user is currently in
  */
-export function PendingInvitations({
-  onInvitationChange,
-  currentRoomId,
-}: PendingInvitationsProps) {
-  const router = useRouter();
-  const { showError } = useToast();
-  const [invitations, setInvitations] = useState<PendingInvitation[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState("");
-  const [actionLoading, setActionLoading] = useState<string | null>(null);
-  const { mutateAsync: joinRoom } = useJoinRoom();
+export function PendingInvitations({ onInvitationChange, currentRoomId }: PendingInvitationsProps) {
+  const router = useRouter()
+  const { showError } = useToast()
+  const [invitations, setInvitations] = useState<PendingInvitation[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [actionLoading, setActionLoading] = useState<string | null>(null)
+  const { mutateAsync: joinRoom } = useJoinRoom()
 
   const fetchInvitations = async () => {
     try {
-      const res = await fetch("/api/arcade/invitations/pending");
+      const res = await fetch('/api/arcade/invitations/pending')
       if (res.ok) {
-        const data = await res.json();
-        setInvitations(data.invitations || []);
+        const data = await res.json()
+        setInvitations(data.invitations || [])
       } else {
-        const errorData = await res.json().catch(() => ({}));
-        throw new Error(errorData.error || "Failed to fetch invitations");
+        const errorData = await res.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Failed to fetch invitations')
       }
     } catch (err) {
-      console.error("Failed to fetch invitations:", err);
-      setError(
-        err instanceof Error ? err.message : "Failed to load invitations",
-      );
+      console.error('Failed to fetch invitations:', err)
+      setError(err instanceof Error ? err.message : 'Failed to load invitations')
     } finally {
-      setIsLoading(false);
+      setIsLoading(false)
     }
-  };
+  }
 
   useEffect(() => {
-    fetchInvitations();
-  }, []);
+    fetchInvitations()
+  }, [])
 
   const handleAccept = async (invitation: PendingInvitation) => {
-    setActionLoading(`accept-${invitation.id}`);
+    setActionLoading(`accept-${invitation.id}`)
     try {
       // Join the room
-      await joinRoom({ roomId: invitation.roomId });
+      await joinRoom({ roomId: invitation.roomId })
       // Navigate to the room
-      router.push("/arcade");
+      router.push('/arcade')
       // Refresh invitations
-      await fetchInvitations();
-      onInvitationChange?.();
+      await fetchInvitations()
+      onInvitationChange?.()
     } catch (error) {
-      console.error("Failed to join room:", error);
-      showError(
-        "Failed to join room",
-        error instanceof Error ? error.message : undefined,
-      );
+      console.error('Failed to join room:', error)
+      showError('Failed to join room', error instanceof Error ? error.message : undefined)
     } finally {
-      setActionLoading(null);
+      setActionLoading(null)
     }
-  };
+  }
 
   const handleDecline = async (invitation: PendingInvitation) => {
-    setActionLoading(`decline-${invitation.id}`);
+    setActionLoading(`decline-${invitation.id}`)
     try {
       // Decline the invitation
       const res = await fetch(`/api/arcade/rooms/${invitation.roomId}/invite`, {
-        method: "DELETE",
-        headers: { "Content-Type": "application/json" },
-      });
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+      })
 
       if (!res.ok) {
-        const errorData = await res.json().catch(() => ({}));
-        throw new Error(errorData.error || "Failed to decline invitation");
+        const errorData = await res.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Failed to decline invitation')
       }
 
       // Refresh invitations
-      await fetchInvitations();
-      onInvitationChange?.();
+      await fetchInvitations()
+      onInvitationChange?.()
     } catch (error) {
-      console.error("Failed to decline invitation:", error);
-      showError(
-        "Failed to decline invitation",
-        error instanceof Error ? error.message : undefined,
-      );
+      console.error('Failed to decline invitation:', error)
+      showError('Failed to decline invitation', error instanceof Error ? error.message : undefined)
     } finally {
-      setActionLoading(null);
+      setActionLoading(null)
     }
-  };
+  }
 
   if (isLoading) {
     return (
       <div
         style={{
-          padding: "16px",
-          textAlign: "center",
-          color: "rgba(156, 163, 175, 1)",
-          fontSize: "14px",
+          padding: '16px',
+          textAlign: 'center',
+          color: 'rgba(156, 163, 175, 1)',
+          fontSize: '14px',
         }}
       >
         Loading invitations...
       </div>
-    );
+    )
   }
 
   if (error) {
     return (
       <div
         style={{
-          padding: "16px",
-          textAlign: "center",
-          color: "rgba(239, 68, 68, 1)",
-          fontSize: "14px",
+          padding: '16px',
+          textAlign: 'center',
+          color: 'rgba(239, 68, 68, 1)',
+          fontSize: '14px',
         }}
       >
         {error}
       </div>
-    );
+    )
   }
 
   // Filter out invitations for the current room
   const filteredInvitations = currentRoomId
     ? invitations.filter((inv) => inv.roomId !== currentRoomId)
-    : invitations;
+    : invitations
 
   if (filteredInvitations.length === 0) {
-    return null; // Don't show anything if no invitations
+    return null // Don't show anything if no invitations
   }
 
   return (
     <div
       style={{
-        background:
-          "linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.1))",
-        border: "2px solid rgba(139, 92, 246, 0.4)",
-        borderRadius: "16px",
-        padding: "20px",
-        marginBottom: "24px",
+        background: 'linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.1))',
+        border: '2px solid rgba(139, 92, 246, 0.4)',
+        borderRadius: '16px',
+        padding: '20px',
+        marginBottom: '24px',
       }}
     >
       <div
         style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "8px",
-          marginBottom: "16px",
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          marginBottom: '16px',
         }}
       >
-        <span style={{ fontSize: "24px" }}>✉️</span>
+        <span style={{ fontSize: '24px' }}>✉️</span>
         <h3
           style={{
-            fontSize: "18px",
-            fontWeight: "bold",
-            color: "rgba(196, 181, 253, 1)",
+            fontSize: '18px',
+            fontWeight: 'bold',
+            color: 'rgba(196, 181, 253, 1)',
             margin: 0,
           }}
         >
@@ -187,48 +175,48 @@ export function PendingInvitations({
         </h3>
       </div>
 
-      <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
         {filteredInvitations.map((invitation) => {
-          const isAutoUnban = invitation.invitationType === "auto-unban";
+          const isAutoUnban = invitation.invitationType === 'auto-unban'
           const timeSince = Math.floor(
-            (Date.now() - new Date(invitation.createdAt).getTime()) / 1000 / 60,
-          );
+            (Date.now() - new Date(invitation.createdAt).getTime()) / 1000 / 60
+          )
           const timeText =
             timeSince < 1
-              ? "Just now"
+              ? 'Just now'
               : timeSince < 60
                 ? `${timeSince}m ago`
-                : `${Math.floor(timeSince / 60)}h ago`;
+                : `${Math.floor(timeSince / 60)}h ago`
 
           return (
             <div
               key={invitation.id}
               style={{
-                background: "rgba(0, 0, 0, 0.3)",
-                border: "1px solid rgba(255, 255, 255, 0.1)",
-                borderRadius: "12px",
-                padding: "16px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                gap: "16px",
+                background: 'rgba(0, 0, 0, 0.3)',
+                border: '1px solid rgba(255, 255, 255, 0.1)',
+                borderRadius: '12px',
+                padding: '16px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: '16px',
               }}
             >
               <div style={{ flex: 1 }}>
                 <div
                   style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "8px",
-                    marginBottom: "4px",
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                    marginBottom: '4px',
                   }}
                 >
-                  {isAutoUnban && <span style={{ fontSize: "20px" }}>🎉</span>}
+                  {isAutoUnban && <span style={{ fontSize: '20px' }}>🎉</span>}
                   <h4
                     style={{
-                      fontSize: "16px",
-                      fontWeight: "bold",
-                      color: "white",
+                      fontSize: '16px',
+                      fontWeight: 'bold',
+                      color: 'white',
                       margin: 0,
                     }}
                   >
@@ -237,21 +225,20 @@ export function PendingInvitations({
                 </div>
                 <p
                   style={{
-                    fontSize: "13px",
-                    color: "rgba(209, 213, 219, 0.9)",
-                    margin: "4px 0",
+                    fontSize: '13px',
+                    color: 'rgba(209, 213, 219, 0.9)',
+                    margin: '4px 0',
                   }}
                 >
-                  <strong>{invitation.invitedByName}</strong> invited you •{" "}
-                  {timeText}
+                  <strong>{invitation.invitedByName}</strong> invited you • {timeText}
                 </p>
                 {invitation.message && (
                   <p
                     style={{
-                      fontSize: "12px",
-                      color: "rgba(156, 163, 175, 1)",
-                      margin: "4px 0",
-                      fontStyle: "italic",
+                      fontSize: '12px',
+                      color: 'rgba(156, 163, 175, 1)',
+                      margin: '4px 0',
+                      fontStyle: 'italic',
                     }}
                   >
                     "{invitation.message}"
@@ -259,43 +246,36 @@ export function PendingInvitations({
                 )}
               </div>
 
-              <div style={{ display: "flex", gap: "8px" }}>
+              <div style={{ display: 'flex', gap: '8px' }}>
                 <button
                   type="button"
                   onClick={() => handleDecline(invitation)}
                   disabled={actionLoading === `decline-${invitation.id}`}
                   style={{
-                    padding: "8px 16px",
-                    background: "rgba(75, 85, 99, 0.3)",
-                    color: "rgba(209, 213, 219, 1)",
-                    border: "1px solid rgba(75, 85, 99, 0.5)",
-                    borderRadius: "8px",
-                    fontSize: "13px",
-                    fontWeight: "600",
+                    padding: '8px 16px',
+                    background: 'rgba(75, 85, 99, 0.3)',
+                    color: 'rgba(209, 213, 219, 1)',
+                    border: '1px solid rgba(75, 85, 99, 0.5)',
+                    borderRadius: '8px',
+                    fontSize: '13px',
+                    fontWeight: '600',
                     cursor:
-                      actionLoading === `decline-${invitation.id}`
-                        ? "not-allowed"
-                        : "pointer",
-                    opacity:
-                      actionLoading === `decline-${invitation.id}` ? 0.5 : 1,
-                    transition: "all 0.2s ease",
+                      actionLoading === `decline-${invitation.id}` ? 'not-allowed' : 'pointer',
+                    opacity: actionLoading === `decline-${invitation.id}` ? 0.5 : 1,
+                    transition: 'all 0.2s ease',
                   }}
                   onMouseEnter={(e) => {
                     if (actionLoading !== `decline-${invitation.id}`) {
-                      e.currentTarget.style.background =
-                        "rgba(75, 85, 99, 0.4)";
+                      e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
                     }
                   }}
                   onMouseLeave={(e) => {
                     if (actionLoading !== `decline-${invitation.id}`) {
-                      e.currentTarget.style.background =
-                        "rgba(75, 85, 99, 0.3)";
+                      e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
                     }
                   }}
                 >
-                  {actionLoading === `decline-${invitation.id}`
-                    ? "Declining..."
-                    : "Decline"}
+                  {actionLoading === `decline-${invitation.id}` ? 'Declining...' : 'Decline'}
                 </button>
                 <button
                   type="button"
@@ -305,25 +285,25 @@ export function PendingInvitations({
                     actionLoading === `decline-${invitation.id}`
                   }
                   style={{
-                    padding: "8px 16px",
+                    padding: '8px 16px',
                     background:
-                      "linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))",
-                    color: "white",
-                    border: "1px solid rgba(59, 130, 246, 0.6)",
-                    borderRadius: "8px",
-                    fontSize: "13px",
-                    fontWeight: "600",
+                      'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))',
+                    color: 'white',
+                    border: '1px solid rgba(59, 130, 246, 0.6)',
+                    borderRadius: '8px',
+                    fontSize: '13px',
+                    fontWeight: '600',
                     cursor:
                       actionLoading === `accept-${invitation.id}` ||
                       actionLoading === `decline-${invitation.id}`
-                        ? "not-allowed"
-                        : "pointer",
+                        ? 'not-allowed'
+                        : 'pointer',
                     opacity:
                       actionLoading === `accept-${invitation.id}` ||
                       actionLoading === `decline-${invitation.id}`
                         ? 0.5
                         : 1,
-                    transition: "all 0.2s ease",
+                    transition: 'all 0.2s ease',
                   }}
                   onMouseEnter={(e) => {
                     if (
@@ -331,7 +311,7 @@ export function PendingInvitations({
                       actionLoading !== `decline-${invitation.id}`
                     ) {
                       e.currentTarget.style.background =
-                        "linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9))";
+                        'linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9))'
                     }
                   }}
                   onMouseLeave={(e) => {
@@ -340,19 +320,17 @@ export function PendingInvitations({
                       actionLoading !== `decline-${invitation.id}`
                     ) {
                       e.currentTarget.style.background =
-                        "linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))";
+                        'linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(37, 99, 235, 0.8))'
                     }
                   }}
                 >
-                  {actionLoading === `accept-${invitation.id}`
-                    ? "Joining..."
-                    : "Accept & Join"}
+                  {actionLoading === `accept-${invitation.id}` ? 'Joining...' : 'Accept & Join'}
                 </button>
               </div>
             </div>
-          );
+          )
         })}
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/PlayOnlineTab.tsx b/apps/web/src/components/nav/PlayOnlineTab.tsx
index c005fff9..a3cd8189 100644
--- a/apps/web/src/components/nav/PlayOnlineTab.tsx
+++ b/apps/web/src/components/nav/PlayOnlineTab.tsx
@@ -1,45 +1,42 @@
-import React from "react";
-import { JoinRoomInput } from "./JoinRoomInput";
-import { RecentRoomsList } from "./RecentRoomsList";
+import React from 'react'
+import { JoinRoomInput } from './JoinRoomInput'
+import { RecentRoomsList } from './RecentRoomsList'
 
 interface PlayOnlineTabProps {
-  onCreateRoom: () => void;
-  onJoinRoom: (code: string) => void;
+  onCreateRoom: () => void
+  onJoinRoom: (code: string) => void
 }
 
-export function PlayOnlineTab({
-  onCreateRoom,
-  onJoinRoom,
-}: PlayOnlineTabProps) {
-  const [isCreating, setIsCreating] = React.useState(false);
+export function PlayOnlineTab({ onCreateRoom, onJoinRoom }: PlayOnlineTabProps) {
+  const [isCreating, setIsCreating] = React.useState(false)
 
   const handleCreateRoom = async () => {
-    setIsCreating(true);
+    setIsCreating(true)
     try {
-      await onCreateRoom();
+      await onCreateRoom()
     } finally {
-      setIsCreating(false);
+      setIsCreating(false)
     }
-  };
+  }
 
   return (
     <div
       style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "16px",
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '16px',
       }}
     >
       {/* Quick Create Section */}
       <div>
         <div
           style={{
-            fontSize: "11px",
-            fontWeight: "600",
-            color: "#6b7280",
-            textTransform: "uppercase",
-            letterSpacing: "0.5px",
-            marginBottom: "8px",
+            fontSize: '11px',
+            fontWeight: '600',
+            color: '#6b7280',
+            textTransform: 'uppercase',
+            letterSpacing: '0.5px',
+            marginBottom: '8px',
           }}
         >
           🆕 Start Playing
@@ -49,42 +46,38 @@ export function PlayOnlineTab({
           onClick={handleCreateRoom}
           disabled={isCreating}
           style={{
-            width: "100%",
-            padding: "12px 16px",
-            background: isCreating
-              ? "#d1d5db"
-              : "linear-gradient(135deg, #10b981, #059669)",
-            border: "none",
-            borderRadius: "8px",
-            color: "white",
-            fontSize: "14px",
-            fontWeight: "600",
-            cursor: isCreating ? "not-allowed" : "pointer",
-            transition: "all 0.2s ease",
-            boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+            width: '100%',
+            padding: '12px 16px',
+            background: isCreating ? '#d1d5db' : 'linear-gradient(135deg, #10b981, #059669)',
+            border: 'none',
+            borderRadius: '8px',
+            color: 'white',
+            fontSize: '14px',
+            fontWeight: '600',
+            cursor: isCreating ? 'not-allowed' : 'pointer',
+            transition: 'all 0.2s ease',
+            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
           }}
           onMouseEnter={(e) => {
             if (!isCreating) {
-              e.currentTarget.style.transform = "translateY(-1px)";
-              e.currentTarget.style.boxShadow =
-                "0 4px 8px rgba(16, 185, 129, 0.3)";
+              e.currentTarget.style.transform = 'translateY(-1px)'
+              e.currentTarget.style.boxShadow = '0 4px 8px rgba(16, 185, 129, 0.3)'
             }
           }}
           onMouseLeave={(e) => {
-            e.currentTarget.style.transform = "translateY(0)";
-            e.currentTarget.style.boxShadow = "0 2px 4px rgba(0, 0, 0, 0.1)";
+            e.currentTarget.style.transform = 'translateY(0)'
+            e.currentTarget.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)'
           }}
         >
-          {isCreating ? "⏳ Creating..." : "🚀 Create New Room"}
+          {isCreating ? '⏳ Creating...' : '🚀 Create New Room'}
         </button>
       </div>
 
       {/* Divider */}
       <div
         style={{
-          height: "1px",
-          background:
-            "linear-gradient(90deg, transparent, #e5e7eb, transparent)",
+          height: '1px',
+          background: 'linear-gradient(90deg, transparent, #e5e7eb, transparent)',
         }}
       />
 
@@ -92,12 +85,12 @@ export function PlayOnlineTab({
       <div>
         <div
           style={{
-            fontSize: "11px",
-            fontWeight: "600",
-            color: "#6b7280",
-            textTransform: "uppercase",
-            letterSpacing: "0.5px",
-            marginBottom: "8px",
+            fontSize: '11px',
+            fontWeight: '600',
+            color: '#6b7280',
+            textTransform: 'uppercase',
+            letterSpacing: '0.5px',
+            marginBottom: '8px',
           }}
         >
           🚪 Join Room
@@ -108,5 +101,5 @@ export function PlayOnlineTab({
       {/* Recent Rooms Section */}
       <RecentRoomsList onSelectRoom={onJoinRoom} />
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/PlayerConfigDialog.tsx b/apps/web/src/components/nav/PlayerConfigDialog.tsx
index 2570b549..b135339f 100644
--- a/apps/web/src/components/nav/PlayerConfigDialog.tsx
+++ b/apps/web/src/components/nav/PlayerConfigDialog.tsx
@@ -1,89 +1,84 @@
-import { useEffect, useRef, useState } from "react";
-import { EmojiPicker } from "@/arcade-games/matching/components/EmojiPicker";
-import { useGameMode } from "../../contexts/GameModeContext";
-import { generateUniquePlayerName } from "../../utils/playerNames";
+import { useEffect, useRef, useState } from 'react'
+import { EmojiPicker } from '@/arcade-games/matching/components/EmojiPicker'
+import { useGameMode } from '../../contexts/GameModeContext'
+import { generateUniquePlayerName } from '../../utils/playerNames'
 
 interface PlayerConfigDialogProps {
-  playerId: string;
-  onClose: () => void;
+  playerId: string
+  onClose: () => void
 }
 
-export function PlayerConfigDialog({
-  playerId,
-  onClose,
-}: PlayerConfigDialogProps) {
+export function PlayerConfigDialog({ playerId, onClose }: PlayerConfigDialogProps) {
   // All hooks must be called before early return
-  const { getPlayer, updatePlayer, players } = useGameMode();
-  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-  const [localName, setLocalName] = useState("");
-  const [isSaving, setIsSaving] = useState(false);
-  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const { getPlayer, updatePlayer, players } = useGameMode()
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
+  const [localName, setLocalName] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null)
 
-  const player = getPlayer(playerId);
+  const player = getPlayer(playerId)
 
   // Initialize local name from player
   useEffect(() => {
     if (player) {
-      setLocalName(player.name);
+      setLocalName(player.name)
     }
-  }, [player]);
+  }, [player])
 
   if (!player) {
-    return null;
+    return null
   }
 
   const handleNameChange = (newName: string) => {
-    setLocalName(newName);
+    setLocalName(newName)
 
     // Debounce the update to avoid too many API calls
     if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
+      clearTimeout(debounceTimerRef.current)
     }
 
-    setIsSaving(true);
+    setIsSaving(true)
     debounceTimerRef.current = setTimeout(() => {
-      updatePlayer(playerId, { name: newName });
-      setIsSaving(false);
-    }, 500); // Wait 500ms after user stops typing
-  };
+      updatePlayer(playerId, { name: newName })
+      setIsSaving(false)
+    }, 500) // Wait 500ms after user stops typing
+  }
 
   const handleEmojiSelect = (emoji: string) => {
-    updatePlayer(playerId, { emoji });
-    setShowEmojiPicker(false);
-  };
+    updatePlayer(playerId, { emoji })
+    setShowEmojiPicker(false)
+  }
 
   const handleGenerateNewName = () => {
-    const allPlayers = Array.from(players.values());
-    const existingNames = allPlayers
-      .filter((p) => p.id !== playerId)
-      .map((p) => p.name);
-    const newName = generateUniquePlayerName(existingNames, player.emoji);
+    const allPlayers = Array.from(players.values())
+    const existingNames = allPlayers.filter((p) => p.id !== playerId).map((p) => p.name)
+    const newName = generateUniquePlayerName(existingNames, player.emoji)
 
-    setLocalName(newName);
-    updatePlayer(playerId, { name: newName });
-  };
+    setLocalName(newName)
+    updatePlayer(playerId, { name: newName })
+  }
 
   // Get player number for UI theming (first 4 players get special colors)
   const allPlayers = Array.from(players.values()).sort((a, b) => {
     const aTime =
-      typeof a.createdAt === "number"
+      typeof a.createdAt === 'number'
         ? a.createdAt
         : a.createdAt instanceof Date
           ? a.createdAt.getTime()
-          : 0;
+          : 0
     const bTime =
-      typeof b.createdAt === "number"
+      typeof b.createdAt === 'number'
         ? b.createdAt
         : b.createdAt instanceof Date
           ? b.createdAt.getTime()
-          : 0;
-    return aTime - bTime;
-  });
-  const playerIndex = allPlayers.findIndex((p) => p.id === playerId);
-  const displayNumber = playerIndex + 1;
+          : 0
+    return aTime - bTime
+  })
+  const playerIndex = allPlayers.findIndex((p) => p.id === playerId)
+  const displayNumber = playerIndex + 1
 
   // Color based on player's actual color
-  const gradientColor = player.color;
+  const gradientColor = player.color
 
   if (showEmojiPicker) {
     return (
@@ -93,98 +88,98 @@ export function PlayerConfigDialog({
         onClose={() => setShowEmojiPicker(false)}
         playerNumber={displayNumber}
       />
-    );
+    )
   }
 
   return (
     <div
       style={{
-        position: "fixed",
+        position: 'fixed',
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        background: "rgba(0, 0, 0, 0.7)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        background: 'rgba(0, 0, 0, 0.7)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
         zIndex: 1000,
-        padding: "20px",
-        animation: "fadeIn 0.2s ease",
+        padding: '20px',
+        animation: 'fadeIn 0.2s ease',
       }}
     >
       <div
         style={{
-          background: "white",
-          borderRadius: "20px",
-          padding: "32px",
-          maxWidth: "400px",
-          width: "100%",
-          boxShadow: "0 20px 40px rgba(0, 0, 0, 0.3)",
-          position: "relative",
+          background: 'white',
+          borderRadius: '20px',
+          padding: '32px',
+          maxWidth: '400px',
+          width: '100%',
+          boxShadow: '0 20px 40px rgba(0, 0, 0, 0.3)',
+          position: 'relative',
         }}
       >
         {/* Header */}
         <div
           style={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "flex-start",
-            marginBottom: "24px",
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'flex-start',
+            marginBottom: '24px',
           }}
         >
           <div>
             <h2
               style={{
-                fontSize: "24px",
-                fontWeight: "bold",
+                fontSize: '24px',
+                fontWeight: 'bold',
                 background: `linear-gradient(135deg, ${gradientColor}, ${gradientColor}dd)`,
-                backgroundClip: "text",
-                color: "transparent",
+                backgroundClip: 'text',
+                color: 'transparent',
                 margin: 0,
-                marginBottom: "4px",
+                marginBottom: '4px',
               }}
             >
               Player Settings
             </h2>
             <div
               style={{
-                fontSize: "12px",
-                color: isSaving ? "#f59e0b" : "#10b981",
-                fontWeight: "500",
+                fontSize: '12px',
+                color: isSaving ? '#f59e0b' : '#10b981',
+                fontWeight: '500',
                 opacity: 0.8,
               }}
             >
-              {isSaving ? "💾 Saving..." : "✓ Changes saved automatically"}
+              {isSaving ? '💾 Saving...' : '✓ Changes saved automatically'}
             </div>
           </div>
           <button
             onClick={onClose}
             style={{
-              background: "none",
-              border: "none",
-              fontSize: "24px",
-              cursor: "pointer",
-              color: "#6b7280",
-              padding: "4px",
+              background: 'none',
+              border: 'none',
+              fontSize: '24px',
+              cursor: 'pointer',
+              color: '#6b7280',
+              padding: '4px',
               lineHeight: 1,
             }}
-            onMouseEnter={(e) => (e.currentTarget.style.color = "#1f2937")}
-            onMouseLeave={(e) => (e.currentTarget.style.color = "#6b7280")}
+            onMouseEnter={(e) => (e.currentTarget.style.color = '#1f2937')}
+            onMouseLeave={(e) => (e.currentTarget.style.color = '#6b7280')}
           >
             ✕
           </button>
         </div>
 
         {/* Emoji Selection */}
-        <div style={{ marginBottom: "24px" }}>
+        <div style={{ marginBottom: '24px' }}>
           <label
             style={{
-              display: "block",
-              fontSize: "14px",
-              fontWeight: "600",
-              color: "#374151",
-              marginBottom: "8px",
+              display: 'block',
+              fontSize: '14px',
+              fontWeight: '600',
+              color: '#374151',
+              marginBottom: '8px',
             }}
           >
             Character
@@ -192,31 +187,31 @@ export function PlayerConfigDialog({
           <button
             onClick={() => setShowEmojiPicker(true)}
             style={{
-              width: "100%",
-              padding: "16px",
-              background: "linear-gradient(135deg, #f9fafb, #f3f4f6)",
-              border: "2px solid #e5e7eb",
-              borderRadius: "12px",
-              cursor: "pointer",
-              transition: "all 0.2s ease",
-              display: "flex",
-              alignItems: "center",
-              gap: "12px",
+              width: '100%',
+              padding: '16px',
+              background: 'linear-gradient(135deg, #f9fafb, #f3f4f6)',
+              border: '2px solid #e5e7eb',
+              borderRadius: '12px',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '12px',
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.borderColor = gradientColor;
-              e.currentTarget.style.transform = "translateY(-2px)";
-              e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.1)";
+              e.currentTarget.style.borderColor = gradientColor
+              e.currentTarget.style.transform = 'translateY(-2px)'
+              e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)'
             }}
             onMouseLeave={(e) => {
-              e.currentTarget.style.borderColor = "#e5e7eb";
-              e.currentTarget.style.transform = "translateY(0)";
-              e.currentTarget.style.boxShadow = "none";
+              e.currentTarget.style.borderColor = '#e5e7eb'
+              e.currentTarget.style.transform = 'translateY(0)'
+              e.currentTarget.style.boxShadow = 'none'
             }}
           >
             <div
               style={{
-                fontSize: "48px",
+                fontSize: '48px',
                 lineHeight: 1,
               }}
             >
@@ -225,23 +220,23 @@ export function PlayerConfigDialog({
             <div
               style={{
                 flex: 1,
-                textAlign: "left",
+                textAlign: 'left',
               }}
             >
               <div
                 style={{
-                  fontSize: "14px",
-                  fontWeight: "600",
-                  color: "#1f2937",
-                  marginBottom: "4px",
+                  fontSize: '14px',
+                  fontWeight: '600',
+                  color: '#1f2937',
+                  marginBottom: '4px',
                 }}
               >
                 Click to change character
               </div>
               <div
                 style={{
-                  fontSize: "12px",
-                  color: "#6b7280",
+                  fontSize: '12px',
+                  color: '#6b7280',
                 }}
               >
                 Choose from hundreds of emojis
@@ -249,8 +244,8 @@ export function PlayerConfigDialog({
             </div>
             <div
               style={{
-                fontSize: "20px",
-                color: "#9ca3af",
+                fontSize: '20px',
+                color: '#9ca3af',
               }}
             >
               →
@@ -262,20 +257,20 @@ export function PlayerConfigDialog({
         <div>
           <label
             style={{
-              display: "block",
-              fontSize: "14px",
-              fontWeight: "600",
-              color: "#374151",
-              marginBottom: "8px",
+              display: 'block',
+              fontSize: '14px',
+              fontWeight: '600',
+              color: '#374151',
+              marginBottom: '8px',
             }}
           >
             Name
           </label>
           <div
             style={{
-              display: "flex",
-              gap: "8px",
-              alignItems: "flex-start",
+              display: 'flex',
+              gap: '8px',
+              alignItems: 'flex-start',
             }}
           >
             <div style={{ flex: 1 }}>
@@ -286,29 +281,29 @@ export function PlayerConfigDialog({
                 placeholder="Player Name"
                 maxLength={20}
                 style={{
-                  width: "100%",
-                  padding: "12px 16px",
-                  fontSize: "16px",
-                  border: "2px solid #e5e7eb",
-                  borderRadius: "12px",
-                  outline: "none",
-                  transition: "all 0.2s ease",
-                  fontWeight: "500",
+                  width: '100%',
+                  padding: '12px 16px',
+                  fontSize: '16px',
+                  border: '2px solid #e5e7eb',
+                  borderRadius: '12px',
+                  outline: 'none',
+                  transition: 'all 0.2s ease',
+                  fontWeight: '500',
                 }}
                 onFocus={(e) => {
-                  e.currentTarget.style.borderColor = gradientColor;
-                  e.currentTarget.style.boxShadow = `0 0 0 3px ${gradientColor}20`;
+                  e.currentTarget.style.borderColor = gradientColor
+                  e.currentTarget.style.boxShadow = `0 0 0 3px ${gradientColor}20`
                 }}
                 onBlur={(e) => {
-                  e.currentTarget.style.borderColor = "#e5e7eb";
-                  e.currentTarget.style.boxShadow = "none";
+                  e.currentTarget.style.borderColor = '#e5e7eb'
+                  e.currentTarget.style.boxShadow = 'none'
                 }}
               />
               <div
                 style={{
-                  fontSize: "12px",
-                  color: "#6b7280",
-                  marginTop: "6px",
+                  fontSize: '12px',
+                  color: '#6b7280',
+                  marginTop: '6px',
                 }}
               >
                 {localName.length}/20 characters
@@ -319,25 +314,25 @@ export function PlayerConfigDialog({
                 type="button"
                 onClick={handleGenerateNewName}
                 style={{
-                  padding: "12px 16px",
+                  padding: '12px 16px',
                   background: `linear-gradient(135deg, ${gradientColor}, ${gradientColor}dd)`,
-                  border: "none",
-                  borderRadius: "12px",
-                  color: "white",
-                  fontSize: "20px",
-                  cursor: "pointer",
-                  transition: "all 0.2s ease",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
+                  border: 'none',
+                  borderRadius: '12px',
+                  color: 'white',
+                  fontSize: '20px',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s ease',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
                 }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.transform = "scale(1.05)";
-                  e.currentTarget.style.boxShadow = `0 4px 12px ${gradientColor}40`;
+                  e.currentTarget.style.transform = 'scale(1.05)'
+                  e.currentTarget.style.boxShadow = `0 4px 12px ${gradientColor}40`
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.transform = "scale(1)";
-                  e.currentTarget.style.boxShadow = "none";
+                  e.currentTarget.style.transform = 'scale(1)'
+                  e.currentTarget.style.boxShadow = 'none'
                 }}
                 title="Generate random name"
               >
@@ -345,10 +340,10 @@ export function PlayerConfigDialog({
               </button>
               <div
                 style={{
-                  fontSize: "12px",
-                  color: "#6b7280",
-                  marginTop: "6px",
-                  textAlign: "center",
+                  fontSize: '12px',
+                  color: '#6b7280',
+                  marginTop: '6px',
+                  textAlign: 'center',
                 }}
               >
                 Random name
@@ -358,5 +353,5 @@ export function PlayerConfigDialog({
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/PlayerTooltip.tsx b/apps/web/src/components/nav/PlayerTooltip.tsx
index a85c8d9a..43712085 100644
--- a/apps/web/src/components/nav/PlayerTooltip.tsx
+++ b/apps/web/src/components/nav/PlayerTooltip.tsx
@@ -1,16 +1,16 @@
-import * as Tooltip from "@radix-ui/react-tooltip";
-import { useState } from "react";
-import type React from "react";
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { useState } from 'react'
+import type React from 'react'
 
 interface PlayerTooltipProps {
-  children: React.ReactNode;
-  playerName: string;
-  playerColor?: string;
-  isLocal?: boolean;
-  createdAt?: Date | number;
-  extraInfo?: string;
-  canReport?: boolean;
-  onReport?: () => void;
+  children: React.ReactNode
+  playerName: string
+  playerColor?: string
+  isLocal?: boolean
+  createdAt?: Date | number
+  extraInfo?: string
+  canReport?: boolean
+  onReport?: () => void
 }
 
 /**
@@ -27,29 +27,29 @@ export function PlayerTooltip({
   canReport = false,
   onReport,
 }: PlayerTooltipProps) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false)
   // Format creation time
   const getCreatedTimeAgo = () => {
-    if (!createdAt) return null;
+    if (!createdAt) return null
 
-    const now = Date.now();
+    const now = Date.now()
     const created =
-      typeof createdAt === "number"
+      typeof createdAt === 'number'
         ? createdAt
         : createdAt instanceof Date
           ? createdAt.getTime()
-          : 0;
-    const diff = now - created;
+          : 0
+    const diff = now - created
 
-    const minutes = Math.floor(diff / 60000);
-    const hours = Math.floor(diff / 3600000);
-    const days = Math.floor(diff / 86400000);
+    const minutes = Math.floor(diff / 60000)
+    const hours = Math.floor(diff / 3600000)
+    const days = Math.floor(diff / 86400000)
 
-    if (days > 0) return `${days}d ago`;
-    if (hours > 0) return `${hours}h ago`;
-    if (minutes > 0) return `${minutes}m ago`;
-    return "just now";
-  };
+    if (days > 0) return `${days}d ago`
+    if (hours > 0) return `${hours}h ago`
+    if (minutes > 0) return `${minutes}m ago`
+    return 'just now'
+  }
 
   return (
     <Tooltip.Provider delayDuration={200}>
@@ -60,33 +60,31 @@ export function PlayerTooltip({
             side="bottom"
             sideOffset={8}
             style={{
-              background:
-                "linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))",
-              backdropFilter: "blur(8px)",
-              borderRadius: "12px",
-              padding: "12px 16px",
-              boxShadow:
-                "0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1)",
-              maxWidth: "280px",
+              background: 'linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))',
+              backdropFilter: 'blur(8px)',
+              borderRadius: '12px',
+              padding: '12px 16px',
+              boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1)',
+              maxWidth: '280px',
               zIndex: 9999,
-              animation: "tooltipFadeIn 0.2s ease-out",
+              animation: 'tooltipFadeIn 0.2s ease-out',
             }}
           >
             {/* Player name with color accent */}
             <div
               style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                marginBottom: "8px",
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                marginBottom: '8px',
               }}
             >
               {playerColor && (
                 <div
                   style={{
-                    width: "12px",
-                    height: "12px",
-                    borderRadius: "50%",
+                    width: '12px',
+                    height: '12px',
+                    borderRadius: '50%',
                     background: playerColor,
                     boxShadow: `0 0 8px ${playerColor}50`,
                     flexShrink: 0,
@@ -95,9 +93,9 @@ export function PlayerTooltip({
               )}
               <div
                 style={{
-                  fontSize: "15px",
-                  fontWeight: "600",
-                  color: "white",
+                  fontSize: '15px',
+                  fontWeight: '600',
+                  color: 'white',
                   lineHeight: 1.3,
                 }}
               >
@@ -108,43 +106,37 @@ export function PlayerTooltip({
             {/* Player type badge */}
             <div
               style={{
-                display: "inline-flex",
-                alignItems: "center",
-                gap: "4px",
-                padding: "4px 8px",
-                borderRadius: "6px",
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '4px',
+                padding: '4px 8px',
+                borderRadius: '6px',
                 background: isLocal
-                  ? "rgba(16, 185, 129, 0.15)"
-                  : "linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.15))",
-                border: `1px solid ${isLocal ? "rgba(16, 185, 129, 0.3)" : "rgba(147, 51, 234, 0.3)"}`,
-                fontSize: "11px",
-                fontWeight: "600",
-                color: isLocal
-                  ? "rgba(167, 243, 208, 1)"
-                  : "rgba(196, 181, 253, 1)",
-                marginBottom: extraInfo || createdAt ? "8px" : 0,
+                  ? 'rgba(16, 185, 129, 0.15)'
+                  : 'linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 51, 234, 0.15))',
+                border: `1px solid ${isLocal ? 'rgba(16, 185, 129, 0.3)' : 'rgba(147, 51, 234, 0.3)'}`,
+                fontSize: '11px',
+                fontWeight: '600',
+                color: isLocal ? 'rgba(167, 243, 208, 1)' : 'rgba(196, 181, 253, 1)',
+                marginBottom: extraInfo || createdAt ? '8px' : 0,
               }}
             >
-              <span style={{ fontSize: "10px" }}>{isLocal ? "●" : "📡"}</span>
-              {isLocal ? "Your Player" : "Network Player"}
+              <span style={{ fontSize: '10px' }}>{isLocal ? '●' : '📡'}</span>
+              {isLocal ? 'Your Player' : 'Network Player'}
             </div>
 
             {/* Additional info */}
             {(extraInfo || createdAt) && (
               <div
                 style={{
-                  fontSize: "12px",
-                  color: "rgba(209, 213, 219, 0.9)",
+                  fontSize: '12px',
+                  color: 'rgba(209, 213, 219, 0.9)',
                   lineHeight: 1.4,
-                  marginTop: "4px",
+                  marginTop: '4px',
                 }}
               >
                 {extraInfo && <div>{extraInfo}</div>}
-                {createdAt && (
-                  <div style={{ opacity: 0.7 }}>
-                    Joined {getCreatedTimeAgo()}
-                  </div>
-                )}
+                {createdAt && <div style={{ opacity: 0.7 }}>Joined {getCreatedTimeAgo()}</div>}
               </div>
             )}
 
@@ -153,36 +145,36 @@ export function PlayerTooltip({
               <button
                 type="button"
                 onClick={(e) => {
-                  e.stopPropagation();
-                  setOpen(false);
-                  onReport();
+                  e.stopPropagation()
+                  setOpen(false)
+                  onReport()
                 }}
                 style={{
-                  width: "100%",
-                  marginTop: "12px",
-                  padding: "8px 12px",
-                  background: "rgba(239, 68, 68, 0.1)",
-                  border: "1px solid rgba(239, 68, 68, 0.3)",
-                  borderRadius: "8px",
-                  fontSize: "13px",
-                  fontWeight: "600",
-                  color: "rgba(248, 113, 113, 1)",
-                  cursor: "pointer",
-                  transition: "all 0.2s ease",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  gap: "6px",
+                  width: '100%',
+                  marginTop: '12px',
+                  padding: '8px 12px',
+                  background: 'rgba(239, 68, 68, 0.1)',
+                  border: '1px solid rgba(239, 68, 68, 0.3)',
+                  borderRadius: '8px',
+                  fontSize: '13px',
+                  fontWeight: '600',
+                  color: 'rgba(248, 113, 113, 1)',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s ease',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: '6px',
                 }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.background = "rgba(239, 68, 68, 0.2)";
-                  e.currentTarget.style.borderColor = "rgba(239, 68, 68, 0.5)";
-                  e.currentTarget.style.color = "rgba(252, 165, 165, 1)";
+                  e.currentTarget.style.background = 'rgba(239, 68, 68, 0.2)'
+                  e.currentTarget.style.borderColor = 'rgba(239, 68, 68, 0.5)'
+                  e.currentTarget.style.color = 'rgba(252, 165, 165, 1)'
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.background = "rgba(239, 68, 68, 0.1)";
-                  e.currentTarget.style.borderColor = "rgba(239, 68, 68, 0.3)";
-                  e.currentTarget.style.color = "rgba(248, 113, 113, 1)";
+                  e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)'
+                  e.currentTarget.style.borderColor = 'rgba(239, 68, 68, 0.3)'
+                  e.currentTarget.style.color = 'rgba(248, 113, 113, 1)'
                 }}
               >
                 <span>🚩</span>
@@ -192,7 +184,7 @@ export function PlayerTooltip({
 
             <Tooltip.Arrow
               style={{
-                fill: "rgba(17, 24, 39, 0.97)",
+                fill: 'rgba(17, 24, 39, 0.97)',
               }}
             />
           </Tooltip.Content>
@@ -216,5 +208,5 @@ export function PlayerTooltip({
         }}
       />
     </Tooltip.Provider>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/RecentRoomsList.tsx b/apps/web/src/components/nav/RecentRoomsList.tsx
index e87d6746..12fcbdb3 100644
--- a/apps/web/src/components/nav/RecentRoomsList.tsx
+++ b/apps/web/src/components/nav/RecentRoomsList.tsx
@@ -1,59 +1,59 @@
-import React from "react";
-import { getRoomDisplayWithEmoji } from "@/utils/room-display";
+import React from 'react'
+import { getRoomDisplayWithEmoji } from '@/utils/room-display'
 
 interface RecentRoom {
-  code: string;
-  name: string | null;
-  gameName: string | null;
-  joinedAt: number;
+  code: string
+  name: string | null
+  gameName: string | null
+  joinedAt: number
 }
 
 interface RecentRoomsListProps {
-  onSelectRoom: (code: string) => void;
+  onSelectRoom: (code: string) => void
 }
 
-const STORAGE_KEY = "arcade_recent_rooms";
-const MAX_RECENT_ROOMS = 3;
+const STORAGE_KEY = 'arcade_recent_rooms'
+const MAX_RECENT_ROOMS = 3
 
 export function RecentRoomsList({ onSelectRoom }: RecentRoomsListProps) {
-  const [recentRooms, setRecentRooms] = React.useState<RecentRoom[]>([]);
+  const [recentRooms, setRecentRooms] = React.useState<RecentRoom[]>([])
 
   // Load recent rooms from localStorage
   React.useEffect(() => {
     try {
-      const stored = localStorage.getItem(STORAGE_KEY);
+      const stored = localStorage.getItem(STORAGE_KEY)
       if (stored) {
-        const rooms: RecentRoom[] = JSON.parse(stored);
-        setRecentRooms(rooms.slice(0, MAX_RECENT_ROOMS));
+        const rooms: RecentRoom[] = JSON.parse(stored)
+        setRecentRooms(rooms.slice(0, MAX_RECENT_ROOMS))
       }
     } catch (err) {
-      console.error("Failed to load recent rooms:", err);
+      console.error('Failed to load recent rooms:', err)
     }
-  }, []);
+  }, [])
 
   const formatTimeAgo = (timestamp: number): string => {
-    const seconds = Math.floor((Date.now() - timestamp) / 1000);
+    const seconds = Math.floor((Date.now() - timestamp) / 1000)
 
-    if (seconds < 60) return "just now";
-    if (seconds < 3600) return `${Math.floor(seconds / 60)} min ago`;
-    if (seconds < 86400) return `${Math.floor(seconds / 3600)} hours ago`;
-    return `${Math.floor(seconds / 86400)} days ago`;
-  };
+    if (seconds < 60) return 'just now'
+    if (seconds < 3600) return `${Math.floor(seconds / 60)} min ago`
+    if (seconds < 86400) return `${Math.floor(seconds / 3600)} hours ago`
+    return `${Math.floor(seconds / 86400)} days ago`
+  }
 
   if (recentRooms.length === 0) {
-    return null;
+    return null
   }
 
   return (
     <div>
       <div
         style={{
-          fontSize: "11px",
-          fontWeight: "600",
-          color: "#6b7280",
-          textTransform: "uppercase",
-          letterSpacing: "0.5px",
-          marginBottom: "8px",
+          fontSize: '11px',
+          fontWeight: '600',
+          color: '#6b7280',
+          textTransform: 'uppercase',
+          letterSpacing: '0.5px',
+          marginBottom: '8px',
         }}
       >
         ⏱️ Recent Rooms
@@ -61,9 +61,9 @@ export function RecentRoomsList({ onSelectRoom }: RecentRoomsListProps) {
 
       <div
         style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "6px",
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '6px',
         }}
       >
         {recentRooms.map((room) => (
@@ -72,32 +72,32 @@ export function RecentRoomsList({ onSelectRoom }: RecentRoomsListProps) {
             type="button"
             onClick={() => onSelectRoom(room.code)}
             style={{
-              padding: "10px 12px",
-              background: "transparent",
-              border: "1px solid #e5e7eb",
-              borderRadius: "8px",
-              textAlign: "left",
-              cursor: "pointer",
-              transition: "all 0.2s ease",
+              padding: '10px 12px',
+              background: 'transparent',
+              border: '1px solid #e5e7eb',
+              borderRadius: '8px',
+              textAlign: 'left',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
             }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.background = "#f9fafb";
-              e.currentTarget.style.borderColor = "#d1d5db";
+              e.currentTarget.style.background = '#f9fafb'
+              e.currentTarget.style.borderColor = '#d1d5db'
             }}
             onMouseLeave={(e) => {
-              e.currentTarget.style.background = "transparent";
-              e.currentTarget.style.borderColor = "#e5e7eb";
+              e.currentTarget.style.background = 'transparent'
+              e.currentTarget.style.borderColor = '#e5e7eb'
             }}
           >
             <div
               style={{
-                fontSize: "14px",
-                fontWeight: "600",
-                color: "#1f2937",
-                marginBottom: "4px",
-                display: "flex",
-                alignItems: "center",
-                gap: "6px",
+                fontSize: '14px',
+                fontWeight: '600',
+                color: '#1f2937',
+                marginBottom: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '6px',
               }}
             >
               <span>🏟️</span>
@@ -111,16 +111,14 @@ export function RecentRoomsList({ onSelectRoom }: RecentRoomsListProps) {
             </div>
             <div
               style={{
-                fontSize: "12px",
-                color: "#6b7280",
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
+                fontSize: '12px',
+                color: '#6b7280',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
               }}
             >
-              <span style={{ fontFamily: "monospace", fontWeight: "600" }}>
-                {room.code}
-              </span>
+              <span style={{ fontFamily: 'monospace', fontWeight: '600' }}>{room.code}</span>
               <span>·</span>
               <span>{formatTimeAgo(room.joinedAt)}</span>
             </div>
@@ -128,21 +126,21 @@ export function RecentRoomsList({ onSelectRoom }: RecentRoomsListProps) {
         ))}
       </div>
     </div>
-  );
+  )
 }
 
 // Helper function to add a room to recent rooms
 export function addToRecentRooms(room: {
-  code: string;
-  name: string | null;
-  gameName: string | null;
+  code: string
+  name: string | null
+  gameName: string | null
 }): void {
   try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    const rooms: RecentRoom[] = stored ? JSON.parse(stored) : [];
+    const stored = localStorage.getItem(STORAGE_KEY)
+    const rooms: RecentRoom[] = stored ? JSON.parse(stored) : []
 
     // Remove if already exists (to update timestamp)
-    const filtered = rooms.filter((r) => r.code !== room.code);
+    const filtered = rooms.filter((r) => r.code !== room.code)
 
     // Add to front
     const updated = [
@@ -151,10 +149,10 @@ export function addToRecentRooms(room: {
         joinedAt: Date.now(),
       },
       ...filtered,
-    ].slice(0, MAX_RECENT_ROOMS);
+    ].slice(0, MAX_RECENT_ROOMS)
 
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(updated))
   } catch (err) {
-    console.error("Failed to save recent room:", err);
+    console.error('Failed to save recent room:', err)
   }
 }
diff --git a/apps/web/src/components/nav/ReportPlayerModal.tsx b/apps/web/src/components/nav/ReportPlayerModal.tsx
index d5171ebc..fb80768f 100644
--- a/apps/web/src/components/nav/ReportPlayerModal.tsx
+++ b/apps/web/src/components/nav/ReportPlayerModal.tsx
@@ -1,44 +1,44 @@
-import { useState } from "react";
-import { Modal } from "@/components/common/Modal";
+import { useState } from 'react'
+import { Modal } from '@/components/common/Modal'
 
 export interface ReportPlayerModalProps {
   /**
    * Whether the modal is open
    */
-  isOpen: boolean;
+  isOpen: boolean
 
   /**
    * Callback when modal should close
    */
-  onClose: () => void;
+  onClose: () => void
 
   /**
    * The room ID
    */
-  roomId: string;
+  roomId: string
 
   /**
    * The user being reported
    */
   reportedUser: {
-    id: string;
-    name: string;
-  };
+    id: string
+    name: string
+  }
 
   /**
    * Optional callback when report is successfully submitted
    */
-  onSuccess?: () => void;
+  onSuccess?: () => void
 }
 
 const REPORT_REASONS = [
-  { value: "harassment", label: "Harassment or bullying" },
-  { value: "cheating", label: "Cheating or exploiting" },
-  { value: "inappropriate-name", label: "Inappropriate name" },
-  { value: "spam", label: "Spamming" },
-  { value: "afk", label: "Away from keyboard (AFK)" },
-  { value: "other", label: "Other" },
-] as const;
+  { value: 'harassment', label: 'Harassment or bullying' },
+  { value: 'cheating', label: 'Cheating or exploiting' },
+  { value: 'inappropriate-name', label: 'Inappropriate name' },
+  { value: 'spam', label: 'Spamming' },
+  { value: 'afk', label: 'Away from keyboard (AFK)' },
+  { value: 'other', label: 'Other' },
+] as const
 
 /**
  * Modal for reporting a player to the host
@@ -50,121 +50,121 @@ export function ReportPlayerModal({
   reportedUser,
   onSuccess,
 }: ReportPlayerModalProps) {
-  const [reason, setReason] = useState<string>("");
-  const [details, setDetails] = useState("");
-  const [error, setError] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSuccess, setIsSuccess] = useState(false);
+  const [reason, setReason] = useState<string>('')
+  const [details, setDetails] = useState('')
+  const [error, setError] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSuccess, setIsSuccess] = useState(false)
 
   const handleClose = () => {
-    setReason("");
-    setDetails("");
-    setError("");
-    setIsLoading(false);
-    setIsSuccess(false);
-    onClose();
-  };
+    setReason('')
+    setDetails('')
+    setError('')
+    setIsLoading(false)
+    setIsSuccess(false)
+    onClose()
+  }
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
+    e.preventDefault()
+    setError('')
 
     if (!reason) {
-      setError("Please select a reason");
-      return;
+      setError('Please select a reason')
+      return
     }
 
-    setIsLoading(true);
+    setIsLoading(true)
 
     try {
       const response = await fetch(`/api/arcade/rooms/${roomId}/report`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           reportedUserId: reportedUser.id,
           reason,
           details: details.trim() || undefined,
         }),
-      });
+      })
 
       if (!response.ok) {
-        const data = await response.json().catch(() => ({}));
-        throw new Error(data.error || "Failed to submit report");
+        const data = await response.json().catch(() => ({}))
+        throw new Error(data.error || 'Failed to submit report')
       }
 
       // Success!
-      setIsSuccess(true);
-      onSuccess?.();
+      setIsSuccess(true)
+      onSuccess?.()
 
       // Auto-close after 2 seconds
       setTimeout(() => {
-        handleClose();
-      }, 2000);
+        handleClose()
+      }, 2000)
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to submit report");
+      setError(err instanceof Error ? err.message : 'Failed to submit report')
     } finally {
-      setIsLoading(false);
+      setIsLoading(false)
     }
-  };
+  }
 
   if (isSuccess) {
     return (
       <Modal isOpen={isOpen} onClose={handleClose}>
         <div
           style={{
-            border: "2px solid rgba(34, 197, 94, 0.3)",
-            borderRadius: "16px",
-            textAlign: "center",
-            padding: "40px 24px",
+            border: '2px solid rgba(34, 197, 94, 0.3)',
+            borderRadius: '16px',
+            textAlign: 'center',
+            padding: '40px 24px',
           }}
         >
-          <div style={{ fontSize: "48px", marginBottom: "16px" }}>✓</div>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }}>✓</div>
           <h2
             style={{
-              fontSize: "24px",
-              fontWeight: "bold",
-              marginBottom: "8px",
-              color: "rgba(134, 239, 172, 1)",
+              fontSize: '24px',
+              fontWeight: 'bold',
+              marginBottom: '8px',
+              color: 'rgba(134, 239, 172, 1)',
             }}
           >
             Report Submitted
           </h2>
           <p
             style={{
-              fontSize: "14px",
-              color: "rgba(209, 213, 219, 0.8)",
+              fontSize: '14px',
+              color: 'rgba(209, 213, 219, 0.8)',
             }}
           >
             The host has been notified
           </p>
         </div>
       </Modal>
-    );
+    )
   }
 
   return (
     <Modal isOpen={isOpen} onClose={handleClose}>
       <div
         style={{
-          border: "2px solid rgba(239, 68, 68, 0.3)",
-          borderRadius: "16px",
+          border: '2px solid rgba(239, 68, 68, 0.3)',
+          borderRadius: '16px',
         }}
       >
         <h2
           style={{
-            fontSize: "24px",
-            fontWeight: "bold",
-            marginBottom: "8px",
-            color: "rgba(252, 165, 165, 1)",
+            fontSize: '24px',
+            fontWeight: 'bold',
+            marginBottom: '8px',
+            color: 'rgba(252, 165, 165, 1)',
           }}
         >
           Report Player
         </h2>
         <p
           style={{
-            fontSize: "14px",
-            color: "rgba(209, 213, 219, 0.8)",
-            marginBottom: "24px",
+            fontSize: '14px',
+            color: 'rgba(209, 213, 219, 0.8)',
+            marginBottom: '24px',
           }}
         >
           Report <strong>{reportedUser.name}</strong> to the host
@@ -172,55 +172,49 @@ export function ReportPlayerModal({
 
         <form onSubmit={handleSubmit}>
           {/* Reason selector */}
-          <div style={{ marginBottom: "16px" }}>
+          <div style={{ marginBottom: '16px' }}>
             <label
               style={{
-                display: "block",
-                fontSize: "13px",
-                fontWeight: "600",
-                color: "rgba(209, 213, 219, 0.9)",
-                marginBottom: "8px",
+                display: 'block',
+                fontSize: '13px',
+                fontWeight: '600',
+                color: 'rgba(209, 213, 219, 0.9)',
+                marginBottom: '8px',
               }}
             >
               Reason *
             </label>
-            <div
-              style={{ display: "flex", flexDirection: "column", gap: "8px" }}
-            >
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
               {REPORT_REASONS.map((option) => (
                 <label
                   key={option.value}
                   style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "10px",
-                    padding: "10px 12px",
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '10px',
+                    padding: '10px 12px',
                     background:
                       reason === option.value
-                        ? "rgba(239, 68, 68, 0.2)"
-                        : "rgba(255, 255, 255, 0.05)",
+                        ? 'rgba(239, 68, 68, 0.2)'
+                        : 'rgba(255, 255, 255, 0.05)',
                     border:
                       reason === option.value
-                        ? "2px solid rgba(239, 68, 68, 0.5)"
-                        : "2px solid rgba(75, 85, 99, 0.3)",
-                    borderRadius: "8px",
-                    cursor: "pointer",
-                    transition: "all 0.2s ease",
+                        ? '2px solid rgba(239, 68, 68, 0.5)'
+                        : '2px solid rgba(75, 85, 99, 0.3)',
+                    borderRadius: '8px',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s ease',
                   }}
                   onMouseEnter={(e) => {
                     if (reason !== option.value) {
-                      e.currentTarget.style.background =
-                        "rgba(255, 255, 255, 0.08)";
-                      e.currentTarget.style.borderColor =
-                        "rgba(75, 85, 99, 0.5)";
+                      e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)'
+                      e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.5)'
                     }
                   }}
                   onMouseLeave={(e) => {
                     if (reason !== option.value) {
-                      e.currentTarget.style.background =
-                        "rgba(255, 255, 255, 0.05)";
-                      e.currentTarget.style.borderColor =
-                        "rgba(75, 85, 99, 0.3)";
+                      e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'
+                      e.currentTarget.style.borderColor = 'rgba(75, 85, 99, 0.3)'
                     }
                   }}
                 >
@@ -230,22 +224,22 @@ export function ReportPlayerModal({
                     value={option.value}
                     checked={reason === option.value}
                     onChange={(e) => {
-                      setReason(e.target.value);
-                      setError("");
+                      setReason(e.target.value)
+                      setError('')
                     }}
                     disabled={isLoading}
                     style={{
-                      width: "18px",
-                      height: "18px",
-                      accentColor: "#ef4444",
-                      cursor: "pointer",
+                      width: '18px',
+                      height: '18px',
+                      accentColor: '#ef4444',
+                      cursor: 'pointer',
                     }}
                   />
                   <span
                     style={{
-                      fontSize: "14px",
-                      color: "rgba(209, 213, 219, 0.9)",
-                      fontWeight: reason === option.value ? "600" : "500",
+                      fontSize: '14px',
+                      color: 'rgba(209, 213, 219, 0.9)',
+                      fontWeight: reason === option.value ? '600' : '500',
                     }}
                   >
                     {option.label}
@@ -256,14 +250,14 @@ export function ReportPlayerModal({
           </div>
 
           {/* Optional details */}
-          <div style={{ marginBottom: "16px" }}>
+          <div style={{ marginBottom: '16px' }}>
             <label
               style={{
-                display: "block",
-                fontSize: "13px",
-                fontWeight: "600",
-                color: "rgba(209, 213, 219, 0.9)",
-                marginBottom: "8px",
+                display: 'block',
+                fontSize: '13px',
+                fontWeight: '600',
+                color: 'rgba(209, 213, 219, 0.9)',
+                marginBottom: '8px',
               }}
             >
               Additional details (optional)
@@ -276,24 +270,24 @@ export function ReportPlayerModal({
               rows={3}
               disabled={isLoading}
               style={{
-                width: "100%",
-                padding: "12px",
-                border: "2px solid rgba(75, 85, 99, 0.4)",
-                borderRadius: "10px",
-                fontSize: "14px",
-                background: "rgba(255, 255, 255, 0.05)",
-                color: "rgba(209, 213, 219, 1)",
-                outline: "none",
-                resize: "vertical",
-                fontFamily: "inherit",
+                width: '100%',
+                padding: '12px',
+                border: '2px solid rgba(75, 85, 99, 0.4)',
+                borderRadius: '10px',
+                fontSize: '14px',
+                background: 'rgba(255, 255, 255, 0.05)',
+                color: 'rgba(209, 213, 219, 1)',
+                outline: 'none',
+                resize: 'vertical',
+                fontFamily: 'inherit',
               }}
             />
             <div
               style={{
-                fontSize: "12px",
-                color: "rgba(156, 163, 175, 1)",
-                textAlign: "right",
-                marginTop: "4px",
+                fontSize: '12px',
+                color: 'rgba(156, 163, 175, 1)',
+                textAlign: 'right',
+                marginTop: '4px',
               }}
             >
               {details.length}/500
@@ -303,42 +297,42 @@ export function ReportPlayerModal({
           {error && (
             <p
               style={{
-                fontSize: "13px",
-                color: "rgba(248, 113, 113, 1)",
-                marginBottom: "16px",
-                textAlign: "center",
+                fontSize: '13px',
+                color: 'rgba(248, 113, 113, 1)',
+                marginBottom: '16px',
+                textAlign: 'center',
               }}
             >
               {error}
             </p>
           )}
 
-          <div style={{ display: "flex", gap: "12px", marginTop: "24px" }}>
+          <div style={{ display: 'flex', gap: '12px', marginTop: '24px' }}>
             <button
               type="button"
               onClick={handleClose}
               disabled={isLoading}
               style={{
                 flex: 1,
-                padding: "12px",
-                background: "rgba(75, 85, 99, 0.3)",
-                color: "rgba(209, 213, 219, 1)",
-                border: "2px solid rgba(75, 85, 99, 0.5)",
-                borderRadius: "10px",
-                fontSize: "15px",
-                fontWeight: "600",
-                cursor: isLoading ? "not-allowed" : "pointer",
+                padding: '12px',
+                background: 'rgba(75, 85, 99, 0.3)',
+                color: 'rgba(209, 213, 219, 1)',
+                border: '2px solid rgba(75, 85, 99, 0.5)',
+                borderRadius: '10px',
+                fontSize: '15px',
+                fontWeight: '600',
+                cursor: isLoading ? 'not-allowed' : 'pointer',
                 opacity: isLoading ? 0.5 : 1,
-                transition: "all 0.2s ease",
+                transition: 'all 0.2s ease',
               }}
               onMouseEnter={(e) => {
                 if (!isLoading) {
-                  e.currentTarget.style.background = "rgba(75, 85, 99, 0.4)";
+                  e.currentTarget.style.background = 'rgba(75, 85, 99, 0.4)'
                 }
               }}
               onMouseLeave={(e) => {
                 if (!isLoading) {
-                  e.currentTarget.style.background = "rgba(75, 85, 99, 0.3)";
+                  e.currentTarget.style.background = 'rgba(75, 85, 99, 0.3)'
                 }
               }}
             >
@@ -349,44 +343,41 @@ export function ReportPlayerModal({
               disabled={!reason || isLoading}
               style={{
                 flex: 1,
-                padding: "12px",
+                padding: '12px',
                 background:
                   reason && !isLoading
-                    ? "linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8))"
-                    : "rgba(75, 85, 99, 0.3)",
-                color:
-                  reason && !isLoading
-                    ? "rgba(255, 255, 255, 1)"
-                    : "rgba(156, 163, 175, 1)",
+                    ? 'linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8))'
+                    : 'rgba(75, 85, 99, 0.3)',
+                color: reason && !isLoading ? 'rgba(255, 255, 255, 1)' : 'rgba(156, 163, 175, 1)',
                 border:
                   reason && !isLoading
-                    ? "2px solid rgba(239, 68, 68, 0.6)"
-                    : "2px solid rgba(75, 85, 99, 0.5)",
-                borderRadius: "10px",
-                fontSize: "15px",
-                fontWeight: "600",
-                cursor: reason && !isLoading ? "pointer" : "not-allowed",
+                    ? '2px solid rgba(239, 68, 68, 0.6)'
+                    : '2px solid rgba(75, 85, 99, 0.5)',
+                borderRadius: '10px',
+                fontSize: '15px',
+                fontWeight: '600',
+                cursor: reason && !isLoading ? 'pointer' : 'not-allowed',
                 opacity: reason && !isLoading ? 1 : 0.5,
-                transition: "all 0.2s ease",
+                transition: 'all 0.2s ease',
               }}
               onMouseEnter={(e) => {
                 if (reason && !isLoading) {
                   e.currentTarget.style.background =
-                    "linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9))";
+                    'linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9))'
                 }
               }}
               onMouseLeave={(e) => {
                 if (reason && !isLoading) {
                   e.currentTarget.style.background =
-                    "linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8))";
+                    'linear-gradient(135deg, rgba(239, 68, 68, 0.8), rgba(220, 38, 38, 0.8))'
                 }
               }}
             >
-              {isLoading ? "Submitting..." : "Submit Report"}
+              {isLoading ? 'Submitting...' : 'Submit Report'}
             </button>
           </div>
         </form>
       </div>
     </Modal>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/RoomInfo.tsx b/apps/web/src/components/nav/RoomInfo.tsx
index 1839fec6..de177de9 100644
--- a/apps/web/src/components/nav/RoomInfo.tsx
+++ b/apps/web/src/components/nav/RoomInfo.tsx
@@ -1,37 +1,33 @@
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import {
-  useClearRoomGame,
-  useLeaveRoom,
-  useRoomData,
-} from "@/hooks/useRoomData";
-import { useViewerId } from "@/hooks/useViewerId";
-import { getRoomDisplayWithEmoji } from "@/utils/room-display";
-import { CreateRoomModal } from "./CreateRoomModal";
-import { JoinRoomModal } from "./JoinRoomModal";
-import { ModerationPanel } from "./ModerationPanel";
-import { RoomShareButtons } from "./RoomShareButtons";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { useClearRoomGame, useLeaveRoom, useRoomData } from '@/hooks/useRoomData'
+import { useViewerId } from '@/hooks/useViewerId'
+import { getRoomDisplayWithEmoji } from '@/utils/room-display'
+import { CreateRoomModal } from './CreateRoomModal'
+import { JoinRoomModal } from './JoinRoomModal'
+import { ModerationPanel } from './ModerationPanel'
+import { RoomShareButtons } from './RoomShareButtons'
 
-type GameMode = "none" | "single" | "battle" | "tournament";
+type GameMode = 'none' | 'single' | 'battle' | 'tournament'
 
 interface RoomInfoProps {
-  roomName?: string | null;
-  gameName: string;
-  playerCount: number;
-  joinCode?: string;
-  roomId?: string;
-  shouldEmphasize: boolean;
-  gameMode: GameMode;
-  modeColor: string;
-  modeEmoji: string;
-  modeLabel: string;
-  navTitle: string;
-  navEmoji?: string;
-  onSetup?: () => void;
-  onNewGame?: () => void;
-  onQuit?: () => void;
-  onOpenModerationWithFocus?: (userId: string) => void;
+  roomName?: string | null
+  gameName: string
+  playerCount: number
+  joinCode?: string
+  roomId?: string
+  shouldEmphasize: boolean
+  gameMode: GameMode
+  modeColor: string
+  modeEmoji: string
+  modeLabel: string
+  navTitle: string
+  navEmoji?: string
+  onSetup?: () => void
+  onNewGame?: () => void
+  onQuit?: () => void
+  onOpenModerationWithFocus?: (userId: string) => void
 }
 
 /**
@@ -55,20 +51,18 @@ export function RoomInfo({
   onQuit,
   onOpenModerationWithFocus,
 }: RoomInfoProps) {
-  const router = useRouter();
-  const [open, setOpen] = useState(false);
-  const [showJoinModal, setShowJoinModal] = useState(false);
-  const [showCreateModal, setShowCreateModal] = useState(false);
-  const [showModerationPanel, setShowModerationPanel] = useState(false);
-  const [focusedUserId, setFocusedUserId] = useState<string | undefined>(
-    undefined,
-  );
-  const [pendingReportsCount, setPendingReportsCount] = useState(0);
-  const [pendingJoinRequestsCount, setPendingJoinRequestsCount] = useState(0);
-  const { getRoomShareUrl, roomData } = useRoomData();
-  const { data: currentUserId } = useViewerId();
-  const { mutateAsync: leaveRoom } = useLeaveRoom();
-  const { mutate: clearRoomGame } = useClearRoomGame();
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const [showJoinModal, setShowJoinModal] = useState(false)
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [showModerationPanel, setShowModerationPanel] = useState(false)
+  const [focusedUserId, setFocusedUserId] = useState<string | undefined>(undefined)
+  const [pendingReportsCount, setPendingReportsCount] = useState(0)
+  const [pendingJoinRequestsCount, setPendingJoinRequestsCount] = useState(0)
+  const { getRoomShareUrl, roomData } = useRoomData()
+  const { data: currentUserId } = useViewerId()
+  const { mutateAsync: leaveRoom } = useLeaveRoom()
+  const { mutate: clearRoomGame } = useClearRoomGame()
 
   // Use room display utility for consistent naming
   const displayName = joinCode
@@ -77,102 +71,98 @@ export function RoomInfo({
         code: joinCode,
         gameName,
       })
-    : roomName || gameName;
-  const shareUrl = joinCode ? getRoomShareUrl(joinCode) : "";
+    : roomName || gameName
+  const shareUrl = joinCode ? getRoomShareUrl(joinCode) : ''
 
   // Determine ownership status
-  const currentMember = roomData?.members.find(
-    (m) => m.userId === currentUserId,
-  );
-  const isCurrentUserCreator = currentMember?.isCreator ?? false;
-  const creatorMember = roomData?.members.find((m) => m.isCreator);
-  const creatorName = creatorMember?.displayName;
+  const currentMember = roomData?.members.find((m) => m.userId === currentUserId)
+  const isCurrentUserCreator = currentMember?.isCreator ?? false
+  const creatorMember = roomData?.members.find((m) => m.isCreator)
+  const creatorName = creatorMember?.displayName
 
   // Fetch pending reports count if user is host
   useEffect(() => {
-    if (!isCurrentUserCreator || !roomId) return;
+    if (!isCurrentUserCreator || !roomId) return
 
     const fetchPendingReports = async () => {
       try {
-        const res = await fetch(`/api/arcade/rooms/${roomId}/reports`);
+        const res = await fetch(`/api/arcade/rooms/${roomId}/reports`)
         if (res.ok) {
-          const data = await res.json();
-          const pending =
-            data.reports?.filter((r: any) => r.status === "pending") || [];
-          setPendingReportsCount(pending.length);
+          const data = await res.json()
+          const pending = data.reports?.filter((r: any) => r.status === 'pending') || []
+          setPendingReportsCount(pending.length)
         }
       } catch (error) {
-        console.error("[RoomInfo] Failed to fetch reports:", error);
+        console.error('[RoomInfo] Failed to fetch reports:', error)
       }
-    };
+    }
 
-    fetchPendingReports();
+    fetchPendingReports()
     // Poll every 30 seconds
-    const interval = setInterval(fetchPendingReports, 30000);
-    return () => clearInterval(interval);
-  }, [isCurrentUserCreator, roomId]);
+    const interval = setInterval(fetchPendingReports, 30000)
+    return () => clearInterval(interval)
+  }, [isCurrentUserCreator, roomId])
 
   // Fetch pending join requests count if user is host
   useEffect(() => {
-    if (!isCurrentUserCreator || !roomId) return;
+    if (!isCurrentUserCreator || !roomId) return
 
     const fetchPendingJoinRequests = async () => {
       try {
-        const res = await fetch(`/api/arcade/rooms/${roomId}/join-requests`);
+        const res = await fetch(`/api/arcade/rooms/${roomId}/join-requests`)
         if (res.ok) {
-          const data = await res.json();
-          const pending =
-            data.requests?.filter((r: any) => r.status === "pending") || [];
-          setPendingJoinRequestsCount(pending.length);
+          const data = await res.json()
+          const pending = data.requests?.filter((r: any) => r.status === 'pending') || []
+          setPendingJoinRequestsCount(pending.length)
         }
       } catch (error) {
-        console.error("[RoomInfo] Failed to fetch join requests:", error);
+        console.error('[RoomInfo] Failed to fetch join requests:', error)
       }
-    };
+    }
 
-    fetchPendingJoinRequests();
+    fetchPendingJoinRequests()
     // Poll every 30 seconds
-    const interval = setInterval(fetchPendingJoinRequests, 30000);
-    return () => clearInterval(interval);
-  }, [isCurrentUserCreator, roomId]);
+    const interval = setInterval(fetchPendingJoinRequests, 30000)
+    return () => clearInterval(interval)
+  }, [isCurrentUserCreator, roomId])
 
   // Listen for moderation events to update report count in real-time
-  const { moderationEvent } = useRoomData();
+  const { moderationEvent } = useRoomData()
   useEffect(() => {
-    if (moderationEvent?.type === "report" && isCurrentUserCreator) {
+    if (moderationEvent?.type === 'report' && isCurrentUserCreator) {
       // Increment count immediately when new report comes in
-      setPendingReportsCount((prev) => prev + 1);
+      setPendingReportsCount((prev) => prev + 1)
     }
-  }, [moderationEvent, isCurrentUserCreator]);
+  }, [moderationEvent, isCurrentUserCreator])
 
   // Expose a way to open moderation panel with focused user
   const handleOpenModerationWithFocus = (userId: string) => {
-    setFocusedUserId(userId);
-    setShowModerationPanel(true);
-  };
+    setFocusedUserId(userId)
+    setShowModerationPanel(true)
+  }
 
   // Call the callback prop if provided (so parent can trigger this)
   useEffect(() => {
     if (onOpenModerationWithFocus) {
       // Store reference so parent can call it
-      (window as any).__openModerationWithFocus = handleOpenModerationWithFocus;
+      ;(window as any).__openModerationWithFocus = handleOpenModerationWithFocus
     }
     return () => {
-      delete (window as any).__openModerationWithFocus;
-    };
-  }, [onOpenModerationWithFocus]);
+      delete (window as any).__openModerationWithFocus
+    }
+  }, [onOpenModerationWithFocus])
 
   const handleLeaveRoom = async () => {
-    if (!roomId) return;
+    if (!roomId) return
 
     try {
-      await leaveRoom(roomId);
+      await leaveRoom(roomId)
       // Navigate to arcade lobby after leaving room
-      router.push("/arcade");
+      router.push('/arcade')
     } catch (error) {
-      console.error("[RoomInfo] Failed to leave room:", error);
+      console.error('[RoomInfo] Failed to leave room:', error)
     }
-  };
+  }
 
   return (
     <>
@@ -181,34 +171,34 @@ export function RoomInfo({
           <button
             type="button"
             style={{
-              background: "transparent",
-              border: "none",
+              background: 'transparent',
+              border: 'none',
               padding: 0,
-              cursor: "pointer",
+              cursor: 'pointer',
             }}
           >
             <div
               style={{
-                display: "inline-flex",
-                flexDirection: "column",
-                gap: "3px",
-                padding: "5px 12px",
+                display: 'inline-flex',
+                flexDirection: 'column',
+                gap: '3px',
+                padding: '5px 12px',
                 background: `linear-gradient(135deg, ${modeColor}15, ${modeColor}10)`,
-                borderRadius: "8px",
+                borderRadius: '8px',
                 border: `2px solid ${modeColor}40`,
-                transition: "all 0.2s ease",
+                transition: 'all 0.2s ease',
                 lineHeight: 1,
               }}
             >
               {/* Top: Game name with dropdown indicator */}
               <div
                 style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "4px",
-                  fontSize: "13px",
-                  fontWeight: "bold",
-                  color: "rgba(17, 24, 39, 0.9)",
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                  fontSize: '13px',
+                  fontWeight: 'bold',
+                  color: 'rgba(17, 24, 39, 0.9)',
                   lineHeight: 1,
                 }}
               >
@@ -218,8 +208,8 @@ export function RoomInfo({
                 </span>
                 <span
                   style={{
-                    fontSize: "9px",
-                    color: "rgba(17, 24, 39, 0.5)",
+                    fontSize: '9px',
+                    color: 'rgba(17, 24, 39, 0.5)',
                     lineHeight: 1,
                   }}
                 >
@@ -230,27 +220,25 @@ export function RoomInfo({
               {/* Middle: Mode indicator */}
               <div
                 style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "4px",
-                  fontSize: "11px",
-                  fontWeight: "bold",
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                  fontSize: '11px',
+                  fontWeight: 'bold',
                   color: modeColor,
                   lineHeight: 1,
                 }}
               >
-                <span style={{ fontSize: "11px", lineHeight: 1 }}>
-                  {modeEmoji}
-                </span>
+                <span style={{ fontSize: '11px', lineHeight: 1 }}>{modeEmoji}</span>
                 <span style={{ lineHeight: 1 }}>{modeLabel}</span>
               </div>
 
               {/* Bottom: Room name */}
               <div
                 style={{
-                  fontSize: "10px",
-                  fontWeight: "600",
-                  color: "rgba(17, 24, 39, 0.65)",
+                  fontSize: '10px',
+                  fontWeight: '600',
+                  color: 'rgba(17, 24, 39, 0.65)',
                   lineHeight: 1,
                 }}
               >
@@ -261,51 +249,50 @@ export function RoomInfo({
               {isCurrentUserCreator ? (
                 <div
                   style={{
-                    display: "inline-flex",
-                    alignItems: "center",
-                    gap: "3px",
-                    padding: "2px 6px",
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: '3px',
+                    padding: '2px 6px',
                     background:
-                      "linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.2))",
-                    border: "1.5px solid rgba(251, 191, 36, 0.6)",
-                    borderRadius: "4px",
-                    fontSize: "9px",
-                    fontWeight: "700",
-                    color: "rgba(146, 64, 14, 1)",
+                      'linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.2))',
+                    border: '1.5px solid rgba(251, 191, 36, 0.6)',
+                    borderRadius: '4px',
+                    fontSize: '9px',
+                    fontWeight: '700',
+                    color: 'rgba(146, 64, 14, 1)',
                     lineHeight: 1,
-                    marginTop: "2px",
-                    position: "relative",
+                    marginTop: '2px',
+                    position: 'relative',
                   }}
                   title="You're the host"
                 >
-                  <span style={{ fontSize: "10px", lineHeight: 1 }}>👑</span>
+                  <span style={{ fontSize: '10px', lineHeight: 1 }}>👑</span>
                   <span style={{ lineHeight: 1 }}>You are host</span>
                   {/* Pending items badge (reports + join requests) */}
-                  {(pendingReportsCount > 0 ||
-                    pendingJoinRequestsCount > 0) && (
+                  {(pendingReportsCount > 0 || pendingJoinRequestsCount > 0) && (
                     <span
                       style={{
-                        display: "inline-flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "16px",
-                        height: "16px",
-                        borderRadius: "50%",
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: '16px',
+                        height: '16px',
+                        borderRadius: '50%',
                         background:
                           pendingJoinRequestsCount > 0
-                            ? "rgba(59, 130, 246, 1)"
-                            : "rgba(239, 68, 68, 1)",
-                        color: "white",
-                        fontSize: "8px",
-                        fontWeight: "700",
-                        marginLeft: "2px",
+                            ? 'rgba(59, 130, 246, 1)'
+                            : 'rgba(239, 68, 68, 1)',
+                        color: 'white',
+                        fontSize: '8px',
+                        fontWeight: '700',
+                        marginLeft: '2px',
                       }}
                       title={
                         pendingJoinRequestsCount > 0 && pendingReportsCount > 0
-                          ? `${pendingJoinRequestsCount} join request${pendingJoinRequestsCount > 1 ? "s" : ""}, ${pendingReportsCount} report${pendingReportsCount > 1 ? "s" : ""}`
+                          ? `${pendingJoinRequestsCount} join request${pendingJoinRequestsCount > 1 ? 's' : ''}, ${pendingReportsCount} report${pendingReportsCount > 1 ? 's' : ''}`
                           : pendingJoinRequestsCount > 0
-                            ? `${pendingJoinRequestsCount} join request${pendingJoinRequestsCount > 1 ? "s" : ""}`
-                            : `${pendingReportsCount} report${pendingReportsCount > 1 ? "s" : ""}`
+                            ? `${pendingJoinRequestsCount} join request${pendingJoinRequestsCount > 1 ? 's' : ''}`
+                            : `${pendingReportsCount} report${pendingReportsCount > 1 ? 's' : ''}`
                       }
                     >
                       {pendingReportsCount + pendingJoinRequestsCount}
@@ -316,22 +303,22 @@ export function RoomInfo({
                 creatorName && (
                   <div
                     style={{
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: "3px",
-                      padding: "2px 6px",
-                      background: "rgba(75, 85, 99, 0.15)",
-                      border: "1px solid rgba(75, 85, 99, 0.3)",
-                      borderRadius: "4px",
-                      fontSize: "8px",
-                      fontWeight: "600",
-                      color: "rgba(75, 85, 99, 0.8)",
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      gap: '3px',
+                      padding: '2px 6px',
+                      background: 'rgba(75, 85, 99, 0.15)',
+                      border: '1px solid rgba(75, 85, 99, 0.3)',
+                      borderRadius: '4px',
+                      fontSize: '8px',
+                      fontWeight: '600',
+                      color: 'rgba(75, 85, 99, 0.8)',
                       lineHeight: 1,
-                      marginTop: "2px",
+                      marginTop: '2px',
                     }}
                     title={`Host: ${creatorName}`}
                   >
-                    <span style={{ fontSize: "9px", lineHeight: 1 }}>👑</span>
+                    <span style={{ fontSize: '9px', lineHeight: 1 }}>👑</span>
                     <span style={{ lineHeight: 1 }}>Host: {creatorName}</span>
                   </div>
                 )
@@ -346,16 +333,14 @@ export function RoomInfo({
             align="start"
             sideOffset={8}
             style={{
-              background:
-                "linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))",
-              backdropFilter: "blur(12px)",
-              borderRadius: "12px",
-              padding: "8px",
-              boxShadow:
-                "0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.3)",
-              minWidth: "200px",
+              background: 'linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))',
+              backdropFilter: 'blur(12px)',
+              borderRadius: '12px',
+              padding: '8px',
+              boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.3)',
+              minWidth: '200px',
               zIndex: 9999,
-              animation: "dropdownFadeIn 0.2s ease-out",
+              animation: 'dropdownFadeIn 0.2s ease-out',
             }}
           >
             {/* Game menu items */}
@@ -363,30 +348,30 @@ export function RoomInfo({
               <DropdownMenu.Item
                 onSelect={onSetup}
                 style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "10px",
-                  padding: "10px 14px",
-                  borderRadius: "8px",
-                  border: "none",
-                  background: "transparent",
-                  color: "rgba(209, 213, 219, 1)",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  cursor: "pointer",
-                  outline: "none",
-                  transition: "all 0.2s ease",
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '10px',
+                  padding: '10px 14px',
+                  borderRadius: '8px',
+                  border: 'none',
+                  background: 'transparent',
+                  color: 'rgba(209, 213, 219, 1)',
+                  fontSize: '14px',
+                  fontWeight: '500',
+                  cursor: 'pointer',
+                  outline: 'none',
+                  transition: 'all 0.2s ease',
                 }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.background = "rgba(139, 92, 246, 0.2)";
-                  e.currentTarget.style.color = "rgba(196, 181, 253, 1)";
+                  e.currentTarget.style.background = 'rgba(139, 92, 246, 0.2)'
+                  e.currentTarget.style.color = 'rgba(196, 181, 253, 1)'
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.color = "rgba(209, 213, 219, 1)";
+                  e.currentTarget.style.background = 'transparent'
+                  e.currentTarget.style.color = 'rgba(209, 213, 219, 1)'
                 }}
               >
-                <span style={{ fontSize: "16px" }}>⚙️</span>
+                <span style={{ fontSize: '16px' }}>⚙️</span>
                 <span>Setup</span>
               </DropdownMenu.Item>
             )}
@@ -395,30 +380,30 @@ export function RoomInfo({
               <DropdownMenu.Item
                 onSelect={onNewGame}
                 style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "10px",
-                  padding: "10px 14px",
-                  borderRadius: "8px",
-                  border: "none",
-                  background: "transparent",
-                  color: "rgba(209, 213, 219, 1)",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  cursor: "pointer",
-                  outline: "none",
-                  transition: "all 0.2s ease",
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '10px',
+                  padding: '10px 14px',
+                  borderRadius: '8px',
+                  border: 'none',
+                  background: 'transparent',
+                  color: 'rgba(209, 213, 219, 1)',
+                  fontSize: '14px',
+                  fontWeight: '500',
+                  cursor: 'pointer',
+                  outline: 'none',
+                  transition: 'all 0.2s ease',
                 }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.background = "rgba(59, 130, 246, 0.2)";
-                  e.currentTarget.style.color = "rgba(147, 197, 253, 1)";
+                  e.currentTarget.style.background = 'rgba(59, 130, 246, 0.2)'
+                  e.currentTarget.style.color = 'rgba(147, 197, 253, 1)'
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.color = "rgba(209, 213, 219, 1)";
+                  e.currentTarget.style.background = 'transparent'
+                  e.currentTarget.style.color = 'rgba(209, 213, 219, 1)'
                 }}
               >
-                <span style={{ fontSize: "16px" }}>🎮</span>
+                <span style={{ fontSize: '16px' }}>🎮</span>
                 <span>New Game</span>
               </DropdownMenu.Item>
             )}
@@ -428,34 +413,34 @@ export function RoomInfo({
               <DropdownMenu.Item
                 onSelect={() => {
                   if (roomId) {
-                    clearRoomGame(roomId);
+                    clearRoomGame(roomId)
                   }
                 }}
                 style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "10px",
-                  padding: "10px 14px",
-                  borderRadius: "8px",
-                  border: "none",
-                  background: "transparent",
-                  color: "rgba(209, 213, 219, 1)",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  cursor: "pointer",
-                  outline: "none",
-                  transition: "all 0.2s ease",
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '10px',
+                  padding: '10px 14px',
+                  borderRadius: '8px',
+                  border: 'none',
+                  background: 'transparent',
+                  color: 'rgba(209, 213, 219, 1)',
+                  fontSize: '14px',
+                  fontWeight: '500',
+                  cursor: 'pointer',
+                  outline: 'none',
+                  transition: 'all 0.2s ease',
                 }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.background = "rgba(236, 72, 153, 0.2)";
-                  e.currentTarget.style.color = "rgba(249, 168, 212, 1)";
+                  e.currentTarget.style.background = 'rgba(236, 72, 153, 0.2)'
+                  e.currentTarget.style.color = 'rgba(249, 168, 212, 1)'
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.color = "rgba(209, 213, 219, 1)";
+                  e.currentTarget.style.background = 'transparent'
+                  e.currentTarget.style.color = 'rgba(209, 213, 219, 1)'
                 }}
               >
-                <span style={{ fontSize: "16px" }}>🔄</span>
+                <span style={{ fontSize: '16px' }}>🔄</span>
                 <span>Change Game</span>
               </DropdownMenu.Item>
             )}
@@ -464,66 +449,55 @@ export function RoomInfo({
             {isCurrentUserCreator && roomId && (
               <DropdownMenu.Item
                 onSelect={() => {
-                  setOpen(false);
-                  setShowModerationPanel(true);
+                  setOpen(false)
+                  setShowModerationPanel(true)
                 }}
                 style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "10px",
-                  padding: "10px 14px",
-                  borderRadius: "8px",
-                  border: "none",
-                  background:
-                    pendingReportsCount > 0
-                      ? "rgba(239, 68, 68, 0.15)"
-                      : "transparent",
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '10px',
+                  padding: '10px 14px',
+                  borderRadius: '8px',
+                  border: 'none',
+                  background: pendingReportsCount > 0 ? 'rgba(239, 68, 68, 0.15)' : 'transparent',
                   color:
-                    pendingReportsCount > 0
-                      ? "rgba(252, 165, 165, 1)"
-                      : "rgba(209, 213, 219, 1)",
-                  fontSize: "14px",
-                  fontWeight: pendingReportsCount > 0 ? "600" : "500",
-                  cursor: "pointer",
-                  outline: "none",
-                  transition: "all 0.2s ease",
-                  position: "relative",
+                    pendingReportsCount > 0 ? 'rgba(252, 165, 165, 1)' : 'rgba(209, 213, 219, 1)',
+                  fontSize: '14px',
+                  fontWeight: pendingReportsCount > 0 ? '600' : '500',
+                  cursor: 'pointer',
+                  outline: 'none',
+                  transition: 'all 0.2s ease',
+                  position: 'relative',
                 }}
                 onMouseEnter={(e) => {
                   e.currentTarget.style.background =
-                    pendingReportsCount > 0
-                      ? "rgba(239, 68, 68, 0.25)"
-                      : "rgba(251, 146, 60, 0.2)";
-                  e.currentTarget.style.color = "rgba(253, 186, 116, 1)";
+                    pendingReportsCount > 0 ? 'rgba(239, 68, 68, 0.25)' : 'rgba(251, 146, 60, 0.2)'
+                  e.currentTarget.style.color = 'rgba(253, 186, 116, 1)'
                 }}
                 onMouseLeave={(e) => {
                   e.currentTarget.style.background =
-                    pendingReportsCount > 0
-                      ? "rgba(239, 68, 68, 0.15)"
-                      : "transparent";
+                    pendingReportsCount > 0 ? 'rgba(239, 68, 68, 0.15)' : 'transparent'
                   e.currentTarget.style.color =
-                    pendingReportsCount > 0
-                      ? "rgba(252, 165, 165, 1)"
-                      : "rgba(209, 213, 219, 1)";
+                    pendingReportsCount > 0 ? 'rgba(252, 165, 165, 1)' : 'rgba(209, 213, 219, 1)'
                 }}
               >
-                <span style={{ fontSize: "16px" }}>🛡️</span>
+                <span style={{ fontSize: '16px' }}>🛡️</span>
                 <span>Moderation</span>
                 {pendingReportsCount > 0 && (
                   <span
                     style={{
-                      display: "inline-flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      minWidth: "18px",
-                      height: "18px",
-                      padding: "0 5px",
-                      borderRadius: "9px",
-                      background: "rgba(239, 68, 68, 1)",
-                      color: "white",
-                      fontSize: "11px",
-                      fontWeight: "700",
-                      marginLeft: "auto",
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      minWidth: '18px',
+                      height: '18px',
+                      padding: '0 5px',
+                      borderRadius: '9px',
+                      background: 'rgba(239, 68, 68, 1)',
+                      color: 'white',
+                      fontSize: '11px',
+                      fontWeight: '700',
+                      marginLeft: 'auto',
                     }}
                   >
                     {pendingReportsCount}
@@ -536,9 +510,9 @@ export function RoomInfo({
             {(onSetup || onNewGame || onQuit || isCurrentUserCreator) && (
               <DropdownMenu.Separator
                 style={{
-                  height: "1px",
-                  background: "rgba(75, 85, 99, 0.5)",
-                  margin: "4px 0",
+                  height: '1px',
+                  background: 'rgba(75, 85, 99, 0.5)',
+                  margin: '4px 0',
                 }}
               />
             )}
@@ -546,37 +520,35 @@ export function RoomInfo({
             <DropdownMenu.Sub>
               <DropdownMenu.SubTrigger
                 style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  gap: "10px",
-                  padding: "10px 14px",
-                  borderRadius: "8px",
-                  border: "none",
-                  background: "rgba(139, 92, 246, 0.05)",
-                  color: "rgba(209, 213, 219, 1)",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  cursor: "pointer",
-                  outline: "none",
-                  transition: "all 0.2s ease",
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: '10px',
+                  padding: '10px 14px',
+                  borderRadius: '8px',
+                  border: 'none',
+                  background: 'rgba(139, 92, 246, 0.05)',
+                  color: 'rgba(209, 213, 219, 1)',
+                  fontSize: '14px',
+                  fontWeight: '500',
+                  cursor: 'pointer',
+                  outline: 'none',
+                  transition: 'all 0.2s ease',
                 }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.background = "rgba(139, 92, 246, 0.15)";
-                  e.currentTarget.style.color = "rgba(196, 181, 253, 1)";
+                  e.currentTarget.style.background = 'rgba(139, 92, 246, 0.15)'
+                  e.currentTarget.style.color = 'rgba(196, 181, 253, 1)'
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.background = "rgba(139, 92, 246, 0.05)";
-                  e.currentTarget.style.color = "rgba(209, 213, 219, 1)";
+                  e.currentTarget.style.background = 'rgba(139, 92, 246, 0.05)'
+                  e.currentTarget.style.color = 'rgba(209, 213, 219, 1)'
                 }}
               >
-                <div
-                  style={{ display: "flex", alignItems: "center", gap: "10px" }}
-                >
-                  <span style={{ fontSize: "16px" }}>🏠</span>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                  <span style={{ fontSize: '16px' }}>🏠</span>
                   <span>Room: {displayName}</span>
                 </div>
-                <span style={{ fontSize: "10px", opacity: 0.7 }}>▸</span>
+                <span style={{ fontSize: '10px', opacity: 0.7 }}>▸</span>
               </DropdownMenu.SubTrigger>
 
               <DropdownMenu.Portal>
@@ -585,15 +557,14 @@ export function RoomInfo({
                   alignOffset={-8}
                   style={{
                     background:
-                      "linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))",
-                    backdropFilter: "blur(12px)",
-                    borderRadius: "12px",
-                    padding: "8px",
-                    boxShadow:
-                      "0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.3)",
-                    minWidth: "220px",
+                      'linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))',
+                    backdropFilter: 'blur(12px)',
+                    borderRadius: '12px',
+                    padding: '8px',
+                    boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.3)',
+                    minWidth: '220px',
                     zIndex: 10000,
-                    animation: "dropdownFadeIn 0.2s ease-out",
+                    animation: 'dropdownFadeIn 0.2s ease-out',
                   }}
                 >
                   {/* Current Room Section */}
@@ -601,28 +572,25 @@ export function RoomInfo({
                     <>
                       <div
                         style={{
-                          fontSize: "10px",
-                          fontWeight: "700",
-                          color: "rgba(139, 92, 246, 0.7)",
-                          marginBottom: "8px",
-                          marginLeft: "12px",
-                          textTransform: "uppercase",
-                          letterSpacing: "1px",
+                          fontSize: '10px',
+                          fontWeight: '700',
+                          color: 'rgba(139, 92, 246, 0.7)',
+                          marginBottom: '8px',
+                          marginLeft: '12px',
+                          textTransform: 'uppercase',
+                          letterSpacing: '1px',
                         }}
                       >
                         Current Room
                       </div>
 
-                      <RoomShareButtons
-                        joinCode={joinCode}
-                        shareUrl={shareUrl}
-                      />
+                      <RoomShareButtons joinCode={joinCode} shareUrl={shareUrl} />
 
                       <DropdownMenu.Separator
                         style={{
-                          height: "1px",
-                          background: "rgba(75, 85, 99, 0.5)",
-                          margin: "8px 0",
+                          height: '1px',
+                          background: 'rgba(75, 85, 99, 0.5)',
+                          margin: '8px 0',
                         }}
                       />
                     </>
@@ -631,13 +599,13 @@ export function RoomInfo({
                   {/* Switch Rooms Section */}
                   <div
                     style={{
-                      fontSize: "10px",
-                      fontWeight: "700",
-                      color: "rgba(139, 92, 246, 0.7)",
-                      marginBottom: "8px",
-                      marginLeft: "12px",
-                      textTransform: "uppercase",
-                      letterSpacing: "1px",
+                      fontSize: '10px',
+                      fontWeight: '700',
+                      color: 'rgba(139, 92, 246, 0.7)',
+                      marginBottom: '8px',
+                      marginLeft: '12px',
+                      textTransform: 'uppercase',
+                      letterSpacing: '1px',
                     }}
                   >
                     Switch Rooms
@@ -645,69 +613,67 @@ export function RoomInfo({
 
                   <DropdownMenu.Item
                     onSelect={() => {
-                      setOpen(false);
-                      setShowCreateModal(true);
+                      setOpen(false)
+                      setShowCreateModal(true)
                     }}
                     style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "10px",
-                      padding: "10px 14px",
-                      borderRadius: "8px",
-                      border: "none",
-                      background: "transparent",
-                      color: "rgba(209, 213, 219, 1)",
-                      fontSize: "14px",
-                      fontWeight: "500",
-                      cursor: "pointer",
-                      outline: "none",
-                      transition: "all 0.2s ease",
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '10px',
+                      padding: '10px 14px',
+                      borderRadius: '8px',
+                      border: 'none',
+                      background: 'transparent',
+                      color: 'rgba(209, 213, 219, 1)',
+                      fontSize: '14px',
+                      fontWeight: '500',
+                      cursor: 'pointer',
+                      outline: 'none',
+                      transition: 'all 0.2s ease',
                     }}
                     onMouseEnter={(e) => {
-                      e.currentTarget.style.background =
-                        "rgba(34, 197, 94, 0.2)";
-                      e.currentTarget.style.color = "rgba(134, 239, 172, 1)";
+                      e.currentTarget.style.background = 'rgba(34, 197, 94, 0.2)'
+                      e.currentTarget.style.color = 'rgba(134, 239, 172, 1)'
                     }}
                     onMouseLeave={(e) => {
-                      e.currentTarget.style.background = "transparent";
-                      e.currentTarget.style.color = "rgba(209, 213, 219, 1)";
+                      e.currentTarget.style.background = 'transparent'
+                      e.currentTarget.style.color = 'rgba(209, 213, 219, 1)'
                     }}
                   >
-                    <span style={{ fontSize: "16px" }}>🆕</span>
+                    <span style={{ fontSize: '16px' }}>🆕</span>
                     <span>Create New</span>
                   </DropdownMenu.Item>
 
                   <DropdownMenu.Item
                     onSelect={() => {
-                      setOpen(false);
-                      setShowJoinModal(true);
+                      setOpen(false)
+                      setShowJoinModal(true)
                     }}
                     style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "10px",
-                      padding: "10px 14px",
-                      borderRadius: "8px",
-                      border: "none",
-                      background: "transparent",
-                      color: "rgba(209, 213, 219, 1)",
-                      fontSize: "14px",
-                      fontWeight: "500",
-                      cursor: "pointer",
-                      outline: "none",
-                      transition: "all 0.2s ease",
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '10px',
+                      padding: '10px 14px',
+                      borderRadius: '8px',
+                      border: 'none',
+                      background: 'transparent',
+                      color: 'rgba(209, 213, 219, 1)',
+                      fontSize: '14px',
+                      fontWeight: '500',
+                      cursor: 'pointer',
+                      outline: 'none',
+                      transition: 'all 0.2s ease',
                     }}
                     onMouseEnter={(e) => {
-                      e.currentTarget.style.background =
-                        "rgba(59, 130, 246, 0.2)";
-                      e.currentTarget.style.color = "rgba(147, 197, 253, 1)";
+                      e.currentTarget.style.background = 'rgba(59, 130, 246, 0.2)'
+                      e.currentTarget.style.color = 'rgba(147, 197, 253, 1)'
                     }}
                     onMouseLeave={(e) => {
-                      e.currentTarget.style.background = "transparent";
-                      e.currentTarget.style.color = "rgba(209, 213, 219, 1)";
+                      e.currentTarget.style.background = 'transparent'
+                      e.currentTarget.style.color = 'rgba(209, 213, 219, 1)'
                     }}
                   >
-                    <span style={{ fontSize: "16px" }}>🚪</span>
+                    <span style={{ fontSize: '16px' }}>🚪</span>
                     <span>Join Another</span>
                   </DropdownMenu.Item>
 
@@ -716,41 +682,38 @@ export function RoomInfo({
                     <>
                       <DropdownMenu.Separator
                         style={{
-                          height: "1px",
-                          background: "rgba(75, 85, 99, 0.5)",
-                          margin: "8px 0",
+                          height: '1px',
+                          background: 'rgba(75, 85, 99, 0.5)',
+                          margin: '8px 0',
                         }}
                       />
                       <DropdownMenu.Item
                         onSelect={handleLeaveRoom}
                         style={{
-                          display: "flex",
-                          alignItems: "center",
-                          gap: "10px",
-                          padding: "10px 14px",
-                          borderRadius: "8px",
-                          border: "none",
-                          background: "transparent",
-                          color: "rgba(209, 213, 219, 1)",
-                          fontSize: "14px",
-                          fontWeight: "500",
-                          cursor: "pointer",
-                          outline: "none",
-                          transition: "all 0.2s ease",
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '10px',
+                          padding: '10px 14px',
+                          borderRadius: '8px',
+                          border: 'none',
+                          background: 'transparent',
+                          color: 'rgba(209, 213, 219, 1)',
+                          fontSize: '14px',
+                          fontWeight: '500',
+                          cursor: 'pointer',
+                          outline: 'none',
+                          transition: 'all 0.2s ease',
                         }}
                         onMouseEnter={(e) => {
-                          e.currentTarget.style.background =
-                            "rgba(239, 68, 68, 0.2)";
-                          e.currentTarget.style.color =
-                            "rgba(252, 165, 165, 1)";
+                          e.currentTarget.style.background = 'rgba(239, 68, 68, 0.2)'
+                          e.currentTarget.style.color = 'rgba(252, 165, 165, 1)'
                         }}
                         onMouseLeave={(e) => {
-                          e.currentTarget.style.background = "transparent";
-                          e.currentTarget.style.color =
-                            "rgba(209, 213, 219, 1)";
+                          e.currentTarget.style.background = 'transparent'
+                          e.currentTarget.style.color = 'rgba(209, 213, 219, 1)'
                         }}
                       >
-                        <span style={{ fontSize: "16px" }}>🚫</span>
+                        <span style={{ fontSize: '16px' }}>🚫</span>
                         <span>Leave This Room</span>
                       </DropdownMenu.Item>
                     </>
@@ -763,30 +726,30 @@ export function RoomInfo({
               <DropdownMenu.Item
                 onSelect={onQuit}
                 style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "10px",
-                  padding: "10px 14px",
-                  borderRadius: "8px",
-                  border: "none",
-                  background: "transparent",
-                  color: "rgba(209, 213, 219, 1)",
-                  fontSize: "14px",
-                  fontWeight: "500",
-                  cursor: "pointer",
-                  outline: "none",
-                  transition: "all 0.2s ease",
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '10px',
+                  padding: '10px 14px',
+                  borderRadius: '8px',
+                  border: 'none',
+                  background: 'transparent',
+                  color: 'rgba(209, 213, 219, 1)',
+                  fontSize: '14px',
+                  fontWeight: '500',
+                  cursor: 'pointer',
+                  outline: 'none',
+                  transition: 'all 0.2s ease',
                 }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.background = "rgba(251, 146, 60, 0.2)";
-                  e.currentTarget.style.color = "rgba(253, 186, 116, 1)";
+                  e.currentTarget.style.background = 'rgba(251, 146, 60, 0.2)'
+                  e.currentTarget.style.color = 'rgba(253, 186, 116, 1)'
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.color = "rgba(209, 213, 219, 1)";
+                  e.currentTarget.style.background = 'transparent'
+                  e.currentTarget.style.color = 'rgba(209, 213, 219, 1)'
                 }}
               >
-                <span style={{ fontSize: "16px" }}>🏟️</span>
+                <span style={{ fontSize: '16px' }}>🏟️</span>
                 <span>Room Lobby</span>
               </DropdownMenu.Item>
             )}
@@ -812,22 +775,16 @@ export function RoomInfo({
       </DropdownMenu.Root>
 
       {/* Modals */}
-      <JoinRoomModal
-        isOpen={showJoinModal}
-        onClose={() => setShowJoinModal(false)}
-      />
-      <CreateRoomModal
-        isOpen={showCreateModal}
-        onClose={() => setShowCreateModal(false)}
-      />
+      <JoinRoomModal isOpen={showJoinModal} onClose={() => setShowJoinModal(false)} />
+      <CreateRoomModal isOpen={showCreateModal} onClose={() => setShowCreateModal(false)} />
 
       {/* Moderation Panel - only render if host */}
       {isCurrentUserCreator && roomId && roomData && currentUserId && (
         <ModerationPanel
           isOpen={showModerationPanel}
           onClose={() => {
-            setShowModerationPanel(false);
-            setFocusedUserId(undefined);
+            setShowModerationPanel(false)
+            setFocusedUserId(undefined)
           }}
           roomId={roomId}
           members={roomData.members}
@@ -837,5 +794,5 @@ export function RoomInfo({
         />
       )}
     </>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/RoomShareButtons.tsx b/apps/web/src/components/nav/RoomShareButtons.tsx
index a4fb33d3..37a41572 100644
--- a/apps/web/src/components/nav/RoomShareButtons.tsx
+++ b/apps/web/src/components/nav/RoomShareButtons.tsx
@@ -1,34 +1,31 @@
-import { CopyButton } from "@/components/common/CopyButton";
-import { QRCodeButton } from "@/components/common/QRCodeButton";
+import { CopyButton } from '@/components/common/CopyButton'
+import { QRCodeButton } from '@/components/common/QRCodeButton'
 
 export interface RoomShareButtonsProps {
   /**
    * The room join code (e.g., "ABC123")
    */
-  joinCode: string;
+  joinCode: string
 
   /**
    * The full shareable URL for the room
    */
-  shareUrl: string;
+  shareUrl: string
 }
 
 /**
  * Reusable component for sharing room join code and link
  * Used in both RoomInfo dropdown and AddPlayerButton's Invite tab
  */
-export function RoomShareButtons({
-  joinCode,
-  shareUrl,
-}: RoomShareButtonsProps) {
+export function RoomShareButtons({ joinCode, shareUrl }: RoomShareButtonsProps) {
   return (
-    <div style={{ display: "flex", gap: "6px", marginBottom: "6px" }}>
+    <div style={{ display: 'flex', gap: '6px', marginBottom: '6px' }}>
       {/* Left side: stacked buttons */}
       <div
         style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "6px",
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '6px',
           flex: 1,
         }}
       >
@@ -61,5 +58,5 @@ export function RoomShareButtons({
       {/* Right side: QR code button */}
       <QRCodeButton url={shareUrl} />
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/SetupPlayerRequirement.tsx b/apps/web/src/components/nav/SetupPlayerRequirement.tsx
index 4146705e..a57ee8e2 100644
--- a/apps/web/src/components/nav/SetupPlayerRequirement.tsx
+++ b/apps/web/src/components/nav/SetupPlayerRequirement.tsx
@@ -1,19 +1,19 @@
-import React from "react";
-import { InvitePlayersTab } from "./InvitePlayersTab";
+import React from 'react'
+import { InvitePlayersTab } from './InvitePlayersTab'
 
 interface Player {
-  id: string;
-  name: string;
-  emoji: string;
+  id: string
+  name: string
+  emoji: string
 }
 
 interface SetupPlayerRequirementProps {
-  minPlayers: number;
-  currentPlayers: Player[];
-  inactivePlayers: Player[];
-  onAddPlayer: (playerId: string) => void;
-  onConfigurePlayer: (playerId: string) => void;
-  gameTitle: string;
+  minPlayers: number
+  currentPlayers: Player[]
+  inactivePlayers: Player[]
+  onAddPlayer: (playerId: string) => void
+  onConfigurePlayer: (playerId: string) => void
+  gameTitle: string
 }
 
 /**
@@ -28,53 +28,51 @@ export function SetupPlayerRequirement({
   onConfigurePlayer,
   gameTitle,
 }: SetupPlayerRequirementProps) {
-  const [activeTab, setActiveTab] = React.useState<"add" | "invite">("add");
-  const needsPlayers = currentPlayers.length < minPlayers;
-  const playersNeeded = minPlayers - currentPlayers.length;
+  const [activeTab, setActiveTab] = React.useState<'add' | 'invite'>('add')
+  const needsPlayers = currentPlayers.length < minPlayers
+  const playersNeeded = minPlayers - currentPlayers.length
 
   if (!needsPlayers) {
-    return null;
+    return null
   }
 
   return (
     <div
       style={{
-        width: "100%",
-        maxWidth: "600px",
-        margin: "0 auto 32px auto",
-        padding: "24px",
-        background:
-          "linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(167, 139, 250, 0.15))",
-        borderRadius: "16px",
-        border: "3px solid rgba(96, 165, 250, 0.4)",
-        boxShadow: "0 8px 24px rgba(0, 0, 0, 0.15)",
-        display: "flex",
-        flexDirection: "column",
-        gap: "20px",
+        width: '100%',
+        maxWidth: '600px',
+        margin: '0 auto 32px auto',
+        padding: '24px',
+        background: 'linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(167, 139, 250, 0.15))',
+        borderRadius: '16px',
+        border: '3px solid rgba(96, 165, 250, 0.4)',
+        boxShadow: '0 8px 24px rgba(0, 0, 0, 0.15)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '20px',
       }}
     >
       {/* Header */}
-      <div style={{ textAlign: "center" }}>
+      <div style={{ textAlign: 'center' }}>
         <h2
           style={{
-            margin: "0 0 8px 0",
-            fontSize: "24px",
-            fontWeight: "bold",
-            background: "linear-gradient(135deg, #60a5fa, #a78bfa)",
-            backgroundClip: "text",
-            WebkitBackgroundClip: "text",
-            color: "transparent",
+            margin: '0 0 8px 0',
+            fontSize: '24px',
+            fontWeight: 'bold',
+            background: 'linear-gradient(135deg, #60a5fa, #a78bfa)',
+            backgroundClip: 'text',
+            WebkitBackgroundClip: 'text',
+            color: 'transparent',
           }}
         >
-          {gameTitle} needs {playersNeeded} more{" "}
-          {playersNeeded === 1 ? "player" : "players"}
+          {gameTitle} needs {playersNeeded} more {playersNeeded === 1 ? 'player' : 'players'}
         </h2>
         <p
           style={{
             margin: 0,
-            fontSize: "14px",
-            color: "#64748b",
-            fontWeight: "500",
+            fontSize: '14px',
+            color: '#64748b',
+            fontWeight: '500',
           }}
         >
           Add local players or invite friends to join
@@ -84,49 +82,41 @@ export function SetupPlayerRequirement({
       {/* Tab selector */}
       <div
         style={{
-          display: "flex",
-          gap: "8px",
-          justifyContent: "center",
+          display: 'flex',
+          gap: '8px',
+          justifyContent: 'center',
         }}
       >
         <button
           type="button"
-          onClick={() => setActiveTab("add")}
+          onClick={() => setActiveTab('add')}
           style={{
-            padding: "10px 24px",
-            fontSize: "14px",
-            fontWeight: "700",
-            borderRadius: "8px",
-            border:
-              activeTab === "add"
-                ? "2px solid #60a5fa"
-                : "2px solid transparent",
-            background:
-              activeTab === "add" ? "#60a5fa" : "rgba(255, 255, 255, 0.5)",
-            color: activeTab === "add" ? "white" : "#64748b",
-            cursor: "pointer",
-            transition: "all 0.2s ease",
+            padding: '10px 24px',
+            fontSize: '14px',
+            fontWeight: '700',
+            borderRadius: '8px',
+            border: activeTab === 'add' ? '2px solid #60a5fa' : '2px solid transparent',
+            background: activeTab === 'add' ? '#60a5fa' : 'rgba(255, 255, 255, 0.5)',
+            color: activeTab === 'add' ? 'white' : '#64748b',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
           }}
         >
           Add Local Player
         </button>
         <button
           type="button"
-          onClick={() => setActiveTab("invite")}
+          onClick={() => setActiveTab('invite')}
           style={{
-            padding: "10px 24px",
-            fontSize: "14px",
-            fontWeight: "700",
-            borderRadius: "8px",
-            border:
-              activeTab === "invite"
-                ? "2px solid #a78bfa"
-                : "2px solid transparent",
-            background:
-              activeTab === "invite" ? "#a78bfa" : "rgba(255, 255, 255, 0.5)",
-            color: activeTab === "invite" ? "white" : "#64748b",
-            cursor: "pointer",
-            transition: "all 0.2s ease",
+            padding: '10px 24px',
+            fontSize: '14px',
+            fontWeight: '700',
+            borderRadius: '8px',
+            border: activeTab === 'invite' ? '2px solid #a78bfa' : '2px solid transparent',
+            background: activeTab === 'invite' ? '#a78bfa' : 'rgba(255, 255, 255, 0.5)',
+            color: activeTab === 'invite' ? 'white' : '#64748b',
+            cursor: 'pointer',
+            transition: 'all 0.2s ease',
           }}
         >
           Invite Players
@@ -134,42 +124,42 @@ export function SetupPlayerRequirement({
       </div>
 
       {/* Tab content */}
-      {activeTab === "add" ? (
+      {activeTab === 'add' ? (
         // Add local player tab
         <div
           style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "16px",
-            padding: "16px",
-            background: "rgba(255, 255, 255, 0.7)",
-            borderRadius: "12px",
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '16px',
+            padding: '16px',
+            background: 'rgba(255, 255, 255, 0.7)',
+            borderRadius: '12px',
           }}
         >
           {inactivePlayers.length === 0 ? (
-            <div style={{ textAlign: "center", padding: "20px" }}>
+            <div style={{ textAlign: 'center', padding: '20px' }}>
               <p
                 style={{
-                  margin: "0 0 12px 0",
-                  color: "#64748b",
-                  fontSize: "14px",
+                  margin: '0 0 12px 0',
+                  color: '#64748b',
+                  fontSize: '14px',
                 }}
               >
                 No inactive players available
               </p>
               <button
                 type="button"
-                onClick={() => onConfigurePlayer("new")}
+                onClick={() => onConfigurePlayer('new')}
                 style={{
-                  padding: "10px 20px",
-                  fontSize: "14px",
-                  fontWeight: "700",
-                  borderRadius: "8px",
-                  border: "2px solid #60a5fa",
-                  background: "#60a5fa",
-                  color: "white",
-                  cursor: "pointer",
-                  transition: "all 0.2s ease",
+                  padding: '10px 20px',
+                  fontSize: '14px',
+                  fontWeight: '700',
+                  borderRadius: '8px',
+                  border: '2px solid #60a5fa',
+                  background: '#60a5fa',
+                  color: 'white',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s ease',
                 }}
               >
                 Create New Player
@@ -178,10 +168,10 @@ export function SetupPlayerRequirement({
           ) : (
             <div
               style={{
-                display: "grid",
-                gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
-                gap: "16px",
-                justifyItems: "center",
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+                gap: '16px',
+                justifyItems: 'center',
               }}
             >
               {inactivePlayers.map((player) => (
@@ -189,41 +179,37 @@ export function SetupPlayerRequirement({
                   key={player.id}
                   onClick={() => onAddPlayer(player.id)}
                   style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    gap: "8px",
-                    padding: "12px",
-                    borderRadius: "12px",
-                    background: "white",
-                    border: "2px solid rgba(96, 165, 250, 0.3)",
-                    cursor: "pointer",
-                    transition: "all 0.2s ease",
-                    minWidth: "100px",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: '8px',
+                    padding: '12px',
+                    borderRadius: '12px',
+                    background: 'white',
+                    border: '2px solid rgba(96, 165, 250, 0.3)',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s ease',
+                    minWidth: '100px',
                   }}
                   onMouseEnter={(e) => {
-                    e.currentTarget.style.transform = "scale(1.05)";
-                    e.currentTarget.style.borderColor = "#60a5fa";
-                    e.currentTarget.style.boxShadow =
-                      "0 4px 12px rgba(96, 165, 250, 0.3)";
+                    e.currentTarget.style.transform = 'scale(1.05)'
+                    e.currentTarget.style.borderColor = '#60a5fa'
+                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(96, 165, 250, 0.3)'
                   }}
                   onMouseLeave={(e) => {
-                    e.currentTarget.style.transform = "scale(1)";
-                    e.currentTarget.style.borderColor =
-                      "rgba(96, 165, 250, 0.3)";
-                    e.currentTarget.style.boxShadow = "none";
+                    e.currentTarget.style.transform = 'scale(1)'
+                    e.currentTarget.style.borderColor = 'rgba(96, 165, 250, 0.3)'
+                    e.currentTarget.style.boxShadow = 'none'
                   }}
                 >
-                  <div style={{ fontSize: "48px", lineHeight: 1 }}>
-                    {player.emoji}
-                  </div>
+                  <div style={{ fontSize: '48px', lineHeight: 1 }}>{player.emoji}</div>
                   <div
                     style={{
-                      fontSize: "13px",
-                      fontWeight: "600",
-                      color: "#1e293b",
-                      textAlign: "center",
-                      wordBreak: "break-word",
+                      fontSize: '13px',
+                      fontWeight: '600',
+                      color: '#1e293b',
+                      textAlign: 'center',
+                      wordBreak: 'break-word',
                     }}
                   >
                     {player.name}
@@ -237,14 +223,14 @@ export function SetupPlayerRequirement({
         // Invite players tab
         <div
           style={{
-            padding: "16px",
-            background: "rgba(255, 255, 255, 0.7)",
-            borderRadius: "12px",
+            padding: '16px',
+            background: 'rgba(255, 255, 255, 0.7)',
+            borderRadius: '12px',
           }}
         >
           <InvitePlayersTab />
         </div>
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/nav/__tests__/AddPlayerButton.full-context.test.tsx b/apps/web/src/components/nav/__tests__/AddPlayerButton.full-context.test.tsx
index 4d2caa4f..dfc41a30 100644
--- a/apps/web/src/components/nav/__tests__/AddPlayerButton.full-context.test.tsx
+++ b/apps/web/src/components/nav/__tests__/AddPlayerButton.full-context.test.tsx
@@ -1,32 +1,24 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import React from "react";
-import { GameContextNav } from "../GameContextNav";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import React from 'react'
+import { GameContextNav } from '../GameContextNav'
 
 // Mock InvitePlayersTab to simulate room creation
-let triggerRoomCreation: (() => void) | null = null;
+let triggerRoomCreation: (() => void) | null = null
 
-vi.mock("../InvitePlayersTab", () => ({
+vi.mock('../InvitePlayersTab', () => ({
   InvitePlayersTab: () => {
-    const [status, setStatus] = React.useState<"loading" | "success">(
-      "loading",
-    );
+    const [status, setStatus] = React.useState<'loading' | 'success'>('loading')
 
     React.useEffect(() => {
-      triggerRoomCreation = () => setStatus("success");
-      const timer = setTimeout(() => setStatus("success"), 100);
-      return () => clearTimeout(timer);
-    }, []);
+      triggerRoomCreation = () => setStatus('success')
+      const timer = setTimeout(() => setStatus('success'), 100)
+      return () => clearTimeout(timer)
+    }, [])
 
-    if (status === "loading") {
-      return <div>Creating room...</div>;
+    if (status === 'loading') {
+      return <div>Creating room...</div>
     }
 
     return (
@@ -34,12 +26,12 @@ vi.mock("../InvitePlayersTab", () => ({
         <div>ABC123</div>
         <div>Share Link</div>
       </div>
-    );
+    )
   },
-}));
+}))
 
-describe("AddPlayerButton - Full Context Re-render Test", () => {
-  let queryClient: QueryClient;
+describe('AddPlayerButton - Full Context Re-render Test', () => {
+  let queryClient: QueryClient
 
   beforeEach(() => {
     queryClient = new QueryClient({
@@ -47,15 +39,15 @@ describe("AddPlayerButton - Full Context Re-render Test", () => {
         queries: { retry: false },
         mutations: { retry: false },
       },
-    });
-    triggerRoomCreation = null;
-  });
+    })
+    triggerRoomCreation = null
+  })
 
-  it("keeps popover open when GameContextNav re-renders with roomInfo", async () => {
+  it('keeps popover open when GameContextNav re-renders with roomInfo', async () => {
     const mockPlayers = [
-      { id: "player-1", name: "Player 1", emoji: "😀" },
-      { id: "player-2", name: "Player 2", emoji: "😎" },
-    ];
+      { id: 'player-1', name: 'Player 1', emoji: '😀' },
+      { id: 'player-2', name: 'Player 2', emoji: '😎' },
+    ]
 
     const { rerender } = render(
       <QueryClientProvider client={queryClient}>
@@ -72,30 +64,30 @@ describe("AddPlayerButton - Full Context Re-render Test", () => {
           onConfigurePlayer={vi.fn()}
           roomInfo={undefined} // NO room initially
         />
-      </QueryClientProvider>,
-    );
+      </QueryClientProvider>
+    )
 
     // Step 1: Open the popover
-    const addButton = screen.getByTitle("Add player");
-    fireEvent.click(addButton);
+    const addButton = screen.getByTitle('Add player')
+    fireEvent.click(addButton)
 
     await waitFor(() => {
-      expect(screen.getByText("Invite Players 📨")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Invite Players 📨')).toBeInTheDocument()
+    })
 
     // Step 2: Click Invite Players tab
-    const inviteTab = screen.getByText("Invite Players 📨");
-    fireEvent.click(inviteTab);
+    const inviteTab = screen.getByText('Invite Players 📨')
+    fireEvent.click(inviteTab)
 
     // Step 3: Verify loading state
     await waitFor(() => {
-      expect(screen.getByText("Creating room...")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Creating room...')).toBeInTheDocument()
+    })
 
     // Step 4: Wait for room creation to complete
     await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 150));
-    });
+      await new Promise((resolve) => setTimeout(resolve, 150))
+    })
 
     // Step 5: SIMULATE PRODUCTION BEHAVIOR - Re-render with roomInfo
     // This is what happens in production when room is created
@@ -114,31 +106,31 @@ describe("AddPlayerButton - Full Context Re-render Test", () => {
           onConfigurePlayer={vi.fn()}
           roomInfo={{
             // NOW we have roomInfo - this causes left side of nav to change
-            roomId: "test-room",
-            roomName: "Quick Room",
-            gameName: "matching",
+            roomId: 'test-room',
+            roomName: 'Quick Room',
+            gameName: 'matching',
             playerCount: 1,
-            joinCode: "ABC123",
+            joinCode: 'ABC123',
           }}
         />
-      </QueryClientProvider>,
-    );
+      </QueryClientProvider>
+    )
 
     // Step 6: CRITICAL TEST - Is popover still visible?
     await waitFor(
       () => {
         // Try to find the popover content
-        const inviteText = screen.queryByText("ABC123");
-        const shareLink = screen.queryByText("Share Link");
+        const inviteText = screen.queryByText('ABC123')
+        const shareLink = screen.queryByText('Share Link')
 
         if (!inviteText || !shareLink) {
-          throw new Error("Popover closed after re-render!");
+          throw new Error('Popover closed after re-render!')
         }
 
-        expect(inviteText).toBeInTheDocument();
-        expect(shareLink).toBeInTheDocument();
+        expect(inviteText).toBeInTheDocument()
+        expect(shareLink).toBeInTheDocument()
       },
-      { timeout: 1000 },
-    );
-  });
-});
+      { timeout: 1000 }
+    )
+  })
+})
diff --git a/apps/web/src/components/nav/__tests__/AddPlayerButton.popover-persistence.test.tsx b/apps/web/src/components/nav/__tests__/AddPlayerButton.popover-persistence.test.tsx
index 25e1becf..d7a0fb5a 100644
--- a/apps/web/src/components/nav/__tests__/AddPlayerButton.popover-persistence.test.tsx
+++ b/apps/web/src/components/nav/__tests__/AddPlayerButton.popover-persistence.test.tsx
@@ -1,42 +1,34 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { AddPlayerButton } from "../AddPlayerButton";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { AddPlayerButton } from '../AddPlayerButton'
 
 // Track render count to detect re-renders
-let invitePlayersRenderCount = 0;
-let simulateRoomCreation: (() => void) | null = null;
+let invitePlayersRenderCount = 0
+let simulateRoomCreation: (() => void) | null = null
 
 // Mock InvitePlayersTab to simulate room creation behavior
-vi.mock("../InvitePlayersTab", () => ({
+vi.mock('../InvitePlayersTab', () => ({
   InvitePlayersTab: () => {
-    invitePlayersRenderCount++;
-    const [status, setStatus] = React.useState<"loading" | "success">(
-      "loading",
-    );
+    invitePlayersRenderCount++
+    const [status, setStatus] = React.useState<'loading' | 'success'>('loading')
 
     React.useEffect(() => {
       // Store the function to trigger room creation
       simulateRoomCreation = () => {
-        setStatus("success");
-      };
+        setStatus('success')
+      }
 
       // Simulate room creation after a delay
       const timer = setTimeout(() => {
-        setStatus("success");
-      }, 100);
+        setStatus('success')
+      }, 100)
 
-      return () => clearTimeout(timer);
-    }, []);
+      return () => clearTimeout(timer)
+    }, [])
 
-    if (status === "loading") {
-      return <div>Creating room...</div>;
+    if (status === 'loading') {
+      return <div>Creating room...</div>
     }
 
     return (
@@ -44,15 +36,15 @@ vi.mock("../InvitePlayersTab", () => ({
         <div>ABC123</div>
         <div>Share Link</div>
       </div>
-    );
+    )
   },
-}));
+}))
 
 // Need to import React since we're using it in the mock
-import React from "react";
+import React from 'react'
 
-describe("AddPlayerButton - Popover Persistence During Room Creation", () => {
-  let queryClient: QueryClient;
+describe('AddPlayerButton - Popover Persistence During Room Creation', () => {
+  let queryClient: QueryClient
 
   beforeEach(() => {
     queryClient = new QueryClient({
@@ -60,164 +52,150 @@ describe("AddPlayerButton - Popover Persistence During Room Creation", () => {
         queries: { retry: false },
         mutations: { retry: false },
       },
-    });
+    })
 
     // Reset counter
-    invitePlayersRenderCount = 0;
-    simulateRoomCreation = null;
-  });
+    invitePlayersRenderCount = 0
+    simulateRoomCreation = null
+  })
 
   const renderWithProviders = (component: React.ReactElement) => {
-    return render(
-      <QueryClientProvider client={queryClient}>
-        {component}
-      </QueryClientProvider>,
-    );
-  };
+    return render(<QueryClientProvider client={queryClient}>{component}</QueryClientProvider>)
+  }
 
-  it("keeps popover open when room is created via Invite Players tab", async () => {
+  it('keeps popover open when room is created via Invite Players tab', async () => {
     const mockPlayers = [
-      { id: "player-1", name: "Player 1", emoji: "😀" },
-      { id: "player-2", name: "Player 2", emoji: "😎" },
-    ];
+      { id: 'player-1', name: 'Player 1', emoji: '😀' },
+      { id: 'player-2', name: 'Player 2', emoji: '😎' },
+    ]
 
     renderWithProviders(
-      <AddPlayerButton
-        inactivePlayers={mockPlayers}
-        shouldEmphasize={true}
-        onAddPlayer={vi.fn()}
-      />,
-    );
+      <AddPlayerButton inactivePlayers={mockPlayers} shouldEmphasize={true} onAddPlayer={vi.fn()} />
+    )
 
     // Step 1: Click the + button to open popover
-    const addButton = screen.getByTitle("Add player");
-    fireEvent.click(addButton);
+    const addButton = screen.getByTitle('Add player')
+    fireEvent.click(addButton)
 
     // Step 2: Verify popover is open
     await waitFor(() => {
-      expect(screen.getByText("Add Player")).toBeInTheDocument();
-      expect(screen.getByText("Invite Players 📨")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Add Player')).toBeInTheDocument()
+      expect(screen.getByText('Invite Players 📨')).toBeInTheDocument()
+    })
 
     // Step 3: Click the "Invite Players" tab
-    const inviteTab = screen.getByText("Invite Players 📨");
-    fireEvent.click(inviteTab);
+    const inviteTab = screen.getByText('Invite Players 📨')
+    fireEvent.click(inviteTab)
 
     // Step 4: Verify we see the loading state
     await waitFor(() => {
-      expect(screen.getByText("Creating room...")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Creating room...')).toBeInTheDocument()
+    })
 
     // Step 5: Wait for room creation to complete
     // The mock will update mockIsInRoom to true after 100ms
     await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 150));
-    });
+      await new Promise((resolve) => setTimeout(resolve, 150))
+    })
 
     // Step 6: CRITICAL TEST - Verify popover is STILL visible after room creation
     await waitFor(() => {
       // The tab headers should still be visible
-      expect(screen.getByText("Add Player")).toBeInTheDocument();
-      expect(screen.getByText("Invite Players 📨")).toBeInTheDocument();
+      expect(screen.getByText('Add Player')).toBeInTheDocument()
+      expect(screen.getByText('Invite Players 📨')).toBeInTheDocument()
       // And we should see the share buttons now
-      expect(screen.getByText("ABC123")).toBeInTheDocument();
-      expect(screen.getByText("Share Link")).toBeInTheDocument();
-    });
+      expect(screen.getByText('ABC123')).toBeInTheDocument()
+      expect(screen.getByText('Share Link')).toBeInTheDocument()
+    })
 
     // Step 7: Wait 500ms to see if popover disappears (as reported in browser)
     await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-    });
+      await new Promise((resolve) => setTimeout(resolve, 500))
+    })
 
     // Step 8: Verify popover is STILL there after delay
-    expect(screen.queryByText("Add Player")).toBeInTheDocument();
-    expect(screen.queryByText("Invite Players 📨")).toBeInTheDocument();
-    expect(screen.queryByText("ABC123")).toBeInTheDocument();
-    expect(screen.queryByText("Share Link")).toBeInTheDocument();
+    expect(screen.queryByText('Add Player')).toBeInTheDocument()
+    expect(screen.queryByText('Invite Players 📨')).toBeInTheDocument()
+    expect(screen.queryByText('ABC123')).toBeInTheDocument()
+    expect(screen.queryByText('Share Link')).toBeInTheDocument()
 
     // Step 9: Verify the popover container is still in the DOM
-    const popoverContent = screen
-      .getByText("ABC123")
-      .closest('div[style*="position: absolute"]');
-    expect(popoverContent).toBeInTheDocument();
-  });
+    const popoverContent = screen.getByText('ABC123').closest('div[style*="position: absolute"]')
+    expect(popoverContent).toBeInTheDocument()
+  })
 
-  it("popover remains functional after room creation", async () => {
-    const mockPlayers = [{ id: "player-1", name: "Player 1", emoji: "😀" }];
-    const onAddPlayer = vi.fn();
+  it('popover remains functional after room creation', async () => {
+    const mockPlayers = [{ id: 'player-1', name: 'Player 1', emoji: '😀' }]
+    const onAddPlayer = vi.fn()
 
     renderWithProviders(
       <AddPlayerButton
         inactivePlayers={mockPlayers}
         shouldEmphasize={true}
         onAddPlayer={onAddPlayer}
-      />,
-    );
+      />
+    )
 
     // Open popover and create room
-    const addButton = screen.getByTitle("Add player");
-    fireEvent.click(addButton);
+    const addButton = screen.getByTitle('Add player')
+    fireEvent.click(addButton)
 
-    const inviteTab = await screen.findByText("Invite Players 📨");
-    fireEvent.click(inviteTab);
+    const inviteTab = await screen.findByText('Invite Players 📨')
+    fireEvent.click(inviteTab)
 
     // Wait for room creation
     await waitFor(() => {
-      expect(screen.getByText("ABC123")).toBeInTheDocument();
-    });
+      expect(screen.getByText('ABC123')).toBeInTheDocument()
+    })
 
     // Now switch back to "Add Player" tab
-    const addPlayerTab = screen.getByText("Add Player");
-    fireEvent.click(addPlayerTab);
+    const addPlayerTab = screen.getByText('Add Player')
+    fireEvent.click(addPlayerTab)
 
     // Verify we can see the player list
     await waitFor(() => {
-      expect(screen.getByText("Player 1")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Player 1')).toBeInTheDocument()
+    })
 
     // Click a player to add them
-    const playerButton = screen.getByText("Player 1");
-    fireEvent.click(playerButton);
+    const playerButton = screen.getByText('Player 1')
+    fireEvent.click(playerButton)
 
     // Verify the callback was called
-    expect(onAddPlayer).toHaveBeenCalledWith("player-1");
-  });
+    expect(onAddPlayer).toHaveBeenCalledWith('player-1')
+  })
 
-  it("popover does not disappear after extended delay (1 second)", async () => {
+  it('popover does not disappear after extended delay (1 second)', async () => {
     const mockPlayers = [
-      { id: "player-1", name: "Player 1", emoji: "😀" },
-      { id: "player-2", name: "Player 2", emoji: "😎" },
-    ];
+      { id: 'player-1', name: 'Player 1', emoji: '😀' },
+      { id: 'player-2', name: 'Player 2', emoji: '😎' },
+    ]
 
     renderWithProviders(
-      <AddPlayerButton
-        inactivePlayers={mockPlayers}
-        shouldEmphasize={true}
-        onAddPlayer={vi.fn()}
-      />,
-    );
+      <AddPlayerButton inactivePlayers={mockPlayers} shouldEmphasize={true} onAddPlayer={vi.fn()} />
+    )
 
     // Open popover
-    const addButton = screen.getByTitle("Add player");
-    fireEvent.click(addButton);
+    const addButton = screen.getByTitle('Add player')
+    fireEvent.click(addButton)
 
     // Click Invite tab
-    const inviteTab = await screen.findByText("Invite Players 📨");
-    fireEvent.click(inviteTab);
+    const inviteTab = await screen.findByText('Invite Players 📨')
+    fireEvent.click(inviteTab)
 
     // Wait for room creation
     await waitFor(() => {
-      expect(screen.getByText("ABC123")).toBeInTheDocument();
-    });
+      expect(screen.getByText('ABC123')).toBeInTheDocument()
+    })
 
     // Wait 1 full second to catch any delayed disappearance
     await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-    });
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+    })
 
     // Popover should STILL be visible
-    expect(screen.queryByText("Invite Players 📨")).toBeInTheDocument();
-    expect(screen.queryByText("ABC123")).toBeInTheDocument();
-    expect(screen.queryByText("Share Link")).toBeInTheDocument();
-  });
-});
+    expect(screen.queryByText('Invite Players 📨')).toBeInTheDocument()
+    expect(screen.queryByText('ABC123')).toBeInTheDocument()
+    expect(screen.queryByText('Share Link')).toBeInTheDocument()
+  })
+})
diff --git a/apps/web/src/components/nav/__tests__/GameControlButtons.test.tsx b/apps/web/src/components/nav/__tests__/GameControlButtons.test.tsx
index f2cc53d2..397eae41 100644
--- a/apps/web/src/components/nav/__tests__/GameControlButtons.test.tsx
+++ b/apps/web/src/components/nav/__tests__/GameControlButtons.test.tsx
@@ -1,112 +1,102 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { vi } from "vitest";
-import { GameControlButtons } from "../GameControlButtons";
+import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import { GameControlButtons } from '../GameControlButtons'
 
-describe("GameControlButtons", () => {
-  it("renders no buttons when no callbacks provided", () => {
-    const { container } = render(<GameControlButtons />);
-    expect(container.querySelector("button")).not.toBeInTheDocument();
-  });
+describe('GameControlButtons', () => {
+  it('renders no buttons when no callbacks provided', () => {
+    const { container } = render(<GameControlButtons />)
+    expect(container.querySelector('button')).not.toBeInTheDocument()
+  })
 
-  it("renders Setup button when onSetup is provided", () => {
-    const onSetup = vi.fn();
-    render(<GameControlButtons onSetup={onSetup} />);
+  it('renders Setup button when onSetup is provided', () => {
+    const onSetup = vi.fn()
+    render(<GameControlButtons onSetup={onSetup} />)
 
-    const setupButton = screen.getByLabelText("Setup game");
-    expect(setupButton).toBeInTheDocument();
-    expect(setupButton).toHaveTextContent("Setup");
-  });
+    const setupButton = screen.getByLabelText('Setup game')
+    expect(setupButton).toBeInTheDocument()
+    expect(setupButton).toHaveTextContent('Setup')
+  })
 
-  it("renders New Game button when onNewGame is provided", () => {
-    const onNewGame = vi.fn();
-    render(<GameControlButtons onNewGame={onNewGame} />);
+  it('renders New Game button when onNewGame is provided', () => {
+    const onNewGame = vi.fn()
+    render(<GameControlButtons onNewGame={onNewGame} />)
 
-    const newGameButton = screen.getByLabelText("Start new game");
-    expect(newGameButton).toBeInTheDocument();
-    expect(newGameButton).toHaveTextContent("New Game");
-  });
+    const newGameButton = screen.getByLabelText('Start new game')
+    expect(newGameButton).toBeInTheDocument()
+    expect(newGameButton).toHaveTextContent('New Game')
+  })
 
-  it("renders Quit button when onQuit is provided", () => {
-    const onQuit = vi.fn();
-    render(<GameControlButtons onQuit={onQuit} />);
+  it('renders Quit button when onQuit is provided', () => {
+    const onQuit = vi.fn()
+    render(<GameControlButtons onQuit={onQuit} />)
 
-    const quitButton = screen.getByLabelText("Quit to arcade");
-    expect(quitButton).toBeInTheDocument();
-    expect(quitButton).toHaveTextContent("Quit");
-  });
+    const quitButton = screen.getByLabelText('Quit to arcade')
+    expect(quitButton).toBeInTheDocument()
+    expect(quitButton).toHaveTextContent('Quit')
+  })
 
-  it("renders all buttons when all callbacks are provided", () => {
-    const onSetup = vi.fn();
-    const onNewGame = vi.fn();
-    const onQuit = vi.fn();
+  it('renders all buttons when all callbacks are provided', () => {
+    const onSetup = vi.fn()
+    const onNewGame = vi.fn()
+    const onQuit = vi.fn()
 
-    render(
-      <GameControlButtons
-        onSetup={onSetup}
-        onNewGame={onNewGame}
-        onQuit={onQuit}
-      />,
-    );
+    render(<GameControlButtons onSetup={onSetup} onNewGame={onNewGame} onQuit={onQuit} />)
 
-    expect(screen.getByLabelText("Setup game")).toBeInTheDocument();
-    expect(screen.getByLabelText("Start new game")).toBeInTheDocument();
-    expect(screen.getByLabelText("Quit to arcade")).toBeInTheDocument();
-  });
+    expect(screen.getByLabelText('Setup game')).toBeInTheDocument()
+    expect(screen.getByLabelText('Start new game')).toBeInTheDocument()
+    expect(screen.getByLabelText('Quit to arcade')).toBeInTheDocument()
+  })
 
-  it("calls onSetup when Setup button is clicked", () => {
-    const onSetup = vi.fn();
-    render(<GameControlButtons onSetup={onSetup} />);
+  it('calls onSetup when Setup button is clicked', () => {
+    const onSetup = vi.fn()
+    render(<GameControlButtons onSetup={onSetup} />)
 
-    const setupButton = screen.getByLabelText("Setup game");
-    fireEvent.click(setupButton);
+    const setupButton = screen.getByLabelText('Setup game')
+    fireEvent.click(setupButton)
 
-    expect(onSetup).toHaveBeenCalledTimes(1);
-  });
+    expect(onSetup).toHaveBeenCalledTimes(1)
+  })
 
-  it("calls onNewGame when New Game button is clicked", () => {
-    const onNewGame = vi.fn();
-    render(<GameControlButtons onNewGame={onNewGame} />);
+  it('calls onNewGame when New Game button is clicked', () => {
+    const onNewGame = vi.fn()
+    render(<GameControlButtons onNewGame={onNewGame} />)
 
-    const newGameButton = screen.getByLabelText("Start new game");
-    fireEvent.click(newGameButton);
+    const newGameButton = screen.getByLabelText('Start new game')
+    fireEvent.click(newGameButton)
 
-    expect(onNewGame).toHaveBeenCalledTimes(1);
-  });
+    expect(onNewGame).toHaveBeenCalledTimes(1)
+  })
 
-  it("calls onQuit when Quit button is clicked", () => {
-    const onQuit = vi.fn();
-    render(<GameControlButtons onQuit={onQuit} />);
+  it('calls onQuit when Quit button is clicked', () => {
+    const onQuit = vi.fn()
+    render(<GameControlButtons onQuit={onQuit} />)
 
-    const quitButton = screen.getByLabelText("Quit to arcade");
-    fireEvent.click(quitButton);
+    const quitButton = screen.getByLabelText('Quit to arcade')
+    fireEvent.click(quitButton)
 
-    expect(onQuit).toHaveBeenCalledTimes(1);
-  });
+    expect(onQuit).toHaveBeenCalledTimes(1)
+  })
 
-  it("has proper styling to prevent text wrapping", () => {
-    const onNewGame = vi.fn();
-    render(<GameControlButtons onNewGame={onNewGame} />);
+  it('has proper styling to prevent text wrapping', () => {
+    const onNewGame = vi.fn()
+    render(<GameControlButtons onNewGame={onNewGame} />)
 
-    const newGameButton = screen.getByLabelText("Start new game");
-    const textSpan = newGameButton.querySelector("span:last-child");
+    const newGameButton = screen.getByLabelText('Start new game')
+    const textSpan = newGameButton.querySelector('span:last-child')
 
-    expect(textSpan).toHaveStyle({ whiteSpace: "nowrap" });
-  });
+    expect(textSpan).toHaveStyle({ whiteSpace: 'nowrap' })
+  })
 
-  it("container has flexWrap nowrap to prevent button wrapping", () => {
-    const onSetup = vi.fn();
-    const onNewGame = vi.fn();
-    const onQuit = vi.fn();
+  it('container has flexWrap nowrap to prevent button wrapping', () => {
+    const onSetup = vi.fn()
+    const onNewGame = vi.fn()
+    const onQuit = vi.fn()
 
     const { container } = render(
-      <GameControlButtons
-        onSetup={onSetup}
-        onNewGame={onNewGame}
-        onQuit={onQuit}
-      />,
-    );
+      <GameControlButtons onSetup={onSetup} onNewGame={onNewGame} onQuit={onQuit} />
+    )
 
-    const buttonContainer = container.firstChild as HTMLElement;
-    expect(buttonContainer).toHaveStyle({ flexWrap: "nowrap" });
-  });
-});
+    const buttonContainer = container.firstChild as HTMLElement
+    expect(buttonContainer).toHaveStyle({ flexWrap: 'nowrap' })
+  })
+})
diff --git a/apps/web/src/components/nav/types.ts b/apps/web/src/components/nav/types.ts
index b5a1f6d6..7b1ab4c0 100644
--- a/apps/web/src/components/nav/types.ts
+++ b/apps/web/src/components/nav/types.ts
@@ -1,8 +1,8 @@
 export interface PlayerBadge {
-  label: string;
-  icon?: string;
-  background?: string;
-  color?: string;
-  borderColor?: string;
-  shadowColor?: string;
+  label: string
+  icon?: string
+  background?: string
+  color?: string
+  borderColor?: string
+  shadowColor?: string
 }
diff --git a/apps/web/src/components/tutorial/AbacusTest.stories.tsx b/apps/web/src/components/tutorial/AbacusTest.stories.tsx
index 54f3d733..6c5a8d7b 100644
--- a/apps/web/src/components/tutorial/AbacusTest.stories.tsx
+++ b/apps/web/src/components/tutorial/AbacusTest.stories.tsx
@@ -1,10 +1,10 @@
-import { AbacusReact } from "@soroban/abacus-react";
-import type { Meta, StoryObj } from "@storybook/react";
+import { AbacusReact } from '@soroban/abacus-react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 // Test AbacusReact in isolation
 function AbacusTestComponent() {
   return (
-    <div style={{ padding: "20px" }}>
+    <div style={{ padding: '20px' }}>
       <h2>AbacusReact Test</h2>
       <AbacusReact
         value={0}
@@ -12,36 +12,35 @@ function AbacusTestComponent() {
         animated={false}
         scaleFactor={1.5}
         colorScheme="place-value"
-        onValueChange={(value) => console.log("Value changed:", value)}
+        onValueChange={(value) => console.log('Value changed:', value)}
         callbacks={{
-          onBeadClick: (beadInfo) => console.log("Bead clicked:", beadInfo),
+          onBeadClick: (beadInfo) => console.log('Bead clicked:', beadInfo),
         }}
       />
     </div>
-  );
+  )
 }
 
 const meta: Meta<typeof AbacusTestComponent> = {
-  title: "Debug/AbacusTest",
+  title: 'Debug/AbacusTest',
   component: AbacusTestComponent,
   parameters: {
     docs: {
       description: {
-        component:
-          "Test AbacusReact component in isolation to see if it causes the c.some error",
+        component: 'Test AbacusReact component in isolation to see if it causes the c.some error',
       },
     },
   },
-};
+}
 
-export default meta;
-type Story = StoryObj<typeof AbacusTestComponent>;
+export default meta
+type Story = StoryObj<typeof AbacusTestComponent>
 
-export const BasicAbacus: Story = {};
+export const BasicAbacus: Story = {}
 
 export const AbacusWithHighlights: Story = {
   render: () => (
-    <div style={{ padding: "20px" }}>
+    <div style={{ padding: '20px' }}>
       <h2>AbacusReact with Highlights</h2>
       <AbacusReact
         value={3}
@@ -49,21 +48,21 @@ export const AbacusWithHighlights: Story = {
         animated={false}
         scaleFactor={1.5}
         colorScheme="place-value"
-        highlightBeads={[{ columnIndex: 4, beadType: "earth", position: 0 }]}
+        highlightBeads={[{ columnIndex: 4, beadType: 'earth', position: 0 }]}
         customStyles={{
           beads: {
             0: {
               earth: {
-                0: { fill: "#fbbf24", stroke: "#f59e0b", strokeWidth: 3 },
+                0: { fill: '#fbbf24', stroke: '#f59e0b', strokeWidth: 3 },
               },
             },
           },
         }}
-        onValueChange={(value) => console.log("Value changed:", value)}
+        onValueChange={(value) => console.log('Value changed:', value)}
         callbacks={{
-          onBeadClick: (beadInfo) => console.log("Bead clicked:", beadInfo),
+          onBeadClick: (beadInfo) => console.log('Bead clicked:', beadInfo),
         }}
       />
     </div>
   ),
-};
+}
diff --git a/apps/web/src/components/tutorial/AccessControl.stories.tsx b/apps/web/src/components/tutorial/AccessControl.stories.tsx
index 94ae59f5..c5b6bd18 100644
--- a/apps/web/src/components/tutorial/AccessControl.stories.tsx
+++ b/apps/web/src/components/tutorial/AccessControl.stories.tsx
@@ -1,30 +1,24 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import {
-  DevAccessProvider,
-  useEditorAccess,
-} from "../../hooks/useAccessControl";
+import type { Meta, StoryObj } from '@storybook/react'
+import { DevAccessProvider, useEditorAccess } from '../../hooks/useAccessControl'
 
 // Simple component that tests access control
 function AccessControlDisplay() {
-  const access = useEditorAccess();
+  const access = useEditorAccess()
 
   return (
-    <div style={{ padding: "20px", fontFamily: "monospace" }}>
+    <div style={{ padding: '20px', fontFamily: 'monospace' }}>
       <h2>Access Control Test</h2>
       <div>
-        <strong>Can Access Editor:</strong>{" "}
-        {access.canAccessEditor ? "Yes" : "No"}
+        <strong>Can Access Editor:</strong> {access.canAccessEditor ? 'Yes' : 'No'}
       </div>
       <div>
-        <strong>Can Edit Tutorials:</strong>{" "}
-        {access.canEditTutorials ? "Yes" : "No"}
+        <strong>Can Edit Tutorials:</strong> {access.canEditTutorials ? 'Yes' : 'No'}
       </div>
       <div>
-        <strong>Can Publish:</strong>{" "}
-        {access.canPublishTutorials ? "Yes" : "No"}
+        <strong>Can Publish:</strong> {access.canPublishTutorials ? 'Yes' : 'No'}
       </div>
       <div>
-        <strong>Can Delete:</strong> {access.canDeleteTutorials ? "Yes" : "No"}
+        <strong>Can Delete:</strong> {access.canDeleteTutorials ? 'Yes' : 'No'}
       </div>
       {access.reason && (
         <div>
@@ -32,7 +26,7 @@ function AccessControlDisplay() {
         </div>
       )}
     </div>
-  );
+  )
 }
 
 function AccessControlWithProvider() {
@@ -40,27 +34,27 @@ function AccessControlWithProvider() {
     <DevAccessProvider>
       <AccessControlDisplay />
     </DevAccessProvider>
-  );
+  )
 }
 
 const meta: Meta<typeof AccessControlWithProvider> = {
-  title: "Debug/AccessControl",
+  title: 'Debug/AccessControl',
   component: AccessControlWithProvider,
   parameters: {
     docs: {
       description: {
-        component: "Test the access control hook in isolation",
+        component: 'Test the access control hook in isolation',
       },
     },
   },
-};
+}
 
-export default meta;
-type Story = StoryObj<typeof AccessControlWithProvider>;
+export default meta
+type Story = StoryObj<typeof AccessControlWithProvider>
 
-export const WithDevAccess: Story = {};
+export const WithDevAccess: Story = {}
 
 // Test without provider to see if that causes issues
 export const WithoutProvider: Story = {
   render: () => <AccessControlDisplay />,
-};
+}
diff --git a/apps/web/src/components/tutorial/AutoInstructionDemo.tsx b/apps/web/src/components/tutorial/AutoInstructionDemo.tsx
index 8f66f9e9..515b8f10 100644
--- a/apps/web/src/components/tutorial/AutoInstructionDemo.tsx
+++ b/apps/web/src/components/tutorial/AutoInstructionDemo.tsx
@@ -1,47 +1,43 @@
-import { useState } from "react";
-import { css } from "../../../styled-system/css";
-import { hstack, vstack } from "../../../styled-system/patterns";
+import { useState } from 'react'
+import { css } from '../../../styled-system/css'
+import { hstack, vstack } from '../../../styled-system/patterns'
 import {
   generateAbacusInstructions,
   validateInstruction,
-} from "../../utils/abacusInstructionGenerator";
+} from '../../utils/abacusInstructionGenerator'
 
 export function AutoInstructionDemo() {
-  const [startValue, setStartValue] = useState(0);
-  const [targetValue, setTargetValue] = useState(1);
-  const [generatedInstruction, setGeneratedInstruction] = useState<any>(null);
+  const [startValue, setStartValue] = useState(0)
+  const [targetValue, setTargetValue] = useState(1)
+  const [generatedInstruction, setGeneratedInstruction] = useState<any>(null)
 
   const handleGenerate = () => {
-    const instruction = generateAbacusInstructions(startValue, targetValue);
-    const validation = validateInstruction(
-      instruction,
-      startValue,
-      targetValue,
-    );
+    const instruction = generateAbacusInstructions(startValue, targetValue)
+    const validation = validateInstruction(instruction, startValue, targetValue)
 
     setGeneratedInstruction({
       ...instruction,
       validation,
-    });
-  };
+    })
+  }
 
   const presetExamples = [
-    { start: 0, target: 1, name: "Basic: 0 + 1" },
-    { start: 0, target: 5, name: "Heaven: 0 + 5" },
-    { start: 3, target: 7, name: "Five complement: 3 + 4" },
-    { start: 2, target: 5, name: "Five complement: 2 + 3" },
-    { start: 6, target: 8, name: "Direct: 6 + 2" },
-    { start: 7, target: 11, name: "Ten complement: 7 + 4" },
-    { start: 15, target: 23, name: "Multi-place: 15 + 8" },
-  ];
+    { start: 0, target: 1, name: 'Basic: 0 + 1' },
+    { start: 0, target: 5, name: 'Heaven: 0 + 5' },
+    { start: 3, target: 7, name: 'Five complement: 3 + 4' },
+    { start: 2, target: 5, name: 'Five complement: 2 + 3' },
+    { start: 6, target: 8, name: 'Direct: 6 + 2' },
+    { start: 7, target: 11, name: 'Ten complement: 7 + 4' },
+    { start: 15, target: 23, name: 'Multi-place: 15 + 8' },
+  ]
 
   return (
-    <div className={vstack({ gap: 6, p: 6, maxW: "800px", mx: "auto" })}>
+    <div className={vstack({ gap: 6, p: 6, maxW: '800px', mx: 'auto' })}>
       <h2
         className={css({
-          fontSize: "2xl",
-          fontWeight: "bold",
-          textAlign: "center",
+          fontSize: '2xl',
+          fontWeight: 'bold',
+          textAlign: 'center',
         })}
       >
         🤖 Automatic Abacus Instruction Generator
@@ -50,25 +46,23 @@ export function AutoInstructionDemo() {
       <div
         className={css({
           p: 4,
-          bg: "blue.50",
-          borderRadius: "md",
-          border: "1px solid",
-          borderColor: "blue.200",
+          bg: 'blue.50',
+          borderRadius: 'md',
+          border: '1px solid',
+          borderColor: 'blue.200',
         })}
       >
-        <p className={css({ fontSize: "sm", color: "blue.800" })}>
-          Enter any start and target values, and the system will automatically
-          generate correct abacus instructions, including complement operations,
-          multi-step procedures, and proper bead highlighting.
+        <p className={css({ fontSize: 'sm', color: 'blue.800' })}>
+          Enter any start and target values, and the system will automatically generate correct
+          abacus instructions, including complement operations, multi-step procedures, and proper
+          bead highlighting.
         </p>
       </div>
 
       {/* Input Controls */}
-      <div className={hstack({ gap: 4, justifyContent: "center" })}>
+      <div className={hstack({ gap: 4, justifyContent: 'center' })}>
         <div className={vstack({ gap: 2 })}>
-          <label className={css({ fontSize: "sm", fontWeight: "medium" })}>
-            Start Value
-          </label>
+          <label className={css({ fontSize: 'sm', fontWeight: 'medium' })}>Start Value</label>
           <input
             type="number"
             min="0"
@@ -77,23 +71,19 @@ export function AutoInstructionDemo() {
             onChange={(e) => setStartValue(parseInt(e.target.value, 10) || 0)}
             className={css({
               p: 2,
-              border: "1px solid",
-              borderColor: "gray.300",
-              borderRadius: "md",
-              w: "80px",
-              textAlign: "center",
+              border: '1px solid',
+              borderColor: 'gray.300',
+              borderRadius: 'md',
+              w: '80px',
+              textAlign: 'center',
             })}
           />
         </div>
 
-        <div className={css({ alignSelf: "end", fontSize: "2xl", pb: 2 })}>
-          →
-        </div>
+        <div className={css({ alignSelf: 'end', fontSize: '2xl', pb: 2 })}>→</div>
 
         <div className={vstack({ gap: 2 })}>
-          <label className={css({ fontSize: "sm", fontWeight: "medium" })}>
-            Target Value
-          </label>
+          <label className={css({ fontSize: 'sm', fontWeight: 'medium' })}>Target Value</label>
           <input
             type="number"
             min="0"
@@ -102,11 +92,11 @@ export function AutoInstructionDemo() {
             onChange={(e) => setTargetValue(parseInt(e.target.value, 10) || 0)}
             className={css({
               p: 2,
-              border: "1px solid",
-              borderColor: "gray.300",
-              borderRadius: "md",
-              w: "80px",
-              textAlign: "center",
+              border: '1px solid',
+              borderColor: 'gray.300',
+              borderRadius: 'md',
+              w: '80px',
+              textAlign: 'center',
             })}
           />
         </div>
@@ -116,13 +106,13 @@ export function AutoInstructionDemo() {
           className={css({
             px: 4,
             py: 2,
-            bg: "blue.600",
-            color: "white",
-            borderRadius: "md",
-            fontWeight: "medium",
-            cursor: "pointer",
-            alignSelf: "end",
-            _hover: { bg: "blue.700" },
+            bg: 'blue.600',
+            color: 'white',
+            borderRadius: 'md',
+            fontWeight: 'medium',
+            cursor: 'pointer',
+            alignSelf: 'end',
+            _hover: { bg: 'blue.700' },
           })}
         >
           Generate Instructions
@@ -131,34 +121,32 @@ export function AutoInstructionDemo() {
 
       {/* Preset Examples */}
       <div className={vstack({ gap: 3 })}>
-        <h3 className={css({ fontSize: "lg", fontWeight: "medium" })}>
-          Quick Examples:
-        </h3>
+        <h3 className={css({ fontSize: 'lg', fontWeight: 'medium' })}>Quick Examples:</h3>
         <div
           className={css({
-            display: "flex",
-            flexWrap: "wrap",
+            display: 'flex',
+            flexWrap: 'wrap',
             gap: 2,
-            justifyContent: "center",
+            justifyContent: 'center',
           })}
         >
           {presetExamples.map((example, index) => (
             <button
               key={index}
               onClick={() => {
-                setStartValue(example.start);
-                setTargetValue(example.target);
+                setStartValue(example.start)
+                setTargetValue(example.target)
               }}
               className={css({
                 px: 3,
                 py: 1,
-                fontSize: "xs",
-                bg: "gray.100",
-                border: "1px solid",
-                borderColor: "gray.300",
-                borderRadius: "md",
-                cursor: "pointer",
-                _hover: { bg: "gray.200" },
+                fontSize: 'xs',
+                bg: 'gray.100',
+                border: '1px solid',
+                borderColor: 'gray.300',
+                borderRadius: 'md',
+                cursor: 'pointer',
+                _hover: { bg: 'gray.200' },
               })}
             >
               {example.name}
@@ -173,38 +161,32 @@ export function AutoInstructionDemo() {
           className={vstack({
             gap: 4,
             p: 4,
-            bg: "white",
-            border: "2px solid",
-            borderColor: "gray.200",
-            borderRadius: "lg",
+            bg: 'white',
+            border: '2px solid',
+            borderColor: 'gray.200',
+            borderRadius: 'lg',
           })}
         >
           <div
             className={hstack({
-              justifyContent: "space-between",
-              alignItems: "center",
+              justifyContent: 'space-between',
+              alignItems: 'center',
             })}
           >
-            <h3 className={css({ fontSize: "xl", fontWeight: "bold" })}>
+            <h3 className={css({ fontSize: 'xl', fontWeight: 'bold' })}>
               Generated Instructions: {startValue} → {targetValue}
             </h3>
             <div
               className={css({
                 px: 2,
                 py: 1,
-                fontSize: "xs",
-                bg: generatedInstruction.validation.isValid
-                  ? "green.100"
-                  : "red.100",
-                color: generatedInstruction.validation.isValid
-                  ? "green.800"
-                  : "red.800",
-                borderRadius: "md",
+                fontSize: 'xs',
+                bg: generatedInstruction.validation.isValid ? 'green.100' : 'red.100',
+                color: generatedInstruction.validation.isValid ? 'green.800' : 'red.800',
+                borderRadius: 'md',
               })}
             >
-              {generatedInstruction.validation.isValid
-                ? "✅ Valid"
-                : "❌ Invalid"}
+              {generatedInstruction.validation.isValid ? '✅ Valid' : '❌ Invalid'}
             </div>
           </div>
 
@@ -212,47 +194,39 @@ export function AutoInstructionDemo() {
             <div
               className={css({
                 p: 3,
-                bg: "red.50",
-                borderRadius: "md",
-                color: "red.800",
+                bg: 'red.50',
+                borderRadius: 'md',
+                color: 'red.800',
               })}
             >
-              <strong>Issues:</strong>{" "}
-              {generatedInstruction.validation.issues.join(", ")}
+              <strong>Issues:</strong> {generatedInstruction.validation.issues.join(', ')}
             </div>
           )}
 
-          <div className={vstack({ gap: 3, alignItems: "start" })}>
+          <div className={vstack({ gap: 3, alignItems: 'start' })}>
             <div>
-              <strong>Action Type:</strong>{" "}
-              {generatedInstruction.expectedAction}
+              <strong>Action Type:</strong> {generatedInstruction.expectedAction}
             </div>
 
             <div>
-              <strong>Description:</strong>{" "}
-              {generatedInstruction.actionDescription}
+              <strong>Description:</strong> {generatedInstruction.actionDescription}
             </div>
 
             <div>
-              <strong>Highlighted Beads:</strong>{" "}
-              {generatedInstruction.highlightBeads.length}
+              <strong>Highlighted Beads:</strong> {generatedInstruction.highlightBeads.length}
               <ul className={css({ ml: 4, mt: 1 })}>
-                {generatedInstruction.highlightBeads.map(
-                  (bead: any, index: number) => (
-                    <li key={index} className={css({ fontSize: "sm" })}>
-                      Place {bead.placeValue} (
-                      {bead.placeValue === 0
-                        ? "ones"
-                        : bead.placeValue === 1
-                          ? "tens"
-                          : `place ${bead.placeValue}`}
-                      ) -{bead.beadType}{" "}
-                      {bead.position !== undefined
-                        ? `position ${bead.position}`
-                        : "bead"}
-                    </li>
-                  ),
-                )}
+                {generatedInstruction.highlightBeads.map((bead: any, index: number) => (
+                  <li key={index} className={css({ fontSize: 'sm' })}>
+                    Place {bead.placeValue} (
+                    {bead.placeValue === 0
+                      ? 'ones'
+                      : bead.placeValue === 1
+                        ? 'tens'
+                        : `place ${bead.placeValue}`}
+                    ) -{bead.beadType}{' '}
+                    {bead.position !== undefined ? `position ${bead.position}` : 'bead'}
+                  </li>
+                ))}
               </ul>
             </div>
 
@@ -262,37 +236,35 @@ export function AutoInstructionDemo() {
                 <ol className={css({ ml: 4, mt: 1 })}>
                   {generatedInstruction.multiStepInstructions.map(
                     (instruction: string, index: number) => (
-                      <li key={index} className={css({ fontSize: "sm" })}>
+                      <li key={index} className={css({ fontSize: 'sm' })}>
                         {instruction}
                       </li>
-                    ),
+                    )
                   )}
                 </ol>
               </div>
             )}
 
-            <div className={vstack({ gap: 2, alignItems: "start" })}>
+            <div className={vstack({ gap: 2, alignItems: 'start' })}>
               <div>
                 <strong>Tooltip:</strong> {generatedInstruction.tooltip.content}
               </div>
-              <div className={css({ fontSize: "sm", color: "gray.600" })}>
+              <div className={css({ fontSize: 'sm', color: 'gray.600' })}>
                 {generatedInstruction.tooltip.explanation}
               </div>
             </div>
 
-            <div className={vstack({ gap: 1, alignItems: "start" })}>
+            <div className={vstack({ gap: 1, alignItems: 'start' })}>
               <div>
                 <strong>Error Messages:</strong>
               </div>
-              <div className={css({ fontSize: "sm" })}>
-                <strong>Wrong Bead:</strong>{" "}
-                {generatedInstruction.errorMessages.wrongBead}
+              <div className={css({ fontSize: 'sm' })}>
+                <strong>Wrong Bead:</strong> {generatedInstruction.errorMessages.wrongBead}
               </div>
-              <div className={css({ fontSize: "sm" })}>
-                <strong>Wrong Action:</strong>{" "}
-                {generatedInstruction.errorMessages.wrongAction}
+              <div className={css({ fontSize: 'sm' })}>
+                <strong>Wrong Action:</strong> {generatedInstruction.errorMessages.wrongAction}
               </div>
-              <div className={css({ fontSize: "sm" })}>
+              <div className={css({ fontSize: 'sm' })}>
                 <strong>Hint:</strong> {generatedInstruction.errorMessages.hint}
               </div>
             </div>
@@ -300,5 +272,5 @@ export function AutoInstructionDemo() {
         </div>
       )}
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/tutorial/CoachBar/CoachBar.stories.tsx b/apps/web/src/components/tutorial/CoachBar/CoachBar.stories.tsx
index 3dd45801..bd8935e3 100644
--- a/apps/web/src/components/tutorial/CoachBar/CoachBar.stories.tsx
+++ b/apps/web/src/components/tutorial/CoachBar/CoachBar.stories.tsx
@@ -1,49 +1,47 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import type { PedagogicalSegment } from "../DecompositionWithReasons";
-import { TutorialUIProvider } from "../TutorialUIContext";
-import { CoachBar } from "./CoachBar";
-import "./coachbar.css";
+import type { Meta, StoryObj } from '@storybook/react'
+import type { PedagogicalSegment } from '../DecompositionWithReasons'
+import { TutorialUIProvider } from '../TutorialUIContext'
+import { CoachBar } from './CoachBar'
+import './coachbar.css'
 
 // Mock segments for demonstration
-const createMockSegment = (
-  overrides: Partial<PedagogicalSegment> = {},
-): PedagogicalSegment => ({
-  id: "mock-segment-1",
+const createMockSegment = (overrides: Partial<PedagogicalSegment> = {}): PedagogicalSegment => ({
+  id: 'mock-segment-1',
   place: 0,
   digit: 5,
   a: 0,
   L: 0,
   U: 0,
-  goal: "Add 5 to ones place",
+  goal: 'Add 5 to ones place',
   plan: [
     {
-      rule: "Direct",
-      conditions: ["L+d <= 4"],
-      explanation: ["Simple addition"],
+      rule: 'Direct',
+      conditions: ['L+d <= 4'],
+      explanation: ['Simple addition'],
     },
   ],
-  expression: "5",
+  expression: '5',
   termIndices: [0],
   termRange: { startIndex: 0, endIndex: 1 },
   readable: {
-    title: "Direct Move",
-    subtitle: "Simple bead movement",
-    summary: "Add 5 to the ones place using the heaven bead.",
+    title: 'Direct Move',
+    subtitle: 'Simple bead movement',
+    summary: 'Add 5 to the ones place using the heaven bead.',
     chips: [
-      { label: "Digit being added", value: "5" },
-      { label: "Target place", value: "ones" },
+      { label: 'Digit being added', value: '5' },
+      { label: 'Target place', value: 'ones' },
     ],
-    stepsFriendly: ["Press the heaven bead down"],
+    stepsFriendly: ['Press the heaven bead down'],
     validation: { ok: true, issues: [] },
   },
   ...overrides,
-});
+})
 
 const meta: Meta<typeof CoachBar> = {
-  title: "Tutorial/CoachBar",
+  title: 'Tutorial/CoachBar',
   component: CoachBar,
   parameters: {
-    layout: "fullscreen",
+    layout: 'fullscreen',
     docs: {
       description: {
         component: `
@@ -62,29 +60,23 @@ The CoachBar shows contextual guidance during tutorial steps. It displays the cu
   },
   decorators: [
     (Story, context) => {
-      const segment = context.args.mockSegment || null;
-      const canHide = context.args.canHideCoachBar ?? true;
+      const segment = context.args.mockSegment || null
+      const canHide = context.args.canHideCoachBar ?? true
 
       return (
         <TutorialUIProvider initialSegment={segment} canHideCoachBar={canHide}>
-          <div style={{ height: "400px", background: "#f5f5f5" }}>
+          <div style={{ height: '400px', background: '#f5f5f5' }}>
             <Story />
-            <div style={{ padding: "20px", marginTop: "20px" }}>
+            <div style={{ padding: '20px', marginTop: '20px' }}>
               <h3>Tutorial Content Below</h3>
-              <p>
-                This simulates the tutorial content that would appear below the
-                Coach Bar.
-              </p>
-              <p>
-                The Coach Bar is sticky positioned and will stay at the top when
-                scrolling.
-              </p>
+              <p>This simulates the tutorial content that would appear below the Coach Bar.</p>
+              <p>The Coach Bar is sticky positioned and will stay at the top when scrolling.</p>
               <div
                 style={{
-                  height: "300px",
-                  background: "#e0e0e0",
-                  padding: "20px",
-                  marginTop: "20px",
+                  height: '300px',
+                  background: '#e0e0e0',
+                  padding: '20px',
+                  marginTop: '20px',
                 }}
               >
                 <p>More tutorial content...</p>
@@ -92,242 +84,224 @@ The CoachBar shows contextual guidance during tutorial steps. It displays the cu
             </div>
           </div>
         </TutorialUIProvider>
-      );
+      )
     },
   ],
-};
+}
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
     mockSegment: createMockSegment(),
   },
-};
+}
 
 export const DirectMove: Story = {
   args: {
     mockSegment: createMockSegment({
       readable: {
-        title: "Direct Move",
-        subtitle: "Simple bead movement",
-        summary:
-          "Add 3 to the ones place. It fits here, so just move 3 lower beads.",
+        title: 'Direct Move',
+        subtitle: 'Simple bead movement',
+        summary: 'Add 3 to the ones place. It fits here, so just move 3 lower beads.',
         chips: [
-          { label: "Digit being added", value: "3" },
-          { label: "Rod shows", value: "0 (empty)" },
+          { label: 'Digit being added', value: '3' },
+          { label: 'Rod shows', value: '0 (empty)' },
         ],
-        stepsFriendly: ["Move 3 earth beads down"],
+        stepsFriendly: ['Move 3 earth beads down'],
         validation: { ok: true, issues: [] },
       },
     }),
   },
-};
+}
 
 export const FiveComplement: Story = {
   args: {
     mockSegment: createMockSegment({
       readable: {
-        title: "Five Friend",
-        subtitle: "Using pairs that make 5",
+        title: 'Five Friend',
+        subtitle: 'Using pairs that make 5',
         summary:
           "Add 8 to the ones place, but there isn't room for that many lower beads. Use 5's friend: press the heaven bead (5) and lift 2 — that's +5 − 2.",
         chips: [
-          { label: "Target digit", value: "8" },
-          { label: "Five friend", value: "5 - 2 = 3" },
+          { label: 'Target digit', value: '8' },
+          { label: 'Five friend', value: '5 - 2 = 3' },
         ],
         stepsFriendly: [
-          "Press heaven bead down (+5)",
-          "Lift 2 earth beads (-2)",
-          "Result: +5 - 2 = +3, but we wanted +8, so +8 total",
+          'Press heaven bead down (+5)',
+          'Lift 2 earth beads (-2)',
+          'Result: +5 - 2 = +3, but we wanted +8, so +8 total',
         ],
         validation: { ok: true, issues: [] },
       },
     }),
   },
-};
+}
 
 export const TenComplement: Story = {
   args: {
     mockSegment: createMockSegment({
       readable: {
-        title: "Ten Friend",
-        subtitle: "Using pairs that make 10",
+        title: 'Ten Friend',
+        subtitle: 'Using pairs that make 10',
         summary:
           "Add 7 to the ones place to make 10. Carry to tens place, then take 3 here (that's +10 − 3).",
         chips: [
-          { label: "Target digit", value: "7" },
-          { label: "Ten friend", value: "10 - 3 = 7" },
+          { label: 'Target digit', value: '7' },
+          { label: 'Ten friend', value: '10 - 3 = 7' },
         ],
         stepsFriendly: [
-          "Add 1 to tens place (+10)",
-          "Subtract 3 from ones place (-3)",
-          "Result: +10 - 3 = +7",
+          'Add 1 to tens place (+10)',
+          'Subtract 3 from ones place (-3)',
+          'Result: +10 - 3 = +7',
         ],
         validation: { ok: true, issues: [] },
       },
     }),
   },
-};
+}
 
 export const WithLongContent: Story = {
   args: {
     mockSegment: createMockSegment({
       readable: {
-        title: "Complex Chain Reaction",
-        subtitle: "Multiple cascading operations",
+        title: 'Complex Chain Reaction',
+        subtitle: 'Multiple cascading operations',
         summary:
           "Add 9 to the hundreds place to make 10. Since the next rod is also 9, the carry ripples up through multiple places, then take 1 here (that's +10 − 1). This demonstrates how the Coach Bar handles longer content gracefully.",
         chips: [
-          { label: "Starting position", value: "hundreds = 9" },
-          { label: "Cascade effect", value: "ripples to thousands" },
+          { label: 'Starting position', value: 'hundreds = 9' },
+          { label: 'Cascade effect', value: 'ripples to thousands' },
         ],
-        stepsFriendly: ["Complex multi-step operation"],
+        stepsFriendly: ['Complex multi-step operation'],
         validation: { ok: true, issues: [] },
       },
     }),
   },
-};
+}
 
 export const WithMinimalContent: Story = {
   args: {
     mockSegment: createMockSegment({
       readable: {
-        title: "Step",
-        summary: "Short instruction.",
+        title: 'Step',
+        summary: 'Short instruction.',
         chips: [],
         stepsFriendly: [],
         validation: { ok: true, issues: [] },
       },
     }),
   },
-};
+}
 
 export const NoHideButton: Story = {
   args: {
     mockSegment: createMockSegment(),
     canHideCoachBar: false,
   },
-};
+}
 
 export const Hidden: Story = {
   decorators: [
     (_Story) => {
       return (
-        <TutorialUIProvider
-          initialSegment={createMockSegment()}
-          canHideCoachBar
-        >
-          <div
-            style={{ height: "200px", background: "#f5f5f5", padding: "20px" }}
-          >
+        <TutorialUIProvider initialSegment={createMockSegment()} canHideCoachBar>
+          <div style={{ height: '200px', background: '#f5f5f5', padding: '20px' }}>
             <p>
               <strong>Coach Bar is hidden</strong>
             </p>
-            <p>
-              This shows the tutorial content when the Coach Bar has been
-              dismissed.
-            </p>
-            <p>
-              You can toggle the Coach Bar visibility in the Controls panel.
-            </p>
+            <p>This shows the tutorial content when the Coach Bar has been dismissed.</p>
+            <p>You can toggle the Coach Bar visibility in the Controls panel.</p>
           </div>
         </TutorialUIProvider>
-      );
+      )
     },
   ],
   args: {},
-};
+}
 
 export const NoSegment: Story = {
   decorators: [
     (Story) => {
       return (
         <TutorialUIProvider initialSegment={null} canHideCoachBar>
-          <div
-            style={{ height: "200px", background: "#f5f5f5", padding: "20px" }}
-          >
+          <div style={{ height: '200px', background: '#f5f5f5', padding: '20px' }}>
             <Story />
             <p>
               <strong>No active segment</strong>
             </p>
-            <p>
-              When there's no active segment or no summary, the Coach Bar
-              doesn't render.
-            </p>
+            <p>When there's no active segment or no summary, the Coach Bar doesn't render.</p>
           </div>
         </TutorialUIProvider>
-      );
+      )
     },
   ],
   args: {},
-};
+}
 
 export const Interactive: Story = {
   decorators: [
     (Story) => {
       const segments = [
         createMockSegment({
-          id: "step-1",
+          id: 'step-1',
           readable: {
-            title: "Step 1: Direct Move",
-            summary: "Add 2 to the ones place. Simple bead movement.",
-            chips: [{ label: "Action", value: "Move 2 earth beads" }],
+            title: 'Step 1: Direct Move',
+            summary: 'Add 2 to the ones place. Simple bead movement.',
+            chips: [{ label: 'Action', value: 'Move 2 earth beads' }],
             stepsFriendly: [],
             validation: { ok: true, issues: [] },
           },
         }),
         createMockSegment({
-          id: "step-2",
+          id: 'step-2',
           readable: {
-            title: "Step 2: Five Friend",
+            title: 'Step 2: Five Friend',
             summary: "Add 7 to the ones place using 5's friend.",
-            chips: [{ label: "Strategy", value: "5 + 2 = 7" }],
+            chips: [{ label: 'Strategy', value: '5 + 2 = 7' }],
             stepsFriendly: [],
             validation: { ok: true, issues: [] },
           },
         }),
         createMockSegment({
-          id: "step-3",
+          id: 'step-3',
           readable: {
-            title: "Step 3: Complete",
-            summary: "Tutorial step completed successfully!",
-            chips: [{ label: "Result", value: "Target reached" }],
+            title: 'Step 3: Complete',
+            summary: 'Tutorial step completed successfully!',
+            chips: [{ label: 'Result', value: 'Target reached' }],
             stepsFriendly: [],
             validation: { ok: true, issues: [] },
           },
         }),
-      ];
+      ]
 
       return (
         <TutorialUIProvider initialSegment={segments[0]} canHideCoachBar>
-          <div style={{ height: "400px", background: "#f5f5f5" }}>
+          <div style={{ height: '400px', background: '#f5f5f5' }}>
             <Story />
-            <div style={{ padding: "20px" }}>
+            <div style={{ padding: '20px' }}>
               <h3>Interactive Demo</h3>
-              <p>
-                The Coach Bar updates as you progress through tutorial steps.
-              </p>
-              <div style={{ display: "flex", gap: "10px", marginTop: "20px" }}>
+              <p>The Coach Bar updates as you progress through tutorial steps.</p>
+              <div style={{ display: 'flex', gap: '10px', marginTop: '20px' }}>
                 {segments.map((segment, index) => (
                   <button
                     key={segment.id}
                     onClick={() => {
                       // In a real tutorial, this would be handled by tutorial context
                       window.dispatchEvent(
-                        new CustomEvent("demo-segment-change", {
+                        new CustomEvent('demo-segment-change', {
                           detail: segment,
-                        }),
-                      );
+                        })
+                      )
                     }}
                     style={{
-                      padding: "8px 16px",
-                      background: "#007bff",
-                      color: "white",
-                      border: "none",
-                      borderRadius: "4px",
-                      cursor: "pointer",
+                      padding: '8px 16px',
+                      background: '#007bff',
+                      color: 'white',
+                      border: 'none',
+                      borderRadius: '4px',
+                      cursor: 'pointer',
                     }}
                   >
                     Go to Step {index + 1}
@@ -337,8 +311,8 @@ export const Interactive: Story = {
             </div>
           </div>
         </TutorialUIProvider>
-      );
+      )
     },
   ],
   args: {},
-};
+}
diff --git a/apps/web/src/components/tutorial/CoachBar/CoachBar.tsx b/apps/web/src/components/tutorial/CoachBar/CoachBar.tsx
index 1596297b..8227feb7 100644
--- a/apps/web/src/components/tutorial/CoachBar/CoachBar.tsx
+++ b/apps/web/src/components/tutorial/CoachBar/CoachBar.tsx
@@ -1,33 +1,28 @@
-"use client";
+'use client'
 
-import { useTranslations } from "next-intl";
-import type { PedagogicalSegment } from "../DecompositionWithReasons";
-import { useTutorialUI } from "../TutorialUIContext";
+import { useTranslations } from 'next-intl'
+import type { PedagogicalSegment } from '../DecompositionWithReasons'
+import { useTutorialUI } from '../TutorialUIContext'
 
 export function CoachBar() {
-  const ui = useTutorialUI();
-  const t = useTranslations("tutorial.coachBar");
-  const seg: PedagogicalSegment | null = ui.activeSegment;
+  const ui = useTutorialUI()
+  const t = useTranslations('tutorial.coachBar')
+  const seg: PedagogicalSegment | null = ui.activeSegment
 
-  if (!ui.showCoachBar || !seg || !seg.readable?.summary) return null;
+  if (!ui.showCoachBar || !seg || !seg.readable?.summary) return null
 
-  const r = seg.readable;
+  const r = seg.readable
 
   return (
-    <aside
-      className="coachbar"
-      role="status"
-      aria-live="polite"
-      data-test-id="coachbar"
-    >
+    <aside className="coachbar" role="status" aria-live="polite" data-test-id="coachbar">
       <div className="coachbar__row">
-        <div className="coachbar__title">{r.title ?? t("titleFallback")}</div>
+        <div className="coachbar__title">{r.title ?? t('titleFallback')}</div>
         {ui.canHideCoachBar && (
           <button
             type="button"
             className="coachbar__hide"
             onClick={() => ui.setShowCoachBar(false)}
-            aria-label={t("hideAria")}
+            aria-label={t('hideAria')}
           >
             ✕
           </button>
@@ -44,5 +39,5 @@ export function CoachBar() {
         </div>
       )}
     </aside>
-  );
+  )
 }
diff --git a/apps/web/src/components/tutorial/DecompositionWithReasons.tsx b/apps/web/src/components/tutorial/DecompositionWithReasons.tsx
index 7fab4388..7981fd03 100644
--- a/apps/web/src/components/tutorial/DecompositionWithReasons.tsx
+++ b/apps/web/src/components/tutorial/DecompositionWithReasons.tsx
@@ -1,52 +1,48 @@
-"use client";
+'use client'
 
-import type React from "react";
-import { createContext, useContext, useEffect, useMemo } from "react";
-import { ReasonTooltip } from "./ReasonTooltip";
-import { useTutorialContext } from "./TutorialContext";
-import { useTutorialUI } from "./TutorialUIContext";
-import "./decomposition-reasoning.css";
+import type React from 'react'
+import { createContext, useContext, useEffect, useMemo } from 'react'
+import { ReasonTooltip } from './ReasonTooltip'
+import { useTutorialContext } from './TutorialContext'
+import { useTutorialUI } from './TutorialUIContext'
+import './decomposition-reasoning.css'
 
-export type PedagogicalRule =
-  | "Direct"
-  | "FiveComplement"
-  | "TenComplement"
-  | "Cascade";
+export type PedagogicalRule = 'Direct' | 'FiveComplement' | 'TenComplement' | 'Cascade'
 
 export interface SegmentDecision {
-  rule: PedagogicalRule;
-  conditions: string[];
-  explanation: string[];
+  rule: PedagogicalRule
+  conditions: string[]
+  explanation: string[]
 }
 
 export interface PedagogicalSegment {
-  id: string;
-  place: number;
-  digit: number;
-  a: number;
-  L: number;
-  U: 0 | 1;
-  goal: string;
-  plan: SegmentDecision[];
-  expression: string;
-  termIndices: number[];
-  termRange: { startIndex: number; endIndex: number };
+  id: string
+  place: number
+  digit: number
+  a: number
+  L: number
+  U: 0 | 1
+  goal: string
+  plan: SegmentDecision[]
+  expression: string
+  termIndices: number[]
+  termRange: { startIndex: number; endIndex: number }
 }
 
 export interface TermReason {
-  termIndex: number;
-  segmentId: string;
-  rule: PedagogicalRule;
-  shortReason: string;
-  bullets?: string[];
+  termIndex: number
+  segmentId: string
+  rule: PedagogicalRule
+  shortReason: string
+  bullets?: string[]
 }
 
 // Context for tracking active terms to highlight related segments
 interface DecompositionContextType {
-  activeTerms: Set<number>;
-  activeSegmentId: string | null;
-  addActiveTerm: (termIndex: number, segmentId?: string) => void;
-  removeActiveTerm: (termIndex: number, segmentId?: string) => void;
+  activeTerms: Set<number>
+  activeSegmentId: string | null
+  addActiveTerm: (termIndex: number, segmentId?: string) => void
+  removeActiveTerm: (termIndex: number, segmentId?: string) => void
 }
 
 const DecompositionContext = createContext<DecompositionContextType>({
@@ -54,109 +50,94 @@ const DecompositionContext = createContext<DecompositionContextType>({
   activeSegmentId: null,
   addActiveTerm: () => {},
   removeActiveTerm: () => {},
-});
+})
 
 interface DecompositionWithReasonsProps {
-  fullDecomposition: string;
-  termPositions: Array<{ startIndex: number; endIndex: number }>;
-  segments?: PedagogicalSegment[];
-  termReasons?: TermReason[];
+  fullDecomposition: string
+  termPositions: Array<{ startIndex: number; endIndex: number }>
+  segments?: PedagogicalSegment[]
+  termReasons?: TermReason[]
   // NOTE: steps now comes from tutorial context, not props
 }
 
 interface TermSpanProps {
-  termIndex: number;
-  text: string;
-  segment?: PedagogicalSegment;
-  reason?: TermReason;
-  isCurrentStep?: boolean;
+  termIndex: number
+  text: string
+  segment?: PedagogicalSegment
+  reason?: TermReason
+  isCurrentStep?: boolean
 }
 
-function TermSpan({
-  termIndex,
-  text,
-  segment,
-  reason,
-  isCurrentStep = false,
-}: TermSpanProps) {
-  const { activeSegmentId, addActiveTerm, removeActiveTerm } =
-    useContext(DecompositionContext);
-  const rule = reason?.rule ?? segment?.plan[0]?.rule;
+function TermSpan({ termIndex, text, segment, reason, isCurrentStep = false }: TermSpanProps) {
+  const { activeSegmentId, addActiveTerm, removeActiveTerm } = useContext(DecompositionContext)
+  const rule = reason?.rule ?? segment?.plan[0]?.rule
 
   // Only show styling for terms that have pedagogical reasoning
   if (!rule) {
-    return <span className="term term--plain">{text}</span>;
+    return <span className="term term--plain">{text}</span>
   }
 
   // Determine CSS classes based on current step only
   const cssClasses = [
-    "term",
-    isCurrentStep && "term--current", // New class for current step highlighting
+    'term',
+    isCurrentStep && 'term--current', // New class for current step highlighting
   ]
     .filter(Boolean)
-    .join(" ");
+    .join(' ')
 
   // Individual term hover handlers for two-level highlighting
   const handleTermHover = (isHovering: boolean) => {
     if (isHovering) {
-      addActiveTerm(termIndex, segment?.id);
+      addActiveTerm(termIndex, segment?.id)
     } else {
-      removeActiveTerm(termIndex, segment?.id);
+      removeActiveTerm(termIndex, segment?.id)
     }
-  };
+  }
 
   return (
     <span
       className={cssClasses}
       onMouseEnter={() => handleTermHover(true)}
       onMouseLeave={() => handleTermHover(false)}
-      style={{ cursor: "pointer" }}
+      style={{ cursor: 'pointer' }}
     >
       {text}
     </span>
-  );
+  )
 }
 
 // Component for rendering a segment group with unified hover target
 interface SegmentGroupProps {
-  segment: PedagogicalSegment;
-  fullDecomposition: string;
-  termPositions: Array<{ startIndex: number; endIndex: number }>;
-  termReasons?: TermReason[];
-  children: React.ReactNode;
+  segment: PedagogicalSegment
+  fullDecomposition: string
+  termPositions: Array<{ startIndex: number; endIndex: number }>
+  termReasons?: TermReason[]
+  children: React.ReactNode
 }
 
-function SegmentGroup({
-  segment,
-  fullDecomposition,
-  children,
-}: SegmentGroupProps) {
-  const { addActiveTerm, removeActiveTerm } = useContext(DecompositionContext);
+function SegmentGroup({ segment, fullDecomposition, children }: SegmentGroupProps) {
+  const { addActiveTerm, removeActiveTerm } = useContext(DecompositionContext)
 
   // Get steps from tutorial context instead of props
-  const { unifiedSteps: steps } = useTutorialContext();
+  const { unifiedSteps: steps } = useTutorialContext()
 
   // Calculate the original term that was expanded
   // digit * 10^place gives us the original value (e.g., digit=5, place=1 -> 50)
-  const originalValue = (segment.digit * 10 ** segment.place).toString();
+  const originalValue = (segment.digit * 10 ** segment.place).toString()
 
   // Get provenance from the first step in this segment
-  const firstStepIndex = segment.termIndices[0];
-  const firstStep = steps[firstStepIndex];
-  const provenance = firstStep?.provenance;
+  const firstStepIndex = segment.termIndices[0]
+  const firstStep = steps[firstStepIndex]
+  const provenance = firstStep?.provenance
 
   const handleHighlightChange = (active: boolean) => {
     // Only handle highlighting, let HoverCard manage its own open/close timing
     if (active) {
-      segment.termIndices.forEach((termIndex) =>
-        addActiveTerm(termIndex, segment.id),
-      );
+      segment.termIndices.forEach((termIndex) => addActiveTerm(termIndex, segment.id))
     } else {
-      segment.termIndices.forEach((termIndex) =>
-        removeActiveTerm(termIndex, segment.id),
-      );
+      segment.termIndices.forEach((termIndex) => removeActiveTerm(termIndex, segment.id))
     }
-  };
+  }
 
   return (
     <ReasonTooltip
@@ -174,7 +155,7 @@ function SegmentGroup({
         {children}
       </span>
     </ReasonTooltip>
-  );
+  )
 }
 
 export function DecompositionWithReasons({
@@ -192,62 +173,58 @@ export function DecompositionWithReasons({
     setActiveIndividualTermIndex,
     getGroupTermIndicesFromTermIndex,
     unifiedSteps,
-  } = useTutorialContext();
-  const currentStepIndex = state.currentMultiStep;
-  const ui = useTutorialUI();
+  } = useTutorialContext()
+  const currentStepIndex = state.currentMultiStep
+  const ui = useTutorialUI()
 
   // Build segment boundaries and ranges
   const _segmentRanges = useMemo(() => {
-    if (!segments) return [];
+    if (!segments) return []
     return segments
       .map((seg) => ({
         segment: seg,
         startIndex: Math.min(
-          ...seg.termIndices.map(
-            (i) => termPositions[i]?.startIndex ?? Infinity,
-          ),
-        ),
-        endIndex: Math.max(
-          ...seg.termIndices.map((i) => termPositions[i]?.endIndex ?? 0),
+          ...seg.termIndices.map((i) => termPositions[i]?.startIndex ?? Infinity)
         ),
+        endIndex: Math.max(...seg.termIndices.map((i) => termPositions[i]?.endIndex ?? 0)),
       }))
-      .sort((a, b) => a.startIndex - b.startIndex);
-  }, [segments, termPositions]);
+      .sort((a, b) => a.startIndex - b.startIndex)
+  }, [segments, termPositions])
 
   // Build a quick lookup: termIndex -> segment
   const termIndexToSegment = useMemo(() => {
-    const map = new Map<number, PedagogicalSegment>();
-    segments?.forEach((seg) => seg.termIndices.forEach((i) => map.set(i, seg)));
-    return map;
-  }, [segments]);
+    const map = new Map<number, PedagogicalSegment>()
+    segments?.forEach((seg) => seg.termIndices.forEach((i) => map.set(i, seg)))
+    return map
+  }, [segments])
 
   // Update active segment in UI context based on current step
   useEffect(() => {
-    const currentSegment = termIndexToSegment.get(currentStepIndex) || null;
-    ui.setActiveSegment(currentSegment);
-  }, [currentStepIndex, termIndexToSegment, ui]);
+    const currentSegment = termIndexToSegment.get(currentStepIndex) || null
+    ui.setActiveSegment(currentSegment)
+  }, [currentStepIndex, termIndexToSegment, ui])
 
   // Determine which segment should be highlighted based on active terms
   const activeSegmentId = useMemo(() => {
-    if (activeTermIndices.size === 0) return null;
+    if (activeTermIndices.size === 0) return null
 
     // Find the segment that contains any of the active terms
     for (const termIndex of activeTermIndices) {
-      const segment = termIndexToSegment.get(termIndex);
+      const segment = termIndexToSegment.get(termIndex)
       if (segment) {
-        return segment.id;
+        return segment.id
       }
     }
-    return null;
-  }, [activeTermIndices, termIndexToSegment]);
+    return null
+  }, [activeTermIndices, termIndexToSegment])
 
   const addActiveTerm = (termIndex: number, _segmentId?: string) => {
-    console.log("🎯 TERM HOVER START - termIndex:", termIndex);
+    console.log('🎯 TERM HOVER START - termIndex:', termIndex)
 
     // Debug: Get the unified steps to see provenance data
-    const hoveredStep = unifiedSteps[termIndex];
+    const hoveredStep = unifiedSteps[termIndex]
 
-    console.log("📊 Hovered step data:", {
+    console.log('📊 Hovered step data:', {
       termIndex,
       mathematicalTerm: hoveredStep?.mathematicalTerm,
       provenance: hoveredStep?.provenance,
@@ -255,104 +232,97 @@ export function DecompositionWithReasons({
       groupId: hoveredStep?.provenance?.groupId,
       rhsPlace: hoveredStep?.provenance?.rhsPlace,
       rhsValue: hoveredStep?.provenance?.rhsValue,
-    });
+    })
 
     // Set individual term highlight (orange glow)
-    setActiveIndividualTermIndex(termIndex);
-    console.log("🟠 Set individual term highlight:", termIndex);
+    setActiveIndividualTermIndex(termIndex)
+    console.log('🟠 Set individual term highlight:', termIndex)
 
     // Set group term highlights (blue glow) - for complement groups, highlight only the target column
-    const groupTermIndices = getGroupTermIndicesFromTermIndex(termIndex);
-    console.log("🔵 Group term indices found:", groupTermIndices);
+    const groupTermIndices = getGroupTermIndicesFromTermIndex(termIndex)
+    console.log('🔵 Group term indices found:', groupTermIndices)
 
     if (groupTermIndices.length > 0) {
       // Debug: Log all terms in the group
-      console.log("📝 All terms in group:");
+      console.log('📝 All terms in group:')
       groupTermIndices.forEach((idx) => {
-        const step = unifiedSteps[idx];
+        const step = unifiedSteps[idx]
         console.log(
-          `  - Term ${idx}: "${step?.mathematicalTerm}" (termPlace: ${step?.provenance?.termPlace}, rhsPlace: ${step?.provenance?.rhsPlace}, groupId: ${step?.provenance?.groupId})`,
-        );
-      });
+          `  - Term ${idx}: "${step?.mathematicalTerm}" (termPlace: ${step?.provenance?.termPlace}, rhsPlace: ${step?.provenance?.rhsPlace}, groupId: ${step?.provenance?.groupId})`
+        )
+      })
 
       // For complement groups, highlight only the target column (rhsPlace, not individual termPlaces)
       // Use any term from the group since they all share the same rhsPlace (target column)
-      setActiveTermIndices(new Set([termIndex]));
+      setActiveTermIndices(new Set([termIndex]))
       console.log(
-        "🎯 Set group highlight for target column (rhsPlace) using term index:",
-        termIndex,
-      );
+        '🎯 Set group highlight for target column (rhsPlace) using term index:',
+        termIndex
+      )
     } else {
       // This is a standalone term, just highlight it
-      setActiveTermIndices(new Set([termIndex]));
-      console.log("🎯 Set standalone term highlight");
+      setActiveTermIndices(new Set([termIndex]))
+      console.log('🎯 Set standalone term highlight')
     }
 
-    console.log("✅ TERM HOVER COMPLETE");
-  };
+    console.log('✅ TERM HOVER COMPLETE')
+  }
 
   const removeActiveTerm = (termIndex: number, _segmentId?: string) => {
-    console.log("🚫 TERM HOVER END - termIndex:", termIndex);
+    console.log('🚫 TERM HOVER END - termIndex:', termIndex)
 
     // Clear individual term highlight
-    setActiveIndividualTermIndex(null);
-    console.log("🟠 Cleared individual term highlight");
+    setActiveIndividualTermIndex(null)
+    console.log('🟠 Cleared individual term highlight')
 
     // Clear group term highlights
-    setActiveTermIndices(new Set());
-    console.log("🔵 Cleared group term highlights");
-  };
+    setActiveTermIndices(new Set())
+    console.log('🔵 Cleared group term highlights')
+  }
 
   // Slice the decomposition string using termPositions
-  const _pieces: React.ReactNode[] = [];
-  const _cursor = 0;
+  const _pieces: React.ReactNode[] = []
+  const _cursor = 0
 
   // Render elements with segment groupings
   const renderElements = () => {
-    const elements: React.ReactNode[] = [];
-    let cursor = 0;
-    const _currentSegmentIndex = 0;
+    const elements: React.ReactNode[] = []
+    let cursor = 0
+    const _currentSegmentIndex = 0
 
     for (let termIndex = 0; termIndex < termPositions.length; termIndex++) {
-      const { startIndex, endIndex } = termPositions[termIndex];
-      const segment = termIndexToSegment.get(termIndex);
-      const reason = termReasons?.find((r) => r.termIndex === termIndex);
+      const { startIndex, endIndex } = termPositions[termIndex]
+      const segment = termIndexToSegment.get(termIndex)
+      const reason = termReasons?.find((r) => r.termIndex === termIndex)
 
       // Add connector text before this term
       if (cursor < startIndex) {
         elements.push(
-          <span key={`connector-${cursor}`}>
-            {fullDecomposition.slice(cursor, startIndex)}
-          </span>,
-        );
+          <span key={`connector-${cursor}`}>{fullDecomposition.slice(cursor, startIndex)}</span>
+        )
       }
 
       // Check if this term starts a new segment
       if (segment && segment.termIndices[0] === termIndex) {
         // This is the first term of a segment - wrap all segment terms
-        const segmentElements: React.ReactNode[] = [];
-        let segmentCursor = startIndex;
+        const segmentElements: React.ReactNode[] = []
+        let segmentCursor = startIndex
 
         for (const segTermIndex of segment.termIndices) {
-          const segPos = termPositions[segTermIndex];
-          if (!segPos) continue;
+          const segPos = termPositions[segTermIndex]
+          if (!segPos) continue
 
           // Add connector within segment
           if (segmentCursor < segPos.startIndex) {
             segmentElements.push(
               <span key={`seg-connector-${segmentCursor}`}>
                 {fullDecomposition.slice(segmentCursor, segPos.startIndex)}
-              </span>,
-            );
+              </span>
+            )
           }
 
-          const segText = fullDecomposition.slice(
-            segPos.startIndex,
-            segPos.endIndex,
-          );
-          const segReason = termReasons?.find(
-            (r) => r.termIndex === segTermIndex,
-          );
+          const segText = fullDecomposition.slice(segPos.startIndex, segPos.endIndex)
+          const segReason = termReasons?.find((r) => r.termIndex === segTermIndex)
 
           segmentElements.push(
             <TermSpan
@@ -362,10 +332,10 @@ export function DecompositionWithReasons({
               segment={segment}
               reason={segReason}
               isCurrentStep={segTermIndex === currentStepIndex}
-            />,
-          );
+            />
+          )
 
-          segmentCursor = segPos.endIndex;
+          segmentCursor = segPos.endIndex
         }
 
         elements.push(
@@ -377,18 +347,17 @@ export function DecompositionWithReasons({
             termReasons={termReasons}
           >
             {segmentElements}
-          </SegmentGroup>,
-        );
+          </SegmentGroup>
+        )
 
         // Skip ahead past all terms in this segment
-        const lastSegTermIndex =
-          segment.termIndices[segment.termIndices.length - 1];
-        const lastSegPos = termPositions[lastSegTermIndex];
-        cursor = lastSegPos?.endIndex ?? endIndex;
-        termIndex = lastSegTermIndex; // Will be incremented by for loop
+        const lastSegTermIndex = segment.termIndices[segment.termIndices.length - 1]
+        const lastSegPos = termPositions[lastSegTermIndex]
+        cursor = lastSegPos?.endIndex ?? endIndex
+        termIndex = lastSegTermIndex // Will be incremented by for loop
       } else if (!segment) {
         // Regular term not in a segment
-        const termText = fullDecomposition.slice(startIndex, endIndex);
+        const termText = fullDecomposition.slice(startIndex, endIndex)
         elements.push(
           <TermSpan
             key={`term-${termIndex}`}
@@ -397,22 +366,20 @@ export function DecompositionWithReasons({
             segment={segment}
             reason={reason}
             isCurrentStep={termIndex === currentStepIndex}
-          />,
-        );
-        cursor = endIndex;
+          />
+        )
+        cursor = endIndex
       }
       // If this term is part of a segment but not the first, it was already handled above
     }
 
     // Add trailing text
     if (cursor < fullDecomposition.length) {
-      elements.push(
-        <span key="trailing">{fullDecomposition.slice(cursor)}</span>,
-      );
+      elements.push(<span key="trailing">{fullDecomposition.slice(cursor)}</span>)
     }
 
-    return elements;
-  };
+    return elements
+  }
 
   return (
     <DecompositionContext.Provider
@@ -425,5 +392,5 @@ export function DecompositionWithReasons({
     >
       <div className="decomposition">{renderElements()}</div>
     </DecompositionContext.Provider>
-  );
+  )
 }
diff --git a/apps/web/src/components/tutorial/PedagogicalDecompositionDisplay.tsx b/apps/web/src/components/tutorial/PedagogicalDecompositionDisplay.tsx
index 74364b02..37dd93e0 100644
--- a/apps/web/src/components/tutorial/PedagogicalDecompositionDisplay.tsx
+++ b/apps/web/src/components/tutorial/PedagogicalDecompositionDisplay.tsx
@@ -1,41 +1,39 @@
-"use client";
+'use client'
 
 interface DecompositionData {
-  before: string;
-  highlighted: string;
-  after: string;
+  before: string
+  highlighted: string
+  after: string
 }
 
 interface PedagogicalDecompositionDisplayProps {
-  variant: "tooltip" | "guidance";
-  showLabel?: boolean;
-  decomposition: DecompositionData | null;
+  variant: 'tooltip' | 'guidance'
+  showLabel?: boolean
+  decomposition: DecompositionData | null
 }
 
 export function PedagogicalDecompositionDisplay({
-  variant = "guidance",
+  variant = 'guidance',
   showLabel = false,
   decomposition,
 }: PedagogicalDecompositionDisplayProps) {
   if (
     !decomposition ||
-    (!decomposition.before &&
-      !decomposition.highlighted &&
-      !decomposition.after)
+    (!decomposition.before && !decomposition.highlighted && !decomposition.after)
   ) {
-    return null;
+    return null
   }
 
-  if (variant === "tooltip") {
+  if (variant === 'tooltip') {
     return (
       <>
         {showLabel && (
           <div
             style={{
-              fontSize: "10px",
+              fontSize: '10px',
               opacity: 0.7,
-              marginBottom: "2px",
-              textAlign: "center",
+              marginBottom: '2px',
+              textAlign: 'center',
             }}
           >
             Working on:
@@ -43,35 +41,31 @@ export function PedagogicalDecompositionDisplay({
         )}
         <div
           style={{
-            fontSize: "10px",
-            marginBottom: "6px",
-            textAlign: "center",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
+            fontSize: '10px',
+            marginBottom: '6px',
+            textAlign: 'center',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
           }}
         >
-          <span style={{ opacity: 0.4, color: "white" }}>
-            {decomposition.before}
-          </span>
+          <span style={{ opacity: 0.4, color: 'white' }}>{decomposition.before}</span>
           <span
             style={{
-              fontSize: "13px",
-              fontWeight: "bold",
-              color: "#fbbf24",
-              backgroundColor: "rgba(251, 191, 36, 0.2)",
-              padding: "2px 6px",
-              borderRadius: "4px",
-              border: "1px solid rgba(251, 191, 36, 0.4)",
+              fontSize: '13px',
+              fontWeight: 'bold',
+              color: '#fbbf24',
+              backgroundColor: 'rgba(251, 191, 36, 0.2)',
+              padding: '2px 6px',
+              borderRadius: '4px',
+              border: '1px solid rgba(251, 191, 36, 0.4)',
             }}
           >
             {decomposition.highlighted}
           </span>
-          <span style={{ opacity: 0.4, color: "white" }}>
-            {decomposition.after}
-          </span>
+          <span style={{ opacity: 0.4, color: 'white' }}>{decomposition.after}</span>
         </div>
       </>
-    );
+    )
   }
 
   // Guidance variant (existing styles)
@@ -81,21 +75,20 @@ export function PedagogicalDecompositionDisplay({
       <span
         style={{
           background:
-            "linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(147,51,234,0.1) 100%)",
-          color: "#1e3a8a",
-          padding: "4px 8px",
-          borderRadius: "6px",
-          border: "1px solid rgba(59,130,246,0.3)",
-          fontWeight: "600",
-          boxShadow:
-            "0 1px 3px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.6)",
-          backdropFilter: "blur(2px)",
-          display: "inline-block",
+            'linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(147,51,234,0.1) 100%)',
+          color: '#1e3a8a',
+          padding: '4px 8px',
+          borderRadius: '6px',
+          border: '1px solid rgba(59,130,246,0.3)',
+          fontWeight: '600',
+          boxShadow: '0 1px 3px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.6)',
+          backdropFilter: 'blur(2px)',
+          display: 'inline-block',
         }}
       >
         {decomposition.highlighted}
       </span>
       {decomposition.after}
     </span>
-  );
+  )
 }
diff --git a/apps/web/src/components/tutorial/PracticeProblemPlayer.tsx b/apps/web/src/components/tutorial/PracticeProblemPlayer.tsx
index cafe0119..74ff68bb 100644
--- a/apps/web/src/components/tutorial/PracticeProblemPlayer.tsx
+++ b/apps/web/src/components/tutorial/PracticeProblemPlayer.tsx
@@ -1,37 +1,30 @@
-"use client";
+'use client'
 
-import { AbacusReact } from "@soroban/abacus-react";
-import { useCallback, useEffect, useState } from "react";
-import { css } from "../../../styled-system/css";
-import { hstack, vstack } from "../../../styled-system/patterns";
-import type { PracticeStep } from "../../types/tutorial";
-import {
-  type GeneratedProblem,
-  generateProblems,
-} from "../../utils/problemGenerator";
+import { AbacusReact } from '@soroban/abacus-react'
+import { useCallback, useEffect, useState } from 'react'
+import { css } from '../../../styled-system/css'
+import { hstack, vstack } from '../../../styled-system/patterns'
+import type { PracticeStep } from '../../types/tutorial'
+import { type GeneratedProblem, generateProblems } from '../../utils/problemGenerator'
 
 interface PracticeProblemPlayerProps {
-  practiceStep: PracticeStep;
-  onComplete?: (results: PracticeResults) => void;
-  onProblemComplete?: (
-    problemIndex: number,
-    correct: boolean,
-    timeSpent: number,
-  ) => void;
-  className?: string;
+  practiceStep: PracticeStep
+  onComplete?: (results: PracticeResults) => void
+  onProblemComplete?: (problemIndex: number, correct: boolean, timeSpent: number) => void
+  className?: string
 }
 
 export interface PracticeResults {
-  totalProblems: number;
-  correctAnswers: number;
-  totalTime: number;
-  averageTime: number;
+  totalProblems: number
+  correctAnswers: number
+  totalTime: number
+  averageTime: number
   problemResults: Array<{
-    problem: GeneratedProblem;
-    userAnswer: number;
-    correct: boolean;
-    timeSpent: number;
-  }>;
+    problem: GeneratedProblem
+    userAnswer: number
+    correct: boolean
+    timeSpent: number
+  }>
 }
 
 export function PracticeProblemPlayer({
@@ -40,94 +33,83 @@ export function PracticeProblemPlayer({
   onProblemComplete,
   className,
 }: PracticeProblemPlayerProps) {
-  const [problems, setProblems] = useState<GeneratedProblem[]>([]);
-  const [currentProblemIndex, setCurrentProblemIndex] = useState(0);
-  const [currentSequenceStep, setCurrentSequenceStep] = useState(0); // Which number in sequence we're adding
-  const [userAnswer, setUserAnswer] = useState(0);
-  const [isCorrect, setIsCorrect] = useState<boolean | null>(null);
-  const [results, setResults] = useState<PracticeResults["problemResults"]>([]);
-  const [startTime, _setStartTime] = useState<number>(Date.now());
-  const [problemStartTime, setProblemStartTime] = useState<number>(Date.now());
-  const [showExplanation, setShowExplanation] = useState(false);
-  const [isGenerating, setIsGenerating] = useState(true);
-  const [expectedValue, setExpectedValue] = useState(0); // Expected value at current step
+  const [problems, setProblems] = useState<GeneratedProblem[]>([])
+  const [currentProblemIndex, setCurrentProblemIndex] = useState(0)
+  const [currentSequenceStep, setCurrentSequenceStep] = useState(0) // Which number in sequence we're adding
+  const [userAnswer, setUserAnswer] = useState(0)
+  const [isCorrect, setIsCorrect] = useState<boolean | null>(null)
+  const [results, setResults] = useState<PracticeResults['problemResults']>([])
+  const [startTime, _setStartTime] = useState<number>(Date.now())
+  const [problemStartTime, setProblemStartTime] = useState<number>(Date.now())
+  const [showExplanation, setShowExplanation] = useState(false)
+  const [isGenerating, setIsGenerating] = useState(true)
+  const [expectedValue, setExpectedValue] = useState(0) // Expected value at current step
 
   // Generate problems on mount
   useEffect(() => {
-    const generatedProblems = generateProblems(practiceStep);
-    setProblems(generatedProblems);
-    setIsGenerating(false);
-    setProblemStartTime(Date.now());
-  }, [practiceStep]);
+    const generatedProblems = generateProblems(practiceStep)
+    setProblems(generatedProblems)
+    setIsGenerating(false)
+    setProblemStartTime(Date.now())
+  }, [practiceStep])
 
-  const currentProblem = problems[currentProblemIndex];
+  const currentProblem = problems[currentProblemIndex]
 
   // Calculate expected value at current step
-  const calculateExpectedValue = useCallback(
-    (problem: GeneratedProblem, step: number): number => {
-      return problem.terms
-        .slice(0, step + 1)
-        .reduce((sum, term) => sum + term, 0);
-    },
-    [],
-  );
+  const calculateExpectedValue = useCallback((problem: GeneratedProblem, step: number): number => {
+    return problem.terms.slice(0, step + 1).reduce((sum, term) => sum + term, 0)
+  }, [])
 
   // Update expected value when problem or step changes
   useEffect(() => {
     if (currentProblem) {
-      setExpectedValue(
-        calculateExpectedValue(currentProblem, currentSequenceStep),
-      );
+      setExpectedValue(calculateExpectedValue(currentProblem, currentSequenceStep))
     }
-  }, [currentProblem, currentSequenceStep, calculateExpectedValue]);
+  }, [currentProblem, currentSequenceStep, calculateExpectedValue])
 
   // Check answer when user changes abacus value
   const handleValueChange = useCallback(
     (newValue: number) => {
-      setUserAnswer(newValue);
+      setUserAnswer(newValue)
 
       if (currentProblem && newValue === expectedValue) {
-        setIsCorrect(true);
+        setIsCorrect(true)
 
         // Check if this was the final step
         if (currentSequenceStep === currentProblem.terms.length - 1) {
           // Problem completed
-          const timeSpent = Date.now() - problemStartTime;
+          const timeSpent = Date.now() - problemStartTime
 
           const problemResult = {
             problem: currentProblem,
             userAnswer: newValue,
             correct: true,
             timeSpent,
-          };
+          }
 
-          setResults((prev) => [...prev, problemResult]);
-          onProblemComplete?.(currentProblemIndex, true, timeSpent);
+          setResults((prev) => [...prev, problemResult])
+          onProblemComplete?.(currentProblemIndex, true, timeSpent)
 
           // Auto-advance to next problem after delay
           setTimeout(() => {
             if (currentProblemIndex < problems.length - 1) {
-              nextProblem();
+              nextProblem()
             } else {
-              completePractice();
+              completePractice()
             }
-          }, 1500);
+          }, 1500)
         } else {
           // Move to next step in sequence after short delay
           setTimeout(() => {
-            setCurrentSequenceStep((prev) => prev + 1);
-            setIsCorrect(null);
-          }, 800);
+            setCurrentSequenceStep((prev) => prev + 1)
+            setIsCorrect(null)
+          }, 800)
         }
-      } else if (
-        currentProblem &&
-        newValue !== expectedValue &&
-        newValue !== 0
-      ) {
+      } else if (currentProblem && newValue !== expectedValue && newValue !== 0) {
         // User has entered a value but it's wrong
-        setIsCorrect(false);
+        setIsCorrect(false)
       } else {
-        setIsCorrect(null);
+        setIsCorrect(null)
       }
     },
     [
@@ -140,40 +122,40 @@ export function PracticeProblemPlayer({
       onProblemComplete,
       completePractice,
       nextProblem,
-    ],
-  );
+    ]
+  )
 
   // Move to next problem
   const nextProblem = useCallback(() => {
     if (currentProblemIndex < problems.length - 1) {
-      setCurrentProblemIndex((prev) => prev + 1);
-      setCurrentSequenceStep(0);
-      setUserAnswer(0);
-      setIsCorrect(null);
-      setShowExplanation(false);
-      setProblemStartTime(Date.now());
+      setCurrentProblemIndex((prev) => prev + 1)
+      setCurrentSequenceStep(0)
+      setUserAnswer(0)
+      setIsCorrect(null)
+      setShowExplanation(false)
+      setProblemStartTime(Date.now())
     }
-  }, [currentProblemIndex, problems.length]);
+  }, [currentProblemIndex, problems.length])
 
   // Skip current problem (mark as incorrect)
   const skipProblem = useCallback(() => {
     if (currentProblem) {
-      const timeSpent = Date.now() - problemStartTime;
+      const timeSpent = Date.now() - problemStartTime
       const problemResult = {
         problem: currentProblem,
         userAnswer: userAnswer,
         correct: false,
         timeSpent,
-      };
+      }
 
-      setResults((prev) => [...prev, problemResult]);
-      onProblemComplete?.(currentProblemIndex, false, timeSpent);
+      setResults((prev) => [...prev, problemResult])
+      onProblemComplete?.(currentProblemIndex, false, timeSpent)
     }
 
     if (currentProblemIndex < problems.length - 1) {
-      nextProblem();
+      nextProblem()
     } else {
-      completePractice();
+      completePractice()
     }
   }, [
     currentProblem,
@@ -184,20 +166,20 @@ export function PracticeProblemPlayer({
     onProblemComplete,
     nextProblem,
     completePractice,
-  ]);
+  ])
 
   // Reset to start of current problem
   const resetProblem = useCallback(() => {
-    setCurrentSequenceStep(0);
-    setUserAnswer(0);
-    setIsCorrect(null);
-    setProblemStartTime(Date.now());
-  }, []);
+    setCurrentSequenceStep(0)
+    setUserAnswer(0)
+    setIsCorrect(null)
+    setProblemStartTime(Date.now())
+  }, [])
 
   // Complete the practice session
   const completePractice = useCallback(() => {
-    const totalTime = Date.now() - startTime;
-    const correctAnswers = results.filter((r) => r.correct).length;
+    const totalTime = Date.now() - startTime
+    const correctAnswers = results.filter((r) => r.correct).length
 
     const practiceResults: PracticeResults = {
       totalProblems: problems.length,
@@ -205,38 +187,37 @@ export function PracticeProblemPlayer({
       totalTime,
       averageTime: totalTime / problems.length,
       problemResults: results,
-    };
+    }
 
-    onComplete?.(practiceResults);
-  }, [results, problems.length, startTime, onComplete]);
+    onComplete?.(practiceResults)
+  }, [results, problems.length, startTime, onComplete])
 
   // Toggle explanation
   const toggleExplanation = useCallback(() => {
-    setShowExplanation((prev) => !prev);
-  }, []);
+    setShowExplanation((prev) => !prev)
+  }, [])
 
   if (isGenerating) {
     return (
       <div
         className={css({
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "400px",
-          textAlign: "center",
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '400px',
+          textAlign: 'center',
         })}
       >
         <div>
-          <div className={css({ fontSize: "lg", fontWeight: "medium", mb: 2 })}>
+          <div className={css({ fontSize: 'lg', fontWeight: 'medium', mb: 2 })}>
             Generating practice problems...
           </div>
-          <div className={css({ fontSize: "sm", color: "gray.600" })}>
-            Creating {practiceStep.problemCount} problems based on your skill
-            settings
+          <div className={css({ fontSize: 'sm', color: 'gray.600' })}>
+            Creating {practiceStep.problemCount} problems based on your skill settings
           </div>
         </div>
       </div>
-    );
+    )
   }
 
   if (problems.length === 0) {
@@ -244,69 +225,66 @@ export function PracticeProblemPlayer({
       <div
         className={css({
           p: 6,
-          bg: "red.50",
-          border: "1px solid",
-          borderColor: "red.200",
-          borderRadius: "lg",
-          textAlign: "center",
+          bg: 'red.50',
+          border: '1px solid',
+          borderColor: 'red.200',
+          borderRadius: 'lg',
+          textAlign: 'center',
         })}
       >
         <h3
           className={css({
-            fontSize: "lg",
-            fontWeight: "bold",
-            color: "red.800",
+            fontSize: 'lg',
+            fontWeight: 'bold',
+            color: 'red.800',
             mb: 2,
           })}
         >
           No Problems Generated
         </h3>
-        <p className={css({ color: "red.700", mb: 4 })}>
-          Unable to generate problems with the current skill and constraint
-          settings.
+        <p className={css({ color: 'red.700', mb: 4 })}>
+          Unable to generate problems with the current skill and constraint settings.
         </p>
-        <p className={css({ fontSize: "sm", color: "red.600" })}>
+        <p className={css({ fontSize: 'sm', color: 'red.600' })}>
           Try adjusting the skill requirements or number constraints.
         </p>
       </div>
-    );
+    )
   }
 
   if (!currentProblem) {
-    return <div>No current problem available</div>;
+    return <div>No current problem available</div>
   }
 
-  const progress = ((currentProblemIndex + 1) / problems.length) * 100;
+  const progress = ((currentProblemIndex + 1) / problems.length) * 100
 
   return (
     <div
       className={`${css({
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        minHeight: "600px",
-      })} ${className || ""}`}
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        minHeight: '600px',
+      })} ${className || ''}`}
     >
       {/* Header */}
       <div
         className={css({
-          borderBottom: "1px solid",
-          borderColor: "gray.200",
+          borderBottom: '1px solid',
+          borderColor: 'gray.200',
           p: 4,
-          bg: "white",
+          bg: 'white',
         })}
       >
         <div
           className={hstack({
-            justifyContent: "space-between",
-            alignItems: "center",
+            justifyContent: 'space-between',
+            alignItems: 'center',
           })}
         >
           <div>
-            <h2 className={css({ fontSize: "xl", fontWeight: "bold" })}>
-              {practiceStep.title}
-            </h2>
-            <p className={css({ fontSize: "sm", color: "gray.600" })}>
+            <h2 className={css({ fontSize: 'xl', fontWeight: 'bold' })}>{practiceStep.title}</h2>
+            <p className={css({ fontSize: 'sm', color: 'gray.600' })}>
               Problem {currentProblemIndex + 1} of {problems.length}
             </p>
           </div>
@@ -317,14 +295,14 @@ export function PracticeProblemPlayer({
               className={css({
                 px: 3,
                 py: 1,
-                fontSize: "sm",
-                border: "1px solid",
-                borderColor: "blue.300",
-                borderRadius: "md",
-                bg: showExplanation ? "blue.100" : "white",
-                color: "blue.700",
-                cursor: "pointer",
-                _hover: { bg: "blue.50" },
+                fontSize: 'sm',
+                border: '1px solid',
+                borderColor: 'blue.300',
+                borderRadius: 'md',
+                bg: showExplanation ? 'blue.100' : 'white',
+                color: 'blue.700',
+                cursor: 'pointer',
+                _hover: { bg: 'blue.50' },
               })}
             >
               Hint
@@ -335,14 +313,14 @@ export function PracticeProblemPlayer({
               className={css({
                 px: 3,
                 py: 1,
-                fontSize: "sm",
-                border: "1px solid",
-                borderColor: "orange.300",
-                borderRadius: "md",
-                bg: "white",
-                color: "orange.700",
-                cursor: "pointer",
-                _hover: { bg: "orange.50" },
+                fontSize: 'sm',
+                border: '1px solid',
+                borderColor: 'orange.300',
+                borderRadius: 'md',
+                bg: 'white',
+                color: 'orange.700',
+                cursor: 'pointer',
+                _hover: { bg: 'orange.50' },
               })}
             >
               Reset
@@ -353,13 +331,13 @@ export function PracticeProblemPlayer({
               className={css({
                 px: 3,
                 py: 1,
-                fontSize: "sm",
-                border: "1px solid",
-                borderColor: "gray.300",
-                borderRadius: "md",
-                bg: "white",
-                cursor: "pointer",
-                _hover: { bg: "gray.50" },
+                fontSize: 'sm',
+                border: '1px solid',
+                borderColor: 'gray.300',
+                borderRadius: 'md',
+                bg: 'white',
+                cursor: 'pointer',
+                _hover: { bg: 'gray.50' },
               })}
             >
               Skip
@@ -368,15 +346,13 @@ export function PracticeProblemPlayer({
         </div>
 
         {/* Progress bar */}
-        <div
-          className={css({ mt: 3, bg: "gray.200", borderRadius: "full", h: 2 })}
-        >
+        <div className={css({ mt: 3, bg: 'gray.200', borderRadius: 'full', h: 2 })}>
           <div
             className={css({
-              bg: "green.500",
-              h: "full",
-              borderRadius: "full",
-              transition: "width 0.3s ease",
+              bg: 'green.500',
+              h: 'full',
+              borderRadius: 'full',
+              transition: 'width 0.3s ease',
             })}
             style={{ width: `${progress}%` }}
           />
@@ -385,23 +361,23 @@ export function PracticeProblemPlayer({
 
       {/* Main content */}
       <div className={css({ flex: 1, p: 6 })}>
-        <div className={vstack({ gap: 6, alignItems: "center" })}>
+        <div className={vstack({ gap: 6, alignItems: 'center' })}>
           {/* Problem statement */}
-          <div className={css({ textAlign: "center", maxW: "600px" })}>
+          <div className={css({ textAlign: 'center', maxW: '600px' })}>
             {/* Problem display - vertical stack */}
             <div className={css({ mb: 4 })}>
               <div
                 className={css({
-                  display: "inline-block",
-                  textAlign: "right",
-                  fontSize: "2xl",
-                  fontWeight: "bold",
-                  fontFamily: "mono",
-                  bg: "gray.50",
+                  display: 'inline-block',
+                  textAlign: 'right',
+                  fontSize: '2xl',
+                  fontWeight: 'bold',
+                  fontFamily: 'mono',
+                  bg: 'gray.50',
                   p: 4,
-                  border: "1px solid",
-                  borderColor: "gray.200",
-                  borderRadius: "md",
+                  border: '1px solid',
+                  borderColor: 'gray.200',
+                  borderRadius: 'md',
                 })}
               >
                 {currentProblem.terms.map((term, index) => (
@@ -409,8 +385,7 @@ export function PracticeProblemPlayer({
                     key={index}
                     className={css({
                       py: 1,
-                      color:
-                        index <= currentSequenceStep ? "blue.800" : "gray.400",
+                      color: index <= currentSequenceStep ? 'blue.800' : 'gray.400',
                     })}
                   >
                     {term}
@@ -418,11 +393,11 @@ export function PracticeProblemPlayer({
                 ))}
                 <div
                   className={css({
-                    borderTop: "2px solid",
-                    borderColor: "gray.800",
+                    borderTop: '2px solid',
+                    borderColor: 'gray.800',
                     mt: 2,
                     pt: 2,
-                    color: "green.800",
+                    color: 'green.800',
                   })}
                 >
                   {currentProblem.answer}
@@ -432,14 +407,12 @@ export function PracticeProblemPlayer({
 
             {/* Current step */}
             <div className={css({ mb: 3 })}>
-              <h2
-                className={css({ fontSize: "2xl", fontWeight: "bold", mb: 2 })}
-              >
+              <h2 className={css({ fontSize: '2xl', fontWeight: 'bold', mb: 2 })}>
                 {currentSequenceStep === 0
                   ? `Start with 0, then add ${currentProblem.terms[0]}`
                   : `Now add ${currentProblem.terms[currentSequenceStep]}`}
               </h2>
-              <p className={css({ fontSize: "lg", color: "gray.700" })}>
+              <p className={css({ fontSize: 'lg', color: 'gray.700' })}>
                 Step {currentSequenceStep + 1} of {currentProblem.terms.length}
               </p>
             </div>
@@ -449,48 +422,43 @@ export function PracticeProblemPlayer({
               <div
                 className={hstack({
                   gap: 2,
-                  justifyContent: "center",
+                  justifyContent: 'center',
                   mb: 2,
-                  alignItems: "center",
+                  alignItems: 'center',
                 })}
               >
-                <span className={css({ fontSize: "sm", color: "gray.600" })}>
-                  Adding:
-                </span>
+                <span className={css({ fontSize: 'sm', color: 'gray.600' })}>Adding:</span>
                 {currentProblem.terms.map((term, index) => (
                   <div
                     key={index}
                     className={css({
                       px: 2,
                       py: 1,
-                      rounded: "md",
-                      fontSize: "md",
-                      fontWeight: "bold",
-                      fontFamily: "mono",
+                      rounded: 'md',
+                      fontSize: 'md',
+                      fontWeight: 'bold',
+                      fontFamily: 'mono',
                       bg:
                         index < currentSequenceStep
-                          ? "green.100"
+                          ? 'green.100'
                           : index === currentSequenceStep
-                            ? "blue.100"
-                            : "gray.100",
+                            ? 'blue.100'
+                            : 'gray.100',
                       color:
                         index < currentSequenceStep
-                          ? "green.800"
+                          ? 'green.800'
                           : index === currentSequenceStep
-                            ? "blue.800"
-                            : "gray.600",
-                      border: "1px solid",
-                      borderColor:
-                        index === currentSequenceStep
-                          ? "blue.300"
-                          : "transparent",
+                            ? 'blue.800'
+                            : 'gray.600',
+                      border: '1px solid',
+                      borderColor: index === currentSequenceStep ? 'blue.300' : 'transparent',
                     })}
                   >
                     {term}
                   </div>
                 ))}
               </div>
-              <p className={css({ fontSize: "sm", color: "gray.600" })}>
+              <p className={css({ fontSize: 'sm', color: 'gray.600' })}>
                 Target for this step: {expectedValue}
               </p>
             </div>
@@ -501,21 +469,21 @@ export function PracticeProblemPlayer({
                 className={css({
                   px: 2,
                   py: 1,
-                  fontSize: "xs",
-                  fontWeight: "medium",
-                  borderRadius: "md",
+                  fontSize: 'xs',
+                  fontWeight: 'medium',
+                  borderRadius: 'md',
                   bg:
-                    currentProblem.difficulty === "easy"
-                      ? "green.100"
-                      : currentProblem.difficulty === "medium"
-                        ? "yellow.100"
-                        : "red.100",
+                    currentProblem.difficulty === 'easy'
+                      ? 'green.100'
+                      : currentProblem.difficulty === 'medium'
+                        ? 'yellow.100'
+                        : 'red.100',
                   color:
-                    currentProblem.difficulty === "easy"
-                      ? "green.800"
-                      : currentProblem.difficulty === "medium"
-                        ? "yellow.800"
-                        : "red.800",
+                    currentProblem.difficulty === 'easy'
+                      ? 'green.800'
+                      : currentProblem.difficulty === 'medium'
+                        ? 'yellow.800'
+                        : 'red.800',
                 })}
               >
                 {currentProblem.difficulty.charAt(0).toUpperCase() +
@@ -529,12 +497,12 @@ export function PracticeProblemPlayer({
             <div
               className={css({
                 p: 4,
-                bg: "green.50",
-                border: "1px solid",
-                borderColor: "green.200",
-                borderRadius: "md",
-                color: "green.700",
-                maxW: "600px",
+                bg: 'green.50',
+                border: '1px solid',
+                borderColor: 'green.200',
+                borderRadius: 'md',
+                color: 'green.700',
+                maxW: '600px',
               })}
             >
               {currentSequenceStep === currentProblem.terms.length - 1
@@ -547,16 +515,15 @@ export function PracticeProblemPlayer({
             <div
               className={css({
                 p: 4,
-                bg: "red.50",
-                border: "1px solid",
-                borderColor: "red.200",
-                borderRadius: "md",
-                color: "red.700",
-                maxW: "600px",
+                bg: 'red.50',
+                border: '1px solid',
+                borderColor: 'red.200',
+                borderRadius: 'md',
+                color: 'red.700',
+                maxW: '600px',
               })}
             >
-              Not quite right. Current value: {userAnswer}. Target:{" "}
-              {expectedValue}. Keep trying!
+              Not quite right. Current value: {userAnswer}. Target: {expectedValue}. Keep trying!
             </div>
           )}
 
@@ -565,19 +532,18 @@ export function PracticeProblemPlayer({
             <div
               className={css({
                 p: 4,
-                bg: "blue.50",
-                border: "1px solid",
-                borderColor: "blue.200",
-                borderRadius: "md",
-                color: "blue.700",
-                maxW: "600px",
+                bg: 'blue.50',
+                border: '1px solid',
+                borderColor: 'blue.200',
+                borderRadius: 'md',
+                color: 'blue.700',
+                maxW: '600px',
               })}
             >
-              <h4 className={css({ fontWeight: "bold", mb: 2 })}>Hint:</h4>
+              <h4 className={css({ fontWeight: 'bold', mb: 2 })}>Hint:</h4>
               <p>{currentProblem.explanation}</p>
-              <div className={css({ mt: 2, fontSize: "sm" })}>
-                <strong>Skills used:</strong>{" "}
-                {currentProblem.requiredSkills.join(", ")}
+              <div className={css({ mt: 2, fontSize: 'sm' })}>
+                <strong>Skills used:</strong> {currentProblem.requiredSkills.join(', ')}
               </div>
             </div>
           )}
@@ -585,12 +551,12 @@ export function PracticeProblemPlayer({
           {/* Abacus */}
           <div
             className={css({
-              bg: "white",
-              border: "2px solid",
-              borderColor: "gray.200",
-              borderRadius: "lg",
+              bg: 'white',
+              border: '2px solid',
+              borderColor: 'gray.200',
+              borderRadius: 'lg',
               p: 6,
-              shadow: "lg",
+              shadow: 'lg',
             })}
           >
             <AbacusReact
@@ -608,13 +574,13 @@ export function PracticeProblemPlayer({
           <div
             className={css({
               p: 3,
-              bg: "gray.50",
-              border: "1px solid",
-              borderColor: "gray.200",
-              borderRadius: "md",
-              fontSize: "sm",
-              color: "gray.600",
-              textAlign: "center",
+              bg: 'gray.50',
+              border: '1px solid',
+              borderColor: 'gray.200',
+              borderRadius: 'md',
+              fontSize: 'sm',
+              color: 'gray.600',
+              textAlign: 'center',
             })}
           >
             <div>Current step target: {expectedValue}</div>
@@ -624,5 +590,5 @@ export function PracticeProblemPlayer({
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/tutorial/PracticeStepEditor.stories.tsx b/apps/web/src/components/tutorial/PracticeStepEditor.stories.tsx
index bfe52439..ccc202c1 100644
--- a/apps/web/src/components/tutorial/PracticeStepEditor.stories.tsx
+++ b/apps/web/src/components/tutorial/PracticeStepEditor.stories.tsx
@@ -1,13 +1,13 @@
-import { action } from "@storybook/addon-actions";
-import type { Meta, StoryObj } from "@storybook/react";
-import { createBasicSkillSet, createEmptySkillSet } from "../../types/tutorial";
-import { PracticeStepEditor } from "./PracticeStepEditor";
+import { action } from '@storybook/addon-actions'
+import type { Meta, StoryObj } from '@storybook/react'
+import { createBasicSkillSet, createEmptySkillSet } from '../../types/tutorial'
+import { PracticeStepEditor } from './PracticeStepEditor'
 
 const meta: Meta<typeof PracticeStepEditor> = {
-  title: "Tutorial/PracticeStepEditor",
+  title: 'Tutorial/PracticeStepEditor',
   component: PracticeStepEditor,
   parameters: {
-    layout: "padded",
+    layout: 'padded',
     docs: {
       description: {
         component: `
@@ -26,30 +26,29 @@ The editor implements a sophisticated skill-based system where problems are gene
       },
     },
   },
-  tags: ["autodocs"],
-};
+  tags: ['autodocs'],
+}
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 // Basic practice step for beginners
 const basicPracticeStep = {
-  id: "practice-basic",
-  title: "Practice: Basic Addition (1-4)",
-  description: "Practice adding numbers 1-4 using only earth beads",
+  id: 'practice-basic',
+  title: 'Practice: Basic Addition (1-4)',
+  description: 'Practice adding numbers 1-4 using only earth beads',
   problemCount: 12,
   maxTerms: 3,
   requiredSkills: createBasicSkillSet(),
   numberRange: { min: 1, max: 4 },
   sumConstraints: { maxSum: 9 },
-};
+}
 
 // Advanced practice step with five complements
 const fiveComplementsPracticeStep = {
-  id: "practice-five-complements",
-  title: "Practice: Five Complements",
-  description:
-    "Practice using five complement techniques when earth section is full",
+  id: 'practice-five-complements',
+  title: 'Practice: Five Complements',
+  description: 'Practice using five complement techniques when earth section is full',
   problemCount: 15,
   maxTerms: 4,
   requiredSkills: {
@@ -59,29 +58,28 @@ const fiveComplementsPracticeStep = {
       simpleCombinations: true,
     },
     fiveComplements: {
-      "4=5-1": true,
-      "3=5-2": true,
-      "2=5-3": false,
-      "1=5-4": false,
+      '4=5-1': true,
+      '3=5-2': true,
+      '2=5-3': false,
+      '1=5-4': false,
     },
     tenComplements: createEmptySkillSet().tenComplements,
   },
   targetSkills: {
     fiveComplements: {
-      "4=5-1": true,
-      "3=5-2": true,
+      '4=5-1': true,
+      '3=5-2': true,
     },
   },
   numberRange: { min: 1, max: 9 },
   sumConstraints: { maxSum: 9 },
-};
+}
 
 // Advanced practice with ten complements
 const tenComplementsPracticeStep = {
-  id: "practice-ten-complements",
-  title: "Practice: Ten Complements & Carrying",
-  description:
-    "Practice advanced carrying operations using ten complement techniques",
+  id: 'practice-ten-complements',
+  title: 'Practice: Ten Complements & Carrying',
+  description: 'Practice advanced carrying operations using ten complement techniques',
   problemCount: 20,
   maxTerms: 5,
   requiredSkills: {
@@ -91,117 +89,116 @@ const tenComplementsPracticeStep = {
       simpleCombinations: true,
     },
     fiveComplements: {
-      "4=5-1": true,
-      "3=5-2": true,
-      "2=5-3": true,
-      "1=5-4": true,
+      '4=5-1': true,
+      '3=5-2': true,
+      '2=5-3': true,
+      '1=5-4': true,
     },
     tenComplements: {
-      "9=10-1": true,
-      "8=10-2": true,
-      "7=10-3": true,
-      "6=10-4": false,
-      "5=10-5": false,
-      "4=10-6": false,
-      "3=10-7": false,
-      "2=10-8": false,
-      "1=10-9": false,
+      '9=10-1': true,
+      '8=10-2': true,
+      '7=10-3': true,
+      '6=10-4': false,
+      '5=10-5': false,
+      '4=10-6': false,
+      '3=10-7': false,
+      '2=10-8': false,
+      '1=10-9': false,
     },
   },
   targetSkills: {
     tenComplements: {
-      "9=10-1": true,
-      "8=10-2": true,
-      "7=10-3": true,
+      '9=10-1': true,
+      '8=10-2': true,
+      '7=10-3': true,
     },
   },
   numberRange: { min: 1, max: 99 },
   sumConstraints: { maxSum: 99, minSum: 10 },
-};
+}
 
 export const BasicPractice: Story = {
   args: {
     step: basicPracticeStep,
-    onChange: action("practice-step-changed"),
-    onDelete: action("practice-step-deleted"),
+    onChange: action('practice-step-changed'),
+    onDelete: action('practice-step-deleted'),
   },
   parameters: {
     docs: {
       description: {
         story:
-          "Basic practice step configuration for beginners learning earth bead addition (1-4).",
+          'Basic practice step configuration for beginners learning earth bead addition (1-4).',
       },
     },
   },
-};
+}
 
 export const FiveComplements: Story = {
   args: {
     step: fiveComplementsPracticeStep,
-    onChange: action("practice-step-changed"),
-    onDelete: action("practice-step-deleted"),
+    onChange: action('practice-step-changed'),
+    onDelete: action('practice-step-deleted'),
   },
   parameters: {
     docs: {
       description: {
         story:
-          "Practice step focused on five complement techniques (4=5-1, 3=5-2, etc.) with target skills specified.",
+          'Practice step focused on five complement techniques (4=5-1, 3=5-2, etc.) with target skills specified.',
       },
     },
   },
-};
+}
 
 export const TenComplements: Story = {
   args: {
     step: tenComplementsPracticeStep,
-    onChange: action("practice-step-changed"),
-    onDelete: action("practice-step-deleted"),
+    onChange: action('practice-step-changed'),
+    onDelete: action('practice-step-deleted'),
   },
   parameters: {
     docs: {
       description: {
         story:
-          "Advanced practice step with ten complement operations for multi-column arithmetic with carrying.",
+          'Advanced practice step with ten complement operations for multi-column arithmetic with carrying.',
       },
     },
   },
-};
+}
 
 export const EmptyStep: Story = {
   args: {
     step: {
-      id: "practice-empty",
-      title: "New Practice Step",
-      description: "",
+      id: 'practice-empty',
+      title: 'New Practice Step',
+      description: '',
       problemCount: 10,
       maxTerms: 3,
       requiredSkills: createBasicSkillSet(),
     },
-    onChange: action("practice-step-changed"),
-    onDelete: action("practice-step-deleted"),
+    onChange: action('practice-step-changed'),
+    onDelete: action('practice-step-deleted'),
   },
   parameters: {
     docs: {
       description: {
         story:
-          "Empty practice step configuration showing the default state when creating a new practice step.",
+          'Empty practice step configuration showing the default state when creating a new practice step.',
       },
     },
   },
-};
+}
 
 export const WithoutDelete: Story = {
   args: {
     step: basicPracticeStep,
-    onChange: action("practice-step-changed"),
+    onChange: action('practice-step-changed'),
     // onDelete omitted
   },
   parameters: {
     docs: {
       description: {
-        story:
-          "Practice step editor without delete functionality (onDelete prop omitted).",
+        story: 'Practice step editor without delete functionality (onDelete prop omitted).',
       },
     },
   },
-};
+}
diff --git a/apps/web/src/components/tutorial/PracticeStepEditor.tsx b/apps/web/src/components/tutorial/PracticeStepEditor.tsx
index eb2e7978..603c68ff 100644
--- a/apps/web/src/components/tutorial/PracticeStepEditor.tsx
+++ b/apps/web/src/components/tutorial/PracticeStepEditor.tsx
@@ -1,15 +1,15 @@
-"use client";
+'use client'
 
-import { useCallback, useEffect, useState } from "react";
-import { css } from "../../../styled-system/css";
-import { vstack } from "../../../styled-system/patterns";
-import type { PracticeStep } from "../../types/tutorial";
-import { validatePracticeStepConfiguration } from "../../utils/problemGenerator";
+import { useCallback, useEffect, useState } from 'react'
+import { css } from '../../../styled-system/css'
+import { vstack } from '../../../styled-system/patterns'
+import type { PracticeStep } from '../../types/tutorial'
+import { validatePracticeStepConfiguration } from '../../utils/problemGenerator'
 import {
   createBasicAllowedConfiguration,
   skillConfigurationToSkillSets,
-} from "../../utils/skillConfiguration";
-import type { SkillConfiguration } from "./SkillSelector";
+} from '../../utils/skillConfiguration'
+import type { SkillConfiguration } from './SkillSelector'
 import {
   Button,
   EditorLayout,
@@ -18,13 +18,13 @@ import {
   NumberInput,
   Section,
   TextInput,
-} from "./shared/EditorComponents";
+} from './shared/EditorComponents'
 
 interface PracticeStepEditorProps {
-  step: PracticeStep;
-  onChange: (step: PracticeStep) => void;
-  onDelete?: () => void;
-  className?: string;
+  step: PracticeStep
+  onChange: (step: PracticeStep) => void
+  onDelete?: () => void
+  className?: string
 }
 
 export function PracticeStepEditor({
@@ -33,113 +33,112 @@ export function PracticeStepEditor({
   onDelete,
   className,
 }: PracticeStepEditorProps) {
-  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(false)
   const [validationResult, setValidationResult] = useState<ReturnType<
     typeof validatePracticeStepConfiguration
-  > | null>(null);
+  > | null>(null)
   const [skillConfig, setSkillConfig] = useState<SkillConfiguration>(() => {
     // Initialize with a basic configuration for new steps or convert from existing
-    return createBasicAllowedConfiguration();
-  });
+    return createBasicAllowedConfiguration()
+  })
 
   const updateStep = useCallback(
     (updates: Partial<PracticeStep>) => {
-      onChange({ ...step, ...updates });
+      onChange({ ...step, ...updates })
     },
-    [step, onChange],
-  );
+    [step, onChange]
+  )
 
   const updateSkillConfiguration = useCallback(
     (config: SkillConfiguration) => {
-      setSkillConfig(config);
-      const { required, target, forbidden } =
-        skillConfigurationToSkillSets(config);
+      setSkillConfig(config)
+      const { required, target, forbidden } = skillConfigurationToSkillSets(config)
       updateStep({
         requiredSkills: required,
         targetSkills: target,
         forbiddenSkills: forbidden,
-      });
+      })
     },
-    [updateStep],
-  );
+    [updateStep]
+  )
 
   // Helper functions for skill mode management
   const getModeStyles = (skillMode: string): any => {
     switch (skillMode) {
-      case "off":
+      case 'off':
         return {
-          bg: "gray.100",
-          color: "gray.400",
-          border: "1px solid",
-          borderColor: "gray.200",
-        };
-      case "allowed":
+          bg: 'gray.100',
+          color: 'gray.400',
+          border: '1px solid',
+          borderColor: 'gray.200',
+        }
+      case 'allowed':
         return {
-          bg: "green.100",
-          color: "green.800",
-          border: "1px solid",
-          borderColor: "green.300",
-        };
-      case "target":
+          bg: 'green.100',
+          color: 'green.800',
+          border: '1px solid',
+          borderColor: 'green.300',
+        }
+      case 'target':
         return {
-          bg: "blue.100",
-          color: "blue.800",
-          border: "1px solid",
-          borderColor: "blue.300",
-        };
-      case "forbidden":
+          bg: 'blue.100',
+          color: 'blue.800',
+          border: '1px solid',
+          borderColor: 'blue.300',
+        }
+      case 'forbidden':
         return {
-          bg: "red.100",
-          color: "red.800",
-          border: "1px solid",
-          borderColor: "red.300",
-        };
+          bg: 'red.100',
+          color: 'red.800',
+          border: '1px solid',
+          borderColor: 'red.300',
+        }
       default:
         return {
-          bg: "gray.100",
-          color: "gray.600",
-          border: "1px solid",
-          borderColor: "gray.300",
-        };
+          bg: 'gray.100',
+          color: 'gray.600',
+          border: '1px solid',
+          borderColor: 'gray.300',
+        }
     }
-  };
+  }
 
   const getModeIcon = (skillMode: string): string => {
     switch (skillMode) {
-      case "off":
-        return "⚫";
-      case "allowed":
-        return "✅";
-      case "target":
-        return "🎯";
-      case "forbidden":
-        return "❌";
+      case 'off':
+        return '⚫'
+      case 'allowed':
+        return '✅'
+      case 'target':
+        return '🎯'
+      case 'forbidden':
+        return '❌'
       default:
-        return "⚫";
+        return '⚫'
     }
-  };
+  }
 
   const getNextMode = (currentMode: string): string => {
-    const modes = ["off", "allowed", "target", "forbidden"];
-    const currentIndex = modes.indexOf(currentMode);
-    return modes[(currentIndex + 1) % modes.length];
-  };
+    const modes = ['off', 'allowed', 'target', 'forbidden']
+    const currentIndex = modes.indexOf(currentMode)
+    return modes[(currentIndex + 1) % modes.length]
+  }
 
   const updateSkill = useCallback(
     (category: string, skill: string, mode: string) => {
-      const newSkills = { ...skillConfig };
-      if (category === "basic") {
-        newSkills.basic = { ...newSkills.basic, [skill]: mode };
-      } else if (category === "fiveComplements") {
+      const newSkills = { ...skillConfig }
+      if (category === 'basic') {
+        newSkills.basic = { ...newSkills.basic, [skill]: mode }
+      } else if (category === 'fiveComplements') {
         newSkills.fiveComplements = {
           ...newSkills.fiveComplements,
           [skill]: mode,
-        };
+        }
       }
-      updateSkillConfiguration(newSkills);
+      updateSkillConfiguration(newSkills)
     },
-    [skillConfig, updateSkillConfiguration],
-  );
+    [skillConfig, updateSkillConfiguration]
+  )
 
   // Convert partial skill sets to full skill sets for the selector
   const _targetSkillsForSelector: SkillSet = {
@@ -149,88 +148,88 @@ export function PracticeStepEditor({
       simpleCombinations: step.targetSkills?.basic?.simpleCombinations || false,
     },
     fiveComplements: {
-      "4=5-1": step.targetSkills?.fiveComplements?.["4=5-1"] || false,
-      "3=5-2": step.targetSkills?.fiveComplements?.["3=5-2"] || false,
-      "2=5-3": step.targetSkills?.fiveComplements?.["2=5-3"] || false,
-      "1=5-4": step.targetSkills?.fiveComplements?.["1=5-4"] || false,
+      '4=5-1': step.targetSkills?.fiveComplements?.['4=5-1'] || false,
+      '3=5-2': step.targetSkills?.fiveComplements?.['3=5-2'] || false,
+      '2=5-3': step.targetSkills?.fiveComplements?.['2=5-3'] || false,
+      '1=5-4': step.targetSkills?.fiveComplements?.['1=5-4'] || false,
     },
     tenComplements: {
-      "9=10-1": step.targetSkills?.tenComplements?.["9=10-1"] || false,
-      "8=10-2": step.targetSkills?.tenComplements?.["8=10-2"] || false,
-      "7=10-3": step.targetSkills?.tenComplements?.["7=10-3"] || false,
-      "6=10-4": step.targetSkills?.tenComplements?.["6=10-4"] || false,
-      "5=10-5": step.targetSkills?.tenComplements?.["5=10-5"] || false,
-      "4=10-6": step.targetSkills?.tenComplements?.["4=10-6"] || false,
-      "3=10-7": step.targetSkills?.tenComplements?.["3=10-7"] || false,
-      "2=10-8": step.targetSkills?.tenComplements?.["2=10-8"] || false,
-      "1=10-9": step.targetSkills?.tenComplements?.["1=10-9"] || false,
+      '9=10-1': step.targetSkills?.tenComplements?.['9=10-1'] || false,
+      '8=10-2': step.targetSkills?.tenComplements?.['8=10-2'] || false,
+      '7=10-3': step.targetSkills?.tenComplements?.['7=10-3'] || false,
+      '6=10-4': step.targetSkills?.tenComplements?.['6=10-4'] || false,
+      '5=10-5': step.targetSkills?.tenComplements?.['5=10-5'] || false,
+      '4=10-6': step.targetSkills?.tenComplements?.['4=10-6'] || false,
+      '3=10-7': step.targetSkills?.tenComplements?.['3=10-7'] || false,
+      '2=10-8': step.targetSkills?.tenComplements?.['2=10-8'] || false,
+      '1=10-9': step.targetSkills?.tenComplements?.['1=10-9'] || false,
     },
-  };
+  }
 
   // Validate configuration when step changes
   useEffect(() => {
-    const result = validatePracticeStepConfiguration(step);
-    setValidationResult(result);
-  }, [step]);
+    const result = validatePracticeStepConfiguration(step)
+    setValidationResult(result)
+  }, [step])
 
   const presetConfigurations = [
     {
-      name: "Basic Addition Only",
+      name: 'Basic Addition Only',
       config: {
         ...createBasicAllowedConfiguration(),
         basic: {
-          directAddition: "allowed",
-          heavenBead: "off",
-          simpleCombinations: "off",
+          directAddition: 'allowed',
+          heavenBead: 'off',
+          simpleCombinations: 'off',
         },
       } as SkillConfiguration,
     },
     {
-      name: "Practice Heaven Bead",
+      name: 'Practice Heaven Bead',
       config: {
         ...createBasicAllowedConfiguration(),
         basic: {
-          directAddition: "allowed",
-          heavenBead: "target",
-          simpleCombinations: "allowed",
+          directAddition: 'allowed',
+          heavenBead: 'target',
+          simpleCombinations: 'allowed',
         },
       } as SkillConfiguration,
     },
     {
-      name: "Learn Five Complements",
+      name: 'Learn Five Complements',
       config: {
         ...createBasicAllowedConfiguration(),
         basic: {
-          directAddition: "allowed",
-          heavenBead: "allowed",
-          simpleCombinations: "allowed",
+          directAddition: 'allowed',
+          heavenBead: 'allowed',
+          simpleCombinations: 'allowed',
         },
         fiveComplements: {
-          "4=5-1": "target",
-          "3=5-2": "target",
-          "2=5-3": "off",
-          "1=5-4": "off",
+          '4=5-1': 'target',
+          '3=5-2': 'target',
+          '2=5-3': 'off',
+          '1=5-4': 'off',
         },
       } as SkillConfiguration,
     },
     {
-      name: "All Basic Skills",
+      name: 'All Basic Skills',
       config: {
         ...createBasicAllowedConfiguration(),
         basic: {
-          directAddition: "allowed",
-          heavenBead: "allowed",
-          simpleCombinations: "allowed",
+          directAddition: 'allowed',
+          heavenBead: 'allowed',
+          simpleCombinations: 'allowed',
         },
         fiveComplements: {
-          "4=5-1": "allowed",
-          "3=5-2": "allowed",
-          "2=5-3": "allowed",
-          "1=5-4": "allowed",
+          '4=5-1': 'allowed',
+          '3=5-2': 'allowed',
+          '2=5-3': 'allowed',
+          '1=5-4': 'allowed',
         },
       } as SkillConfiguration,
     },
-  ];
+  ]
 
   return (
     <EditorLayout
@@ -289,7 +288,7 @@ export function PracticeStepEditor({
               size="xs"
               title={preset.name}
             >
-              {preset.name.split(" ")[0]}
+              {preset.name.split(' ')[0]}
             </Button>
           ))}
         </GridLayout>
@@ -299,79 +298,70 @@ export function PracticeStepEditor({
       <div
         className={css({
           p: 2,
-          bg: "white",
-          border: "1px solid",
-          borderColor: "gray.200",
-          rounded: "md",
+          bg: 'white',
+          border: '1px solid',
+          borderColor: 'gray.200',
+          rounded: 'md',
         })}
       >
         <h4
           className={css({
-            fontSize: "sm",
-            fontWeight: "medium",
+            fontSize: 'sm',
+            fontWeight: 'medium',
             mb: 2,
-            color: "gray.800",
+            color: 'gray.800',
           })}
         >
           Skills
         </h4>
 
-        <div className={vstack({ gap: 2, alignItems: "stretch" })}>
+        <div className={vstack({ gap: 2, alignItems: 'stretch' })}>
           {/* Basic Operations - Compact */}
           <div>
             <h5
               className={css({
-                fontSize: "xs",
-                fontWeight: "medium",
+                fontSize: 'xs',
+                fontWeight: 'medium',
                 mb: 1,
-                color: "gray.700",
+                color: 'gray.700',
               })}
             >
               Basic
             </h5>
             <div
               className={css({
-                display: "grid",
-                gridTemplateColumns: "1fr 1fr 1fr",
+                display: 'grid',
+                gridTemplateColumns: '1fr 1fr 1fr',
                 gap: 1,
               })}
             >
               {[
-                { key: "directAddition", label: "1-4" },
-                { key: "heavenBead", label: "5" },
-                { key: "simpleCombinations", label: "6-9" },
+                { key: 'directAddition', label: '1-4' },
+                { key: 'heavenBead', label: '5' },
+                { key: 'simpleCombinations', label: '6-9' },
               ].map(({ key, label }) => (
                 <button
                   key={key}
                   onClick={() =>
                     updateSkill(
-                      "basic",
+                      'basic',
                       key,
-                      getNextMode(
-                        skillConfig.basic[
-                          key as keyof typeof skillConfig.basic
-                        ],
-                      ),
+                      getNextMode(skillConfig.basic[key as keyof typeof skillConfig.basic])
                     )
                   }
                   className={css(
                     {
                       px: 1,
                       py: 1,
-                      rounded: "sm",
-                      fontSize: "xs",
-                      cursor: "pointer",
-                      textAlign: "center",
+                      rounded: 'sm',
+                      fontSize: 'xs',
+                      cursor: 'pointer',
+                      textAlign: 'center',
                     },
-                    getModeStyles(
-                      skillConfig.basic[key as keyof typeof skillConfig.basic],
-                    ),
+                    getModeStyles(skillConfig.basic[key as keyof typeof skillConfig.basic])
                   )}
                 >
-                  {getModeIcon(
-                    skillConfig.basic[key as keyof typeof skillConfig.basic],
-                  )}{" "}
-                  {label}
+                  {getModeIcon(skillConfig.basic[key as keyof typeof skillConfig.basic])} {label}
                 </button>
               ))}
             </div>
@@ -381,61 +371,55 @@ export function PracticeStepEditor({
           <div>
             <h5
               className={css({
-                fontSize: "xs",
-                fontWeight: "medium",
+                fontSize: 'xs',
+                fontWeight: 'medium',
                 mb: 1,
-                color: "gray.700",
+                color: 'gray.700',
               })}
             >
               Five Complements
             </h5>
             <div
               className={css({
-                display: "grid",
-                gridTemplateColumns: "1fr 1fr",
+                display: 'grid',
+                gridTemplateColumns: '1fr 1fr',
                 gap: 1,
               })}
             >
               {[
-                { key: "4=5-1", label: "4=5-1" },
-                { key: "3=5-2", label: "3=5-2" },
-                { key: "2=5-3", label: "2=5-3" },
-                { key: "1=5-4", label: "1=5-4" },
+                { key: '4=5-1', label: '4=5-1' },
+                { key: '3=5-2', label: '3=5-2' },
+                { key: '2=5-3', label: '2=5-3' },
+                { key: '1=5-4', label: '1=5-4' },
               ].map(({ key, label }) => (
                 <button
                   key={key}
                   onClick={() =>
                     updateSkill(
-                      "fiveComplements",
+                      'fiveComplements',
                       key,
                       getNextMode(
-                        skillConfig.fiveComplements[
-                          key as keyof typeof skillConfig.fiveComplements
-                        ],
-                      ),
+                        skillConfig.fiveComplements[key as keyof typeof skillConfig.fiveComplements]
+                      )
                     )
                   }
                   className={css(
                     {
                       px: 1,
                       py: 1,
-                      rounded: "sm",
-                      fontSize: "xs",
-                      cursor: "pointer",
-                      textAlign: "center",
+                      rounded: 'sm',
+                      fontSize: 'xs',
+                      cursor: 'pointer',
+                      textAlign: 'center',
                     },
                     getModeStyles(
-                      skillConfig.fiveComplements[
-                        key as keyof typeof skillConfig.fiveComplements
-                      ],
-                    ),
+                      skillConfig.fiveComplements[key as keyof typeof skillConfig.fiveComplements]
+                    )
                   )}
                 >
                   {getModeIcon(
-                    skillConfig.fiveComplements[
-                      key as keyof typeof skillConfig.fiveComplements
-                    ],
-                  )}{" "}
+                    skillConfig.fiveComplements[key as keyof typeof skillConfig.fiveComplements]
+                  )}{' '}
                   {label}
                 </button>
               ))}
@@ -445,12 +429,8 @@ export function PracticeStepEditor({
       </div>
 
       {/* Advanced Toggle */}
-      <Button
-        onClick={() => setShowAdvanced(!showAdvanced)}
-        variant="outline"
-        size="xs"
-      >
-        {showAdvanced ? "▼" : "▶"} Advanced
+      <Button onClick={() => setShowAdvanced(!showAdvanced)} variant="outline" size="xs">
+        {showAdvanced ? '▼' : '▶'} Advanced
       </Button>
 
       {/* Advanced Options */}
@@ -504,7 +484,7 @@ export function PracticeStepEditor({
             />
             <NumberInput
               label="Min Sum"
-              value={step.sumConstraints?.minSum || ""}
+              value={step.sumConstraints?.minSum || ''}
               onChange={(value) =>
                 updateStep({
                   sumConstraints: {
@@ -527,12 +507,12 @@ export function PracticeStepEditor({
           <div
             className={css({
               p: 2,
-              bg: "yellow.50",
-              border: "1px solid",
-              borderColor: "yellow.200",
-              rounded: "sm",
-              fontSize: "xs",
-              color: "yellow.800",
+              bg: 'yellow.50',
+              border: '1px solid',
+              borderColor: 'yellow.200',
+              rounded: 'sm',
+              fontSize: 'xs',
+              color: 'yellow.800',
             })}
           >
             ⚠️ {validationResult.warnings.length} warning(s)
@@ -540,5 +520,5 @@ export function PracticeStepEditor({
         </Section>
       )}
     </EditorLayout>
-  );
+  )
 }
diff --git a/apps/web/src/components/tutorial/ProblemGenerator.stories.tsx b/apps/web/src/components/tutorial/ProblemGenerator.stories.tsx
index 68479500..864a0606 100644
--- a/apps/web/src/components/tutorial/ProblemGenerator.stories.tsx
+++ b/apps/web/src/components/tutorial/ProblemGenerator.stories.tsx
@@ -1,31 +1,27 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import { css } from "../../../styled-system/css";
-import { hstack, vstack } from "../../../styled-system/patterns";
-import { createBasicSkillSet, type PracticeStep } from "../../types/tutorial";
-import {
-  generateProblems,
-  validatePracticeStepConfiguration,
-} from "../../utils/problemGenerator";
-import { PracticeProblemPlayer } from "./PracticeProblemPlayer";
-import { PracticeStepEditor } from "./PracticeStepEditor";
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { css } from '../../../styled-system/css'
+import { hstack, vstack } from '../../../styled-system/patterns'
+import { createBasicSkillSet, type PracticeStep } from '../../types/tutorial'
+import { generateProblems, validatePracticeStepConfiguration } from '../../utils/problemGenerator'
+import { PracticeProblemPlayer } from './PracticeProblemPlayer'
+import { PracticeStepEditor } from './PracticeStepEditor'
 
 const meta: Meta = {
-  title: "Tutorial/Problem Generator",
+  title: 'Tutorial/Problem Generator',
   parameters: {
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
-};
+}
 
-export default meta;
+export default meta
 
 // Demo practice step for testing
 const defaultPracticeStep: PracticeStep = {
-  id: "practice-basic-addition",
-  type: "practice",
-  title: "Basic Addition Practice",
-  description:
-    "Practice basic addition problems using direct addition and heaven bead",
+  id: 'practice-basic-addition',
+  type: 'practice',
+  title: 'Basic Addition Practice',
+  description: 'Practice basic addition problems using direct addition and heaven bead',
   problemCount: 5,
   maxTerms: 3,
   requiredSkills: {
@@ -45,13 +41,13 @@ const defaultPracticeStep: PracticeStep = {
   },
   numberRange: { min: 1, max: 9 },
   sumConstraints: { maxSum: 9 },
-};
+}
 
 const advancedPracticeStep: PracticeStep = {
-  id: "practice-five-complements",
-  type: "practice",
-  title: "Five Complements Practice",
-  description: "Practice problems requiring five complement techniques",
+  id: 'practice-five-complements',
+  type: 'practice',
+  title: 'Five Complements Practice',
+  description: 'Practice problems requiring five complement techniques',
   problemCount: 8,
   maxTerms: 4,
   requiredSkills: {
@@ -62,93 +58,86 @@ const advancedPracticeStep: PracticeStep = {
       simpleCombinations: true,
     },
     fiveComplements: {
-      "4=5-1": true,
-      "3=5-2": true,
-      "2=5-3": false,
-      "1=5-4": false,
+      '4=5-1': true,
+      '3=5-2': true,
+      '2=5-3': false,
+      '1=5-4': false,
     },
   },
   targetSkills: {
     fiveComplements: {
-      "4=5-1": true,
-      "3=5-2": true,
-      "2=5-3": false,
-      "1=5-4": false,
+      '4=5-1': true,
+      '3=5-2': true,
+      '2=5-3': false,
+      '1=5-4': false,
     },
   },
   numberRange: { min: 1, max: 9 },
   sumConstraints: { maxSum: 15 },
-};
+}
 
 // Interactive Problem Generator Demo
 function ProblemGeneratorDemo() {
-  const [practiceStep, setPracticeStep] =
-    useState<PracticeStep>(defaultPracticeStep);
-  const [mode, setMode] = useState<"editor" | "player">("editor");
-  const [generatedProblems, setGeneratedProblems] = useState<any[]>([]);
-  const [validationResult, setValidationResult] = useState<any>(null);
+  const [practiceStep, setPracticeStep] = useState<PracticeStep>(defaultPracticeStep)
+  const [mode, setMode] = useState<'editor' | 'player'>('editor')
+  const [generatedProblems, setGeneratedProblems] = useState<any[]>([])
+  const [validationResult, setValidationResult] = useState<any>(null)
 
   const handleGenerate = () => {
-    const problems = generateProblems(practiceStep);
-    setGeneratedProblems(problems);
+    const problems = generateProblems(practiceStep)
+    setGeneratedProblems(problems)
 
-    const validation = validatePracticeStepConfiguration(practiceStep);
-    setValidationResult(validation);
-  };
+    const validation = validatePracticeStepConfiguration(practiceStep)
+    setValidationResult(validation)
+  }
 
   const handlePracticeComplete = (results: any) => {
-    console.log("Practice completed:", results);
-    alert(
-      `Practice completed! Score: ${results.correctAnswers}/${results.totalProblems}`,
-    );
-  };
+    console.log('Practice completed:', results)
+    alert(`Practice completed! Score: ${results.correctAnswers}/${results.totalProblems}`)
+  }
 
   return (
-    <div
-      className={css({ h: "100vh", display: "flex", flexDirection: "column" })}
-    >
+    <div className={css({ h: '100vh', display: 'flex', flexDirection: 'column' })}>
       {/* Header */}
       <div
         className={css({
-          bg: "white",
-          borderBottom: "1px solid",
-          borderColor: "gray.200",
+          bg: 'white',
+          borderBottom: '1px solid',
+          borderColor: 'gray.200',
           p: 4,
         })}
       >
         <div
           className={hstack({
-            justifyContent: "space-between",
-            alignItems: "center",
+            justifyContent: 'space-between',
+            alignItems: 'center',
           })}
         >
-          <h1 className={css({ fontSize: "2xl", fontWeight: "bold" })}>
-            Problem Generator Demo
-          </h1>
+          <h1 className={css({ fontSize: '2xl', fontWeight: 'bold' })}>Problem Generator Demo</h1>
 
           <div className={hstack({ gap: 2 })}>
             <button
-              onClick={() => setMode("editor")}
+              onClick={() => setMode('editor')}
               className={css({
                 px: 3,
                 py: 2,
-                rounded: "md",
-                bg: mode === "editor" ? "blue.500" : "gray.200",
-                color: mode === "editor" ? "white" : "gray.700",
-                cursor: "pointer",
+                rounded: 'md',
+                bg: mode === 'editor' ? 'blue.500' : 'gray.200',
+                color: mode === 'editor' ? 'white' : 'gray.700',
+                cursor: 'pointer',
               })}
             >
               Editor
             </button>
             <button
-              onClick={() => setMode("player")}
+              onClick={() => setMode('player')}
               className={css({
                 px: 3,
                 py: 2,
-                rounded: "md",
-                bg: mode === "player" ? "blue.500" : "gray.200",
-                color: mode === "player" ? "white" : "gray.700",
-                cursor: "pointer",
+                rounded: 'md',
+                bg: mode === 'player' ? 'blue.500' : 'gray.200',
+                color: mode === 'player' ? 'white' : 'gray.700',
+                cursor: 'pointer',
               })}
             >
               Player
@@ -158,10 +147,10 @@ function ProblemGeneratorDemo() {
               className={css({
                 px: 3,
                 py: 2,
-                rounded: "md",
-                bg: "green.500",
-                color: "white",
-                cursor: "pointer",
+                rounded: 'md',
+                bg: 'green.500',
+                color: 'white',
+                cursor: 'pointer',
               })}
             >
               Generate Problems
@@ -171,29 +160,24 @@ function ProblemGeneratorDemo() {
       </div>
 
       {/* Content */}
-      <div className={css({ flex: 1, display: "flex" })}>
-        {mode === "editor" ? (
-          <div className={css({ w: "100%", display: "flex" })}>
+      <div className={css({ flex: 1, display: 'flex' })}>
+        {mode === 'editor' ? (
+          <div className={css({ w: '100%', display: 'flex' })}>
             {/* Editor */}
-            <div className={css({ w: "50%", p: 4, overflowY: "auto" })}>
-              <PracticeStepEditor
-                step={practiceStep}
-                onChange={setPracticeStep}
-              />
+            <div className={css({ w: '50%', p: 4, overflowY: 'auto' })}>
+              <PracticeStepEditor step={practiceStep} onChange={setPracticeStep} />
             </div>
 
             {/* Generated Problems Display */}
             <div
               className={css({
-                w: "50%",
+                w: '50%',
                 p: 4,
-                bg: "gray.50",
-                overflowY: "auto",
+                bg: 'gray.50',
+                overflowY: 'auto',
               })}
             >
-              <h3
-                className={css({ fontSize: "lg", fontWeight: "bold", mb: 4 })}
-              >
+              <h3 className={css({ fontSize: 'lg', fontWeight: 'bold', mb: 4 })}>
                 Generated Problems ({generatedProblems.length})
               </h3>
 
@@ -202,29 +186,20 @@ function ProblemGeneratorDemo() {
                   className={css({
                     p: 3,
                     mb: 4,
-                    rounded: "md",
-                    bg: validationResult.isValid ? "green.50" : "yellow.50",
-                    border: "1px solid",
-                    borderColor: validationResult.isValid
-                      ? "green.200"
-                      : "yellow.200",
+                    rounded: 'md',
+                    bg: validationResult.isValid ? 'green.50' : 'yellow.50',
+                    border: '1px solid',
+                    borderColor: validationResult.isValid ? 'green.200' : 'yellow.200',
                   })}
                 >
-                  <h4 className={css({ fontWeight: "bold", mb: 2 })}>
-                    {validationResult.isValid
-                      ? "✅ Valid Configuration"
-                      : "⚠️ Configuration Issues"}
+                  <h4 className={css({ fontWeight: 'bold', mb: 2 })}>
+                    {validationResult.isValid ? '✅ Valid Configuration' : '⚠️ Configuration Issues'}
                   </h4>
-                  {validationResult.warnings.map(
-                    (warning: string, i: number) => (
-                      <div
-                        key={i}
-                        className={css({ fontSize: "sm", color: "yellow.700" })}
-                      >
-                        • {warning}
-                      </div>
-                    ),
-                  )}
+                  {validationResult.warnings.map((warning: string, i: number) => (
+                    <div key={i} className={css({ fontSize: 'sm', color: 'yellow.700' })}>
+                      • {warning}
+                    </div>
+                  ))}
                 </div>
               )}
 
@@ -234,27 +209,27 @@ function ProblemGeneratorDemo() {
                     key={problem.id}
                     className={css({
                       p: 3,
-                      bg: "white",
-                      rounded: "md",
-                      border: "1px solid",
-                      borderColor: "gray.200",
+                      bg: 'white',
+                      rounded: 'md',
+                      border: '1px solid',
+                      borderColor: 'gray.200',
                     })}
                   >
                     <div
                       className={hstack({
-                        justifyContent: "space-between",
+                        justifyContent: 'space-between',
                         mb: 2,
                       })}
                     >
-                      <div className={hstack({ gap: 4, alignItems: "center" })}>
+                      <div className={hstack({ gap: 4, alignItems: 'center' })}>
                         <div
                           className={css({
-                            textAlign: "right",
-                            fontFamily: "mono",
-                            fontSize: "sm",
-                            bg: "gray.100",
+                            textAlign: 'right',
+                            fontFamily: 'mono',
+                            fontSize: 'sm',
+                            bg: 'gray.100',
                             p: 2,
-                            rounded: "sm",
+                            rounded: 'sm',
                           })}
                         >
                           {problem.terms.map((term, index) => (
@@ -262,17 +237,15 @@ function ProblemGeneratorDemo() {
                           ))}
                           <div
                             className={css({
-                              borderTop: "1px solid",
-                              borderColor: "gray.400",
+                              borderTop: '1px solid',
+                              borderColor: 'gray.400',
                               pt: 1,
                             })}
                           >
                             {problem.answer}
                           </div>
                         </div>
-                        <span
-                          className={css({ fontSize: "sm", color: "gray.600" })}
-                        >
+                        <span className={css({ fontSize: 'sm', color: 'gray.600' })}>
                           = {problem.answer}
                         </span>
                       </div>
@@ -280,32 +253,28 @@ function ProblemGeneratorDemo() {
                         className={css({
                           px: 2,
                           py: 1,
-                          rounded: "sm",
-                          fontSize: "xs",
+                          rounded: 'sm',
+                          fontSize: 'xs',
                           bg:
-                            problem.difficulty === "easy"
-                              ? "green.100"
-                              : problem.difficulty === "medium"
-                                ? "yellow.100"
-                                : "red.100",
+                            problem.difficulty === 'easy'
+                              ? 'green.100'
+                              : problem.difficulty === 'medium'
+                                ? 'yellow.100'
+                                : 'red.100',
                           color:
-                            problem.difficulty === "easy"
-                              ? "green.800"
-                              : problem.difficulty === "medium"
-                                ? "yellow.800"
-                                : "red.800",
+                            problem.difficulty === 'easy'
+                              ? 'green.800'
+                              : problem.difficulty === 'medium'
+                                ? 'yellow.800'
+                                : 'red.800',
                         })}
                       >
                         {problem.difficulty}
                       </span>
                     </div>
-                    <div className={css({ fontSize: "sm", color: "gray.600" })}>
-                      <div>
-                        Sequential skills: {problem.requiredSkills.join(", ")}
-                      </div>
-                      <div className={css({ mt: 1 })}>
-                        {problem.explanation}
-                      </div>
+                    <div className={css({ fontSize: 'sm', color: 'gray.600' })}>
+                      <div>Sequential skills: {problem.requiredSkills.join(', ')}</div>
+                      <div className={css({ mt: 1 })}>{problem.explanation}</div>
                     </div>
                   </div>
                 ))}
@@ -314,9 +283,9 @@ function ProblemGeneratorDemo() {
               {generatedProblems.length === 0 && (
                 <div
                   className={css({
-                    textAlign: "center",
+                    textAlign: 'center',
                     py: 8,
-                    color: "gray.500",
+                    color: 'gray.500',
                   })}
                 >
                   Click "Generate Problems" to see sample problems
@@ -326,7 +295,7 @@ function ProblemGeneratorDemo() {
           </div>
         ) : (
           /* Player */
-          <div className={css({ w: "100%" })}>
+          <div className={css({ w: '100%' })}>
             <PracticeProblemPlayer
               practiceStep={practiceStep}
               onComplete={handlePracticeComplete}
@@ -335,59 +304,53 @@ function ProblemGeneratorDemo() {
         )}
       </div>
     </div>
-  );
+  )
 }
 
 export const InteractiveDemo: StoryObj = {
   render: () => <ProblemGeneratorDemo />,
-};
+}
 
 export const BasicAdditionPractice: StoryObj = {
   render: () => (
-    <div className={css({ h: "100vh" })}>
+    <div className={css({ h: '100vh' })}>
       <PracticeProblemPlayer
         practiceStep={defaultPracticeStep}
         onComplete={(results) => {
-          console.log("Practice completed:", results);
-          alert(
-            `Practice completed! Score: ${results.correctAnswers}/${results.totalProblems}`,
-          );
+          console.log('Practice completed:', results)
+          alert(`Practice completed! Score: ${results.correctAnswers}/${results.totalProblems}`)
         }}
       />
     </div>
   ),
-};
+}
 
 export const FiveComplementsPractice: StoryObj = {
   render: () => (
-    <div className={css({ h: "100vh" })}>
+    <div className={css({ h: '100vh' })}>
       <PracticeProblemPlayer
         practiceStep={advancedPracticeStep}
         onComplete={(results) => {
-          console.log("Practice completed:", results);
-          alert(
-            `Practice completed! Score: ${results.correctAnswers}/${results.totalProblems}`,
-          );
+          console.log('Practice completed:', results)
+          alert(`Practice completed! Score: ${results.correctAnswers}/${results.totalProblems}`)
         }}
       />
     </div>
   ),
-};
+}
 
 // Extract component wrapper for hooks
 function PracticeStepEditorWrapper() {
-  const [step, setStep] = useState<PracticeStep>(defaultPracticeStep);
+  const [step, setStep] = useState<PracticeStep>(defaultPracticeStep)
 
   return (
-    <div className={css({ p: 6, maxW: "800px", mx: "auto" })}>
-      <h1 className={css({ fontSize: "2xl", fontWeight: "bold", mb: 6 })}>
-        Practice Step Editor
-      </h1>
+    <div className={css({ p: 6, maxW: '800px', mx: 'auto' })}>
+      <h1 className={css({ fontSize: '2xl', fontWeight: 'bold', mb: 6 })}>Practice Step Editor</h1>
       <PracticeStepEditor step={step} onChange={setStep} />
     </div>
-  );
+  )
 }
 
 export const PracticeStepEditorStory: StoryObj = {
   render: () => <PracticeStepEditorWrapper />,
-};
+}
diff --git a/apps/web/src/components/tutorial/ReasonTooltip.tsx b/apps/web/src/components/tutorial/ReasonTooltip.tsx
index 13b70fdd..83fe488b 100644
--- a/apps/web/src/components/tutorial/ReasonTooltip.tsx
+++ b/apps/web/src/components/tutorial/ReasonTooltip.tsx
@@ -1,26 +1,19 @@
-"use client";
+'use client'
 
-import * as HoverCard from "@radix-ui/react-hover-card";
-import { useTranslations } from "next-intl";
-import type React from "react";
-import { useMemo, useState } from "react";
-import type {
-  TermProvenance,
-  UnifiedStepData,
-} from "../../utils/unifiedStepGenerator";
-import type {
-  PedagogicalRule,
-  PedagogicalSegment,
-  TermReason,
-} from "./DecompositionWithReasons";
-import "./reason-tooltip.css";
+import * as HoverCard from '@radix-ui/react-hover-card'
+import { useTranslations } from 'next-intl'
+import type React from 'react'
+import { useMemo, useState } from 'react'
+import type { TermProvenance, UnifiedStepData } from '../../utils/unifiedStepGenerator'
+import type { PedagogicalRule, PedagogicalSegment, TermReason } from './DecompositionWithReasons'
+import './reason-tooltip.css'
 
 // Helper hook to safely access TutorialUI context
 // Check if TutorialUI module is available at module load time
-let useTutorialUIImport: (() => any) | null = null;
+let useTutorialUIImport: (() => any) | null = null
 try {
-  const module = require("./TutorialUIContext");
-  useTutorialUIImport = module.useTutorialUI;
+  const module = require('./TutorialUIContext')
+  useTutorialUIImport = module.useTutorialUI
 } catch {
   // TutorialUI context not available
 }
@@ -28,30 +21,30 @@ try {
 function useTutorialUIGate() {
   if (useTutorialUIImport) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useTutorialUIImport();
+    return useTutorialUIImport()
   }
   // Return a fallback that allows all focus requests (non-tutorial context)
   return {
     requestFocus: () => true,
     releaseFocus: () => {},
-    hintFocus: "none" as const,
-  };
+    hintFocus: 'none' as const,
+  }
 }
 
 interface ReasonTooltipProps {
-  children: React.ReactNode;
-  termIndex: number;
-  segment?: PedagogicalSegment;
-  reason?: TermReason;
-  originalValue?: string;
-  steps?: UnifiedStepData[];
-  provenance?: TermProvenance; // NEW: Provenance data for enhanced tooltips
+  children: React.ReactNode
+  termIndex: number
+  segment?: PedagogicalSegment
+  reason?: TermReason
+  originalValue?: string
+  steps?: UnifiedStepData[]
+  provenance?: TermProvenance // NEW: Provenance data for enhanced tooltips
 }
 
 // Fallback utility for legacy support
 function _getPlaceName(place: number): string {
-  const names = ["ones", "tens", "hundreds", "thousands", "ten-thousands"];
-  return names[place] || `10^${place}`;
+  const names = ['ones', 'tens', 'hundreds', 'thousands', 'ten-thousands']
+  return names[place] || `10^${place}`
 }
 
 export function ReasonTooltip({
@@ -64,141 +57,134 @@ export function ReasonTooltip({
   provenance,
 }: ReasonTooltipProps) {
   // All hooks must be called before early return
-  const [showBeadDetails, setShowBeadDetails] = useState(false);
-  const [showMath, setShowMath] = useState(false);
-  const [showDetails, setShowDetails] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-  const ui = useTutorialUIGate();
-  const t = useTranslations("tutorial.reasonTooltip");
-  const rule = reason?.rule ?? segment?.plan[0]?.rule;
+  const [showBeadDetails, setShowBeadDetails] = useState(false)
+  const [showMath, setShowMath] = useState(false)
+  const [showDetails, setShowDetails] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
+  const ui = useTutorialUIGate()
+  const t = useTranslations('tutorial.reasonTooltip')
+  const rule = reason?.rule ?? segment?.plan[0]?.rule
 
   // Use readable format from segment, enhanced with provenance
-  const readable = segment?.readable;
+  const readable = segment?.readable
 
   const enhancedContent = useMemo(() => {
-    if (!provenance) return null;
+    if (!provenance) return null
 
-    if (rule === "Direct") {
-      const rodChip = readable?.chips.find((c) =>
-        /^(this )?rod shows$/i.test(c.label),
-      );
+    if (rule === 'Direct') {
+      const rodChip = readable?.chips.find((c) => /^(this )?rod shows$/i.test(c.label))
 
       return {
-        title: t("directTitle", {
+        title: t('directTitle', {
           place: provenance.rhsPlaceName,
           digit: provenance.rhsDigit,
           value: provenance.rhsValue,
         }),
-        subtitle: t("directSubtitle", { addend: provenance.rhs }),
+        subtitle: t('directSubtitle', { addend: provenance.rhs }),
         chips: [
           {
-            label: t("digitChip"),
+            label: t('digitChip'),
             value: `${provenance.rhsDigit} (${provenance.rhsPlaceName})`,
           },
-          ...(rodChip ? [{ label: t("rodChip"), value: rodChip.value }] : []),
+          ...(rodChip ? [{ label: t('rodChip'), value: rodChip.value }] : []),
           {
-            label: t("addHereChip"),
+            label: t('addHereChip'),
             value: `+${provenance.rhsDigit} ${provenance.rhsPlaceName} → ${provenance.rhsValue}`,
           },
         ],
-      };
+      }
     }
 
     if (readable) {
       const subtitleParts = [
         readable.subtitle,
-        t("subtitleContext", {
+        t('subtitleContext', {
           addend: provenance.rhs,
           place: provenance.rhsPlaceName,
           digit: provenance.rhsDigit,
         }),
-      ].filter(Boolean);
+      ].filter(Boolean)
 
       return {
         title: readable.title,
-        subtitle: subtitleParts.join(" • "),
+        subtitle: subtitleParts.join(' • '),
         chips: [
           {
-            label: t("sourceDigit"),
+            label: t('sourceDigit'),
             value: `${provenance.rhsDigit} from ${provenance.rhs} (${provenance.rhsPlaceName} place)`,
           },
           ...readable.chips,
         ],
-      };
+      }
     }
 
-    return null;
-  }, [provenance, readable, rule, t]);
+    return null
+  }, [provenance, readable, rule, t])
 
   const ruleInfo = useMemo(() => {
     switch (rule) {
-      case "Direct":
+      case 'Direct':
         return {
-          emoji: "✨",
-          name: t("ruleInfo.Direct.name"),
-          description: t("ruleInfo.Direct.description"),
-          color: "green",
-        };
-      case "FiveComplement":
+          emoji: '✨',
+          name: t('ruleInfo.Direct.name'),
+          description: t('ruleInfo.Direct.description'),
+          color: 'green',
+        }
+      case 'FiveComplement':
         return {
-          emoji: "🤝",
-          name: t("ruleInfo.FiveComplement.name"),
-          description: t("ruleInfo.FiveComplement.description"),
-          color: "blue",
-        };
-      case "TenComplement":
+          emoji: '🤝',
+          name: t('ruleInfo.FiveComplement.name'),
+          description: t('ruleInfo.FiveComplement.description'),
+          color: 'blue',
+        }
+      case 'TenComplement':
         return {
-          emoji: "🔟",
-          name: t("ruleInfo.TenComplement.name"),
-          description: t("ruleInfo.TenComplement.description"),
-          color: "purple",
-        };
-      case "Cascade":
+          emoji: '🔟',
+          name: t('ruleInfo.TenComplement.name'),
+          description: t('ruleInfo.TenComplement.description'),
+          color: 'purple',
+        }
+      case 'Cascade':
         return {
-          emoji: "🌊",
-          name: t("ruleInfo.Cascade.name"),
-          description: t("ruleInfo.Cascade.description"),
-          color: "orange",
-        };
+          emoji: '🌊',
+          name: t('ruleInfo.Cascade.name'),
+          description: t('ruleInfo.Cascade.description'),
+          color: 'orange',
+        }
       default:
         return {
-          emoji: "💭",
-          name: t("ruleInfo.Fallback.name"),
-          description: t("ruleInfo.Fallback.description"),
-          color: "gray",
-        };
+          emoji: '💭',
+          name: t('ruleInfo.Fallback.name'),
+          description: t('ruleInfo.Fallback.description'),
+          color: 'gray',
+        }
     }
-  }, [rule, t]);
+  }, [rule, t])
 
-  const fromPrefix = t("fromPrefix");
+  const fromPrefix = t('fromPrefix')
 
   if (!rule) {
-    return <>{children}</>;
+    return <>{children}</>
   }
 
-  const contentClasses = `reason-tooltip reason-tooltip--${ruleInfo.color}`;
+  const contentClasses = `reason-tooltip reason-tooltip--${ruleInfo.color}`
 
-  const tooltipId = `tooltip-${termIndex}`;
+  const tooltipId = `tooltip-${termIndex}`
 
   const handleOpenChange = (open: boolean) => {
     if (open) {
-      const granted = ui.requestFocus("term");
+      const granted = ui.requestFocus('term')
       if (granted) {
-        setIsOpen(true);
+        setIsOpen(true)
       }
     } else {
-      ui.releaseFocus("term");
-      setIsOpen(false);
+      ui.releaseFocus('term')
+      setIsOpen(false)
     }
-  };
+  }
 
   return (
-    <HoverCard.Root
-      open={isOpen}
-      onOpenChange={handleOpenChange}
-      openDelay={150}
-      closeDelay={400}
-    >
+    <HoverCard.Root open={isOpen} onOpenChange={handleOpenChange} openDelay={150} closeDelay={400}>
       <HoverCard.Trigger asChild>
         <span aria-describedby={`${tooltipId}-description`}>{children}</span>
       </HoverCard.Trigger>
@@ -218,13 +204,8 @@ export function ReasonTooltip({
                 <h4 className="reason-tooltip__name">
                   {enhancedContent?.title || readable?.title || ruleInfo.name}
                 </h4>
-                <p
-                  id={`${tooltipId}-description`}
-                  className="reason-tooltip__description"
-                >
-                  {enhancedContent?.subtitle ||
-                    readable?.subtitle ||
-                    ruleInfo.description}
+                <p id={`${tooltipId}-description`} className="reason-tooltip__description">
+                  {enhancedContent?.subtitle || readable?.subtitle || ruleInfo.description}
                 </p>
               </div>
             </div>
@@ -232,20 +213,18 @@ export function ReasonTooltip({
             {/* Primary, concise explanation */}
             {segment?.readable?.summary && (
               <div className="reason-tooltip__summary">
-                <p className="reason-tooltip__explanation-text">
-                  {segment.readable.summary}
-                </p>
+                <p className="reason-tooltip__explanation-text">{segment.readable.summary}</p>
               </div>
             )}
 
             {/* Optional provenance nudge (avoid duplicating subtitle) */}
             {provenance &&
-              !(enhancedContent?.subtitle || readable?.subtitle || "").includes(
-                `${fromPrefix} `,
+              !(enhancedContent?.subtitle || readable?.subtitle || '').includes(
+                `${fromPrefix} `
               ) && (
                 <div className="reason-tooltip__reasoning">
                   <p className="reason-tooltip__explanation-text">
-                    {t("reasoning", {
+                    {t('reasoning', {
                       addend: provenance.rhs,
                       place: provenance.rhsPlaceName,
                       digit: provenance.rhsDigit,
@@ -268,13 +247,11 @@ export function ReasonTooltip({
                   type="button"
                 >
                   <span className="reason-tooltip__details-label">
-                    {t("details.toggle")}
+                    {t('details.toggle')}
                     <span
                       className="reason-tooltip__chevron"
                       style={{
-                        transform: showDetails
-                          ? "rotate(180deg)"
-                          : "rotate(0deg)",
+                        transform: showDetails ? 'rotate(180deg)' : 'rotate(0deg)',
                       }}
                     >
                       ▼
@@ -283,19 +260,12 @@ export function ReasonTooltip({
                 </button>
 
                 {showDetails && (
-                  <div
-                    id={`${tooltipId}-details`}
-                    className="reason-tooltip__details-content"
-                  >
+                  <div id={`${tooltipId}-details`} className="reason-tooltip__details-content">
                     {/* Context chips */}
                     {(enhancedContent?.chips || readable?.chips)?.length ? (
                       <div className="reason-tooltip__context">
                         <dl className="reason-tooltip__chips">
-                          {(
-                            enhancedContent?.chips ||
-                            readable?.chips ||
-                            []
-                          ).map((chip, index) => (
+                          {(enhancedContent?.chips || readable?.chips || []).map((chip, index) => (
                             <div key={index} className="reason-tooltip__chip">
                               <dt>{chip.label}</dt>
                               <dd>{chip.value}</dd>
@@ -306,15 +276,13 @@ export function ReasonTooltip({
                     ) : null}
 
                     {/* Carry path only when it's interesting (cascades) */}
-                    {segment?.plan?.some((p) => p.rule === "Cascade") &&
-                      readable?.carryPath && (
-                        <div className="reason-tooltip__carry-path">
-                          <p className="reason-tooltip__carry-description">
-                            <strong>{t("details.carryPath")}</strong>{" "}
-                            {readable.carryPath}
-                          </p>
-                        </div>
-                      )}
+                    {segment?.plan?.some((p) => p.rule === 'Cascade') && readable?.carryPath && (
+                      <div className="reason-tooltip__carry-path">
+                        <p className="reason-tooltip__carry-description">
+                          <strong>{t('details.carryPath')}</strong> {readable.carryPath}
+                        </p>
+                      </div>
+                    )}
 
                     {/* Math toggle */}
                     {readable?.showMath && (
@@ -326,13 +294,11 @@ export function ReasonTooltip({
                           type="button"
                         >
                           <span className="reason-tooltip__math-label">
-                            {t("details.showMath")}
+                            {t('details.showMath')}
                             <span
                               className="reason-tooltip__chevron"
                               style={{
-                                transform: showMath
-                                  ? "rotate(180deg)"
-                                  : "rotate(0deg)",
+                                transform: showMath ? 'rotate(180deg)' : 'rotate(0deg)',
                               }}
                             >
                               ▼
@@ -343,10 +309,7 @@ export function ReasonTooltip({
                         {showMath && (
                           <div className="reason-tooltip__math-content">
                             {readable.showMath.lines.map((line, index) => (
-                              <p
-                                key={index}
-                                className="reason-tooltip__math-line"
-                              >
+                              <p key={index} className="reason-tooltip__math-line">
                                 {line}
                               </p>
                             ))}
@@ -362,9 +325,9 @@ export function ReasonTooltip({
                           className="reason-tooltip__expand-button"
                           onClick={() => setShowBeadDetails(!showBeadDetails)}
                           onKeyDown={(e) => {
-                            if (e.key === "Enter" || e.key === " ") {
-                              e.preventDefault();
-                              setShowBeadDetails(!showBeadDetails);
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              e.preventDefault()
+                              setShowBeadDetails(!showBeadDetails)
                             }
                           }}
                           aria-expanded={showBeadDetails}
@@ -372,13 +335,11 @@ export function ReasonTooltip({
                           type="button"
                         >
                           <span className="reason-tooltip__section-title">
-                            {t("details.steps")}
+                            {t('details.steps')}
                             <span
                               className="reason-tooltip__chevron"
                               style={{
-                                transform: showBeadDetails
-                                  ? "rotate(180deg)"
-                                  : "rotate(0deg)",
+                                transform: showBeadDetails ? 'rotate(180deg)' : 'rotate(0deg)',
                               }}
                             >
                               ▼
@@ -387,19 +348,14 @@ export function ReasonTooltip({
                         </button>
 
                         {showBeadDetails && (
-                          <ol
-                            id={`${tooltipId}-steps`}
-                            className="reason-tooltip__step-list"
-                          >
-                            {readable.stepsFriendly.map(
-                              (stepInstruction, idx) => (
-                                <li key={idx} className="reason-tooltip__step">
-                                  <span className="reason-tooltip__step-instruction">
-                                    {stepInstruction}
-                                  </span>
-                                </li>
-                              ),
-                            )}
+                          <ol id={`${tooltipId}-steps`} className="reason-tooltip__step-list">
+                            {readable.stepsFriendly.map((stepInstruction, idx) => (
+                              <li key={idx} className="reason-tooltip__step">
+                                <span className="reason-tooltip__step-instruction">
+                                  {stepInstruction}
+                                </span>
+                              </li>
+                            ))}
                           </ol>
                         )}
                       </div>
@@ -410,12 +366,12 @@ export function ReasonTooltip({
             )}
 
             {/* Dev-only validation hint */}
-            {process.env.NODE_ENV !== "production" &&
+            {process.env.NODE_ENV !== 'production' &&
               segment?.readable?.validation &&
               !segment.readable.validation.ok && (
                 <div className="reason-tooltip__dev-warn">
-                  {t("devWarning", {
-                    issues: segment.readable.validation.issues.join("; "),
+                  {t('devWarning', {
+                    issues: segment.readable.validation.issues.join('; '),
                   })}
                 </div>
               )}
@@ -424,16 +380,12 @@ export function ReasonTooltip({
             {originalValue && segment?.expression && (
               <div className="reason-tooltip__formula">
                 <div className="reason-tooltip__expansion">
-                  <span className="reason-tooltip__original">
-                    {originalValue}
-                  </span>
+                  <span className="reason-tooltip__original">{originalValue}</span>
                   <span className="reason-tooltip__arrow">→</span>
-                  <code className="reason-tooltip__expanded">
-                    {segment.expression}
-                  </code>
+                  <code className="reason-tooltip__expanded">{segment.expression}</code>
                 </div>
                 <div className="reason-tooltip__label">
-                  {t("formula", {
+                  {t('formula', {
                     original: originalValue,
                     expanded: segment.expression,
                   })}
@@ -446,5 +398,5 @@ export function ReasonTooltip({
         </HoverCard.Content>
       </HoverCard.Portal>
     </HoverCard.Root>
-  );
+  )
 }
diff --git a/apps/web/src/components/tutorial/SkillSelector.tsx b/apps/web/src/components/tutorial/SkillSelector.tsx
index 2b44e24a..f0f45b10 100644
--- a/apps/web/src/components/tutorial/SkillSelector.tsx
+++ b/apps/web/src/components/tutorial/SkillSelector.tsx
@@ -1,115 +1,112 @@
-"use client";
+'use client'
 
-import { useCallback } from "react";
-import { css } from "../../../styled-system/css";
-import { hstack, vstack } from "../../../styled-system/patterns";
-import type {
-  SkillConfiguration,
-  SkillMode,
-} from "../../utils/skillConfiguration";
+import { useCallback } from 'react'
+import { css } from '../../../styled-system/css'
+import { hstack, vstack } from '../../../styled-system/patterns'
+import type { SkillConfiguration, SkillMode } from '../../utils/skillConfiguration'
 
 // Export for convenience
 export type {
   SkillConfiguration,
   SkillMode,
-} from "../../utils/skillConfiguration";
+} from '../../utils/skillConfiguration'
 
 interface SkillSelectorProps {
-  skills: SkillConfiguration;
-  onChange: (skills: SkillConfiguration) => void;
-  title?: string;
-  className?: string;
+  skills: SkillConfiguration
+  onChange: (skills: SkillConfiguration) => void
+  title?: string
+  className?: string
 }
 
 export function SkillSelector({
   skills,
   onChange,
-  title = "Skill Configuration",
+  title = 'Skill Configuration',
   className,
 }: SkillSelectorProps) {
   const updateSkill = useCallback(
     (category: keyof SkillConfiguration, skill: string, mode: SkillMode) => {
-      const newSkills = { ...skills };
+      const newSkills = { ...skills }
 
-      if (category === "basic") {
-        newSkills.basic = { ...newSkills.basic, [skill]: mode };
-      } else if (category === "fiveComplements") {
+      if (category === 'basic') {
+        newSkills.basic = { ...newSkills.basic, [skill]: mode }
+      } else if (category === 'fiveComplements') {
         newSkills.fiveComplements = {
           ...newSkills.fiveComplements,
           [skill]: mode,
-        };
-      } else if (category === "tenComplements") {
+        }
+      } else if (category === 'tenComplements') {
         newSkills.tenComplements = {
           ...newSkills.tenComplements,
           [skill]: mode,
-        };
+        }
       }
 
-      onChange(newSkills);
+      onChange(newSkills)
     },
-    [skills, onChange],
-  );
+    [skills, onChange]
+  )
 
   const getModeStyles = (skillMode: SkillMode): string => {
     switch (skillMode) {
-      case "off":
+      case 'off':
         return css({
-          bg: "gray.100",
-          color: "gray.400",
-          border: "1px solid",
-          borderColor: "gray.200",
-        });
-      case "allowed":
+          bg: 'gray.100',
+          color: 'gray.400',
+          border: '1px solid',
+          borderColor: 'gray.200',
+        })
+      case 'allowed':
         return css({
-          bg: "green.100",
-          color: "green.800",
-          border: "1px solid",
-          borderColor: "green.300",
-        });
-      case "target":
+          bg: 'green.100',
+          color: 'green.800',
+          border: '1px solid',
+          borderColor: 'green.300',
+        })
+      case 'target':
         return css({
-          bg: "blue.100",
-          color: "blue.800",
-          border: "1px solid",
-          borderColor: "blue.300",
-        });
-      case "forbidden":
+          bg: 'blue.100',
+          color: 'blue.800',
+          border: '1px solid',
+          borderColor: 'blue.300',
+        })
+      case 'forbidden':
         return css({
-          bg: "red.100",
-          color: "red.800",
-          border: "1px solid",
-          borderColor: "red.300",
-        });
+          bg: 'red.100',
+          color: 'red.800',
+          border: '1px solid',
+          borderColor: 'red.300',
+        })
       default:
         return css({
-          bg: "gray.100",
-          color: "gray.600",
-          border: "1px solid",
-          borderColor: "gray.300",
-        });
+          bg: 'gray.100',
+          color: 'gray.600',
+          border: '1px solid',
+          borderColor: 'gray.300',
+        })
     }
-  };
+  }
 
   const getModeIcon = (skillMode: SkillMode): string => {
     switch (skillMode) {
-      case "off":
-        return "⚫";
-      case "allowed":
-        return "✅";
-      case "target":
-        return "🎯";
-      case "forbidden":
-        return "❌";
+      case 'off':
+        return '⚫'
+      case 'allowed':
+        return '✅'
+      case 'target':
+        return '🎯'
+      case 'forbidden':
+        return '❌'
       default:
-        return "⚫";
+        return '⚫'
     }
-  };
+  }
 
   const getNextMode = (currentMode: SkillMode): SkillMode => {
-    const modes: SkillMode[] = ["off", "allowed", "target", "forbidden"];
-    const currentIndex = modes.indexOf(currentMode);
-    return modes[(currentIndex + 1) % modes.length];
-  };
+    const modes: SkillMode[] = ['off', 'allowed', 'target', 'forbidden']
+    const currentIndex = modes.indexOf(currentMode)
+    return modes[(currentIndex + 1) % modes.length]
+  }
 
   const SkillButton = ({
     category,
@@ -117,10 +114,10 @@ export function SkillSelector({
     label,
     mode,
   }: {
-    category: keyof SkillConfiguration;
-    skill: string;
-    label: string;
-    mode: SkillMode;
+    category: keyof SkillConfiguration
+    skill: string
+    label: string
+    mode: SkillMode
   }) => (
     <button
       onClick={() => updateSkill(category, skill, getNextMode(mode))}
@@ -128,63 +125,63 @@ export function SkillSelector({
         {
           px: 3,
           py: 2,
-          rounded: "md",
-          fontSize: "sm",
-          fontWeight: "medium",
-          cursor: "pointer",
-          transition: "all 0.2s",
+          rounded: 'md',
+          fontSize: 'sm',
+          fontWeight: 'medium',
+          cursor: 'pointer',
+          transition: 'all 0.2s',
           _hover: { opacity: 0.8 },
-          display: "flex",
-          alignItems: "center",
+          display: 'flex',
+          alignItems: 'center',
           gap: 2,
         },
-        getModeStyles(mode),
+        getModeStyles(mode)
       )}
       title={`Click to cycle: ${mode} → ${getNextMode(mode)}`}
     >
       <span>{getModeIcon(mode)}</span>
       <span>{label}</span>
     </button>
-  );
+  )
 
   return (
     <div
       className={css(
         {
           p: 4,
-          bg: "white",
-          border: "1px solid",
-          borderColor: "gray.200",
-          rounded: "lg",
+          bg: 'white',
+          border: '1px solid',
+          borderColor: 'gray.200',
+          rounded: 'lg',
         },
-        className,
+        className
       )}
     >
       <h4
         className={css({
-          fontSize: "lg",
-          fontWeight: "semibold",
+          fontSize: 'lg',
+          fontWeight: 'semibold',
           mb: 4,
-          color: "gray.800",
+          color: 'gray.800',
         })}
       >
         {title}
       </h4>
 
-      <div className={vstack({ gap: 4, alignItems: "stretch" })}>
+      <div className={vstack({ gap: 4, alignItems: 'stretch' })}>
         {/* Basic Operations */}
         <div>
           <h5
             className={css({
-              fontSize: "md",
-              fontWeight: "medium",
+              fontSize: 'md',
+              fontWeight: 'medium',
               mb: 2,
-              color: "gray.700",
+              color: 'gray.700',
             })}
           >
             Basic Operations
           </h5>
-          <div className={hstack({ gap: 2, flexWrap: "wrap" })}>
+          <div className={hstack({ gap: 2, flexWrap: 'wrap' })}>
             <SkillButton
               category="basic"
               skill="directAddition"
@@ -210,38 +207,38 @@ export function SkillSelector({
         <div>
           <h5
             className={css({
-              fontSize: "md",
-              fontWeight: "medium",
+              fontSize: 'md',
+              fontWeight: 'medium',
               mb: 2,
-              color: "gray.700",
+              color: 'gray.700',
             })}
           >
             Five Complements
           </h5>
-          <div className={hstack({ gap: 2, flexWrap: "wrap" })}>
+          <div className={hstack({ gap: 2, flexWrap: 'wrap' })}>
             <SkillButton
               category="fiveComplements"
               skill="4=5-1"
               label="4 = 5 - 1"
-              mode={skills.fiveComplements["4=5-1"]}
+              mode={skills.fiveComplements['4=5-1']}
             />
             <SkillButton
               category="fiveComplements"
               skill="3=5-2"
               label="3 = 5 - 2"
-              mode={skills.fiveComplements["3=5-2"]}
+              mode={skills.fiveComplements['3=5-2']}
             />
             <SkillButton
               category="fiveComplements"
               skill="2=5-3"
               label="2 = 5 - 3"
-              mode={skills.fiveComplements["2=5-3"]}
+              mode={skills.fiveComplements['2=5-3']}
             />
             <SkillButton
               category="fiveComplements"
               skill="1=5-4"
               label="1 = 5 - 4"
-              mode={skills.fiveComplements["1=5-4"]}
+              mode={skills.fiveComplements['1=5-4']}
             />
           </div>
         </div>
@@ -250,15 +247,15 @@ export function SkillSelector({
         <div>
           <h5
             className={css({
-              fontSize: "md",
-              fontWeight: "medium",
+              fontSize: 'md',
+              fontWeight: 'medium',
               mb: 2,
-              color: "gray.700",
+              color: 'gray.700',
             })}
           >
             Ten Complements
           </h5>
-          <div className={hstack({ gap: 2, flexWrap: "wrap" })}>
+          <div className={hstack({ gap: 2, flexWrap: 'wrap' })}>
             {Object.entries(skills.tenComplements).map(([complement, mode]) => (
               <SkillButton
                 key={complement}
@@ -277,34 +274,34 @@ export function SkillSelector({
         className={css({
           mt: 4,
           pt: 3,
-          borderTop: "1px solid",
-          borderColor: "gray.200",
-          fontSize: "xs",
-          color: "gray.600",
+          borderTop: '1px solid',
+          borderColor: 'gray.200',
+          fontSize: 'xs',
+          color: 'gray.600',
         })}
       >
-        <div className={css({ fontWeight: "medium", mb: 2 })}>
+        <div className={css({ fontWeight: 'medium', mb: 2 })}>
           Click skills to cycle through modes:
         </div>
-        <div className={hstack({ gap: 4, flexWrap: "wrap" })}>
-          <div className={hstack({ gap: 1, alignItems: "center" })}>
+        <div className={hstack({ gap: 4, flexWrap: 'wrap' })}>
+          <div className={hstack({ gap: 1, alignItems: 'center' })}>
             <span>⚫</span>
             <span>Off - Not used</span>
           </div>
-          <div className={hstack({ gap: 1, alignItems: "center" })}>
+          <div className={hstack({ gap: 1, alignItems: 'center' })}>
             <span>✅</span>
             <span>Allowed - Can be used</span>
           </div>
-          <div className={hstack({ gap: 1, alignItems: "center" })}>
+          <div className={hstack({ gap: 1, alignItems: 'center' })}>
             <span>🎯</span>
             <span>Target - Focus practice</span>
           </div>
-          <div className={hstack({ gap: 1, alignItems: "center" })}>
+          <div className={hstack({ gap: 1, alignItems: 'center' })}>
             <span>❌</span>
             <span>Forbidden - Not learned yet</span>
           </div>
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/tutorial/TutorialData.stories.tsx b/apps/web/src/components/tutorial/TutorialData.stories.tsx
index 69aa0cce..d1556ed5 100644
--- a/apps/web/src/components/tutorial/TutorialData.stories.tsx
+++ b/apps/web/src/components/tutorial/TutorialData.stories.tsx
@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { getTutorialForEditor } from "../../utils/tutorialConverter";
+import type { Meta, StoryObj } from '@storybook/react'
+import { getTutorialForEditor } from '../../utils/tutorialConverter'
 
 // Simple component that just displays tutorial data
 function TutorialDataDisplay() {
-  const tutorial = getTutorialForEditor();
+  const tutorial = getTutorialForEditor()
 
   return (
-    <div style={{ padding: "20px", fontFamily: "monospace" }}>
+    <div style={{ padding: '20px', fontFamily: 'monospace' }}>
       <h2>Tutorial Data Structure</h2>
       <div>
         <strong>Title:</strong> {tutorial.title}
@@ -15,35 +15,32 @@ function TutorialDataDisplay() {
         <strong>Steps Count:</strong> {tutorial.steps?.length || 0}
       </div>
       <div>
-        <strong>Steps Array:</strong>{" "}
-        {Array.isArray(tutorial.steps) ? "Yes" : "No"}
+        <strong>Steps Array:</strong> {Array.isArray(tutorial.steps) ? 'Yes' : 'No'}
       </div>
-      <details style={{ marginTop: "20px" }}>
+      <details style={{ marginTop: '20px' }}>
         <summary>Raw Tutorial Data</summary>
-        <pre
-          style={{ background: "#f5f5f5", padding: "10px", fontSize: "12px" }}
-        >
+        <pre style={{ background: '#f5f5f5', padding: '10px', fontSize: '12px' }}>
           {JSON.stringify(tutorial, null, 2)}
         </pre>
       </details>
     </div>
-  );
+  )
 }
 
 const meta: Meta<typeof TutorialDataDisplay> = {
-  title: "Debug/TutorialData",
+  title: 'Debug/TutorialData',
   component: TutorialDataDisplay,
   parameters: {
     docs: {
       description: {
         component:
-          "Simple display of tutorial data to test data structure without complex components",
+          'Simple display of tutorial data to test data structure without complex components',
       },
     },
   },
-};
+}
 
-export default meta;
-type Story = StoryObj<typeof TutorialDataDisplay>;
+export default meta
+type Story = StoryObj<typeof TutorialDataDisplay>
 
-export const BasicData: Story = {};
+export const BasicData: Story = {}
diff --git a/apps/web/src/components/tutorial/TutorialDebugPanel.tsx b/apps/web/src/components/tutorial/TutorialDebugPanel.tsx
index f976fac9..5c8ee8be 100644
--- a/apps/web/src/components/tutorial/TutorialDebugPanel.tsx
+++ b/apps/web/src/components/tutorial/TutorialDebugPanel.tsx
@@ -1,15 +1,15 @@
-import { css } from "../../../styled-system/css";
-import { stack } from "../../../styled-system/patterns";
-import type { TutorialEvent } from "../../types/tutorial";
+import { css } from '../../../styled-system/css'
+import { stack } from '../../../styled-system/patterns'
+import type { TutorialEvent } from '../../types/tutorial'
 
 interface TutorialDebugPanelProps {
-  currentStepIndex: number;
-  totalSteps: number;
-  currentValue: number;
-  targetValue: number;
-  isStepCompleted: boolean;
-  stepStartTime: number;
-  events: TutorialEvent[];
+  currentStepIndex: number
+  totalSteps: number
+  currentValue: number
+  targetValue: number
+  isStepCompleted: boolean
+  stepStartTime: number
+  events: TutorialEvent[]
 }
 
 export function TutorialDebugPanel({
@@ -24,10 +24,10 @@ export function TutorialDebugPanel({
   return (
     <div
       className={css({
-        w: "400px",
-        borderLeft: "1px solid",
-        borderColor: "gray.200",
-        bg: "gray.50",
+        w: '400px',
+        borderLeft: '1px solid',
+        borderColor: 'gray.200',
+        bg: 'gray.50',
         p: 4,
       })}
     >
@@ -36,11 +36,11 @@ export function TutorialDebugPanel({
           <h3>Step Debug Info</h3>
           <div
             className={css({
-              fontSize: "sm",
-              fontFamily: "mono",
-              bg: "white",
+              fontSize: 'sm',
+              fontFamily: 'mono',
+              bg: 'white',
               p: 2,
-              borderRadius: "md",
+              borderRadius: 'md',
             })}
           >
             <div>
@@ -48,7 +48,7 @@ export function TutorialDebugPanel({
             </div>
             <div>Value: {currentValue}</div>
             <div>Target: {targetValue}</div>
-            <div>Completed: {isStepCompleted ? "Yes" : "No"}</div>
+            <div>Completed: {isStepCompleted ? 'Yes' : 'No'}</div>
             <div>Time: {Math.round((Date.now() - stepStartTime) / 1000)}s</div>
           </div>
         </div>
@@ -57,10 +57,10 @@ export function TutorialDebugPanel({
           <h3>Event Log</h3>
           <div
             className={css({
-              bg: "white",
-              borderRadius: "md",
-              maxH: "200px",
-              overflowY: "auto",
+              bg: 'white',
+              borderRadius: 'md',
+              maxH: '200px',
+              overflowY: 'auto',
             })}
           >
             {events.slice(-10).map((event, index) => (
@@ -68,23 +68,21 @@ export function TutorialDebugPanel({
                 key={index}
                 className={css({
                   p: 2,
-                  borderBottom: "1px solid",
-                  borderColor: "gray.100",
+                  borderBottom: '1px solid',
+                  borderColor: 'gray.100',
                 })}
               >
-                <div className={css({ fontWeight: "bold", color: "blue.600" })}>
-                  {event.type}
-                </div>
-                <div className={css({ color: "gray.600" })}>
+                <div className={css({ fontWeight: 'bold', color: 'blue.600' })}>{event.type}</div>
+                <div className={css({ color: 'gray.600' })}>
                   {new Date(event.timestamp).toLocaleTimeString()}
                 </div>
-                {event.type === "VALUE_CHANGED" && (
+                {event.type === 'VALUE_CHANGED' && (
                   <div>
                     {event.oldValue} → {event.newValue}
                   </div>
                 )}
-                {event.type === "ERROR_OCCURRED" && (
-                  <div className={css({ color: "red.600" })}>{event.error}</div>
+                {event.type === 'ERROR_OCCURRED' && (
+                  <div className={css({ color: 'red.600' })}>{event.error}</div>
                 )}
               </div>
             ))}
@@ -92,5 +90,5 @@ export function TutorialDebugPanel({
         </div>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/tutorial/TutorialEditor.stories.tsx b/apps/web/src/components/tutorial/TutorialEditor.stories.tsx
index 3a53ce23..94158c88 100644
--- a/apps/web/src/components/tutorial/TutorialEditor.stories.tsx
+++ b/apps/web/src/components/tutorial/TutorialEditor.stories.tsx
@@ -1,18 +1,15 @@
-import { action } from "@storybook/addon-actions";
-import type { Meta, StoryObj } from "@storybook/react";
-import { DevAccessProvider } from "../../hooks/useAccessControl";
-import {
-  createBasicSkillSet,
-  type TutorialValidation,
-} from "../../types/tutorial";
-import { getTutorialForEditor } from "../../utils/tutorialConverter";
-import { TutorialEditor } from "./TutorialEditor";
+import { action } from '@storybook/addon-actions'
+import type { Meta, StoryObj } from '@storybook/react'
+import { DevAccessProvider } from '../../hooks/useAccessControl'
+import { createBasicSkillSet, type TutorialValidation } from '../../types/tutorial'
+import { getTutorialForEditor } from '../../utils/tutorialConverter'
+import { TutorialEditor } from './TutorialEditor'
 
 const meta: Meta<typeof TutorialEditor> = {
-  title: "Tutorial/TutorialEditor",
+  title: 'Tutorial/TutorialEditor',
   component: TutorialEditor,
   parameters: {
-    layout: "fullscreen",
+    layout: 'fullscreen',
     docs: {
       description: {
         component: `
@@ -42,88 +39,87 @@ It includes both the editor interface and an integrated preview player for testi
   decorators: [
     (Story) => (
       <DevAccessProvider>
-        <div style={{ height: "100vh" }}>
+        <div style={{ height: '100vh' }}>
           <Story />
         </div>
       </DevAccessProvider>
     ),
   ],
-  tags: ["autodocs"],
-};
+  tags: ['autodocs'],
+}
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
-const mockTutorial = getTutorialForEditor();
+const mockTutorial = getTutorialForEditor()
 
 // Mock validation function that returns realistic validation results
 const mockValidate = async (tutorial: any): Promise<TutorialValidation> => {
-  const errors = [];
-  const warnings = [];
+  const errors = []
+  const warnings = []
 
   // Simulate some validation logic
   if (!tutorial.title.trim()) {
     errors.push({
-      stepId: "",
-      field: "title",
-      message: "Tutorial title is required",
-      severity: "error" as const,
-    });
+      stepId: '',
+      field: 'title',
+      message: 'Tutorial title is required',
+      severity: 'error' as const,
+    })
   }
 
   if (tutorial.steps.length === 0) {
     errors.push({
-      stepId: "",
-      field: "steps",
-      message: "Tutorial must have at least one step",
-      severity: "error" as const,
-    });
+      stepId: '',
+      field: 'steps',
+      message: 'Tutorial must have at least one step',
+      severity: 'error' as const,
+    })
   }
 
   // Add some warnings for demonstration
   if (tutorial.description.length < 50) {
     warnings.push({
-      stepId: "",
-      field: "description",
-      message: "Tutorial description could be more detailed",
-      severity: "warning" as const,
-    });
+      stepId: '',
+      field: 'description',
+      message: 'Tutorial description could be more detailed',
+      severity: 'warning' as const,
+    })
   }
 
   tutorial.steps.forEach((step: any, index: number) => {
     if (step.startValue === step.targetValue) {
       warnings.push({
         stepId: step.id,
-        field: "values",
+        field: 'values',
         message: `Step ${index + 1}: Start and target values are the same`,
-        severity: "warning" as const,
-      });
+        severity: 'warning' as const,
+      })
     }
-  });
+  })
 
   return {
     isValid: errors.length === 0,
     errors,
     warnings,
-  };
-};
+  }
+}
 
 export const Default: Story = {
   args: {
     tutorial: mockTutorial,
-    onSave: action("save-tutorial"),
+    onSave: action('save-tutorial'),
     onValidate: mockValidate,
-    onPreview: action("preview-step"),
+    onPreview: action('preview-step'),
   },
   parameters: {
     docs: {
       description: {
-        story:
-          "Default tutorial editor with the guided addition tutorial loaded for editing.",
+        story: 'Default tutorial editor with the guided addition tutorial loaded for editing.',
       },
     },
   },
-};
+}
 
 export const EditingMode: Story = {
   args: {
@@ -154,32 +150,32 @@ Tutorial editor in editing mode. This story demonstrates:
       },
     },
   },
-};
+}
 
 export const WithValidationErrors: Story = {
   args: {
     tutorial: {
       ...mockTutorial,
-      title: "", // This will trigger a validation error
-      description: "Short desc", // This will trigger a warning
+      title: '', // This will trigger a validation error
+      description: 'Short desc', // This will trigger a warning
       steps: mockTutorial.steps.map((step) => ({
         ...step,
         startValue: step.targetValue, // This will trigger warnings
       })),
     },
-    onSave: action("save-tutorial"),
+    onSave: action('save-tutorial'),
     onValidate: mockValidate,
-    onPreview: action("preview-step"),
+    onPreview: action('preview-step'),
   },
   parameters: {
     docs: {
       description: {
         story:
-          "Tutorial editor with validation errors and warnings to demonstrate the validation system.",
+          'Tutorial editor with validation errors and warnings to demonstrate the validation system.',
       },
     },
   },
-};
+}
 
 export const MinimalTutorial: Story = {
   args: {
@@ -187,36 +183,36 @@ export const MinimalTutorial: Story = {
       ...mockTutorial,
       steps: mockTutorial.steps.slice(0, 2), // Only 2 steps for easier editing demo
     },
-    onSave: action("save-tutorial"),
+    onSave: action('save-tutorial'),
     onValidate: mockValidate,
-    onPreview: action("preview-step"),
+    onPreview: action('preview-step'),
   },
   parameters: {
     docs: {
       description: {
         story:
-          "Tutorial editor with a minimal tutorial (2 steps) for easier demonstration of editing features.",
+          'Tutorial editor with a minimal tutorial (2 steps) for easier demonstration of editing features.',
       },
     },
   },
-};
+}
 
 export const ReadOnlyPreview: Story = {
   args: {
     tutorial: mockTutorial,
     onSave: undefined, // No save function = read-only mode
     onValidate: mockValidate,
-    onPreview: action("preview-step"),
+    onPreview: action('preview-step'),
   },
   parameters: {
     docs: {
       description: {
         story:
-          "Tutorial editor in read-only mode (no save function provided) showing the preview functionality.",
+          'Tutorial editor in read-only mode (no save function provided) showing the preview functionality.',
       },
     },
   },
-};
+}
 
 export const WithPracticeSteps: Story = {
   args: {
@@ -224,9 +220,9 @@ export const WithPracticeSteps: Story = {
       ...mockTutorial,
       practiceSteps: [
         {
-          id: "practice-basic",
-          title: "Practice: Basic Addition (1-4)",
-          description: "Practice adding numbers 1-4 using only earth beads",
+          id: 'practice-basic',
+          title: 'Practice: Basic Addition (1-4)',
+          description: 'Practice adding numbers 1-4 using only earth beads',
           problemCount: 12,
           maxTerms: 3,
           requiredSkills: createBasicSkillSet(),
@@ -234,9 +230,9 @@ export const WithPracticeSteps: Story = {
           sumConstraints: { maxSum: 9 },
         },
         {
-          id: "practice-five-complements",
-          title: "Practice: Five Complements",
-          description: "Practice using five complement techniques",
+          id: 'practice-five-complements',
+          title: 'Practice: Five Complements',
+          description: 'Practice using five complement techniques',
           problemCount: 15,
           maxTerms: 4,
           requiredSkills: {
@@ -246,27 +242,27 @@ export const WithPracticeSteps: Story = {
               simpleCombinations: true,
             },
             fiveComplements: {
-              "4=5-1": true,
-              "3=5-2": true,
-              "2=5-3": false,
-              "1=5-4": false,
+              '4=5-1': true,
+              '3=5-2': true,
+              '2=5-3': false,
+              '1=5-4': false,
             },
             tenComplements: {
-              "9=10-1": false,
-              "8=10-2": false,
-              "7=10-3": false,
-              "6=10-4": false,
-              "5=10-5": false,
-              "4=10-6": false,
-              "3=10-7": false,
-              "2=10-8": false,
-              "1=10-9": false,
+              '9=10-1': false,
+              '8=10-2': false,
+              '7=10-3': false,
+              '6=10-4': false,
+              '5=10-5': false,
+              '4=10-6': false,
+              '3=10-7': false,
+              '2=10-8': false,
+              '1=10-9': false,
             },
           },
           targetSkills: {
             fiveComplements: {
-              "4=5-1": true,
-              "3=5-2": true,
+              '4=5-1': true,
+              '3=5-2': true,
             },
           },
           numberRange: { min: 1, max: 9 },
@@ -274,97 +270,96 @@ export const WithPracticeSteps: Story = {
         },
       ],
     },
-    onSave: action("save-tutorial"),
+    onSave: action('save-tutorial'),
     onValidate: mockValidate,
-    onPreview: action("preview-step"),
+    onPreview: action('preview-step'),
   },
   parameters: {
     docs: {
       description: {
         story:
-          "Tutorial editor with practice steps demonstrating the skill-based problem generation system.",
+          'Tutorial editor with practice steps demonstrating the skill-based problem generation system.',
       },
     },
   },
-};
+}
 
 export const CustomTutorial: Story = {
   args: {
     tutorial: {
-      id: "custom-tutorial",
-      title: "Custom Math Tutorial",
+      id: 'custom-tutorial',
+      title: 'Custom Math Tutorial',
       description:
-        "A custom tutorial for demonstrating the editor capabilities with different content.",
-      category: "Advanced Operations",
-      difficulty: "intermediate" as const,
+        'A custom tutorial for demonstrating the editor capabilities with different content.',
+      category: 'Advanced Operations',
+      difficulty: 'intermediate' as const,
       estimatedDuration: 15,
       steps: [
         {
-          id: "custom-1",
-          title: "Custom Step 1",
-          problem: "5 + 5",
-          description: "Add 5 to 5 using the heaven bead",
+          id: 'custom-1',
+          title: 'Custom Step 1',
+          problem: '5 + 5',
+          description: 'Add 5 to 5 using the heaven bead',
           startValue: 5,
           targetValue: 10,
-          highlightBeads: [{ columnIndex: 4, beadType: "heaven" as const }],
-          expectedAction: "add" as const,
-          actionDescription: "Click the heaven bead",
+          highlightBeads: [{ columnIndex: 4, beadType: 'heaven' as const }],
+          expectedAction: 'add' as const,
+          actionDescription: 'Click the heaven bead',
           tooltip: {
-            content: "Using heaven bead for 10",
-            explanation: "When adding 5 to 5, use the tens place heaven bead",
+            content: 'Using heaven bead for 10',
+            explanation: 'When adding 5 to 5, use the tens place heaven bead',
           },
           errorMessages: {
-            wrongBead: "Click the tens place heaven bead",
-            wrongAction: "Move the bead down to activate",
-            hint: "Think about place value",
+            wrongBead: 'Click the tens place heaven bead',
+            wrongAction: 'Move the bead down to activate',
+            hint: 'Think about place value',
           },
         },
         {
-          id: "custom-2",
-          title: "Custom Step 2",
-          problem: "7 + 8",
-          description: "A more complex addition problem",
+          id: 'custom-2',
+          title: 'Custom Step 2',
+          problem: '7 + 8',
+          description: 'A more complex addition problem',
           startValue: 7,
           targetValue: 15,
           highlightBeads: [
-            { columnIndex: 1, beadType: "heaven" as const },
-            { columnIndex: 4, beadType: "heaven" as const },
+            { columnIndex: 1, beadType: 'heaven' as const },
+            { columnIndex: 4, beadType: 'heaven' as const },
           ],
-          expectedAction: "multi-step" as const,
-          actionDescription: "Activate both heaven beads for 15",
+          expectedAction: 'multi-step' as const,
+          actionDescription: 'Activate both heaven beads for 15',
           multiStepInstructions: [
-            "Click the tens place heaven bead",
-            "Click the ones place heaven bead",
+            'Click the tens place heaven bead',
+            'Click the ones place heaven bead',
           ],
           tooltip: {
-            content: "Complex addition",
-            explanation:
-              "7 + 8 = 15, which needs both tens and ones heaven beads",
+            content: 'Complex addition',
+            explanation: '7 + 8 = 15, which needs both tens and ones heaven beads',
           },
           errorMessages: {
-            wrongBead: "Follow the two-step process",
-            wrongAction: "Activate both heaven beads",
-            hint: "15 = 10 + 5",
+            wrongBead: 'Follow the two-step process',
+            wrongAction: 'Activate both heaven beads',
+            hint: '15 = 10 + 5',
           },
         },
       ],
-      tags: ["custom", "demo", "advanced"],
-      author: "Demo Author",
-      version: "1.0.0",
+      tags: ['custom', 'demo', 'advanced'],
+      author: 'Demo Author',
+      version: '1.0.0',
       createdAt: new Date(),
       updatedAt: new Date(),
       isPublished: false,
     },
-    onSave: action("save-tutorial"),
+    onSave: action('save-tutorial'),
     onValidate: mockValidate,
-    onPreview: action("preview-step"),
+    onPreview: action('preview-step'),
   },
   parameters: {
     docs: {
       description: {
         story:
-          "Tutorial editor with custom tutorial content to demonstrate editing different types of mathematical operations.",
+          'Tutorial editor with custom tutorial content to demonstrate editing different types of mathematical operations.',
       },
     },
   },
-};
+}
diff --git a/apps/web/src/components/tutorial/TutorialEditor.tsx b/apps/web/src/components/tutorial/TutorialEditor.tsx
index c37f4b3a..4a4eccae 100644
--- a/apps/web/src/components/tutorial/TutorialEditor.tsx
+++ b/apps/web/src/components/tutorial/TutorialEditor.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client'
 
-import { useCallback, useEffect, useMemo, useState } from "react";
-import Resizable from "react-resizable-layout";
-import { calculateBeadDiffFromValues } from "@soroban/abacus-react";
-import { css } from "../../../styled-system/css";
-import { hstack, stack, vstack } from "../../../styled-system/patterns";
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import Resizable from 'react-resizable-layout'
+import { calculateBeadDiffFromValues } from '@soroban/abacus-react'
+import { css } from '../../../styled-system/css'
+import { hstack, stack, vstack } from '../../../styled-system/patterns'
 import {
   createBasicSkillSet,
   type PracticeStep,
@@ -12,15 +12,15 @@ import {
   type Tutorial,
   type TutorialStep,
   type TutorialValidation,
-} from "../../types/tutorial";
-import { generateAbacusInstructions } from "../../utils/abacusInstructionGenerator";
-import { generateSingleProblem } from "../../utils/problemGenerator";
+} from '../../types/tutorial'
+import { generateAbacusInstructions } from '../../utils/abacusInstructionGenerator'
+import { generateSingleProblem } from '../../utils/problemGenerator'
 import {
   createBasicAllowedConfiguration,
   skillConfigurationToSkillSets,
-} from "../../utils/skillConfiguration";
-import { generateUnifiedInstructionSequence } from "../../utils/unifiedStepGenerator";
-import { PracticeStepEditor } from "./PracticeStepEditor";
+} from '../../utils/skillConfiguration'
+import { generateUnifiedInstructionSequence } from '../../utils/unifiedStepGenerator'
+import { PracticeStepEditor } from './PracticeStepEditor'
 import {
   BetweenStepAdd,
   CompactStepItem,
@@ -28,15 +28,15 @@ import {
   FormGroup,
   NumberInput,
   TextInput,
-} from "./shared/EditorComponents";
-import { TutorialPlayer } from "./TutorialPlayer";
+} from './shared/EditorComponents'
+import { TutorialPlayer } from './TutorialPlayer'
 
 // Modal component for tutorial metadata editing
 interface TutorialInfoModalProps {
-  tutorial: Tutorial;
-  isOpen: boolean;
-  onClose: () => void;
-  onUpdateTutorial: (updates: Partial<Tutorial>) => void;
+  tutorial: Tutorial
+  isOpen: boolean
+  onClose: () => void
+  onUpdateTutorial: (updates: Partial<Tutorial>) => void
 }
 
 function TutorialInfoModal({
@@ -45,59 +45,57 @@ function TutorialInfoModal({
   onClose,
   onUpdateTutorial,
 }: TutorialInfoModalProps) {
-  const [editingField, setEditingField] = useState<string | null>(null);
+  const [editingField, setEditingField] = useState<string | null>(null)
 
-  if (!isOpen) return null;
+  if (!isOpen) return null
 
   const updateTutorialMeta = (updates: Partial<Tutorial>) => {
-    onUpdateTutorial({ ...updates, updatedAt: new Date() });
-  };
+    onUpdateTutorial({ ...updates, updatedAt: new Date() })
+  }
 
   return (
     <div
       className={css({
-        position: "fixed",
+        position: 'fixed',
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
-        bg: "rgba(0, 0, 0, 0.5)",
+        bg: 'rgba(0, 0, 0, 0.5)',
         zIndex: 1000,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
       })}
     >
       <div
         className={css({
-          bg: "white",
-          borderRadius: "lg",
+          bg: 'white',
+          borderRadius: 'lg',
           p: 6,
-          maxWidth: "500px",
-          width: "90%",
-          maxHeight: "80vh",
-          overflowY: "auto",
-          shadow: "xl",
+          maxWidth: '500px',
+          width: '90%',
+          maxHeight: '80vh',
+          overflowY: 'auto',
+          shadow: 'xl',
         })}
       >
         <div
           className={css({
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
             mb: 4,
           })}
         >
-          <h2 className={css({ fontSize: "xl", fontWeight: "bold" })}>
-            Tutorial Settings
-          </h2>
+          <h2 className={css({ fontSize: 'xl', fontWeight: 'bold' })}>Tutorial Settings</h2>
           <button
             onClick={onClose}
             className={css({
               p: 2,
-              borderRadius: "md",
-              cursor: "pointer",
-              _hover: { bg: "gray.100" },
+              borderRadius: 'md',
+              cursor: 'pointer',
+              _hover: { bg: 'gray.100' },
             })}
           >
             ✕
@@ -109,55 +107,53 @@ function TutorialInfoModal({
           <div>
             <label
               className={css({
-                fontSize: "sm",
-                fontWeight: "medium",
-                color: "gray.700",
-                display: "block",
+                fontSize: 'sm',
+                fontWeight: 'medium',
+                color: 'gray.700',
+                display: 'block',
                 mb: 2,
               })}
             >
               Description
             </label>
-            {editingField === "description" ? (
+            {editingField === 'description' ? (
               <textarea
                 value={tutorial.description}
-                onChange={(e) =>
-                  updateTutorialMeta({ description: e.target.value })
-                }
+                onChange={(e) => updateTutorialMeta({ description: e.target.value })}
                 onBlur={() => setEditingField(null)}
                 onKeyDown={(e) => {
-                  if (e.key === "Escape") {
-                    setEditingField(null);
+                  if (e.key === 'Escape') {
+                    setEditingField(null)
                   }
                 }}
                 rows={4}
                 className={css({
-                  w: "full",
+                  w: 'full',
                   p: 3,
-                  border: "1px solid",
-                  borderColor: "blue.300",
-                  borderRadius: "md",
-                  fontSize: "sm",
-                  resize: "vertical",
+                  border: '1px solid',
+                  borderColor: 'blue.300',
+                  borderRadius: 'md',
+                  fontSize: 'sm',
+                  resize: 'vertical',
                 })}
               />
             ) : (
               <div
-                onClick={() => setEditingField("description")}
+                onClick={() => setEditingField('description')}
                 className={css({
-                  fontSize: "sm",
-                  cursor: "pointer",
+                  fontSize: 'sm',
+                  cursor: 'pointer',
                   p: 3,
-                  border: "1px solid",
-                  borderColor: "gray.200",
-                  borderRadius: "md",
-                  _hover: { bg: "gray.50", borderColor: "gray.300" },
-                  lineHeight: "normal",
-                  color: tutorial.description ? "inherit" : "gray.400",
-                  minHeight: "100px",
+                  border: '1px solid',
+                  borderColor: 'gray.200',
+                  borderRadius: 'md',
+                  _hover: { bg: 'gray.50', borderColor: 'gray.300' },
+                  lineHeight: 'normal',
+                  color: tutorial.description ? 'inherit' : 'gray.400',
+                  minHeight: '100px',
                 })}
               >
-                {tutorial.description || "Click to add description..."}
+                {tutorial.description || 'Click to add description...'}
               </div>
             )}
           </div>
@@ -165,8 +161,8 @@ function TutorialInfoModal({
           {/* Category, Difficulty, Duration row */}
           <div
             className={css({
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr 1fr",
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr 1fr',
               gap: 4,
             })}
           >
@@ -174,48 +170,46 @@ function TutorialInfoModal({
             <div>
               <label
                 className={css({
-                  fontSize: "sm",
-                  fontWeight: "medium",
-                  color: "gray.700",
-                  display: "block",
+                  fontSize: 'sm',
+                  fontWeight: 'medium',
+                  color: 'gray.700',
+                  display: 'block',
                   mb: 2,
                 })}
               >
                 Category
               </label>
-              {editingField === "category" ? (
+              {editingField === 'category' ? (
                 <input
                   type="text"
                   value={tutorial.category}
-                  onChange={(e) =>
-                    updateTutorialMeta({ category: e.target.value })
-                  }
+                  onChange={(e) => updateTutorialMeta({ category: e.target.value })}
                   onBlur={() => setEditingField(null)}
                   onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === "Escape") {
-                      setEditingField(null);
+                    if (e.key === 'Enter' || e.key === 'Escape') {
+                      setEditingField(null)
                     }
                   }}
                   className={css({
-                    w: "full",
+                    w: 'full',
                     p: 2,
-                    border: "1px solid",
-                    borderColor: "blue.300",
-                    borderRadius: "md",
-                    fontSize: "sm",
+                    border: '1px solid',
+                    borderColor: 'blue.300',
+                    borderRadius: 'md',
+                    fontSize: 'sm',
                   })}
                 />
               ) : (
                 <div
-                  onClick={() => setEditingField("category")}
+                  onClick={() => setEditingField('category')}
                   className={css({
-                    fontSize: "sm",
-                    cursor: "pointer",
+                    fontSize: 'sm',
+                    cursor: 'pointer',
                     p: 2,
-                    border: "1px solid",
-                    borderColor: "gray.200",
-                    borderRadius: "md",
-                    _hover: { bg: "gray.50", borderColor: "gray.300" },
+                    border: '1px solid',
+                    borderColor: 'gray.200',
+                    borderRadius: 'md',
+                    _hover: { bg: 'gray.50', borderColor: 'gray.300' },
                   })}
                 >
                   {tutorial.category}
@@ -227,30 +221,30 @@ function TutorialInfoModal({
             <div>
               <label
                 className={css({
-                  fontSize: "sm",
-                  fontWeight: "medium",
-                  color: "gray.700",
-                  display: "block",
+                  fontSize: 'sm',
+                  fontWeight: 'medium',
+                  color: 'gray.700',
+                  display: 'block',
                   mb: 2,
                 })}
               >
                 Difficulty
               </label>
-              {editingField === "difficulty" ? (
+              {editingField === 'difficulty' ? (
                 <select
                   value={tutorial.difficulty}
                   onChange={(e) => {
-                    updateTutorialMeta({ difficulty: e.target.value as any });
-                    setEditingField(null);
+                    updateTutorialMeta({ difficulty: e.target.value as any })
+                    setEditingField(null)
                   }}
                   onBlur={() => setEditingField(null)}
                   className={css({
-                    w: "full",
+                    w: 'full',
                     p: 2,
-                    border: "1px solid",
-                    borderColor: "blue.300",
-                    borderRadius: "md",
-                    fontSize: "sm",
+                    border: '1px solid',
+                    borderColor: 'blue.300',
+                    borderRadius: 'md',
+                    fontSize: 'sm',
                   })}
                 >
                   <option value="beginner">Beginner</option>
@@ -259,16 +253,16 @@ function TutorialInfoModal({
                 </select>
               ) : (
                 <div
-                  onClick={() => setEditingField("difficulty")}
+                  onClick={() => setEditingField('difficulty')}
                   className={css({
-                    fontSize: "sm",
-                    cursor: "pointer",
+                    fontSize: 'sm',
+                    cursor: 'pointer',
                     p: 2,
-                    border: "1px solid",
-                    borderColor: "gray.200",
-                    borderRadius: "md",
-                    _hover: { bg: "gray.50", borderColor: "gray.300" },
-                    textTransform: "capitalize",
+                    border: '1px solid',
+                    borderColor: 'gray.200',
+                    borderRadius: 'md',
+                    _hover: { bg: 'gray.50', borderColor: 'gray.300' },
+                    textTransform: 'capitalize',
                   })}
                 >
                   {tutorial.difficulty}
@@ -280,16 +274,16 @@ function TutorialInfoModal({
             <div>
               <label
                 className={css({
-                  fontSize: "sm",
-                  fontWeight: "medium",
-                  color: "gray.700",
-                  display: "block",
+                  fontSize: 'sm',
+                  fontWeight: 'medium',
+                  color: 'gray.700',
+                  display: 'block',
                   mb: 2,
                 })}
               >
                 Duration (min)
               </label>
-              {editingField === "estimatedDuration" ? (
+              {editingField === 'estimatedDuration' ? (
                 <input
                   type="number"
                   value={tutorial.estimatedDuration}
@@ -300,30 +294,30 @@ function TutorialInfoModal({
                   }
                   onBlur={() => setEditingField(null)}
                   onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === "Escape") {
-                      setEditingField(null);
+                    if (e.key === 'Enter' || e.key === 'Escape') {
+                      setEditingField(null)
                     }
                   }}
                   className={css({
-                    w: "full",
+                    w: 'full',
                     p: 2,
-                    border: "1px solid",
-                    borderColor: "blue.300",
-                    borderRadius: "md",
-                    fontSize: "sm",
+                    border: '1px solid',
+                    borderColor: 'blue.300',
+                    borderRadius: 'md',
+                    fontSize: 'sm',
                   })}
                 />
               ) : (
                 <div
-                  onClick={() => setEditingField("estimatedDuration")}
+                  onClick={() => setEditingField('estimatedDuration')}
                   className={css({
-                    fontSize: "sm",
-                    cursor: "pointer",
+                    fontSize: 'sm',
+                    cursor: 'pointer',
                     p: 2,
-                    border: "1px solid",
-                    borderColor: "gray.200",
-                    borderRadius: "md",
-                    _hover: { bg: "gray.50", borderColor: "gray.300" },
+                    border: '1px solid',
+                    borderColor: 'gray.200',
+                    borderRadius: 'md',
+                    _hover: { bg: 'gray.50', borderColor: 'gray.300' },
                   })}
                 >
                   {tutorial.estimatedDuration}
@@ -336,57 +330,57 @@ function TutorialInfoModal({
           <div>
             <label
               className={css({
-                fontSize: "sm",
-                fontWeight: "medium",
-                color: "gray.700",
-                display: "block",
+                fontSize: 'sm',
+                fontWeight: 'medium',
+                color: 'gray.700',
+                display: 'block',
                 mb: 2,
               })}
             >
               Tags (comma-separated)
             </label>
-            {editingField === "tags" ? (
+            {editingField === 'tags' ? (
               <input
                 type="text"
-                value={tutorial.tags?.join(", ") || ""}
+                value={tutorial.tags?.join(', ') || ''}
                 onChange={(e) =>
                   updateTutorialMeta({
                     tags: e.target.value
-                      .split(",")
+                      .split(',')
                       .map((tag) => tag.trim())
                       .filter(Boolean),
                   })
                 }
                 onBlur={() => setEditingField(null)}
                 onKeyDown={(e) => {
-                  if (e.key === "Enter" || e.key === "Escape") {
-                    setEditingField(null);
+                  if (e.key === 'Enter' || e.key === 'Escape') {
+                    setEditingField(null)
                   }
                 }}
                 className={css({
-                  w: "full",
+                  w: 'full',
                   p: 2,
-                  border: "1px solid",
-                  borderColor: "blue.300",
-                  borderRadius: "md",
-                  fontSize: "sm",
+                  border: '1px solid',
+                  borderColor: 'blue.300',
+                  borderRadius: 'md',
+                  fontSize: 'sm',
                 })}
               />
             ) : (
               <div
-                onClick={() => setEditingField("tags")}
+                onClick={() => setEditingField('tags')}
                 className={css({
-                  fontSize: "sm",
-                  cursor: "pointer",
+                  fontSize: 'sm',
+                  cursor: 'pointer',
                   p: 2,
-                  border: "1px solid",
-                  borderColor: "gray.200",
-                  borderRadius: "md",
-                  _hover: { bg: "gray.50", borderColor: "gray.300" },
-                  color: tutorial.tags?.length ? "inherit" : "gray.400",
+                  border: '1px solid',
+                  borderColor: 'gray.200',
+                  borderRadius: 'md',
+                  _hover: { bg: 'gray.50', borderColor: 'gray.300' },
+                  color: tutorial.tags?.length ? 'inherit' : 'gray.400',
                 })}
               >
-                {tutorial.tags?.join(", ") || "Click to add tags..."}
+                {tutorial.tags?.join(', ') || 'Click to add tags...'}
               </div>
             )}
           </div>
@@ -395,46 +389,46 @@ function TutorialInfoModal({
           <div>
             <label
               className={css({
-                fontSize: "sm",
-                fontWeight: "medium",
-                color: "gray.700",
-                display: "block",
+                fontSize: 'sm',
+                fontWeight: 'medium',
+                color: 'gray.700',
+                display: 'block',
                 mb: 2,
               })}
             >
               Author
             </label>
-            {editingField === "author" ? (
+            {editingField === 'author' ? (
               <input
                 type="text"
                 value={tutorial.author}
                 onChange={(e) => updateTutorialMeta({ author: e.target.value })}
                 onBlur={() => setEditingField(null)}
                 onKeyDown={(e) => {
-                  if (e.key === "Enter" || e.key === "Escape") {
-                    setEditingField(null);
+                  if (e.key === 'Enter' || e.key === 'Escape') {
+                    setEditingField(null)
                   }
                 }}
                 className={css({
-                  w: "full",
+                  w: 'full',
                   p: 2,
-                  border: "1px solid",
-                  borderColor: "blue.300",
-                  borderRadius: "md",
-                  fontSize: "sm",
+                  border: '1px solid',
+                  borderColor: 'blue.300',
+                  borderRadius: 'md',
+                  fontSize: 'sm',
                 })}
               />
             ) : (
               <div
-                onClick={() => setEditingField("author")}
+                onClick={() => setEditingField('author')}
                 className={css({
-                  fontSize: "sm",
-                  cursor: "pointer",
+                  fontSize: 'sm',
+                  cursor: 'pointer',
                   p: 2,
-                  border: "1px solid",
-                  borderColor: "gray.200",
-                  borderRadius: "md",
-                  _hover: { bg: "gray.50", borderColor: "gray.300" },
+                  border: '1px solid',
+                  borderColor: 'gray.200',
+                  borderRadius: 'md',
+                  _hover: { bg: 'gray.50', borderColor: 'gray.300' },
                 })}
               >
                 {tutorial.author}
@@ -446,8 +440,8 @@ function TutorialInfoModal({
         <div
           className={css({
             mt: 6,
-            display: "flex",
-            justifyContent: "flex-end",
+            display: 'flex',
+            justifyContent: 'flex-end',
           })}
         >
           <button
@@ -455,14 +449,14 @@ function TutorialInfoModal({
             className={css({
               px: 4,
               py: 2,
-              bg: "blue.500",
-              color: "white",
-              border: "none",
-              borderRadius: "md",
-              fontSize: "sm",
-              fontWeight: "medium",
-              cursor: "pointer",
-              _hover: { bg: "blue.600" },
+              bg: 'blue.500',
+              color: 'white',
+              border: 'none',
+              borderRadius: 'md',
+              fontSize: 'sm',
+              fontWeight: 'medium',
+              cursor: 'pointer',
+              _hover: { bg: 'blue.600' },
             })}
           >
             Done
@@ -470,39 +464,38 @@ function TutorialInfoModal({
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 // Practice Step Preview Component
 interface PracticeStepPreviewProps {
-  step: PracticeStep;
+  step: PracticeStep
 }
 
 function PracticeStepPreview({ step }: PracticeStepPreviewProps) {
   const [problems, setProblems] = useState<
     Array<{
-      id: string;
-      terms: number[];
-      answer: number;
-      difficulty: "easy" | "medium" | "hard";
-      requiredSkills: string[];
+      id: string
+      terms: number[]
+      answer: number
+      difficulty: 'easy' | 'medium' | 'hard'
+      requiredSkills: string[]
     }>
-  >([]);
-  const [isGenerating, setIsGenerating] = useState(false);
+  >([])
+  const [isGenerating, setIsGenerating] = useState(false)
 
   const generateProblems = useCallback(async () => {
-    setIsGenerating(true);
-    const generatedProblems = [];
-    const maxToShow = Math.min(6, step.problemCount); // Show up to 6 problems in preview
-    const seenProblems = new Set<string>(); // Track generated problems to avoid duplicates
+    setIsGenerating(true)
+    const generatedProblems = []
+    const maxToShow = Math.min(6, step.problemCount) // Show up to 6 problems in preview
+    const seenProblems = new Set<string>() // Track generated problems to avoid duplicates
 
     // Use a basic configuration for generating problems
-    const config = createBasicAllowedConfiguration();
-    const { required, target, forbidden } =
-      skillConfigurationToSkillSets(config);
+    const config = createBasicAllowedConfiguration()
+    const { required, target, forbidden } = skillConfigurationToSkillSets(config)
 
-    let attempts = 0;
-    const maxAttempts = 200; // Prevent infinite loops
+    let attempts = 0
+    const maxAttempts = 200 // Prevent infinite loops
 
     while (generatedProblems.length < maxToShow && attempts < maxAttempts) {
       const problem = generateSingleProblem(
@@ -516,56 +509,54 @@ function PracticeStepPreview({ step }: PracticeStepPreviewProps) {
         step.requiredSkills || required,
         step.targetSkills || target,
         step.forbiddenSkills || forbidden,
-        50, // attempts
-      );
+        50 // attempts
+      )
 
       if (problem) {
         // Create a unique key for the problem based on terms and answer
-        const problemKey = `${problem.terms.join("+")}_${problem.answer}`;
+        const problemKey = `${problem.terms.join('+')}_${problem.answer}`
 
         if (!seenProblems.has(problemKey)) {
-          seenProblems.add(problemKey);
-          generatedProblems.push(problem);
+          seenProblems.add(problemKey)
+          generatedProblems.push(problem)
         }
       }
 
-      attempts++;
+      attempts++
     }
 
-    setProblems(generatedProblems);
-    setIsGenerating(false);
-  }, [step]);
+    setProblems(generatedProblems)
+    setIsGenerating(false)
+  }, [step])
 
   useEffect(() => {
-    generateProblems();
-  }, [generateProblems]);
+    generateProblems()
+  }, [generateProblems])
 
   return (
-    <div className={css({ p: 4, height: "100%", overflowY: "auto" })}>
-      <div className={vstack({ gap: 4, alignItems: "stretch" })}>
+    <div className={css({ p: 4, height: '100%', overflowY: 'auto' })}>
+      <div className={vstack({ gap: 4, alignItems: 'stretch' })}>
         {/* Header */}
         <div
           className={css({
-            borderBottom: "1px solid",
-            borderColor: "gray.200",
+            borderBottom: '1px solid',
+            borderColor: 'gray.200',
             pb: 3,
           })}
         >
           <h2
             className={css({
-              fontSize: "xl",
-              fontWeight: "bold",
-              color: "purple.800",
+              fontSize: 'xl',
+              fontWeight: 'bold',
+              color: 'purple.800',
               mb: 2,
             })}
           >
             🎯 {step.title}
           </h2>
-          <p className={css({ color: "gray.600", mb: 2 })}>
-            {step.description}
-          </p>
-          <div className={css({ fontSize: "sm", color: "gray.500" })}>
-            {step.problemCount} problems • Max {step.maxTerms} terms • Numbers{" "}
+          <p className={css({ color: 'gray.600', mb: 2 })}>{step.description}</p>
+          <div className={css({ fontSize: 'sm', color: 'gray.500' })}>
+            {step.problemCount} problems • Max {step.maxTerms} terms • Numbers{' '}
             {step.numberRange?.min || 1}-{step.numberRange?.max || 9}
           </div>
         </div>
@@ -573,30 +564,28 @@ function PracticeStepPreview({ step }: PracticeStepPreviewProps) {
         {/* Action Button */}
         <div
           className={css({
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
           })}
         >
-          <h3 className={css({ fontSize: "lg", fontWeight: "semibold" })}>
-            Sample Problems
-          </h3>
+          <h3 className={css({ fontSize: 'lg', fontWeight: 'semibold' })}>Sample Problems</h3>
           <button
             onClick={generateProblems}
             disabled={isGenerating}
             className={css({
               px: 4,
               py: 2,
-              bg: isGenerating ? "gray.200" : "purple.500",
-              color: isGenerating ? "gray.500" : "white",
-              border: "none",
-              borderRadius: "md",
-              fontSize: "sm",
-              cursor: isGenerating ? "not-allowed" : "pointer",
-              _hover: isGenerating ? {} : { bg: "purple.600" },
+              bg: isGenerating ? 'gray.200' : 'purple.500',
+              color: isGenerating ? 'gray.500' : 'white',
+              border: 'none',
+              borderRadius: 'md',
+              fontSize: 'sm',
+              cursor: isGenerating ? 'not-allowed' : 'pointer',
+              _hover: isGenerating ? {} : { bg: 'purple.600' },
             })}
           >
-            {isGenerating ? "Generating..." : "Regenerate"}
+            {isGenerating ? 'Generating...' : 'Regenerate'}
           </button>
         </div>
 
@@ -604,32 +593,32 @@ function PracticeStepPreview({ step }: PracticeStepPreviewProps) {
         {problems.length > 0 ? (
           <div
             className={css({
-              display: "flex",
-              flexWrap: "wrap",
+              display: 'flex',
+              flexWrap: 'wrap',
               gap: 3,
-              overflowX: "auto",
+              overflowX: 'auto',
             })}
           >
             {problems.map((problem, index) => (
               <div
                 key={problem.id}
                 className={css({
-                  bg: "white",
-                  border: "2px solid",
-                  borderColor: "purple.200",
-                  borderRadius: "lg",
+                  bg: 'white',
+                  border: '2px solid',
+                  borderColor: 'purple.200',
+                  borderRadius: 'lg',
                   p: 3,
-                  textAlign: "center",
-                  minWidth: "120px",
+                  textAlign: 'center',
+                  minWidth: '120px',
                   flexShrink: 0,
                 })}
               >
                 {/* Problem Number */}
                 <div
                   className={css({
-                    fontSize: "xs",
-                    fontWeight: "bold",
-                    color: "purple.600",
+                    fontSize: 'xs',
+                    fontWeight: 'bold',
+                    color: 'purple.600',
                     mb: 2,
                   })}
                 >
@@ -639,9 +628,9 @@ function PracticeStepPreview({ step }: PracticeStepPreviewProps) {
                 {/* Problem Display */}
                 <div
                   className={css({
-                    fontFamily: "mono",
-                    fontSize: "lg",
-                    fontWeight: "bold",
+                    fontFamily: 'mono',
+                    fontSize: 'lg',
+                    fontWeight: 'bold',
                     mb: 2,
                   })}
                 >
@@ -649,8 +638,8 @@ function PracticeStepPreview({ step }: PracticeStepPreviewProps) {
                     <div
                       key={termIndex}
                       className={css({
-                        textAlign: "right",
-                        lineHeight: "tight",
+                        textAlign: 'right',
+                        lineHeight: 'tight',
                       })}
                     >
                       {term}
@@ -658,12 +647,12 @@ function PracticeStepPreview({ step }: PracticeStepPreviewProps) {
                   ))}
                   <div
                     className={css({
-                      borderTop: "2px solid",
-                      borderColor: "gray.400",
+                      borderTop: '2px solid',
+                      borderColor: 'gray.400',
                       mt: 1,
                       pt: 1,
-                      fontSize: "xl",
-                      textAlign: "right",
+                      fontSize: 'xl',
+                      textAlign: 'right',
                     })}
                   >
                     {problem.answer}
@@ -673,23 +662,23 @@ function PracticeStepPreview({ step }: PracticeStepPreviewProps) {
                 {/* Difficulty Badge */}
                 <div
                   className={css({
-                    fontSize: "xs",
-                    fontWeight: "medium",
+                    fontSize: 'xs',
+                    fontWeight: 'medium',
                     px: 2,
                     py: 1,
-                    borderRadius: "full",
+                    borderRadius: 'full',
                     bg:
-                      problem.difficulty === "easy"
-                        ? "green.100"
-                        : problem.difficulty === "medium"
-                          ? "yellow.100"
-                          : "red.100",
+                      problem.difficulty === 'easy'
+                        ? 'green.100'
+                        : problem.difficulty === 'medium'
+                          ? 'yellow.100'
+                          : 'red.100',
                     color:
-                      problem.difficulty === "easy"
-                        ? "green.800"
-                        : problem.difficulty === "medium"
-                          ? "yellow.800"
-                          : "red.800",
+                      problem.difficulty === 'easy'
+                        ? 'green.800'
+                        : problem.difficulty === 'medium'
+                          ? 'yellow.800'
+                          : 'red.800',
                   })}
                 >
                   {problem.difficulty}
@@ -700,25 +689,25 @@ function PracticeStepPreview({ step }: PracticeStepPreviewProps) {
         ) : (
           <div
             className={css({
-              bg: "gray.50",
-              border: "2px dashed",
-              borderColor: "gray.300",
-              borderRadius: "lg",
+              bg: 'gray.50',
+              border: '2px dashed',
+              borderColor: 'gray.300',
+              borderRadius: 'lg',
               p: 8,
-              textAlign: "center",
-              color: "gray.500",
+              textAlign: 'center',
+              color: 'gray.500',
             })}
           >
             {isGenerating ? (
               <div>
-                <div className={css({ fontSize: "lg", mb: 2 })}>🔄</div>
+                <div className={css({ fontSize: 'lg', mb: 2 })}>🔄</div>
                 <div>Generating problems...</div>
               </div>
             ) : (
               <div>
-                <div className={css({ fontSize: "lg", mb: 2 })}>📝</div>
+                <div className={css({ fontSize: 'lg', mb: 2 })}>📝</div>
                 <div>No problems generated yet</div>
-                <div className={css({ fontSize: "sm", mt: 1 })}>
+                <div className={css({ fontSize: 'sm', mt: 1 })}>
                   Click "Regenerate" to create sample problems
                 </div>
               </div>
@@ -729,18 +718,18 @@ function PracticeStepPreview({ step }: PracticeStepPreviewProps) {
         {/* Configuration Summary */}
         <div
           className={css({
-            bg: "purple.50",
-            border: "1px solid",
-            borderColor: "purple.200",
-            borderRadius: "md",
+            bg: 'purple.50',
+            border: '1px solid',
+            borderColor: 'purple.200',
+            borderRadius: 'md',
             p: 3,
           })}
         >
           <h4
             className={css({
-              fontSize: "sm",
-              fontWeight: "semibold",
-              color: "purple.800",
+              fontSize: 'sm',
+              fontWeight: 'semibold',
+              color: 'purple.800',
               mb: 2,
             })}
           >
@@ -748,9 +737,9 @@ function PracticeStepPreview({ step }: PracticeStepPreviewProps) {
           </h4>
           <div
             className={css({
-              fontSize: "xs",
-              color: "purple.700",
-              lineHeight: "relaxed",
+              fontSize: 'xs',
+              color: 'purple.700',
+              lineHeight: 'relaxed',
             })}
           >
             <div>
@@ -760,12 +749,11 @@ function PracticeStepPreview({ step }: PracticeStepPreviewProps) {
               <strong>Terms per Problem:</strong> Up to {step.maxTerms}
             </div>
             <div>
-              <strong>Number Range:</strong> {step.numberRange?.min || 1} to{" "}
+              <strong>Number Range:</strong> {step.numberRange?.min || 1} to{' '}
               {step.numberRange?.max || 9}
             </div>
             <div>
-              <strong>Sum Limit:</strong>{" "}
-              {step.sumConstraints?.maxSum || "No limit"}
+              <strong>Sum Limit:</strong> {step.sumConstraints?.maxSum || 'No limit'}
             </div>
             {step.sumConstraints?.minSum && (
               <div>
@@ -776,36 +764,33 @@ function PracticeStepPreview({ step }: PracticeStepPreviewProps) {
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 // Component for the "New" dropdown for empty state
 interface NewItemDropdownProps {
-  onAddStep: () => void;
-  onAddPracticeStep: () => void;
+  onAddStep: () => void
+  onAddPracticeStep: () => void
 }
 
-function NewItemDropdown({
-  onAddStep,
-  onAddPracticeStep,
-}: NewItemDropdownProps) {
-  const [isOpen, setIsOpen] = useState(false);
+function NewItemDropdown({ onAddStep, onAddPracticeStep }: NewItemDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false)
 
   return (
-    <div className={css({ position: "relative", textAlign: "center", my: 2 })}>
+    <div className={css({ position: 'relative', textAlign: 'center', my: 2 })}>
       <button
         onClick={() => setIsOpen(!isOpen)}
         className={css({
           px: 3,
           py: 1,
-          bg: "gray.100",
-          color: "gray.600",
-          border: "1px dashed",
-          borderColor: "gray.300",
-          borderRadius: "md",
-          fontSize: "sm",
-          cursor: "pointer",
-          _hover: { bg: "gray.200", borderColor: "gray.400" },
+          bg: 'gray.100',
+          color: 'gray.600',
+          border: '1px dashed',
+          borderColor: 'gray.300',
+          borderRadius: 'md',
+          fontSize: 'sm',
+          cursor: 'pointer',
+          _hover: { bg: 'gray.200', borderColor: 'gray.400' },
         })}
       >
         + New
@@ -814,52 +799,52 @@ function NewItemDropdown({
       {isOpen && (
         <div
           className={css({
-            position: "absolute",
-            top: "100%",
-            left: "50%",
-            transform: "translateX(-50%)",
+            position: 'absolute',
+            top: '100%',
+            left: '50%',
+            transform: 'translateX(-50%)',
             mt: 1,
-            bg: "white",
-            border: "1px solid",
-            borderColor: "gray.200",
-            borderRadius: "md",
-            shadow: "md",
+            bg: 'white',
+            border: '1px solid',
+            borderColor: 'gray.200',
+            borderRadius: 'md',
+            shadow: 'md',
             zIndex: 10,
-            minW: "150px",
+            minW: '150px',
           })}
         >
           <button
             onClick={() => {
-              onAddStep();
-              setIsOpen(false);
+              onAddStep()
+              setIsOpen(false)
             }}
             className={css({
-              w: "full",
+              w: 'full',
               px: 3,
               py: 2,
-              textAlign: "left",
-              fontSize: "sm",
-              cursor: "pointer",
-              _hover: { bg: "blue.50", color: "blue.700" },
-              borderBottom: "1px solid",
-              borderColor: "gray.100",
+              textAlign: 'left',
+              fontSize: 'sm',
+              cursor: 'pointer',
+              _hover: { bg: 'blue.50', color: 'blue.700' },
+              borderBottom: '1px solid',
+              borderColor: 'gray.100',
             })}
           >
             📝 Concept Step
           </button>
           <button
             onClick={() => {
-              onAddPracticeStep();
-              setIsOpen(false);
+              onAddPracticeStep()
+              setIsOpen(false)
             }}
             className={css({
-              w: "full",
+              w: 'full',
               px: 3,
               py: 2,
-              textAlign: "left",
-              fontSize: "sm",
-              cursor: "pointer",
-              _hover: { bg: "purple.50", color: "purple.700" },
+              textAlign: 'left',
+              fontSize: 'sm',
+              cursor: 'pointer',
+              _hover: { bg: 'purple.50', color: 'purple.700' },
             })}
           >
             🎯 Problem Page
@@ -867,26 +852,26 @@ function NewItemDropdown({
         </div>
       )}
     </div>
-  );
+  )
 }
 
 interface TutorialEditorProps {
-  tutorial: Tutorial;
-  onSave?: (tutorial: Tutorial) => Promise<void>;
-  onValidate?: (tutorial: Tutorial) => Promise<TutorialValidation>;
-  onPreview?: (tutorial: Tutorial, stepIndex: number) => void;
-  className?: string;
+  tutorial: Tutorial
+  onSave?: (tutorial: Tutorial) => Promise<void>
+  onValidate?: (tutorial: Tutorial) => Promise<TutorialValidation>
+  onPreview?: (tutorial: Tutorial, stepIndex: number) => void
+  className?: string
 }
 
 interface EditorState {
-  isEditing: boolean;
-  isDirty: boolean;
-  selectedStepIndex: number | null;
-  selectedPracticeStepId: string | null;
-  previewStepIndex: number | null;
-  validation: TutorialValidation | null;
-  isSaving: boolean;
-  showTutorialInfoModal: boolean;
+  isEditing: boolean
+  isDirty: boolean
+  selectedStepIndex: number | null
+  selectedPracticeStepId: string | null
+  previewStepIndex: number | null
+  validation: TutorialValidation | null
+  isSaving: boolean
+  showTutorialInfoModal: boolean
 }
 
 export function TutorialEditor({
@@ -896,7 +881,7 @@ export function TutorialEditor({
   onPreview,
   className,
 }: TutorialEditorProps) {
-  const [tutorial, setTutorial] = useState<Tutorial>(initialTutorial);
+  const [tutorial, setTutorial] = useState<Tutorial>(initialTutorial)
   const [editorState, setEditorState] = useState<EditorState>({
     isEditing: false,
     isDirty: false,
@@ -906,108 +891,100 @@ export function TutorialEditor({
     validation: null,
     isSaving: false,
     showTutorialInfoModal: false,
-  });
+  })
 
   // Auto-validate when tutorial changes
   useEffect(() => {
     if (onValidate && editorState.isDirty) {
       onValidate(tutorial).then((validation) => {
-        setEditorState((prev) => ({ ...prev, validation }));
-      });
+        setEditorState((prev) => ({ ...prev, validation }))
+      })
     }
-  }, [tutorial, onValidate, editorState.isDirty]);
+  }, [tutorial, onValidate, editorState.isDirty])
 
   // Tutorial metadata handlers
   const updateTutorialMeta = useCallback((updates: Partial<Tutorial>) => {
-    setTutorial((prev) => ({ ...prev, ...updates, updatedAt: new Date() }));
-    setEditorState((prev) => ({ ...prev, isDirty: true }));
-  }, []);
+    setTutorial((prev) => ({ ...prev, ...updates, updatedAt: new Date() }))
+    setEditorState((prev) => ({ ...prev, isDirty: true }))
+  }, [])
 
   // Step management
   const addStep = useCallback(
     (position?: number) => {
       // Create unified sequence to determine proper positioning
       const unifiedSteps: Array<{
-        type: "concept" | "practice";
-        step: any;
-        originalIndex: number;
-        position: number;
-      }> = [];
+        type: 'concept' | 'practice'
+        step: any
+        originalIndex: number
+        position: number
+      }> = []
 
       // Add concept steps with positions
       tutorial.steps.forEach((step, index) => {
         unifiedSteps.push({
-          type: "concept",
+          type: 'concept',
           step,
           originalIndex: index,
           position: step.position ?? index,
-        });
-      });
+        })
+      })
 
       // Add practice steps with positions
-      (tutorial.practiceSteps || []).forEach((practiceStep, index) => {
+      ;(tutorial.practiceSteps || []).forEach((practiceStep, index) => {
         unifiedSteps.push({
-          type: "practice",
+          type: 'practice',
           step: practiceStep,
           originalIndex: index,
           position: practiceStep.position ?? tutorial.steps.length + index,
-        });
-      });
+        })
+      })
 
       // Sort by position to get unified sequence
-      unifiedSteps.sort((a, b) => a.position - b.position);
+      unifiedSteps.sort((a, b) => a.position - b.position)
 
       // Determine the actual position value to assign to the new step
-      let newStepPosition: number;
+      let newStepPosition: number
       if (position === undefined || position >= unifiedSteps.length) {
         // Add at end
         newStepPosition =
-          unifiedSteps.length > 0
-            ? unifiedSteps[unifiedSteps.length - 1].position + 1
-            : 0;
+          unifiedSteps.length > 0 ? unifiedSteps[unifiedSteps.length - 1].position + 1 : 0
       } else if (position === 0) {
         // Add at beginning
-        newStepPosition =
-          unifiedSteps.length > 0 ? unifiedSteps[0].position - 1 : 0;
+        newStepPosition = unifiedSteps.length > 0 ? unifiedSteps[0].position - 1 : 0
       } else {
         // Insert between existing steps
-        const prevStep = unifiedSteps[position - 1];
-        const nextStep = unifiedSteps[position];
-        newStepPosition = (prevStep.position + nextStep.position) / 2;
+        const prevStep = unifiedSteps[position - 1]
+        const nextStep = unifiedSteps[position]
+        newStepPosition = (prevStep.position + nextStep.position) / 2
       }
 
       // Generate a default operation based on existing steps
-      const existingSteps = tutorial.steps;
-      let defaultStart = 0;
-      let defaultTarget = 1;
+      const existingSteps = tutorial.steps
+      let defaultStart = 0
+      let defaultTarget = 1
 
       // Create increasingly complex defaults based on tutorial progression
       if (existingSteps.length === 0) {
         // First step: simple 0 + 1
-        defaultStart = 0;
-        defaultTarget = 1;
+        defaultStart = 0
+        defaultTarget = 1
       } else if (existingSteps.length < 5) {
         // First few steps: basic earth bead additions
-        defaultStart = existingSteps.length;
-        defaultTarget = existingSteps.length + 1;
+        defaultStart = existingSteps.length
+        defaultTarget = existingSteps.length + 1
       } else if (existingSteps.length < 10) {
         // Introduce heaven bead: 0 + 5, then combinations
-        defaultStart = existingSteps.length - 5;
-        defaultTarget = defaultStart + 5;
+        defaultStart = existingSteps.length - 5
+        defaultTarget = defaultStart + 5
       } else {
         // More complex operations: complements and multi-place
-        const baseValue = ((existingSteps.length - 10) % 8) + 2;
-        defaultStart = baseValue;
-        defaultTarget =
-          baseValue +
-          Math.min(4, Math.floor((existingSteps.length - 10) / 8) + 2);
+        const baseValue = ((existingSteps.length - 10) % 8) + 2
+        defaultStart = baseValue
+        defaultTarget = baseValue + Math.min(4, Math.floor((existingSteps.length - 10) / 8) + 2)
       }
 
       // Generate automatic instructions using our instruction generator
-      const generatedInstructions = generateAbacusInstructions(
-        defaultStart,
-        defaultTarget,
-      );
+      const generatedInstructions = generateAbacusInstructions(defaultStart, defaultTarget)
 
       const newStep: TutorialStep = {
         id: `step-${Date.now()}`,
@@ -1023,295 +1000,274 @@ export function TutorialEditor({
         tooltip: generatedInstructions.tooltip,
         // errorMessages removed - bead diff tooltip provides better guidance
         position: newStepPosition,
-      };
+      }
 
       // Add to concept steps array (position in array doesn't matter since we sort by position property)
-      const newSteps = [...tutorial.steps, newStep];
+      const newSteps = [...tutorial.steps, newStep]
 
       setTutorial((prev) => ({
         ...prev,
         steps: newSteps,
         updatedAt: new Date(),
-      }));
+      }))
       setEditorState((prev) => ({
         ...prev,
         isDirty: true,
         selectedStepIndex: newSteps.length - 1, // Select the newly added step
-      }));
+      }))
     },
-    [tutorial.steps, tutorial.practiceSteps],
-  );
+    [tutorial.steps, tutorial.practiceSteps]
+  )
 
   const _duplicateStep = useCallback(
     (stepIndex: number) => {
-      const stepToDuplicate = tutorial.steps[stepIndex];
-      if (!stepToDuplicate) return;
+      const stepToDuplicate = tutorial.steps[stepIndex]
+      if (!stepToDuplicate) return
 
       const duplicatedStep: TutorialStep = {
         ...stepToDuplicate,
         id: `step-${Date.now()}`,
         title: `${stepToDuplicate.title} (Copy)`,
-      };
+      }
 
-      const newSteps = [...tutorial.steps];
-      newSteps.splice(stepIndex + 1, 0, duplicatedStep);
+      const newSteps = [...tutorial.steps]
+      newSteps.splice(stepIndex + 1, 0, duplicatedStep)
 
       setTutorial((prev) => ({
         ...prev,
         steps: newSteps,
         updatedAt: new Date(),
-      }));
+      }))
       setEditorState((prev) => ({
         ...prev,
         isDirty: true,
         selectedStepIndex: stepIndex + 1,
-      }));
+      }))
     },
-    [tutorial.steps],
-  );
+    [tutorial.steps]
+  )
 
   const deleteStep = useCallback(
     (stepIndex: number) => {
-      if (tutorial.steps.length <= 1) return; // Don't delete the last step
+      if (tutorial.steps.length <= 1) return // Don't delete the last step
 
-      const newSteps = tutorial.steps.filter((_, index) => index !== stepIndex);
+      const newSteps = tutorial.steps.filter((_, index) => index !== stepIndex)
       setTutorial((prev) => ({
         ...prev,
         steps: newSteps,
         updatedAt: new Date(),
-      }));
+      }))
       setEditorState((prev) => ({
         ...prev,
         isDirty: true,
-        selectedStepIndex:
-          prev.selectedStepIndex === stepIndex ? null : prev.selectedStepIndex,
-      }));
+        selectedStepIndex: prev.selectedStepIndex === stepIndex ? null : prev.selectedStepIndex,
+      }))
     },
-    [tutorial.steps],
-  );
+    [tutorial.steps]
+  )
 
   const _moveStep = useCallback(
     (fromIndex: number, toIndex: number) => {
-      if (fromIndex === toIndex) return;
+      if (fromIndex === toIndex) return
 
-      const newSteps = [...tutorial.steps];
-      const [movedStep] = newSteps.splice(fromIndex, 1);
-      newSteps.splice(toIndex, 0, movedStep);
+      const newSteps = [...tutorial.steps]
+      const [movedStep] = newSteps.splice(fromIndex, 1)
+      newSteps.splice(toIndex, 0, movedStep)
 
       setTutorial((prev) => ({
         ...prev,
         steps: newSteps,
         updatedAt: new Date(),
-      }));
+      }))
       setEditorState((prev) => ({
         ...prev,
         isDirty: true,
         selectedStepIndex: toIndex,
-      }));
+      }))
     },
-    [tutorial.steps],
-  );
+    [tutorial.steps]
+  )
 
   // Practice step management
   const addPracticeStep = useCallback(
     (position?: number) => {
       // Create unified sequence to determine proper positioning
       const unifiedSteps: Array<{
-        type: "concept" | "practice";
-        step: any;
-        originalIndex: number;
-        position: number;
-      }> = [];
+        type: 'concept' | 'practice'
+        step: any
+        originalIndex: number
+        position: number
+      }> = []
 
       // Add concept steps with positions
       tutorial.steps.forEach((step, index) => {
         unifiedSteps.push({
-          type: "concept",
+          type: 'concept',
           step,
           originalIndex: index,
           position: step.position ?? index,
-        });
-      });
+        })
+      })
 
       // Add practice steps with positions
-      (tutorial.practiceSteps || []).forEach((practiceStep, index) => {
+      ;(tutorial.practiceSteps || []).forEach((practiceStep, index) => {
         unifiedSteps.push({
-          type: "practice",
+          type: 'practice',
           step: practiceStep,
           originalIndex: index,
           position: practiceStep.position ?? tutorial.steps.length + index,
-        });
-      });
+        })
+      })
 
       // Sort by position to get unified sequence
-      unifiedSteps.sort((a, b) => a.position - b.position);
+      unifiedSteps.sort((a, b) => a.position - b.position)
 
       // Determine the actual position value to assign to the new practice step
-      let newStepPosition: number;
+      let newStepPosition: number
       if (position === undefined || position >= unifiedSteps.length) {
         // Add at end
         newStepPosition =
-          unifiedSteps.length > 0
-            ? unifiedSteps[unifiedSteps.length - 1].position + 1
-            : 0;
+          unifiedSteps.length > 0 ? unifiedSteps[unifiedSteps.length - 1].position + 1 : 0
       } else if (position === 0) {
         // Add at beginning
-        newStepPosition =
-          unifiedSteps.length > 0 ? unifiedSteps[0].position - 1 : 0;
+        newStepPosition = unifiedSteps.length > 0 ? unifiedSteps[0].position - 1 : 0
       } else {
         // Insert between existing steps
-        const prevStep = unifiedSteps[position - 1];
-        const nextStep = unifiedSteps[position];
-        newStepPosition = (prevStep.position + nextStep.position) / 2;
+        const prevStep = unifiedSteps[position - 1]
+        const nextStep = unifiedSteps[position]
+        newStepPosition = (prevStep.position + nextStep.position) / 2
       }
 
       const newPracticeStep: PracticeStep = {
         id: `practice-${Date.now()}`,
-        title: "New Practice Step",
-        description: "Practice description here",
+        title: 'New Practice Step',
+        description: 'Practice description here',
         problemCount: 10,
         maxTerms: 3,
         requiredSkills: createBasicSkillSet(),
         numberRange: { min: 1, max: 9 },
         sumConstraints: { maxSum: 9 },
         position: newStepPosition,
-      };
+      }
 
       // Add to practice steps array (position in array doesn't matter since we sort by position property)
-      const newPracticeSteps = [
-        ...(tutorial.practiceSteps || []),
-        newPracticeStep,
-      ];
+      const newPracticeSteps = [...(tutorial.practiceSteps || []), newPracticeStep]
 
       setTutorial((prev) => ({
         ...prev,
         practiceSteps: newPracticeSteps,
         updatedAt: new Date(),
-      }));
+      }))
       setEditorState((prev) => ({
         ...prev,
         isDirty: true,
         selectedPracticeStepId: newPracticeStep.id,
-      }));
+      }))
     },
-    [tutorial.steps, tutorial.practiceSteps],
-  );
+    [tutorial.steps, tutorial.practiceSteps]
+  )
 
   const updatePracticeStep = useCallback(
     (stepIndex: number, updates: Partial<PracticeStep>) => {
-      const newPracticeSteps = [...(tutorial.practiceSteps || [])];
+      const newPracticeSteps = [...(tutorial.practiceSteps || [])]
       if (newPracticeSteps[stepIndex]) {
         newPracticeSteps[stepIndex] = {
           ...newPracticeSteps[stepIndex],
           ...updates,
-        };
+        }
 
         setTutorial((prev) => ({
           ...prev,
           practiceSteps: newPracticeSteps,
           updatedAt: new Date(),
-        }));
-        setEditorState((prev) => ({ ...prev, isDirty: true }));
+        }))
+        setEditorState((prev) => ({ ...prev, isDirty: true }))
       }
     },
-    [tutorial.practiceSteps],
-  );
+    [tutorial.practiceSteps]
+  )
 
   const deletePracticeStep = useCallback(
     (stepIndex: number) => {
       const newPracticeSteps = (tutorial.practiceSteps || []).filter(
-        (_, index) => index !== stepIndex,
-      );
+        (_, index) => index !== stepIndex
+      )
       setTutorial((prev) => ({
         ...prev,
         practiceSteps: newPracticeSteps,
         updatedAt: new Date(),
-      }));
-      setEditorState((prev) => ({ ...prev, isDirty: true }));
+      }))
+      setEditorState((prev) => ({ ...prev, isDirty: true }))
     },
-    [tutorial.practiceSteps],
-  );
+    [tutorial.practiceSteps]
+  )
 
   const updateStep = useCallback(
     (stepIndex: number, updates: Partial<TutorialStep>) => {
-      const newSteps = [...tutorial.steps];
-      newSteps[stepIndex] = { ...newSteps[stepIndex], ...updates };
+      const newSteps = [...tutorial.steps]
+      newSteps[stepIndex] = { ...newSteps[stepIndex], ...updates }
 
       setTutorial((prev) => ({
         ...prev,
         steps: newSteps,
         updatedAt: new Date(),
-      }));
-      setEditorState((prev) => ({ ...prev, isDirty: true }));
+      }))
+      setEditorState((prev) => ({ ...prev, isDirty: true }))
     },
-    [tutorial.steps],
-  );
+    [tutorial.steps]
+  )
 
   // Calculate step-by-step states and bead diffs for multi-step instructions
   const calculateStepStatesAndDiffs = useCallback(
     (stepIndex: number) => {
-      const step = tutorial.steps[stepIndex];
-      if (
-        !step ||
-        !step.multiStepInstructions ||
-        step.multiStepInstructions.length === 0
-      ) {
-        return [];
+      const step = tutorial.steps[stepIndex]
+      if (!step || !step.multiStepInstructions || step.multiStepInstructions.length === 0) {
+        return []
       }
 
       try {
         // Use unified sequence if available, otherwise generate it
-        let unifiedSequence = (step as any).unifiedSequence;
+        let unifiedSequence = (step as any).unifiedSequence
         if (!unifiedSequence) {
-          unifiedSequence = generateUnifiedInstructionSequence(
-            step.startValue,
-            step.targetValue,
-          );
+          unifiedSequence = generateUnifiedInstructionSequence(step.startValue, step.targetValue)
         }
 
-        const stepStates = [];
-        let currentValue = step.startValue;
+        const stepStates = []
+        let currentValue = step.startValue
 
-        console.log("=== Calculating Step States and Diffs ===");
-        console.log("Start value:", currentValue);
-        console.log("Target value:", step.targetValue);
-        console.log("Unified sequence steps:", unifiedSequence.steps.length);
-        console.log(
-          "Multi-step instructions:",
-          step.multiStepInstructions.length,
-        );
+        console.log('=== Calculating Step States and Diffs ===')
+        console.log('Start value:', currentValue)
+        console.log('Target value:', step.targetValue)
+        console.log('Unified sequence steps:', unifiedSequence.steps.length)
+        console.log('Multi-step instructions:', step.multiStepInstructions.length)
 
         for (
           let i = 0;
-          i < step.multiStepInstructions.length &&
-          i < unifiedSequence.steps.length;
+          i < step.multiStepInstructions.length && i < unifiedSequence.steps.length;
           i++
         ) {
-          const unifiedStep = unifiedSequence.steps[i];
-          const expectedValue = unifiedStep.expectedValue;
+          const unifiedStep = unifiedSequence.steps[i]
+          const expectedValue = unifiedStep.expectedValue
 
-          console.log(`\nStep ${i}:`);
-          console.log(`  From: ${currentValue} → To: ${expectedValue}`);
-          console.log(`  Math term: ${unifiedStep.mathematicalTerm}`);
+          console.log(`\nStep ${i}:`)
+          console.log(`  From: ${currentValue} → To: ${expectedValue}`)
+          console.log(`  Math term: ${unifiedStep.mathematicalTerm}`)
 
           // Calculate bead diff from current to expected state (incremental)
-          const beadDiff = calculateBeadDiffFromValues(
-            currentValue,
-            expectedValue,
-          );
+          const beadDiff = calculateBeadDiffFromValues(currentValue, expectedValue)
 
-          console.log(`  Bead diff summary: "${beadDiff.summary}"`);
-          console.log(`  Has changes: ${beadDiff.hasChanges}`);
-          console.log(`  Changes count: ${beadDiff.changes.length}`);
+          console.log(`  Bead diff summary: "${beadDiff.summary}"`)
+          console.log(`  Has changes: ${beadDiff.hasChanges}`)
+          console.log(`  Changes count: ${beadDiff.changes.length}`)
           console.log(
             `  Changes:`,
             beadDiff.changes
               .map(
                 (c) =>
-                  `${c.placeValue}:${c.beadType}:${c.direction}${c.position !== undefined ? `:pos${c.position}` : ""}`,
+                  `${c.placeValue}:${c.beadType}:${c.direction}${c.position !== undefined ? `:pos${c.position}` : ''}`
               )
-              .join(", "),
-          );
+              .join(', ')
+          )
 
           stepStates.push({
             stepIndex: i,
@@ -1320,46 +1276,46 @@ export function TutorialEditor({
             expectedValue,
             beadDiff,
             mathematicalTerm: unifiedStep.mathematicalTerm,
-          });
+          })
 
           // Update current value for next iteration (incremental approach)
-          currentValue = expectedValue;
+          currentValue = expectedValue
         }
 
-        console.log(`\nGenerated ${stepStates.length} step states`);
+        console.log(`\nGenerated ${stepStates.length} step states`)
         stepStates.forEach((state, i) => {
           console.log(
-            `  Step ${i}: ${state.currentValue}→${state.expectedValue}, changes: ${state.beadDiff.changes.length}`,
-          );
-        });
+            `  Step ${i}: ${state.currentValue}→${state.expectedValue}, changes: ${state.beadDiff.changes.length}`
+          )
+        })
 
-        return stepStates;
+        return stepStates
       } catch (error) {
-        console.error("Failed to calculate step states:", error);
-        return [];
+        console.error('Failed to calculate step states:', error)
+        return []
       }
     },
-    [tutorial.steps],
-  );
+    [tutorial.steps]
+  )
 
   // Generate unified instructions for a specific step
   const generateUnifiedInstructionsForStep = useCallback(
     (stepIndex: number) => {
-      const step = tutorial.steps[stepIndex];
-      if (!step) return;
+      const step = tutorial.steps[stepIndex]
+      if (!step) return
 
       try {
         const unifiedSequence = generateUnifiedInstructionSequence(
           step.startValue,
-          step.targetValue,
-        );
+          step.targetValue
+        )
 
         // Generate bead highlights and visual elements for compatibility
         const visualInstructions = generateAbacusInstructions(
           step.startValue,
           step.targetValue,
-          step.problem,
-        );
+          step.problem
+        )
 
         const instructionUpdates: Partial<TutorialStep> = {
           expectedAction: visualInstructions.expectedAction,
@@ -1367,96 +1323,94 @@ export function TutorialEditor({
           highlightBeads: visualInstructions.highlightBeads,
           stepBeadHighlights: visualInstructions.stepBeadHighlights,
           totalSteps: unifiedSequence.totalSteps,
-          multiStepInstructions: unifiedSequence.steps.map(
-            (step) => step.englishInstruction,
-          ), // Use unified instructions
+          multiStepInstructions: unifiedSequence.steps.map((step) => step.englishInstruction), // Use unified instructions
           tooltip: visualInstructions.tooltip,
           // errorMessages removed - bead diff tooltip provides better guidance
           // Store the unified sequence for debugging
           unifiedSequence: unifiedSequence,
-        };
+        }
 
-        updateStep(stepIndex, instructionUpdates);
+        updateStep(stepIndex, instructionUpdates)
       } catch (error) {
-        console.error("Failed to generate unified instructions:", error);
+        console.error('Failed to generate unified instructions:', error)
         // Could show user notification here
       }
     },
-    [tutorial.steps, updateStep],
-  );
+    [tutorial.steps, updateStep]
+  )
 
   // Editor actions
   const _toggleEdit = useCallback(() => {
-    setEditorState((prev) => ({ ...prev, isEditing: !prev.isEditing }));
-  }, []);
+    setEditorState((prev) => ({ ...prev, isEditing: !prev.isEditing }))
+  }, [])
 
   const previewStep = useCallback(
     (stepIndex: number) => {
-      setEditorState((prev) => ({ ...prev, previewStepIndex: stepIndex }));
-      onPreview?.(tutorial, stepIndex);
+      setEditorState((prev) => ({ ...prev, previewStepIndex: stepIndex }))
+      onPreview?.(tutorial, stepIndex)
     },
-    [tutorial, onPreview],
-  );
+    [tutorial, onPreview]
+  )
 
   const _saveTutorial = useCallback(async () => {
-    if (!onSave) return;
+    if (!onSave) return
 
-    setEditorState((prev) => ({ ...prev, isSaving: true }));
+    setEditorState((prev) => ({ ...prev, isSaving: true }))
     try {
-      await onSave(tutorial);
+      await onSave(tutorial)
       setEditorState((prev) => ({
         ...prev,
         isDirty: false,
         isSaving: false,
-      }));
+      }))
     } catch (error) {
-      console.error("Failed to save tutorial:", error);
-      setEditorState((prev) => ({ ...prev, isSaving: false }));
+      console.error('Failed to save tutorial:', error)
+      setEditorState((prev) => ({ ...prev, isSaving: false }))
     }
-  }, [tutorial, onSave]);
+  }, [tutorial, onSave])
 
   // Validation helpers
   const getStepErrors = useCallback(
     (stepIndex: number): StepValidationError[] => {
-      if (!editorState.validation) return [];
+      if (!editorState.validation) return []
       return editorState.validation.errors.filter(
-        (error) => error.stepId === tutorial.steps[stepIndex]?.id,
-      );
+        (error) => error.stepId === tutorial.steps[stepIndex]?.id
+      )
     },
-    [editorState.validation, tutorial.steps],
-  );
+    [editorState.validation, tutorial.steps]
+  )
 
   const getStepWarnings = useCallback(
     (stepIndex: number): StepValidationError[] => {
-      if (!editorState.validation) return [];
+      if (!editorState.validation) return []
       return editorState.validation.warnings.filter(
-        (warning) => warning.stepId === tutorial.steps[stepIndex]?.id,
-      );
+        (warning) => warning.stepId === tutorial.steps[stepIndex]?.id
+      )
     },
-    [editorState.validation, tutorial.steps],
-  );
+    [editorState.validation, tutorial.steps]
+  )
 
   // Memoize TutorialPlayer props to avoid expensive recalculations on every render
   const playerStepIndex = useMemo(() => {
     return editorState.selectedStepIndex !== null
       ? editorState.selectedStepIndex
-      : editorState.previewStepIndex || 0;
-  }, [editorState.selectedStepIndex, editorState.previewStepIndex]);
+      : editorState.previewStepIndex || 0
+  }, [editorState.selectedStepIndex, editorState.previewStepIndex])
 
   const playerKey = useMemo(() => {
-    return `tutorial-player-${playerStepIndex}`;
-  }, [playerStepIndex]);
+    return `tutorial-player-${playerStepIndex}`
+  }, [playerStepIndex])
 
   return (
     <div
       className={css(
         {
-          display: "flex",
-          flexDirection: "column",
-          height: "100%",
-          bg: "gray.50",
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+          bg: 'gray.50',
         },
-        className,
+        className
       )}
     >
       {editorState.isEditing ? (
@@ -1464,21 +1418,21 @@ export function TutorialEditor({
           {({ position, separatorProps }) => (
             <div
               className={css({
-                display: "flex",
-                width: "100%",
-                height: "100%",
+                display: 'flex',
+                width: '100%',
+                height: '100%',
               })}
             >
               {/* Editor sidebar */}
               <div
                 className={css({
                   width: `${position}px`,
-                  bg: "white",
-                  borderRight: "1px solid",
-                  borderColor: "gray.200",
-                  display: "flex",
-                  flexDirection: "column",
-                  height: "100%",
+                  bg: 'white',
+                  borderRight: '1px solid',
+                  borderColor: 'gray.200',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  height: '100%',
                   flexShrink: 0,
                 })}
               >
@@ -1486,8 +1440,8 @@ export function TutorialEditor({
                 <div
                   className={css({
                     p: 3,
-                    borderBottom: "1px solid",
-                    borderColor: "gray.200",
+                    borderBottom: '1px solid',
+                    borderColor: 'gray.200',
                     flexShrink: 0,
                   })}
                 >
@@ -1499,43 +1453,36 @@ export function TutorialEditor({
                       }))
                     }
                     className={css({
-                      w: "full",
+                      w: 'full',
                       p: 3,
-                      bg: "white",
-                      border: "1px solid",
-                      borderColor: "gray.300",
-                      borderRadius: "md",
-                      fontSize: "sm",
-                      fontWeight: "medium",
-                      cursor: "pointer",
-                      textAlign: "left",
-                      _hover: { bg: "gray.50", borderColor: "gray.400" },
+                      bg: 'white',
+                      border: '1px solid',
+                      borderColor: 'gray.300',
+                      borderRadius: 'md',
+                      fontSize: 'sm',
+                      fontWeight: 'medium',
+                      cursor: 'pointer',
+                      textAlign: 'left',
+                      _hover: { bg: 'gray.50', borderColor: 'gray.400' },
                     })}
                   >
                     <div
                       className={css({
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "space-between",
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
                       })}
                     >
                       <div>
-                        <div className={css({ fontWeight: "medium", mb: 1 })}>
+                        <div className={css({ fontWeight: 'medium', mb: 1 })}>
                           Tutorial Settings
                         </div>
-                        <div
-                          className={css({ fontSize: "xs", color: "gray.600" })}
-                        >
-                          {tutorial.category} • {tutorial.difficulty} •{" "}
-                          {tutorial.estimatedDuration}
+                        <div className={css({ fontSize: 'xs', color: 'gray.600' })}>
+                          {tutorial.category} • {tutorial.difficulty} • {tutorial.estimatedDuration}
                           min
                         </div>
                       </div>
-                      <div
-                        className={css({ fontSize: "lg", color: "gray.400" })}
-                      >
-                        ⚙️
-                      </div>
+                      <div className={css({ fontSize: 'lg', color: 'gray.400' })}>⚙️</div>
                     </div>
                   </button>
                 </div>
@@ -1544,57 +1491,51 @@ export function TutorialEditor({
                 <div
                   className={css({
                     flex: 1,
-                    overflowY: "auto",
+                    overflowY: 'auto',
                     p: 4,
                     minHeight: 0,
                   })}
                 >
                   <div>
-                    <h3 className={css({ fontWeight: "bold", mb: 3 })}>
+                    <h3 className={css({ fontWeight: 'bold', mb: 3 })}>
                       Tutorial Flow (
-                      {(tutorial.steps?.length || 0) +
-                        (tutorial.practiceSteps?.length || 0)}{" "}
-                      items)
+                      {(tutorial.steps?.length || 0) + (tutorial.practiceSteps?.length || 0)} items)
                     </h3>
 
                     <div className={stack({ gap: 0 })}>
                       {(() => {
                         // Create unified sequence of all steps with positions
                         const unifiedSteps: Array<{
-                          type: "concept" | "practice";
-                          step: any;
-                          originalIndex: number;
-                          position: number;
-                        }> = [];
+                          type: 'concept' | 'practice'
+                          step: any
+                          originalIndex: number
+                          position: number
+                        }> = []
 
                         // Add concept steps with positions
                         tutorial.steps.forEach((step, index) => {
                           unifiedSteps.push({
-                            type: "concept",
+                            type: 'concept',
                             step,
                             originalIndex: index,
                             position: step.position ?? index,
-                          });
-                        });
+                          })
+                        })
 
                         // Add practice steps with positions
-                        (tutorial.practiceSteps || []).forEach(
-                          (practiceStep, index) => {
-                            unifiedSteps.push({
-                              type: "practice",
-                              step: practiceStep,
-                              originalIndex: index,
-                              position:
-                                practiceStep.position ??
-                                tutorial.steps.length + index,
-                            });
-                          },
-                        );
+                        ;(tutorial.practiceSteps || []).forEach((practiceStep, index) => {
+                          unifiedSteps.push({
+                            type: 'practice',
+                            step: practiceStep,
+                            originalIndex: index,
+                            position: practiceStep.position ?? tutorial.steps.length + index,
+                          })
+                        })
 
                         // Sort by position
-                        unifiedSteps.sort((a, b) => a.position - b.position);
+                        unifiedSteps.sort((a, b) => a.position - b.position)
 
-                        const items = [];
+                        const items = []
 
                         // Add BetweenStepAdd at the beginning
                         items.push(
@@ -1602,19 +1543,15 @@ export function TutorialEditor({
                             key="add-0"
                             onAddStep={() => addStep(0)}
                             onAddPracticeStep={() => addPracticeStep(0)}
-                          />,
-                        );
+                          />
+                        )
 
                         // Render each step with BetweenStepAdd after it
                         unifiedSteps.forEach((item, index) => {
-                          if (item.type === "concept") {
-                            const errors = getStepErrors(item.originalIndex);
-                            const warnings = getStepWarnings(
-                              item.originalIndex,
-                            );
-                            const isSelected =
-                              editorState.selectedStepIndex ===
-                              item.originalIndex;
+                          if (item.type === 'concept') {
+                            const errors = getStepErrors(item.originalIndex)
+                            const warnings = getStepWarnings(item.originalIndex)
+                            const isSelected = editorState.selectedStepIndex === item.originalIndex
 
                             items.push(
                               <div key={`concept-${item.step.id}`}>
@@ -1635,30 +1572,25 @@ export function TutorialEditor({
                                       selectedPracticeStepId: null,
                                     }))
                                   }
-                                  onPreview={() =>
-                                    previewStep(item.originalIndex)
-                                  }
-                                  onDelete={() =>
-                                    deleteStep(item.originalIndex)
-                                  }
+                                  onPreview={() => previewStep(item.originalIndex)}
+                                  onDelete={() => deleteStep(item.originalIndex)}
                                 >
                                   {/* Error/Warning Details - show when there are issues */}
-                                  {(errors.length > 0 ||
-                                    warnings.length > 0) && (
+                                  {(errors.length > 0 || warnings.length > 0) && (
                                     <div
                                       className={css({
                                         mt: 1,
                                         pt: 1,
-                                        borderTop: "1px solid",
-                                        borderColor: "gray.200",
+                                        borderTop: '1px solid',
+                                        borderColor: 'gray.200',
                                       })}
                                     >
                                       {errors.map((error, errorIndex) => (
                                         <div
                                           key={errorIndex}
                                           className={css({
-                                            fontSize: "xs",
-                                            color: "red.600",
+                                            fontSize: 'xs',
+                                            color: 'red.600',
                                             mb: 0.5,
                                           })}
                                         >
@@ -1669,8 +1601,8 @@ export function TutorialEditor({
                                         <div
                                           key={warningIndex}
                                           className={css({
-                                            fontSize: "xs",
-                                            color: "orange.600",
+                                            fontSize: 'xs',
+                                            color: 'orange.600',
                                             mb: 0.5,
                                           })}
                                         >
@@ -1680,13 +1612,11 @@ export function TutorialEditor({
                                     </div>
                                   )}
                                 </CompactStepItem>
-                              </div>,
-                            );
+                              </div>
+                            )
                           } else {
                             // Practice step
-                            const isSelected =
-                              editorState.selectedPracticeStepId ===
-                              item.step.id;
+                            const isSelected = editorState.selectedPracticeStepId === item.step.id
 
                             items.push(
                               <div key={`practice-${item.step.id}`}>
@@ -1705,12 +1635,10 @@ export function TutorialEditor({
                                       selectedStepIndex: null,
                                     }))
                                   }
-                                  onDelete={() =>
-                                    deletePracticeStep(item.originalIndex)
-                                  }
+                                  onDelete={() => deletePracticeStep(item.originalIndex)}
                                 />
-                              </div>,
-                            );
+                              </div>
+                            )
                           }
 
                           // Add BetweenStepAdd after each step
@@ -1718,44 +1646,37 @@ export function TutorialEditor({
                             <BetweenStepAdd
                               key={`add-${index + 1}`}
                               onAddStep={() => addStep(index + 1)}
-                              onAddPracticeStep={() =>
-                                addPracticeStep(index + 1)
-                              }
-                            />,
-                          );
-                        });
+                              onAddPracticeStep={() => addPracticeStep(index + 1)}
+                            />
+                          )
+                        })
 
                         // Show empty state if no actual steps (only BetweenStepAdd components)
                         if (unifiedSteps.length === 0) {
                           return (
                             <div
                               className={css({
-                                textAlign: "center",
+                                textAlign: 'center',
                                 py: 8,
-                                color: "gray.500",
+                                color: 'gray.500',
                               })}
                             >
-                              <div className={css({ mb: 4, fontSize: "lg" })}>
-                                📝
-                              </div>
-                              <div
-                                className={css({ mb: 4, fontWeight: "medium" })}
-                              >
+                              <div className={css({ mb: 4, fontSize: 'lg' })}>📝</div>
+                              <div className={css({ mb: 4, fontWeight: 'medium' })}>
                                 No steps yet
                               </div>
-                              <div className={css({ mb: 4, fontSize: "sm" })}>
-                                Add your first concept step or practice step to
-                                get started
+                              <div className={css({ mb: 4, fontSize: 'sm' })}>
+                                Add your first concept step or practice step to get started
                               </div>
                               <NewItemDropdown
                                 onAddStep={() => addStep(0)}
                                 onAddPracticeStep={() => addPracticeStep(0)}
                               />
                             </div>
-                          );
+                          )
                         }
 
-                        return items;
+                        return items
                       })()}
                     </div>
                   </div>
@@ -1766,13 +1687,13 @@ export function TutorialEditor({
               <hr
                 {...separatorProps}
                 className={css({
-                  width: "4px",
-                  height: "auto",
-                  border: "none",
-                  bg: "gray.300",
-                  cursor: "ew-resize",
-                  _hover: { bg: "blue.400" },
-                  transition: "background-color 0.2s",
+                  width: '4px',
+                  height: 'auto',
+                  border: 'none',
+                  bg: 'gray.300',
+                  cursor: 'ew-resize',
+                  _hover: { bg: 'blue.400' },
+                  transition: 'background-color 0.2s',
                 })}
               />
 
@@ -1780,22 +1701,21 @@ export function TutorialEditor({
               <div
                 className={css({
                   width: `calc(100% - ${position}px - 4px)`,
-                  display: "flex",
-                  flexDirection: "row",
-                  height: "100%",
+                  display: 'flex',
+                  flexDirection: 'row',
+                  height: '100%',
                 })}
               >
                 {/* Unified Step Editor - handles both concept and practice steps */}
-                {editorState.selectedStepIndex !== null ||
-                editorState.selectedPracticeStepId ? (
+                {editorState.selectedStepIndex !== null || editorState.selectedPracticeStepId ? (
                   <div
                     className={css({
-                      flex: "0 0 400px",
-                      bg: "white",
-                      borderRight: "1px solid",
-                      borderColor: "gray.200",
-                      overflowY: "auto",
-                      height: "100%",
+                      flex: '0 0 400px',
+                      bg: 'white',
+                      borderRight: '1px solid',
+                      borderColor: 'gray.200',
+                      overflowY: 'auto',
+                      height: '100%',
                     })}
                   >
                     {/* Conditional Editor Content */}
@@ -1814,10 +1734,7 @@ export function TutorialEditor({
                         <FormGroup>
                           <TextInput
                             label="Title"
-                            value={
-                              tutorial.steps[editorState.selectedStepIndex]
-                                .title
-                            }
+                            value={tutorial.steps[editorState.selectedStepIndex].title}
                             onChange={(value) =>
                               updateStep(editorState.selectedStepIndex, {
                                 title: value,
@@ -1827,10 +1744,7 @@ export function TutorialEditor({
 
                           <TextInput
                             label="Problem"
-                            value={
-                              tutorial.steps[editorState.selectedStepIndex]
-                                .problem
-                            }
+                            value={tutorial.steps[editorState.selectedStepIndex].problem}
                             onChange={(value) =>
                               updateStep(editorState.selectedStepIndex, {
                                 problem: value,
@@ -1841,10 +1755,7 @@ export function TutorialEditor({
                           <FormGroup columns={2}>
                             <NumberInput
                               label="Start Value"
-                              value={
-                                tutorial.steps[editorState.selectedStepIndex]
-                                  .startValue
-                              }
+                              value={tutorial.steps[editorState.selectedStepIndex].startValue}
                               onChange={(value) =>
                                 updateStep(editorState.selectedStepIndex, {
                                   startValue: value,
@@ -1853,10 +1764,7 @@ export function TutorialEditor({
                             />
                             <NumberInput
                               label="Target Value"
-                              value={
-                                tutorial.steps[editorState.selectedStepIndex]
-                                  .targetValue
-                              }
+                              value={tutorial.steps[editorState.selectedStepIndex].targetValue}
                               onChange={(value) =>
                                 updateStep(editorState.selectedStepIndex, {
                                   targetValue: value,
@@ -1869,24 +1777,24 @@ export function TutorialEditor({
                           <div
                             className={css({
                               p: 3,
-                              bg: "blue.50",
-                              borderRadius: "md",
-                              border: "1px solid",
-                              borderColor: "blue.200",
+                              bg: 'blue.50',
+                              borderRadius: 'md',
+                              border: '1px solid',
+                              borderColor: 'blue.200',
                             })}
                           >
                             <div
                               className={hstack({
-                                justifyContent: "space-between",
-                                alignItems: "center",
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
                                 mb: 2,
                               })}
                             >
                               <span
                                 className={css({
-                                  fontSize: "sm",
-                                  fontWeight: "medium",
-                                  color: "blue.800",
+                                  fontSize: 'sm',
+                                  fontWeight: 'medium',
+                                  color: 'blue.800',
                                 })}
                               >
                                 🤖 Automatic Instructions
@@ -1895,18 +1803,18 @@ export function TutorialEditor({
                                 <button
                                   onClick={() =>
                                     generateUnifiedInstructionsForStep(
-                                      editorState.selectedStepIndex,
+                                      editorState.selectedStepIndex
                                     )
                                   }
                                   className={css({
                                     px: 3,
                                     py: 1,
-                                    fontSize: "xs",
-                                    bg: "green.600",
-                                    color: "white",
-                                    borderRadius: "md",
-                                    cursor: "pointer",
-                                    _hover: { bg: "green.700" },
+                                    fontSize: 'xs',
+                                    bg: 'green.600',
+                                    color: 'white',
+                                    borderRadius: 'md',
+                                    cursor: 'pointer',
+                                    _hover: { bg: 'green.700' },
                                   })}
                                 >
                                   ✨ Generate Instructions
@@ -1915,23 +1823,19 @@ export function TutorialEditor({
                             </div>
                             <p
                               className={css({
-                                fontSize: "xs",
-                                color: "blue.700",
+                                fontSize: 'xs',
+                                color: 'blue.700',
                                 mb: 0,
                               })}
                             >
-                              Automatically generates pedagogical decomposition
-                              like "3 + 14 = 3 + 10 + (5 - 1) = 17" with proper
-                              soroban complement rules.
+                              Automatically generates pedagogical decomposition like "3 + 14 = 3 +
+                              10 + (5 - 1) = 17" with proper soroban complement rules.
                             </p>
                           </div>
 
                           <TextInput
                             label="Description"
-                            value={
-                              tutorial.steps[editorState.selectedStepIndex]
-                                .description
-                            }
+                            value={tutorial.steps[editorState.selectedStepIndex].description}
                             onChange={(value) =>
                               updateStep(editorState.selectedStepIndex, {
                                 description: value,
@@ -1942,23 +1846,22 @@ export function TutorialEditor({
                           />
 
                           {/* Unified Pedagogical Decomposition Display */}
-                          {(
-                            tutorial.steps[editorState.selectedStepIndex] as any
-                          )?.unifiedSequence && (
+                          {(tutorial.steps[editorState.selectedStepIndex] as any)
+                            ?.unifiedSequence && (
                             <div
                               className={css({
                                 p: 3,
-                                bg: "green.50",
-                                borderRadius: "md",
-                                border: "1px solid",
-                                borderColor: "green.200",
+                                bg: 'green.50',
+                                borderRadius: 'md',
+                                border: '1px solid',
+                                borderColor: 'green.200',
                               })}
                             >
                               <div
                                 className={css({
-                                  fontSize: "sm",
-                                  fontWeight: "medium",
-                                  color: "green.800",
+                                  fontSize: 'sm',
+                                  fontWeight: 'medium',
+                                  color: 'green.800',
                                   mb: 2,
                                 })}
                               >
@@ -1966,32 +1869,28 @@ export function TutorialEditor({
                               </div>
                               <div
                                 className={css({
-                                  fontFamily: "mono",
-                                  fontSize: "sm",
-                                  color: "green.700",
-                                  bg: "green.100",
+                                  fontFamily: 'mono',
+                                  fontSize: 'sm',
+                                  color: 'green.700',
+                                  bg: 'green.100',
                                   p: 2,
-                                  borderRadius: "sm",
+                                  borderRadius: 'sm',
                                   mb: 2,
                                 })}
                               >
                                 {
-                                  (
-                                    tutorial.steps[
-                                      editorState.selectedStepIndex
-                                    ] as any
-                                  ).unifiedSequence.fullDecomposition
+                                  (tutorial.steps[editorState.selectedStepIndex] as any)
+                                    .unifiedSequence.fullDecomposition
                                 }
                               </div>
                               <div
                                 className={css({
-                                  fontSize: "xs",
-                                  color: "green.600",
+                                  fontSize: 'xs',
+                                  color: 'green.600',
                                 })}
                               >
-                                This shows the complete mathematical breakdown
-                                with 1:1 mapping to bead movements. Each term
-                                corresponds to specific abacus actions in
+                                This shows the complete mathematical breakdown with 1:1 mapping to
+                                bead movements. Each term corresponds to specific abacus actions in
                                 pedagogical order.
                               </div>
                             </div>
@@ -2001,18 +1900,18 @@ export function TutorialEditor({
                           <div
                             className={css({
                               p: 3,
-                              bg: "gray.50",
-                              borderRadius: "md",
-                              border: "1px solid",
-                              borderColor: "gray.200",
+                              bg: 'gray.50',
+                              borderRadius: 'md',
+                              border: '1px solid',
+                              borderColor: 'gray.200',
                             })}
                           >
                             <h4
                               className={css({
-                                fontSize: "sm",
-                                fontWeight: "medium",
+                                fontSize: 'sm',
+                                fontWeight: 'medium',
                                 mb: 3,
-                                color: "gray.800",
+                                color: 'gray.800',
                               })}
                             >
                               ✏️ Manual Instruction Editing
@@ -2022,10 +1921,10 @@ export function TutorialEditor({
                               <div>
                                 <label
                                   className={css({
-                                    fontSize: "sm",
-                                    fontWeight: "medium",
-                                    color: "gray.700",
-                                    display: "block",
+                                    fontSize: 'sm',
+                                    fontWeight: 'medium',
+                                    color: 'gray.700',
+                                    display: 'block',
                                     mb: 2,
                                   })}
                                 >
@@ -2033,9 +1932,7 @@ export function TutorialEditor({
                                 </label>
                                 <select
                                   value={
-                                    tutorial.steps[
-                                      editorState.selectedStepIndex
-                                    ].expectedAction
+                                    tutorial.steps[editorState.selectedStepIndex].expectedAction
                                   }
                                   onChange={(e) =>
                                     updateStep(editorState.selectedStepIndex, {
@@ -2043,12 +1940,12 @@ export function TutorialEditor({
                                     })
                                   }
                                   className={css({
-                                    w: "full",
+                                    w: 'full',
                                     p: 2,
-                                    border: "1px solid",
-                                    borderColor: "gray.300",
-                                    borderRadius: "md",
-                                    fontSize: "sm",
+                                    border: '1px solid',
+                                    borderColor: 'gray.300',
+                                    borderRadius: 'md',
+                                    fontSize: 'sm',
                                   })}
                                 >
                                   <option value="add">Add</option>
@@ -2060,8 +1957,7 @@ export function TutorialEditor({
                               <TextInput
                                 label="Action Description"
                                 value={
-                                  tutorial.steps[editorState.selectedStepIndex]
-                                    .actionDescription
+                                  tutorial.steps[editorState.selectedStepIndex].actionDescription
                                 }
                                 onChange={(value) =>
                                   updateStep(editorState.selectedStepIndex, {
@@ -2075,15 +1971,12 @@ export function TutorialEditor({
                               <TextInput
                                 label="Tooltip Title"
                                 value={
-                                  tutorial.steps[editorState.selectedStepIndex]
-                                    .tooltip.content
+                                  tutorial.steps[editorState.selectedStepIndex].tooltip.content
                                 }
                                 onChange={(value) =>
                                   updateStep(editorState.selectedStepIndex, {
                                     tooltip: {
-                                      ...tutorial.steps[
-                                        editorState.selectedStepIndex
-                                      ].tooltip,
+                                      ...tutorial.steps[editorState.selectedStepIndex].tooltip,
                                       content: value,
                                     },
                                   })
@@ -2093,15 +1986,12 @@ export function TutorialEditor({
                               <TextInput
                                 label="Tooltip Explanation"
                                 value={
-                                  tutorial.steps[editorState.selectedStepIndex]
-                                    .tooltip.explanation
+                                  tutorial.steps[editorState.selectedStepIndex].tooltip.explanation
                                 }
                                 onChange={(value) =>
                                   updateStep(editorState.selectedStepIndex, {
                                     tooltip: {
-                                      ...tutorial.steps[
-                                        editorState.selectedStepIndex
-                                      ].tooltip,
+                                      ...tutorial.steps[editorState.selectedStepIndex].tooltip,
                                       explanation: value,
                                     },
                                   })
@@ -2112,22 +2002,22 @@ export function TutorialEditor({
                             {/* Error messages form removed - bead diff tooltip provides better guidance */}
 
                             {/* Multi-step Instructions */}
-                            {tutorial.steps[editorState.selectedStepIndex]
-                              .expectedAction === "multi-step" && (
+                            {tutorial.steps[editorState.selectedStepIndex].expectedAction ===
+                              'multi-step' && (
                               <div className={css({ mt: 3 })}>
                                 <div
                                   className={css({
-                                    display: "flex",
-                                    justifyContent: "space-between",
-                                    alignItems: "center",
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center',
                                     mb: 2,
                                   })}
                                 >
                                   <label
                                     className={css({
-                                      fontSize: "sm",
-                                      fontWeight: "medium",
-                                      color: "gray.700",
+                                      fontSize: 'sm',
+                                      fontWeight: 'medium',
+                                      color: 'gray.700',
                                     })}
                                   >
                                     Multi-step Instructions
@@ -2135,18 +2025,18 @@ export function TutorialEditor({
                                   <button
                                     onClick={() =>
                                       generateUnifiedInstructionsForStep(
-                                        editorState.selectedStepIndex,
+                                        editorState.selectedStepIndex
                                       )
                                     }
                                     className={css({
                                       px: 3,
                                       py: 1,
-                                      fontSize: "xs",
-                                      bg: "green.500",
-                                      color: "white",
-                                      borderRadius: "md",
-                                      cursor: "pointer",
-                                      _hover: { bg: "green.600" },
+                                      fontSize: 'xs',
+                                      bg: 'green.500',
+                                      color: 'white',
+                                      borderRadius: 'md',
+                                      cursor: 'pointer',
+                                      _hover: { bg: 'green.600' },
                                     })}
                                   >
                                     ✨ Generate Instructions
@@ -2155,33 +2045,28 @@ export function TutorialEditor({
                                 <div className={css({ space: 2 })}>
                                   {(() => {
                                     // Use the new bead diff calculation for each step
-                                    const stepStatesAndDiffs =
-                                      calculateStepStatesAndDiffs(
-                                        editorState.selectedStepIndex,
-                                      );
+                                    const stepStatesAndDiffs = calculateStepStatesAndDiffs(
+                                      editorState.selectedStepIndex
+                                    )
 
                                     return (
-                                      tutorial.steps[
-                                        editorState.selectedStepIndex
-                                      ].multiStepInstructions || []
+                                      tutorial.steps[editorState.selectedStepIndex]
+                                        .multiStepInstructions || []
                                     ).map((instruction, index) => {
-                                      const stepData =
-                                        stepStatesAndDiffs[index];
+                                      const stepData = stepStatesAndDiffs[index]
                                       const expectedValue = stepData
                                         ? stepData.expectedValue.toString()
-                                        : "Calculating...";
-                                      const beadDiff = stepData
-                                        ? stepData.beadDiff
-                                        : null;
+                                        : 'Calculating...'
+                                      const beadDiff = stepData ? stepData.beadDiff : null
                                       const mathematicalTerm = stepData
                                         ? stepData.mathematicalTerm
-                                        : "";
+                                        : ''
 
                                       return (
                                         <div
                                           key={index}
                                           className={css({
-                                            display: "flex",
+                                            display: 'flex',
                                             gap: 2,
                                             mb: 2,
                                           })}
@@ -2192,47 +2077,38 @@ export function TutorialEditor({
                                               value={instruction}
                                               onChange={(e) => {
                                                 const newInstructions = [
-                                                  ...(tutorial.steps[
-                                                    editorState
-                                                      .selectedStepIndex
-                                                  ].multiStepInstructions ||
-                                                    []),
-                                                ];
-                                                newInstructions[index] =
-                                                  e.target.value;
-                                                updateStep(
-                                                  editorState.selectedStepIndex,
-                                                  {
-                                                    multiStepInstructions:
-                                                      newInstructions,
-                                                  },
-                                                );
+                                                  ...(tutorial.steps[editorState.selectedStepIndex]
+                                                    .multiStepInstructions || []),
+                                                ]
+                                                newInstructions[index] = e.target.value
+                                                updateStep(editorState.selectedStepIndex, {
+                                                  multiStepInstructions: newInstructions,
+                                                })
                                               }}
                                               className={css({
-                                                w: "full",
+                                                w: 'full',
                                                 p: 2,
-                                                border: "1px solid",
-                                                borderColor: "gray.300",
-                                                borderRadius: "md",
-                                                fontSize: "sm",
+                                                border: '1px solid',
+                                                borderColor: 'gray.300',
+                                                borderRadius: 'md',
+                                                fontSize: 'sm',
                                               })}
                                               placeholder={`Step ${index + 1}`}
                                             />
                                             <div
                                               className={css({
-                                                fontSize: "xs",
-                                                color: "gray.500",
+                                                fontSize: 'xs',
+                                                color: 'gray.500',
                                                 mt: 1,
                                               })}
                                             >
-                                              Expected state after step:{" "}
-                                              {expectedValue}
+                                              Expected state after step: {expectedValue}
                                               {mathematicalTerm && (
                                                 <span
                                                   className={css({
-                                                    color: "blue.600",
+                                                    color: 'blue.600',
                                                     ml: 2,
-                                                    fontWeight: "medium",
+                                                    fontWeight: 'medium',
                                                   })}
                                                 >
                                                   (Math: {mathematicalTerm})
@@ -2244,28 +2120,27 @@ export function TutorialEditor({
                                             {beadDiff?.hasChanges && (
                                               <div
                                                 className={css({
-                                                  fontSize: "xs",
+                                                  fontSize: 'xs',
                                                   mt: 2,
                                                   p: 2,
-                                                  bg: "yellow.50",
-                                                  border: "1px solid",
-                                                  borderColor: "yellow.200",
-                                                  borderRadius: "sm",
+                                                  bg: 'yellow.50',
+                                                  border: '1px solid',
+                                                  borderColor: 'yellow.200',
+                                                  borderRadius: 'sm',
                                                 })}
                                               >
                                                 <div
                                                   className={css({
-                                                    fontWeight: "medium",
-                                                    color: "yellow.800",
+                                                    fontWeight: 'medium',
+                                                    color: 'yellow.800',
                                                     mb: 1,
                                                   })}
                                                 >
-                                                  🎯 Bead Movements for this
-                                                  Step:
+                                                  🎯 Bead Movements for this Step:
                                                 </div>
                                                 <div
                                                   className={css({
-                                                    color: "yellow.700",
+                                                    color: 'yellow.700',
                                                     mb: 1,
                                                   })}
                                                 >
@@ -2273,55 +2148,43 @@ export function TutorialEditor({
                                                 </div>
                                                 <div
                                                   className={css({
-                                                    display: "flex",
-                                                    flexWrap: "wrap",
+                                                    display: 'flex',
+                                                    flexWrap: 'wrap',
                                                     gap: 1,
                                                     mt: 1,
                                                   })}
                                                 >
-                                                  {beadDiff.changes.map(
-                                                    (change, changeIndex) => (
-                                                      <span
-                                                        key={changeIndex}
-                                                        className={css({
-                                                          fontSize: "xs",
-                                                          px: 1,
-                                                          py: 0.5,
-                                                          borderRadius: "xs",
-                                                          bg:
-                                                            change.direction ===
-                                                            "activate"
-                                                              ? "green.100"
-                                                              : "red.100",
-                                                          color:
-                                                            change.direction ===
-                                                            "activate"
-                                                              ? "green.800"
-                                                              : "red.800",
-                                                          border: "1px solid",
-                                                          borderColor:
-                                                            change.direction ===
-                                                            "activate"
-                                                              ? "green.300"
-                                                              : "red.300",
-                                                        })}
-                                                      >
-                                                        {change.direction ===
-                                                        "activate"
-                                                          ? "↗️"
-                                                          : "↙️"}
-                                                        {change.beadType ===
-                                                        "heaven"
-                                                          ? "H"
-                                                          : "E"}
-                                                        {change.position !==
-                                                        undefined
-                                                          ? change.position
-                                                          : ""}
-                                                        @P{change.placeValue}
-                                                      </span>
-                                                    ),
-                                                  )}
+                                                  {beadDiff.changes.map((change, changeIndex) => (
+                                                    <span
+                                                      key={changeIndex}
+                                                      className={css({
+                                                        fontSize: 'xs',
+                                                        px: 1,
+                                                        py: 0.5,
+                                                        borderRadius: 'xs',
+                                                        bg:
+                                                          change.direction === 'activate'
+                                                            ? 'green.100'
+                                                            : 'red.100',
+                                                        color:
+                                                          change.direction === 'activate'
+                                                            ? 'green.800'
+                                                            : 'red.800',
+                                                        border: '1px solid',
+                                                        borderColor:
+                                                          change.direction === 'activate'
+                                                            ? 'green.300'
+                                                            : 'red.300',
+                                                      })}
+                                                    >
+                                                      {change.direction === 'activate' ? '↗️' : '↙️'}
+                                                      {change.beadType === 'heaven' ? 'H' : 'E'}
+                                                      {change.position !== undefined
+                                                        ? change.position
+                                                        : ''}
+                                                      @P{change.placeValue}
+                                                    </span>
+                                                  ))}
                                                 </div>
                                               </div>
                                             )}
@@ -2329,61 +2192,51 @@ export function TutorialEditor({
                                           <button
                                             onClick={() => {
                                               const newInstructions = (
-                                                tutorial.steps[
-                                                  editorState.selectedStepIndex
-                                                ].multiStepInstructions || []
-                                              ).filter((_, i) => i !== index);
-                                              updateStep(
-                                                editorState.selectedStepIndex,
-                                                {
-                                                  multiStepInstructions:
-                                                    newInstructions,
-                                                },
-                                              );
+                                                tutorial.steps[editorState.selectedStepIndex]
+                                                  .multiStepInstructions || []
+                                              ).filter((_, i) => i !== index)
+                                              updateStep(editorState.selectedStepIndex, {
+                                                multiStepInstructions: newInstructions,
+                                              })
                                             }}
                                             className={css({
                                               px: 2,
                                               py: 1,
-                                              fontSize: "xs",
-                                              bg: "red.500",
-                                              color: "white",
-                                              borderRadius: "md",
-                                              cursor: "pointer",
-                                              _hover: { bg: "red.600" },
-                                              alignSelf: "flex-start",
+                                              fontSize: 'xs',
+                                              bg: 'red.500',
+                                              color: 'white',
+                                              borderRadius: 'md',
+                                              cursor: 'pointer',
+                                              _hover: { bg: 'red.600' },
+                                              alignSelf: 'flex-start',
                                             })}
                                           >
                                             Remove
                                           </button>
                                         </div>
-                                      );
-                                    });
+                                      )
+                                    })
                                   })()}
                                   <button
                                     onClick={() => {
                                       const newInstructions = [
-                                        ...(tutorial.steps[
-                                          editorState.selectedStepIndex
-                                        ].multiStepInstructions || []),
-                                        "",
-                                      ];
-                                      updateStep(
-                                        editorState.selectedStepIndex,
-                                        {
-                                          multiStepInstructions:
-                                            newInstructions,
-                                        },
-                                      );
+                                        ...(tutorial.steps[editorState.selectedStepIndex]
+                                          .multiStepInstructions || []),
+                                        '',
+                                      ]
+                                      updateStep(editorState.selectedStepIndex, {
+                                        multiStepInstructions: newInstructions,
+                                      })
                                     }}
                                     className={css({
                                       px: 3,
                                       py: 1,
-                                      fontSize: "xs",
-                                      bg: "green.500",
-                                      color: "white",
-                                      borderRadius: "md",
-                                      cursor: "pointer",
-                                      _hover: { bg: "green.600" },
+                                      fontSize: 'xs',
+                                      bg: 'green.500',
+                                      color: 'white',
+                                      borderRadius: 'md',
+                                      cursor: 'pointer',
+                                      _hover: { bg: 'green.600' },
                                     })}
                                   >
                                     Add Step
@@ -2397,15 +2250,10 @@ export function TutorialEditor({
                     ) : editorState.selectedPracticeStepId ? (
                       /* Practice Step Editor */
                       (() => {
-                        const practiceStepIndex = (
-                          tutorial.practiceSteps || []
-                        ).findIndex(
-                          (step) =>
-                            step.id === editorState.selectedPracticeStepId,
-                        );
-                        const practiceStep = (tutorial.practiceSteps || [])[
-                          practiceStepIndex
-                        ];
+                        const practiceStepIndex = (tutorial.practiceSteps || []).findIndex(
+                          (step) => step.id === editorState.selectedPracticeStepId
+                        )
+                        const practiceStep = (tutorial.practiceSteps || [])[practiceStepIndex]
 
                         return practiceStep ? (
                           <PracticeStepEditor
@@ -2414,15 +2262,15 @@ export function TutorialEditor({
                               updatePracticeStep(practiceStepIndex, updatedStep)
                             }
                             onDelete={() => {
-                              deletePracticeStep(practiceStepIndex);
+                              deletePracticeStep(practiceStepIndex)
                               setEditorState((prev) => ({
                                 ...prev,
                                 selectedPracticeStepId: null,
                                 selectedStepIndex: null,
-                              }));
+                              }))
                             }}
                           />
-                        ) : null;
+                        ) : null
                       })()
                     ) : null}
                   </div>
@@ -2432,8 +2280,8 @@ export function TutorialEditor({
                 <div
                   className={css({
                     flex: 1,
-                    overflowY: "auto",
-                    height: "100%",
+                    overflowY: 'auto',
+                    height: '100%',
                     minWidth: 0,
                   })}
                 >
@@ -2441,9 +2289,8 @@ export function TutorialEditor({
                     /* Practice Step Preview */
                     (() => {
                       const practiceStep = (tutorial.practiceSteps || []).find(
-                        (step) =>
-                          step.id === editorState.selectedPracticeStepId,
-                      );
+                        (step) => step.id === editorState.selectedPracticeStepId
+                      )
 
                       return practiceStep ? (
                         <PracticeStepPreview step={practiceStep} />
@@ -2451,13 +2298,13 @@ export function TutorialEditor({
                         <div
                           className={css({
                             p: 4,
-                            textAlign: "center",
-                            color: "gray.500",
+                            textAlign: 'center',
+                            color: 'gray.500',
                           })}
                         >
                           Practice step not found
                         </div>
-                      );
+                      )
                     })()
                   ) : (
                     /* Tutorial Player for Concept Steps */
@@ -2478,36 +2325,34 @@ export function TutorialEditor({
         /* Non-editing view - tutorial player with edit button */
         <div
           className={css({
-            width: "100%",
-            height: "100%",
-            position: "relative",
+            width: '100%',
+            height: '100%',
+            position: 'relative',
           })}
         >
           {/* Edit Tutorial Button */}
           <div
             className={css({
-              position: "absolute",
+              position: 'absolute',
               top: 4,
               right: 4,
               zIndex: 10,
             })}
           >
             <button
-              onClick={() =>
-                setEditorState((prev) => ({ ...prev, isEditing: true }))
-              }
+              onClick={() => setEditorState((prev) => ({ ...prev, isEditing: true }))}
               className={css({
                 px: 4,
                 py: 2,
-                bg: "blue.500",
-                color: "white",
-                border: "none",
-                borderRadius: "md",
-                fontSize: "sm",
-                fontWeight: "medium",
-                cursor: "pointer",
-                shadow: "md",
-                _hover: { bg: "blue.600" },
+                bg: 'blue.500',
+                color: 'white',
+                border: 'none',
+                borderRadius: 'md',
+                fontSize: 'sm',
+                fontWeight: 'medium',
+                cursor: 'pointer',
+                shadow: 'md',
+                _hover: { bg: 'blue.600' },
               })}
             >
               Edit Tutorial
@@ -2528,11 +2373,9 @@ export function TutorialEditor({
       <TutorialInfoModal
         tutorial={tutorial}
         isOpen={editorState.showTutorialInfoModal}
-        onClose={() =>
-          setEditorState((prev) => ({ ...prev, showTutorialInfoModal: false }))
-        }
+        onClose={() => setEditorState((prev) => ({ ...prev, showTutorialInfoModal: false }))}
         onUpdateTutorial={updateTutorialMeta}
       />
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/tutorial/TutorialNavigation.tsx b/apps/web/src/components/tutorial/TutorialNavigation.tsx
index 19c363fb..bb924429 100644
--- a/apps/web/src/components/tutorial/TutorialNavigation.tsx
+++ b/apps/web/src/components/tutorial/TutorialNavigation.tsx
@@ -1,18 +1,18 @@
-import { css } from "../../../styled-system/css";
-import { hstack } from "../../../styled-system/patterns";
+import { css } from '../../../styled-system/css'
+import { hstack } from '../../../styled-system/patterns'
 
 interface NavigationState {
-  canGoPrevious: boolean;
-  canGoNext: boolean;
-  totalSteps: number;
+  canGoPrevious: boolean
+  canGoNext: boolean
+  totalSteps: number
 }
 
 interface TutorialNavigationProps {
-  currentStepIndex: number;
-  navigationState: NavigationState;
-  isStepCompleted: boolean;
-  onPrevious: () => void;
-  onNext: () => void;
+  currentStepIndex: number
+  navigationState: NavigationState
+  isStepCompleted: boolean
+  onPrevious: () => void
+  onNext: () => void
 }
 
 export function TutorialNavigation({
@@ -25,32 +25,32 @@ export function TutorialNavigation({
   return (
     <div
       className={css({
-        borderTop: "1px solid",
-        borderColor: "gray.200",
+        borderTop: '1px solid',
+        borderColor: 'gray.200',
         p: 4,
-        bg: "gray.50",
+        bg: 'gray.50',
       })}
     >
-      <div className={hstack({ justifyContent: "space-between" })}>
+      <div className={hstack({ justifyContent: 'space-between' })}>
         <button
           onClick={onPrevious}
           disabled={!navigationState.canGoPrevious}
           className={css({
             px: 4,
             py: 2,
-            border: "1px solid",
-            borderColor: "gray.300",
-            borderRadius: "md",
-            bg: "white",
-            cursor: navigationState.canGoPrevious ? "pointer" : "not-allowed",
+            border: '1px solid',
+            borderColor: 'gray.300',
+            borderRadius: 'md',
+            bg: 'white',
+            cursor: navigationState.canGoPrevious ? 'pointer' : 'not-allowed',
             opacity: navigationState.canGoPrevious ? 1 : 0.5,
-            _hover: navigationState.canGoPrevious ? { bg: "gray.50" } : {},
+            _hover: navigationState.canGoPrevious ? { bg: 'gray.50' } : {},
           })}
         >
           ← Previous
         </button>
 
-        <div className={css({ fontSize: "sm", color: "gray.600" })}>
+        <div className={css({ fontSize: 'sm', color: 'gray.600' })}>
           Step {currentStepIndex + 1} of {navigationState.totalSteps}
         </div>
 
@@ -60,33 +60,18 @@ export function TutorialNavigation({
           className={css({
             px: 4,
             py: 2,
-            border: "1px solid",
-            borderColor:
-              navigationState.canGoNext || isStepCompleted
-                ? "blue.300"
-                : "gray.300",
-            borderRadius: "md",
-            bg:
-              navigationState.canGoNext || isStepCompleted
-                ? "blue.500"
-                : "gray.200",
-            color:
-              navigationState.canGoNext || isStepCompleted
-                ? "white"
-                : "gray.500",
-            cursor:
-              navigationState.canGoNext || isStepCompleted
-                ? "pointer"
-                : "not-allowed",
-            _hover:
-              navigationState.canGoNext || isStepCompleted
-                ? { bg: "blue.600" }
-                : {},
+            border: '1px solid',
+            borderColor: navigationState.canGoNext || isStepCompleted ? 'blue.300' : 'gray.300',
+            borderRadius: 'md',
+            bg: navigationState.canGoNext || isStepCompleted ? 'blue.500' : 'gray.200',
+            color: navigationState.canGoNext || isStepCompleted ? 'white' : 'gray.500',
+            cursor: navigationState.canGoNext || isStepCompleted ? 'pointer' : 'not-allowed',
+            _hover: navigationState.canGoNext || isStepCompleted ? { bg: 'blue.600' } : {},
           })}
         >
-          {navigationState.canGoNext ? "Next →" : "Complete Tutorial"}
+          {navigationState.canGoNext ? 'Next →' : 'Complete Tutorial'}
         </button>
       </div>
     </div>
-  );
+  )
 }
diff --git a/apps/web/src/components/tutorial/TutorialPlayer.stories.tsx b/apps/web/src/components/tutorial/TutorialPlayer.stories.tsx
index 79357c31..79f62215 100644
--- a/apps/web/src/components/tutorial/TutorialPlayer.stories.tsx
+++ b/apps/web/src/components/tutorial/TutorialPlayer.stories.tsx
@@ -1,14 +1,14 @@
-import { action } from "@storybook/addon-actions";
-import type { Meta, StoryObj } from "@storybook/react";
-import { DevAccessProvider } from "../../hooks/useAccessControl";
-import { getTutorialForEditor } from "../../utils/tutorialConverter";
-import { TutorialPlayer } from "./TutorialPlayer";
+import { action } from '@storybook/addon-actions'
+import type { Meta, StoryObj } from '@storybook/react'
+import { DevAccessProvider } from '../../hooks/useAccessControl'
+import { getTutorialForEditor } from '../../utils/tutorialConverter'
+import { TutorialPlayer } from './TutorialPlayer'
 
 const meta: Meta<typeof TutorialPlayer> = {
-  title: "Tutorial/TutorialPlayer",
+  title: 'Tutorial/TutorialPlayer',
   component: TutorialPlayer,
   parameters: {
-    layout: "fullscreen",
+    layout: 'fullscreen',
     docs: {
       description: {
         component: `
@@ -29,19 +29,19 @@ It includes navigation controls, step-by-step guidance, an interactive abacus, a
   decorators: [
     (Story) => (
       <DevAccessProvider>
-        <div style={{ height: "100vh" }}>
+        <div style={{ height: '100vh' }}>
           <Story />
         </div>
       </DevAccessProvider>
     ),
   ],
-  tags: ["autodocs"],
-};
+  tags: ['autodocs'],
+}
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
-const mockTutorial = getTutorialForEditor();
+const mockTutorial = getTutorialForEditor()
 
 export const Default: Story = {
   args: {
@@ -49,20 +49,19 @@ export const Default: Story = {
     initialStepIndex: 0,
     isDebugMode: false,
     showDebugPanel: false,
-    onStepChange: action("step-changed"),
-    onStepComplete: action("step-completed"),
-    onTutorialComplete: action("tutorial-completed"),
-    onEvent: action("tutorial-event"),
+    onStepChange: action('step-changed'),
+    onStepComplete: action('step-completed'),
+    onTutorialComplete: action('tutorial-completed'),
+    onEvent: action('tutorial-event'),
   },
   parameters: {
     docs: {
       description: {
-        story:
-          "Default tutorial player starting from the first step with minimal UI.",
+        story: 'Default tutorial player starting from the first step with minimal UI.',
       },
     },
   },
-};
+}
 
 export const WithDebugMode: Story = {
   args: {
@@ -74,11 +73,11 @@ export const WithDebugMode: Story = {
     docs: {
       description: {
         story:
-          "Tutorial player with debug mode enabled, showing debug panel and additional controls for development.",
+          'Tutorial player with debug mode enabled, showing debug panel and additional controls for development.',
       },
     },
   },
-};
+}
 
 export const StartingFromMiddle: Story = {
   args: {
@@ -91,11 +90,11 @@ export const StartingFromMiddle: Story = {
     docs: {
       description: {
         story:
-          "Tutorial player starting from the middle of the tutorial (heaven bead introduction).",
+          'Tutorial player starting from the middle of the tutorial (heaven bead introduction).',
       },
     },
   },
-};
+}
 
 export const ComplexStep: Story = {
   args: {
@@ -108,11 +107,11 @@ export const ComplexStep: Story = {
     docs: {
       description: {
         story:
-          "Tutorial player on a complex multi-step instruction (five complements) with full debugging enabled.",
+          'Tutorial player on a complex multi-step instruction (five complements) with full debugging enabled.',
       },
     },
   },
-};
+}
 
 export const MinimalTutorial: Story = {
   args: {
@@ -123,20 +122,20 @@ export const MinimalTutorial: Story = {
     initialStepIndex: 0,
     isDebugMode: false,
     showDebugPanel: false,
-    onStepChange: action("step-changed"),
-    onStepComplete: action("step-completed"),
-    onTutorialComplete: action("tutorial-completed"),
-    onEvent: action("tutorial-event"),
+    onStepChange: action('step-changed'),
+    onStepComplete: action('step-completed'),
+    onTutorialComplete: action('tutorial-completed'),
+    onEvent: action('tutorial-event'),
   },
   parameters: {
     docs: {
       description: {
         story:
-          "Minimal tutorial with only the first 3 basic addition steps for testing shorter tutorials.",
+          'Minimal tutorial with only the first 3 basic addition steps for testing shorter tutorials.',
       },
     },
   },
-};
+}
 
 export const InteractiveDemo: Story = {
   args: {
@@ -169,7 +168,7 @@ Interactive demo showing all tutorial player features:
   },
   play: async ({ canvasElement }) => {
     // Optional: Add play function for automated interactions in Storybook
-    const canvas = canvasElement;
-    console.log("Tutorial player ready for interaction", canvas);
+    const canvas = canvasElement
+    console.log('Tutorial player ready for interaction', canvas)
   },
-};
+}
diff --git a/apps/web/src/components/tutorial/TutorialPlayer.tsx b/apps/web/src/components/tutorial/TutorialPlayer.tsx
index 0e2a7dc2..cca5cfab 100644
--- a/apps/web/src/components/tutorial/TutorialPlayer.tsx
+++ b/apps/web/src/components/tutorial/TutorialPlayer.tsx
@@ -1,49 +1,46 @@
-"use client";
+'use client'
 
-import * as Tooltip from "@radix-ui/react-tooltip";
+import * as Tooltip from '@radix-ui/react-tooltip'
 import {
   type AbacusOverlay,
   AbacusReact,
   type StepBeadHighlight,
   useAbacusDisplay,
   calculateBeadDiffFromValues,
-} from "@soroban/abacus-react";
-import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { css } from "../../../styled-system/css";
-import { hstack, stack, vstack } from "../../../styled-system/patterns";
+} from '@soroban/abacus-react'
+import { useTranslations } from 'next-intl'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { css } from '../../../styled-system/css'
+import { hstack, stack, vstack } from '../../../styled-system/patterns'
 import type {
   NavigationState,
   Tutorial,
   TutorialEvent,
   TutorialStep,
   UIState,
-} from "../../types/tutorial";
-import { generateUnifiedInstructionSequence } from "../../utils/unifiedStepGenerator";
-import { CoachBar } from "./CoachBar/CoachBar";
-import { DecompositionWithReasons } from "./DecompositionWithReasons";
-import { PedagogicalDecompositionDisplay } from "./PedagogicalDecompositionDisplay";
-import { TutorialProvider, useTutorialContext } from "./TutorialContext";
-import { TutorialUIProvider } from "./TutorialUIContext";
-import "./CoachBar/coachbar.css";
+} from '../../types/tutorial'
+import { generateUnifiedInstructionSequence } from '../../utils/unifiedStepGenerator'
+import { CoachBar } from './CoachBar/CoachBar'
+import { DecompositionWithReasons } from './DecompositionWithReasons'
+import { PedagogicalDecompositionDisplay } from './PedagogicalDecompositionDisplay'
+import { TutorialProvider, useTutorialContext } from './TutorialContext'
+import { TutorialUIProvider } from './TutorialUIContext'
+import './CoachBar/coachbar.css'
 
 // Helper function to find the topmost bead with arrows
 function findTopmostBeadWithArrows(
-  stepBeadHighlights: StepBeadHighlight[] | undefined,
+  stepBeadHighlights: StepBeadHighlight[] | undefined
 ): StepBeadHighlight | null {
-  if (!stepBeadHighlights || stepBeadHighlights.length === 0) return null;
+  if (!stepBeadHighlights || stepBeadHighlights.length === 0) return null
 
   // Filter only beads that have direction arrows (should have highlights)
   const beadsWithArrows = stepBeadHighlights.filter(
-    (bead) => bead.direction && bead.direction !== "none",
-  );
+    (bead) => bead.direction && bead.direction !== 'none'
+  )
 
   if (beadsWithArrows.length === 0) {
-    console.warn(
-      "No beads with arrows found in step highlights:",
-      stepBeadHighlights,
-    );
-    return null;
+    console.warn('No beads with arrows found in step highlights:', stepBeadHighlights)
+    return null
   }
 
   // Sort by place value (highest first, since place value 4 = leftmost = highest value)
@@ -52,75 +49,75 @@ function findTopmostBeadWithArrows(
   const sortedBeads = [...beadsWithArrows].sort((a, b) => {
     // First sort by place value (higher place value = more significant = topmost priority)
     if (a.placeValue !== b.placeValue) {
-      return b.placeValue - a.placeValue;
+      return b.placeValue - a.placeValue
     }
 
     // If same place value, heaven beads come before earth beads
     if (a.beadType !== b.beadType) {
-      return a.beadType === "heaven" ? -1 : 1;
+      return a.beadType === 'heaven' ? -1 : 1
     }
 
     // If both earth beads in same column, lower position number = higher on abacus
-    if (a.beadType === "earth" && b.beadType === "earth") {
-      return (a.position || 0) - (b.position || 0);
+    if (a.beadType === 'earth' && b.beadType === 'earth') {
+      return (a.position || 0) - (b.position || 0)
     }
 
-    return 0;
-  });
+    return 0
+  })
 
-  return sortedBeads[0] || null;
+  return sortedBeads[0] || null
 }
 
 // Reducer state and actions
 interface TutorialPlayerState {
-  currentStepIndex: number;
-  currentValue: number;
-  isStepCompleted: boolean;
-  error: string | null;
-  events: TutorialEvent[];
-  stepStartTime: number;
-  multiStepStartTime: number; // Track when current multi-step started
-  uiState: UIState;
-  currentMultiStep: number; // Current step within multi-step instructions (0-based)
+  currentStepIndex: number
+  currentValue: number
+  isStepCompleted: boolean
+  error: string | null
+  events: TutorialEvent[]
+  stepStartTime: number
+  multiStepStartTime: number // Track when current multi-step started
+  uiState: UIState
+  currentMultiStep: number // Current step within multi-step instructions (0-based)
 }
 
 interface ExpectedStep {
-  index: number;
-  stepIndex: number;
-  targetValue: number;
-  startValue: number;
-  description: string;
-  mathematicalTerm?: string; // Pedagogical term like "10", "(5 - 1)", "-6"
-  termPosition?: { startIndex: number; endIndex: number }; // Position in full decomposition
+  index: number
+  stepIndex: number
+  targetValue: number
+  startValue: number
+  description: string
+  mathematicalTerm?: string // Pedagogical term like "10", "(5 - 1)", "-6"
+  termPosition?: { startIndex: number; endIndex: number } // Position in full decomposition
 }
 
 type TutorialPlayerAction =
   | {
-      type: "INITIALIZE_STEP";
-      stepIndex: number;
-      startValue: number;
-      stepId: string;
+      type: 'INITIALIZE_STEP'
+      stepIndex: number
+      startValue: number
+      stepId: string
     }
   | {
-      type: "USER_VALUE_CHANGE";
-      oldValue: number;
-      newValue: number;
-      stepId: string;
+      type: 'USER_VALUE_CHANGE'
+      oldValue: number
+      newValue: number
+      stepId: string
     }
-  | { type: "COMPLETE_STEP"; stepId: string }
-  | { type: "SET_ERROR"; error: string | null }
-  | { type: "ADD_EVENT"; event: TutorialEvent }
-  | { type: "UPDATE_UI_STATE"; updates: Partial<UIState> }
-  | { type: "ADVANCE_MULTI_STEP" }
-  | { type: "PREVIOUS_MULTI_STEP" }
-  | { type: "RESET_MULTI_STEP" };
+  | { type: 'COMPLETE_STEP'; stepId: string }
+  | { type: 'SET_ERROR'; error: string | null }
+  | { type: 'ADD_EVENT'; event: TutorialEvent }
+  | { type: 'UPDATE_UI_STATE'; updates: Partial<UIState> }
+  | { type: 'ADVANCE_MULTI_STEP' }
+  | { type: 'PREVIOUS_MULTI_STEP' }
+  | { type: 'RESET_MULTI_STEP' }
 
 function _tutorialPlayerReducer(
   state: TutorialPlayerState,
-  action: TutorialPlayerAction,
+  action: TutorialPlayerAction
 ): TutorialPlayerState {
   switch (action.type) {
-    case "INITIALIZE_STEP":
+    case 'INITIALIZE_STEP':
       return {
         ...state,
         currentStepIndex: action.stepIndex,
@@ -133,30 +130,30 @@ function _tutorialPlayerReducer(
         events: [
           ...state.events,
           {
-            type: "STEP_STARTED",
+            type: 'STEP_STARTED',
             stepId: action.stepId,
             timestamp: new Date(),
           },
         ],
-      };
+      }
 
-    case "USER_VALUE_CHANGE":
+    case 'USER_VALUE_CHANGE':
       return {
         ...state,
         currentValue: action.newValue,
         events: [
           ...state.events,
           {
-            type: "VALUE_CHANGED",
+            type: 'VALUE_CHANGED',
             stepId: action.stepId,
             oldValue: action.oldValue,
             newValue: action.newValue,
             timestamp: new Date(),
           },
         ],
-      };
+      }
 
-    case "COMPLETE_STEP":
+    case 'COMPLETE_STEP':
       return {
         ...state,
         isStepCompleted: true,
@@ -164,75 +161,71 @@ function _tutorialPlayerReducer(
         events: [
           ...state.events,
           {
-            type: "STEP_COMPLETED",
+            type: 'STEP_COMPLETED',
             stepId: action.stepId,
             success: true,
             timestamp: new Date(),
           },
         ],
-      };
+      }
 
-    case "SET_ERROR":
+    case 'SET_ERROR':
       return {
         ...state,
         error: action.error,
-      };
+      }
 
-    case "ADD_EVENT":
+    case 'ADD_EVENT':
       return {
         ...state,
         events: [...state.events, action.event],
-      };
+      }
 
-    case "UPDATE_UI_STATE":
+    case 'UPDATE_UI_STATE':
       return {
         ...state,
         uiState: { ...state.uiState, ...action.updates },
-      };
+      }
 
-    case "ADVANCE_MULTI_STEP":
+    case 'ADVANCE_MULTI_STEP':
       return {
         ...state,
         currentMultiStep: state.currentMultiStep + 1,
         multiStepStartTime: Date.now(), // Reset timer for new multi-step
-      };
+      }
 
-    case "PREVIOUS_MULTI_STEP":
+    case 'PREVIOUS_MULTI_STEP':
       return {
         ...state,
         currentMultiStep: Math.max(0, state.currentMultiStep - 1),
-      };
+      }
 
-    case "RESET_MULTI_STEP":
+    case 'RESET_MULTI_STEP':
       return {
         ...state,
         currentMultiStep: 0,
-      };
+      }
 
     default:
-      return state;
+      return state
   }
 }
 
 interface TutorialPlayerProps {
-  tutorial: Tutorial;
-  initialStepIndex?: number;
-  isDebugMode?: boolean;
-  showDebugPanel?: boolean;
-  hideNavigation?: boolean;
-  hideTooltip?: boolean;
-  silentErrors?: boolean;
-  abacusColumns?: number;
-  theme?: "light" | "dark";
-  onStepChange?: (stepIndex: number, step: TutorialStep) => void;
-  onStepComplete?: (
-    stepIndex: number,
-    step: TutorialStep,
-    success: boolean,
-  ) => void;
-  onTutorialComplete?: (score: number, timeSpent: number) => void;
-  onEvent?: (event: TutorialEvent) => void;
-  className?: string;
+  tutorial: Tutorial
+  initialStepIndex?: number
+  isDebugMode?: boolean
+  showDebugPanel?: boolean
+  hideNavigation?: boolean
+  hideTooltip?: boolean
+  silentErrors?: boolean
+  abacusColumns?: number
+  theme?: 'light' | 'dark'
+  onStepChange?: (stepIndex: number, step: TutorialStep) => void
+  onStepComplete?: (stepIndex: number, step: TutorialStep, success: boolean) => void
+  onTutorialComplete?: (score: number, timeSpent: number) => void
+  onEvent?: (event: TutorialEvent) => void
+  className?: string
 }
 
 function TutorialPlayerContent({
@@ -244,17 +237,17 @@ function TutorialPlayerContent({
   hideTooltip = false,
   silentErrors = false,
   abacusColumns = 5,
-  theme = "light",
+  theme = 'light',
   onStepChange,
   onStepComplete,
   onTutorialComplete,
   onEvent,
   className,
 }: TutorialPlayerProps) {
-  const t = useTranslations("tutorial.player");
-  const [_startTime] = useState(Date.now());
-  const isProgrammaticChange = useRef(false);
-  const [showHelpForCurrentStep, setShowHelpForCurrentStep] = useState(false);
+  const t = useTranslations('tutorial.player')
+  const [_startTime] = useState(Date.now())
+  const isProgrammaticChange = useRef(false)
+  const [showHelpForCurrentStep, setShowHelpForCurrentStep] = useState(false)
 
   // Use tutorial context instead of local state
   const {
@@ -273,7 +266,7 @@ function TutorialPlayerContent({
     getColumnFromTermIndex,
     getGroupTermIndicesFromTermIndex,
     handleAbacusColumnHover,
-  } = useTutorialContext();
+  } = useTutorialContext()
 
   const {
     currentStepIndex,
@@ -285,34 +278,34 @@ function TutorialPlayerContent({
     multiStepStartTime,
     uiState,
     currentMultiStep,
-  } = state;
+  } = state
 
   // Use universal abacus display configuration
-  const { config: abacusConfig } = useAbacusDisplay();
-  const [isSuccessPopupDismissed, setIsSuccessPopupDismissed] = useState(false);
+  const { config: abacusConfig } = useAbacusDisplay()
+  const [isSuccessPopupDismissed, setIsSuccessPopupDismissed] = useState(false)
 
   // Keep refs needed for step advancement and bead tracking
-  const lastValueForStepAdvancement = useRef<number>(currentValue);
-  const userHasInteracted = useRef<boolean>(false);
-  const lastMovedBead = useRef<StepBeadHighlight | null>(null);
+  const lastValueForStepAdvancement = useRef<number>(currentValue)
+  const userHasInteracted = useRef<boolean>(false)
+  const lastMovedBead = useRef<StepBeadHighlight | null>(null)
 
   // Reset success popup when moving to new step
   useEffect(() => {
-    setIsSuccessPopupDismissed(false);
-  }, []);
+    setIsSuccessPopupDismissed(false)
+  }, [])
 
   // Auto-dismiss success toast after 3 seconds
   useEffect(() => {
     if (isStepCompleted && !isSuccessPopupDismissed) {
       const timer = setTimeout(() => {
-        setIsSuccessPopupDismissed(true);
-      }, 3000);
-      return () => clearTimeout(timer);
+        setIsSuccessPopupDismissed(true)
+      }, 3000)
+      return () => clearTimeout(timer)
     }
-  }, [isStepCompleted, isSuccessPopupDismissed]);
+  }, [isStepCompleted, isSuccessPopupDismissed])
 
   // Current step comes from context
-  const beadRefs = useRef<Map<string, SVGElement>>(new Map());
+  const beadRefs = useRef<Map<string, SVGElement>>(new Map())
 
   // Navigation state
   const navigationState: NavigationState = {
@@ -321,7 +314,7 @@ function TutorialPlayerContent({
     canGoPrevious: currentStepIndex > 0,
     totalSteps: tutorial.steps.length,
     completionPercentage: (currentStepIndex / tutorial.steps.length) * 100,
-  };
+  }
 
   // Define the static expected steps using our unified step generator
   const {
@@ -335,8 +328,8 @@ function TutorialPlayerContent({
     try {
       const unifiedSequence = generateUnifiedInstructionSequence(
         currentStep.startValue,
-        currentStep.targetValue,
-      );
+        currentStep.targetValue
+      )
 
       // Convert unified sequence to expected steps format
       const steps = unifiedSequence.steps.map((step, index) => ({
@@ -344,18 +337,14 @@ function TutorialPlayerContent({
         stepIndex: index,
         targetValue: step.expectedValue,
         startValue:
-          index === 0
-            ? currentStep.startValue
-            : unifiedSequence.steps[index - 1].expectedValue,
+          index === 0 ? currentStep.startValue : unifiedSequence.steps[index - 1].expectedValue,
         description: step.englishInstruction,
         mathematicalTerm: step.mathematicalTerm, // Add the pedagogical term
         termPosition: step.termPosition, // Add the precise position information
-      }));
+      }))
 
       // Extract term positions from steps for DecompositionWithReasons
-      const positions = unifiedSequence.steps
-        .map((step) => step.termPosition)
-        .filter(Boolean);
+      const positions = unifiedSequence.steps.map((step) => step.termPosition).filter(Boolean)
 
       return {
         expectedSteps: steps,
@@ -364,49 +353,46 @@ function TutorialPlayerContent({
         pedagogicalSegments: unifiedSequence.segments,
         termPositions: positions,
         unifiedSteps: unifiedSequence.steps, // NEW: Include the raw unified steps with provenance
-      };
+      }
     } catch (_error) {
       return {
         expectedSteps: [],
-        fullDecomposition: "",
+        fullDecomposition: '',
         isMeaningfulDecomposition: false,
         pedagogicalSegments: [],
         termPositions: [],
         unifiedSteps: [], // NEW: Also add empty array for error case
-      };
+      }
     }
-  }, [currentStep.startValue, currentStep.targetValue]);
+  }, [currentStep.startValue, currentStep.targetValue])
 
   // Get arrows for the immediate next action to reach current expected step
   const getCurrentStepBeads = useCallback(() => {
     // If no expected steps, fall back to original behavior
-    if (expectedSteps.length === 0) return currentStep.stepBeadHighlights;
+    if (expectedSteps.length === 0) return currentStep.stepBeadHighlights
 
     // Get the current expected step we're working toward
-    const currentExpectedStep = expectedSteps[currentMultiStep];
+    const currentExpectedStep = expectedSteps[currentMultiStep]
 
     if (!currentExpectedStep) {
       // If we're past the last step, check if we've reached the final target
       if (currentValue === currentStep.targetValue) {
-        return undefined;
+        return undefined
       }
-      return undefined;
+      return undefined
     }
 
     // Use the new bead diff algorithm to get arrows for current step
     try {
-      const beadDiff = calculateBeadDiffFromValues(
-        currentValue,
-        currentExpectedStep.targetValue,
-      );
+      const beadDiff = calculateBeadDiffFromValues(currentValue, currentExpectedStep.targetValue)
 
       if (!beadDiff.hasChanges) {
-        return undefined;
+        return undefined
       }
 
       // Convert bead diff results to StepBeadHighlight format expected by AbacusReact
       // Filter to only include beads from columns that exist
-      const minValidPlaceValue = Math.max(0, 5 - abacusColumns);
+      const minValidPlaceValue = Math.max(0, 5 - abacusColumns)
       const stepBeadHighlights: StepBeadHighlight[] = beadDiff.changes
         .filter((change) => change.placeValue < abacusColumns)
         .map((change, _index) => ({
@@ -416,12 +402,12 @@ function TutorialPlayerContent({
           direction: change.direction,
           stepIndex: currentMultiStep, // Use current multi-step index to match AbacusReact filtering
           order: change.order,
-        }));
+        }))
 
-      return stepBeadHighlights.length > 0 ? stepBeadHighlights : undefined;
+      return stepBeadHighlights.length > 0 ? stepBeadHighlights : undefined
     } catch (error) {
-      console.error("Error generating step beads with bead diff:", error);
-      return undefined;
+      console.error('Error generating step beads with bead diff:', error)
+      return undefined
     }
   }, [
     currentValue,
@@ -430,227 +416,210 @@ function TutorialPlayerContent({
     currentMultiStep,
     currentStep.stepBeadHighlights,
     abacusColumns,
-  ]);
+  ])
 
   // Get the current step's bead diff summary for real-time user feedback
   const getCurrentStepSummary = useCallback(() => {
-    if (expectedSteps.length === 0) return null;
+    if (expectedSteps.length === 0) return null
 
-    const currentExpectedStep = expectedSteps[currentMultiStep];
-    if (!currentExpectedStep) return null;
+    const currentExpectedStep = expectedSteps[currentMultiStep]
+    if (!currentExpectedStep) return null
 
     try {
-      const beadDiff = calculateBeadDiffFromValues(
-        currentValue,
-        currentExpectedStep.targetValue,
-      );
-      return beadDiff.hasChanges ? beadDiff.summary : null;
+      const beadDiff = calculateBeadDiffFromValues(currentValue, currentExpectedStep.targetValue)
+      return beadDiff.hasChanges ? beadDiff.summary : null
     } catch (_error) {
-      return null;
+      return null
     }
-  }, [currentValue, expectedSteps, currentMultiStep]);
+  }, [currentValue, expectedSteps, currentMultiStep])
 
   // Get current step beads (dynamic arrows for static expected steps)
-  const currentStepBeads = getCurrentStepBeads();
+  const currentStepBeads = getCurrentStepBeads()
 
   // Get current step summary for real-time user feedback
-  const currentStepSummary = getCurrentStepSummary();
+  const currentStepSummary = getCurrentStepSummary()
 
   // Filter highlightBeads to only include valid columns
   const filteredHighlightBeads = useMemo(() => {
-    if (!currentStep.highlightBeads) return undefined;
+    if (!currentStep.highlightBeads) return undefined
     return currentStep.highlightBeads.filter((highlight) => {
-      return highlight.placeValue < abacusColumns;
-    });
-  }, [currentStep.highlightBeads, abacusColumns]);
+      return highlight.placeValue < abacusColumns
+    })
+  }, [currentStep.highlightBeads, abacusColumns])
 
   // Helper function to highlight the current mathematical term in the full decomposition
   const renderHighlightedDecomposition = useCallback(() => {
-    if (!fullDecomposition || expectedSteps.length === 0) return null;
+    if (!fullDecomposition || expectedSteps.length === 0) return null
 
-    const currentStep = expectedSteps[currentMultiStep];
-    if (!currentStep?.mathematicalTerm) return null;
+    const currentStep = expectedSteps[currentMultiStep]
+    if (!currentStep?.mathematicalTerm) return null
 
-    const mathTerm = currentStep.mathematicalTerm;
+    const mathTerm = currentStep.mathematicalTerm
 
     // Try to use precise position first
     if (currentStep.termPosition) {
-      const { startIndex, endIndex } = currentStep.termPosition;
-      const highlighted = fullDecomposition.substring(startIndex, endIndex);
+      const { startIndex, endIndex } = currentStep.termPosition
+      const highlighted = fullDecomposition.substring(startIndex, endIndex)
 
       // Validate that the highlighted text makes sense
-      if (
-        highlighted.includes(mathTerm.replace("-", "")) ||
-        highlighted === mathTerm
-      ) {
+      if (highlighted.includes(mathTerm.replace('-', '')) || highlighted === mathTerm) {
         return {
           before: fullDecomposition.substring(0, startIndex),
           highlighted,
           after: fullDecomposition.substring(endIndex),
-        };
+        }
       }
     }
 
     // Fallback: search for the mathematical term in the decomposition
-    const searchTerm = mathTerm.startsWith("-")
-      ? mathTerm.substring(1)
-      : mathTerm;
-    const searchIndex = fullDecomposition.indexOf(searchTerm);
+    const searchTerm = mathTerm.startsWith('-') ? mathTerm.substring(1) : mathTerm
+    const searchIndex = fullDecomposition.indexOf(searchTerm)
 
     if (searchIndex !== -1) {
-      const startIndex = mathTerm.startsWith("-")
+      const startIndex = mathTerm.startsWith('-')
         ? // For negative terms, try to include the preceding dash
           Math.max(0, searchIndex - 1)
-        : searchIndex;
-      const endIndex = mathTerm.startsWith("-")
+        : searchIndex
+      const endIndex = mathTerm.startsWith('-')
         ? searchIndex + searchTerm.length
-        : searchIndex + mathTerm.length;
+        : searchIndex + mathTerm.length
 
       return {
         before: fullDecomposition.substring(0, startIndex),
         highlighted: fullDecomposition.substring(startIndex, endIndex),
         after: fullDecomposition.substring(endIndex),
-      };
-    }
-
-    // Final fallback: highlight the first occurrence of just the number part
-    const numberMatch = mathTerm.match(/\d+/);
-    if (numberMatch) {
-      const number = numberMatch[0];
-      const numberIndex = fullDecomposition.indexOf(number);
-      if (numberIndex !== -1) {
-        return {
-          before: fullDecomposition.substring(0, numberIndex),
-          highlighted: fullDecomposition.substring(
-            numberIndex,
-            numberIndex + number.length,
-          ),
-          after: fullDecomposition.substring(numberIndex + number.length),
-        };
       }
     }
 
-    return null;
-  }, [fullDecomposition, expectedSteps, currentMultiStep]);
+    // Final fallback: highlight the first occurrence of just the number part
+    const numberMatch = mathTerm.match(/\d+/)
+    if (numberMatch) {
+      const number = numberMatch[0]
+      const numberIndex = fullDecomposition.indexOf(number)
+      if (numberIndex !== -1) {
+        return {
+          before: fullDecomposition.substring(0, numberIndex),
+          highlighted: fullDecomposition.substring(numberIndex, numberIndex + number.length),
+          after: fullDecomposition.substring(numberIndex + number.length),
+        }
+      }
+    }
+
+    return null
+  }, [fullDecomposition, expectedSteps, currentMultiStep])
 
   // Create overlay for tooltip positioned precisely at topmost bead using smart collision detection
   const tooltipOverlay = useMemo(() => {
     // Show tooltip if step is completed AND still at target value OR if we have step instructions
-    const showCelebration =
-      isStepCompleted && currentValue === currentStep.targetValue;
-    const showInstructions =
-      !showCelebration && currentStepSummary && currentStepBeads?.length;
+    const showCelebration = isStepCompleted && currentValue === currentStep.targetValue
+    const showInstructions = !showCelebration && currentStepSummary && currentStepBeads?.length
 
     if (!showCelebration && !showInstructions) {
-      return null;
+      return null
     }
 
-    let topmostBead: StepBeadHighlight | null = null;
+    let topmostBead: StepBeadHighlight | null = null
 
     if (showCelebration) {
       // For celebration, use the last moved bead or fallback
       if (lastMovedBead.current) {
-        topmostBead = lastMovedBead.current;
+        topmostBead = lastMovedBead.current
       } else {
         // Use the ones place (rightmost column) heaven bead as fallback
         topmostBead = {
           placeValue: 0, // Ones place
-          beadType: "heaven" as const,
+          beadType: 'heaven' as const,
           position: 0,
-          direction: "none" as const,
+          direction: 'none' as const,
           stepIndex: currentMultiStep,
           order: 0,
-        };
+        }
       }
     } else if (showInstructions) {
       // For instructions, use the topmost bead with arrows
-      topmostBead = findTopmostBeadWithArrows(currentStepBeads);
+      topmostBead = findTopmostBeadWithArrows(currentStepBeads)
     }
 
     if (!topmostBead) {
-      return null;
+      return null
     }
 
     // Validate that the bead is from a column that exists
     if (topmostBead.placeValue >= abacusColumns) {
       // Bead is from an invalid column, skip tooltip
-      return null;
+      return null
     }
 
     // Smart positioning logic: avoid covering active beads
     // Convert placeValue to columnIndex based on actual number of columns
-    const targetColumnIndex = abacusColumns - 1 - topmostBead.placeValue;
+    const targetColumnIndex = abacusColumns - 1 - topmostBead.placeValue
 
     // Check if there are any active beads (against reckoning bar OR with arrows) in columns to the left
     const hasActiveBeadsToLeft = (() => {
       // Get current abacus state - we need to check which beads are against the reckoning bar
       const abacusDigits = currentValue
         .toString()
-        .padStart(abacusColumns, "0")
-        .split("")
-        .map(Number);
+        .padStart(abacusColumns, '0')
+        .split('')
+        .map(Number)
 
       for (let col = 0; col < targetColumnIndex; col++) {
-        const placeValue = abacusColumns - 1 - col; // Convert columnIndex back to placeValue
-        const digitValue = abacusDigits[col];
+        const placeValue = abacusColumns - 1 - col // Convert columnIndex back to placeValue
+        const digitValue = abacusDigits[col]
 
         // Check if any beads are active (against reckoning bar) in this column
         if (digitValue >= 5) {
           // Heaven bead is active
-          return true;
+          return true
         }
         if (digitValue % 5 > 0) {
           // Earth beads are active
-          return true;
+          return true
         }
 
         // Also check if this column has beads with direction arrows (from current step)
         const hasArrowsInColumn =
           currentStepBeads?.some((bead) => {
-            const beadColumnIndex = abacusColumns - 1 - bead.placeValue;
-            return (
-              beadColumnIndex === col &&
-              bead.direction &&
-              bead.direction !== "none"
-            );
-          }) ?? false;
+            const beadColumnIndex = abacusColumns - 1 - bead.placeValue
+            return beadColumnIndex === col && bead.direction && bead.direction !== 'none'
+          }) ?? false
         if (hasArrowsInColumn) {
-          return true;
+          return true
         }
       }
 
-      return false;
-    })();
+      return false
+    })()
 
     // Determine tooltip position and target
-    const shouldPositionAbove = hasActiveBeadsToLeft;
-    const tooltipSide = shouldPositionAbove ? "top" : "left";
+    const shouldPositionAbove = hasActiveBeadsToLeft
+    const tooltipSide = shouldPositionAbove ? 'top' : 'left'
     const tooltipTarget = shouldPositionAbove
       ? {
           // Target the heaven bead position for the column
-          type: "bead" as const,
+          type: 'bead' as const,
           columnIndex: targetColumnIndex,
-          beadType: "heaven" as const,
+          beadType: 'heaven' as const,
           beadPosition: 0, // Heaven beads are always at position 0
         }
       : {
           // Target the actual bead
-          type: "bead" as const,
+          type: 'bead' as const,
           columnIndex: targetColumnIndex,
           beadType: topmostBead.beadType,
           beadPosition: topmostBead.position,
-        };
+        }
 
     // Create an overlay that positions tooltip to avoid covering active beads
     const overlay: AbacusOverlay = {
-      id: "bead-tooltip",
-      type: "tooltip",
+      id: 'bead-tooltip',
+      type: 'tooltip',
       target: tooltipTarget,
       content: (
         <Tooltip.Provider>
           <Tooltip.Root open={true}>
             <Tooltip.Trigger asChild>
-              <div style={{ width: "1px", height: "1px", opacity: 0 }} />
+              <div style={{ width: '1px', height: '1px', opacity: 0 }} />
             </Tooltip.Trigger>
             <Tooltip.Portal>
               <Tooltip.Content
@@ -659,51 +628,49 @@ function TutorialPlayerContent({
                 sideOffset={20}
                 style={{
                   background: showCelebration
-                    ? "linear-gradient(135deg, rgba(34, 197, 94, 0.95) 0%, rgba(21, 128, 61, 0.95) 100%)"
-                    : theme === "dark"
-                      ? "#1e40af"
-                      : "#1e3a8a",
-                  color: "#ffffff",
-                  padding: "12px 16px",
-                  borderRadius: "8px",
-                  fontSize: "14px",
-                  fontWeight: "700",
+                    ? 'linear-gradient(135deg, rgba(34, 197, 94, 0.95) 0%, rgba(21, 128, 61, 0.95) 100%)'
+                    : theme === 'dark'
+                      ? '#1e40af'
+                      : '#1e3a8a',
+                  color: '#ffffff',
+                  padding: '12px 16px',
+                  borderRadius: '8px',
+                  fontSize: '14px',
+                  fontWeight: '700',
                   boxShadow: showCelebration
-                    ? "0 8px 25px rgba(34, 197, 94, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.2)"
-                    : theme === "dark"
-                      ? "0 4px 12px rgba(0,0,0,0.3)"
-                      : "0 4px 12px rgba(0,0,0,0.2)",
-                  whiteSpace: "normal",
-                  maxWidth: "200px",
-                  minWidth: "150px",
-                  wordBreak: "break-word",
+                    ? '0 8px 25px rgba(34, 197, 94, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.2)'
+                    : theme === 'dark'
+                      ? '0 4px 12px rgba(0,0,0,0.3)'
+                      : '0 4px 12px rgba(0,0,0,0.2)',
+                  whiteSpace: 'normal',
+                  maxWidth: '200px',
+                  minWidth: '150px',
+                  wordBreak: 'break-word',
                   zIndex: 50,
                   opacity: 0.95,
-                  transition: "all 0.3s ease",
-                  transform: showCelebration ? "scale(1.05)" : "scale(1)",
-                  animation: showCelebration
-                    ? "celebrationPulse 0.6s ease-out"
-                    : "none",
+                  transition: 'all 0.3s ease',
+                  transform: showCelebration ? 'scale(1.05)' : 'scale(1)',
+                  animation: showCelebration ? 'celebrationPulse 0.6s ease-out' : 'none',
                 }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.opacity = "1";
+                  e.currentTarget.style.opacity = '1'
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.opacity = "0.85";
+                  e.currentTarget.style.opacity = '0.85'
                 }}
               >
-                <div style={{ fontSize: "12px", opacity: 0.9 }}>
+                <div style={{ fontSize: '12px', opacity: 0.9 }}>
                   {showCelebration ? (
                     <div
                       style={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "8px",
-                        fontSize: "14px",
-                        fontWeight: "bold",
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '8px',
+                        fontSize: '14px',
+                        fontWeight: 'bold',
                       }}
                     >
-                      <span style={{ fontSize: "18px" }}>🎉</span>
+                      <span style={{ fontSize: '18px' }}>🎉</span>
                       <span>Excellent work!</span>
                     </div>
                   ) : (
@@ -715,14 +682,13 @@ function TutorialPlayerContent({
                           decomposition={renderHighlightedDecomposition()}
                         />
                       )}
-                      <span style={{ fontSize: "18px" }}>💡</span>{" "}
-                      {currentStepSummary}
+                      <span style={{ fontSize: '18px' }}>💡</span> {currentStepSummary}
                     </>
                   )}
                 </div>
                 <Tooltip.Arrow
                   style={{
-                    fill: showCelebration ? "#15803d" : "#1e40af",
+                    fill: showCelebration ? '#15803d' : '#1e40af',
                   }}
                 />
               </Tooltip.Content>
@@ -732,9 +698,9 @@ function TutorialPlayerContent({
       ),
       offset: { x: 0, y: 0 },
       visible: true,
-    };
+    }
 
-    return overlay;
+    return overlay
   }, [
     currentStepSummary,
     currentStepBeads,
@@ -745,53 +711,53 @@ function TutorialPlayerContent({
     currentStep,
     isMeaningfulDecomposition,
     abacusColumns,
-  ]);
+  ])
 
   // Timer for smart help detection
   useEffect(() => {
-    setShowHelpForCurrentStep(false); // Reset help when step changes
+    setShowHelpForCurrentStep(false) // Reset help when step changes
 
     const timer = setTimeout(() => {
-      setShowHelpForCurrentStep(true);
-    }, 8000); // 8 seconds
+      setShowHelpForCurrentStep(true)
+    }, 8000) // 8 seconds
 
-    return () => clearTimeout(timer);
-  }, []); // Reset when step changes or timer resets
+    return () => clearTimeout(timer)
+  }, []) // Reset when step changes or timer resets
 
   // Event logging - now just notifies parent, state is managed by reducer
   const notifyEvent = useCallback(
     (event: TutorialEvent) => {
-      onEvent?.(event);
+      onEvent?.(event)
     },
-    [onEvent],
-  );
+    [onEvent]
+  )
 
   // Navigation functions - declare these first since they're used in useEffects
   // Use context goToStep function instead of local one
-  const goToStep = contextGoToStep;
+  const goToStep = contextGoToStep
 
   // Use context goToNextStep function instead of local one
-  const goToNextStep = contextGoToNextStep;
+  const goToNextStep = contextGoToNextStep
 
   // Use context goToPreviousStep function instead of local one
-  const goToPreviousStep = contextGoToPreviousStep;
+  const goToPreviousStep = contextGoToPreviousStep
 
   // Initialize step on mount only
   useEffect(() => {
     if (currentStep && currentStepIndex === initialStepIndex) {
       // Mark this as a programmatic change to prevent feedback loop
-      isProgrammaticChange.current = true;
+      isProgrammaticChange.current = true
 
       // Dispatch initialization action
       dispatch({
-        type: "INITIALIZE_STEP",
+        type: 'INITIALIZE_STEP',
         stepIndex: currentStepIndex,
         startValue: currentStep.startValue,
         stepId: currentStep.id,
-      });
+      })
 
       // Notify parent of step change
-      onStepChange?.(currentStepIndex, currentStep);
+      onStepChange?.(currentStepIndex, currentStep)
     }
   }, [
     currentStep,
@@ -799,30 +765,25 @@ function TutorialPlayerContent({
     dispatch,
     initialStepIndex, // Notify parent of step change
     onStepChange,
-  ]); // Only run on mount
+  ]) // Only run on mount
 
   // Check if step is completed - only complete when we've gone through all multi-steps AND reached target
   useEffect(() => {
-    if (
-      currentStep &&
-      currentValue === currentStep.targetValue &&
-      !isStepCompleted
-    ) {
+    if (currentStep && currentValue === currentStep.targetValue && !isStepCompleted) {
       // For multi-step problems, only complete when we've finished all expected steps
-      const isMultiStepProblem = expectedSteps.length > 0;
-      const hasFinishedAllMultiSteps =
-        currentMultiStep >= expectedSteps.length - 1;
+      const isMultiStepProblem = expectedSteps.length > 0
+      const hasFinishedAllMultiSteps = currentMultiStep >= expectedSteps.length - 1
 
       // Complete the step if:
       // 1. It's not a multi-step problem, OR
       // 2. It's a multi-step problem and we've finished all steps
       if (!isMultiStepProblem || hasFinishedAllMultiSteps) {
-        dispatch({ type: "COMPLETE_STEP", stepId: currentStep.id });
-        onStepComplete?.(currentStepIndex, currentStep, true);
+        dispatch({ type: 'COMPLETE_STEP', stepId: currentStep.id })
+        onStepComplete?.(currentStepIndex, currentStep, true)
 
         // Auto-advance if enabled
         if (uiState.autoAdvance && navigationState.canGoNext) {
-          setTimeout(() => goToNextStep(), 1500);
+          setTimeout(() => goToNextStep(), 1500)
         }
       }
     }
@@ -838,18 +799,18 @@ function TutorialPlayerContent({
     currentStepIndex,
     goToNextStep,
     dispatch,
-  ]);
+  ])
 
   // These refs are already defined above
 
   // Check if user completed the current expected step and advance to next expected step
   useEffect(() => {
-    const valueChanged = currentValue !== lastValueForStepAdvancement.current;
+    const valueChanged = currentValue !== lastValueForStepAdvancement.current
 
     // Get current expected step
-    const currentExpectedStep = expectedSteps[currentMultiStep];
+    const currentExpectedStep = expectedSteps[currentMultiStep]
 
-    console.log("🔍 Expected step advancement check:", {
+    console.log('🔍 Expected step advancement check:', {
       currentValue,
       lastValue: lastValueForStepAdvancement.current,
       valueChanged,
@@ -861,7 +822,7 @@ function TutorialPlayerContent({
         : false,
       totalExpectedSteps: expectedSteps.length,
       finalTargetReached: currentValue === currentStep?.targetValue,
-    });
+    })
 
     // Only advance if user interacted and we have expected steps
     if (
@@ -872,65 +833,58 @@ function TutorialPlayerContent({
     ) {
       // Check if user reached the current expected step's target
       if (currentValue === currentExpectedStep.targetValue) {
-        const hasMoreExpectedSteps =
-          currentMultiStep < expectedSteps.length - 1;
+        const hasMoreExpectedSteps = currentMultiStep < expectedSteps.length - 1
 
         if (hasMoreExpectedSteps) {
           // Auto-advance to next expected step after a delay
           const timeoutId = setTimeout(() => {
-            advanceMultiStep();
-            lastValueForStepAdvancement.current = currentValue;
-          }, 1000);
+            advanceMultiStep()
+            lastValueForStepAdvancement.current = currentValue
+          }, 1000)
 
-          return () => clearTimeout(timeoutId);
+          return () => clearTimeout(timeoutId)
         }
       }
     }
-  }, [
-    currentValue,
-    currentStep,
-    currentMultiStep,
-    expectedSteps,
-    advanceMultiStep,
-  ]);
+  }, [currentValue, currentStep, currentMultiStep, expectedSteps, advanceMultiStep])
 
   // Update the reference when the step changes (not just value changes)
   useEffect(() => {
-    lastValueForStepAdvancement.current = currentValue;
+    lastValueForStepAdvancement.current = currentValue
     // Reset user interaction flag when step changes
-    userHasInteracted.current = false;
+    userHasInteracted.current = false
     // Reset last moved bead when step changes
-    lastMovedBead.current = null;
-  }, [currentValue]);
+    lastMovedBead.current = null
+  }, [currentValue])
 
   // Notify parent of events when they're added to state
   useEffect(() => {
     if (events.length > 0) {
-      const lastEvent = events[events.length - 1];
-      notifyEvent(lastEvent);
+      const lastEvent = events[events.length - 1]
+      notifyEvent(lastEvent)
     }
-  }, [events, notifyEvent]);
+  }, [events, notifyEvent])
 
   // Wrap context handleValueChange to track user interaction
   const handleValueChange = useCallback(
     (newValue: number) => {
       // Mark that user has interacted
-      userHasInteracted.current = true;
+      userHasInteracted.current = true
 
       // Try to determine which bead was moved by looking at current step beads
       if (currentStepBeads?.length) {
         // Find the first bead with direction arrows as the likely moved bead
-        const likelyMovedBead = findTopmostBeadWithArrows(currentStepBeads);
+        const likelyMovedBead = findTopmostBeadWithArrows(currentStepBeads)
         if (likelyMovedBead) {
-          lastMovedBead.current = likelyMovedBead;
+          lastMovedBead.current = likelyMovedBead
         }
       }
 
       // Call the context's handleValueChange
-      contextHandleValueChange(newValue);
+      contextHandleValueChange(newValue)
     },
-    [contextHandleValueChange, currentStepBeads],
-  );
+    [contextHandleValueChange, currentStepBeads]
+  )
 
   // Cleanup handled by context
 
@@ -939,243 +893,228 @@ function TutorialPlayerContent({
   const handleBeadClick = useCallback(
     (beadInfo: any) => {
       dispatch({
-        type: "ADD_EVENT",
+        type: 'ADD_EVENT',
         event: {
-          type: "BEAD_CLICKED",
+          type: 'BEAD_CLICKED',
           stepId: currentStep.id,
           beadInfo,
           timestamp: new Date(),
         },
-      });
+      })
 
       // Check if this is the correct action
-      if (
-        currentStep.highlightBeads &&
-        Array.isArray(currentStep.highlightBeads)
-      ) {
+      if (currentStep.highlightBeads && Array.isArray(currentStep.highlightBeads)) {
         const isCorrectBead = currentStep.highlightBeads.some((highlight) => {
           // Get place value from highlight
-          const highlightPlaceValue = highlight.placeValue;
+          const highlightPlaceValue = highlight.placeValue
           // Get place value from bead click event
-          const beadPlaceValue = beadInfo.bead
-            ? beadInfo.bead.placeValue
-            : 4 - beadInfo.columnIndex;
+          const beadPlaceValue = beadInfo.bead ? beadInfo.bead.placeValue : 4 - beadInfo.columnIndex
 
           return (
             highlightPlaceValue === beadPlaceValue &&
             highlight.beadType === beadInfo.beadType &&
-            (highlight.position === undefined ||
-              highlight.position === beadInfo.position)
-          );
-        });
+            (highlight.position === undefined || highlight.position === beadInfo.position)
+          )
+        })
 
         if (!isCorrectBead && !silentErrors) {
-          const errorMessage = t("error.highlight");
+          const errorMessage = t('error.highlight')
           dispatch({
-            type: "SET_ERROR",
+            type: 'SET_ERROR',
             error: errorMessage,
-          });
+          })
 
           dispatch({
-            type: "ADD_EVENT",
+            type: 'ADD_EVENT',
             event: {
-              type: "ERROR_OCCURRED",
+              type: 'ERROR_OCCURRED',
               stepId: currentStep.id,
               error: errorMessage,
               timestamp: new Date(),
             },
-          });
+          })
         } else {
-          dispatch({ type: "SET_ERROR", error: null });
+          dispatch({ type: 'SET_ERROR', error: null })
         }
       }
     },
-    [currentStep, dispatch, silentErrors, t],
-  );
+    [currentStep, dispatch, silentErrors, t]
+  )
 
   const handleBeadRef = useCallback((bead: any, element: SVGElement | null) => {
-    const key = `${bead.placeValue}-${bead.type}-${bead.position}`;
+    const key = `${bead.placeValue}-${bead.type}-${bead.position}`
     if (element) {
-      beadRefs.current.set(key, element);
+      beadRefs.current.set(key, element)
     } else {
-      beadRefs.current.delete(key);
+      beadRefs.current.delete(key)
     }
-  }, []);
+  }, [])
 
   // UI state updaters
   const toggleDebugPanel = useCallback(() => {
     dispatch({
-      type: "UPDATE_UI_STATE",
+      type: 'UPDATE_UI_STATE',
       updates: { showDebugPanel: !uiState.showDebugPanel },
-    });
-  }, [uiState.showDebugPanel, dispatch]);
+    })
+  }, [uiState.showDebugPanel, dispatch])
 
   const toggleStepList = useCallback(() => {
     dispatch({
-      type: "UPDATE_UI_STATE",
+      type: 'UPDATE_UI_STATE',
       updates: { showStepList: !uiState.showStepList },
-    });
-  }, [uiState.showStepList, dispatch]);
+    })
+  }, [uiState.showStepList, dispatch])
 
   const toggleAutoAdvance = useCallback(() => {
     dispatch({
-      type: "UPDATE_UI_STATE",
+      type: 'UPDATE_UI_STATE',
       updates: { autoAdvance: !uiState.autoAdvance },
-    });
-  }, [uiState.autoAdvance, dispatch]);
+    })
+  }, [uiState.autoAdvance, dispatch])
 
   // Two-level dynamic column highlights: group terms + individual term
   const dynamicColumnHighlights = useMemo(() => {
-    const highlights: Record<number, any> = {};
+    const highlights: Record<number, any> = {}
 
     // Level 1: Group highlights (blue glow for all terms in activeTermIndices)
     activeTermIndices.forEach((termIndex) => {
-      const columnIndex = getColumnFromTermIndex(termIndex, true); // Use group column (rhsPlace)
+      const columnIndex = getColumnFromTermIndex(termIndex, true) // Use group column (rhsPlace)
       if (columnIndex !== null) {
         highlights[columnIndex] = {
           // Group background glow effect (blue)
           backgroundGlow: {
-            fill: "rgba(59, 130, 246, 0.2)",
+            fill: 'rgba(59, 130, 246, 0.2)',
             blur: 4,
             spread: 16,
           },
           // Group numeral highlighting
           numerals: {
-            color: "#1e40af",
-            backgroundColor: "rgba(219, 234, 254, 0.8)",
-            fontWeight: "bold",
+            color: '#1e40af',
+            backgroundColor: 'rgba(219, 234, 254, 0.8)',
+            fontWeight: 'bold',
             borderRadius: 4,
             borderWidth: 1,
-            borderColor: "#3b82f6",
+            borderColor: '#3b82f6',
           },
-        };
+        }
       }
-    });
+    })
 
     // Level 2: Individual term highlight (orange glow, overrides group styling)
     if (activeIndividualTermIndex !== null) {
-      const individualColumnIndex = getColumnFromTermIndex(
-        activeIndividualTermIndex,
-        false,
-      ); // Use individual column (termPlace)
+      const individualColumnIndex = getColumnFromTermIndex(activeIndividualTermIndex, false) // Use individual column (termPlace)
       if (individualColumnIndex !== null) {
         highlights[individualColumnIndex] = {
           // Individual background glow effect (orange) - overrides group glow
           backgroundGlow: {
-            fill: "rgba(249, 115, 22, 0.3)",
+            fill: 'rgba(249, 115, 22, 0.3)',
             blur: 6,
             spread: 20,
           },
           // Individual numeral highlighting (orange)
           numerals: {
-            color: "#c2410c",
-            backgroundColor: "rgba(254, 215, 170, 0.9)",
-            fontWeight: "bold",
+            color: '#c2410c',
+            backgroundColor: 'rgba(254, 215, 170, 0.9)',
+            fontWeight: 'bold',
             borderRadius: 6,
             borderWidth: 2,
-            borderColor: "#ea580c",
+            borderColor: '#ea580c',
           },
-        };
+        }
       }
     }
 
-    return highlights;
-  }, [activeTermIndices, activeIndividualTermIndex, getColumnFromTermIndex]);
+    return highlights
+  }, [activeTermIndices, activeIndividualTermIndex, getColumnFromTermIndex])
 
   // Memoize custom styles calculation to avoid expensive recalculation on every render
   const customStyles = useMemo(() => {
     // Separate bead-level and column-level styles
-    const beadLevelHighlights: Record<number, any> = {};
-    const columnLevelHighlights: Record<number, any> = {};
+    const beadLevelHighlights: Record<number, any> = {}
+    const columnLevelHighlights: Record<number, any> = {}
 
     // Process static highlights from step configuration (bead-specific)
-    if (
-      currentStep.highlightBeads &&
-      Array.isArray(currentStep.highlightBeads)
-    ) {
+    if (currentStep.highlightBeads && Array.isArray(currentStep.highlightBeads)) {
       currentStep.highlightBeads.forEach((highlight) => {
         // Convert placeValue to columnIndex for AbacusReact compatibility
-        const columnIndex = abacusColumns - 1 - highlight.placeValue;
+        const columnIndex = abacusColumns - 1 - highlight.placeValue
 
         // Skip highlights for columns that don't exist in the rendered abacus
         if (columnIndex < 0 || columnIndex >= abacusColumns) {
-          return;
+          return
         }
 
         // Initialize column if it doesn't exist
         if (!beadLevelHighlights[columnIndex]) {
-          beadLevelHighlights[columnIndex] = {};
+          beadLevelHighlights[columnIndex] = {}
         }
 
         // Add the bead style to the appropriate type
-        if (
-          highlight.beadType === "earth" &&
-          highlight.position !== undefined
-        ) {
+        if (highlight.beadType === 'earth' && highlight.position !== undefined) {
           if (!beadLevelHighlights[columnIndex].earth) {
-            beadLevelHighlights[columnIndex].earth = {};
+            beadLevelHighlights[columnIndex].earth = {}
           }
           beadLevelHighlights[columnIndex].earth[highlight.position] = {
-            fill: "#fbbf24",
-            stroke: "#f59e0b",
+            fill: '#fbbf24',
+            stroke: '#f59e0b',
             strokeWidth: 3,
-          };
+          }
         } else {
           beadLevelHighlights[columnIndex][highlight.beadType] = {
-            fill: "#fbbf24",
-            stroke: "#f59e0b",
+            fill: '#fbbf24',
+            stroke: '#f59e0b',
             strokeWidth: 3,
-          };
+          }
         }
-      });
+      })
     }
 
     // Process dynamic column highlights (column-level: backgroundGlow, numerals)
     Object.keys(dynamicColumnHighlights).forEach((columnIndexStr) => {
-      const columnIndex = parseInt(columnIndexStr, 10);
+      const columnIndex = parseInt(columnIndexStr, 10)
 
       // Skip highlights for columns that don't exist in the rendered abacus
       if (columnIndex < 0 || columnIndex >= abacusColumns) {
-        return;
+        return
       }
 
       // Dynamic highlights are column-level (backgroundGlow, numerals)
-      columnLevelHighlights[columnIndex] = dynamicColumnHighlights[columnIndex];
-    });
+      columnLevelHighlights[columnIndex] = dynamicColumnHighlights[columnIndex]
+    })
 
     // Build the custom styles object
-    const styles: any = {};
+    const styles: any = {}
 
     // Add bead-level highlights to styles.beads
     if (Object.keys(beadLevelHighlights).length > 0) {
-      styles.beads = beadLevelHighlights;
+      styles.beads = beadLevelHighlights
     }
 
     // Add column-level highlights to styles.columns
     if (Object.keys(columnLevelHighlights).length > 0) {
-      styles.columns = columnLevelHighlights;
+      styles.columns = columnLevelHighlights
     }
 
     // Add frame styling for dark mode
-    if (theme === "dark") {
+    if (theme === 'dark') {
       // Column dividers (global for all columns)
       styles.columnPosts = {
-        fill: "rgba(255, 255, 255, 0.3)", // High contrast fill for visibility
-        stroke: "rgba(255, 255, 255, 0.2)",
+        fill: 'rgba(255, 255, 255, 0.3)', // High contrast fill for visibility
+        stroke: 'rgba(255, 255, 255, 0.2)',
         strokeWidth: 2,
-      };
+      }
       // Reckoning bar (horizontal middle bar)
       styles.reckoningBar = {
-        fill: "rgba(255, 255, 255, 0.4)", // High contrast fill for visibility
-        stroke: "rgba(255, 255, 255, 0.25)",
+        fill: 'rgba(255, 255, 255, 0.4)', // High contrast fill for visibility
+        stroke: 'rgba(255, 255, 255, 0.25)',
         strokeWidth: 3,
-      };
+      }
     }
 
     // Debug logging for custom styles
     if (Object.keys(styles).length > 0) {
       console.log(
-        "📋 TUTORIAL CUSTOM STYLES:",
+        '📋 TUTORIAL CUSTOM STYLES:',
         JSON.stringify(
           {
             beadLevelHighlights,
@@ -1185,55 +1124,47 @@ function TutorialPlayerContent({
             abacusColumns,
           },
           null,
-          2,
-        ),
-      );
+          2
+        )
+      )
     }
 
-    return Object.keys(styles).length > 0 ? styles : undefined;
-  }, [
-    currentStep.highlightBeads,
-    dynamicColumnHighlights,
-    abacusColumns,
-    theme,
-  ]);
+    return Object.keys(styles).length > 0 ? styles : undefined
+  }, [currentStep.highlightBeads, dynamicColumnHighlights, abacusColumns, theme])
 
   if (!currentStep) {
-    return <div>{t("noSteps")}</div>;
+    return <div>{t('noSteps')}</div>
   }
 
   return (
     <div
       className={`${css({
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-        minHeight: hideNavigation ? "auto" : "600px",
-      })} ${className || ""}`}
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        minHeight: hideNavigation ? 'auto' : '600px',
+      })} ${className || ''}`}
     >
       {/* Header */}
       {!hideNavigation && (
         <div
           className={css({
-            borderBottom: "1px solid",
-            borderColor:
-              theme === "dark" ? "rgba(255, 255, 255, 0.1)" : "gray.200",
+            borderBottom: '1px solid',
+            borderColor: theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'gray.200',
             p: 4,
-            bg: theme === "dark" ? "rgba(30, 30, 40, 0.6)" : "white",
+            bg: theme === 'dark' ? 'rgba(30, 30, 40, 0.6)' : 'white',
           })}
         >
           <div
             className={hstack({
-              justifyContent: "space-between",
-              alignItems: "center",
+              justifyContent: 'space-between',
+              alignItems: 'center',
             })}
           >
             <div>
-              <h1 className={css({ fontSize: "xl", fontWeight: "bold" })}>
-                {tutorial.title}
-              </h1>
-              <p className={css({ fontSize: "sm", color: "gray.600" })}>
-                {t("header.step", {
+              <h1 className={css({ fontSize: 'xl', fontWeight: 'bold' })}>{tutorial.title}</h1>
+              <p className={css({ fontSize: 'sm', color: 'gray.600' })}>
+                {t('header.step', {
                   current: currentStepIndex + 1,
                   total: tutorial.steps.length,
                   title: currentStep.title,
@@ -1249,33 +1180,33 @@ function TutorialPlayerContent({
                     className={css({
                       px: 3,
                       py: 1,
-                      fontSize: "sm",
-                      border: "1px solid",
-                      borderColor: "blue.300",
-                      borderRadius: "md",
-                      bg: uiState.showDebugPanel ? "blue.100" : "white",
-                      color: "blue.700",
-                      cursor: "pointer",
-                      _hover: { bg: "blue.50" },
+                      fontSize: 'sm',
+                      border: '1px solid',
+                      borderColor: 'blue.300',
+                      borderRadius: 'md',
+                      bg: uiState.showDebugPanel ? 'blue.100' : 'white',
+                      color: 'blue.700',
+                      cursor: 'pointer',
+                      _hover: { bg: 'blue.50' },
                     })}
                   >
-                    {t("controls.debug")}
+                    {t('controls.debug')}
                   </button>
                   <button
                     onClick={toggleStepList}
                     className={css({
                       px: 3,
                       py: 1,
-                      fontSize: "sm",
-                      border: "1px solid",
-                      borderColor: "gray.300",
-                      borderRadius: "md",
-                      bg: uiState.showStepList ? "gray.100" : "white",
-                      cursor: "pointer",
-                      _hover: { bg: "gray.50" },
+                      fontSize: 'sm',
+                      border: '1px solid',
+                      borderColor: 'gray.300',
+                      borderRadius: 'md',
+                      bg: uiState.showStepList ? 'gray.100' : 'white',
+                      cursor: 'pointer',
+                      _hover: { bg: 'gray.50' },
                     })}
                   >
-                    {t("controls.steps")}
+                    {t('controls.steps')}
                   </button>
 
                   {/* Multi-step navigation controls */}
@@ -1284,47 +1215,37 @@ function TutorialPlayerContent({
                       <>
                         <div
                           className={css({
-                            fontSize: "xs",
-                            color: "gray.600",
+                            fontSize: 'xs',
+                            color: 'gray.600',
                             px: 2,
-                            borderLeft: "1px solid",
-                            borderColor: "gray.300",
+                            borderLeft: '1px solid',
+                            borderColor: 'gray.300',
                             ml: 2,
                             pl: 3,
                           })}
                         >
-                          {t("controls.multiStep.label", {
+                          {t('controls.multiStep.label', {
                             current: currentMultiStep + 1,
                             total: currentStep.multiStepInstructions.length,
                           })}
                         </div>
                         <button
-                          onClick={() => dispatch({ type: "RESET_MULTI_STEP" })}
+                          onClick={() => dispatch({ type: 'RESET_MULTI_STEP' })}
                           disabled={currentMultiStep === 0}
                           className={css({
                             px: 2,
                             py: 1,
-                            fontSize: "xs",
-                            border: "1px solid",
-                            borderColor:
-                              currentMultiStep === 0
-                                ? "gray.200"
-                                : "orange.300",
-                            borderRadius: "md",
-                            bg: currentMultiStep === 0 ? "gray.100" : "white",
-                            color:
-                              currentMultiStep === 0
-                                ? "gray.400"
-                                : "orange.700",
-                            cursor:
-                              currentMultiStep === 0
-                                ? "not-allowed"
-                                : "pointer",
-                            _hover:
-                              currentMultiStep === 0 ? {} : { bg: "orange.50" },
+                            fontSize: 'xs',
+                            border: '1px solid',
+                            borderColor: currentMultiStep === 0 ? 'gray.200' : 'orange.300',
+                            borderRadius: 'md',
+                            bg: currentMultiStep === 0 ? 'gray.100' : 'white',
+                            color: currentMultiStep === 0 ? 'gray.400' : 'orange.700',
+                            cursor: currentMultiStep === 0 ? 'not-allowed' : 'pointer',
+                            _hover: currentMultiStep === 0 ? {} : { bg: 'orange.50' },
                           })}
                         >
-                          {t("controls.multiStep.first")}
+                          {t('controls.multiStep.first')}
                         </button>
                         <button
                           onClick={() => previousMultiStep()}
@@ -1332,78 +1253,62 @@ function TutorialPlayerContent({
                           className={css({
                             px: 2,
                             py: 1,
-                            fontSize: "xs",
-                            border: "1px solid",
-                            borderColor:
-                              currentMultiStep === 0
-                                ? "gray.200"
-                                : "orange.300",
-                            borderRadius: "md",
-                            bg: currentMultiStep === 0 ? "gray.100" : "white",
-                            color:
-                              currentMultiStep === 0
-                                ? "gray.400"
-                                : "orange.700",
-                            cursor:
-                              currentMultiStep === 0
-                                ? "not-allowed"
-                                : "pointer",
-                            _hover:
-                              currentMultiStep === 0 ? {} : { bg: "orange.50" },
+                            fontSize: 'xs',
+                            border: '1px solid',
+                            borderColor: currentMultiStep === 0 ? 'gray.200' : 'orange.300',
+                            borderRadius: 'md',
+                            bg: currentMultiStep === 0 ? 'gray.100' : 'white',
+                            color: currentMultiStep === 0 ? 'gray.400' : 'orange.700',
+                            cursor: currentMultiStep === 0 ? 'not-allowed' : 'pointer',
+                            _hover: currentMultiStep === 0 ? {} : { bg: 'orange.50' },
                           })}
                         >
-                          {t("controls.multiStep.prev")}
+                          {t('controls.multiStep.prev')}
                         </button>
                         <button
                           onClick={() => advanceMultiStep()}
                           disabled={
-                            currentMultiStep >=
-                            currentStep.multiStepInstructions.length - 1
+                            currentMultiStep >= currentStep.multiStepInstructions.length - 1
                           }
                           className={css({
                             px: 2,
                             py: 1,
-                            fontSize: "xs",
-                            border: "1px solid",
+                            fontSize: 'xs',
+                            border: '1px solid',
                             borderColor:
-                              currentMultiStep >=
-                              currentStep.multiStepInstructions.length - 1
-                                ? "gray.200"
-                                : "green.300",
-                            borderRadius: "md",
+                              currentMultiStep >= currentStep.multiStepInstructions.length - 1
+                                ? 'gray.200'
+                                : 'green.300',
+                            borderRadius: 'md',
                             bg:
-                              currentMultiStep >=
-                              currentStep.multiStepInstructions.length - 1
-                                ? "gray.100"
-                                : "white",
+                              currentMultiStep >= currentStep.multiStepInstructions.length - 1
+                                ? 'gray.100'
+                                : 'white',
                             color:
-                              currentMultiStep >=
-                              currentStep.multiStepInstructions.length - 1
-                                ? "gray.400"
-                                : "green.700",
+                              currentMultiStep >= currentStep.multiStepInstructions.length - 1
+                                ? 'gray.400'
+                                : 'green.700',
                             cursor:
-                              currentMultiStep >=
-                              currentStep.multiStepInstructions.length - 1
-                                ? "not-allowed"
-                                : "pointer",
+                              currentMultiStep >= currentStep.multiStepInstructions.length - 1
+                                ? 'not-allowed'
+                                : 'pointer',
                             _hover:
-                              currentMultiStep >=
-                              currentStep.multiStepInstructions.length - 1
+                              currentMultiStep >= currentStep.multiStepInstructions.length - 1
                                 ? {}
-                                : { bg: "green.50" },
+                                : { bg: 'green.50' },
                           })}
                         >
-                          {t("controls.multiStep.next")}
+                          {t('controls.multiStep.next')}
                         </button>
                       </>
                     )}
-                  <label className={hstack({ gap: 2, fontSize: "sm" })}>
+                  <label className={hstack({ gap: 2, fontSize: 'sm' })}>
                     <input
                       type="checkbox"
                       checked={uiState.autoAdvance}
                       onChange={toggleAutoAdvance}
                     />
-                    {t("controls.autoAdvance")}
+                    {t('controls.autoAdvance')}
                   </label>
                 </>
               )}
@@ -1414,17 +1319,17 @@ function TutorialPlayerContent({
           <div
             className={css({
               mt: 2,
-              bg: "gray.200",
-              borderRadius: "full",
+              bg: 'gray.200',
+              borderRadius: 'full',
               h: 2,
             })}
           >
             <div
               className={css({
-                bg: "blue.500",
-                h: "full",
-                borderRadius: "full",
-                transition: "width 0.3s ease",
+                bg: 'blue.500',
+                h: 'full',
+                borderRadius: 'full',
+                transition: 'width 0.3s ease',
               })}
               style={{ width: `${navigationState.completionPercentage}%` }}
             />
@@ -1437,17 +1342,15 @@ function TutorialPlayerContent({
         {uiState.showStepList && (
           <div
             className={css({
-              w: "300px",
-              borderRight: "1px solid",
-              borderColor: "gray.200",
-              bg: "gray.50",
+              w: '300px',
+              borderRight: '1px solid',
+              borderColor: 'gray.200',
+              bg: 'gray.50',
               p: 4,
-              overflowY: "auto",
+              overflowY: 'auto',
             })}
           >
-            <h3 className={css({ fontWeight: "bold", mb: 3 })}>
-              {t("sidebar.title")}
-            </h3>
+            <h3 className={css({ fontWeight: 'bold', mb: 3 })}>{t('sidebar.title')}</h3>
             <div className={stack({ gap: 2 })}>
               {tutorial.steps && Array.isArray(tutorial.steps) ? (
                 tutorial.steps.map((step, index) => (
@@ -1456,27 +1359,24 @@ function TutorialPlayerContent({
                     onClick={() => goToStep(index)}
                     className={css({
                       p: 3,
-                      textAlign: "left",
-                      border: "1px solid",
-                      borderColor:
-                        index === currentStepIndex ? "blue.300" : "gray.200",
-                      borderRadius: "md",
-                      bg: index === currentStepIndex ? "blue.50" : "white",
-                      cursor: "pointer",
+                      textAlign: 'left',
+                      border: '1px solid',
+                      borderColor: index === currentStepIndex ? 'blue.300' : 'gray.200',
+                      borderRadius: 'md',
+                      bg: index === currentStepIndex ? 'blue.50' : 'white',
+                      cursor: 'pointer',
                       _hover: {
-                        bg: index === currentStepIndex ? "blue.100" : "gray.50",
+                        bg: index === currentStepIndex ? 'blue.100' : 'gray.50',
                       },
                     })}
                   >
-                    <div
-                      className={css({ fontSize: "sm", fontWeight: "medium" })}
-                    >
+                    <div className={css({ fontSize: 'sm', fontWeight: 'medium' })}>
                       {index + 1}. {step.title}
                     </div>
                     <div
                       className={css({
-                        fontSize: "xs",
-                        color: "gray.600",
+                        fontSize: 'xs',
+                        color: 'gray.600',
                         mt: 1,
                       })}
                     >
@@ -1487,12 +1387,12 @@ function TutorialPlayerContent({
               ) : (
                 <div
                   className={css({
-                    color: "gray.500",
-                    textAlign: "center",
+                    color: 'gray.500',
+                    textAlign: 'center',
                     py: 4,
                   })}
                 >
-                  {t("sidebar.empty")}
+                  {t('sidebar.empty')}
                 </div>
               )}
             </div>
@@ -1500,28 +1400,26 @@ function TutorialPlayerContent({
         )}
 
         {/* Main content */}
-        <div
-          className={css({ flex: 1, display: "flex", flexDirection: "column" })}
-        >
+        <div className={css({ flex: 1, display: 'flex', flexDirection: 'column' })}>
           {/* Step content */}
           <div className={css({ flex: 1, p: 6 })}>
-            <div className={vstack({ gap: 6, alignItems: "center" })}>
+            <div className={vstack({ gap: 6, alignItems: 'center' })}>
               {/* Step instructions */}
-              <div className={css({ textAlign: "center", maxW: "600px" })}>
+              <div className={css({ textAlign: 'center', maxW: '600px' })}>
                 <h2
                   className={css({
-                    fontSize: "2xl",
-                    fontWeight: "bold",
+                    fontSize: '2xl',
+                    fontWeight: 'bold',
                     mb: 2,
-                    color: theme === "dark" ? "gray.200" : "gray.900",
+                    color: theme === 'dark' ? 'gray.200' : 'gray.900',
                   })}
                 >
                   {currentStep.problem}
                 </h2>
                 <p
                   className={css({
-                    fontSize: "lg",
-                    color: theme === "dark" ? "gray.400" : "gray.700",
+                    fontSize: 'lg',
+                    color: theme === 'dark' ? 'gray.400' : 'gray.700',
                     mb: 4,
                   })}
                 >
@@ -1529,7 +1427,7 @@ function TutorialPlayerContent({
                 </p>
                 {/* Hide action description for multi-step problems since it duplicates pedagogical decomposition */}
                 {!currentStep.multiStepInstructions && (
-                  <p className={css({ fontSize: "md", color: "blue.600" })}>
+                  <p className={css({ fontSize: 'md', color: 'blue.600' })}>
                     {currentStep.actionDescription}
                   </p>
                 )}
@@ -1543,49 +1441,46 @@ function TutorialPlayerContent({
                     className={css({
                       p: 5,
                       background:
-                        theme === "dark"
-                          ? "linear-gradient(135deg, rgba(40,40,50,0.6) 0%, rgba(50,50,60,0.6) 50%, rgba(60,50,70,0.3) 100%)"
-                          : "linear-gradient(135deg, rgba(255,248,225,0.95) 0%, rgba(254,252,232,0.95) 50%, rgba(255,245,157,0.15) 100%)",
-                      backdropFilter: "blur(10px)",
+                        theme === 'dark'
+                          ? 'linear-gradient(135deg, rgba(40,40,50,0.6) 0%, rgba(50,50,60,0.6) 50%, rgba(60,50,70,0.3) 100%)'
+                          : 'linear-gradient(135deg, rgba(255,248,225,0.95) 0%, rgba(254,252,232,0.95) 50%, rgba(255,245,157,0.15) 100%)',
+                      backdropFilter: 'blur(10px)',
                       border:
-                        theme === "dark"
-                          ? "1px solid rgba(255,255,255,0.1)"
-                          : "1px solid rgba(251,191,36,0.3)",
-                      borderRadius: "xl",
+                        theme === 'dark'
+                          ? '1px solid rgba(255,255,255,0.1)'
+                          : '1px solid rgba(251,191,36,0.3)',
+                      borderRadius: 'xl',
                       boxShadow:
-                        theme === "dark"
-                          ? "0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05)"
-                          : "0 8px 32px rgba(251,191,36,0.1), 0 2px 8px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6)",
-                      position: "relative",
-                      maxW: "600px",
-                      w: "full",
-                      "&::before": {
+                        theme === 'dark'
+                          ? '0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05)'
+                          : '0 8px 32px rgba(251,191,36,0.1), 0 2px 8px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6)',
+                      position: 'relative',
+                      maxW: '600px',
+                      w: 'full',
+                      '&::before': {
                         content: '""',
-                        position: "absolute",
-                        inset: "0",
-                        borderRadius: "xl",
+                        position: 'absolute',
+                        inset: '0',
+                        borderRadius: 'xl',
                         background:
-                          theme === "dark"
-                            ? "linear-gradient(135deg, rgba(100,100,120,0.1) 0%, rgba(80,60,100,0.05) 100%)"
-                            : "linear-gradient(135deg, rgba(251,191,36,0.1) 0%, rgba(168,85,247,0.05) 100%)",
+                          theme === 'dark'
+                            ? 'linear-gradient(135deg, rgba(100,100,120,0.1) 0%, rgba(80,60,100,0.05) 100%)'
+                            : 'linear-gradient(135deg, rgba(251,191,36,0.1) 0%, rgba(168,85,247,0.05) 100%)',
                         zIndex: -1,
                       },
                     })}
                   >
                     <p
                       className={css({
-                        fontSize: "base",
-                        fontWeight: "600",
-                        color: theme === "dark" ? "gray.300" : "amber.900",
+                        fontSize: 'base',
+                        fontWeight: '600',
+                        color: theme === 'dark' ? 'gray.300' : 'amber.900',
                         mb: 4,
-                        letterSpacing: "wide",
-                        textShadow:
-                          theme === "dark"
-                            ? "none"
-                            : "0 1px 2px rgba(0,0,0,0.1)",
+                        letterSpacing: 'wide',
+                        textShadow: theme === 'dark' ? 'none' : '0 1px 2px rgba(0,0,0,0.1)',
                       })}
                     >
-                      {t("guidance.title")}
+                      {t('guidance.title')}
                     </p>
 
                     {/* Pedagogical decomposition with interactive reasoning */}
@@ -1595,29 +1490,29 @@ function TutorialPlayerContent({
                           mb: 4,
                           p: 3,
                           background:
-                            theme === "dark"
-                              ? "linear-gradient(135deg, rgba(50,50,60,0.4) 0%, rgba(40,40,50,0.5) 100%)"
-                              : "linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.9) 100%)",
+                            theme === 'dark'
+                              ? 'linear-gradient(135deg, rgba(50,50,60,0.4) 0%, rgba(40,40,50,0.5) 100%)'
+                              : 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.9) 100%)',
                           border:
-                            theme === "dark"
-                              ? "1px solid rgba(255,255,255,0.1)"
-                              : "1px solid rgba(203,213,225,0.4)",
-                          borderRadius: "lg",
+                            theme === 'dark'
+                              ? '1px solid rgba(255,255,255,0.1)'
+                              : '1px solid rgba(203,213,225,0.4)',
+                          borderRadius: 'lg',
                           boxShadow:
-                            theme === "dark"
-                              ? "0 1px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05)"
-                              : "0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7)",
-                          backdropFilter: "blur(4px)",
+                            theme === 'dark'
+                              ? '0 1px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05)'
+                              : '0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7)',
+                          backdropFilter: 'blur(4px)',
                         })}
                       >
                         <div
                           className={css({
-                            fontSize: "base",
-                            color: theme === "dark" ? "gray.300" : "slate.800",
-                            fontFamily: "mono",
-                            fontWeight: "500",
-                            letterSpacing: "tight",
-                            lineHeight: "1.5",
+                            fontSize: 'base',
+                            color: theme === 'dark' ? 'gray.300' : 'slate.800',
+                            fontFamily: 'mono',
+                            fontWeight: '500',
+                            letterSpacing: 'tight',
+                            lineHeight: '1.5',
                           })}
                         >
                           <DecompositionWithReasons
@@ -1631,37 +1526,35 @@ function TutorialPlayerContent({
 
                     <div
                       className={css({
-                        fontSize: "sm",
-                        color: theme === "dark" ? "gray.400" : "amber.800",
-                        fontWeight: "500",
-                        lineHeight: "1.6",
+                        fontSize: 'sm',
+                        color: theme === 'dark' ? 'gray.400' : 'amber.800',
+                        fontWeight: '500',
+                        lineHeight: '1.6',
                       })}
                     >
                       {(() => {
                         // Only show the current step instruction
                         const currentInstruction =
-                          currentStep.multiStepInstructions[currentMultiStep];
-                        const _mathTerm =
-                          expectedSteps[currentMultiStep]?.mathematicalTerm;
+                          currentStep.multiStepInstructions[currentMultiStep]
+                        const _mathTerm = expectedSteps[currentMultiStep]?.mathematicalTerm
 
-                        if (!currentInstruction) return null;
+                        if (!currentInstruction) return null
 
                         // Hide "Next Action" when at the expected starting state for this step
                         const isAtExpectedStartingState = (() => {
                           if (currentMultiStep === 0) {
                             // First step: check if current value matches tutorial step start value
-                            return currentValue === currentStep.startValue;
+                            return currentValue === currentStep.startValue
                           } else {
                             // Subsequent steps: check if current value matches previous step's target
                             const previousStepTarget =
-                              expectedSteps[currentMultiStep - 1]?.targetValue;
-                            return currentValue === previousStepTarget;
+                              expectedSteps[currentMultiStep - 1]?.targetValue
+                            return currentValue === previousStepTarget
                           }
-                        })();
+                        })()
 
                         const hasMeaningfulSummary =
-                          currentStepSummary &&
-                          !currentStepSummary.includes("No changes needed");
+                          currentStepSummary && !currentStepSummary.includes('No changes needed')
 
                         // Only show help if:
                         // 1. Not at expected starting state (user needs to do something)
@@ -1670,29 +1563,24 @@ function TutorialPlayerContent({
                         const _needsAction =
                           !isAtExpectedStartingState &&
                           hasMeaningfulSummary &&
-                          showHelpForCurrentStep;
+                          showHelpForCurrentStep
 
                         return (
                           <div>
                             <div
                               className={css({
                                 mb: 1,
-                                fontWeight: "bold",
-                                color:
-                                  theme === "dark"
-                                    ? "yellow.200"
-                                    : "yellow.900",
+                                fontWeight: 'bold',
+                                color: theme === 'dark' ? 'yellow.200' : 'yellow.900',
                                 textShadow:
-                                  theme === "dark"
-                                    ? "0 0 12px rgba(251, 191, 36, 0.4)"
-                                    : "none",
-                                fontSize: theme === "dark" ? "lg" : "base",
+                                  theme === 'dark' ? '0 0 12px rgba(251, 191, 36, 0.4)' : 'none',
+                                fontSize: theme === 'dark' ? 'lg' : 'base',
                               })}
                             >
                               {currentInstruction}
                             </div>
                           </div>
-                        );
+                        )
                       })()}
                     </div>
                   </div>
@@ -1703,12 +1591,12 @@ function TutorialPlayerContent({
                 <div
                   className={css({
                     p: 4,
-                    bg: "red.50",
-                    border: "1px solid",
-                    borderColor: "red.200",
-                    borderRadius: "md",
-                    color: "red.700",
-                    maxW: "600px",
+                    bg: 'red.50',
+                    border: '1px solid',
+                    borderColor: 'red.200',
+                    borderRadius: 'md',
+                    color: 'red.700',
+                    maxW: '600px',
                   })}
                 >
                   {error}
@@ -1720,14 +1608,12 @@ function TutorialPlayerContent({
               {/* Abacus */}
               <div
                 className={css({
-                  bg: theme === "dark" ? "rgba(30, 30, 40, 0.4)" : "white",
-                  border: "2px solid",
-                  borderColor:
-                    theme === "dark" ? "rgba(255, 255, 255, 0.1)" : "gray.200",
-                  borderRadius: "lg",
+                  bg: theme === 'dark' ? 'rgba(30, 30, 40, 0.4)' : 'white',
+                  border: '2px solid',
+                  borderColor: theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'gray.200',
+                  borderRadius: 'lg',
                   p: 6,
-                  shadow:
-                    theme === "dark" ? "0 4px 6px rgba(0, 0, 0, 0.3)" : "lg",
+                  shadow: theme === 'dark' ? '0 4px 6px rgba(0, 0, 0, 0.3)' : 'lg',
                 })}
               >
                 <AbacusReact
@@ -1760,49 +1646,43 @@ function TutorialPlayerContent({
                     className={css({
                       mt: 4,
                       p: 3,
-                      bg: "purple.50",
-                      border: "1px solid",
-                      borderColor: "purple.200",
-                      borderRadius: "md",
-                      fontSize: "xs",
-                      fontFamily: "mono",
+                      bg: 'purple.50',
+                      border: '1px solid',
+                      borderColor: 'purple.200',
+                      borderRadius: 'md',
+                      fontSize: 'xs',
+                      fontFamily: 'mono',
                     })}
                   >
                     <div>
                       <strong>Step Debug Info:</strong>
                     </div>
                     <div>Current Multi-Step: {currentMultiStep}</div>
+                    <div>Total Steps: {currentStep.totalSteps || 'undefined'}</div>
                     <div>
-                      Total Steps: {currentStep.totalSteps || "undefined"}
-                    </div>
-                    <div>
-                      Step Bead Highlights:{" "}
-                      {currentStepBeads ? currentStepBeads.length : "undefined"}
+                      Step Bead Highlights:{' '}
+                      {currentStepBeads ? currentStepBeads.length : 'undefined'}
                     </div>
                     <div>
                       Dynamic Recalc: {currentValue} → {currentStep.targetValue}
                     </div>
                     <div>Show Direction Indicators: true</div>
                     <div>
-                      Multi-Step Instructions:{" "}
-                      {currentStep.multiStepInstructions?.length || "undefined"}
+                      Multi-Step Instructions:{' '}
+                      {currentStep.multiStepInstructions?.length || 'undefined'}
                     </div>
                     {currentStepBeads && (
                       <div className={css({ mt: 2 })}>
                         <div>
-                          <strong>
-                            Current Step Beads ({currentMultiStep}):
-                          </strong>
+                          <strong>Current Step Beads ({currentMultiStep}):</strong>
                         </div>
                         {currentStepBeads
                           .filter((bead) => bead.stepIndex === currentMultiStep)
                           .map((bead, i) => (
                             <div key={i}>
-                              - Place {bead.placeValue} {bead.beadType}{" "}
-                              {bead.position !== undefined
-                                ? `pos ${bead.position}`
-                                : ""}{" "}
-                              → {bead.direction}
+                              - Place {bead.placeValue} {bead.beadType}{' '}
+                              {bead.position !== undefined ? `pos ${bead.position}` : ''} →{' '}
+                              {bead.direction}
                             </div>
                           ))}
                       </div>
@@ -1815,24 +1695,24 @@ function TutorialPlayerContent({
               {!hideTooltip && currentStep.tooltip && (
                 <div
                   className={css({
-                    maxW: "500px",
+                    maxW: '500px',
                     p: 4,
-                    bg: "yellow.50",
-                    border: "1px solid",
-                    borderColor: "yellow.200",
-                    borderRadius: "md",
+                    bg: 'yellow.50',
+                    border: '1px solid',
+                    borderColor: 'yellow.200',
+                    borderRadius: 'md',
                   })}
                 >
                   <h4
                     className={css({
-                      fontWeight: "bold",
-                      color: "yellow.800",
+                      fontWeight: 'bold',
+                      color: 'yellow.800',
                       mb: 1,
                     })}
                   >
                     {currentStep.tooltip.content}
                   </h4>
-                  <p className={css({ fontSize: "sm", color: "yellow.700" })}>
+                  <p className={css({ fontSize: 'sm', color: 'yellow.700' })}>
                     {currentStep.tooltip.explanation}
                   </p>
                 </div>
@@ -1844,37 +1724,33 @@ function TutorialPlayerContent({
           {!hideNavigation && (
             <div
               className={css({
-                borderTop: "1px solid",
-                borderColor: "gray.200",
+                borderTop: '1px solid',
+                borderColor: 'gray.200',
                 p: 4,
-                bg: "gray.50",
+                bg: 'gray.50',
               })}
             >
-              <div className={hstack({ justifyContent: "space-between" })}>
+              <div className={hstack({ justifyContent: 'space-between' })}>
                 <button
                   onClick={goToPreviousStep}
                   disabled={!navigationState.canGoPrevious}
                   className={css({
                     px: 4,
                     py: 2,
-                    border: "1px solid",
-                    borderColor: "gray.300",
-                    borderRadius: "md",
-                    bg: "white",
-                    cursor: navigationState.canGoPrevious
-                      ? "pointer"
-                      : "not-allowed",
+                    border: '1px solid',
+                    borderColor: 'gray.300',
+                    borderRadius: 'md',
+                    bg: 'white',
+                    cursor: navigationState.canGoPrevious ? 'pointer' : 'not-allowed',
                     opacity: navigationState.canGoPrevious ? 1 : 0.5,
-                    _hover: navigationState.canGoPrevious
-                      ? { bg: "gray.50" }
-                      : {},
+                    _hover: navigationState.canGoPrevious ? { bg: 'gray.50' } : {},
                   })}
                 >
-                  {t("navigation.previous")}
+                  {t('navigation.previous')}
                 </button>
 
-                <div className={css({ fontSize: "sm", color: "gray.600" })}>
-                  {t("navigation.stepCounter", {
+                <div className={css({ fontSize: 'sm', color: 'gray.600' })}>
+                  {t('navigation.stepCounter', {
                     current: currentStepIndex + 1,
                     total: navigationState.totalSteps,
                   })}
@@ -1886,33 +1762,18 @@ function TutorialPlayerContent({
                   className={css({
                     px: 4,
                     py: 2,
-                    border: "1px solid",
+                    border: '1px solid',
                     borderColor:
-                      navigationState.canGoNext || isStepCompleted
-                        ? "blue.300"
-                        : "gray.300",
-                    borderRadius: "md",
-                    bg:
-                      navigationState.canGoNext || isStepCompleted
-                        ? "blue.500"
-                        : "gray.200",
-                    color:
-                      navigationState.canGoNext || isStepCompleted
-                        ? "white"
-                        : "gray.500",
+                      navigationState.canGoNext || isStepCompleted ? 'blue.300' : 'gray.300',
+                    borderRadius: 'md',
+                    bg: navigationState.canGoNext || isStepCompleted ? 'blue.500' : 'gray.200',
+                    color: navigationState.canGoNext || isStepCompleted ? 'white' : 'gray.500',
                     cursor:
-                      navigationState.canGoNext || isStepCompleted
-                        ? "pointer"
-                        : "not-allowed",
-                    _hover:
-                      navigationState.canGoNext || isStepCompleted
-                        ? { bg: "blue.600" }
-                        : {},
+                      navigationState.canGoNext || isStepCompleted ? 'pointer' : 'not-allowed',
+                    _hover: navigationState.canGoNext || isStepCompleted ? { bg: 'blue.600' } : {},
                   })}
                 >
-                  {navigationState.canGoNext
-                    ? t("navigation.next")
-                    : t("navigation.complete")}
+                  {navigationState.canGoNext ? t('navigation.next') : t('navigation.complete')}
                 </button>
               </div>
             </div>
@@ -1923,52 +1784,46 @@ function TutorialPlayerContent({
         {uiState.showDebugPanel && (
           <div
             className={css({
-              w: "400px",
-              borderLeft: "1px solid",
-              borderColor: "gray.200",
-              bg: "gray.50",
+              w: '400px',
+              borderLeft: '1px solid',
+              borderColor: 'gray.200',
+              bg: 'gray.50',
               p: 4,
-              overflowY: "auto",
+              overflowY: 'auto',
             })}
           >
-            <h3 className={css({ fontWeight: "bold", mb: 3 })}>
-              {t("debugPanel.title")}
-            </h3>
+            <h3 className={css({ fontWeight: 'bold', mb: 3 })}>{t('debugPanel.title')}</h3>
 
             <div className={stack({ gap: 4 })}>
               {/* Current state */}
               <div>
-                <h4 className={css({ fontWeight: "medium", mb: 2 })}>
-                  {t("debugPanel.currentState")}
+                <h4 className={css({ fontWeight: 'medium', mb: 2 })}>
+                  {t('debugPanel.currentState')}
                 </h4>
                 <div
                   className={css({
-                    fontSize: "sm",
-                    fontFamily: "mono",
-                    bg: "white",
+                    fontSize: 'sm',
+                    fontFamily: 'mono',
+                    bg: 'white',
                     p: 2,
-                    borderRadius: "md",
+                    borderRadius: 'md',
                   })}
                 >
                   <div>
-                    {t("debugPanel.step", {
+                    {t('debugPanel.step', {
                       current: currentStepIndex + 1,
                       total: navigationState.totalSteps,
                     })}
                   </div>
-                  <div>{t("debugPanel.value", { value: currentValue })}</div>
+                  <div>{t('debugPanel.value', { value: currentValue })}</div>
+                  <div>{t('debugPanel.target', { value: currentStep.targetValue })}</div>
                   <div>
-                    {t("debugPanel.target", { value: currentStep.targetValue })}
-                  </div>
-                  <div>
-                    {t("debugPanel.completed", {
-                      status: t(
-                        `debugPanel.completedStatus.${isStepCompleted ? "yes" : "no"}`,
-                      ),
+                    {t('debugPanel.completed', {
+                      status: t(`debugPanel.completedStatus.${isStepCompleted ? 'yes' : 'no'}`),
                     })}
                   </div>
                   <div>
-                    {t("debugPanel.time", {
+                    {t('debugPanel.time', {
                       seconds: Math.round((Date.now() - stepStartTime) / 1000),
                     })}
                   </div>
@@ -1977,19 +1832,17 @@ function TutorialPlayerContent({
 
               {/* Event log */}
               <div>
-                <h4 className={css({ fontWeight: "medium", mb: 2 })}>
-                  {t("debugPanel.eventLog")}
-                </h4>
+                <h4 className={css({ fontWeight: 'medium', mb: 2 })}>{t('debugPanel.eventLog')}</h4>
                 <div
                   className={css({
-                    maxH: "300px",
-                    overflowY: "auto",
-                    fontSize: "xs",
-                    fontFamily: "mono",
-                    bg: "white",
-                    border: "1px solid",
-                    borderColor: "gray.200",
-                    borderRadius: "md",
+                    maxH: '300px',
+                    overflowY: 'auto',
+                    fontSize: 'xs',
+                    fontFamily: 'mono',
+                    bg: 'white',
+                    border: '1px solid',
+                    borderColor: 'gray.200',
+                    borderRadius: 'md',
                   })}
                 >
                   {events
@@ -2000,30 +1853,28 @@ function TutorialPlayerContent({
                         key={index}
                         className={css({
                           p: 2,
-                          borderBottom: "1px solid",
-                          borderColor: "gray.100",
+                          borderBottom: '1px solid',
+                          borderColor: 'gray.100',
                         })}
                       >
                         <div
                           className={css({
-                            fontWeight: "bold",
-                            color: "blue.600",
+                            fontWeight: 'bold',
+                            color: 'blue.600',
                           })}
                         >
                           {event.type}
                         </div>
-                        <div className={css({ color: "gray.600" })}>
+                        <div className={css({ color: 'gray.600' })}>
                           {event.timestamp.toLocaleTimeString()}
                         </div>
-                        {event.type === "VALUE_CHANGED" && (
+                        {event.type === 'VALUE_CHANGED' && (
                           <div>
                             {event.oldValue} → {event.newValue}
                           </div>
                         )}
-                        {event.type === "ERROR_OCCURRED" && (
-                          <div className={css({ color: "red.600" })}>
-                            {event.error}
-                          </div>
+                        {event.type === 'ERROR_OCCURRED' && (
+                          <div className={css({ color: 'red.600' })}>{event.error}</div>
                         )}
                       </div>
                     ))}
@@ -2049,7 +1900,7 @@ function TutorialPlayerContent({
         }
       `}</style>
     </div>
-  );
+  )
 }
 
 // Export wrapper component with provider
@@ -2069,5 +1920,5 @@ export function TutorialPlayer(props: TutorialPlayerProps) {
         <TutorialPlayerContent {...props} />
       </TutorialProvider>
     </TutorialUIProvider>
-  );
+  )
 }
diff --git a/apps/web/src/components/tutorial/TutorialUI.stories.tsx b/apps/web/src/components/tutorial/TutorialUI.stories.tsx
index 8fdf3a8f..c167ea10 100644
--- a/apps/web/src/components/tutorial/TutorialUI.stories.tsx
+++ b/apps/web/src/components/tutorial/TutorialUI.stories.tsx
@@ -1,65 +1,50 @@
-import * as HoverCard from "@radix-ui/react-hover-card";
-import type { Meta, StoryObj } from "@storybook/react";
-import type React from "react";
-import { useState } from "react";
-import { CoachBar } from "./CoachBar/CoachBar";
-import type { PedagogicalSegment } from "./DecompositionWithReasons";
-import { ReasonTooltip } from "./ReasonTooltip";
-import { TutorialUIProvider, useTutorialUI } from "./TutorialUIContext";
-import "./CoachBar/coachbar.css";
-import "./reason-tooltip.css";
+import * as HoverCard from '@radix-ui/react-hover-card'
+import type { Meta, StoryObj } from '@storybook/react'
+import type React from 'react'
+import { useState } from 'react'
+import { CoachBar } from './CoachBar/CoachBar'
+import type { PedagogicalSegment } from './DecompositionWithReasons'
+import { ReasonTooltip } from './ReasonTooltip'
+import { TutorialUIProvider, useTutorialUI } from './TutorialUIContext'
+import './CoachBar/coachbar.css'
+import './reason-tooltip.css'
 
 // Enhanced demo components
-function MockBeadTooltip({
-  children,
-  content,
-}: {
-  children: React.ReactNode;
-  content: string;
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-  const ui = useTutorialUI();
+function MockBeadTooltip({ children, content }: { children: React.ReactNode; content: string }) {
+  const [isOpen, setIsOpen] = useState(false)
+  const ui = useTutorialUI()
 
   const handleOpenChange = (open: boolean) => {
     if (open) {
-      const granted = ui.requestFocus("bead");
+      const granted = ui.requestFocus('bead')
       if (granted) {
-        setIsOpen(true);
+        setIsOpen(true)
       }
     } else {
-      ui.releaseFocus("bead");
-      setIsOpen(false);
+      ui.releaseFocus('bead')
+      setIsOpen(false)
     }
-  };
+  }
 
   return (
-    <HoverCard.Root
-      open={isOpen}
-      onOpenChange={handleOpenChange}
-      openDelay={150}
-      closeDelay={400}
-    >
+    <HoverCard.Root open={isOpen} onOpenChange={handleOpenChange} openDelay={150} closeDelay={400}>
       <HoverCard.Trigger asChild>
         <div
           style={{
-            width: "40px",
-            height: "40px",
-            backgroundColor: ui.hintFocus === "bead" ? "#059669" : "#10b981",
-            borderRadius: "20px",
-            cursor: "pointer",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            color: "white",
-            fontWeight: "bold",
-            margin: "4px",
-            opacity:
-              ui.hintFocus === "none" || ui.hintFocus === "bead" ? 1 : 0.5,
-            transition: "all 0.2s ease",
-            border:
-              ui.hintFocus === "bead"
-                ? "2px solid #065f46"
-                : "2px solid transparent",
+            width: '40px',
+            height: '40px',
+            backgroundColor: ui.hintFocus === 'bead' ? '#059669' : '#10b981',
+            borderRadius: '20px',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            fontWeight: 'bold',
+            margin: '4px',
+            opacity: ui.hintFocus === 'none' || ui.hintFocus === 'bead' ? 1 : 0.5,
+            transition: 'all 0.2s ease',
+            border: ui.hintFocus === 'bead' ? '2px solid #065f46' : '2px solid transparent',
           }}
         >
           {children}
@@ -69,12 +54,12 @@ function MockBeadTooltip({
       <HoverCard.Portal>
         <HoverCard.Content
           style={{
-            backgroundColor: "#ecfdf5",
-            border: "1px solid #10b981",
-            borderRadius: "8px",
-            padding: "12px",
-            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
-            maxWidth: "250px",
+            backgroundColor: '#ecfdf5',
+            border: '1px solid #10b981',
+            borderRadius: '8px',
+            padding: '12px',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+            maxWidth: '250px',
             zIndex: 50,
           }}
           sideOffset={8}
@@ -82,24 +67,22 @@ function MockBeadTooltip({
           <div>
             <div
               style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                marginBottom: "8px",
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                marginBottom: '8px',
               }}
             >
-              <span style={{ fontSize: "18px" }}>🟢</span>
-              <strong style={{ color: "#065f46" }}>Bead Movement</strong>
+              <span style={{ fontSize: '18px' }}>🟢</span>
+              <strong style={{ color: '#065f46' }}>Bead Movement</strong>
             </div>
-            <p style={{ margin: 0, fontSize: "14px", color: "#047857" }}>
-              {content}
-            </p>
+            <p style={{ margin: 0, fontSize: '14px', color: '#047857' }}>{content}</p>
           </div>
-          <HoverCard.Arrow style={{ fill: "#ecfdf5", stroke: "#10b981" }} />
+          <HoverCard.Arrow style={{ fill: '#ecfdf5', stroke: '#10b981' }} />
         </HoverCard.Content>
       </HoverCard.Portal>
     </HoverCard.Root>
-  );
+  )
 }
 
 function MockTermWithTooltip({
@@ -107,202 +90,185 @@ function MockTermWithTooltip({
   segment,
   termIndex,
 }: {
-  children: React.ReactNode;
-  segment: PedagogicalSegment;
-  termIndex: number;
+  children: React.ReactNode
+  segment: PedagogicalSegment
+  termIndex: number
 }) {
   return (
     <ReasonTooltip termIndex={termIndex} segment={segment} originalValue="50">
       <span
         style={{
-          display: "inline-block",
-          padding: "4px 8px",
-          backgroundColor: "#dbeafe",
-          border: "1px solid #3b82f6",
-          borderRadius: "4px",
-          cursor: "pointer",
-          margin: "0 2px",
-          color: "#1e40af",
-          fontFamily: "monospace",
+          display: 'inline-block',
+          padding: '4px 8px',
+          backgroundColor: '#dbeafe',
+          border: '1px solid #3b82f6',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          margin: '0 2px',
+          color: '#1e40af',
+          fontFamily: 'monospace',
         }}
       >
         {children}
       </span>
     </ReasonTooltip>
-  );
+  )
 }
 
-const createMockSegment = (
-  overrides: Partial<PedagogicalSegment> = {},
-): PedagogicalSegment => ({
-  id: "demo-segment",
+const createMockSegment = (overrides: Partial<PedagogicalSegment> = {}): PedagogicalSegment => ({
+  id: 'demo-segment',
   place: 1,
   digit: 5,
   a: 0,
   L: 0,
   U: 0,
-  goal: "Add 5 to tens place",
+  goal: 'Add 5 to tens place',
   plan: [
     {
-      rule: "Direct",
-      conditions: ["L+d <= 4"],
-      explanation: ["Simple addition"],
+      rule: 'Direct',
+      conditions: ['L+d <= 4'],
+      explanation: ['Simple addition'],
     },
   ],
-  expression: "50",
+  expression: '50',
   termIndices: [0],
   termRange: { startIndex: 0, endIndex: 2 },
   readable: {
-    title: "Direct Move",
-    subtitle: "Heaven bead helps",
-    summary: "Add 5 to the tens place using the heaven bead.",
+    title: 'Direct Move',
+    subtitle: 'Heaven bead helps',
+    summary: 'Add 5 to the tens place using the heaven bead.',
     chips: [
-      { label: "Digit being added", value: "5" },
-      { label: "Target place", value: "tens" },
-      { label: "Rod shows", value: "0 (empty)" },
+      { label: 'Digit being added', value: '5' },
+      { label: 'Target place', value: 'tens' },
+      { label: 'Rod shows', value: '0 (empty)' },
     ],
-    stepsFriendly: ["Press the heaven bead down in tens column"],
+    stepsFriendly: ['Press the heaven bead down in tens column'],
     validation: { ok: true, issues: [] },
   },
   ...overrides,
-});
+})
 
 function IntegratedDemo() {
-  const ui = useTutorialUI();
-  const [currentSegment, setCurrentSegment] = useState(createMockSegment());
+  const ui = useTutorialUI()
+  const [currentSegment, setCurrentSegment] = useState(createMockSegment())
 
   const segments = [
     createMockSegment({
-      id: "step-1",
+      id: 'step-1',
       readable: {
-        title: "Step 1: Direct Move",
-        subtitle: "Simple bead movement",
-        summary:
-          "Add 3 to the ones place. It fits here, so just move 3 lower beads.",
+        title: 'Step 1: Direct Move',
+        subtitle: 'Simple bead movement',
+        summary: 'Add 3 to the ones place. It fits here, so just move 3 lower beads.',
         chips: [
-          { label: "Digit", value: "3" },
-          { label: "Place", value: "ones" },
+          { label: 'Digit', value: '3' },
+          { label: 'Place', value: 'ones' },
         ],
-        stepsFriendly: ["Move 3 earth beads down"],
+        stepsFriendly: ['Move 3 earth beads down'],
         validation: { ok: true, issues: [] },
       },
     }),
     createMockSegment({
-      id: "step-2",
+      id: 'step-2',
       readable: {
-        title: "Step 2: Five Friend",
+        title: 'Step 2: Five Friend',
         subtitle: "Using 5's friend",
-        summary:
-          "Add 7 to the ones place using 5's friend: press the heaven bead (5) and lift 2.",
+        summary: "Add 7 to the ones place using 5's friend: press the heaven bead (5) and lift 2.",
         chips: [
-          { label: "Target", value: "7" },
-          { label: "Strategy", value: "5 + 2" },
+          { label: 'Target', value: '7' },
+          { label: 'Strategy', value: '5 + 2' },
         ],
-        stepsFriendly: ["Press heaven bead", "Lift 2 earth beads"],
+        stepsFriendly: ['Press heaven bead', 'Lift 2 earth beads'],
         validation: { ok: true, issues: [] },
       },
     }),
     createMockSegment({
-      id: "step-3",
+      id: 'step-3',
       readable: {
-        title: "Step 3: Ten Friend",
+        title: 'Step 3: Ten Friend',
         subtitle: "Using 10's friend",
-        summary:
-          "Add 8 to the ones place to make 10. Carry to tens place, then take 2 here.",
+        summary: 'Add 8 to the ones place to make 10. Carry to tens place, then take 2 here.',
         chips: [
-          { label: "Target", value: "8" },
-          { label: "Strategy", value: "10 - 2" },
+          { label: 'Target', value: '8' },
+          { label: 'Strategy', value: '10 - 2' },
         ],
-        stepsFriendly: ["Add 1 to tens", "Subtract 2 from ones"],
+        stepsFriendly: ['Add 1 to tens', 'Subtract 2 from ones'],
         validation: { ok: true, issues: [] },
       },
     }),
-  ];
+  ]
 
   // Update the active segment when buttons are clicked
   const handleStepChange = (segment: PedagogicalSegment) => {
-    setCurrentSegment(segment);
-    ui.setActiveSegment(segment);
-  };
+    setCurrentSegment(segment)
+    ui.setActiveSegment(segment)
+  }
 
   return (
-    <div style={{ height: "100vh", backgroundColor: "#f9fafb" }}>
+    <div style={{ height: '100vh', backgroundColor: '#f9fafb' }}>
       <CoachBar />
 
-      <div style={{ padding: "20px" }}>
+      <div style={{ padding: '20px' }}>
         <h2>Tutorial UI Integration Demo</h2>
-        <p>
-          This demonstrates the Coach Bar and single-owner tooltip gate working
-          together.
-        </p>
+        <p>This demonstrates the Coach Bar and single-owner tooltip gate working together.</p>
 
         {/* Focus status indicator */}
         <div
           style={{
-            padding: "12px",
+            padding: '12px',
             backgroundColor:
-              ui.hintFocus === "none"
-                ? "#f3f4f6"
-                : ui.hintFocus === "term"
-                  ? "#dbeafe"
-                  : "#d1fae5",
-            borderRadius: "6px",
-            marginBottom: "20px",
-            fontFamily: "monospace",
-            fontSize: "14px",
+              ui.hintFocus === 'none' ? '#f3f4f6' : ui.hintFocus === 'term' ? '#dbeafe' : '#d1fae5',
+            borderRadius: '6px',
+            marginBottom: '20px',
+            fontFamily: 'monospace',
+            fontSize: '14px',
           }}
         >
           <strong>Current Focus:</strong> <code>{ui.hintFocus}</code>
-          {ui.hintFocus !== "none" && (
-            <span
-              style={{ marginLeft: "10px", fontSize: "12px", color: "#6b7280" }}
-            >
+          {ui.hintFocus !== 'none' && (
+            <span style={{ marginLeft: '10px', fontSize: '12px', color: '#6b7280' }}>
               (Only {ui.hintFocus} tooltips can open)
             </span>
           )}
         </div>
 
         {/* Step navigation */}
-        <div style={{ marginBottom: "30px" }}>
+        <div style={{ marginBottom: '30px' }}>
           <h3>Tutorial Steps</h3>
-          <div style={{ display: "flex", gap: "10px", marginBottom: "20px" }}>
+          <div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
             {segments.map((segment, index) => (
               <button
                 key={segment.id}
                 onClick={() => handleStepChange(segment)}
                 style={{
-                  padding: "8px 16px",
-                  backgroundColor:
-                    currentSegment.id === segment.id ? "#3b82f6" : "#e5e7eb",
-                  color: currentSegment.id === segment.id ? "white" : "#374151",
-                  border: "none",
-                  borderRadius: "6px",
-                  cursor: "pointer",
-                  fontWeight:
-                    currentSegment.id === segment.id ? "bold" : "normal",
+                  padding: '8px 16px',
+                  backgroundColor: currentSegment.id === segment.id ? '#3b82f6' : '#e5e7eb',
+                  color: currentSegment.id === segment.id ? 'white' : '#374151',
+                  border: 'none',
+                  borderRadius: '6px',
+                  cursor: 'pointer',
+                  fontWeight: currentSegment.id === segment.id ? 'bold' : 'normal',
                 }}
               >
                 Step {index + 1}
               </button>
             ))}
           </div>
-          <p style={{ fontSize: "14px", color: "#6b7280" }}>
-            Click the steps above to see how the Coach Bar updates with
-            different content.
+          <p style={{ fontSize: '14px', color: '#6b7280' }}>
+            Click the steps above to see how the Coach Bar updates with different content.
           </p>
         </div>
 
         {/* Mathematical expression with term tooltips */}
-        <div style={{ marginBottom: "30px" }}>
+        <div style={{ marginBottom: '30px' }}>
           <h3>Mathematical Expression (Term Tooltips)</h3>
           <div
             style={{
-              padding: "20px",
-              backgroundColor: "white",
-              border: "1px solid #e5e7eb",
-              borderRadius: "8px",
-              fontSize: "18px",
-              fontFamily: "monospace",
+              padding: '20px',
+              backgroundColor: 'white',
+              border: '1px solid #e5e7eb',
+              borderRadius: '8px',
+              fontSize: '18px',
+              fontFamily: 'monospace',
             }}
           >
             <span>27 + </span>
@@ -315,32 +281,30 @@ function IntegratedDemo() {
             </MockTermWithTooltip>
             <span> = ?</span>
           </div>
-          <p style={{ fontSize: "14px", color: "#6b7280", marginTop: "10px" }}>
+          <p style={{ fontSize: '14px', color: '#6b7280', marginTop: '10px' }}>
             Hover over the blue terms to see pedagogical tooltips (term focus).
           </p>
         </div>
 
         {/* Abacus representation with bead tooltips */}
-        <div style={{ marginBottom: "30px" }}>
+        <div style={{ marginBottom: '30px' }}>
           <h3>Abacus Representation (Bead Tooltips)</h3>
           <div
             style={{
-              padding: "20px",
-              backgroundColor: "white",
-              border: "1px solid #e5e7eb",
-              borderRadius: "8px",
+              padding: '20px',
+              backgroundColor: 'white',
+              border: '1px solid #e5e7eb',
+              borderRadius: '8px',
             }}
           >
-            <div style={{ display: "flex", alignItems: "center", gap: "20px" }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
               <div>
-                <h4 style={{ margin: "0 0 10px", fontSize: "14px" }}>
-                  Hundreds
-                </h4>
+                <h4 style={{ margin: '0 0 10px', fontSize: '14px' }}>Hundreds</h4>
                 <div
                   style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
                   }}
                 >
                   <MockBeadTooltip content="Heaven bead: Press down to add 5 to hundreds place">
@@ -348,10 +312,10 @@ function IntegratedDemo() {
                   </MockBeadTooltip>
                   <div
                     style={{
-                      height: "2px",
-                      width: "50px",
-                      backgroundColor: "#8b5cf6",
-                      margin: "4px 0",
+                      height: '2px',
+                      width: '50px',
+                      backgroundColor: '#8b5cf6',
+                      margin: '4px 0',
                     }}
                   />
                   <MockBeadTooltip content="Earth bead 1: Press down to add 1 to hundreds place">
@@ -364,12 +328,12 @@ function IntegratedDemo() {
               </div>
 
               <div>
-                <h4 style={{ margin: "0 0 10px", fontSize: "14px" }}>Tens</h4>
+                <h4 style={{ margin: '0 0 10px', fontSize: '14px' }}>Tens</h4>
                 <div
                   style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
                   }}
                 >
                   <MockBeadTooltip content="Heaven bead: Press down to add 5 to tens place">
@@ -377,10 +341,10 @@ function IntegratedDemo() {
                   </MockBeadTooltip>
                   <div
                     style={{
-                      height: "2px",
-                      width: "50px",
-                      backgroundColor: "#8b5cf6",
-                      margin: "4px 0",
+                      height: '2px',
+                      width: '50px',
+                      backgroundColor: '#8b5cf6',
+                      margin: '4px 0',
                     }}
                   />
                   <MockBeadTooltip content="Earth bead 1: Currently active for this step">
@@ -393,12 +357,12 @@ function IntegratedDemo() {
               </div>
 
               <div>
-                <h4 style={{ margin: "0 0 10px", fontSize: "14px" }}>Ones</h4>
+                <h4 style={{ margin: '0 0 10px', fontSize: '14px' }}>Ones</h4>
                 <div
                   style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
                   }}
                 >
                   <MockBeadTooltip content="Heaven bead: Press down to add 5 to ones place">
@@ -406,10 +370,10 @@ function IntegratedDemo() {
                   </MockBeadTooltip>
                   <div
                     style={{
-                      height: "2px",
-                      width: "50px",
-                      backgroundColor: "#8b5cf6",
-                      margin: "4px 0",
+                      height: '2px',
+                      width: '50px',
+                      backgroundColor: '#8b5cf6',
+                      margin: '4px 0',
                     }}
                   />
                   <MockBeadTooltip content="Earth bead 1: Press down to add 1 to ones place">
@@ -422,7 +386,7 @@ function IntegratedDemo() {
               </div>
             </div>
           </div>
-          <p style={{ fontSize: "14px", color: "#6b7280", marginTop: "10px" }}>
+          <p style={{ fontSize: '14px', color: '#6b7280', marginTop: '10px' }}>
             Hover over the beads to see movement instructions (bead focus).
           </p>
         </div>
@@ -430,39 +394,34 @@ function IntegratedDemo() {
         {/* Testing instructions */}
         <div
           style={{
-            padding: "16px",
-            backgroundColor: "#fef3c7",
-            border: "1px solid #f59e0b",
-            borderRadius: "8px",
+            padding: '16px',
+            backgroundColor: '#fef3c7',
+            border: '1px solid #f59e0b',
+            borderRadius: '8px',
           }}
         >
-          <h4 style={{ margin: "0 0 10px", color: "#92400e" }}>
-            🧪 Test the Single-Owner Gate:
-          </h4>
-          <ol style={{ margin: 0, paddingLeft: "20px", color: "#92400e" }}>
+          <h4 style={{ margin: '0 0 10px', color: '#92400e' }}>🧪 Test the Single-Owner Gate:</h4>
+          <ol style={{ margin: 0, paddingLeft: '20px', color: '#92400e' }}>
             <li>Hover over a blue mathematical term → term tooltip opens</li>
             <li>
-              While keeping mouse over the term, try hovering a green bead →
-              bead tooltip is blocked
+              While keeping mouse over the term, try hovering a green bead → bead tooltip is blocked
             </li>
             <li>Move mouse away from term → term tooltip closes</li>
-            <li>
-              Now hover over a green bead → bead tooltip opens successfully
-            </li>
+            <li>Now hover over a green bead → bead tooltip opens successfully</li>
             <li>Try hovering between beads → focus stays with bead tooltips</li>
             <li>Switch tutorial steps → Coach Bar updates with new content</li>
           </ol>
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 const meta: Meta<typeof TutorialUIProvider> = {
-  title: "Tutorial/Complete Tutorial UI",
+  title: 'Tutorial/Complete Tutorial UI',
   component: TutorialUIProvider,
   parameters: {
-    layout: "fullscreen",
+    layout: 'fullscreen',
     docs: {
       description: {
         component: `
@@ -478,10 +437,10 @@ This story demonstrates:
       },
     },
   },
-};
+}
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 export const Complete: Story = {
   render: () => (
@@ -489,37 +448,37 @@ export const Complete: Story = {
       <IntegratedDemo />
     </TutorialUIProvider>
   ),
-};
+}
 
 export const CoachBarOnly: Story = {
   render: () => (
     <TutorialUIProvider
       initialSegment={createMockSegment({
         readable: {
-          title: "Adding Large Numbers",
-          subtitle: "Multi-step process",
+          title: 'Adding Large Numbers',
+          subtitle: 'Multi-step process',
           summary:
-            "When adding 789 + 456, we break it down into place values and handle each column systematically.",
+            'When adding 789 + 456, we break it down into place values and handle each column systematically.',
           chips: [
-            { label: "Problem", value: "789 + 456" },
-            { label: "Strategy", value: "Column by column" },
+            { label: 'Problem', value: '789 + 456' },
+            { label: 'Strategy', value: 'Column by column' },
           ],
           stepsFriendly: [],
           validation: { ok: true, issues: [] },
         },
       })}
     >
-      <div style={{ height: "100vh", backgroundColor: "#f9fafb" }}>
+      <div style={{ height: '100vh', backgroundColor: '#f9fafb' }}>
         <CoachBar />
-        <div style={{ padding: "20px" }}>
+        <div style={{ padding: '20px' }}>
           <h2>Coach Bar Only Demo</h2>
           <p>This shows just the Coach Bar without the tooltip interactions.</p>
           <div
             style={{
-              height: "400px",
-              backgroundColor: "#e5e7eb",
-              borderRadius: "8px",
-              padding: "20px",
+              height: '400px',
+              backgroundColor: '#e5e7eb',
+              borderRadius: '8px',
+              padding: '20px',
             }}
           >
             <p>Tutorial content would go here...</p>
@@ -528,4 +487,4 @@ export const CoachBarOnly: Story = {
       </div>
     </TutorialUIProvider>
   ),
-};
+}
diff --git a/apps/web/src/components/tutorial/TutorialUIContext.stories.tsx b/apps/web/src/components/tutorial/TutorialUIContext.stories.tsx
index 2471fd53..7e54e0ca 100644
--- a/apps/web/src/components/tutorial/TutorialUIContext.stories.tsx
+++ b/apps/web/src/components/tutorial/TutorialUIContext.stories.tsx
@@ -1,8 +1,8 @@
-import * as HoverCard from "@radix-ui/react-hover-card";
-import type { Meta, StoryObj } from "@storybook/react";
-import type React from "react";
-import { useState } from "react";
-import { TutorialUIProvider, useTutorialUI } from "./TutorialUIContext";
+import * as HoverCard from '@radix-ui/react-hover-card'
+import type { Meta, StoryObj } from '@storybook/react'
+import type React from 'react'
+import { useState } from 'react'
+import { TutorialUIProvider, useTutorialUI } from './TutorialUIContext'
 
 // Demo tooltip component that uses the focus gate
 function DemoTooltip({
@@ -10,50 +10,44 @@ function DemoTooltip({
   content,
   hintType,
 }: {
-  children: React.ReactNode;
-  content: string;
-  hintType: "term" | "bead";
+  children: React.ReactNode
+  content: string
+  hintType: 'term' | 'bead'
 }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const ui = useTutorialUI();
+  const [isOpen, setIsOpen] = useState(false)
+  const ui = useTutorialUI()
 
   const handleOpenChange = (open: boolean) => {
     if (open) {
-      const granted = ui.requestFocus(hintType);
+      const granted = ui.requestFocus(hintType)
       if (granted) {
-        setIsOpen(true);
+        setIsOpen(true)
       }
     } else {
-      ui.releaseFocus(hintType);
-      setIsOpen(false);
+      ui.releaseFocus(hintType)
+      setIsOpen(false)
     }
-  };
+  }
 
-  const isActive = ui.hintFocus === hintType;
-  const bgColor = hintType === "term" ? "#3b82f6" : "#10b981";
-  const activeBg = hintType === "term" ? "#1d4ed8" : "#047857";
+  const isActive = ui.hintFocus === hintType
+  const bgColor = hintType === 'term' ? '#3b82f6' : '#10b981'
+  const activeBg = hintType === 'term' ? '#1d4ed8' : '#047857'
 
   return (
-    <HoverCard.Root
-      open={isOpen}
-      onOpenChange={handleOpenChange}
-      openDelay={100}
-      closeDelay={200}
-    >
+    <HoverCard.Root open={isOpen} onOpenChange={handleOpenChange} openDelay={100} closeDelay={200}>
       <HoverCard.Trigger asChild>
         <button
           style={{
-            padding: "8px 16px",
-            margin: "4px",
+            padding: '8px 16px',
+            margin: '4px',
             backgroundColor: isActive ? activeBg : bgColor,
-            color: "white",
-            border: "none",
-            borderRadius: "6px",
-            cursor: "pointer",
-            fontWeight: isActive ? "bold" : "normal",
-            opacity:
-              ui.hintFocus === "none" || ui.hintFocus === hintType ? 1 : 0.5,
-            transition: "all 0.2s ease",
+            color: 'white',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: 'pointer',
+            fontWeight: isActive ? 'bold' : 'normal',
+            opacity: ui.hintFocus === 'none' || ui.hintFocus === hintType ? 1 : 0.5,
+            transition: 'all 0.2s ease',
           }}
         >
           {children}
@@ -63,28 +57,20 @@ function DemoTooltip({
       <HoverCard.Portal>
         <HoverCard.Content
           style={{
-            backgroundColor: "white",
-            border: "1px solid #e5e7eb",
-            borderRadius: "8px",
-            padding: "12px",
-            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
-            maxWidth: "300px",
+            backgroundColor: 'white',
+            border: '1px solid #e5e7eb',
+            borderRadius: '8px',
+            padding: '12px',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+            maxWidth: '300px',
             zIndex: 50,
           }}
           sideOffset={8}
         >
           <div>
-            <strong>
-              {hintType === "term" ? "📝 Term Tooltip" : "🟢 Bead Tooltip"}
-            </strong>
-            <p
-              style={{ margin: "8px 0 0", fontSize: "14px", color: "#6b7280" }}
-            >
-              {content}
-            </p>
-            <p
-              style={{ margin: "8px 0 0", fontSize: "12px", color: "#9ca3af" }}
-            >
+            <strong>{hintType === 'term' ? '📝 Term Tooltip' : '🟢 Bead Tooltip'}</strong>
+            <p style={{ margin: '8px 0 0', fontSize: '14px', color: '#6b7280' }}>{content}</p>
+            <p style={{ margin: '8px 0 0', fontSize: '12px', color: '#9ca3af' }}>
               Focus owner: <code>{ui.hintFocus}</code>
             </p>
           </div>
@@ -92,119 +78,94 @@ function DemoTooltip({
         </HoverCard.Content>
       </HoverCard.Portal>
     </HoverCard.Root>
-  );
+  )
 }
 
 function FocusStatus() {
-  const ui = useTutorialUI();
+  const ui = useTutorialUI()
 
   return (
     <div
       style={{
-        padding: "12px",
-        backgroundColor: "#f3f4f6",
-        borderRadius: "6px",
-        marginBottom: "20px",
-        fontFamily: "monospace",
-        fontSize: "14px",
+        padding: '12px',
+        backgroundColor: '#f3f4f6',
+        borderRadius: '6px',
+        marginBottom: '20px',
+        fontFamily: 'monospace',
+        fontSize: '14px',
       }}
     >
       <strong>Focus Status:</strong> <code>{ui.hintFocus}</code>
       <br />
-      <small style={{ color: "#6b7280" }}>
-        Only one tooltip type can have focus at a time
-      </small>
+      <small style={{ color: '#6b7280' }}>Only one tooltip type can have focus at a time</small>
     </div>
-  );
+  )
 }
 
 function TooltipGateDemo() {
   return (
-    <div style={{ padding: "20px" }}>
+    <div style={{ padding: '20px' }}>
       <h3>Single-Owner Tooltip Gate Demo</h3>
-      <p>
-        Try hovering over these buttons. Only one tooltip can be open at a time:
-      </p>
+      <p>Try hovering over these buttons. Only one tooltip can be open at a time:</p>
 
       <FocusStatus />
 
-      <div style={{ marginBottom: "30px" }}>
+      <div style={{ marginBottom: '30px' }}>
         <h4>Term Tooltips (Blue)</h4>
-        <DemoTooltip
-          hintType="term"
-          content="This explains what the mathematical term means."
-        >
+        <DemoTooltip hintType="term" content="This explains what the mathematical term means.">
           Hover: Term A
         </DemoTooltip>
-        <DemoTooltip
-          hintType="term"
-          content="This shows reasoning for this part of the equation."
-        >
+        <DemoTooltip hintType="term" content="This shows reasoning for this part of the equation.">
           Hover: Term B
         </DemoTooltip>
-        <DemoTooltip
-          hintType="term"
-          content="This demonstrates the calculation step."
-        >
+        <DemoTooltip hintType="term" content="This demonstrates the calculation step.">
           Hover: Term C
         </DemoTooltip>
       </div>
 
       <div>
         <h4>Bead Tooltips (Green)</h4>
-        <DemoTooltip
-          hintType="bead"
-          content="This shows which bead to move and how."
-        >
+        <DemoTooltip hintType="bead" content="This shows which bead to move and how.">
           Hover: Bead 1
         </DemoTooltip>
-        <DemoTooltip
-          hintType="bead"
-          content="This explains the physical movement required."
-        >
+        <DemoTooltip hintType="bead" content="This explains the physical movement required.">
           Hover: Bead 2
         </DemoTooltip>
-        <DemoTooltip
-          hintType="bead"
-          content="This guides the hand position for this action."
-        >
+        <DemoTooltip hintType="bead" content="This guides the hand position for this action.">
           Hover: Bead 3
         </DemoTooltip>
       </div>
 
       <div
         style={{
-          marginTop: "30px",
-          padding: "16px",
-          backgroundColor: "#fff3cd",
-          borderRadius: "6px",
-          border: "1px solid #ffeaa7",
+          marginTop: '30px',
+          padding: '16px',
+          backgroundColor: '#fff3cd',
+          borderRadius: '6px',
+          border: '1px solid #ffeaa7',
         }}
       >
         <h4>🧪 Test the Gate:</h4>
         <ol>
           <li>Hover over a blue "Term" button → tooltip opens</li>
           <li>
-            While keeping mouse on blue button, try hovering green "Bead" button
-            → green tooltip blocked
+            While keeping mouse on blue button, try hovering green "Bead" button → green tooltip
+            blocked
           </li>
           <li>Move mouse away from blue button → blue tooltip closes</li>
           <li>Now hover green "Bead" button → green tooltip opens</li>
-          <li>
-            Try hovering another green button → focus transfers between green
-            tooltips
-          </li>
+          <li>Try hovering another green button → focus transfers between green tooltips</li>
         </ol>
       </div>
     </div>
-  );
+  )
 }
 
 const meta: Meta<typeof TutorialUIProvider> = {
-  title: "Tutorial/TutorialUIContext",
+  title: 'Tutorial/TutorialUIContext',
   component: TutorialUIProvider,
   parameters: {
-    layout: "fullscreen",
+    layout: 'fullscreen',
     docs: {
       description: {
         component: `
@@ -225,10 +186,10 @@ The TutorialUIContext provides a single-owner tooltip gate system for tutorial i
       },
     },
   },
-};
+}
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 export const TooltipGate: Story = {
   render: () => (
@@ -236,26 +197,26 @@ export const TooltipGate: Story = {
       <TooltipGateDemo />
     </TutorialUIProvider>
   ),
-};
+}
 
 export const MultipleProviders: Story = {
   render: () => (
     <div
       style={{
-        display: "grid",
-        gridTemplateColumns: "1fr 1fr",
-        gap: "20px",
-        padding: "20px",
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '20px',
+        padding: '20px',
       }}
     >
       <div
         style={{
-          border: "2px solid #3b82f6",
-          borderRadius: "8px",
-          padding: "16px",
+          border: '2px solid #3b82f6',
+          borderRadius: '8px',
+          padding: '16px',
         }}
       >
-        <h3 style={{ color: "#3b82f6", marginTop: 0 }}>Tutorial A</h3>
+        <h3 style={{ color: '#3b82f6', marginTop: 0 }}>Tutorial A</h3>
         <TutorialUIProvider>
           <FocusStatus />
           <DemoTooltip hintType="term" content="Term tooltip in Tutorial A">
@@ -269,12 +230,12 @@ export const MultipleProviders: Story = {
 
       <div
         style={{
-          border: "2px solid #10b981",
-          borderRadius: "8px",
-          padding: "16px",
+          border: '2px solid #10b981',
+          borderRadius: '8px',
+          padding: '16px',
         }}
       >
-        <h3 style={{ color: "#10b981", marginTop: 0 }}>Tutorial B</h3>
+        <h3 style={{ color: '#10b981', marginTop: 0 }}>Tutorial B</h3>
         <TutorialUIProvider>
           <FocusStatus />
           <DemoTooltip hintType="term" content="Term tooltip in Tutorial B">
@@ -291,90 +252,87 @@ export const MultipleProviders: Story = {
     docs: {
       description: {
         story:
-          "Each TutorialUIProvider creates an independent tooltip gate. Tooltips in different tutorials can be open simultaneously.",
+          'Each TutorialUIProvider creates an independent tooltip gate. Tooltips in different tutorials can be open simultaneously.',
       },
     },
   },
-};
+}
 
 export const FocusDebugger: Story = {
   render: () => {
     function DebugPanel() {
-      const ui = useTutorialUI();
-      const [logs, setLogs] = useState<string[]>([]);
+      const ui = useTutorialUI()
+      const [logs, setLogs] = useState<string[]>([])
 
       // Mock requesting focus programmatically
-      const testRequest = (type: "term" | "bead") => {
-        const granted = ui.requestFocus(type);
-        const timestamp = new Date().toLocaleTimeString();
+      const testRequest = (type: 'term' | 'bead') => {
+        const granted = ui.requestFocus(type)
+        const timestamp = new Date().toLocaleTimeString()
         setLogs((prev) => [
           ...prev.slice(-10),
-          `${timestamp}: Request ${type} → ${granted ? "GRANTED" : "DENIED"}`,
-        ]);
-      };
+          `${timestamp}: Request ${type} → ${granted ? 'GRANTED' : 'DENIED'}`,
+        ])
+      }
 
-      const testRelease = (type: "term" | "bead") => {
-        ui.releaseFocus(type);
-        const timestamp = new Date().toLocaleTimeString();
-        setLogs((prev) => [
-          ...prev.slice(-10),
-          `${timestamp}: Released ${type}`,
-        ]);
-      };
+      const testRelease = (type: 'term' | 'bead') => {
+        ui.releaseFocus(type)
+        const timestamp = new Date().toLocaleTimeString()
+        setLogs((prev) => [...prev.slice(-10), `${timestamp}: Released ${type}`])
+      }
 
       return (
-        <div style={{ padding: "20px" }}>
+        <div style={{ padding: '20px' }}>
           <h3>Focus Debugger</h3>
 
           <FocusStatus />
 
-          <div style={{ marginBottom: "20px" }}>
+          <div style={{ marginBottom: '20px' }}>
             <h4>Manual Focus Control</h4>
-            <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
               <button
-                onClick={() => testRequest("term")}
+                onClick={() => testRequest('term')}
                 style={{
-                  padding: "6px 12px",
-                  backgroundColor: "#3b82f6",
-                  color: "white",
-                  border: "none",
-                  borderRadius: "4px",
+                  padding: '6px 12px',
+                  backgroundColor: '#3b82f6',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
                 }}
               >
                 Request Term Focus
               </button>
               <button
-                onClick={() => testRequest("bead")}
+                onClick={() => testRequest('bead')}
                 style={{
-                  padding: "6px 12px",
-                  backgroundColor: "#10b981",
-                  color: "white",
-                  border: "none",
-                  borderRadius: "4px",
+                  padding: '6px 12px',
+                  backgroundColor: '#10b981',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
                 }}
               >
                 Request Bead Focus
               </button>
               <button
-                onClick={() => testRelease("term")}
+                onClick={() => testRelease('term')}
                 style={{
-                  padding: "6px 12px",
-                  backgroundColor: "#6b7280",
-                  color: "white",
-                  border: "none",
-                  borderRadius: "4px",
+                  padding: '6px 12px',
+                  backgroundColor: '#6b7280',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
                 }}
               >
                 Release Term
               </button>
               <button
-                onClick={() => testRelease("bead")}
+                onClick={() => testRelease('bead')}
                 style={{
-                  padding: "6px 12px",
-                  backgroundColor: "#6b7280",
-                  color: "white",
-                  border: "none",
-                  borderRadius: "4px",
+                  padding: '6px 12px',
+                  backgroundColor: '#6b7280',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
                 }}
               >
                 Release Bead
@@ -382,7 +340,7 @@ export const FocusDebugger: Story = {
             </div>
           </div>
 
-          <div style={{ marginBottom: "20px" }}>
+          <div style={{ marginBottom: '20px' }}>
             <h4>Interactive Tooltips</h4>
             <DemoTooltip hintType="term" content="Debug term tooltip">
               Term Tooltip
@@ -396,39 +354,39 @@ export const FocusDebugger: Story = {
             <h4>Focus Event Log</h4>
             <div
               style={{
-                backgroundColor: "#1f2937",
-                color: "#f9fafb",
-                padding: "12px",
-                borderRadius: "6px",
-                fontFamily: "monospace",
-                fontSize: "12px",
-                height: "150px",
-                overflowY: "auto",
+                backgroundColor: '#1f2937',
+                color: '#f9fafb',
+                padding: '12px',
+                borderRadius: '6px',
+                fontFamily: 'monospace',
+                fontSize: '12px',
+                height: '150px',
+                overflowY: 'auto',
               }}
             >
               {logs.length === 0 ? (
-                <em style={{ color: "#9ca3af" }}>No events yet...</em>
+                <em style={{ color: '#9ca3af' }}>No events yet...</em>
               ) : (
                 logs.map((log, i) => <div key={i}>{log}</div>)
               )}
             </div>
           </div>
         </div>
-      );
+      )
     }
 
     return (
       <TutorialUIProvider>
         <DebugPanel />
       </TutorialUIProvider>
-    );
+    )
   },
   parameters: {
     docs: {
       description: {
         story:
-          "Debug panel for testing focus management programmatically. Use the buttons to manually request/release focus and observe the behavior.",
+          'Debug panel for testing focus management programmatically. Use the buttons to manually request/release focus and observe the behavior.',
       },
     },
   },
-};
+}
diff --git a/apps/web/src/components/tutorial/TutorialUIContext.tsx b/apps/web/src/components/tutorial/TutorialUIContext.tsx
index 5ae2c491..a19e4215 100644
--- a/apps/web/src/components/tutorial/TutorialUIContext.tsx
+++ b/apps/web/src/components/tutorial/TutorialUIContext.tsx
@@ -1,42 +1,40 @@
-"use client";
+'use client'
 
-import type React from "react";
-import { createContext, useContext, useMemo, useState } from "react";
-import type { PedagogicalSegment } from "./DecompositionWithReasons";
+import type React from 'react'
+import { createContext, useContext, useMemo, useState } from 'react'
+import type { PedagogicalSegment } from './DecompositionWithReasons'
 
-type HintFocus = "none" | "term" | "bead";
+type HintFocus = 'none' | 'term' | 'bead'
 
 interface TutorialUIState {
-  showCoachBar: boolean;
-  setShowCoachBar: (v: boolean) => void;
-  canHideCoachBar: boolean;
+  showCoachBar: boolean
+  setShowCoachBar: (v: boolean) => void
+  canHideCoachBar: boolean
 
   // Single-owner tooltip gate (tutorial-only)
-  hintFocus: HintFocus;
-  requestFocus: (who: HintFocus) => boolean; // returns true if granted
-  releaseFocus: (who: HintFocus) => void;
+  hintFocus: HintFocus
+  requestFocus: (who: HintFocus) => boolean // returns true if granted
+  releaseFocus: (who: HintFocus) => void
 
   // Currently active segment for Coach Bar
-  activeSegment: PedagogicalSegment | null;
-  setActiveSegment: (seg: PedagogicalSegment | null) => void;
+  activeSegment: PedagogicalSegment | null
+  setActiveSegment: (seg: PedagogicalSegment | null) => void
 }
 
-const TutorialUIContext = createContext<TutorialUIState | undefined>(undefined);
+const TutorialUIContext = createContext<TutorialUIState | undefined>(undefined)
 
 export function TutorialUIProvider({
   children,
   initialSegment = null,
   canHideCoachBar = true,
 }: {
-  children: React.ReactNode;
-  initialSegment?: PedagogicalSegment | null;
-  canHideCoachBar?: boolean;
+  children: React.ReactNode
+  initialSegment?: PedagogicalSegment | null
+  canHideCoachBar?: boolean
 }) {
-  const [showCoachBar, setShowCoachBar] = useState(true);
-  const [hintFocus, setHintFocus] = useState<HintFocus>("none");
-  const [activeSegment, setActiveSegment] = useState<PedagogicalSegment | null>(
-    initialSegment,
-  );
+  const [showCoachBar, setShowCoachBar] = useState(true)
+  const [hintFocus, setHintFocus] = useState<HintFocus>('none')
+  const [activeSegment, setActiveSegment] = useState<PedagogicalSegment | null>(initialSegment)
 
   const value: TutorialUIState = useMemo(
     () => ({
@@ -45,39 +43,31 @@ export function TutorialUIProvider({
       canHideCoachBar,
       hintFocus,
       requestFocus: (who: HintFocus) => {
-        if (hintFocus === "none" || hintFocus === who) {
-          setHintFocus(who);
-          return true;
+        if (hintFocus === 'none' || hintFocus === who) {
+          setHintFocus(who)
+          return true
         }
-        if (process.env.NODE_ENV !== "production") {
-          console.debug(
-            `[tutorial-ui] focus denied: ${who}, owned by ${hintFocus}`,
-          );
+        if (process.env.NODE_ENV !== 'production') {
+          console.debug(`[tutorial-ui] focus denied: ${who}, owned by ${hintFocus}`)
         }
-        return false;
+        return false
       },
       releaseFocus: (who: HintFocus) => {
-        if (hintFocus === who) setHintFocus("none");
+        if (hintFocus === who) setHintFocus('none')
       },
       activeSegment,
       setActiveSegment,
     }),
-    [showCoachBar, canHideCoachBar, hintFocus, activeSegment],
-  );
+    [showCoachBar, canHideCoachBar, hintFocus, activeSegment]
+  )
 
-  return (
-    <TutorialUIContext.Provider value={value}>
-      {children}
-    </TutorialUIContext.Provider>
-  );
+  return <TutorialUIContext.Provider value={value}>{children}</TutorialUIContext.Provider>
 }
 
 export function useTutorialUI(): TutorialUIState {
-  const ctx = useContext(TutorialUIContext);
+  const ctx = useContext(TutorialUIContext)
   if (!ctx) {
-    throw new Error(
-      "useTutorialUI must be used within <TutorialUIProvider> (tutorial routes)",
-    );
+    throw new Error('useTutorialUI must be used within <TutorialUIProvider> (tutorial routes)')
   }
-  return ctx;
+  return ctx
 }
diff --git a/apps/web/src/components/tutorial/__tests__/CelebrationTooltip.unit.test.ts b/apps/web/src/components/tutorial/__tests__/CelebrationTooltip.unit.test.ts
index 9696bc7e..dd7c98fb 100644
--- a/apps/web/src/components/tutorial/__tests__/CelebrationTooltip.unit.test.ts
+++ b/apps/web/src/components/tutorial/__tests__/CelebrationTooltip.unit.test.ts
@@ -1,170 +1,170 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from 'vitest'
 
 /**
  * Unit tests for celebration tooltip logic
  * These test the core business logic without rendering components
  */
 
-describe("Celebration Tooltip Logic", () => {
+describe('Celebration Tooltip Logic', () => {
   // Helper function that mimics the tooltip visibility logic from TutorialPlayer
   function shouldShowCelebrationTooltip(
     isStepCompleted: boolean,
     currentValue: number,
     targetValue: number,
-    hasStepInstructions: boolean,
+    hasStepInstructions: boolean
   ) {
-    const showCelebration = isStepCompleted && currentValue === targetValue;
-    const showInstructions = !showCelebration && hasStepInstructions;
+    const showCelebration = isStepCompleted && currentValue === targetValue
+    const showInstructions = !showCelebration && hasStepInstructions
     return {
       showCelebration,
       showInstructions,
       visible: showCelebration || showInstructions,
-    };
+    }
   }
 
-  describe("Celebration visibility logic", () => {
-    it("should show celebration when step is completed and at target value", () => {
+  describe('Celebration visibility logic', () => {
+    it('should show celebration when step is completed and at target value', () => {
       const result = shouldShowCelebrationTooltip(
         true, // isStepCompleted
         5, // currentValue
         5, // targetValue
-        false, // hasStepInstructions
-      );
+        false // hasStepInstructions
+      )
 
-      expect(result.showCelebration).toBe(true);
-      expect(result.showInstructions).toBe(false);
-      expect(result.visible).toBe(true);
-    });
+      expect(result.showCelebration).toBe(true)
+      expect(result.showInstructions).toBe(false)
+      expect(result.visible).toBe(true)
+    })
 
-    it("should not show celebration when step completed but not at target", () => {
+    it('should not show celebration when step completed but not at target', () => {
       const result = shouldShowCelebrationTooltip(
         true, // isStepCompleted
         6, // currentValue (moved away from target)
         5, // targetValue
-        true, // hasStepInstructions
-      );
+        true // hasStepInstructions
+      )
 
-      expect(result.showCelebration).toBe(false);
-      expect(result.showInstructions).toBe(true);
-      expect(result.visible).toBe(true);
-    });
+      expect(result.showCelebration).toBe(false)
+      expect(result.showInstructions).toBe(true)
+      expect(result.visible).toBe(true)
+    })
 
-    it("should not show celebration when not completed even if at target", () => {
+    it('should not show celebration when not completed even if at target', () => {
       const result = shouldShowCelebrationTooltip(
         false, // isStepCompleted
         5, // currentValue
         5, // targetValue
-        true, // hasStepInstructions
-      );
+        true // hasStepInstructions
+      )
 
-      expect(result.showCelebration).toBe(false);
-      expect(result.showInstructions).toBe(true);
-      expect(result.visible).toBe(true);
-    });
+      expect(result.showCelebration).toBe(false)
+      expect(result.showInstructions).toBe(true)
+      expect(result.visible).toBe(true)
+    })
 
-    it("should show instructions when not completed and has instructions", () => {
+    it('should show instructions when not completed and has instructions', () => {
       const result = shouldShowCelebrationTooltip(
         false, // isStepCompleted
         3, // currentValue
         5, // targetValue
-        true, // hasStepInstructions
-      );
+        true // hasStepInstructions
+      )
 
-      expect(result.showCelebration).toBe(false);
-      expect(result.showInstructions).toBe(true);
-      expect(result.visible).toBe(true);
-    });
+      expect(result.showCelebration).toBe(false)
+      expect(result.showInstructions).toBe(true)
+      expect(result.visible).toBe(true)
+    })
 
-    it("should not show anything when not completed and no instructions", () => {
+    it('should not show anything when not completed and no instructions', () => {
       const result = shouldShowCelebrationTooltip(
         false, // isStepCompleted
         3, // currentValue
         5, // targetValue
-        false, // hasStepInstructions
-      );
+        false // hasStepInstructions
+      )
 
-      expect(result.showCelebration).toBe(false);
-      expect(result.showInstructions).toBe(false);
-      expect(result.visible).toBe(false);
-    });
-  });
+      expect(result.showCelebration).toBe(false)
+      expect(result.showInstructions).toBe(false)
+      expect(result.visible).toBe(false)
+    })
+  })
 
-  describe("State transition scenarios", () => {
-    it("should transition from instruction to celebration when reaching target", () => {
+  describe('State transition scenarios', () => {
+    it('should transition from instruction to celebration when reaching target', () => {
       // Initially showing instructions
-      const initial = shouldShowCelebrationTooltip(false, 3, 5, true);
-      expect(initial.showInstructions).toBe(true);
-      expect(initial.showCelebration).toBe(false);
+      const initial = shouldShowCelebrationTooltip(false, 3, 5, true)
+      expect(initial.showInstructions).toBe(true)
+      expect(initial.showCelebration).toBe(false)
 
       // After completing and reaching target
-      const completed = shouldShowCelebrationTooltip(true, 5, 5, true);
-      expect(completed.showCelebration).toBe(true);
-      expect(completed.showInstructions).toBe(false);
-    });
+      const completed = shouldShowCelebrationTooltip(true, 5, 5, true)
+      expect(completed.showCelebration).toBe(true)
+      expect(completed.showInstructions).toBe(false)
+    })
 
-    it("should transition from celebration to instructions when moving away", () => {
+    it('should transition from celebration to instructions when moving away', () => {
       // Initially celebrating
-      const celebrating = shouldShowCelebrationTooltip(true, 5, 5, true);
-      expect(celebrating.showCelebration).toBe(true);
-      expect(celebrating.showInstructions).toBe(false);
+      const celebrating = shouldShowCelebrationTooltip(true, 5, 5, true)
+      expect(celebrating.showCelebration).toBe(true)
+      expect(celebrating.showInstructions).toBe(false)
 
       // After moving away from target
-      const movedAway = shouldShowCelebrationTooltip(true, 6, 5, true);
-      expect(movedAway.showCelebration).toBe(false);
-      expect(movedAway.showInstructions).toBe(true);
-    });
+      const movedAway = shouldShowCelebrationTooltip(true, 6, 5, true)
+      expect(movedAway.showCelebration).toBe(false)
+      expect(movedAway.showInstructions).toBe(true)
+    })
 
-    it("should return to celebration when returning to target value", () => {
+    it('should return to celebration when returning to target value', () => {
       // Start celebrating
-      const initial = shouldShowCelebrationTooltip(true, 5, 5, true);
-      expect(initial.showCelebration).toBe(true);
+      const initial = shouldShowCelebrationTooltip(true, 5, 5, true)
+      expect(initial.showCelebration).toBe(true)
 
       // Move away
-      const away = shouldShowCelebrationTooltip(true, 6, 5, true);
-      expect(away.showCelebration).toBe(false);
-      expect(away.showInstructions).toBe(true);
+      const away = shouldShowCelebrationTooltip(true, 6, 5, true)
+      expect(away.showCelebration).toBe(false)
+      expect(away.showInstructions).toBe(true)
 
       // Return to target
-      const returned = shouldShowCelebrationTooltip(true, 5, 5, true);
-      expect(returned.showCelebration).toBe(true);
-      expect(returned.showInstructions).toBe(false);
-    });
-  });
+      const returned = shouldShowCelebrationTooltip(true, 5, 5, true)
+      expect(returned.showCelebration).toBe(true)
+      expect(returned.showInstructions).toBe(false)
+    })
+  })
 
-  describe("Edge cases", () => {
-    it("should handle negative values correctly", () => {
-      const result = shouldShowCelebrationTooltip(true, -3, -3, false);
-      expect(result.showCelebration).toBe(true);
-    });
+  describe('Edge cases', () => {
+    it('should handle negative values correctly', () => {
+      const result = shouldShowCelebrationTooltip(true, -3, -3, false)
+      expect(result.showCelebration).toBe(true)
+    })
 
-    it("should handle zero values correctly", () => {
-      const result = shouldShowCelebrationTooltip(true, 0, 0, false);
-      expect(result.showCelebration).toBe(true);
-    });
+    it('should handle zero values correctly', () => {
+      const result = shouldShowCelebrationTooltip(true, 0, 0, false)
+      expect(result.showCelebration).toBe(true)
+    })
 
-    it("should handle large values correctly", () => {
-      const result = shouldShowCelebrationTooltip(true, 99999, 99999, false);
-      expect(result.showCelebration).toBe(true);
-    });
+    it('should handle large values correctly', () => {
+      const result = shouldShowCelebrationTooltip(true, 99999, 99999, false)
+      expect(result.showCelebration).toBe(true)
+    })
 
-    it("should prioritize celebration over instructions", () => {
+    it('should prioritize celebration over instructions', () => {
       // When both conditions could be true, celebration takes priority
-      const result = shouldShowCelebrationTooltip(true, 5, 5, true);
-      expect(result.showCelebration).toBe(true);
-      expect(result.showInstructions).toBe(false);
-    });
-  });
-});
+      const result = shouldShowCelebrationTooltip(true, 5, 5, true)
+      expect(result.showCelebration).toBe(true)
+      expect(result.showInstructions).toBe(false)
+    })
+  })
+})
 
 /**
  * Tests for last moved bead tracking logic
  */
-describe("Last Moved Bead Tracking", () => {
+describe('Last Moved Bead Tracking', () => {
   interface StepBeadHighlight {
-    placeValue: number;
-    beadType: "earth" | "heaven";
-    position: number;
-    direction: string;
+    placeValue: number
+    beadType: 'earth' | 'heaven'
+    position: number
+    direction: string
   }
 
   // Helper function that mimics the bead selection logic
@@ -172,115 +172,110 @@ describe("Last Moved Bead Tracking", () => {
     showCelebration: boolean,
     showInstructions: boolean,
     currentStepBeads: StepBeadHighlight[] | null,
-    lastMovedBead: StepBeadHighlight | null,
+    lastMovedBead: StepBeadHighlight | null
   ): StepBeadHighlight | null {
     if (showCelebration) {
       // For celebration, use last moved bead or fallback
       if (lastMovedBead) {
-        return lastMovedBead;
+        return lastMovedBead
       } else {
         // Fallback to ones place heaven bead
         return {
           placeValue: 0,
-          beadType: "heaven",
+          beadType: 'heaven',
           position: 0,
-          direction: "none",
-        };
+          direction: 'none',
+        }
       }
     } else if (showInstructions && currentStepBeads?.length) {
       // For instructions, use first bead with arrows
-      return currentStepBeads.find((bead) => bead.direction !== "none") || null;
+      return currentStepBeads.find((bead) => bead.direction !== 'none') || null
     }
 
-    return null;
+    return null
   }
 
-  describe("Bead selection for celebration", () => {
-    it("should use last moved bead when available", () => {
+  describe('Bead selection for celebration', () => {
+    it('should use last moved bead when available', () => {
       const lastMoved: StepBeadHighlight = {
         placeValue: 2,
-        beadType: "earth",
+        beadType: 'earth',
         position: 1,
-        direction: "down",
-      };
+        direction: 'down',
+      }
 
-      const result = selectTooltipBead(true, false, null, lastMoved);
-      expect(result).toEqual(lastMoved);
-    });
+      const result = selectTooltipBead(true, false, null, lastMoved)
+      expect(result).toEqual(lastMoved)
+    })
 
-    it("should use fallback when no last moved bead", () => {
-      const result = selectTooltipBead(true, false, null, null);
+    it('should use fallback when no last moved bead', () => {
+      const result = selectTooltipBead(true, false, null, null)
 
       expect(result).toEqual({
         placeValue: 0,
-        beadType: "heaven",
+        beadType: 'heaven',
         position: 0,
-        direction: "none",
-      });
-    });
+        direction: 'none',
+      })
+    })
 
-    it("should use instruction bead when showing instructions", () => {
+    it('should use instruction bead when showing instructions', () => {
       const instructionBeads: StepBeadHighlight[] = [
         {
           placeValue: 1,
-          beadType: "earth",
+          beadType: 'earth',
           position: 0,
-          direction: "up",
+          direction: 'up',
         },
-      ];
+      ]
 
-      const result = selectTooltipBead(false, true, instructionBeads, null);
-      expect(result).toEqual(instructionBeads[0]);
-    });
+      const result = selectTooltipBead(false, true, instructionBeads, null)
+      expect(result).toEqual(instructionBeads[0])
+    })
 
-    it("should return null when no conditions met", () => {
-      const result = selectTooltipBead(false, false, null, null);
-      expect(result).toBeNull();
-    });
-  });
+    it('should return null when no conditions met', () => {
+      const result = selectTooltipBead(false, false, null, null)
+      expect(result).toBeNull()
+    })
+  })
 
-  describe("Bead priority logic", () => {
-    it("should prefer last moved bead over instruction bead for celebration", () => {
+  describe('Bead priority logic', () => {
+    it('should prefer last moved bead over instruction bead for celebration', () => {
       const lastMoved: StepBeadHighlight = {
         placeValue: 3,
-        beadType: "heaven",
+        beadType: 'heaven',
         position: 0,
-        direction: "up",
-      };
+        direction: 'up',
+      }
 
       const instructionBeads: StepBeadHighlight[] = [
         {
           placeValue: 1,
-          beadType: "earth",
+          beadType: 'earth',
           position: 0,
-          direction: "down",
+          direction: 'down',
         },
-      ];
+      ]
 
-      const result = selectTooltipBead(
-        true,
-        false,
-        instructionBeads,
-        lastMoved,
-      );
-      expect(result).toEqual(lastMoved);
-    });
+      const result = selectTooltipBead(true, false, instructionBeads, lastMoved)
+      expect(result).toEqual(lastMoved)
+    })
 
-    it("should use fallback only when no last moved bead available", () => {
+    it('should use fallback only when no last moved bead available', () => {
       const instructionBeads: StepBeadHighlight[] = [
         {
           placeValue: 1,
-          beadType: "earth",
+          beadType: 'earth',
           position: 0,
-          direction: "down",
+          direction: 'down',
         },
-      ];
+      ]
 
-      const result = selectTooltipBead(true, false, instructionBeads, null);
+      const result = selectTooltipBead(true, false, instructionBeads, null)
 
       // Should use fallback, not instruction bead
-      expect(result?.placeValue).toBe(0);
-      expect(result?.beadType).toBe("heaven");
-    });
-  });
-});
+      expect(result?.placeValue).toBe(0)
+      expect(result?.beadType).toBe('heaven')
+    })
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/DecompositionWithReasons.provenance.test.tsx b/apps/web/src/components/tutorial/__tests__/DecompositionWithReasons.provenance.test.tsx
index 14cd610a..471776d3 100644
--- a/apps/web/src/components/tutorial/__tests__/DecompositionWithReasons.provenance.test.tsx
+++ b/apps/web/src/components/tutorial/__tests__/DecompositionWithReasons.provenance.test.tsx
@@ -1,21 +1,15 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import type React from "react";
-import { describe, expect, it, vi } from "vitest";
-import { generateUnifiedInstructionSequence } from "../../../utils/unifiedStepGenerator";
-import { DecompositionWithReasons } from "../DecompositionWithReasons";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import type React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { generateUnifiedInstructionSequence } from '../../../utils/unifiedStepGenerator'
+import { DecompositionWithReasons } from '../DecompositionWithReasons'
 
 // Mock Radix Tooltip so it renders content immediately
-vi.mock("@radix-ui/react-tooltip", () => ({
+vi.mock('@radix-ui/react-tooltip', () => ({
   Provider: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="tooltip-provider">{children}</div>
   ),
-  Root: ({
-    children,
-    open = true,
-  }: {
-    children: React.ReactNode;
-    open?: boolean;
-  }) => (
+  Root: ({ children, open = true }: { children: React.ReactNode; open?: boolean }) => (
     <div data-testid="tooltip-root" data-open={open}>
       {children}
     </div>
@@ -26,19 +20,13 @@ vi.mock("@radix-ui/react-tooltip", () => ({
   Portal: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="tooltip-portal">{children}</div>
   ),
-  Content: ({
-    children,
-    ...props
-  }: {
-    children: React.ReactNode;
-    [key: string]: any;
-  }) => (
+  Content: ({ children, ...props }: { children: React.ReactNode; [key: string]: any }) => (
     <div data-testid="tooltip-content" {...props}>
       {children}
     </div>
   ),
   Arrow: (props: any) => <div data-testid="tooltip-arrow" {...props} />,
-}));
+}))
 
 // Mock the tutorial context
 const mockTutorialContext = {
@@ -47,30 +35,30 @@ const mockTutorialContext = {
     // other state properties as needed
   },
   // other context methods
-};
+}
 
-vi.mock("../TutorialContext", () => ({
+vi.mock('../TutorialContext', () => ({
   useTutorialContext: () => mockTutorialContext,
-}));
+}))
 
-describe("DecompositionWithReasons Provenance Test", () => {
-  it("should render provenance information in tooltip for 3475 + 25 = 3500 example", async () => {
+describe('DecompositionWithReasons Provenance Test', () => {
+  it('should render provenance information in tooltip for 3475 + 25 = 3500 example', async () => {
     // Generate the actual data for 3475 + 25 = 3500
-    const result = generateUnifiedInstructionSequence(3475, 3500);
+    const result = generateUnifiedInstructionSequence(3475, 3500)
 
-    console.log("Generated result:", {
+    console.log('Generated result:', {
       fullDecomposition: result.fullDecomposition,
       stepsCount: result.steps.length,
       segmentsCount: result.segments.length,
-    });
+    })
 
-    console.log("Steps with provenance:");
+    console.log('Steps with provenance:')
     result.steps.forEach((step, i) => {
       console.log(
         `Step ${i}: ${step.mathematicalTerm}`,
-        step.provenance ? "HAS PROVENANCE" : "NO PROVENANCE",
-      );
-    });
+        step.provenance ? 'HAS PROVENANCE' : 'NO PROVENANCE'
+      )
+    })
 
     // Render the DecompositionWithReasons component
     render(
@@ -79,151 +67,140 @@ describe("DecompositionWithReasons Provenance Test", () => {
         termPositions={result.steps.map((step) => step.termPosition)}
         segments={result.segments}
         steps={result.steps}
-      />,
-    );
+      />
+    )
 
     // The decomposition should be rendered
     expect(
-      screen.getByText(/3475 \+ 25 = 3475 \+ 20 \+ \(100 - 90 - 5\) = 3500/),
-    ).toBeInTheDocument();
+      screen.getByText(/3475 \+ 25 = 3475 \+ 20 \+ \(100 - 90 - 5\) = 3500/)
+    ).toBeInTheDocument()
 
     // Find the "20" term
-    const twentyElement = screen.getByText("20");
-    expect(twentyElement).toBeInTheDocument();
+    const twentyElement = screen.getByText('20')
+    expect(twentyElement).toBeInTheDocument()
 
     // Simulate mouse enter to trigger tooltip
-    fireEvent.mouseEnter(twentyElement);
+    fireEvent.mouseEnter(twentyElement)
 
     // Wait for tooltip content to appear
     await waitFor(() => {
-      const tooltipContent = screen.getByTestId("tooltip-content");
-      expect(tooltipContent).toBeInTheDocument();
-    });
+      const tooltipContent = screen.getByTestId('tooltip-content')
+      expect(tooltipContent).toBeInTheDocument()
+    })
 
     // Check if the enhanced provenance title appears
     await waitFor(() => {
-      const provenanceTitle = screen.queryByText(
-        "Add the tens digit — 2 tens (20)",
-      );
+      const provenanceTitle = screen.queryByText('Add the tens digit — 2 tens (20)')
       if (provenanceTitle) {
-        expect(provenanceTitle).toBeInTheDocument();
-        console.log("✅ Found provenance title!");
+        expect(provenanceTitle).toBeInTheDocument()
+        console.log('✅ Found provenance title!')
       } else {
-        console.log("❌ Provenance title not found");
+        console.log('❌ Provenance title not found')
         // Log what we actually got
-        const tooltipContent = screen.getByTestId("tooltip-content");
-        console.log("Actual tooltip content:", tooltipContent.textContent);
+        const tooltipContent = screen.getByTestId('tooltip-content')
+        console.log('Actual tooltip content:', tooltipContent.textContent)
       }
-    });
+    })
 
     // Check for the provenance subtitle
-    const provenanceSubtitle = screen.queryByText("From addend 25");
+    const provenanceSubtitle = screen.queryByText('From addend 25')
     if (provenanceSubtitle) {
-      expect(provenanceSubtitle).toBeInTheDocument();
-      console.log("✅ Found provenance subtitle!");
+      expect(provenanceSubtitle).toBeInTheDocument()
+      console.log('✅ Found provenance subtitle!')
     } else {
-      console.log("❌ Provenance subtitle not found");
+      console.log('❌ Provenance subtitle not found')
     }
 
     // Check for the enhanced explanation
-    const provenanceExplanation = screen.queryByText(
-      /We're adding the tens digit of 25 → 2 tens/,
-    );
+    const provenanceExplanation = screen.queryByText(/We're adding the tens digit of 25 → 2 tens/)
     if (provenanceExplanation) {
-      expect(provenanceExplanation).toBeInTheDocument();
-      console.log("✅ Found provenance explanation!");
+      expect(provenanceExplanation).toBeInTheDocument()
+      console.log('✅ Found provenance explanation!')
     } else {
-      console.log("❌ Provenance explanation not found");
+      console.log('❌ Provenance explanation not found')
     }
-  });
+  })
 
-  it("should pass provenance data from steps to ReasonTooltip", () => {
+  it('should pass provenance data from steps to ReasonTooltip', () => {
     // Generate test data
-    const result = generateUnifiedInstructionSequence(3475, 3500);
-    const twentyStep = result.steps.find(
-      (step) => step.mathematicalTerm === "20",
-    );
+    const result = generateUnifiedInstructionSequence(3475, 3500)
+    const twentyStep = result.steps.find((step) => step.mathematicalTerm === '20')
 
     // Verify the step has provenance
-    expect(twentyStep).toBeDefined();
-    expect(twentyStep?.provenance).toBeDefined();
+    expect(twentyStep).toBeDefined()
+    expect(twentyStep?.provenance).toBeDefined()
 
     if (twentyStep?.provenance) {
-      console.log("✅ Step has provenance data:", twentyStep.provenance);
+      console.log('✅ Step has provenance data:', twentyStep.provenance)
 
       // Verify the provenance data is correct
-      expect(twentyStep.provenance.rhs).toBe(25);
-      expect(twentyStep.provenance.rhsDigit).toBe(2);
-      expect(twentyStep.provenance.rhsPlaceName).toBe("tens");
-      expect(twentyStep.provenance.rhsValue).toBe(20);
+      expect(twentyStep.provenance.rhs).toBe(25)
+      expect(twentyStep.provenance.rhsDigit).toBe(2)
+      expect(twentyStep.provenance.rhsPlaceName).toBe('tens')
+      expect(twentyStep.provenance.rhsValue).toBe(20)
 
-      console.log("✅ Provenance data is correct!");
+      console.log('✅ Provenance data is correct!')
     } else {
-      console.log("❌ Step does not have provenance data");
+      console.log('❌ Step does not have provenance data')
     }
 
     // Find the corresponding segment
     const tensSegment = result.segments.find((seg) =>
-      seg.stepIndices.includes(twentyStep!.stepIndex),
-    );
-    expect(tensSegment).toBeDefined();
+      seg.stepIndices.includes(twentyStep!.stepIndex)
+    )
+    expect(tensSegment).toBeDefined()
 
     if (tensSegment) {
-      console.log("✅ Found corresponding segment:", {
+      console.log('✅ Found corresponding segment:', {
         id: tensSegment.id,
         rule: tensSegment.plan[0]?.rule,
         stepIndices: tensSegment.stepIndices,
-      });
+      })
     }
-  });
+  })
 
-  it("should debug the actual data flow", () => {
-    const result = generateUnifiedInstructionSequence(3475, 3500);
+  it('should debug the actual data flow', () => {
+    const result = generateUnifiedInstructionSequence(3475, 3500)
 
-    console.log("\n=== DEBUGGING DATA FLOW ===");
-    console.log("Full decomposition:", result.fullDecomposition);
+    console.log('\n=== DEBUGGING DATA FLOW ===')
+    console.log('Full decomposition:', result.fullDecomposition)
 
-    console.log("\nSteps:");
+    console.log('\nSteps:')
     result.steps.forEach((step, i) => {
       console.log(
         `  ${i}: ${step.mathematicalTerm} - segmentId: ${step.segmentId} - provenance:`,
-        !!step.provenance,
-      );
+        !!step.provenance
+      )
       if (step.provenance) {
         console.log(
-          `    -> rhs: ${step.provenance.rhs}, digit: ${step.provenance.rhsDigit}, place: ${step.provenance.rhsPlaceName}`,
-        );
+          `    -> rhs: ${step.provenance.rhs}, digit: ${step.provenance.rhsDigit}, place: ${step.provenance.rhsPlaceName}`
+        )
       }
-    });
+    })
 
-    console.log("\nSegments:");
+    console.log('\nSegments:')
     result.segments.forEach((segment, i) => {
       console.log(
-        `  ${i}: ${segment.id} - place: ${segment.place}, digit: ${segment.digit}, rule: ${segment.plan[0]?.rule}`,
-      );
-      console.log(`    -> stepIndices: [${segment.stepIndices.join(", ")}]`);
-      console.log(`    -> readable title: "${segment.readable?.title}"`);
-    });
+        `  ${i}: ${segment.id} - place: ${segment.place}, digit: ${segment.digit}, rule: ${segment.plan[0]?.rule}`
+      )
+      console.log(`    -> stepIndices: [${segment.stepIndices.join(', ')}]`)
+      console.log(`    -> readable title: "${segment.readable?.title}"`)
+    })
 
     // The key insight: when DecompositionWithReasons renders a SegmentGroup,
     // it should pass the provenance from the first step in that segment to ReasonTooltip
-    const twentyStep = result.steps.find(
-      (step) => step.mathematicalTerm === "20",
-    );
+    const twentyStep = result.steps.find((step) => step.mathematicalTerm === '20')
     const tensSegment = result.segments.find((seg) =>
-      seg.stepIndices.includes(twentyStep!.stepIndex),
-    );
+      seg.stepIndices.includes(twentyStep!.stepIndex)
+    )
 
     if (twentyStep && tensSegment) {
-      console.log("\n=== TOOLTIP DATA FLOW ===");
-      console.log("Step provenance:", twentyStep.provenance);
-      console.log("Segment readable:", tensSegment.readable);
-      console.log(
-        "Expected to show enhanced content:",
-        !!twentyStep.provenance,
-      );
+      console.log('\n=== TOOLTIP DATA FLOW ===')
+      console.log('Step provenance:', twentyStep.provenance)
+      console.log('Segment readable:', tensSegment.readable)
+      console.log('Expected to show enhanced content:', !!twentyStep.provenance)
     }
 
-    expect(true).toBe(true); // This test just logs information
-  });
-});
+    expect(true).toBe(true) // This test just logs information
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/ReasonTooltip.provenance.test.tsx b/apps/web/src/components/tutorial/__tests__/ReasonTooltip.provenance.test.tsx
index 17f0d70f..1da6c31d 100644
--- a/apps/web/src/components/tutorial/__tests__/ReasonTooltip.provenance.test.tsx
+++ b/apps/web/src/components/tutorial/__tests__/ReasonTooltip.provenance.test.tsx
@@ -1,93 +1,88 @@
-import { render, screen } from "@testing-library/react";
-import type React from "react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import type {
-  PedagogicalSegment,
-  TermProvenance,
-} from "../../../utils/unifiedStepGenerator";
-import { ReasonTooltip } from "../ReasonTooltip";
+import { render, screen } from '@testing-library/react'
+import type React from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { PedagogicalSegment, TermProvenance } from '../../../utils/unifiedStepGenerator'
+import { ReasonTooltip } from '../ReasonTooltip'
 
 // Mock the Radix Tooltip to make testing easier
 const MockTooltipProvider = ({ children }: { children: React.ReactNode }) => (
   <div data-testid="tooltip-provider">{children}</div>
-);
+)
 
 const MockTooltipRoot = ({
   children,
   open = true,
 }: {
-  children: React.ReactNode;
-  open?: boolean;
+  children: React.ReactNode
+  open?: boolean
 }) => (
   <div data-testid="tooltip-root" data-open={open}>
     {children}
   </div>
-);
+)
 
 const MockTooltipTrigger = ({
   children,
   asChild,
 }: {
-  children: React.ReactNode;
-  asChild?: boolean;
-}) => <div data-testid="tooltip-trigger">{children}</div>;
+  children: React.ReactNode
+  asChild?: boolean
+}) => <div data-testid="tooltip-trigger">{children}</div>
 
 const MockTooltipPortal = ({ children }: { children: React.ReactNode }) => (
   <div data-testid="tooltip-portal">{children}</div>
-);
+)
 
 const MockTooltipContent = ({
   children,
   ...props
 }: {
-  children: React.ReactNode;
-  [key: string]: any;
+  children: React.ReactNode
+  [key: string]: any
 }) => (
   <div data-testid="tooltip-content" {...props}>
     {children}
   </div>
-);
+)
 
-const MockTooltipArrow = (props: any) => (
-  <div data-testid="tooltip-arrow" {...props} />
-);
+const MockTooltipArrow = (props: any) => <div data-testid="tooltip-arrow" {...props} />
 
 // Mock Radix UI components
-vi.mock("@radix-ui/react-tooltip", () => ({
+vi.mock('@radix-ui/react-tooltip', () => ({
   Provider: MockTooltipProvider,
   Root: MockTooltipRoot,
   Trigger: MockTooltipTrigger,
   Portal: MockTooltipPortal,
   Content: MockTooltipContent,
   Arrow: MockTooltipArrow,
-}));
+}))
 
-describe("ReasonTooltip with Provenance", () => {
+describe('ReasonTooltip with Provenance', () => {
   const mockProvenance: TermProvenance = {
     rhs: 25,
     rhsDigit: 2,
     rhsPlace: 1,
-    rhsPlaceName: "tens",
+    rhsPlaceName: 'tens',
     rhsDigitIndex: 0,
     rhsValue: 20,
-  };
+  }
 
   const mockSegment: PedagogicalSegment = {
-    id: "place-1-digit-2",
+    id: 'place-1-digit-2',
     place: 1,
     digit: 2,
     a: 7,
     L: 2,
     U: 0,
-    goal: "Increase tens by 2 without carry",
+    goal: 'Increase tens by 2 without carry',
     plan: [
       {
-        rule: "Direct",
-        conditions: ["a+d=7+2=9 ≤ 9"],
-        explanation: ["Fits inside this place; add earth beads directly."],
+        rule: 'Direct',
+        conditions: ['a+d=7+2=9 ≤ 9'],
+        explanation: ['Fits inside this place; add earth beads directly.'],
       },
     ],
-    expression: "20",
+    expression: '20',
     stepIndices: [0],
     termIndices: [0],
     termRange: { startIndex: 10, endIndex: 12 },
@@ -96,16 +91,16 @@ describe("ReasonTooltip with Provenance", () => {
     startState: {},
     endState: {},
     readable: {
-      title: "Direct Add — tens",
-      subtitle: "Simple bead movement",
+      title: 'Direct Add — tens',
+      subtitle: 'Simple bead movement',
       chips: [
-        { label: "This rod shows", value: "7" },
-        { label: "We're adding", value: "2" },
+        { label: 'This rod shows', value: '7' },
+        { label: "We're adding", value: '2' },
       ],
-      why: ["We can add beads directly to this rod."],
-      stepsFriendly: ["Add 2 earth beads in tens column"],
+      why: ['We can add beads directly to this rod.'],
+      stepsFriendly: ['Add 2 earth beads in tens column'],
     },
-  };
+  }
 
   const defaultProps = {
     termIndex: 0,
@@ -113,95 +108,87 @@ describe("ReasonTooltip with Provenance", () => {
     open: true,
     onOpenChange: vi.fn(),
     provenance: mockProvenance,
-  };
+  }
 
   beforeEach(() => {
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
-  it("should display enhanced title with provenance", () => {
+  it('should display enhanced title with provenance', () => {
     render(
       <ReasonTooltip {...defaultProps}>
         <span>20</span>
-      </ReasonTooltip>,
-    );
+      </ReasonTooltip>
+    )
 
     // Should show the enhanced title format
-    expect(
-      screen.getByText("Add the tens digit — 2 tens (20)"),
-    ).toBeInTheDocument();
-  });
+    expect(screen.getByText('Add the tens digit — 2 tens (20)')).toBeInTheDocument()
+  })
 
-  it("should display enhanced subtitle with provenance", () => {
+  it('should display enhanced subtitle with provenance', () => {
     render(
       <ReasonTooltip {...defaultProps}>
         <span>20</span>
-      </ReasonTooltip>,
-    );
+      </ReasonTooltip>
+    )
 
     // Should show the enhanced subtitle
-    expect(screen.getByText("From addend 25")).toBeInTheDocument();
-  });
+    expect(screen.getByText('From addend 25')).toBeInTheDocument()
+  })
 
-  it("should display enhanced breadcrumb chips", () => {
+  it('should display enhanced breadcrumb chips', () => {
     render(
       <ReasonTooltip {...defaultProps}>
         <span>20</span>
-      </ReasonTooltip>,
-    );
+      </ReasonTooltip>
+    )
 
     // Should show enhanced chips
-    expect(
-      screen.getByText(/Digit we're using: 2 \(tens\)/),
-    ).toBeInTheDocument();
-    expect(screen.getByText(/This rod shows: 7/)).toBeInTheDocument();
-    expect(
-      screen.getByText(/So we add here: \+2 tens → 20/),
-    ).toBeInTheDocument();
-  });
+    expect(screen.getByText(/Digit we're using: 2 \(tens\)/)).toBeInTheDocument()
+    expect(screen.getByText(/This rod shows: 7/)).toBeInTheDocument()
+    expect(screen.getByText(/So we add here: \+2 tens → 20/)).toBeInTheDocument()
+  })
 
-  it("should display provenance-based explanation for Direct rule", () => {
+  it('should display provenance-based explanation for Direct rule', () => {
     render(
       <ReasonTooltip {...defaultProps}>
         <span>20</span>
-      </ReasonTooltip>,
-    );
+      </ReasonTooltip>
+    )
 
     // Should show the enhanced explanation
-    expect(
-      screen.getByText(/We're adding the tens digit of 25 → 2 tens/),
-    ).toBeInTheDocument();
-  });
+    expect(screen.getByText(/We're adding the tens digit of 25 → 2 tens/)).toBeInTheDocument()
+  })
 
-  it("should handle complement operations with group ID", () => {
+  it('should handle complement operations with group ID', () => {
     const complementProvenance: TermProvenance = {
       rhs: 25,
       rhsDigit: 5,
       rhsPlace: 0,
-      rhsPlaceName: "ones",
+      rhsPlaceName: 'ones',
       rhsDigitIndex: 1,
       rhsValue: 5,
-      groupId: "10comp-0-5",
-    };
+      groupId: '10comp-0-5',
+    }
 
     const complementSegment: PedagogicalSegment = {
       ...mockSegment,
-      id: "place-0-digit-5",
+      id: 'place-0-digit-5',
       place: 0,
       digit: 5,
       plan: [
         {
-          rule: "TenComplement",
-          conditions: ["a+d=5+5=10 ≥ 10"],
-          explanation: ["Need a carry to the next higher place."],
+          rule: 'TenComplement',
+          conditions: ['a+d=5+5=10 ≥ 10'],
+          explanation: ['Need a carry to the next higher place.'],
         },
       ],
       readable: {
         ...mockSegment.readable,
-        title: "Make 10 — ones",
-        subtitle: "Using pairs that make 10",
+        title: 'Make 10 — ones',
+        subtitle: 'Using pairs that make 10',
       },
-    };
+    }
 
     render(
       <ReasonTooltip
@@ -210,112 +197,97 @@ describe("ReasonTooltip with Provenance", () => {
         provenance={complementProvenance}
       >
         <span>100</span>
-      </ReasonTooltip>,
-    );
+      </ReasonTooltip>
+    )
 
     // Should show the enhanced title for complement operations
-    expect(
-      screen.getByText("Add the ones digit — 5 ones (5)"),
-    ).toBeInTheDocument();
-    expect(screen.getByText("From addend 25")).toBeInTheDocument();
-  });
+    expect(screen.getByText('Add the ones digit — 5 ones (5)')).toBeInTheDocument()
+    expect(screen.getByText('From addend 25')).toBeInTheDocument()
+  })
 
-  it("should fallback to readable content when provenance is not available", () => {
+  it('should fallback to readable content when provenance is not available', () => {
     render(
       <ReasonTooltip {...defaultProps} provenance={undefined}>
         <span>20</span>
-      </ReasonTooltip>,
-    );
+      </ReasonTooltip>
+    )
 
     // Should show the fallback title and content
-    expect(screen.getByText("Direct Add — tens")).toBeInTheDocument();
-    expect(screen.getByText("Simple bead movement")).toBeInTheDocument();
-    expect(
-      screen.getByText(/We can add beads directly to this rod/),
-    ).toBeInTheDocument();
-  });
+    expect(screen.getByText('Direct Add — tens')).toBeInTheDocument()
+    expect(screen.getByText('Simple bead movement')).toBeInTheDocument()
+    expect(screen.getByText(/We can add beads directly to this rod/)).toBeInTheDocument()
+  })
 
-  it("should not render enhanced content when no rule is provided", () => {
+  it('should not render enhanced content when no rule is provided', () => {
     const segmentWithoutRule = {
       ...mockSegment,
       plan: [],
-    };
+    }
 
     render(
       <ReasonTooltip {...defaultProps} segment={segmentWithoutRule}>
         <span>20</span>
-      </ReasonTooltip>,
-    );
+      </ReasonTooltip>
+    )
 
     // Should just render the children without any tooltip
-    expect(screen.getByText("20")).toBeInTheDocument();
-    expect(screen.queryByTestId("tooltip-content")).not.toBeInTheDocument();
-  });
+    expect(screen.getByText('20')).toBeInTheDocument()
+    expect(screen.queryByTestId('tooltip-content')).not.toBeInTheDocument()
+  })
 
-  it("should log debug information when provenance is provided", () => {
-    const consoleSpy = vi.spyOn(console, "log").mockImplementation(() => {});
+  it('should log debug information when provenance is provided', () => {
+    const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
 
     render(
       <ReasonTooltip {...defaultProps}>
         <span>20</span>
-      </ReasonTooltip>,
-    );
+      </ReasonTooltip>
+    )
 
     // Should log debug information
+    expect(consoleSpy).toHaveBeenCalledWith('ReasonTooltip - provenance data:', mockProvenance)
+    expect(consoleSpy).toHaveBeenCalledWith('ReasonTooltip - rule:', 'Direct')
     expect(consoleSpy).toHaveBeenCalledWith(
-      "ReasonTooltip - provenance data:",
-      mockProvenance,
-    );
-    expect(consoleSpy).toHaveBeenCalledWith("ReasonTooltip - rule:", "Direct");
-    expect(consoleSpy).toHaveBeenCalledWith(
-      "ReasonTooltip - enhancedContent:",
+      'ReasonTooltip - enhancedContent:',
       expect.objectContaining({
-        title: "Add the tens digit — 2 tens (20)",
-        subtitle: "From addend 25",
+        title: 'Add the tens digit — 2 tens (20)',
+        subtitle: 'From addend 25',
         chips: expect.arrayContaining([
           expect.objectContaining({
             label: "Digit we're using",
-            value: "2 (tens)",
+            value: '2 (tens)',
           }),
         ]),
-      }),
-    );
+      })
+    )
 
-    consoleSpy.mockRestore();
-  });
+    consoleSpy.mockRestore()
+  })
 
-  it("should handle the exact 3475 + 25 = 3500 example", () => {
+  it('should handle the exact 3475 + 25 = 3500 example', () => {
     // Test with the exact provenance data from our example
     const exactProvenance: TermProvenance = {
       rhs: 25,
       rhsDigit: 2,
       rhsPlace: 1,
-      rhsPlaceName: "tens",
+      rhsPlaceName: 'tens',
       rhsDigitIndex: 0, // '2' is the first digit in '25'
       rhsValue: 20,
-    };
+    }
 
     render(
       <ReasonTooltip {...defaultProps} provenance={exactProvenance}>
         <span>20</span>
-      </ReasonTooltip>,
-    );
+      </ReasonTooltip>
+    )
 
     // Verify all the expected enhanced content
-    expect(
-      screen.getByText("Add the tens digit — 2 tens (20)"),
-    ).toBeInTheDocument();
-    expect(screen.getByText("From addend 25")).toBeInTheDocument();
-    expect(
-      screen.getByText(/We're adding the tens digit of 25 → 2 tens/),
-    ).toBeInTheDocument();
+    expect(screen.getByText('Add the tens digit — 2 tens (20)')).toBeInTheDocument()
+    expect(screen.getByText('From addend 25')).toBeInTheDocument()
+    expect(screen.getByText(/We're adding the tens digit of 25 → 2 tens/)).toBeInTheDocument()
 
     // Verify the chips show the digit transformation clearly
-    expect(
-      screen.getByText(/Digit we're using: 2 \(tens\)/),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(/So we add here: \+2 tens → 20/),
-    ).toBeInTheDocument();
-  });
-});
+    expect(screen.getByText(/Digit we're using: 2 \(tens\)/)).toBeInTheDocument()
+    expect(screen.getByText(/So we add here: \+2 tens → 20/)).toBeInTheDocument()
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/ReasonTooltip.simple.test.tsx b/apps/web/src/components/tutorial/__tests__/ReasonTooltip.simple.test.tsx
index 99852083..c0ef4346 100644
--- a/apps/web/src/components/tutorial/__tests__/ReasonTooltip.simple.test.tsx
+++ b/apps/web/src/components/tutorial/__tests__/ReasonTooltip.simple.test.tsx
@@ -1,35 +1,35 @@
-import { describe, expect, it } from "vitest";
-import type { TermProvenance } from "../../../utils/unifiedStepGenerator";
+import { describe, expect, it } from 'vitest'
+import type { TermProvenance } from '../../../utils/unifiedStepGenerator'
 
 // Simple unit test for the tooltip content generation logic
-describe("ReasonTooltip Provenance Logic", () => {
-  it("should generate correct enhanced title from provenance", () => {
+describe('ReasonTooltip Provenance Logic', () => {
+  it('should generate correct enhanced title from provenance', () => {
     const provenance: TermProvenance = {
       rhs: 25,
       rhsDigit: 2,
       rhsPlace: 1,
-      rhsPlaceName: "tens",
+      rhsPlaceName: 'tens',
       rhsDigitIndex: 0,
       rhsValue: 20,
-    };
+    }
 
     // This is the logic from getEnhancedTooltipContent
-    const title = `Add the ${provenance.rhsPlaceName} digit — ${provenance.rhsDigit} ${provenance.rhsPlaceName} (${provenance.rhsValue})`;
-    const subtitle = `From addend ${provenance.rhs}`;
+    const title = `Add the ${provenance.rhsPlaceName} digit — ${provenance.rhsDigit} ${provenance.rhsPlaceName} (${provenance.rhsValue})`
+    const subtitle = `From addend ${provenance.rhs}`
 
-    expect(title).toBe("Add the tens digit — 2 tens (20)");
-    expect(subtitle).toBe("From addend 25");
-  });
+    expect(title).toBe('Add the tens digit — 2 tens (20)')
+    expect(subtitle).toBe('From addend 25')
+  })
 
-  it("should generate correct breadcrumb chips from provenance", () => {
+  it('should generate correct breadcrumb chips from provenance', () => {
     const provenance: TermProvenance = {
       rhs: 25,
       rhsDigit: 2,
       rhsPlace: 1,
-      rhsPlaceName: "tens",
+      rhsPlaceName: 'tens',
       rhsDigitIndex: 0,
       rhsValue: 20,
-    };
+    }
 
     // This is the logic from getEnhancedTooltipContent
     const enhancedChips = [
@@ -38,98 +38,98 @@ describe("ReasonTooltip Provenance Logic", () => {
         value: `${provenance.rhsDigit} (${provenance.rhsPlaceName})`,
       },
       {
-        label: "So we add here",
+        label: 'So we add here',
         value: `+${provenance.rhsDigit} ${provenance.rhsPlaceName} → ${provenance.rhsValue}`,
       },
-    ];
+    ]
 
     expect(enhancedChips[0]).toEqual({
       label: "Digit we're using",
-      value: "2 (tens)",
-    });
+      value: '2 (tens)',
+    })
 
     expect(enhancedChips[1]).toEqual({
-      label: "So we add here",
-      value: "+2 tens → 20",
-    });
-  });
+      label: 'So we add here',
+      value: '+2 tens → 20',
+    })
+  })
 
-  it("should generate correct explanation text for Direct rule", () => {
+  it('should generate correct explanation text for Direct rule', () => {
     const provenance: TermProvenance = {
       rhs: 25,
       rhsDigit: 2,
       rhsPlace: 1,
-      rhsPlaceName: "tens",
+      rhsPlaceName: 'tens',
       rhsDigitIndex: 0,
       rhsValue: 20,
-    };
+    }
 
     // This is the logic from the "Why this step" section
-    const explanationText = `We're adding the ${provenance.rhsPlaceName} digit of ${provenance.rhs} → ${provenance.rhsDigit} ${provenance.rhsPlaceName}.`;
+    const explanationText = `We're adding the ${provenance.rhsPlaceName} digit of ${provenance.rhs} → ${provenance.rhsDigit} ${provenance.rhsPlaceName}.`
 
-    expect(explanationText).toBe("We're adding the tens digit of 25 → 2 tens.");
-  });
+    expect(explanationText).toBe("We're adding the tens digit of 25 → 2 tens.")
+  })
 
-  it("should handle ones digit provenance correctly", () => {
+  it('should handle ones digit provenance correctly', () => {
     const onesProvenance: TermProvenance = {
       rhs: 25,
       rhsDigit: 5,
       rhsPlace: 0,
-      rhsPlaceName: "ones",
+      rhsPlaceName: 'ones',
       rhsDigitIndex: 1, // '5' is the second digit in '25'
       rhsValue: 5,
-    };
+    }
 
-    const title = `Add the ${onesProvenance.rhsPlaceName} digit — ${onesProvenance.rhsDigit} ${onesProvenance.rhsPlaceName} (${onesProvenance.rhsValue})`;
-    const subtitle = `From addend ${onesProvenance.rhs}`;
+    const title = `Add the ${onesProvenance.rhsPlaceName} digit — ${onesProvenance.rhsDigit} ${onesProvenance.rhsPlaceName} (${onesProvenance.rhsValue})`
+    const subtitle = `From addend ${onesProvenance.rhs}`
 
-    expect(title).toBe("Add the ones digit — 5 ones (5)");
-    expect(subtitle).toBe("From addend 25");
-  });
+    expect(title).toBe('Add the ones digit — 5 ones (5)')
+    expect(subtitle).toBe('From addend 25')
+  })
 
-  it("should handle complement operations with group ID", () => {
+  it('should handle complement operations with group ID', () => {
     const complementProvenance: TermProvenance = {
       rhs: 25,
       rhsDigit: 5,
       rhsPlace: 0,
-      rhsPlaceName: "ones",
+      rhsPlaceName: 'ones',
       rhsDigitIndex: 1,
       rhsValue: 5,
-      groupId: "10comp-0-5",
-    };
+      groupId: '10comp-0-5',
+    }
 
     // All terms in a complement group should trace back to the same source digit
-    expect(complementProvenance.groupId).toBe("10comp-0-5");
-    expect(complementProvenance.rhsDigit).toBe(5);
-    expect(complementProvenance.rhs).toBe(25);
+    expect(complementProvenance.groupId).toBe('10comp-0-5')
+    expect(complementProvenance.rhsDigit).toBe(5)
+    expect(complementProvenance.rhs).toBe(25)
 
     // The title should still show the source digit correctly
-    const title = `Add the ${complementProvenance.rhsPlaceName} digit — ${complementProvenance.rhsDigit} ${complementProvenance.rhsPlaceName} (${complementProvenance.rhsValue})`;
-    expect(title).toBe("Add the ones digit — 5 ones (5)");
-  });
+    const title = `Add the ${complementProvenance.rhsPlaceName} digit — ${complementProvenance.rhsDigit} ${complementProvenance.rhsPlaceName} (${complementProvenance.rhsValue})`
+    expect(title).toBe('Add the ones digit — 5 ones (5)')
+  })
 
-  it("should handle the exact 3475 + 25 = 3500 example", () => {
+  it('should handle the exact 3475 + 25 = 3500 example', () => {
     // Test the exact scenario from the user's request
     const tensDigitProvenance: TermProvenance = {
       rhs: 25,
       rhsDigit: 2,
       rhsPlace: 1,
-      rhsPlaceName: "tens",
+      rhsPlaceName: 'tens',
       rhsDigitIndex: 0, // '2' is the first character in '25'
       rhsValue: 20, // 2 * 10^1 = 20
-    };
+    }
 
     // This should generate the exact text the user is expecting
-    const title = `Add the ${tensDigitProvenance.rhsPlaceName} digit — ${tensDigitProvenance.rhsDigit} ${tensDigitProvenance.rhsPlaceName} (${tensDigitProvenance.rhsValue})`;
-    const subtitle = `From addend ${tensDigitProvenance.rhs}`;
-    const explanation = `We're adding the ${tensDigitProvenance.rhsPlaceName} digit of ${tensDigitProvenance.rhs} → ${tensDigitProvenance.rhsDigit} ${tensDigitProvenance.rhsPlaceName}.`;
+    const title = `Add the ${tensDigitProvenance.rhsPlaceName} digit — ${tensDigitProvenance.rhsDigit} ${tensDigitProvenance.rhsPlaceName} (${tensDigitProvenance.rhsValue})`
+    const subtitle = `From addend ${tensDigitProvenance.rhs}`
+    const explanation = `We're adding the ${tensDigitProvenance.rhsPlaceName} digit of ${tensDigitProvenance.rhs} → ${tensDigitProvenance.rhsDigit} ${tensDigitProvenance.rhsPlaceName}.`
 
-    expect(title).toBe("Add the tens digit — 2 tens (20)");
-    expect(subtitle).toBe("From addend 25");
-    expect(explanation).toBe("We're adding the tens digit of 25 → 2 tens.");
+    expect(title).toBe('Add the tens digit — 2 tens (20)')
+    expect(subtitle).toBe('From addend 25')
+    expect(explanation).toBe("We're adding the tens digit of 25 → 2 tens.")
 
     // The key insight: the "20" pill now explicitly shows it came from the "2" in "25"
-    expect(tensDigitProvenance.rhsDigitIndex).toBe(0); // Points to the '2' in '25'
-    expect(tensDigitProvenance.rhsValue).toBe(20); // Shows the transformation 2 → 20
-  });
-});
+    expect(tensDigitProvenance.rhsDigitIndex).toBe(0) // Points to the '2' in '25'
+    expect(tensDigitProvenance.rhsValue).toBe(20) // Shows the transformation 2 → 20
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/TutorialCelebrationTooltip.e2e.test.ts b/apps/web/src/components/tutorial/__tests__/TutorialCelebrationTooltip.e2e.test.ts
index 0a653fad..b91e92b7 100644
--- a/apps/web/src/components/tutorial/__tests__/TutorialCelebrationTooltip.e2e.test.ts
+++ b/apps/web/src/components/tutorial/__tests__/TutorialCelebrationTooltip.e2e.test.ts
@@ -1,287 +1,271 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from '@playwright/test'
 
-test.describe("Tutorial Celebration Tooltip E2E", () => {
+test.describe('Tutorial Celebration Tooltip E2E', () => {
   test.beforeEach(async ({ page }) => {
     // Navigate to tutorial editor with a simple addition problem
-    await page.goto("/tutorial-editor");
+    await page.goto('/tutorial-editor')
 
     // Wait for page to load
-    await page.waitForLoadState("networkidle");
+    await page.waitForLoadState('networkidle')
 
     // Create a simple tutorial for testing
     await page.evaluate(() => {
       const tutorial = {
-        id: "celebration-e2e-test",
-        title: "Celebration E2E Test",
-        description: "Testing celebration tooltip in real browser",
+        id: 'celebration-e2e-test',
+        title: 'Celebration E2E Test',
+        description: 'Testing celebration tooltip in real browser',
         steps: [
           {
-            id: "step-1",
-            title: "Add Two",
-            problem: "3 + 2",
-            description: "Add 2 to the starting value of 3",
+            id: 'step-1',
+            title: 'Add Two',
+            problem: '3 + 2',
+            description: 'Add 2 to the starting value of 3',
             startValue: 3,
             targetValue: 5,
           },
         ],
-      };
+      }
 
       // Store in localStorage for the tutorial player
-      localStorage.setItem("current-tutorial", JSON.stringify(tutorial));
-    });
+      localStorage.setItem('current-tutorial', JSON.stringify(tutorial))
+    })
 
     // Reload to pick up the tutorial
-    await page.reload();
-    await page.waitForLoadState("networkidle");
-  });
+    await page.reload()
+    await page.waitForLoadState('networkidle')
+  })
 
-  test("celebration tooltip appears when reaching target value", async ({
-    page,
-  }) => {
+  test('celebration tooltip appears when reaching target value', async ({ page }) => {
     // Wait for tutorial to load
-    await expect(page.locator("text=3 + 2")).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('text=3 + 2')).toBeVisible({ timeout: 10000 })
 
     // Look for the abacus SVG
-    const abacus = page.locator("svg").first();
-    await expect(abacus).toBeVisible();
+    const abacus = page.locator('svg').first()
+    await expect(abacus).toBeVisible()
 
     // We need to interact with specific beads to change value from 3 to 5
     // Look for earth beads in the ones column (rightmost)
-    const earthBeads = page.locator('svg circle[data-bead-type="earth"]');
+    const earthBeads = page.locator('svg circle[data-bead-type="earth"]')
 
     // Click on earth beads to add 2 (getting from 3 to 5)
     // This might require multiple clicks depending on the current state
-    const earthBeadCount = await earthBeads.count();
+    const earthBeadCount = await earthBeads.count()
 
     if (earthBeadCount > 0) {
       // Try clicking the first available earth bead
-      await earthBeads.first().click();
+      await earthBeads.first().click()
 
       // Wait a bit for the value to update
-      await page.waitForTimeout(500);
+      await page.waitForTimeout(500)
 
       // Click another earth bead if needed
       if (earthBeadCount > 1) {
-        await earthBeads.nth(1).click();
-        await page.waitForTimeout(500);
+        await earthBeads.nth(1).click()
+        await page.waitForTimeout(500)
       }
     }
 
     // Look for celebration tooltip with "Excellent work!"
-    await expect(page.locator("text=🎉")).toBeVisible({ timeout: 5000 });
-    await expect(page.locator("text=Excellent work!")).toBeVisible({
+    await expect(page.locator('text=🎉')).toBeVisible({ timeout: 5000 })
+    await expect(page.locator('text=Excellent work!')).toBeVisible({
       timeout: 5000,
-    });
-  });
+    })
+  })
 
-  test("celebration tooltip disappears when moving away from target", async ({
-    page,
-  }) => {
+  test('celebration tooltip disappears when moving away from target', async ({ page }) => {
     // Wait for tutorial to load
-    await expect(page.locator("text=3 + 2")).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('text=3 + 2')).toBeVisible({ timeout: 10000 })
 
-    const abacus = page.locator("svg").first();
-    await expect(abacus).toBeVisible();
+    const abacus = page.locator('svg').first()
+    await expect(abacus).toBeVisible()
 
     // First, reach the target value (5)
-    const earthBeads = page.locator('svg circle[data-bead-type="earth"]');
+    const earthBeads = page.locator('svg circle[data-bead-type="earth"]')
 
     if ((await earthBeads.count()) > 0) {
-      await earthBeads.first().click();
-      await page.waitForTimeout(300);
+      await earthBeads.first().click()
+      await page.waitForTimeout(300)
 
       if ((await earthBeads.count()) > 1) {
-        await earthBeads.nth(1).click();
-        await page.waitForTimeout(300);
+        await earthBeads.nth(1).click()
+        await page.waitForTimeout(300)
       }
     }
 
     // Verify celebration appears
-    await expect(page.locator("text=🎉")).toBeVisible({ timeout: 3000 });
-    await expect(page.locator("text=Excellent work!")).toBeVisible();
+    await expect(page.locator('text=🎉')).toBeVisible({ timeout: 3000 })
+    await expect(page.locator('text=Excellent work!')).toBeVisible()
 
     // Now move away from target by clicking another bead (add more)
-    const heavenBead = page
-      .locator('svg circle[data-bead-type="heaven"]')
-      .first();
+    const heavenBead = page.locator('svg circle[data-bead-type="heaven"]').first()
     if (await heavenBead.isVisible()) {
-      await heavenBead.click();
-      await page.waitForTimeout(500);
+      await heavenBead.click()
+      await page.waitForTimeout(500)
     }
 
     // Celebration tooltip should disappear
-    await expect(page.locator("text=🎉")).not.toBeVisible({ timeout: 2000 });
-    await expect(page.locator("text=Excellent work!")).not.toBeVisible();
-  });
+    await expect(page.locator('text=🎉')).not.toBeVisible({ timeout: 2000 })
+    await expect(page.locator('text=Excellent work!')).not.toBeVisible()
+  })
 
-  test("celebration tooltip shows instruction mode when moved away", async ({
-    page,
-  }) => {
+  test('celebration tooltip shows instruction mode when moved away', async ({ page }) => {
     // Wait for tutorial to load
-    await expect(page.locator("text=3 + 2")).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('text=3 + 2')).toBeVisible({ timeout: 10000 })
 
-    const abacus = page.locator("svg").first();
-    await expect(abacus).toBeVisible();
+    const abacus = page.locator('svg').first()
+    await expect(abacus).toBeVisible()
 
     // Reach target value first
-    const earthBeads = page.locator('svg circle[data-bead-type="earth"]');
+    const earthBeads = page.locator('svg circle[data-bead-type="earth"]')
 
     if ((await earthBeads.count()) > 0) {
-      await earthBeads.first().click();
-      await page.waitForTimeout(300);
+      await earthBeads.first().click()
+      await page.waitForTimeout(300)
 
       if ((await earthBeads.count()) > 1) {
-        await earthBeads.nth(1).click();
-        await page.waitForTimeout(300);
+        await earthBeads.nth(1).click()
+        await page.waitForTimeout(300)
       }
     }
 
     // Verify celebration
-    await expect(page.locator("text=🎉")).toBeVisible({ timeout: 3000 });
+    await expect(page.locator('text=🎉')).toBeVisible({ timeout: 3000 })
 
     // Move away from target (subtract by clicking active earth bead)
-    const activeEarthBeads = page.locator(
-      'svg circle[data-bead-type="earth"][data-active="true"]',
-    );
+    const activeEarthBeads = page.locator('svg circle[data-bead-type="earth"][data-active="true"]')
     if ((await activeEarthBeads.count()) > 0) {
-      await activeEarthBeads.first().click();
-      await page.waitForTimeout(500);
+      await activeEarthBeads.first().click()
+      await page.waitForTimeout(500)
     }
 
     // Should no longer show celebration
-    await expect(page.locator("text=🎉")).not.toBeVisible({ timeout: 2000 });
+    await expect(page.locator('text=🎉')).not.toBeVisible({ timeout: 2000 })
 
     // Should show instruction tooltip (look for lightbulb or guidance text)
     const instructionTooltip = page
-      .locator("text=💡")
-      .or(page.locator("[data-radix-popper-content-wrapper]"));
+      .locator('text=💡')
+      .or(page.locator('[data-radix-popper-content-wrapper]'))
 
     // There might be instruction tooltips visible
     if ((await instructionTooltip.count()) > 0) {
-      await expect(instructionTooltip.first()).toBeVisible();
+      await expect(instructionTooltip.first()).toBeVisible()
     }
-  });
+  })
 
-  test("celebration tooltip positioned at correct bead", async ({ page }) => {
+  test('celebration tooltip positioned at correct bead', async ({ page }) => {
     // Wait for tutorial to load
-    await expect(page.locator("text=3 + 2")).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('text=3 + 2')).toBeVisible({ timeout: 10000 })
 
-    const abacus = page.locator("svg").first();
-    await expect(abacus).toBeVisible();
+    const abacus = page.locator('svg').first()
+    await expect(abacus).toBeVisible()
 
     // Interact with specific bead to track last moved bead
-    const targetEarthBead = page
-      .locator('svg circle[data-bead-type="earth"]')
-      .first();
+    const targetEarthBead = page.locator('svg circle[data-bead-type="earth"]').first()
 
     if (await targetEarthBead.isVisible()) {
       // Get the position of the bead we're clicking
-      const _beadBox = await targetEarthBead.boundingBox();
+      const _beadBox = await targetEarthBead.boundingBox()
 
       // Click the bead to move toward target
-      await targetEarthBead.click();
-      await page.waitForTimeout(300);
+      await targetEarthBead.click()
+      await page.waitForTimeout(300)
 
       // Continue clicking beads until we reach target
-      const earthBeads = page.locator('svg circle[data-bead-type="earth"]');
-      const beadCount = await earthBeads.count();
+      const earthBeads = page.locator('svg circle[data-bead-type="earth"]')
+      const beadCount = await earthBeads.count()
 
       for (let i = 1; i < Math.min(beadCount, 3); i++) {
-        await earthBeads.nth(i).click();
-        await page.waitForTimeout(200);
+        await earthBeads.nth(i).click()
+        await page.waitForTimeout(200)
       }
     }
 
     // Wait for celebration tooltip
-    await expect(page.locator("text=🎉")).toBeVisible({ timeout: 3000 });
+    await expect(page.locator('text=🎉')).toBeVisible({ timeout: 3000 })
 
     // Verify tooltip is positioned near where we last clicked
-    const tooltip = page.locator("[data-radix-popper-content-wrapper]").first();
+    const tooltip = page.locator('[data-radix-popper-content-wrapper]').first()
 
     if (await tooltip.isVisible()) {
-      const tooltipBox = await tooltip.boundingBox();
-      const abacusBox = await abacus.boundingBox();
+      const tooltipBox = await tooltip.boundingBox()
+      const abacusBox = await abacus.boundingBox()
 
       // Tooltip should be positioned within reasonable proximity to the abacus
-      expect(tooltipBox?.x).toBeGreaterThan((abacusBox?.x ?? 0) - 200);
-      expect(tooltipBox?.x).toBeLessThan(
-        (abacusBox?.x ?? 0) + (abacusBox?.width ?? 0) + 200,
-      );
+      expect(tooltipBox?.x).toBeGreaterThan((abacusBox?.x ?? 0) - 200)
+      expect(tooltipBox?.x).toBeLessThan((abacusBox?.x ?? 0) + (abacusBox?.width ?? 0) + 200)
     }
-  });
+  })
 
-  test("celebration tooltip resets on step navigation", async ({ page }) => {
+  test('celebration tooltip resets on step navigation', async ({ page }) => {
     // Create a multi-step tutorial
     await page.evaluate(() => {
       const tutorial = {
-        id: "multi-step-celebration-test",
-        title: "Multi-Step Celebration Test",
-        description: "Testing celebration across steps",
+        id: 'multi-step-celebration-test',
+        title: 'Multi-Step Celebration Test',
+        description: 'Testing celebration across steps',
         steps: [
           {
-            id: "step-1",
-            title: "First Addition",
-            problem: "2 + 3",
-            description: "Add 3 to 2",
+            id: 'step-1',
+            title: 'First Addition',
+            problem: '2 + 3',
+            description: 'Add 3 to 2',
             startValue: 2,
             targetValue: 5,
           },
           {
-            id: "step-2",
-            title: "Second Addition",
-            problem: "1 + 4",
-            description: "Add 4 to 1",
+            id: 'step-2',
+            title: 'Second Addition',
+            problem: '1 + 4',
+            description: 'Add 4 to 1',
             startValue: 1,
             targetValue: 5,
           },
         ],
-      };
-      localStorage.setItem("current-tutorial", JSON.stringify(tutorial));
-    });
+      }
+      localStorage.setItem('current-tutorial', JSON.stringify(tutorial))
+    })
 
-    await page.reload();
-    await page.waitForLoadState("networkidle");
+    await page.reload()
+    await page.waitForLoadState('networkidle')
 
     // Complete first step
-    await expect(page.locator("text=2 + 3")).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('text=2 + 3')).toBeVisible({ timeout: 10000 })
 
-    const _abacus = page.locator("svg").first();
-    const earthBeads = page.locator('svg circle[data-bead-type="earth"]');
+    const _abacus = page.locator('svg').first()
+    const earthBeads = page.locator('svg circle[data-bead-type="earth"]')
 
     // Reach target for first step (from 2 to 5, need to add 3)
     if ((await earthBeads.count()) > 0) {
       for (let i = 0; i < 3 && i < (await earthBeads.count()); i++) {
-        await earthBeads.nth(i).click();
-        await page.waitForTimeout(200);
+        await earthBeads.nth(i).click()
+        await page.waitForTimeout(200)
       }
     }
 
     // Verify celebration for first step
-    await expect(page.locator("text=🎉")).toBeVisible({ timeout: 3000 });
+    await expect(page.locator('text=🎉')).toBeVisible({ timeout: 3000 })
 
     // Navigate to next step
-    const nextButton = page
-      .locator("text=Next")
-      .or(page.locator('button:has-text("Next")'));
+    const nextButton = page.locator('text=Next').or(page.locator('button:has-text("Next")'))
     if (await nextButton.isVisible()) {
-      await nextButton.click();
+      await nextButton.click()
     }
 
     // Wait for second step to load
-    await expect(page.locator("text=1 + 4")).toBeVisible({ timeout: 5000 });
+    await expect(page.locator('text=1 + 4')).toBeVisible({ timeout: 5000 })
 
     // Complete second step (from 1 to 5, need to add 4)
-    const newEarthBeads = page.locator('svg circle[data-bead-type="earth"]');
+    const newEarthBeads = page.locator('svg circle[data-bead-type="earth"]')
 
     if ((await newEarthBeads.count()) > 0) {
       for (let i = 0; i < 4 && i < (await newEarthBeads.count()); i++) {
-        await newEarthBeads.nth(i).click();
-        await page.waitForTimeout(200);
+        await newEarthBeads.nth(i).click()
+        await page.waitForTimeout(200)
       }
     }
 
     // Should show celebration for second step
-    await expect(page.locator("text=🎉")).toBeVisible({ timeout: 3000 });
-    await expect(page.locator("text=Excellent work!")).toBeVisible();
-  });
-});
+    await expect(page.locator('text=🎉')).toBeVisible({ timeout: 3000 })
+    await expect(page.locator('text=Excellent work!')).toBeVisible()
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/TutorialCelebrationTooltip.test.tsx b/apps/web/src/components/tutorial/__tests__/TutorialCelebrationTooltip.test.tsx
index d30c8f0b..324a7262 100644
--- a/apps/web/src/components/tutorial/__tests__/TutorialCelebrationTooltip.test.tsx
+++ b/apps/web/src/components/tutorial/__tests__/TutorialCelebrationTooltip.test.tsx
@@ -1,299 +1,285 @@
-import { AbacusDisplayProvider } from "@soroban/abacus-react";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { vi } from "vitest";
-import type { Tutorial } from "../../../types/tutorial";
-import { TutorialProvider } from "../TutorialContext";
-import { TutorialPlayer } from "../TutorialPlayer";
+import { AbacusDisplayProvider } from '@soroban/abacus-react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
+import type { Tutorial } from '../../../types/tutorial'
+import { TutorialProvider } from '../TutorialContext'
+import { TutorialPlayer } from '../TutorialPlayer'
 
 // Mock tutorial data
 const mockTutorial: Tutorial = {
-  id: "celebration-test-tutorial",
-  title: "Celebration Tooltip Test",
-  description: "Testing celebration tooltip behavior",
+  id: 'celebration-test-tutorial',
+  title: 'Celebration Tooltip Test',
+  description: 'Testing celebration tooltip behavior',
   steps: [
     {
-      id: "step-1",
-      title: "Simple Addition",
-      problem: "3 + 2",
-      description: "Add 2 to 3",
+      id: 'step-1',
+      title: 'Simple Addition',
+      problem: '3 + 2',
+      description: 'Add 2 to 3',
       startValue: 3,
       targetValue: 5,
     },
   ],
-};
+}
 
 // Test component that exposes internal state for testing
 const TestCelebrationComponent = ({ tutorial }: { tutorial: Tutorial }) => {
   return (
     <AbacusDisplayProvider>
       <TutorialProvider tutorial={tutorial}>
-        <TutorialPlayer
-          tutorial={tutorial}
-          isDebugMode={true}
-          showDebugPanel={false}
-        />
+        <TutorialPlayer tutorial={tutorial} isDebugMode={true} showDebugPanel={false} />
       </TutorialProvider>
     </AbacusDisplayProvider>
-  );
-};
+  )
+}
 
-describe("TutorialPlayer Celebration Tooltip", () => {
+describe('TutorialPlayer Celebration Tooltip', () => {
   beforeEach(() => {
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
-  describe("Celebration Tooltip Visibility", () => {
-    it("should show celebration tooltip when step is completed and at target value", async () => {
-      render(<TestCelebrationComponent tutorial={mockTutorial} />);
+  describe('Celebration Tooltip Visibility', () => {
+    it('should show celebration tooltip when step is completed and at target value', async () => {
+      render(<TestCelebrationComponent tutorial={mockTutorial} />)
 
       // Wait for initial render with start value (3)
       await waitFor(() => {
-        expect(screen.getByText("3 + 2")).toBeInTheDocument();
-      });
+        expect(screen.getByText('3 + 2')).toBeInTheDocument()
+      })
 
       // Simulate reaching target value (5) by finding and clicking appropriate beads
       // We need to add 2 to get from 3 to 5
       // Look for earth beads in the ones place that we can activate
       const abacusContainer =
-        screen.getByRole("img", { hidden: true }) ||
-        document.querySelector("svg");
+        screen.getByRole('img', { hidden: true }) || document.querySelector('svg')
 
       if (abacusContainer) {
         // Simulate clicking beads to reach value 5
-        fireEvent.click(abacusContainer);
+        fireEvent.click(abacusContainer)
 
         // In a real scenario, we'd need to trigger the actual value change
         // For testing, we'll use a more direct approach
-        const valueChangeEvent = new CustomEvent("valueChange", {
+        const valueChangeEvent = new CustomEvent('valueChange', {
           detail: { newValue: 5 },
-        });
-        abacusContainer.dispatchEvent(valueChangeEvent);
+        })
+        abacusContainer.dispatchEvent(valueChangeEvent)
       }
 
       // Wait for celebration tooltip to appear
       await waitFor(
         () => {
-          const celebrationElements = screen.queryAllByText(/excellent work/i);
-          expect(celebrationElements.length).toBeGreaterThan(0);
+          const celebrationElements = screen.queryAllByText(/excellent work/i)
+          expect(celebrationElements.length).toBeGreaterThan(0)
         },
-        { timeout: 3000 },
-      );
-    });
+        { timeout: 3000 }
+      )
+    })
 
-    it("should hide celebration tooltip when user moves away from target value", async () => {
-      render(<TestCelebrationComponent tutorial={mockTutorial} />);
+    it('should hide celebration tooltip when user moves away from target value', async () => {
+      render(<TestCelebrationComponent tutorial={mockTutorial} />)
 
       // Wait for initial render
       await waitFor(() => {
-        expect(screen.getByText("3 + 2")).toBeInTheDocument();
-      });
+        expect(screen.getByText('3 + 2')).toBeInTheDocument()
+      })
 
       // First, complete the step (reach target value 5)
-      const abacusContainer = document.querySelector("svg");
+      const abacusContainer = document.querySelector('svg')
       if (abacusContainer) {
-        const valueChangeEvent = new CustomEvent("valueChange", {
+        const valueChangeEvent = new CustomEvent('valueChange', {
           detail: { newValue: 5 },
-        });
-        abacusContainer.dispatchEvent(valueChangeEvent);
+        })
+        abacusContainer.dispatchEvent(valueChangeEvent)
       }
 
       // Verify celebration appears
       await waitFor(
         () => {
-          const celebrationElements = screen.queryAllByText(/excellent work/i);
-          expect(celebrationElements.length).toBeGreaterThan(0);
+          const celebrationElements = screen.queryAllByText(/excellent work/i)
+          expect(celebrationElements.length).toBeGreaterThan(0)
         },
-        { timeout: 2000 },
-      );
+        { timeout: 2000 }
+      )
 
       // Now move away from target value (change to 6)
       if (abacusContainer) {
-        const valueChangeEvent = new CustomEvent("valueChange", {
+        const valueChangeEvent = new CustomEvent('valueChange', {
           detail: { newValue: 6 },
-        });
-        abacusContainer.dispatchEvent(valueChangeEvent);
+        })
+        abacusContainer.dispatchEvent(valueChangeEvent)
       }
 
       // Verify celebration tooltip disappears
       await waitFor(
         () => {
-          const celebrationElements = screen.queryAllByText(/excellent work/i);
-          expect(celebrationElements.length).toBe(0);
+          const celebrationElements = screen.queryAllByText(/excellent work/i)
+          expect(celebrationElements.length).toBe(0)
         },
-        { timeout: 2000 },
-      );
-    });
+        { timeout: 2000 }
+      )
+    })
 
-    it("should return to instruction tooltip when moved away from target", async () => {
-      render(<TestCelebrationComponent tutorial={mockTutorial} />);
+    it('should return to instruction tooltip when moved away from target', async () => {
+      render(<TestCelebrationComponent tutorial={mockTutorial} />)
 
       // Wait for initial render
       await waitFor(() => {
-        expect(screen.getByText("3 + 2")).toBeInTheDocument();
-      });
+        expect(screen.getByText('3 + 2')).toBeInTheDocument()
+      })
 
       // Complete step (reach target value 5)
-      const abacusContainer = document.querySelector("svg");
+      const abacusContainer = document.querySelector('svg')
       if (abacusContainer) {
-        fireEvent.click(abacusContainer);
-        const valueChangeEvent = new CustomEvent("valueChange", {
+        fireEvent.click(abacusContainer)
+        const valueChangeEvent = new CustomEvent('valueChange', {
           detail: { newValue: 5 },
-        });
-        abacusContainer.dispatchEvent(valueChangeEvent);
+        })
+        abacusContainer.dispatchEvent(valueChangeEvent)
       }
 
       // Wait for celebration
       await waitFor(() => {
-        expect(screen.queryAllByText(/excellent work/i).length).toBeGreaterThan(
-          0,
-        );
-      });
+        expect(screen.queryAllByText(/excellent work/i).length).toBeGreaterThan(0)
+      })
 
       // Move away from target (to value 4)
       if (abacusContainer) {
-        const valueChangeEvent = new CustomEvent("valueChange", {
+        const valueChangeEvent = new CustomEvent('valueChange', {
           detail: { newValue: 4 },
-        });
-        abacusContainer.dispatchEvent(valueChangeEvent);
+        })
+        abacusContainer.dispatchEvent(valueChangeEvent)
       }
 
       // Should show instruction tooltip instead of celebration
       await waitFor(() => {
-        expect(screen.queryAllByText(/excellent work/i).length).toBe(0);
+        expect(screen.queryAllByText(/excellent work/i).length).toBe(0)
         // Look for instruction indicators (lightbulb emoji or guidance text)
-        const instructionElements = screen.queryAllByText(/💡/i);
-        expect(instructionElements.length).toBeGreaterThanOrEqual(0); // May not always have instructions
-      });
-    });
-  });
+        const instructionElements = screen.queryAllByText(/💡/i)
+        expect(instructionElements.length).toBeGreaterThanOrEqual(0) // May not always have instructions
+      })
+    })
+  })
 
-  describe("Celebration Tooltip Positioning", () => {
-    it("should position celebration tooltip at last moved bead when available", async () => {
-      const onStepComplete = vi.fn();
+  describe('Celebration Tooltip Positioning', () => {
+    it('should position celebration tooltip at last moved bead when available', async () => {
+      const onStepComplete = vi.fn()
 
       render(
         <AbacusDisplayProvider>
-          <TutorialProvider
-            tutorial={mockTutorial}
-            onStepComplete={onStepComplete}
-          >
+          <TutorialProvider tutorial={mockTutorial} onStepComplete={onStepComplete}>
             <TutorialPlayer
               tutorial={mockTutorial}
               isDebugMode={true}
               onStepComplete={onStepComplete}
             />
           </TutorialProvider>
-        </AbacusDisplayProvider>,
-      );
+        </AbacusDisplayProvider>
+      )
 
       // Wait for initial render
       await waitFor(() => {
-        expect(screen.getByText("3 + 2")).toBeInTheDocument();
-      });
+        expect(screen.getByText('3 + 2')).toBeInTheDocument()
+      })
 
       // Simulate completing the step
-      const abacusContainer = document.querySelector("svg");
+      const abacusContainer = document.querySelector('svg')
       if (abacusContainer) {
-        fireEvent.click(abacusContainer);
-        const valueChangeEvent = new CustomEvent("valueChange", {
+        fireEvent.click(abacusContainer)
+        const valueChangeEvent = new CustomEvent('valueChange', {
           detail: { newValue: 5 },
-        });
-        abacusContainer.dispatchEvent(valueChangeEvent);
+        })
+        abacusContainer.dispatchEvent(valueChangeEvent)
       }
 
       // Wait for step completion callback
       await waitFor(
         () => {
-          expect(onStepComplete).toHaveBeenCalled();
+          expect(onStepComplete).toHaveBeenCalled()
         },
-        { timeout: 3000 },
-      );
+        { timeout: 3000 }
+      )
 
       // Verify celebration tooltip is positioned (should be visible in DOM)
-      const tooltipPortal = document.querySelector(
-        "[data-radix-popper-content-wrapper]",
-      );
-      expect(tooltipPortal).toBeTruthy();
-    });
+      const tooltipPortal = document.querySelector('[data-radix-popper-content-wrapper]')
+      expect(tooltipPortal).toBeTruthy()
+    })
 
-    it("should use fallback position when no last moved bead available", async () => {
-      render(<TestCelebrationComponent tutorial={mockTutorial} />);
+    it('should use fallback position when no last moved bead available', async () => {
+      render(<TestCelebrationComponent tutorial={mockTutorial} />)
 
       // Directly trigger completion without tracking a moved bead
-      const abacusContainer = document.querySelector("svg");
+      const abacusContainer = document.querySelector('svg')
       if (abacusContainer) {
         // Skip the gradual movement and go straight to target
-        const valueChangeEvent = new CustomEvent("valueChange", {
+        const valueChangeEvent = new CustomEvent('valueChange', {
           detail: { newValue: 5 },
-        });
-        abacusContainer.dispatchEvent(valueChangeEvent);
+        })
+        abacusContainer.dispatchEvent(valueChangeEvent)
       }
 
       // Should still show celebration tooltip with fallback positioning
       await waitFor(
         () => {
-          const celebrationElements = screen.queryAllByText(/excellent work/i);
-          expect(celebrationElements.length).toBeGreaterThan(0);
+          const celebrationElements = screen.queryAllByText(/excellent work/i)
+          expect(celebrationElements.length).toBeGreaterThan(0)
         },
-        { timeout: 2000 },
-      );
-    });
-  });
+        { timeout: 2000 }
+      )
+    })
+  })
 
-  describe("Tooltip State Management", () => {
-    it("should reset last moved bead when navigating to new step", async () => {
+  describe('Tooltip State Management', () => {
+    it('should reset last moved bead when navigating to new step', async () => {
       const multiStepTutorial: Tutorial = {
         ...mockTutorial,
         steps: [
           mockTutorial.steps[0],
           {
-            id: "step-2",
-            title: "Another Addition",
-            problem: "2 + 3",
-            description: "Add 3 to 2",
+            id: 'step-2',
+            title: 'Another Addition',
+            problem: '2 + 3',
+            description: 'Add 3 to 2',
             startValue: 2,
             targetValue: 5,
           },
         ],
-      };
+      }
 
-      render(<TestCelebrationComponent tutorial={multiStepTutorial} />);
+      render(<TestCelebrationComponent tutorial={multiStepTutorial} />)
 
       // Complete first step
-      const abacusContainer = document.querySelector("svg");
+      const abacusContainer = document.querySelector('svg')
       if (abacusContainer) {
-        const valueChangeEvent = new CustomEvent("valueChange", {
+        const valueChangeEvent = new CustomEvent('valueChange', {
           detail: { newValue: 5 },
-        });
-        abacusContainer.dispatchEvent(valueChangeEvent);
+        })
+        abacusContainer.dispatchEvent(valueChangeEvent)
       }
 
       // Navigate to next step
-      const nextButton = screen.getByText(/next/i);
-      fireEvent.click(nextButton);
+      const nextButton = screen.getByText(/next/i)
+      fireEvent.click(nextButton)
 
       // Wait for step change
       await waitFor(() => {
-        expect(screen.getByText("2 + 3")).toBeInTheDocument();
-      });
+        expect(screen.getByText('2 + 3')).toBeInTheDocument()
+      })
 
       // Complete second step - should use appropriate positioning
       if (abacusContainer) {
-        const valueChangeEvent = new CustomEvent("valueChange", {
+        const valueChangeEvent = new CustomEvent('valueChange', {
           detail: { newValue: 5 },
-        });
-        abacusContainer.dispatchEvent(valueChangeEvent);
+        })
+        abacusContainer.dispatchEvent(valueChangeEvent)
       }
 
       // Celebration should appear for second step
       await waitFor(
         () => {
-          expect(
-            screen.queryAllByText(/excellent work/i).length,
-          ).toBeGreaterThan(0);
+          expect(screen.queryAllByText(/excellent work/i).length).toBeGreaterThan(0)
         },
-        { timeout: 2000 },
-      );
-    });
-  });
-});
+        { timeout: 2000 }
+      )
+    })
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/TutorialContext.test.tsx b/apps/web/src/components/tutorial/__tests__/TutorialContext.test.tsx
index 1b2123ac..5f22fed7 100644
--- a/apps/web/src/components/tutorial/__tests__/TutorialContext.test.tsx
+++ b/apps/web/src/components/tutorial/__tests__/TutorialContext.test.tsx
@@ -1,41 +1,41 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import React from "react";
-import { vi } from "vitest";
-import type { Tutorial } from "../../../types/tutorial";
-import { TutorialProvider, useTutorialContext } from "../TutorialContext";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import { vi } from 'vitest'
+import type { Tutorial } from '../../../types/tutorial'
+import { TutorialProvider, useTutorialContext } from '../TutorialContext'
 
 // Mock tutorial data
 const mockTutorial: Tutorial = {
-  id: "test-tutorial",
-  title: "Test Tutorial",
-  description: "A test tutorial",
+  id: 'test-tutorial',
+  title: 'Test Tutorial',
+  description: 'A test tutorial',
   steps: [
     {
-      id: "step-1",
-      title: "Step 1",
-      problem: "5 + 3",
-      description: "Add 3 to 5",
+      id: 'step-1',
+      title: 'Step 1',
+      problem: '5 + 3',
+      description: 'Add 3 to 5',
       startValue: 5,
       targetValue: 8,
     },
     {
-      id: "step-2",
-      title: "Step 2",
-      problem: "10 - 2",
-      description: "Subtract 2 from 10",
+      id: 'step-2',
+      title: 'Step 2',
+      problem: '10 - 2',
+      description: 'Subtract 2 from 10',
       startValue: 10,
       targetValue: 8,
     },
     {
-      id: "step-3",
-      title: "Step 3",
-      problem: "15 + 7",
-      description: "Add 7 to 15",
+      id: 'step-3',
+      title: 'Step 3',
+      problem: '15 + 7',
+      description: 'Add 7 to 15',
       startValue: 15,
       targetValue: 22,
     },
   ],
-};
+}
 
 // Test component that uses the context
 const TestComponent = () => {
@@ -49,7 +49,7 @@ const TestComponent = () => {
     advanceMultiStep,
     previousMultiStep,
     resetMultiStep,
-  } = useTutorialContext();
+  } = useTutorialContext()
 
   return (
     <div>
@@ -83,326 +83,316 @@ const TestComponent = () => {
         Reset Multi-Step
       </button>
     </div>
-  );
-};
+  )
+}
 
-describe("TutorialContext", () => {
+describe('TutorialContext', () => {
   beforeEach(() => {
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
-  describe("Step Initialization", () => {
-    it("should initialize with first step and correct startValue", async () => {
+  describe('Step Initialization', () => {
+    it('should initialize with first step and correct startValue', async () => {
       render(
         <TutorialProvider tutorial={mockTutorial}>
           <TestComponent />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-step-index")).toHaveTextContent("0");
-        expect(screen.getByTestId("current-value")).toHaveTextContent("5");
-        expect(screen.getByTestId("step-title")).toHaveTextContent("Step 1");
-        expect(screen.getByTestId("start-value")).toHaveTextContent("5");
-        expect(screen.getByTestId("target-value")).toHaveTextContent("8");
-      });
-    });
+        expect(screen.getByTestId('current-step-index')).toHaveTextContent('0')
+        expect(screen.getByTestId('current-value')).toHaveTextContent('5')
+        expect(screen.getByTestId('step-title')).toHaveTextContent('Step 1')
+        expect(screen.getByTestId('start-value')).toHaveTextContent('5')
+        expect(screen.getByTestId('target-value')).toHaveTextContent('8')
+      })
+    })
 
-    it("should initialize with custom initial step index", async () => {
+    it('should initialize with custom initial step index', async () => {
       render(
         <TutorialProvider tutorial={mockTutorial} initialStepIndex={1}>
           <TestComponent />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-step-index")).toHaveTextContent("1");
-        expect(screen.getByTestId("current-value")).toHaveTextContent("10");
-        expect(screen.getByTestId("step-title")).toHaveTextContent("Step 2");
-        expect(screen.getByTestId("start-value")).toHaveTextContent("10");
-      });
-    });
+        expect(screen.getByTestId('current-step-index')).toHaveTextContent('1')
+        expect(screen.getByTestId('current-value')).toHaveTextContent('10')
+        expect(screen.getByTestId('step-title')).toHaveTextContent('Step 2')
+        expect(screen.getByTestId('start-value')).toHaveTextContent('10')
+      })
+    })
 
-    it("should call onStepChange callback during initialization", async () => {
-      const onStepChange = vi.fn();
+    it('should call onStepChange callback during initialization', async () => {
+      const onStepChange = vi.fn()
 
       render(
         <TutorialProvider tutorial={mockTutorial} onStepChange={onStepChange}>
           <TestComponent />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
       await waitFor(() => {
-        expect(onStepChange).toHaveBeenCalledWith(0, mockTutorial.steps[0]);
-      });
-    });
-  });
+        expect(onStepChange).toHaveBeenCalledWith(0, mockTutorial.steps[0])
+      })
+    })
+  })
 
-  describe("Step Navigation", () => {
-    it("should navigate to specific step with correct startValue", async () => {
+  describe('Step Navigation', () => {
+    it('should navigate to specific step with correct startValue', async () => {
       render(
         <TutorialProvider tutorial={mockTutorial}>
           <TestComponent />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
       // Wait for initial render
       await waitFor(() => {
-        expect(screen.getByTestId("current-step-index")).toHaveTextContent("0");
-      });
+        expect(screen.getByTestId('current-step-index')).toHaveTextContent('0')
+      })
 
       // Navigate to step 2
-      fireEvent.click(screen.getByTestId("go-to-step-2"));
+      fireEvent.click(screen.getByTestId('go-to-step-2'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-step-index")).toHaveTextContent("1");
-        expect(screen.getByTestId("current-value")).toHaveTextContent("10");
-        expect(screen.getByTestId("step-title")).toHaveTextContent("Step 2");
-        expect(screen.getByTestId("is-completed")).toHaveTextContent("false");
-      });
-    });
+        expect(screen.getByTestId('current-step-index')).toHaveTextContent('1')
+        expect(screen.getByTestId('current-value')).toHaveTextContent('10')
+        expect(screen.getByTestId('step-title')).toHaveTextContent('Step 2')
+        expect(screen.getByTestId('is-completed')).toHaveTextContent('false')
+      })
+    })
 
-    it("should navigate to next step", async () => {
+    it('should navigate to next step', async () => {
       render(
         <TutorialProvider tutorial={mockTutorial}>
           <TestComponent />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-step-index")).toHaveTextContent("0");
-      });
+        expect(screen.getByTestId('current-step-index')).toHaveTextContent('0')
+      })
 
-      fireEvent.click(screen.getByTestId("go-next"));
+      fireEvent.click(screen.getByTestId('go-next'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-step-index")).toHaveTextContent("1");
-        expect(screen.getByTestId("current-value")).toHaveTextContent("10");
-      });
-    });
+        expect(screen.getByTestId('current-step-index')).toHaveTextContent('1')
+        expect(screen.getByTestId('current-value')).toHaveTextContent('10')
+      })
+    })
 
-    it("should navigate to previous step", async () => {
+    it('should navigate to previous step', async () => {
       render(
         <TutorialProvider tutorial={mockTutorial} initialStepIndex={1}>
           <TestComponent />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-step-index")).toHaveTextContent("1");
-      });
+        expect(screen.getByTestId('current-step-index')).toHaveTextContent('1')
+      })
 
-      fireEvent.click(screen.getByTestId("go-prev"));
+      fireEvent.click(screen.getByTestId('go-prev'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-step-index")).toHaveTextContent("0");
-        expect(screen.getByTestId("current-value")).toHaveTextContent("5");
-      });
-    });
+        expect(screen.getByTestId('current-step-index')).toHaveTextContent('0')
+        expect(screen.getByTestId('current-value')).toHaveTextContent('5')
+      })
+    })
 
-    it("should reset multi-step index when navigating between steps", async () => {
+    it('should reset multi-step index when navigating between steps', async () => {
       render(
         <TutorialProvider tutorial={mockTutorial}>
           <TestComponent />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
       // Advance multi-step
-      fireEvent.click(screen.getByTestId("advance-multi"));
+      fireEvent.click(screen.getByTestId('advance-multi'))
       await waitFor(() => {
-        expect(screen.getByTestId("current-multi-step")).toHaveTextContent("1");
-      });
+        expect(screen.getByTestId('current-multi-step')).toHaveTextContent('1')
+      })
 
       // Navigate to next step
-      fireEvent.click(screen.getByTestId("go-next"));
+      fireEvent.click(screen.getByTestId('go-next'))
 
       await waitFor(() => {
         // Multi-step should reset to 0
-        expect(screen.getByTestId("current-multi-step")).toHaveTextContent("0");
-      });
-    });
-  });
+        expect(screen.getByTestId('current-multi-step')).toHaveTextContent('0')
+      })
+    })
+  })
 
-  describe("Value Changes", () => {
-    it("should update current value when user changes it", async () => {
+  describe('Value Changes', () => {
+    it('should update current value when user changes it', async () => {
       const TestWithValueChange = () => {
-        const { handleValueChange, state } = useTutorialContext();
+        const { handleValueChange, state } = useTutorialContext()
 
         return (
           <div>
             <TestComponent />
-            <button
-              data-testid="change-value-directly"
-              onClick={() => handleValueChange(42)}
-            >
+            <button data-testid="change-value-directly" onClick={() => handleValueChange(42)}>
               Change Value Directly
             </button>
           </div>
-        );
-      };
+        )
+      }
 
       render(
         <TutorialProvider tutorial={mockTutorial}>
           <TestWithValueChange />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('current-value')).toHaveTextContent('5')
+      })
 
-      fireEvent.click(screen.getByTestId("change-value-directly"));
+      fireEvent.click(screen.getByTestId('change-value-directly'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-value")).toHaveTextContent("42");
-      });
-    });
+        expect(screen.getByTestId('current-value')).toHaveTextContent('42')
+      })
+    })
 
-    it("should complete step when target value is reached", async () => {
+    it('should complete step when target value is reached', async () => {
       const TestWithCompletion = () => {
-        const { handleValueChange } = useTutorialContext();
+        const { handleValueChange } = useTutorialContext()
 
         React.useEffect(() => {
           // Simulate reaching target value after initialization
-          const timer = setTimeout(() => handleValueChange(8), 100);
-          return () => clearTimeout(timer);
-        }, [handleValueChange]);
+          const timer = setTimeout(() => handleValueChange(8), 100)
+          return () => clearTimeout(timer)
+        }, [handleValueChange])
 
-        return <TestComponent />;
-      };
+        return <TestComponent />
+      }
 
       render(
         <TutorialProvider tutorial={mockTutorial}>
           <TestWithCompletion />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
       await waitFor(
         () => {
-          expect(screen.getByTestId("is-completed")).toHaveTextContent("true");
+          expect(screen.getByTestId('is-completed')).toHaveTextContent('true')
         },
-        { timeout: 2000 },
-      );
-    });
+        { timeout: 2000 }
+      )
+    })
 
-    it("should call onStepComplete when step is completed", async () => {
-      const onStepComplete = vi.fn();
+    it('should call onStepComplete when step is completed', async () => {
+      const onStepComplete = vi.fn()
 
       const TestWithCallback = () => {
-        const { handleValueChange } = useTutorialContext();
+        const { handleValueChange } = useTutorialContext()
 
         React.useEffect(() => {
           // Simulate reaching target value
-          setTimeout(() => handleValueChange(8), 100);
-        }, [handleValueChange]);
+          setTimeout(() => handleValueChange(8), 100)
+        }, [handleValueChange])
 
-        return <TestComponent />;
-      };
+        return <TestComponent />
+      }
 
       render(
-        <TutorialProvider
-          tutorial={mockTutorial}
-          onStepComplete={onStepComplete}
-        >
+        <TutorialProvider tutorial={mockTutorial} onStepComplete={onStepComplete}>
           <TestWithCallback />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
       await waitFor(
         () => {
-          expect(onStepComplete).toHaveBeenCalledWith(
-            0,
-            mockTutorial.steps[0],
-            true,
-          );
+          expect(onStepComplete).toHaveBeenCalledWith(0, mockTutorial.steps[0], true)
         },
-        { timeout: 2000 },
-      );
-    });
-  });
+        { timeout: 2000 }
+      )
+    })
+  })
 
-  describe("Multi-Step Navigation", () => {
-    it("should advance multi-step index", async () => {
+  describe('Multi-Step Navigation', () => {
+    it('should advance multi-step index', async () => {
       render(
         <TutorialProvider tutorial={mockTutorial}>
           <TestComponent />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
-      expect(screen.getByTestId("current-multi-step")).toHaveTextContent("0");
+      expect(screen.getByTestId('current-multi-step')).toHaveTextContent('0')
 
-      fireEvent.click(screen.getByTestId("advance-multi"));
+      fireEvent.click(screen.getByTestId('advance-multi'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-multi-step")).toHaveTextContent("1");
-      });
-    });
+        expect(screen.getByTestId('current-multi-step')).toHaveTextContent('1')
+      })
+    })
 
-    it("should go to previous multi-step", async () => {
+    it('should go to previous multi-step', async () => {
       render(
         <TutorialProvider tutorial={mockTutorial}>
           <TestComponent />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
       // First advance to step 1
-      fireEvent.click(screen.getByTestId("advance-multi"));
+      fireEvent.click(screen.getByTestId('advance-multi'))
       await waitFor(() => {
-        expect(screen.getByTestId("current-multi-step")).toHaveTextContent("1");
-      });
+        expect(screen.getByTestId('current-multi-step')).toHaveTextContent('1')
+      })
 
       // Then go back
-      fireEvent.click(screen.getByTestId("prev-multi"));
+      fireEvent.click(screen.getByTestId('prev-multi'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-multi-step")).toHaveTextContent("0");
-      });
-    });
+        expect(screen.getByTestId('current-multi-step')).toHaveTextContent('0')
+      })
+    })
 
-    it("should reset multi-step to 0", async () => {
+    it('should reset multi-step to 0', async () => {
       render(
         <TutorialProvider tutorial={mockTutorial}>
           <TestComponent />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
       // Advance a few steps
-      fireEvent.click(screen.getByTestId("advance-multi"));
-      fireEvent.click(screen.getByTestId("advance-multi"));
+      fireEvent.click(screen.getByTestId('advance-multi'))
+      fireEvent.click(screen.getByTestId('advance-multi'))
       await waitFor(() => {
-        expect(screen.getByTestId("current-multi-step")).toHaveTextContent("2");
-      });
+        expect(screen.getByTestId('current-multi-step')).toHaveTextContent('2')
+      })
 
       // Reset
-      fireEvent.click(screen.getByTestId("reset-multi"));
+      fireEvent.click(screen.getByTestId('reset-multi'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-multi-step")).toHaveTextContent("0");
-      });
-    });
+        expect(screen.getByTestId('current-multi-step')).toHaveTextContent('0')
+      })
+    })
 
-    it("should not allow previous multi-step below 0", async () => {
+    it('should not allow previous multi-step below 0', async () => {
       render(
         <TutorialProvider tutorial={mockTutorial}>
           <TestComponent />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
-      expect(screen.getByTestId("current-multi-step")).toHaveTextContent("0");
+      expect(screen.getByTestId('current-multi-step')).toHaveTextContent('0')
 
       // Try to go to previous (should stay at 0)
-      fireEvent.click(screen.getByTestId("prev-multi"));
+      fireEvent.click(screen.getByTestId('prev-multi'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-multi-step")).toHaveTextContent("0");
-      });
-    });
-  });
+        expect(screen.getByTestId('current-multi-step')).toHaveTextContent('0')
+      })
+    })
+  })
 
-  describe("Error Handling", () => {
-    it("should handle invalid step indices gracefully", async () => {
+  describe('Error Handling', () => {
+    it('should handle invalid step indices gracefully', async () => {
       const TestWithInvalidStep = () => {
-        const { goToStep } = useTutorialContext();
+        const { goToStep } = useTutorialContext()
 
         return (
           <div>
@@ -411,51 +401,49 @@ describe("TutorialContext", () => {
               Invalid Step
             </button>
           </div>
-        );
-      };
+        )
+      }
 
       render(
         <TutorialProvider tutorial={mockTutorial}>
           <TestWithInvalidStep />
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-step-index")).toHaveTextContent("0");
-      });
+        expect(screen.getByTestId('current-step-index')).toHaveTextContent('0')
+      })
 
       // Click invalid step - should not crash or change step
-      fireEvent.click(screen.getByTestId("invalid-step"));
+      fireEvent.click(screen.getByTestId('invalid-step'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("current-step-index")).toHaveTextContent("0");
-      });
-    });
+        expect(screen.getByTestId('current-step-index')).toHaveTextContent('0')
+      })
+    })
 
-    it("should handle empty tutorial steps", async () => {
+    it('should handle empty tutorial steps', async () => {
       const emptyTutorial: Tutorial = {
-        id: "empty",
-        title: "Empty Tutorial",
-        description: "No steps",
+        id: 'empty',
+        title: 'Empty Tutorial',
+        description: 'No steps',
         steps: [],
-      };
+      }
 
-      const consoleSpy = vi
-        .spyOn(console, "error")
-        .mockImplementation(() => {});
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
       // For empty tutorial, we expect the context to handle gracefully
       // but the component might not render completely
       render(
         <TutorialProvider tutorial={emptyTutorial}>
           <div data-testid="empty-tutorial-test">Empty tutorial test</div>
-        </TutorialProvider>,
-      );
+        </TutorialProvider>
+      )
 
       // Should at least render without crashing
-      expect(screen.getByTestId("empty-tutorial-test")).toBeInTheDocument();
+      expect(screen.getByTestId('empty-tutorial-test')).toBeInTheDocument()
 
-      consoleSpy.mockRestore();
-    });
-  });
-});
+      consoleSpy.mockRestore()
+    })
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/TutorialEditor.integration.test.tsx b/apps/web/src/components/tutorial/__tests__/TutorialEditor.integration.test.tsx
index a230b59b..fecede6f 100644
--- a/apps/web/src/components/tutorial/__tests__/TutorialEditor.integration.test.tsx
+++ b/apps/web/src/components/tutorial/__tests__/TutorialEditor.integration.test.tsx
@@ -1,51 +1,51 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { DevAccessProvider } from "../../../hooks/useAccessControl";
-import type { Tutorial, TutorialValidation } from "../../../types/tutorial";
-import { getTutorialForEditor } from "../../../utils/tutorialConverter";
-import { TutorialEditor } from "../TutorialEditor";
-import { TutorialPlayer } from "../TutorialPlayer";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { DevAccessProvider } from '../../../hooks/useAccessControl'
+import type { Tutorial, TutorialValidation } from '../../../types/tutorial'
+import { getTutorialForEditor } from '../../../utils/tutorialConverter'
+import { TutorialEditor } from '../TutorialEditor'
+import { TutorialPlayer } from '../TutorialPlayer'
 
 // Mock the AbacusReact component for integration tests
-vi.mock("@soroban/abacus-react", () => ({
+vi.mock('@soroban/abacus-react', () => ({
   AbacusReact: ({ value, onValueChange, callbacks }: any) => (
     <div data-testid="mock-abacus">
       <div data-testid="abacus-value">{value}</div>
       <button
         data-testid="mock-bead-0"
         onClick={() => {
-          onValueChange?.(value + 1);
+          onValueChange?.(value + 1)
           callbacks?.onBeadClick?.({
             columnIndex: 4,
-            beadType: "earth",
+            beadType: 'earth',
             position: 0,
             active: false,
-          });
+          })
         }}
       >
         Mock Bead
       </button>
     </div>
   ),
-}));
+}))
 
-describe("Tutorial Editor Integration Tests", () => {
-  let mockTutorial: Tutorial;
-  let mockOnSave: ReturnType<typeof vi.fn>;
-  let mockOnValidate: ReturnType<typeof vi.fn>;
-  let mockOnPreview: ReturnType<typeof vi.fn>;
+describe('Tutorial Editor Integration Tests', () => {
+  let mockTutorial: Tutorial
+  let mockOnSave: ReturnType<typeof vi.fn>
+  let mockOnValidate: ReturnType<typeof vi.fn>
+  let mockOnPreview: ReturnType<typeof vi.fn>
 
   beforeEach(() => {
-    vi.clearAllMocks();
-    mockTutorial = getTutorialForEditor();
-    mockOnSave = vi.fn();
+    vi.clearAllMocks()
+    mockTutorial = getTutorialForEditor()
+    mockOnSave = vi.fn()
     mockOnValidate = vi.fn().mockResolvedValue({
       isValid: true,
       errors: [],
       warnings: [],
-    } as TutorialValidation);
-    mockOnPreview = vi.fn();
-  });
+    } as TutorialValidation)
+    mockOnPreview = vi.fn()
+  })
 
   const renderTutorialEditor = () => {
     return render(
@@ -56,190 +56,186 @@ describe("Tutorial Editor Integration Tests", () => {
           onValidate={mockOnValidate}
           onPreview={mockOnPreview}
         />
-      </DevAccessProvider>,
-    );
-  };
+      </DevAccessProvider>
+    )
+  }
 
-  describe("Complete Tutorial Editing Workflow", () => {
-    it("supports complete tutorial editing workflow from start to finish", async () => {
-      renderTutorialEditor();
+  describe('Complete Tutorial Editing Workflow', () => {
+    it('supports complete tutorial editing workflow from start to finish', async () => {
+      renderTutorialEditor()
 
       // 1. Initial state - read-only mode
-      expect(screen.getByText("Guided Addition Tutorial")).toBeInTheDocument();
-      expect(screen.getByText("Edit Tutorial")).toBeInTheDocument();
-      expect(screen.queryByText("Save Changes")).not.toBeInTheDocument();
+      expect(screen.getByText('Guided Addition Tutorial')).toBeInTheDocument()
+      expect(screen.getByText('Edit Tutorial')).toBeInTheDocument()
+      expect(screen.queryByText('Save Changes')).not.toBeInTheDocument()
 
       // 2. Enter edit mode
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      expect(screen.getByText("Save Changes")).toBeInTheDocument();
-      expect(screen.getByText("Cancel")).toBeInTheDocument();
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      expect(screen.getByText('Save Changes')).toBeInTheDocument()
+      expect(screen.getByText('Cancel')).toBeInTheDocument()
 
       // 3. Edit tutorial metadata
-      const titleInput = screen.getByDisplayValue("Guided Addition Tutorial");
+      const titleInput = screen.getByDisplayValue('Guided Addition Tutorial')
       fireEvent.change(titleInput, {
-        target: { value: "Advanced Addition Tutorial" },
-      });
-      expect(titleInput).toHaveValue("Advanced Addition Tutorial");
+        target: { value: 'Advanced Addition Tutorial' },
+      })
+      expect(titleInput).toHaveValue('Advanced Addition Tutorial')
 
-      const descriptionInput = screen.getByDisplayValue(/Learn basic addition/);
+      const descriptionInput = screen.getByDisplayValue(/Learn basic addition/)
       fireEvent.change(descriptionInput, {
-        target: { value: "Master advanced addition techniques" },
-      });
-      expect(descriptionInput).toHaveValue(
-        "Master advanced addition techniques",
-      );
+        target: { value: 'Master advanced addition techniques' },
+      })
+      expect(descriptionInput).toHaveValue('Master advanced addition techniques')
 
       // 4. Expand and edit a step
-      const firstStep = screen.getByText(/1\. .+/);
-      fireEvent.click(firstStep);
+      const firstStep = screen.getByText(/1\. .+/)
+      fireEvent.click(firstStep)
 
       // Find step editing form
-      const stepTitleInputs = screen.getAllByDisplayValue(/.*/);
+      const stepTitleInputs = screen.getAllByDisplayValue(/.*/)
       const stepTitleInput = stepTitleInputs.find(
         (input) =>
-          (input as HTMLInputElement).value.includes("Basic") ||
-          (input as HTMLInputElement).value.includes("Introduction"),
-      );
+          (input as HTMLInputElement).value.includes('Basic') ||
+          (input as HTMLInputElement).value.includes('Introduction')
+      )
 
       if (stepTitleInput) {
         fireEvent.change(stepTitleInput, {
-          target: { value: "Advanced Introduction Step" },
-        });
-        expect(stepTitleInput).toHaveValue("Advanced Introduction Step");
+          target: { value: 'Advanced Introduction Step' },
+        })
+        expect(stepTitleInput).toHaveValue('Advanced Introduction Step')
       }
 
       // 5. Add a new step
-      const addStepButton = screen.getByText("+ Add Step");
-      const initialStepCount = screen.getAllByText(/^\d+\./).length;
-      fireEvent.click(addStepButton);
+      const addStepButton = screen.getByText('+ Add Step')
+      const initialStepCount = screen.getAllByText(/^\d+\./).length
+      fireEvent.click(addStepButton)
 
       await waitFor(() => {
-        const newStepCount = screen.getAllByText(/^\d+\./).length;
-        expect(newStepCount).toBe(initialStepCount + 1);
-      });
+        const newStepCount = screen.getAllByText(/^\d+\./).length
+        expect(newStepCount).toBe(initialStepCount + 1)
+      })
 
       // 6. Preview functionality
-      const previewButtons = screen.getAllByText(/Preview/);
+      const previewButtons = screen.getAllByText(/Preview/)
       if (previewButtons.length > 0) {
-        fireEvent.click(previewButtons[0]);
-        expect(mockOnPreview).toHaveBeenCalled();
+        fireEvent.click(previewButtons[0])
+        expect(mockOnPreview).toHaveBeenCalled()
       }
 
       // 7. Save changes
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Save Changes'))
 
       await waitFor(() => {
-        expect(mockOnValidate).toHaveBeenCalled();
+        expect(mockOnValidate).toHaveBeenCalled()
         expect(mockOnSave).toHaveBeenCalledWith(
           expect.objectContaining({
-            title: "Advanced Addition Tutorial",
-            description: "Master advanced addition techniques",
-          }),
-        );
-      });
-    });
+            title: 'Advanced Addition Tutorial',
+            description: 'Master advanced addition techniques',
+          })
+        )
+      })
+    })
 
-    it("handles step management operations correctly", async () => {
-      renderTutorialEditor();
+    it('handles step management operations correctly', async () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
       // Get initial step count
-      const initialSteps = screen.getAllByText(/^\d+\./);
-      const initialCount = initialSteps.length;
+      const initialSteps = screen.getAllByText(/^\d+\./)
+      const initialCount = initialSteps.length
 
       // Add a step
-      fireEvent.click(screen.getByText("+ Add Step"));
+      fireEvent.click(screen.getByText('+ Add Step'))
       await waitFor(() => {
-        expect(screen.getAllByText(/^\d+\./).length).toBe(initialCount + 1);
-      });
+        expect(screen.getAllByText(/^\d+\./).length).toBe(initialCount + 1)
+      })
 
       // Expand the first step and duplicate it
-      fireEvent.click(screen.getByText(/1\. .+/));
+      fireEvent.click(screen.getByText(/1\. .+/))
 
-      const duplicateButton = screen.queryByText("Duplicate");
+      const duplicateButton = screen.queryByText('Duplicate')
       if (duplicateButton) {
-        fireEvent.click(duplicateButton);
+        fireEvent.click(duplicateButton)
         await waitFor(() => {
-          expect(screen.getAllByText(/^\d+\./).length).toBe(initialCount + 2);
-        });
+          expect(screen.getAllByText(/^\d+\./).length).toBe(initialCount + 2)
+        })
       }
 
       // Try to delete a step (but not if it's the last one)
-      const deleteButton = screen.queryByText("Delete");
-      if (deleteButton && !deleteButton.hasAttribute("disabled")) {
-        const currentCount = screen.getAllByText(/^\d+\./).length;
-        fireEvent.click(deleteButton);
+      const deleteButton = screen.queryByText('Delete')
+      if (deleteButton && !deleteButton.hasAttribute('disabled')) {
+        const currentCount = screen.getAllByText(/^\d+\./).length
+        fireEvent.click(deleteButton)
         await waitFor(() => {
-          expect(screen.getAllByText(/^\d+\./).length).toBe(currentCount - 1);
-        });
+          expect(screen.getAllByText(/^\d+\./).length).toBe(currentCount - 1)
+        })
       }
-    });
+    })
 
-    it("validates tutorial data before saving", async () => {
+    it('validates tutorial data before saving', async () => {
       // Set up validation to fail
       mockOnValidate.mockResolvedValueOnce({
         isValid: false,
         errors: [
           {
-            stepId: "",
-            field: "title",
-            message: "Title cannot be empty",
-            severity: "error" as const,
+            stepId: '',
+            field: 'title',
+            message: 'Title cannot be empty',
+            severity: 'error' as const,
           },
         ],
         warnings: [],
-      });
+      })
 
-      renderTutorialEditor();
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
       // Clear the title to trigger validation error
-      const titleInput = screen.getByDisplayValue("Guided Addition Tutorial");
-      fireEvent.change(titleInput, { target: { value: "" } });
+      const titleInput = screen.getByDisplayValue('Guided Addition Tutorial')
+      fireEvent.change(titleInput, { target: { value: '' } })
 
       // Try to save
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Save Changes'))
 
       await waitFor(() => {
-        expect(mockOnValidate).toHaveBeenCalled();
-        expect(mockOnSave).not.toHaveBeenCalled();
-        expect(screen.getByText("Title cannot be empty")).toBeInTheDocument();
-      });
-    });
+        expect(mockOnValidate).toHaveBeenCalled()
+        expect(mockOnSave).not.toHaveBeenCalled()
+        expect(screen.getByText('Title cannot be empty')).toBeInTheDocument()
+      })
+    })
 
-    it("shows validation warnings without blocking save", async () => {
+    it('shows validation warnings without blocking save', async () => {
       // Set up validation with warnings only
       mockOnValidate.mockResolvedValueOnce({
         isValid: true,
         errors: [],
         warnings: [
           {
-            stepId: "",
-            field: "description",
-            message: "Description could be more detailed",
-            severity: "warning" as const,
+            stepId: '',
+            field: 'description',
+            message: 'Description could be more detailed',
+            severity: 'warning' as const,
           },
         ],
-      });
+      })
 
-      renderTutorialEditor();
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('Save Changes'))
 
       await waitFor(() => {
-        expect(mockOnValidate).toHaveBeenCalled();
-        expect(mockOnSave).toHaveBeenCalled();
-        expect(
-          screen.getByText("Description could be more detailed"),
-        ).toBeInTheDocument();
-      });
-    });
-  });
+        expect(mockOnValidate).toHaveBeenCalled()
+        expect(mockOnSave).toHaveBeenCalled()
+        expect(screen.getByText('Description could be more detailed')).toBeInTheDocument()
+      })
+    })
+  })
 
-  describe("Tutorial Player Integration", () => {
+  describe('Tutorial Player Integration', () => {
     const renderTutorialPlayer = () => {
       return render(
         <DevAccessProvider>
@@ -251,69 +247,69 @@ describe("Tutorial Editor Integration Tests", () => {
             onTutorialComplete={vi.fn()}
             onEvent={vi.fn()}
           />
-        </DevAccessProvider>,
-      );
-    };
+        </DevAccessProvider>
+      )
+    }
 
-    it("integrates tutorial player for preview functionality", async () => {
-      renderTutorialPlayer();
+    it('integrates tutorial player for preview functionality', async () => {
+      renderTutorialPlayer()
 
       // Check that tutorial loads correctly
-      expect(screen.getByText("Guided Addition Tutorial")).toBeInTheDocument();
+      expect(screen.getByText('Guided Addition Tutorial')).toBeInTheDocument()
 
       // Check that first step is displayed
-      const stepInfo = screen.getByText(/Step 1 of/);
-      expect(stepInfo).toBeInTheDocument();
+      const stepInfo = screen.getByText(/Step 1 of/)
+      expect(stepInfo).toBeInTheDocument()
 
       // Check that abacus is rendered
-      expect(screen.getByTestId("mock-abacus")).toBeInTheDocument();
+      expect(screen.getByTestId('mock-abacus')).toBeInTheDocument()
 
       // Check debug features are available
-      expect(screen.getByText("Debug")).toBeInTheDocument();
-      expect(screen.getByText("Steps")).toBeInTheDocument();
+      expect(screen.getByText('Debug')).toBeInTheDocument()
+      expect(screen.getByText('Steps')).toBeInTheDocument()
 
       // Test step navigation
-      const nextButton = screen.getByText("Next →");
-      expect(nextButton).toBeDisabled(); // Should be disabled until step is completed
+      const nextButton = screen.getByText('Next →')
+      expect(nextButton).toBeDisabled() // Should be disabled until step is completed
 
       // Complete a step by interacting with abacus
-      const bead = screen.getByTestId("mock-bead-0");
-      fireEvent.click(bead);
+      const bead = screen.getByTestId('mock-bead-0')
+      fireEvent.click(bead)
 
       // Check that step completion is handled
       await waitFor(() => {
-        const completionMessage = screen.queryByText(/Great! You completed/);
+        const completionMessage = screen.queryByText(/Great! You completed/)
         if (completionMessage) {
-          expect(completionMessage).toBeInTheDocument();
+          expect(completionMessage).toBeInTheDocument()
         }
-      });
-    });
+      })
+    })
 
-    it("supports debug panel and step jumping", async () => {
-      renderTutorialPlayer();
+    it('supports debug panel and step jumping', async () => {
+      renderTutorialPlayer()
 
       // Open step list
-      const stepsButton = screen.getByText("Steps");
-      fireEvent.click(stepsButton);
+      const stepsButton = screen.getByText('Steps')
+      fireEvent.click(stepsButton)
 
       // Check that step list is displayed
-      expect(screen.getByText("Tutorial Steps")).toBeInTheDocument();
+      expect(screen.getByText('Tutorial Steps')).toBeInTheDocument()
 
       // Check that steps are listed
-      const stepListItems = screen.getAllByText(/^\d+\./);
-      expect(stepListItems.length).toBeGreaterThan(0);
+      const stepListItems = screen.getAllByText(/^\d+\./)
+      expect(stepListItems.length).toBeGreaterThan(0)
 
       // Test auto-advance toggle
-      const autoAdvanceCheckbox = screen.getByLabelText("Auto-advance");
-      expect(autoAdvanceCheckbox).toBeInTheDocument();
+      const autoAdvanceCheckbox = screen.getByLabelText('Auto-advance')
+      expect(autoAdvanceCheckbox).toBeInTheDocument()
 
-      fireEvent.click(autoAdvanceCheckbox);
-      expect(autoAdvanceCheckbox).toBeChecked();
-    });
-  });
+      fireEvent.click(autoAdvanceCheckbox)
+      expect(autoAdvanceCheckbox).toBeChecked()
+    })
+  })
 
-  describe("Access Control Integration", () => {
-    it("enforces access control for editor features", () => {
+  describe('Access Control Integration', () => {
+    it('enforces access control for editor features', () => {
       // Test that editor is wrapped in access control
       render(
         <DevAccessProvider>
@@ -323,14 +319,14 @@ describe("Tutorial Editor Integration Tests", () => {
             onValidate={mockOnValidate}
             onPreview={mockOnPreview}
           />
-        </DevAccessProvider>,
-      );
+        </DevAccessProvider>
+      )
 
       // Should render editor when access is granted (DevAccessProvider grants access)
-      expect(screen.getByText("Edit Tutorial")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Edit Tutorial')).toBeInTheDocument()
+    })
 
-    it("handles read-only mode when save is not provided", () => {
+    it('handles read-only mode when save is not provided', () => {
       render(
         <DevAccessProvider>
           <TutorialEditor
@@ -338,18 +334,18 @@ describe("Tutorial Editor Integration Tests", () => {
             onValidate={mockOnValidate}
             onPreview={mockOnPreview}
           />
-        </DevAccessProvider>,
-      );
+        </DevAccessProvider>
+      )
 
       // Should not show edit button when onSave is not provided
-      expect(screen.queryByText("Edit Tutorial")).not.toBeInTheDocument();
-      expect(screen.getByText("Guided Addition Tutorial")).toBeInTheDocument();
-    });
-  });
+      expect(screen.queryByText('Edit Tutorial')).not.toBeInTheDocument()
+      expect(screen.getByText('Guided Addition Tutorial')).toBeInTheDocument()
+    })
+  })
 
-  describe("Error Handling and Edge Cases", () => {
-    it("handles tutorial with no steps gracefully", () => {
-      const emptyTutorial = { ...mockTutorial, steps: [] };
+  describe('Error Handling and Edge Cases', () => {
+    it('handles tutorial with no steps gracefully', () => {
+      const emptyTutorial = { ...mockTutorial, steps: [] }
 
       expect(() => {
         render(
@@ -360,114 +356,112 @@ describe("Tutorial Editor Integration Tests", () => {
               onValidate={mockOnValidate}
               onPreview={mockOnPreview}
             />
-          </DevAccessProvider>,
-        );
-      }).not.toThrow();
+          </DevAccessProvider>
+        )
+      }).not.toThrow()
 
-      expect(screen.getByText("Guided Addition Tutorial")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Guided Addition Tutorial')).toBeInTheDocument()
+    })
 
-    it("handles async validation errors gracefully", async () => {
-      mockOnValidate.mockRejectedValueOnce(
-        new Error("Validation service unavailable"),
-      );
+    it('handles async validation errors gracefully', async () => {
+      mockOnValidate.mockRejectedValueOnce(new Error('Validation service unavailable'))
 
-      renderTutorialEditor();
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('Save Changes'))
 
       await waitFor(() => {
-        expect(mockOnValidate).toHaveBeenCalled();
-        expect(mockOnSave).not.toHaveBeenCalled();
-      });
-    });
+        expect(mockOnValidate).toHaveBeenCalled()
+        expect(mockOnSave).not.toHaveBeenCalled()
+      })
+    })
 
-    it("handles save operation failures gracefully", async () => {
-      mockOnSave.mockRejectedValueOnce(new Error("Save failed"));
+    it('handles save operation failures gracefully', async () => {
+      mockOnSave.mockRejectedValueOnce(new Error('Save failed'))
 
-      renderTutorialEditor();
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('Save Changes'))
 
       await waitFor(() => {
-        expect(mockOnSave).toHaveBeenCalled();
-      });
-    });
+        expect(mockOnSave).toHaveBeenCalled()
+      })
+    })
 
-    it("preserves unsaved changes when canceling edit mode", () => {
-      renderTutorialEditor();
+    it('preserves unsaved changes when canceling edit mode', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
       // Make some changes
-      const titleInput = screen.getByDisplayValue("Guided Addition Tutorial");
-      fireEvent.change(titleInput, { target: { value: "Modified Title" } });
+      const titleInput = screen.getByDisplayValue('Guided Addition Tutorial')
+      fireEvent.change(titleInput, { target: { value: 'Modified Title' } })
 
       // Cancel editing
-      fireEvent.click(screen.getByText("Cancel"));
+      fireEvent.click(screen.getByText('Cancel'))
 
       // Should return to read-only mode with original title
-      expect(screen.getByText("Guided Addition Tutorial")).toBeInTheDocument();
-      expect(screen.queryByText("Modified Title")).not.toBeInTheDocument();
-    });
-  });
+      expect(screen.getByText('Guided Addition Tutorial')).toBeInTheDocument()
+      expect(screen.queryByText('Modified Title')).not.toBeInTheDocument()
+    })
+  })
 
-  describe("Performance and User Experience", () => {
-    it("provides immediate feedback for user actions", async () => {
-      renderTutorialEditor();
+  describe('Performance and User Experience', () => {
+    it('provides immediate feedback for user actions', async () => {
+      renderTutorialEditor()
 
       // Test immediate response to mode toggle
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      expect(screen.getByText("Save Changes")).toBeInTheDocument();
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      expect(screen.getByText('Save Changes')).toBeInTheDocument()
 
       // Test immediate response to form changes
-      const titleInput = screen.getByDisplayValue("Guided Addition Tutorial");
-      fireEvent.change(titleInput, { target: { value: "New Title" } });
-      expect(titleInput).toHaveValue("New Title");
+      const titleInput = screen.getByDisplayValue('Guided Addition Tutorial')
+      fireEvent.change(titleInput, { target: { value: 'New Title' } })
+      expect(titleInput).toHaveValue('New Title')
 
       // Test immediate response to step expansion
-      const firstStep = screen.getByText(/1\. .+/);
-      fireEvent.click(firstStep);
+      const firstStep = screen.getByText(/1\. .+/)
+      fireEvent.click(firstStep)
 
       // Should show step editing controls immediately
       await waitFor(() => {
-        expect(screen.queryByText("Preview")).toBeInTheDocument();
-      });
-    });
+        expect(screen.queryByText('Preview')).toBeInTheDocument()
+      })
+    })
 
-    it("maintains consistent state across operations", async () => {
-      renderTutorialEditor();
+    it('maintains consistent state across operations', async () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
       // Make multiple changes
-      const titleInput = screen.getByDisplayValue("Guided Addition Tutorial");
-      fireEvent.change(titleInput, { target: { value: "Updated Tutorial" } });
+      const titleInput = screen.getByDisplayValue('Guided Addition Tutorial')
+      fireEvent.change(titleInput, { target: { value: 'Updated Tutorial' } })
 
       // Add a step
-      const initialCount = screen.getAllByText(/^\d+\./).length;
-      fireEvent.click(screen.getByText("+ Add Step"));
+      const initialCount = screen.getAllByText(/^\d+\./).length
+      fireEvent.click(screen.getByText('+ Add Step'))
 
       await waitFor(() => {
-        expect(screen.getAllByText(/^\d+\./).length).toBe(initialCount + 1);
-      });
+        expect(screen.getAllByText(/^\d+\./).length).toBe(initialCount + 1)
+      })
 
       // Verify title change is still preserved
-      expect(screen.getByDisplayValue("Updated Tutorial")).toBeInTheDocument();
+      expect(screen.getByDisplayValue('Updated Tutorial')).toBeInTheDocument()
 
       // Save and verify both changes are included
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Save Changes'))
 
       await waitFor(() => {
         expect(mockOnSave).toHaveBeenCalledWith(
           expect.objectContaining({
-            title: "Updated Tutorial",
+            title: 'Updated Tutorial',
             steps: expect.arrayContaining([expect.any(Object)]),
-          }),
-        );
-      });
-    });
-  });
-});
+          })
+        )
+      })
+    })
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/TutorialEditor.test.tsx b/apps/web/src/components/tutorial/__tests__/TutorialEditor.test.tsx
index c8b778a3..95591339 100644
--- a/apps/web/src/components/tutorial/__tests__/TutorialEditor.test.tsx
+++ b/apps/web/src/components/tutorial/__tests__/TutorialEditor.test.tsx
@@ -1,596 +1,584 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { DevAccessProvider } from "../../../hooks/useAccessControl";
-import type { Tutorial, TutorialValidation } from "../../../types/tutorial";
-import { TutorialEditor } from "../TutorialEditor";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { DevAccessProvider } from '../../../hooks/useAccessControl'
+import type { Tutorial, TutorialValidation } from '../../../types/tutorial'
+import { TutorialEditor } from '../TutorialEditor'
 
 const mockTutorial: Tutorial = {
-  id: "test-tutorial",
-  title: "Test Tutorial",
-  description: "A test tutorial for editing",
-  category: "test",
-  difficulty: "beginner",
+  id: 'test-tutorial',
+  title: 'Test Tutorial',
+  description: 'A test tutorial for editing',
+  category: 'test',
+  difficulty: 'beginner',
   estimatedDuration: 15,
   steps: [
     {
-      id: "step-1",
-      title: "Step 1",
-      problem: "0 + 1",
-      description: "Add one",
+      id: 'step-1',
+      title: 'Step 1',
+      problem: '0 + 1',
+      description: 'Add one',
       startValue: 0,
       targetValue: 1,
-      highlightBeads: [{ columnIndex: 4, beadType: "earth", position: 0 }],
-      expectedAction: "add",
-      actionDescription: "Click the first bead",
+      highlightBeads: [{ columnIndex: 4, beadType: 'earth', position: 0 }],
+      expectedAction: 'add',
+      actionDescription: 'Click the first bead',
       tooltip: {
-        content: "Test tooltip",
-        explanation: "Test explanation",
+        content: 'Test tooltip',
+        explanation: 'Test explanation',
       },
       errorMessages: {
-        wrongBead: "Wrong bead clicked",
-        wrongAction: "Wrong action",
-        hint: "Test hint",
+        wrongBead: 'Wrong bead clicked',
+        wrongAction: 'Wrong action',
+        hint: 'Test hint',
       },
     },
     {
-      id: "step-2",
-      title: "Step 2",
-      problem: "1 + 1",
-      description: "Add another one",
+      id: 'step-2',
+      title: 'Step 2',
+      problem: '1 + 1',
+      description: 'Add another one',
       startValue: 1,
       targetValue: 2,
-      expectedAction: "add",
-      actionDescription: "Click the second bead",
+      expectedAction: 'add',
+      actionDescription: 'Click the second bead',
       tooltip: {
-        content: "Second tooltip",
-        explanation: "Second explanation",
+        content: 'Second tooltip',
+        explanation: 'Second explanation',
       },
       errorMessages: {
-        wrongBead: "Wrong bead for step 2",
-        wrongAction: "Wrong action for step 2",
-        hint: "Step 2 hint",
+        wrongBead: 'Wrong bead for step 2',
+        wrongAction: 'Wrong action for step 2',
+        hint: 'Step 2 hint',
       },
     },
   ],
-  tags: ["test"],
-  author: "Test Author",
-  version: "1.0.0",
+  tags: ['test'],
+  author: 'Test Author',
+  version: '1.0.0',
   createdAt: new Date(),
   updatedAt: new Date(),
   isPublished: false,
-};
+}
 
 const mockValidationResult: TutorialValidation = {
   isValid: true,
   errors: [],
   warnings: [],
-};
+}
 
-const renderTutorialEditor = (
-  props: Partial<React.ComponentProps<typeof TutorialEditor>> = {},
-) => {
+const renderTutorialEditor = (props: Partial<React.ComponentProps<typeof TutorialEditor>> = {}) => {
   const defaultProps = {
     tutorial: mockTutorial,
     onSave: vi.fn(),
     onValidate: vi.fn().mockResolvedValue(mockValidationResult),
     onPreview: vi.fn(),
-  };
+  }
 
   return render(
     <DevAccessProvider>
       <TutorialEditor {...defaultProps} {...props} />
-    </DevAccessProvider>,
-  );
-};
+    </DevAccessProvider>
+  )
+}
 
-describe("TutorialEditor", () => {
+describe('TutorialEditor', () => {
   beforeEach(() => {
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
-  describe("Initial Rendering", () => {
-    it("renders tutorial information in read-only mode by default", () => {
-      renderTutorialEditor();
+  describe('Initial Rendering', () => {
+    it('renders tutorial information in read-only mode by default', () => {
+      renderTutorialEditor()
 
-      expect(screen.getByText("Test Tutorial")).toBeInTheDocument();
-      expect(
-        screen.getByText("A test tutorial for editing"),
-      ).toBeInTheDocument();
-      expect(screen.getByText("test")).toBeInTheDocument();
-      expect(screen.getByText("beginner")).toBeInTheDocument();
-      expect(screen.getByText("15 minutes")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Test Tutorial')).toBeInTheDocument()
+      expect(screen.getByText('A test tutorial for editing')).toBeInTheDocument()
+      expect(screen.getByText('test')).toBeInTheDocument()
+      expect(screen.getByText('beginner')).toBeInTheDocument()
+      expect(screen.getByText('15 minutes')).toBeInTheDocument()
+    })
 
-    it("shows edit tutorial button when onSave is provided", () => {
-      renderTutorialEditor();
+    it('shows edit tutorial button when onSave is provided', () => {
+      renderTutorialEditor()
 
-      expect(screen.getByText("Edit Tutorial")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Edit Tutorial')).toBeInTheDocument()
+    })
 
-    it("does not show edit button when onSave is not provided", () => {
-      renderTutorialEditor({ onSave: undefined });
+    it('does not show edit button when onSave is not provided', () => {
+      renderTutorialEditor({ onSave: undefined })
 
-      expect(screen.queryByText("Edit Tutorial")).not.toBeInTheDocument();
-    });
+      expect(screen.queryByText('Edit Tutorial')).not.toBeInTheDocument()
+    })
 
-    it("displays tutorial steps in collapsed state", () => {
-      renderTutorialEditor();
+    it('displays tutorial steps in collapsed state', () => {
+      renderTutorialEditor()
 
-      expect(screen.getByText("1. Step 1")).toBeInTheDocument();
-      expect(screen.getByText("2. Step 2")).toBeInTheDocument();
-      expect(screen.getByText("0 + 1")).toBeInTheDocument();
-      expect(screen.getByText("1 + 1")).toBeInTheDocument();
-    });
-  });
+      expect(screen.getByText('1. Step 1')).toBeInTheDocument()
+      expect(screen.getByText('2. Step 2')).toBeInTheDocument()
+      expect(screen.getByText('0 + 1')).toBeInTheDocument()
+      expect(screen.getByText('1 + 1')).toBeInTheDocument()
+    })
+  })
 
-  describe("Edit Mode Toggle", () => {
-    it("enters edit mode when edit button is clicked", () => {
-      renderTutorialEditor();
+  describe('Edit Mode Toggle', () => {
+    it('enters edit mode when edit button is clicked', () => {
+      renderTutorialEditor()
 
-      const editButton = screen.getByText("Edit Tutorial");
-      fireEvent.click(editButton);
+      const editButton = screen.getByText('Edit Tutorial')
+      fireEvent.click(editButton)
 
-      expect(screen.getByText("Save Changes")).toBeInTheDocument();
-      expect(screen.getByText("Cancel")).toBeInTheDocument();
-      expect(screen.queryByText("Edit Tutorial")).not.toBeInTheDocument();
-    });
+      expect(screen.getByText('Save Changes')).toBeInTheDocument()
+      expect(screen.getByText('Cancel')).toBeInTheDocument()
+      expect(screen.queryByText('Edit Tutorial')).not.toBeInTheDocument()
+    })
 
-    it("exits edit mode when cancel button is clicked", () => {
-      renderTutorialEditor();
+    it('exits edit mode when cancel button is clicked', () => {
+      renderTutorialEditor()
 
       // Enter edit mode
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      expect(screen.getByText("Save Changes")).toBeInTheDocument();
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      expect(screen.getByText('Save Changes')).toBeInTheDocument()
 
       // Exit edit mode
-      fireEvent.click(screen.getByText("Cancel"));
-      expect(screen.getByText("Edit Tutorial")).toBeInTheDocument();
-      expect(screen.queryByText("Save Changes")).not.toBeInTheDocument();
-    });
+      fireEvent.click(screen.getByText('Cancel'))
+      expect(screen.getByText('Edit Tutorial')).toBeInTheDocument()
+      expect(screen.queryByText('Save Changes')).not.toBeInTheDocument()
+    })
 
-    it("shows form inputs in edit mode", () => {
-      renderTutorialEditor();
+    it('shows form inputs in edit mode', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
       // Check for tutorial metadata inputs
-      expect(screen.getByDisplayValue("Test Tutorial")).toBeInTheDocument();
-      expect(
-        screen.getByDisplayValue("A test tutorial for editing"),
-      ).toBeInTheDocument();
-      expect(screen.getByDisplayValue("test")).toBeInTheDocument();
-    });
-  });
+      expect(screen.getByDisplayValue('Test Tutorial')).toBeInTheDocument()
+      expect(screen.getByDisplayValue('A test tutorial for editing')).toBeInTheDocument()
+      expect(screen.getByDisplayValue('test')).toBeInTheDocument()
+    })
+  })
 
-  describe("Tutorial Metadata Editing", () => {
-    it("allows editing tutorial title", () => {
-      renderTutorialEditor();
+  describe('Tutorial Metadata Editing', () => {
+    it('allows editing tutorial title', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
-      const titleInput = screen.getByDisplayValue("Test Tutorial");
+      const titleInput = screen.getByDisplayValue('Test Tutorial')
       fireEvent.change(titleInput, {
-        target: { value: "Updated Tutorial Title" },
-      });
+        target: { value: 'Updated Tutorial Title' },
+      })
 
-      expect(titleInput).toHaveValue("Updated Tutorial Title");
-    });
+      expect(titleInput).toHaveValue('Updated Tutorial Title')
+    })
 
-    it("allows editing tutorial description", () => {
-      renderTutorialEditor();
+    it('allows editing tutorial description', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
-      const descriptionInput = screen.getByDisplayValue(
-        "A test tutorial for editing",
-      );
+      const descriptionInput = screen.getByDisplayValue('A test tutorial for editing')
       fireEvent.change(descriptionInput, {
-        target: { value: "Updated description" },
-      });
+        target: { value: 'Updated description' },
+      })
 
-      expect(descriptionInput).toHaveValue("Updated description");
-    });
+      expect(descriptionInput).toHaveValue('Updated description')
+    })
 
-    it("allows editing category and difficulty", () => {
-      renderTutorialEditor();
+    it('allows editing category and difficulty', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
-      const categoryInput = screen.getByDisplayValue("test");
-      const difficultySelect = screen.getByDisplayValue("beginner");
+      const categoryInput = screen.getByDisplayValue('test')
+      const difficultySelect = screen.getByDisplayValue('beginner')
 
-      fireEvent.change(categoryInput, { target: { value: "advanced" } });
-      fireEvent.change(difficultySelect, { target: { value: "intermediate" } });
+      fireEvent.change(categoryInput, { target: { value: 'advanced' } })
+      fireEvent.change(difficultySelect, { target: { value: 'intermediate' } })
 
-      expect(categoryInput).toHaveValue("advanced");
-      expect(difficultySelect).toHaveValue("intermediate");
-    });
+      expect(categoryInput).toHaveValue('advanced')
+      expect(difficultySelect).toHaveValue('intermediate')
+    })
 
-    it("allows editing estimated duration", () => {
-      renderTutorialEditor();
+    it('allows editing estimated duration', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
-      const durationInput = screen.getByDisplayValue("15");
-      fireEvent.change(durationInput, { target: { value: "20" } });
+      const durationInput = screen.getByDisplayValue('15')
+      fireEvent.change(durationInput, { target: { value: '20' } })
 
-      expect(durationInput).toHaveValue("20");
-    });
+      expect(durationInput).toHaveValue('20')
+    })
 
-    it("allows editing tags", () => {
-      renderTutorialEditor();
+    it('allows editing tags', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
-      const tagsInput = screen.getByDisplayValue("test");
+      const tagsInput = screen.getByDisplayValue('test')
       fireEvent.change(tagsInput, {
-        target: { value: "test, advanced, math" },
-      });
+        target: { value: 'test, advanced, math' },
+      })
 
-      expect(tagsInput).toHaveValue("test, advanced, math");
-    });
-  });
+      expect(tagsInput).toHaveValue('test, advanced, math')
+    })
+  })
 
-  describe("Step Management", () => {
-    it("expands step editing form when step is clicked", () => {
-      renderTutorialEditor();
+  describe('Step Management', () => {
+    it('expands step editing form when step is clicked', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
-      const stepButton = screen.getByText("1. Step 1");
-      fireEvent.click(stepButton);
+      const stepButton = screen.getByText('1. Step 1')
+      fireEvent.click(stepButton)
 
       // Check for step editing inputs
-      expect(screen.getByDisplayValue("Step 1")).toBeInTheDocument();
-      expect(screen.getByDisplayValue("0 + 1")).toBeInTheDocument();
-      expect(screen.getByDisplayValue("Add one")).toBeInTheDocument();
-    });
+      expect(screen.getByDisplayValue('Step 1')).toBeInTheDocument()
+      expect(screen.getByDisplayValue('0 + 1')).toBeInTheDocument()
+      expect(screen.getByDisplayValue('Add one')).toBeInTheDocument()
+    })
 
-    it("allows editing step properties", () => {
-      renderTutorialEditor();
+    it('allows editing step properties', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("1. Step 1"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('1. Step 1'))
 
-      const stepTitleInput = screen.getByDisplayValue("Step 1");
-      const problemInput = screen.getByDisplayValue("0 + 1");
-      const descriptionInput = screen.getByDisplayValue("Add one");
+      const stepTitleInput = screen.getByDisplayValue('Step 1')
+      const problemInput = screen.getByDisplayValue('0 + 1')
+      const descriptionInput = screen.getByDisplayValue('Add one')
 
       fireEvent.change(stepTitleInput, {
-        target: { value: "Updated Step Title" },
-      });
-      fireEvent.change(problemInput, { target: { value: "2 + 2" } });
+        target: { value: 'Updated Step Title' },
+      })
+      fireEvent.change(problemInput, { target: { value: '2 + 2' } })
       fireEvent.change(descriptionInput, {
-        target: { value: "Updated description" },
-      });
+        target: { value: 'Updated description' },
+      })
 
-      expect(stepTitleInput).toHaveValue("Updated Step Title");
-      expect(problemInput).toHaveValue("2 + 2");
-      expect(descriptionInput).toHaveValue("Updated description");
-    });
+      expect(stepTitleInput).toHaveValue('Updated Step Title')
+      expect(problemInput).toHaveValue('2 + 2')
+      expect(descriptionInput).toHaveValue('Updated description')
+    })
 
-    it("shows add step button in edit mode", () => {
-      renderTutorialEditor();
+    it('shows add step button in edit mode', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
-      expect(screen.getByText("+ Add Step")).toBeInTheDocument();
-    });
+      expect(screen.getByText('+ Add Step')).toBeInTheDocument()
+    })
 
-    it("adds new step when add button is clicked", () => {
-      renderTutorialEditor();
+    it('adds new step when add button is clicked', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
-      const initialStepCount = screen.getAllByText(/^\d+\./).length;
-      fireEvent.click(screen.getByText("+ Add Step"));
+      const initialStepCount = screen.getAllByText(/^\d+\./).length
+      fireEvent.click(screen.getByText('+ Add Step'))
 
-      const newStepCount = screen.getAllByText(/^\d+\./).length;
-      expect(newStepCount).toBe(initialStepCount + 1);
-    });
+      const newStepCount = screen.getAllByText(/^\d+\./).length
+      expect(newStepCount).toBe(initialStepCount + 1)
+    })
 
-    it("shows step action buttons when step is expanded", () => {
-      renderTutorialEditor();
+    it('shows step action buttons when step is expanded', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("1. Step 1"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('1. Step 1'))
 
-      expect(screen.getByText("Preview")).toBeInTheDocument();
-      expect(screen.getByText("Duplicate")).toBeInTheDocument();
-      expect(screen.getByText("Delete")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Preview')).toBeInTheDocument()
+      expect(screen.getByText('Duplicate')).toBeInTheDocument()
+      expect(screen.getByText('Delete')).toBeInTheDocument()
+    })
 
-    it("duplicates step when duplicate button is clicked", () => {
-      renderTutorialEditor();
+    it('duplicates step when duplicate button is clicked', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("1. Step 1"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('1. Step 1'))
 
-      const initialStepCount = screen.getAllByText(/^\d+\./).length;
-      fireEvent.click(screen.getByText("Duplicate"));
+      const initialStepCount = screen.getAllByText(/^\d+\./).length
+      fireEvent.click(screen.getByText('Duplicate'))
 
-      const newStepCount = screen.getAllByText(/^\d+\./).length;
-      expect(newStepCount).toBe(initialStepCount + 1);
-    });
+      const newStepCount = screen.getAllByText(/^\d+\./).length
+      expect(newStepCount).toBe(initialStepCount + 1)
+    })
 
-    it("removes step when delete button is clicked", () => {
-      renderTutorialEditor();
+    it('removes step when delete button is clicked', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("1. Step 1"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('1. Step 1'))
 
-      const initialStepCount = screen.getAllByText(/^\d+\./).length;
-      fireEvent.click(screen.getByText("Delete"));
+      const initialStepCount = screen.getAllByText(/^\d+\./).length
+      fireEvent.click(screen.getByText('Delete'))
 
-      const newStepCount = screen.getAllByText(/^\d+\./).length;
-      expect(newStepCount).toBe(initialStepCount - 1);
-    });
-  });
+      const newStepCount = screen.getAllByText(/^\d+\./).length
+      expect(newStepCount).toBe(initialStepCount - 1)
+    })
+  })
 
-  describe("Preview Functionality", () => {
-    it("calls onPreview when step preview button is clicked", () => {
-      const onPreview = vi.fn();
-      renderTutorialEditor({ onPreview });
+  describe('Preview Functionality', () => {
+    it('calls onPreview when step preview button is clicked', () => {
+      const onPreview = vi.fn()
+      renderTutorialEditor({ onPreview })
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("1. Step 1"));
-      fireEvent.click(screen.getByText("Preview"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('1. Step 1'))
+      fireEvent.click(screen.getByText('Preview'))
 
-      expect(onPreview).toHaveBeenCalledWith(expect.any(Object), 0);
-    });
+      expect(onPreview).toHaveBeenCalledWith(expect.any(Object), 0)
+    })
 
-    it("calls onPreview when global preview button is clicked", () => {
-      const onPreview = vi.fn();
-      renderTutorialEditor({ onPreview });
+    it('calls onPreview when global preview button is clicked', () => {
+      const onPreview = vi.fn()
+      renderTutorialEditor({ onPreview })
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
-      const previewButtons = screen.getAllByText("Preview Tutorial");
-      fireEvent.click(previewButtons[0]);
+      const previewButtons = screen.getAllByText('Preview Tutorial')
+      fireEvent.click(previewButtons[0])
 
-      expect(onPreview).toHaveBeenCalledWith(expect.any(Object), 0);
-    });
-  });
+      expect(onPreview).toHaveBeenCalledWith(expect.any(Object), 0)
+    })
+  })
 
-  describe("Save Functionality", () => {
-    it("calls onSave when save button is clicked", async () => {
-      const onSave = vi.fn();
-      renderTutorialEditor({ onSave });
+  describe('Save Functionality', () => {
+    it('calls onSave when save button is clicked', async () => {
+      const onSave = vi.fn()
+      renderTutorialEditor({ onSave })
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
       // Make a change
-      const titleInput = screen.getByDisplayValue("Test Tutorial");
-      fireEvent.change(titleInput, { target: { value: "Updated Title" } });
+      const titleInput = screen.getByDisplayValue('Test Tutorial')
+      fireEvent.change(titleInput, { target: { value: 'Updated Title' } })
 
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Save Changes'))
 
       await waitFor(() => {
         expect(onSave).toHaveBeenCalledWith(
           expect.objectContaining({
-            title: "Updated Title",
-          }),
-        );
-      });
-    });
+            title: 'Updated Title',
+          })
+        )
+      })
+    })
 
-    it("calls validation before saving", async () => {
-      const onValidate = vi.fn().mockResolvedValue(mockValidationResult);
-      const onSave = vi.fn();
-      renderTutorialEditor({ onSave, onValidate });
+    it('calls validation before saving', async () => {
+      const onValidate = vi.fn().mockResolvedValue(mockValidationResult)
+      const onSave = vi.fn()
+      renderTutorialEditor({ onSave, onValidate })
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('Save Changes'))
 
       await waitFor(() => {
-        expect(onValidate).toHaveBeenCalled();
-      });
-    });
+        expect(onValidate).toHaveBeenCalled()
+      })
+    })
 
-    it("prevents saving when validation fails", async () => {
+    it('prevents saving when validation fails', async () => {
       const onValidate = vi.fn().mockResolvedValue({
         isValid: false,
         errors: [
           {
-            stepId: "",
-            field: "title",
-            message: "Title required",
-            severity: "error",
+            stepId: '',
+            field: 'title',
+            message: 'Title required',
+            severity: 'error',
           },
         ],
         warnings: [],
-      });
-      const onSave = vi.fn();
-      renderTutorialEditor({ onSave, onValidate });
+      })
+      const onSave = vi.fn()
+      renderTutorialEditor({ onSave, onValidate })
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('Save Changes'))
 
       await waitFor(() => {
-        expect(onValidate).toHaveBeenCalled();
-        expect(onSave).not.toHaveBeenCalled();
-      });
-    });
-  });
+        expect(onValidate).toHaveBeenCalled()
+        expect(onSave).not.toHaveBeenCalled()
+      })
+    })
+  })
 
-  describe("Validation Display", () => {
-    it("shows validation errors when validation fails", async () => {
+  describe('Validation Display', () => {
+    it('shows validation errors when validation fails', async () => {
       const onValidate = vi.fn().mockResolvedValue({
         isValid: false,
         errors: [
           {
-            stepId: "",
-            field: "title",
-            message: "Title is required",
-            severity: "error",
+            stepId: '',
+            field: 'title',
+            message: 'Title is required',
+            severity: 'error',
           },
         ],
         warnings: [],
-      });
-      renderTutorialEditor({ onValidate });
+      })
+      renderTutorialEditor({ onValidate })
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('Save Changes'))
 
       await waitFor(() => {
-        expect(screen.getByText("Title is required")).toBeInTheDocument();
-      });
-    });
+        expect(screen.getByText('Title is required')).toBeInTheDocument()
+      })
+    })
 
-    it("shows validation warnings", async () => {
+    it('shows validation warnings', async () => {
       const onValidate = vi.fn().mockResolvedValue({
         isValid: true,
         errors: [],
         warnings: [
           {
-            stepId: "",
-            field: "description",
-            message: "Description could be longer",
-            severity: "warning",
+            stepId: '',
+            field: 'description',
+            message: 'Description could be longer',
+            severity: 'warning',
           },
         ],
-      });
-      renderTutorialEditor({ onValidate });
+      })
+      renderTutorialEditor({ onValidate })
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('Save Changes'))
 
       await waitFor(() => {
-        expect(
-          screen.getByText("Description could be longer"),
-        ).toBeInTheDocument();
-      });
-    });
+        expect(screen.getByText('Description could be longer')).toBeInTheDocument()
+      })
+    })
 
-    it("displays step-specific validation errors", async () => {
+    it('displays step-specific validation errors', async () => {
       const onValidate = vi.fn().mockResolvedValue({
         isValid: false,
         errors: [
           {
-            stepId: "step-1",
-            field: "problem",
-            message: "Problem is required",
-            severity: "error",
+            stepId: 'step-1',
+            field: 'problem',
+            message: 'Problem is required',
+            severity: 'error',
           },
         ],
         warnings: [],
-      });
-      renderTutorialEditor({ onValidate });
+      })
+      renderTutorialEditor({ onValidate })
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("1. Step 1"));
-      fireEvent.click(screen.getByText("Save Changes"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('1. Step 1'))
+      fireEvent.click(screen.getByText('Save Changes'))
 
       await waitFor(() => {
-        expect(screen.getByText("Problem is required")).toBeInTheDocument();
-      });
-    });
-  });
+        expect(screen.getByText('Problem is required')).toBeInTheDocument()
+      })
+    })
+  })
 
-  describe("Step Reordering", () => {
-    it("shows move up/down buttons for steps", () => {
-      renderTutorialEditor();
+  describe('Step Reordering', () => {
+    it('shows move up/down buttons for steps', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("1. Step 1"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('1. Step 1'))
 
       // Step 1 should have move down button but no move up
-      expect(screen.getByLabelText(/Move.*down/i)).toBeInTheDocument();
-      expect(screen.queryByLabelText(/Move.*up/i)).not.toBeInTheDocument();
-    });
+      expect(screen.getByLabelText(/Move.*down/i)).toBeInTheDocument()
+      expect(screen.queryByLabelText(/Move.*up/i)).not.toBeInTheDocument()
+    })
 
-    it("enables both move buttons for middle steps", () => {
+    it('enables both move buttons for middle steps', () => {
       const tutorialWithMoreSteps = {
         ...mockTutorial,
         steps: [
           ...mockTutorial.steps,
           {
-            id: "step-3",
-            title: "Step 3",
-            problem: "2 + 1",
-            description: "Add one more",
+            id: 'step-3',
+            title: 'Step 3',
+            problem: '2 + 1',
+            description: 'Add one more',
             startValue: 2,
             targetValue: 3,
-            expectedAction: "add",
-            actionDescription: "Click the third bead",
+            expectedAction: 'add',
+            actionDescription: 'Click the third bead',
             tooltip: {
-              content: "Third tooltip",
-              explanation: "Third explanation",
+              content: 'Third tooltip',
+              explanation: 'Third explanation',
             },
             errorMessages: {
-              wrongBead: "Wrong bead",
-              wrongAction: "Wrong action",
-              hint: "Hint",
+              wrongBead: 'Wrong bead',
+              wrongAction: 'Wrong action',
+              hint: 'Hint',
             },
           },
         ],
-      };
+      }
 
-      renderTutorialEditor({ tutorial: tutorialWithMoreSteps });
+      renderTutorialEditor({ tutorial: tutorialWithMoreSteps })
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("2. Step 2"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('2. Step 2'))
 
       // Middle step should have both buttons
-      expect(screen.getByLabelText(/Move.*up/i)).toBeInTheDocument();
-      expect(screen.getByLabelText(/Move.*down/i)).toBeInTheDocument();
-    });
-  });
+      expect(screen.getByLabelText(/Move.*up/i)).toBeInTheDocument()
+      expect(screen.getByLabelText(/Move.*down/i)).toBeInTheDocument()
+    })
+  })
 
-  describe("Accessibility", () => {
-    it("has proper ARIA attributes for form controls", () => {
-      renderTutorialEditor();
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes for form controls', () => {
+      renderTutorialEditor()
 
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
-      const titleInput = screen.getByDisplayValue("Test Tutorial");
-      expect(titleInput).toHaveAttribute("aria-label");
-    });
+      const titleInput = screen.getByDisplayValue('Test Tutorial')
+      expect(titleInput).toHaveAttribute('aria-label')
+    })
 
-    it("has proper heading structure", () => {
-      renderTutorialEditor();
+    it('has proper heading structure', () => {
+      renderTutorialEditor()
 
-      expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
-        "Test Tutorial",
-      );
-    });
+      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Test Tutorial')
+    })
 
-    it("has proper button roles and labels", () => {
-      renderTutorialEditor();
+    it('has proper button roles and labels', () => {
+      renderTutorialEditor()
 
-      const editButton = screen.getByText("Edit Tutorial");
-      expect(editButton).toHaveAttribute("type", "button");
-    });
-  });
+      const editButton = screen.getByText('Edit Tutorial')
+      expect(editButton).toHaveAttribute('type', 'button')
+    })
+  })
 
-  describe("Edge Cases", () => {
-    it("handles empty tutorial gracefully", () => {
+  describe('Edge Cases', () => {
+    it('handles empty tutorial gracefully', () => {
       const emptyTutorial = {
         ...mockTutorial,
         steps: [],
-        title: "",
-        description: "",
-      };
+        title: '',
+        description: '',
+      }
 
       expect(() => {
-        renderTutorialEditor({ tutorial: emptyTutorial });
-      }).not.toThrow();
-    });
+        renderTutorialEditor({ tutorial: emptyTutorial })
+      }).not.toThrow()
+    })
 
-    it("handles tutorial with single step", () => {
+    it('handles tutorial with single step', () => {
       const singleStepTutorial = {
         ...mockTutorial,
         steps: [mockTutorial.steps[0]],
-      };
+      }
 
-      renderTutorialEditor({ tutorial: singleStepTutorial });
-      fireEvent.click(screen.getByText("Edit Tutorial"));
+      renderTutorialEditor({ tutorial: singleStepTutorial })
+      fireEvent.click(screen.getByText('Edit Tutorial'))
 
-      expect(screen.getByText("1. Step 1")).toBeInTheDocument();
-      expect(screen.queryByText("2.")).not.toBeInTheDocument();
-    });
+      expect(screen.getByText('1. Step 1')).toBeInTheDocument()
+      expect(screen.queryByText('2.')).not.toBeInTheDocument()
+    })
 
-    it("handles invalid step data gracefully", () => {
+    it('handles invalid step data gracefully', () => {
       const invalidStepTutorial = {
         ...mockTutorial,
         steps: [
@@ -600,45 +588,45 @@ describe("TutorialEditor", () => {
             targetValue: -1,
           },
         ],
-      };
+      }
 
       expect(() => {
-        renderTutorialEditor({ tutorial: invalidStepTutorial });
-      }).not.toThrow();
-    });
+        renderTutorialEditor({ tutorial: invalidStepTutorial })
+      }).not.toThrow()
+    })
 
-    it("prevents deleting the last step", () => {
+    it('prevents deleting the last step', () => {
       const singleStepTutorial = {
         ...mockTutorial,
         steps: [mockTutorial.steps[0]],
-      };
+      }
 
-      renderTutorialEditor({ tutorial: singleStepTutorial });
-      fireEvent.click(screen.getByText("Edit Tutorial"));
-      fireEvent.click(screen.getByText("1. Step 1"));
+      renderTutorialEditor({ tutorial: singleStepTutorial })
+      fireEvent.click(screen.getByText('Edit Tutorial'))
+      fireEvent.click(screen.getByText('1. Step 1'))
 
-      const deleteButton = screen.getByText("Delete");
-      expect(deleteButton).toBeDisabled();
-    });
-  });
+      const deleteButton = screen.getByText('Delete')
+      expect(deleteButton).toBeDisabled()
+    })
+  })
 
-  describe("Read-only Mode", () => {
-    it("does not show edit controls when onSave is not provided", () => {
-      renderTutorialEditor({ onSave: undefined });
+  describe('Read-only Mode', () => {
+    it('does not show edit controls when onSave is not provided', () => {
+      renderTutorialEditor({ onSave: undefined })
 
-      expect(screen.queryByText("Edit Tutorial")).not.toBeInTheDocument();
-      expect(screen.getByText("Test Tutorial")).toBeInTheDocument();
-      expect(screen.getByText("1. Step 1")).toBeInTheDocument();
-    });
+      expect(screen.queryByText('Edit Tutorial')).not.toBeInTheDocument()
+      expect(screen.getByText('Test Tutorial')).toBeInTheDocument()
+      expect(screen.getByText('1. Step 1')).toBeInTheDocument()
+    })
 
-    it("allows clicking steps in read-only mode for viewing", () => {
-      renderTutorialEditor({ onSave: undefined });
+    it('allows clicking steps in read-only mode for viewing', () => {
+      renderTutorialEditor({ onSave: undefined })
 
-      fireEvent.click(screen.getByText("1. Step 1"));
+      fireEvent.click(screen.getByText('1. Step 1'))
 
       // Should show step details but no edit controls
-      expect(screen.getByText("0 + 1")).toBeInTheDocument();
-      expect(screen.queryByDisplayValue("Step 1")).not.toBeInTheDocument();
-    });
-  });
-});
+      expect(screen.getByText('0 + 1')).toBeInTheDocument()
+      expect(screen.queryByDisplayValue('Step 1')).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/TutorialPlayer.integration.test.tsx b/apps/web/src/components/tutorial/__tests__/TutorialPlayer.integration.test.tsx
index 74e3628a..829faa95 100644
--- a/apps/web/src/components/tutorial/__tests__/TutorialPlayer.integration.test.tsx
+++ b/apps/web/src/components/tutorial/__tests__/TutorialPlayer.integration.test.tsx
@@ -1,17 +1,14 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { vi } from "vitest";
-import type { Tutorial } from "../../../types/tutorial";
-import { TutorialPlayer } from "../TutorialPlayer";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
+import type { Tutorial } from '../../../types/tutorial'
+import { TutorialPlayer } from '../TutorialPlayer'
 
 // Mock the AbacusReact component for integration tests
-vi.mock("@soroban/abacus-react", () => ({
+vi.mock('@soroban/abacus-react', () => ({
   AbacusReact: ({ value, onValueChange, onClick }: any) => (
     <div data-testid="mock-abacus">
       <div data-testid="abacus-value">{value}</div>
-      <button
-        data-testid="bead-click"
-        onClick={() => onValueChange?.(value + 1)}
-      >
+      <button data-testid="bead-click" onClick={() => onValueChange?.(value + 1)}>
         Click Bead (+1)
       </button>
       <button data-testid="set-target" onClick={() => onValueChange?.(42)}>
@@ -19,122 +16,118 @@ vi.mock("@soroban/abacus-react", () => ({
       </button>
     </div>
   ),
-  AbacusOverlay: ({ children }: any) => (
-    <div data-testid="mock-overlay">{children}</div>
-  ),
-}));
+  AbacusOverlay: ({ children }: any) => <div data-testid="mock-overlay">{children}</div>,
+}))
 
 // Mock tutorial data with multi-step instructions
 const mockTutorial: Tutorial = {
-  id: "integration-test",
-  title: "Integration Test Tutorial",
-  description: "Testing TutorialPlayer integration",
+  id: 'integration-test',
+  title: 'Integration Test Tutorial',
+  description: 'Testing TutorialPlayer integration',
   steps: [
     {
-      id: "step-1",
-      title: "First Step",
-      problem: "5 + 3 = ?",
-      description: "Add 3 to 5",
+      id: 'step-1',
+      title: 'First Step',
+      problem: '5 + 3 = ?',
+      description: 'Add 3 to 5',
       startValue: 5,
       targetValue: 8,
       multiStepInstructions: [
-        "First, show 5 on the abacus",
-        "Then add 3 more",
-        "Result should be 8",
+        'First, show 5 on the abacus',
+        'Then add 3 more',
+        'Result should be 8',
       ],
     },
     {
-      id: "step-2",
-      title: "Second Step",
-      problem: "10 - 2 = ?",
-      description: "Subtract 2 from 10",
+      id: 'step-2',
+      title: 'Second Step',
+      problem: '10 - 2 = ?',
+      description: 'Subtract 2 from 10',
       startValue: 10,
       targetValue: 8,
     },
   ],
-};
+}
 
-describe("TutorialPlayer Integration", () => {
+describe('TutorialPlayer Integration', () => {
   beforeEach(() => {
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
-  describe("AbacusReact Integration", () => {
-    it("should pass correct startValue to AbacusReact on step initialization", async () => {
-      render(<TutorialPlayer tutorial={mockTutorial} />);
+  describe('AbacusReact Integration', () => {
+    it('should pass correct startValue to AbacusReact on step initialization', async () => {
+      render(<TutorialPlayer tutorial={mockTutorial} />)
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
-    });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
+    })
 
-    it("should update AbacusReact value when navigating between steps", async () => {
-      render(<TutorialPlayer tutorial={mockTutorial} showDebugPanel={true} />);
+    it('should update AbacusReact value when navigating between steps', async () => {
+      render(<TutorialPlayer tutorial={mockTutorial} showDebugPanel={true} />)
 
       // Initial step should show startValue = 5
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
 
       // Navigate to next step
-      const nextButton = screen.getByText("Next →");
-      fireEvent.click(nextButton);
+      const nextButton = screen.getByText('Next →')
+      fireEvent.click(nextButton)
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("10");
-      });
-    });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('10')
+      })
+    })
 
-    it("should handle user interactions with AbacusReact", async () => {
-      render(<TutorialPlayer tutorial={mockTutorial} />);
+    it('should handle user interactions with AbacusReact', async () => {
+      render(<TutorialPlayer tutorial={mockTutorial} />)
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
 
       // User clicks a bead
-      fireEvent.click(screen.getByTestId("bead-click"));
+      fireEvent.click(screen.getByTestId('bead-click'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("6");
-      });
-    });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('6')
+      })
+    })
 
-    it("should complete step when user reaches target value", async () => {
-      render(<TutorialPlayer tutorial={mockTutorial} />);
+    it('should complete step when user reaches target value', async () => {
+      render(<TutorialPlayer tutorial={mockTutorial} />)
 
       // Initial state
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
 
       // Simulate user changing abacus to target value (8)
       // We'll click the bead 3 times to go from 5 to 8
-      fireEvent.click(screen.getByTestId("bead-click")); // 6
-      fireEvent.click(screen.getByTestId("bead-click")); // 7
-      fireEvent.click(screen.getByTestId("bead-click")); // 8
+      fireEvent.click(screen.getByTestId('bead-click')) // 6
+      fireEvent.click(screen.getByTestId('bead-click')) // 7
+      fireEvent.click(screen.getByTestId('bead-click')) // 8
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("8");
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('8')
         // Should show success feedback
-        expect(screen.getByText(/excellent/i)).toBeInTheDocument();
-      });
-    });
-  });
+        expect(screen.getByText(/excellent/i)).toBeInTheDocument()
+      })
+    })
+  })
 
-  describe("Multi-Step Progression", () => {
-    it("should show multi-step instructions for steps that have them", async () => {
-      render(<TutorialPlayer tutorial={mockTutorial} />);
+  describe('Multi-Step Progression', () => {
+    it('should show multi-step instructions for steps that have them', async () => {
+      render(<TutorialPlayer tutorial={mockTutorial} />)
 
       await waitFor(() => {
         // Should show multi-step navigation controls
-        expect(
-          screen.getByText("First, show 5 on the abacus"),
-        ).toBeInTheDocument();
-      });
-    });
+        expect(screen.getByText('First, show 5 on the abacus')).toBeInTheDocument()
+      })
+    })
 
-    it("should advance multi-steps automatically when user reaches expected values", async () => {
+    it('should advance multi-steps automatically when user reaches expected values', async () => {
       const tutorialWithExpectedSteps: Tutorial = {
         ...mockTutorial,
         steps: [
@@ -144,17 +137,17 @@ describe("TutorialPlayer Integration", () => {
             // For testing, we'll simulate the expected intermediate values
           },
         ],
-      };
+      }
 
-      render(<TutorialPlayer tutorial={tutorialWithExpectedSteps} />);
+      render(<TutorialPlayer tutorial={tutorialWithExpectedSteps} />)
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
 
       // Simulate reaching an intermediate target that should advance multi-step
       // This would be based on the unified step generator's expected values
-      fireEvent.click(screen.getByTestId("bead-click"));
+      fireEvent.click(screen.getByTestId('bead-click'))
 
       // The multi-step should advance after a delay
       await waitFor(
@@ -163,32 +156,32 @@ describe("TutorialPlayer Integration", () => {
           // Since we don't have the exact expected values in this test,
           // we're testing the integration pattern rather than specific values
         },
-        { timeout: 2000 },
-      );
-    });
+        { timeout: 2000 }
+      )
+    })
 
-    it("should allow manual multi-step navigation", async () => {
-      render(<TutorialPlayer tutorial={mockTutorial} />);
+    it('should allow manual multi-step navigation', async () => {
+      render(<TutorialPlayer tutorial={mockTutorial} />)
 
       // Should show multi-step controls
       await waitFor(() => {
-        expect(screen.getByText("⏪ Prev")).toBeInTheDocument();
-        expect(screen.getByText("Next ⏩")).toBeInTheDocument();
-      });
+        expect(screen.getByText('⏪ Prev')).toBeInTheDocument()
+        expect(screen.getByText('Next ⏩')).toBeInTheDocument()
+      })
 
       // Navigate to next multi-step
-      fireEvent.click(screen.getByText("Next ⏩"));
+      fireEvent.click(screen.getByText('Next ⏩'))
 
       await waitFor(() => {
-        expect(screen.getByText("Then add 3 more")).toBeInTheDocument();
-      });
-    });
-  });
+        expect(screen.getByText('Then add 3 more')).toBeInTheDocument()
+      })
+    })
+  })
 
-  describe("Context State Management", () => {
-    it("should maintain consistent state across components", async () => {
-      const onStepChange = vi.fn();
-      const onStepComplete = vi.fn();
+  describe('Context State Management', () => {
+    it('should maintain consistent state across components', async () => {
+      const onStepChange = vi.fn()
+      const onStepComplete = vi.fn()
 
       render(
         <TutorialPlayer
@@ -196,143 +189,141 @@ describe("TutorialPlayer Integration", () => {
           onStepChange={onStepChange}
           onStepComplete={onStepComplete}
           showDebugPanel={true}
-        />,
-      );
+        />
+      )
 
       // Initial step change should be called
       await waitFor(() => {
-        expect(onStepChange).toHaveBeenCalledWith(0, mockTutorial.steps[0]);
-      });
+        expect(onStepChange).toHaveBeenCalledWith(0, mockTutorial.steps[0])
+      })
 
       // Navigate to next step
-      fireEvent.click(screen.getByText("Next →"));
+      fireEvent.click(screen.getByText('Next →'))
 
       await waitFor(() => {
-        expect(onStepChange).toHaveBeenCalledWith(1, mockTutorial.steps[1]);
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("10");
-      });
-    });
+        expect(onStepChange).toHaveBeenCalledWith(1, mockTutorial.steps[1])
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('10')
+      })
+    })
 
-    it("should prevent feedback loops between AbacusReact and context", async () => {
-      const _onValueChange = vi.fn();
+    it('should prevent feedback loops between AbacusReact and context', async () => {
+      const _onValueChange = vi.fn()
 
-      render(<TutorialPlayer tutorial={mockTutorial} showDebugPanel={true} />);
+      render(<TutorialPlayer tutorial={mockTutorial} showDebugPanel={true} />)
 
       // Initial value should be set without causing loops
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
 
       // Navigate between steps rapidly
-      fireEvent.click(screen.getByText("Next →"));
-      fireEvent.click(screen.getByText("← Prev"));
-      fireEvent.click(screen.getByText("Next →"));
+      fireEvent.click(screen.getByText('Next →'))
+      fireEvent.click(screen.getByText('← Prev'))
+      fireEvent.click(screen.getByText('Next →'))
 
       // Should handle rapid navigation without getting stuck
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("10");
-      });
-    });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('10')
+      })
+    })
 
-    it("should handle programmatic changes correctly", async () => {
-      render(<TutorialPlayer tutorial={mockTutorial} />);
+    it('should handle programmatic changes correctly', async () => {
+      render(<TutorialPlayer tutorial={mockTutorial} />)
 
       // Initial programmatic setting
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
 
       // User change
-      fireEvent.click(screen.getByTestId("bead-click"));
+      fireEvent.click(screen.getByTestId('bead-click'))
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("6");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('6')
+      })
 
       // Navigate to new step (programmatic change)
-      fireEvent.click(screen.getByText("Next →"));
+      fireEvent.click(screen.getByText('Next →'))
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("10");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('10')
+      })
 
       // User should still be able to interact after programmatic change
-      fireEvent.click(screen.getByTestId("bead-click"));
+      fireEvent.click(screen.getByTestId('bead-click'))
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("11");
-      });
-    });
-  });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('11')
+      })
+    })
+  })
 
-  describe("Error Recovery", () => {
-    it("should handle AbacusReact errors gracefully", async () => {
-      const consoleSpy = vi
-        .spyOn(console, "error")
-        .mockImplementation(() => {});
+  describe('Error Recovery', () => {
+    it('should handle AbacusReact errors gracefully', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
       // Mock AbacusReact to throw an error
       const ErrorAbacus = () => {
-        throw new Error("AbacusReact error");
-      };
+        throw new Error('AbacusReact error')
+      }
 
-      vi.mocked(require("@soroban/abacus-react")).AbacusReact = ErrorAbacus;
+      vi.mocked(require('@soroban/abacus-react')).AbacusReact = ErrorAbacus
 
       expect(() => {
-        render(<TutorialPlayer tutorial={mockTutorial} />);
-      }).not.toThrow();
+        render(<TutorialPlayer tutorial={mockTutorial} />)
+      }).not.toThrow()
 
-      consoleSpy.mockRestore();
-    });
+      consoleSpy.mockRestore()
+    })
 
-    it("should recover from invalid state transitions", async () => {
-      render(<TutorialPlayer tutorial={mockTutorial} />);
+    it('should recover from invalid state transitions', async () => {
+      render(<TutorialPlayer tutorial={mockTutorial} />)
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
 
       // Try to set an invalid value
-      fireEvent.click(screen.getByTestId("set-target"));
+      fireEvent.click(screen.getByTestId('set-target'))
 
       // Should still function normally
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("42");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('42')
+      })
 
       // Navigation should still work
-      fireEvent.click(screen.getByText("Next →"));
+      fireEvent.click(screen.getByText('Next →'))
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("10");
-      });
-    });
-  });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('10')
+      })
+    })
+  })
 
-  describe("Performance", () => {
-    it("should not cause excessive re-renders", async () => {
-      let renderCount = 0;
+  describe('Performance', () => {
+    it('should not cause excessive re-renders', async () => {
+      let renderCount = 0
 
       const TestWrapper = () => {
-        renderCount++;
-        return <TutorialPlayer tutorial={mockTutorial} />;
-      };
+        renderCount++
+        return <TutorialPlayer tutorial={mockTutorial} />
+      }
 
-      render(<TestWrapper />);
+      render(<TestWrapper />)
 
-      const initialRenderCount = renderCount;
+      const initialRenderCount = renderCount
 
       // Perform various interactions
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
 
-      fireEvent.click(screen.getByTestId("bead-click"));
-      fireEvent.click(screen.getByText("Next →"));
-      fireEvent.click(screen.getByText("← Prev"));
+      fireEvent.click(screen.getByTestId('bead-click'))
+      fireEvent.click(screen.getByText('Next →'))
+      fireEvent.click(screen.getByText('← Prev'))
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
 
       // Should not cause excessive re-renders
-      expect(renderCount).toBeLessThan(initialRenderCount + 10);
-    });
-  });
-});
+      expect(renderCount).toBeLessThan(initialRenderCount + 10)
+    })
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/TutorialPlayer.provenance.e2e.test.tsx b/apps/web/src/components/tutorial/__tests__/TutorialPlayer.provenance.e2e.test.tsx
index 3a12345c..6ef636fa 100644
--- a/apps/web/src/components/tutorial/__tests__/TutorialPlayer.provenance.e2e.test.tsx
+++ b/apps/web/src/components/tutorial/__tests__/TutorialPlayer.provenance.e2e.test.tsx
@@ -1,7 +1,7 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { beforeEach, describe, expect, it } from "vitest";
-import type { Tutorial } from "../../../types/tutorial";
-import { TutorialPlayer } from "../TutorialPlayer";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+import type { Tutorial } from '../../../types/tutorial'
+import { TutorialPlayer } from '../TutorialPlayer'
 
 // Mock the AbacusDisplayContext
 const mockAbacusDisplay = {
@@ -14,43 +14,40 @@ const mockAbacusDisplay = {
     animationSpeed: 1000,
   },
   updateConfig: () => {},
-};
+}
 
 // Mock the context
-vi.mock("@/contexts/AbacusDisplayContext", () => ({
+vi.mock('@/contexts/AbacusDisplayContext', () => ({
   useAbacusDisplay: () => mockAbacusDisplay,
-}));
+}))
 
-describe("TutorialPlayer Provenance E2E Test", () => {
+describe('TutorialPlayer Provenance E2E Test', () => {
   const provenanceTestTutorial: Tutorial = {
-    id: "provenance-test",
-    title: "Provenance Test Tutorial",
-    description: "Testing provenance information in tooltips",
+    id: 'provenance-test',
+    title: 'Provenance Test Tutorial',
+    description: 'Testing provenance information in tooltips',
     steps: [
       {
-        id: "provenance-step",
-        title: "Test 3475 + 25 = 3500",
-        problem: "3475 + 25",
-        description: "Add 25 to 3475 to get 3500",
+        id: 'provenance-step',
+        title: 'Test 3475 + 25 = 3500',
+        problem: '3475 + 25',
+        description: 'Add 25 to 3475 to get 3500',
         startValue: 3475,
         targetValue: 3500,
-        expectedAction: "multi-step" as const,
-        actionDescription: "Follow the decomposition steps",
+        expectedAction: 'multi-step' as const,
+        actionDescription: 'Follow the decomposition steps',
         tooltip: {
-          content: "Adding 25 to 3475",
-          explanation: "This will show the provenance information",
+          content: 'Adding 25 to 3475',
+          explanation: 'This will show the provenance information',
         },
-        multiStepInstructions: [
-          "Add 2 tens (20)",
-          "Add 5 ones using ten-complement",
-        ],
+        multiStepInstructions: ['Add 2 tens (20)', 'Add 5 ones using ten-complement'],
       },
     ],
     createdAt: new Date(),
     updatedAt: new Date(),
-  };
+  }
 
-  let _container: HTMLElement;
+  let _container: HTMLElement
 
   beforeEach(() => {
     const renderResult = render(
@@ -60,191 +57,181 @@ describe("TutorialPlayer Provenance E2E Test", () => {
         showDebugPanel={false}
         onEvent={() => {}}
         onTutorialComplete={() => {}}
-      />,
-    );
-    _container = renderResult.container;
-  });
+      />
+    )
+    _container = renderResult.container
+  })
 
   it('should show provenance information in tooltip for the "20" term', async () => {
     // Wait for the tutorial to load and show the decomposition
     await waitFor(
       () => {
-        expect(screen.getByText("3475 + 25")).toBeInTheDocument();
+        expect(screen.getByText('3475 + 25')).toBeInTheDocument()
       },
-      { timeout: 5000 },
-    );
+      { timeout: 5000 }
+    )
 
     // Look for the full decomposition string
     await waitFor(
       () => {
         // The decomposition should be: 3475 + 25 = 3475 + 20 + (100 - 90 - 5) = 3500
         const decompositionElement = screen.getByText(
-          /3475 \+ 25 = 3475 \+ 20 \+ \(100 - 90 - 5\) = 3500/,
-        );
-        expect(decompositionElement).toBeInTheDocument();
+          /3475 \+ 25 = 3475 \+ 20 \+ \(100 - 90 - 5\) = 3500/
+        )
+        expect(decompositionElement).toBeInTheDocument()
       },
-      { timeout: 5000 },
-    );
+      { timeout: 5000 }
+    )
 
     // Find the "20" term in the decomposition
-    const twentyTerm = screen.getByText("20");
-    expect(twentyTerm).toBeInTheDocument();
+    const twentyTerm = screen.getByText('20')
+    expect(twentyTerm).toBeInTheDocument()
 
     // Hover over the "20" term to trigger the tooltip
-    fireEvent.mouseEnter(twentyTerm);
+    fireEvent.mouseEnter(twentyTerm)
 
     // Wait for the tooltip to appear
     await waitFor(
       () => {
         // Look for the enhanced provenance-based title
-        const provenanceTitle = screen.getByText(
-          "Add the tens digit — 2 tens (20)",
-        );
-        expect(provenanceTitle).toBeInTheDocument();
+        const provenanceTitle = screen.getByText('Add the tens digit — 2 tens (20)')
+        expect(provenanceTitle).toBeInTheDocument()
       },
-      { timeout: 3000 },
-    );
+      { timeout: 3000 }
+    )
 
     // Check for the enhanced subtitle
     await waitFor(() => {
-      const provenanceSubtitle = screen.getByText("From addend 25");
-      expect(provenanceSubtitle).toBeInTheDocument();
-    });
+      const provenanceSubtitle = screen.getByText('From addend 25')
+      expect(provenanceSubtitle).toBeInTheDocument()
+    })
 
     // Check for the enhanced explanation text
     await waitFor(() => {
-      const provenanceExplanation = screen.getByText(
-        /We're adding the tens digit of 25 → 2 tens/,
-      );
-      expect(provenanceExplanation).toBeInTheDocument();
-    });
+      const provenanceExplanation = screen.getByText(/We're adding the tens digit of 25 → 2 tens/)
+      expect(provenanceExplanation).toBeInTheDocument()
+    })
 
     // Check for the enhanced breadcrumb chips
     await waitFor(() => {
-      const digitChip = screen.getByText(/Digit we're using: 2 \(tens\)/);
-      expect(digitChip).toBeInTheDocument();
-    });
+      const digitChip = screen.getByText(/Digit we're using: 2 \(tens\)/)
+      expect(digitChip).toBeInTheDocument()
+    })
 
     await waitFor(() => {
-      const addChip = screen.getByText(/So we add here: \+2 tens → 20/);
-      expect(addChip).toBeInTheDocument();
-    });
-  });
+      const addChip = screen.getByText(/So we add here: \+2 tens → 20/)
+      expect(addChip).toBeInTheDocument()
+    })
+  })
 
-  it("should NOT show the old generic tooltip text", async () => {
+  it('should NOT show the old generic tooltip text', async () => {
     // Wait for the tutorial to load
     await waitFor(() => {
-      expect(screen.getByText("3475 + 25")).toBeInTheDocument();
-    });
+      expect(screen.getByText('3475 + 25')).toBeInTheDocument()
+    })
 
     // Find and hover over the "20" term
-    const twentyTerm = screen.getByText("20");
-    fireEvent.mouseEnter(twentyTerm);
+    const twentyTerm = screen.getByText('20')
+    fireEvent.mouseEnter(twentyTerm)
 
     // Wait a moment for tooltip to appear
     await waitFor(() => {
-      const provenanceTitle = screen.getByText(
-        "Add the tens digit — 2 tens (20)",
-      );
-      expect(provenanceTitle).toBeInTheDocument();
-    });
+      const provenanceTitle = screen.getByText('Add the tens digit — 2 tens (20)')
+      expect(provenanceTitle).toBeInTheDocument()
+    })
 
     // The old generic text should NOT be present when provenance is available
-    expect(screen.queryByText("Direct Move")).not.toBeInTheDocument();
-    expect(screen.queryByText("Simple bead movement")).not.toBeInTheDocument();
+    expect(screen.queryByText('Direct Move')).not.toBeInTheDocument()
+    expect(screen.queryByText('Simple bead movement')).not.toBeInTheDocument()
 
     // Instead we should see the provenance-enhanced content
-    expect(screen.getByText("From addend 25")).toBeInTheDocument();
-  });
+    expect(screen.getByText('From addend 25')).toBeInTheDocument()
+  })
 
-  it("should show correct provenance for complement operations in the same example", async () => {
+  it('should show correct provenance for complement operations in the same example', async () => {
     // Wait for the tutorial to load
     await waitFor(() => {
-      expect(screen.getByText("3475 + 25")).toBeInTheDocument();
-    });
+      expect(screen.getByText('3475 + 25')).toBeInTheDocument()
+    })
 
     // Find the "100" term (part of the ten-complement for the ones digit)
-    const hundredTerm = screen.getByText("100");
-    expect(hundredTerm).toBeInTheDocument();
+    const hundredTerm = screen.getByText('100')
+    expect(hundredTerm).toBeInTheDocument()
 
     // Hover over the "100" term
-    fireEvent.mouseEnter(hundredTerm);
+    fireEvent.mouseEnter(hundredTerm)
 
     // This should show provenance pointing back to the ones digit "5" from "25"
     await waitFor(() => {
-      const provenanceTitle = screen.getByText(
-        "Add the ones digit — 5 ones (5)",
-      );
-      expect(provenanceTitle).toBeInTheDocument();
-    });
+      const provenanceTitle = screen.getByText('Add the ones digit — 5 ones (5)')
+      expect(provenanceTitle).toBeInTheDocument()
+    })
 
     await waitFor(() => {
-      const provenanceSubtitle = screen.getByText("From addend 25");
-      expect(provenanceSubtitle).toBeInTheDocument();
-    });
-  });
+      const provenanceSubtitle = screen.getByText('From addend 25')
+      expect(provenanceSubtitle).toBeInTheDocument()
+    })
+  })
 
-  it("should provide data for addend digit highlighting", async () => {
+  it('should provide data for addend digit highlighting', async () => {
     // Wait for the tutorial to load
     await waitFor(() => {
-      expect(screen.getByText("3475 + 25")).toBeInTheDocument();
-    });
+      expect(screen.getByText('3475 + 25')).toBeInTheDocument()
+    })
 
     // The equation anchors should be available in the component
     // We can't directly test highlighting without more complex setup,
     // but we can verify the equation has the right structure for highlighting
-    const fullEquation = screen.getByText(
-      /3475 \+ 25 = 3475 \+ 20 \+ \(100 - 90 - 5\) = 3500/,
-    );
-    expect(fullEquation).toBeInTheDocument();
+    const fullEquation = screen.getByText(/3475 \+ 25 = 3475 \+ 20 \+ \(100 - 90 - 5\) = 3500/)
+    expect(fullEquation).toBeInTheDocument()
 
     // The "25" should be present and ready for highlighting
-    const addendText = screen.getByText("25");
-    expect(addendText).toBeInTheDocument();
-  });
+    const addendText = screen.getByText('25')
+    expect(addendText).toBeInTheDocument()
+  })
 
-  it("should show working on bubble with provenance information", async () => {
+  it('should show working on bubble with provenance information', async () => {
     // Wait for the tutorial to load
     await waitFor(() => {
-      expect(screen.getByText("3475 + 25")).toBeInTheDocument();
-    });
+      expect(screen.getByText('3475 + 25')).toBeInTheDocument()
+    })
 
     // If there's a "working on" indicator, it should use provenance
     // The exact implementation might vary, but it should reference the source digit
     // Look for any element that might show "Working on: tens digit of 25 → 2 tens (20)"
-    const workingOnElements = screen.queryAllByText(/Working on/);
+    const workingOnElements = screen.queryAllByText(/Working on/)
     if (workingOnElements.length > 0) {
-      const workingOnText = workingOnElements[0].textContent;
-      expect(workingOnText).toMatch(/tens digit of 25|2 tens/);
+      const workingOnText = workingOnElements[0].textContent
+      expect(workingOnText).toMatch(/tens digit of 25|2 tens/)
     }
-  });
+  })
 
-  it("should debug log provenance information", async () => {
-    const consoleSpy = vi.spyOn(console, "log");
+  it('should debug log provenance information', async () => {
+    const consoleSpy = vi.spyOn(console, 'log')
 
     // Wait for the tutorial to load
     await waitFor(() => {
-      expect(screen.getByText("3475 + 25")).toBeInTheDocument();
-    });
+      expect(screen.getByText('3475 + 25')).toBeInTheDocument()
+    })
 
     // Hover over the "20" term to trigger tooltip rendering
-    const twentyTerm = screen.getByText("20");
-    fireEvent.mouseEnter(twentyTerm);
+    const twentyTerm = screen.getByText('20')
+    fireEvent.mouseEnter(twentyTerm)
 
     // The ReasonTooltip component should log the provenance data
     await waitFor(() => {
       expect(consoleSpy).toHaveBeenCalledWith(
-        "ReasonTooltip - provenance data:",
+        'ReasonTooltip - provenance data:',
         expect.objectContaining({
           rhs: 25,
           rhsDigit: 2,
           rhsPlace: 1,
-          rhsPlaceName: "tens",
+          rhsPlaceName: 'tens',
           rhsValue: 20,
-        }),
-      );
-    });
+        })
+      )
+    })
 
-    consoleSpy.mockRestore();
-  });
-});
+    consoleSpy.mockRestore()
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/TutorialPlayer.test.tsx b/apps/web/src/components/tutorial/__tests__/TutorialPlayer.test.tsx
index 2da865de..ced5a667 100644
--- a/apps/web/src/components/tutorial/__tests__/TutorialPlayer.test.tsx
+++ b/apps/web/src/components/tutorial/__tests__/TutorialPlayer.test.tsx
@@ -1,398 +1,386 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { DevAccessProvider } from "../../../hooks/useAccessControl";
-import type { Tutorial } from "../../../types/tutorial";
-import { TutorialPlayer } from "../TutorialPlayer";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { DevAccessProvider } from '../../../hooks/useAccessControl'
+import type { Tutorial } from '../../../types/tutorial'
+import { TutorialPlayer } from '../TutorialPlayer'
 
 // Mock the AbacusReact component
-vi.mock("@soroban/abacus-react", () => ({
+vi.mock('@soroban/abacus-react', () => ({
   AbacusReact: ({ value, onValueChange, callbacks }: any) => (
     <div data-testid="mock-abacus">
       <div data-testid="abacus-value">{value}</div>
       <button
         data-testid="mock-bead-0"
         onClick={() => {
-          onValueChange?.(value + 1);
+          onValueChange?.(value + 1)
           callbacks?.onBeadClick?.({
             columnIndex: 4,
-            beadType: "earth",
+            beadType: 'earth',
             position: 0,
             active: false,
-          });
+          })
         }}
       >
         Mock Bead
       </button>
     </div>
   ),
-}));
+}))
 
 const mockTutorial: Tutorial = {
-  id: "test-tutorial",
-  title: "Test Tutorial",
-  description: "A test tutorial",
-  category: "test",
-  difficulty: "beginner",
+  id: 'test-tutorial',
+  title: 'Test Tutorial',
+  description: 'A test tutorial',
+  category: 'test',
+  difficulty: 'beginner',
   estimatedDuration: 10,
   steps: [
     {
-      id: "step-1",
-      title: "Step 1",
-      problem: "0 + 1",
-      description: "Add one",
+      id: 'step-1',
+      title: 'Step 1',
+      problem: '0 + 1',
+      description: 'Add one',
       startValue: 0,
       targetValue: 1,
-      highlightBeads: [{ columnIndex: 4, beadType: "earth", position: 0 }],
-      expectedAction: "add",
-      actionDescription: "Click the first bead",
+      highlightBeads: [{ columnIndex: 4, beadType: 'earth', position: 0 }],
+      expectedAction: 'add',
+      actionDescription: 'Click the first bead',
       tooltip: {
-        content: "Test tooltip",
-        explanation: "Test explanation",
+        content: 'Test tooltip',
+        explanation: 'Test explanation',
       },
       errorMessages: {
-        wrongBead: "Wrong bead clicked",
-        wrongAction: "Wrong action",
-        hint: "Test hint",
+        wrongBead: 'Wrong bead clicked',
+        wrongAction: 'Wrong action',
+        hint: 'Test hint',
       },
     },
     {
-      id: "step-2",
-      title: "Step 2",
-      problem: "1 + 1",
-      description: "Add another one",
+      id: 'step-2',
+      title: 'Step 2',
+      problem: '1 + 1',
+      description: 'Add another one',
       startValue: 1,
       targetValue: 2,
-      expectedAction: "add",
-      actionDescription: "Click the second bead",
+      expectedAction: 'add',
+      actionDescription: 'Click the second bead',
       tooltip: {
-        content: "Second tooltip",
-        explanation: "Second explanation",
+        content: 'Second tooltip',
+        explanation: 'Second explanation',
       },
       errorMessages: {
-        wrongBead: "Wrong bead for step 2",
-        wrongAction: "Wrong action for step 2",
-        hint: "Step 2 hint",
+        wrongBead: 'Wrong bead for step 2',
+        wrongAction: 'Wrong action for step 2',
+        hint: 'Step 2 hint',
       },
     },
   ],
-  tags: ["test"],
-  author: "Test Author",
-  version: "1.0.0",
+  tags: ['test'],
+  author: 'Test Author',
+  version: '1.0.0',
   createdAt: new Date(),
   updatedAt: new Date(),
   isPublished: true,
-};
+}
 
-const renderTutorialPlayer = (
-  props: Partial<React.ComponentProps<typeof TutorialPlayer>> = {},
-) => {
+const renderTutorialPlayer = (props: Partial<React.ComponentProps<typeof TutorialPlayer>> = {}) => {
   const defaultProps = {
     tutorial: mockTutorial,
     initialStepIndex: 0,
     isDebugMode: false,
     showDebugPanel: false,
-  };
+  }
 
   return render(
     <DevAccessProvider>
       <TutorialPlayer {...defaultProps} {...props} />
-    </DevAccessProvider>,
-  );
-};
+    </DevAccessProvider>
+  )
+}
 
-describe("TutorialPlayer", () => {
+describe('TutorialPlayer', () => {
   beforeEach(() => {
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
-  describe("Basic Rendering", () => {
-    it("renders tutorial title and current step information", () => {
-      renderTutorialPlayer();
+  describe('Basic Rendering', () => {
+    it('renders tutorial title and current step information', () => {
+      renderTutorialPlayer()
 
-      expect(screen.getByText("Test Tutorial")).toBeInTheDocument();
-      expect(screen.getByText(/Step 1 of 2: Step 1/)).toBeInTheDocument();
-      expect(screen.getByText("0 + 1")).toBeInTheDocument();
-      expect(screen.getByText("Add one")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Test Tutorial')).toBeInTheDocument()
+      expect(screen.getByText(/Step 1 of 2: Step 1/)).toBeInTheDocument()
+      expect(screen.getByText('0 + 1')).toBeInTheDocument()
+      expect(screen.getByText('Add one')).toBeInTheDocument()
+    })
 
-    it("renders the abacus component", () => {
-      renderTutorialPlayer();
+    it('renders the abacus component', () => {
+      renderTutorialPlayer()
 
-      expect(screen.getByTestId("mock-abacus")).toBeInTheDocument();
-      expect(screen.getByTestId("abacus-value")).toHaveTextContent("0");
-    });
+      expect(screen.getByTestId('mock-abacus')).toBeInTheDocument()
+      expect(screen.getByTestId('abacus-value')).toHaveTextContent('0')
+    })
 
-    it("shows tooltip information", () => {
-      renderTutorialPlayer();
+    it('shows tooltip information', () => {
+      renderTutorialPlayer()
 
-      expect(screen.getByText("Test tooltip")).toBeInTheDocument();
-      expect(screen.getByText("Test explanation")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Test tooltip')).toBeInTheDocument()
+      expect(screen.getByText('Test explanation')).toBeInTheDocument()
+    })
 
-    it("shows progress bar", () => {
-      renderTutorialPlayer();
+    it('shows progress bar', () => {
+      renderTutorialPlayer()
 
       const progressBar =
-        screen.getByRole("progressbar", { hidden: true }) ||
-        document.querySelector('[style*="width"]');
-      expect(progressBar).toBeInTheDocument();
-    });
-  });
+        screen.getByRole('progressbar', { hidden: true }) ||
+        document.querySelector('[style*="width"]')
+      expect(progressBar).toBeInTheDocument()
+    })
+  })
 
-  describe("Navigation", () => {
-    it("disables previous button on first step", () => {
-      renderTutorialPlayer();
+  describe('Navigation', () => {
+    it('disables previous button on first step', () => {
+      renderTutorialPlayer()
 
-      const prevButton = screen.getByText("← Previous");
-      expect(prevButton).toBeDisabled();
-    });
+      const prevButton = screen.getByText('← Previous')
+      expect(prevButton).toBeDisabled()
+    })
 
-    it("enables next button when step is completed", async () => {
-      const onStepComplete = vi.fn();
-      renderTutorialPlayer({ onStepComplete });
+    it('enables next button when step is completed', async () => {
+      const onStepComplete = vi.fn()
+      renderTutorialPlayer({ onStepComplete })
 
       // Complete the step by clicking the mock bead
-      const bead = screen.getByTestId("mock-bead-0");
-      fireEvent.click(bead);
+      const bead = screen.getByTestId('mock-bead-0')
+      fireEvent.click(bead)
 
       await waitFor(() => {
-        const nextButton = screen.getByText("Next →");
-        expect(nextButton).not.toBeDisabled();
-      });
-    });
+        const nextButton = screen.getByText('Next →')
+        expect(nextButton).not.toBeDisabled()
+      })
+    })
 
-    it("navigates to next step when next button is clicked", async () => {
-      const onStepChange = vi.fn();
-      renderTutorialPlayer({ onStepChange });
+    it('navigates to next step when next button is clicked', async () => {
+      const onStepChange = vi.fn()
+      renderTutorialPlayer({ onStepChange })
 
       // Complete first step
-      const bead = screen.getByTestId("mock-bead-0");
-      fireEvent.click(bead);
+      const bead = screen.getByTestId('mock-bead-0')
+      fireEvent.click(bead)
 
       await waitFor(() => {
-        const nextButton = screen.getByText("Next →");
-        fireEvent.click(nextButton);
-      });
+        const nextButton = screen.getByText('Next →')
+        fireEvent.click(nextButton)
+      })
 
-      expect(onStepChange).toHaveBeenCalledWith(1, mockTutorial.steps[1]);
-    });
+      expect(onStepChange).toHaveBeenCalledWith(1, mockTutorial.steps[1])
+    })
 
     it('shows "Complete Tutorial" button on last step', () => {
-      renderTutorialPlayer({ initialStepIndex: 1 });
+      renderTutorialPlayer({ initialStepIndex: 1 })
 
-      expect(screen.getByText("Complete Tutorial")).toBeInTheDocument();
-    });
-  });
+      expect(screen.getByText('Complete Tutorial')).toBeInTheDocument()
+    })
+  })
 
-  describe("Step Completion", () => {
-    it("marks step as completed when target value is reached", async () => {
-      const onStepComplete = vi.fn();
-      renderTutorialPlayer({ onStepComplete });
+  describe('Step Completion', () => {
+    it('marks step as completed when target value is reached', async () => {
+      const onStepComplete = vi.fn()
+      renderTutorialPlayer({ onStepComplete })
 
-      const bead = screen.getByTestId("mock-bead-0");
-      fireEvent.click(bead);
+      const bead = screen.getByTestId('mock-bead-0')
+      fireEvent.click(bead)
 
       await waitFor(() => {
-        expect(
-          screen.getByText(/Great! You completed this step correctly/),
-        ).toBeInTheDocument();
-        expect(onStepComplete).toHaveBeenCalledWith(
-          0,
-          mockTutorial.steps[0],
-          true,
-        );
-      });
-    });
+        expect(screen.getByText(/Great! You completed this step correctly/)).toBeInTheDocument()
+        expect(onStepComplete).toHaveBeenCalledWith(0, mockTutorial.steps[0], true)
+      })
+    })
 
-    it("calls onTutorialComplete when tutorial is finished", async () => {
-      const onTutorialComplete = vi.fn();
+    it('calls onTutorialComplete when tutorial is finished', async () => {
+      const onTutorialComplete = vi.fn()
       renderTutorialPlayer({
         initialStepIndex: 1, // Start on last step
         onTutorialComplete,
-      });
+      })
 
       // Complete the last step
-      const bead = screen.getByTestId("mock-bead-0");
-      fireEvent.click(bead);
+      const bead = screen.getByTestId('mock-bead-0')
+      fireEvent.click(bead)
 
       await waitFor(() => {
-        const completeButton = screen.getByText("Complete Tutorial");
-        fireEvent.click(completeButton);
-      });
+        const completeButton = screen.getByText('Complete Tutorial')
+        fireEvent.click(completeButton)
+      })
 
-      expect(onTutorialComplete).toHaveBeenCalled();
-    });
-  });
+      expect(onTutorialComplete).toHaveBeenCalled()
+    })
+  })
 
-  describe("Debug Mode", () => {
-    it("shows debug controls when debug mode is enabled", () => {
-      renderTutorialPlayer({ isDebugMode: true });
+  describe('Debug Mode', () => {
+    it('shows debug controls when debug mode is enabled', () => {
+      renderTutorialPlayer({ isDebugMode: true })
 
-      expect(screen.getByText("Debug")).toBeInTheDocument();
-      expect(screen.getByText("Steps")).toBeInTheDocument();
-      expect(screen.getByLabelText("Auto-advance")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Debug')).toBeInTheDocument()
+      expect(screen.getByText('Steps')).toBeInTheDocument()
+      expect(screen.getByLabelText('Auto-advance')).toBeInTheDocument()
+    })
 
-    it("shows debug panel when enabled", () => {
-      renderTutorialPlayer({ isDebugMode: true, showDebugPanel: true });
+    it('shows debug panel when enabled', () => {
+      renderTutorialPlayer({ isDebugMode: true, showDebugPanel: true })
 
-      expect(screen.getByText("Debug Panel")).toBeInTheDocument();
-      expect(screen.getByText("Current State")).toBeInTheDocument();
-      expect(screen.getByText("Event Log")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Debug Panel')).toBeInTheDocument()
+      expect(screen.getByText('Current State')).toBeInTheDocument()
+      expect(screen.getByText('Event Log')).toBeInTheDocument()
+    })
 
-    it("shows step list sidebar when enabled", () => {
-      renderTutorialPlayer({ isDebugMode: true });
+    it('shows step list sidebar when enabled', () => {
+      renderTutorialPlayer({ isDebugMode: true })
 
-      const stepsButton = screen.getByText("Steps");
-      fireEvent.click(stepsButton);
+      const stepsButton = screen.getByText('Steps')
+      fireEvent.click(stepsButton)
 
-      expect(screen.getByText("Tutorial Steps")).toBeInTheDocument();
-      expect(screen.getByText("1. Step 1")).toBeInTheDocument();
-      expect(screen.getByText("2. Step 2")).toBeInTheDocument();
-    });
+      expect(screen.getByText('Tutorial Steps')).toBeInTheDocument()
+      expect(screen.getByText('1. Step 1')).toBeInTheDocument()
+      expect(screen.getByText('2. Step 2')).toBeInTheDocument()
+    })
 
-    it("allows jumping to specific step from step list", () => {
-      const onStepChange = vi.fn();
-      renderTutorialPlayer({ isDebugMode: true, onStepChange });
+    it('allows jumping to specific step from step list', () => {
+      const onStepChange = vi.fn()
+      renderTutorialPlayer({ isDebugMode: true, onStepChange })
 
-      const stepsButton = screen.getByText("Steps");
-      fireEvent.click(stepsButton);
+      const stepsButton = screen.getByText('Steps')
+      fireEvent.click(stepsButton)
 
-      const step2Button = screen.getByText("2. Step 2");
-      fireEvent.click(step2Button);
+      const step2Button = screen.getByText('2. Step 2')
+      fireEvent.click(step2Button)
 
-      expect(onStepChange).toHaveBeenCalledWith(1, mockTutorial.steps[1]);
-    });
-  });
+      expect(onStepChange).toHaveBeenCalledWith(1, mockTutorial.steps[1])
+    })
+  })
 
-  describe("Event Logging", () => {
-    it("logs events when onEvent callback is provided", () => {
-      const onEvent = vi.fn();
-      renderTutorialPlayer({ onEvent });
+  describe('Event Logging', () => {
+    it('logs events when onEvent callback is provided', () => {
+      const onEvent = vi.fn()
+      renderTutorialPlayer({ onEvent })
 
-      const bead = screen.getByTestId("mock-bead-0");
-      fireEvent.click(bead);
+      const bead = screen.getByTestId('mock-bead-0')
+      fireEvent.click(bead)
 
       expect(onEvent).toHaveBeenCalledWith(
         expect.objectContaining({
-          type: "BEAD_CLICKED",
+          type: 'BEAD_CLICKED',
           timestamp: expect.any(Date),
-        }),
-      );
-    });
+        })
+      )
+    })
 
-    it("logs step started event on mount", () => {
-      const onEvent = vi.fn();
-      renderTutorialPlayer({ onEvent });
+    it('logs step started event on mount', () => {
+      const onEvent = vi.fn()
+      renderTutorialPlayer({ onEvent })
 
       expect(onEvent).toHaveBeenCalledWith(
         expect.objectContaining({
-          type: "STEP_STARTED",
-          stepId: "step-1",
+          type: 'STEP_STARTED',
+          stepId: 'step-1',
           timestamp: expect.any(Date),
-        }),
-      );
-    });
+        })
+      )
+    })
 
-    it("logs value changed events", () => {
-      const onEvent = vi.fn();
-      renderTutorialPlayer({ onEvent });
+    it('logs value changed events', () => {
+      const onEvent = vi.fn()
+      renderTutorialPlayer({ onEvent })
 
-      const bead = screen.getByTestId("mock-bead-0");
-      fireEvent.click(bead);
+      const bead = screen.getByTestId('mock-bead-0')
+      fireEvent.click(bead)
 
       expect(onEvent).toHaveBeenCalledWith(
         expect.objectContaining({
-          type: "VALUE_CHANGED",
+          type: 'VALUE_CHANGED',
           oldValue: 0,
           newValue: 1,
           timestamp: expect.any(Date),
-        }),
-      );
-    });
-  });
+        })
+      )
+    })
+  })
 
-  describe("Error Handling", () => {
-    it("shows error message for wrong bead clicks", async () => {
-      renderTutorialPlayer();
+  describe('Error Handling', () => {
+    it('shows error message for wrong bead clicks', async () => {
+      renderTutorialPlayer()
 
       // Mock a wrong bead click by directly calling the callback
       // In real usage, this would come from the AbacusReact component
       const _wrongBeadClick = {
         columnIndex: 1, // Wrong column
-        beadType: "earth" as const,
+        beadType: 'earth' as const,
         position: 0,
         active: false,
-      };
+      }
 
       // Simulate wrong bead click through the mock
-      const _mockAbacus = screen.getByTestId("mock-abacus");
+      const _mockAbacus = screen.getByTestId('mock-abacus')
       // We need to trigger this through the component's callback system
       // For now, we'll test the error display indirectly
-    });
-  });
+    })
+  })
 
-  describe("Auto-advance Feature", () => {
-    it("enables auto-advance when checkbox is checked", () => {
-      renderTutorialPlayer({ isDebugMode: true });
+  describe('Auto-advance Feature', () => {
+    it('enables auto-advance when checkbox is checked', () => {
+      renderTutorialPlayer({ isDebugMode: true })
 
-      const autoAdvanceCheckbox = screen.getByLabelText("Auto-advance");
-      fireEvent.click(autoAdvanceCheckbox);
+      const autoAdvanceCheckbox = screen.getByLabelText('Auto-advance')
+      fireEvent.click(autoAdvanceCheckbox)
 
-      expect(autoAdvanceCheckbox).toBeChecked();
-    });
-  });
+      expect(autoAdvanceCheckbox).toBeChecked()
+    })
+  })
 
-  describe("Accessibility", () => {
-    it("has proper ARIA attributes", () => {
-      renderTutorialPlayer();
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', () => {
+      renderTutorialPlayer()
 
       // Check for proper heading structure
-      expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
-        "Test Tutorial",
-      );
-      expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
-        "0 + 1",
-      );
-    });
+      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Test Tutorial')
+      expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent('0 + 1')
+    })
 
-    it("has keyboard navigation support", () => {
-      renderTutorialPlayer();
+    it('has keyboard navigation support', () => {
+      renderTutorialPlayer()
 
-      const nextButton = screen.getByText("Next →");
-      const prevButton = screen.getByText("← Previous");
+      const nextButton = screen.getByText('Next →')
+      const prevButton = screen.getByText('← Previous')
 
-      expect(nextButton).toHaveAttribute("type", "button");
-      expect(prevButton).toHaveAttribute("type", "button");
-    });
-  });
+      expect(nextButton).toHaveAttribute('type', 'button')
+      expect(prevButton).toHaveAttribute('type', 'button')
+    })
+  })
 
-  describe("Edge Cases", () => {
-    it("handles empty tutorial gracefully", () => {
-      const emptyTutorial = { ...mockTutorial, steps: [] };
+  describe('Edge Cases', () => {
+    it('handles empty tutorial gracefully', () => {
+      const emptyTutorial = { ...mockTutorial, steps: [] }
 
       expect(() => {
-        renderTutorialPlayer({ tutorial: emptyTutorial });
-      }).not.toThrow();
-    });
+        renderTutorialPlayer({ tutorial: emptyTutorial })
+      }).not.toThrow()
+    })
 
-    it("handles invalid initial step index", () => {
+    it('handles invalid initial step index', () => {
       expect(() => {
-        renderTutorialPlayer({ initialStepIndex: 999 });
-      }).not.toThrow();
-    });
+        renderTutorialPlayer({ initialStepIndex: 999 })
+      }).not.toThrow()
+    })
 
-    it("handles tutorial with single step", () => {
+    it('handles tutorial with single step', () => {
       const singleStepTutorial = {
         ...mockTutorial,
         steps: [mockTutorial.steps[0]],
-      };
+      }
 
-      renderTutorialPlayer({ tutorial: singleStepTutorial });
+      renderTutorialPlayer({ tutorial: singleStepTutorial })
 
-      expect(screen.getByText("Complete Tutorial")).toBeInTheDocument();
-      expect(screen.getByText("← Previous")).toBeDisabled();
-    });
-  });
-});
+      expect(screen.getByText('Complete Tutorial')).toBeInTheDocument()
+      expect(screen.getByText('← Previous')).toBeDisabled()
+    })
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/TutorialPlayerCelebration.integration.test.tsx b/apps/web/src/components/tutorial/__tests__/TutorialPlayerCelebration.integration.test.tsx
index 76defdb5..426c1eab 100644
--- a/apps/web/src/components/tutorial/__tests__/TutorialPlayerCelebration.integration.test.tsx
+++ b/apps/web/src/components/tutorial/__tests__/TutorialPlayerCelebration.integration.test.tsx
@@ -1,33 +1,27 @@
-import "./test-setup";
-import { AbacusDisplayProvider } from "@soroban/abacus-react";
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from "@testing-library/react";
-import React from "react";
-import { vi } from "vitest";
-import type { Tutorial } from "../../../types/tutorial";
-import { TutorialProvider } from "../TutorialContext";
-import { TutorialPlayer } from "../TutorialPlayer";
+import './test-setup'
+import { AbacusDisplayProvider } from '@soroban/abacus-react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import { vi } from 'vitest'
+import type { Tutorial } from '../../../types/tutorial'
+import { TutorialProvider } from '../TutorialContext'
+import { TutorialPlayer } from '../TutorialPlayer'
 
 // Mock the AbacusReact component to make testing easier
-vi.mock("@soroban/abacus-react", () => ({
+vi.mock('@soroban/abacus-react', () => ({
   AbacusReact: ({ value, onValueChange, overlays }: any) => {
-    const [currentValue, setCurrentValue] = React.useState(value);
+    const [currentValue, setCurrentValue] = React.useState(value)
 
     // Sync with prop changes
     React.useEffect(() => {
-      setCurrentValue(value);
-    }, [value]);
+      setCurrentValue(value)
+    }, [value])
 
     const handleClick = () => {
-      const newValue = currentValue === 3 ? 5 : currentValue === 5 ? 6 : 3;
-      setCurrentValue(newValue);
-      onValueChange?.(newValue);
-    };
+      const newValue = currentValue === 3 ? 5 : currentValue === 5 ? 6 : 3
+      setCurrentValue(newValue)
+      onValueChange?.(newValue)
+    }
 
     return (
       <div data-testid="mock-abacus">
@@ -42,38 +36,38 @@ vi.mock("@soroban/abacus-react", () => ({
           </div>
         ))}
       </div>
-    );
+    )
   },
   StepBeadHighlight: {},
-}));
+}))
 
 const mockTutorial: Tutorial = {
-  id: "integration-test-tutorial",
-  title: "Integration Test Tutorial",
-  description: "Testing celebration tooltip integration",
+  id: 'integration-test-tutorial',
+  title: 'Integration Test Tutorial',
+  description: 'Testing celebration tooltip integration',
   steps: [
     {
-      id: "step-1",
-      title: "Add Two",
-      problem: "3 + 2",
-      description: "Add 2 to 3 to get 5",
+      id: 'step-1',
+      title: 'Add Two',
+      problem: '3 + 2',
+      description: 'Add 2 to 3 to get 5',
       startValue: 3,
       targetValue: 5,
-      expectedAction: "add",
-      actionDescription: "3 + 2 = 5",
+      expectedAction: 'add',
+      actionDescription: '3 + 2 = 5',
       tooltip: {
-        content: "Add 2 to reach 5",
-        explanation: "Move two earth beads up to add 2",
+        content: 'Add 2 to reach 5',
+        explanation: 'Move two earth beads up to add 2',
       },
-      multiStepInstructions: ["Move two earth beads up"],
+      multiStepInstructions: ['Move two earth beads up'],
     },
   ],
-};
+}
 
-describe("TutorialPlayer Celebration Integration", () => {
+describe('TutorialPlayer Celebration Integration', () => {
   beforeEach(() => {
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
   const renderTutorialPlayer = (tutorial = mockTutorial, props = {}) => {
     return render(
@@ -81,352 +75,352 @@ describe("TutorialPlayer Celebration Integration", () => {
         <TutorialProvider tutorial={tutorial}>
           <TutorialPlayer tutorial={tutorial} isDebugMode={false} {...props} />
         </TutorialProvider>
-      </AbacusDisplayProvider>,
-    );
-  };
+      </AbacusDisplayProvider>
+    )
+  }
 
-  describe("Celebration Tooltip Behavior", () => {
-    it("should show celebration tooltip when target value is reached", async () => {
-      const onStepComplete = vi.fn();
-      renderTutorialPlayer(mockTutorial, { onStepComplete });
+  describe('Celebration Tooltip Behavior', () => {
+    it('should show celebration tooltip when target value is reached', async () => {
+      const onStepComplete = vi.fn()
+      renderTutorialPlayer(mockTutorial, { onStepComplete })
 
       // Wait for tutorial to load with initial value
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("3");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
+      })
 
       // Change value to target (5)
-      const changeBtn = screen.getByTestId("change-value-btn");
+      const changeBtn = screen.getByTestId('change-value-btn')
 
       await act(async () => {
-        fireEvent.click(changeBtn);
-      });
+        fireEvent.click(changeBtn)
+      })
 
       // Wait for value to change to 5
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
 
       // Wait for step completion and celebration tooltip
       await waitFor(
         () => {
-          expect(onStepComplete).toHaveBeenCalled();
+          expect(onStepComplete).toHaveBeenCalled()
         },
-        { timeout: 5000 },
-      );
+        { timeout: 5000 }
+      )
 
       // Look for celebration content in overlays
       await waitFor(
         () => {
-          const celebration = screen.queryByText("🎉");
-          const excellentWork = screen.queryByText("Excellent work!");
-          expect(celebration || excellentWork).toBeTruthy();
+          const celebration = screen.queryByText('🎉')
+          const excellentWork = screen.queryByText('Excellent work!')
+          expect(celebration || excellentWork).toBeTruthy()
         },
-        { timeout: 3000 },
-      );
-    });
+        { timeout: 3000 }
+      )
+    })
 
-    it("should hide celebration tooltip when user moves away from target", async () => {
-      const onStepComplete = vi.fn();
-      renderTutorialPlayer(mockTutorial, { onStepComplete });
+    it('should hide celebration tooltip when user moves away from target', async () => {
+      const onStepComplete = vi.fn()
+      renderTutorialPlayer(mockTutorial, { onStepComplete })
 
       // Wait for initial load
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("3");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
+      })
 
-      const changeBtn = screen.getByTestId("change-value-btn");
+      const changeBtn = screen.getByTestId('change-value-btn')
 
       // First reach target value (5)
       await act(async () => {
-        fireEvent.click(changeBtn);
-      });
+        fireEvent.click(changeBtn)
+      })
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
 
       // Wait for celebration to appear
       await waitFor(
         () => {
-          const celebration = screen.queryByText("🎉");
-          const excellentWork = screen.queryByText("Excellent work!");
-          expect(celebration || excellentWork).toBeTruthy();
+          const celebration = screen.queryByText('🎉')
+          const excellentWork = screen.queryByText('Excellent work!')
+          expect(celebration || excellentWork).toBeTruthy()
         },
-        { timeout: 3000 },
-      );
+        { timeout: 3000 }
+      )
 
       // Now move away from target (to 6)
       await act(async () => {
-        fireEvent.click(changeBtn);
-      });
+        fireEvent.click(changeBtn)
+      })
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("6");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('6')
+      })
 
       // Celebration should disappear
       await waitFor(
         () => {
-          const celebration = screen.queryByText("🎉");
-          const excellentWork = screen.queryByText("Excellent work!");
-          expect(celebration).toBeFalsy();
-          expect(excellentWork).toBeFalsy();
+          const celebration = screen.queryByText('🎉')
+          const excellentWork = screen.queryByText('Excellent work!')
+          expect(celebration).toBeFalsy()
+          expect(excellentWork).toBeFalsy()
         },
-        { timeout: 2000 },
-      );
-    });
+        { timeout: 2000 }
+      )
+    })
 
-    it("should return celebration when user goes back to target value", async () => {
-      renderTutorialPlayer(mockTutorial);
+    it('should return celebration when user goes back to target value', async () => {
+      renderTutorialPlayer(mockTutorial)
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("3");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
+      })
 
-      const changeBtn = screen.getByTestId("change-value-btn");
+      const changeBtn = screen.getByTestId('change-value-btn')
 
       // Reach target (5)
       await act(async () => {
-        fireEvent.click(changeBtn);
-      });
+        fireEvent.click(changeBtn)
+      })
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
 
       // Verify celebration appears
       await waitFor(
         () => {
-          const celebration = screen.queryByText("🎉");
-          const excellentWork = screen.queryByText("Excellent work!");
-          expect(celebration || excellentWork).toBeTruthy();
+          const celebration = screen.queryByText('🎉')
+          const excellentWork = screen.queryByText('Excellent work!')
+          expect(celebration || excellentWork).toBeTruthy()
         },
-        { timeout: 3000 },
-      );
+        { timeout: 3000 }
+      )
 
       // Move away (to 6)
       await act(async () => {
-        fireEvent.click(changeBtn);
-      });
+        fireEvent.click(changeBtn)
+      })
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("6");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('6')
+      })
 
       // Celebration should be gone
       await waitFor(() => {
-        expect(screen.queryByText("🎉")).toBeFalsy();
-        expect(screen.queryByText("Excellent work!")).toBeFalsy();
-      });
+        expect(screen.queryByText('🎉')).toBeFalsy()
+        expect(screen.queryByText('Excellent work!')).toBeFalsy()
+      })
 
       // Go back to start (3) then back to target (5)
       await act(async () => {
-        fireEvent.click(changeBtn); // 6 -> 3
-      });
+        fireEvent.click(changeBtn) // 6 -> 3
+      })
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("3");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
+      })
 
       await act(async () => {
-        fireEvent.click(changeBtn); // 3 -> 5
-      });
+        fireEvent.click(changeBtn) // 3 -> 5
+      })
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
 
       // Celebration should return
       await waitFor(
         () => {
-          const celebration = screen.queryByText("🎉");
-          const excellentWork = screen.queryByText("Excellent work!");
-          expect(celebration || excellentWork).toBeTruthy();
+          const celebration = screen.queryByText('🎉')
+          const excellentWork = screen.queryByText('Excellent work!')
+          expect(celebration || excellentWork).toBeTruthy()
         },
-        { timeout: 3000 },
-      );
-    });
+        { timeout: 3000 }
+      )
+    })
 
-    it("should handle multiple step navigation with celebration tooltips", async () => {
+    it('should handle multiple step navigation with celebration tooltips', async () => {
       const multiStepTutorial: Tutorial = {
         ...mockTutorial,
         steps: [
           mockTutorial.steps[0],
           {
-            id: "step-2",
-            title: "Add One",
-            problem: "4 + 1",
-            description: "Add 1 to 4 to get 5",
+            id: 'step-2',
+            title: 'Add One',
+            problem: '4 + 1',
+            description: 'Add 1 to 4 to get 5',
             startValue: 4,
             targetValue: 5,
-            expectedAction: "add",
-            actionDescription: "4 + 1 = 5",
+            expectedAction: 'add',
+            actionDescription: '4 + 1 = 5',
             tooltip: {
-              content: "Add 1 to reach 5",
-              explanation: "Move one earth bead up to add 1",
+              content: 'Add 1 to reach 5',
+              explanation: 'Move one earth bead up to add 1',
             },
-            multiStepInstructions: ["Move one earth bead up"],
+            multiStepInstructions: ['Move one earth bead up'],
           },
         ],
-      };
+      }
 
-      renderTutorialPlayer(multiStepTutorial);
+      renderTutorialPlayer(multiStepTutorial)
 
       // Complete first step
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("3");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
+      })
 
-      const changeBtn = screen.getByTestId("change-value-btn");
+      const changeBtn = screen.getByTestId('change-value-btn')
 
       await act(async () => {
-        fireEvent.click(changeBtn); // 3 -> 5
-      });
+        fireEvent.click(changeBtn) // 3 -> 5
+      })
 
       // Wait for celebration
       await waitFor(
         () => {
-          const celebration = screen.queryByText("🎉");
-          const excellentWork = screen.queryByText("Excellent work!");
-          expect(celebration || excellentWork).toBeTruthy();
+          const celebration = screen.queryByText('🎉')
+          const excellentWork = screen.queryByText('Excellent work!')
+          expect(celebration || excellentWork).toBeTruthy()
         },
-        { timeout: 3000 },
-      );
+        { timeout: 3000 }
+      )
 
       // Navigate to next step
-      const nextButton = screen.getByText(/Next/);
+      const nextButton = screen.getByText(/Next/)
       await act(async () => {
-        fireEvent.click(nextButton);
-      });
+        fireEvent.click(nextButton)
+      })
 
       // Wait for step 2 to load
       await waitFor(() => {
-        expect(screen.getByText("4 + 1")).toBeInTheDocument();
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("4");
-      });
+        expect(screen.getByText('4 + 1')).toBeInTheDocument()
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('4')
+      })
 
       // Complete second step
       await act(async () => {
-        fireEvent.click(changeBtn); // Should go from 4 to 5
-      });
+        fireEvent.click(changeBtn) // Should go from 4 to 5
+      })
 
       // Celebration should appear for second step too
       await waitFor(
         () => {
-          const celebration = screen.queryByText("🎉");
-          const excellentWork = screen.queryByText("Excellent work!");
-          expect(celebration || excellentWork).toBeTruthy();
+          const celebration = screen.queryByText('🎉')
+          const excellentWork = screen.queryByText('Excellent work!')
+          expect(celebration || excellentWork).toBeTruthy()
         },
-        { timeout: 3000 },
-      );
-    });
+        { timeout: 3000 }
+      )
+    })
 
-    it("should properly reset celebration state between steps", async () => {
+    it('should properly reset celebration state between steps', async () => {
       const multiStepTutorial: Tutorial = {
         ...mockTutorial,
         steps: [
           mockTutorial.steps[0],
           {
-            id: "step-2",
-            title: "Different Target",
-            problem: "2 + 4",
-            description: "Add 4 to 2 to get 6",
+            id: 'step-2',
+            title: 'Different Target',
+            problem: '2 + 4',
+            description: 'Add 4 to 2 to get 6',
             startValue: 2,
             targetValue: 6,
-            expectedAction: "add",
-            actionDescription: "2 + 4 = 6",
+            expectedAction: 'add',
+            actionDescription: '2 + 4 = 6',
             tooltip: {
-              content: "Add 4 to reach 6",
-              explanation: "Move four earth beads up to add 4",
+              content: 'Add 4 to reach 6',
+              explanation: 'Move four earth beads up to add 4',
             },
-            multiStepInstructions: ["Move four earth beads up"],
+            multiStepInstructions: ['Move four earth beads up'],
           },
         ],
-      };
+      }
 
-      renderTutorialPlayer(multiStepTutorial);
+      renderTutorialPlayer(multiStepTutorial)
 
       // Complete first step (target 5)
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("3");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
+      })
 
-      const changeBtn = screen.getByTestId("change-value-btn");
+      const changeBtn = screen.getByTestId('change-value-btn')
 
       await act(async () => {
-        fireEvent.click(changeBtn); // 3 -> 5
-      });
+        fireEvent.click(changeBtn) // 3 -> 5
+      })
 
       // Wait for celebration
       await waitFor(() => {
-        const celebration = screen.queryByText("🎉");
-        const excellentWork = screen.queryByText("Excellent work!");
-        expect(celebration || excellentWork).toBeTruthy();
-      });
+        const celebration = screen.queryByText('🎉')
+        const excellentWork = screen.queryByText('Excellent work!')
+        expect(celebration || excellentWork).toBeTruthy()
+      })
 
       // Navigate to step 2
-      const nextButton = screen.getByText(/Next/);
+      const nextButton = screen.getByText(/Next/)
       await act(async () => {
-        fireEvent.click(nextButton);
-      });
+        fireEvent.click(nextButton)
+      })
 
       // Step 2 should start fresh (no celebration initially)
       await waitFor(() => {
-        expect(screen.getByText("2 + 4")).toBeInTheDocument();
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("2");
-      });
+        expect(screen.getByText('2 + 4')).toBeInTheDocument()
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('2')
+      })
 
       // Should not show celebration initially for new step
-      expect(screen.queryByText("🎉")).toBeFalsy();
-      expect(screen.queryByText("Excellent work!")).toBeFalsy();
-    });
-  });
+      expect(screen.queryByText('🎉')).toBeFalsy()
+      expect(screen.queryByText('Excellent work!')).toBeFalsy()
+    })
+  })
 
-  describe("Tooltip Content and Styling", () => {
-    it("should show correct celebration content and styling", async () => {
-      renderTutorialPlayer(mockTutorial);
+  describe('Tooltip Content and Styling', () => {
+    it('should show correct celebration content and styling', async () => {
+      renderTutorialPlayer(mockTutorial)
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("3");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
+      })
 
-      const changeBtn = screen.getByTestId("change-value-btn");
+      const changeBtn = screen.getByTestId('change-value-btn')
 
       // Reach target value
       await act(async () => {
-        fireEvent.click(changeBtn);
-      });
+        fireEvent.click(changeBtn)
+      })
 
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("5");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('5')
+      })
 
       // Verify both celebration elements appear
       await waitFor(
         () => {
-          expect(screen.queryByText("🎉")).toBeTruthy();
-          expect(screen.queryByText("Excellent work!")).toBeTruthy();
+          expect(screen.queryByText('🎉')).toBeTruthy()
+          expect(screen.queryByText('Excellent work!')).toBeTruthy()
         },
-        { timeout: 3000 },
-      );
+        { timeout: 3000 }
+      )
 
       // The overlay should have celebration styling
-      const overlay = screen.queryByTestId("overlay-0");
-      expect(overlay).toBeTruthy();
-    });
+      const overlay = screen.queryByTestId('overlay-0')
+      expect(overlay).toBeTruthy()
+    })
 
-    it("should show instruction content when not at target", async () => {
-      renderTutorialPlayer(mockTutorial);
+    it('should show instruction content when not at target', async () => {
+      renderTutorialPlayer(mockTutorial)
 
       // Initially should show instructions (not celebration)
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("3");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('3')
+      })
 
       // Should not show celebration initially
-      expect(screen.queryByText("🎉")).toBeFalsy();
-      expect(screen.queryByText("Excellent work!")).toBeFalsy();
-    });
-  });
-});
+      expect(screen.queryByText('🎉')).toBeFalsy()
+      expect(screen.queryByText('Excellent work!')).toBeFalsy()
+    })
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/TutorialPlayerHelpers.test.ts b/apps/web/src/components/tutorial/__tests__/TutorialPlayerHelpers.test.ts
index 1c2452a0..d66b1dff 100644
--- a/apps/web/src/components/tutorial/__tests__/TutorialPlayerHelpers.test.ts
+++ b/apps/web/src/components/tutorial/__tests__/TutorialPlayerHelpers.test.ts
@@ -1,6 +1,6 @@
-import type { StepBeadHighlight } from "@soroban/abacus-react";
-import type React from "react";
-import { vi } from "vitest";
+import type { StepBeadHighlight } from '@soroban/abacus-react'
+import type React from 'react'
+import { vi } from 'vitest'
 
 // Import the helper functions from the module (we'll need to extract these)
 // For now, let's define them locally for testing
@@ -8,13 +8,13 @@ import { vi } from "vitest";
 // Helper function to compute problem string from start and target values
 function computeProblemString(startValue: number, targetValue: number): string {
   if (targetValue > startValue) {
-    const difference = targetValue - startValue;
-    return `${startValue} + ${difference} = ${targetValue}`;
+    const difference = targetValue - startValue
+    return `${startValue} + ${difference} = ${targetValue}`
   } else if (targetValue < startValue) {
-    const difference = startValue - targetValue;
-    return `${startValue} - ${difference} = ${targetValue}`;
+    const difference = startValue - targetValue
+    return `${startValue} - ${difference} = ${targetValue}`
   } else {
-    return `${startValue} (no change)`;
+    return `${startValue} (no change)`
   }
 }
 
@@ -22,29 +22,29 @@ function computeProblemString(startValue: number, targetValue: number): string {
 function calculateBeadPosition(
   bead: StepBeadHighlight,
   beadRefs: React.MutableRefObject<Map<string, SVGElement>>,
-  abacusContainer: HTMLElement | null,
+  abacusContainer: HTMLElement | null
 ): { x: number; y: number } | null {
-  if (!abacusContainer) return null;
+  if (!abacusContainer) return null
 
-  const key = `${bead.placeValue}-${bead.beadType}-${bead.position || 0}`;
-  const beadElement = beadRefs.current.get(key);
+  const key = `${bead.placeValue}-${bead.beadType}-${bead.position || 0}`
+  const beadElement = beadRefs.current.get(key)
 
-  if (!beadElement) return null;
+  if (!beadElement) return null
 
-  const beadRect = beadElement.getBoundingClientRect();
-  const containerRect = abacusContainer.getBoundingClientRect();
+  const beadRect = beadElement.getBoundingClientRect()
+  const containerRect = abacusContainer.getBoundingClientRect()
 
   return {
     x: beadRect.left + beadRect.width / 2 - containerRect.left,
     y: beadRect.top + beadRect.height / 2 - containerRect.top,
-  };
+  }
 }
 
 // Helper function to find the topmost bead with arrows
 function findTopmostBeadWithArrows(
-  stepBeadHighlights: StepBeadHighlight[] | undefined,
+  stepBeadHighlights: StepBeadHighlight[] | undefined
 ): StepBeadHighlight | null {
-  if (!stepBeadHighlights || stepBeadHighlights.length === 0) return null;
+  if (!stepBeadHighlights || stepBeadHighlights.length === 0) return null
 
   // Sort by place value (highest first, since place value 4 = leftmost = highest value)
   // Then by bead type (heaven beads are higher than earth beads)
@@ -52,195 +52,195 @@ function findTopmostBeadWithArrows(
   const sortedBeads = [...stepBeadHighlights].sort((a, b) => {
     // First sort by place value (higher place value = more significant = topmost priority)
     if (a.placeValue !== b.placeValue) {
-      return b.placeValue - a.placeValue;
+      return b.placeValue - a.placeValue
     }
 
     // If same place value, heaven beads come before earth beads
     if (a.beadType !== b.beadType) {
-      return a.beadType === "heaven" ? -1 : 1;
+      return a.beadType === 'heaven' ? -1 : 1
     }
 
     // If both earth beads in same column, lower position number = higher on abacus
-    if (a.beadType === "earth" && b.beadType === "earth") {
-      return (a.position || 0) - (b.position || 0);
+    if (a.beadType === 'earth' && b.beadType === 'earth') {
+      return (a.position || 0) - (b.position || 0)
     }
 
-    return 0;
-  });
+    return 0
+  })
 
-  return sortedBeads[0] || null;
+  return sortedBeads[0] || null
 }
 
-describe("TutorialPlayer Helper Functions", () => {
-  describe("computeProblemString", () => {
-    it("should handle addition problems correctly", () => {
-      expect(computeProblemString(0, 5)).toBe("0 + 5 = 5");
-      expect(computeProblemString(3, 7)).toBe("3 + 4 = 7");
-      expect(computeProblemString(10, 15)).toBe("10 + 5 = 15");
-    });
+describe('TutorialPlayer Helper Functions', () => {
+  describe('computeProblemString', () => {
+    it('should handle addition problems correctly', () => {
+      expect(computeProblemString(0, 5)).toBe('0 + 5 = 5')
+      expect(computeProblemString(3, 7)).toBe('3 + 4 = 7')
+      expect(computeProblemString(10, 15)).toBe('10 + 5 = 15')
+    })
 
-    it("should handle subtraction problems correctly", () => {
-      expect(computeProblemString(5, 0)).toBe("5 - 5 = 0");
-      expect(computeProblemString(7, 3)).toBe("7 - 4 = 3");
-      expect(computeProblemString(15, 10)).toBe("15 - 5 = 10");
-    });
+    it('should handle subtraction problems correctly', () => {
+      expect(computeProblemString(5, 0)).toBe('5 - 5 = 0')
+      expect(computeProblemString(7, 3)).toBe('7 - 4 = 3')
+      expect(computeProblemString(15, 10)).toBe('15 - 5 = 10')
+    })
 
-    it("should handle no change problems correctly", () => {
-      expect(computeProblemString(0, 0)).toBe("0 (no change)");
-      expect(computeProblemString(5, 5)).toBe("5 (no change)");
-      expect(computeProblemString(42, 42)).toBe("42 (no change)");
-    });
+    it('should handle no change problems correctly', () => {
+      expect(computeProblemString(0, 0)).toBe('0 (no change)')
+      expect(computeProblemString(5, 5)).toBe('5 (no change)')
+      expect(computeProblemString(42, 42)).toBe('42 (no change)')
+    })
 
-    it("should handle edge cases", () => {
-      expect(computeProblemString(-5, 0)).toBe("-5 + 5 = 0");
-      expect(computeProblemString(0, -3)).toBe("0 - 3 = -3");
-      expect(computeProblemString(-2, -5)).toBe("-2 - 3 = -5");
-    });
-  });
+    it('should handle edge cases', () => {
+      expect(computeProblemString(-5, 0)).toBe('-5 + 5 = 0')
+      expect(computeProblemString(0, -3)).toBe('0 - 3 = -3')
+      expect(computeProblemString(-2, -5)).toBe('-2 - 3 = -5')
+    })
+  })
 
-  describe("findTopmostBeadWithArrows", () => {
-    it("should return null for empty or undefined input", () => {
-      expect(findTopmostBeadWithArrows(undefined)).toBeNull();
-      expect(findTopmostBeadWithArrows([])).toBeNull();
-    });
+  describe('findTopmostBeadWithArrows', () => {
+    it('should return null for empty or undefined input', () => {
+      expect(findTopmostBeadWithArrows(undefined)).toBeNull()
+      expect(findTopmostBeadWithArrows([])).toBeNull()
+    })
 
-    it("should return the only bead when there is one", () => {
+    it('should return the only bead when there is one', () => {
       const singleBead: StepBeadHighlight = {
         placeValue: 0,
-        beadType: "earth",
+        beadType: 'earth',
         position: 0,
-        direction: "up",
+        direction: 'up',
         stepIndex: 0,
-      };
+      }
 
-      expect(findTopmostBeadWithArrows([singleBead])).toEqual(singleBead);
-    });
+      expect(findTopmostBeadWithArrows([singleBead])).toEqual(singleBead)
+    })
 
-    it("should prioritize higher place values", () => {
+    it('should prioritize higher place values', () => {
       const beads: StepBeadHighlight[] = [
         {
           placeValue: 0,
-          beadType: "earth",
+          beadType: 'earth',
           position: 0,
-          direction: "up",
+          direction: 'up',
           stepIndex: 0,
         },
         {
           placeValue: 2,
-          beadType: "earth",
+          beadType: 'earth',
           position: 0,
-          direction: "up",
+          direction: 'up',
           stepIndex: 0,
         },
         {
           placeValue: 1,
-          beadType: "earth",
+          beadType: 'earth',
           position: 0,
-          direction: "up",
+          direction: 'up',
           stepIndex: 0,
         },
-      ];
+      ]
 
-      const result = findTopmostBeadWithArrows(beads);
-      expect(result?.placeValue).toBe(2);
-    });
+      const result = findTopmostBeadWithArrows(beads)
+      expect(result?.placeValue).toBe(2)
+    })
 
-    it("should prioritize heaven beads over earth beads in same column", () => {
+    it('should prioritize heaven beads over earth beads in same column', () => {
       const beads: StepBeadHighlight[] = [
         {
           placeValue: 1,
-          beadType: "earth",
+          beadType: 'earth',
           position: 0,
-          direction: "up",
+          direction: 'up',
           stepIndex: 0,
         },
-        { placeValue: 1, beadType: "heaven", direction: "down", stepIndex: 0 },
-      ];
+        { placeValue: 1, beadType: 'heaven', direction: 'down', stepIndex: 0 },
+      ]
 
-      const result = findTopmostBeadWithArrows(beads);
-      expect(result?.beadType).toBe("heaven");
-    });
+      const result = findTopmostBeadWithArrows(beads)
+      expect(result?.beadType).toBe('heaven')
+    })
 
-    it("should prioritize lower position earth beads (higher on abacus)", () => {
+    it('should prioritize lower position earth beads (higher on abacus)', () => {
       const beads: StepBeadHighlight[] = [
         {
           placeValue: 0,
-          beadType: "earth",
+          beadType: 'earth',
           position: 2,
-          direction: "up",
+          direction: 'up',
           stepIndex: 0,
         },
         {
           placeValue: 0,
-          beadType: "earth",
+          beadType: 'earth',
           position: 0,
-          direction: "up",
+          direction: 'up',
           stepIndex: 0,
         },
         {
           placeValue: 0,
-          beadType: "earth",
+          beadType: 'earth',
           position: 1,
-          direction: "up",
+          direction: 'up',
           stepIndex: 0,
         },
-      ];
+      ]
 
-      const result = findTopmostBeadWithArrows(beads);
-      expect(result?.position).toBe(0);
-    });
+      const result = findTopmostBeadWithArrows(beads)
+      expect(result?.position).toBe(0)
+    })
 
-    it("should handle complex mixed scenarios correctly", () => {
+    it('should handle complex mixed scenarios correctly', () => {
       const beads: StepBeadHighlight[] = [
         {
           placeValue: 0,
-          beadType: "earth",
+          beadType: 'earth',
           position: 1,
-          direction: "up",
+          direction: 'up',
           stepIndex: 0,
         },
         {
           placeValue: 1,
-          beadType: "earth",
+          beadType: 'earth',
           position: 3,
-          direction: "down",
+          direction: 'down',
           stepIndex: 0,
         },
-        { placeValue: 2, beadType: "heaven", direction: "down", stepIndex: 0 },
-        { placeValue: 1, beadType: "heaven", direction: "up", stepIndex: 0 },
-      ];
+        { placeValue: 2, beadType: 'heaven', direction: 'down', stepIndex: 0 },
+        { placeValue: 1, beadType: 'heaven', direction: 'up', stepIndex: 0 },
+      ]
 
-      const result = findTopmostBeadWithArrows(beads);
+      const result = findTopmostBeadWithArrows(beads)
       // Should pick place value 2 (highest), heaven bead
-      expect(result?.placeValue).toBe(2);
-      expect(result?.beadType).toBe("heaven");
-    });
+      expect(result?.placeValue).toBe(2)
+      expect(result?.beadType).toBe('heaven')
+    })
 
-    it("should handle undefined positions correctly", () => {
+    it('should handle undefined positions correctly', () => {
       const beads: StepBeadHighlight[] = [
-        { placeValue: 0, beadType: "earth", direction: "up", stepIndex: 0 }, // No position
+        { placeValue: 0, beadType: 'earth', direction: 'up', stepIndex: 0 }, // No position
         {
           placeValue: 0,
-          beadType: "earth",
+          beadType: 'earth',
           position: 1,
-          direction: "up",
+          direction: 'up',
           stepIndex: 0,
         },
-      ];
+      ]
 
-      const result = findTopmostBeadWithArrows(beads);
+      const result = findTopmostBeadWithArrows(beads)
       // Should pick position 0 (undefined defaults to 0, which is higher)
-      expect(result?.position).toBeUndefined();
-    });
-  });
+      expect(result?.position).toBeUndefined()
+    })
+  })
 
-  describe("calculateBeadPosition", () => {
-    let mockBeadRefs: React.MutableRefObject<Map<string, SVGElement>>;
-    let mockAbacusContainer: HTMLElement;
+  describe('calculateBeadPosition', () => {
+    let mockBeadRefs: React.MutableRefObject<Map<string, SVGElement>>
+    let mockAbacusContainer: HTMLElement
 
     beforeEach(() => {
       // Mock getBoundingClientRect for SVG elements and container
-      const mockGetBoundingClientRect = vi.fn();
+      const mockGetBoundingClientRect = vi.fn()
 
       // Mock bead element
       const mockBeadElement = {
@@ -250,7 +250,7 @@ describe("TutorialPlayer Helper Functions", () => {
           width: 20,
           height: 20,
         }),
-      } as unknown as SVGElement;
+      } as unknown as SVGElement
 
       // Mock container element
       mockAbacusContainer = {
@@ -260,117 +260,101 @@ describe("TutorialPlayer Helper Functions", () => {
           width: 400,
           height: 300,
         }),
-      } as unknown as HTMLElement;
+      } as unknown as HTMLElement
 
       // Create mock beadRefs
-      const beadMap = new Map<string, SVGElement>();
-      beadMap.set("0-earth-0", mockBeadElement);
-      beadMap.set("1-heaven-0", mockBeadElement);
+      const beadMap = new Map<string, SVGElement>()
+      beadMap.set('0-earth-0', mockBeadElement)
+      beadMap.set('1-heaven-0', mockBeadElement)
 
-      mockBeadRefs = { current: beadMap };
-    });
+      mockBeadRefs = { current: beadMap }
+    })
 
-    it("should return null when abacusContainer is null", () => {
+    it('should return null when abacusContainer is null', () => {
       const bead: StepBeadHighlight = {
         placeValue: 0,
-        beadType: "earth",
+        beadType: 'earth',
         position: 0,
-        direction: "up",
+        direction: 'up',
         stepIndex: 0,
-      };
+      }
 
-      const result = calculateBeadPosition(bead, mockBeadRefs, null);
-      expect(result).toBeNull();
-    });
+      const result = calculateBeadPosition(bead, mockBeadRefs, null)
+      expect(result).toBeNull()
+    })
 
-    it("should return null when bead element is not found in refs", () => {
+    it('should return null when bead element is not found in refs', () => {
       const bead: StepBeadHighlight = {
         placeValue: 5, // Not in our mock refs
-        beadType: "earth",
+        beadType: 'earth',
         position: 0,
-        direction: "up",
+        direction: 'up',
         stepIndex: 0,
-      };
+      }
 
-      const result = calculateBeadPosition(
-        bead,
-        mockBeadRefs,
-        mockAbacusContainer,
-      );
-      expect(result).toBeNull();
-    });
+      const result = calculateBeadPosition(bead, mockBeadRefs, mockAbacusContainer)
+      expect(result).toBeNull()
+    })
 
-    it("should calculate correct relative position for earth bead", () => {
+    it('should calculate correct relative position for earth bead', () => {
       const bead: StepBeadHighlight = {
         placeValue: 0,
-        beadType: "earth",
+        beadType: 'earth',
         position: 0,
-        direction: "up",
+        direction: 'up',
         stepIndex: 0,
-      };
+      }
 
-      const result = calculateBeadPosition(
-        bead,
-        mockBeadRefs,
-        mockAbacusContainer,
-      );
+      const result = calculateBeadPosition(bead, mockBeadRefs, mockAbacusContainer)
 
       expect(result).toEqual({
         x: 60, // (100 + 20/2) - 50 = 110 - 50 = 60
         y: 40, // (50 + 20/2) - 20 = 60 - 20 = 40
-      });
-    });
+      })
+    })
 
-    it("should calculate correct relative position for heaven bead", () => {
+    it('should calculate correct relative position for heaven bead', () => {
       const bead: StepBeadHighlight = {
         placeValue: 1,
-        beadType: "heaven",
-        direction: "down",
+        beadType: 'heaven',
+        direction: 'down',
         stepIndex: 0,
-      };
+      }
 
-      const result = calculateBeadPosition(
-        bead,
-        mockBeadRefs,
-        mockAbacusContainer,
-      );
+      const result = calculateBeadPosition(bead, mockBeadRefs, mockAbacusContainer)
 
       expect(result).toEqual({
         x: 60, // Same calculation as above
         y: 40,
-      });
-    });
+      })
+    })
 
-    it("should use position 0 as default when position is undefined", () => {
+    it('should use position 0 as default when position is undefined', () => {
       const bead: StepBeadHighlight = {
         placeValue: 0,
-        beadType: "earth",
+        beadType: 'earth',
         // position is undefined
-        direction: "up",
+        direction: 'up',
         stepIndex: 0,
-      };
+      }
 
       // This should look for key '0-earth-0' which exists in our mock
-      const result = calculateBeadPosition(
-        bead,
-        mockBeadRefs,
-        mockAbacusContainer,
-      );
+      const result = calculateBeadPosition(bead, mockBeadRefs, mockAbacusContainer)
 
       expect(result).toEqual({
         x: 60,
         y: 40,
-      });
-    });
+      })
+    })
 
-    it("should generate correct key format for bead lookup", () => {
+    it('should generate correct key format for bead lookup', () => {
       const bead: StepBeadHighlight = {
         placeValue: 2,
-        beadType: "earth",
+        beadType: 'earth',
         position: 3,
-        direction: "up",
+        direction: 'up',
         stepIndex: 0,
-      };
+      }
 
       // Add this specific bead to our refs
       const mockElement = {
@@ -380,20 +364,16 @@ describe("TutorialPlayer Helper Functions", () => {
           width: 25,
           height: 25,
         }),
-      } as unknown as SVGElement;
+      } as unknown as SVGElement
 
-      mockBeadRefs.current.set("2-earth-3", mockElement);
+      mockBeadRefs.current.set('2-earth-3', mockElement)
 
-      const result = calculateBeadPosition(
-        bead,
-        mockBeadRefs,
-        mockAbacusContainer,
-      );
+      const result = calculateBeadPosition(bead, mockBeadRefs, mockAbacusContainer)
 
       expect(result).toEqual({
         x: 162.5, // (200 + 25/2) - 50 = 212.5 - 50 = 162.5
         y: 92.5, // (100 + 25/2) - 20 = 112.5 - 20 = 92.5
-      });
-    });
-  });
-});
+      })
+    })
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/TutorialPlayerLayout.integration.test.tsx b/apps/web/src/components/tutorial/__tests__/TutorialPlayerLayout.integration.test.tsx
index 45a22c38..b96038eb 100644
--- a/apps/web/src/components/tutorial/__tests__/TutorialPlayerLayout.integration.test.tsx
+++ b/apps/web/src/components/tutorial/__tests__/TutorialPlayerLayout.integration.test.tsx
@@ -1,32 +1,25 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import type { Tutorial } from "../../../types/tutorial";
-import { getTutorialForEditor } from "../../../utils/tutorialConverter";
-import { TutorialPlayer } from "../TutorialPlayer";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { Tutorial } from '../../../types/tutorial'
+import { getTutorialForEditor } from '../../../utils/tutorialConverter'
+import { TutorialPlayer } from '../TutorialPlayer'
 
 // Mock the AbacusReact component for integration tests
-vi.mock("@soroban/abacus-react", () => ({
-  AbacusReact: ({
-    value,
-    onValueChange,
-    callbacks,
-    stepBeadHighlights,
-  }: any) => (
+vi.mock('@soroban/abacus-react', () => ({
+  AbacusReact: ({ value, onValueChange, callbacks, stepBeadHighlights }: any) => (
     <div data-testid="mock-abacus">
       <div data-testid="abacus-value">{value}</div>
-      <div data-testid="step-bead-highlights">
-        {stepBeadHighlights?.length || 0} arrows
-      </div>
+      <div data-testid="step-bead-highlights">{stepBeadHighlights?.length || 0} arrows</div>
       <button
         data-testid="mock-bead-0"
         onClick={() => {
-          onValueChange?.(value + 1);
+          onValueChange?.(value + 1)
           callbacks?.onBeadClick?.({
             placeValue: 0,
-            beadType: "earth",
+            beadType: 'earth',
             position: 0,
             active: false,
-          });
+          })
         }}
       >
         Mock Earth Bead
@@ -34,33 +27,33 @@ vi.mock("@soroban/abacus-react", () => ({
       <button
         data-testid="mock-bead-heaven"
         onClick={() => {
-          onValueChange?.(value + 5);
+          onValueChange?.(value + 5)
           callbacks?.onBeadClick?.({
             placeValue: 0,
-            beadType: "heaven",
+            beadType: 'heaven',
             active: false,
-          });
+          })
         }}
       >
         Mock Heaven Bead
       </button>
     </div>
   ),
-}));
+}))
 
-describe("TutorialPlayer New Layout Integration Tests", () => {
-  let mockTutorial: Tutorial;
-  let mockOnStepChange: ReturnType<typeof vi.fn>;
-  let mockOnStepComplete: ReturnType<typeof vi.fn>;
-  let mockOnEvent: ReturnType<typeof vi.fn>;
+describe('TutorialPlayer New Layout Integration Tests', () => {
+  let mockTutorial: Tutorial
+  let mockOnStepChange: ReturnType<typeof vi.fn>
+  let mockOnStepComplete: ReturnType<typeof vi.fn>
+  let mockOnEvent: ReturnType<typeof vi.fn>
 
   beforeEach(() => {
-    vi.clearAllMocks();
-    mockTutorial = getTutorialForEditor();
-    mockOnStepChange = vi.fn();
-    mockOnStepComplete = vi.fn();
-    mockOnEvent = vi.fn();
-  });
+    vi.clearAllMocks()
+    mockTutorial = getTutorialForEditor()
+    mockOnStepChange = vi.fn()
+    mockOnStepComplete = vi.fn()
+    mockOnEvent = vi.fn()
+  })
 
   const renderTutorialPlayer = (props = {}) => {
     return render(
@@ -70,172 +63,163 @@ describe("TutorialPlayer New Layout Integration Tests", () => {
         onStepComplete={mockOnStepComplete}
         onEvent={mockOnEvent}
         {...props}
-      />,
-    );
-  };
+      />
+    )
+  }
 
-  describe("New Layout Structure", () => {
-    it("should render tutorial step title instead of problem field", () => {
-      renderTutorialPlayer();
+  describe('New Layout Structure', () => {
+    it('should render tutorial step title instead of problem field', () => {
+      renderTutorialPlayer()
 
-      const firstStep = mockTutorial.steps[0];
-      expect(screen.getByText(firstStep.title)).toBeInTheDocument();
+      const firstStep = mockTutorial.steps[0]
+      expect(screen.getByText(firstStep.title)).toBeInTheDocument()
 
       // Should NOT display the raw problem field
-      expect(screen.queryByText(firstStep.problem)).not.toBeInTheDocument();
-    });
+      expect(screen.queryByText(firstStep.problem)).not.toBeInTheDocument()
+    })
 
-    it("should display computed problem string from start/target values", () => {
-      renderTutorialPlayer();
+    it('should display computed problem string from start/target values', () => {
+      renderTutorialPlayer()
 
-      const firstStep = mockTutorial.steps[0];
-      const expectedProblem = `${firstStep.startValue} + ${firstStep.targetValue - firstStep.startValue} = ${firstStep.targetValue}`;
+      const firstStep = mockTutorial.steps[0]
+      const expectedProblem = `${firstStep.startValue} + ${firstStep.targetValue - firstStep.startValue} = ${firstStep.targetValue}`
 
-      expect(screen.getByText(expectedProblem)).toBeInTheDocument();
-    });
+      expect(screen.getByText(expectedProblem)).toBeInTheDocument()
+    })
 
-    it("should show inline guidance with fixed height layout", () => {
-      renderTutorialPlayer();
+    it('should show inline guidance with fixed height layout', () => {
+      renderTutorialPlayer()
 
       // Should show current instruction in inline guidance area
-      const _firstStep = mockTutorial.steps[0];
-      expect(
-        screen.getByText("Click the earth bead to add 1"),
-      ).toBeInTheDocument();
-    });
+      const _firstStep = mockTutorial.steps[0]
+      expect(screen.getByText('Click the earth bead to add 1')).toBeInTheDocument()
+    })
 
-    it("should keep abacus always visible and centered", () => {
-      renderTutorialPlayer();
+    it('should keep abacus always visible and centered', () => {
+      renderTutorialPlayer()
 
-      const abacus = screen.getByTestId("mock-abacus");
-      expect(abacus).toBeInTheDocument();
+      const abacus = screen.getByTestId('mock-abacus')
+      expect(abacus).toBeInTheDocument()
 
       // Abacus should be present and visible
-      expect(abacus).toBeVisible();
-    });
+      expect(abacus).toBeVisible()
+    })
 
-    it("should show bead diff tooltip instead of error messages", async () => {
-      renderTutorialPlayer();
+    it('should show bead diff tooltip instead of error messages', async () => {
+      renderTutorialPlayer()
 
       // With new design, no error toasts are shown - only bead diff tooltip
-      const abacus = screen.getByTestId("mock-abacus");
-      expect(abacus).toBeInTheDocument();
+      const abacus = screen.getByTestId('mock-abacus')
+      expect(abacus).toBeInTheDocument()
 
       // Bead diff tooltip should appear when there are highlights
-      const highlights = screen.getByTestId("step-bead-highlights");
-      expect(highlights).toHaveTextContent("1 arrows");
-    });
+      const highlights = screen.getByTestId('step-bead-highlights')
+      expect(highlights).toHaveTextContent('1 arrows')
+    })
 
-    it("should display success message as toast when step completed", async () => {
-      renderTutorialPlayer();
+    it('should display success message as toast when step completed', async () => {
+      renderTutorialPlayer()
 
-      const firstStep = mockTutorial.steps[0];
-      const targetValue = firstStep.targetValue;
+      const firstStep = mockTutorial.steps[0]
+      const targetValue = firstStep.targetValue
 
       // Simulate correct interaction to complete step
       for (let i = 0; i < targetValue; i++) {
-        const bead = screen.getByTestId("mock-bead-0");
-        fireEvent.click(bead);
+        const bead = screen.getByTestId('mock-bead-0')
+        fireEvent.click(bead)
       }
 
       // Should show success message as toast
       await waitFor(() => {
-        expect(
-          screen.getByText(/great! you completed this step correctly/i),
-        ).toBeInTheDocument();
-      });
-    });
-  });
+        expect(screen.getByText(/great! you completed this step correctly/i)).toBeInTheDocument()
+      })
+    })
+  })
 
-  describe("Bead Tooltip Functionality", () => {
-    it("should show bead diff tooltip when user needs help", async () => {
-      renderTutorialPlayer();
+  describe('Bead Tooltip Functionality', () => {
+    it('should show bead diff tooltip when user needs help', async () => {
+      renderTutorialPlayer()
 
       // Wait for help timer (8 seconds in real code, but we can test the logic)
       // Since we're mocking, we'll simulate the conditions
 
-      const abacus = screen.getByTestId("mock-abacus");
-      expect(abacus).toBeInTheDocument();
+      const abacus = screen.getByTestId('mock-abacus')
+      expect(abacus).toBeInTheDocument()
 
       // Tooltip should appear when there are step bead highlights
-      const highlights = screen.getByTestId("step-bead-highlights");
-      expect(highlights).toBeInTheDocument();
-    });
+      const highlights = screen.getByTestId('step-bead-highlights')
+      expect(highlights).toBeInTheDocument()
+    })
 
-    it("should position tooltip near topmost bead with arrows", () => {
-      renderTutorialPlayer();
+    it('should position tooltip near topmost bead with arrows', () => {
+      renderTutorialPlayer()
 
       // This tests the integration of our helper functions
       // The tooltip positioning logic should work with mock abacus
-      const abacus = screen.getByTestId("mock-abacus");
-      expect(abacus).toBeInTheDocument();
-    });
-  });
+      const abacus = screen.getByTestId('mock-abacus')
+      expect(abacus).toBeInTheDocument()
+    })
+  })
 
-  describe("Navigation and Multi-step Flow", () => {
-    it("should maintain abacus position during navigation", async () => {
-      renderTutorialPlayer();
+  describe('Navigation and Multi-step Flow', () => {
+    it('should maintain abacus position during navigation', async () => {
+      renderTutorialPlayer()
 
-      const abacus = screen.getByTestId("mock-abacus");
-      const initialPosition = abacus.getBoundingClientRect();
+      const abacus = screen.getByTestId('mock-abacus')
+      const initialPosition = abacus.getBoundingClientRect()
 
       // Navigate to next step
-      const nextButton = screen.getByText(/next/i);
-      fireEvent.click(nextButton);
+      const nextButton = screen.getByText(/next/i)
+      fireEvent.click(nextButton)
 
       await waitFor(() => {
-        const newPosition = abacus.getBoundingClientRect();
+        const newPosition = abacus.getBoundingClientRect()
         // Abacus should remain in same position
-        expect(newPosition.top).toBe(initialPosition.top);
-        expect(newPosition.left).toBe(initialPosition.left);
-      });
-    });
+        expect(newPosition.top).toBe(initialPosition.top)
+        expect(newPosition.left).toBe(initialPosition.left)
+      })
+    })
 
-    it("should update guidance content during multi-step instructions", async () => {
-      renderTutorialPlayer();
+    it('should update guidance content during multi-step instructions', async () => {
+      renderTutorialPlayer()
 
-      const firstStep = mockTutorial.steps[0];
-      if (
-        firstStep.multiStepInstructions &&
-        firstStep.multiStepInstructions.length > 1
-      ) {
+      const firstStep = mockTutorial.steps[0]
+      if (firstStep.multiStepInstructions && firstStep.multiStepInstructions.length > 1) {
         // Should show first instruction initially
-        expect(
-          screen.getByText(firstStep.multiStepInstructions[0]),
-        ).toBeInTheDocument();
+        expect(screen.getByText(firstStep.multiStepInstructions[0])).toBeInTheDocument()
 
         // After user interaction, should advance to next instruction
         // (This would need proper multi-step interaction simulation)
       }
-    });
+    })
 
-    it("should show pedagogical decomposition with highlighting", () => {
-      renderTutorialPlayer();
+    it('should show pedagogical decomposition with highlighting', () => {
+      renderTutorialPlayer()
 
       // Should show mathematical decomposition
       // This tests integration with the unified step generator
-      const firstStep = mockTutorial.steps[0];
+      const firstStep = mockTutorial.steps[0]
       if (firstStep.startValue !== firstStep.targetValue) {
         // Should show some form of mathematical representation
-        const abacusValue = screen.getByTestId("abacus-value");
-        expect(abacusValue).toBeInTheDocument();
+        const abacusValue = screen.getByTestId('abacus-value')
+        expect(abacusValue).toBeInTheDocument()
       }
-    });
-  });
+    })
+  })
 
-  describe("Responsive Layout Behavior", () => {
-    it("should not require scrolling to see abacus", () => {
-      renderTutorialPlayer();
+  describe('Responsive Layout Behavior', () => {
+    it('should not require scrolling to see abacus', () => {
+      renderTutorialPlayer()
 
-      const abacus = screen.getByTestId("mock-abacus");
-      expect(abacus).toBeInTheDocument();
-      expect(abacus).toBeVisible();
+      const abacus = screen.getByTestId('mock-abacus')
+      expect(abacus).toBeInTheDocument()
+      expect(abacus).toBeVisible()
 
       // In a real e2e test, we'd check viewport constraints
       // Here we ensure abacus is always rendered
-    });
+    })
 
-    it("should handle guidance content overflow gracefully", () => {
+    it('should handle guidance content overflow gracefully', () => {
       // Test with a tutorial step that has very long instructions
       const longInstructionTutorial = {
         ...mockTutorial,
@@ -243,11 +227,11 @@ describe("TutorialPlayer New Layout Integration Tests", () => {
           {
             ...mockTutorial.steps[0],
             multiStepInstructions: [
-              "This is a very long instruction that should be handled gracefully within the fixed height guidance area without breaking the layout or causing the abacus to move from its fixed position",
+              'This is a very long instruction that should be handled gracefully within the fixed height guidance area without breaking the layout or causing the abacus to move from its fixed position',
             ],
           },
         ],
-      };
+      }
 
       render(
         <TutorialPlayer
@@ -255,41 +239,41 @@ describe("TutorialPlayer New Layout Integration Tests", () => {
           onStepChange={mockOnStepChange}
           onStepComplete={mockOnStepComplete}
           onEvent={mockOnEvent}
-        />,
-      );
+        />
+      )
 
-      const abacus = screen.getByTestId("mock-abacus");
-      expect(abacus).toBeInTheDocument();
-      expect(abacus).toBeVisible();
-    });
-  });
+      const abacus = screen.getByTestId('mock-abacus')
+      expect(abacus).toBeInTheDocument()
+      expect(abacus).toBeVisible()
+    })
+  })
 
-  describe("Accessibility and UX", () => {
-    it("should maintain proper heading hierarchy", () => {
-      renderTutorialPlayer();
+  describe('Accessibility and UX', () => {
+    it('should maintain proper heading hierarchy', () => {
+      renderTutorialPlayer()
 
       // Should have proper h1 for tutorial title
-      const tutorialTitle = screen.getByRole("heading", { level: 1 });
-      expect(tutorialTitle).toBeInTheDocument();
+      const tutorialTitle = screen.getByRole('heading', { level: 1 })
+      expect(tutorialTitle).toBeInTheDocument()
 
       // Should have h2 for computed problem
-      const problemHeading = screen.getByRole("heading", { level: 2 });
-      expect(problemHeading).toBeInTheDocument();
-    });
+      const problemHeading = screen.getByRole('heading', { level: 2 })
+      expect(problemHeading).toBeInTheDocument()
+    })
 
-    it("should provide clear visual feedback for user actions", async () => {
-      renderTutorialPlayer();
+    it('should provide clear visual feedback for user actions', async () => {
+      renderTutorialPlayer()
 
-      const earthBead = screen.getByTestId("mock-bead-0");
-      fireEvent.click(earthBead);
+      const earthBead = screen.getByTestId('mock-bead-0')
+      fireEvent.click(earthBead)
 
       // Should update abacus value
       await waitFor(() => {
-        expect(screen.getByTestId("abacus-value")).toHaveTextContent("1");
-      });
+        expect(screen.getByTestId('abacus-value')).toHaveTextContent('1')
+      })
 
       // Should call event handlers
-      expect(mockOnEvent).toHaveBeenCalled();
-    });
-  });
-});
+      expect(mockOnEvent).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/TutorialWorkflow.e2e.test.ts b/apps/web/src/components/tutorial/__tests__/TutorialWorkflow.e2e.test.ts
index 6a452be5..29fc04af 100644
--- a/apps/web/src/components/tutorial/__tests__/TutorialWorkflow.e2e.test.ts
+++ b/apps/web/src/components/tutorial/__tests__/TutorialWorkflow.e2e.test.ts
@@ -1,335 +1,307 @@
-import { expect, type Page, test } from "@playwright/test";
+import { expect, type Page, test } from '@playwright/test'
 
 // Helper functions for tutorial testing
 const waitForTutorialLoad = async (page: Page) => {
   await page.waitForSelector('[data-testid="tutorial-player"]', {
     timeout: 10000,
-  });
+  })
   // Wait for abacus to load
-  await page.waitForSelector('[data-testid^="bead-place-"]', { timeout: 5000 });
-};
+  await page.waitForSelector('[data-testid^="bead-place-"]', { timeout: 5000 })
+}
 
 const getAbacusValue = async (page: Page): Promise<number> => {
   // This would depend on how the abacus displays its current value
   // For now, we'll use a data attribute or calculate from bead positions
-  const valueElement = await page
-    .locator('[data-testid="current-value"]')
-    .first();
+  const valueElement = await page.locator('[data-testid="current-value"]').first()
   if (await valueElement.isVisible()) {
-    const text = await valueElement.textContent();
-    return parseInt(text || "0", 10);
+    const text = await valueElement.textContent()
+    return parseInt(text || '0', 10)
   }
-  return 0;
-};
+  return 0
+}
 
 const clickBeadToIncrement = async (page: Page) => {
   // Click the first earth bead in the ones place to increment by 1
-  await page.click('[data-testid="bead-place-0-earth-pos-0"]');
-};
+  await page.click('[data-testid="bead-place-0-earth-pos-0"]')
+}
 
 const _navigateToStep = async (page: Page, stepIndex: number) => {
   // Open step list if not already open
-  const stepListButton = page.locator('button:has-text("Steps")');
+  const stepListButton = page.locator('button:has-text("Steps")')
   if (await stepListButton.isVisible()) {
-    await stepListButton.click();
+    await stepListButton.click()
   }
 
   // Click on the specific step
-  await page.click(`[data-testid="step-${stepIndex}"]`);
-};
+  await page.click(`[data-testid="step-${stepIndex}"]`)
+}
 
-test.describe("Tutorial Workflow E2E", () => {
+test.describe('Tutorial Workflow E2E', () => {
   test.beforeEach(async ({ page }) => {
     // Navigate to a tutorial page
-    await page.goto("/tutorial-editor"); // Adjust URL based on your routing
-    await waitForTutorialLoad(page);
-  });
+    await page.goto('/tutorial-editor') // Adjust URL based on your routing
+    await waitForTutorialLoad(page)
+  })
 
-  test("should initialize tutorial with correct start value", async ({
-    page,
-  }) => {
+  test('should initialize tutorial with correct start value', async ({ page }) => {
     // Check that the tutorial loads with the expected start value
-    const currentValue = await getAbacusValue(page);
-    expect(currentValue).toBeGreaterThanOrEqual(0);
+    const currentValue = await getAbacusValue(page)
+    expect(currentValue).toBeGreaterThanOrEqual(0)
 
     // Check that step information is displayed
-    await expect(page.locator('[data-testid="step-title"]')).toBeVisible();
-    await expect(
-      page.locator('[data-testid="step-description"]'),
-    ).toBeVisible();
-  });
+    await expect(page.locator('[data-testid="step-title"]')).toBeVisible()
+    await expect(page.locator('[data-testid="step-description"]')).toBeVisible()
+  })
 
-  test("should allow user to interact with abacus beads", async ({ page }) => {
-    const initialValue = await getAbacusValue(page);
+  test('should allow user to interact with abacus beads', async ({ page }) => {
+    const initialValue = await getAbacusValue(page)
 
     // Click a bead to change the value
-    await clickBeadToIncrement(page);
+    await clickBeadToIncrement(page)
 
     // Wait for value to update
-    await page.waitForTimeout(500);
+    await page.waitForTimeout(500)
 
-    const newValue = await getAbacusValue(page);
-    expect(newValue).not.toBe(initialValue);
-  });
+    const newValue = await getAbacusValue(page)
+    expect(newValue).not.toBe(initialValue)
+  })
 
-  test("should navigate between tutorial steps and reset abacus value", async ({
-    page,
-  }) => {
+  test('should navigate between tutorial steps and reset abacus value', async ({ page }) => {
     // Get initial step value
-    const step1Value = await getAbacusValue(page);
+    const step1Value = await getAbacusValue(page)
 
     // Navigate to next step
-    await page.click('button:has-text("Next")');
-    await page.waitForTimeout(1000);
+    await page.click('button:has-text("Next")')
+    await page.waitForTimeout(1000)
 
     // Check that value changed (should be the new step's startValue)
-    const step2Value = await getAbacusValue(page);
-    expect(step2Value).not.toBe(step1Value);
+    const step2Value = await getAbacusValue(page)
+    expect(step2Value).not.toBe(step1Value)
 
     // Navigate back to first step
-    await page.click('button:has-text("Previous")');
-    await page.waitForTimeout(1000);
+    await page.click('button:has-text("Previous")')
+    await page.waitForTimeout(1000)
 
     // Should return to original start value
-    const backToStep1Value = await getAbacusValue(page);
-    expect(backToStep1Value).toBe(step1Value);
-  });
+    const backToStep1Value = await getAbacusValue(page)
+    expect(backToStep1Value).toBe(step1Value)
+  })
 
-  test("should show success feedback when target value is reached", async ({
-    page,
-  }) => {
+  test('should show success feedback when target value is reached', async ({ page }) => {
     // This test assumes we can determine the target value from the UI
-    const targetValueText = await page
-      .locator('[data-testid="target-value"]')
-      .textContent();
-    const targetValue = parseInt(targetValueText || "0", 10);
-    const currentValue = await getAbacusValue(page);
+    const targetValueText = await page.locator('[data-testid="target-value"]').textContent()
+    const targetValue = parseInt(targetValueText || '0', 10)
+    const currentValue = await getAbacusValue(page)
 
     // Calculate how many clicks needed (simplified)
-    const clicksNeeded = Math.abs(targetValue - currentValue);
+    const clicksNeeded = Math.abs(targetValue - currentValue)
 
     // Click beads to reach target value
     for (let i = 0; i < clicksNeeded && i < 10; i++) {
       if (targetValue > currentValue) {
-        await clickBeadToIncrement(page);
+        await clickBeadToIncrement(page)
       }
-      await page.waitForTimeout(200);
+      await page.waitForTimeout(200)
     }
 
     // Check for success message
-    await expect(page.locator("text=/excellent|great|correct/i")).toBeVisible({
+    await expect(page.locator('text=/excellent|great|correct/i')).toBeVisible({
       timeout: 5000,
-    });
-  });
+    })
+  })
 
-  test("should handle multi-step tutorial progression", async ({ page }) => {
+  test('should handle multi-step tutorial progression', async ({ page }) => {
     // Check if this is a multi-step tutorial
-    const multiStepIndicator = page.locator(
-      '[data-testid="multi-step-indicator"]',
-    );
+    const multiStepIndicator = page.locator('[data-testid="multi-step-indicator"]')
 
     if (await multiStepIndicator.isVisible()) {
       // Should show multi-step navigation
-      await expect(page.locator('button:has-text("Prev")')).toBeVisible();
-      await expect(page.locator('button:has-text("Next")')).toBeVisible();
+      await expect(page.locator('button:has-text("Prev")')).toBeVisible()
+      await expect(page.locator('button:has-text("Next")')).toBeVisible()
 
       // Should show current multi-step instruction
-      await expect(
-        page.locator('[data-testid="multi-step-instruction"]'),
-      ).toBeVisible();
+      await expect(page.locator('[data-testid="multi-step-instruction"]')).toBeVisible()
 
       // Navigate through multi-steps
-      await page.click('button:has-text("Next ⏩")');
-      await page.waitForTimeout(500);
+      await page.click('button:has-text("Next ⏩")')
+      await page.waitForTimeout(500)
 
       // Should show different instruction
       const instruction1 = await page
         .locator('[data-testid="multi-step-instruction"]')
-        .textContent();
+        .textContent()
 
-      await page.click('button:has-text("Next ⏩")');
-      await page.waitForTimeout(500);
+      await page.click('button:has-text("Next ⏩")')
+      await page.waitForTimeout(500)
 
       const instruction2 = await page
         .locator('[data-testid="multi-step-instruction"]')
-        .textContent();
-      expect(instruction2).not.toBe(instruction1);
+        .textContent()
+      expect(instruction2).not.toBe(instruction1)
     }
-  });
+  })
 
-  test("should automatically advance multi-steps when target is reached", async ({
-    page,
-  }) => {
+  test('should automatically advance multi-steps when target is reached', async ({ page }) => {
     // This test would need to be customized based on specific tutorial steps
     // that have known intermediate target values
 
     // Skip if not a multi-step tutorial
-    const multiStepIndicator = page.locator(
-      '[data-testid="multi-step-indicator"]',
-    );
+    const multiStepIndicator = page.locator('[data-testid="multi-step-indicator"]')
     if (!(await multiStepIndicator.isVisible())) {
-      test.skip();
+      test.skip()
     }
 
     const _initialInstruction = await page
       .locator('[data-testid="multi-step-instruction"]')
-      .textContent();
+      .textContent()
 
     // Interact with abacus to potentially reach an intermediate target
-    await clickBeadToIncrement(page);
-    await clickBeadToIncrement(page);
-    await clickBeadToIncrement(page);
+    await clickBeadToIncrement(page)
+    await clickBeadToIncrement(page)
+    await clickBeadToIncrement(page)
 
     // Wait for potential auto-advancement (with timeout)
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(2000)
 
     const _newInstruction = await page
       .locator('[data-testid="multi-step-instruction"]')
-      .textContent();
+      .textContent()
 
     // If auto-advancement happened, instruction should change
     // If not, that's also okay - depends on the specific tutorial values
     // This test verifies the system doesn't crash during the process
-  });
+  })
 
-  test("should maintain state consistency during rapid interactions", async ({
-    page,
-  }) => {
-    const initialValue = await getAbacusValue(page);
+  test('should maintain state consistency during rapid interactions', async ({ page }) => {
+    const initialValue = await getAbacusValue(page)
 
     // Rapid clicking
-    await clickBeadToIncrement(page);
-    await clickBeadToIncrement(page);
-    await clickBeadToIncrement(page);
+    await clickBeadToIncrement(page)
+    await clickBeadToIncrement(page)
+    await clickBeadToIncrement(page)
 
     // Rapid navigation
-    await page.click('button:has-text("Next")');
-    await page.waitForTimeout(100);
-    await page.click('button:has-text("Previous")');
-    await page.waitForTimeout(100);
+    await page.click('button:has-text("Next")')
+    await page.waitForTimeout(100)
+    await page.click('button:has-text("Previous")')
+    await page.waitForTimeout(100)
 
     // Should return to a consistent state
-    const finalValue = await getAbacusValue(page);
-    expect(finalValue).toBe(initialValue);
-  });
+    const finalValue = await getAbacusValue(page)
+    expect(finalValue).toBe(initialValue)
+  })
 
-  test("should show tooltip guidance when available", async ({ page }) => {
+  test('should show tooltip guidance when available', async ({ page }) => {
     // Check if tooltips are present
-    const tooltip = page.locator('[data-testid="bead-tooltip"]');
+    const tooltip = page.locator('[data-testid="bead-tooltip"]')
 
     if (await tooltip.isVisible()) {
       // Tooltip should contain helpful guidance
-      await expect(tooltip).toContainText(/working on|next|step/i);
+      await expect(tooltip).toContainText(/working on|next|step/i)
 
       // Tooltip should be positioned correctly (not covering important elements)
-      const tooltipBox = await tooltip.boundingBox();
-      const abacusBox = await page
-        .locator('[data-testid="abacus-container"]')
-        .boundingBox();
+      const tooltipBox = await tooltip.boundingBox()
+      const abacusBox = await page.locator('[data-testid="abacus-container"]').boundingBox()
 
       if (tooltipBox && abacusBox) {
         // Tooltip should not completely overlap the abacus
         expect(tooltipBox.x + tooltipBox.width).toBeLessThanOrEqual(
-          abacusBox.x + abacusBox.width + 50,
-        );
+          abacusBox.x + abacusBox.width + 50
+        )
       }
     }
-  });
+  })
 
-  test("should handle keyboard navigation for accessibility", async ({
-    page,
-  }) => {
+  test('should handle keyboard navigation for accessibility', async ({ page }) => {
     // Focus on abacus
-    await page.click('[data-testid="abacus-container"]');
+    await page.click('[data-testid="abacus-container"]')
 
     // Test tab navigation
-    await page.keyboard.press("Tab");
-    await page.waitForTimeout(200);
+    await page.keyboard.press('Tab')
+    await page.waitForTimeout(200)
 
     // Should move focus to next column
     const focusedElement = await page.evaluate(() =>
-      document.activeElement?.getAttribute("data-testid"),
-    );
-    expect(focusedElement).toMatch(/bead-place-/);
+      document.activeElement?.getAttribute('data-testid')
+    )
+    expect(focusedElement).toMatch(/bead-place-/)
 
     // Test shift+tab navigation
-    await page.keyboard.press("Shift+Tab");
-    await page.waitForTimeout(200);
+    await page.keyboard.press('Shift+Tab')
+    await page.waitForTimeout(200)
 
     // Should move focus in opposite direction
     const newFocusedElement = await page.evaluate(() =>
-      document.activeElement?.getAttribute("data-testid"),
-    );
-    expect(newFocusedElement).not.toBe(focusedElement);
-  });
+      document.activeElement?.getAttribute('data-testid')
+    )
+    expect(newFocusedElement).not.toBe(focusedElement)
+  })
 
-  test("should dismiss success popup when clicked", async ({ page }) => {
+  test('should dismiss success popup when clicked', async ({ page }) => {
     // Simulate reaching a target value to show success popup
     // This would need to be customized based on the specific tutorial
 
     // For now, we'll test the general pattern
-    const successPopup = page.locator("text=/excellent|great|correct/i");
+    const successPopup = page.locator('text=/excellent|great|correct/i')
 
     // If we can trigger a success state and the popup appears
     if (await successPopup.isVisible({ timeout: 1000 })) {
       // Click to dismiss
-      await successPopup.click();
+      await successPopup.click()
 
       // Should disappear
-      await expect(successPopup).not.toBeVisible({ timeout: 2000 });
+      await expect(successPopup).not.toBeVisible({ timeout: 2000 })
     }
-  });
+  })
 
-  test("should handle tutorial completion", async ({ page }) => {
+  test('should handle tutorial completion', async ({ page }) => {
     // This test would navigate through all steps of a tutorial
     // and verify completion behavior
 
-    let currentStep = 0;
-    const maxSteps = 5; // Safety limit
+    let currentStep = 0
+    const maxSteps = 5 // Safety limit
 
     while (currentStep < maxSteps) {
       // Check if Next button is available
-      const nextButton = page.locator('button:has-text("Next")');
+      const nextButton = page.locator('button:has-text("Next")')
 
       if (!(await nextButton.isEnabled())) {
-        break; // Reached end or need to complete current step
+        break // Reached end or need to complete current step
       }
 
-      await nextButton.click();
-      await page.waitForTimeout(1000);
-      currentStep++;
+      await nextButton.click()
+      await page.waitForTimeout(1000)
+      currentStep++
     }
 
     // Should show some completion indicator or stay on final step
     // The exact behavior would depend on the tutorial implementation
-  });
+  })
 
-  test("should work on different screen sizes", async ({ page }) => {
+  test('should work on different screen sizes', async ({ page }) => {
     // Test mobile viewport
-    await page.setViewportSize({ width: 375, height: 667 });
-    await page.reload();
-    await waitForTutorialLoad(page);
+    await page.setViewportSize({ width: 375, height: 667 })
+    await page.reload()
+    await waitForTutorialLoad(page)
 
     // Should still be functional
-    await expect(page.locator('[data-testid="tutorial-player"]')).toBeVisible();
-    await expect(
-      page.locator('[data-testid^="bead-place-"]').first(),
-    ).toBeVisible();
+    await expect(page.locator('[data-testid="tutorial-player"]')).toBeVisible()
+    await expect(page.locator('[data-testid^="bead-place-"]').first()).toBeVisible()
 
     // Test tablet viewport
-    await page.setViewportSize({ width: 768, height: 1024 });
-    await page.reload();
-    await waitForTutorialLoad(page);
+    await page.setViewportSize({ width: 768, height: 1024 })
+    await page.reload()
+    await waitForTutorialLoad(page)
 
     // Should still be functional
-    await expect(page.locator('[data-testid="tutorial-player"]')).toBeVisible();
+    await expect(page.locator('[data-testid="tutorial-player"]')).toBeVisible()
 
     // Test desktop viewport
-    await page.setViewportSize({ width: 1920, height: 1080 });
-    await page.reload();
-    await waitForTutorialLoad(page);
+    await page.setViewportSize({ width: 1920, height: 1080 })
+    await page.reload()
+    await waitForTutorialLoad(page)
 
     // Should still be functional
-    await expect(page.locator('[data-testid="tutorial-player"]')).toBeVisible();
-  });
-});
+    await expect(page.locator('[data-testid="tutorial-player"]')).toBeVisible()
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/combinedTooltip.test.tsx b/apps/web/src/components/tutorial/__tests__/combinedTooltip.test.tsx
index dc3cfae5..ecd898aa 100644
--- a/apps/web/src/components/tutorial/__tests__/combinedTooltip.test.tsx
+++ b/apps/web/src/components/tutorial/__tests__/combinedTooltip.test.tsx
@@ -1,62 +1,48 @@
-import { render, screen } from "@testing-library/react";
-import type React from "react";
-import { describe, expect, it, vi } from "vitest";
-import type { Tutorial } from "../../../types/tutorial";
-import { generateUnifiedInstructionSequence } from "../../../utils/unifiedStepGenerator";
-import { DecompositionWithReasons } from "../DecompositionWithReasons";
-import { TutorialProvider } from "../TutorialContext";
+import { render, screen } from '@testing-library/react'
+import type React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import type { Tutorial } from '../../../types/tutorial'
+import { generateUnifiedInstructionSequence } from '../../../utils/unifiedStepGenerator'
+import { DecompositionWithReasons } from '../DecompositionWithReasons'
+import { TutorialProvider } from '../TutorialContext'
 
 // Mock Radix Tooltip for testing
-vi.mock("@radix-ui/react-tooltip", () => ({
-  Provider: ({ children }: any) => (
-    <div data-testid="tooltip-provider">{children}</div>
-  ),
-  Root: ({ children, open = true }: any) => (
-    <div data-testid="tooltip-root">{children}</div>
-  ),
-  Trigger: ({ children }: any) => (
-    <div data-testid="tooltip-trigger">{children}</div>
-  ),
-  Portal: ({ children }: any) => (
-    <div data-testid="tooltip-portal">{children}</div>
-  ),
+vi.mock('@radix-ui/react-tooltip', () => ({
+  Provider: ({ children }: any) => <div data-testid="tooltip-provider">{children}</div>,
+  Root: ({ children, open = true }: any) => <div data-testid="tooltip-root">{children}</div>,
+  Trigger: ({ children }: any) => <div data-testid="tooltip-trigger">{children}</div>,
+  Portal: ({ children }: any) => <div data-testid="tooltip-portal">{children}</div>,
   Content: ({ children, className, ...props }: any) => (
     <div data-testid="tooltip-content" className={className} {...props}>
       {children}
     </div>
   ),
   Arrow: (props: any) => <div data-testid="tooltip-arrow" {...props} />,
-}));
+}))
 
-describe("Combined Tooltip Content - Provenance + Why Explanations", () => {
-  const createTutorial = (
-    startValue: number,
-    targetValue: number,
-  ): Tutorial => ({
+describe('Combined Tooltip Content - Provenance + Why Explanations', () => {
+  const createTutorial = (startValue: number, targetValue: number): Tutorial => ({
     id: `test-${startValue}-${targetValue}`,
     title: `Test ${startValue} + ${targetValue - startValue}`,
-    description: "Testing combined tooltip content",
+    description: 'Testing combined tooltip content',
     steps: [
       {
-        id: "test-step",
+        id: 'test-step',
         title: `${startValue} + ${targetValue - startValue} = ${targetValue}`,
         problem: `${startValue} + ${targetValue - startValue}`,
         description: `Add ${targetValue - startValue} to get ${targetValue}`,
         startValue,
         targetValue,
-        expectedAction: "multi-step" as const,
-        actionDescription: "Follow the steps",
-        tooltip: { content: "Test", explanation: "Test explanation" },
+        expectedAction: 'multi-step' as const,
+        actionDescription: 'Follow the steps',
+        tooltip: { content: 'Test', explanation: 'Test explanation' },
       },
     ],
     createdAt: new Date(),
     updatedAt: new Date(),
-  });
+  })
 
-  function renderWithTutorialContext(
-    tutorial: Tutorial,
-    component: React.ReactElement,
-  ) {
+  function renderWithTutorialContext(tutorial: Tutorial, component: React.ReactElement) {
     return render(
       <TutorialProvider
         tutorial={tutorial}
@@ -65,14 +51,14 @@ describe("Combined Tooltip Content - Provenance + Why Explanations", () => {
         onEvent={() => {}}
       >
         {component}
-      </TutorialProvider>,
-    );
+      </TutorialProvider>
+    )
   }
 
-  describe("Five Complement Operations", () => {
-    it("should show combined provenance + why explanations for 3 + 4 = 7", () => {
-      const result = generateUnifiedInstructionSequence(3, 7);
-      const tutorial = createTutorial(3, 7);
+  describe('Five Complement Operations', () => {
+    it('should show combined provenance + why explanations for 3 + 4 = 7', () => {
+      const result = generateUnifiedInstructionSequence(3, 7)
+      const tutorial = createTutorial(3, 7)
 
       renderWithTutorialContext(
         tutorial,
@@ -80,33 +66,33 @@ describe("Combined Tooltip Content - Provenance + Why Explanations", () => {
           fullDecomposition={result.fullDecomposition}
           termPositions={result.steps.map((step) => step.termPosition)}
           segments={result.segments}
-        />,
-      );
+        />
+      )
 
       // Find the five complement tooltip
-      const tooltipContent = screen.getAllByTestId("tooltip-content");
-      let foundCombinedContent = false;
+      const tooltipContent = screen.getAllByTestId('tooltip-content')
+      let foundCombinedContent = false
 
       tooltipContent.forEach((tooltip) => {
-        const text = tooltip.textContent || "";
-        if (text.includes("Make 5 — ones")) {
-          foundCombinedContent = true;
+        const text = tooltip.textContent || ''
+        if (text.includes('Make 5 — ones')) {
+          foundCombinedContent = true
 
           // Should have the semantic summary mentioning 5's friend
-          expect(text).toMatch(/5's friend/i);
+          expect(text).toMatch(/5's friend/i)
 
           // Should have semantic summary with core concepts
-          expect(text).toMatch(/Add 4/i);
-          expect(text).toMatch(/press 5/i);
+          expect(text).toMatch(/Add 4/i)
+          expect(text).toMatch(/press 5/i)
         }
-      });
+      })
 
-      expect(foundCombinedContent).toBe(true);
-    });
+      expect(foundCombinedContent).toBe(true)
+    })
 
-    it("should show combined content for 2 + 3 = 5", () => {
-      const result = generateUnifiedInstructionSequence(2, 5);
-      const tutorial = createTutorial(2, 5);
+    it('should show combined content for 2 + 3 = 5', () => {
+      const result = generateUnifiedInstructionSequence(2, 5)
+      const tutorial = createTutorial(2, 5)
 
       renderWithTutorialContext(
         tutorial,
@@ -114,31 +100,31 @@ describe("Combined Tooltip Content - Provenance + Why Explanations", () => {
           fullDecomposition={result.fullDecomposition}
           termPositions={result.steps.map((step) => step.termPosition)}
           segments={result.segments}
-        />,
-      );
+        />
+      )
 
-      const tooltipContent = screen.getAllByTestId("tooltip-content");
-      let foundFiveComplement = false;
+      const tooltipContent = screen.getAllByTestId('tooltip-content')
+      let foundFiveComplement = false
 
       tooltipContent.forEach((tooltip) => {
-        const text = tooltip.textContent || "";
-        if (text.includes("Make 5") && !text.includes("Direct")) {
-          foundFiveComplement = true;
+        const text = tooltip.textContent || ''
+        if (text.includes('Make 5') && !text.includes('Direct')) {
+          foundFiveComplement = true
 
           // Should have semantic summary with core concepts
-          expect(text).toMatch(/5's friend/i);
-          expect(text).toMatch(/Add 3/i);
+          expect(text).toMatch(/5's friend/i)
+          expect(text).toMatch(/Add 3/i)
         }
-      });
+      })
 
-      expect(foundFiveComplement).toBe(true);
-    });
-  });
+      expect(foundFiveComplement).toBe(true)
+    })
+  })
 
-  describe("Direct Operations", () => {
-    it("should show enhanced provenance content for direct operations like 3475 + 25", () => {
-      const result = generateUnifiedInstructionSequence(3475, 3500);
-      const tutorial = createTutorial(3475, 3500);
+  describe('Direct Operations', () => {
+    it('should show enhanced provenance content for direct operations like 3475 + 25', () => {
+      const result = generateUnifiedInstructionSequence(3475, 3500)
+      const tutorial = createTutorial(3475, 3500)
 
       renderWithTutorialContext(
         tutorial,
@@ -146,39 +132,39 @@ describe("Combined Tooltip Content - Provenance + Why Explanations", () => {
           fullDecomposition={result.fullDecomposition}
           termPositions={result.steps.map((step) => step.termPosition)}
           segments={result.segments}
-        />,
-      );
+        />
+      )
 
-      const tooltipContent = screen.getAllByTestId("tooltip-content");
-      let foundDirectContent = false;
+      const tooltipContent = screen.getAllByTestId('tooltip-content')
+      let foundDirectContent = false
 
       tooltipContent.forEach((tooltip) => {
-        const text = tooltip.textContent || "";
+        const text = tooltip.textContent || ''
         // Look for direct operation tooltip (should have enhanced provenance format)
-        if (text.includes("Add the tens digit — 2 tens (20)")) {
-          foundDirectContent = true;
+        if (text.includes('Add the tens digit — 2 tens (20)')) {
+          foundDirectContent = true
 
           // Should have enhanced title and subtitle
-          expect(text).toContain("From addend 25");
+          expect(text).toContain('From addend 25')
 
           // Should have enhanced chips
-          expect(text).toContain("Digit we're using: 2 (tens)");
-          expect(text).toContain("So we add here: +2 tens → 20");
+          expect(text).toContain("Digit we're using: 2 (tens)")
+          expect(text).toContain('So we add here: +2 tens → 20')
 
           // Should have provenance explanation (new format)
-          expect(text).toContain("From addend 25: use the tens digit 2");
+          expect(text).toContain('From addend 25: use the tens digit 2')
         }
-      });
+      })
 
-      expect(foundDirectContent).toBe(true);
-    });
-  });
+      expect(foundDirectContent).toBe(true)
+    })
+  })
 
-  describe("Ten Complement Operations", () => {
-    it("should show combined content for ten complement operations", () => {
+  describe('Ten Complement Operations', () => {
+    it('should show combined content for ten complement operations', () => {
       // Use a case that triggers ten complement (like adding to 9)
-      const result = generateUnifiedInstructionSequence(7, 12); // 7 + 5 may trigger ten complement
-      const tutorial = createTutorial(7, 12);
+      const result = generateUnifiedInstructionSequence(7, 12) // 7 + 5 may trigger ten complement
+      const tutorial = createTutorial(7, 12)
 
       renderWithTutorialContext(
         tutorial,
@@ -186,43 +172,41 @@ describe("Combined Tooltip Content - Provenance + Why Explanations", () => {
           fullDecomposition={result.fullDecomposition}
           termPositions={result.steps.map((step) => step.termPosition)}
           segments={result.segments}
-        />,
-      );
+        />
+      )
 
-      const tooltipContent = screen.getAllByTestId("tooltip-content");
-      let foundTenComplement = false;
+      const tooltipContent = screen.getAllByTestId('tooltip-content')
+      let foundTenComplement = false
 
       tooltipContent.forEach((tooltip) => {
-        const text = tooltip.textContent || "";
-        if (text.includes("Make 10") && !text.includes("Direct")) {
-          foundTenComplement = true;
+        const text = tooltip.textContent || ''
+        if (text.includes('Make 10') && !text.includes('Direct')) {
+          foundTenComplement = true
 
           // Should have enhanced subtitle with provenance
-          expect(text).toMatch(/From ones digit \d+ of \d+/);
+          expect(text).toMatch(/From ones digit \d+ of \d+/)
 
           // Should have source digit chip
-          expect(text).toMatch(/Source digit: \d+ from \d+ \(ones place\)/);
+          expect(text).toMatch(/Source digit: \d+ from \d+ \(ones place\)/)
 
           // Should have semantic summary for ten complement
-          expect(text).toMatch(
-            /Add \d+ to the ones to make 10.*carry.*take \d+ here/i,
-          );
+          expect(text).toMatch(/Add \d+ to the ones to make 10.*carry.*take \d+ here/i)
 
           // Should have additional provenance context (new format)
-          expect(text).toMatch(/From addend \d+: use the ones digit \d+/);
+          expect(text).toMatch(/From addend \d+: use the ones digit \d+/)
         }
-      });
+      })
 
       // Ten complement might not always trigger, so we don't assert it must be found
       // This test documents the expected behavior when it does occur
-      console.log("Ten complement tooltip found:", foundTenComplement);
-    });
-  });
+      console.log('Ten complement tooltip found:', foundTenComplement)
+    })
+  })
 
-  describe("Content Structure Validation", () => {
-    it("should maintain proper content hierarchy in combined tooltips", () => {
-      const result = generateUnifiedInstructionSequence(3, 7);
-      const tutorial = createTutorial(3, 7);
+  describe('Content Structure Validation', () => {
+    it('should maintain proper content hierarchy in combined tooltips', () => {
+      const result = generateUnifiedInstructionSequence(3, 7)
+      const tutorial = createTutorial(3, 7)
 
       renderWithTutorialContext(
         tutorial,
@@ -230,27 +214,27 @@ describe("Combined Tooltip Content - Provenance + Why Explanations", () => {
           fullDecomposition={result.fullDecomposition}
           termPositions={result.steps.map((step) => step.termPosition)}
           segments={result.segments}
-        />,
-      );
+        />
+      )
 
-      const tooltip = screen.getAllByTestId("tooltip-content")[0];
-      const html = tooltip.innerHTML;
+      const tooltip = screen.getAllByTestId('tooltip-content')[0]
+      const html = tooltip.innerHTML
 
       // Should have proper section order
-      const headerIndex = html.indexOf("reason-tooltip__header");
-      const contextIndex = html.indexOf("reason-tooltip__context");
-      const reasoningIndex = html.indexOf("reason-tooltip__reasoning");
-      const formulaIndex = html.indexOf("reason-tooltip__formula");
+      const headerIndex = html.indexOf('reason-tooltip__header')
+      const contextIndex = html.indexOf('reason-tooltip__context')
+      const reasoningIndex = html.indexOf('reason-tooltip__reasoning')
+      const formulaIndex = html.indexOf('reason-tooltip__formula')
 
-      expect(headerIndex).toBeGreaterThan(-1);
-      expect(contextIndex).toBeGreaterThan(headerIndex);
-      expect(reasoningIndex).toBeGreaterThan(contextIndex);
-      expect(formulaIndex).toBeGreaterThan(reasoningIndex);
-    });
+      expect(headerIndex).toBeGreaterThan(-1)
+      expect(contextIndex).toBeGreaterThan(headerIndex)
+      expect(reasoningIndex).toBeGreaterThan(contextIndex)
+      expect(formulaIndex).toBeGreaterThan(reasoningIndex)
+    })
 
-    it("should not duplicate content between sections", () => {
-      const result = generateUnifiedInstructionSequence(3, 7);
-      const tutorial = createTutorial(3, 7);
+    it('should not duplicate content between sections', () => {
+      const result = generateUnifiedInstructionSequence(3, 7)
+      const tutorial = createTutorial(3, 7)
 
       renderWithTutorialContext(
         tutorial,
@@ -258,18 +242,18 @@ describe("Combined Tooltip Content - Provenance + Why Explanations", () => {
           fullDecomposition={result.fullDecomposition}
           termPositions={result.steps.map((step) => step.termPosition)}
           segments={result.segments}
-        />,
-      );
+        />
+      )
 
-      const tooltip = screen.getAllByTestId("tooltip-content")[0];
-      const text = tooltip.textContent || "";
+      const tooltip = screen.getAllByTestId('tooltip-content')[0]
+      const text = tooltip.textContent || ''
 
       // Verify semantic content exists (simplified check)
-      const has5Friend = text.includes("5's friend");
-      const hasAdd4 = text.includes("Add 4");
+      const has5Friend = text.includes("5's friend")
+      const hasAdd4 = text.includes('Add 4')
 
       // Should have semantic content for this FiveComplement operation
-      expect(has5Friend || hasAdd4).toBe(true);
-    });
-  });
-});
+      expect(has5Friend || hasAdd4).toBe(true)
+    })
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/provenance.comprehensive.test.tsx b/apps/web/src/components/tutorial/__tests__/provenance.comprehensive.test.tsx
index 32ee9c0b..85d15259 100644
--- a/apps/web/src/components/tutorial/__tests__/provenance.comprehensive.test.tsx
+++ b/apps/web/src/components/tutorial/__tests__/provenance.comprehensive.test.tsx
@@ -1,54 +1,46 @@
-import { render, screen } from "@testing-library/react";
-import type React from "react";
-import { describe, expect, it, vi } from "vitest";
-import type { Tutorial } from "../../../types/tutorial";
-import { generateUnifiedInstructionSequence } from "../../../utils/unifiedStepGenerator";
-import { DecompositionWithReasons } from "../DecompositionWithReasons";
-import { TutorialProvider, useTutorialContext } from "../TutorialContext";
+import { render, screen } from '@testing-library/react'
+import type React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import type { Tutorial } from '../../../types/tutorial'
+import { generateUnifiedInstructionSequence } from '../../../utils/unifiedStepGenerator'
+import { DecompositionWithReasons } from '../DecompositionWithReasons'
+import { TutorialProvider, useTutorialContext } from '../TutorialContext'
 
 // Mock Radix Tooltip for reliable testing
-vi.mock("@radix-ui/react-tooltip", () => ({
-  Provider: ({ children }: any) => (
-    <div data-testid="tooltip-provider">{children}</div>
-  ),
-  Root: ({ children, open = true }: any) => (
-    <div data-testid="tooltip-root">{children}</div>
-  ),
-  Trigger: ({ children }: any) => (
-    <div data-testid="tooltip-trigger">{children}</div>
-  ),
-  Portal: ({ children }: any) => (
-    <div data-testid="tooltip-portal">{children}</div>
-  ),
+vi.mock('@radix-ui/react-tooltip', () => ({
+  Provider: ({ children }: any) => <div data-testid="tooltip-provider">{children}</div>,
+  Root: ({ children, open = true }: any) => <div data-testid="tooltip-root">{children}</div>,
+  Trigger: ({ children }: any) => <div data-testid="tooltip-trigger">{children}</div>,
+  Portal: ({ children }: any) => <div data-testid="tooltip-portal">{children}</div>,
   Content: ({ children, className, ...props }: any) => (
     <div data-testid="tooltip-content" className={className} {...props}>
       {children}
     </div>
   ),
   Arrow: (props: any) => <div data-testid="tooltip-arrow" {...props} />,
-}));
+}))
 
-describe("Provenance System - Comprehensive Tests", () => {
+describe('Provenance System - Comprehensive Tests', () => {
   const provenanceTutorial: Tutorial = {
-    id: "provenance-test",
-    title: "Provenance Test",
-    description: "Testing provenance system",
+    id: 'provenance-test',
+    title: 'Provenance Test',
+    description: 'Testing provenance system',
     steps: [
       {
-        id: "test-step",
-        title: "3475 + 25 = 3500",
-        problem: "3475 + 25",
-        description: "Add 25 to get 3500",
+        id: 'test-step',
+        title: '3475 + 25 = 3500',
+        problem: '3475 + 25',
+        description: 'Add 25 to get 3500',
         startValue: 3475,
         targetValue: 3500,
-        expectedAction: "multi-step" as const,
-        actionDescription: "Follow the steps",
-        tooltip: { content: "Test", explanation: "Test explanation" },
+        expectedAction: 'multi-step' as const,
+        actionDescription: 'Follow the steps',
+        tooltip: { content: 'Test', explanation: 'Test explanation' },
       },
     ],
     createdAt: new Date(),
     updatedAt: new Date(),
-  };
+  }
 
   function renderWithTutorialContext(component: React.ReactElement) {
     return render(
@@ -59,25 +51,23 @@ describe("Provenance System - Comprehensive Tests", () => {
         onEvent={() => {}}
       >
         {component}
-      </TutorialProvider>,
-    );
+      </TutorialProvider>
+    )
   }
 
-  describe("Unified Step Generator Provenance", () => {
-    it("should generate correct provenance data for 3475 + 25 = 3500", () => {
-      const result = generateUnifiedInstructionSequence(3475, 3500);
+  describe('Unified Step Generator Provenance', () => {
+    it('should generate correct provenance data for 3475 + 25 = 3500', () => {
+      const result = generateUnifiedInstructionSequence(3475, 3500)
 
       // Verify basic structure
-      expect(result.steps.length).toBeGreaterThan(0);
-      expect(result.segments.length).toBeGreaterThan(0);
-      expect(result.fullDecomposition).toContain("3475 + 25");
+      expect(result.steps.length).toBeGreaterThan(0)
+      expect(result.segments.length).toBeGreaterThan(0)
+      expect(result.fullDecomposition).toContain('3475 + 25')
 
       // Find the "20" step (tens digit)
-      const twentyStep = result.steps.find(
-        (step) => step.mathematicalTerm === "20",
-      );
-      expect(twentyStep).toBeDefined();
-      expect(twentyStep?.provenance).toBeDefined();
+      const twentyStep = result.steps.find((step) => step.mathematicalTerm === '20')
+      expect(twentyStep).toBeDefined()
+      expect(twentyStep?.provenance).toBeDefined()
 
       if (twentyStep?.provenance) {
         // Verify provenance data matches the specification exactly
@@ -85,50 +75,50 @@ describe("Provenance System - Comprehensive Tests", () => {
           rhs: 25, // the addend
           rhsDigit: 2, // digit from tens place
           rhsPlace: 1, // tens = place 1
-          rhsPlaceName: "tens", // human readable
+          rhsPlaceName: 'tens', // human readable
           rhsDigitIndex: 0, // '2' is first character in '25'
           rhsValue: 20, // 2 * 10^1 = 20
-        });
+        })
       }
 
       // Verify ones digit complement group
       const complementSteps = result.steps.filter((step) =>
-        step.provenance?.groupId?.includes("10comp-0-5"),
-      );
-      expect(complementSteps.length).toBeGreaterThan(0);
+        step.provenance?.groupId?.includes('10comp-0-5')
+      )
+      expect(complementSteps.length).toBeGreaterThan(0)
 
       // All complement steps should trace back to the same source digit
       complementSteps.forEach((step) => {
-        expect(step.provenance?.rhs).toBe(25);
-        expect(step.provenance?.rhsDigit).toBe(5);
-        expect(step.provenance?.rhsPlace).toBe(0);
-        expect(step.provenance?.rhsPlaceName).toBe("ones");
-      });
+        expect(step.provenance?.rhs).toBe(25)
+        expect(step.provenance?.rhsDigit).toBe(5)
+        expect(step.provenance?.rhsPlace).toBe(0)
+        expect(step.provenance?.rhsPlaceName).toBe('ones')
+      })
 
       // Verify equation anchors for digit highlighting
-      expect(result.equationAnchors).toBeDefined();
-      expect(result.equationAnchors?.differenceText).toBe("25");
-      expect(result.equationAnchors?.rhsDigitPositions).toHaveLength(2);
-    });
-  });
+      expect(result.equationAnchors).toBeDefined()
+      expect(result.equationAnchors?.differenceText).toBe('25')
+      expect(result.equationAnchors?.rhsDigitPositions).toHaveLength(2)
+    })
+  })
 
-  describe("Tooltip Enhancement Logic", () => {
-    it("should generate correct enhanced tooltip content", () => {
+  describe('Tooltip Enhancement Logic', () => {
+    it('should generate correct enhanced tooltip content', () => {
       const provenance = {
         rhs: 25,
         rhsDigit: 2,
         rhsPlace: 1,
-        rhsPlaceName: "tens" as const,
+        rhsPlaceName: 'tens' as const,
         rhsDigitIndex: 0,
         rhsValue: 20,
-      };
+      }
 
       // Test the exact logic from getEnhancedTooltipContent
-      const title = `Add the ${provenance.rhsPlaceName} digit — ${provenance.rhsDigit} ${provenance.rhsPlaceName} (${provenance.rhsValue})`;
-      const subtitle = `From addend ${provenance.rhs}`;
+      const title = `Add the ${provenance.rhsPlaceName} digit — ${provenance.rhsDigit} ${provenance.rhsPlaceName} (${provenance.rhsValue})`
+      const subtitle = `From addend ${provenance.rhs}`
 
-      expect(title).toBe("Add the tens digit — 2 tens (20)");
-      expect(subtitle).toBe("From addend 25");
+      expect(title).toBe('Add the tens digit — 2 tens (20)')
+      expect(subtitle).toBe('From addend 25')
 
       // Test breadcrumb chips
       const chips = [
@@ -137,65 +127,63 @@ describe("Provenance System - Comprehensive Tests", () => {
           value: `${provenance.rhsDigit} (${provenance.rhsPlaceName})`,
         },
         {
-          label: "So we add here",
+          label: 'So we add here',
           value: `+${provenance.rhsDigit} ${provenance.rhsPlaceName} → ${provenance.rhsValue}`,
         },
-      ];
+      ]
 
       expect(chips[0]).toEqual({
         label: "Digit we're using",
-        value: "2 (tens)",
-      });
+        value: '2 (tens)',
+      })
 
       expect(chips[1]).toEqual({
-        label: "So we add here",
-        value: "+2 tens → 20",
-      });
+        label: 'So we add here',
+        value: '+2 tens → 20',
+      })
 
       // Test explanation text
-      const explanation = `We're adding the ${provenance.rhsPlaceName} digit of ${provenance.rhs} → ${provenance.rhsDigit} ${provenance.rhsPlaceName}.`;
-      expect(explanation).toBe("We're adding the tens digit of 25 → 2 tens.");
-    });
-  });
+      const explanation = `We're adding the ${provenance.rhsPlaceName} digit of ${provenance.rhs} → ${provenance.rhsDigit} ${provenance.rhsPlaceName}.`
+      expect(explanation).toBe("We're adding the tens digit of 25 → 2 tens.")
+    })
+  })
 
-  describe("Context Integration", () => {
-    it("should provide unified steps through tutorial context", () => {
-      let contextSteps: any = null;
+  describe('Context Integration', () => {
+    it('should provide unified steps through tutorial context', () => {
+      let contextSteps: any = null
 
       function TestComponent() {
-        const { unifiedSteps } = useTutorialContext();
-        contextSteps = unifiedSteps;
-        return <div data-testid="test-component">Test</div>;
+        const { unifiedSteps } = useTutorialContext()
+        contextSteps = unifiedSteps
+        return <div data-testid="test-component">Test</div>
       }
 
-      renderWithTutorialContext(<TestComponent />);
+      renderWithTutorialContext(<TestComponent />)
 
       // Context should provide steps with provenance
-      expect(contextSteps).toBeDefined();
-      expect(Array.isArray(contextSteps)).toBe(true);
-      expect(contextSteps.length).toBeGreaterThan(0);
+      expect(contextSteps).toBeDefined()
+      expect(Array.isArray(contextSteps)).toBe(true)
+      expect(contextSteps.length).toBeGreaterThan(0)
 
       // Find the "20" step
-      const twentyStep = contextSteps.find(
-        (step: any) => step.mathematicalTerm === "20",
-      );
-      expect(twentyStep).toBeDefined();
-      expect(twentyStep.provenance).toBeDefined();
-      expect(twentyStep.provenance.rhsValue).toBe(20);
-    });
-  });
+      const twentyStep = contextSteps.find((step: any) => step.mathematicalTerm === '20')
+      expect(twentyStep).toBeDefined()
+      expect(twentyStep.provenance).toBeDefined()
+      expect(twentyStep.provenance.rhsValue).toBe(20)
+    })
+  })
 
-  describe("DecompositionWithReasons Integration", () => {
-    it("should render enhanced tooltips with provenance information", () => {
-      const result = generateUnifiedInstructionSequence(3475, 3500);
+  describe('DecompositionWithReasons Integration', () => {
+    it('should render enhanced tooltips with provenance information', () => {
+      const result = generateUnifiedInstructionSequence(3475, 3500)
 
       renderWithTutorialContext(
         <DecompositionWithReasons
           fullDecomposition={result.fullDecomposition}
           termPositions={result.steps.map((step) => step.termPosition)}
           segments={result.segments}
-        />,
-      );
+        />
+      )
 
       // Verify that enhanced provenance content exists in the DOM
       // The specific enhanced tooltip content we expect to see:
@@ -206,18 +194,18 @@ describe("Provenance System - Comprehensive Tests", () => {
       // Check that the DOM contains at least one instance of our enhanced content
       // This proves the provenance system is working and generating enhanced tooltips
       const enhancedContent = [
-        screen.queryAllByText("Add the tens digit — 2 tens (20)"),
-        screen.queryAllByText("From addend 25"),
+        screen.queryAllByText('Add the tens digit — 2 tens (20)'),
+        screen.queryAllByText('From addend 25'),
         screen.queryAllByText(/We're adding the tens digit of 25/),
-      ].flat();
+      ].flat()
 
       // The provenance system should generate enhanced content for mathematical terms
-      expect(enhancedContent.length).toBeGreaterThan(0);
-    });
-  });
+      expect(enhancedContent.length).toBeGreaterThan(0)
+    })
+  })
 
-  describe("Regression Tests", () => {
-    it("should not break existing functionality without provenance", () => {
+  describe('Regression Tests', () => {
+    it('should not break existing functionality without provenance', () => {
       // Test with a simple case that might not generate provenance
       renderWithTutorialContext(
         <DecompositionWithReasons
@@ -228,62 +216,58 @@ describe("Provenance System - Comprehensive Tests", () => {
             { startIndex: 8, endIndex: 10 },
           ]}
           segments={[]}
-        />,
-      );
+        />
+      )
 
       // Should still render without errors
-      expect(screen.getByText("7")).toBeInTheDocument();
-      expect(screen.getByText("3")).toBeInTheDocument();
-      expect(screen.getByText("10")).toBeInTheDocument();
-    });
+      expect(screen.getByText('7')).toBeInTheDocument()
+      expect(screen.getByText('3')).toBeInTheDocument()
+      expect(screen.getByText('10')).toBeInTheDocument()
+    })
 
-    it("should handle empty or malformed data gracefully", () => {
+    it('should handle empty or malformed data gracefully', () => {
       renderWithTutorialContext(
-        <DecompositionWithReasons
-          fullDecomposition=""
-          termPositions={[]}
-          segments={[]}
-        />,
-      );
+        <DecompositionWithReasons fullDecomposition="" termPositions={[]} segments={[]} />
+      )
 
       // Should render without throwing
-      expect(screen.getByTestId("tooltip-provider")).toBeInTheDocument();
-    });
-  });
+      expect(screen.getByTestId('tooltip-provider')).toBeInTheDocument()
+    })
+  })
 
-  describe("End-to-End User Experience", () => {
-    it("should provide clear digit-to-pill connection for students", () => {
-      const result = generateUnifiedInstructionSequence(3475, 3500);
+  describe('End-to-End User Experience', () => {
+    it('should provide clear digit-to-pill connection for students', () => {
+      const result = generateUnifiedInstructionSequence(3475, 3500)
 
       // Verify that every step with provenance clearly indicates its source
       result.steps.forEach((step) => {
         if (step.provenance) {
           // Each step should know which addend digit it came from
-          expect(step.provenance.rhs).toBe(25);
-          expect([2, 5]).toContain(step.provenance.rhsDigit);
-          expect(["tens", "ones"]).toContain(step.provenance.rhsPlaceName);
+          expect(step.provenance.rhs).toBe(25)
+          expect([2, 5]).toContain(step.provenance.rhsDigit)
+          expect(['tens', 'ones']).toContain(step.provenance.rhsPlaceName)
 
           // The digit index should point to the correct character in "25"
           if (step.provenance.rhsDigit === 2) {
-            expect(step.provenance.rhsDigitIndex).toBe(0); // '2' is at index 0
+            expect(step.provenance.rhsDigitIndex).toBe(0) // '2' is at index 0
           } else if (step.provenance.rhsDigit === 5) {
-            expect(step.provenance.rhsDigitIndex).toBe(1); // '5' is at index 1
+            expect(step.provenance.rhsDigitIndex).toBe(1) // '5' is at index 1
           }
         }
-      });
+      })
 
       // Equation anchors should allow precise highlighting
       expect(result.equationAnchors?.rhsDigitPositions[0]).toEqual({
         digitIndex: 0,
         startIndex: expect.any(Number),
         endIndex: expect.any(Number),
-      });
+      })
 
       expect(result.equationAnchors?.rhsDigitPositions[1]).toEqual({
         digitIndex: 1,
         startIndex: expect.any(Number),
         endIndex: expect.any(Number),
-      });
-    });
-  });
-});
+      })
+    })
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/run-tutorial-tests.ts b/apps/web/src/components/tutorial/__tests__/run-tutorial-tests.ts
index 3d0b0c46..ac3c3019 100644
--- a/apps/web/src/components/tutorial/__tests__/run-tutorial-tests.ts
+++ b/apps/web/src/components/tutorial/__tests__/run-tutorial-tests.ts
@@ -12,110 +12,108 @@
  * 4. End-to-end tutorial workflow
  */
 
-import { execSync } from "child_process";
+import { execSync } from 'child_process'
 
 const TEST_CATEGORIES = [
   {
-    name: "AbacusReact Controlled Input",
-    pattern: "**/AbacusReact.controlled-input.test.tsx",
-    description:
-      "Tests the React controlled input pattern implementation in AbacusReact",
+    name: 'AbacusReact Controlled Input',
+    pattern: '**/AbacusReact.controlled-input.test.tsx',
+    description: 'Tests the React controlled input pattern implementation in AbacusReact',
   },
   {
-    name: "TutorialContext State Management",
-    pattern: "**/TutorialContext.test.tsx",
-    description:
-      "Tests step initialization, navigation, and multi-step functionality",
+    name: 'TutorialContext State Management',
+    pattern: '**/TutorialContext.test.tsx',
+    description: 'Tests step initialization, navigation, and multi-step functionality',
   },
   {
-    name: "TutorialPlayer Integration",
-    pattern: "**/TutorialPlayer.integration.test.tsx",
-    description: "Tests integration between TutorialPlayer and context state",
+    name: 'TutorialPlayer Integration',
+    pattern: '**/TutorialPlayer.integration.test.tsx',
+    description: 'Tests integration between TutorialPlayer and context state',
   },
   {
-    name: "End-to-End Workflow",
-    pattern: "**/TutorialWorkflow.e2e.test.ts",
-    description: "Tests complete tutorial workflow from user perspective",
+    name: 'End-to-End Workflow',
+    pattern: '**/TutorialWorkflow.e2e.test.ts',
+    description: 'Tests complete tutorial workflow from user perspective',
   },
-];
+]
 
 async function runTestCategory(category: (typeof TEST_CATEGORIES)[0]) {
-  console.log(`\n🧪 Running ${category.name} Tests`);
-  console.log(`   ${category.description}`);
-  console.log(`   ${"─".repeat(50)}`);
+  console.log(`\n🧪 Running ${category.name} Tests`)
+  console.log(`   ${category.description}`)
+  console.log(`   ${'─'.repeat(50)}`)
 
   try {
-    const cmd = category.pattern.endsWith(".e2e.test.ts")
+    const cmd = category.pattern.endsWith('.e2e.test.ts')
       ? `npx playwright test ${category.pattern}`
-      : `npx vitest run ${category.pattern}`;
+      : `npx vitest run ${category.pattern}`
 
     execSync(cmd, {
-      stdio: "inherit",
+      stdio: 'inherit',
       cwd: process.cwd(),
-    });
+    })
 
-    console.log(`✅ ${category.name} tests passed`);
-    return true;
+    console.log(`✅ ${category.name} tests passed`)
+    return true
   } catch (_error) {
-    console.error(`❌ ${category.name} tests failed`);
-    return false;
+    console.error(`❌ ${category.name} tests failed`)
+    return false
   }
 }
 
 async function runAllTests() {
-  console.log("🚀 Running Tutorial System Regression Tests");
-  console.log("=" * 60);
+  console.log('🚀 Running Tutorial System Regression Tests')
+  console.log('=' * 60)
 
-  const results: boolean[] = [];
+  const results: boolean[] = []
 
   for (const category of TEST_CATEGORIES) {
-    const success = await runTestCategory(category);
-    results.push(success);
+    const success = await runTestCategory(category)
+    results.push(success)
   }
 
-  const passedTests = results.filter(Boolean).length;
-  const totalTests = results.length;
+  const passedTests = results.filter(Boolean).length
+  const totalTests = results.length
 
-  console.log("\n📊 Test Summary");
-  console.log("─".repeat(30));
-  console.log(`Passed: ${passedTests}/${totalTests}`);
+  console.log('\n📊 Test Summary')
+  console.log('─'.repeat(30))
+  console.log(`Passed: ${passedTests}/${totalTests}`)
 
   if (passedTests === totalTests) {
-    console.log("🎉 All tutorial tests passed! No regressions detected.");
-    process.exit(0);
+    console.log('🎉 All tutorial tests passed! No regressions detected.')
+    process.exit(0)
   } else {
-    console.error("💥 Some tests failed. Please check the output above.");
-    process.exit(1);
+    console.error('💥 Some tests failed. Please check the output above.')
+    process.exit(1)
   }
 }
 
 async function runSpecificTest(testName: string) {
   const category = TEST_CATEGORIES.find((cat) =>
-    cat.name.toLowerCase().includes(testName.toLowerCase()),
-  );
+    cat.name.toLowerCase().includes(testName.toLowerCase())
+  )
 
   if (!category) {
-    console.error(`❌ Test category "${testName}" not found`);
-    console.log("Available categories:");
-    TEST_CATEGORIES.forEach((cat) => console.log(`  - ${cat.name}`));
-    process.exit(1);
+    console.error(`❌ Test category "${testName}" not found`)
+    console.log('Available categories:')
+    TEST_CATEGORIES.forEach((cat) => console.log(`  - ${cat.name}`))
+    process.exit(1)
   }
 
-  await runTestCategory(category);
+  await runTestCategory(category)
 }
 
 // CLI handling
-const args = process.argv.slice(2);
+const args = process.argv.slice(2)
 
 if (args.length === 0) {
-  runAllTests();
-} else if (args[0] === "--list") {
-  console.log("Available test categories:");
+  runAllTests()
+} else if (args[0] === '--list') {
+  console.log('Available test categories:')
   TEST_CATEGORIES.forEach((cat, index) => {
-    console.log(`\n${index + 1}. ${cat.name}`);
-    console.log(`   Pattern: ${cat.pattern}`);
-    console.log(`   Description: ${cat.description}`);
-  });
+    console.log(`\n${index + 1}. ${cat.name}`)
+    console.log(`   Pattern: ${cat.pattern}`)
+    console.log(`   Description: ${cat.description}`)
+  })
 } else {
-  runSpecificTest(args[0]);
+  runSpecificTest(args[0])
 }
diff --git a/apps/web/src/components/tutorial/__tests__/semanticSummary.test.ts b/apps/web/src/components/tutorial/__tests__/semanticSummary.test.ts
index ec7f3b62..b575940f 100644
--- a/apps/web/src/components/tutorial/__tests__/semanticSummary.test.ts
+++ b/apps/web/src/components/tutorial/__tests__/semanticSummary.test.ts
@@ -1,150 +1,148 @@
-import { describe, expect, it } from "vitest";
-import type { PedagogicalSegment } from "../../../utils/unifiedStepGenerator";
-import { generateUnifiedInstructionSequence } from "../../../utils/unifiedStepGenerator";
+import { describe, expect, it } from 'vitest'
+import type { PedagogicalSegment } from '../../../utils/unifiedStepGenerator'
+import { generateUnifiedInstructionSequence } from '../../../utils/unifiedStepGenerator'
 
 const getSeg = (
   seq: ReturnType<typeof generateUnifiedInstructionSequence>,
-  place: number,
-): PedagogicalSegment => seq.segments.find((s) => s.place === place)!;
+  place: number
+): PedagogicalSegment => seq.segments.find((s) => s.place === place)!
 
-describe("semantic summaries", () => {
-  it("Direct, small add (ones): concise summary, ≤ 150 chars", () => {
-    const seq = generateUnifiedInstructionSequence(1, 3); // +2, uses Direct
-    const seg = getSeg(seq, 0);
-    expect(seg.plan[0].rule).toBe("Direct");
-    expect(seg.readable.summary).toMatch(/Add 2 .* ones/i);
-    expect(seg.readable.summary.length).toBeLessThan(150);
-    expect((seg.readable.chips || []).length).toBeLessThanOrEqual(2);
-  });
+describe('semantic summaries', () => {
+  it('Direct, small add (ones): concise summary, ≤ 150 chars', () => {
+    const seq = generateUnifiedInstructionSequence(1, 3) // +2, uses Direct
+    const seg = getSeg(seq, 0)
+    expect(seg.plan[0].rule).toBe('Direct')
+    expect(seg.readable.summary).toMatch(/Add 2 .* ones/i)
+    expect(seg.readable.summary.length).toBeLessThan(150)
+    expect((seg.readable.chips || []).length).toBeLessThanOrEqual(2)
+  })
 
-  it("Direct, large add (using upper bead): mentions +5", () => {
-    const seq = generateUnifiedInstructionSequence(1, 9); // +8, should use upper bead
-    const seg = getSeg(seq, 0);
-    if (seg.plan[0].rule === "Direct") {
-      expect(seg.readable.summary).toMatch(/\+5|upper bead/i);
-      expect(seg.readable.summary).toMatch(/No carry needed/i);
+  it('Direct, large add (using upper bead): mentions +5', () => {
+    const seq = generateUnifiedInstructionSequence(1, 9) // +8, should use upper bead
+    const seg = getSeg(seq, 0)
+    if (seg.plan[0].rule === 'Direct') {
+      expect(seg.readable.summary).toMatch(/\+5|upper bead/i)
+      expect(seg.readable.summary).toMatch(/No carry needed/i)
     }
-  });
+  })
 
-  it("FiveComplement: mentions +5 − (5−d)", () => {
-    const seq = generateUnifiedInstructionSequence(3, 7); // +4 uses FiveComplement
-    const seg = getSeg(seq, 0);
-    if (seg.plan.some((p) => p.rule === "FiveComplement")) {
-      expect(seg.readable.summary).toMatch(/\+5 *− *\d+|press 5.*lift/i);
-      expect(seg.readable.summary).toMatch(/5's friend/i);
+  it('FiveComplement: mentions +5 − (5−d)', () => {
+    const seq = generateUnifiedInstructionSequence(3, 7) // +4 uses FiveComplement
+    const seg = getSeg(seq, 0)
+    if (seg.plan.some((p) => p.rule === 'FiveComplement')) {
+      expect(seg.readable.summary).toMatch(/\+5 *− *\d+|press 5.*lift/i)
+      expect(seg.readable.summary).toMatch(/5's friend/i)
     }
-  });
+  })
 
-  it("TenComplement no cascade: mentions +10 − (10−d) and carry", () => {
-    const seq = generateUnifiedInstructionSequence(19, 20); // +1 at ones with carry
-    const seg = getSeg(seq, 0);
-    if (seg.plan.some((p) => p.rule === "TenComplement")) {
-      expect(seg.readable.summary).toMatch(/\+10 *− *\d+|carry.*tens/i);
-      expect(seg.readable.summary).toMatch(/make 10/i);
+  it('TenComplement no cascade: mentions +10 − (10−d) and carry', () => {
+    const seq = generateUnifiedInstructionSequence(19, 20) // +1 at ones with carry
+    const seg = getSeg(seq, 0)
+    if (seg.plan.some((p) => p.rule === 'TenComplement')) {
+      expect(seg.readable.summary).toMatch(/\+10 *− *\d+|carry.*tens/i)
+      expect(seg.readable.summary).toMatch(/make 10/i)
     }
-  });
+  })
 
-  it("TenComplement with cascade: mentions ripple/carry path", () => {
-    const seq = generateUnifiedInstructionSequence(99, 100); // ripple through 9s
-    const seg = getSeg(seq, 0);
-    if (seg.plan.some((p) => p.rule === "Cascade")) {
-      expect(seg.readable.summary).toMatch(/ripples|carry ripples/i);
+  it('TenComplement with cascade: mentions ripple/carry path', () => {
+    const seq = generateUnifiedInstructionSequence(99, 100) // ripple through 9s
+    const seg = getSeg(seq, 0)
+    if (seg.plan.some((p) => p.rule === 'Cascade')) {
+      expect(seg.readable.summary).toMatch(/ripples|carry ripples/i)
     }
-  });
+  })
 
-  it("dev validation ok for valid rules", () => {
-    const seq = generateUnifiedInstructionSequence(45, 53); // +8 at ones
-    const seg = getSeg(seq, 0);
-    expect(seg.readable.validation?.ok).toBe(true);
-    expect((seg.readable.validation?.issues || []).length).toBe(0);
-  });
+  it('dev validation ok for valid rules', () => {
+    const seq = generateUnifiedInstructionSequence(45, 53) // +8 at ones
+    const seg = getSeg(seq, 0)
+    expect(seg.readable.validation?.ok).toBe(true)
+    expect((seg.readable.validation?.issues || []).length).toBe(0)
+  })
 
-  it("summary is concise (under 200 chars for all rules)", () => {
+  it('summary is concise (under 200 chars for all rules)', () => {
     const testCases = [
-      { start: 1, end: 3, desc: "Direct small" },
-      { start: 1, end: 9, desc: "Direct large" },
-      { start: 3, end: 7, desc: "FiveComplement" },
-      { start: 19, end: 20, desc: "TenComplement" },
-      { start: 99, end: 100, desc: "Cascade" },
-    ];
+      { start: 1, end: 3, desc: 'Direct small' },
+      { start: 1, end: 9, desc: 'Direct large' },
+      { start: 3, end: 7, desc: 'FiveComplement' },
+      { start: 19, end: 20, desc: 'TenComplement' },
+      { start: 99, end: 100, desc: 'Cascade' },
+    ]
 
     testCases.forEach(({ start, end, desc }) => {
-      const seq = generateUnifiedInstructionSequence(start, end);
+      const seq = generateUnifiedInstructionSequence(start, end)
       seq.segments.forEach((seg) => {
-        expect(seg.readable.summary.length).toBeLessThan(200);
-        expect(seg.readable.summary.trim().length).toBeGreaterThan(0);
-      });
-    });
-  });
+        expect(seg.readable.summary.length).toBeLessThan(200)
+        expect(seg.readable.summary.trim().length).toBeGreaterThan(0)
+      })
+    })
+  })
 
-  it("chips are minimal (≤ 2 per segment)", () => {
-    const seq = generateUnifiedInstructionSequence(3475, 3500); // complex case
+  it('chips are minimal (≤ 2 per segment)', () => {
+    const seq = generateUnifiedInstructionSequence(3475, 3500) // complex case
     seq.segments.forEach((seg) => {
-      expect((seg.readable.chips || []).length).toBeLessThanOrEqual(2);
-    });
-  });
+      expect((seg.readable.chips || []).length).toBeLessThanOrEqual(2)
+    })
+  })
 
-  it("shows provenance information when available", () => {
-    const seq = generateUnifiedInstructionSequence(3475, 3500); // has provenance
-    const tensSegment = getSeg(seq, 1); // tens place segment
+  it('shows provenance information when available', () => {
+    const seq = generateUnifiedInstructionSequence(3475, 3500) // has provenance
+    const tensSegment = getSeg(seq, 1) // tens place segment
 
     // Should have provenance chip if provenance data exists
-    const firstStep = seq.steps[tensSegment.stepIndices[0]];
+    const firstStep = seq.steps[tensSegment.stepIndices[0]]
     if (firstStep?.provenance) {
-      const provenanceChip = tensSegment.readable.chips.find(
-        (chip) => chip.label === "From addend",
-      );
-      expect(provenanceChip).toBeDefined();
-      expect(provenanceChip?.value).toMatch(/\d+ \w+/); // e.g., "2 tens"
+      const provenanceChip = tensSegment.readable.chips.find((chip) => chip.label === 'From addend')
+      expect(provenanceChip).toBeDefined()
+      expect(provenanceChip?.value).toMatch(/\d+ \w+/) // e.g., "2 tens"
     }
-  });
+  })
 
-  it("math explanations are optional and concise", () => {
-    const seq = generateUnifiedInstructionSequence(3, 8); // might trigger FiveComplement
+  it('math explanations are optional and concise', () => {
+    const seq = generateUnifiedInstructionSequence(3, 8) // might trigger FiveComplement
     seq.segments.forEach((seg) => {
       if (seg.readable.showMath) {
-        expect(seg.readable.showMath.lines.length).toBeLessThanOrEqual(1);
+        expect(seg.readable.showMath.lines.length).toBeLessThanOrEqual(1)
         seg.readable.showMath.lines.forEach((line) => {
-          expect(line.length).toBeLessThan(50); // keep math explanations short
-        });
+          expect(line.length).toBeLessThan(50) // keep math explanations short
+        })
       }
-    });
-  });
+    })
+  })
 
-  it("guard validation catches mismatches", () => {
+  it('guard validation catches mismatches', () => {
     // This test ensures our validation logic works correctly
-    const seq = generateUnifiedInstructionSequence(3, 7);
-    const seg = getSeg(seq, 0);
+    const seq = generateUnifiedInstructionSequence(3, 7)
+    const seg = getSeg(seq, 0)
 
     // For a Direct rule, we should have appropriate guards
-    if (seg.plan[0].rule === "Direct") {
+    if (seg.plan[0].rule === 'Direct') {
       const hasDirectGuard = seg.plan
         .flatMap((p) => p.conditions)
-        .some((condition) => /a\+d.*≤ *9/.test(condition));
+        .some((condition) => /a\+d.*≤ *9/.test(condition))
 
       if (hasDirectGuard) {
-        expect(seg.readable.validation?.ok).toBe(true);
+        expect(seg.readable.validation?.ok).toBe(true)
       }
     }
-  });
+  })
 
-  it("step-by-step details are preserved for expansion", () => {
-    const seq = generateUnifiedInstructionSequence(99, 100); // complex case
+  it('step-by-step details are preserved for expansion', () => {
+    const seq = generateUnifiedInstructionSequence(99, 100) // complex case
     seq.segments.forEach((seg) => {
       // Steps should still be available for "show details" expansion
-      expect(Array.isArray(seg.readable.stepsFriendly)).toBe(true);
+      expect(Array.isArray(seg.readable.stepsFriendly)).toBe(true)
       seg.readable.stepsFriendly.forEach((step) => {
-        expect(typeof step).toBe("string");
-        expect(step.length).toBeGreaterThan(0);
-      });
-    });
-  });
+        expect(typeof step).toBe('string')
+        expect(step.length).toBeGreaterThan(0)
+      })
+    })
+  })
 
-  it("titles are short and descriptive", () => {
-    const seq = generateUnifiedInstructionSequence(3475, 3500);
+  it('titles are short and descriptive', () => {
+    const seq = generateUnifiedInstructionSequence(3475, 3500)
     seq.segments.forEach((seg) => {
-      expect(seg.readable.title.length).toBeLessThan(30);
-      expect(seg.readable.title).toMatch(/Add \d+|Make \d+|Carry/); // should be action-oriented
-    });
-  });
-});
+      expect(seg.readable.title.length).toBeLessThan(30)
+      expect(seg.readable.title).toMatch(/Add \d+|Make \d+|Carry/) // should be action-oriented
+    })
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/termColumnHighlighting.test.ts b/apps/web/src/components/tutorial/__tests__/termColumnHighlighting.test.ts
index f762fbc6..c305c25f 100644
--- a/apps/web/src/components/tutorial/__tests__/termColumnHighlighting.test.ts
+++ b/apps/web/src/components/tutorial/__tests__/termColumnHighlighting.test.ts
@@ -1,135 +1,133 @@
-import { describe, expect, it } from "vitest";
-import { generateUnifiedInstructionSequence } from "../../../utils/unifiedStepGenerator";
+import { describe, expect, it } from 'vitest'
+import { generateUnifiedInstructionSequence } from '../../../utils/unifiedStepGenerator'
 
-describe("Term-to-Column Highlighting Integration", () => {
-  it("should map term indices to correct column indices", () => {
-    const result = generateUnifiedInstructionSequence(3475, 3500); // 3475 + 25
+describe('Term-to-Column Highlighting Integration', () => {
+  it('should map term indices to correct column indices', () => {
+    const result = generateUnifiedInstructionSequence(3475, 3500) // 3475 + 25
 
     // Find a step with provenance data
-    const stepWithProvenance = result.steps.find((step) => step.provenance);
-    expect(stepWithProvenance).toBeDefined();
+    const stepWithProvenance = result.steps.find((step) => step.provenance)
+    expect(stepWithProvenance).toBeDefined()
 
     if (stepWithProvenance?.provenance) {
       // Test the conversion logic: rhsPlace (0=ones, 1=tens) → columnIndex (4=ones, 3=tens)
-      const expectedColumnIndex = 4 - stepWithProvenance.provenance.rhsPlace;
+      const expectedColumnIndex = 4 - stepWithProvenance.provenance.rhsPlace
 
       // For tens place (rhsPlace=1), should map to columnIndex=3
       if (stepWithProvenance.provenance.rhsPlace === 1) {
-        expect(expectedColumnIndex).toBe(3);
+        expect(expectedColumnIndex).toBe(3)
       }
 
       // For ones place (rhsPlace=0), should map to columnIndex=4
       if (stepWithProvenance.provenance.rhsPlace === 0) {
-        expect(expectedColumnIndex).toBe(4);
+        expect(expectedColumnIndex).toBe(4)
       }
     }
-  });
+  })
 
-  it("should generate provenance data for complex operations", () => {
-    const result = generateUnifiedInstructionSequence(3475, 3500); // 3475 + 25
+  it('should generate provenance data for complex operations', () => {
+    const result = generateUnifiedInstructionSequence(3475, 3500) // 3475 + 25
 
     // Should have steps with provenance for both tens and ones digits
-    const stepsWithProvenance = result.steps.filter((step) => step.provenance);
-    expect(stepsWithProvenance.length).toBeGreaterThan(0);
+    const stepsWithProvenance = result.steps.filter((step) => step.provenance)
+    expect(stepsWithProvenance.length).toBeGreaterThan(0)
 
     // Verify we have both tens and ones place operations
-    const places = stepsWithProvenance.map((step) => step.provenance!.rhsPlace);
-    expect(places).toContain(0); // ones place
-    expect(places).toContain(1); // tens place
+    const places = stepsWithProvenance.map((step) => step.provenance!.rhsPlace)
+    expect(places).toContain(0) // ones place
+    expect(places).toContain(1) // tens place
 
     // Verify provenance data structure
     stepsWithProvenance.forEach((step) => {
-      const prov = step.provenance!;
-      expect(typeof prov.rhs).toBe("number");
-      expect(typeof prov.rhsDigit).toBe("number");
-      expect(typeof prov.rhsPlace).toBe("number");
-      expect(typeof prov.rhsPlaceName).toBe("string");
-      expect(typeof prov.rhsValue).toBe("number");
-    });
-  });
+      const prov = step.provenance!
+      expect(typeof prov.rhs).toBe('number')
+      expect(typeof prov.rhsDigit).toBe('number')
+      expect(typeof prov.rhsPlace).toBe('number')
+      expect(typeof prov.rhsPlaceName).toBe('string')
+      expect(typeof prov.rhsValue).toBe('number')
+    })
+  })
 
-  it("should handle bidirectional mapping correctly", () => {
-    const result = generateUnifiedInstructionSequence(1234, 1289); // 1234 + 55
+  it('should handle bidirectional mapping correctly', () => {
+    const result = generateUnifiedInstructionSequence(1234, 1289) // 1234 + 55
 
     // Create a mock implementation of the mapping functions
     const getColumnFromTermIndex = (termIndex: number) => {
-      const step = result.steps[termIndex];
-      if (!step?.provenance) return null;
-      return 4 - step.provenance.rhsPlace;
-    };
+      const step = result.steps[termIndex]
+      if (!step?.provenance) return null
+      return 4 - step.provenance.rhsPlace
+    }
 
     const getTermIndicesFromColumn = (columnIndex: number) => {
-      const termIndices: number[] = [];
+      const termIndices: number[] = []
       result.steps.forEach((step, index) => {
         if (step.provenance) {
-          const stepColumnIndex = 4 - step.provenance.rhsPlace;
+          const stepColumnIndex = 4 - step.provenance.rhsPlace
           if (stepColumnIndex === columnIndex) {
-            termIndices.push(index);
+            termIndices.push(index)
           }
         }
-      });
-      return termIndices;
-    };
+      })
+      return termIndices
+    }
 
     // Test round-trip mapping
     const stepsWithProvenance = result.steps
       .map((step, index) => ({ step, index }))
-      .filter(({ step }) => step.provenance);
+      .filter(({ step }) => step.provenance)
 
     stepsWithProvenance.forEach(({ index: termIndex }) => {
-      const columnIndex = getColumnFromTermIndex(termIndex);
+      const columnIndex = getColumnFromTermIndex(termIndex)
       if (columnIndex !== null) {
-        const backToTermIndices = getTermIndicesFromColumn(columnIndex);
-        expect(backToTermIndices).toContain(termIndex);
+        const backToTermIndices = getTermIndicesFromColumn(columnIndex)
+        expect(backToTermIndices).toContain(termIndex)
       }
-    });
-  });
+    })
+  })
 
-  it("should handle edge cases gracefully", () => {
-    const result = generateUnifiedInstructionSequence(5, 7); // Simple case: 5 + 2
+  it('should handle edge cases gracefully', () => {
+    const result = generateUnifiedInstructionSequence(5, 7) // Simple case: 5 + 2
 
     // Even simple cases should work with the mapping
     const getColumnFromTermIndex = (termIndex: number) => {
-      const step = result.steps[termIndex];
-      if (!step?.provenance) return null;
-      return 4 - step.provenance.rhsPlace;
-    };
+      const step = result.steps[termIndex]
+      if (!step?.provenance) return null
+      return 4 - step.provenance.rhsPlace
+    }
 
     // Should not throw errors for invalid indices
-    expect(getColumnFromTermIndex(-1)).toBe(null);
-    expect(getColumnFromTermIndex(999)).toBe(null);
+    expect(getColumnFromTermIndex(-1)).toBe(null)
+    expect(getColumnFromTermIndex(999)).toBe(null)
 
     // Should handle steps without provenance
-    const stepWithoutProvenance = result.steps.find((step) => !step.provenance);
+    const stepWithoutProvenance = result.steps.find((step) => !step.provenance)
     if (stepWithoutProvenance) {
-      const index = result.steps.indexOf(stepWithoutProvenance);
-      expect(getColumnFromTermIndex(index)).toBe(null);
+      const index = result.steps.indexOf(stepWithoutProvenance)
+      expect(getColumnFromTermIndex(index)).toBe(null)
     }
-  });
+  })
 
-  it("should use correct styling for dynamic column highlights", () => {
+  it('should use correct styling for dynamic column highlights', () => {
     // Test the expected column-level styling values from the implementation
     const expectedDynamicColumnStyle = {
       columnPost: {
-        stroke: "#3b82f6",
+        stroke: '#3b82f6',
         strokeWidth: 4,
         opacity: 1,
       },
-    };
+    }
 
     // Verify blue color scheme for column highlighting
-    expect(expectedDynamicColumnStyle.columnPost.stroke).toBe("#3b82f6"); // Blue
-    expect(expectedDynamicColumnStyle.columnPost.strokeWidth).toBe(4); // Thicker than default
-    expect(expectedDynamicColumnStyle.columnPost.opacity).toBe(1); // Fully visible
+    expect(expectedDynamicColumnStyle.columnPost.stroke).toBe('#3b82f6') // Blue
+    expect(expectedDynamicColumnStyle.columnPost.strokeWidth).toBe(4) // Thicker than default
+    expect(expectedDynamicColumnStyle.columnPost.opacity).toBe(1) // Fully visible
 
     // Verify this is different from bead-level highlighting
     const staticBeadStyle = {
-      fill: "#fbbf24",
-      stroke: "#f59e0b",
+      fill: '#fbbf24',
+      stroke: '#f59e0b',
       strokeWidth: 3,
-    }; // Orange
-    expect(expectedDynamicColumnStyle.columnPost.stroke).not.toBe(
-      staticBeadStyle.stroke,
-    );
-  });
-});
+    } // Orange
+    expect(expectedDynamicColumnStyle.columnPost.stroke).not.toBe(staticBeadStyle.stroke)
+  })
+})
diff --git a/apps/web/src/components/tutorial/__tests__/test-setup.ts b/apps/web/src/components/tutorial/__tests__/test-setup.ts
index ad3f45c3..0eee762d 100644
--- a/apps/web/src/components/tutorial/__tests__/test-setup.ts
+++ b/apps/web/src/components/tutorial/__tests__/test-setup.ts
@@ -1,22 +1,22 @@
-import "@testing-library/jest-dom";
-import { vi } from "vitest";
+import '@testing-library/jest-dom'
+import { vi } from 'vitest'
 
 // Mock IntersectionObserver for components that use it
 global.IntersectionObserver = vi.fn(() => ({
   disconnect: vi.fn(),
   observe: vi.fn(),
   unobserve: vi.fn(),
-})) as any;
+})) as any
 
 // Mock ResizeObserver for components that use it
 global.ResizeObserver = vi.fn(() => ({
   disconnect: vi.fn(),
   observe: vi.fn(),
   unobserve: vi.fn(),
-})) as any;
+})) as any
 
 // Mock window.matchMedia for responsive components
-Object.defineProperty(window, "matchMedia", {
+Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: vi.fn().mockImplementation((query) => ({
     matches: false,
@@ -28,7 +28,7 @@ Object.defineProperty(window, "matchMedia", {
     removeEventListener: vi.fn(),
     dispatchEvent: vi.fn(),
   })),
-});
+})
 
 // Mock canvas context for any canvas-based components
 HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
@@ -56,79 +56,73 @@ HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
   transform: vi.fn(),
   rect: vi.fn(),
   clip: vi.fn(),
-})) as any;
+})) as any
 
 // Mock setTimeout and setInterval for more predictable testing
-vi.useFakeTimers();
+vi.useFakeTimers()
 
 // Add custom matchers for tutorial-specific assertions
 expect.extend({
   toHaveCorrectStartValue(received, expected) {
-    const pass = received === expected;
+    const pass = received === expected
     if (pass) {
       return {
-        message: () =>
-          `Expected abacus not to have start value ${expected}, but it did`,
+        message: () => `Expected abacus not to have start value ${expected}, but it did`,
         pass: true,
-      };
+      }
     } else {
       return {
-        message: () =>
-          `Expected abacus to have start value ${expected}, but got ${received}`,
+        message: () => `Expected abacus to have start value ${expected}, but got ${received}`,
         pass: false,
-      };
+      }
     }
   },
 
   toAdvanceMultiStep(received) {
-    const pass = received > 0;
+    const pass = received > 0
     if (pass) {
       return {
-        message: () =>
-          `Expected multi-step not to advance, but it advanced to step ${received}`,
+        message: () => `Expected multi-step not to advance, but it advanced to step ${received}`,
         pass: true,
-      };
+      }
     } else {
       return {
-        message: () =>
-          `Expected multi-step to advance, but it remained at step ${received}`,
+        message: () => `Expected multi-step to advance, but it remained at step ${received}`,
         pass: false,
-      };
+      }
     }
   },
-});
+})
 
 // Mock the unified step generator for consistent test results
-vi.mock("../../../utils/unifiedStepGenerator", () => ({
-  generateUnifiedInstructionSequence: vi.fn(
-    (startValue: number, targetValue: number) => ({
-      steps: [
-        {
-          stepIndex: 0,
-          expectedValue: startValue + Math.ceil((targetValue - startValue) / 2),
-          englishInstruction: `Change value to ${startValue + Math.ceil((targetValue - startValue) / 2)}`,
-          mathematicalTerm: `${Math.ceil((targetValue - startValue) / 2)}`,
-          termPosition: { startIndex: 0, endIndex: 2 },
-        },
-        {
-          stepIndex: 1,
-          expectedValue: targetValue,
-          englishInstruction: `Change value to ${targetValue}`,
-          mathematicalTerm: `${targetValue}`,
-          termPosition: { startIndex: 4, endIndex: 6 },
-        },
-      ],
-      fullDecomposition: `${startValue} + ${targetValue - startValue} = ${targetValue}`,
-    }),
-  ),
-}));
+vi.mock('../../../utils/unifiedStepGenerator', () => ({
+  generateUnifiedInstructionSequence: vi.fn((startValue: number, targetValue: number) => ({
+    steps: [
+      {
+        stepIndex: 0,
+        expectedValue: startValue + Math.ceil((targetValue - startValue) / 2),
+        englishInstruction: `Change value to ${startValue + Math.ceil((targetValue - startValue) / 2)}`,
+        mathematicalTerm: `${Math.ceil((targetValue - startValue) / 2)}`,
+        termPosition: { startIndex: 0, endIndex: 2 },
+      },
+      {
+        stepIndex: 1,
+        expectedValue: targetValue,
+        englishInstruction: `Change value to ${targetValue}`,
+        mathematicalTerm: `${targetValue}`,
+        termPosition: { startIndex: 4, endIndex: 6 },
+      },
+    ],
+    fullDecomposition: `${startValue} + ${targetValue - startValue} = ${targetValue}`,
+  })),
+}))
 
 // Type declarations for custom matchers
 declare global {
   namespace Vi {
     interface JestAssertion<T = any> {
-      toHaveCorrectStartValue(expected: number): T;
-      toAdvanceMultiStep(): T;
+      toHaveCorrectStartValue(expected: number): T
+      toAdvanceMultiStep(): T
     }
   }
 }
diff --git a/apps/web/src/components/tutorial/decomposition-reasoning.css b/apps/web/src/components/tutorial/decomposition-reasoning.css
index 86c6b368..d5d08906 100644
--- a/apps/web/src/components/tutorial/decomposition-reasoning.css
+++ b/apps/web/src/components/tutorial/decomposition-reasoning.css
@@ -72,8 +72,7 @@
   max-width: 240px;
   z-index: 50;
   animation: fadeIn 0.2s ease-out;
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
 }
 
 .reason-tooltip__content {
diff --git a/apps/web/src/components/tutorial/reason-tooltip.css b/apps/web/src/components/tutorial/reason-tooltip.css
index dc85da88..f56024c0 100644
--- a/apps/web/src/components/tutorial/reason-tooltip.css
+++ b/apps/web/src/components/tutorial/reason-tooltip.css
@@ -50,10 +50,7 @@
   padding: 12px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   max-width: 320px;
-  font-family:
-    system-ui,
-    -apple-system,
-    sans-serif;
+  font-family: system-ui, -apple-system, sans-serif;
 }
 
 .reason-tooltip__content {
diff --git a/apps/web/src/components/tutorial/shared/EditorComponents.tsx b/apps/web/src/components/tutorial/shared/EditorComponents.tsx
index 4ee07940..6c07fd4a 100644
--- a/apps/web/src/components/tutorial/shared/EditorComponents.tsx
+++ b/apps/web/src/components/tutorial/shared/EditorComponents.tsx
@@ -1,43 +1,43 @@
-"use client";
+'use client'
 
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import type { ReactNode } from "react";
-import { css } from "../../../../styled-system/css";
-import { hstack, vstack } from "../../../../styled-system/patterns";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import type { ReactNode } from 'react'
+import { css } from '../../../../styled-system/css'
+import { hstack, vstack } from '../../../../styled-system/patterns'
 
 // Shared input styles
 export const inputStyles = {
-  w: "full",
+  w: 'full',
   px: 2,
   py: 1,
-  border: "1px solid",
-  borderColor: "gray.300",
-  rounded: "sm",
-  fontSize: "xs",
-} as const;
+  border: '1px solid',
+  borderColor: 'gray.300',
+  rounded: 'sm',
+  fontSize: 'xs',
+} as const
 
 export const labelStyles = {
-  fontSize: "xs",
-  color: "gray.600",
+  fontSize: 'xs',
+  color: 'gray.600',
   mb: 1,
-  display: "block",
-} as const;
+  display: 'block',
+} as const
 
 // Shared Editor Layout Component - wraps entire editor with consistent styling
 interface EditorLayoutProps {
-  title: string;
-  onClose: () => void;
-  onDelete?: () => void;
-  deleteLabel?: string;
-  children: ReactNode;
-  className?: string;
+  title: string
+  onClose: () => void
+  onDelete?: () => void
+  deleteLabel?: string
+  children: ReactNode
+  className?: string
 }
 
 export function EditorLayout({
   title,
   onClose,
   onDelete,
-  deleteLabel = "Delete",
+  deleteLabel = 'Delete',
   children,
   className,
 }: EditorLayoutProps) {
@@ -46,17 +46,17 @@ export function EditorLayout({
       className={css(
         {
           p: 3,
-          bg: "purple.50",
-          border: "1px solid",
-          borderColor: "purple.200",
-          rounded: "lg",
-          height: "100%",
-          overflowY: "auto",
+          bg: 'purple.50',
+          border: '1px solid',
+          borderColor: 'purple.200',
+          rounded: 'lg',
+          height: '100%',
+          overflowY: 'auto',
         },
-        className,
+        className
       )}
     >
-      <div className={vstack({ gap: 3, alignItems: "stretch" })}>
+      <div className={vstack({ gap: 3, alignItems: 'stretch' })}>
         {/* Header */}
         <EditorHeader
           title={title}
@@ -69,35 +69,35 @@ export function EditorLayout({
         {children}
       </div>
     </div>
-  );
+  )
 }
 
 // Shared Editor Header Component
 interface EditorHeaderProps {
-  title: string;
-  onClose: () => void;
-  onDelete?: () => void;
-  deleteLabel?: string;
+  title: string
+  onClose: () => void
+  onDelete?: () => void
+  deleteLabel?: string
 }
 
 export function EditorHeader({
   title,
   onClose,
   onDelete,
-  deleteLabel = "Delete",
+  deleteLabel = 'Delete',
 }: EditorHeaderProps) {
   return (
     <div
       className={hstack({
-        justifyContent: "space-between",
-        alignItems: "center",
+        justifyContent: 'space-between',
+        alignItems: 'center',
       })}
     >
       <h3
         className={css({
-          fontSize: "md",
-          fontWeight: "semibold",
-          color: "purple.800",
+          fontSize: 'md',
+          fontWeight: 'semibold',
+          color: 'purple.800',
         })}
       >
         {title}
@@ -109,12 +109,12 @@ export function EditorHeader({
             className={css({
               px: 2,
               py: 1,
-              bg: "red.500",
-              color: "white",
-              rounded: "sm",
-              fontSize: "xs",
-              cursor: "pointer",
-              _hover: { bg: "red.600" },
+              bg: 'red.500',
+              color: 'white',
+              rounded: 'sm',
+              fontSize: 'xs',
+              cursor: 'pointer',
+              _hover: { bg: 'red.600' },
             })}
           >
             {deleteLabel}
@@ -124,22 +124,22 @@ export function EditorHeader({
           onClick={onClose}
           className={css({
             p: 1,
-            borderRadius: "sm",
-            cursor: "pointer",
-            _hover: { bg: "gray.100" },
+            borderRadius: 'sm',
+            cursor: 'pointer',
+            _hover: { bg: 'gray.100' },
           })}
         >
           ✕
         </button>
       </div>
     </div>
-  );
+  )
 }
 
 // Shared Field Component
 interface FieldProps {
-  label: string;
-  children: ReactNode;
+  label: string
+  children: ReactNode
 }
 
 export function Field({ label, children }: FieldProps) {
@@ -148,17 +148,17 @@ export function Field({ label, children }: FieldProps) {
       <label className={css(labelStyles)}>{label}</label>
       {children}
     </div>
-  );
+  )
 }
 
 // Shared Text Input Component
 interface TextInputProps {
-  label: string;
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  multiline?: boolean;
-  rows?: number;
+  label: string
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  multiline?: boolean
+  rows?: number
 }
 
 export function TextInput({
@@ -178,7 +178,7 @@ export function TextInput({
           rows={rows}
           className={css({
             ...inputStyles,
-            resize: "none",
+            resize: 'none',
           })}
           placeholder={placeholder}
         />
@@ -192,27 +192,20 @@ export function TextInput({
         />
       )}
     </Field>
-  );
+  )
 }
 
 // Shared Number Input Component
 interface NumberInputProps {
-  label: string;
-  value: number | string;
-  onChange: (value: number) => void;
-  min?: number;
-  max?: number;
-  placeholder?: string;
+  label: string
+  value: number | string
+  onChange: (value: number) => void
+  min?: number
+  max?: number
+  placeholder?: string
 }
 
-export function NumberInput({
-  label,
-  value,
-  onChange,
-  min,
-  max,
-  placeholder,
-}: NumberInputProps) {
+export function NumberInput({ label, value, onChange, min, max, placeholder }: NumberInputProps) {
   return (
     <Field label={label}>
       <input
@@ -225,78 +218,74 @@ export function NumberInput({
         placeholder={placeholder}
       />
     </Field>
-  );
+  )
 }
 
 // Shared Grid Layout Component
 interface GridLayoutProps {
-  columns: 1 | 2 | 3 | 4;
-  gap?: number;
-  children: ReactNode;
+  columns: 1 | 2 | 3 | 4
+  gap?: number
+  children: ReactNode
 }
 
 export function GridLayout({ columns, gap = 2, children }: GridLayoutProps) {
   const gridCols = {
-    1: "1fr",
-    2: "1fr 1fr",
-    3: "1fr 1fr 1fr",
-    4: "1fr 1fr 1fr 1fr",
-  };
+    1: '1fr',
+    2: '1fr 1fr',
+    3: '1fr 1fr 1fr',
+    4: '1fr 1fr 1fr 1fr',
+  }
 
   return (
     <div
       className={css({
-        display: "grid",
+        display: 'grid',
         gridTemplateColumns: gridCols[columns],
         gap: gap,
       })}
     >
       {children}
     </div>
-  );
+  )
 }
 
 // Shared Section Component
 interface SectionProps {
-  title?: string;
-  children: ReactNode;
-  collapsible?: boolean;
-  defaultOpen?: boolean;
-  background?: "white" | "gray" | "none";
+  title?: string
+  children: ReactNode
+  collapsible?: boolean
+  defaultOpen?: boolean
+  background?: 'white' | 'gray' | 'none'
 }
 
-export function Section({
-  title,
-  children,
-  background = "white",
-}: SectionProps) {
+export function Section({ title, children, background = 'white' }: SectionProps) {
   const bgStyles = {
     white: {
       p: 2,
-      bg: "white",
-      border: "1px solid",
-      borderColor: "gray.200",
-      rounded: "md",
+      bg: 'white',
+      border: '1px solid',
+      borderColor: 'gray.200',
+      rounded: 'md',
     },
     gray: {
       p: 2,
-      bg: "gray.50",
-      border: "1px solid",
-      borderColor: "gray.200",
-      rounded: "sm",
+      bg: 'gray.50',
+      border: '1px solid',
+      borderColor: 'gray.200',
+      rounded: 'sm',
     },
     none: {},
-  };
+  }
 
   return (
     <div className={css(bgStyles[background])}>
       {title && (
         <h4
           className={css({
-            fontSize: "sm",
-            fontWeight: "medium",
+            fontSize: 'sm',
+            fontWeight: 'medium',
             mb: 2,
-            color: "gray.800",
+            color: 'gray.800',
           })}
         >
           {title}
@@ -304,53 +293,49 @@ export function Section({
       )}
       {children}
     </div>
-  );
+  )
 }
 
 // Shared Form Group Component - handles common form layouts
 interface FormGroupProps {
-  children: ReactNode;
-  columns?: 1 | 2 | 3;
-  gap?: number;
+  children: ReactNode
+  columns?: 1 | 2 | 3
+  gap?: number
 }
 
 export function FormGroup({ children, columns = 1, gap = 2 }: FormGroupProps) {
   if (columns === 1) {
-    return (
-      <div className={vstack({ gap: gap, alignItems: "stretch" })}>
-        {children}
-      </div>
-    );
+    return <div className={vstack({ gap: gap, alignItems: 'stretch' })}>{children}</div>
   }
 
   return (
     <GridLayout columns={columns} gap={gap}>
       {children}
     </GridLayout>
-  );
+  )
 }
 
 // Shared Compact Step Item Component
 interface CompactStepItemProps {
-  type: "concept" | "practice";
-  index: number;
-  title: string;
-  subtitle?: string;
-  description?: string;
-  isSelected?: boolean;
-  hasErrors?: boolean;
-  hasWarnings?: boolean;
-  errorCount?: number;
-  warningCount?: number;
-  onClick?: () => void;
-  onPreview?: () => void;
-  onDelete?: () => void;
-  children?: ReactNode;
+  type: 'concept' | 'practice'
+  index: number
+  title: string
+  subtitle?: string
+  description?: string
+  isSelected?: boolean
+  hasErrors?: boolean
+  hasWarnings?: boolean
+  errorCount?: number
+  warningCount?: number
+  onClick?: () => void
+  onPreview?: () => void
+  onDelete?: () => void
+  children?: ReactNode
   // Hover-add functionality
-  onAddStepBefore?: () => void;
-  onAddPracticeStepBefore?: () => void;
-  onAddStepAfter?: () => void;
-  onAddPracticeStepAfter?: () => void;
+  onAddStepBefore?: () => void
+  onAddPracticeStepBefore?: () => void
+  onAddStepAfter?: () => void
+  onAddPracticeStepAfter?: () => void
 }
 
 export function CompactStepItem({
@@ -374,51 +359,48 @@ export function CompactStepItem({
   onAddPracticeStepAfter,
 }: CompactStepItemProps) {
   const getBorderColor = () => {
-    if (isSelected) return "blue.500";
-    if (hasErrors) return "red.300";
-    return "gray.200";
-  };
+    if (isSelected) return 'blue.500'
+    if (hasErrors) return 'red.300'
+    return 'gray.200'
+  }
 
   const getBgColor = () => {
-    if (isSelected) return "blue.50";
-    if (hasWarnings) return "yellow.50";
-    if (hasErrors) return "red.50";
-    return "white";
-  };
+    if (isSelected) return 'blue.50'
+    if (hasWarnings) return 'yellow.50'
+    if (hasErrors) return 'red.50'
+    return 'white'
+  }
 
   const getHoverBg = () => {
-    return isSelected ? "blue.100" : "gray.50";
-  };
+    return isSelected ? 'blue.100' : 'gray.50'
+  }
 
-  const typeIcon = type === "concept" ? "📝" : "🎯";
-  const typeLabel = type === "concept" ? "Step" : "Practice";
+  const typeIcon = type === 'concept' ? '📝' : '🎯'
+  const typeLabel = type === 'concept' ? 'Step' : 'Practice'
 
   const _hasAddActions =
-    onAddStepBefore ||
-    onAddPracticeStepBefore ||
-    onAddStepAfter ||
-    onAddPracticeStepAfter;
+    onAddStepBefore || onAddPracticeStepBefore || onAddStepAfter || onAddPracticeStepAfter
 
   return (
-    <div className={css({ position: "relative" })}>
+    <div className={css({ position: 'relative' })}>
       {/* Main step item */}
       <div
         onClick={onClick}
         className={css({
           px: 1.5,
           py: 1,
-          border: "1px solid",
+          border: '1px solid',
           borderColor: getBorderColor(),
-          borderRadius: "sm",
+          borderRadius: 'sm',
           bg: getBgColor(),
-          cursor: onClick ? "pointer" : "default",
+          cursor: onClick ? 'pointer' : 'default',
           _hover: onClick ? { bg: getHoverBg() } : {},
         })}
       >
         <div
           className={hstack({
-            justifyContent: "space-between",
-            alignItems: "center",
+            justifyContent: 'space-between',
+            alignItems: 'center',
             gap: 2,
           })}
         >
@@ -427,19 +409,19 @@ export function CompactStepItem({
             <div
               className={hstack({
                 gap: 1.5,
-                alignItems: "center",
-                flexWrap: "wrap",
+                alignItems: 'center',
+                flexWrap: 'wrap',
               })}
             >
               <span
                 className={css({
-                  fontSize: "xs",
-                  fontWeight: "bold",
-                  color: type === "concept" ? "blue.800" : "purple.800",
-                  bg: type === "concept" ? "blue.100" : "purple.100",
+                  fontSize: 'xs',
+                  fontWeight: 'bold',
+                  color: type === 'concept' ? 'blue.800' : 'purple.800',
+                  bg: type === 'concept' ? 'blue.100' : 'purple.100',
                   px: 0.5,
                   py: 0.5,
-                  borderRadius: "xs",
+                  borderRadius: 'xs',
                   flexShrink: 0,
                 })}
               >
@@ -449,11 +431,11 @@ export function CompactStepItem({
               {/* Title inline */}
               <div
                 className={css({
-                  fontWeight: "medium",
-                  fontSize: "xs",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
+                  fontWeight: 'medium',
+                  fontSize: 'xs',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
                   flex: 1,
                   minWidth: 0,
                 })}
@@ -465,12 +447,12 @@ export function CompactStepItem({
               {hasErrors && (
                 <span
                   className={css({
-                    fontSize: "xs",
-                    color: "red.600",
-                    bg: "red.100",
+                    fontSize: 'xs',
+                    color: 'red.600',
+                    bg: 'red.100',
                     px: 1,
                     py: 0.5,
-                    borderRadius: "xs",
+                    borderRadius: 'xs',
                     flexShrink: 0,
                   })}
                 >
@@ -481,12 +463,12 @@ export function CompactStepItem({
               {hasWarnings && (
                 <span
                   className={css({
-                    fontSize: "xs",
-                    color: "yellow.600",
-                    bg: "yellow.100",
+                    fontSize: 'xs',
+                    color: 'yellow.600',
+                    bg: 'yellow.100',
                     px: 1,
                     py: 0.5,
-                    borderRadius: "xs",
+                    borderRadius: 'xs',
                     flexShrink: 0,
                   })}
                 >
@@ -499,11 +481,11 @@ export function CompactStepItem({
             {subtitle && (
               <div
                 className={css({
-                  fontSize: "xs",
-                  color: "gray.600",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
+                  fontSize: 'xs',
+                  color: 'gray.600',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
                   mt: 0.5,
                 })}
               >
@@ -520,19 +502,19 @@ export function CompactStepItem({
             {onPreview && (
               <button
                 onClick={(e) => {
-                  e.stopPropagation();
-                  onPreview();
+                  e.stopPropagation()
+                  onPreview()
                 }}
                 className={css({
                   p: 1,
-                  bg: "blue.100",
-                  color: "blue.700",
-                  border: "1px solid",
-                  borderColor: "blue.300",
-                  borderRadius: "sm",
-                  fontSize: "xs",
-                  cursor: "pointer",
-                  _hover: { bg: "blue.200" },
+                  bg: 'blue.100',
+                  color: 'blue.700',
+                  border: '1px solid',
+                  borderColor: 'blue.300',
+                  borderRadius: 'sm',
+                  fontSize: 'xs',
+                  cursor: 'pointer',
+                  _hover: { bg: 'blue.200' },
                 })}
                 title="Preview"
               >
@@ -543,19 +525,19 @@ export function CompactStepItem({
             {onDelete && (
               <button
                 onClick={(e) => {
-                  e.stopPropagation();
-                  onDelete();
+                  e.stopPropagation()
+                  onDelete()
                 }}
                 className={css({
                   p: 1,
-                  bg: "red.100",
-                  color: "red.700",
-                  border: "1px solid",
-                  borderColor: "red.300",
-                  borderRadius: "sm",
-                  fontSize: "xs",
-                  cursor: "pointer",
-                  _hover: { bg: "red.200" },
+                  bg: 'red.100',
+                  color: 'red.700',
+                  border: '1px solid',
+                  borderColor: 'red.300',
+                  borderRadius: 'sm',
+                  fontSize: 'xs',
+                  cursor: 'pointer',
+                  _hover: { bg: 'red.200' },
                 })}
                 title="Delete"
               >
@@ -566,29 +548,26 @@ export function CompactStepItem({
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 // Between-step hover area with dropdown
 interface BetweenStepAddProps {
-  onAddStep: () => void;
-  onAddPracticeStep: () => void;
+  onAddStep: () => void
+  onAddPracticeStep: () => void
 }
 
-export function BetweenStepAdd({
-  onAddStep,
-  onAddPracticeStep,
-}: BetweenStepAddProps) {
+export function BetweenStepAdd({ onAddStep, onAddPracticeStep }: BetweenStepAddProps) {
   return (
     <div
       className={css({
-        position: "relative",
-        height: "16px",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
+        position: 'relative',
+        height: '16px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
         zIndex: 50, // Higher z-index for the container
-        "&:hover .add-button": {
+        '&:hover .add-button': {
           opacity: 0.5,
         },
       })}
@@ -599,21 +578,21 @@ export function BetweenStepAdd({
             className={`${css({
               px: 2,
               py: 0.5,
-              bg: "gray.100",
-              color: "gray.600",
-              border: "1px dashed",
-              borderColor: "gray.300",
-              borderRadius: "sm",
-              fontSize: "xs",
-              cursor: "pointer",
+              bg: 'gray.100',
+              color: 'gray.600',
+              border: '1px dashed',
+              borderColor: 'gray.300',
+              borderRadius: 'sm',
+              fontSize: 'xs',
+              cursor: 'pointer',
               opacity: 0,
-              transition: "opacity 0.2s ease",
+              transition: 'opacity 0.2s ease',
               zIndex: 50, // Higher z-index for the button
-              position: "relative",
+              position: 'relative',
               _hover: {
-                opacity: "1 !important",
-                bg: "gray.200",
-                borderColor: "gray.400",
+                opacity: '1 !important',
+                bg: 'gray.200',
+                borderColor: 'gray.400',
               },
             })} add-button`}
           >
@@ -625,13 +604,13 @@ export function BetweenStepAdd({
           <DropdownMenu.Content
             className={css({
               mt: 1,
-              bg: "white",
-              border: "1px solid",
-              borderColor: "gray.200",
-              borderRadius: "md",
-              shadow: "md",
+              bg: 'white',
+              border: '1px solid',
+              borderColor: 'gray.200',
+              borderRadius: 'md',
+              shadow: 'md',
               zIndex: 100, // Very high z-index for dropdown content
-              minW: "150px",
+              minW: '150px',
             })}
             sideOffset={4}
           >
@@ -639,17 +618,17 @@ export function BetweenStepAdd({
               <button
                 onClick={onAddStep}
                 className={css({
-                  w: "full",
+                  w: 'full',
                   px: 3,
                   py: 2,
-                  textAlign: "left",
-                  fontSize: "sm",
-                  cursor: "pointer",
-                  border: "none",
-                  bg: "transparent",
-                  _hover: { bg: "blue.50", color: "blue.700" },
-                  borderBottom: "1px solid",
-                  borderColor: "gray.100",
+                  textAlign: 'left',
+                  fontSize: 'sm',
+                  cursor: 'pointer',
+                  border: 'none',
+                  bg: 'transparent',
+                  _hover: { bg: 'blue.50', color: 'blue.700' },
+                  borderBottom: '1px solid',
+                  borderColor: 'gray.100',
                 })}
               >
                 📝 Concept Step
@@ -659,15 +638,15 @@ export function BetweenStepAdd({
               <button
                 onClick={onAddPracticeStep}
                 className={css({
-                  w: "full",
+                  w: 'full',
                   px: 3,
                   py: 2,
-                  textAlign: "left",
-                  fontSize: "sm",
-                  cursor: "pointer",
-                  border: "none",
-                  bg: "transparent",
-                  _hover: { bg: "purple.50", color: "purple.700" },
+                  textAlign: 'left',
+                  fontSize: 'sm',
+                  cursor: 'pointer',
+                  border: 'none',
+                  bg: 'transparent',
+                  _hover: { bg: 'purple.50', color: 'purple.700' },
                 })}
               >
                 🎯 Problem Page
@@ -677,50 +656,50 @@ export function BetweenStepAdd({
         </DropdownMenu.Portal>
       </DropdownMenu.Root>
     </div>
-  );
+  )
 }
 
 // Shared Button Component
 interface ButtonProps {
-  children: ReactNode;
-  onClick: () => void;
-  variant?: "primary" | "secondary" | "outline";
-  size?: "xs" | "sm" | "md";
-  disabled?: boolean;
-  title?: string;
+  children: ReactNode
+  onClick: () => void
+  variant?: 'primary' | 'secondary' | 'outline'
+  size?: 'xs' | 'sm' | 'md'
+  disabled?: boolean
+  title?: string
 }
 
 export function Button({
   children,
   onClick,
-  variant = "secondary",
-  size = "sm",
+  variant = 'secondary',
+  size = 'sm',
   disabled = false,
   title,
 }: ButtonProps) {
   const variantStyles = {
-    primary: { bg: "blue.500", color: "white", _hover: { bg: "blue.600" } },
+    primary: { bg: 'blue.500', color: 'white', _hover: { bg: 'blue.600' } },
     secondary: {
-      bg: "blue.100",
-      color: "blue.800",
-      border: "1px solid",
-      borderColor: "blue.300",
-      _hover: { bg: "blue.200" },
+      bg: 'blue.100',
+      color: 'blue.800',
+      border: '1px solid',
+      borderColor: 'blue.300',
+      _hover: { bg: 'blue.200' },
     },
     outline: {
-      bg: "gray.100",
-      color: "gray.700",
-      border: "1px solid",
-      borderColor: "gray.300",
-      _hover: { bg: "gray.200" },
+      bg: 'gray.100',
+      color: 'gray.700',
+      border: '1px solid',
+      borderColor: 'gray.300',
+      _hover: { bg: 'gray.200' },
     },
-  };
+  }
 
   const sizeStyles = {
-    xs: { px: 1, py: 1, fontSize: "xs" },
-    sm: { px: 2, py: 1, fontSize: "xs" },
-    md: { px: 3, py: 2, fontSize: "sm" },
-  };
+    xs: { px: 1, py: 1, fontSize: 'xs' },
+    sm: { px: 2, py: 1, fontSize: 'xs' },
+    md: { px: 3, py: 2, fontSize: 'sm' },
+  }
 
   return (
     <button
@@ -730,13 +709,13 @@ export function Button({
       className={css({
         ...variantStyles[variant],
         ...sizeStyles[size],
-        rounded: "sm",
-        cursor: disabled ? "not-allowed" : "pointer",
+        rounded: 'sm',
+        cursor: disabled ? 'not-allowed' : 'pointer',
         opacity: disabled ? 0.5 : 1,
-        textAlign: "center",
+        textAlign: 'center',
       })}
     >
       {children}
     </button>
-  );
+  )
 }
diff --git a/apps/web/src/components/tutorial/test/TutorialPlayerHighlighting.test.tsx b/apps/web/src/components/tutorial/test/TutorialPlayerHighlighting.test.tsx
index d37857b7..2a1cf335 100644
--- a/apps/web/src/components/tutorial/test/TutorialPlayerHighlighting.test.tsx
+++ b/apps/web/src/components/tutorial/test/TutorialPlayerHighlighting.test.tsx
@@ -1,145 +1,145 @@
-import { render } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import type { Tutorial } from "../../../types/tutorial";
-import { TutorialPlayer } from "../TutorialPlayer";
+import { render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import type { Tutorial } from '../../../types/tutorial'
+import { TutorialPlayer } from '../TutorialPlayer'
 
 // Mock AbacusReact to capture the customStyles prop
-vi.mock("@soroban/abacus-react", () => ({
+vi.mock('@soroban/abacus-react', () => ({
   AbacusReact: vi.fn(({ customStyles }) => {
     // Store the customStyles for testing
-    (global as any).lastCustomStyles = customStyles;
-    return <div data-testid="mock-abacus" />;
+    ;(global as any).lastCustomStyles = customStyles
+    return <div data-testid="mock-abacus" />
   }),
-}));
+}))
 
-describe("TutorialPlayer Highlighting", () => {
+describe('TutorialPlayer Highlighting', () => {
   const mockTutorial: Tutorial = {
-    id: "test-tutorial",
-    title: "Test Tutorial",
-    description: "Test tutorial for highlighting",
-    category: "Test",
-    difficulty: "beginner",
+    id: 'test-tutorial',
+    title: 'Test Tutorial',
+    description: 'Test tutorial for highlighting',
+    category: 'Test',
+    difficulty: 'beginner',
     estimatedDuration: 5,
     steps: [
       {
-        id: "step-1",
-        title: "Test Step 1",
-        problem: "0 + 1",
-        description: "Add 1 to the abacus",
+        id: 'step-1',
+        title: 'Test Step 1',
+        problem: '0 + 1',
+        description: 'Add 1 to the abacus',
         startValue: 0,
         targetValue: 1,
-        highlightBeads: [{ placeValue: 0, beadType: "earth", position: 0 }],
-        expectedAction: "add",
-        actionDescription: "Click the first earth bead",
+        highlightBeads: [{ placeValue: 0, beadType: 'earth', position: 0 }],
+        expectedAction: 'add',
+        actionDescription: 'Click the first earth bead',
         tooltip: {
-          content: "Adding earth beads",
-          explanation: "Earth beads are worth 1 each",
+          content: 'Adding earth beads',
+          explanation: 'Earth beads are worth 1 each',
         },
         errorMessages: {
-          wrongBead: "Click the highlighted earth bead",
-          wrongAction: "Move the bead UP",
-          hint: "Earth beads move up when adding",
+          wrongBead: 'Click the highlighted earth bead',
+          wrongAction: 'Move the bead UP',
+          hint: 'Earth beads move up when adding',
         },
       },
       {
-        id: "step-2",
-        title: "Multi-bead Step",
-        problem: "3 + 4",
-        description: "Use complement: 4 = 5 - 1",
+        id: 'step-2',
+        title: 'Multi-bead Step',
+        problem: '3 + 4',
+        description: 'Use complement: 4 = 5 - 1',
         startValue: 3,
         targetValue: 7,
         highlightBeads: [
-          { placeValue: 0, beadType: "heaven" },
-          { placeValue: 0, beadType: "earth", position: 0 },
+          { placeValue: 0, beadType: 'heaven' },
+          { placeValue: 0, beadType: 'earth', position: 0 },
         ],
-        expectedAction: "multi-step",
-        actionDescription: "Add heaven bead, then remove earth bead",
+        expectedAction: 'multi-step',
+        actionDescription: 'Add heaven bead, then remove earth bead',
         tooltip: {
-          content: "Five Complement",
-          explanation: "4 = 5 - 1",
+          content: 'Five Complement',
+          explanation: '4 = 5 - 1',
         },
         errorMessages: {
-          wrongBead: "Follow the two-step process",
-          wrongAction: "Add heaven, then remove earth",
-          hint: "Complement thinking: 4 = 5 - 1",
+          wrongBead: 'Follow the two-step process',
+          wrongAction: 'Add heaven, then remove earth',
+          hint: 'Complement thinking: 4 = 5 - 1',
         },
       },
     ],
-    tags: ["test"],
-    author: "Test Author",
-    version: "1.0.0",
+    tags: ['test'],
+    author: 'Test Author',
+    version: '1.0.0',
     createdAt: new Date(),
     updatedAt: new Date(),
     isPublished: true,
-  };
+  }
 
-  it("should highlight single bead in correct column (ones place)", () => {
-    render(<TutorialPlayer tutorial={mockTutorial} />);
+  it('should highlight single bead in correct column (ones place)', () => {
+    render(<TutorialPlayer tutorial={mockTutorial} />)
 
-    const customStyles = (global as any).lastCustomStyles;
+    const customStyles = (global as any).lastCustomStyles
 
     // placeValue: 0 (ones place) should map to columnIndex: 4 in customStyles
-    expect(customStyles).toBeDefined();
-    expect(customStyles.beads).toBeDefined();
-    expect(customStyles.beads[4]).toBeDefined(); // columnIndex 4 = rightmost column = ones place
-    expect(customStyles.beads[4].earth).toBeDefined();
+    expect(customStyles).toBeDefined()
+    expect(customStyles.beads).toBeDefined()
+    expect(customStyles.beads[4]).toBeDefined() // columnIndex 4 = rightmost column = ones place
+    expect(customStyles.beads[4].earth).toBeDefined()
     expect(customStyles.beads[4].earth[0]).toEqual({
-      fill: "#fbbf24",
-      stroke: "#f59e0b",
+      fill: '#fbbf24',
+      stroke: '#f59e0b',
       strokeWidth: 3,
-    });
-  });
+    })
+  })
 
-  it("should highlight multiple beads in same column for complement operations", () => {
+  it('should highlight multiple beads in same column for complement operations', () => {
     // Advance to step 2 (multi-bead highlighting)
-    render(<TutorialPlayer tutorial={mockTutorial} initialStepIndex={1} />);
+    render(<TutorialPlayer tutorial={mockTutorial} initialStepIndex={1} />)
 
-    const customStyles = (global as any).lastCustomStyles;
+    const customStyles = (global as any).lastCustomStyles
 
     // Both heaven and earth beads should be highlighted in ones place (columnIndex 4)
-    expect(customStyles).toBeDefined();
-    expect(customStyles.beads).toBeDefined();
-    expect(customStyles.beads[4]).toBeDefined(); // columnIndex 4 = rightmost column = ones place
+    expect(customStyles).toBeDefined()
+    expect(customStyles.beads).toBeDefined()
+    expect(customStyles.beads[4]).toBeDefined() // columnIndex 4 = rightmost column = ones place
 
     // Heaven bead should be highlighted
     expect(customStyles.beads[4].heaven).toEqual({
-      fill: "#fbbf24",
-      stroke: "#f59e0b",
+      fill: '#fbbf24',
+      stroke: '#f59e0b',
       strokeWidth: 3,
-    });
+    })
 
     // Earth bead position 0 should be highlighted
-    expect(customStyles.beads[4].earth).toBeDefined();
+    expect(customStyles.beads[4].earth).toBeDefined()
     expect(customStyles.beads[4].earth[0]).toEqual({
-      fill: "#fbbf24",
-      stroke: "#f59e0b",
+      fill: '#fbbf24',
+      stroke: '#f59e0b',
       strokeWidth: 3,
-    });
-  });
+    })
+  })
 
-  it("should not highlight leftmost column when highlighting ones place", () => {
-    render(<TutorialPlayer tutorial={mockTutorial} />);
+  it('should not highlight leftmost column when highlighting ones place', () => {
+    render(<TutorialPlayer tutorial={mockTutorial} />)
 
-    const customStyles = (global as any).lastCustomStyles;
+    const customStyles = (global as any).lastCustomStyles
 
     // columnIndex 0 (leftmost) should NOT be highlighted for ones place operations
-    expect(customStyles.beads[0]).toBeUndefined();
-    expect(customStyles.beads[1]).toBeUndefined();
-    expect(customStyles.beads[2]).toBeUndefined();
-    expect(customStyles.beads[3]).toBeUndefined();
+    expect(customStyles.beads[0]).toBeUndefined()
+    expect(customStyles.beads[1]).toBeUndefined()
+    expect(customStyles.beads[2]).toBeUndefined()
+    expect(customStyles.beads[3]).toBeUndefined()
 
     // Only columnIndex 4 (rightmost = ones place) should be highlighted
-    expect(customStyles.beads[4]).toBeDefined();
-  });
+    expect(customStyles.beads[4]).toBeDefined()
+  })
 
-  it("should convert placeValue to columnIndex correctly", () => {
+  it('should convert placeValue to columnIndex correctly', () => {
     const testCases = [
       { placeValue: 0, expectedColumnIndex: 4 }, // ones place
       { placeValue: 1, expectedColumnIndex: 3 }, // tens place
       { placeValue: 2, expectedColumnIndex: 2 }, // hundreds place
       { placeValue: 3, expectedColumnIndex: 1 }, // thousands place
       { placeValue: 4, expectedColumnIndex: 0 }, // ten-thousands place
-    ];
+    ]
 
     testCases.forEach(({ placeValue, expectedColumnIndex }) => {
       const testTutorial = {
@@ -147,20 +147,18 @@ describe("TutorialPlayer Highlighting", () => {
         steps: [
           {
             ...mockTutorial.steps[0],
-            highlightBeads: [
-              { placeValue, beadType: "earth" as const, position: 0 },
-            ],
+            highlightBeads: [{ placeValue, beadType: 'earth' as const, position: 0 }],
           },
         ],
-      };
+      }
 
-      render(<TutorialPlayer tutorial={testTutorial} />);
+      render(<TutorialPlayer tutorial={testTutorial} />)
 
-      const customStyles = (global as any).lastCustomStyles;
-      expect(customStyles.beads[expectedColumnIndex]).toBeDefined();
+      const customStyles = (global as any).lastCustomStyles
+      expect(customStyles.beads[expectedColumnIndex]).toBeDefined()
 
       // Cleanup for next iteration
-      delete (global as any).lastCustomStyles;
-    });
-  });
-});
+      delete (global as any).lastCustomStyles
+    })
+  })
+})
diff --git a/apps/web/src/constants/playerEmojis.ts b/apps/web/src/constants/playerEmojis.ts
index b4863cde..6946f891 100644
--- a/apps/web/src/constants/playerEmojis.ts
+++ b/apps/web/src/constants/playerEmojis.ts
@@ -1,154 +1,154 @@
 // Available character emojis for players
 export const PLAYER_EMOJIS = [
   // Abacus
-  "🧮",
+  '🧮',
 
   // People & Characters
-  "😀",
-  "😃",
-  "😄",
-  "😁",
-  "😆",
-  "😅",
-  "🤣",
-  "😂",
-  "🙂",
-  "😉",
-  "😊",
-  "😇",
-  "🥰",
-  "😍",
-  "🤩",
-  "😘",
-  "😗",
-  "😚",
-  "😋",
-  "😛",
-  "😝",
-  "😜",
-  "🤪",
-  "🤨",
-  "🧐",
-  "🤓",
-  "😎",
-  "🥸",
-  "🥳",
-  "😏",
-  "😒",
-  "😞",
-  "😔",
-  "😟",
-  "😕",
+  '😀',
+  '😃',
+  '😄',
+  '😁',
+  '😆',
+  '😅',
+  '🤣',
+  '😂',
+  '🙂',
+  '😉',
+  '😊',
+  '😇',
+  '🥰',
+  '😍',
+  '🤩',
+  '😘',
+  '😗',
+  '😚',
+  '😋',
+  '😛',
+  '😝',
+  '😜',
+  '🤪',
+  '🤨',
+  '🧐',
+  '🤓',
+  '😎',
+  '🥸',
+  '🥳',
+  '😏',
+  '😒',
+  '😞',
+  '😔',
+  '😟',
+  '😕',
 
   // Fantasy & Fun
-  "🤠",
-  "🥷",
-  "👑",
-  "🎭",
-  "🤖",
-  "👻",
-  "💀",
-  "👽",
-  "🤡",
-  "🧙‍♂️",
-  "🧙‍♀️",
-  "🧚‍♂️",
-  "🧚‍♀️",
-  "🧛‍♂️",
-  "🧛‍♀️",
-  "🧜‍♂️",
-  "🧜‍♀️",
-  "🧝‍♂️",
-  "🧝‍♀️",
-  "🦸‍♂️",
-  "🦸‍♀️",
-  "🦹‍♂️",
+  '🤠',
+  '🥷',
+  '👑',
+  '🎭',
+  '🤖',
+  '👻',
+  '💀',
+  '👽',
+  '🤡',
+  '🧙‍♂️',
+  '🧙‍♀️',
+  '🧚‍♂️',
+  '🧚‍♀️',
+  '🧛‍♂️',
+  '🧛‍♀️',
+  '🧜‍♂️',
+  '🧜‍♀️',
+  '🧝‍♂️',
+  '🧝‍♀️',
+  '🦸‍♂️',
+  '🦸‍♀️',
+  '🦹‍♂️',
 
   // Animals
-  "🐶",
-  "🐱",
-  "🐭",
-  "🐹",
-  "🐰",
-  "🦊",
-  "🐻",
-  "🐼",
-  "🐻‍❄️",
-  "🐨",
-  "🐯",
-  "🦁",
-  "🐮",
-  "🐷",
-  "🐸",
-  "🐵",
-  "🙈",
-  "🙉",
-  "🙊",
-  "🐒",
-  "🦆",
-  "🐧",
-  "🐦",
-  "🐤",
-  "🐣",
-  "🐥",
-  "🦅",
-  "🦉",
-  "🦇",
-  "🐺",
-  "🐗",
-  "🐴",
-  "🦄",
-  "🐝",
-  "🐛",
-  "🦋",
+  '🐶',
+  '🐱',
+  '🐭',
+  '🐹',
+  '🐰',
+  '🦊',
+  '🐻',
+  '🐼',
+  '🐻‍❄️',
+  '🐨',
+  '🐯',
+  '🦁',
+  '🐮',
+  '🐷',
+  '🐸',
+  '🐵',
+  '🙈',
+  '🙉',
+  '🙊',
+  '🐒',
+  '🦆',
+  '🐧',
+  '🐦',
+  '🐤',
+  '🐣',
+  '🐥',
+  '🦅',
+  '🦉',
+  '🦇',
+  '🐺',
+  '🐗',
+  '🐴',
+  '🦄',
+  '🐝',
+  '🐛',
+  '🦋',
 
   // Objects & Symbols
-  "⭐",
-  "🌟",
-  "💫",
-  "✨",
-  "⚡",
-  "🔥",
-  "🌈",
-  "🎪",
-  "🎨",
-  "🎯",
-  "🎲",
-  "🎮",
-  "🕹️",
-  "🎸",
-  "🎺",
-  "🎷",
-  "🥁",
-  "🎻",
-  "🎤",
-  "🎧",
-  "🎬",
-  "🎥",
+  '⭐',
+  '🌟',
+  '💫',
+  '✨',
+  '⚡',
+  '🔥',
+  '🌈',
+  '🎪',
+  '🎨',
+  '🎯',
+  '🎲',
+  '🎮',
+  '🕹️',
+  '🎸',
+  '🎺',
+  '🎷',
+  '🥁',
+  '🎻',
+  '🎤',
+  '🎧',
+  '🎬',
+  '🎥',
 
   // Food & Drinks
-  "🍎",
-  "🍊",
-  "🍌",
-  "🍇",
-  "🍓",
-  "🥝",
-  "🍑",
-  "🥭",
-  "🍍",
-  "🥥",
-  "🥑",
-  "🍆",
-  "🥕",
-  "🌽",
-  "🌶️",
-  "🫑",
-  "🥒",
-  "🥬",
-  "🥦",
-  "🧄",
-  "🧅",
-  "🍄",
-  "🥜",
-  "🌰",
-];
+  '🍎',
+  '🍊',
+  '🍌',
+  '🍇',
+  '🍓',
+  '🥝',
+  '🍑',
+  '🥭',
+  '🍍',
+  '🥥',
+  '🥑',
+  '🍆',
+  '🥕',
+  '🌽',
+  '🌶️',
+  '🫑',
+  '🥒',
+  '🥬',
+  '🥦',
+  '🧄',
+  '🧅',
+  '🍄',
+  '🥜',
+  '🌰',
+]
diff --git a/apps/web/src/constants/zIndex.ts b/apps/web/src/constants/zIndex.ts
index 2212e991..4d4df944 100644
--- a/apps/web/src/constants/zIndex.ts
+++ b/apps/web/src/constants/zIndex.ts
@@ -43,20 +43,20 @@ export const Z_INDEX = {
     OVERLAY: 1000,
     PLAYER_AVATAR: 1000, // Multiplayer presence indicators
   },
-} as const;
+} as const
 
 // Helper function to get z-index value
 export function getZIndex(path: string): number {
-  const parts = path.split(".");
-  let value: any = Z_INDEX;
+  const parts = path.split('.')
+  let value: any = Z_INDEX
 
   for (const part of parts) {
-    value = value[part];
+    value = value[part]
     if (value === undefined) {
-      console.warn(`[zIndex] Unknown path: ${path}`);
-      return 0;
+      console.warn(`[zIndex] Unknown path: ${path}`)
+      return 0
     }
   }
 
-  return typeof value === "number" ? value : 0;
+  return typeof value === 'number' ? value : 0
 }
diff --git a/apps/web/src/contexts/FullscreenContext.tsx b/apps/web/src/contexts/FullscreenContext.tsx
index 20178a18..abb9a93d 100644
--- a/apps/web/src/contexts/FullscreenContext.tsx
+++ b/apps/web/src/contexts/FullscreenContext.tsx
@@ -1,6 +1,6 @@
-"use client";
+'use client'
 
-import type React from "react";
+import type React from 'react'
 import {
   createContext,
   type ReactNode,
@@ -9,112 +9,98 @@ import {
   useEffect,
   useRef,
   useState,
-} from "react";
+} from 'react'
 
 interface FullscreenContextType {
-  isFullscreen: boolean;
-  enterFullscreen: () => Promise<void>;
-  exitFullscreen: () => Promise<void>;
-  toggleFullscreen: () => Promise<void>;
-  setFullscreenElement: (element: HTMLElement | null) => void;
-  fullscreenElementRef: React.MutableRefObject<HTMLElement | null>;
+  isFullscreen: boolean
+  enterFullscreen: () => Promise<void>
+  exitFullscreen: () => Promise<void>
+  toggleFullscreen: () => Promise<void>
+  setFullscreenElement: (element: HTMLElement | null) => void
+  fullscreenElementRef: React.MutableRefObject<HTMLElement | null>
 }
 
-const FullscreenContext = createContext<FullscreenContextType | null>(null);
+const FullscreenContext = createContext<FullscreenContextType | null>(null)
 
 export function FullscreenProvider({ children }: { children: ReactNode }) {
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const fullscreenElementRef = useRef<HTMLElement | null>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const fullscreenElementRef = useRef<HTMLElement | null>(null)
 
   useEffect(() => {
     const handleFullscreenChange = () => {
-      setIsFullscreen(!!document.fullscreenElement);
-    };
+      setIsFullscreen(!!document.fullscreenElement)
+    }
 
-    document.addEventListener("fullscreenchange", handleFullscreenChange);
-    document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
-    document.addEventListener("mozfullscreenchange", handleFullscreenChange);
-    document.addEventListener("MSFullscreenChange", handleFullscreenChange);
+    document.addEventListener('fullscreenchange', handleFullscreenChange)
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
+    document.addEventListener('mozfullscreenchange', handleFullscreenChange)
+    document.addEventListener('MSFullscreenChange', handleFullscreenChange)
 
     return () => {
-      document.removeEventListener("fullscreenchange", handleFullscreenChange);
-      document.removeEventListener(
-        "webkitfullscreenchange",
-        handleFullscreenChange,
-      );
-      document.removeEventListener(
-        "mozfullscreenchange",
-        handleFullscreenChange,
-      );
-      document.removeEventListener(
-        "MSFullscreenChange",
-        handleFullscreenChange,
-      );
-    };
-  }, []);
+      document.removeEventListener('fullscreenchange', handleFullscreenChange)
+      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
+      document.removeEventListener('mozfullscreenchange', handleFullscreenChange)
+      document.removeEventListener('MSFullscreenChange', handleFullscreenChange)
+    }
+  }, [])
 
   const setFullscreenElement = useCallback((element: HTMLElement | null) => {
-    console.log("🔧 FullscreenContext: Setting fullscreen element:", element);
-    fullscreenElementRef.current = element;
-  }, []);
+    console.log('🔧 FullscreenContext: Setting fullscreen element:', element)
+    fullscreenElementRef.current = element
+  }, [])
 
   const enterFullscreen = async () => {
     try {
       // Use the registered fullscreen element, fallback to document.documentElement
-      const element = fullscreenElementRef.current || document.documentElement;
+      const element = fullscreenElementRef.current || document.documentElement
+      console.log('🚀 FullscreenContext: Entering fullscreen with element:', element)
       console.log(
-        "🚀 FullscreenContext: Entering fullscreen with element:",
-        element,
-      );
-      console.log(
-        "🚀 FullscreenContext: Current fullscreen element ref:",
-        fullscreenElementRef.current,
-      );
+        '🚀 FullscreenContext: Current fullscreen element ref:',
+        fullscreenElementRef.current
+      )
 
       if (element.requestFullscreen) {
-        await element.requestFullscreen();
-        console.log("✅ FullscreenContext: requestFullscreen() succeeded");
+        await element.requestFullscreen()
+        console.log('✅ FullscreenContext: requestFullscreen() succeeded')
       } else if ((element as any).webkitRequestFullscreen) {
-        await (element as any).webkitRequestFullscreen();
-        console.log(
-          "✅ FullscreenContext: webkitRequestFullscreen() succeeded",
-        );
+        await (element as any).webkitRequestFullscreen()
+        console.log('✅ FullscreenContext: webkitRequestFullscreen() succeeded')
       } else if ((element as any).mozRequestFullScreen) {
-        await (element as any).mozRequestFullScreen();
-        console.log("✅ FullscreenContext: mozRequestFullScreen() succeeded");
+        await (element as any).mozRequestFullScreen()
+        console.log('✅ FullscreenContext: mozRequestFullScreen() succeeded')
       } else if ((element as any).msRequestFullscreen) {
-        await (element as any).msRequestFullscreen();
-        console.log("✅ FullscreenContext: msRequestFullscreen() succeeded");
+        await (element as any).msRequestFullscreen()
+        console.log('✅ FullscreenContext: msRequestFullscreen() succeeded')
       }
     } catch (error) {
-      console.error("❌ FullscreenContext: Failed to enter fullscreen:", error);
-      throw error;
+      console.error('❌ FullscreenContext: Failed to enter fullscreen:', error)
+      throw error
     }
-  };
+  }
 
   const exitFullscreen = async () => {
     try {
       if (document.exitFullscreen) {
-        await document.exitFullscreen();
+        await document.exitFullscreen()
       } else if ((document as any).webkitExitFullscreen) {
-        await (document as any).webkitExitFullscreen();
+        await (document as any).webkitExitFullscreen()
       } else if ((document as any).mozCancelFullScreen) {
-        await (document as any).mozCancelFullScreen();
+        await (document as any).mozCancelFullScreen()
       } else if ((document as any).msExitFullscreen) {
-        await (document as any).msExitFullscreen();
+        await (document as any).msExitFullscreen()
       }
     } catch (error) {
-      console.error("Failed to exit fullscreen:", error);
+      console.error('Failed to exit fullscreen:', error)
     }
-  };
+  }
 
   const toggleFullscreen = async () => {
     if (isFullscreen) {
-      await exitFullscreen();
+      await exitFullscreen()
     } else {
-      await enterFullscreen();
+      await enterFullscreen()
     }
-  };
+  }
 
   return (
     <FullscreenContext.Provider
@@ -129,13 +115,13 @@ export function FullscreenProvider({ children }: { children: ReactNode }) {
     >
       {children}
     </FullscreenContext.Provider>
-  );
+  )
 }
 
 export function useFullscreen(): FullscreenContextType {
-  const context = useContext(FullscreenContext);
+  const context = useContext(FullscreenContext)
   if (!context) {
-    throw new Error("useFullscreen must be used within a FullscreenProvider");
+    throw new Error('useFullscreen must be used within a FullscreenProvider')
   }
-  return context;
+  return context
 }
diff --git a/apps/web/src/contexts/GameModeContext.tsx b/apps/web/src/contexts/GameModeContext.tsx
index 76e5d0b6..71fa497a 100644
--- a/apps/web/src/contexts/GameModeContext.tsx
+++ b/apps/web/src/contexts/GameModeContext.tsx
@@ -1,64 +1,57 @@
-"use client";
+'use client'
 
-import {
-  createContext,
-  type ReactNode,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import type { Player as DBPlayer } from "@/db/schema/players";
-import { useRoomData } from "@/hooks/useRoomData";
+import { createContext, type ReactNode, useContext, useEffect, useMemo, useState } from 'react'
+import type { Player as DBPlayer } from '@/db/schema/players'
+import { useRoomData } from '@/hooks/useRoomData'
 import {
   useCreatePlayer,
   useDeletePlayer,
   useUpdatePlayer,
   useUserPlayers,
-} from "@/hooks/useUserPlayers";
-import { useViewerId } from "@/hooks/useViewerId";
-import { getNextPlayerColor } from "../types/player";
-import { generateUniquePlayerName } from "../utils/playerNames";
+} from '@/hooks/useUserPlayers'
+import { useViewerId } from '@/hooks/useViewerId'
+import { getNextPlayerColor } from '../types/player'
+import { generateUniquePlayerName } from '../utils/playerNames'
 
 // Client-side Player type (compatible with old type)
 export interface Player {
-  id: string;
-  name: string;
-  emoji: string;
-  color: string;
-  createdAt: Date | number;
-  isActive?: boolean;
-  isLocal?: boolean;
+  id: string
+  name: string
+  emoji: string
+  color: string
+  createdAt: Date | number
+  isActive?: boolean
+  isLocal?: boolean
 }
 
-export type GameMode = "single" | "battle" | "tournament";
+export type GameMode = 'single' | 'battle' | 'tournament'
 
 export interface GameModeContextType {
-  gameMode: GameMode; // Computed from activePlayerCount
-  players: Map<string, Player>;
-  activePlayers: Set<string>;
-  activePlayerCount: number;
-  addPlayer: (player?: Partial<Player>) => void;
-  updatePlayer: (id: string, updates: Partial<Player>) => void;
-  removePlayer: (id: string) => void;
-  setActive: (id: string, active: boolean) => void;
-  getActivePlayers: () => Player[];
-  getPlayer: (id: string) => Player | undefined;
-  getAllPlayers: () => Player[];
-  resetPlayers: () => void;
-  isLoading: boolean;
+  gameMode: GameMode // Computed from activePlayerCount
+  players: Map<string, Player>
+  activePlayers: Set<string>
+  activePlayerCount: number
+  addPlayer: (player?: Partial<Player>) => void
+  updatePlayer: (id: string, updates: Partial<Player>) => void
+  removePlayer: (id: string) => void
+  setActive: (id: string, active: boolean) => void
+  getActivePlayers: () => Player[]
+  getPlayer: (id: string) => Player | undefined
+  getAllPlayers: () => Player[]
+  resetPlayers: () => void
+  isLoading: boolean
 }
 
-const GameModeContext = createContext<GameModeContextType | null>(null);
+const GameModeContext = createContext<GameModeContextType | null>(null)
 
 // Default players to create if none exist
 // Names are generated randomly on first initialization
 const DEFAULT_PLAYER_CONFIGS = [
-  { emoji: "😀", color: "#3b82f6" },
-  { emoji: "😎", color: "#8b5cf6" },
-  { emoji: "🤠", color: "#10b981" },
-  { emoji: "🚀", color: "#f59e0b" },
-];
+  { emoji: '😀', color: '#3b82f6' },
+  { emoji: '😎', color: '#8b5cf6' },
+  { emoji: '🤠', color: '#10b981' },
+  { emoji: '🚀', color: '#f59e0b' },
+]
 
 // Convert DB player to client Player type
 function toClientPlayer(dbPlayer: DBPlayer): Player {
@@ -69,94 +62,92 @@ function toClientPlayer(dbPlayer: DBPlayer): Player {
     color: dbPlayer.color,
     createdAt: dbPlayer.createdAt,
     isActive: dbPlayer.isActive,
-  };
+  }
 }
 
 export function GameModeProvider({ children }: { children: ReactNode }) {
-  const { data: dbPlayers = [], isLoading } = useUserPlayers();
-  const { mutate: createPlayer } = useCreatePlayer();
-  const { mutate: updatePlayerMutation } = useUpdatePlayer();
-  const { mutate: deletePlayer } = useDeletePlayer();
-  const { roomData, notifyRoomOfPlayerUpdate } = useRoomData();
-  const { data: viewerId } = useViewerId();
+  const { data: dbPlayers = [], isLoading } = useUserPlayers()
+  const { mutate: createPlayer } = useCreatePlayer()
+  const { mutate: updatePlayerMutation } = useUpdatePlayer()
+  const { mutate: deletePlayer } = useDeletePlayer()
+  const { roomData, notifyRoomOfPlayerUpdate } = useRoomData()
+  const { data: viewerId } = useViewerId()
 
-  const [isInitialized, setIsInitialized] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false)
 
   // Convert DB players to Map (local players)
   const localPlayers = useMemo(() => {
-    const map = new Map<string, Player>();
+    const map = new Map<string, Player>()
     dbPlayers.forEach((dbPlayer) => {
       map.set(dbPlayer.id, {
         ...toClientPlayer(dbPlayer),
         isLocal: true,
-      });
-    });
-    return map;
-  }, [dbPlayers]);
+      })
+    })
+    return map
+  }, [dbPlayers])
 
   // When in a room, merge all players from all room members
   const players = useMemo(() => {
-    const map = new Map<string, Player>(localPlayers);
+    const map = new Map<string, Player>(localPlayers)
 
     if (roomData?.memberPlayers) {
       // Add players from other room members (marked as remote)
-      Object.entries(roomData.memberPlayers).forEach(
-        ([userId, memberPlayers]) => {
-          // Skip the current user's players (already in localPlayers)
-          if (userId === viewerId) return;
+      Object.entries(roomData.memberPlayers).forEach(([userId, memberPlayers]) => {
+        // Skip the current user's players (already in localPlayers)
+        if (userId === viewerId) return
 
-          memberPlayers.forEach((roomPlayer) => {
-            map.set(roomPlayer.id, {
-              id: roomPlayer.id,
-              name: roomPlayer.name,
-              emoji: roomPlayer.emoji,
-              color: roomPlayer.color,
-              createdAt: Date.now(),
-              isActive: true, // Players in memberPlayers are active
-              isLocal: false, // Remote player
-            });
-          });
-        },
-      );
+        memberPlayers.forEach((roomPlayer) => {
+          map.set(roomPlayer.id, {
+            id: roomPlayer.id,
+            name: roomPlayer.name,
+            emoji: roomPlayer.emoji,
+            color: roomPlayer.color,
+            createdAt: Date.now(),
+            isActive: true, // Players in memberPlayers are active
+            isLocal: false, // Remote player
+          })
+        })
+      })
     }
 
-    return map;
-  }, [localPlayers, roomData, viewerId]);
+    return map
+  }, [localPlayers, roomData, viewerId])
 
   // Track active players (local + room members when in a room)
   const activePlayers = useMemo(() => {
-    const set = new Set<string>();
+    const set = new Set<string>()
 
     if (roomData?.memberPlayers) {
       // In room mode: all players from all members are active
       Object.values(roomData.memberPlayers).forEach((memberPlayers) => {
         memberPlayers.forEach((player) => {
-          set.add(player.id);
-        });
-      });
+          set.add(player.id)
+        })
+      })
     } else {
       // Solo mode: only local active players
       dbPlayers.forEach((player) => {
         if (player.isActive) {
-          set.add(player.id);
+          set.add(player.id)
         }
-      });
+      })
     }
 
-    return set;
-  }, [dbPlayers, roomData]);
+    return set
+  }, [dbPlayers, roomData])
 
   // Initialize with default players if none exist
   useEffect(() => {
     if (!isLoading && !isInitialized) {
       if (dbPlayers.length === 0) {
         // Generate unique names for default players, themed by their emoji
-        const existingNames: string[] = [];
+        const existingNames: string[] = []
         const generatedNames = DEFAULT_PLAYER_CONFIGS.map((config) => {
-          const name = generateUniquePlayerName(existingNames, config.emoji);
-          existingNames.push(name);
-          return name;
-        });
+          const name = generateUniquePlayerName(existingNames, config.emoji)
+          existingNames.push(name)
+          return name
+        })
 
         // Create default players with generated names
         DEFAULT_PLAYER_CONFIGS.forEach((config, index) => {
@@ -165,44 +156,41 @@ export function GameModeProvider({ children }: { children: ReactNode }) {
             emoji: config.emoji,
             color: config.color,
             isActive: index === 0, // First player active by default
-          });
-        });
-        console.log(
-          "✅ Created default players via API with auto-generated names:",
-          generatedNames,
-        );
+          })
+        })
+        console.log('✅ Created default players via API with auto-generated names:', generatedNames)
       } else {
-        console.log("✅ Loaded players from API", {
+        console.log('✅ Loaded players from API', {
           playerCount: dbPlayers.length,
           activeCount: dbPlayers.filter((p) => p.isActive).length,
-        });
+        })
       }
-      setIsInitialized(true);
+      setIsInitialized(true)
     }
-  }, [dbPlayers, isLoading, isInitialized, createPlayer]);
+  }, [dbPlayers, isLoading, isInitialized, createPlayer])
 
   const addPlayer = (playerData?: Partial<Player>) => {
-    const playerList = Array.from(players.values());
-    const existingNames = playerList.map((p) => p.name);
-    const emoji = playerData?.emoji ?? "🎮";
+    const playerList = Array.from(players.values())
+    const existingNames = playerList.map((p) => p.name)
+    const emoji = playerData?.emoji ?? '🎮'
 
     const newPlayer = {
       name: playerData?.name ?? generateUniquePlayerName(existingNames, emoji),
       emoji,
       color: playerData?.color ?? getNextPlayerColor(playerList),
       isActive: playerData?.isActive ?? false,
-    };
+    }
 
     createPlayer(newPlayer, {
       onSuccess: () => {
         // Notify room members if in a room
-        notifyRoomOfPlayerUpdate();
+        notifyRoomOfPlayerUpdate()
       },
-    });
-  };
+    })
+  }
 
   const updatePlayer = (id: string, updates: Partial<Player>) => {
-    const player = players.get(id);
+    const player = players.get(id)
     // Only allow updating local players
     if (player?.isLocal) {
       updatePlayerMutation(
@@ -210,32 +198,32 @@ export function GameModeProvider({ children }: { children: ReactNode }) {
         {
           onSuccess: () => {
             // Notify room members if in a room
-            notifyRoomOfPlayerUpdate();
+            notifyRoomOfPlayerUpdate()
           },
-        },
-      );
+        }
+      )
     } else {
-      console.warn("[GameModeContext] Cannot update remote player:", id);
+      console.warn('[GameModeContext] Cannot update remote player:', id)
     }
-  };
+  }
 
   const removePlayer = (id: string) => {
-    const player = players.get(id);
+    const player = players.get(id)
     // Only allow removing local players
     if (player?.isLocal) {
       deletePlayer(id, {
         onSuccess: () => {
           // Notify room members if in a room
-          notifyRoomOfPlayerUpdate();
+          notifyRoomOfPlayerUpdate()
         },
-      });
+      })
     } else {
-      console.warn("[GameModeContext] Cannot remove remote player:", id);
+      console.warn('[GameModeContext] Cannot remove remote player:', id)
     }
-  };
+  }
 
   const setActive = (id: string, active: boolean) => {
-    const player = players.get(id);
+    const player = players.get(id)
     // Only allow changing active status of local players
     if (player?.isLocal) {
       updatePlayerMutation(
@@ -243,45 +231,42 @@ export function GameModeProvider({ children }: { children: ReactNode }) {
         {
           onSuccess: () => {
             // Notify room members if in a room
-            notifyRoomOfPlayerUpdate();
+            notifyRoomOfPlayerUpdate()
           },
-        },
-      );
+        }
+      )
     } else {
-      console.warn(
-        "[GameModeContext] Cannot change active status of remote player:",
-        id,
-      );
+      console.warn('[GameModeContext] Cannot change active status of remote player:', id)
     }
-  };
+  }
 
   const getActivePlayers = (): Player[] => {
     return Array.from(activePlayers)
       .map((id) => players.get(id))
-      .filter((p): p is Player => p !== undefined);
-  };
+      .filter((p): p is Player => p !== undefined)
+  }
 
   const getPlayer = (id: string): Player | undefined => {
-    return players.get(id);
-  };
+    return players.get(id)
+  }
 
   const getAllPlayers = (): Player[] => {
-    return Array.from(players.values());
-  };
+    return Array.from(players.values())
+  }
 
   const resetPlayers = () => {
     // Delete all existing players
     dbPlayers.forEach((player) => {
-      deletePlayer(player.id);
-    });
+      deletePlayer(player.id)
+    })
 
     // Generate unique names for default players, themed by their emoji
-    const existingNames: string[] = [];
+    const existingNames: string[] = []
     const generatedNames = DEFAULT_PLAYER_CONFIGS.map((config) => {
-      const name = generateUniquePlayerName(existingNames, config.emoji);
-      existingNames.push(name);
-      return name;
-    });
+      const name = generateUniquePlayerName(existingNames, config.emoji)
+      existingNames.push(name)
+      return name
+    })
 
     // Create default players with generated names
     DEFAULT_PLAYER_CONFIGS.forEach((config, index) => {
@@ -290,26 +275,26 @@ export function GameModeProvider({ children }: { children: ReactNode }) {
         emoji: config.emoji,
         color: config.color,
         isActive: index === 0,
-      });
-    });
+      })
+    })
 
     // Notify room members after reset (slight delay to ensure mutations complete)
     setTimeout(() => {
-      notifyRoomOfPlayerUpdate();
-    }, 100);
-  };
+      notifyRoomOfPlayerUpdate()
+    }, 100)
+  }
 
-  const activePlayerCount = activePlayers.size;
+  const activePlayerCount = activePlayers.size
 
   // Compute game mode from active player count
   const gameMode: GameMode =
     activePlayerCount === 1
-      ? "single"
+      ? 'single'
       : activePlayerCount === 2
-        ? "battle"
+        ? 'battle'
         : activePlayerCount >= 3
-          ? "tournament"
-          : "single";
+          ? 'tournament'
+          : 'single'
 
   const contextValue: GameModeContextType = {
     gameMode,
@@ -325,19 +310,15 @@ export function GameModeProvider({ children }: { children: ReactNode }) {
     getAllPlayers,
     resetPlayers,
     isLoading,
-  };
+  }
 
-  return (
-    <GameModeContext.Provider value={contextValue}>
-      {children}
-    </GameModeContext.Provider>
-  );
+  return <GameModeContext.Provider value={contextValue}>{children}</GameModeContext.Provider>
 }
 
 export function useGameMode(): GameModeContextType {
-  const context = useContext(GameModeContext);
+  const context = useContext(GameModeContext)
   if (!context) {
-    throw new Error("useGameMode must be used within a GameModeProvider");
+    throw new Error('useGameMode must be used within a GameModeProvider')
   }
-  return context;
+  return context
 }
diff --git a/apps/web/src/contexts/GameThemeContext.tsx b/apps/web/src/contexts/GameThemeContext.tsx
index b13c9ee9..b688af8d 100644
--- a/apps/web/src/contexts/GameThemeContext.tsx
+++ b/apps/web/src/contexts/GameThemeContext.tsx
@@ -1,47 +1,39 @@
-"use client";
+'use client'
 
-import {
-  createContext,
-  type ReactNode,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { createContext, type ReactNode, useContext, useEffect, useState } from 'react'
 
 export interface GameTheme {
-  gameName: string;
-  backgroundColor: string;
+  gameName: string
+  backgroundColor: string
 }
 
 interface GameThemeContextType {
-  theme: GameTheme | null;
-  setTheme: (theme: GameTheme | null) => void;
-  isHydrated: boolean;
+  theme: GameTheme | null
+  setTheme: (theme: GameTheme | null) => void
+  isHydrated: boolean
 }
 
-const GameThemeContext = createContext<GameThemeContextType | undefined>(
-  undefined,
-);
+const GameThemeContext = createContext<GameThemeContextType | undefined>(undefined)
 
 export function GameThemeProvider({ children }: { children: ReactNode }) {
-  const [theme, setTheme] = useState<GameTheme | null>(null);
-  const [isHydrated, setIsHydrated] = useState(false);
+  const [theme, setTheme] = useState<GameTheme | null>(null)
+  const [isHydrated, setIsHydrated] = useState(false)
 
   useEffect(() => {
-    setIsHydrated(true);
-  }, []);
+    setIsHydrated(true)
+  }, [])
 
   return (
     <GameThemeContext.Provider value={{ theme, setTheme, isHydrated }}>
       {children}
     </GameThemeContext.Provider>
-  );
+  )
 }
 
 export function useGameTheme() {
-  const context = useContext(GameThemeContext);
+  const context = useContext(GameThemeContext)
   if (context === undefined) {
-    throw new Error("useGameTheme must be used within a GameThemeProvider");
+    throw new Error('useGameTheme must be used within a GameThemeProvider')
   }
-  return context;
+  return context
 }
diff --git a/apps/web/src/contexts/HomeHeroContext.tsx b/apps/web/src/contexts/HomeHeroContext.tsx
index 6061668b..234701a3 100644
--- a/apps/web/src/contexts/HomeHeroContext.tsx
+++ b/apps/web/src/contexts/HomeHeroContext.tsx
@@ -1,92 +1,85 @@
-"use client";
+'use client'
 
-import type React from "react";
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import type { Subtitle } from "../data/abaciOneSubtitles";
-import { subtitles } from "../data/abaciOneSubtitles";
+import type React from 'react'
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import type { Subtitle } from '../data/abaciOneSubtitles'
+import { subtitles } from '../data/abaciOneSubtitles'
 
 interface HomeHeroContextValue {
-  subtitle: Subtitle;
-  abacusValue: number;
-  setAbacusValue: (value: number) => void;
-  isHeroVisible: boolean;
-  setIsHeroVisible: (visible: boolean) => void;
-  isAbacusLoaded: boolean;
-  isSubtitleLoaded: boolean;
+  subtitle: Subtitle
+  abacusValue: number
+  setAbacusValue: (value: number) => void
+  isHeroVisible: boolean
+  setIsHeroVisible: (visible: boolean) => void
+  isAbacusLoaded: boolean
+  isSubtitleLoaded: boolean
 }
 
-const HomeHeroContext = createContext<HomeHeroContextValue | null>(null);
+const HomeHeroContext = createContext<HomeHeroContextValue | null>(null)
 
-export { HomeHeroContext };
+export { HomeHeroContext }
 
 export function HomeHeroProvider({ children }: { children: React.ReactNode }) {
   // Use first subtitle for SSR, then select random one on client mount
-  const [subtitle, setSubtitle] = useState<Subtitle>(subtitles[0]);
-  const [isSubtitleLoaded, setIsSubtitleLoaded] = useState(false);
+  const [subtitle, setSubtitle] = useState<Subtitle>(subtitles[0])
+  const [isSubtitleLoaded, setIsSubtitleLoaded] = useState(false)
 
   // Select random subtitle only on client side, persist per-session
   useEffect(() => {
     // Check if we have a stored subtitle index for this session
-    const storedIndex = sessionStorage.getItem("heroSubtitleIndex");
+    const storedIndex = sessionStorage.getItem('heroSubtitleIndex')
 
     if (storedIndex !== null) {
       // Use the stored subtitle index
-      const index = parseInt(storedIndex, 10);
+      const index = parseInt(storedIndex, 10)
       if (!Number.isNaN(index) && index >= 0 && index < subtitles.length) {
-        setSubtitle(subtitles[index]);
-        setIsSubtitleLoaded(true);
-        return;
+        setSubtitle(subtitles[index])
+        setIsSubtitleLoaded(true)
+        return
       }
     }
 
     // Generate a new random index and store it
-    const randomIndex = Math.floor(Math.random() * subtitles.length);
-    sessionStorage.setItem("heroSubtitleIndex", randomIndex.toString());
-    setSubtitle(subtitles[randomIndex]);
-    setIsSubtitleLoaded(true);
-  }, []);
+    const randomIndex = Math.floor(Math.random() * subtitles.length)
+    sessionStorage.setItem('heroSubtitleIndex', randomIndex.toString())
+    setSubtitle(subtitles[randomIndex])
+    setIsSubtitleLoaded(true)
+  }, [])
 
   // Shared abacus value - always start at 0 for SSR/hydration consistency
-  const [abacusValue, setAbacusValue] = useState(0);
-  const [isAbacusLoaded, setIsAbacusLoaded] = useState(false);
-  const isLoadingFromStorage = useRef(false);
+  const [abacusValue, setAbacusValue] = useState(0)
+  const [isAbacusLoaded, setIsAbacusLoaded] = useState(false)
+  const isLoadingFromStorage = useRef(false)
 
   // Load from sessionStorage after mount (client-only, no hydration mismatch)
   useEffect(() => {
-    isLoadingFromStorage.current = true; // Block saves during load
+    isLoadingFromStorage.current = true // Block saves during load
 
-    const saved = sessionStorage.getItem("heroAbacusValue");
+    const saved = sessionStorage.getItem('heroAbacusValue')
 
     if (saved) {
-      const parsedValue = parseInt(saved, 10);
+      const parsedValue = parseInt(saved, 10)
       if (!Number.isNaN(parsedValue)) {
-        setAbacusValue(parsedValue);
+        setAbacusValue(parsedValue)
       }
     }
 
     // Use setTimeout to ensure the value has been set before we allow saves
     setTimeout(() => {
-      isLoadingFromStorage.current = false;
-      setIsAbacusLoaded(true);
-    }, 0);
-  }, []);
+      isLoadingFromStorage.current = false
+      setIsAbacusLoaded(true)
+    }, 0)
+  }, [])
 
   // Persist value to sessionStorage when it changes (but skip during load)
   useEffect(() => {
     if (!isLoadingFromStorage.current) {
-      sessionStorage.setItem("heroAbacusValue", abacusValue.toString());
+      sessionStorage.setItem('heroAbacusValue', abacusValue.toString())
     }
-  }, [abacusValue]);
+  }, [abacusValue])
 
   // Track hero visibility for nav branding
-  const [isHeroVisible, setIsHeroVisible] = useState(true);
+  const [isHeroVisible, setIsHeroVisible] = useState(true)
 
   const value = useMemo(
     () => ({
@@ -98,20 +91,16 @@ export function HomeHeroProvider({ children }: { children: React.ReactNode }) {
       isAbacusLoaded,
       isSubtitleLoaded,
     }),
-    [subtitle, abacusValue, isHeroVisible, isAbacusLoaded, isSubtitleLoaded],
-  );
+    [subtitle, abacusValue, isHeroVisible, isAbacusLoaded, isSubtitleLoaded]
+  )
 
-  return (
-    <HomeHeroContext.Provider value={value}>
-      {children}
-    </HomeHeroContext.Provider>
-  );
+  return <HomeHeroContext.Provider value={value}>{children}</HomeHeroContext.Provider>
 }
 
 export function useHomeHero() {
-  const context = useContext(HomeHeroContext);
+  const context = useContext(HomeHeroContext)
   if (!context) {
-    throw new Error("useHomeHero must be used within HomeHeroProvider");
+    throw new Error('useHomeHero must be used within HomeHeroProvider')
   }
-  return context;
+  return context
 }
diff --git a/apps/web/src/contexts/LocaleContext.tsx b/apps/web/src/contexts/LocaleContext.tsx
index c8e6d414..4beaa1dc 100644
--- a/apps/web/src/contexts/LocaleContext.tsx
+++ b/apps/web/src/contexts/LocaleContext.tsx
@@ -1,55 +1,50 @@
-"use client";
+'use client'
 
-import { createContext, useContext, useState, type ReactNode } from "react";
-import { getMessages, type Locale } from "@/i18n/messages";
-import { LOCALE_COOKIE_NAME } from "@/i18n/routing";
+import { createContext, useContext, useState, type ReactNode } from 'react'
+import { getMessages, type Locale } from '@/i18n/messages'
+import { LOCALE_COOKIE_NAME } from '@/i18n/routing'
 
 interface LocaleContextValue {
-  locale: Locale;
-  messages: Record<string, any>;
-  changeLocale: (newLocale: Locale) => Promise<void>;
+  locale: Locale
+  messages: Record<string, any>
+  changeLocale: (newLocale: Locale) => Promise<void>
 }
 
-const LocaleContext = createContext<LocaleContextValue | undefined>(undefined);
+const LocaleContext = createContext<LocaleContextValue | undefined>(undefined)
 
 interface LocaleProviderProps {
-  children: ReactNode;
-  initialLocale: Locale;
-  initialMessages: Record<string, any>;
+  children: ReactNode
+  initialLocale: Locale
+  initialMessages: Record<string, any>
 }
 
-export function LocaleProvider({
-  children,
-  initialLocale,
-  initialMessages,
-}: LocaleProviderProps) {
-  const [locale, setLocale] = useState<Locale>(initialLocale);
-  const [messages, setMessages] =
-    useState<Record<string, any>>(initialMessages);
+export function LocaleProvider({ children, initialLocale, initialMessages }: LocaleProviderProps) {
+  const [locale, setLocale] = useState<Locale>(initialLocale)
+  const [messages, setMessages] = useState<Record<string, any>>(initialMessages)
 
   const changeLocale = async (newLocale: Locale) => {
     // Update cookie
-    document.cookie = `${LOCALE_COOKIE_NAME}=${newLocale}; path=/; max-age=${60 * 60 * 24 * 365}`;
+    document.cookie = `${LOCALE_COOKIE_NAME}=${newLocale}; path=/; max-age=${60 * 60 * 24 * 365}`
 
     // Load new messages
-    const newMessages = await getMessages(newLocale);
+    const newMessages = await getMessages(newLocale)
 
     // Update state
-    setLocale(newLocale);
-    setMessages(newMessages);
-  };
+    setLocale(newLocale)
+    setMessages(newMessages)
+  }
 
   return (
     <LocaleContext.Provider value={{ locale, messages, changeLocale }}>
       {children}
     </LocaleContext.Provider>
-  );
+  )
 }
 
 export function useLocaleContext() {
-  const context = useContext(LocaleContext);
+  const context = useContext(LocaleContext)
   if (!context) {
-    throw new Error("useLocaleContext must be used within LocaleProvider");
+    throw new Error('useLocaleContext must be used within LocaleProvider')
   }
-  return context;
+  return context
 }
diff --git a/apps/web/src/contexts/MyAbacusContext.tsx b/apps/web/src/contexts/MyAbacusContext.tsx
index 3ad3acb4..757e68e9 100644
--- a/apps/web/src/contexts/MyAbacusContext.tsx
+++ b/apps/web/src/contexts/MyAbacusContext.tsx
@@ -1,37 +1,35 @@
-"use client";
+'use client'
 
-import type React from "react";
-import { createContext, useContext, useState, useCallback } from "react";
+import type React from 'react'
+import { createContext, useContext, useState, useCallback } from 'react'
 
 interface MyAbacusContextValue {
-  isOpen: boolean;
-  open: () => void;
-  close: () => void;
-  toggle: () => void;
+  isOpen: boolean
+  open: () => void
+  close: () => void
+  toggle: () => void
 }
 
-const MyAbacusContext = createContext<MyAbacusContextValue | undefined>(
-  undefined,
-);
+const MyAbacusContext = createContext<MyAbacusContextValue | undefined>(undefined)
 
 export function MyAbacusProvider({ children }: { children: React.ReactNode }) {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false)
 
-  const open = useCallback(() => setIsOpen(true), []);
-  const close = useCallback(() => setIsOpen(false), []);
-  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+  const open = useCallback(() => setIsOpen(true), [])
+  const close = useCallback(() => setIsOpen(false), [])
+  const toggle = useCallback(() => setIsOpen((prev) => !prev), [])
 
   return (
     <MyAbacusContext.Provider value={{ isOpen, open, close, toggle }}>
       {children}
     </MyAbacusContext.Provider>
-  );
+  )
 }
 
 export function useMyAbacus() {
-  const context = useContext(MyAbacusContext);
+  const context = useContext(MyAbacusContext)
   if (!context) {
-    throw new Error("useMyAbacus must be used within MyAbacusProvider");
+    throw new Error('useMyAbacus must be used within MyAbacusProvider')
   }
-  return context;
+  return context
 }
diff --git a/apps/web/src/contexts/ThemeContext.tsx b/apps/web/src/contexts/ThemeContext.tsx
index e4988407..76e744ab 100644
--- a/apps/web/src/contexts/ThemeContext.tsx
+++ b/apps/web/src/contexts/ThemeContext.tsx
@@ -1,79 +1,79 @@
-"use client";
+'use client'
 
-import type React from "react";
-import { createContext, useContext, useEffect, useState } from "react";
+import type React from 'react'
+import { createContext, useContext, useEffect, useState } from 'react'
 
-type Theme = "light" | "dark" | "system";
-type ResolvedTheme = "light" | "dark";
+type Theme = 'light' | 'dark' | 'system'
+type ResolvedTheme = 'light' | 'dark'
 
 interface ThemeContextType {
-  theme: Theme;
-  resolvedTheme: ResolvedTheme;
-  setTheme: (theme: Theme) => void;
+  theme: Theme
+  resolvedTheme: ResolvedTheme
+  setTheme: (theme: Theme) => void
 }
 
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setThemeState] = useState<Theme>("system");
-  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>("dark");
+  const [theme, setThemeState] = useState<Theme>('system')
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>('dark')
 
   // Detect system preference
   useEffect(() => {
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
     const handleChange = () => {
-      if (theme === "system") {
-        setResolvedTheme(mediaQuery.matches ? "dark" : "light");
+      if (theme === 'system') {
+        setResolvedTheme(mediaQuery.matches ? 'dark' : 'light')
       }
-    };
+    }
 
-    handleChange();
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [theme]);
+    handleChange()
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [theme])
 
   // Load saved theme preference
   useEffect(() => {
-    const saved = localStorage.getItem("theme") as Theme | null;
+    const saved = localStorage.getItem('theme') as Theme | null
     if (saved) {
-      setThemeState(saved);
+      setThemeState(saved)
     }
-  }, []);
+  }, [])
 
   // Update resolved theme when theme changes
   useEffect(() => {
-    if (theme === "system") {
-      const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      setResolvedTheme(isDark ? "dark" : "light");
+    if (theme === 'system') {
+      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+      setResolvedTheme(isDark ? 'dark' : 'light')
     } else {
-      setResolvedTheme(theme);
+      setResolvedTheme(theme)
     }
-  }, [theme]);
+  }, [theme])
 
   // Apply theme to document
   useEffect(() => {
-    const root = document.documentElement;
-    root.setAttribute("data-theme", resolvedTheme);
-    root.classList.remove("light", "dark");
-    root.classList.add(resolvedTheme);
-  }, [resolvedTheme]);
+    const root = document.documentElement
+    root.setAttribute('data-theme', resolvedTheme)
+    root.classList.remove('light', 'dark')
+    root.classList.add(resolvedTheme)
+  }, [resolvedTheme])
 
   const setTheme = (newTheme: Theme) => {
-    setThemeState(newTheme);
-    localStorage.setItem("theme", newTheme);
-  };
+    setThemeState(newTheme)
+    localStorage.setItem('theme', newTheme)
+  }
 
   return (
     <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
       {children}
     </ThemeContext.Provider>
-  );
+  )
 }
 
 export function useTheme() {
-  const context = useContext(ThemeContext);
+  const context = useContext(ThemeContext)
   if (context === undefined) {
-    throw new Error("useTheme must be used within a ThemeProvider");
+    throw new Error('useTheme must be used within a ThemeProvider')
   }
-  return context;
+  return context
 }
diff --git a/apps/web/src/contexts/UserProfileContext.tsx b/apps/web/src/contexts/UserProfileContext.tsx
index da35c5cf..e54f95d0 100644
--- a/apps/web/src/contexts/UserProfileContext.tsx
+++ b/apps/web/src/contexts/UserProfileContext.tsx
@@ -1,23 +1,23 @@
-"use client";
+'use client'
 
-import { createContext, type ReactNode, useContext } from "react";
-import type { UserStats } from "@/db/schema/user-stats";
-import { useUpdateUserStats, useUserStats } from "@/hooks/useUserStats";
+import { createContext, type ReactNode, useContext } from 'react'
+import type { UserStats } from '@/db/schema/user-stats'
+import { useUpdateUserStats, useUserStats } from '@/hooks/useUserStats'
 
 // Client-side stats type (compatible with old UserStatsProfile)
 export interface UserStatsProfile {
-  gamesPlayed: number;
-  totalWins: number;
-  favoriteGameType: "abacus-numeral" | "complement-pairs" | null;
-  bestTime: number | null;
-  highestAccuracy: number;
+  gamesPlayed: number
+  totalWins: number
+  favoriteGameType: 'abacus-numeral' | 'complement-pairs' | null
+  bestTime: number | null
+  highestAccuracy: number
 }
 
 export interface UserProfileContextType {
-  profile: UserStatsProfile;
-  updateGameStats: (stats: Partial<UserStatsProfile>) => void;
-  resetProfile: () => void;
-  isLoading: boolean;
+  profile: UserStatsProfile
+  updateGameStats: (stats: Partial<UserStatsProfile>) => void
+  resetProfile: () => void
+  isLoading: boolean
 }
 
 const defaultProfile: UserStatsProfile = {
@@ -26,13 +26,13 @@ const defaultProfile: UserStatsProfile = {
   favoriteGameType: null,
   bestTime: null,
   highestAccuracy: 0,
-};
+}
 
-const UserProfileContext = createContext<UserProfileContextType | null>(null);
+const UserProfileContext = createContext<UserProfileContextType | null>(null)
 
 // Convert DB stats to client profile type
 function toClientProfile(dbStats: UserStats | undefined): UserStatsProfile {
-  if (!dbStats) return defaultProfile;
+  if (!dbStats) return defaultProfile
 
   return {
     gamesPlayed: dbStats.gamesPlayed,
@@ -40,41 +40,37 @@ function toClientProfile(dbStats: UserStats | undefined): UserStatsProfile {
     favoriteGameType: dbStats.favoriteGameType,
     bestTime: dbStats.bestTime,
     highestAccuracy: dbStats.highestAccuracy,
-  };
+  }
 }
 
 export function UserProfileProvider({ children }: { children: ReactNode }) {
-  const { data: dbStats, isLoading } = useUserStats();
-  const { mutate: updateStats } = useUpdateUserStats();
+  const { data: dbStats, isLoading } = useUserStats()
+  const { mutate: updateStats } = useUpdateUserStats()
 
-  const profile = toClientProfile(dbStats);
+  const profile = toClientProfile(dbStats)
 
   const updateGameStats = (stats: Partial<UserStatsProfile>) => {
-    updateStats(stats);
-  };
+    updateStats(stats)
+  }
 
   const resetProfile = () => {
-    updateStats(defaultProfile);
-  };
+    updateStats(defaultProfile)
+  }
 
   const contextValue: UserProfileContextType = {
     profile,
     updateGameStats,
     resetProfile,
     isLoading,
-  };
+  }
 
-  return (
-    <UserProfileContext.Provider value={contextValue}>
-      {children}
-    </UserProfileContext.Provider>
-  );
+  return <UserProfileContext.Provider value={contextValue}>{children}</UserProfileContext.Provider>
 }
 
 export function useUserProfile(): UserProfileContextType {
-  const context = useContext(UserProfileContext);
+  const context = useContext(UserProfileContext)
   if (!context) {
-    throw new Error("useUserProfile must be used within a UserProfileProvider");
+    throw new Error('useUserProfile must be used within a UserProfileProvider')
   }
-  return context;
+  return context
 }
diff --git a/apps/web/src/contexts/ViewportContext.tsx b/apps/web/src/contexts/ViewportContext.tsx
index f82df38a..b137d459 100644
--- a/apps/web/src/contexts/ViewportContext.tsx
+++ b/apps/web/src/contexts/ViewportContext.tsx
@@ -1,64 +1,58 @@
-"use client";
+'use client'
 
-import {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  type ReactNode,
-} from "react";
+import { createContext, useContext, useState, useEffect, type ReactNode } from 'react'
 
 /**
  * Viewport dimensions
  */
 export interface ViewportDimensions {
-  width: number;
-  height: number;
+  width: number
+  height: number
 }
 
 /**
  * Viewport context value
  */
 interface ViewportContextValue {
-  width: number;
-  height: number;
+  width: number
+  height: number
 }
 
-const ViewportContext = createContext<ViewportContextValue | null>(null);
+const ViewportContext = createContext<ViewportContextValue | null>(null)
 
 /**
  * Hook to get viewport dimensions
  * Returns mock dimensions in preview mode, actual window dimensions otherwise
  */
 export function useViewport(): ViewportDimensions {
-  const context = useContext(ViewportContext);
+  const context = useContext(ViewportContext)
 
   // If context is provided (preview mode or custom viewport), use it
   if (context) {
-    return context;
+    return context
   }
 
   // Otherwise, use actual window dimensions (hook will update on resize)
   const [dimensions, setDimensions] = useState<ViewportDimensions>({
-    width: typeof window !== "undefined" ? window.innerWidth : 1440,
-    height: typeof window !== "undefined" ? window.innerHeight : 900,
-  });
+    width: typeof window !== 'undefined' ? window.innerWidth : 1440,
+    height: typeof window !== 'undefined' ? window.innerHeight : 900,
+  })
 
   useEffect(() => {
     const handleResize = () => {
       setDimensions({
         width: window.innerWidth,
         height: window.innerHeight,
-      });
-    };
+      })
+    }
 
-    window.addEventListener("resize", handleResize);
-    handleResize(); // Set initial value
+    window.addEventListener('resize', handleResize)
+    handleResize() // Set initial value
 
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
 
-  return dimensions;
+  return dimensions
 }
 
 /**
@@ -70,13 +64,9 @@ export function ViewportProvider({
   width,
   height,
 }: {
-  children: ReactNode;
-  width: number;
-  height: number;
+  children: ReactNode
+  width: number
+  height: number
 }) {
-  return (
-    <ViewportContext.Provider value={{ width, height }}>
-      {children}
-    </ViewportContext.Provider>
-  );
+  return <ViewportContext.Provider value={{ width, height }}>{children}</ViewportContext.Provider>
 }
diff --git a/apps/web/src/data/abaciOneSubtitles.ts b/apps/web/src/data/abaciOneSubtitles.ts
index c5326c0e..0a9768a1 100644
--- a/apps/web/src/data/abaciOneSubtitles.ts
+++ b/apps/web/src/data/abaciOneSubtitles.ts
@@ -4,112 +4,112 @@
  */
 
 export interface Subtitle {
-  text: string;
-  description: string;
+  text: string
+  description: string
 }
 
 export const subtitles: Subtitle[] = [
-  { text: "Speed Bead Lead", description: "blaze through bead races" },
-  { text: "Rod Mod Nod", description: "tweak rod technique, approval earned" },
-  { text: "Grid Kid Lid", description: "lock in neat grid habits" },
-  { text: "Count Mount Amount", description: "stack up that number sense" },
-  { text: "Stack Track Tack", description: "line up beads, lock in sums" },
-  { text: "Quick Flick Trick", description: "rapid-fire bead tactics" },
-  { text: "Flash Dash Math", description: "fly through numeric challenges" },
-  { text: "Slide Glide Pride", description: "smooth soroban strokes" },
-  { text: "Shift Sift Gift", description: "sort beads, reveal talent" },
-  { text: "Beat Seat Meet", description: "compete head-to-head" },
-  { text: "Brain Train Gain", description: "mental math muscle building" },
-  { text: "Flow Show Pro", description: "demonstrate soroban mastery" },
-  { text: "Fast Blast Past", description: "surpass speed limits" },
-  { text: "Snap Tap Map", description: "chart your calculation path" },
-  { text: "Row Grow Know", description: "advance through structured drills" },
-  { text: "Drill Skill Thrill", description: "practice that excites" },
-  { text: "Think Link Sync", description: "connect mind and beads" },
-  { text: "Boost Joust Roost", description: "power up, compete, settle in" },
-  { text: "Add Grad Rad", description: "level up addition awesomely" },
-  { text: "Sum Fun Run", description: "enjoy the arithmetic sprint" },
+  { text: 'Speed Bead Lead', description: 'blaze through bead races' },
+  { text: 'Rod Mod Nod', description: 'tweak rod technique, approval earned' },
+  { text: 'Grid Kid Lid', description: 'lock in neat grid habits' },
+  { text: 'Count Mount Amount', description: 'stack up that number sense' },
+  { text: 'Stack Track Tack', description: 'line up beads, lock in sums' },
+  { text: 'Quick Flick Trick', description: 'rapid-fire bead tactics' },
+  { text: 'Flash Dash Math', description: 'fly through numeric challenges' },
+  { text: 'Slide Glide Pride', description: 'smooth soroban strokes' },
+  { text: 'Shift Sift Gift', description: 'sort beads, reveal talent' },
+  { text: 'Beat Seat Meet', description: 'compete head-to-head' },
+  { text: 'Brain Train Gain', description: 'mental math muscle building' },
+  { text: 'Flow Show Pro', description: 'demonstrate soroban mastery' },
+  { text: 'Fast Blast Past', description: 'surpass speed limits' },
+  { text: 'Snap Tap Map', description: 'chart your calculation path' },
+  { text: 'Row Grow Know', description: 'advance through structured drills' },
+  { text: 'Drill Skill Thrill', description: 'practice that excites' },
+  { text: 'Think Link Sync', description: 'connect mind and beads' },
+  { text: 'Boost Joust Roost', description: 'power up, compete, settle in' },
+  { text: 'Add Grad Rad', description: 'level up addition awesomely' },
+  { text: 'Sum Fun Run', description: 'enjoy the arithmetic sprint' },
   {
-    text: "Track Stack Pack",
-    description: "organize solutions systematically",
+    text: 'Track Stack Pack',
+    description: 'organize solutions systematically',
   },
-  { text: "Beat Neat Feat", description: "clean victories, impressive wins" },
-  { text: "Math Path Wrath", description: "dominate numeric challenges" },
-  { text: "Spark Mark Arc", description: "ignite progress, track growth" },
-  { text: "Race Pace Ace", description: "speed up, master it" },
-  { text: "Flex Hex Reflex", description: "adapt calculations instantly" },
-  { text: "Glide Pride Stride", description: "smooth confident progress" },
-  { text: "Flash Dash Smash", description: "speed through, crush totals" },
-  { text: "Stack Attack Jack", description: "aggressive bead strategies" },
-  { text: "Quick Pick Click", description: "rapid bead selection" },
-  { text: "Snap Map Tap", description: "visualize and execute" },
-  { text: "Mind Find Grind", description: "discover mental endurance" },
-  { text: "Flip Skip Rip", description: "fast transitions, tear through" },
-  { text: "Blend Trend Send", description: "mix methods, share progress" },
-  { text: "Power Tower Hour", description: "build skills intensively" },
-  { text: "Launch Staunch Haunch", description: "start strong, stay firm" },
-  { text: "Rush Crush Hush", description: "speed quietly dominates" },
-  { text: "Swipe Stripe Hype", description: "sleek moves, excitement" },
-  { text: "Train Gain Sustain", description: "build lasting ability" },
-  { text: "Frame Claim Flame", description: "structure your fire" },
-  { text: "Streak Peak Tweak", description: "hot runs, optimize performance" },
-  { text: "Edge Pledge Wedge", description: "commit to precision" },
-  { text: "Pace Grace Space", description: "rhythm, elegance, room to grow" },
-  { text: "Link Think Brink", description: "connect at breakthrough edge" },
-  { text: "Quest Test Best", description: "challenge yourself to excel" },
+  { text: 'Beat Neat Feat', description: 'clean victories, impressive wins' },
+  { text: 'Math Path Wrath', description: 'dominate numeric challenges' },
+  { text: 'Spark Mark Arc', description: 'ignite progress, track growth' },
+  { text: 'Race Pace Ace', description: 'speed up, master it' },
+  { text: 'Flex Hex Reflex', description: 'adapt calculations instantly' },
+  { text: 'Glide Pride Stride', description: 'smooth confident progress' },
+  { text: 'Flash Dash Smash', description: 'speed through, crush totals' },
+  { text: 'Stack Attack Jack', description: 'aggressive bead strategies' },
+  { text: 'Quick Pick Click', description: 'rapid bead selection' },
+  { text: 'Snap Map Tap', description: 'visualize and execute' },
+  { text: 'Mind Find Grind', description: 'discover mental endurance' },
+  { text: 'Flip Skip Rip', description: 'fast transitions, tear through' },
+  { text: 'Blend Trend Send', description: 'mix methods, share progress' },
+  { text: 'Power Tower Hour', description: 'build skills intensively' },
+  { text: 'Launch Staunch Haunch', description: 'start strong, stay firm' },
+  { text: 'Rush Crush Hush', description: 'speed quietly dominates' },
+  { text: 'Swipe Stripe Hype', description: 'sleek moves, excitement' },
+  { text: 'Train Gain Sustain', description: 'build lasting ability' },
+  { text: 'Frame Claim Flame', description: 'structure your fire' },
+  { text: 'Streak Peak Tweak', description: 'hot runs, optimize performance' },
+  { text: 'Edge Pledge Wedge', description: 'commit to precision' },
+  { text: 'Pace Grace Space', description: 'rhythm, elegance, room to grow' },
+  { text: 'Link Think Brink', description: 'connect at breakthrough edge' },
+  { text: 'Quest Test Best', description: 'challenge yourself to excel' },
   {
-    text: "Drive Thrive Arrive",
-    description: "push hard, succeed, reach goals",
+    text: 'Drive Thrive Arrive',
+    description: 'push hard, succeed, reach goals',
   },
-  { text: "Smart Start Chart", description: "begin wisely, track progress" },
-  { text: "Boost Coast Toast", description: "accelerate, cruise, celebrate" },
-  { text: "Spark Dark Embark", description: "ignite before dawn journeys" },
+  { text: 'Smart Start Chart', description: 'begin wisely, track progress' },
+  { text: 'Boost Coast Toast', description: 'accelerate, cruise, celebrate' },
+  { text: 'Spark Dark Embark', description: 'ignite before dawn journeys' },
   {
-    text: "Blaze Graze Amaze",
-    description: "burn through, touch lightly, wow",
+    text: 'Blaze Graze Amaze',
+    description: 'burn through, touch lightly, wow',
   },
-  { text: "Shift Drift Gift", description: "adapt smoothly, reveal talent" },
-  { text: "Zone Hone Own", description: "focus, refine, claim mastery" },
-  { text: "Vault Halt Exalt", description: "leap high, pause, celebrate" },
-  { text: "Peak Seek Streak", description: "find heights, maintain momentum" },
-  { text: "Glow Show Grow", description: "shine, display, expand" },
-  { text: "Scope Hope Rope", description: "survey possibilities, climb up" },
-  { text: "Core Score More", description: "fundamentals yield better results" },
+  { text: 'Shift Drift Gift', description: 'adapt smoothly, reveal talent' },
+  { text: 'Zone Hone Own', description: 'focus, refine, claim mastery' },
+  { text: 'Vault Halt Exalt', description: 'leap high, pause, celebrate' },
+  { text: 'Peak Seek Streak', description: 'find heights, maintain momentum' },
+  { text: 'Glow Show Grow', description: 'shine, display, expand' },
+  { text: 'Scope Hope Rope', description: 'survey possibilities, climb up' },
+  { text: 'Core Score More', description: 'fundamentals yield better results' },
   {
-    text: "Rank Bank Thank",
-    description: "earn status, save wins, appreciate",
+    text: 'Rank Bank Thank',
+    description: 'earn status, save wins, appreciate',
   },
   {
-    text: "Merge Surge Verge",
-    description: "combine forces, power up, edge closer",
+    text: 'Merge Surge Verge',
+    description: 'combine forces, power up, edge closer',
   },
   {
-    text: "Bold Gold Hold",
-    description: "brave attempts, prize rewards, maintain",
+    text: 'Bold Gold Hold',
+    description: 'brave attempts, prize rewards, maintain',
   },
-  { text: "Rise Prize Wise", description: "ascend, win, learn" },
-  { text: "Move Groove Prove", description: "act, find rhythm, demonstrate" },
-  { text: "Trust Thrust Adjust", description: "believe, push, refine" },
-  { text: "Beam Dream Team", description: "radiate, aspire, collaborate" },
-  { text: "Spin Win Grin", description: "rotate beads, succeed, smile" },
-  { text: "String Ring Bring", description: "connect, cycle, deliver" },
-  { text: "Clear Gear Steer", description: "focus, equip, direct" },
-  { text: "Path Math Aftermath", description: "route, calculate, results" },
-  { text: "Play Slay Day", description: "engage, dominate, own it" },
-  { text: "Code Mode Road", description: "pattern, style, journey" },
-  { text: "Craft Draft Shaft", description: "build, sketch, core structure" },
-  { text: "Light Might Fight", description: "illuminate, empower, compete" },
-  { text: "Stream Dream Extreme", description: "flow, envision, push limits" },
-  { text: "Claim Frame Aim", description: "assert, structure, target" },
-  { text: "Chart Smart Start", description: "map, intelligent, begin" },
-  { text: "Bright Flight Height", description: "brilliant, soar, elevation" },
-];
+  { text: 'Rise Prize Wise', description: 'ascend, win, learn' },
+  { text: 'Move Groove Prove', description: 'act, find rhythm, demonstrate' },
+  { text: 'Trust Thrust Adjust', description: 'believe, push, refine' },
+  { text: 'Beam Dream Team', description: 'radiate, aspire, collaborate' },
+  { text: 'Spin Win Grin', description: 'rotate beads, succeed, smile' },
+  { text: 'String Ring Bring', description: 'connect, cycle, deliver' },
+  { text: 'Clear Gear Steer', description: 'focus, equip, direct' },
+  { text: 'Path Math Aftermath', description: 'route, calculate, results' },
+  { text: 'Play Slay Day', description: 'engage, dominate, own it' },
+  { text: 'Code Mode Road', description: 'pattern, style, journey' },
+  { text: 'Craft Draft Shaft', description: 'build, sketch, core structure' },
+  { text: 'Light Might Fight', description: 'illuminate, empower, compete' },
+  { text: 'Stream Dream Extreme', description: 'flow, envision, push limits' },
+  { text: 'Claim Frame Aim', description: 'assert, structure, target' },
+  { text: 'Chart Smart Start', description: 'map, intelligent, begin' },
+  { text: 'Bright Flight Height', description: 'brilliant, soar, elevation' },
+]
 
 /**
  * Get a random subtitle from the list
  * Uses current timestamp as seed for variety across sessions
  */
 export function getRandomSubtitle(): Subtitle {
-  const index = Math.floor(Math.random() * subtitles.length);
-  return subtitles[index];
+  const index = Math.floor(Math.random() * subtitles.length)
+  return subtitles[index]
 }
diff --git a/apps/web/src/data/kyuLevelDetails.ts b/apps/web/src/data/kyuLevelDetails.ts
index 975d7036..cdbc23be 100644
--- a/apps/web/src/data/kyuLevelDetails.ts
+++ b/apps/web/src/data/kyuLevelDetails.ts
@@ -6,21 +6,21 @@
  */
 
 export const kyuLevelDetails = {
-  "10-kyu": `Add/Sub: 2-digit, 5口, 10字
+  '10-kyu': `Add/Sub: 2-digit, 5口, 10字
 
 ×: 実+法 = 3 digits (20 problems)
 
 Time: 20 min; Pass ≥ 60/200.
 shuzan.jp`,
 
-  "9-kyu": `Add/Sub: 2-digit, 5口, 10字
+  '9-kyu': `Add/Sub: 2-digit, 5口, 10字
 
 ×: 実+法 = 3 digits (20)
 
 Time: 20 min; Pass ≥ 120/200. (If only one part clears, it's treated as 10-kyu per federation notes.)
 shuzan.jp`,
 
-  "8-kyu": `Add/Sub: 2-digit, 8口, 16字
+  '8-kyu': `Add/Sub: 2-digit, 8口, 16字
 
 ×: 実+法 = 4 digits (10)
 
@@ -29,7 +29,7 @@ shuzan.jp`,
 Time: 20 min; Pass ≥ 120/200.
 shuzan.jp`,
 
-  "7-kyu": `Add/Sub: 2-digit, 10口, 20字
+  '7-kyu': `Add/Sub: 2-digit, 10口, 20字
 
 ×: 実+法 = 4 digits (10)
 
@@ -38,7 +38,7 @@ shuzan.jp`,
 Time: 20 min; Pass ≥ 120/200.
 shuzan.jp`,
 
-  "6-kyu": `Add/Sub: 10口, 30字
+  '6-kyu': `Add/Sub: 10口, 30字
 
 ×: 実+法 = 5 digits (20)
 
@@ -47,7 +47,7 @@ shuzan.jp`,
 Time: 30 min; Pass ≥ 210/300.
 shuzan.jp`,
 
-  "5-kyu": `Add/Sub: 10口, 40字
+  '5-kyu': `Add/Sub: 10口, 40字
 
 ×: 実+法 = 6 digits (20)
 
@@ -56,7 +56,7 @@ shuzan.jp`,
 Time: 30 min; Pass ≥ 210/300.
 shuzan.jp`,
 
-  "4-kyu": `Add/Sub: 10口, 50字
+  '4-kyu': `Add/Sub: 10口, 50字
 
 ×: 実+法 = 7 digits (20)
 
@@ -65,7 +65,7 @@ shuzan.jp`,
 Time: 30 min; Pass ≥ 210/300.
 shuzan.jp`,
 
-  "Pre-3-kyu": `Add/Sub: 10口, 50字 ×5題 and 10口, 60字 ×5題 (total 10)
+  'Pre-3-kyu': `Add/Sub: 10口, 50字 ×5題 and 10口, 60字 ×5題 (total 10)
 
 ×: 実+法 = 7 digits (20)
 
@@ -74,7 +74,7 @@ shuzan.jp`,
 Time: 30 min; Pass ≥ 240/300.
 shuzan.jp`,
 
-  "3-kyu": `Add/Sub: 10口, 60字
+  '3-kyu': `Add/Sub: 10口, 60字
 
 ×: 実+法 = 7 digits (20)
 
@@ -83,7 +83,7 @@ shuzan.jp`,
 Time: 30 min; Pass ≥ 240/300.
 shuzan.jp`,
 
-  "Pre-2-kyu": `Add/Sub: 10口, 70字
+  'Pre-2-kyu': `Add/Sub: 10口, 70字
 
 ×: 実+法 = 8 digits (20)
 
@@ -92,7 +92,7 @@ shuzan.jp`,
 Time: 30 min; Pass ≥ 240/300.
 shuzan.jp`,
 
-  "2-kyu": `Add/Sub: 10口, 80字
+  '2-kyu': `Add/Sub: 10口, 80字
 
 ×: 実+法 = 9 digits (20)
 
@@ -101,7 +101,7 @@ shuzan.jp`,
 Time: 30 min; Pass ≥ 240/300.
 shuzan.jp`,
 
-  "Pre-1-kyu": `Add/Sub: 10口, 90字
+  'Pre-1-kyu': `Add/Sub: 10口, 90字
 
 ×: 実+法 = 10 digits (20)
 
@@ -110,7 +110,7 @@ shuzan.jp`,
 Time: 30 min; Pass ≥ 240/300.
 shuzan.jp`,
 
-  "1-kyu": `Add/Sub: 10口, 100字
+  '1-kyu': `Add/Sub: 10口, 100字
 
 ×: 実+法 = 11 digits (20)
 
@@ -118,6 +118,6 @@ shuzan.jp`,
 
 Time: 30 min; Pass ≥ 240/300.
 shuzan.jp`,
-} as const;
+} as const
 
-export type KyuLevel = keyof typeof kyuLevelDetails;
+export type KyuLevel = keyof typeof kyuLevelDetails
diff --git a/apps/web/src/db/__tests__/database-connection.test.ts b/apps/web/src/db/__tests__/database-connection.test.ts
index 5f8ba606..7beff395 100644
--- a/apps/web/src/db/__tests__/database-connection.test.ts
+++ b/apps/web/src/db/__tests__/database-connection.test.ts
@@ -1,27 +1,27 @@
-import Database from "better-sqlite3";
-import { drizzle } from "drizzle-orm/better-sqlite3";
-import { describe, expect, it } from "vitest";
+import Database from 'better-sqlite3'
+import { drizzle } from 'drizzle-orm/better-sqlite3'
+import { describe, expect, it } from 'vitest'
 
-describe("Database connection", () => {
-  it("connects to in-memory database", () => {
-    const sqlite = new Database(":memory:");
-    const db = drizzle(sqlite);
+describe('Database connection', () => {
+  it('connects to in-memory database', () => {
+    const sqlite = new Database(':memory:')
+    const db = drizzle(sqlite)
 
-    expect(db).toBeDefined();
-  });
+    expect(db).toBeDefined()
+  })
 
-  it("enables foreign keys", () => {
-    const sqlite = new Database(":memory:");
-    sqlite.pragma("foreign_keys = ON");
+  it('enables foreign keys', () => {
+    const sqlite = new Database(':memory:')
+    sqlite.pragma('foreign_keys = ON')
 
-    const result = sqlite.pragma("foreign_keys", { simple: true });
+    const result = sqlite.pragma('foreign_keys', { simple: true })
 
-    expect(result).toBe(1);
-  });
+    expect(result).toBe(1)
+  })
 
-  it("can run simple queries", () => {
-    const sqlite = new Database(":memory:");
-    const _db = drizzle(sqlite);
+  it('can run simple queries', () => {
+    const sqlite = new Database(':memory:')
+    const _db = drizzle(sqlite)
 
     // Create simple table
     sqlite.exec(`
@@ -29,35 +29,33 @@ describe("Database connection", () => {
         id TEXT PRIMARY KEY,
         value TEXT
       )
-    `);
+    `)
 
     // Insert
-    sqlite.prepare("INSERT INTO test (id, value) VALUES ('1', 'hello')").run();
+    sqlite.prepare("INSERT INTO test (id, value) VALUES ('1', 'hello')").run()
 
     // Query
-    const result = sqlite
-      .prepare("SELECT * FROM test WHERE id = '1'")
-      .get() as {
-      id: string;
-      value: string;
-    };
+    const result = sqlite.prepare("SELECT * FROM test WHERE id = '1'").get() as {
+      id: string
+      value: string
+    }
 
-    expect(result).toEqual({ id: "1", value: "hello" });
-  });
+    expect(result).toEqual({ id: '1', value: 'hello' })
+  })
 
-  it("supports WAL mode (file-based DB)", () => {
+  it('supports WAL mode (file-based DB)', () => {
     // WAL mode doesn't work with in-memory databases
     // In-memory databases always use 'memory' journal mode
     // This test verifies the pragma can be set (will use WAL for file DBs)
-    const sqlite = new Database(":memory:");
+    const sqlite = new Database(':memory:')
 
     // Try to set WAL mode (will return 'memory' for in-memory DB)
-    sqlite.pragma("journal_mode = WAL");
-    const result = sqlite.pragma("journal_mode", { simple: true });
+    sqlite.pragma('journal_mode = WAL')
+    const result = sqlite.pragma('journal_mode', { simple: true })
 
     // In-memory databases can't use WAL, so expect 'memory'
-    expect(result).toBe("memory");
+    expect(result).toBe('memory')
 
     // The actual app uses a file-based DB which will support WAL
-  });
-});
+  })
+})
diff --git a/apps/web/src/db/__tests__/migrations.e2e.test.ts b/apps/web/src/db/__tests__/migrations.e2e.test.ts
index f7214fb0..03046942 100644
--- a/apps/web/src/db/__tests__/migrations.e2e.test.ts
+++ b/apps/web/src/db/__tests__/migrations.e2e.test.ts
@@ -1,163 +1,143 @@
-import Database from "better-sqlite3";
-import { drizzle } from "drizzle-orm/better-sqlite3";
-import { migrate } from "drizzle-orm/better-sqlite3/migrator";
-import { beforeEach, describe, expect, it } from "vitest";
+import Database from 'better-sqlite3'
+import { drizzle } from 'drizzle-orm/better-sqlite3'
+import { migrate } from 'drizzle-orm/better-sqlite3/migrator'
+import { beforeEach, describe, expect, it } from 'vitest'
 
-describe("Migrations E2E", () => {
-  let sqlite: Database.Database;
+describe('Migrations E2E', () => {
+  let sqlite: Database.Database
 
   beforeEach(() => {
     // Fresh in-memory DB for each test
-    sqlite = new Database(":memory:");
-    sqlite.pragma("foreign_keys = ON");
-  });
+    sqlite = new Database(':memory:')
+    sqlite.pragma('foreign_keys = ON')
+  })
 
-  it("applies all migrations successfully", () => {
-    const db = drizzle(sqlite);
+  it('applies all migrations successfully', () => {
+    const db = drizzle(sqlite)
 
     // Should not throw
     expect(() => {
-      migrate(db, { migrationsFolder: "./drizzle" });
-    }).not.toThrow();
-  });
+      migrate(db, { migrationsFolder: './drizzle' })
+    }).not.toThrow()
+  })
 
-  it("creates all expected tables", () => {
-    const db = drizzle(sqlite);
-    migrate(db, { migrationsFolder: "./drizzle" });
+  it('creates all expected tables', () => {
+    const db = drizzle(sqlite)
+    migrate(db, { migrationsFolder: './drizzle' })
 
     const tables = sqlite
       .prepare("SELECT name FROM sqlite_master WHERE type='table'")
-      .all() as Array<{ name: string }>;
+      .all() as Array<{ name: string }>
 
-    const tableNames = tables.map((t) => t.name);
+    const tableNames = tables.map((t) => t.name)
 
-    expect(tableNames).toContain("users");
-    expect(tableNames).toContain("players");
-    expect(tableNames).toContain("user_stats");
-  });
+    expect(tableNames).toContain('users')
+    expect(tableNames).toContain('players')
+    expect(tableNames).toContain('user_stats')
+  })
 
-  it("creates unique indexes on users", () => {
-    const db = drizzle(sqlite);
-    migrate(db, { migrationsFolder: "./drizzle" });
+  it('creates unique indexes on users', () => {
+    const db = drizzle(sqlite)
+    migrate(db, { migrationsFolder: './drizzle' })
 
     const indexes = sqlite
-      .prepare(
-        "SELECT name FROM sqlite_master WHERE type='index' AND tbl_name='users'",
-      )
-      .all() as Array<{ name: string }>;
+      .prepare("SELECT name FROM sqlite_master WHERE type='index' AND tbl_name='users'")
+      .all() as Array<{ name: string }>
 
-    const indexNames = indexes.map((i) => i.name);
+    const indexNames = indexes.map((i) => i.name)
 
-    expect(indexNames).toContain("users_guest_id_unique");
-    expect(indexNames).toContain("users_email_unique");
-  });
+    expect(indexNames).toContain('users_guest_id_unique')
+    expect(indexNames).toContain('users_email_unique')
+  })
 
-  it("creates index on players userId", () => {
-    const db = drizzle(sqlite);
-    migrate(db, { migrationsFolder: "./drizzle" });
+  it('creates index on players userId', () => {
+    const db = drizzle(sqlite)
+    migrate(db, { migrationsFolder: './drizzle' })
 
     const indexes = sqlite
-      .prepare(
-        "SELECT name FROM sqlite_master WHERE type='index' AND tbl_name='players'",
-      )
-      .all() as Array<{ name: string }>;
+      .prepare("SELECT name FROM sqlite_master WHERE type='index' AND tbl_name='players'")
+      .all() as Array<{ name: string }>
 
-    const indexNames = indexes.map((i) => i.name);
+    const indexNames = indexes.map((i) => i.name)
 
-    expect(indexNames).toContain("players_user_id_idx");
-  });
+    expect(indexNames).toContain('players_user_id_idx')
+  })
 
-  it("enforces foreign key constraints", () => {
-    const db = drizzle(sqlite);
-    migrate(db, { migrationsFolder: "./drizzle" });
+  it('enforces foreign key constraints', () => {
+    const db = drizzle(sqlite)
+    migrate(db, { migrationsFolder: './drizzle' })
 
     // Try to insert player with non-existent userId
     expect(() => {
       sqlite
         .prepare(
-          "INSERT INTO players (id, user_id, name, emoji, color, is_active, created_at) VALUES ('p1', 'nonexistent', 'Test', '😀', '#000', 0, 0)",
+          "INSERT INTO players (id, user_id, name, emoji, color, is_active, created_at) VALUES ('p1', 'nonexistent', 'Test', '😀', '#000', 0, 0)"
         )
-        .run();
-    }).toThrow();
-  });
+        .run()
+    }).toThrow()
+  })
 
-  it("cascades deletes from users to players", () => {
-    const db = drizzle(sqlite);
-    migrate(db, { migrationsFolder: "./drizzle" });
+  it('cascades deletes from users to players', () => {
+    const db = drizzle(sqlite)
+    migrate(db, { migrationsFolder: './drizzle' })
 
     // Insert user
-    sqlite
-      .prepare(
-        "INSERT INTO users (id, guest_id, created_at) VALUES ('u1', 'g1', 0)",
-      )
-      .run();
+    sqlite.prepare("INSERT INTO users (id, guest_id, created_at) VALUES ('u1', 'g1', 0)").run()
 
     // Insert player for that user
     sqlite
       .prepare(
-        "INSERT INTO players (id, user_id, name, emoji, color, is_active, created_at) VALUES ('p1', 'u1', 'Test', '😀', '#000', 0, 0)",
+        "INSERT INTO players (id, user_id, name, emoji, color, is_active, created_at) VALUES ('p1', 'u1', 'Test', '😀', '#000', 0, 0)"
       )
-      .run();
+      .run()
 
     // Verify player exists
-    const playerBefore = sqlite
-      .prepare("SELECT * FROM players WHERE id = 'p1'")
-      .get();
-    expect(playerBefore).toBeDefined();
+    const playerBefore = sqlite.prepare("SELECT * FROM players WHERE id = 'p1'").get()
+    expect(playerBefore).toBeDefined()
 
     // Delete user
-    sqlite.prepare("DELETE FROM users WHERE id = 'u1'").run();
+    sqlite.prepare("DELETE FROM users WHERE id = 'u1'").run()
 
     // Verify player was cascade deleted
-    const playerAfter = sqlite
-      .prepare("SELECT * FROM players WHERE id = 'p1'")
-      .get();
-    expect(playerAfter).toBeUndefined();
-  });
+    const playerAfter = sqlite.prepare("SELECT * FROM players WHERE id = 'p1'").get()
+    expect(playerAfter).toBeUndefined()
+  })
 
-  it("cascades deletes from users to user_stats", () => {
-    const db = drizzle(sqlite);
-    migrate(db, { migrationsFolder: "./drizzle" });
+  it('cascades deletes from users to user_stats', () => {
+    const db = drizzle(sqlite)
+    migrate(db, { migrationsFolder: './drizzle' })
 
     // Insert user
-    sqlite
-      .prepare(
-        "INSERT INTO users (id, guest_id, created_at) VALUES ('u1', 'g1', 0)",
-      )
-      .run();
+    sqlite.prepare("INSERT INTO users (id, guest_id, created_at) VALUES ('u1', 'g1', 0)").run()
 
     // Insert stats for that user
     sqlite
       .prepare(
-        "INSERT INTO user_stats (user_id, games_played, total_wins, highest_accuracy) VALUES ('u1', 5, 2, 0.8)",
+        "INSERT INTO user_stats (user_id, games_played, total_wins, highest_accuracy) VALUES ('u1', 5, 2, 0.8)"
       )
-      .run();
+      .run()
 
     // Verify stats exist
-    const statsBefore = sqlite
-      .prepare("SELECT * FROM user_stats WHERE user_id = 'u1'")
-      .get();
-    expect(statsBefore).toBeDefined();
+    const statsBefore = sqlite.prepare("SELECT * FROM user_stats WHERE user_id = 'u1'").get()
+    expect(statsBefore).toBeDefined()
 
     // Delete user
-    sqlite.prepare("DELETE FROM users WHERE id = 'u1'").run();
+    sqlite.prepare("DELETE FROM users WHERE id = 'u1'").run()
 
     // Verify stats were cascade deleted
-    const statsAfter = sqlite
-      .prepare("SELECT * FROM user_stats WHERE user_id = 'u1'")
-      .get();
-    expect(statsAfter).toBeUndefined();
-  });
+    const statsAfter = sqlite.prepare("SELECT * FROM user_stats WHERE user_id = 'u1'").get()
+    expect(statsAfter).toBeUndefined()
+  })
 
-  it("is idempotent (can run migrations twice)", () => {
-    const db = drizzle(sqlite);
+  it('is idempotent (can run migrations twice)', () => {
+    const db = drizzle(sqlite)
 
     // Run migrations first time
-    migrate(db, { migrationsFolder: "./drizzle" });
+    migrate(db, { migrationsFolder: './drizzle' })
 
     // Run migrations second time (should not throw)
     expect(() => {
-      migrate(db, { migrationsFolder: "./drizzle" });
-    }).not.toThrow();
-  });
-});
+      migrate(db, { migrationsFolder: './drizzle' })
+    }).not.toThrow()
+  })
+})
diff --git a/apps/web/src/db/__tests__/schema.test.ts b/apps/web/src/db/__tests__/schema.test.ts
index 6aae008b..f166a6c0 100644
--- a/apps/web/src/db/__tests__/schema.test.ts
+++ b/apps/web/src/db/__tests__/schema.test.ts
@@ -1,114 +1,114 @@
-import { describe, expect, it } from "vitest";
-import { arcadeSessions, players, userStats, users } from "../schema";
+import { describe, expect, it } from 'vitest'
+import { arcadeSessions, players, userStats, users } from '../schema'
 
-describe("Schema validation", () => {
-  describe("users table", () => {
-    it("has correct structure", () => {
-      expect(users.id).toBeDefined();
-      expect(users.guestId).toBeDefined();
-      expect(users.createdAt).toBeDefined();
-      expect(users.upgradedAt).toBeDefined();
-      expect(users.email).toBeDefined();
-      expect(users.name).toBeDefined();
-    });
+describe('Schema validation', () => {
+  describe('users table', () => {
+    it('has correct structure', () => {
+      expect(users.id).toBeDefined()
+      expect(users.guestId).toBeDefined()
+      expect(users.createdAt).toBeDefined()
+      expect(users.upgradedAt).toBeDefined()
+      expect(users.email).toBeDefined()
+      expect(users.name).toBeDefined()
+    })
 
-    it("has unique constraints on guestId and email", () => {
-      expect(users.guestId.notNull).toBe(true);
-      expect(users.email.notNull).toBe(false); // nullable until upgrade
-    });
-  });
+    it('has unique constraints on guestId and email', () => {
+      expect(users.guestId.notNull).toBe(true)
+      expect(users.email.notNull).toBe(false) // nullable until upgrade
+    })
+  })
 
-  describe("players table", () => {
-    it("has correct structure", () => {
-      expect(players.id).toBeDefined();
-      expect(players.userId).toBeDefined();
-      expect(players.name).toBeDefined();
-      expect(players.emoji).toBeDefined();
-      expect(players.color).toBeDefined();
-      expect(players.isActive).toBeDefined();
-      expect(players.createdAt).toBeDefined();
-    });
+  describe('players table', () => {
+    it('has correct structure', () => {
+      expect(players.id).toBeDefined()
+      expect(players.userId).toBeDefined()
+      expect(players.name).toBeDefined()
+      expect(players.emoji).toBeDefined()
+      expect(players.color).toBeDefined()
+      expect(players.isActive).toBeDefined()
+      expect(players.createdAt).toBeDefined()
+    })
 
-    it("has foreign key to users", () => {
-      const userIdColumn = players.userId;
-      expect(userIdColumn).toBeDefined();
-      expect(userIdColumn.notNull).toBe(true);
-    });
+    it('has foreign key to users', () => {
+      const userIdColumn = players.userId
+      expect(userIdColumn).toBeDefined()
+      expect(userIdColumn.notNull).toBe(true)
+    })
 
-    it("has required fields as not null", () => {
-      expect(players.name.notNull).toBe(true);
-      expect(players.emoji.notNull).toBe(true);
-      expect(players.color.notNull).toBe(true);
-      expect(players.isActive.notNull).toBe(true);
-    });
-  });
+    it('has required fields as not null', () => {
+      expect(players.name.notNull).toBe(true)
+      expect(players.emoji.notNull).toBe(true)
+      expect(players.color.notNull).toBe(true)
+      expect(players.isActive.notNull).toBe(true)
+    })
+  })
 
-  describe("user_stats table", () => {
-    it("has correct structure", () => {
-      expect(userStats.userId).toBeDefined();
-      expect(userStats.gamesPlayed).toBeDefined();
-      expect(userStats.totalWins).toBeDefined();
-      expect(userStats.favoriteGameType).toBeDefined();
-      expect(userStats.bestTime).toBeDefined();
-      expect(userStats.highestAccuracy).toBeDefined();
-    });
+  describe('user_stats table', () => {
+    it('has correct structure', () => {
+      expect(userStats.userId).toBeDefined()
+      expect(userStats.gamesPlayed).toBeDefined()
+      expect(userStats.totalWins).toBeDefined()
+      expect(userStats.favoriteGameType).toBeDefined()
+      expect(userStats.bestTime).toBeDefined()
+      expect(userStats.highestAccuracy).toBeDefined()
+    })
 
-    it("has foreign key to users", () => {
-      const userIdColumn = userStats.userId;
-      expect(userIdColumn).toBeDefined();
-    });
+    it('has foreign key to users', () => {
+      const userIdColumn = userStats.userId
+      expect(userIdColumn).toBeDefined()
+    })
 
-    it("has correct defaults", () => {
-      expect(userStats.gamesPlayed.notNull).toBe(true);
-      expect(userStats.totalWins.notNull).toBe(true);
-      expect(userStats.highestAccuracy.notNull).toBe(true);
-    });
-  });
+    it('has correct defaults', () => {
+      expect(userStats.gamesPlayed.notNull).toBe(true)
+      expect(userStats.totalWins.notNull).toBe(true)
+      expect(userStats.highestAccuracy.notNull).toBe(true)
+    })
+  })
 
-  describe("arcade_sessions table", () => {
-    it("exists in schema", () => {
-      expect(arcadeSessions).toBeDefined();
-    });
+  describe('arcade_sessions table', () => {
+    it('exists in schema', () => {
+      expect(arcadeSessions).toBeDefined()
+    })
 
-    it("has correct structure", () => {
-      expect(arcadeSessions.userId).toBeDefined();
-      expect(arcadeSessions.currentGame).toBeDefined();
-      expect(arcadeSessions.gameUrl).toBeDefined();
-      expect(arcadeSessions.gameState).toBeDefined();
-      expect(arcadeSessions.activePlayers).toBeDefined();
-      expect(arcadeSessions.startedAt).toBeDefined();
-      expect(arcadeSessions.lastActivityAt).toBeDefined();
-      expect(arcadeSessions.expiresAt).toBeDefined();
-      expect(arcadeSessions.isActive).toBeDefined();
-      expect(arcadeSessions.version).toBeDefined();
-    });
+    it('has correct structure', () => {
+      expect(arcadeSessions.userId).toBeDefined()
+      expect(arcadeSessions.currentGame).toBeDefined()
+      expect(arcadeSessions.gameUrl).toBeDefined()
+      expect(arcadeSessions.gameState).toBeDefined()
+      expect(arcadeSessions.activePlayers).toBeDefined()
+      expect(arcadeSessions.startedAt).toBeDefined()
+      expect(arcadeSessions.lastActivityAt).toBeDefined()
+      expect(arcadeSessions.expiresAt).toBeDefined()
+      expect(arcadeSessions.isActive).toBeDefined()
+      expect(arcadeSessions.version).toBeDefined()
+    })
 
-    it("has userId as primary key", () => {
-      expect(arcadeSessions.userId).toBeDefined();
-      expect(arcadeSessions.userId.primary).toBe(true);
-    });
+    it('has userId as primary key', () => {
+      expect(arcadeSessions.userId).toBeDefined()
+      expect(arcadeSessions.userId.primary).toBe(true)
+    })
 
-    it("has foreign key to users", () => {
-      const userIdColumn = arcadeSessions.userId;
-      expect(userIdColumn).toBeDefined();
-      expect(userIdColumn.notNull).toBe(true);
-    });
+    it('has foreign key to users', () => {
+      const userIdColumn = arcadeSessions.userId
+      expect(userIdColumn).toBeDefined()
+      expect(userIdColumn.notNull).toBe(true)
+    })
 
-    it("has required fields as not null", () => {
-      expect(arcadeSessions.currentGame.notNull).toBe(true);
-      expect(arcadeSessions.gameUrl.notNull).toBe(true);
-      expect(arcadeSessions.gameState.notNull).toBe(true);
-      expect(arcadeSessions.activePlayers.notNull).toBe(true);
-      expect(arcadeSessions.startedAt.notNull).toBe(true);
-      expect(arcadeSessions.lastActivityAt.notNull).toBe(true);
-      expect(arcadeSessions.expiresAt.notNull).toBe(true);
-      expect(arcadeSessions.isActive.notNull).toBe(true);
-      expect(arcadeSessions.version.notNull).toBe(true);
-    });
+    it('has required fields as not null', () => {
+      expect(arcadeSessions.currentGame.notNull).toBe(true)
+      expect(arcadeSessions.gameUrl.notNull).toBe(true)
+      expect(arcadeSessions.gameState.notNull).toBe(true)
+      expect(arcadeSessions.activePlayers.notNull).toBe(true)
+      expect(arcadeSessions.startedAt.notNull).toBe(true)
+      expect(arcadeSessions.lastActivityAt.notNull).toBe(true)
+      expect(arcadeSessions.expiresAt.notNull).toBe(true)
+      expect(arcadeSessions.isActive.notNull).toBe(true)
+      expect(arcadeSessions.version.notNull).toBe(true)
+    })
 
-    it("has correct defaults", () => {
-      expect(arcadeSessions.isActive.default).toBeDefined();
-      expect(arcadeSessions.version.default).toBeDefined();
-    });
-  });
-});
+    it('has correct defaults', () => {
+      expect(arcadeSessions.isActive.default).toBeDefined()
+      expect(arcadeSessions.version.default).toBeDefined()
+    })
+  })
+})
diff --git a/apps/web/src/db/index.ts b/apps/web/src/db/index.ts
index 9e096be4..a1143058 100644
--- a/apps/web/src/db/index.ts
+++ b/apps/web/src/db/index.ts
@@ -1,6 +1,6 @@
-import Database from "better-sqlite3";
-import { drizzle } from "drizzle-orm/better-sqlite3";
-import * as schema from "./schema";
+import Database from 'better-sqlite3'
+import { drizzle } from 'drizzle-orm/better-sqlite3'
+import * as schema from './schema'
 
 /**
  * Database connection and client
@@ -13,10 +13,10 @@ import * as schema from "./schema";
  * when the database doesn't exist (e.g., in CI/CD environments).
  */
 
-const databaseUrl = process.env.DATABASE_URL || "./data/sqlite.db";
+const databaseUrl = process.env.DATABASE_URL || './data/sqlite.db'
 
-let _sqlite: Database.Database | null = null;
-let _db: ReturnType<typeof drizzle<typeof schema>> | null = null;
+let _sqlite: Database.Database | null = null
+let _db: ReturnType<typeof drizzle<typeof schema>> | null = null
 
 /**
  * Get the database connection (lazy-loaded singleton)
@@ -24,17 +24,17 @@ let _db: ReturnType<typeof drizzle<typeof schema>> | null = null;
  */
 function getDb() {
   if (!_db) {
-    _sqlite = new Database(databaseUrl);
+    _sqlite = new Database(databaseUrl)
 
     // Enable foreign keys (SQLite requires explicit enable)
-    _sqlite.pragma("foreign_keys = ON");
+    _sqlite.pragma('foreign_keys = ON')
 
     // Enable WAL mode for better concurrency
-    _sqlite.pragma("journal_mode = WAL");
+    _sqlite.pragma('journal_mode = WAL')
 
-    _db = drizzle(_sqlite, { schema });
+    _db = drizzle(_sqlite, { schema })
   }
-  return _db;
+  return _db
 }
 
 /**
@@ -43,8 +43,8 @@ function getDb() {
  */
 export const db = new Proxy({} as ReturnType<typeof drizzle<typeof schema>>, {
   get(_target, prop) {
-    return getDb()[prop as keyof ReturnType<typeof drizzle<typeof schema>>];
+    return getDb()[prop as keyof ReturnType<typeof drizzle<typeof schema>>]
   },
-});
+})
 
-export { schema };
+export { schema }
diff --git a/apps/web/src/db/migrate.ts b/apps/web/src/db/migrate.ts
index d372d267..4d2b04a7 100644
--- a/apps/web/src/db/migrate.ts
+++ b/apps/web/src/db/migrate.ts
@@ -1,5 +1,5 @@
-import { migrate } from "drizzle-orm/better-sqlite3/migrator";
-import { db } from "./index";
+import { migrate } from 'drizzle-orm/better-sqlite3/migrator'
+import { db } from './index'
 
 /**
  * Migration runner
@@ -11,13 +11,13 @@ import { db } from "./index";
  */
 
 try {
-  console.log("🔄 Running migrations...");
+  console.log('🔄 Running migrations...')
 
-  migrate(db, { migrationsFolder: "./drizzle" });
+  migrate(db, { migrationsFolder: './drizzle' })
 
-  console.log("✅ Migrations complete");
-  process.exit(0);
+  console.log('✅ Migrations complete')
+  process.exit(0)
 } catch (error) {
-  console.error("❌ Migration failed:", error);
-  process.exit(1);
+  console.error('❌ Migration failed:', error)
+  process.exit(1)
 }
diff --git a/apps/web/src/db/schema/abacus-settings.ts b/apps/web/src/db/schema/abacus-settings.ts
index 42f7e2f7..aad34ca5 100644
--- a/apps/web/src/db/schema/abacus-settings.ts
+++ b/apps/web/src/db/schema/abacus-settings.ts
@@ -1,5 +1,5 @@
-import { integer, real, sqliteTable, text } from "drizzle-orm/sqlite-core";
-import { users } from "./users";
+import { integer, real, sqliteTable, text } from 'drizzle-orm/sqlite-core'
+import { users } from './users'
 
 /**
  * Abacus display settings table - UI preferences per user
@@ -7,75 +7,65 @@ import { users } from "./users";
  * One-to-one with users table. Stores abacus display configuration.
  * Deleted when user is deleted (cascade).
  */
-export const abacusSettings = sqliteTable("abacus_settings", {
+export const abacusSettings = sqliteTable('abacus_settings', {
   /** Primary key and foreign key to users table */
-  userId: text("user_id")
+  userId: text('user_id')
     .primaryKey()
-    .references(() => users.id, { onDelete: "cascade" }),
+    .references(() => users.id, { onDelete: 'cascade' }),
 
   /** Color scheme for beads */
-  colorScheme: text("color_scheme", {
-    enum: ["monochrome", "place-value", "heaven-earth", "alternating"],
+  colorScheme: text('color_scheme', {
+    enum: ['monochrome', 'place-value', 'heaven-earth', 'alternating'],
   })
     .notNull()
-    .default("place-value"),
+    .default('place-value'),
 
   /** Bead shape */
-  beadShape: text("bead_shape", {
-    enum: ["diamond", "circle", "square"],
+  beadShape: text('bead_shape', {
+    enum: ['diamond', 'circle', 'square'],
   })
     .notNull()
-    .default("diamond"),
+    .default('diamond'),
 
   /** Color palette */
-  colorPalette: text("color_palette", {
-    enum: ["default", "colorblind", "mnemonic", "grayscale", "nature"],
+  colorPalette: text('color_palette', {
+    enum: ['default', 'colorblind', 'mnemonic', 'grayscale', 'nature'],
   })
     .notNull()
-    .default("default"),
+    .default('default'),
 
   /** Hide inactive beads */
-  hideInactiveBeads: integer("hide_inactive_beads", { mode: "boolean" })
-    .notNull()
-    .default(false),
+  hideInactiveBeads: integer('hide_inactive_beads', { mode: 'boolean' }).notNull().default(false),
 
   /** Color numerals based on place value */
-  coloredNumerals: integer("colored_numerals", { mode: "boolean" })
-    .notNull()
-    .default(false),
+  coloredNumerals: integer('colored_numerals', { mode: 'boolean' }).notNull().default(false),
 
   /** Scale factor for abacus size */
-  scaleFactor: real("scale_factor").notNull().default(1.0),
+  scaleFactor: real('scale_factor').notNull().default(1.0),
 
   /** Show numbers below abacus */
-  showNumbers: integer("show_numbers", { mode: "boolean" })
-    .notNull()
-    .default(true),
+  showNumbers: integer('show_numbers', { mode: 'boolean' }).notNull().default(true),
 
   /** Enable animations */
-  animated: integer("animated", { mode: "boolean" }).notNull().default(true),
+  animated: integer('animated', { mode: 'boolean' }).notNull().default(true),
 
   /** Enable interaction */
-  interactive: integer("interactive", { mode: "boolean" })
-    .notNull()
-    .default(false),
+  interactive: integer('interactive', { mode: 'boolean' }).notNull().default(false),
 
   /** Enable gesture controls */
-  gestures: integer("gestures", { mode: "boolean" }).notNull().default(false),
+  gestures: integer('gestures', { mode: 'boolean' }).notNull().default(false),
 
   /** Enable sound effects */
-  soundEnabled: integer("sound_enabled", { mode: "boolean" })
-    .notNull()
-    .default(true),
+  soundEnabled: integer('sound_enabled', { mode: 'boolean' }).notNull().default(true),
 
   /** Sound volume (0.0 - 1.0) */
-  soundVolume: real("sound_volume").notNull().default(0.8),
+  soundVolume: real('sound_volume').notNull().default(0.8),
 
   /** Display numbers as abaci throughout the app where practical */
-  nativeAbacusNumbers: integer("native_abacus_numbers", { mode: "boolean" })
+  nativeAbacusNumbers: integer('native_abacus_numbers', { mode: 'boolean' })
     .notNull()
     .default(false),
-});
+})
 
-export type AbacusSettings = typeof abacusSettings.$inferSelect;
-export type NewAbacusSettings = typeof abacusSettings.$inferInsert;
+export type AbacusSettings = typeof abacusSettings.$inferSelect
+export type NewAbacusSettings = typeof abacusSettings.$inferInsert
diff --git a/apps/web/src/db/schema/arcade-rooms.ts b/apps/web/src/db/schema/arcade-rooms.ts
index 4e033dfd..79b7a2f8 100644
--- a/apps/web/src/db/schema/arcade-rooms.ts
+++ b/apps/web/src/db/schema/arcade-rooms.ts
@@ -1,60 +1,53 @@
-import { createId } from "@paralleldrive/cuid2";
-import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
+import { createId } from '@paralleldrive/cuid2'
+import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'
 
-export const arcadeRooms = sqliteTable("arcade_rooms", {
-  id: text("id")
+export const arcadeRooms = sqliteTable('arcade_rooms', {
+  id: text('id')
     .primaryKey()
     .$defaultFn(() => createId()),
 
   // Room identity
-  code: text("code", { length: 6 }).notNull().unique(), // e.g., "ABC123"
-  name: text("name", { length: 50 }), // Optional: auto-generates from code and game if null
+  code: text('code', { length: 6 }).notNull().unique(), // e.g., "ABC123"
+  name: text('name', { length: 50 }), // Optional: auto-generates from code and game if null
 
   // Creator info
-  createdBy: text("created_by").notNull(), // User/guest ID
-  creatorName: text("creator_name", { length: 50 }).notNull(),
-  createdAt: integer("created_at", { mode: "timestamp" })
+  createdBy: text('created_by').notNull(), // User/guest ID
+  creatorName: text('creator_name', { length: 50 }).notNull(),
+  createdAt: integer('created_at', { mode: 'timestamp' })
     .notNull()
     .$defaultFn(() => new Date()),
 
   // Lifecycle
-  lastActivity: integer("last_activity", { mode: "timestamp" })
+  lastActivity: integer('last_activity', { mode: 'timestamp' })
     .notNull()
     .$defaultFn(() => new Date()),
-  ttlMinutes: integer("ttl_minutes").notNull().default(60), // Time to live
+  ttlMinutes: integer('ttl_minutes').notNull().default(60), // Time to live
 
   // Access control
-  accessMode: text("access_mode", {
-    enum: [
-      "open",
-      "locked",
-      "retired",
-      "password",
-      "restricted",
-      "approval-only",
-    ],
+  accessMode: text('access_mode', {
+    enum: ['open', 'locked', 'retired', 'password', 'restricted', 'approval-only'],
   })
     .notNull()
-    .default("open"),
-  password: text("password", { length: 255 }), // Hashed password for password-protected rooms
-  displayPassword: text("display_password", { length: 100 }), // Plain text password for display to room owner
+    .default('open'),
+  password: text('password', { length: 255 }), // Hashed password for password-protected rooms
+  displayPassword: text('display_password', { length: 100 }), // Plain text password for display to room owner
 
   // Game configuration (nullable to support game selection in room)
   // Accepts any string - validation happens at runtime against validator registry
-  gameName: text("game_name"),
-  gameConfig: text("game_config", { mode: "json" }), // Game-specific settings (nullable when no game selected)
+  gameName: text('game_name'),
+  gameConfig: text('game_config', { mode: 'json' }), // Game-specific settings (nullable when no game selected)
 
   // Current state
-  status: text("status", {
-    enum: ["lobby", "playing", "finished"],
+  status: text('status', {
+    enum: ['lobby', 'playing', 'finished'],
   })
     .notNull()
-    .default("lobby"),
-  currentSessionId: text("current_session_id"), // FK to arcade_sessions (nullable)
+    .default('lobby'),
+  currentSessionId: text('current_session_id'), // FK to arcade_sessions (nullable)
 
   // Metadata
-  totalGamesPlayed: integer("total_games_played").notNull().default(0),
-});
+  totalGamesPlayed: integer('total_games_played').notNull().default(0),
+})
 
-export type ArcadeRoom = typeof arcadeRooms.$inferSelect;
-export type NewArcadeRoom = typeof arcadeRooms.$inferInsert;
+export type ArcadeRoom = typeof arcadeRooms.$inferSelect
+export type NewArcadeRoom = typeof arcadeRooms.$inferInsert
diff --git a/apps/web/src/db/schema/arcade-sessions.ts b/apps/web/src/db/schema/arcade-sessions.ts
index 774dd45f..5e2bc9e2 100644
--- a/apps/web/src/db/schema/arcade-sessions.ts
+++ b/apps/web/src/db/schema/arcade-sessions.ts
@@ -1,43 +1,43 @@
-import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
-import { arcadeRooms } from "./arcade-rooms";
-import { users } from "./users";
+import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'
+import { arcadeRooms } from './arcade-rooms'
+import { users } from './users'
 
-export const arcadeSessions = sqliteTable("arcade_sessions", {
+export const arcadeSessions = sqliteTable('arcade_sessions', {
   // Room ID is now the primary key - one session per room
   // For room-based multiplayer games, this ensures all members share the same session
-  roomId: text("room_id")
+  roomId: text('room_id')
     .primaryKey()
-    .references(() => arcadeRooms.id, { onDelete: "cascade" }),
+    .references(() => arcadeRooms.id, { onDelete: 'cascade' }),
 
   // User who "owns" this session (typically the room creator)
   // For room-based sessions, this is just for reference/ownership tracking
-  userId: text("user_id")
+  userId: text('user_id')
     .notNull()
-    .references(() => users.id, { onDelete: "cascade" }),
+    .references(() => users.id, { onDelete: 'cascade' }),
 
   // Session metadata
   // Accepts any string - validation happens at runtime against validator registry
-  currentGame: text("current_game").notNull(),
+  currentGame: text('current_game').notNull(),
 
-  gameUrl: text("game_url").notNull(), // e.g., '/arcade/matching'
+  gameUrl: text('game_url').notNull(), // e.g., '/arcade/matching'
 
   // Game state (JSON blob)
-  gameState: text("game_state", { mode: "json" }).notNull(),
+  gameState: text('game_state', { mode: 'json' }).notNull(),
 
   // Active players snapshot (for quick access)
-  activePlayers: text("active_players", { mode: "json" }).notNull(),
+  activePlayers: text('active_players', { mode: 'json' }).notNull(),
 
   // Timing & TTL
-  startedAt: integer("started_at", { mode: "timestamp" }).notNull(),
-  lastActivityAt: integer("last_activity_at", { mode: "timestamp" }).notNull(),
-  expiresAt: integer("expires_at", { mode: "timestamp" }).notNull(), // TTL-based
+  startedAt: integer('started_at', { mode: 'timestamp' }).notNull(),
+  lastActivityAt: integer('last_activity_at', { mode: 'timestamp' }).notNull(),
+  expiresAt: integer('expires_at', { mode: 'timestamp' }).notNull(), // TTL-based
 
   // Status
-  isActive: integer("is_active", { mode: "boolean" }).notNull().default(true),
+  isActive: integer('is_active', { mode: 'boolean' }).notNull().default(true),
 
   // Version for optimistic locking
-  version: integer("version").notNull().default(1),
-});
+  version: integer('version').notNull().default(1),
+})
 
-export type ArcadeSession = typeof arcadeSessions.$inferSelect;
-export type NewArcadeSession = typeof arcadeSessions.$inferInsert;
+export type ArcadeSession = typeof arcadeSessions.$inferSelect
+export type NewArcadeSession = typeof arcadeSessions.$inferInsert
diff --git a/apps/web/src/db/schema/index.ts b/apps/web/src/db/schema/index.ts
index 2c1a701c..aa060b8d 100644
--- a/apps/web/src/db/schema/index.ts
+++ b/apps/web/src/db/schema/index.ts
@@ -5,20 +5,20 @@
  * All tables, relations, and types are exported from here.
  */
 
-export * from "./abacus-settings";
-export * from "./arcade-rooms";
-export * from "./arcade-sessions";
-export * from "./players";
-export * from "./player-stats";
-export * from "./room-members";
-export * from "./room-member-history";
-export * from "./room-invitations";
-export * from "./room-reports";
-export * from "./room-bans";
-export * from "./room-join-requests";
-export * from "./room-game-configs";
-export * from "./user-stats";
-export * from "./users";
-export * from "./worksheet-settings";
-export * from "./worksheet-attempts";
-export * from "./worksheet-mastery";
+export * from './abacus-settings'
+export * from './arcade-rooms'
+export * from './arcade-sessions'
+export * from './players'
+export * from './player-stats'
+export * from './room-members'
+export * from './room-member-history'
+export * from './room-invitations'
+export * from './room-reports'
+export * from './room-bans'
+export * from './room-join-requests'
+export * from './room-game-configs'
+export * from './user-stats'
+export * from './users'
+export * from './worksheet-settings'
+export * from './worksheet-attempts'
+export * from './worksheet-mastery'
diff --git a/apps/web/src/db/schema/player-stats.ts b/apps/web/src/db/schema/player-stats.ts
index 6661e817..1b07fbf3 100644
--- a/apps/web/src/db/schema/player-stats.ts
+++ b/apps/web/src/db/schema/player-stats.ts
@@ -1,5 +1,5 @@
-import { integer, real, sqliteTable, text } from "drizzle-orm/sqlite-core";
-import { players } from "./players";
+import { integer, real, sqliteTable, text } from 'drizzle-orm/sqlite-core'
+import { players } from './players'
 
 /**
  * Player stats table - game statistics per player
@@ -7,29 +7,29 @@ import { players } from "./players";
  * Tracks aggregate performance and per-game breakdowns for each player.
  * One-to-one with players table. Deleted when player is deleted (cascade).
  */
-export const playerStats = sqliteTable("player_stats", {
+export const playerStats = sqliteTable('player_stats', {
   /** Primary key and foreign key to players table */
-  playerId: text("player_id")
+  playerId: text('player_id')
     .primaryKey()
-    .references(() => players.id, { onDelete: "cascade" }),
+    .references(() => players.id, { onDelete: 'cascade' }),
 
   /** Total number of games played across all game types */
-  gamesPlayed: integer("games_played").notNull().default(0),
+  gamesPlayed: integer('games_played').notNull().default(0),
 
   /** Total number of games won */
-  totalWins: integer("total_wins").notNull().default(0),
+  totalWins: integer('total_wins').notNull().default(0),
 
   /** Total number of games lost */
-  totalLosses: integer("total_losses").notNull().default(0),
+  totalLosses: integer('total_losses').notNull().default(0),
 
   /** Best completion time in milliseconds (across all games) */
-  bestTime: integer("best_time"),
+  bestTime: integer('best_time'),
 
   /** Highest accuracy percentage (0.0 - 1.0, across all games) */
-  highestAccuracy: real("highest_accuracy").notNull().default(0),
+  highestAccuracy: real('highest_accuracy').notNull().default(0),
 
   /** Player's most-played game type */
-  favoriteGameType: text("favorite_game_type"),
+  favoriteGameType: text('favorite_game_type'),
 
   /**
    * Per-game statistics breakdown (JSON)
@@ -49,37 +49,37 @@ export const playerStats = sqliteTable("player_stats", {
    *   ...
    * }
    */
-  gameStats: text("game_stats", { mode: "json" })
+  gameStats: text('game_stats', { mode: 'json' })
     .notNull()
-    .default("{}")
+    .default('{}')
     .$type<Record<string, GameStatsBreakdown>>(),
 
   /** When this player last played any game */
-  lastPlayedAt: integer("last_played_at", { mode: "timestamp" }),
+  lastPlayedAt: integer('last_played_at', { mode: 'timestamp' }),
 
   /** When this record was created */
-  createdAt: integer("created_at", { mode: "timestamp" })
+  createdAt: integer('created_at', { mode: 'timestamp' })
     .notNull()
     .$defaultFn(() => new Date()),
 
   /** When this record was last updated */
-  updatedAt: integer("updated_at", { mode: "timestamp" })
+  updatedAt: integer('updated_at', { mode: 'timestamp' })
     .notNull()
     .$defaultFn(() => new Date()),
-});
+})
 
 /**
  * Per-game stats breakdown stored in JSON
  */
 export interface GameStatsBreakdown {
-  gamesPlayed: number;
-  wins: number;
-  losses: number;
-  bestTime: number | null;
-  highestAccuracy: number;
-  averageScore: number;
-  lastPlayed: number; // timestamp
+  gamesPlayed: number
+  wins: number
+  losses: number
+  bestTime: number | null
+  highestAccuracy: number
+  averageScore: number
+  lastPlayed: number // timestamp
 }
 
-export type PlayerStats = typeof playerStats.$inferSelect;
-export type NewPlayerStats = typeof playerStats.$inferInsert;
+export type PlayerStats = typeof playerStats.$inferSelect
+export type NewPlayerStats = typeof playerStats.$inferInsert
diff --git a/apps/web/src/db/schema/players.ts b/apps/web/src/db/schema/players.ts
index fe72b0fc..904bddfa 100644
--- a/apps/web/src/db/schema/players.ts
+++ b/apps/web/src/db/schema/players.ts
@@ -1,6 +1,6 @@
-import { createId } from "@paralleldrive/cuid2";
-import { index, integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
-import { users } from "./users";
+import { createId } from '@paralleldrive/cuid2'
+import { index, integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'
+import { users } from './users'
 
 /**
  * Players table - user-created player profiles for games
@@ -9,41 +9,39 @@ import { users } from "./users";
  * Players are scoped to a user and deleted when user is deleted.
  */
 export const players = sqliteTable(
-  "players",
+  'players',
   {
-    id: text("id")
+    id: text('id')
       .primaryKey()
       .$defaultFn(() => createId()),
 
     /** Foreign key to users table - cascades on delete */
-    userId: text("user_id")
+    userId: text('user_id')
       .notNull()
-      .references(() => users.id, { onDelete: "cascade" }),
+      .references(() => users.id, { onDelete: 'cascade' }),
 
     /** Player display name */
-    name: text("name").notNull(),
+    name: text('name').notNull(),
 
     /** Player emoji avatar */
-    emoji: text("emoji").notNull(),
+    emoji: text('emoji').notNull(),
 
     /** Player color (hex) for UI theming */
-    color: text("color").notNull(),
+    color: text('color').notNull(),
 
     /** Whether this player is currently active in games */
-    isActive: integer("is_active", { mode: "boolean" })
-      .notNull()
-      .default(false),
+    isActive: integer('is_active', { mode: 'boolean' }).notNull().default(false),
 
     /** When this player was created */
-    createdAt: integer("created_at", { mode: "timestamp" })
+    createdAt: integer('created_at', { mode: 'timestamp' })
       .notNull()
       .$defaultFn(() => new Date()),
   },
   (table) => ({
     /** Index for fast lookups by userId */
-    userIdIdx: index("players_user_id_idx").on(table.userId),
-  }),
-);
+    userIdIdx: index('players_user_id_idx').on(table.userId),
+  })
+)
 
-export type Player = typeof players.$inferSelect;
-export type NewPlayer = typeof players.$inferInsert;
+export type Player = typeof players.$inferSelect
+export type NewPlayer = typeof players.$inferInsert
diff --git a/apps/web/src/db/schema/room-bans.ts b/apps/web/src/db/schema/room-bans.ts
index 7ed18212..e6d2511a 100644
--- a/apps/web/src/db/schema/room-bans.ts
+++ b/apps/web/src/db/schema/room-bans.ts
@@ -1,60 +1,45 @@
-import { createId } from "@paralleldrive/cuid2";
-import {
-  integer,
-  sqliteTable,
-  text,
-  uniqueIndex,
-} from "drizzle-orm/sqlite-core";
-import { arcadeRooms } from "./arcade-rooms";
+import { createId } from '@paralleldrive/cuid2'
+import { integer, sqliteTable, text, uniqueIndex } from 'drizzle-orm/sqlite-core'
+import { arcadeRooms } from './arcade-rooms'
 
 /**
  * Users banned from specific rooms by hosts
  */
 export const roomBans = sqliteTable(
-  "room_bans",
+  'room_bans',
   {
-    id: text("id")
+    id: text('id')
       .primaryKey()
       .$defaultFn(() => createId()),
 
-    roomId: text("room_id")
+    roomId: text('room_id')
       .notNull()
-      .references(() => arcadeRooms.id, { onDelete: "cascade" }),
+      .references(() => arcadeRooms.id, { onDelete: 'cascade' }),
 
     // Banned user
-    userId: text("user_id").notNull(),
-    userName: text("user_name", { length: 50 }).notNull(), // Name at time of ban
+    userId: text('user_id').notNull(),
+    userName: text('user_name', { length: 50 }).notNull(), // Name at time of ban
 
     // Who banned them
-    bannedBy: text("banned_by").notNull(), // Host user ID
-    bannedByName: text("banned_by_name", { length: 50 }).notNull(),
+    bannedBy: text('banned_by').notNull(), // Host user ID
+    bannedByName: text('banned_by_name', { length: 50 }).notNull(),
 
     // Ban details
-    reason: text("reason", {
-      enum: [
-        "harassment",
-        "cheating",
-        "inappropriate-name",
-        "spam",
-        "afk",
-        "other",
-      ],
+    reason: text('reason', {
+      enum: ['harassment', 'cheating', 'inappropriate-name', 'spam', 'afk', 'other'],
     }).notNull(),
-    notes: text("notes", { length: 500 }), // Optional notes from host
+    notes: text('notes', { length: 500 }), // Optional notes from host
 
     // Timestamps
-    createdAt: integer("created_at", { mode: "timestamp" })
+    createdAt: integer('created_at', { mode: 'timestamp' })
       .notNull()
       .$defaultFn(() => new Date()),
   },
   (table) => ({
     // One ban record per user per room
-    userRoomIdx: uniqueIndex("idx_room_bans_user_room").on(
-      table.userId,
-      table.roomId,
-    ),
-  }),
-);
+    userRoomIdx: uniqueIndex('idx_room_bans_user_room').on(table.userId, table.roomId),
+  })
+)
 
-export type RoomBan = typeof roomBans.$inferSelect;
-export type NewRoomBan = typeof roomBans.$inferInsert;
+export type RoomBan = typeof roomBans.$inferSelect
+export type NewRoomBan = typeof roomBans.$inferInsert
diff --git a/apps/web/src/db/schema/room-game-configs.ts b/apps/web/src/db/schema/room-game-configs.ts
index ad17e59d..54ed3290 100644
--- a/apps/web/src/db/schema/room-game-configs.ts
+++ b/apps/web/src/db/schema/room-game-configs.ts
@@ -1,31 +1,26 @@
-import { createId } from "@paralleldrive/cuid2";
-import {
-  integer,
-  sqliteTable,
-  text,
-  uniqueIndex,
-} from "drizzle-orm/sqlite-core";
-import { arcadeRooms } from "./arcade-rooms";
+import { createId } from '@paralleldrive/cuid2'
+import { integer, sqliteTable, text, uniqueIndex } from 'drizzle-orm/sqlite-core'
+import { arcadeRooms } from './arcade-rooms'
 
 /**
  * Game-specific configuration settings for arcade rooms
  * Each row represents one game's settings for one room
  */
 export const roomGameConfigs = sqliteTable(
-  "room_game_configs",
+  'room_game_configs',
   {
-    id: text("id")
+    id: text('id')
       .primaryKey()
       .$defaultFn(() => createId()),
 
     // Room reference
-    roomId: text("room_id")
+    roomId: text('room_id')
       .notNull()
-      .references(() => arcadeRooms.id, { onDelete: "cascade" }),
+      .references(() => arcadeRooms.id, { onDelete: 'cascade' }),
 
     // Game identifier
     // Accepts any string - validation happens at runtime against validator registry
-    gameName: text("game_name").notNull(),
+    gameName: text('game_name').notNull(),
 
     // Game-specific configuration JSON
     // Structure depends on gameName:
@@ -34,24 +29,21 @@ export const roomGameConfigs = sqliteTable(
     // - complement-race: TBD
     // - number-guesser: { minNumber, maxNumber, roundsToWin }
     // - math-sprint: { difficulty, questionsPerRound, timePerQuestion }
-    config: text("config", { mode: "json" }).notNull(),
+    config: text('config', { mode: 'json' }).notNull(),
 
     // Timestamps
-    createdAt: integer("created_at", { mode: "timestamp" })
+    createdAt: integer('created_at', { mode: 'timestamp' })
       .notNull()
       .$defaultFn(() => new Date()),
-    updatedAt: integer("updated_at", { mode: "timestamp" })
+    updatedAt: integer('updated_at', { mode: 'timestamp' })
       .notNull()
       .$defaultFn(() => new Date()),
   },
   (table) => ({
     // Ensure only one config per game per room
-    uniqueRoomGame: uniqueIndex("room_game_idx").on(
-      table.roomId,
-      table.gameName,
-    ),
-  }),
-);
+    uniqueRoomGame: uniqueIndex('room_game_idx').on(table.roomId, table.gameName),
+  })
+)
 
-export type RoomGameConfig = typeof roomGameConfigs.$inferSelect;
-export type NewRoomGameConfig = typeof roomGameConfigs.$inferInsert;
+export type RoomGameConfig = typeof roomGameConfigs.$inferSelect
+export type NewRoomGameConfig = typeof roomGameConfigs.$inferInsert
diff --git a/apps/web/src/db/schema/room-invitations.ts b/apps/web/src/db/schema/room-invitations.ts
index 50e166ff..257f1399 100644
--- a/apps/web/src/db/schema/room-invitations.ts
+++ b/apps/web/src/db/schema/room-invitations.ts
@@ -1,69 +1,61 @@
-import { createId } from "@paralleldrive/cuid2";
-import {
-  integer,
-  sqliteTable,
-  text,
-  uniqueIndex,
-} from "drizzle-orm/sqlite-core";
-import { arcadeRooms } from "./arcade-rooms";
+import { createId } from '@paralleldrive/cuid2'
+import { integer, sqliteTable, text, uniqueIndex } from 'drizzle-orm/sqlite-core'
+import { arcadeRooms } from './arcade-rooms'
 
 /**
  * Room invitations sent by hosts to users
  * Used to invite users back after unbanning or to invite new users
  */
 export const roomInvitations = sqliteTable(
-  "room_invitations",
+  'room_invitations',
   {
-    id: text("id")
+    id: text('id')
       .primaryKey()
       .$defaultFn(() => createId()),
 
-    roomId: text("room_id")
+    roomId: text('room_id')
       .notNull()
-      .references(() => arcadeRooms.id, { onDelete: "cascade" }),
+      .references(() => arcadeRooms.id, { onDelete: 'cascade' }),
 
     // Invited user
-    userId: text("user_id").notNull(),
-    userName: text("user_name", { length: 50 }).notNull(), // Name at time of invitation
+    userId: text('user_id').notNull(),
+    userName: text('user_name', { length: 50 }).notNull(), // Name at time of invitation
 
     // Who invited them
-    invitedBy: text("invited_by").notNull(), // Host user ID
-    invitedByName: text("invited_by_name", { length: 50 }).notNull(),
+    invitedBy: text('invited_by').notNull(), // Host user ID
+    invitedByName: text('invited_by_name', { length: 50 }).notNull(),
 
     // Invitation status
-    status: text("status", {
-      enum: ["pending", "accepted", "declined", "expired"],
+    status: text('status', {
+      enum: ['pending', 'accepted', 'declined', 'expired'],
     })
       .notNull()
-      .default("pending"),
+      .default('pending'),
 
     // Type of invitation
-    invitationType: text("invitation_type", {
-      enum: ["manual", "auto-unban", "auto-create"],
+    invitationType: text('invitation_type', {
+      enum: ['manual', 'auto-unban', 'auto-create'],
     })
       .notNull()
-      .default("manual"),
+      .default('manual'),
 
     // Optional message
-    message: text("message", { length: 500 }),
+    message: text('message', { length: 500 }),
 
     // Timestamps
-    createdAt: integer("created_at", { mode: "timestamp" })
+    createdAt: integer('created_at', { mode: 'timestamp' })
       .notNull()
       .$defaultFn(() => new Date()),
 
-    respondedAt: integer("responded_at", { mode: "timestamp" }),
+    respondedAt: integer('responded_at', { mode: 'timestamp' }),
 
-    expiresAt: integer("expires_at", { mode: "timestamp" }), // Optional expiration
+    expiresAt: integer('expires_at', { mode: 'timestamp' }), // Optional expiration
   },
   (table) => ({
     // One pending invitation per user per room
-    userRoomIdx: uniqueIndex("idx_room_invitations_user_room").on(
-      table.userId,
-      table.roomId,
-    ),
-  }),
-);
+    userRoomIdx: uniqueIndex('idx_room_invitations_user_room').on(table.userId, table.roomId),
+  })
+)
 
-export type RoomInvitation = typeof roomInvitations.$inferSelect;
-export type NewRoomInvitation = typeof roomInvitations.$inferInsert;
+export type RoomInvitation = typeof roomInvitations.$inferSelect
+export type NewRoomInvitation = typeof roomInvitations.$inferInsert
diff --git a/apps/web/src/db/schema/room-join-requests.ts b/apps/web/src/db/schema/room-join-requests.ts
index 34473aff..d98b7638 100644
--- a/apps/web/src/db/schema/room-join-requests.ts
+++ b/apps/web/src/db/schema/room-join-requests.ts
@@ -1,53 +1,45 @@
-import { createId } from "@paralleldrive/cuid2";
-import {
-  integer,
-  sqliteTable,
-  text,
-  uniqueIndex,
-} from "drizzle-orm/sqlite-core";
-import { arcadeRooms } from "./arcade-rooms";
+import { createId } from '@paralleldrive/cuid2'
+import { integer, sqliteTable, text, uniqueIndex } from 'drizzle-orm/sqlite-core'
+import { arcadeRooms } from './arcade-rooms'
 
 /**
  * Join requests for approval-only rooms
  */
 export const roomJoinRequests = sqliteTable(
-  "room_join_requests",
+  'room_join_requests',
   {
-    id: text("id")
+    id: text('id')
       .primaryKey()
       .$defaultFn(() => createId()),
 
-    roomId: text("room_id")
+    roomId: text('room_id')
       .notNull()
-      .references(() => arcadeRooms.id, { onDelete: "cascade" }),
+      .references(() => arcadeRooms.id, { onDelete: 'cascade' }),
 
     // Requesting user
-    userId: text("user_id").notNull(),
-    userName: text("user_name", { length: 50 }).notNull(),
+    userId: text('user_id').notNull(),
+    userName: text('user_name', { length: 50 }).notNull(),
 
     // Request status
-    status: text("status", {
-      enum: ["pending", "approved", "denied"],
+    status: text('status', {
+      enum: ['pending', 'approved', 'denied'],
     })
       .notNull()
-      .default("pending"),
+      .default('pending'),
 
     // Timestamps
-    requestedAt: integer("requested_at", { mode: "timestamp" })
+    requestedAt: integer('requested_at', { mode: 'timestamp' })
       .notNull()
       .$defaultFn(() => new Date()),
-    reviewedAt: integer("reviewed_at", { mode: "timestamp" }),
-    reviewedBy: text("reviewed_by"), // Host user ID who reviewed
-    reviewedByName: text("reviewed_by_name", { length: 50 }),
+    reviewedAt: integer('reviewed_at', { mode: 'timestamp' }),
+    reviewedBy: text('reviewed_by'), // Host user ID who reviewed
+    reviewedByName: text('reviewed_by_name', { length: 50 }),
   },
   (table) => ({
     // One pending request per user per room
-    userRoomIdx: uniqueIndex("idx_room_join_requests_user_room").on(
-      table.userId,
-      table.roomId,
-    ),
-  }),
-);
+    userRoomIdx: uniqueIndex('idx_room_join_requests_user_room').on(table.userId, table.roomId),
+  })
+)
 
-export type RoomJoinRequest = typeof roomJoinRequests.$inferSelect;
-export type NewRoomJoinRequest = typeof roomJoinRequests.$inferInsert;
+export type RoomJoinRequest = typeof roomJoinRequests.$inferSelect
+export type NewRoomJoinRequest = typeof roomJoinRequests.$inferInsert
diff --git a/apps/web/src/db/schema/room-member-history.ts b/apps/web/src/db/schema/room-member-history.ts
index d406d226..25024095 100644
--- a/apps/web/src/db/schema/room-member-history.ts
+++ b/apps/web/src/db/schema/room-member-history.ts
@@ -1,30 +1,30 @@
-import { createId } from "@paralleldrive/cuid2";
-import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
-import { arcadeRooms } from "./arcade-rooms";
+import { createId } from '@paralleldrive/cuid2'
+import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'
+import { arcadeRooms } from './arcade-rooms'
 
 /**
  * Historical record of all users who have ever been in a room
  * This table is append-only and tracks the complete history of room membership
  */
-export const roomMemberHistory = sqliteTable("room_member_history", {
-  id: text("id")
+export const roomMemberHistory = sqliteTable('room_member_history', {
+  id: text('id')
     .primaryKey()
     .$defaultFn(() => createId()),
 
-  roomId: text("room_id")
+  roomId: text('room_id')
     .notNull()
-    .references(() => arcadeRooms.id, { onDelete: "cascade" }),
+    .references(() => arcadeRooms.id, { onDelete: 'cascade' }),
 
-  userId: text("user_id").notNull(),
-  displayName: text("display_name", { length: 50 }).notNull(),
+  userId: text('user_id').notNull(),
+  displayName: text('display_name', { length: 50 }).notNull(),
 
   // First time this user joined the room
-  firstJoinedAt: integer("first_joined_at", { mode: "timestamp" })
+  firstJoinedAt: integer('first_joined_at', { mode: 'timestamp' })
     .notNull()
     .$defaultFn(() => new Date()),
 
   // Last time we saw this user in the room
-  lastSeenAt: integer("last_seen_at", { mode: "timestamp" })
+  lastSeenAt: integer('last_seen_at', { mode: 'timestamp' })
     .notNull()
     .$defaultFn(() => new Date()),
 
@@ -33,17 +33,17 @@ export const roomMemberHistory = sqliteTable("room_member_history", {
   // 'left' - voluntarily left
   // 'kicked' - kicked by host
   // 'banned' - banned by host
-  lastAction: text("last_action", {
-    enum: ["active", "left", "kicked", "banned"],
+  lastAction: text('last_action', {
+    enum: ['active', 'left', 'kicked', 'banned'],
   })
     .notNull()
-    .default("active"),
+    .default('active'),
 
   // When the last action occurred
-  lastActionAt: integer("last_action_at", { mode: "timestamp" })
+  lastActionAt: integer('last_action_at', { mode: 'timestamp' })
     .notNull()
     .$defaultFn(() => new Date()),
-});
+})
 
-export type RoomMemberHistory = typeof roomMemberHistory.$inferSelect;
-export type NewRoomMemberHistory = typeof roomMemberHistory.$inferInsert;
+export type RoomMemberHistory = typeof roomMemberHistory.$inferSelect
+export type NewRoomMemberHistory = typeof roomMemberHistory.$inferInsert
diff --git a/apps/web/src/db/schema/room-members.ts b/apps/web/src/db/schema/room-members.ts
index 1d5a1281..308aebf3 100644
--- a/apps/web/src/db/schema/room-members.ts
+++ b/apps/web/src/db/schema/room-members.ts
@@ -1,43 +1,36 @@
-import { createId } from "@paralleldrive/cuid2";
-import {
-  integer,
-  sqliteTable,
-  text,
-  uniqueIndex,
-} from "drizzle-orm/sqlite-core";
-import { arcadeRooms } from "./arcade-rooms";
+import { createId } from '@paralleldrive/cuid2'
+import { integer, sqliteTable, text, uniqueIndex } from 'drizzle-orm/sqlite-core'
+import { arcadeRooms } from './arcade-rooms'
 
 export const roomMembers = sqliteTable(
-  "room_members",
+  'room_members',
   {
-    id: text("id")
+    id: text('id')
       .primaryKey()
       .$defaultFn(() => createId()),
 
-    roomId: text("room_id")
+    roomId: text('room_id')
       .notNull()
-      .references(() => arcadeRooms.id, { onDelete: "cascade" }),
+      .references(() => arcadeRooms.id, { onDelete: 'cascade' }),
 
-    userId: text("user_id").notNull(), // User/guest ID - UNIQUE: one room per user (enforced by index below)
-    displayName: text("display_name", { length: 50 }).notNull(),
+    userId: text('user_id').notNull(), // User/guest ID - UNIQUE: one room per user (enforced by index below)
+    displayName: text('display_name', { length: 50 }).notNull(),
 
-    isCreator: integer("is_creator", { mode: "boolean" })
-      .notNull()
-      .default(false),
+    isCreator: integer('is_creator', { mode: 'boolean' }).notNull().default(false),
 
-    joinedAt: integer("joined_at", { mode: "timestamp" })
+    joinedAt: integer('joined_at', { mode: 'timestamp' })
       .notNull()
       .$defaultFn(() => new Date()),
-    lastSeen: integer("last_seen", { mode: "timestamp" })
+    lastSeen: integer('last_seen', { mode: 'timestamp' })
       .notNull()
       .$defaultFn(() => new Date()),
-    isOnline: integer("is_online", { mode: "boolean" }).notNull().default(true),
+    isOnline: integer('is_online', { mode: 'boolean' }).notNull().default(true),
   },
   (table) => ({
     // Explicit unique index for clarity and database-level enforcement
-    userIdIdx: uniqueIndex("idx_room_members_user_id_unique").on(table.userId),
-  }),
-);
+    userIdIdx: uniqueIndex('idx_room_members_user_id_unique').on(table.userId),
+  })
+)
 
-export type RoomMember = typeof roomMembers.$inferSelect;
-export type NewRoomMember = typeof roomMembers.$inferInsert;
+export type RoomMember = typeof roomMembers.$inferSelect
+export type NewRoomMember = typeof roomMembers.$inferInsert
diff --git a/apps/web/src/db/schema/room-reports.ts b/apps/web/src/db/schema/room-reports.ts
index 8dc32cbe..b6baa405 100644
--- a/apps/web/src/db/schema/room-reports.ts
+++ b/apps/web/src/db/schema/room-reports.ts
@@ -1,54 +1,47 @@
-import { createId } from "@paralleldrive/cuid2";
-import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
-import { arcadeRooms } from "./arcade-rooms";
+import { createId } from '@paralleldrive/cuid2'
+import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'
+import { arcadeRooms } from './arcade-rooms'
 
 /**
  * Reports submitted by room members about other members
  */
-export const roomReports = sqliteTable("room_reports", {
-  id: text("id")
+export const roomReports = sqliteTable('room_reports', {
+  id: text('id')
     .primaryKey()
     .$defaultFn(() => createId()),
 
-  roomId: text("room_id")
+  roomId: text('room_id')
     .notNull()
-    .references(() => arcadeRooms.id, { onDelete: "cascade" }),
+    .references(() => arcadeRooms.id, { onDelete: 'cascade' }),
 
   // Who reported
-  reporterId: text("reporter_id").notNull(),
-  reporterName: text("reporter_name", { length: 50 }).notNull(),
+  reporterId: text('reporter_id').notNull(),
+  reporterName: text('reporter_name', { length: 50 }).notNull(),
 
   // Who was reported
-  reportedUserId: text("reported_user_id").notNull(),
-  reportedUserName: text("reported_user_name", { length: 50 }).notNull(),
+  reportedUserId: text('reported_user_id').notNull(),
+  reportedUserName: text('reported_user_name', { length: 50 }).notNull(),
 
   // Report details
-  reason: text("reason", {
-    enum: [
-      "harassment",
-      "cheating",
-      "inappropriate-name",
-      "spam",
-      "afk",
-      "other",
-    ],
+  reason: text('reason', {
+    enum: ['harassment', 'cheating', 'inappropriate-name', 'spam', 'afk', 'other'],
   }).notNull(),
-  details: text("details", { length: 500 }), // Optional additional context
+  details: text('details', { length: 500 }), // Optional additional context
 
   // Status tracking
-  status: text("status", {
-    enum: ["pending", "reviewed", "dismissed"],
+  status: text('status', {
+    enum: ['pending', 'reviewed', 'dismissed'],
   })
     .notNull()
-    .default("pending"),
+    .default('pending'),
 
   // Timestamps
-  createdAt: integer("created_at", { mode: "timestamp" })
+  createdAt: integer('created_at', { mode: 'timestamp' })
     .notNull()
     .$defaultFn(() => new Date()),
-  reviewedAt: integer("reviewed_at", { mode: "timestamp" }),
-  reviewedBy: text("reviewed_by"), // Host user ID who reviewed
-});
+  reviewedAt: integer('reviewed_at', { mode: 'timestamp' }),
+  reviewedBy: text('reviewed_by'), // Host user ID who reviewed
+})
 
-export type RoomReport = typeof roomReports.$inferSelect;
-export type NewRoomReport = typeof roomReports.$inferInsert;
+export type RoomReport = typeof roomReports.$inferSelect
+export type NewRoomReport = typeof roomReports.$inferInsert
diff --git a/apps/web/src/db/schema/user-stats.ts b/apps/web/src/db/schema/user-stats.ts
index fbe0bc32..2e63fd83 100644
--- a/apps/web/src/db/schema/user-stats.ts
+++ b/apps/web/src/db/schema/user-stats.ts
@@ -1,5 +1,5 @@
-import { integer, real, sqliteTable, text } from "drizzle-orm/sqlite-core";
-import { users } from "./users";
+import { integer, real, sqliteTable, text } from 'drizzle-orm/sqlite-core'
+import { users } from './users'
 
 /**
  * User stats table - game statistics per user
@@ -7,29 +7,29 @@ import { users } from "./users";
  * One-to-one with users table. Tracks aggregate game performance.
  * Deleted when user is deleted (cascade).
  */
-export const userStats = sqliteTable("user_stats", {
+export const userStats = sqliteTable('user_stats', {
   /** Primary key and foreign key to users table */
-  userId: text("user_id")
+  userId: text('user_id')
     .primaryKey()
-    .references(() => users.id, { onDelete: "cascade" }),
+    .references(() => users.id, { onDelete: 'cascade' }),
 
   /** Total number of games played */
-  gamesPlayed: integer("games_played").notNull().default(0),
+  gamesPlayed: integer('games_played').notNull().default(0),
 
   /** Total number of games won */
-  totalWins: integer("total_wins").notNull().default(0),
+  totalWins: integer('total_wins').notNull().default(0),
 
   /** User's most-played game type */
-  favoriteGameType: text("favorite_game_type", {
-    enum: ["abacus-numeral", "complement-pairs"],
+  favoriteGameType: text('favorite_game_type', {
+    enum: ['abacus-numeral', 'complement-pairs'],
   }),
 
   /** Best completion time in milliseconds */
-  bestTime: integer("best_time"),
+  bestTime: integer('best_time'),
 
   /** Highest accuracy percentage (0.0 - 1.0) */
-  highestAccuracy: real("highest_accuracy").notNull().default(0),
-});
+  highestAccuracy: real('highest_accuracy').notNull().default(0),
+})
 
-export type UserStats = typeof userStats.$inferSelect;
-export type NewUserStats = typeof userStats.$inferInsert;
+export type UserStats = typeof userStats.$inferSelect
+export type NewUserStats = typeof userStats.$inferInsert
diff --git a/apps/web/src/db/schema/users.ts b/apps/web/src/db/schema/users.ts
index fce0043d..fcd4cd53 100644
--- a/apps/web/src/db/schema/users.ts
+++ b/apps/web/src/db/schema/users.ts
@@ -1,5 +1,5 @@
-import { createId } from "@paralleldrive/cuid2";
-import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
+import { createId } from '@paralleldrive/cuid2'
+import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'
 
 /**
  * Users table - stores both guest and authenticated users
@@ -7,28 +7,28 @@ import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
  * Guest users are created automatically on first visit via middleware.
  * They can upgrade to full accounts later while preserving their data.
  */
-export const users = sqliteTable("users", {
-  id: text("id")
+export const users = sqliteTable('users', {
+  id: text('id')
     .primaryKey()
     .$defaultFn(() => createId()),
 
   /** Stable guest ID from HttpOnly cookie - unique per browser session */
-  guestId: text("guest_id").notNull().unique(),
+  guestId: text('guest_id').notNull().unique(),
 
   /** When this user record was created */
-  createdAt: integer("created_at", { mode: "timestamp" })
+  createdAt: integer('created_at', { mode: 'timestamp' })
     .notNull()
     .$defaultFn(() => new Date()),
 
   /** When guest upgraded to full account (null for guests) */
-  upgradedAt: integer("upgraded_at", { mode: "timestamp" }),
+  upgradedAt: integer('upgraded_at', { mode: 'timestamp' }),
 
   /** Email (only set after upgrade) */
-  email: text("email").unique(),
+  email: text('email').unique(),
 
   /** Display name (only set after upgrade) */
-  name: text("name"),
-});
+  name: text('name'),
+})
 
-export type User = typeof users.$inferSelect;
-export type NewUser = typeof users.$inferInsert;
+export type User = typeof users.$inferSelect
+export type NewUser = typeof users.$inferInsert
diff --git a/apps/web/src/db/schema/worksheet-settings.ts b/apps/web/src/db/schema/worksheet-settings.ts
index c1547832..141daf6f 100644
--- a/apps/web/src/db/schema/worksheet-settings.ts
+++ b/apps/web/src/db/schema/worksheet-settings.ts
@@ -1,4 +1,4 @@
-import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
+import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core'
 
 /**
  * Worksheet generator settings table - persists user preferences per worksheet type
@@ -12,25 +12,25 @@ import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
  * Note: No foreign key constraint - allows guest users to save settings
  * (matches pattern used by room_members table)
  */
-export const worksheetSettings = sqliteTable("worksheet_settings", {
+export const worksheetSettings = sqliteTable('worksheet_settings', {
   /** Unique identifier (UUID) */
-  id: text("id").primaryKey(),
+  id: text('id').primaryKey(),
 
   /** User ID (may be authenticated user or guest ID) */
-  userId: text("user_id").notNull(),
+  userId: text('user_id').notNull(),
 
   /** Type of worksheet: 'addition', 'subtraction', 'multiplication', etc. */
-  worksheetType: text("worksheet_type").notNull(),
+  worksheetType: text('worksheet_type').notNull(),
 
   /** JSON blob containing versioned settings (see config-schemas.ts for types) */
-  config: text("config").notNull(),
+  config: text('config').notNull(),
 
   /** Timestamp of creation */
-  createdAt: integer("created_at", { mode: "timestamp" }).notNull(),
+  createdAt: integer('created_at', { mode: 'timestamp' }).notNull(),
 
   /** Timestamp of last update */
-  updatedAt: integer("updated_at", { mode: "timestamp" }).notNull(),
-});
+  updatedAt: integer('updated_at', { mode: 'timestamp' }).notNull(),
+})
 
-export type WorksheetSettings = typeof worksheetSettings.$inferSelect;
-export type NewWorksheetSettings = typeof worksheetSettings.$inferInsert;
+export type WorksheetSettings = typeof worksheetSettings.$inferSelect
+export type NewWorksheetSettings = typeof worksheetSettings.$inferInsert
diff --git a/apps/web/src/hooks/__tests__/useOptimisticGameState.test.ts b/apps/web/src/hooks/__tests__/useOptimisticGameState.test.ts
index ef258bd6..65b3453d 100644
--- a/apps/web/src/hooks/__tests__/useOptimisticGameState.test.ts
+++ b/apps/web/src/hooks/__tests__/useOptimisticGameState.test.ts
@@ -1,271 +1,271 @@
-import { act, renderHook } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import type { GameMove } from "@/lib/arcade/validation";
-import { useOptimisticGameState } from "../useOptimisticGameState";
+import { act, renderHook } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import type { GameMove } from '@/lib/arcade/validation'
+import { useOptimisticGameState } from '../useOptimisticGameState'
 
 interface TestGameState {
-  value: number;
-  moves: number;
+  value: number
+  moves: number
 }
 
-describe("useOptimisticGameState", () => {
-  const initialState: TestGameState = { value: 0, moves: 0 };
+describe('useOptimisticGameState', () => {
+  const initialState: TestGameState = { value: 0, moves: 0 }
 
   const applyMove = (state: TestGameState, move: GameMove): TestGameState => {
-    if (move.type === "INCREMENT") {
-      return { value: state.value + 1, moves: state.moves + 1 };
+    if (move.type === 'INCREMENT') {
+      return { value: state.value + 1, moves: state.moves + 1 }
     }
-    return state;
-  };
+    return state
+  }
 
-  it("should initialize with initial state", () => {
+  it('should initialize with initial state', () => {
     const { result } = renderHook(() =>
       useOptimisticGameState({
         initialState,
         applyMove,
-      }),
-    );
+      })
+    )
 
-    expect(result.current.state).toEqual(initialState);
-    expect(result.current.version).toBe(1);
-    expect(result.current.hasPendingMoves).toBe(false);
-  });
+    expect(result.current.state).toEqual(initialState)
+    expect(result.current.version).toBe(1)
+    expect(result.current.hasPendingMoves).toBe(false)
+  })
 
-  it("should apply optimistic move immediately", () => {
+  it('should apply optimistic move immediately', () => {
     const { result } = renderHook(() =>
       useOptimisticGameState({
         initialState,
         applyMove,
-      }),
-    );
+      })
+    )
 
     const move: GameMove = {
-      type: "INCREMENT",
-      playerId: "test",
-      userId: "test-user",
+      type: 'INCREMENT',
+      playerId: 'test',
+      userId: 'test-user',
       timestamp: Date.now(),
       data: {},
-    };
+    }
 
     act(() => {
-      result.current.applyOptimisticMove(move);
-    });
+      result.current.applyOptimisticMove(move)
+    })
 
-    expect(result.current.state).toEqual({ value: 1, moves: 1 });
-    expect(result.current.hasPendingMoves).toBe(true);
-  });
+    expect(result.current.state).toEqual({ value: 1, moves: 1 })
+    expect(result.current.hasPendingMoves).toBe(true)
+  })
 
-  it("should handle move acceptance from server", () => {
+  it('should handle move acceptance from server', () => {
     const { result } = renderHook(() =>
       useOptimisticGameState({
         initialState,
         applyMove,
-      }),
-    );
+      })
+    )
 
     const move: GameMove = {
-      type: "INCREMENT",
-      playerId: "test",
-      userId: "test-user",
+      type: 'INCREMENT',
+      playerId: 'test',
+      userId: 'test-user',
       timestamp: 123,
       data: {},
-    };
+    }
 
     // Apply optimistically
     act(() => {
-      result.current.applyOptimisticMove(move);
-    });
+      result.current.applyOptimisticMove(move)
+    })
 
-    expect(result.current.hasPendingMoves).toBe(true);
+    expect(result.current.hasPendingMoves).toBe(true)
 
     // Server accepts
-    const serverState: TestGameState = { value: 1, moves: 1 };
+    const serverState: TestGameState = { value: 1, moves: 1 }
     act(() => {
-      result.current.handleMoveAccepted(serverState, 2, move);
-    });
+      result.current.handleMoveAccepted(serverState, 2, move)
+    })
 
-    expect(result.current.state).toEqual(serverState);
-    expect(result.current.version).toBe(2);
-    expect(result.current.hasPendingMoves).toBe(false);
-  });
+    expect(result.current.state).toEqual(serverState)
+    expect(result.current.version).toBe(2)
+    expect(result.current.hasPendingMoves).toBe(false)
+  })
 
-  it("should handle move rejection from server", () => {
-    const onMoveRejected = vi.fn();
+  it('should handle move rejection from server', () => {
+    const onMoveRejected = vi.fn()
     const { result } = renderHook(() =>
       useOptimisticGameState({
         initialState,
         applyMove,
         onMoveRejected,
-      }),
-    );
+      })
+    )
 
     const move: GameMove = {
-      type: "INCREMENT",
-      playerId: "test",
-      userId: "test-user",
+      type: 'INCREMENT',
+      playerId: 'test',
+      userId: 'test-user',
       timestamp: 123,
       data: {},
-    };
+    }
 
     // Apply optimistically
     act(() => {
-      result.current.applyOptimisticMove(move);
-    });
+      result.current.applyOptimisticMove(move)
+    })
 
-    expect(result.current.state).toEqual({ value: 1, moves: 1 });
+    expect(result.current.state).toEqual({ value: 1, moves: 1 })
 
     // Server rejects
     act(() => {
-      result.current.handleMoveRejected("Invalid move", move);
-    });
+      result.current.handleMoveRejected('Invalid move', move)
+    })
 
     // Should rollback to initial state
-    expect(result.current.state).toEqual(initialState);
-    expect(result.current.hasPendingMoves).toBe(false);
-    expect(onMoveRejected).toHaveBeenCalledWith("Invalid move", move);
-  });
+    expect(result.current.state).toEqual(initialState)
+    expect(result.current.hasPendingMoves).toBe(false)
+    expect(onMoveRejected).toHaveBeenCalledWith('Invalid move', move)
+  })
 
-  it("should handle multiple pending moves", () => {
+  it('should handle multiple pending moves', () => {
     const { result } = renderHook(() =>
       useOptimisticGameState({
         initialState,
         applyMove,
-      }),
-    );
+      })
+    )
 
     const move1: GameMove = {
-      type: "INCREMENT",
-      playerId: "test",
-      userId: "test-user",
+      type: 'INCREMENT',
+      playerId: 'test',
+      userId: 'test-user',
       timestamp: 123,
       data: {},
-    };
+    }
 
     const move2: GameMove = {
-      type: "INCREMENT",
-      playerId: "test",
-      userId: "test-user",
+      type: 'INCREMENT',
+      playerId: 'test',
+      userId: 'test-user',
       timestamp: 124,
       data: {},
-    };
+    }
 
     // Apply two moves optimistically
     act(() => {
-      result.current.applyOptimisticMove(move1);
-      result.current.applyOptimisticMove(move2);
-    });
+      result.current.applyOptimisticMove(move1)
+      result.current.applyOptimisticMove(move2)
+    })
 
-    expect(result.current.state).toEqual({ value: 2, moves: 2 });
-    expect(result.current.hasPendingMoves).toBe(true);
+    expect(result.current.state).toEqual({ value: 2, moves: 2 })
+    expect(result.current.hasPendingMoves).toBe(true)
 
     // Server accepts first move
     act(() => {
-      result.current.handleMoveAccepted({ value: 1, moves: 1 }, 2, move1);
-    });
+      result.current.handleMoveAccepted({ value: 1, moves: 1 }, 2, move1)
+    })
 
     // Should still have second move pending
-    expect(result.current.state).toEqual({ value: 2, moves: 2 });
-    expect(result.current.hasPendingMoves).toBe(true);
+    expect(result.current.state).toEqual({ value: 2, moves: 2 })
+    expect(result.current.hasPendingMoves).toBe(true)
 
     // Server accepts second move
     act(() => {
-      result.current.handleMoveAccepted({ value: 2, moves: 2 }, 3, move2);
-    });
+      result.current.handleMoveAccepted({ value: 2, moves: 2 }, 3, move2)
+    })
 
-    expect(result.current.state).toEqual({ value: 2, moves: 2 });
-    expect(result.current.hasPendingMoves).toBe(false);
-  });
+    expect(result.current.state).toEqual({ value: 2, moves: 2 })
+    expect(result.current.hasPendingMoves).toBe(false)
+  })
 
-  it("should sync with server state", () => {
+  it('should sync with server state', () => {
     const { result } = renderHook(() =>
       useOptimisticGameState({
         initialState,
         applyMove,
-      }),
-    );
+      })
+    )
 
     // Apply some optimistic moves
     act(() => {
       result.current.applyOptimisticMove({
-        type: "INCREMENT",
-        playerId: "test",
-        userId: "test-user",
+        type: 'INCREMENT',
+        playerId: 'test',
+        userId: 'test-user',
         timestamp: 123,
         data: {},
-      });
-    });
+      })
+    })
 
-    expect(result.current.hasPendingMoves).toBe(true);
+    expect(result.current.hasPendingMoves).toBe(true)
 
     // Sync with server (e.g., on reconnect)
-    const serverState: TestGameState = { value: 5, moves: 5 };
+    const serverState: TestGameState = { value: 5, moves: 5 }
     act(() => {
-      result.current.syncWithServer(serverState, 10);
-    });
+      result.current.syncWithServer(serverState, 10)
+    })
 
-    expect(result.current.state).toEqual(serverState);
-    expect(result.current.version).toBe(10);
-    expect(result.current.hasPendingMoves).toBe(false);
-  });
+    expect(result.current.state).toEqual(serverState)
+    expect(result.current.version).toBe(10)
+    expect(result.current.hasPendingMoves).toBe(false)
+  })
 
-  it("should reset to initial state", () => {
+  it('should reset to initial state', () => {
     const { result } = renderHook(() =>
       useOptimisticGameState({
         initialState,
         applyMove,
-      }),
-    );
+      })
+    )
 
     // Make some changes
     act(() => {
       result.current.applyOptimisticMove({
-        type: "INCREMENT",
-        playerId: "test",
-        userId: "test-user",
+        type: 'INCREMENT',
+        playerId: 'test',
+        userId: 'test-user',
         timestamp: 123,
         data: {},
-      });
-    });
+      })
+    })
 
-    expect(result.current.state).not.toEqual(initialState);
+    expect(result.current.state).not.toEqual(initialState)
 
     // Reset
     act(() => {
-      result.current.reset();
-    });
+      result.current.reset()
+    })
 
-    expect(result.current.state).toEqual(initialState);
-    expect(result.current.version).toBe(1);
-    expect(result.current.hasPendingMoves).toBe(false);
-  });
+    expect(result.current.state).toEqual(initialState)
+    expect(result.current.version).toBe(1)
+    expect(result.current.hasPendingMoves).toBe(false)
+  })
 
-  it("should call onMoveAccepted callback", () => {
-    const onMoveAccepted = vi.fn();
+  it('should call onMoveAccepted callback', () => {
+    const onMoveAccepted = vi.fn()
     const { result } = renderHook(() =>
       useOptimisticGameState({
         initialState,
         applyMove,
         onMoveAccepted,
-      }),
-    );
+      })
+    )
 
     const move: GameMove = {
-      type: "INCREMENT",
-      playerId: "test",
-      userId: "test-user",
+      type: 'INCREMENT',
+      playerId: 'test',
+      userId: 'test-user',
       timestamp: 123,
       data: {},
-    };
+    }
 
     act(() => {
-      result.current.applyOptimisticMove(move);
-    });
+      result.current.applyOptimisticMove(move)
+    })
 
-    const serverState: TestGameState = { value: 1, moves: 1 };
+    const serverState: TestGameState = { value: 1, moves: 1 }
     act(() => {
-      result.current.handleMoveAccepted(serverState, 2, move);
-    });
+      result.current.handleMoveAccepted(serverState, 2, move)
+    })
 
-    expect(onMoveAccepted).toHaveBeenCalledWith(serverState, move);
-  });
-});
+    expect(onMoveAccepted).toHaveBeenCalledWith(serverState, move)
+  })
+})
diff --git a/apps/web/src/hooks/__tests__/useRoomData.test.tsx b/apps/web/src/hooks/__tests__/useRoomData.test.tsx
index 8c72ef07..ecbeb7cb 100644
--- a/apps/web/src/hooks/__tests__/useRoomData.test.tsx
+++ b/apps/web/src/hooks/__tests__/useRoomData.test.tsx
@@ -1,21 +1,21 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { renderHook, waitFor } from "@testing-library/react";
-import { beforeEach, describe, expect, test, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
 import {
   useCreateRoom,
   useGetRoomByCode,
   useJoinRoom,
   useLeaveRoom,
   useRoomData,
-} from "../useRoomData";
+} from '../useRoomData'
 
 // Mock the useViewerId hook
-vi.mock("../useViewerId", () => ({
-  useViewerId: () => ({ data: "test-user-id" }),
-}));
+vi.mock('../useViewerId', () => ({
+  useViewerId: () => ({ data: 'test-user-id' }),
+}))
 
 // Mock socket.io-client
-vi.mock("socket.io-client", () => ({
+vi.mock('socket.io-client', () => ({
   io: vi.fn(() => ({
     on: vi.fn(),
     off: vi.fn(),
@@ -23,10 +23,10 @@ vi.mock("socket.io-client", () => ({
     disconnect: vi.fn(),
     connected: false,
   })),
-}));
+}))
 
-describe("useRoomData hooks", () => {
-  let queryClient: QueryClient;
+describe('useRoomData hooks', () => {
+  let queryClient: QueryClient
 
   beforeEach(() => {
     queryClient = new QueryClient({
@@ -34,405 +34,403 @@ describe("useRoomData hooks", () => {
         queries: { retry: false },
         mutations: { retry: false },
       },
-    });
-    vi.clearAllMocks();
-    global.fetch = vi.fn();
-  });
+    })
+    vi.clearAllMocks()
+    global.fetch = vi.fn()
+  })
 
   const wrapper = ({ children }: { children: React.ReactNode }) => (
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  );
+  )
 
-  describe("useRoomData", () => {
-    test("returns null roomData when not in a room", async () => {
+  describe('useRoomData', () => {
+    test('returns null roomData when not in a room', async () => {
       global.fetch = vi.fn().mockResolvedValue({
         ok: false,
         status: 404,
-      });
+      })
 
-      const { result } = renderHook(() => useRoomData(), { wrapper });
+      const { result } = renderHook(() => useRoomData(), { wrapper })
 
       await waitFor(() => {
-        expect(result.current.roomData).toBeNull();
-        expect(result.current.isInRoom).toBe(false);
-      });
-    });
+        expect(result.current.roomData).toBeNull()
+        expect(result.current.isInRoom).toBe(false)
+      })
+    })
 
-    test("returns room data when user is in a room", async () => {
+    test('returns room data when user is in a room', async () => {
       const mockRoomData = {
         room: {
-          id: "room-123",
-          name: "Test Room",
-          code: "ABC123",
-          gameName: "matching",
+          id: 'room-123',
+          name: 'Test Room',
+          code: 'ABC123',
+          gameName: 'matching',
         },
         members: [],
         memberPlayers: {},
-      };
+      }
 
       global.fetch = vi.fn().mockResolvedValue({
         ok: true,
         json: async () => mockRoomData,
-      });
+      })
 
-      const { result } = renderHook(() => useRoomData(), { wrapper });
+      const { result } = renderHook(() => useRoomData(), { wrapper })
 
       await waitFor(() => {
         expect(result.current.roomData).toEqual({
-          id: "room-123",
-          name: "Test Room",
-          code: "ABC123",
-          gameName: "matching",
+          id: 'room-123',
+          name: 'Test Room',
+          code: 'ABC123',
+          gameName: 'matching',
           members: [],
           memberPlayers: {},
-        });
-        expect(result.current.isInRoom).toBe(true);
-      });
-    });
+        })
+        expect(result.current.isInRoom).toBe(true)
+      })
+    })
 
-    test("provides getRoomShareUrl function", () => {
-      const { result } = renderHook(() => useRoomData(), { wrapper });
+    test('provides getRoomShareUrl function', () => {
+      const { result } = renderHook(() => useRoomData(), { wrapper })
 
-      const url = result.current.getRoomShareUrl("ABC123");
-      expect(url).toContain("/join/ABC123");
-    });
-  });
+      const url = result.current.getRoomShareUrl('ABC123')
+      expect(url).toContain('/join/ABC123')
+    })
+  })
 
-  describe("useCreateRoom", () => {
-    test("creates a room successfully", async () => {
+  describe('useCreateRoom', () => {
+    test('creates a room successfully', async () => {
       const mockCreatedRoom = {
         room: {
-          id: "new-room-123",
-          name: "New Room",
-          code: "XYZ789",
-          gameName: "matching",
+          id: 'new-room-123',
+          name: 'New Room',
+          code: 'XYZ789',
+          gameName: 'matching',
         },
         members: [],
         memberPlayers: {},
-      };
+      }
 
       global.fetch = vi.fn().mockResolvedValue({
         ok: true,
         json: async () => mockCreatedRoom,
-      });
+      })
 
-      const { result } = renderHook(() => useCreateRoom(), { wrapper });
+      const { result } = renderHook(() => useCreateRoom(), { wrapper })
 
-      let createdRoom: any;
+      let createdRoom: any
       result.current.mutate(
         {
-          name: "New Room",
-          gameName: "matching",
-          creatorName: "Player 1",
+          name: 'New Room',
+          gameName: 'matching',
+          creatorName: 'Player 1',
         },
         {
           onSuccess: (data) => {
-            createdRoom = data;
+            createdRoom = data
           },
-        },
-      );
+        }
+      )
 
       await waitFor(() => {
         expect(createdRoom).toEqual({
-          id: "new-room-123",
-          name: "New Room",
-          code: "XYZ789",
-          gameName: "matching",
+          id: 'new-room-123',
+          name: 'New Room',
+          code: 'XYZ789',
+          gameName: 'matching',
           members: [],
           memberPlayers: {},
-        });
-      });
+        })
+      })
 
       // Verify fetch was called correctly
       expect(global.fetch).toHaveBeenCalledWith(
-        "/api/arcade/rooms",
+        '/api/arcade/rooms',
         expect.objectContaining({
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
-            name: "New Room",
-            gameName: "matching",
-            creatorName: "Player 1",
+            name: 'New Room',
+            gameName: 'matching',
+            creatorName: 'Player 1',
             gameConfig: { difficulty: 6 },
           }),
-        }),
-      );
-    });
+        })
+      )
+    })
 
-    test("handles create room error", async () => {
+    test('handles create room error', async () => {
       global.fetch = vi.fn().mockResolvedValue({
         ok: false,
-        json: async () => ({ error: "Invalid game name" }),
-      });
+        json: async () => ({ error: 'Invalid game name' }),
+      })
 
-      const { result } = renderHook(() => useCreateRoom(), { wrapper });
+      const { result } = renderHook(() => useCreateRoom(), { wrapper })
 
-      let error: any;
+      let error: any
       result.current.mutate(
         {
-          name: "Bad Room",
-          gameName: "invalid-game" as any,
-          creatorName: "Player 1",
+          name: 'Bad Room',
+          gameName: 'invalid-game' as any,
+          creatorName: 'Player 1',
         },
         {
           onError: (err) => {
-            error = err;
+            error = err
           },
-        },
-      );
+        }
+      )
 
       await waitFor(() => {
-        expect(error).toBeDefined();
-        expect(error.message).toContain("Invalid game name");
-      });
-    });
+        expect(error).toBeDefined()
+        expect(error.message).toContain('Invalid game name')
+      })
+    })
 
-    test("updates cache after creating room", async () => {
+    test('updates cache after creating room', async () => {
       const mockCreatedRoom = {
         room: {
-          id: "new-room-123",
-          name: "New Room",
-          code: "XYZ789",
-          gameName: "matching",
+          id: 'new-room-123',
+          name: 'New Room',
+          code: 'XYZ789',
+          gameName: 'matching',
         },
         members: [],
         memberPlayers: {},
-      };
+      }
 
       global.fetch = vi.fn().mockResolvedValue({
         ok: true,
         json: async () => mockCreatedRoom,
-      });
+      })
 
-      const { result } = renderHook(() => useCreateRoom(), { wrapper });
+      const { result } = renderHook(() => useCreateRoom(), { wrapper })
 
       result.current.mutate({
-        name: "New Room",
-        gameName: "matching",
-        creatorName: "Player 1",
-      });
+        name: 'New Room',
+        gameName: 'matching',
+        creatorName: 'Player 1',
+      })
 
       await waitFor(() => {
-        expect(result.current.isSuccess).toBe(true);
-      });
+        expect(result.current.isSuccess).toBe(true)
+      })
 
       // Verify cache was updated
-      const cachedData = queryClient.getQueryData(["rooms", "current"]);
+      const cachedData = queryClient.getQueryData(['rooms', 'current'])
       expect(cachedData).toEqual({
-        id: "new-room-123",
-        name: "New Room",
-        code: "XYZ789",
-        gameName: "matching",
+        id: 'new-room-123',
+        name: 'New Room',
+        code: 'XYZ789',
+        gameName: 'matching',
         members: [],
         memberPlayers: {},
-      });
-    });
-  });
+      })
+    })
+  })
 
-  describe("useJoinRoom", () => {
-    test("joins a room successfully", async () => {
+  describe('useJoinRoom', () => {
+    test('joins a room successfully', async () => {
       const mockJoinResult = {
         member: {
-          id: "member-1",
-          userId: "test-user-id",
-          displayName: "Player 1",
+          id: 'member-1',
+          userId: 'test-user-id',
+          displayName: 'Player 1',
           isOnline: true,
           isCreator: false,
         },
         room: {
-          id: "room-123",
-          name: "Test Room",
-          code: "ABC123",
-          gameName: "matching",
+          id: 'room-123',
+          name: 'Test Room',
+          code: 'ABC123',
+          gameName: 'matching',
           members: [],
           memberPlayers: {},
         },
         members: [],
         memberPlayers: {},
         activePlayers: [],
-      };
+      }
 
       global.fetch = vi.fn().mockResolvedValue({
         ok: true,
         json: async () => mockJoinResult,
-      });
+      })
 
-      const { result } = renderHook(() => useJoinRoom(), { wrapper });
+      const { result } = renderHook(() => useJoinRoom(), { wrapper })
 
-      let joinedRoom: any;
+      let joinedRoom: any
       result.current.mutate(
         {
-          roomId: "room-123",
-          displayName: "Player 1",
+          roomId: 'room-123',
+          displayName: 'Player 1',
         },
         {
           onSuccess: (data) => {
-            joinedRoom = data;
+            joinedRoom = data
           },
-        },
-      );
+        }
+      )
 
       await waitFor(() => {
-        expect(joinedRoom).toEqual(mockJoinResult);
-      });
+        expect(joinedRoom).toEqual(mockJoinResult)
+      })
 
       // Verify fetch was called correctly
       expect(global.fetch).toHaveBeenCalledWith(
-        "/api/arcade/rooms/room-123/join",
+        '/api/arcade/rooms/room-123/join',
         expect.objectContaining({
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ displayName: "Player 1" }),
-        }),
-      );
-    });
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ displayName: 'Player 1' }),
+        })
+      )
+    })
 
-    test("handles join room error", async () => {
+    test('handles join room error', async () => {
       global.fetch = vi.fn().mockResolvedValue({
         ok: false,
-        json: async () => ({ error: "Room is locked" }),
-      });
+        json: async () => ({ error: 'Room is locked' }),
+      })
 
-      const { result } = renderHook(() => useJoinRoom(), { wrapper });
+      const { result } = renderHook(() => useJoinRoom(), { wrapper })
 
-      let error: any;
+      let error: any
       result.current.mutate(
         {
-          roomId: "locked-room",
-          displayName: "Player 1",
+          roomId: 'locked-room',
+          displayName: 'Player 1',
         },
         {
           onError: (err) => {
-            error = err;
+            error = err
           },
-        },
-      );
+        }
+      )
 
       await waitFor(() => {
-        expect(error).toBeDefined();
-        expect(error.message).toContain("Room is locked");
-      });
-    });
-  });
+        expect(error).toBeDefined()
+        expect(error.message).toContain('Room is locked')
+      })
+    })
+  })
 
-  describe("useLeaveRoom", () => {
-    test("leaves a room successfully", async () => {
+  describe('useLeaveRoom', () => {
+    test('leaves a room successfully', async () => {
       global.fetch = vi.fn().mockResolvedValue({
         ok: true,
-      });
+      })
 
-      const { result } = renderHook(() => useLeaveRoom(), { wrapper });
+      const { result } = renderHook(() => useLeaveRoom(), { wrapper })
 
-      let success = false;
-      result.current.mutate("room-123", {
+      let success = false
+      result.current.mutate('room-123', {
         onSuccess: () => {
-          success = true;
+          success = true
         },
-      });
+      })
 
       await waitFor(() => {
-        expect(success).toBe(true);
-      });
+        expect(success).toBe(true)
+      })
 
       // Verify fetch was called correctly
       expect(global.fetch).toHaveBeenCalledWith(
-        "/api/arcade/rooms/room-123/leave",
+        '/api/arcade/rooms/room-123/leave',
         expect.objectContaining({
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-        }),
-      );
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+        })
+      )
 
       // Verify cache was cleared
-      const cachedData = queryClient.getQueryData(["rooms", "current"]);
-      expect(cachedData).toBeNull();
-    });
+      const cachedData = queryClient.getQueryData(['rooms', 'current'])
+      expect(cachedData).toBeNull()
+    })
 
-    test("handles leave room error", async () => {
+    test('handles leave room error', async () => {
       global.fetch = vi.fn().mockResolvedValue({
         ok: false,
-        json: async () => ({ error: "Not in room" }),
-      });
+        json: async () => ({ error: 'Not in room' }),
+      })
 
-      const { result } = renderHook(() => useLeaveRoom(), { wrapper });
+      const { result } = renderHook(() => useLeaveRoom(), { wrapper })
 
-      let error: any;
-      result.current.mutate("room-123", {
+      let error: any
+      result.current.mutate('room-123', {
         onError: (err) => {
-          error = err;
+          error = err
         },
-      });
+      })
 
       await waitFor(() => {
-        expect(error).toBeDefined();
-        expect(error.message).toContain("Not in room");
-      });
-    });
-  });
+        expect(error).toBeDefined()
+        expect(error.message).toContain('Not in room')
+      })
+    })
+  })
 
-  describe("useGetRoomByCode", () => {
-    test("fetches room by code successfully", async () => {
+  describe('useGetRoomByCode', () => {
+    test('fetches room by code successfully', async () => {
       const mockRoom = {
         room: {
-          id: "room-123",
-          name: "Test Room",
-          code: "ABC123",
-          gameName: "matching",
+          id: 'room-123',
+          name: 'Test Room',
+          code: 'ABC123',
+          gameName: 'matching',
         },
         members: [],
         memberPlayers: {},
-      };
+      }
 
       global.fetch = vi.fn().mockResolvedValue({
         ok: true,
         json: async () => mockRoom,
-      });
+      })
 
-      const { result } = renderHook(() => useGetRoomByCode(), { wrapper });
+      const { result } = renderHook(() => useGetRoomByCode(), { wrapper })
 
-      let fetchedRoom: any;
-      result.current.mutate("ABC123", {
+      let fetchedRoom: any
+      result.current.mutate('ABC123', {
         onSuccess: (data) => {
-          fetchedRoom = data;
+          fetchedRoom = data
         },
-      });
+      })
 
       await waitFor(() => {
         expect(fetchedRoom).toEqual({
-          id: "room-123",
-          name: "Test Room",
-          code: "ABC123",
-          gameName: "matching",
+          id: 'room-123',
+          name: 'Test Room',
+          code: 'ABC123',
+          gameName: 'matching',
           members: [],
           memberPlayers: {},
-        });
-      });
+        })
+      })
 
       // Verify fetch was called correctly
-      expect(global.fetch).toHaveBeenCalledWith(
-        "/api/arcade/rooms/code/ABC123",
-      );
-    });
+      expect(global.fetch).toHaveBeenCalledWith('/api/arcade/rooms/code/ABC123')
+    })
 
-    test("handles room not found error", async () => {
+    test('handles room not found error', async () => {
       global.fetch = vi.fn().mockResolvedValue({
         ok: false,
         status: 404,
-      });
+      })
 
-      const { result } = renderHook(() => useGetRoomByCode(), { wrapper });
+      const { result } = renderHook(() => useGetRoomByCode(), { wrapper })
 
-      let error: any;
-      result.current.mutate("INVALID", {
+      let error: any
+      result.current.mutate('INVALID', {
         onError: (err) => {
-          error = err;
+          error = err
         },
-      });
+      })
 
       await waitFor(() => {
-        expect(error).toBeDefined();
-        expect(error.message).toBe("Room not found");
-      });
-    });
-  });
-});
+        expect(error).toBeDefined()
+        expect(error.message).toBe('Room not found')
+      })
+    })
+  })
+})
diff --git a/apps/web/src/hooks/useAbacusSettings.ts b/apps/web/src/hooks/useAbacusSettings.ts
index 2fbdf7de..fcaba0c2 100644
--- a/apps/web/src/hooks/useAbacusSettings.ts
+++ b/apps/web/src/hooks/useAbacusSettings.ts
@@ -1,41 +1,41 @@
-"use client";
+'use client'
 
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import type { AbacusSettings } from "@/db/schema/abacus-settings";
-import { api } from "@/lib/queryClient";
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import type { AbacusSettings } from '@/db/schema/abacus-settings'
+import { api } from '@/lib/queryClient'
 
 /**
  * Query key factory for abacus settings
  */
 export const abacusSettingsKeys = {
-  all: ["abacus-settings"] as const,
-  detail: () => [...abacusSettingsKeys.all, "detail"] as const,
-};
+  all: ['abacus-settings'] as const,
+  detail: () => [...abacusSettingsKeys.all, 'detail'] as const,
+}
 
 /**
  * Fetch abacus display settings
  */
 async function fetchAbacusSettings(): Promise<AbacusSettings> {
-  const res = await api("abacus-settings");
-  if (!res.ok) throw new Error("Failed to fetch abacus settings");
-  const data = await res.json();
-  return data.settings;
+  const res = await api('abacus-settings')
+  if (!res.ok) throw new Error('Failed to fetch abacus settings')
+  const data = await res.json()
+  return data.settings
 }
 
 /**
  * Update abacus display settings
  */
 async function updateAbacusSettings(
-  updates: Partial<Omit<AbacusSettings, "userId">>,
+  updates: Partial<Omit<AbacusSettings, 'userId'>>
 ): Promise<AbacusSettings> {
-  const res = await api("abacus-settings", {
-    method: "PATCH",
-    headers: { "Content-Type": "application/json" },
+  const res = await api('abacus-settings', {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(updates),
-  });
-  if (!res.ok) throw new Error("Failed to update abacus settings");
-  const data = await res.json();
-  return data.settings;
+  })
+  if (!res.ok) throw new Error('Failed to update abacus settings')
+  const data = await res.json()
+  return data.settings
 }
 
 /**
@@ -45,14 +45,14 @@ export function useAbacusSettings() {
   return useQuery({
     queryKey: abacusSettingsKeys.detail(),
     queryFn: fetchAbacusSettings,
-  });
+  })
 }
 
 /**
  * Hook: Update abacus display settings
  */
 export function useUpdateAbacusSettings() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: updateAbacusSettings,
@@ -60,38 +60,30 @@ export function useUpdateAbacusSettings() {
       // Cancel outgoing refetches
       await queryClient.cancelQueries({
         queryKey: abacusSettingsKeys.detail(),
-      });
+      })
 
       // Snapshot previous value
-      const previousSettings = queryClient.getQueryData<AbacusSettings>(
-        abacusSettingsKeys.detail(),
-      );
+      const previousSettings = queryClient.getQueryData<AbacusSettings>(abacusSettingsKeys.detail())
 
       // Optimistically update
       if (previousSettings) {
-        const optimisticSettings = { ...previousSettings, ...updates };
-        queryClient.setQueryData<AbacusSettings>(
-          abacusSettingsKeys.detail(),
-          optimisticSettings,
-        );
+        const optimisticSettings = { ...previousSettings, ...updates }
+        queryClient.setQueryData<AbacusSettings>(abacusSettingsKeys.detail(), optimisticSettings)
       }
 
-      return { previousSettings };
+      return { previousSettings }
     },
     onError: (_err, _updates, context) => {
       // Rollback on error
       if (context?.previousSettings) {
-        queryClient.setQueryData(
-          abacusSettingsKeys.detail(),
-          context.previousSettings,
-        );
+        queryClient.setQueryData(abacusSettingsKeys.detail(), context.previousSettings)
       }
     },
     onSettled: (updatedSettings) => {
       // Update with server data on success
       if (updatedSettings) {
-        queryClient.setQueryData(abacusSettingsKeys.detail(), updatedSettings);
+        queryClient.setQueryData(abacusSettingsKeys.detail(), updatedSettings)
       }
     },
-  });
+  })
 }
diff --git a/apps/web/src/hooks/useAccessControl.tsx b/apps/web/src/hooks/useAccessControl.tsx
index 8e02de34..c771229e 100644
--- a/apps/web/src/hooks/useAccessControl.tsx
+++ b/apps/web/src/hooks/useAccessControl.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client'
 
-import { createContext, type ReactNode, useContext } from "react";
-import type { AccessContext, Permission, UserRole } from "../types/tutorial";
+import { createContext, type ReactNode, useContext } from 'react'
+import type { AccessContext, Permission, UserRole } from '../types/tutorial'
 
 // Default context value (no permissions)
 const defaultAccessContext: AccessContext = {
@@ -12,17 +12,17 @@ const defaultAccessContext: AccessContext = {
   canEdit: false,
   canPublish: false,
   canDelete: false,
-};
+}
 
 // Create context
-const AccessControlContext = createContext<AccessContext>(defaultAccessContext);
+const AccessControlContext = createContext<AccessContext>(defaultAccessContext)
 
 // Provider component
 interface AccessControlProviderProps {
-  children: ReactNode;
-  userId?: string;
-  roles?: UserRole[];
-  isAuthenticated?: boolean;
+  children: ReactNode
+  userId?: string
+  roles?: UserRole[]
+  isAuthenticated?: boolean
 }
 
 export function AccessControlProvider({
@@ -32,31 +32,20 @@ export function AccessControlProvider({
   isAuthenticated = false,
 }: AccessControlProviderProps) {
   // Calculate permissions based on roles
-  const permissions = roles.flatMap((role) => role.permissions);
+  const permissions = roles.flatMap((role) => role.permissions)
 
   // Check if user has admin role
-  const isAdmin = roles.some(
-    (role) => role.name === "admin" || role.name === "superuser",
-  );
+  const isAdmin = roles.some((role) => role.name === 'admin' || role.name === 'superuser')
 
   // Check specific permissions
   const canEdit =
-    isAdmin ||
-    permissions.some(
-      (p) => p.resource === "tutorial" && p.actions.includes("update"),
-    );
+    isAdmin || permissions.some((p) => p.resource === 'tutorial' && p.actions.includes('update'))
 
   const canPublish =
-    isAdmin ||
-    permissions.some(
-      (p) => p.resource === "tutorial" && p.actions.includes("publish"),
-    );
+    isAdmin || permissions.some((p) => p.resource === 'tutorial' && p.actions.includes('publish'))
 
   const canDelete =
-    isAdmin ||
-    permissions.some(
-      (p) => p.resource === "tutorial" && p.actions.includes("delete"),
-    );
+    isAdmin || permissions.some((p) => p.resource === 'tutorial' && p.actions.includes('delete'))
 
   const accessContext: AccessContext = {
     userId,
@@ -66,53 +55,47 @@ export function AccessControlProvider({
     canEdit,
     canPublish,
     canDelete,
-  };
+  }
 
   return (
-    <AccessControlContext.Provider value={accessContext}>
-      {children}
-    </AccessControlContext.Provider>
-  );
+    <AccessControlContext.Provider value={accessContext}>{children}</AccessControlContext.Provider>
+  )
 }
 
 // Hook to use access control
 export function useAccessControl(): AccessContext {
-  const context = useContext(AccessControlContext);
+  const context = useContext(AccessControlContext)
   if (!context) {
-    throw new Error(
-      "useAccessControl must be used within an AccessControlProvider",
-    );
+    throw new Error('useAccessControl must be used within an AccessControlProvider')
   }
-  return context;
+  return context
 }
 
 // Hook for conditional rendering based on permissions
 export function usePermission(
-  resource: Permission["resource"],
-  action: Permission["actions"][number],
+  resource: Permission['resource'],
+  action: Permission['actions'][number]
 ): boolean {
-  const { isAdmin, roles } = useAccessControl();
+  const { isAdmin, roles } = useAccessControl()
 
-  if (isAdmin) return true;
+  if (isAdmin) return true
 
   return roles.some((role) =>
     role.permissions.some(
-      (permission) =>
-        permission.resource === resource && permission.actions.includes(action),
-    ),
-  );
+      (permission) => permission.resource === resource && permission.actions.includes(action)
+    )
+  )
 }
 
 // Hook for editor access specifically
 export function useEditorAccess(): {
-  canAccessEditor: boolean;
-  canEditTutorials: boolean;
-  canPublishTutorials: boolean;
-  canDeleteTutorials: boolean;
-  reason?: string;
+  canAccessEditor: boolean
+  canEditTutorials: boolean
+  canPublishTutorials: boolean
+  canDeleteTutorials: boolean
+  reason?: string
 } {
-  const { isAuthenticated, isAdmin, canEdit, canPublish, canDelete } =
-    useAccessControl();
+  const { isAuthenticated, isAdmin, canEdit, canPublish, canDelete } = useAccessControl()
 
   if (!isAuthenticated) {
     return {
@@ -120,29 +103,29 @@ export function useEditorAccess(): {
       canEditTutorials: false,
       canPublishTutorials: false,
       canDeleteTutorials: false,
-      reason: "Authentication required",
-    };
+      reason: 'Authentication required',
+    }
   }
 
-  const canAccessEditor = isAdmin || canEdit;
+  const canAccessEditor = isAdmin || canEdit
 
   return {
     canAccessEditor,
     canEditTutorials: canEdit,
     canPublishTutorials: canPublish,
     canDeleteTutorials: canDelete,
-    reason: canAccessEditor ? undefined : "Insufficient permissions",
-  };
+    reason: canAccessEditor ? undefined : 'Insufficient permissions',
+  }
 }
 
 // Higher-order component for protecting routes
 interface ProtectedComponentProps {
-  children: ReactNode;
-  fallback?: ReactNode;
+  children: ReactNode
+  fallback?: ReactNode
   requirePermissions?: {
-    resource: Permission["resource"];
-    actions: Permission["actions"];
-  }[];
+    resource: Permission['resource']
+    actions: Permission['actions']
+  }[]
 }
 
 export function ProtectedComponent({
@@ -150,14 +133,14 @@ export function ProtectedComponent({
   fallback = <div>Access denied</div>,
   requirePermissions = [],
 }: ProtectedComponentProps) {
-  const { isAuthenticated, roles, isAdmin } = useAccessControl();
+  const { isAuthenticated, roles, isAdmin } = useAccessControl()
 
   if (!isAuthenticated) {
-    return <>{fallback}</>;
+    return <>{fallback}</>
   }
 
   if (isAdmin) {
-    return <>{children}</>;
+    return <>{children}</>
   }
 
   // Check if user has all required permissions
@@ -166,26 +149,26 @@ export function ProtectedComponent({
       role.permissions.some(
         (permission) =>
           permission.resource === resource &&
-          actions.every((action) => permission.actions.includes(action)),
-      ),
-    ),
-  );
+          actions.every((action) => permission.actions.includes(action))
+      )
+    )
+  )
 
   if (!hasAllPermissions) {
-    return <>{fallback}</>;
+    return <>{fallback}</>
   }
 
-  return <>{children}</>;
+  return <>{children}</>
 }
 
 // Component for editor-specific protection
 interface EditorProtectedProps {
-  children: ReactNode;
-  fallback?: ReactNode;
+  children: ReactNode
+  fallback?: ReactNode
 }
 
 export function EditorProtected({ children, fallback }: EditorProtectedProps) {
-  const { canAccessEditor, reason } = useEditorAccess();
+  const { canAccessEditor, reason } = useEditorAccess()
 
   if (!canAccessEditor) {
     return (
@@ -197,46 +180,42 @@ export function EditorProtected({ children, fallback }: EditorProtectedProps) {
           </div>
         )}
       </>
-    );
+    )
   }
 
-  return <>{children}</>;
+  return <>{children}</>
 }
 
 // Dev mode provider (for development without auth)
 export function DevAccessProvider({ children }: { children: ReactNode }) {
   const devRoles: UserRole[] = [
     {
-      id: "dev-admin",
-      name: "admin",
+      id: 'dev-admin',
+      name: 'admin',
       permissions: [
         {
-          resource: "tutorial",
-          actions: ["create", "read", "update", "delete", "publish"],
+          resource: 'tutorial',
+          actions: ['create', 'read', 'update', 'delete', 'publish'],
         },
         {
-          resource: "step",
-          actions: ["create", "read", "update", "delete"],
+          resource: 'step',
+          actions: ['create', 'read', 'update', 'delete'],
         },
         {
-          resource: "user",
-          actions: ["read", "update"],
+          resource: 'user',
+          actions: ['read', 'update'],
         },
         {
-          resource: "system",
-          actions: ["read"],
+          resource: 'system',
+          actions: ['read'],
         },
       ],
     },
-  ];
+  ]
 
   return (
-    <AccessControlProvider
-      userId="dev-user"
-      roles={devRoles}
-      isAuthenticated={true}
-    >
+    <AccessControlProvider userId="dev-user" roles={devRoles} isAuthenticated={true}>
       {children}
     </AccessControlProvider>
-  );
+  )
 }
diff --git a/apps/web/src/hooks/useArcadeSession.ts b/apps/web/src/hooks/useArcadeSession.ts
index 5717f14a..9251b056 100644
--- a/apps/web/src/hooks/useArcadeSession.ts
+++ b/apps/web/src/hooks/useArcadeSession.ts
@@ -1,84 +1,83 @@
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import type { GameMove } from "@/lib/arcade/validation";
-import { useArcadeSocket } from "./useArcadeSocket";
+import { useCallback, useContext, useEffect, useRef, useState } from 'react'
+import type { GameMove } from '@/lib/arcade/validation'
+import { useArcadeSocket } from './useArcadeSocket'
 import {
   type UseOptimisticGameStateOptions,
   useOptimisticGameState,
-} from "./useOptimisticGameState";
-import type { RetryState } from "@/lib/arcade/error-handling";
-import { PreviewModeContext } from "@/components/GamePreview";
+} from './useOptimisticGameState'
+import type { RetryState } from '@/lib/arcade/error-handling'
+import { PreviewModeContext } from '@/components/GamePreview'
 
-export interface UseArcadeSessionOptions<TState>
-  extends UseOptimisticGameStateOptions<TState> {
+export interface UseArcadeSessionOptions<TState> extends UseOptimisticGameStateOptions<TState> {
   /**
    * User ID for the session
    */
-  userId: string;
+  userId: string
 
   /**
    * Room ID for multi-user sync (optional)
    * If provided, game state will sync across all users in the room
    */
-  roomId?: string;
+  roomId?: string
 
   /**
    * Auto-join session on mount
    * @default true
    */
-  autoJoin?: boolean;
+  autoJoin?: boolean
 }
 
 export interface UseArcadeSessionReturn<TState> {
   /**
    * Current game state (with optimistic updates)
    */
-  state: TState;
+  state: TState
 
   /**
    * Server-confirmed version
    */
-  version: number;
+  version: number
 
   /**
    * Whether socket is connected
    */
-  connected: boolean;
+  connected: boolean
 
   /**
    * Whether there are pending moves
    */
-  hasPendingMoves: boolean;
+  hasPendingMoves: boolean
 
   /**
    * Last error from server (move rejection)
    */
-  lastError: string | null;
+  lastError: string | null
 
   /**
    * Current retry state (for showing UI indicators)
    */
-  retryState: RetryState;
+  retryState: RetryState
 
   /**
    * Send a game move (applies optimistically and sends to server)
    * Note: playerId must be provided by caller (not omitted)
    */
-  sendMove: (move: Omit<GameMove, "timestamp">) => void;
+  sendMove: (move: Omit<GameMove, 'timestamp'>) => void
 
   /**
    * Exit the arcade session
    */
-  exitSession: () => void;
+  exitSession: () => void
 
   /**
    * Clear the last error
    */
-  clearError: () => void;
+  clearError: () => void
 
   /**
    * Manually sync with server (useful after reconnect)
    */
-  refresh: () => void;
+  refresh: () => void
 }
 
 /**
@@ -99,12 +98,12 @@ export interface UseArcadeSessionReturn<TState> {
  * ```
  */
 export function useArcadeSession<TState>(
-  options: UseArcadeSessionOptions<TState>,
+  options: UseArcadeSessionOptions<TState>
 ): UseArcadeSessionReturn<TState> {
-  const { userId, roomId, autoJoin = true, ...optimisticOptions } = options;
+  const { userId, roomId, autoJoin = true, ...optimisticOptions } = options
 
   // Check if we're in preview mode
-  const previewMode = useContext(PreviewModeContext);
+  const previewMode = useContext(PreviewModeContext)
 
   // If in preview mode, return mock session immediately
   if (previewMode?.isPreview && previewMode?.mockState) {
@@ -113,7 +112,7 @@ export function useArcadeSession<TState>(
       retryCount: 0,
       move: null,
       timestamp: null,
-    };
+    }
 
     return {
       state: previewMode.mockState as TState,
@@ -134,11 +133,11 @@ export function useArcadeSession<TState>(
       refresh: () => {
         // Mock: do nothing in preview
       },
-    };
+    }
   }
 
   // Optimistic state management
-  const optimistic = useOptimisticGameState<TState>(optimisticOptions);
+  const optimistic = useOptimisticGameState<TState>(optimisticOptions)
 
   // Track retry state (exposed to UI for indicators)
   const [retryState, setRetryState] = useState<RetryState>({
@@ -146,7 +145,7 @@ export function useArcadeSession<TState>(
     retryCount: 0,
     move: null,
     timestamp: null,
-  });
+  })
 
   // WebSocket connection
   const {
@@ -157,64 +156,57 @@ export function useArcadeSession<TState>(
     exitSession: socketExitSession,
   } = useArcadeSocket({
     onSessionState: (data) => {
-      optimistic.syncWithServer(data.gameState as TState, data.version);
+      optimistic.syncWithServer(data.gameState as TState, data.version)
     },
 
     onMoveAccepted: (data) => {
-      const isRetry = retryState.move?.timestamp === data.move.timestamp;
+      const isRetry = retryState.move?.timestamp === data.move.timestamp
       console.log(
-        `[AutoRetry] ACCEPTED move=${data.move.type} ts=${data.move.timestamp} isRetry=${isRetry} retryCount=${retryState.retryCount || 0}`,
-      );
+        `[AutoRetry] ACCEPTED move=${data.move.type} ts=${data.move.timestamp} isRetry=${isRetry} retryCount=${retryState.retryCount || 0}`
+      )
 
       // Check if this was a retried move
       if (isRetry && retryState.isRetrying) {
         console.log(
-          `[AutoRetry] SUCCESS after ${retryState.retryCount} retries move=${data.move.type}`,
-        );
+          `[AutoRetry] SUCCESS after ${retryState.retryCount} retries move=${data.move.type}`
+        )
         // Clear retry state
         setRetryState({
           isRetrying: false,
           retryCount: 0,
           move: null,
           timestamp: null,
-        });
+        })
       }
-      optimistic.handleMoveAccepted(
-        data.gameState as TState,
-        data.version,
-        data.move,
-      );
+      optimistic.handleMoveAccepted(data.gameState as TState, data.version, data.move)
     },
 
     onMoveRejected: (data) => {
-      const isRetry = retryState.move?.timestamp === data.move.timestamp;
+      const isRetry = retryState.move?.timestamp === data.move.timestamp
       console.warn(
-        `[AutoRetry] REJECTED move=${data.move.type} ts=${data.move.timestamp} isRetry=${isRetry} versionConflict=${!!data.versionConflict} error="${data.error}"`,
-      );
+        `[AutoRetry] REJECTED move=${data.move.type} ts=${data.move.timestamp} isRetry=${isRetry} versionConflict=${!!data.versionConflict} error="${data.error}"`
+      )
 
       // For version conflicts, automatically retry the move
       if (data.versionConflict) {
-        const retryCount =
-          isRetry && retryState.isRetrying ? retryState.retryCount + 1 : 1;
+        const retryCount = isRetry && retryState.isRetrying ? retryState.retryCount + 1 : 1
 
         if (retryCount > 5) {
-          console.error(
-            `[AutoRetry] FAILED after 5 retries move=${data.move.type}`,
-          );
+          console.error(`[AutoRetry] FAILED after 5 retries move=${data.move.type}`)
           // Clear retry state and show error
           setRetryState({
             isRetrying: false,
             retryCount: 0,
             move: null,
             timestamp: null,
-          });
-          optimistic.handleMoveRejected(data.error, data.move);
-          return;
+          })
+          optimistic.handleMoveRejected(data.error, data.move)
+          return
         }
 
         console.warn(
-          `[AutoRetry] SCHEDULE_RETRY_${retryCount} room=${roomId || "none"} move=${data.move.type} ts=${data.move.timestamp} delay=${10 * retryCount}ms`,
-        );
+          `[AutoRetry] SCHEDULE_RETRY_${retryCount} room=${roomId || 'none'} move=${data.move.type} ts=${data.move.timestamp} delay=${10 * retryCount}ms`
+        )
 
         // Update retry state
         setRetryState({
@@ -222,26 +214,26 @@ export function useArcadeSession<TState>(
           retryCount,
           move: data.move,
           timestamp: data.move.timestamp,
-        });
+        })
 
         // Wait a tiny bit for server state to propagate, then retry
         setTimeout(() => {
           console.warn(
-            `[AutoRetry] SENDING_RETRY_${retryCount} move=${data.move.type} ts=${data.move.timestamp}`,
-          );
-          socketSendMove(userId, data.move, roomId);
-        }, 10 * retryCount);
+            `[AutoRetry] SENDING_RETRY_${retryCount} move=${data.move.type} ts=${data.move.timestamp}`
+          )
+          socketSendMove(userId, data.move, roomId)
+        }, 10 * retryCount)
 
         // Don't show error to user - we're handling it automatically
-        return;
+        return
       }
 
       // Non-version-conflict errors: show to user
-      optimistic.handleMoveRejected(data.error, data.move);
+      optimistic.handleMoveRejected(data.error, data.move)
     },
 
     onSessionEnded: () => {
-      optimistic.reset();
+      optimistic.reset()
     },
 
     onNoActiveSession: () => {
@@ -249,52 +241,50 @@ export function useArcadeSession<TState>(
     },
 
     onError: (data) => {
-      console.error(`[ArcadeSession] Error: ${data.error}`);
+      console.error(`[ArcadeSession] Error: ${data.error}`)
     },
-  });
+  })
 
   // Auto-join session when connected
   useEffect(() => {
     if (connected && autoJoin && userId) {
-      joinSession(userId, roomId);
+      joinSession(userId, roomId)
     }
-  }, [connected, autoJoin, userId, roomId, joinSession]);
+  }, [connected, autoJoin, userId, roomId, joinSession])
 
   // Send move with optimistic update
   const sendMove = useCallback(
-    (move: Omit<GameMove, "timestamp">) => {
+    (move: Omit<GameMove, 'timestamp'>) => {
       // IMPORTANT: playerId must always be explicitly provided by caller
       // playerId is the database player ID (avatar), never the userId/viewerId
-      if (!("playerId" in move) || !move.playerId) {
-        throw new Error(
-          "playerId is required in all moves and must be a valid player ID",
-        );
+      if (!('playerId' in move) || !move.playerId) {
+        throw new Error('playerId is required in all moves and must be a valid player ID')
       }
 
       const fullMove: GameMove = {
         ...move,
         timestamp: Date.now(),
-      } as GameMove;
+      } as GameMove
 
       // Apply optimistically
-      optimistic.applyOptimisticMove(fullMove);
+      optimistic.applyOptimisticMove(fullMove)
 
       // Send to server with roomId for room-based games
-      socketSendMove(userId, fullMove, roomId);
+      socketSendMove(userId, fullMove, roomId)
     },
-    [userId, roomId, optimistic, socketSendMove],
-  );
+    [userId, roomId, optimistic, socketSendMove]
+  )
 
   const exitSession = useCallback(() => {
-    socketExitSession(userId);
-    optimistic.reset();
-  }, [userId, socketExitSession, optimistic]);
+    socketExitSession(userId)
+    optimistic.reset()
+  }, [userId, socketExitSession, optimistic])
 
   const refresh = useCallback(() => {
     if (connected && userId) {
-      joinSession(userId, roomId);
+      joinSession(userId, roomId)
     }
-  }, [connected, userId, roomId, joinSession]);
+  }, [connected, userId, roomId, joinSession])
 
   return {
     state: optimistic.state,
@@ -307,5 +297,5 @@ export function useArcadeSession<TState>(
     exitSession,
     clearError: optimistic.clearError,
     refresh,
-  };
+  }
 }
diff --git a/apps/web/src/hooks/useArcadeSocket.ts b/apps/web/src/hooks/useArcadeSocket.ts
index 35cdb35a..fd06e716 100644
--- a/apps/web/src/hooks/useArcadeSocket.ts
+++ b/apps/web/src/hooks/useArcadeSocket.ts
@@ -1,37 +1,29 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { io, type Socket } from "socket.io-client";
-import type { GameMove } from "@/lib/arcade/validation";
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { io, type Socket } from 'socket.io-client'
+import type { GameMove } from '@/lib/arcade/validation'
 
 export interface ArcadeSocketEvents {
   onSessionState?: (data: {
-    gameState: unknown;
-    currentGame: string;
-    gameUrl: string;
-    activePlayers: number[];
-    version: number;
-  }) => void;
-  onMoveAccepted?: (data: {
-    gameState: unknown;
-    version: number;
-    move: GameMove;
-  }) => void;
-  onMoveRejected?: (data: {
-    error: string;
-    move: GameMove;
-    versionConflict?: boolean;
-  }) => void;
-  onSessionEnded?: () => void;
-  onNoActiveSession?: () => void;
-  onError?: (error: { error: string }) => void;
+    gameState: unknown
+    currentGame: string
+    gameUrl: string
+    activePlayers: number[]
+    version: number
+  }) => void
+  onMoveAccepted?: (data: { gameState: unknown; version: number; move: GameMove }) => void
+  onMoveRejected?: (data: { error: string; move: GameMove; versionConflict?: boolean }) => void
+  onSessionEnded?: () => void
+  onNoActiveSession?: () => void
+  onError?: (error: { error: string }) => void
 }
 
 export interface UseArcadeSocketReturn {
-  socket: Socket | null;
-  connected: boolean;
-  joinSession: (userId: string, roomId?: string) => void;
-  sendMove: (userId: string, move: GameMove, roomId?: string) => void;
-  exitSession: (userId: string) => void;
-  pingSession: (userId: string) => void;
+  socket: Socket | null
+  connected: boolean
+  joinSession: (userId: string, roomId?: string) => void
+  sendMove: (userId: string, move: GameMove, roomId?: string) => void
+  exitSession: (userId: string) => void
+  pingSession: (userId: string) => void
 }
 
 /**
@@ -40,125 +32,119 @@ export interface UseArcadeSocketReturn {
  * @param events - Event handlers for socket events
  * @returns Socket instance and helper methods
  */
-export function useArcadeSocket(
-  events: ArcadeSocketEvents = {},
-): UseArcadeSocketReturn {
-  const [socket, setSocket] = useState<Socket | null>(null);
-  const [connected, setConnected] = useState(false);
-  const eventsRef = useRef(events);
+export function useArcadeSocket(events: ArcadeSocketEvents = {}): UseArcadeSocketReturn {
+  const [socket, setSocket] = useState<Socket | null>(null)
+  const [connected, setConnected] = useState(false)
+  const eventsRef = useRef(events)
 
   // Update events ref when they change
   useEffect(() => {
-    eventsRef.current = events;
-  }, [events]);
+    eventsRef.current = events
+  }, [events])
 
   // Initialize socket connection
   useEffect(() => {
     const socketInstance = io({
-      path: "/api/socket",
+      path: '/api/socket',
       reconnection: true,
       reconnectionDelay: 1000,
       reconnectionAttempts: 5,
-    });
+    })
 
-    socketInstance.on("connect", () => {
-      console.log("[ArcadeSocket] Connected");
-      setConnected(true);
-    });
+    socketInstance.on('connect', () => {
+      console.log('[ArcadeSocket] Connected')
+      setConnected(true)
+    })
 
-    socketInstance.on("disconnect", () => {
-      console.log("[ArcadeSocket] Disconnected");
-      setConnected(false);
-    });
+    socketInstance.on('disconnect', () => {
+      console.log('[ArcadeSocket] Disconnected')
+      setConnected(false)
+    })
 
-    socketInstance.on("session-state", (data) => {
-      eventsRef.current.onSessionState?.(data);
-    });
+    socketInstance.on('session-state', (data) => {
+      eventsRef.current.onSessionState?.(data)
+    })
 
-    socketInstance.on("no-active-session", () => {
-      eventsRef.current.onNoActiveSession?.();
-    });
+    socketInstance.on('no-active-session', () => {
+      eventsRef.current.onNoActiveSession?.()
+    })
 
-    socketInstance.on("move-accepted", (data) => {
-      eventsRef.current.onMoveAccepted?.(data);
-    });
+    socketInstance.on('move-accepted', (data) => {
+      eventsRef.current.onMoveAccepted?.(data)
+    })
 
-    socketInstance.on("move-rejected", (data) => {
-      console.log(`[ArcadeSocket] Move rejected: ${data.error}`);
-      eventsRef.current.onMoveRejected?.(data);
-    });
+    socketInstance.on('move-rejected', (data) => {
+      console.log(`[ArcadeSocket] Move rejected: ${data.error}`)
+      eventsRef.current.onMoveRejected?.(data)
+    })
 
-    socketInstance.on("session-ended", () => {
-      console.log("[ArcadeSocket] Session ended");
-      eventsRef.current.onSessionEnded?.();
-    });
+    socketInstance.on('session-ended', () => {
+      console.log('[ArcadeSocket] Session ended')
+      eventsRef.current.onSessionEnded?.()
+    })
 
-    socketInstance.on("session-error", (data) => {
-      console.error("[ArcadeSocket] Session error", data);
-      eventsRef.current.onError?.(data);
-    });
+    socketInstance.on('session-error', (data) => {
+      console.error('[ArcadeSocket] Session error', data)
+      eventsRef.current.onError?.(data)
+    })
 
-    socketInstance.on("pong-session", () => {
-      console.log("[ArcadeSocket] Pong received");
-    });
+    socketInstance.on('pong-session', () => {
+      console.log('[ArcadeSocket] Pong received')
+    })
 
-    setSocket(socketInstance);
+    setSocket(socketInstance)
 
     return () => {
-      socketInstance.disconnect();
-    };
-  }, []);
+      socketInstance.disconnect()
+    }
+  }, [])
 
   const joinSession = useCallback(
     (userId: string, roomId?: string) => {
       if (!socket) {
-        console.warn(
-          "[ArcadeSocket] Cannot join session - socket not connected",
-        );
-        return;
+        console.warn('[ArcadeSocket] Cannot join session - socket not connected')
+        return
       }
       console.log(
-        "[ArcadeSocket] Joining session for user:",
+        '[ArcadeSocket] Joining session for user:',
         userId,
-        roomId ? `in room ${roomId}` : "(solo)",
-      );
-      socket.emit("join-arcade-session", { userId, roomId });
+        roomId ? `in room ${roomId}` : '(solo)'
+      )
+      socket.emit('join-arcade-session', { userId, roomId })
     },
-    [socket],
-  );
+    [socket]
+  )
 
   const sendMove = useCallback(
     (userId: string, move: GameMove, roomId?: string) => {
       if (!socket) {
-        console.warn("[ArcadeSocket] Cannot send move - socket not connected");
-        return;
+        console.warn('[ArcadeSocket] Cannot send move - socket not connected')
+        return
       }
-      socket.emit("game-move", { userId, move, roomId });
+      socket.emit('game-move', { userId, move, roomId })
     },
-    [socket],
-  );
+    [socket]
+  )
 
   const exitSession = useCallback(
     (userId: string) => {
       if (!socket) {
-        console.warn(
-          "[ArcadeSocket] Cannot exit session - socket not connected",
-        );
-        return;
+        console.warn('[ArcadeSocket] Cannot exit session - socket not connected')
+        return
       }
-      console.log("[ArcadeSocket] Exiting session for user:", userId);
-      socket.emit("exit-arcade-session", { userId });
+      console.log('[ArcadeSocket] Exiting session for user:', userId)
+      socket.emit('exit-arcade-session', { userId })
     },
-    [socket],
-  );
+    [socket]
+  )
 
   const pingSession = useCallback(
     (userId: string) => {
-      if (!socket) return;
-      socket.emit("ping-session", { userId });
+      if (!socket) return
+      socket.emit('ping-session', { userId })
     },
-    [socket],
-  );
+    [socket]
+  )
 
   return {
     socket,
@@ -167,5 +153,5 @@ export function useArcadeSocket(
     sendMove,
     exitSession,
     pingSession,
-  };
+  }
 }
diff --git a/apps/web/src/hooks/useClipboard.ts b/apps/web/src/hooks/useClipboard.ts
index 677a824c..38cf8197 100644
--- a/apps/web/src/hooks/useClipboard.ts
+++ b/apps/web/src/hooks/useClipboard.ts
@@ -1,28 +1,28 @@
-import { useCallback, useState } from "react";
+import { useCallback, useState } from 'react'
 
 export interface UseClipboardOptions {
   /**
    * Timeout in milliseconds to reset the copied state
    * @default 1500
    */
-  timeout?: number;
+  timeout?: number
 }
 
 export interface UseClipboardReturn {
   /**
    * Whether the text was recently copied
    */
-  copied: boolean;
+  copied: boolean
 
   /**
    * Copy text to clipboard
    */
-  copy: (text: string) => Promise<void>;
+  copy: (text: string) => Promise<void>
 
   /**
    * Reset the copied state manually
    */
-  reset: () => void;
+  reset: () => void
 }
 
 /**
@@ -37,30 +37,28 @@ export interface UseClipboardReturn {
  * </button>
  * ```
  */
-export function useClipboard(
-  options: UseClipboardOptions = {},
-): UseClipboardReturn {
-  const { timeout = 1500 } = options;
-  const [copied, setCopied] = useState(false);
+export function useClipboard(options: UseClipboardOptions = {}): UseClipboardReturn {
+  const { timeout = 1500 } = options
+  const [copied, setCopied] = useState(false)
 
   const copy = useCallback(
     async (text: string) => {
       try {
-        await navigator.clipboard.writeText(text);
-        setCopied(true);
+        await navigator.clipboard.writeText(text)
+        setCopied(true)
         setTimeout(() => {
-          setCopied(false);
-        }, timeout);
+          setCopied(false)
+        }, timeout)
       } catch (error) {
-        console.error("[useClipboard] Failed to copy to clipboard:", error);
+        console.error('[useClipboard] Failed to copy to clipboard:', error)
       }
     },
-    [timeout],
-  );
+    [timeout]
+  )
 
   const reset = useCallback(() => {
-    setCopied(false);
-  }, []);
+    setCopied(false)
+  }, [])
 
-  return { copied, copy, reset };
+  return { copied, copy, reset }
 }
diff --git a/apps/web/src/hooks/useOptimisticGameState.ts b/apps/web/src/hooks/useOptimisticGameState.ts
index b77adf41..96a1b457 100644
--- a/apps/web/src/hooks/useOptimisticGameState.ts
+++ b/apps/web/src/hooks/useOptimisticGameState.ts
@@ -1,89 +1,85 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { GameMove } from "@/lib/arcade/validation";
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { GameMove } from '@/lib/arcade/validation'
 
 export interface PendingMove<TState> {
-  move: GameMove;
-  optimisticState: TState;
-  timestamp: number;
+  move: GameMove
+  optimisticState: TState
+  timestamp: number
 }
 
 export interface UseOptimisticGameStateOptions<TState> {
   /**
    * Initial game state
    */
-  initialState: TState;
+  initialState: TState
 
   /**
    * Apply a move to the state optimistically (client-side)
    * This should be the same logic that runs on the server
    */
-  applyMove: (state: TState, move: GameMove) => TState;
+  applyMove: (state: TState, move: GameMove) => TState
 
   /**
    * Called when server accepts a move
    */
-  onMoveAccepted?: (state: TState, move: GameMove) => void;
+  onMoveAccepted?: (state: TState, move: GameMove) => void
 
   /**
    * Called when server rejects a move
    */
-  onMoveRejected?: (error: string, move: GameMove) => void;
+  onMoveRejected?: (error: string, move: GameMove) => void
 }
 
 export interface UseOptimisticGameStateReturn<TState> {
   /**
    * Current game state (includes optimistic updates)
    */
-  state: TState;
+  state: TState
 
   /**
    * Server-confirmed version number
    */
-  version: number;
+  version: number
 
   /**
    * Whether there are pending moves awaiting server confirmation
    */
-  hasPendingMoves: boolean;
+  hasPendingMoves: boolean
 
   /**
    * Last error from server (move rejection)
    */
-  lastError: string | null;
+  lastError: string | null
 
   /**
    * Apply a move optimistically and send to server
    */
-  applyOptimisticMove: (move: GameMove) => void;
+  applyOptimisticMove: (move: GameMove) => void
 
   /**
    * Handle server accepting a move
    */
-  handleMoveAccepted: (
-    serverState: TState,
-    serverVersion: number,
-    acceptedMove: GameMove,
-  ) => void;
+  handleMoveAccepted: (serverState: TState, serverVersion: number, acceptedMove: GameMove) => void
 
   /**
    * Handle server rejecting a move
    */
-  handleMoveRejected: (error: string, rejectedMove: GameMove) => void;
+  handleMoveRejected: (error: string, rejectedMove: GameMove) => void
 
   /**
    * Sync state with server (on reconnect or initial load)
    */
-  syncWithServer: (serverState: TState, serverVersion: number) => void;
+  syncWithServer: (serverState: TState, serverVersion: number) => void
 
   /**
    * Clear the last error
    */
-  clearError: () => void;
+  clearError: () => void
 
   /**
    * Reset to initial state
    */
-  reset: () => void;
+  reset: () => void
 }
 
 /**
@@ -97,38 +93,37 @@ export interface UseOptimisticGameStateReturn<TState> {
  * @returns Game state and update methods
  */
 export function useOptimisticGameState<TState>(
-  options: UseOptimisticGameStateOptions<TState>,
+  options: UseOptimisticGameStateOptions<TState>
 ): UseOptimisticGameStateReturn<TState> {
-  const { initialState, applyMove, onMoveAccepted, onMoveRejected } = options;
+  const { initialState, applyMove, onMoveAccepted, onMoveRejected } = options
 
   // Server-confirmed state and version
-  const [serverState, setServerState] = useState<TState>(initialState);
-  const [serverVersion, setServerVersion] = useState(1);
+  const [serverState, setServerState] = useState<TState>(initialState)
+  const [serverVersion, setServerVersion] = useState(1)
 
   // Pending moves that haven't been confirmed by server yet
-  const [pendingMoves, setPendingMoves] = useState<PendingMove<TState>[]>([]);
+  const [pendingMoves, setPendingMoves] = useState<PendingMove<TState>[]>([])
 
   // Last error from move rejection
-  const [lastError, setLastError] = useState<string | null>(null);
+  const [lastError, setLastError] = useState<string | null>(null)
 
   // Ref for callbacks to avoid stale closures
-  const callbacksRef = useRef({ onMoveAccepted, onMoveRejected });
+  const callbacksRef = useRef({ onMoveAccepted, onMoveRejected })
   useEffect(() => {
-    callbacksRef.current = { onMoveAccepted, onMoveRejected };
-  }, [onMoveAccepted, onMoveRejected]);
+    callbacksRef.current = { onMoveAccepted, onMoveRejected }
+  }, [onMoveAccepted, onMoveRejected])
 
   // Current state = server state + all pending moves applied
   const currentState = pendingMoves.reduce(
     (_state, pending) => pending.optimisticState,
-    serverState,
-  );
+    serverState
+  )
 
   const applyOptimisticMove = useCallback(
     (move: GameMove) => {
       setPendingMoves((prev) => {
-        const baseState =
-          prev.length > 0 ? prev[prev.length - 1].optimisticState : serverState;
-        const optimisticState = applyMove(baseState, move);
+        const baseState = prev.length > 0 ? prev[prev.length - 1].optimisticState : serverState
+        const optimisticState = applyMove(baseState, move)
 
         return [
           ...prev,
@@ -137,95 +132,79 @@ export function useOptimisticGameState<TState>(
             optimisticState,
             timestamp: Date.now(),
           },
-        ];
-      });
+        ]
+      })
     },
-    [serverState, applyMove],
-  );
+    [serverState, applyMove]
+  )
 
   const handleMoveAccepted = useCallback(
-    (
-      newServerState: TState,
-      newServerVersion: number,
-      acceptedMove: GameMove,
-    ) => {
+    (newServerState: TState, newServerVersion: number, acceptedMove: GameMove) => {
       // Update server state
-      setServerState(newServerState);
-      setServerVersion(newServerVersion);
+      setServerState(newServerState)
+      setServerVersion(newServerVersion)
 
       // Remove the accepted move from pending queue
       setPendingMoves((prev) => {
         const index = prev.findIndex(
-          (p) =>
-            p.move.type === acceptedMove.type &&
-            p.move.timestamp === acceptedMove.timestamp,
-        );
+          (p) => p.move.type === acceptedMove.type && p.move.timestamp === acceptedMove.timestamp
+        )
 
         if (index !== -1) {
-          return prev.slice(index + 1);
+          return prev.slice(index + 1)
         }
 
         // Move not found in pending queue - might be from another tab
         // Clear all pending moves since server state is now authoritative
-        return [];
-      });
+        return []
+      })
 
-      callbacksRef.current.onMoveAccepted?.(newServerState, acceptedMove);
+      callbacksRef.current.onMoveAccepted?.(newServerState, acceptedMove)
     },
-    [],
-  );
+    []
+  )
 
-  const handleMoveRejected = useCallback(
-    (error: string, rejectedMove: GameMove) => {
-      // Set the error for UI display
-      console.warn(
-        `[ErrorState] SET_ERROR error="${error}" move=${rejectedMove.type}`,
-      );
-      setLastError(error);
+  const handleMoveRejected = useCallback((error: string, rejectedMove: GameMove) => {
+    // Set the error for UI display
+    console.warn(`[ErrorState] SET_ERROR error="${error}" move=${rejectedMove.type}`)
+    setLastError(error)
 
-      // Remove the rejected move and all subsequent moves from pending queue
-      setPendingMoves((prev) => {
-        const index = prev.findIndex(
-          (p) =>
-            p.move.type === rejectedMove.type &&
-            p.move.timestamp === rejectedMove.timestamp,
-        );
+    // Remove the rejected move and all subsequent moves from pending queue
+    setPendingMoves((prev) => {
+      const index = prev.findIndex(
+        (p) => p.move.type === rejectedMove.type && p.move.timestamp === rejectedMove.timestamp
+      )
 
-        if (index !== -1) {
-          // Rollback: remove rejected move and everything after it
-          return prev.slice(0, index);
-        }
+      if (index !== -1) {
+        // Rollback: remove rejected move and everything after it
+        return prev.slice(0, index)
+      }
 
-        return prev;
-      });
+      return prev
+    })
 
-      callbacksRef.current.onMoveRejected?.(error, rejectedMove);
-    },
-    [],
-  );
+    callbacksRef.current.onMoveRejected?.(error, rejectedMove)
+  }, [])
 
-  const syncWithServer = useCallback(
-    (newServerState: TState, newServerVersion: number) => {
-      console.log(`[ErrorState] SYNC_WITH_SERVER version=${newServerVersion}`);
-      setServerState(newServerState);
-      setServerVersion(newServerVersion);
-      // Clear pending moves on sync (new authoritative state from server)
-      setPendingMoves([]);
-    },
-    [],
-  );
+  const syncWithServer = useCallback((newServerState: TState, newServerVersion: number) => {
+    console.log(`[ErrorState] SYNC_WITH_SERVER version=${newServerVersion}`)
+    setServerState(newServerState)
+    setServerVersion(newServerVersion)
+    // Clear pending moves on sync (new authoritative state from server)
+    setPendingMoves([])
+  }, [])
 
   const clearError = useCallback(() => {
-    console.log("[ErrorState] CLEAR_ERROR");
-    setLastError(null);
-  }, []);
+    console.log('[ErrorState] CLEAR_ERROR')
+    setLastError(null)
+  }, [])
 
   const reset = useCallback(() => {
-    setServerState(initialState);
-    setServerVersion(1);
-    setPendingMoves([]);
-    setLastError(null);
-  }, [initialState]);
+    setServerState(initialState)
+    setServerVersion(1)
+    setPendingMoves([])
+    setLastError(null)
+  }, [initialState])
 
   return {
     state: currentState,
@@ -238,5 +217,5 @@ export function useOptimisticGameState<TState>(
     syncWithServer,
     clearError,
     reset,
-  };
+  }
 }
diff --git a/apps/web/src/hooks/usePlayerStats.ts b/apps/web/src/hooks/usePlayerStats.ts
index 2e6daf74..cfb133d9 100644
--- a/apps/web/src/hooks/usePlayerStats.ts
+++ b/apps/web/src/hooks/usePlayerStats.ts
@@ -1,12 +1,12 @@
-"use client";
+'use client'
 
-import { useQuery } from "@tanstack/react-query";
+import { useQuery } from '@tanstack/react-query'
 import type {
   GetAllPlayerStatsResponse,
   GetPlayerStatsResponse,
   PlayerStatsData,
-} from "@/lib/arcade/stats/types";
-import { api } from "@/lib/queryClient";
+} from '@/lib/arcade/stats/types'
+import { api } from '@/lib/queryClient'
 
 /**
  * Hook to fetch stats for a specific player or all user's players
@@ -24,22 +24,21 @@ import { api } from "@/lib/queryClient";
  */
 export function usePlayerStats(playerId?: string) {
   return useQuery<PlayerStatsData | PlayerStatsData[]>({
-    queryKey: playerId ? ["player-stats", playerId] : ["player-stats"],
+    queryKey: playerId ? ['player-stats', playerId] : ['player-stats'],
     queryFn: async () => {
-      const url = playerId ? `player-stats/${playerId}` : "player-stats";
+      const url = playerId ? `player-stats/${playerId}` : 'player-stats'
 
-      const res = await api(url);
+      const res = await api(url)
       if (!res.ok) {
-        throw new Error("Failed to fetch player stats");
+        throw new Error('Failed to fetch player stats')
       }
 
-      const data: GetPlayerStatsResponse | GetAllPlayerStatsResponse =
-        await res.json();
+      const data: GetPlayerStatsResponse | GetAllPlayerStatsResponse = await res.json()
 
       // Return single player stats or array of all stats
-      return "stats" in data ? data.stats : data.playerStats;
+      return 'stats' in data ? data.stats : data.playerStats
     },
-  });
+  })
 }
 
 /**
@@ -49,19 +48,19 @@ export function usePlayerStats(playerId?: string) {
  */
 export function useAllPlayerStats() {
   const query = useQuery<PlayerStatsData[]>({
-    queryKey: ["player-stats"],
+    queryKey: ['player-stats'],
     queryFn: async () => {
-      const res = await api("player-stats");
+      const res = await api('player-stats')
       if (!res.ok) {
-        throw new Error("Failed to fetch player stats");
+        throw new Error('Failed to fetch player stats')
       }
 
-      const data: GetAllPlayerStatsResponse = await res.json();
-      return data.playerStats;
+      const data: GetAllPlayerStatsResponse = await res.json()
+      return data.playerStats
     },
-  });
+  })
 
-  return query;
+  return query
 }
 
 /**
@@ -71,18 +70,18 @@ export function useAllPlayerStats() {
  */
 export function useSinglePlayerStats(playerId: string) {
   const query = useQuery<PlayerStatsData>({
-    queryKey: ["player-stats", playerId],
+    queryKey: ['player-stats', playerId],
     queryFn: async () => {
-      const res = await api(`player-stats/${playerId}`);
+      const res = await api(`player-stats/${playerId}`)
       if (!res.ok) {
-        throw new Error("Failed to fetch player stats");
+        throw new Error('Failed to fetch player stats')
       }
 
-      const data: GetPlayerStatsResponse = await res.json();
-      return data.stats;
+      const data: GetPlayerStatsResponse = await res.json()
+      return data.stats
     },
     enabled: !!playerId, // Only run if playerId is provided
-  });
+  })
 
-  return query;
+  return query
 }
diff --git a/apps/web/src/hooks/useRecordGameResult.ts b/apps/web/src/hooks/useRecordGameResult.ts
index 2ba7e699..4854fdef 100644
--- a/apps/web/src/hooks/useRecordGameResult.ts
+++ b/apps/web/src/hooks/useRecordGameResult.ts
@@ -1,8 +1,8 @@
-"use client";
+'use client'
 
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import type { GameResult, RecordGameResponse } from "@/lib/arcade/stats/types";
-import { api } from "@/lib/queryClient";
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import type { GameResult, RecordGameResponse } from '@/lib/arcade/stats/types'
+import { api } from '@/lib/queryClient'
 
 /**
  * Hook to record a game result and update player stats
@@ -19,35 +19,33 @@ import { api } from "@/lib/queryClient";
  * ```
  */
 export function useRecordGameResult() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: async (gameResult: GameResult): Promise<RecordGameResponse> => {
-      const res = await api("player-stats/record-game", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+      const res = await api('player-stats/record-game', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ gameResult }),
-      });
+      })
 
       if (!res.ok) {
-        const error = await res
-          .json()
-          .catch(() => ({ error: "Failed to record game result" }));
-        throw new Error(error.error || "Failed to record game result");
+        const error = await res.json().catch(() => ({ error: 'Failed to record game result' }))
+        throw new Error(error.error || 'Failed to record game result')
       }
 
-      return res.json();
+      return res.json()
     },
 
     onSuccess: (response) => {
       // Invalidate player stats queries to trigger refetch
-      queryClient.invalidateQueries({ queryKey: ["player-stats"] });
+      queryClient.invalidateQueries({ queryKey: ['player-stats'] })
 
-      console.log("✅ Game result recorded successfully:", response.updates);
+      console.log('✅ Game result recorded successfully:', response.updates)
     },
 
     onError: (error) => {
-      console.error("❌ Failed to record game result:", error);
+      console.error('❌ Failed to record game result:', error)
     },
-  });
+  })
 }
diff --git a/apps/web/src/hooks/useRoomData.ts b/apps/web/src/hooks/useRoomData.ts
index 4fc74edb..c2267afe 100644
--- a/apps/web/src/hooks/useRoomData.ts
+++ b/apps/web/src/hooks/useRoomData.ts
@@ -1,154 +1,142 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback, useEffect, useState } from "react";
-import { io, type Socket } from "socket.io-client";
-import { useViewerId } from "./useViewerId";
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useCallback, useEffect, useState } from 'react'
+import { io, type Socket } from 'socket.io-client'
+import { useViewerId } from './useViewerId'
 
 export interface RoomMember {
-  id: string;
-  userId: string;
-  displayName: string;
-  isOnline: boolean;
-  isCreator: boolean;
+  id: string
+  userId: string
+  displayName: string
+  isOnline: boolean
+  isCreator: boolean
 }
 
 export interface RoomPlayer {
-  id: string;
-  name: string;
-  emoji: string;
-  color: string;
+  id: string
+  name: string
+  emoji: string
+  color: string
 }
 
 export interface RoomData {
-  id: string;
-  name: string;
-  code: string;
-  gameName: string | null; // Nullable to support game selection in room
-  gameConfig?: Record<string, unknown> | null; // Game-specific settings
-  accessMode:
-    | "open"
-    | "password"
-    | "approval-only"
-    | "restricted"
-    | "locked"
-    | "retired";
-  members: RoomMember[];
-  memberPlayers: Record<string, RoomPlayer[]>; // userId -> players
+  id: string
+  name: string
+  code: string
+  gameName: string | null // Nullable to support game selection in room
+  gameConfig?: Record<string, unknown> | null // Game-specific settings
+  accessMode: 'open' | 'password' | 'approval-only' | 'restricted' | 'locked' | 'retired'
+  members: RoomMember[]
+  memberPlayers: Record<string, RoomPlayer[]> // userId -> players
 }
 
 export interface CreateRoomParams {
-  name: string | null;
-  gameName?: string | null; // Optional - rooms can be created without a game
-  creatorName?: string;
-  gameConfig?: Record<string, unknown>;
-  accessMode?:
-    | "open"
-    | "password"
-    | "approval-only"
-    | "restricted"
-    | "locked"
-    | "retired";
-  password?: string;
+  name: string | null
+  gameName?: string | null // Optional - rooms can be created without a game
+  creatorName?: string
+  gameConfig?: Record<string, unknown>
+  accessMode?: 'open' | 'password' | 'approval-only' | 'restricted' | 'locked' | 'retired'
+  password?: string
 }
 
 export interface JoinRoomResult {
-  member: RoomMember;
-  room: RoomData;
-  activePlayers: RoomPlayer[];
+  member: RoomMember
+  room: RoomData
+  activePlayers: RoomPlayer[]
   autoLeave?: {
-    roomIds: string[];
-    message: string;
-  };
+    roomIds: string[]
+    message: string
+  }
 }
 
 /**
  * Query key factory for rooms
  */
 export const roomKeys = {
-  all: ["rooms"] as const,
-  current: () => [...roomKeys.all, "current"] as const,
-};
+  all: ['rooms'] as const,
+  current: () => [...roomKeys.all, 'current'] as const,
+}
 
 /**
  * Fetch the user's current room
  */
 async function fetchCurrentRoom(): Promise<RoomData | null> {
-  const response = await fetch("/api/arcade/rooms/current");
+  const response = await fetch('/api/arcade/rooms/current')
   if (!response.ok) {
-    if (response.status === 404) return null;
-    throw new Error("Failed to fetch current room");
+    if (response.status === 404) return null
+    throw new Error('Failed to fetch current room')
   }
-  const data = await response.json();
-  if (!data.room) return null;
+  const data = await response.json()
+  if (!data.room) return null
   return {
     id: data.room.id,
     name: data.room.name,
     code: data.room.code,
     gameName: data.room.gameName,
     gameConfig: data.room.gameConfig || null,
-    accessMode: data.room.accessMode || "open",
+    accessMode: data.room.accessMode || 'open',
     members: data.members || [],
     memberPlayers: data.memberPlayers || {},
-  };
+  }
 }
 
 /**
  * Create a new room
  */
 async function createRoomApi(params: CreateRoomParams): Promise<RoomData> {
-  const response = await fetch("/api/arcade/rooms", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
+  const response = await fetch('/api/arcade/rooms', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
       name: params.name,
       gameName: params.gameName || null,
-      creatorName: params.creatorName || "Player",
+      creatorName: params.creatorName || 'Player',
       gameConfig: params.gameConfig || null,
       accessMode: params.accessMode,
       password: params.password,
     }),
-  });
+  })
 
   if (!response.ok) {
-    const errorData = await response.json();
-    throw new Error(errorData.error || "Failed to create room");
+    const errorData = await response.json()
+    throw new Error(errorData.error || 'Failed to create room')
   }
 
-  const data = await response.json();
+  const data = await response.json()
   return {
     id: data.room.id,
     name: data.room.name,
     code: data.room.code,
     gameName: data.room.gameName,
     gameConfig: data.room.gameConfig || null,
-    accessMode: data.room.accessMode || "open",
+    accessMode: data.room.accessMode || 'open',
     members: data.members || [],
     memberPlayers: data.memberPlayers || {},
-  };
+  }
 }
 
 /**
  * Join a room
  */
 async function joinRoomApi(params: {
-  roomId: string;
-  displayName?: string;
-  password?: string;
+  roomId: string
+  displayName?: string
+  password?: string
 }): Promise<JoinRoomResult> {
   const response = await fetch(`/api/arcade/rooms/${params.roomId}/join`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
-      displayName: params.displayName || "Player",
+      displayName: params.displayName || 'Player',
       password: params.password,
     }),
-  });
+  })
 
   if (!response.ok) {
-    const errorData = await response.json();
-    throw new Error(errorData.error || "Failed to join room");
+    const errorData = await response.json()
+    throw new Error(errorData.error || 'Failed to join room')
   }
 
-  const data = await response.json();
+  const data = await response.json()
   return {
     ...data,
     room: {
@@ -157,11 +145,11 @@ async function joinRoomApi(params: {
       code: data.room.code,
       gameName: data.room.gameName,
       gameConfig: data.room.gameConfig || null,
-      accessMode: data.room.accessMode || "open",
+      accessMode: data.room.accessMode || 'open',
       members: data.members || [],
       memberPlayers: data.memberPlayers || {},
     },
-  };
+  }
 }
 
 /**
@@ -169,13 +157,13 @@ async function joinRoomApi(params: {
  */
 async function leaveRoomApi(roomId: string): Promise<void> {
   const response = await fetch(`/api/arcade/rooms/${roomId}/leave`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-  });
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+  })
 
   if (!response.ok) {
-    const errorData = await response.json();
-    throw new Error(errorData.error || "Failed to leave room");
+    const errorData = await response.json()
+    throw new Error(errorData.error || 'Failed to leave room')
   }
 }
 
@@ -183,51 +171,51 @@ async function leaveRoomApi(roomId: string): Promise<void> {
  * Get room by join code
  */
 async function getRoomByCodeApi(code: string): Promise<RoomData> {
-  const response = await fetch(`/api/arcade/rooms/code/${code}`);
+  const response = await fetch(`/api/arcade/rooms/code/${code}`)
 
   if (!response.ok) {
     if (response.status === 404) {
-      throw new Error("Room not found");
+      throw new Error('Room not found')
     }
-    const errorData = await response.json();
-    throw new Error(errorData.error || "Failed to find room");
+    const errorData = await response.json()
+    throw new Error(errorData.error || 'Failed to find room')
   }
 
-  const data = await response.json();
+  const data = await response.json()
   return {
     id: data.room.id,
     name: data.room.name,
     code: data.room.code,
     gameName: data.room.gameName,
     gameConfig: data.room.gameConfig || null,
-    accessMode: data.room.accessMode || "open",
+    accessMode: data.room.accessMode || 'open',
     members: data.members || [],
     memberPlayers: data.memberPlayers || {},
-  };
+  }
 }
 
 export interface ModerationEvent {
-  type: "kicked" | "banned" | "report" | "invitation" | "join-request";
+  type: 'kicked' | 'banned' | 'report' | 'invitation' | 'join-request'
   data: {
-    roomId?: string;
-    kickedBy?: string;
-    bannedBy?: string;
-    reason?: string;
-    reportId?: string;
-    reporterName?: string;
-    reportedUserName?: string;
-    reportedUserId?: string;
+    roomId?: string
+    kickedBy?: string
+    bannedBy?: string
+    reason?: string
+    reportId?: string
+    reporterName?: string
+    reportedUserName?: string
+    reportedUserId?: string
     // Invitation fields
-    invitationId?: string;
-    invitedBy?: string;
-    invitedByName?: string;
-    invitationType?: "manual" | "auto-unban" | "auto-create";
-    message?: string;
+    invitationId?: string
+    invitedBy?: string
+    invitedByName?: string
+    invitationType?: 'manual' | 'auto-unban' | 'auto-create'
+    message?: string
     // Join request fields
-    requestId?: string;
-    requesterId?: string;
-    requesterName?: string;
-  };
+    requestId?: string
+    requesterId?: string
+    requesterName?: string
+  }
 }
 
 /**
@@ -235,11 +223,10 @@ export interface ModerationEvent {
  * Returns null if user is not in any room
  */
 export function useRoomData() {
-  const { data: userId } = useViewerId();
-  const queryClient = useQueryClient();
-  const [socket, setSocket] = useState<Socket | null>(null);
-  const [moderationEvent, setModerationEvent] =
-    useState<ModerationEvent | null>(null);
+  const { data: userId } = useViewerId()
+  const queryClient = useQueryClient()
+  const [socket, setSocket] = useState<Socket | null>(null)
+  const [moderationEvent, setModerationEvent] = useState<ModerationEvent | null>(null)
 
   // Fetch current room with TanStack Query
   const {
@@ -251,200 +238,177 @@ export function useRoomData() {
     queryFn: fetchCurrentRoom,
     enabled: !!userId,
     staleTime: 30000, // Consider data fresh for 30 seconds
-  });
+  })
 
   // Initialize socket connection when user is authenticated (regardless of room membership)
   useEffect(() => {
     if (!userId) {
       if (socket) {
-        socket.disconnect();
-        setSocket(null);
+        socket.disconnect()
+        setSocket(null)
       }
-      return;
+      return
     }
 
-    const sock = io({ path: "/api/socket" });
+    const sock = io({ path: '/api/socket' })
 
-    sock.on("connect", () => {
+    sock.on('connect', () => {
       // Always join user-specific channel for personal notifications (invitations, bans, kicks)
-      sock.emit("join-user-channel", { userId });
+      sock.emit('join-user-channel', { userId })
 
       // Join room channel only if user is in a room
       if (roomData?.id) {
-        sock.emit("join-room", { roomId: roomData.id, userId });
+        sock.emit('join-room', { roomId: roomData.id, userId })
       }
-    });
+    })
 
-    sock.on("disconnect", () => {
+    sock.on('disconnect', () => {
       // Socket disconnected
-    });
+    })
 
-    setSocket(sock);
+    setSocket(sock)
 
     return () => {
       if (sock.connected) {
         // Leave the room before disconnecting (if in a room)
         if (roomData?.id) {
-          sock.emit("leave-room", { roomId: roomData.id, userId });
+          sock.emit('leave-room', { roomId: roomData.id, userId })
         }
-        sock.disconnect();
+        sock.disconnect()
       }
-    };
-  }, [userId, roomData?.id]);
+    }
+  }, [userId, roomData?.id])
 
   // Subscribe to real-time updates via socket
   useEffect(() => {
-    if (!socket) return;
+    if (!socket) return
 
     const handleRoomJoined = (data: {
-      roomId: string;
-      members: RoomMember[];
-      memberPlayers: Record<string, RoomPlayer[]>;
+      roomId: string
+      members: RoomMember[]
+      memberPlayers: Record<string, RoomPlayer[]>
     }) => {
       if (data.roomId === roomData?.id) {
-        queryClient.setQueryData<RoomData | null>(
-          roomKeys.current(),
-          (prev) => {
-            if (!prev) return null;
-            return {
-              ...prev,
-              members: data.members,
-              memberPlayers: data.memberPlayers,
-            };
-          },
-        );
+        queryClient.setQueryData<RoomData | null>(roomKeys.current(), (prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            members: data.members,
+            memberPlayers: data.memberPlayers,
+          }
+        })
       }
-    };
+    }
 
     const handleMemberJoined = (data: {
-      roomId: string;
-      userId: string;
-      members: RoomMember[];
-      memberPlayers: Record<string, RoomPlayer[]>;
+      roomId: string
+      userId: string
+      members: RoomMember[]
+      memberPlayers: Record<string, RoomPlayer[]>
     }) => {
       if (data.roomId === roomData?.id) {
-        queryClient.setQueryData<RoomData | null>(
-          roomKeys.current(),
-          (prev) => {
-            if (!prev) return null;
-            return {
-              ...prev,
-              members: data.members,
-              memberPlayers: data.memberPlayers,
-            };
-          },
-        );
+        queryClient.setQueryData<RoomData | null>(roomKeys.current(), (prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            members: data.members,
+            memberPlayers: data.memberPlayers,
+          }
+        })
       }
-    };
+    }
 
     const handleMemberLeft = (data: {
-      roomId: string;
-      userId: string;
-      members: RoomMember[];
-      memberPlayers: Record<string, RoomPlayer[]>;
+      roomId: string
+      userId: string
+      members: RoomMember[]
+      memberPlayers: Record<string, RoomPlayer[]>
     }) => {
       if (data.roomId === roomData?.id) {
-        queryClient.setQueryData<RoomData | null>(
-          roomKeys.current(),
-          (prev) => {
-            if (!prev) return null;
-            return {
-              ...prev,
-              members: data.members,
-              memberPlayers: data.memberPlayers,
-            };
-          },
-        );
+        queryClient.setQueryData<RoomData | null>(roomKeys.current(), (prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            members: data.members,
+            memberPlayers: data.memberPlayers,
+          }
+        })
       }
-    };
+    }
 
     const handleRoomPlayersUpdated = (data: {
-      roomId: string;
-      memberPlayers: Record<string, RoomPlayer[]>;
+      roomId: string
+      memberPlayers: Record<string, RoomPlayer[]>
     }) => {
       if (data.roomId === roomData?.id) {
-        queryClient.setQueryData<RoomData | null>(
-          roomKeys.current(),
-          (prev) => {
-            if (!prev) return null;
-            return {
-              ...prev,
-              memberPlayers: data.memberPlayers,
-            };
-          },
-        );
+        queryClient.setQueryData<RoomData | null>(roomKeys.current(), (prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            memberPlayers: data.memberPlayers,
+          }
+        })
       }
-    };
+    }
 
     const handlePlayerDeactivated = (data: {
-      roomId: string;
-      playerId: string;
-      playerName: string;
-      deactivatedBy: string;
-      memberPlayers: Record<string, RoomPlayer[]>;
+      roomId: string
+      playerId: string
+      playerName: string
+      deactivatedBy: string
+      memberPlayers: Record<string, RoomPlayer[]>
     }) => {
       if (data.roomId === roomData?.id) {
-        queryClient.setQueryData<RoomData | null>(
-          roomKeys.current(),
-          (prev) => {
-            if (!prev) return null;
-            return {
-              ...prev,
-              memberPlayers: data.memberPlayers,
-            };
-          },
-        );
+        queryClient.setQueryData<RoomData | null>(roomKeys.current(), (prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            memberPlayers: data.memberPlayers,
+          }
+        })
       }
-    };
+    }
 
     // Moderation event handlers
-    const handleKickedFromRoom = (data: {
-      roomId: string;
-      kickedBy: string;
-      reason?: string;
-    }) => {
+    const handleKickedFromRoom = (data: { roomId: string; kickedBy: string; reason?: string }) => {
       setModerationEvent({
-        type: "kicked",
+        type: 'kicked',
         data: {
           roomId: data.roomId,
           kickedBy: data.kickedBy,
           reason: data.reason,
         },
-      });
+      })
       // Clear room data since user was kicked
-      queryClient.setQueryData(roomKeys.current(), null);
-    };
+      queryClient.setQueryData(roomKeys.current(), null)
+    }
 
-    const handleBannedFromRoom = (data: {
-      roomId: string;
-      bannedBy: string;
-      reason: string;
-    }) => {
+    const handleBannedFromRoom = (data: { roomId: string; bannedBy: string; reason: string }) => {
       setModerationEvent({
-        type: "banned",
+        type: 'banned',
         data: {
           roomId: data.roomId,
           bannedBy: data.bannedBy,
           reason: data.reason,
         },
-      });
+      })
       // Clear room data since user was banned
-      queryClient.setQueryData(roomKeys.current(), null);
-    };
+      queryClient.setQueryData(roomKeys.current(), null)
+    }
 
     const handleReportSubmitted = (data: {
-      roomId: string;
+      roomId: string
       report: {
-        id: string;
-        reporterName: string;
-        reportedUserName: string;
-        reportedUserId: string;
-        reason: string;
-        createdAt: Date;
-      };
+        id: string
+        reporterName: string
+        reportedUserName: string
+        reportedUserId: string
+        reason: string
+        createdAt: Date
+      }
     }) => {
       setModerationEvent({
-        type: "report",
+        type: 'report',
         data: {
           roomId: data.roomId,
           reportId: data.report.id,
@@ -453,22 +417,22 @@ export function useRoomData() {
           reportedUserId: data.report.reportedUserId,
           reason: data.report.reason,
         },
-      });
-    };
+      })
+    }
 
     const handleInvitationReceived = (data: {
       invitation: {
-        id: string;
-        roomId: string;
-        invitedBy: string;
-        invitedByName: string;
-        invitationType?: "manual" | "auto-unban" | "auto-create";
-        message?: string;
-        createdAt: Date;
-      };
+        id: string
+        roomId: string
+        invitedBy: string
+        invitedByName: string
+        invitationType?: 'manual' | 'auto-unban' | 'auto-create'
+        message?: string
+        createdAt: Date
+      }
     }) => {
       setModerationEvent({
-        type: "invitation",
+        type: 'invitation',
         data: {
           roomId: data.invitation.roomId,
           invitationId: data.invitation.id,
@@ -477,122 +441,114 @@ export function useRoomData() {
           invitationType: data.invitation.invitationType,
           message: data.invitation.message,
         },
-      });
-    };
+      })
+    }
 
     const handleJoinRequestSubmitted = (data: {
-      roomId: string;
+      roomId: string
       request: {
-        id: string;
-        userId: string;
-        userName: string;
-        createdAt: Date;
-      };
+        id: string
+        userId: string
+        userName: string
+        createdAt: Date
+      }
     }) => {
       setModerationEvent({
-        type: "join-request",
+        type: 'join-request',
         data: {
           roomId: data.roomId,
           requestId: data.request.id,
           requesterId: data.request.userId,
           requesterName: data.request.userName,
         },
-      });
-    };
+      })
+    }
 
     const handleRoomGameChanged = (data: {
-      roomId: string;
-      gameName: string | null;
-      gameConfig?: Record<string, unknown>;
+      roomId: string
+      gameName: string | null
+      gameConfig?: Record<string, unknown>
     }) => {
       if (data.roomId === roomData?.id) {
-        queryClient.setQueryData<RoomData | null>(
-          roomKeys.current(),
-          (prev) => {
-            if (!prev) return null;
-            return {
-              ...prev,
-              gameName: data.gameName,
-              // Only update gameConfig if it was provided in the broadcast
-              ...(data.gameConfig !== undefined
-                ? { gameConfig: data.gameConfig }
-                : {}),
-            };
-          },
-        );
+        queryClient.setQueryData<RoomData | null>(roomKeys.current(), (prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            gameName: data.gameName,
+            // Only update gameConfig if it was provided in the broadcast
+            ...(data.gameConfig !== undefined ? { gameConfig: data.gameConfig } : {}),
+          }
+        })
       }
-    };
+    }
 
     const handleOwnershipTransferred = (data: {
-      roomId: string;
-      oldOwnerId: string;
-      newOwnerId: string;
-      newOwnerName: string;
-      members: RoomMember[];
+      roomId: string
+      oldOwnerId: string
+      newOwnerId: string
+      newOwnerName: string
+      members: RoomMember[]
     }) => {
       if (data.roomId === roomData?.id) {
-        queryClient.setQueryData<RoomData | null>(
-          roomKeys.current(),
-          (prev) => {
-            if (!prev) return null;
-            return {
-              ...prev,
-              members: data.members,
-            };
-          },
-        );
+        queryClient.setQueryData<RoomData | null>(roomKeys.current(), (prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            members: data.members,
+          }
+        })
       }
-    };
+    }
 
-    socket.on("room-joined", handleRoomJoined);
-    socket.on("member-joined", handleMemberJoined);
-    socket.on("member-left", handleMemberLeft);
-    socket.on("room-players-updated", handleRoomPlayersUpdated);
-    socket.on("player-deactivated", handlePlayerDeactivated);
-    socket.on("kicked-from-room", handleKickedFromRoom);
-    socket.on("banned-from-room", handleBannedFromRoom);
-    socket.on("report-submitted", handleReportSubmitted);
-    socket.on("room-invitation-received", handleInvitationReceived);
-    socket.on("join-request-submitted", handleJoinRequestSubmitted);
-    socket.on("room-game-changed", handleRoomGameChanged);
-    socket.on("ownership-transferred", handleOwnershipTransferred);
+    socket.on('room-joined', handleRoomJoined)
+    socket.on('member-joined', handleMemberJoined)
+    socket.on('member-left', handleMemberLeft)
+    socket.on('room-players-updated', handleRoomPlayersUpdated)
+    socket.on('player-deactivated', handlePlayerDeactivated)
+    socket.on('kicked-from-room', handleKickedFromRoom)
+    socket.on('banned-from-room', handleBannedFromRoom)
+    socket.on('report-submitted', handleReportSubmitted)
+    socket.on('room-invitation-received', handleInvitationReceived)
+    socket.on('join-request-submitted', handleJoinRequestSubmitted)
+    socket.on('room-game-changed', handleRoomGameChanged)
+    socket.on('ownership-transferred', handleOwnershipTransferred)
 
     return () => {
-      socket.off("room-joined", handleRoomJoined);
-      socket.off("member-joined", handleMemberJoined);
-      socket.off("member-left", handleMemberLeft);
-      socket.off("room-players-updated", handleRoomPlayersUpdated);
-      socket.off("player-deactivated", handlePlayerDeactivated);
-      socket.off("kicked-from-room", handleKickedFromRoom);
-      socket.off("banned-from-room", handleBannedFromRoom);
-      socket.off("report-submitted", handleReportSubmitted);
-      socket.off("room-invitation-received", handleInvitationReceived);
-      socket.off("join-request-submitted", handleJoinRequestSubmitted);
-      socket.off("room-game-changed", handleRoomGameChanged);
-      socket.off("ownership-transferred", handleOwnershipTransferred);
-    };
-  }, [socket, roomData?.id, queryClient]);
+      socket.off('room-joined', handleRoomJoined)
+      socket.off('member-joined', handleMemberJoined)
+      socket.off('member-left', handleMemberLeft)
+      socket.off('room-players-updated', handleRoomPlayersUpdated)
+      socket.off('player-deactivated', handlePlayerDeactivated)
+      socket.off('kicked-from-room', handleKickedFromRoom)
+      socket.off('banned-from-room', handleBannedFromRoom)
+      socket.off('report-submitted', handleReportSubmitted)
+      socket.off('room-invitation-received', handleInvitationReceived)
+      socket.off('join-request-submitted', handleJoinRequestSubmitted)
+      socket.off('room-game-changed', handleRoomGameChanged)
+      socket.off('ownership-transferred', handleOwnershipTransferred)
+    }
+  }, [socket, roomData?.id, queryClient])
 
   // Function to notify room members of player updates
   const notifyRoomOfPlayerUpdate = useCallback(() => {
     if (socket && roomData?.id && userId) {
-      socket.emit("players-updated", { roomId: roomData.id, userId });
+      socket.emit('players-updated', { roomId: roomData.id, userId })
     }
-  }, [socket, roomData?.id, userId]);
+  }, [socket, roomData?.id, userId])
 
   /**
    * Generate a shareable URL for the room using the join code
    */
   const getRoomShareUrl = useCallback((code: string): string => {
-    return `${window.location.origin}/join/${code.toUpperCase()}`;
-  }, []);
+    return `${window.location.origin}/join/${code.toUpperCase()}`
+  }, [])
 
   /**
    * Clear the moderation event after it's been handled
    */
   const clearModerationEvent = useCallback(() => {
-    setModerationEvent(null);
-  }, []);
+    setModerationEvent(null)
+  }, [])
 
   return {
     // Data
@@ -605,52 +561,52 @@ export function useRoomData() {
     getRoomShareUrl,
     notifyRoomOfPlayerUpdate,
     clearModerationEvent,
-  };
+  }
 }
 
 /**
  * Hook: Create a room
  */
 export function useCreateRoom() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: createRoomApi,
     onSuccess: (newRoom) => {
       // Optimistically set the cache with the new room data
-      queryClient.setQueryData(roomKeys.current(), newRoom);
+      queryClient.setQueryData(roomKeys.current(), newRoom)
     },
-  });
+  })
 }
 
 /**
  * Hook: Join a room
  */
 export function useJoinRoom() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: joinRoomApi,
     onSuccess: (result) => {
       // Optimistically set the cache with the joined room data
-      queryClient.setQueryData(roomKeys.current(), result.room);
+      queryClient.setQueryData(roomKeys.current(), result.room)
     },
-  });
+  })
 }
 
 /**
  * Hook: Leave a room
  */
 export function useLeaveRoom() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: leaveRoomApi,
     onSuccess: () => {
       // Optimistically clear the room data
-      queryClient.setQueryData(roomKeys.current(), null);
+      queryClient.setQueryData(roomKeys.current(), null)
     },
-  });
+  })
 }
 
 /**
@@ -659,36 +615,36 @@ export function useLeaveRoom() {
 export function useGetRoomByCode() {
   return useMutation({
     mutationFn: getRoomByCodeApi,
-  });
+  })
 }
 
 /**
  * Set game for a room
  */
 async function setRoomGameApi(params: {
-  roomId: string;
-  gameName: string;
-  gameConfig?: Record<string, unknown>;
+  roomId: string
+  gameName: string
+  gameConfig?: Record<string, unknown>
 }): Promise<void> {
   // Only include gameConfig in the request if it was explicitly provided
   // Otherwise, we preserve the existing gameConfig in the database
   const body: { gameName: string; gameConfig?: Record<string, unknown> } = {
     gameName: params.gameName,
-  };
+  }
 
   if (params.gameConfig !== undefined) {
-    body.gameConfig = params.gameConfig;
+    body.gameConfig = params.gameConfig
   }
 
   const response = await fetch(`/api/arcade/rooms/${params.roomId}/settings`, {
-    method: "PATCH",
-    headers: { "Content-Type": "application/json" },
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(body),
-  });
+  })
 
   if (!response.ok) {
-    const errorData = await response.json();
-    throw new Error(errorData.error || "Failed to set room game");
+    const errorData = await response.json()
+    throw new Error(errorData.error || 'Failed to set room game')
   }
 }
 
@@ -696,23 +652,23 @@ async function setRoomGameApi(params: {
  * Hook: Set game for a room
  */
 export function useSetRoomGame() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: setRoomGameApi,
     onSuccess: (_, variables) => {
       // Update the cache with the new game
       queryClient.setQueryData<RoomData | null>(roomKeys.current(), (prev) => {
-        if (!prev) return null;
+        if (!prev) return null
         return {
           ...prev,
           gameName: variables.gameName,
-        };
-      });
+        }
+      })
       // Refetch to get the full updated room data
-      queryClient.invalidateQueries({ queryKey: roomKeys.current() });
+      queryClient.invalidateQueries({ queryKey: roomKeys.current() })
     },
-  });
+  })
 }
 
 /**
@@ -722,17 +678,17 @@ export function useSetRoomGame() {
  */
 async function clearRoomGameApi(roomId: string): Promise<void> {
   const response = await fetch(`/api/arcade/rooms/${roomId}/settings`, {
-    method: "PATCH",
-    headers: { "Content-Type": "application/json" },
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
       gameName: null,
       // DO NOT send gameConfig: null - we want to preserve settings!
     }),
-  });
+  })
 
   if (!response.ok) {
-    const errorData = await response.json();
-    throw new Error(errorData.error || "Failed to clear room game");
+    const errorData = await response.json()
+    throw new Error(errorData.error || 'Failed to clear room game')
   }
 }
 
@@ -740,43 +696,43 @@ async function clearRoomGameApi(roomId: string): Promise<void> {
  * Hook: Clear/reset game for a room (returns to game selection screen)
  */
 export function useClearRoomGame() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: clearRoomGameApi,
     onSuccess: () => {
       // Update the cache to clear the game
       queryClient.setQueryData<RoomData | null>(roomKeys.current(), (prev) => {
-        if (!prev) return null;
+        if (!prev) return null
         return {
           ...prev,
           gameName: null,
-        };
-      });
+        }
+      })
       // Refetch to get the full updated room data
-      queryClient.invalidateQueries({ queryKey: roomKeys.current() });
+      queryClient.invalidateQueries({ queryKey: roomKeys.current() })
     },
-  });
+  })
 }
 
 /**
  * Update game config for current room (game-specific settings)
  */
 async function updateGameConfigApi(params: {
-  roomId: string;
-  gameConfig: Record<string, unknown>;
+  roomId: string
+  gameConfig: Record<string, unknown>
 }): Promise<void> {
   const response = await fetch(`/api/arcade/rooms/${params.roomId}/settings`, {
-    method: "PATCH",
-    headers: { "Content-Type": "application/json" },
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
       gameConfig: params.gameConfig,
     }),
-  });
+  })
 
   if (!response.ok) {
-    const errorData = await response.json();
-    throw new Error(errorData.error || "Failed to update game config");
+    const errorData = await response.json()
+    throw new Error(errorData.error || 'Failed to update game config')
   }
 }
 
@@ -785,39 +741,36 @@ async function updateGameConfigApi(params: {
  * This allows games to persist their settings (e.g., difficulty, card count)
  */
 export function useUpdateGameConfig() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: updateGameConfigApi,
     onSuccess: (_, variables) => {
       // Update the cache with the new gameConfig
       queryClient.setQueryData<RoomData | null>(roomKeys.current(), (prev) => {
-        if (!prev) return null;
+        if (!prev) return null
         return {
           ...prev,
           gameConfig: variables.gameConfig,
-        };
-      });
+        }
+      })
     },
-  });
+  })
 }
 
 /**
  * Kick a user from the room (host only)
  */
-async function kickUserFromRoomApi(params: {
-  roomId: string;
-  userId: string;
-}): Promise<void> {
+async function kickUserFromRoomApi(params: { roomId: string; userId: string }): Promise<void> {
   const response = await fetch(`/api/arcade/rooms/${params.roomId}/kick`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ userId: params.userId }),
-  });
+  })
 
   if (!response.ok) {
-    const errorData = await response.json();
-    throw new Error(errorData.error || "Failed to kick user");
+    const errorData = await response.json()
+    throw new Error(errorData.error || 'Failed to kick user')
   }
 }
 
@@ -825,58 +778,58 @@ async function kickUserFromRoomApi(params: {
  * Hook: Kick a user from the room (host only)
  */
 export function useKickUser() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: kickUserFromRoomApi,
     onSuccess: () => {
       // The socket will handle updating members, but invalidate just in case
-      queryClient.invalidateQueries({ queryKey: roomKeys.current() });
+      queryClient.invalidateQueries({ queryKey: roomKeys.current() })
     },
-  });
+  })
 }
 
 /**
  * Deactivate a specific player in the room (host only)
  */
 async function deactivatePlayerInRoomApi(params: {
-  roomId: string;
-  playerId: string;
+  roomId: string
+  playerId: string
 }): Promise<void> {
-  const url = `/api/arcade/rooms/${params.roomId}/deactivate-player`;
-  console.log("[useRoomData] deactivatePlayerInRoomApi called");
-  console.log("[useRoomData] URL:", url);
-  console.log("[useRoomData] params:", params);
+  const url = `/api/arcade/rooms/${params.roomId}/deactivate-player`
+  console.log('[useRoomData] deactivatePlayerInRoomApi called')
+  console.log('[useRoomData] URL:', url)
+  console.log('[useRoomData] params:', params)
 
   const response = await fetch(url, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ playerId: params.playerId }),
-  });
+  })
 
-  console.log("[useRoomData] Response status:", response.status);
-  console.log("[useRoomData] Response ok:", response.ok);
+  console.log('[useRoomData] Response status:', response.status)
+  console.log('[useRoomData] Response ok:', response.ok)
 
   if (!response.ok) {
-    const errorData = await response.json();
-    console.error("[useRoomData] Error response:", errorData);
-    throw new Error(errorData.error || "Failed to deactivate player");
+    const errorData = await response.json()
+    console.error('[useRoomData] Error response:', errorData)
+    throw new Error(errorData.error || 'Failed to deactivate player')
   }
 
-  console.log("[useRoomData] deactivatePlayerInRoomApi success");
+  console.log('[useRoomData] deactivatePlayerInRoomApi success')
 }
 
 /**
  * Hook: Deactivate a specific player in the room (host only)
  */
 export function useDeactivatePlayer() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: deactivatePlayerInRoomApi,
     onSuccess: () => {
       // The socket will handle updating players, but invalidate just in case
-      queryClient.invalidateQueries({ queryKey: roomKeys.current() });
+      queryClient.invalidateQueries({ queryKey: roomKeys.current() })
     },
-  });
+  })
 }
diff --git a/apps/web/src/hooks/useUserPlayers.ts b/apps/web/src/hooks/useUserPlayers.ts
index 97d717a9..5fc56ab9 100644
--- a/apps/web/src/hooks/useUserPlayers.ts
+++ b/apps/web/src/hooks/useUserPlayers.ts
@@ -1,43 +1,43 @@
-"use client";
+'use client'
 
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import type { Player } from "@/db/schema/players";
-import { api } from "@/lib/queryClient";
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import type { Player } from '@/db/schema/players'
+import { api } from '@/lib/queryClient'
 
 /**
  * Query key factory for players
  */
 export const playerKeys = {
-  all: ["players"] as const,
-  lists: () => [...playerKeys.all, "list"] as const,
+  all: ['players'] as const,
+  lists: () => [...playerKeys.all, 'list'] as const,
   list: () => [...playerKeys.lists()] as const,
-  detail: (id: string) => [...playerKeys.all, "detail", id] as const,
-};
+  detail: (id: string) => [...playerKeys.all, 'detail', id] as const,
+}
 
 /**
  * Fetch all players for the current user
  */
 async function fetchPlayers(): Promise<Player[]> {
-  const res = await api("players");
-  if (!res.ok) throw new Error("Failed to fetch players");
-  const data = await res.json();
-  return data.players;
+  const res = await api('players')
+  if (!res.ok) throw new Error('Failed to fetch players')
+  const data = await res.json()
+  return data.players
 }
 
 /**
  * Create a new player
  */
 async function createPlayer(
-  newPlayer: Pick<Player, "name" | "emoji" | "color"> & { isActive?: boolean },
+  newPlayer: Pick<Player, 'name' | 'emoji' | 'color'> & { isActive?: boolean }
 ): Promise<Player> {
-  const res = await api("players", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
+  const res = await api('players', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(newPlayer),
-  });
-  if (!res.ok) throw new Error("Failed to create player");
-  const data = await res.json();
-  return data.player;
+  })
+  if (!res.ok) throw new Error('Failed to create player')
+  const data = await res.json()
+  return data.player
 }
 
 /**
@@ -47,25 +47,25 @@ async function updatePlayer({
   id,
   updates,
 }: {
-  id: string;
-  updates: Partial<Pick<Player, "name" | "emoji" | "color" | "isActive">>;
+  id: string
+  updates: Partial<Pick<Player, 'name' | 'emoji' | 'color' | 'isActive'>>
 }): Promise<Player> {
   const res = await api(`players/${id}`, {
-    method: "PATCH",
-    headers: { "Content-Type": "application/json" },
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(updates),
-  });
+  })
   if (!res.ok) {
     // Extract error message from response if available
     try {
-      const errorData = await res.json();
-      throw new Error(errorData.error || "Failed to update player");
+      const errorData = await res.json()
+      throw new Error(errorData.error || 'Failed to update player')
     } catch (_jsonError) {
-      throw new Error("Failed to update player");
+      throw new Error('Failed to update player')
     }
   }
-  const data = await res.json();
-  return data.player;
+  const data = await res.json()
+  return data.player
 }
 
 /**
@@ -73,9 +73,9 @@ async function updatePlayer({
  */
 async function deletePlayer(id: string): Promise<void> {
   const res = await api(`players/${id}`, {
-    method: "DELETE",
-  });
-  if (!res.ok) throw new Error("Failed to delete player");
+    method: 'DELETE',
+  })
+  if (!res.ok) throw new Error('Failed to delete player')
 }
 
 /**
@@ -85,25 +85,23 @@ export function useUserPlayers() {
   return useQuery({
     queryKey: playerKeys.list(),
     queryFn: fetchPlayers,
-  });
+  })
 }
 
 /**
  * Hook: Create a new player
  */
 export function useCreatePlayer() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: createPlayer,
     onMutate: async (newPlayer) => {
       // Cancel outgoing refetches
-      await queryClient.cancelQueries({ queryKey: playerKeys.lists() });
+      await queryClient.cancelQueries({ queryKey: playerKeys.lists() })
 
       // Snapshot previous value
-      const previousPlayers = queryClient.getQueryData<Player[]>(
-        playerKeys.list(),
-      );
+      const previousPlayers = queryClient.getQueryData<Player[]>(playerKeys.list())
 
       // Optimistically update to new value
       if (previousPlayers) {
@@ -112,130 +110,118 @@ export function useCreatePlayer() {
           ...newPlayer,
           createdAt: new Date(),
           isActive: newPlayer.isActive ?? false,
-          userId: "temp-user", // Temporary userId, will be replaced by server response
-        };
+          userId: 'temp-user', // Temporary userId, will be replaced by server response
+        }
         queryClient.setQueryData<Player[]>(playerKeys.list(), [
           ...previousPlayers,
           optimisticPlayer,
-        ]);
+        ])
       }
 
-      return { previousPlayers };
+      return { previousPlayers }
     },
     onError: (_err, _newPlayer, context) => {
       // Rollback on error
       if (context?.previousPlayers) {
-        queryClient.setQueryData(playerKeys.list(), context.previousPlayers);
+        queryClient.setQueryData(playerKeys.list(), context.previousPlayers)
       }
     },
     onSettled: () => {
       // Always refetch after error or success
-      queryClient.invalidateQueries({ queryKey: playerKeys.lists() });
+      queryClient.invalidateQueries({ queryKey: playerKeys.lists() })
     },
-  });
+  })
 }
 
 /**
  * Hook: Update a player
  */
 export function useUpdatePlayer() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: updatePlayer,
     onMutate: async ({ id, updates }) => {
       // Cancel outgoing refetches
-      await queryClient.cancelQueries({ queryKey: playerKeys.lists() });
+      await queryClient.cancelQueries({ queryKey: playerKeys.lists() })
 
       // Snapshot previous value
-      const previousPlayers = queryClient.getQueryData<Player[]>(
-        playerKeys.list(),
-      );
+      const previousPlayers = queryClient.getQueryData<Player[]>(playerKeys.list())
 
       // Optimistically update
       if (previousPlayers) {
         const optimisticPlayers = previousPlayers.map((player) =>
-          player.id === id ? { ...player, ...updates } : player,
-        );
-        queryClient.setQueryData<Player[]>(
-          playerKeys.list(),
-          optimisticPlayers,
-        );
+          player.id === id ? { ...player, ...updates } : player
+        )
+        queryClient.setQueryData<Player[]>(playerKeys.list(), optimisticPlayers)
       }
 
-      return { previousPlayers };
+      return { previousPlayers }
     },
     onError: (err, _variables, context) => {
       // Log error for debugging
-      console.error("Failed to update player:", err.message);
+      console.error('Failed to update player:', err.message)
 
       // Rollback on error
       if (context?.previousPlayers) {
-        queryClient.setQueryData(playerKeys.list(), context.previousPlayers);
+        queryClient.setQueryData(playerKeys.list(), context.previousPlayers)
       }
     },
     onSettled: (_data, _error, { id }) => {
       // Refetch after error or success
-      queryClient.invalidateQueries({ queryKey: playerKeys.lists() });
+      queryClient.invalidateQueries({ queryKey: playerKeys.lists() })
       if (_data) {
-        queryClient.setQueryData(playerKeys.detail(id), _data);
+        queryClient.setQueryData(playerKeys.detail(id), _data)
       }
     },
-  });
+  })
 }
 
 /**
  * Hook: Delete a player
  */
 export function useDeletePlayer() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: deletePlayer,
     onMutate: async (id) => {
       // Cancel outgoing refetches
-      await queryClient.cancelQueries({ queryKey: playerKeys.lists() });
+      await queryClient.cancelQueries({ queryKey: playerKeys.lists() })
 
       // Snapshot previous value
-      const previousPlayers = queryClient.getQueryData<Player[]>(
-        playerKeys.list(),
-      );
+      const previousPlayers = queryClient.getQueryData<Player[]>(playerKeys.list())
 
       // Optimistically remove from list
       if (previousPlayers) {
-        const optimisticPlayers = previousPlayers.filter(
-          (player) => player.id !== id,
-        );
-        queryClient.setQueryData<Player[]>(
-          playerKeys.list(),
-          optimisticPlayers,
-        );
+        const optimisticPlayers = previousPlayers.filter((player) => player.id !== id)
+        queryClient.setQueryData<Player[]>(playerKeys.list(), optimisticPlayers)
       }
 
-      return { previousPlayers };
+      return { previousPlayers }
     },
     onError: (_err, _id, context) => {
       // Rollback on error
       if (context?.previousPlayers) {
-        queryClient.setQueryData(playerKeys.list(), context.previousPlayers);
+        queryClient.setQueryData(playerKeys.list(), context.previousPlayers)
       }
     },
     onSettled: () => {
       // Refetch after error or success
-      queryClient.invalidateQueries({ queryKey: playerKeys.lists() });
+      queryClient.invalidateQueries({ queryKey: playerKeys.lists() })
     },
-  });
+  })
 }
 
 /**
  * Hook: Set player active status
  */
 export function useSetPlayerActive() {
-  const { mutate: updatePlayer } = useUpdatePlayer();
+  const { mutate: updatePlayer } = useUpdatePlayer()
 
   return {
     setActive: (id: string, isActive: boolean) => {
-      updatePlayer({ id, updates: { isActive } });
+      updatePlayer({ id, updates: { isActive } })
     },
-  };
+  }
 }
diff --git a/apps/web/src/hooks/useUserStats.ts b/apps/web/src/hooks/useUserStats.ts
index 9b51dd65..8f0dd3f5 100644
--- a/apps/web/src/hooks/useUserStats.ts
+++ b/apps/web/src/hooks/useUserStats.ts
@@ -1,41 +1,39 @@
-"use client";
+'use client'
 
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import type { UserStats } from "@/db/schema/user-stats";
-import { api } from "@/lib/queryClient";
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import type { UserStats } from '@/db/schema/user-stats'
+import { api } from '@/lib/queryClient'
 
 /**
  * Query key factory for user stats
  */
 export const statsKeys = {
-  all: ["user-stats"] as const,
-  detail: () => [...statsKeys.all, "detail"] as const,
-};
+  all: ['user-stats'] as const,
+  detail: () => [...statsKeys.all, 'detail'] as const,
+}
 
 /**
  * Fetch user statistics
  */
 async function fetchUserStats(): Promise<UserStats> {
-  const res = await api("user-stats");
-  if (!res.ok) throw new Error("Failed to fetch user stats");
-  const data = await res.json();
-  return data.stats;
+  const res = await api('user-stats')
+  if (!res.ok) throw new Error('Failed to fetch user stats')
+  const data = await res.json()
+  return data.stats
 }
 
 /**
  * Update user statistics
  */
-async function updateUserStats(
-  updates: Partial<Omit<UserStats, "userId">>,
-): Promise<UserStats> {
-  const res = await api("user-stats", {
-    method: "PATCH",
-    headers: { "Content-Type": "application/json" },
+async function updateUserStats(updates: Partial<Omit<UserStats, 'userId'>>): Promise<UserStats> {
+  const res = await api('user-stats', {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(updates),
-  });
-  if (!res.ok) throw new Error("Failed to update user stats");
-  const data = await res.json();
-  return data.stats;
+  })
+  if (!res.ok) throw new Error('Failed to update user stats')
+  const data = await res.json()
+  return data.stats
 }
 
 /**
@@ -45,74 +43,69 @@ export function useUserStats() {
   return useQuery({
     queryKey: statsKeys.detail(),
     queryFn: fetchUserStats,
-  });
+  })
 }
 
 /**
  * Hook: Update user statistics
  */
 export function useUpdateUserStats() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: updateUserStats,
     onMutate: async (updates) => {
       // Cancel outgoing refetches
-      await queryClient.cancelQueries({ queryKey: statsKeys.detail() });
+      await queryClient.cancelQueries({ queryKey: statsKeys.detail() })
 
       // Snapshot previous value
-      const previousStats = queryClient.getQueryData<UserStats>(
-        statsKeys.detail(),
-      );
+      const previousStats = queryClient.getQueryData<UserStats>(statsKeys.detail())
 
       // Optimistically update
       if (previousStats) {
-        const optimisticStats = { ...previousStats, ...updates };
-        queryClient.setQueryData<UserStats>(
-          statsKeys.detail(),
-          optimisticStats,
-        );
+        const optimisticStats = { ...previousStats, ...updates }
+        queryClient.setQueryData<UserStats>(statsKeys.detail(), optimisticStats)
       }
 
-      return { previousStats };
+      return { previousStats }
     },
     onError: (_err, _updates, context) => {
       // Rollback on error
       if (context?.previousStats) {
-        queryClient.setQueryData(statsKeys.detail(), context.previousStats);
+        queryClient.setQueryData(statsKeys.detail(), context.previousStats)
       }
     },
     onSettled: (updatedStats) => {
       // Update with server data on success
       if (updatedStats) {
-        queryClient.setQueryData(statsKeys.detail(), updatedStats);
+        queryClient.setQueryData(statsKeys.detail(), updatedStats)
       }
     },
-  });
+  })
 }
 
 /**
  * Hook: Increment games played
  */
 export function useIncrementGamesPlayed() {
-  const { data: stats } = useUserStats();
-  const { mutate: updateStats } = useUpdateUserStats();
+  const { data: stats } = useUserStats()
+  const { mutate: updateStats } = useUpdateUserStats()
 
   return {
     incrementGamesPlayed: () => {
       if (stats) {
-        updateStats({ gamesPlayed: stats.gamesPlayed + 1 });
+        updateStats({ gamesPlayed: stats.gamesPlayed + 1 })
       }
     },
-  };
+  }
 }
 
 /**
  * Hook: Record a win
  */
 export function useRecordWin() {
-  const { data: stats } = useUserStats();
-  const { mutate: updateStats } = useUpdateUserStats();
+  const { data: stats } = useUserStats()
+  const { mutate: updateStats } = useUpdateUserStats()
 
   return {
     recordWin: () => {
@@ -120,40 +113,40 @@ export function useRecordWin() {
         updateStats({
           gamesPlayed: stats.gamesPlayed + 1,
           totalWins: stats.totalWins + 1,
-        });
+        })
       }
     },
-  };
+  }
 }
 
 /**
  * Hook: Update best time if faster
  */
 export function useUpdateBestTime() {
-  const { data: stats } = useUserStats();
-  const { mutate: updateStats } = useUpdateUserStats();
+  const { data: stats } = useUserStats()
+  const { mutate: updateStats } = useUpdateUserStats()
 
   return {
     updateBestTime: (newTime: number) => {
       if (stats && (stats.bestTime === null || newTime < stats.bestTime)) {
-        updateStats({ bestTime: newTime });
+        updateStats({ bestTime: newTime })
       }
     },
-  };
+  }
 }
 
 /**
  * Hook: Update highest accuracy if better
  */
 export function useUpdateHighestAccuracy() {
-  const { data: stats } = useUserStats();
-  const { mutate: updateStats } = useUpdateUserStats();
+  const { data: stats } = useUserStats()
+  const { mutate: updateStats } = useUpdateUserStats()
 
   return {
     updateHighestAccuracy: (newAccuracy: number) => {
       if (stats && newAccuracy > stats.highestAccuracy) {
-        updateStats({ highestAccuracy: newAccuracy });
+        updateStats({ highestAccuracy: newAccuracy })
       }
     },
-  };
+  }
 }
diff --git a/apps/web/src/hooks/useViewerId.ts b/apps/web/src/hooks/useViewerId.ts
index d81134df..b0df925f 100644
--- a/apps/web/src/hooks/useViewerId.ts
+++ b/apps/web/src/hooks/useViewerId.ts
@@ -1,27 +1,27 @@
-"use client";
+'use client'
 
-import { useQuery } from "@tanstack/react-query";
-import { api } from "@/lib/queryClient";
+import { useQuery } from '@tanstack/react-query'
+import { api } from '@/lib/queryClient'
 
 /**
  * Query key for viewer ID
  */
 export const viewerKeys = {
-  all: ["viewer"] as const,
-  id: () => [...viewerKeys.all, "id"] as const,
-};
+  all: ['viewer'] as const,
+  id: () => [...viewerKeys.all, 'id'] as const,
+}
 
 /**
  * Fetch the current viewer ID
  */
 async function fetchViewerId(): Promise<string | null> {
   try {
-    const res = await api("viewer");
-    if (!res.ok) return null;
-    const data = await res.json();
-    return data.viewerId;
+    const res = await api('viewer')
+    if (!res.ok) return null
+    const data = await res.json()
+    return data.viewerId
   } catch {
-    return null;
+    return null
   }
 }
 
@@ -37,5 +37,5 @@ export function useViewerId() {
     queryFn: fetchViewerId,
     staleTime: 5 * 60 * 1000, // 5 minutes
     retry: false,
-  });
+  })
 }
diff --git a/apps/web/src/i18n/locales/calendar/messages.ts b/apps/web/src/i18n/locales/calendar/messages.ts
index f16d5ebe..a470d5be 100644
--- a/apps/web/src/i18n/locales/calendar/messages.ts
+++ b/apps/web/src/i18n/locales/calendar/messages.ts
@@ -1,10 +1,10 @@
-import de from "./de.json";
-import en from "./en.json";
-import es from "./es.json";
-import goh from "./goh.json";
-import hi from "./hi.json";
-import ja from "./ja.json";
-import la from "./la.json";
+import de from './de.json'
+import en from './en.json'
+import es from './es.json'
+import goh from './goh.json'
+import hi from './hi.json'
+import ja from './ja.json'
+import la from './la.json'
 
 export const calendarMessages = {
   en: en.calendar,
@@ -14,4 +14,4 @@ export const calendarMessages = {
   es: es.calendar,
   la: la.calendar,
   goh: goh.calendar,
-} as const;
+} as const
diff --git a/apps/web/src/i18n/locales/create/messages.ts b/apps/web/src/i18n/locales/create/messages.ts
index 457aba7f..178de4f0 100644
--- a/apps/web/src/i18n/locales/create/messages.ts
+++ b/apps/web/src/i18n/locales/create/messages.ts
@@ -1,10 +1,10 @@
-import de from "./de.json";
-import en from "./en.json";
-import es from "./es.json";
-import goh from "./goh.json";
-import hi from "./hi.json";
-import ja from "./ja.json";
-import la from "./la.json";
+import de from './de.json'
+import en from './en.json'
+import es from './es.json'
+import goh from './goh.json'
+import hi from './hi.json'
+import ja from './ja.json'
+import la from './la.json'
 
 export const createMessages = {
   en: en.create,
@@ -14,4 +14,4 @@ export const createMessages = {
   es: es.create,
   la: la.create,
   goh: goh.create,
-} as const;
+} as const
diff --git a/apps/web/src/i18n/locales/games/messages.ts b/apps/web/src/i18n/locales/games/messages.ts
index 2b6895e8..66cc1ab4 100644
--- a/apps/web/src/i18n/locales/games/messages.ts
+++ b/apps/web/src/i18n/locales/games/messages.ts
@@ -1,10 +1,10 @@
-import de from "./de.json";
-import en from "./en.json";
-import es from "./es.json";
-import goh from "./goh.json";
-import hi from "./hi.json";
-import ja from "./ja.json";
-import la from "./la.json";
+import de from './de.json'
+import en from './en.json'
+import es from './es.json'
+import goh from './goh.json'
+import hi from './hi.json'
+import ja from './ja.json'
+import la from './la.json'
 
 export const gamesMessages = {
   en: en.games,
@@ -14,4 +14,4 @@ export const gamesMessages = {
   es: es.games,
   la: la.games,
   goh: goh.games,
-} as const;
+} as const
diff --git a/apps/web/src/i18n/locales/guide/hi.json b/apps/web/src/i18n/locales/guide/hi.json
index 7e653e4a..ccb4ca09 100644
--- a/apps/web/src/i18n/locales/guide/hi.json
+++ b/apps/web/src/i18n/locales/guide/hi.json
@@ -66,11 +66,7 @@
           },
           "placeValues": {
             "title": "स्थानीय मान:",
-            "points": [
-              "सबसे दाएं = इकाई (1)",
-              "अगला बाएं = दहाई (10)",
-              "सैकड़ा, हजार आदि के लिए जारी रखें"
-            ]
+            "points": ["सबसे दाएं = इकाई (1)", "अगला बाएं = दहाई (10)", "सैकड़ा, हजार आदि के लिए जारी रखें"]
           }
         },
         "examples": {
diff --git a/apps/web/src/i18n/locales/guide/ja.json b/apps/web/src/i18n/locales/guide/ja.json
index ab065827..627fe160 100644
--- a/apps/web/src/i18n/locales/guide/ja.json
+++ b/apps/web/src/i18n/locales/guide/ja.json
@@ -66,11 +66,7 @@
           },
           "placeValues": {
             "title": "位の値：",
-            "points": [
-              "一番右=一の位（1）",
-              "次の左=十の位（10）",
-              "百、千などに続く"
-            ]
+            "points": ["一番右=一の位（1）", "次の左=十の位（10）", "百、千などに続く"]
           }
         },
         "examples": {
@@ -115,19 +111,11 @@
           "title": "🎮 インタラクティブそろばんの使い方",
           "heaven": {
             "title": "天珠（上）：",
-            "points": [
-              "各5ポイント",
-              "クリックしてオン/オフ切り替え",
-              "有効時は青、無効時は灰色"
-            ]
+            "points": ["各5ポイント", "クリックしてオン/オフ切り替え", "有効時は青、無効時は灰色"]
           },
           "earth": {
             "title": "地珠（下）：",
-            "points": [
-              "各1ポイント",
-              "クリックしてグループを有効化",
-              "有効時は緑、無効時は灰色"
-            ]
+            "points": ["各1ポイント", "クリックしてグループを有効化", "有効時は緑、無効時は灰色"]
           }
         },
         "readyToPractice": {
diff --git a/apps/web/src/i18n/locales/guide/messages.ts b/apps/web/src/i18n/locales/guide/messages.ts
index 947f5638..96d0beaf 100644
--- a/apps/web/src/i18n/locales/guide/messages.ts
+++ b/apps/web/src/i18n/locales/guide/messages.ts
@@ -1,10 +1,10 @@
-import de from "./de.json";
-import en from "./en.json";
-import es from "./es.json";
-import goh from "./goh.json";
-import hi from "./hi.json";
-import ja from "./ja.json";
-import la from "./la.json";
+import de from './de.json'
+import en from './en.json'
+import es from './es.json'
+import goh from './goh.json'
+import hi from './hi.json'
+import ja from './ja.json'
+import la from './la.json'
 
 export const guideMessages = {
   en: en.guide,
@@ -14,4 +14,4 @@ export const guideMessages = {
   es: es.guide,
   la: la.guide,
   goh: goh.guide,
-} as const;
+} as const
diff --git a/apps/web/src/i18n/locales/home/messages.ts b/apps/web/src/i18n/locales/home/messages.ts
index 3fac4431..e6d66645 100644
--- a/apps/web/src/i18n/locales/home/messages.ts
+++ b/apps/web/src/i18n/locales/home/messages.ts
@@ -1,10 +1,10 @@
-import de from "./de.json";
-import en from "./en.json";
-import es from "./es.json";
-import goh from "./goh.json";
-import hi from "./hi.json";
-import ja from "./ja.json";
-import la from "./la.json";
+import de from './de.json'
+import en from './en.json'
+import es from './es.json'
+import goh from './goh.json'
+import hi from './hi.json'
+import ja from './ja.json'
+import la from './la.json'
 
 export const homeMessages = {
   en: en.home,
@@ -14,4 +14,4 @@ export const homeMessages = {
   es: es.home,
   la: la.home,
   goh: goh.home,
-} as const;
+} as const
diff --git a/apps/web/src/i18n/locales/tutorial/messages.ts b/apps/web/src/i18n/locales/tutorial/messages.ts
index 08c4c3ae..23322cc5 100644
--- a/apps/web/src/i18n/locales/tutorial/messages.ts
+++ b/apps/web/src/i18n/locales/tutorial/messages.ts
@@ -1,10 +1,10 @@
-import de from "./de.json";
-import en from "./en.json";
-import es from "./es.json";
-import goh from "./goh.json";
-import hi from "./hi.json";
-import ja from "./ja.json";
-import la from "./la.json";
+import de from './de.json'
+import en from './en.json'
+import es from './es.json'
+import goh from './goh.json'
+import hi from './hi.json'
+import ja from './ja.json'
+import la from './la.json'
 
 export const tutorialMessages = {
   en: en.tutorial,
@@ -14,4 +14,4 @@ export const tutorialMessages = {
   es: es.tutorial,
   la: la.tutorial,
   goh: goh.tutorial,
-} as const;
+} as const
diff --git a/apps/web/src/i18n/messages.ts b/apps/web/src/i18n/messages.ts
index 1dd82f8a..87b56c5e 100644
--- a/apps/web/src/i18n/messages.ts
+++ b/apps/web/src/i18n/messages.ts
@@ -1,12 +1,12 @@
-import { rithmomachiaMessages } from "@/arcade-games/rithmomachia/messages";
-import { calendarMessages } from "@/i18n/locales/calendar/messages";
-import { createMessages } from "@/i18n/locales/create/messages";
-import { gamesMessages } from "@/i18n/locales/games/messages";
-import { guideMessages } from "@/i18n/locales/guide/messages";
-import { homeMessages } from "@/i18n/locales/home/messages";
-import { tutorialMessages } from "@/i18n/locales/tutorial/messages";
+import { rithmomachiaMessages } from '@/arcade-games/rithmomachia/messages'
+import { calendarMessages } from '@/i18n/locales/calendar/messages'
+import { createMessages } from '@/i18n/locales/create/messages'
+import { gamesMessages } from '@/i18n/locales/games/messages'
+import { guideMessages } from '@/i18n/locales/guide/messages'
+import { homeMessages } from '@/i18n/locales/home/messages'
+import { tutorialMessages } from '@/i18n/locales/tutorial/messages'
 
-export type Locale = "en" | "de" | "ja" | "hi" | "es" | "la" | "goh";
+export type Locale = 'en' | 'de' | 'ja' | 'hi' | 'es' | 'la' | 'goh'
 
 /**
  * Deep merge messages from multiple sources
@@ -14,18 +14,14 @@ export type Locale = "en" | "de" | "ja" | "hi" | "es" | "la" | "goh";
 function mergeMessages(...sources: Record<string, any>[]): Record<string, any> {
   return sources.reduce((acc, source) => {
     for (const [key, value] of Object.entries(source)) {
-      if (
-        typeof value === "object" &&
-        value !== null &&
-        !Array.isArray(value)
-      ) {
-        acc[key] = mergeMessages(acc[key] || {}, value);
+      if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        acc[key] = mergeMessages(acc[key] || {}, value)
       } else {
-        acc[key] = value;
+        acc[key] = value
       }
     }
-    return acc;
-  }, {});
+    return acc
+  }, {})
 }
 
 /**
@@ -37,7 +33,7 @@ export async function getMessages(locale: Locale) {
     common: {
       // Add app-wide translations here as needed
     },
-  };
+  }
 
   // Merge all co-located feature messages
   return mergeMessages(
@@ -48,6 +44,6 @@ export async function getMessages(locale: Locale) {
     { tutorial: tutorialMessages[locale] },
     { calendar: calendarMessages[locale] },
     { create: createMessages[locale] },
-    rithmomachiaMessages[locale],
-  );
+    rithmomachiaMessages[locale]
+  )
 }
diff --git a/apps/web/src/i18n/request.ts b/apps/web/src/i18n/request.ts
index 7fb15ee9..0e5eadfd 100644
--- a/apps/web/src/i18n/request.ts
+++ b/apps/web/src/i18n/request.ts
@@ -1,40 +1,33 @@
-import { getRequestConfig } from "next-intl/server";
-import { headers, cookies } from "next/headers";
-import {
-  defaultLocale,
-  LOCALE_COOKIE_NAME,
-  locales,
-  type Locale,
-} from "./routing";
-import { getMessages } from "./messages";
+import { getRequestConfig } from 'next-intl/server'
+import { headers, cookies } from 'next/headers'
+import { defaultLocale, LOCALE_COOKIE_NAME, locales, type Locale } from './routing'
+import { getMessages } from './messages'
 
 export async function getRequestLocale(): Promise<Locale> {
   // Get locale from header (set by middleware) or cookie
-  const headersList = await headers();
-  const cookieStore = await cookies();
+  const headersList = await headers()
+  const cookieStore = await cookies()
 
-  let locale = headersList.get("x-locale") as Locale | null;
+  let locale = headersList.get('x-locale') as Locale | null
 
   if (!locale) {
-    locale =
-      (cookieStore.get(LOCALE_COOKIE_NAME)?.value as Locale | undefined) ??
-      null;
+    locale = (cookieStore.get(LOCALE_COOKIE_NAME)?.value as Locale | undefined) ?? null
   }
 
   // Validate and fallback to default
   if (!locale || !locales.includes(locale)) {
-    locale = defaultLocale;
+    locale = defaultLocale
   }
 
-  return locale;
+  return locale
 }
 
 export default getRequestConfig(async () => {
-  const locale = await getRequestLocale();
+  const locale = await getRequestLocale()
 
   return {
     locale,
     messages: await getMessages(locale),
-    timeZone: "UTC",
-  };
-});
+    timeZone: 'UTC',
+  }
+})
diff --git a/apps/web/src/i18n/routing.ts b/apps/web/src/i18n/routing.ts
index 0aece745..206c2779 100644
--- a/apps/web/src/i18n/routing.ts
+++ b/apps/web/src/i18n/routing.ts
@@ -1,9 +1,9 @@
 // Supported locales
-export const locales = ["en", "de", "ja", "hi", "es", "la", "goh"] as const;
-export type Locale = (typeof locales)[number];
+export const locales = ['en', 'de', 'ja', 'hi', 'es', 'la', 'goh'] as const
+export type Locale = (typeof locales)[number]
 
 // Default locale
-export const defaultLocale: Locale = "en";
+export const defaultLocale: Locale = 'en'
 
 // Locale cookie name
-export const LOCALE_COOKIE_NAME = "NEXT_LOCALE";
+export const LOCALE_COOKIE_NAME = 'NEXT_LOCALE'
diff --git a/apps/web/src/lib/3d-printing/jobManager.ts b/apps/web/src/lib/3d-printing/jobManager.ts
index 903f3f2c..30798cd3 100644
--- a/apps/web/src/lib/3d-printing/jobManager.ts
+++ b/apps/web/src/lib/3d-printing/jobManager.ts
@@ -1,138 +1,125 @@
-import { exec } from "node:child_process";
-import { randomBytes } from "node:crypto";
-import { mkdir, readFile, rm, writeFile } from "node:fs/promises";
-import { join } from "node:path";
-import { promisify } from "node:util";
+import { exec } from 'node:child_process'
+import { randomBytes } from 'node:crypto'
+import { mkdir, readFile, rm, writeFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import { promisify } from 'node:util'
 
-const execAsync = promisify(exec);
+const execAsync = promisify(exec)
 
-export type JobStatus = "pending" | "processing" | "completed" | "failed";
+export type JobStatus = 'pending' | 'processing' | 'completed' | 'failed'
 
 export interface Job {
-  id: string;
-  status: JobStatus;
-  params: AbacusParams;
-  error?: string;
-  outputPath?: string;
-  createdAt: Date;
-  completedAt?: Date;
-  progress?: string;
+  id: string
+  status: JobStatus
+  params: AbacusParams
+  error?: string
+  outputPath?: string
+  createdAt: Date
+  completedAt?: Date
+  progress?: string
 }
 
 export interface AbacusParams {
-  columns: number; // Number of columns (1-13)
-  scaleFactor: number; // Overall size multiplier
-  widthMm?: number; // Optional: desired width in mm (overrides scaleFactor)
-  format: "stl" | "3mf" | "scad";
+  columns: number // Number of columns (1-13)
+  scaleFactor: number // Overall size multiplier
+  widthMm?: number // Optional: desired width in mm (overrides scaleFactor)
+  format: 'stl' | '3mf' | 'scad'
   // 3MF color options
-  frameColor?: string;
-  heavenBeadColor?: string;
-  earthBeadColor?: string;
-  decorationColor?: string;
+  frameColor?: string
+  heavenBeadColor?: string
+  earthBeadColor?: string
+  decorationColor?: string
 }
 
 // In-memory job storage (can be upgraded to Redis later)
-const jobs = new Map<string, Job>();
+const jobs = new Map<string, Job>()
 
 // Temporary directory for generated files
-const TEMP_DIR = join(process.cwd(), "tmp", "3d-jobs");
+const TEMP_DIR = join(process.cwd(), 'tmp', '3d-jobs')
 
 export class JobManager {
   static generateJobId(): string {
-    return randomBytes(16).toString("hex");
+    return randomBytes(16).toString('hex')
   }
 
   static async createJob(params: AbacusParams): Promise<string> {
-    const jobId = JobManager.generateJobId();
+    const jobId = JobManager.generateJobId()
     const job: Job = {
       id: jobId,
-      status: "pending",
+      status: 'pending',
       params,
       createdAt: new Date(),
-    };
+    }
 
-    jobs.set(jobId, job);
+    jobs.set(jobId, job)
 
     // Start processing in background
     JobManager.processJob(jobId).catch((error) => {
-      console.error(`Job ${jobId} failed:`, error);
-      const job = jobs.get(jobId);
+      console.error(`Job ${jobId} failed:`, error)
+      const job = jobs.get(jobId)
       if (job) {
-        job.status = "failed";
-        job.error = error.message;
-        job.completedAt = new Date();
+        job.status = 'failed'
+        job.error = error.message
+        job.completedAt = new Date()
       }
-    });
+    })
 
-    return jobId;
+    return jobId
   }
 
   static getJob(jobId: string): Job | undefined {
-    return jobs.get(jobId);
+    return jobs.get(jobId)
   }
 
   static async processJob(jobId: string): Promise<void> {
-    const job = jobs.get(jobId);
-    if (!job) throw new Error("Job not found");
+    const job = jobs.get(jobId)
+    if (!job) throw new Error('Job not found')
 
-    job.status = "processing";
-    job.progress = "Preparing workspace...";
+    job.status = 'processing'
+    job.progress = 'Preparing workspace...'
 
     // Create temp directory
-    await mkdir(TEMP_DIR, { recursive: true });
+    await mkdir(TEMP_DIR, { recursive: true })
 
-    const outputFileName = `abacus-${jobId}.${job.params.format}`;
-    const outputPath = join(TEMP_DIR, outputFileName);
+    const outputFileName = `abacus-${jobId}.${job.params.format}`
+    const outputPath = join(TEMP_DIR, outputFileName)
 
     try {
       // Build OpenSCAD command
-      const scadPath = join(
-        process.cwd(),
-        "public",
-        "3d-models",
-        "abacus.scad",
-      );
-      const stlPath = join(
-        process.cwd(),
-        "public",
-        "3d-models",
-        "simplified.abacus.stl",
-      );
+      const scadPath = join(process.cwd(), 'public', '3d-models', 'abacus.scad')
+      const stlPath = join(process.cwd(), 'public', '3d-models', 'simplified.abacus.stl')
 
       // If format is 'scad', just copy the file with custom parameters
-      if (job.params.format === "scad") {
-        job.progress = "Generating OpenSCAD file...";
-        const scadContent = await readFile(scadPath, "utf-8");
+      if (job.params.format === 'scad') {
+        job.progress = 'Generating OpenSCAD file...'
+        const scadContent = await readFile(scadPath, 'utf-8')
         const customizedScad = scadContent
           .replace(/columns = \d+\.?\d*/, `columns = ${job.params.columns}`)
-          .replace(
-            /scale_factor = \d+\.?\d*/,
-            `scale_factor = ${job.params.scaleFactor}`,
-          );
+          .replace(/scale_factor = \d+\.?\d*/, `scale_factor = ${job.params.scaleFactor}`)
 
-        await writeFile(outputPath, customizedScad);
-        job.outputPath = outputPath;
-        job.status = "completed";
-        job.completedAt = new Date();
-        job.progress = "Complete!";
-        return;
+        await writeFile(outputPath, customizedScad)
+        job.outputPath = outputPath
+        job.status = 'completed'
+        job.completedAt = new Date()
+        job.progress = 'Complete!'
+        return
       }
 
-      job.progress = "Rendering 3D model...";
+      job.progress = 'Rendering 3D model...'
 
       // Build command with parameters
       const cmd = [
-        "openscad",
-        "-o",
+        'openscad',
+        '-o',
         outputPath,
-        "-D",
+        '-D',
         `'columns=${job.params.columns}'`,
-        "-D",
+        '-D',
         `'scale_factor=${job.params.scaleFactor}'`,
         scadPath,
-      ].join(" ");
+      ].join(' ')
 
-      console.log(`Executing: ${cmd}`);
+      console.log(`Executing: ${cmd}`)
 
       // Execute OpenSCAD (with 60s timeout)
       // Note: OpenSCAD may exit with non-zero status due to CGAL warnings
@@ -140,98 +127,88 @@ export class JobManager {
       try {
         await execAsync(cmd, {
           timeout: 60000,
-          cwd: join(process.cwd(), "public", "3d-models"),
-        });
+          cwd: join(process.cwd(), 'public', '3d-models'),
+        })
       } catch (execError) {
         // Log the error but don't throw yet - check if output was created
-        console.warn(
-          `OpenSCAD reported errors, but checking if output was created:`,
-          execError,
-        );
+        console.warn(`OpenSCAD reported errors, but checking if output was created:`, execError)
 
         // Check if output file exists despite the error
         try {
-          await readFile(outputPath);
-          console.log(
-            `Output file created despite OpenSCAD warnings - proceeding`,
-          );
+          await readFile(outputPath)
+          console.log(`Output file created despite OpenSCAD warnings - proceeding`)
         } catch (readError) {
           // File doesn't exist, this is a real failure
-          console.error(
-            `OpenSCAD execution failed and no output file created:`,
-            execError,
-          );
+          console.error(`OpenSCAD execution failed and no output file created:`, execError)
           if (execError instanceof Error) {
-            throw new Error(`OpenSCAD error: ${execError.message}`);
+            throw new Error(`OpenSCAD error: ${execError.message}`)
           }
-          throw execError;
+          throw execError
         }
       }
 
-      job.progress = "Finalizing...";
+      job.progress = 'Finalizing...'
 
       // Verify output exists and check file size
-      const fileBuffer = await readFile(outputPath);
-      const fileSizeMB = fileBuffer.length / (1024 * 1024);
+      const fileBuffer = await readFile(outputPath)
+      const fileSizeMB = fileBuffer.length / (1024 * 1024)
 
       // Maximum file size: 100MB (to prevent memory issues)
-      const MAX_FILE_SIZE_MB = 100;
+      const MAX_FILE_SIZE_MB = 100
       if (fileSizeMB > MAX_FILE_SIZE_MB) {
         throw new Error(
-          `Generated file is too large (${fileSizeMB.toFixed(1)}MB). Maximum allowed is ${MAX_FILE_SIZE_MB}MB. Try reducing scale parameters.`,
-        );
+          `Generated file is too large (${fileSizeMB.toFixed(1)}MB). Maximum allowed is ${MAX_FILE_SIZE_MB}MB. Try reducing scale parameters.`
+        )
       }
 
-      console.log(`Generated STL file size: ${fileSizeMB.toFixed(2)}MB`);
+      console.log(`Generated STL file size: ${fileSizeMB.toFixed(2)}MB`)
 
-      job.outputPath = outputPath;
-      job.status = "completed";
-      job.completedAt = new Date();
-      job.progress = "Complete!";
+      job.outputPath = outputPath
+      job.status = 'completed'
+      job.completedAt = new Date()
+      job.progress = 'Complete!'
 
-      console.log(`Job ${jobId} completed successfully`);
+      console.log(`Job ${jobId} completed successfully`)
     } catch (error) {
-      console.error(`Job ${jobId} failed:`, error);
-      job.status = "failed";
-      job.error =
-        error instanceof Error ? error.message : "Unknown error occurred";
-      job.completedAt = new Date();
-      throw error;
+      console.error(`Job ${jobId} failed:`, error)
+      job.status = 'failed'
+      job.error = error instanceof Error ? error.message : 'Unknown error occurred'
+      job.completedAt = new Date()
+      throw error
     }
   }
 
   static async getJobOutput(jobId: string): Promise<Buffer> {
-    const job = jobs.get(jobId);
-    if (!job) throw new Error("Job not found");
-    if (job.status !== "completed")
-      throw new Error(`Job is ${job.status}, not completed`);
-    if (!job.outputPath) throw new Error("Output path not set");
+    const job = jobs.get(jobId)
+    if (!job) throw new Error('Job not found')
+    if (job.status !== 'completed') throw new Error(`Job is ${job.status}, not completed`)
+    if (!job.outputPath) throw new Error('Output path not set')
 
-    return await readFile(job.outputPath);
+    return await readFile(job.outputPath)
   }
 
   static async cleanupJob(jobId: string): Promise<void> {
-    const job = jobs.get(jobId);
-    if (!job) return;
+    const job = jobs.get(jobId)
+    if (!job) return
 
     if (job.outputPath) {
       try {
-        await rm(job.outputPath);
+        await rm(job.outputPath)
       } catch (error) {
-        console.error(`Failed to cleanup job ${jobId}:`, error);
+        console.error(`Failed to cleanup job ${jobId}:`, error)
       }
     }
 
-    jobs.delete(jobId);
+    jobs.delete(jobId)
   }
 
   // Cleanup old jobs (should be called periodically)
   static async cleanupOldJobs(maxAgeMs = 3600000): Promise<void> {
-    const now = Date.now();
+    const now = Date.now()
     for (const [jobId, job] of jobs.entries()) {
-      const age = now - job.createdAt.getTime();
+      const age = now - job.createdAt.getTime()
       if (age > maxAgeMs) {
-        await JobManager.cleanupJob(jobId);
+        await JobManager.cleanupJob(jobId)
       }
     }
   }
diff --git a/apps/web/src/lib/__tests__/guest-token.test.ts b/apps/web/src/lib/__tests__/guest-token.test.ts
index 46046591..ac9f2184 100644
--- a/apps/web/src/lib/__tests__/guest-token.test.ts
+++ b/apps/web/src/lib/__tests__/guest-token.test.ts
@@ -2,171 +2,163 @@
  * @vitest-environment node
  */
 
-import { beforeEach, describe, expect, it } from "vitest";
-import {
-  createGuestToken,
-  GUEST_COOKIE_NAME,
-  verifyGuestToken,
-} from "../guest-token";
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createGuestToken, GUEST_COOKIE_NAME, verifyGuestToken } from '../guest-token'
 
-describe("Guest Token Utilities", () => {
+describe('Guest Token Utilities', () => {
   beforeEach(() => {
     // Set AUTH_SECRET for tests
-    process.env.AUTH_SECRET = "test-secret-key-for-jwt-signing";
-  });
+    process.env.AUTH_SECRET = 'test-secret-key-for-jwt-signing'
+  })
 
-  describe("GUEST_COOKIE_NAME", () => {
-    it("uses __Host- prefix in production, plain name in dev", () => {
+  describe('GUEST_COOKIE_NAME', () => {
+    it('uses __Host- prefix in production, plain name in dev', () => {
       // In test environment, NODE_ENV is not 'production'
-      expect(GUEST_COOKIE_NAME).toBe("guest");
-    });
-  });
+      expect(GUEST_COOKIE_NAME).toBe('guest')
+    })
+  })
 
-  describe("createGuestToken", () => {
-    it("creates a valid JWT token", async () => {
-      const sid = "test-session-id";
-      const token = await createGuestToken(sid);
+  describe('createGuestToken', () => {
+    it('creates a valid JWT token', async () => {
+      const sid = 'test-session-id'
+      const token = await createGuestToken(sid)
 
-      expect(token).toBeDefined();
-      expect(typeof token).toBe("string");
-      expect(token.split(".")).toHaveLength(3); // JWT has 3 parts
-    });
+      expect(token).toBeDefined()
+      expect(typeof token).toBe('string')
+      expect(token.split('.')).toHaveLength(3) // JWT has 3 parts
+    })
 
-    it("includes session ID in payload", async () => {
-      const sid = "test-session-id-123";
-      const token = await createGuestToken(sid);
-      const verified = await verifyGuestToken(token);
+    it('includes session ID in payload', async () => {
+      const sid = 'test-session-id-123'
+      const token = await createGuestToken(sid)
+      const verified = await verifyGuestToken(token)
 
-      expect(verified.sid).toBe(sid);
-    });
+      expect(verified.sid).toBe(sid)
+    })
 
-    it("sets expiration time correctly", async () => {
-      const sid = "test-session-id";
-      const maxAgeSec = 3600; // 1 hour
-      const token = await createGuestToken(sid, maxAgeSec);
-      const verified = await verifyGuestToken(token);
+    it('sets expiration time correctly', async () => {
+      const sid = 'test-session-id'
+      const maxAgeSec = 3600 // 1 hour
+      const token = await createGuestToken(sid, maxAgeSec)
+      const verified = await verifyGuestToken(token)
 
-      const now = Math.floor(Date.now() / 1000);
-      expect(verified.exp).toBeGreaterThan(now);
-      expect(verified.exp).toBeLessThanOrEqual(now + maxAgeSec + 5); // +5 for clock skew
-    });
+      const now = Math.floor(Date.now() / 1000)
+      expect(verified.exp).toBeGreaterThan(now)
+      expect(verified.exp).toBeLessThanOrEqual(now + maxAgeSec + 5) // +5 for clock skew
+    })
 
-    it("sets issued at time", async () => {
-      const sid = "test-session-id";
-      const token = await createGuestToken(sid);
-      const verified = await verifyGuestToken(token);
+    it('sets issued at time', async () => {
+      const sid = 'test-session-id'
+      const token = await createGuestToken(sid)
+      const verified = await verifyGuestToken(token)
 
-      const now = Math.floor(Date.now() / 1000);
-      expect(verified.iat).toBeLessThanOrEqual(now);
-      expect(verified.iat).toBeGreaterThan(now - 10); // Within last 10 seconds
-    });
+      const now = Math.floor(Date.now() / 1000)
+      expect(verified.iat).toBeLessThanOrEqual(now)
+      expect(verified.iat).toBeGreaterThan(now - 10) // Within last 10 seconds
+    })
 
-    it("throws if AUTH_SECRET is missing", async () => {
-      delete process.env.AUTH_SECRET;
+    it('throws if AUTH_SECRET is missing', async () => {
+      delete process.env.AUTH_SECRET
 
-      await expect(createGuestToken("test")).rejects.toThrow(
-        "AUTH_SECRET environment variable is required",
-      );
-    });
-  });
+      await expect(createGuestToken('test')).rejects.toThrow(
+        'AUTH_SECRET environment variable is required'
+      )
+    })
+  })
 
-  describe("verifyGuestToken", () => {
-    it("verifies valid tokens", async () => {
-      const sid = "test-session-id";
-      const token = await createGuestToken(sid);
+  describe('verifyGuestToken', () => {
+    it('verifies valid tokens', async () => {
+      const sid = 'test-session-id'
+      const token = await createGuestToken(sid)
 
-      const result = await verifyGuestToken(token);
+      const result = await verifyGuestToken(token)
 
-      expect(result).toBeDefined();
-      expect(result.sid).toBe(sid);
-      expect(result.iat).toBeDefined();
-      expect(result.exp).toBeDefined();
-    });
+      expect(result).toBeDefined()
+      expect(result.sid).toBe(sid)
+      expect(result.iat).toBeDefined()
+      expect(result.exp).toBeDefined()
+    })
 
-    it("rejects invalid tokens", async () => {
-      const invalidToken = "invalid.jwt.token";
+    it('rejects invalid tokens', async () => {
+      const invalidToken = 'invalid.jwt.token'
 
-      await expect(verifyGuestToken(invalidToken)).rejects.toThrow();
-    });
+      await expect(verifyGuestToken(invalidToken)).rejects.toThrow()
+    })
 
-    it("rejects tokens with wrong payload type", async () => {
+    it('rejects tokens with wrong payload type', async () => {
       // Manually create a token with wrong type
-      const { SignJWT } = await import("jose");
-      const key = new TextEncoder().encode(process.env.AUTH_SECRET!);
-      const wrongToken = await new SignJWT({ typ: "wrong", sid: "test" })
-        .setProtectedHeader({ alg: "HS256" })
-        .sign(key);
+      const { SignJWT } = await import('jose')
+      const key = new TextEncoder().encode(process.env.AUTH_SECRET!)
+      const wrongToken = await new SignJWT({ typ: 'wrong', sid: 'test' })
+        .setProtectedHeader({ alg: 'HS256' })
+        .sign(key)
 
-      await expect(verifyGuestToken(wrongToken)).rejects.toThrow(
-        "Invalid guest token payload",
-      );
-    });
+      await expect(verifyGuestToken(wrongToken)).rejects.toThrow('Invalid guest token payload')
+    })
 
-    it("rejects tokens without sid", async () => {
+    it('rejects tokens without sid', async () => {
       // Manually create a token without sid
-      const { SignJWT } = await import("jose");
-      const key = new TextEncoder().encode(process.env.AUTH_SECRET!);
-      const wrongToken = await new SignJWT({ typ: "guest" })
-        .setProtectedHeader({ alg: "HS256" })
-        .sign(key);
+      const { SignJWT } = await import('jose')
+      const key = new TextEncoder().encode(process.env.AUTH_SECRET!)
+      const wrongToken = await new SignJWT({ typ: 'guest' })
+        .setProtectedHeader({ alg: 'HS256' })
+        .sign(key)
 
-      await expect(verifyGuestToken(wrongToken)).rejects.toThrow(
-        "Invalid guest token payload",
-      );
-    });
+      await expect(verifyGuestToken(wrongToken)).rejects.toThrow('Invalid guest token payload')
+    })
 
-    it("rejects expired tokens", async () => {
-      const sid = "test-session-id";
-      const token = await createGuestToken(sid, -1); // Expired 1 second ago
+    it('rejects expired tokens', async () => {
+      const sid = 'test-session-id'
+      const token = await createGuestToken(sid, -1) // Expired 1 second ago
 
-      await expect(verifyGuestToken(token)).rejects.toThrow();
-    });
+      await expect(verifyGuestToken(token)).rejects.toThrow()
+    })
 
-    it("rejects tokens signed with wrong secret", async () => {
-      const sid = "test-session-id";
-      const token = await createGuestToken(sid);
+    it('rejects tokens signed with wrong secret', async () => {
+      const sid = 'test-session-id'
+      const token = await createGuestToken(sid)
 
       // Change the secret
-      process.env.AUTH_SECRET = "different-secret";
+      process.env.AUTH_SECRET = 'different-secret'
 
-      await expect(verifyGuestToken(token)).rejects.toThrow();
-    });
-  });
+      await expect(verifyGuestToken(token)).rejects.toThrow()
+    })
+  })
 
-  describe("Token lifecycle", () => {
-    it("supports create → verify → decode flow", async () => {
-      const sid = crypto.randomUUID();
-      const maxAgeSec = 7200; // 2 hours
+  describe('Token lifecycle', () => {
+    it('supports create → verify → decode flow', async () => {
+      const sid = crypto.randomUUID()
+      const maxAgeSec = 7200 // 2 hours
 
       // Create token
-      const token = await createGuestToken(sid, maxAgeSec);
+      const token = await createGuestToken(sid, maxAgeSec)
 
       // Verify token
-      const verified = await verifyGuestToken(token);
+      const verified = await verifyGuestToken(token)
 
       // Check all fields
-      expect(verified.sid).toBe(sid);
-      expect(verified.iat).toBeDefined();
-      expect(verified.exp).toBe(verified.iat + maxAgeSec);
-    });
+      expect(verified.sid).toBe(sid)
+      expect(verified.iat).toBeDefined()
+      expect(verified.exp).toBe(verified.iat + maxAgeSec)
+    })
 
-    it("tokens have same sid for same input", async () => {
-      const sid = "same-session-id";
+    it('tokens have same sid for same input', async () => {
+      const sid = 'same-session-id'
 
       // Creating tokens at different times
-      const token1 = await createGuestToken(sid);
+      const token1 = await createGuestToken(sid)
 
       // Wait at least 1 second to ensure different iat
-      await new Promise((resolve) => setTimeout(resolve, 1100));
+      await new Promise((resolve) => setTimeout(resolve, 1100))
 
-      const token2 = await createGuestToken(sid);
+      const token2 = await createGuestToken(sid)
 
       // Tokens may be different (different iat) or same (if created in same second)
       // But both should verify with same sid
-      const verified1 = await verifyGuestToken(token1);
-      const verified2 = await verifyGuestToken(token2);
-      expect(verified1.sid).toBe(verified2.sid);
-      expect(verified1.sid).toBe(sid);
-    });
-  });
-});
+      const verified1 = await verifyGuestToken(token1)
+      const verified2 = await verifyGuestToken(token2)
+      expect(verified1.sid).toBe(verified2.sid)
+      expect(verified1.sid).toBe(sid)
+    })
+  })
+})
diff --git a/apps/web/src/lib/api/example.ts b/apps/web/src/lib/api/example.ts
index 17f56ed6..74a1bfc1 100644
--- a/apps/web/src/lib/api/example.ts
+++ b/apps/web/src/lib/api/example.ts
@@ -5,14 +5,14 @@
  * QueryClient and apiUrl helper for making API requests.
  */
 
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { api } from "@/lib/queryClient";
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { api } from '@/lib/queryClient'
 
 // Example type for an API resource
 interface User {
-  id: string;
-  name: string;
-  email: string;
+  id: string
+  name: string
+  email: string
 }
 
 /**
@@ -20,15 +20,15 @@ interface User {
  */
 export function useUsers() {
   return useQuery({
-    queryKey: ["users"],
+    queryKey: ['users'],
     queryFn: async () => {
-      const response = await api("users");
+      const response = await api('users')
       if (!response.ok) {
-        throw new Error("Failed to fetch users");
+        throw new Error('Failed to fetch users')
       }
-      return response.json() as Promise<User[]>;
+      return response.json() as Promise<User[]>
     },
-  });
+  })
 }
 
 /**
@@ -36,91 +36,91 @@ export function useUsers() {
  */
 export function useUser(userId: string) {
   return useQuery({
-    queryKey: ["users", userId],
+    queryKey: ['users', userId],
     queryFn: async () => {
-      const response = await api(`users/${userId}`);
+      const response = await api(`users/${userId}`)
       if (!response.ok) {
-        throw new Error("Failed to fetch user");
+        throw new Error('Failed to fetch user')
       }
-      return response.json() as Promise<User>;
+      return response.json() as Promise<User>
     },
     enabled: !!userId, // Only run query if userId is provided
-  });
+  })
 }
 
 /**
  * Example mutation hook - creates a new user
  */
 export function useCreateUser() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
-    mutationFn: async (newUser: Omit<User, "id">) => {
-      const response = await api("users", {
-        method: "POST",
+    mutationFn: async (newUser: Omit<User, 'id'>) => {
+      const response = await api('users', {
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
         body: JSON.stringify(newUser),
-      });
+      })
       if (!response.ok) {
-        throw new Error("Failed to create user");
+        throw new Error('Failed to create user')
       }
-      return response.json() as Promise<User>;
+      return response.json() as Promise<User>
     },
     onSuccess: () => {
       // Invalidate and refetch users query after successful creation
-      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.invalidateQueries({ queryKey: ['users'] })
     },
-  });
+  })
 }
 
 /**
  * Example mutation hook - updates a user
  */
 export function useUpdateUser() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: async (user: User) => {
       const response = await api(`users/${user.id}`, {
-        method: "PUT",
+        method: 'PUT',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
         body: JSON.stringify(user),
-      });
+      })
       if (!response.ok) {
-        throw new Error("Failed to update user");
+        throw new Error('Failed to update user')
       }
-      return response.json() as Promise<User>;
+      return response.json() as Promise<User>
     },
     onSuccess: (updatedUser) => {
       // Invalidate both the list and the individual user query
-      queryClient.invalidateQueries({ queryKey: ["users"] });
-      queryClient.invalidateQueries({ queryKey: ["users", updatedUser.id] });
+      queryClient.invalidateQueries({ queryKey: ['users'] })
+      queryClient.invalidateQueries({ queryKey: ['users', updatedUser.id] })
     },
-  });
+  })
 }
 
 /**
  * Example mutation hook - deletes a user
  */
 export function useDeleteUser() {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation({
     mutationFn: async (userId: string) => {
       const response = await api(`users/${userId}`, {
-        method: "DELETE",
-      });
+        method: 'DELETE',
+      })
       if (!response.ok) {
-        throw new Error("Failed to delete user");
+        throw new Error('Failed to delete user')
       }
     },
     onSuccess: () => {
       // Invalidate users query after successful deletion
-      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.invalidateQueries({ queryKey: ['users'] })
     },
-  });
+  })
 }
diff --git a/apps/web/src/lib/arcade/__tests__/arcade-session-integration.test.ts b/apps/web/src/lib/arcade/__tests__/arcade-session-integration.test.ts
index bb31d964..5e47906f 100644
--- a/apps/web/src/lib/arcade/__tests__/arcade-session-integration.test.ts
+++ b/apps/web/src/lib/arcade/__tests__/arcade-session-integration.test.ts
@@ -1,23 +1,23 @@
-import { eq } from "drizzle-orm";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import type { MemoryPairsState } from "@/arcade-games/matching/types";
-import { db, schema } from "@/db";
+import { eq } from 'drizzle-orm'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import type { MemoryPairsState } from '@/arcade-games/matching/types'
+import { db, schema } from '@/db'
 import {
   applyGameMove,
   createArcadeSession,
   deleteArcadeSession,
   getArcadeSession,
-} from "../session-manager";
-import { createRoom, deleteRoom } from "../room-manager";
+} from '../session-manager'
+import { createRoom, deleteRoom } from '../room-manager'
 
 /**
  * Integration test for the full arcade session flow
  * Tests the complete lifecycle: create -> join -> move -> validate -> sync
  */
-describe("Arcade Session Integration", () => {
-  const testUserId = "integration-test-user";
-  const testGuestId = "integration-test-guest";
-  let testRoomId: string;
+describe('Arcade Session Integration', () => {
+  const testUserId = 'integration-test-user'
+  const testGuestId = 'integration-test-guest'
+  let testRoomId: string
 
   beforeEach(async () => {
     // Create test user
@@ -28,45 +28,45 @@ describe("Arcade Session Integration", () => {
         guestId: testGuestId,
         createdAt: new Date(),
       })
-      .onConflictDoNothing();
+      .onConflictDoNothing()
 
     // Create test room
     const room = await createRoom({
-      name: "Test Room",
+      name: 'Test Room',
       createdBy: testGuestId,
-      creatorName: "Test User",
-      gameName: "matching",
-      gameConfig: { difficulty: 6, gameType: "abacus-numeral", turnTimer: 30 },
+      creatorName: 'Test User',
+      gameName: 'matching',
+      gameConfig: { difficulty: 6, gameType: 'abacus-numeral', turnTimer: 30 },
       ttlMinutes: 60,
-    });
-    testRoomId = room.id;
-  });
+    })
+    testRoomId = room.id
+  })
 
   afterEach(async () => {
     // Clean up
-    await deleteArcadeSession(testGuestId);
+    await deleteArcadeSession(testGuestId)
     if (testRoomId) {
-      await deleteRoom(testRoomId);
+      await deleteRoom(testRoomId)
     }
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId));
-  });
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId))
+  })
 
-  it("should complete full session lifecycle", async () => {
+  it('should complete full session lifecycle', async () => {
     // 1. Create session
     const initialState: MemoryPairsState = {
       cards: [],
       gameCards: [],
       flippedCards: [],
-      gameType: "abacus-numeral",
+      gameType: 'abacus-numeral',
       difficulty: 6,
       turnTimer: 30,
-      gamePhase: "setup",
-      currentPlayer: "1",
+      gamePhase: 'setup',
+      currentPlayer: '1',
       matchedPairs: 0,
       totalPairs: 6,
       moves: 0,
       scores: {},
-      activePlayers: ["1"],
+      activePlayers: ['1'],
       playerMetadata: {},
       consecutiveMatches: {},
       gameStartTime: null,
@@ -78,104 +78,100 @@ describe("Arcade Session Integration", () => {
       showMismatchFeedback: false,
       lastMatchedPair: null,
       playerHovers: {},
-    };
+    }
 
     const session = await createArcadeSession({
       userId: testGuestId,
-      gameName: "matching",
-      gameUrl: "/arcade/matching",
+      gameName: 'matching',
+      gameUrl: '/arcade/matching',
       initialState,
-      activePlayers: ["1"],
+      activePlayers: ['1'],
       roomId: testRoomId,
-    });
+    })
 
-    expect(session).toBeDefined();
-    expect(session.userId).toBe(testUserId);
-    expect(session.version).toBe(1);
-    expect((session.gameState as MemoryPairsState).gamePhase).toBe("setup");
+    expect(session).toBeDefined()
+    expect(session.userId).toBe(testUserId)
+    expect(session.version).toBe(1)
+    expect((session.gameState as MemoryPairsState).gamePhase).toBe('setup')
 
     // 2. Retrieve session (simulating "join")
-    const retrieved = await getArcadeSession(testUserId);
-    expect(retrieved).toBeDefined();
-    expect(retrieved?.userId).toBe(testUserId);
+    const retrieved = await getArcadeSession(testUserId)
+    expect(retrieved).toBeDefined()
+    expect(retrieved?.userId).toBe(testUserId)
 
     // 3. Apply a valid move (START_GAME)
     const startGameMove = {
-      type: "START_GAME",
+      type: 'START_GAME',
       playerId: testUserId,
       timestamp: Date.now(),
       data: {
-        activePlayers: ["1"],
+        activePlayers: ['1'],
       },
-    };
+    }
 
-    const result = await applyGameMove(testUserId, startGameMove as any);
+    const result = await applyGameMove(testUserId, startGameMove as any)
 
-    expect(result.success).toBe(true);
-    expect(result.session).toBeDefined();
-    expect(result.session?.version).toBe(2); // Version incremented
-    expect((result.session?.gameState as MemoryPairsState).gamePhase).toBe(
-      "playing",
-    );
-    expect(
-      (result.session?.gameState as MemoryPairsState).gameCards.length,
-    ).toBe(12); // 6 pairs
+    expect(result.success).toBe(true)
+    expect(result.session).toBeDefined()
+    expect(result.session?.version).toBe(2) // Version incremented
+    expect((result.session?.gameState as MemoryPairsState).gamePhase).toBe('playing')
+    expect((result.session?.gameState as MemoryPairsState).gameCards.length).toBe(12) // 6 pairs
 
     // 4. Try an invalid move (should be rejected)
     const invalidMove = {
-      type: "FLIP_CARD",
+      type: 'FLIP_CARD',
       playerId: testUserId,
       timestamp: Date.now(),
       data: {
-        cardId: "non-existent-card",
+        cardId: 'non-existent-card',
       },
-    };
+    }
 
-    const invalidResult = await applyGameMove(testUserId, invalidMove as any);
+    const invalidResult = await applyGameMove(testUserId, invalidMove as any)
 
-    expect(invalidResult.success).toBe(false);
-    expect(invalidResult.error).toBe("Card not found");
+    expect(invalidResult.success).toBe(false)
+    expect(invalidResult.error).toBe('Card not found')
 
     // Version should NOT have incremented
-    const sessionAfterInvalid = await getArcadeSession(testUserId);
-    expect(sessionAfterInvalid?.version).toBe(2); // Still 2, not 3
+    const sessionAfterInvalid = await getArcadeSession(testUserId)
+    expect(sessionAfterInvalid?.version).toBe(2) // Still 2, not 3
 
     // 5. Clean up (exit session)
-    await deleteArcadeSession(testUserId);
+    await deleteArcadeSession(testUserId)
 
-    const deletedSession = await getArcadeSession(testUserId);
-    expect(deletedSession).toBeUndefined();
-  });
+    const deletedSession = await getArcadeSession(testUserId)
+    expect(deletedSession).toBeUndefined()
+  })
 
-  it("should handle concurrent move attempts", async () => {
+  it('should handle concurrent move attempts', async () => {
     // Create session in playing state
     const playingState: MemoryPairsState = {
       cards: [],
       gameCards: [
         {
-          id: "card-1",
-          type: "number",
+          id: 'card-1',
+          type: 'number',
           number: 5,
           matched: false,
         },
         {
-          id: "card-2",
-          type: "abacus",
+          id: 'card-2',
+          type: 'abacus',
           number: 5,
           matched: false,
         },
       ],
       flippedCards: [],
-      gameType: "abacus-numeral",
+      gameType: 'abacus-numeral',
       difficulty: 6,
       turnTimer: 30,
-      gamePhase: "playing",
-      currentPlayer: "1",
+      gamePhase: 'playing',
+      currentPlayer: '1',
       matchedPairs: 0,
       totalPairs: 6,
       moves: 0,
       scores: { 1: 0 },
-      activePlayers: ["1"],
+      activePlayers: ['1'],
       playerMetadata: {},
       consecutiveMatches: { 1: 0 },
       gameStartTime: Date.now(),
@@ -187,45 +183,45 @@ describe("Arcade Session Integration", () => {
       showMismatchFeedback: false,
       lastMatchedPair: null,
       playerHovers: {},
-    };
+    }
 
     await createArcadeSession({
       userId: testGuestId,
-      gameName: "matching",
-      gameUrl: "/arcade/matching",
+      gameName: 'matching',
+      gameUrl: '/arcade/matching',
       initialState: playingState,
-      activePlayers: ["1"],
+      activePlayers: ['1'],
       roomId: testRoomId,
-    });
+    })
 
     // First move: flip card 1
     const move1 = {
-      type: "FLIP_CARD",
+      type: 'FLIP_CARD',
       playerId: testUserId,
       timestamp: Date.now(),
-      data: { cardId: "card-1" },
-    };
+      data: { cardId: 'card-1' },
+    }
 
-    const result1 = await applyGameMove(testUserId, move1 as any);
-    expect(result1.success).toBe(true);
-    expect(result1.session?.version).toBe(2);
+    const result1 = await applyGameMove(testUserId, move1 as any)
+    expect(result1.success).toBe(true)
+    expect(result1.session?.version).toBe(2)
 
     // Second move: flip card 2 (should match)
     const move2 = {
-      type: "FLIP_CARD",
+      type: 'FLIP_CARD',
       playerId: testUserId,
       timestamp: Date.now() + 1,
-      data: { cardId: "card-2" },
-    };
+      data: { cardId: 'card-2' },
+    }
 
-    const result2 = await applyGameMove(testUserId, move2 as any);
-    expect(result2.success).toBe(true);
-    expect(result2.session?.version).toBe(3);
+    const result2 = await applyGameMove(testUserId, move2 as any)
+    expect(result2.success).toBe(true)
+    expect(result2.session?.version).toBe(3)
 
     // Verify the match was recorded
-    const state = result2.session?.gameState as MemoryPairsState;
-    expect(state.matchedPairs).toBe(1);
-    expect(state.gameCards[0].matched).toBe(true);
-    expect(state.gameCards[1].matched).toBe(true);
-  });
-});
+    const state = result2.session?.gameState as MemoryPairsState
+    expect(state.matchedPairs).toBe(1)
+    expect(state.gameCards[0].matched).toBe(true)
+    expect(state.gameCards[1].matched).toBe(true)
+  })
+})
diff --git a/apps/web/src/lib/arcade/__tests__/modal-rooms.test.ts b/apps/web/src/lib/arcade/__tests__/modal-rooms.test.ts
index a0607fa2..d819a2fa 100644
--- a/apps/web/src/lib/arcade/__tests__/modal-rooms.test.ts
+++ b/apps/web/src/lib/arcade/__tests__/modal-rooms.test.ts
@@ -1,8 +1,8 @@
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { eq } from "drizzle-orm";
-import { db, schema } from "@/db";
-import { addRoomMember, getRoomMember, getUserRooms } from "../room-membership";
-import { createRoom, deleteRoom } from "../room-manager";
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { eq } from 'drizzle-orm'
+import { db, schema } from '@/db'
+import { addRoomMember, getRoomMember, getUserRooms } from '../room-membership'
+import { createRoom, deleteRoom } from '../room-manager'
 
 /**
  * Integration tests for modal room enforcement
@@ -10,14 +10,14 @@ import { createRoom, deleteRoom } from "../room-manager";
  * Tests the database-level unique constraint combined with application-level
  * auto-leave logic to ensure users can only be in one room at a time.
  */
-describe("Modal Room Enforcement", () => {
-  const testGuestId1 = "modal-test-guest-1";
-  const testGuestId2 = "modal-test-guest-2";
-  const testUserId1 = "modal-test-user-1";
-  const testUserId2 = "modal-test-user-2";
-  let room1Id: string;
-  let room2Id: string;
-  let room3Id: string;
+describe('Modal Room Enforcement', () => {
+  const testGuestId1 = 'modal-test-guest-1'
+  const testGuestId2 = 'modal-test-guest-2'
+  const testUserId1 = 'modal-test-user-1'
+  const testUserId2 = 'modal-test-user-2'
+  let room1Id: string
+  let room2Id: string
+  let room3Id: string
 
   beforeEach(async () => {
     // Create test users
@@ -35,227 +35,223 @@ describe("Modal Room Enforcement", () => {
           createdAt: new Date(),
         },
       ])
-      .onConflictDoNothing();
+      .onConflictDoNothing()
 
     // Create test rooms
     const room1 = await createRoom({
-      name: "Modal Test Room 1",
+      name: 'Modal Test Room 1',
       createdBy: testGuestId1,
-      creatorName: "User 1",
-      gameName: "matching",
+      creatorName: 'User 1',
+      gameName: 'matching',
       gameConfig: { difficulty: 6 },
       ttlMinutes: 60,
-    });
-    room1Id = room1.id;
+    })
+    room1Id = room1.id
 
     const room2 = await createRoom({
-      name: "Modal Test Room 2",
+      name: 'Modal Test Room 2',
       createdBy: testGuestId1,
-      creatorName: "User 1",
-      gameName: "matching",
+      creatorName: 'User 1',
+      gameName: 'matching',
       gameConfig: { difficulty: 8 },
       ttlMinutes: 60,
-    });
-    room2Id = room2.id;
+    })
+    room2Id = room2.id
 
     const room3 = await createRoom({
-      name: "Modal Test Room 3",
+      name: 'Modal Test Room 3',
       createdBy: testGuestId1,
-      creatorName: "User 1",
-      gameName: "memory-quiz",
+      creatorName: 'User 1',
+      gameName: 'memory-quiz',
       gameConfig: {},
       ttlMinutes: 60,
-    });
-    room3Id = room3.id;
-  });
+    })
+    room3Id = room3.id
+  })
 
   afterEach(async () => {
     // Clean up
-    await db
-      .delete(schema.roomMembers)
-      .where(eq(schema.roomMembers.userId, testGuestId1));
-    await db
-      .delete(schema.roomMembers)
-      .where(eq(schema.roomMembers.userId, testGuestId2));
+    await db.delete(schema.roomMembers).where(eq(schema.roomMembers.userId, testGuestId1))
+    await db.delete(schema.roomMembers).where(eq(schema.roomMembers.userId, testGuestId2))
 
     try {
-      await deleteRoom(room1Id);
-      await deleteRoom(room2Id);
-      await deleteRoom(room3Id);
+      await deleteRoom(room1Id)
+      await deleteRoom(room2Id)
+      await deleteRoom(room3Id)
     } catch {
       // Rooms may have been deleted in test
     }
 
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId1));
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId2));
-  });
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId1))
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId2))
+  })
 
-  it("should allow user to join their first room", async () => {
+  it('should allow user to join their first room', async () => {
     const result = await addRoomMember({
       roomId: room1Id,
       userId: testGuestId1,
-      displayName: "Test User",
+      displayName: 'Test User',
       isCreator: false,
-    });
+    })
 
-    expect(result.member).toBeDefined();
-    expect(result.member.roomId).toBe(room1Id);
-    expect(result.member.userId).toBe(testGuestId1);
-    expect(result.autoLeaveResult).toBeUndefined();
+    expect(result.member).toBeDefined()
+    expect(result.member.roomId).toBe(room1Id)
+    expect(result.member.userId).toBe(testGuestId1)
+    expect(result.autoLeaveResult).toBeUndefined()
 
-    const userRooms = await getUserRooms(testGuestId1);
-    expect(userRooms).toHaveLength(1);
-    expect(userRooms[0]).toBe(room1Id);
-  });
+    const userRooms = await getUserRooms(testGuestId1)
+    expect(userRooms).toHaveLength(1)
+    expect(userRooms[0]).toBe(room1Id)
+  })
 
-  it("should automatically leave previous room when joining new one", async () => {
+  it('should automatically leave previous room when joining new one', async () => {
     // Join room 1
     await addRoomMember({
       roomId: room1Id,
       userId: testGuestId1,
-      displayName: "Test User",
+      displayName: 'Test User',
       isCreator: false,
-    });
+    })
 
-    let userRooms = await getUserRooms(testGuestId1);
-    expect(userRooms).toHaveLength(1);
-    expect(userRooms[0]).toBe(room1Id);
+    let userRooms = await getUserRooms(testGuestId1)
+    expect(userRooms).toHaveLength(1)
+    expect(userRooms[0]).toBe(room1Id)
 
     // Join room 2 (should auto-leave room 1)
     const result = await addRoomMember({
       roomId: room2Id,
       userId: testGuestId1,
-      displayName: "Test User",
+      displayName: 'Test User',
       isCreator: false,
-    });
+    })
 
-    expect(result.autoLeaveResult).toBeDefined();
-    expect(result.autoLeaveResult?.leftRooms).toHaveLength(1);
-    expect(result.autoLeaveResult?.leftRooms[0]).toBe(room1Id);
-    expect(result.autoLeaveResult?.previousRoomMembers).toHaveLength(1);
+    expect(result.autoLeaveResult).toBeDefined()
+    expect(result.autoLeaveResult?.leftRooms).toHaveLength(1)
+    expect(result.autoLeaveResult?.leftRooms[0]).toBe(room1Id)
+    expect(result.autoLeaveResult?.previousRoomMembers).toHaveLength(1)
 
-    userRooms = await getUserRooms(testGuestId1);
-    expect(userRooms).toHaveLength(1);
-    expect(userRooms[0]).toBe(room2Id);
+    userRooms = await getUserRooms(testGuestId1)
+    expect(userRooms).toHaveLength(1)
+    expect(userRooms[0]).toBe(room2Id)
 
     // Verify user is no longer in room 1
-    const room1Member = await getRoomMember(room1Id, testGuestId1);
-    expect(room1Member).toBeUndefined();
+    const room1Member = await getRoomMember(room1Id, testGuestId1)
+    expect(room1Member).toBeUndefined()
 
     // Verify user is in room 2
-    const room2Member = await getRoomMember(room2Id, testGuestId1);
-    expect(room2Member).toBeDefined();
-  });
+    const room2Member = await getRoomMember(room2Id, testGuestId1)
+    expect(room2Member).toBeDefined()
+  })
 
-  it("should handle rejoining the same room without auto-leave", async () => {
+  it('should handle rejoining the same room without auto-leave', async () => {
     // Join room 1
     const firstJoin = await addRoomMember({
       roomId: room1Id,
       userId: testGuestId1,
-      displayName: "Test User",
+      displayName: 'Test User',
       isCreator: false,
-    });
+    })
 
-    expect(firstJoin.autoLeaveResult).toBeUndefined();
+    expect(firstJoin.autoLeaveResult).toBeUndefined()
 
     // "Rejoin" room 1 (should just update status)
     const secondJoin = await addRoomMember({
       roomId: room1Id,
       userId: testGuestId1,
-      displayName: "Test User Updated",
+      displayName: 'Test User Updated',
       isCreator: false,
-    });
+    })
 
-    expect(secondJoin.autoLeaveResult).toBeUndefined();
-    expect(secondJoin.member.roomId).toBe(room1Id);
+    expect(secondJoin.autoLeaveResult).toBeUndefined()
+    expect(secondJoin.member.roomId).toBe(room1Id)
 
-    const userRooms = await getUserRooms(testGuestId1);
-    expect(userRooms).toHaveLength(1);
-    expect(userRooms[0]).toBe(room1Id);
-  });
+    const userRooms = await getUserRooms(testGuestId1)
+    expect(userRooms).toHaveLength(1)
+    expect(userRooms[0]).toBe(room1Id)
+  })
 
-  it("should allow different users in different rooms simultaneously", async () => {
+  it('should allow different users in different rooms simultaneously', async () => {
     // User 1 joins room 1
     await addRoomMember({
       roomId: room1Id,
       userId: testGuestId1,
-      displayName: "User 1",
+      displayName: 'User 1',
       isCreator: false,
-    });
+    })
 
     // User 2 joins room 2
     await addRoomMember({
       roomId: room2Id,
       userId: testGuestId2,
-      displayName: "User 2",
+      displayName: 'User 2',
       isCreator: false,
-    });
+    })
 
-    const user1Rooms = await getUserRooms(testGuestId1);
-    const user2Rooms = await getUserRooms(testGuestId2);
+    const user1Rooms = await getUserRooms(testGuestId1)
+    const user2Rooms = await getUserRooms(testGuestId2)
 
-    expect(user1Rooms).toHaveLength(1);
-    expect(user1Rooms[0]).toBe(room1Id);
+    expect(user1Rooms).toHaveLength(1)
+    expect(user1Rooms[0]).toBe(room1Id)
 
-    expect(user2Rooms).toHaveLength(1);
-    expect(user2Rooms[0]).toBe(room2Id);
-  });
+    expect(user2Rooms).toHaveLength(1)
+    expect(user2Rooms[0]).toBe(room2Id)
+  })
 
-  it("should auto-leave when switching between multiple rooms", async () => {
+  it('should auto-leave when switching between multiple rooms', async () => {
     // Join room 1
     await addRoomMember({
       roomId: room1Id,
       userId: testGuestId1,
-      displayName: "Test User",
-    });
+      displayName: 'Test User',
+    })
 
     // Join room 2 (auto-leave room 1)
     const result2 = await addRoomMember({
       roomId: room2Id,
       userId: testGuestId1,
-      displayName: "Test User",
-    });
-    expect(result2.autoLeaveResult?.leftRooms).toContain(room1Id);
+      displayName: 'Test User',
+    })
+    expect(result2.autoLeaveResult?.leftRooms).toContain(room1Id)
 
     // Join room 3 (auto-leave room 2)
     const result3 = await addRoomMember({
       roomId: room3Id,
       userId: testGuestId1,
-      displayName: "Test User",
-    });
-    expect(result3.autoLeaveResult?.leftRooms).toContain(room2Id);
+      displayName: 'Test User',
+    })
+    expect(result3.autoLeaveResult?.leftRooms).toContain(room2Id)
 
     // Verify only in room 3
-    const userRooms = await getUserRooms(testGuestId1);
-    expect(userRooms).toHaveLength(1);
-    expect(userRooms[0]).toBe(room3Id);
-  });
+    const userRooms = await getUserRooms(testGuestId1)
+    expect(userRooms).toHaveLength(1)
+    expect(userRooms[0]).toBe(room3Id)
+  })
 
-  it("should provide correct auto-leave metadata", async () => {
+  it('should provide correct auto-leave metadata', async () => {
     // Join room 1
     await addRoomMember({
       roomId: room1Id,
       userId: testGuestId1,
-      displayName: "Original Name",
-    });
+      displayName: 'Original Name',
+    })
 
     // Join room 2 and check metadata
     const result = await addRoomMember({
       roomId: room2Id,
       userId: testGuestId1,
-      displayName: "New Name",
-    });
+      displayName: 'New Name',
+    })
 
-    expect(result.autoLeaveResult).toBeDefined();
-    expect(result.autoLeaveResult?.previousRoomMembers).toHaveLength(1);
+    expect(result.autoLeaveResult).toBeDefined()
+    expect(result.autoLeaveResult?.previousRoomMembers).toHaveLength(1)
 
-    const previousMember = result.autoLeaveResult?.previousRoomMembers[0];
-    expect(previousMember?.roomId).toBe(room1Id);
-    expect(previousMember?.member.userId).toBe(testGuestId1);
-    expect(previousMember?.member.displayName).toBe("Original Name");
-  });
+    const previousMember = result.autoLeaveResult?.previousRoomMembers[0]
+    expect(previousMember?.roomId).toBe(room1Id)
+    expect(previousMember?.member.userId).toBe(testGuestId1)
+    expect(previousMember?.member.displayName).toBe('Original Name')
+  })
 
-  it("should enforce unique constraint at database level", async () => {
+  it('should enforce unique constraint at database level', async () => {
     // This test verifies the database constraint catches issues even if
     // application logic fails
 
@@ -263,23 +259,23 @@ describe("Modal Room Enforcement", () => {
     await addRoomMember({
       roomId: room1Id,
       userId: testGuestId1,
-      displayName: "Test User",
-    });
+      displayName: 'Test User',
+    })
 
     // Try to directly insert a second membership (bypassing auto-leave logic)
     const directInsert = async () => {
       await db.insert(schema.roomMembers).values({
         roomId: room2Id,
         userId: testGuestId1,
-        displayName: "Test User",
+        displayName: 'Test User',
         isCreator: false,
         joinedAt: new Date(),
         lastSeen: new Date(),
         isOnline: true,
-      });
-    };
+      })
+    }
 
     // Should fail due to unique constraint
-    await expect(directInsert()).rejects.toThrow();
-  });
-});
+    await expect(directInsert()).rejects.toThrow()
+  })
+})
diff --git a/apps/web/src/lib/arcade/__tests__/orphaned-session-cleanup.test.ts b/apps/web/src/lib/arcade/__tests__/orphaned-session-cleanup.test.ts
index d9ccd742..a1a2366d 100644
--- a/apps/web/src/lib/arcade/__tests__/orphaned-session-cleanup.test.ts
+++ b/apps/web/src/lib/arcade/__tests__/orphaned-session-cleanup.test.ts
@@ -1,12 +1,8 @@
-import { eq } from "drizzle-orm";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { db, schema } from "@/db";
-import {
-  createArcadeSession,
-  deleteArcadeSession,
-  getArcadeSession,
-} from "../session-manager";
-import { createRoom, deleteRoom } from "../room-manager";
+import { eq } from 'drizzle-orm'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { db, schema } from '@/db'
+import { createArcadeSession, deleteArcadeSession, getArcadeSession } from '../session-manager'
+import { createRoom, deleteRoom } from '../room-manager'
 
 /**
  * Integration tests for orphaned session cleanup
@@ -15,10 +11,10 @@ import { createRoom, deleteRoom } from "../room-manager";
  * cleaned up to prevent the bug where users get redirected to
  * non-existent games when rooms have been TTL deleted.
  */
-describe("Orphaned Session Cleanup", () => {
-  const testUserId = "orphan-test-user-id";
-  const testGuestId = "orphan-test-guest-id";
-  let testRoomId: string;
+describe('Orphaned Session Cleanup', () => {
+  const testUserId = 'orphan-test-user-id'
+  const testGuestId = 'orphan-test-guest-id'
+  let testRoomId: string
 
   beforeEach(async () => {
     // Create test user
@@ -29,117 +25,117 @@ describe("Orphaned Session Cleanup", () => {
         guestId: testGuestId,
         createdAt: new Date(),
       })
-      .onConflictDoNothing();
+      .onConflictDoNothing()
 
     // Create test room
     const room = await createRoom({
-      name: "Orphan Test Room",
+      name: 'Orphan Test Room',
       createdBy: testGuestId,
-      creatorName: "Test User",
-      gameName: "matching",
-      gameConfig: { difficulty: 6, gameType: "abacus-numeral", turnTimer: 30 },
+      creatorName: 'Test User',
+      gameName: 'matching',
+      gameConfig: { difficulty: 6, gameType: 'abacus-numeral', turnTimer: 30 },
       ttlMinutes: 60,
-    });
-    testRoomId = room.id;
-  });
+    })
+    testRoomId = room.id
+  })
 
   afterEach(async () => {
     // Clean up
-    await deleteArcadeSession(testGuestId);
+    await deleteArcadeSession(testGuestId)
     if (testRoomId) {
       try {
-        await deleteRoom(testRoomId);
+        await deleteRoom(testRoomId)
       } catch {
         // Room may have been deleted in test
       }
     }
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId));
-  });
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId))
+  })
 
   // NOTE: This test is no longer valid with roomId as primary key
   // roomId cannot be null since it's the primary key with a foreign key constraint
   // Orphaned sessions are now automatically cleaned up via CASCADE delete when room is deleted
-  it.skip("should return undefined when session has no roomId", async () => {
+  it.skip('should return undefined when session has no roomId', async () => {
     // This test scenario is impossible with the new schema where roomId is the primary key
     // and has a foreign key constraint with CASCADE delete
-  });
+  })
 
-  it("should return undefined when session room has been deleted", async () => {
+  it('should return undefined when session room has been deleted', async () => {
     // Create a session with a valid room
     const session = await createArcadeSession({
       userId: testGuestId,
-      gameName: "matching",
-      gameUrl: "/arcade/matching",
-      initialState: { gamePhase: "setup" },
-      activePlayers: ["player-1"],
+      gameName: 'matching',
+      gameUrl: '/arcade/matching',
+      initialState: { gamePhase: 'setup' },
+      activePlayers: ['player-1'],
       roomId: testRoomId,
-    });
+    })
 
-    expect(session).toBeDefined();
-    expect(session.roomId).toBe(testRoomId);
+    expect(session).toBeDefined()
+    expect(session.roomId).toBe(testRoomId)
 
     // Delete the room (simulating TTL expiration)
-    await deleteRoom(testRoomId);
+    await deleteRoom(testRoomId)
 
     // Getting the session should detect missing room and auto-delete
-    const result = await getArcadeSession(testGuestId);
-    expect(result).toBeUndefined();
+    const result = await getArcadeSession(testGuestId)
+    expect(result).toBeUndefined()
 
     // Verify session was actually deleted
     const [directCheck] = await db
       .select()
       .from(schema.arcadeSessions)
       .where(eq(schema.arcadeSessions.userId, testUserId))
-      .limit(1);
+      .limit(1)
 
-    expect(directCheck).toBeUndefined();
-  });
+    expect(directCheck).toBeUndefined()
+  })
 
-  it("should return valid session when room exists", async () => {
+  it('should return valid session when room exists', async () => {
     // Create a session with a valid room
     const session = await createArcadeSession({
       userId: testGuestId,
-      gameName: "matching",
-      gameUrl: "/arcade/matching",
-      initialState: { gamePhase: "setup" },
-      activePlayers: ["player-1"],
+      gameName: 'matching',
+      gameUrl: '/arcade/matching',
+      initialState: { gamePhase: 'setup' },
+      activePlayers: ['player-1'],
       roomId: testRoomId,
-    });
+    })
 
-    expect(session).toBeDefined();
+    expect(session).toBeDefined()
 
     // Getting the session should work fine when room exists
-    const result = await getArcadeSession(testGuestId);
-    expect(result).toBeDefined();
-    expect(result?.roomId).toBe(testRoomId);
-    expect(result?.currentGame).toBe("matching");
-  });
+    const result = await getArcadeSession(testGuestId)
+    expect(result).toBeDefined()
+    expect(result?.roomId).toBe(testRoomId)
+    expect(result?.currentGame).toBe('matching')
+  })
 
-  it("should handle multiple getArcadeSession calls idempotently", async () => {
+  it('should handle multiple getArcadeSession calls idempotently', async () => {
     // Create a session with a valid room
     await createArcadeSession({
       userId: testGuestId,
-      gameName: "matching",
-      gameUrl: "/arcade/matching",
-      initialState: { gamePhase: "setup" },
-      activePlayers: ["player-1"],
+      gameName: 'matching',
+      gameUrl: '/arcade/matching',
+      initialState: { gamePhase: 'setup' },
+      activePlayers: ['player-1'],
       roomId: testRoomId,
-    });
+    })
 
     // Delete the room
-    await deleteRoom(testRoomId);
+    await deleteRoom(testRoomId)
 
     // Multiple calls should all return undefined and not error
-    const result1 = await getArcadeSession(testGuestId);
-    const result2 = await getArcadeSession(testGuestId);
-    const result3 = await getArcadeSession(testGuestId);
+    const result1 = await getArcadeSession(testGuestId)
+    const result2 = await getArcadeSession(testGuestId)
+    const result3 = await getArcadeSession(testGuestId)
 
-    expect(result1).toBeUndefined();
-    expect(result2).toBeUndefined();
-    expect(result3).toBeUndefined();
-  });
+    expect(result1).toBeUndefined()
+    expect(result2).toBeUndefined()
+    expect(result3).toBeUndefined()
+  })
 
-  it("should prevent orphaned sessions from causing redirect loops", async () => {
+  it('should prevent orphaned sessions from causing redirect loops', async () => {
     /**
      * Regression test for the specific bug:
      * - Room gets TTL deleted
@@ -155,23 +151,23 @@ describe("Orphaned Session Cleanup", () => {
     // 1. Create session with room
     await createArcadeSession({
       userId: testGuestId,
-      gameName: "matching",
-      gameUrl: "/arcade/matching",
-      initialState: { gamePhase: "setup" },
-      activePlayers: ["player-1"],
+      gameName: 'matching',
+      gameUrl: '/arcade/matching',
+      initialState: { gamePhase: 'setup' },
+      activePlayers: ['player-1'],
       roomId: testRoomId,
-    });
+    })
 
     // 2. Room gets TTL deleted
-    await deleteRoom(testRoomId);
+    await deleteRoom(testRoomId)
 
     // 3. User's client checks for active session
-    const activeSession = await getArcadeSession(testGuestId);
+    const activeSession = await getArcadeSession(testGuestId)
 
     // 4. Should return undefined, preventing redirect
-    expect(activeSession).toBeUndefined();
+    expect(activeSession).toBeUndefined()
 
     // 5. User can now proceed to arcade lobby normally
     // (no redirect to non-existent game)
-  });
-});
+  })
+})
diff --git a/apps/web/src/lib/arcade/__tests__/player-ownership-integration.test.ts b/apps/web/src/lib/arcade/__tests__/player-ownership-integration.test.ts
index f11a7f2a..95056ec4 100644
--- a/apps/web/src/lib/arcade/__tests__/player-ownership-integration.test.ts
+++ b/apps/web/src/lib/arcade/__tests__/player-ownership-integration.test.ts
@@ -5,8 +5,8 @@
  * the full stack: database → utilities → client state
  */
 
-import { beforeEach, describe, expect, it } from "vitest";
-import type { RoomData } from "@/hooks/useRoomData";
+import { beforeEach, describe, expect, it } from 'vitest'
+import type { RoomData } from '@/hooks/useRoomData'
 import {
   buildPlayerMetadata,
   buildPlayerOwnershipFromRoomData,
@@ -16,367 +16,300 @@ import {
   groupPlayersByOwner,
   isPlayerOwnedByUser,
   type PlayerOwnershipMap,
-} from "../player-ownership";
+} from '../player-ownership'
 
-describe("Player Ownership Integration Tests", () => {
+describe('Player Ownership Integration Tests', () => {
   // Simulate a real multiplayer room scenario
-  let mockRoomData: RoomData;
-  let playerIds: string[];
-  let playersMap: Map<string, { name: string; emoji: string; color: string }>;
+  let mockRoomData: RoomData
+  let playerIds: string[]
+  let playersMap: Map<string, { name: string; emoji: string; color: string }>
 
   beforeEach(() => {
     // Setup: 3 users in a room, each with different number of players
     mockRoomData = {
-      id: "room-integration-test",
-      name: "Test Multiplayer Room",
-      code: "TEST",
-      gameName: "memory-pairs",
+      id: 'room-integration-test',
+      name: 'Test Multiplayer Room',
+      code: 'TEST',
+      gameName: 'memory-pairs',
       members: [
         {
-          id: "member-1",
-          userId: "user-alice",
-          displayName: "Alice",
+          id: 'member-1',
+          userId: 'user-alice',
+          displayName: 'Alice',
           isOnline: true,
           isCreator: true,
         },
         {
-          id: "member-2",
-          userId: "user-bob",
-          displayName: "Bob",
+          id: 'member-2',
+          userId: 'user-bob',
+          displayName: 'Bob',
           isOnline: true,
           isCreator: false,
         },
         {
-          id: "member-3",
-          userId: "user-charlie",
-          displayName: "Charlie",
+          id: 'member-3',
+          userId: 'user-charlie',
+          displayName: 'Charlie',
           isOnline: true,
           isCreator: false,
         },
       ],
       memberPlayers: {
-        "user-alice": [
-          { id: "player-a1", name: "Alice P1", emoji: "🐶", color: "#ff0000" },
-          { id: "player-a2", name: "Alice P2", emoji: "🐱", color: "#ff4444" },
+        'user-alice': [
+          { id: 'player-a1', name: 'Alice P1', emoji: '🐶', color: '#ff0000' },
+          { id: 'player-a2', name: 'Alice P2', emoji: '🐱', color: '#ff4444' },
         ],
-        "user-bob": [
-          { id: "player-b1", name: "Bob P1", emoji: "🐭", color: "#00ff00" },
-        ],
-        "user-charlie": [
+        'user-bob': [{ id: 'player-b1', name: 'Bob P1', emoji: '🐭', color: '#00ff00' }],
+        'user-charlie': [
           {
-            id: "player-c1",
-            name: "Charlie P1",
-            emoji: "🦊",
-            color: "#0000ff",
+            id: 'player-c1',
+            name: 'Charlie P1',
+            emoji: '🦊',
+            color: '#0000ff',
           },
           {
-            id: "player-c2",
-            name: "Charlie P2",
-            emoji: "🐻",
-            color: "#4444ff",
+            id: 'player-c2',
+            name: 'Charlie P2',
+            emoji: '🐻',
+            color: '#4444ff',
           },
           {
-            id: "player-c3",
-            name: "Charlie P3",
-            emoji: "🐼",
-            color: "#8888ff",
+            id: 'player-c3',
+            name: 'Charlie P3',
+            emoji: '🐼',
+            color: '#8888ff',
           },
         ],
       },
-    };
+    }
 
-    playerIds = [
-      "player-a1",
-      "player-a2",
-      "player-b1",
-      "player-c1",
-      "player-c2",
-      "player-c3",
-    ];
+    playerIds = ['player-a1', 'player-a2', 'player-b1', 'player-c1', 'player-c2', 'player-c3']
 
     playersMap = new Map([
-      ["player-a1", { name: "Alice P1", emoji: "🐶", color: "#ff0000" }],
-      ["player-a2", { name: "Alice P2", emoji: "🐱", color: "#ff4444" }],
-      ["player-b1", { name: "Bob P1", emoji: "🐭", color: "#00ff00" }],
-      ["player-c1", { name: "Charlie P1", emoji: "🦊", color: "#0000ff" }],
-      ["player-c2", { name: "Charlie P2", emoji: "🐻", color: "#4444ff" }],
-      ["player-c3", { name: "Charlie P3", emoji: "🐼", color: "#8888ff" }],
-    ]);
-  });
+      ['player-a1', { name: 'Alice P1', emoji: '🐶', color: '#ff0000' }],
+      ['player-a2', { name: 'Alice P2', emoji: '🐱', color: '#ff4444' }],
+      ['player-b1', { name: 'Bob P1', emoji: '🐭', color: '#00ff00' }],
+      ['player-c1', { name: 'Charlie P1', emoji: '🦊', color: '#0000ff' }],
+      ['player-c2', { name: 'Charlie P2', emoji: '🐻', color: '#4444ff' }],
+      ['player-c3', { name: 'Charlie P3', emoji: '🐼', color: '#8888ff' }],
+    ])
+  })
 
-  describe("Full multiplayer ownership flow", () => {
-    it("should correctly identify ownership across all players", () => {
-      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData);
+  describe('Full multiplayer ownership flow', () => {
+    it('should correctly identify ownership across all players', () => {
+      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData)
 
       // Alice owns 2 players
-      expect(isPlayerOwnedByUser("player-a1", "user-alice", ownership)).toBe(
-        true,
-      );
-      expect(isPlayerOwnedByUser("player-a2", "user-alice", ownership)).toBe(
-        true,
-      );
+      expect(isPlayerOwnedByUser('player-a1', 'user-alice', ownership)).toBe(true)
+      expect(isPlayerOwnedByUser('player-a2', 'user-alice', ownership)).toBe(true)
 
       // Bob owns 1 player
-      expect(isPlayerOwnedByUser("player-b1", "user-bob", ownership)).toBe(
-        true,
-      );
+      expect(isPlayerOwnedByUser('player-b1', 'user-bob', ownership)).toBe(true)
 
       // Charlie owns 3 players
-      expect(isPlayerOwnedByUser("player-c1", "user-charlie", ownership)).toBe(
-        true,
-      );
-      expect(isPlayerOwnedByUser("player-c2", "user-charlie", ownership)).toBe(
-        true,
-      );
-      expect(isPlayerOwnedByUser("player-c3", "user-charlie", ownership)).toBe(
-        true,
-      );
+      expect(isPlayerOwnedByUser('player-c1', 'user-charlie', ownership)).toBe(true)
+      expect(isPlayerOwnedByUser('player-c2', 'user-charlie', ownership)).toBe(true)
+      expect(isPlayerOwnedByUser('player-c3', 'user-charlie', ownership)).toBe(true)
 
       // Cross-ownership checks (should be false)
-      expect(isPlayerOwnedByUser("player-a1", "user-bob", ownership)).toBe(
-        false,
-      );
-      expect(isPlayerOwnedByUser("player-b1", "user-charlie", ownership)).toBe(
-        false,
-      );
-      expect(isPlayerOwnedByUser("player-c1", "user-alice", ownership)).toBe(
-        false,
-      );
-    });
+      expect(isPlayerOwnedByUser('player-a1', 'user-bob', ownership)).toBe(false)
+      expect(isPlayerOwnedByUser('player-b1', 'user-charlie', ownership)).toBe(false)
+      expect(isPlayerOwnedByUser('player-c1', 'user-alice', ownership)).toBe(false)
+    })
 
-    it("should build complete metadata for game state", () => {
-      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData);
-      const metadata = buildPlayerMetadata(playerIds, ownership, playersMap);
+    it('should build complete metadata for game state', () => {
+      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData)
+      const metadata = buildPlayerMetadata(playerIds, ownership, playersMap)
 
       // Check all players have metadata
-      expect(Object.keys(metadata)).toHaveLength(6);
+      expect(Object.keys(metadata)).toHaveLength(6)
 
       // Verify Alice's players
-      expect(metadata["player-a1"]).toEqual({
-        id: "player-a1",
-        name: "Alice P1",
-        emoji: "🐶",
-        color: "#ff0000",
-        userId: "user-alice",
-      });
-      expect(metadata["player-a2"].userId).toBe("user-alice");
+      expect(metadata['player-a1']).toEqual({
+        id: 'player-a1',
+        name: 'Alice P1',
+        emoji: '🐶',
+        color: '#ff0000',
+        userId: 'user-alice',
+      })
+      expect(metadata['player-a2'].userId).toBe('user-alice')
 
       // Verify Bob's player
-      expect(metadata["player-b1"].userId).toBe("user-bob");
+      expect(metadata['player-b1'].userId).toBe('user-bob')
 
       // Verify Charlie's players
-      expect(metadata["player-c1"].userId).toBe("user-charlie");
-      expect(metadata["player-c2"].userId).toBe("user-charlie");
-      expect(metadata["player-c3"].userId).toBe("user-charlie");
-    });
+      expect(metadata['player-c1'].userId).toBe('user-charlie')
+      expect(metadata['player-c2'].userId).toBe('user-charlie')
+      expect(metadata['player-c3'].userId).toBe('user-charlie')
+    })
 
-    it("should correctly group players by owner for team display", () => {
-      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData);
-      const groups = groupPlayersByOwner(playerIds, ownership);
+    it('should correctly group players by owner for team display', () => {
+      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData)
+      const groups = groupPlayersByOwner(playerIds, ownership)
 
-      expect(groups.size).toBe(3);
-      expect(groups.get("user-alice")).toEqual(["player-a1", "player-a2"]);
-      expect(groups.get("user-bob")).toEqual(["player-b1"]);
-      expect(groups.get("user-charlie")).toEqual([
-        "player-c1",
-        "player-c2",
-        "player-c3",
-      ]);
-    });
+      expect(groups.size).toBe(3)
+      expect(groups.get('user-alice')).toEqual(['player-a1', 'player-a2'])
+      expect(groups.get('user-bob')).toEqual(['player-b1'])
+      expect(groups.get('user-charlie')).toEqual(['player-c1', 'player-c2', 'player-c3'])
+    })
 
-    it("should identify unique participants", () => {
-      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData);
-      const owners = getUniqueOwners(ownership);
+    it('should identify unique participants', () => {
+      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData)
+      const owners = getUniqueOwners(ownership)
 
-      expect(owners).toHaveLength(3);
-      expect(owners).toContain("user-alice");
-      expect(owners).toContain("user-bob");
-      expect(owners).toContain("user-charlie");
-    });
-  });
+      expect(owners).toHaveLength(3)
+      expect(owners).toContain('user-alice')
+      expect(owners).toContain('user-bob')
+      expect(owners).toContain('user-charlie')
+    })
+  })
 
-  describe("Turn-based game authorization scenarios", () => {
-    let ownership: PlayerOwnershipMap;
+  describe('Turn-based game authorization scenarios', () => {
+    let ownership: PlayerOwnershipMap
 
     beforeEach(() => {
-      ownership = buildPlayerOwnershipFromRoomData(mockRoomData);
-    });
+      ownership = buildPlayerOwnershipFromRoomData(mockRoomData)
+    })
 
-    it("should allow Alice to act when her player has the turn", () => {
-      const currentPlayerId = "player-a1";
-      const currentViewerId = "user-alice";
+    it('should allow Alice to act when her player has the turn', () => {
+      const currentPlayerId = 'player-a1'
+      const currentViewerId = 'user-alice'
 
-      const canAct = isPlayerOwnedByUser(
-        currentPlayerId,
-        currentViewerId,
-        ownership,
-      );
-      expect(canAct).toBe(true);
-    });
+      const canAct = isPlayerOwnedByUser(currentPlayerId, currentViewerId, ownership)
+      expect(canAct).toBe(true)
+    })
 
-    it("should block Bob from acting when Alice has the turn", () => {
-      const currentPlayerId = "player-a1"; // Alice's turn
-      const currentViewerId = "user-bob"; // Bob trying to act
+    it('should block Bob from acting when Alice has the turn', () => {
+      const currentPlayerId = 'player-a1' // Alice's turn
+      const currentViewerId = 'user-bob' // Bob trying to act
 
-      const canAct = isPlayerOwnedByUser(
-        currentPlayerId,
-        currentViewerId,
-        ownership,
-      );
-      expect(canAct).toBe(false);
-    });
+      const canAct = isPlayerOwnedByUser(currentPlayerId, currentViewerId, ownership)
+      expect(canAct).toBe(false)
+    })
 
-    it("should handle turn rotation correctly", () => {
-      const turnOrder = ["player-a1", "player-b1", "player-c1"];
+    it('should handle turn rotation correctly', () => {
+      const turnOrder = ['player-a1', 'player-b1', 'player-c1']
 
       for (const currentPlayer of turnOrder) {
-        const owner = getPlayerOwner(currentPlayer, ownership);
-        expect(owner).toBeDefined();
+        const owner = getPlayerOwner(currentPlayer, ownership)
+        expect(owner).toBeDefined()
 
         // Verify only the owner can act
-        for (const userId of ["user-alice", "user-bob", "user-charlie"]) {
-          const canAct = isPlayerOwnedByUser(currentPlayer, userId, ownership);
-          expect(canAct).toBe(userId === owner);
+        for (const userId of ['user-alice', 'user-bob', 'user-charlie']) {
+          const canAct = isPlayerOwnedByUser(currentPlayer, userId, ownership)
+          expect(canAct).toBe(userId === owner)
         }
       }
-    });
-  });
+    })
+  })
 
-  describe("Player filtering for UI display", () => {
-    let ownership: PlayerOwnershipMap;
+  describe('Player filtering for UI display', () => {
+    let ownership: PlayerOwnershipMap
 
     beforeEach(() => {
-      ownership = buildPlayerOwnershipFromRoomData(mockRoomData);
-    });
+      ownership = buildPlayerOwnershipFromRoomData(mockRoomData)
+    })
 
-    it("should filter to show only local players for current user", () => {
-      const alicePlayers = filterPlayersByOwner(
-        playerIds,
-        "user-alice",
-        ownership,
-      );
-      expect(alicePlayers).toEqual(["player-a1", "player-a2"]);
+    it('should filter to show only local players for current user', () => {
+      const alicePlayers = filterPlayersByOwner(playerIds, 'user-alice', ownership)
+      expect(alicePlayers).toEqual(['player-a1', 'player-a2'])
 
-      const bobPlayers = filterPlayersByOwner(playerIds, "user-bob", ownership);
-      expect(bobPlayers).toEqual(["player-b1"]);
+      const bobPlayers = filterPlayersByOwner(playerIds, 'user-bob', ownership)
+      expect(bobPlayers).toEqual(['player-b1'])
 
-      const charliePlayers = filterPlayersByOwner(
-        playerIds,
-        "user-charlie",
-        ownership,
-      );
-      expect(charliePlayers).toEqual(["player-c1", "player-c2", "player-c3"]);
-    });
+      const charliePlayers = filterPlayersByOwner(playerIds, 'user-charlie', ownership)
+      expect(charliePlayers).toEqual(['player-c1', 'player-c2', 'player-c3'])
+    })
 
-    it("should handle empty results for users not in game", () => {
-      const outsiderPlayers = filterPlayersByOwner(
-        playerIds,
-        "user-not-in-room",
-        ownership,
-      );
-      expect(outsiderPlayers).toEqual([]);
-    });
-  });
+    it('should handle empty results for users not in game', () => {
+      const outsiderPlayers = filterPlayersByOwner(playerIds, 'user-not-in-room', ownership)
+      expect(outsiderPlayers).toEqual([])
+    })
+  })
 
-  describe("Edge cases and error handling", () => {
-    it("should handle room with no players gracefully", () => {
+  describe('Edge cases and error handling', () => {
+    it('should handle room with no players gracefully', () => {
       const emptyRoomData: RoomData = {
         ...mockRoomData,
         memberPlayers: {},
-      };
+      }
 
-      const ownership = buildPlayerOwnershipFromRoomData(emptyRoomData);
-      expect(ownership).toEqual({});
+      const ownership = buildPlayerOwnershipFromRoomData(emptyRoomData)
+      expect(ownership).toEqual({})
 
-      const owners = getUniqueOwners(ownership);
-      expect(owners).toEqual([]);
-    });
+      const owners = getUniqueOwners(ownership)
+      expect(owners).toEqual([])
+    })
 
-    it("should handle single-player room", () => {
+    it('should handle single-player room', () => {
       const soloRoomData: RoomData = {
         ...mockRoomData,
         memberPlayers: {
-          "user-solo": [
-            { id: "player-solo", name: "Solo", emoji: "🚀", color: "#ff00ff" },
-          ],
+          'user-solo': [{ id: 'player-solo', name: 'Solo', emoji: '🚀', color: '#ff00ff' }],
         },
-      };
+      }
 
-      const ownership = buildPlayerOwnershipFromRoomData(soloRoomData);
-      expect(Object.keys(ownership)).toHaveLength(1);
-      expect(ownership["player-solo"]).toBe("user-solo");
-    });
+      const ownership = buildPlayerOwnershipFromRoomData(soloRoomData)
+      expect(Object.keys(ownership)).toHaveLength(1)
+      expect(ownership['player-solo']).toBe('user-solo')
+    })
 
-    it("should handle metadata building with missing player data", () => {
-      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData);
-      const partialPlayerIds = ["player-a1", "player-nonexistent", "player-b1"];
+    it('should handle metadata building with missing player data', () => {
+      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData)
+      const partialPlayerIds = ['player-a1', 'player-nonexistent', 'player-b1']
 
-      const metadata = buildPlayerMetadata(
-        partialPlayerIds,
-        ownership,
-        playersMap,
-      );
+      const metadata = buildPlayerMetadata(partialPlayerIds, ownership, playersMap)
 
-      expect(metadata["player-a1"]).toBeDefined();
-      expect(metadata["player-b1"]).toBeDefined();
-      expect(metadata["player-nonexistent"]).toBeUndefined();
-    });
+      expect(metadata['player-a1']).toBeDefined()
+      expect(metadata['player-b1']).toBeDefined()
+      expect(metadata['player-nonexistent']).toBeUndefined()
+    })
 
-    it("should use fallback userId when player not in ownership map", () => {
+    it('should use fallback userId when player not in ownership map', () => {
       const partialOwnership: PlayerOwnershipMap = {
-        "player-a1": "user-alice",
-      };
+        'player-a1': 'user-alice',
+      }
 
       const metadata = buildPlayerMetadata(
-        ["player-a1", "player-a2"],
+        ['player-a1', 'player-a2'],
         partialOwnership,
         playersMap,
-        "fallback-user",
-      );
+        'fallback-user'
+      )
 
-      expect(metadata["player-a1"].userId).toBe("user-alice");
-      expect(metadata["player-a2"].userId).toBe("fallback-user");
-    });
-  });
+      expect(metadata['player-a1'].userId).toBe('user-alice')
+      expect(metadata['player-a2'].userId).toBe('fallback-user')
+    })
+  })
 
-  describe("Real-world multiplayer scenarios", () => {
-    it("should handle player leaving mid-game", () => {
-      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData);
+  describe('Real-world multiplayer scenarios', () => {
+    it('should handle player leaving mid-game', () => {
+      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData)
 
       // Bob leaves, but his player data remains in game state
-      const remainingPlayerIds = playerIds.filter((id) => id !== "player-b1");
+      const remainingPlayerIds = playerIds.filter((id) => id !== 'player-b1')
 
       // Ownership map still has Bob's data
-      expect(ownership["player-b1"]).toBe("user-bob");
+      expect(ownership['player-b1']).toBe('user-bob')
 
       // But filtered lists exclude his players
-      const alicePlayers = filterPlayersByOwner(
-        remainingPlayerIds,
-        "user-alice",
-        ownership,
-      );
-      const bobPlayers = filterPlayersByOwner(
-        remainingPlayerIds,
-        "user-bob",
-        ownership,
-      );
+      const alicePlayers = filterPlayersByOwner(remainingPlayerIds, 'user-alice', ownership)
+      const bobPlayers = filterPlayersByOwner(remainingPlayerIds, 'user-bob', ownership)
 
-      expect(alicePlayers).toHaveLength(2);
-      expect(bobPlayers).toHaveLength(0); // Bob's player filtered out
-    });
+      expect(alicePlayers).toHaveLength(2)
+      expect(bobPlayers).toHaveLength(0) // Bob's player filtered out
+    })
 
-    it("should handle user with multiple active players in turn order", () => {
-      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData);
+    it('should handle user with multiple active players in turn order', () => {
+      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData)
 
       // Charlie has 3 players in rotation
-      const charliePlayers = ["player-c1", "player-c2", "player-c3"];
+      const charliePlayers = ['player-c1', 'player-c2', 'player-c3']
 
       for (const playerId of charliePlayers) {
-        expect(isPlayerOwnedByUser(playerId, "user-charlie", ownership)).toBe(
-          true,
-        );
-        expect(getPlayerOwner(playerId, ownership)).toBe("user-charlie");
+        expect(isPlayerOwnedByUser(playerId, 'user-charlie', ownership)).toBe(true)
+        expect(getPlayerOwner(playerId, ownership)).toBe('user-charlie')
       }
-    });
-  });
-});
+    })
+  })
+})
diff --git a/apps/web/src/lib/arcade/__tests__/player-ownership.test.ts b/apps/web/src/lib/arcade/__tests__/player-ownership.test.ts
index 0cd1b587..a59b0d36 100644
--- a/apps/web/src/lib/arcade/__tests__/player-ownership.test.ts
+++ b/apps/web/src/lib/arcade/__tests__/player-ownership.test.ts
@@ -2,8 +2,8 @@
  * Tests for player ownership utilities
  */
 
-import { describe, expect, it } from "vitest";
-import type { RoomData } from "@/hooks/useRoomData";
+import { describe, expect, it } from 'vitest'
+import type { RoomData } from '@/hooks/useRoomData'
 import {
   buildPlayerMetadata,
   buildPlayerOwnershipFromRoomData,
@@ -13,271 +13,236 @@ import {
   groupPlayersByOwner,
   isPlayerOwnedByUser,
   type PlayerOwnershipMap,
-} from "../player-ownership";
+} from '../player-ownership'
 
-describe("player-ownership utilities", () => {
+describe('player-ownership utilities', () => {
   // Sample data for tests
   const mockOwnershipMap: PlayerOwnershipMap = {
-    "player-1": "user-a",
-    "player-2": "user-a",
-    "player-3": "user-b",
-    "player-4": "user-c",
-  };
+    'player-1': 'user-a',
+    'player-2': 'user-a',
+    'player-3': 'user-b',
+    'player-4': 'user-c',
+  }
 
   const mockRoomData: RoomData = {
-    id: "room-123",
-    name: "Test Room",
-    code: "ABCD",
-    gameName: "memory-pairs",
+    id: 'room-123',
+    name: 'Test Room',
+    code: 'ABCD',
+    gameName: 'memory-pairs',
     members: [
       {
-        id: "member-1",
-        userId: "user-a",
-        displayName: "User A",
+        id: 'member-1',
+        userId: 'user-a',
+        displayName: 'User A',
         isOnline: true,
         isCreator: true,
       },
       {
-        id: "member-2",
-        userId: "user-b",
-        displayName: "User B",
+        id: 'member-2',
+        userId: 'user-b',
+        displayName: 'User B',
         isOnline: true,
         isCreator: false,
       },
     ],
     memberPlayers: {
-      "user-a": [
-        { id: "player-1", name: "Player 1", emoji: "🐶", color: "#ff0000" },
-        { id: "player-2", name: "Player 2", emoji: "🐱", color: "#00ff00" },
-      ],
-      "user-b": [
-        { id: "player-3", name: "Player 3", emoji: "🐭", color: "#0000ff" },
+      'user-a': [
+        { id: 'player-1', name: 'Player 1', emoji: '🐶', color: '#ff0000' },
+        { id: 'player-2', name: 'Player 2', emoji: '🐱', color: '#00ff00' },
       ],
+      'user-b': [{ id: 'player-3', name: 'Player 3', emoji: '🐭', color: '#0000ff' }],
     },
-  };
+  }
 
-  describe("buildPlayerOwnershipFromRoomData", () => {
-    it("should build ownership map from room data", () => {
-      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData);
+  describe('buildPlayerOwnershipFromRoomData', () => {
+    it('should build ownership map from room data', () => {
+      const ownership = buildPlayerOwnershipFromRoomData(mockRoomData)
 
       expect(ownership).toEqual({
-        "player-1": "user-a",
-        "player-2": "user-a",
-        "player-3": "user-b",
-      });
-    });
+        'player-1': 'user-a',
+        'player-2': 'user-a',
+        'player-3': 'user-b',
+      })
+    })
 
-    it("should return empty map for null room data", () => {
-      const ownership = buildPlayerOwnershipFromRoomData(null);
-      expect(ownership).toEqual({});
-    });
+    it('should return empty map for null room data', () => {
+      const ownership = buildPlayerOwnershipFromRoomData(null)
+      expect(ownership).toEqual({})
+    })
 
-    it("should return empty map for undefined room data", () => {
-      const ownership = buildPlayerOwnershipFromRoomData(undefined);
-      expect(ownership).toEqual({});
-    });
+    it('should return empty map for undefined room data', () => {
+      const ownership = buildPlayerOwnershipFromRoomData(undefined)
+      expect(ownership).toEqual({})
+    })
 
-    it("should return empty map when memberPlayers is missing", () => {
+    it('should return empty map when memberPlayers is missing', () => {
       const roomDataWithoutPlayers = {
         ...mockRoomData,
         memberPlayers: undefined as any,
-      };
-      const ownership = buildPlayerOwnershipFromRoomData(
-        roomDataWithoutPlayers,
-      );
-      expect(ownership).toEqual({});
-    });
-  });
+      }
+      const ownership = buildPlayerOwnershipFromRoomData(roomDataWithoutPlayers)
+      expect(ownership).toEqual({})
+    })
+  })
 
-  describe("isPlayerOwnedByUser", () => {
-    it("should return true when player belongs to user", () => {
-      expect(isPlayerOwnedByUser("player-1", "user-a", mockOwnershipMap)).toBe(
-        true,
-      );
-      expect(isPlayerOwnedByUser("player-2", "user-a", mockOwnershipMap)).toBe(
-        true,
-      );
-    });
+  describe('isPlayerOwnedByUser', () => {
+    it('should return true when player belongs to user', () => {
+      expect(isPlayerOwnedByUser('player-1', 'user-a', mockOwnershipMap)).toBe(true)
+      expect(isPlayerOwnedByUser('player-2', 'user-a', mockOwnershipMap)).toBe(true)
+    })
 
-    it("should return false when player does not belong to user", () => {
-      expect(isPlayerOwnedByUser("player-1", "user-b", mockOwnershipMap)).toBe(
-        false,
-      );
-      expect(isPlayerOwnedByUser("player-3", "user-a", mockOwnershipMap)).toBe(
-        false,
-      );
-    });
+    it('should return false when player does not belong to user', () => {
+      expect(isPlayerOwnedByUser('player-1', 'user-b', mockOwnershipMap)).toBe(false)
+      expect(isPlayerOwnedByUser('player-3', 'user-a', mockOwnershipMap)).toBe(false)
+    })
 
-    it("should return false for non-existent player", () => {
-      expect(
-        isPlayerOwnedByUser("player-999", "user-a", mockOwnershipMap),
-      ).toBe(false);
-    });
-  });
+    it('should return false for non-existent player', () => {
+      expect(isPlayerOwnedByUser('player-999', 'user-a', mockOwnershipMap)).toBe(false)
+    })
+  })
 
-  describe("getPlayerOwner", () => {
-    it("should return the owner user ID for a player", () => {
-      expect(getPlayerOwner("player-1", mockOwnershipMap)).toBe("user-a");
-      expect(getPlayerOwner("player-3", mockOwnershipMap)).toBe("user-b");
-      expect(getPlayerOwner("player-4", mockOwnershipMap)).toBe("user-c");
-    });
+  describe('getPlayerOwner', () => {
+    it('should return the owner user ID for a player', () => {
+      expect(getPlayerOwner('player-1', mockOwnershipMap)).toBe('user-a')
+      expect(getPlayerOwner('player-3', mockOwnershipMap)).toBe('user-b')
+      expect(getPlayerOwner('player-4', mockOwnershipMap)).toBe('user-c')
+    })
 
-    it("should return undefined for non-existent player", () => {
-      expect(getPlayerOwner("player-999", mockOwnershipMap)).toBeUndefined();
-    });
-  });
+    it('should return undefined for non-existent player', () => {
+      expect(getPlayerOwner('player-999', mockOwnershipMap)).toBeUndefined()
+    })
+  })
 
-  describe("buildPlayerMetadata", () => {
+  describe('buildPlayerMetadata', () => {
     const mockPlayersMap = new Map([
-      ["player-1", { name: "Dog", emoji: "🐶", color: "#ff0000" }],
-      ["player-2", { name: "Cat", emoji: "🐱", color: "#00ff00" }],
-      ["player-3", { name: "Mouse", emoji: "🐭", color: "#0000ff" }],
-    ]);
+      ['player-1', { name: 'Dog', emoji: '🐶', color: '#ff0000' }],
+      ['player-2', { name: 'Cat', emoji: '🐱', color: '#00ff00' }],
+      ['player-3', { name: 'Mouse', emoji: '🐭', color: '#0000ff' }],
+    ])
 
-    it("should build metadata with correct ownership", () => {
+    it('should build metadata with correct ownership', () => {
       const metadata = buildPlayerMetadata(
-        ["player-1", "player-2", "player-3"],
+        ['player-1', 'player-2', 'player-3'],
         mockOwnershipMap,
-        mockPlayersMap,
-      );
+        mockPlayersMap
+      )
 
       expect(metadata).toEqual({
-        "player-1": {
-          id: "player-1",
-          name: "Dog",
-          emoji: "🐶",
-          color: "#ff0000",
-          userId: "user-a",
+        'player-1': {
+          id: 'player-1',
+          name: 'Dog',
+          emoji: '🐶',
+          color: '#ff0000',
+          userId: 'user-a',
         },
-        "player-2": {
-          id: "player-2",
-          name: "Cat",
-          emoji: "🐱",
-          color: "#00ff00",
-          userId: "user-a",
+        'player-2': {
+          id: 'player-2',
+          name: 'Cat',
+          emoji: '🐱',
+          color: '#00ff00',
+          userId: 'user-a',
         },
-        "player-3": {
-          id: "player-3",
-          name: "Mouse",
-          emoji: "🐭",
-          color: "#0000ff",
-          userId: "user-b",
+        'player-3': {
+          id: 'player-3',
+          name: 'Mouse',
+          emoji: '🐭',
+          color: '#0000ff',
+          userId: 'user-b',
         },
-      });
-    });
+      })
+    })
 
-    it("should use fallback userId when player not in ownership map", () => {
+    it('should use fallback userId when player not in ownership map', () => {
+      const metadata = buildPlayerMetadata(['player-1'], {}, mockPlayersMap, 'fallback-user')
+
+      expect(metadata['player-1'].userId).toBe('fallback-user')
+    })
+
+    it('should skip players not in players map', () => {
       const metadata = buildPlayerMetadata(
-        ["player-1"],
-        {},
-        mockPlayersMap,
-        "fallback-user",
-      );
-
-      expect(metadata["player-1"].userId).toBe("fallback-user");
-    });
-
-    it("should skip players not in players map", () => {
-      const metadata = buildPlayerMetadata(
-        ["player-1", "player-999"],
+        ['player-1', 'player-999'],
         mockOwnershipMap,
-        mockPlayersMap,
-      );
+        mockPlayersMap
+      )
 
-      expect(metadata["player-1"]).toBeDefined();
-      expect(metadata["player-999"]).toBeUndefined();
-    });
-  });
+      expect(metadata['player-1']).toBeDefined()
+      expect(metadata['player-999']).toBeUndefined()
+    })
+  })
 
-  describe("filterPlayersByOwner", () => {
-    it("should return only players owned by specified user", () => {
-      const playerIds = ["player-1", "player-2", "player-3", "player-4"];
+  describe('filterPlayersByOwner', () => {
+    it('should return only players owned by specified user', () => {
+      const playerIds = ['player-1', 'player-2', 'player-3', 'player-4']
 
-      const userAPlayers = filterPlayersByOwner(
-        playerIds,
-        "user-a",
-        mockOwnershipMap,
-      );
-      expect(userAPlayers).toEqual(["player-1", "player-2"]);
+      const userAPlayers = filterPlayersByOwner(playerIds, 'user-a', mockOwnershipMap)
+      expect(userAPlayers).toEqual(['player-1', 'player-2'])
 
-      const userBPlayers = filterPlayersByOwner(
-        playerIds,
-        "user-b",
-        mockOwnershipMap,
-      );
-      expect(userBPlayers).toEqual(["player-3"]);
+      const userBPlayers = filterPlayersByOwner(playerIds, 'user-b', mockOwnershipMap)
+      expect(userBPlayers).toEqual(['player-3'])
 
-      const userCPlayers = filterPlayersByOwner(
-        playerIds,
-        "user-c",
-        mockOwnershipMap,
-      );
-      expect(userCPlayers).toEqual(["player-4"]);
-    });
+      const userCPlayers = filterPlayersByOwner(playerIds, 'user-c', mockOwnershipMap)
+      expect(userCPlayers).toEqual(['player-4'])
+    })
 
-    it("should return empty array when user owns no players", () => {
-      const playerIds = ["player-1", "player-2", "player-3"];
-      const result = filterPlayersByOwner(
-        playerIds,
-        "user-nonexistent",
-        mockOwnershipMap,
-      );
-      expect(result).toEqual([]);
-    });
+    it('should return empty array when user owns no players', () => {
+      const playerIds = ['player-1', 'player-2', 'player-3']
+      const result = filterPlayersByOwner(playerIds, 'user-nonexistent', mockOwnershipMap)
+      expect(result).toEqual([])
+    })
 
-    it("should return empty array for empty input", () => {
-      const result = filterPlayersByOwner([], "user-a", mockOwnershipMap);
-      expect(result).toEqual([]);
-    });
-  });
+    it('should return empty array for empty input', () => {
+      const result = filterPlayersByOwner([], 'user-a', mockOwnershipMap)
+      expect(result).toEqual([])
+    })
+  })
 
-  describe("getUniqueOwners", () => {
-    it("should return array of unique user IDs", () => {
-      const owners = getUniqueOwners(mockOwnershipMap);
-      expect(owners).toHaveLength(3);
-      expect(owners).toContain("user-a");
-      expect(owners).toContain("user-b");
-      expect(owners).toContain("user-c");
-    });
+  describe('getUniqueOwners', () => {
+    it('should return array of unique user IDs', () => {
+      const owners = getUniqueOwners(mockOwnershipMap)
+      expect(owners).toHaveLength(3)
+      expect(owners).toContain('user-a')
+      expect(owners).toContain('user-b')
+      expect(owners).toContain('user-c')
+    })
 
-    it("should return empty array for empty ownership map", () => {
-      const owners = getUniqueOwners({});
-      expect(owners).toEqual([]);
-    });
+    it('should return empty array for empty ownership map', () => {
+      const owners = getUniqueOwners({})
+      expect(owners).toEqual([])
+    })
 
-    it("should deduplicate user IDs", () => {
+    it('should deduplicate user IDs', () => {
       const ownership: PlayerOwnershipMap = {
-        "player-1": "user-a",
-        "player-2": "user-a",
-        "player-3": "user-a",
-      };
-      const owners = getUniqueOwners(ownership);
-      expect(owners).toEqual(["user-a"]);
-    });
-  });
+        'player-1': 'user-a',
+        'player-2': 'user-a',
+        'player-3': 'user-a',
+      }
+      const owners = getUniqueOwners(ownership)
+      expect(owners).toEqual(['user-a'])
+    })
+  })
 
-  describe("groupPlayersByOwner", () => {
-    it("should group players by their owner", () => {
-      const playerIds = ["player-1", "player-2", "player-3", "player-4"];
-      const groups = groupPlayersByOwner(playerIds, mockOwnershipMap);
+  describe('groupPlayersByOwner', () => {
+    it('should group players by their owner', () => {
+      const playerIds = ['player-1', 'player-2', 'player-3', 'player-4']
+      const groups = groupPlayersByOwner(playerIds, mockOwnershipMap)
 
-      expect(groups.size).toBe(3);
-      expect(groups.get("user-a")).toEqual(["player-1", "player-2"]);
-      expect(groups.get("user-b")).toEqual(["player-3"]);
-      expect(groups.get("user-c")).toEqual(["player-4"]);
-    });
+      expect(groups.size).toBe(3)
+      expect(groups.get('user-a')).toEqual(['player-1', 'player-2'])
+      expect(groups.get('user-b')).toEqual(['player-3'])
+      expect(groups.get('user-c')).toEqual(['player-4'])
+    })
 
-    it("should return empty map for empty input", () => {
-      const groups = groupPlayersByOwner([], mockOwnershipMap);
-      expect(groups.size).toBe(0);
-    });
+    it('should return empty map for empty input', () => {
+      const groups = groupPlayersByOwner([], mockOwnershipMap)
+      expect(groups.size).toBe(0)
+    })
 
-    it("should skip players not in ownership map", () => {
-      const playerIds = ["player-1", "player-999"];
-      const groups = groupPlayersByOwner(playerIds, mockOwnershipMap);
+    it('should skip players not in ownership map', () => {
+      const playerIds = ['player-1', 'player-999']
+      const groups = groupPlayersByOwner(playerIds, mockOwnershipMap)
 
-      expect(groups.size).toBe(1);
-      expect(groups.get("user-a")).toEqual(["player-1"]);
-    });
-  });
-});
+      expect(groups.size).toBe(1)
+      expect(groups.get('user-a')).toEqual(['player-1'])
+    })
+  })
+})
diff --git a/apps/web/src/lib/arcade/__tests__/room-invitations.test.ts b/apps/web/src/lib/arcade/__tests__/room-invitations.test.ts
index e9f01e1d..72940284 100644
--- a/apps/web/src/lib/arcade/__tests__/room-invitations.test.ts
+++ b/apps/web/src/lib/arcade/__tests__/room-invitations.test.ts
@@ -2,9 +2,9 @@
  * @vitest-environment node
  */
 
-import { eq } from "drizzle-orm";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { db, schema } from "@/db";
+import { eq } from 'drizzle-orm'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { db, schema } from '@/db'
 import {
   createInvitation,
   getUserPendingInvitations,
@@ -12,8 +12,8 @@ import {
   acceptInvitation,
   declineInvitation,
   cancelInvitation,
-} from "../room-invitations";
-import { createRoom } from "../room-manager";
+} from '../room-invitations'
+import { createRoom } from '../room-manager'
 
 /**
  * Room Invitations Unit Tests
@@ -24,324 +24,310 @@ import { createRoom } from "../room-manager";
  * - Invitation status transitions
  */
 
-describe("Room Invitations", () => {
-  let testUserId1: string;
-  let testUserId2: string;
-  let testGuestId1: string;
-  let testGuestId2: string;
-  let testRoomId: string;
+describe('Room Invitations', () => {
+  let testUserId1: string
+  let testUserId2: string
+  let testGuestId1: string
+  let testGuestId2: string
+  let testRoomId: string
 
   beforeEach(async () => {
     // Create test users
-    testGuestId1 = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-    testGuestId2 = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    testGuestId1 = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
+    testGuestId2 = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
 
-    const [user1] = await db
-      .insert(schema.users)
-      .values({ guestId: testGuestId1 })
-      .returning();
-    const [user2] = await db
-      .insert(schema.users)
-      .values({ guestId: testGuestId2 })
-      .returning();
+    const [user1] = await db.insert(schema.users).values({ guestId: testGuestId1 }).returning()
+    const [user2] = await db.insert(schema.users).values({ guestId: testGuestId2 }).returning()
 
-    testUserId1 = user1.id;
-    testUserId2 = user2.id;
+    testUserId1 = user1.id
+    testUserId2 = user2.id
 
     // Create test room
     const room = await createRoom({
-      name: "Test Room",
+      name: 'Test Room',
       createdBy: testGuestId1,
-      creatorName: "Host User",
-      gameName: "matching",
+      creatorName: 'Host User',
+      gameName: 'matching',
       gameConfig: {},
-      accessMode: "restricted",
-    });
-    testRoomId = room.id;
-  });
+      accessMode: 'restricted',
+    })
+    testRoomId = room.id
+  })
 
   afterEach(async () => {
     // Clean up invitations (should cascade, but be explicit)
-    await db
-      .delete(schema.roomInvitations)
-      .where(eq(schema.roomInvitations.roomId, testRoomId));
+    await db.delete(schema.roomInvitations).where(eq(schema.roomInvitations.roomId, testRoomId))
 
     // Clean up room
     if (testRoomId) {
-      await db
-        .delete(schema.arcadeRooms)
-        .where(eq(schema.arcadeRooms.id, testRoomId));
+      await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, testRoomId))
     }
 
     // Clean up users
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId1));
-    await db.delete(schema.users).where(eq(schema.users.id, testUserId2));
-  });
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId1))
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId2))
+  })
 
-  describe("Creating Invitations", () => {
-    it("creates a new invitation", async () => {
+  describe('Creating Invitations', () => {
+    it('creates a new invitation', async () => {
       const invitation = await createInvitation({
         roomId: testRoomId,
         userId: testUserId2,
-        userName: "Guest User",
+        userName: 'Guest User',
         invitedBy: testUserId1,
-        invitedByName: "Host User",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host User',
+        invitationType: 'manual',
+      })
 
-      expect(invitation).toBeDefined();
-      expect(invitation.roomId).toBe(testRoomId);
-      expect(invitation.userId).toBe(testUserId2);
-      expect(invitation.status).toBe("pending");
-      expect(invitation.invitationType).toBe("manual");
-    });
+      expect(invitation).toBeDefined()
+      expect(invitation.roomId).toBe(testRoomId)
+      expect(invitation.userId).toBe(testUserId2)
+      expect(invitation.status).toBe('pending')
+      expect(invitation.invitationType).toBe('manual')
+    })
 
-    it("updates existing invitation instead of creating duplicate", async () => {
+    it('updates existing invitation instead of creating duplicate', async () => {
       // Create first invitation
       const invitation1 = await createInvitation({
         roomId: testRoomId,
         userId: testUserId2,
-        userName: "Guest User",
+        userName: 'Guest User',
         invitedBy: testUserId1,
-        invitedByName: "Host User",
-        invitationType: "manual",
-        message: "First invite",
-      });
+        invitedByName: 'Host User',
+        invitationType: 'manual',
+        message: 'First invite',
+      })
 
       // Create second invitation for same user/room
       const invitation2 = await createInvitation({
         roomId: testRoomId,
         userId: testUserId2,
-        userName: "Guest User Updated",
+        userName: 'Guest User Updated',
         invitedBy: testUserId1,
-        invitedByName: "Host User",
-        invitationType: "manual",
-        message: "Second invite",
-      });
+        invitedByName: 'Host User',
+        invitationType: 'manual',
+        message: 'Second invite',
+      })
 
       // Should have same ID (updated, not created)
-      expect(invitation2.id).toBe(invitation1.id);
-      expect(invitation2.message).toBe("Second invite");
-      expect(invitation2.status).toBe("pending"); // Reset to pending
+      expect(invitation2.id).toBe(invitation1.id)
+      expect(invitation2.message).toBe('Second invite')
+      expect(invitation2.status).toBe('pending') // Reset to pending
 
       // Verify only one invitation exists
       const allInvitations = await db
         .select()
         .from(schema.roomInvitations)
-        .where(eq(schema.roomInvitations.userId, testUserId2));
+        .where(eq(schema.roomInvitations.userId, testUserId2))
 
-      expect(allInvitations).toHaveLength(1);
-    });
-  });
+      expect(allInvitations).toHaveLength(1)
+    })
+  })
 
-  describe("Accepting Invitations", () => {
-    it("marks invitation as accepted", async () => {
+  describe('Accepting Invitations', () => {
+    it('marks invitation as accepted', async () => {
       // Create invitation
       const invitation = await createInvitation({
         roomId: testRoomId,
         userId: testUserId2,
-        userName: "Guest User",
+        userName: 'Guest User',
         invitedBy: testUserId1,
-        invitedByName: "Host User",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host User',
+        invitationType: 'manual',
+      })
 
-      expect(invitation.status).toBe("pending");
+      expect(invitation.status).toBe('pending')
 
       // Accept invitation
-      const accepted = await acceptInvitation(invitation.id);
+      const accepted = await acceptInvitation(invitation.id)
 
-      expect(accepted.status).toBe("accepted");
-      expect(accepted.respondedAt).toBeDefined();
-      expect(accepted.respondedAt).toBeInstanceOf(Date);
-    });
+      expect(accepted.status).toBe('accepted')
+      expect(accepted.respondedAt).toBeDefined()
+      expect(accepted.respondedAt).toBeInstanceOf(Date)
+    })
 
-    it("removes invitation from pending list after acceptance", async () => {
+    it('removes invitation from pending list after acceptance', async () => {
       // Create invitation
       await createInvitation({
         roomId: testRoomId,
         userId: testUserId2,
-        userName: "Guest User",
+        userName: 'Guest User',
         invitedBy: testUserId1,
-        invitedByName: "Host User",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host User',
+        invitationType: 'manual',
+      })
 
       // Verify it's in pending list
-      let pending = await getUserPendingInvitations(testUserId2);
-      expect(pending).toHaveLength(1);
+      let pending = await getUserPendingInvitations(testUserId2)
+      expect(pending).toHaveLength(1)
 
       // Accept it
-      await acceptInvitation(pending[0].id);
+      await acceptInvitation(pending[0].id)
 
       // Verify it's no longer in pending list
-      pending = await getUserPendingInvitations(testUserId2);
-      expect(pending).toHaveLength(0);
-    });
+      pending = await getUserPendingInvitations(testUserId2)
+      expect(pending).toHaveLength(0)
+    })
 
-    it("BUG FIX: invitation stays pending if not explicitly accepted", async () => {
+    it('BUG FIX: invitation stays pending if not explicitly accepted', async () => {
       // This test verifies the bug we fixed
       const invitation = await createInvitation({
         roomId: testRoomId,
         userId: testUserId2,
-        userName: "Guest User",
+        userName: 'Guest User',
         invitedBy: testUserId1,
-        invitedByName: "Host User",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host User',
+        invitationType: 'manual',
+      })
 
       // Get invitation (simulating join API checking it)
-      const retrieved = await getInvitation(testRoomId, testUserId2);
-      expect(retrieved?.status).toBe("pending");
+      const retrieved = await getInvitation(testRoomId, testUserId2)
+      expect(retrieved?.status).toBe('pending')
 
       // WITHOUT calling acceptInvitation, invitation stays pending
-      const stillPending = await getInvitation(testRoomId, testUserId2);
-      expect(stillPending?.status).toBe("pending");
+      const stillPending = await getInvitation(testRoomId, testUserId2)
+      expect(stillPending?.status).toBe('pending')
 
       // This is the bug: user joined but invitation not marked accepted
       // Now verify the fix works
-      await acceptInvitation(invitation.id);
-      const nowAccepted = await getInvitation(testRoomId, testUserId2);
-      expect(nowAccepted?.status).toBe("accepted");
-    });
-  });
+      await acceptInvitation(invitation.id)
+      const nowAccepted = await getInvitation(testRoomId, testUserId2)
+      expect(nowAccepted?.status).toBe('accepted')
+    })
+  })
 
-  describe("Declining Invitations", () => {
-    it("marks invitation as declined", async () => {
+  describe('Declining Invitations', () => {
+    it('marks invitation as declined', async () => {
       const invitation = await createInvitation({
         roomId: testRoomId,
         userId: testUserId2,
-        userName: "Guest User",
+        userName: 'Guest User',
         invitedBy: testUserId1,
-        invitedByName: "Host User",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host User',
+        invitationType: 'manual',
+      })
 
-      const declined = await declineInvitation(invitation.id);
+      const declined = await declineInvitation(invitation.id)
 
-      expect(declined.status).toBe("declined");
-      expect(declined.respondedAt).toBeDefined();
-    });
+      expect(declined.status).toBe('declined')
+      expect(declined.respondedAt).toBeDefined()
+    })
 
-    it("removes invitation from pending list after declining", async () => {
+    it('removes invitation from pending list after declining', async () => {
       const invitation = await createInvitation({
         roomId: testRoomId,
         userId: testUserId2,
-        userName: "Guest User",
+        userName: 'Guest User',
         invitedBy: testUserId1,
-        invitedByName: "Host User",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host User',
+        invitationType: 'manual',
+      })
 
       // Decline
-      await declineInvitation(invitation.id);
+      await declineInvitation(invitation.id)
 
       // Verify no longer pending
-      const pending = await getUserPendingInvitations(testUserId2);
-      expect(pending).toHaveLength(0);
-    });
-  });
+      const pending = await getUserPendingInvitations(testUserId2)
+      expect(pending).toHaveLength(0)
+    })
+  })
 
-  describe("Canceling Invitations", () => {
-    it("deletes invitation completely", async () => {
+  describe('Canceling Invitations', () => {
+    it('deletes invitation completely', async () => {
       await createInvitation({
         roomId: testRoomId,
         userId: testUserId2,
-        userName: "Guest User",
+        userName: 'Guest User',
         invitedBy: testUserId1,
-        invitedByName: "Host User",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host User',
+        invitationType: 'manual',
+      })
 
       // Cancel
-      await cancelInvitation(testRoomId, testUserId2);
+      await cancelInvitation(testRoomId, testUserId2)
 
       // Verify deleted
-      const invitation = await getInvitation(testRoomId, testUserId2);
-      expect(invitation).toBeUndefined();
-    });
-  });
+      const invitation = await getInvitation(testRoomId, testUserId2)
+      expect(invitation).toBeUndefined()
+    })
+  })
 
-  describe("Retrieving Invitations", () => {
-    it("gets pending invitations for a user", async () => {
+  describe('Retrieving Invitations', () => {
+    it('gets pending invitations for a user', async () => {
       // Create invitations for multiple rooms
       const room2 = await createRoom({
-        name: "Room 2",
+        name: 'Room 2',
         createdBy: testGuestId1,
-        creatorName: "Host",
-        gameName: "matching",
+        creatorName: 'Host',
+        gameName: 'matching',
         gameConfig: {},
-        accessMode: "restricted",
-      });
+        accessMode: 'restricted',
+      })
 
       await createInvitation({
         roomId: testRoomId,
         userId: testUserId2,
-        userName: "Guest",
+        userName: 'Guest',
         invitedBy: testUserId1,
-        invitedByName: "Host",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host',
+        invitationType: 'manual',
+      })
 
       await createInvitation({
         roomId: room2.id,
         userId: testUserId2,
-        userName: "Guest",
+        userName: 'Guest',
         invitedBy: testUserId1,
-        invitedByName: "Host",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host',
+        invitationType: 'manual',
+      })
 
-      const pending = await getUserPendingInvitations(testUserId2);
-      expect(pending).toHaveLength(2);
+      const pending = await getUserPendingInvitations(testUserId2)
+      expect(pending).toHaveLength(2)
 
       // Clean up
-      await db
-        .delete(schema.arcadeRooms)
-        .where(eq(schema.arcadeRooms.id, room2.id));
-    });
+      await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, room2.id))
+    })
 
-    it("only returns pending invitations, not accepted/declined", async () => {
+    it('only returns pending invitations, not accepted/declined', async () => {
       const inv1 = await createInvitation({
         roomId: testRoomId,
         userId: testUserId2,
-        userName: "Guest",
+        userName: 'Guest',
         invitedBy: testUserId1,
-        invitedByName: "Host",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host',
+        invitationType: 'manual',
+      })
 
       // Create second room and invitation
       const room2 = await createRoom({
-        name: "Room 2",
+        name: 'Room 2',
         createdBy: testGuestId1,
-        creatorName: "Host",
-        gameName: "matching",
+        creatorName: 'Host',
+        gameName: 'matching',
         gameConfig: {},
-        accessMode: "restricted",
-      });
+        accessMode: 'restricted',
+      })
 
       const inv2 = await createInvitation({
         roomId: room2.id,
         userId: testUserId2,
-        userName: "Guest",
+        userName: 'Guest',
         invitedBy: testUserId1,
-        invitedByName: "Host",
-        invitationType: "manual",
-      });
+        invitedByName: 'Host',
+        invitationType: 'manual',
+      })
 
       // Accept first, decline second
-      await acceptInvitation(inv1.id);
-      await declineInvitation(inv2.id);
+      await acceptInvitation(inv1.id)
+      await declineInvitation(inv2.id)
 
       // Should have no pending
-      const pending = await getUserPendingInvitations(testUserId2);
-      expect(pending).toHaveLength(0);
+      const pending = await getUserPendingInvitations(testUserId2)
+      expect(pending).toHaveLength(0)
 
       // Clean up
-      await db
-        .delete(schema.arcadeRooms)
-        .where(eq(schema.arcadeRooms.id, room2.id));
-    });
-  });
-});
+      await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, room2.id))
+    })
+  })
+})
diff --git a/apps/web/src/lib/arcade/__tests__/room-manager.test.ts b/apps/web/src/lib/arcade/__tests__/room-manager.test.ts
index af479ca4..ed955f0b 100644
--- a/apps/web/src/lib/arcade/__tests__/room-manager.test.ts
+++ b/apps/web/src/lib/arcade/__tests__/room-manager.test.ts
@@ -1,5 +1,5 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { db, type schema } from "@/db";
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { db, type schema } from '@/db'
 import {
   cleanupExpiredRooms,
   createRoom,
@@ -11,11 +11,11 @@ import {
   touchRoom,
   updateRoom,
   type CreateRoomOptions,
-} from "../room-manager";
-import * as roomCode from "../room-code";
+} from '../room-manager'
+import * as roomCode from '../room-code'
 
 // Mock the database
-vi.mock("@/db", () => ({
+vi.mock('@/db', () => ({
   db: {
     query: {
       arcadeRooms: {
@@ -29,455 +29,448 @@ vi.mock("@/db", () => ({
   },
   schema: {
     arcadeRooms: {
-      id: "id",
-      code: "code",
-      name: "name",
-      gameName: "gameName",
-      accessMode: "accessMode",
-      password: "password",
-      status: "status",
-      lastActivity: "lastActivity",
+      id: 'id',
+      code: 'code',
+      name: 'name',
+      gameName: 'gameName',
+      accessMode: 'accessMode',
+      password: 'password',
+      status: 'status',
+      lastActivity: 'lastActivity',
     },
     arcadeSessions: {
-      userId: "userId",
-      roomId: "roomId",
+      userId: 'userId',
+      roomId: 'roomId',
     },
   },
-}));
+}))
 
 // Mock room-code module
-vi.mock("../room-code", () => ({
+vi.mock('../room-code', () => ({
   generateRoomCode: vi.fn(),
-}));
+}))
 
-describe("Room Manager", () => {
+describe('Room Manager', () => {
   const mockRoom: schema.ArcadeRoom = {
-    id: "room-123",
-    code: "ABC123",
-    name: "Test Room",
-    createdBy: "user-1",
-    creatorName: "Test User",
+    id: 'room-123',
+    code: 'ABC123',
+    name: 'Test Room',
+    createdBy: 'user-1',
+    creatorName: 'Test User',
     createdAt: new Date(),
     lastActivity: new Date(),
     ttlMinutes: 60,
-    accessMode: "open",
+    accessMode: 'open',
     password: null,
     displayPassword: null,
-    gameName: "matching",
+    gameName: 'matching',
     gameConfig: { difficulty: 6 },
-    status: "lobby",
+    status: 'lobby',
     currentSessionId: null,
     totalGamesPlayed: 0,
-  };
+  }
 
   beforeEach(() => {
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
-  describe("createRoom", () => {
-    it("creates a room with generated code", async () => {
+  describe('createRoom', () => {
+    it('creates a room with generated code', async () => {
       const options: CreateRoomOptions = {
-        name: "Test Room",
-        createdBy: "user-1",
-        creatorName: "Test User",
-        gameName: "matching",
+        name: 'Test Room',
+        createdBy: 'user-1',
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: { difficulty: 6 },
-      };
+      }
 
       // Mock code generation
-      vi.mocked(roomCode.generateRoomCode).mockReturnValue("ABC123");
+      vi.mocked(roomCode.generateRoomCode).mockReturnValue('ABC123')
 
       // Mock code uniqueness check
-      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(undefined);
+      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(undefined)
 
       // Mock insert
       const mockInsert = {
         values: vi.fn().mockReturnThis(),
         returning: vi.fn().mockResolvedValue([mockRoom]),
-      };
-      vi.mocked(db.insert).mockReturnValue(mockInsert as any);
+      }
+      vi.mocked(db.insert).mockReturnValue(mockInsert as any)
 
-      const room = await createRoom(options);
+      const room = await createRoom(options)
 
-      expect(room).toEqual(mockRoom);
-      expect(roomCode.generateRoomCode).toHaveBeenCalled();
-      expect(db.insert).toHaveBeenCalled();
-    });
+      expect(room).toEqual(mockRoom)
+      expect(roomCode.generateRoomCode).toHaveBeenCalled()
+      expect(db.insert).toHaveBeenCalled()
+    })
 
-    it("retries code generation on collision", async () => {
+    it('retries code generation on collision', async () => {
       const options: CreateRoomOptions = {
-        name: "Test Room",
-        createdBy: "user-1",
-        creatorName: "Test User",
-        gameName: "matching",
+        name: 'Test Room',
+        createdBy: 'user-1',
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: { difficulty: 6 },
-      };
+      }
 
       // First code collides, second is unique
       vi.mocked(roomCode.generateRoomCode)
-        .mockReturnValueOnce("ABC123")
-        .mockReturnValueOnce("XYZ789");
+        .mockReturnValueOnce('ABC123')
+        .mockReturnValueOnce('XYZ789')
 
       // First check finds collision, second check is unique
       vi.mocked(db.query.arcadeRooms.findFirst)
         .mockResolvedValueOnce(mockRoom) // Collision
-        .mockResolvedValueOnce(undefined); // Unique
+        .mockResolvedValueOnce(undefined) // Unique
 
       const mockInsert = {
         values: vi.fn().mockReturnThis(),
-        returning: vi.fn().mockResolvedValue([{ ...mockRoom, code: "XYZ789" }]),
-      };
-      vi.mocked(db.insert).mockReturnValue(mockInsert as any);
+        returning: vi.fn().mockResolvedValue([{ ...mockRoom, code: 'XYZ789' }]),
+      }
+      vi.mocked(db.insert).mockReturnValue(mockInsert as any)
 
-      const room = await createRoom(options);
+      const room = await createRoom(options)
 
-      expect(room.code).toBe("XYZ789");
-      expect(roomCode.generateRoomCode).toHaveBeenCalledTimes(2);
-    });
+      expect(room.code).toBe('XYZ789')
+      expect(roomCode.generateRoomCode).toHaveBeenCalledTimes(2)
+    })
 
-    it("throws error after max collision attempts", async () => {
+    it('throws error after max collision attempts', async () => {
       const options: CreateRoomOptions = {
-        name: "Test Room",
-        createdBy: "user-1",
-        creatorName: "Test User",
-        gameName: "matching",
+        name: 'Test Room',
+        createdBy: 'user-1',
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: { difficulty: 6 },
-      };
+      }
 
       // All codes collide
-      vi.mocked(roomCode.generateRoomCode).mockReturnValue("ABC123");
-      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(mockRoom);
+      vi.mocked(roomCode.generateRoomCode).mockReturnValue('ABC123')
+      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(mockRoom)
 
-      await expect(createRoom(options)).rejects.toThrow(
-        "Failed to generate unique room code",
-      );
-    });
+      await expect(createRoom(options)).rejects.toThrow('Failed to generate unique room code')
+    })
 
-    it("sets default TTL to 60 minutes", async () => {
+    it('sets default TTL to 60 minutes', async () => {
       const options: CreateRoomOptions = {
-        name: "Test Room",
-        createdBy: "user-1",
-        creatorName: "Test User",
-        gameName: "matching",
+        name: 'Test Room',
+        createdBy: 'user-1',
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: { difficulty: 6 },
-      };
+      }
 
-      vi.mocked(roomCode.generateRoomCode).mockReturnValue("ABC123");
-      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(undefined);
+      vi.mocked(roomCode.generateRoomCode).mockReturnValue('ABC123')
+      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(undefined)
 
       const mockInsert = {
         values: vi.fn().mockReturnThis(),
         returning: vi.fn().mockResolvedValue([mockRoom]),
-      };
-      vi.mocked(db.insert).mockReturnValue(mockInsert as any);
+      }
+      vi.mocked(db.insert).mockReturnValue(mockInsert as any)
 
-      const room = await createRoom(options);
+      const room = await createRoom(options)
 
-      expect(room.ttlMinutes).toBe(60);
-    });
+      expect(room.ttlMinutes).toBe(60)
+    })
 
-    it("respects custom TTL", async () => {
+    it('respects custom TTL', async () => {
       const options: CreateRoomOptions = {
-        name: "Test Room",
-        createdBy: "user-1",
-        creatorName: "Test User",
-        gameName: "matching",
+        name: 'Test Room',
+        createdBy: 'user-1',
+        creatorName: 'Test User',
+        gameName: 'matching',
         gameConfig: { difficulty: 6 },
         ttlMinutes: 120,
-      };
+      }
 
-      vi.mocked(roomCode.generateRoomCode).mockReturnValue("ABC123");
-      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(undefined);
+      vi.mocked(roomCode.generateRoomCode).mockReturnValue('ABC123')
+      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(undefined)
 
       const mockInsert = {
         values: vi.fn().mockReturnThis(),
-        returning: vi
-          .fn()
-          .mockResolvedValue([{ ...mockRoom, ttlMinutes: 120 }]),
-      };
-      vi.mocked(db.insert).mockReturnValue(mockInsert as any);
+        returning: vi.fn().mockResolvedValue([{ ...mockRoom, ttlMinutes: 120 }]),
+      }
+      vi.mocked(db.insert).mockReturnValue(mockInsert as any)
 
-      const room = await createRoom(options);
+      const room = await createRoom(options)
 
-      expect(room.ttlMinutes).toBe(120);
-    });
-  });
+      expect(room.ttlMinutes).toBe(120)
+    })
+  })
 
-  describe("getRoomById", () => {
-    it("returns room when found", async () => {
-      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(mockRoom);
+  describe('getRoomById', () => {
+    it('returns room when found', async () => {
+      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(mockRoom)
 
-      const room = await getRoomById("room-123");
+      const room = await getRoomById('room-123')
 
-      expect(room).toEqual(mockRoom);
-      expect(db.query.arcadeRooms.findFirst).toHaveBeenCalled();
-    });
+      expect(room).toEqual(mockRoom)
+      expect(db.query.arcadeRooms.findFirst).toHaveBeenCalled()
+    })
 
-    it("returns undefined when not found", async () => {
-      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(undefined);
+    it('returns undefined when not found', async () => {
+      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(undefined)
 
-      const room = await getRoomById("nonexistent");
+      const room = await getRoomById('nonexistent')
 
-      expect(room).toBeUndefined();
-    });
-  });
+      expect(room).toBeUndefined()
+    })
+  })
 
-  describe("getRoomByCode", () => {
-    it("returns room when found", async () => {
-      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(mockRoom);
+  describe('getRoomByCode', () => {
+    it('returns room when found', async () => {
+      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(mockRoom)
 
-      const room = await getRoomByCode("ABC123");
+      const room = await getRoomByCode('ABC123')
 
-      expect(room).toEqual(mockRoom);
-    });
+      expect(room).toEqual(mockRoom)
+    })
 
-    it("converts code to uppercase", async () => {
-      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(mockRoom);
+    it('converts code to uppercase', async () => {
+      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(mockRoom)
 
-      await getRoomByCode("abc123");
+      await getRoomByCode('abc123')
 
       // Check that the where clause used uppercase
-      const call = vi.mocked(db.query.arcadeRooms.findFirst).mock.calls[0][0];
-      expect(call).toBeDefined();
-    });
+      const call = vi.mocked(db.query.arcadeRooms.findFirst).mock.calls[0][0]
+      expect(call).toBeDefined()
+    })
 
-    it("returns undefined when not found", async () => {
-      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(undefined);
+    it('returns undefined when not found', async () => {
+      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(undefined)
 
-      const room = await getRoomByCode("NONEXISTENT");
+      const room = await getRoomByCode('NONEXISTENT')
 
-      expect(room).toBeUndefined();
-    });
-  });
+      expect(room).toBeUndefined()
+    })
+  })
 
-  describe("updateRoom", () => {
-    it("updates room and returns updated data", async () => {
-      const updates = { name: "Updated Room", status: "playing" as const };
+  describe('updateRoom', () => {
+    it('updates room and returns updated data', async () => {
+      const updates = { name: 'Updated Room', status: 'playing' as const }
 
       const mockUpdate = {
         set: vi.fn().mockReturnThis(),
         where: vi.fn().mockReturnThis(),
         returning: vi.fn().mockResolvedValue([{ ...mockRoom, ...updates }]),
-      };
-      vi.mocked(db.update).mockReturnValue(mockUpdate as any);
+      }
+      vi.mocked(db.update).mockReturnValue(mockUpdate as any)
 
-      const room = await updateRoom("room-123", updates);
+      const room = await updateRoom('room-123', updates)
 
-      expect(room?.name).toBe("Updated Room");
-      expect(room?.status).toBe("playing");
-      expect(db.update).toHaveBeenCalled();
-    });
+      expect(room?.name).toBe('Updated Room')
+      expect(room?.status).toBe('playing')
+      expect(db.update).toHaveBeenCalled()
+    })
 
-    it("updates lastActivity timestamp", async () => {
+    it('updates lastActivity timestamp', async () => {
       const mockUpdate = {
         set: vi.fn().mockReturnThis(),
         where: vi.fn().mockReturnThis(),
         returning: vi.fn().mockResolvedValue([mockRoom]),
-      };
-      vi.mocked(db.update).mockReturnValue(mockUpdate as any);
+      }
+      vi.mocked(db.update).mockReturnValue(mockUpdate as any)
 
-      await updateRoom("room-123", { name: "Updated" });
+      await updateRoom('room-123', { name: 'Updated' })
 
-      const setCall = mockUpdate.set.mock.calls[0][0];
-      expect(setCall).toHaveProperty("lastActivity");
-      expect(setCall.lastActivity).toBeInstanceOf(Date);
-    });
-  });
+      const setCall = mockUpdate.set.mock.calls[0][0]
+      expect(setCall).toHaveProperty('lastActivity')
+      expect(setCall.lastActivity).toBeInstanceOf(Date)
+    })
+  })
 
-  describe("touchRoom", () => {
-    it("updates lastActivity timestamp", async () => {
+  describe('touchRoom', () => {
+    it('updates lastActivity timestamp', async () => {
       const mockUpdate = {
         set: vi.fn().mockReturnThis(),
         where: vi.fn().mockReturnThis(),
-      };
-      vi.mocked(db.update).mockReturnValue(mockUpdate as any);
+      }
+      vi.mocked(db.update).mockReturnValue(mockUpdate as any)
 
-      await touchRoom("room-123");
+      await touchRoom('room-123')
 
-      expect(db.update).toHaveBeenCalled();
-      const setCall = mockUpdate.set.mock.calls[0][0];
-      expect(setCall).toHaveProperty("lastActivity");
-      expect(setCall.lastActivity).toBeInstanceOf(Date);
-    });
-  });
+      expect(db.update).toHaveBeenCalled()
+      const setCall = mockUpdate.set.mock.calls[0][0]
+      expect(setCall).toHaveProperty('lastActivity')
+      expect(setCall.lastActivity).toBeInstanceOf(Date)
+    })
+  })
 
-  describe("deleteRoom", () => {
-    it("deletes room from database", async () => {
+  describe('deleteRoom', () => {
+    it('deletes room from database', async () => {
       const mockDelete = {
         where: vi.fn().mockReturnThis(),
-      };
-      vi.mocked(db.delete).mockReturnValue(mockDelete as any);
+      }
+      vi.mocked(db.delete).mockReturnValue(mockDelete as any)
 
-      await deleteRoom("room-123");
+      await deleteRoom('room-123')
 
-      expect(db.delete).toHaveBeenCalled();
-    });
-  });
+      expect(db.delete).toHaveBeenCalled()
+    })
+  })
 
-  describe("listActiveRooms", () => {
-    const activeRooms = [
-      mockRoom,
-      { ...mockRoom, id: "room-456", name: "Another Room" },
-    ];
+  describe('listActiveRooms', () => {
+    const activeRooms = [mockRoom, { ...mockRoom, id: 'room-456', name: 'Another Room' }]
 
-    it("returns active rooms", async () => {
-      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue(activeRooms);
+    it('returns active rooms', async () => {
+      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue(activeRooms)
 
-      const rooms = await listActiveRooms();
+      const rooms = await listActiveRooms()
 
-      expect(rooms).toEqual(activeRooms);
-      expect(rooms).toHaveLength(2);
-    });
+      expect(rooms).toEqual(activeRooms)
+      expect(rooms).toHaveLength(2)
+    })
 
-    it("filters by game name when provided", async () => {
-      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue([mockRoom]);
+    it('filters by game name when provided', async () => {
+      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue([mockRoom])
 
-      const rooms = await listActiveRooms("matching");
+      const rooms = await listActiveRooms('matching')
 
-      expect(rooms).toHaveLength(1);
-      expect(db.query.arcadeRooms.findMany).toHaveBeenCalled();
-    });
+      expect(rooms).toHaveLength(1)
+      expect(db.query.arcadeRooms.findMany).toHaveBeenCalled()
+    })
 
-    it("only includes open and password-protected rooms", async () => {
-      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue(activeRooms);
+    it('only includes open and password-protected rooms', async () => {
+      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue(activeRooms)
 
-      await listActiveRooms();
+      await listActiveRooms()
 
       // Verify the where clause filters by accessMode
-      const call = vi.mocked(db.query.arcadeRooms.findMany).mock.calls[0][0];
-      expect(call).toBeDefined();
-    });
+      const call = vi.mocked(db.query.arcadeRooms.findMany).mock.calls[0][0]
+      expect(call).toBeDefined()
+    })
 
-    it("limits results to 50 rooms", async () => {
-      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue(activeRooms);
+    it('limits results to 50 rooms', async () => {
+      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue(activeRooms)
 
-      await listActiveRooms();
+      await listActiveRooms()
 
-      const call = vi.mocked(db.query.arcadeRooms.findMany).mock.calls[0][0];
-      expect(call?.limit).toBe(50);
-    });
-  });
+      const call = vi.mocked(db.query.arcadeRooms.findMany).mock.calls[0][0]
+      expect(call?.limit).toBe(50)
+    })
+  })
 
-  describe("cleanupExpiredRooms", () => {
-    it("deletes expired rooms", async () => {
-      const now = new Date();
+  describe('cleanupExpiredRooms', () => {
+    it('deletes expired rooms', async () => {
+      const now = new Date()
       const expiredRoom = {
         ...mockRoom,
         lastActivity: new Date(now.getTime() - 2 * 60 * 60 * 1000), // 2 hours ago
         ttlMinutes: 60, // 1 hour TTL = expired
-      };
+      }
 
-      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue([expiredRoom]);
+      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue([expiredRoom])
 
       const mockUpdate = {
         set: vi.fn().mockReturnThis(),
         where: vi.fn().mockReturnThis(),
-      };
-      vi.mocked(db.update).mockReturnValue(mockUpdate as any);
+      }
+      vi.mocked(db.update).mockReturnValue(mockUpdate as any)
 
       const mockDelete = {
         where: vi.fn().mockReturnThis(),
-      };
-      vi.mocked(db.delete).mockReturnValue(mockDelete as any);
+      }
+      vi.mocked(db.delete).mockReturnValue(mockDelete as any)
 
-      const count = await cleanupExpiredRooms();
+      const count = await cleanupExpiredRooms()
 
-      expect(count).toBe(1);
-      expect(db.update).toHaveBeenCalled(); // Should clear roomId from sessions first
-      expect(db.delete).toHaveBeenCalled();
-    });
+      expect(count).toBe(1)
+      expect(db.update).toHaveBeenCalled() // Should clear roomId from sessions first
+      expect(db.delete).toHaveBeenCalled()
+    })
 
-    it("does not delete active rooms", async () => {
-      const now = new Date();
+    it('does not delete active rooms', async () => {
+      const now = new Date()
       const activeRoom = {
         ...mockRoom,
         lastActivity: new Date(now.getTime() - 30 * 60 * 1000), // 30 min ago
         ttlMinutes: 60, // 1 hour TTL = still active
-      };
+      }
 
-      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue([activeRoom]);
+      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue([activeRoom])
 
-      const count = await cleanupExpiredRooms();
+      const count = await cleanupExpiredRooms()
 
-      expect(count).toBe(0);
-      expect(db.delete).not.toHaveBeenCalled();
-    });
+      expect(count).toBe(0)
+      expect(db.delete).not.toHaveBeenCalled()
+    })
 
-    it("handles mixed expired and active rooms", async () => {
-      const now = new Date();
+    it('handles mixed expired and active rooms', async () => {
+      const now = new Date()
       const mockUpdate = {
         set: vi.fn().mockReturnThis(),
         where: vi.fn().mockReturnThis(),
-      };
-      vi.mocked(db.update).mockReturnValue(mockUpdate as any);
+      }
+      vi.mocked(db.update).mockReturnValue(mockUpdate as any)
 
       const rooms = [
         {
           ...mockRoom,
-          id: "expired-1",
+          id: 'expired-1',
           lastActivity: new Date(now.getTime() - 2 * 60 * 60 * 1000),
           ttlMinutes: 60,
         },
         {
           ...mockRoom,
-          id: "active-1",
+          id: 'active-1',
           lastActivity: new Date(now.getTime() - 30 * 60 * 1000),
           ttlMinutes: 60,
         },
         {
           ...mockRoom,
-          id: "expired-2",
+          id: 'expired-2',
           lastActivity: new Date(now.getTime() - 3 * 60 * 60 * 1000),
           ttlMinutes: 120,
         },
-      ];
+      ]
 
-      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue(rooms);
+      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue(rooms)
 
       const mockDelete = {
         where: vi.fn().mockReturnThis(),
-      };
-      vi.mocked(db.delete).mockReturnValue(mockDelete as any);
+      }
+      vi.mocked(db.delete).mockReturnValue(mockDelete as any)
 
-      const count = await cleanupExpiredRooms();
+      const count = await cleanupExpiredRooms()
 
-      expect(count).toBe(2); // Only 2 expired rooms
-      expect(db.delete).toHaveBeenCalled();
-    });
+      expect(count).toBe(2) // Only 2 expired rooms
+      expect(db.delete).toHaveBeenCalled()
+    })
 
-    it("returns 0 when no rooms exist", async () => {
-      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue([]);
+    it('returns 0 when no rooms exist', async () => {
+      vi.mocked(db.query.arcadeRooms.findMany).mockResolvedValue([])
 
-      const count = await cleanupExpiredRooms();
+      const count = await cleanupExpiredRooms()
 
-      expect(count).toBe(0);
-      expect(db.delete).not.toHaveBeenCalled();
-    });
-  });
+      expect(count).toBe(0)
+      expect(db.delete).not.toHaveBeenCalled()
+    })
+  })
 
-  describe("isRoomCreator", () => {
-    it("returns true for room creator", async () => {
-      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(mockRoom);
+  describe('isRoomCreator', () => {
+    it('returns true for room creator', async () => {
+      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(mockRoom)
 
-      const isCreator = await isRoomCreator("room-123", "user-1");
+      const isCreator = await isRoomCreator('room-123', 'user-1')
 
-      expect(isCreator).toBe(true);
-    });
+      expect(isCreator).toBe(true)
+    })
 
-    it("returns false for non-creator", async () => {
-      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(mockRoom);
+    it('returns false for non-creator', async () => {
+      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(mockRoom)
 
-      const isCreator = await isRoomCreator("room-123", "user-2");
+      const isCreator = await isRoomCreator('room-123', 'user-2')
 
-      expect(isCreator).toBe(false);
-    });
+      expect(isCreator).toBe(false)
+    })
 
-    it("returns false when room not found", async () => {
-      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(undefined);
+    it('returns false when room not found', async () => {
+      vi.mocked(db.query.arcadeRooms.findFirst).mockResolvedValue(undefined)
 
-      const isCreator = await isRoomCreator("nonexistent", "user-1");
+      const isCreator = await isRoomCreator('nonexistent', 'user-1')
 
-      expect(isCreator).toBe(false);
-    });
-  });
-});
+      expect(isCreator).toBe(false)
+    })
+  })
+})
diff --git a/apps/web/src/lib/arcade/__tests__/room-membership.test.ts b/apps/web/src/lib/arcade/__tests__/room-membership.test.ts
index d5d6a3e4..341d47e7 100644
--- a/apps/web/src/lib/arcade/__tests__/room-membership.test.ts
+++ b/apps/web/src/lib/arcade/__tests__/room-membership.test.ts
@@ -1,5 +1,5 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { db, type schema } from "@/db";
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { db, type schema } from '@/db'
 import {
   addRoomMember,
   getOnlineMemberCount,
@@ -13,10 +13,10 @@ import {
   setMemberOnline,
   touchMember,
   type AddMemberOptions,
-} from "../room-membership";
+} from '../room-membership'
 
 // Mock the database
-vi.mock("@/db", () => ({
+vi.mock('@/db', () => ({
   db: {
     query: {
       roomMembers: {
@@ -30,359 +30,353 @@ vi.mock("@/db", () => ({
   },
   schema: {
     roomMembers: {
-      id: "id",
-      roomId: "roomId",
-      userId: "userId",
-      isOnline: "isOnline",
-      joinedAt: "joinedAt",
+      id: 'id',
+      roomId: 'roomId',
+      userId: 'userId',
+      isOnline: 'isOnline',
+      joinedAt: 'joinedAt',
     },
   },
-}));
+}))
 
-describe("Room Membership", () => {
+describe('Room Membership', () => {
   const mockMember: schema.RoomMember = {
-    id: "member-123",
-    roomId: "room-123",
-    userId: "user-1",
-    displayName: "Test User",
+    id: 'member-123',
+    roomId: 'room-123',
+    userId: 'user-1',
+    displayName: 'Test User',
     isCreator: false,
     joinedAt: new Date(),
     lastSeen: new Date(),
     isOnline: true,
-  };
+  }
 
   beforeEach(() => {
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
-  describe("addRoomMember", () => {
-    it("adds new member to room", async () => {
+  describe('addRoomMember', () => {
+    it('adds new member to room', async () => {
       const options: AddMemberOptions = {
-        roomId: "room-123",
-        userId: "user-1",
-        displayName: "Test User",
-      };
+        roomId: 'room-123',
+        userId: 'user-1',
+        displayName: 'Test User',
+      }
 
       // No existing member
-      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(undefined);
+      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(undefined)
 
       // Mock insert
       const mockInsert = {
         values: vi.fn().mockReturnThis(),
         returning: vi.fn().mockResolvedValue([mockMember]),
-      };
-      vi.mocked(db.insert).mockReturnValue(mockInsert as any);
+      }
+      vi.mocked(db.insert).mockReturnValue(mockInsert as any)
 
       // Mock getUserRooms to return empty array (no existing rooms)
-      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue([]);
+      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue([])
 
-      const result = await addRoomMember(options);
+      const result = await addRoomMember(options)
 
-      expect(result.member).toEqual(mockMember);
-      expect(result.autoLeaveResult).toBeUndefined();
-      expect(db.insert).toHaveBeenCalled();
-    });
+      expect(result.member).toEqual(mockMember)
+      expect(result.autoLeaveResult).toBeUndefined()
+      expect(db.insert).toHaveBeenCalled()
+    })
 
-    it("updates existing member instead of creating duplicate", async () => {
+    it('updates existing member instead of creating duplicate', async () => {
       const options: AddMemberOptions = {
-        roomId: "room-123",
-        userId: "user-1",
-        displayName: "Test User",
-      };
+        roomId: 'room-123',
+        userId: 'user-1',
+        displayName: 'Test User',
+      }
 
       // Existing member found
-      const existingMember = { ...mockMember, isOnline: false };
-      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(
-        existingMember,
-      );
+      const existingMember = { ...mockMember, isOnline: false }
+      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(existingMember)
 
       // Mock update
       const mockUpdate = {
         set: vi.fn().mockReturnThis(),
         where: vi.fn().mockReturnThis(),
-        returning: vi
-          .fn()
-          .mockResolvedValue([{ ...existingMember, isOnline: true }]),
-      };
-      vi.mocked(db.update).mockReturnValue(mockUpdate as any);
+        returning: vi.fn().mockResolvedValue([{ ...existingMember, isOnline: true }]),
+      }
+      vi.mocked(db.update).mockReturnValue(mockUpdate as any)
 
-      const result = await addRoomMember(options);
+      const result = await addRoomMember(options)
 
-      expect(result.member.isOnline).toBe(true);
-      expect(result.autoLeaveResult).toBeUndefined();
-      expect(db.update).toHaveBeenCalled();
-      expect(db.insert).not.toHaveBeenCalled();
-    });
+      expect(result.member.isOnline).toBe(true)
+      expect(result.autoLeaveResult).toBeUndefined()
+      expect(db.update).toHaveBeenCalled()
+      expect(db.insert).not.toHaveBeenCalled()
+    })
 
-    it("sets isCreator flag when specified", async () => {
+    it('sets isCreator flag when specified', async () => {
       const options: AddMemberOptions = {
-        roomId: "room-123",
-        userId: "user-1",
-        displayName: "Test User",
+        roomId: 'room-123',
+        userId: 'user-1',
+        displayName: 'Test User',
         isCreator: true,
-      };
+      }
 
-      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(undefined);
+      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(undefined)
 
       const mockInsert = {
         values: vi.fn().mockReturnThis(),
-        returning: vi
-          .fn()
-          .mockResolvedValue([{ ...mockMember, isCreator: true }]),
-      };
-      vi.mocked(db.insert).mockReturnValue(mockInsert as any);
+        returning: vi.fn().mockResolvedValue([{ ...mockMember, isCreator: true }]),
+      }
+      vi.mocked(db.insert).mockReturnValue(mockInsert as any)
 
       // Mock getUserRooms to return empty array
-      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue([]);
+      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue([])
 
-      const result = await addRoomMember(options);
+      const result = await addRoomMember(options)
 
-      expect(result.member.isCreator).toBe(true);
-    });
+      expect(result.member.isCreator).toBe(true)
+    })
 
-    it("sets isOnline to true by default", async () => {
+    it('sets isOnline to true by default', async () => {
       const options: AddMemberOptions = {
-        roomId: "room-123",
-        userId: "user-1",
-        displayName: "Test User",
-      };
+        roomId: 'room-123',
+        userId: 'user-1',
+        displayName: 'Test User',
+      }
 
-      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(undefined);
+      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(undefined)
 
       const mockInsert = {
         values: vi.fn().mockReturnThis(),
         returning: vi.fn().mockResolvedValue([mockMember]),
-      };
-      vi.mocked(db.insert).mockReturnValue(mockInsert as any);
+      }
+      vi.mocked(db.insert).mockReturnValue(mockInsert as any)
 
       // Mock getUserRooms to return empty array
-      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue([]);
+      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue([])
 
-      const result = await addRoomMember(options);
+      const result = await addRoomMember(options)
 
-      expect(result.member.isOnline).toBe(true);
-    });
-  });
+      expect(result.member.isOnline).toBe(true)
+    })
+  })
 
-  describe("getRoomMember", () => {
-    it("returns member when found", async () => {
-      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(mockMember);
+  describe('getRoomMember', () => {
+    it('returns member when found', async () => {
+      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(mockMember)
 
-      const member = await getRoomMember("room-123", "user-1");
+      const member = await getRoomMember('room-123', 'user-1')
 
-      expect(member).toEqual(mockMember);
-    });
+      expect(member).toEqual(mockMember)
+    })
 
-    it("returns undefined when not found", async () => {
-      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(undefined);
+    it('returns undefined when not found', async () => {
+      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(undefined)
 
-      const member = await getRoomMember("room-123", "user-999");
+      const member = await getRoomMember('room-123', 'user-999')
 
-      expect(member).toBeUndefined();
-    });
-  });
+      expect(member).toBeUndefined()
+    })
+  })
 
-  describe("getRoomMembers", () => {
+  describe('getRoomMembers', () => {
     const members = [
       mockMember,
       {
         ...mockMember,
-        id: "member-456",
-        userId: "user-2",
-        displayName: "User 2",
+        id: 'member-456',
+        userId: 'user-2',
+        displayName: 'User 2',
       },
-    ];
+    ]
 
-    it("returns all members in room", async () => {
-      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue(members);
+    it('returns all members in room', async () => {
+      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue(members)
 
-      const result = await getRoomMembers("room-123");
+      const result = await getRoomMembers('room-123')
 
-      expect(result).toEqual(members);
-      expect(result).toHaveLength(2);
-    });
+      expect(result).toEqual(members)
+      expect(result).toHaveLength(2)
+    })
 
-    it("returns empty array when no members", async () => {
-      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue([]);
+    it('returns empty array when no members', async () => {
+      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue([])
 
-      const result = await getRoomMembers("room-123");
+      const result = await getRoomMembers('room-123')
 
-      expect(result).toEqual([]);
-    });
-  });
+      expect(result).toEqual([])
+    })
+  })
 
-  describe("getOnlineRoomMembers", () => {
+  describe('getOnlineRoomMembers', () => {
     const onlineMembers = [
       mockMember,
-      { ...mockMember, id: "member-456", userId: "user-2", isOnline: true },
-    ];
+      { ...mockMember, id: 'member-456', userId: 'user-2', isOnline: true },
+    ]
 
-    it("returns only online members", async () => {
-      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue(onlineMembers);
+    it('returns only online members', async () => {
+      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue(onlineMembers)
 
-      const result = await getOnlineRoomMembers("room-123");
+      const result = await getOnlineRoomMembers('room-123')
 
-      expect(result).toEqual(onlineMembers);
-      expect(result.every((m) => m.isOnline)).toBe(true);
-    });
+      expect(result).toEqual(onlineMembers)
+      expect(result.every((m) => m.isOnline)).toBe(true)
+    })
 
-    it("returns empty array when no online members", async () => {
-      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue([]);
+    it('returns empty array when no online members', async () => {
+      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue([])
 
-      const result = await getOnlineRoomMembers("room-123");
+      const result = await getOnlineRoomMembers('room-123')
 
-      expect(result).toEqual([]);
-    });
-  });
+      expect(result).toEqual([])
+    })
+  })
 
-  describe("setMemberOnline", () => {
-    it("updates member online status to true", async () => {
+  describe('setMemberOnline', () => {
+    it('updates member online status to true', async () => {
       const mockUpdate = {
         set: vi.fn().mockReturnThis(),
         where: vi.fn().mockReturnThis(),
-      };
-      vi.mocked(db.update).mockReturnValue(mockUpdate as any);
+      }
+      vi.mocked(db.update).mockReturnValue(mockUpdate as any)
 
-      await setMemberOnline("room-123", "user-1", true);
+      await setMemberOnline('room-123', 'user-1', true)
 
-      expect(db.update).toHaveBeenCalled();
-      const setCall = mockUpdate.set.mock.calls[0][0];
-      expect(setCall.isOnline).toBe(true);
-      expect(setCall.lastSeen).toBeInstanceOf(Date);
-    });
+      expect(db.update).toHaveBeenCalled()
+      const setCall = mockUpdate.set.mock.calls[0][0]
+      expect(setCall.isOnline).toBe(true)
+      expect(setCall.lastSeen).toBeInstanceOf(Date)
+    })
 
-    it("updates member online status to false", async () => {
+    it('updates member online status to false', async () => {
       const mockUpdate = {
         set: vi.fn().mockReturnThis(),
         where: vi.fn().mockReturnThis(),
-      };
-      vi.mocked(db.update).mockReturnValue(mockUpdate as any);
+      }
+      vi.mocked(db.update).mockReturnValue(mockUpdate as any)
 
-      await setMemberOnline("room-123", "user-1", false);
+      await setMemberOnline('room-123', 'user-1', false)
 
-      const setCall = mockUpdate.set.mock.calls[0][0];
-      expect(setCall.isOnline).toBe(false);
-    });
+      const setCall = mockUpdate.set.mock.calls[0][0]
+      expect(setCall.isOnline).toBe(false)
+    })
 
-    it("updates lastSeen timestamp", async () => {
+    it('updates lastSeen timestamp', async () => {
       const mockUpdate = {
         set: vi.fn().mockReturnThis(),
         where: vi.fn().mockReturnThis(),
-      };
-      vi.mocked(db.update).mockReturnValue(mockUpdate as any);
+      }
+      vi.mocked(db.update).mockReturnValue(mockUpdate as any)
 
-      await setMemberOnline("room-123", "user-1", true);
+      await setMemberOnline('room-123', 'user-1', true)
 
-      const setCall = mockUpdate.set.mock.calls[0][0];
-      expect(setCall.lastSeen).toBeInstanceOf(Date);
-    });
-  });
+      const setCall = mockUpdate.set.mock.calls[0][0]
+      expect(setCall.lastSeen).toBeInstanceOf(Date)
+    })
+  })
 
-  describe("touchMember", () => {
-    it("updates lastSeen timestamp", async () => {
+  describe('touchMember', () => {
+    it('updates lastSeen timestamp', async () => {
       const mockUpdate = {
         set: vi.fn().mockReturnThis(),
         where: vi.fn().mockReturnThis(),
-      };
-      vi.mocked(db.update).mockReturnValue(mockUpdate as any);
+      }
+      vi.mocked(db.update).mockReturnValue(mockUpdate as any)
 
-      await touchMember("room-123", "user-1");
+      await touchMember('room-123', 'user-1')
 
-      expect(db.update).toHaveBeenCalled();
-      const setCall = mockUpdate.set.mock.calls[0][0];
-      expect(setCall.lastSeen).toBeInstanceOf(Date);
-    });
-  });
+      expect(db.update).toHaveBeenCalled()
+      const setCall = mockUpdate.set.mock.calls[0][0]
+      expect(setCall.lastSeen).toBeInstanceOf(Date)
+    })
+  })
 
-  describe("removeMember", () => {
-    it("removes member from room", async () => {
+  describe('removeMember', () => {
+    it('removes member from room', async () => {
       const mockDelete = {
         where: vi.fn().mockReturnThis(),
-      };
-      vi.mocked(db.delete).mockReturnValue(mockDelete as any);
+      }
+      vi.mocked(db.delete).mockReturnValue(mockDelete as any)
 
-      await removeMember("room-123", "user-1");
+      await removeMember('room-123', 'user-1')
 
-      expect(db.delete).toHaveBeenCalled();
-    });
-  });
+      expect(db.delete).toHaveBeenCalled()
+    })
+  })
 
-  describe("removeAllMembers", () => {
-    it("removes all members from room", async () => {
+  describe('removeAllMembers', () => {
+    it('removes all members from room', async () => {
       const mockDelete = {
         where: vi.fn().mockReturnThis(),
-      };
-      vi.mocked(db.delete).mockReturnValue(mockDelete as any);
+      }
+      vi.mocked(db.delete).mockReturnValue(mockDelete as any)
 
-      await removeAllMembers("room-123");
+      await removeAllMembers('room-123')
 
-      expect(db.delete).toHaveBeenCalled();
-    });
-  });
+      expect(db.delete).toHaveBeenCalled()
+    })
+  })
 
-  describe("getOnlineMemberCount", () => {
-    it("returns count of online members", async () => {
+  describe('getOnlineMemberCount', () => {
+    it('returns count of online members', async () => {
       const onlineMembers = [
         mockMember,
-        { ...mockMember, id: "member-456", userId: "user-2" },
-        { ...mockMember, id: "member-789", userId: "user-3" },
-      ];
+        { ...mockMember, id: 'member-456', userId: 'user-2' },
+        { ...mockMember, id: 'member-789', userId: 'user-3' },
+      ]
 
-      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue(onlineMembers);
+      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue(onlineMembers)
 
-      const count = await getOnlineMemberCount("room-123");
+      const count = await getOnlineMemberCount('room-123')
 
-      expect(count).toBe(3);
-    });
+      expect(count).toBe(3)
+    })
 
-    it("returns 0 when no online members", async () => {
-      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue([]);
+    it('returns 0 when no online members', async () => {
+      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue([])
 
-      const count = await getOnlineMemberCount("room-123");
+      const count = await getOnlineMemberCount('room-123')
 
-      expect(count).toBe(0);
-    });
-  });
+      expect(count).toBe(0)
+    })
+  })
 
-  describe("isMember", () => {
-    it("returns true when user is member", async () => {
-      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(mockMember);
+  describe('isMember', () => {
+    it('returns true when user is member', async () => {
+      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(mockMember)
 
-      const result = await isMember("room-123", "user-1");
+      const result = await isMember('room-123', 'user-1')
 
-      expect(result).toBe(true);
-    });
+      expect(result).toBe(true)
+    })
 
-    it("returns false when user is not member", async () => {
-      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(undefined);
+    it('returns false when user is not member', async () => {
+      vi.mocked(db.query.roomMembers.findFirst).mockResolvedValue(undefined)
 
-      const result = await isMember("room-123", "user-999");
+      const result = await isMember('room-123', 'user-999')
 
-      expect(result).toBe(false);
-    });
-  });
+      expect(result).toBe(false)
+    })
+  })
 
-  describe("getUserRooms", () => {
-    it("returns list of room IDs user is member of", async () => {
+  describe('getUserRooms', () => {
+    it('returns list of room IDs user is member of', async () => {
       const memberships = [
-        { ...mockMember, roomId: "room-1" },
-        { ...mockMember, roomId: "room-2" },
-        { ...mockMember, roomId: "room-3" },
-      ];
+        { ...mockMember, roomId: 'room-1' },
+        { ...mockMember, roomId: 'room-2' },
+        { ...mockMember, roomId: 'room-3' },
+      ]
 
-      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue(memberships);
+      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue(memberships)
 
-      const rooms = await getUserRooms("user-1");
+      const rooms = await getUserRooms('user-1')
 
-      expect(rooms).toEqual(["room-1", "room-2", "room-3"]);
-    });
+      expect(rooms).toEqual(['room-1', 'room-2', 'room-3'])
+    })
 
-    it("returns empty array when user has no rooms", async () => {
-      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue([]);
+    it('returns empty array when user has no rooms', async () => {
+      vi.mocked(db.query.roomMembers.findMany).mockResolvedValue([])
 
-      const rooms = await getUserRooms("user-1");
+      const rooms = await getUserRooms('user-1')
 
-      expect(rooms).toEqual([]);
-    });
-  });
-});
+      expect(rooms).toEqual([])
+    })
+  })
+})
diff --git a/apps/web/src/lib/arcade/__tests__/session-manager.test.ts b/apps/web/src/lib/arcade/__tests__/session-manager.test.ts
index dd099ce8..8f14368e 100644
--- a/apps/web/src/lib/arcade/__tests__/session-manager.test.ts
+++ b/apps/web/src/lib/arcade/__tests__/session-manager.test.ts
@@ -1,16 +1,16 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { db } from "@/db";
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { db } from '@/db'
 import {
   applyGameMove,
   createArcadeSession,
   deleteArcadeSession,
   getArcadeSession,
   updateSessionActivity,
-} from "../session-manager";
-import type { GameMove } from "../validation";
+} from '../session-manager'
+import type { GameMove } from '../validation'
 
 // Mock the database
-vi.mock("@/db", () => ({
+vi.mock('@/db', () => ({
   db: {
     query: {
       users: {
@@ -45,11 +45,11 @@ vi.mock("@/db", () => ({
     users: { guestId: {}, id: {} },
     arcadeSessions: { userId: {} },
   },
-}));
+}))
 
 // Mock the validation module
-vi.mock("../validation", async () => {
-  const actual = await vi.importActual("../validation");
+vi.mock('../validation', async () => {
+  const actual = await vi.importActual('../validation')
   return {
     ...actual,
     getValidator: vi.fn(() => ({
@@ -59,12 +59,12 @@ vi.mock("../validation", async () => {
       })),
       getInitialState: vi.fn(),
     })),
-  };
-});
+  }
+})
 
-describe("session-manager", () => {
-  const mockGuestId = "149e3e7e-4006-4a17-9f9f-28b0ec188c28";
-  const mockUserId = "m2rb9gjhhqp2fky171quf1lj";
+describe('session-manager', () => {
+  const mockGuestId = '149e3e7e-4006-4a17-9f9f-28b0ec188c28'
+  const mockUserId = 'm2rb9gjhhqp2fky171quf1lj'
   const mockUser = {
     id: mockUserId,
     guestId: mockGuestId,
@@ -72,16 +72,16 @@ describe("session-manager", () => {
     createdAt: new Date(),
     upgradedAt: null,
     email: null,
-  };
+  }
 
   beforeEach(() => {
-    vi.clearAllMocks();
-  });
+    vi.clearAllMocks()
+  })
 
-  describe("createArcadeSession", () => {
-    it("should look up user by guestId and use the database user.id for FK", async () => {
+  describe('createArcadeSession', () => {
+    it('should look up user by guestId and use the database user.id for FK', async () => {
       // Mock user lookup
-      vi.mocked(db.query.users.findFirst).mockResolvedValue(mockUser);
+      vi.mocked(db.query.users.findFirst).mockResolvedValue(mockUser)
 
       // Mock session creation
       const mockInsert = vi.fn(() => ({
@@ -89,90 +89,90 @@ describe("session-manager", () => {
           returning: vi.fn().mockResolvedValue([
             {
               userId: mockUserId, // Should use database ID, not guestId
-              currentGame: "matching",
+              currentGame: 'matching',
               gameState: {},
               version: 1,
             },
           ]),
         })),
-      }));
-      vi.mocked(db.insert).mockImplementation(mockInsert as any);
+      }))
+      vi.mocked(db.insert).mockImplementation(mockInsert as any)
 
       await createArcadeSession({
         userId: mockGuestId, // Passing guestId
-        gameName: "matching",
-        gameUrl: "/arcade/matching",
+        gameName: 'matching',
+        gameUrl: '/arcade/matching',
         initialState: {},
-        activePlayers: ["1"],
-        roomId: "test-room-id",
-      });
+        activePlayers: ['1'],
+        roomId: 'test-room-id',
+      })
 
       // Verify user lookup by guestId
       expect(db.query.users.findFirst).toHaveBeenCalledWith(
         expect.objectContaining({
           where: expect.anything(),
-        }),
-      );
+        })
+      )
 
       // Verify session uses database user.id
-      const insertCall = mockInsert.mock.results[0].value;
-      const valuesCall = insertCall.values.mock.results[0].value;
-      const returningCall = valuesCall.returning;
+      const insertCall = mockInsert.mock.results[0].value
+      const valuesCall = insertCall.values.mock.results[0].value
+      const returningCall = valuesCall.returning
 
-      expect(returningCall).toHaveBeenCalled();
-    });
+      expect(returningCall).toHaveBeenCalled()
+    })
 
-    it("should create new user if guestId not found", async () => {
+    it('should create new user if guestId not found', async () => {
       // Mock user not found
-      vi.mocked(db.query.users.findFirst).mockResolvedValue(undefined);
+      vi.mocked(db.query.users.findFirst).mockResolvedValue(undefined)
 
-      const newUser = { ...mockUser, id: "new-user-id" };
+      const newUser = { ...mockUser, id: 'new-user-id' }
 
       // Mock user creation
       const mockInsertUser = vi.fn(() => ({
         values: vi.fn(() => ({
           returning: vi.fn().mockResolvedValue([newUser]),
         })),
-      }));
+      }))
 
       // Mock session creation
       const mockInsertSession = vi.fn(() => ({
         values: vi.fn(() => ({
           returning: vi.fn().mockResolvedValue([
             {
-              userId: "new-user-id",
-              currentGame: "matching",
+              userId: 'new-user-id',
+              currentGame: 'matching',
               gameState: {},
               version: 1,
             },
           ]),
         })),
-      }));
+      }))
 
-      let insertCallCount = 0;
+      let insertCallCount = 0
       vi.mocked(db.insert).mockImplementation((() => {
-        insertCallCount++;
-        return insertCallCount === 1 ? mockInsertUser() : mockInsertSession();
-      }) as any);
+        insertCallCount++
+        return insertCallCount === 1 ? mockInsertUser() : mockInsertSession()
+      }) as any)
 
       await createArcadeSession({
         userId: mockGuestId,
-        gameName: "matching",
-        gameUrl: "/arcade/matching",
+        gameName: 'matching',
+        gameUrl: '/arcade/matching',
         initialState: {},
-        activePlayers: ["1"],
-        roomId: "test-room-id",
-      });
+        activePlayers: ['1'],
+        roomId: 'test-room-id',
+      })
 
       // Verify user was created
-      expect(db.insert).toHaveBeenCalledTimes(2); // user + session
-    });
-  });
+      expect(db.insert).toHaveBeenCalledTimes(2) // user + session
+    })
+  })
 
-  describe("getArcadeSession", () => {
-    it("should translate guestId to user.id before querying", async () => {
+  describe('getArcadeSession', () => {
+    it('should translate guestId to user.id before querying', async () => {
       // Mock user lookup
-      vi.mocked(db.query.users.findFirst).mockResolvedValue(mockUser);
+      vi.mocked(db.query.users.findFirst).mockResolvedValue(mockUser)
 
       // Mock session query
       vi.mocked(db.select).mockReturnValue({
@@ -181,7 +181,7 @@ describe("session-manager", () => {
             limit: vi.fn().mockResolvedValue([
               {
                 userId: mockUserId,
-                currentGame: "matching",
+                currentGame: 'matching',
                 gameState: {},
                 version: 1,
                 expiresAt: new Date(Date.now() + 1000000),
@@ -190,44 +190,44 @@ describe("session-manager", () => {
             ]),
           }),
         }),
-      } as any);
+      } as any)
 
-      const session = await getArcadeSession(mockGuestId);
+      const session = await getArcadeSession(mockGuestId)
 
       // Verify user lookup
-      expect(db.query.users.findFirst).toHaveBeenCalled();
+      expect(db.query.users.findFirst).toHaveBeenCalled()
 
       // Verify session was found
-      expect(session).toBeDefined();
-      expect(session?.userId).toBe(mockUserId);
-    });
+      expect(session).toBeDefined()
+      expect(session?.userId).toBe(mockUserId)
+    })
 
-    it("should return undefined if user not found", async () => {
-      vi.mocked(db.query.users.findFirst).mockResolvedValue(undefined);
+    it('should return undefined if user not found', async () => {
+      vi.mocked(db.query.users.findFirst).mockResolvedValue(undefined)
 
-      const session = await getArcadeSession(mockGuestId);
+      const session = await getArcadeSession(mockGuestId)
 
-      expect(session).toBeUndefined();
-    });
-  });
+      expect(session).toBeUndefined()
+    })
+  })
 
-  describe("applyGameMove", () => {
+  describe('applyGameMove', () => {
     const mockSession = {
       userId: mockUserId,
-      currentGame: "matching" as const,
+      currentGame: 'matching' as const,
       gameState: { flippedCards: [] },
       version: 1,
       isActive: true,
       expiresAt: new Date(Date.now() + 1000000),
       startedAt: new Date(),
       lastActivityAt: new Date(),
-      gameUrl: "/arcade/matching",
+      gameUrl: '/arcade/matching',
       activePlayers: [1] as any,
-    };
+    }
 
-    it("should use session.userId (database ID) for update WHERE clause", async () => {
+    it('should use session.userId (database ID) for update WHERE clause', async () => {
       // Mock user lookup
-      vi.mocked(db.query.users.findFirst).mockResolvedValue(mockUser);
+      vi.mocked(db.query.users.findFirst).mockResolvedValue(mockUser)
 
       // Mock session query
       vi.mocked(db.select).mockReturnValue({
@@ -236,7 +236,7 @@ describe("session-manager", () => {
             limit: vi.fn().mockResolvedValue([mockSession]),
           }),
         }),
-      } as any);
+      } as any)
 
       // Mock update with proper chain
       const mockReturning = vi.fn().mockResolvedValue([
@@ -244,104 +244,104 @@ describe("session-manager", () => {
           ...mockSession,
           version: 2,
         },
-      ]);
+      ])
       const mockWhere = vi.fn().mockReturnValue({
         returning: mockReturning,
-      });
+      })
       const mockSet = vi.fn().mockReturnValue({
         where: mockWhere,
-      });
+      })
 
       vi.mocked(db.update).mockReturnValue({
         set: mockSet,
-      } as any);
+      } as any)
 
       const move: GameMove = {
-        type: "FLIP_CARD",
-        data: { cardId: "1" },
-        playerId: "1",
+        type: 'FLIP_CARD',
+        data: { cardId: '1' },
+        playerId: '1',
         userId: mockUserId,
         timestamp: Date.now(),
-      };
+      }
 
-      await applyGameMove(mockGuestId, move);
+      await applyGameMove(mockGuestId, move)
 
       // Verify the chain was called
-      expect(mockSet).toHaveBeenCalled();
-      expect(mockWhere).toHaveBeenCalled();
-      expect(mockReturning).toHaveBeenCalled();
-    });
-  });
+      expect(mockSet).toHaveBeenCalled()
+      expect(mockWhere).toHaveBeenCalled()
+      expect(mockReturning).toHaveBeenCalled()
+    })
+  })
 
-  describe("deleteArcadeSession", () => {
-    it("should translate guestId to user.id before deleting", async () => {
+  describe('deleteArcadeSession', () => {
+    it('should translate guestId to user.id before deleting', async () => {
       // Mock user lookup
-      vi.mocked(db.query.users.findFirst).mockResolvedValue(mockUser);
+      vi.mocked(db.query.users.findFirst).mockResolvedValue(mockUser)
 
-      const mockWhere = vi.fn();
+      const mockWhere = vi.fn()
       vi.mocked(db.delete).mockReturnValue({
         where: mockWhere,
-      } as any);
+      } as any)
 
-      await deleteArcadeSession(mockGuestId);
+      await deleteArcadeSession(mockGuestId)
 
       // Verify user lookup happened
-      expect(db.query.users.findFirst).toHaveBeenCalled();
+      expect(db.query.users.findFirst).toHaveBeenCalled()
 
       // Verify delete was called
-      expect(mockWhere).toHaveBeenCalled();
-    });
+      expect(mockWhere).toHaveBeenCalled()
+    })
 
-    it("should do nothing if user not found", async () => {
-      vi.mocked(db.query.users.findFirst).mockResolvedValue(undefined);
+    it('should do nothing if user not found', async () => {
+      vi.mocked(db.query.users.findFirst).mockResolvedValue(undefined)
 
-      const mockWhere = vi.fn();
+      const mockWhere = vi.fn()
       vi.mocked(db.delete).mockReturnValue({
         where: mockWhere,
-      } as any);
+      } as any)
 
-      await deleteArcadeSession(mockGuestId);
+      await deleteArcadeSession(mockGuestId)
 
       // Verify delete was NOT called
-      expect(mockWhere).not.toHaveBeenCalled();
-    });
-  });
+      expect(mockWhere).not.toHaveBeenCalled()
+    })
+  })
 
-  describe("updateSessionActivity", () => {
-    it("should translate guestId to user.id before updating", async () => {
+  describe('updateSessionActivity', () => {
+    it('should translate guestId to user.id before updating', async () => {
       // Mock user lookup
-      vi.mocked(db.query.users.findFirst).mockResolvedValue(mockUser);
+      vi.mocked(db.query.users.findFirst).mockResolvedValue(mockUser)
 
-      const mockWhere = vi.fn();
+      const mockWhere = vi.fn()
       vi.mocked(db.update).mockReturnValue({
         set: vi.fn().mockReturnValue({
           where: mockWhere,
         }),
-      } as any);
+      } as any)
 
-      await updateSessionActivity(mockGuestId);
+      await updateSessionActivity(mockGuestId)
 
       // Verify user lookup happened
-      expect(db.query.users.findFirst).toHaveBeenCalled();
+      expect(db.query.users.findFirst).toHaveBeenCalled()
 
       // Verify update was called
-      expect(mockWhere).toHaveBeenCalled();
-    });
+      expect(mockWhere).toHaveBeenCalled()
+    })
 
-    it("should do nothing if user not found", async () => {
-      vi.mocked(db.query.users.findFirst).mockResolvedValue(undefined);
+    it('should do nothing if user not found', async () => {
+      vi.mocked(db.query.users.findFirst).mockResolvedValue(undefined)
 
-      const mockWhere = vi.fn();
+      const mockWhere = vi.fn()
       vi.mocked(db.update).mockReturnValue({
         set: vi.fn().mockReturnValue({
           where: mockWhere,
         }),
-      } as any);
+      } as any)
 
-      await updateSessionActivity(mockGuestId);
+      await updateSessionActivity(mockGuestId)
 
       // Verify update was NOT called
-      expect(mockWhere).not.toHaveBeenCalled();
-    });
-  });
-});
+      expect(mockWhere).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/apps/web/src/lib/arcade/error-handling.ts b/apps/web/src/lib/arcade/error-handling.ts
index cb920aa6..5daeff56 100644
--- a/apps/web/src/lib/arcade/error-handling.ts
+++ b/apps/web/src/lib/arcade/error-handling.ts
@@ -3,137 +3,128 @@
  * Provides user-friendly error messages, retry logic, and recovery suggestions
  */
 
-import type { GameMove } from "@/lib/arcade/validation";
+import type { GameMove } from '@/lib/arcade/validation'
 
-export type ErrorSeverity = "info" | "warning" | "error" | "fatal";
+export type ErrorSeverity = 'info' | 'warning' | 'error' | 'fatal'
 export type ErrorCategory =
-  | "version-conflict"
-  | "permission"
-  | "validation"
-  | "network"
-  | "game-rule"
-  | "unknown";
+  | 'version-conflict'
+  | 'permission'
+  | 'validation'
+  | 'network'
+  | 'game-rule'
+  | 'unknown'
 
 export interface EnhancedError {
-  category: ErrorCategory;
-  severity: ErrorSeverity;
-  userMessage: string; // User-friendly message
-  technicalMessage: string; // For console/debugging
-  autoRetry: boolean; // Is this being auto-retried?
-  retryCount?: number; // Current retry attempt
-  suggestion?: string; // What the user should do
-  recoverable: boolean; // Can the user recover from this?
+  category: ErrorCategory
+  severity: ErrorSeverity
+  userMessage: string // User-friendly message
+  technicalMessage: string // For console/debugging
+  autoRetry: boolean // Is this being auto-retried?
+  retryCount?: number // Current retry attempt
+  suggestion?: string // What the user should do
+  recoverable: boolean // Can the user recover from this?
 }
 
 export interface RetryState {
-  isRetrying: boolean;
-  retryCount: number;
-  move: GameMove | null;
-  timestamp: number | null;
+  isRetrying: boolean
+  retryCount: number
+  move: GameMove | null
+  timestamp: number | null
 }
 
 /**
  * Parse raw error messages into enhanced error objects
  */
-export function parseError(
-  error: string,
-  move?: GameMove,
-  retryCount?: number,
-): EnhancedError {
+export function parseError(error: string, move?: GameMove, retryCount?: number): EnhancedError {
   // Version conflict errors
-  if (
-    error.includes("version conflict") ||
-    error.includes("Version conflict")
-  ) {
+  if (error.includes('version conflict') || error.includes('Version conflict')) {
     return {
-      category: "version-conflict",
-      severity: retryCount && retryCount > 3 ? "warning" : "info",
+      category: 'version-conflict',
+      severity: retryCount && retryCount > 3 ? 'warning' : 'info',
       userMessage:
         retryCount && retryCount > 2
-          ? "Multiple players are making moves quickly, still syncing..."
-          : "Another player made a move, syncing...",
-      technicalMessage: `Version conflict on ${move?.type || "unknown move"}`,
+          ? 'Multiple players are making moves quickly, still syncing...'
+          : 'Another player made a move, syncing...',
+      technicalMessage: `Version conflict on ${move?.type || 'unknown move'}`,
       autoRetry: true,
       retryCount,
       suggestion:
-        retryCount && retryCount > 4
-          ? "Wait a moment for the game to stabilize"
-          : undefined,
+        retryCount && retryCount > 4 ? 'Wait a moment for the game to stabilize' : undefined,
       recoverable: true,
-    };
+    }
   }
 
   // Permission errors (403)
-  if (error.includes("Only the host") || error.includes("403")) {
+  if (error.includes('Only the host') || error.includes('403')) {
     return {
-      category: "permission",
-      severity: "warning",
-      userMessage: "Only the room host can change this setting",
+      category: 'permission',
+      severity: 'warning',
+      userMessage: 'Only the room host can change this setting',
       technicalMessage: `403 Forbidden: ${error}`,
       autoRetry: false,
-      suggestion: "Ask the host to make this change",
+      suggestion: 'Ask the host to make this change',
       recoverable: false,
-    };
+    }
   }
 
   // Network errors
   if (
-    error.includes("network") ||
-    error.includes("Network") ||
-    error.includes("timeout") ||
-    error.includes("fetch")
+    error.includes('network') ||
+    error.includes('Network') ||
+    error.includes('timeout') ||
+    error.includes('fetch')
   ) {
     return {
-      category: "network",
-      severity: "error",
-      userMessage: "Network connection issue",
+      category: 'network',
+      severity: 'error',
+      userMessage: 'Network connection issue',
       technicalMessage: error,
       autoRetry: false,
-      suggestion: "Check your internet connection",
+      suggestion: 'Check your internet connection',
       recoverable: true,
-    };
+    }
   }
 
   // Validation/game rule errors (from validator)
   if (
-    error.includes("Invalid") ||
-    error.includes("cannot") ||
-    error.includes("not allowed") ||
-    error.includes("must")
+    error.includes('Invalid') ||
+    error.includes('cannot') ||
+    error.includes('not allowed') ||
+    error.includes('must')
   ) {
     return {
-      category: "game-rule",
-      severity: "warning",
+      category: 'game-rule',
+      severity: 'warning',
       userMessage: error, // Validator messages are already user-friendly
       technicalMessage: error,
       autoRetry: false,
       recoverable: true,
-    };
+    }
   }
 
   // Not in room
-  if (error.includes("not in this room")) {
+  if (error.includes('not in this room')) {
     return {
-      category: "permission",
-      severity: "error",
-      userMessage: "You are not in this room",
+      category: 'permission',
+      severity: 'error',
+      userMessage: 'You are not in this room',
       technicalMessage: error,
       autoRetry: false,
-      suggestion: "Rejoin the room to continue playing",
+      suggestion: 'Rejoin the room to continue playing',
       recoverable: false,
-    };
+    }
   }
 
   // Unknown errors
   return {
-    category: "unknown",
-    severity: "error",
-    userMessage: "Something went wrong",
+    category: 'unknown',
+    severity: 'error',
+    userMessage: 'Something went wrong',
     technicalMessage: error,
     autoRetry: false,
-    suggestion: "Try refreshing the page",
+    suggestion: 'Try refreshing the page',
     recoverable: false,
-  };
+  }
 }
 
 /**
@@ -141,28 +132,28 @@ export function parseError(
  */
 export function getMoveActionName(move: GameMove): string {
   switch (move.type) {
-    case "START_GAME":
-      return "starting game";
-    case "MAKE_MOVE":
-      return "moving piece";
-    case "DECLARE_HARMONY":
-      return "declaring harmony";
-    case "RESIGN":
-      return "resigning";
-    case "OFFER_DRAW":
-      return "offering draw";
-    case "ACCEPT_DRAW":
-      return "accepting draw";
-    case "CLAIM_REPETITION":
-      return "claiming repetition";
-    case "CLAIM_FIFTY_MOVE":
-      return "claiming fifty-move rule";
-    case "SET_CONFIG":
-      return "updating settings";
-    case "RESET_GAME":
-      return "resetting game";
+    case 'START_GAME':
+      return 'starting game'
+    case 'MAKE_MOVE':
+      return 'moving piece'
+    case 'DECLARE_HARMONY':
+      return 'declaring harmony'
+    case 'RESIGN':
+      return 'resigning'
+    case 'OFFER_DRAW':
+      return 'offering draw'
+    case 'ACCEPT_DRAW':
+      return 'accepting draw'
+    case 'CLAIM_REPETITION':
+      return 'claiming repetition'
+    case 'CLAIM_FIFTY_MOVE':
+      return 'claiming fifty-move rule'
+    case 'SET_CONFIG':
+      return 'updating settings'
+    case 'RESET_GAME':
+      return 'resetting game'
     default:
-      return "performing action";
+      return 'performing action'
   }
 }
 
@@ -171,27 +162,27 @@ export function getMoveActionName(move: GameMove): string {
  */
 export function shouldShowToast(error: EnhancedError): boolean {
   // Version conflicts: only show toast after 2+ retries
-  if (error.category === "version-conflict") {
-    return (error.retryCount ?? 0) >= 2;
+  if (error.category === 'version-conflict') {
+    return (error.retryCount ?? 0) >= 2
   }
 
   // Permission errors: always show toast
-  if (error.category === "permission") {
-    return true;
+  if (error.category === 'permission') {
+    return true
   }
 
   // Network errors: always show toast
-  if (error.category === "network") {
-    return true;
+  if (error.category === 'network') {
+    return true
   }
 
   // Game rule errors: show in banner, not toast
-  if (error.category === "game-rule") {
-    return false;
+  if (error.category === 'game-rule') {
+    return false
   }
 
   // Unknown errors: show toast
-  return true;
+  return true
 }
 
 /**
@@ -199,41 +190,39 @@ export function shouldShowToast(error: EnhancedError): boolean {
  */
 export function shouldShowBanner(error: EnhancedError): boolean {
   // Version conflicts: only show banner if max retries exceeded
-  if (error.category === "version-conflict") {
-    return (error.retryCount ?? 0) >= 5;
+  if (error.category === 'version-conflict') {
+    return (error.retryCount ?? 0) >= 5
   }
 
   // Game rule errors: always show in banner
-  if (error.category === "game-rule") {
-    return true;
+  if (error.category === 'game-rule') {
+    return true
   }
 
   // Fatal errors: show in banner
-  if (error.severity === "fatal") {
-    return true;
+  if (error.severity === 'fatal') {
+    return true
   }
 
   // Network errors after retry
-  if (error.category === "network") {
-    return true;
+  if (error.category === 'network') {
+    return true
   }
 
-  return false;
+  return false
 }
 
 /**
  * Get toast type from error severity
  */
-export function getToastType(
-  severity: ErrorSeverity,
-): "success" | "error" | "info" {
+export function getToastType(severity: ErrorSeverity): 'success' | 'error' | 'info' {
   switch (severity) {
-    case "info":
-      return "info";
-    case "warning":
-      return "error"; // Use error styling for warnings
-    case "error":
-    case "fatal":
-      return "error";
+    case 'info':
+      return 'info'
+    case 'warning':
+      return 'error' // Use error styling for warnings
+    case 'error':
+    case 'fatal':
+      return 'error'
   }
 }
diff --git a/apps/web/src/lib/arcade/game-config-helpers.ts b/apps/web/src/lib/arcade/game-config-helpers.ts
index 16d11e34..2d58ddd3 100644
--- a/apps/web/src/lib/arcade/game-config-helpers.ts
+++ b/apps/web/src/lib/arcade/game-config-helpers.ts
@@ -5,11 +5,11 @@
  * Uses the room_game_configs table (one row per game per room).
  */
 
-import { and, eq } from "drizzle-orm";
-import { createId } from "@paralleldrive/cuid2";
-import { db, schema } from "@/db";
-import type { GameName } from "./validators";
-import type { GameConfigByName } from "./game-configs";
+import { and, eq } from 'drizzle-orm'
+import { createId } from '@paralleldrive/cuid2'
+import { db, schema } from '@/db'
+import type { GameName } from './validators'
+import type { GameConfigByName } from './game-configs'
 import {
   DEFAULT_MATCHING_CONFIG,
   DEFAULT_MEMORY_QUIZ_CONFIG,
@@ -17,51 +17,49 @@ import {
   DEFAULT_CARD_SORTING_CONFIG,
   DEFAULT_RITHMOMACHIA_CONFIG,
   DEFAULT_YIJS_DEMO_CONFIG,
-} from "./game-configs";
+} from './game-configs'
 
 // Lazy-load game registry to avoid loading React components on server
 function getGame(gameName: string) {
   // Only load game registry in browser environment
   // On server, we fall back to switch statement validation
-  if (typeof window !== "undefined") {
+  if (typeof window !== 'undefined') {
     try {
-      const { getGame: registryGetGame } = require("./game-registry");
-      return registryGetGame(gameName);
+      const { getGame: registryGetGame } = require('./game-registry')
+      return registryGetGame(gameName)
     } catch (error) {
-      console.warn("[GameConfig] Failed to load game registry:", error);
-      return undefined;
+      console.warn('[GameConfig] Failed to load game registry:', error)
+      return undefined
     }
   }
-  return undefined;
+  return undefined
 }
 
 /**
  * Extended game name type that includes both registered validators and legacy games
  * TODO: Remove 'complement-race' once migrated to the new modular system
  */
-type ExtendedGameName = GameName | "complement-race";
+type ExtendedGameName = GameName | 'complement-race'
 
 /**
  * Get default config for a game
  */
-function getDefaultGameConfig(
-  gameName: ExtendedGameName,
-): GameConfigByName[ExtendedGameName] {
+function getDefaultGameConfig(gameName: ExtendedGameName): GameConfigByName[ExtendedGameName] {
   switch (gameName) {
-    case "matching":
-      return DEFAULT_MATCHING_CONFIG;
-    case "memory-quiz":
-      return DEFAULT_MEMORY_QUIZ_CONFIG;
-    case "complement-race":
-      return DEFAULT_COMPLEMENT_RACE_CONFIG;
-    case "card-sorting":
-      return DEFAULT_CARD_SORTING_CONFIG;
-    case "rithmomachia":
-      return DEFAULT_RITHMOMACHIA_CONFIG;
-    case "yjs-demo":
-      return DEFAULT_YIJS_DEMO_CONFIG;
+    case 'matching':
+      return DEFAULT_MATCHING_CONFIG
+    case 'memory-quiz':
+      return DEFAULT_MEMORY_QUIZ_CONFIG
+    case 'complement-race':
+      return DEFAULT_COMPLEMENT_RACE_CONFIG
+    case 'card-sorting':
+      return DEFAULT_CARD_SORTING_CONFIG
+    case 'rithmomachia':
+      return DEFAULT_RITHMOMACHIA_CONFIG
+    case 'yjs-demo':
+      return DEFAULT_YIJS_DEMO_CONFIG
     default:
-      throw new Error(`Unknown game: ${gameName}`);
+      throw new Error(`Unknown game: ${gameName}`)
   }
 }
 
@@ -71,27 +69,27 @@ function getDefaultGameConfig(
  */
 export async function getGameConfig<T extends ExtendedGameName>(
   roomId: string,
-  gameName: T,
+  gameName: T
 ): Promise<GameConfigByName[T]> {
   // Query the room_game_configs table for this specific room+game
   const configRow = await db.query.roomGameConfigs.findFirst({
     where: and(
       eq(schema.roomGameConfigs.roomId, roomId),
-      eq(schema.roomGameConfigs.gameName, gameName),
+      eq(schema.roomGameConfigs.gameName, gameName)
     ),
-  });
+  })
 
   // If no config exists, return defaults
   if (!configRow) {
-    return getDefaultGameConfig(gameName) as GameConfigByName[T];
+    return getDefaultGameConfig(gameName) as GameConfigByName[T]
   }
 
   // Merge saved config with defaults to handle missing fields
-  const defaults = getDefaultGameConfig(gameName);
+  const defaults = getDefaultGameConfig(gameName)
   return {
     ...defaults,
     ...(configRow.config as object),
-  } as GameConfigByName[T];
+  } as GameConfigByName[T]
 }
 
 /**
@@ -101,32 +99,32 @@ export async function getGameConfig<T extends ExtendedGameName>(
 export async function setGameConfig<T extends ExtendedGameName>(
   roomId: string,
   gameName: T,
-  config: Partial<GameConfigByName[T]>,
+  config: Partial<GameConfigByName[T]>
 ): Promise<void> {
-  const now = new Date();
+  const now = new Date()
 
   // Check if config already exists
   const existing = await db.query.roomGameConfigs.findFirst({
     where: and(
       eq(schema.roomGameConfigs.roomId, roomId),
-      eq(schema.roomGameConfigs.gameName, gameName),
+      eq(schema.roomGameConfigs.gameName, gameName)
     ),
-  });
+  })
 
   if (existing) {
     // Update existing config (merge with existing values)
-    const mergedConfig = { ...(existing.config as object), ...config };
+    const mergedConfig = { ...(existing.config as object), ...config }
     await db
       .update(schema.roomGameConfigs)
       .set({
         config: mergedConfig as any,
         updatedAt: now,
       })
-      .where(eq(schema.roomGameConfigs.id, existing.id));
+      .where(eq(schema.roomGameConfigs.id, existing.id))
   } else {
     // Insert new config (merge with defaults)
-    const defaults = getDefaultGameConfig(gameName);
-    const mergedConfig = { ...defaults, ...config };
+    const defaults = getDefaultGameConfig(gameName)
+    const mergedConfig = { ...defaults, ...config }
 
     await db.insert(schema.roomGameConfigs).values({
       id: createId(),
@@ -135,10 +133,10 @@ export async function setGameConfig<T extends ExtendedGameName>(
       config: mergedConfig as any,
       createdAt: now,
       updatedAt: now,
-    });
+    })
   }
 
-  console.log(`[GameConfig] Updated ${gameName} config for room ${roomId}`);
+  console.log(`[GameConfig] Updated ${gameName} config for room ${roomId}`)
 }
 
 /**
@@ -148,36 +146,25 @@ export async function setGameConfig<T extends ExtendedGameName>(
 export async function updateGameConfigField<
   T extends ExtendedGameName,
   K extends keyof GameConfigByName[T],
->(
-  roomId: string,
-  gameName: T,
-  field: K,
-  value: GameConfigByName[T][K],
-): Promise<void> {
+>(roomId: string, gameName: T, field: K, value: GameConfigByName[T][K]): Promise<void> {
   // Create a partial config with just the field being updated
-  const partialConfig: Partial<GameConfigByName[T]> = {} as any;
-  (partialConfig as any)[field] = value;
-  await setGameConfig(roomId, gameName, partialConfig);
+  const partialConfig: Partial<GameConfigByName[T]> = {} as any
+  ;(partialConfig as any)[field] = value
+  await setGameConfig(roomId, gameName, partialConfig)
 }
 
 /**
  * Delete a game's config from the database
  * Useful when clearing game selection or cleaning up
  */
-export async function deleteGameConfig(
-  roomId: string,
-  gameName: ExtendedGameName,
-): Promise<void> {
+export async function deleteGameConfig(roomId: string, gameName: ExtendedGameName): Promise<void> {
   await db
     .delete(schema.roomGameConfigs)
     .where(
-      and(
-        eq(schema.roomGameConfigs.roomId, roomId),
-        eq(schema.roomGameConfigs.gameName, gameName),
-      ),
-    );
+      and(eq(schema.roomGameConfigs.roomId, roomId), eq(schema.roomGameConfigs.gameName, gameName))
+    )
 
-  console.log(`[GameConfig] Deleted ${gameName} config for room ${roomId}`);
+  console.log(`[GameConfig] Deleted ${gameName} config for room ${roomId}`)
 }
 
 /**
@@ -185,18 +172,18 @@ export async function deleteGameConfig(
  * Returns a map of gameName -> config
  */
 export async function getAllGameConfigs(
-  roomId: string,
+  roomId: string
 ): Promise<Partial<Record<ExtendedGameName, unknown>>> {
   const configs = await db.query.roomGameConfigs.findMany({
     where: eq(schema.roomGameConfigs.roomId, roomId),
-  });
+  })
 
-  const result: Partial<Record<ExtendedGameName, unknown>> = {};
+  const result: Partial<Record<ExtendedGameName, unknown>> = {}
   for (const config of configs) {
-    result[config.gameName as ExtendedGameName] = config.config;
+    result[config.gameName as ExtendedGameName] = config.config
   }
 
-  return result;
+  return result
 }
 
 /**
@@ -204,10 +191,8 @@ export async function getAllGameConfigs(
  * Called when deleting a room (cascade should handle this, but useful for explicit cleanup)
  */
 export async function deleteAllGameConfigs(roomId: string): Promise<void> {
-  await db
-    .delete(schema.roomGameConfigs)
-    .where(eq(schema.roomGameConfigs.roomId, roomId));
-  console.log(`[GameConfig] Deleted all configs for room ${roomId}`);
+  await db.delete(schema.roomGameConfigs).where(eq(schema.roomGameConfigs.roomId, roomId))
+  console.log(`[GameConfig] Deleted all configs for room ${roomId}`)
 }
 
 /**
@@ -217,51 +202,46 @@ export async function deleteAllGameConfigs(roomId: string): Promise<void> {
  * NEW: Uses game registry validation functions instead of switch statements.
  * Games now own their own validation logic!
  */
-export function validateGameConfig(
-  gameName: ExtendedGameName,
-  config: any,
-): boolean {
+export function validateGameConfig(gameName: ExtendedGameName, config: any): boolean {
   // Try to get game from registry
-  const game = getGame(gameName);
+  const game = getGame(gameName)
 
   // If game has a validateConfig function, use it
   if (game && game.validateConfig) {
-    return game.validateConfig(config);
+    return game.validateConfig(config)
   }
 
   // Fallback for legacy games without registry (e.g., complement-race, matching, memory-quiz)
   switch (gameName) {
-    case "matching":
+    case 'matching':
       return (
-        typeof config === "object" &&
+        typeof config === 'object' &&
         config !== null &&
-        ["abacus-numeral", "complement-pairs"].includes(config.gameType) &&
-        typeof config.difficulty === "number" &&
+        ['abacus-numeral', 'complement-pairs'].includes(config.gameType) &&
+        typeof config.difficulty === 'number' &&
         [6, 8, 12, 15].includes(config.difficulty) &&
-        typeof config.turnTimer === "number" &&
+        typeof config.turnTimer === 'number' &&
         config.turnTimer >= 5 &&
         config.turnTimer <= 300
-      );
+      )
 
-    case "memory-quiz":
+    case 'memory-quiz':
       return (
-        typeof config === "object" &&
+        typeof config === 'object' &&
         config !== null &&
         [2, 5, 8, 12, 15].includes(config.selectedCount) &&
-        typeof config.displayTime === "number" &&
+        typeof config.displayTime === 'number' &&
         config.displayTime > 0 &&
-        ["beginner", "easy", "medium", "hard", "expert"].includes(
-          config.selectedDifficulty,
-        ) &&
-        ["cooperative", "competitive"].includes(config.playMode)
-      );
+        ['beginner', 'easy', 'medium', 'hard', 'expert'].includes(config.selectedDifficulty) &&
+        ['cooperative', 'competitive'].includes(config.playMode)
+      )
 
-    case "complement-race":
+    case 'complement-race':
       // TODO: Add validation when complement-race settings are defined
-      return typeof config === "object" && config !== null;
+      return typeof config === 'object' && config !== null
 
     default:
       // If no validator found, accept any object
-      return typeof config === "object" && config !== null;
+      return typeof config === 'object' && config !== null
   }
 }
diff --git a/apps/web/src/lib/arcade/game-configs.ts b/apps/web/src/lib/arcade/game-configs.ts
index 72275b13..361dab34 100644
--- a/apps/web/src/lib/arcade/game-configs.ts
+++ b/apps/web/src/lib/arcade/game-configs.ts
@@ -13,19 +13,17 @@
  */
 
 // Type-only imports (won't load React components at runtime)
-import type { memoryQuizGame } from "@/arcade-games/memory-quiz";
-import type { matchingGame } from "@/arcade-games/matching";
-import type { cardSortingGame } from "@/arcade-games/card-sorting";
-import type { yjsDemoGame } from "@/arcade-games/yjs-demo";
-import type { rithmomachiaGame } from "@/arcade-games/rithmomachia";
+import type { memoryQuizGame } from '@/arcade-games/memory-quiz'
+import type { matchingGame } from '@/arcade-games/matching'
+import type { cardSortingGame } from '@/arcade-games/card-sorting'
+import type { yjsDemoGame } from '@/arcade-games/yjs-demo'
+import type { rithmomachiaGame } from '@/arcade-games/rithmomachia'
 
 /**
  * Utility type: Extract config type from a game definition
  * Uses TypeScript's infer keyword to extract the TConfig generic
  */
-type InferGameConfig<T> = T extends { defaultConfig: infer Config }
-  ? Config
-  : never;
+type InferGameConfig<T> = T extends { defaultConfig: infer Config } ? Config : never
 
 // ============================================================================
 // Modern Games (Type Inference from Game Definitions)
@@ -35,31 +33,31 @@ type InferGameConfig<T> = T extends { defaultConfig: infer Config }
  * Configuration for memory-quiz (soroban lightning) game
  * INFERRED from memoryQuizGame.defaultConfig
  */
-export type MemoryQuizGameConfig = InferGameConfig<typeof memoryQuizGame>;
+export type MemoryQuizGameConfig = InferGameConfig<typeof memoryQuizGame>
 
 /**
  * Configuration for matching (memory pairs battle) game
  * INFERRED from matchingGame.defaultConfig
  */
-export type MatchingGameConfig = InferGameConfig<typeof matchingGame>;
+export type MatchingGameConfig = InferGameConfig<typeof matchingGame>
 
 /**
  * Configuration for card-sorting (pattern recognition) game
  * INFERRED from cardSortingGame.defaultConfig
  */
-export type CardSortingGameConfig = InferGameConfig<typeof cardSortingGame>;
+export type CardSortingGameConfig = InferGameConfig<typeof cardSortingGame>
 
 /**
  * Configuration for yjs-demo (Yjs real-time sync demo) game
  * INFERRED from yjsDemoGame.defaultConfig
  */
-export type YjsDemoGameConfig = InferGameConfig<typeof yjsDemoGame>;
+export type YjsDemoGameConfig = InferGameConfig<typeof yjsDemoGame>
 
 /**
  * Configuration for rithmomachia (Battle of Numbers) game
  * INFERRED from rithmomachiaGame.defaultConfig
  */
-export type RithmomachiaGameConfig = InferGameConfig<typeof rithmomachiaGame>;
+export type RithmomachiaGameConfig = InferGameConfig<typeof rithmomachiaGame>
 
 // ============================================================================
 // Legacy Games (Manual Type Definitions)
@@ -72,46 +70,39 @@ export type RithmomachiaGameConfig = InferGameConfig<typeof rithmomachiaGame>;
  */
 export interface ComplementRaceGameConfig {
   // Game Style (which mode)
-  style: "practice" | "sprint" | "survival";
+  style: 'practice' | 'sprint' | 'survival'
 
   // Question Settings
-  mode: "friends5" | "friends10" | "mixed";
-  complementDisplay: "number" | "abacus" | "random";
+  mode: 'friends5' | 'friends10' | 'mixed'
+  complementDisplay: 'number' | 'abacus' | 'random'
 
   // Difficulty
-  timeoutSetting:
-    | "preschool"
-    | "kindergarten"
-    | "relaxed"
-    | "slow"
-    | "normal"
-    | "fast"
-    | "expert";
+  timeoutSetting: 'preschool' | 'kindergarten' | 'relaxed' | 'slow' | 'normal' | 'fast' | 'expert'
 
   // AI Settings
-  enableAI: boolean;
-  aiOpponentCount: number; // 0-2 for multiplayer, 2 for single-player
+  enableAI: boolean
+  aiOpponentCount: number // 0-2 for multiplayer, 2 for single-player
 
   // Multiplayer Settings
-  maxPlayers: number; // 1-4
+  maxPlayers: number // 1-4
 
   // Sprint Mode Specific
-  routeDuration: number; // seconds per route (default 60)
-  enablePassengers: boolean;
-  passengerCount: number; // 6-8 passengers per route
-  maxConcurrentPassengers: number; // 3 per train
+  routeDuration: number // seconds per route (default 60)
+  enablePassengers: boolean
+  passengerCount: number // 6-8 passengers per route
+  maxConcurrentPassengers: number // 3 per train
 
   // Practice/Survival Mode Specific
-  raceGoal: number; // questions to win practice mode (default 20)
+  raceGoal: number // questions to win practice mode (default 20)
 
   // Win Conditions
-  winCondition: "route-based" | "score-based" | "time-based" | "infinite";
-  targetScore?: number; // for score-based (e.g., 100)
-  timeLimit?: number; // for time-based (e.g., 300 seconds)
-  routeCount?: number; // for route-based (e.g., 3 routes)
+  winCondition: 'route-based' | 'score-based' | 'time-based' | 'infinite'
+  targetScore?: number // for score-based (e.g., 100)
+  timeLimit?: number // for time-based (e.g., 300 seconds)
+  routeCount?: number // for route-based (e.g., 3 routes)
 
   // Index signature to satisfy GameConfig constraint
-  [key: string]: unknown;
+  [key: string]: unknown
 }
 
 // ============================================================================
@@ -124,15 +115,15 @@ export interface ComplementRaceGameConfig {
  */
 export type GameConfigByName = {
   // Modern games (inferred types)
-  "memory-quiz": MemoryQuizGameConfig;
-  matching: MatchingGameConfig;
-  "card-sorting": CardSortingGameConfig;
-  "yjs-demo": YjsDemoGameConfig;
-  rithmomachia: RithmomachiaGameConfig;
+  'memory-quiz': MemoryQuizGameConfig
+  matching: MatchingGameConfig
+  'card-sorting': CardSortingGameConfig
+  'yjs-demo': YjsDemoGameConfig
+  rithmomachia: RithmomachiaGameConfig
 
   // Legacy games (manual types)
-  "complement-race": ComplementRaceGameConfig;
-};
+  'complement-race': ComplementRaceGameConfig
+}
 
 /**
  * Room's game configuration object (nested by game name)
@@ -141,31 +132,31 @@ export type GameConfigByName = {
  * AUTO-DERIVED: Adding a game to GameConfigByName automatically adds it here
  */
 export type RoomGameConfig = {
-  [K in keyof GameConfigByName]?: GameConfigByName[K];
-};
+  [K in keyof GameConfigByName]?: GameConfigByName[K]
+}
 
 /**
  * Default configurations for each game
  */
 export const DEFAULT_MATCHING_CONFIG: MatchingGameConfig = {
-  gameType: "abacus-numeral",
+  gameType: 'abacus-numeral',
   difficulty: 6,
   turnTimer: 30,
-};
+}
 
 export const DEFAULT_MEMORY_QUIZ_CONFIG: MemoryQuizGameConfig = {
   selectedCount: 5,
   displayTime: 2.0,
-  selectedDifficulty: "easy",
-  playMode: "cooperative",
-};
+  selectedDifficulty: 'easy',
+  playMode: 'cooperative',
+}
 
 export const DEFAULT_CARD_SORTING_CONFIG: CardSortingGameConfig = {
   cardCount: 8,
   showNumbers: true,
   timeLimit: null,
-  gameMode: "solo",
-};
+  gameMode: 'solo',
+}
 
 export const DEFAULT_RITHMOMACHIA_CONFIG: RithmomachiaGameConfig = {
   pointWinEnabled: false,
@@ -174,23 +165,23 @@ export const DEFAULT_RITHMOMACHIA_CONFIG: RithmomachiaGameConfig = {
   fiftyMoveRule: true,
   allowAnySetOnRecheck: true,
   timeControlMs: null,
-};
+}
 
 export const DEFAULT_YIJS_DEMO_CONFIG: YjsDemoGameConfig = {
   gridSize: 8,
   duration: 60,
-};
+}
 
 export const DEFAULT_COMPLEMENT_RACE_CONFIG: ComplementRaceGameConfig = {
   // Game style
-  style: "practice",
+  style: 'practice',
 
   // Question settings
-  mode: "mixed",
-  complementDisplay: "random",
+  mode: 'mixed',
+  complementDisplay: 'random',
 
   // Difficulty
-  timeoutSetting: "normal",
+  timeoutSetting: 'normal',
 
   // AI settings
   enableAI: true,
@@ -209,8 +200,8 @@ export const DEFAULT_COMPLEMENT_RACE_CONFIG: ComplementRaceGameConfig = {
   raceGoal: 20,
 
   // Win conditions
-  winCondition: "infinite", // Sprint mode is infinite by default (Steam Sprint)
+  winCondition: 'infinite', // Sprint mode is infinite by default (Steam Sprint)
   routeCount: 3,
   targetScore: 100,
   timeLimit: 300,
-};
+}
diff --git a/apps/web/src/lib/arcade/game-registry.ts b/apps/web/src/lib/arcade/game-registry.ts
index 6cd04b48..48ce3f11 100644
--- a/apps/web/src/lib/arcade/game-registry.ts
+++ b/apps/web/src/lib/arcade/game-registry.ts
@@ -5,19 +5,14 @@
  * Games are explicitly registered here after being defined.
  */
 
-import type {
-  GameConfig,
-  GameDefinition,
-  GameMove,
-  GameState,
-} from "./game-sdk/types";
+import type { GameConfig, GameDefinition, GameMove, GameState } from './game-sdk/types'
 
 /**
  * Global game registry
  * Maps game name to game definition
  * Using `any` for generics to allow different game types
  */
-const registry = new Map<string, GameDefinition<any, any, any>>();
+const registry = new Map<string, GameDefinition<any, any, any>>()
 
 /**
  * Register a game in the registry
@@ -30,27 +25,27 @@ export function registerGame<
   TState extends GameState,
   TMove extends GameMove,
 >(game: GameDefinition<TConfig, TState, TMove>): void {
-  const { name } = game.manifest;
+  const { name } = game.manifest
 
   if (registry.has(name)) {
-    throw new Error(`Game "${name}" is already registered`);
+    throw new Error(`Game "${name}" is already registered`)
   }
 
   // Verify validator is also registered server-side
   try {
-    const { hasValidator, getValidator } = require("./validators");
+    const { hasValidator, getValidator } = require('./validators')
     if (!hasValidator(name)) {
       console.error(
         `⚠️  Game "${name}" registered but validator not found in server registry!` +
-          `\n   Add to src/lib/arcade/validators.ts to enable multiplayer.`,
-      );
+          `\n   Add to src/lib/arcade/validators.ts to enable multiplayer.`
+      )
     } else {
-      const serverValidator = getValidator(name);
+      const serverValidator = getValidator(name)
       if (serverValidator !== game.validator) {
         console.warn(
           `⚠️  Game "${name}" has different validator instances (client vs server).` +
-            `\n   This may cause issues. Ensure both use the same import.`,
-        );
+            `\n   This may cause issues. Ensure both use the same import.`
+        )
       }
     }
   } catch (error) {
@@ -58,8 +53,8 @@ export function registerGame<
     // This is expected - validator registry is isomorphic but check only runs server-side
   }
 
-  registry.set(name, game);
-  console.log(`✅ Registered game: ${name}`);
+  registry.set(name, game)
+  console.log(`✅ Registered game: ${name}`)
 }
 
 /**
@@ -68,10 +63,8 @@ export function registerGame<
  * @param gameName - Internal game identifier
  * @returns Game definition or undefined if not found
  */
-export function getGame(
-  gameName: string,
-): GameDefinition<any, any, any> | undefined {
-  return registry.get(gameName);
+export function getGame(gameName: string): GameDefinition<any, any, any> | undefined {
+  return registry.get(gameName)
 }
 
 /**
@@ -80,7 +73,7 @@ export function getGame(
  * @returns Array of all game definitions
  */
 export function getAllGames(): GameDefinition<any, any, any>[] {
-  return Array.from(registry.values());
+  return Array.from(registry.values())
 }
 
 /**
@@ -89,7 +82,7 @@ export function getAllGames(): GameDefinition<any, any, any>[] {
  * @returns Array of available game definitions
  */
 export function getAvailableGames(): GameDefinition<any, any, any>[] {
-  return getAllGames().filter((game) => game.manifest.available);
+  return getAllGames().filter((game) => game.manifest.available)
 }
 
 /**
@@ -99,30 +92,30 @@ export function getAvailableGames(): GameDefinition<any, any, any>[] {
  * @returns true if game is registered
  */
 export function hasGame(gameName: string): boolean {
-  return registry.has(gameName);
+  return registry.has(gameName)
 }
 
 /**
  * Clear all games from registry (used for testing)
  */
 export function clearRegistry(): void {
-  registry.clear();
+  registry.clear()
 }
 
 // ============================================================================
 // Game Registrations
 // ============================================================================
 
-import { memoryQuizGame } from "@/arcade-games/memory-quiz";
-import { matchingGame } from "@/arcade-games/matching";
-import { complementRaceGame } from "@/arcade-games/complement-race/index";
-import { cardSortingGame } from "@/arcade-games/card-sorting";
-import { yjsDemoGame } from "@/arcade-games/yjs-demo";
-import { rithmomachiaGame } from "@/arcade-games/rithmomachia";
+import { memoryQuizGame } from '@/arcade-games/memory-quiz'
+import { matchingGame } from '@/arcade-games/matching'
+import { complementRaceGame } from '@/arcade-games/complement-race/index'
+import { cardSortingGame } from '@/arcade-games/card-sorting'
+import { yjsDemoGame } from '@/arcade-games/yjs-demo'
+import { rithmomachiaGame } from '@/arcade-games/rithmomachia'
 
-registerGame(memoryQuizGame);
-registerGame(matchingGame);
-registerGame(complementRaceGame);
-registerGame(cardSortingGame);
-registerGame(yjsDemoGame);
-registerGame(rithmomachiaGame);
+registerGame(memoryQuizGame)
+registerGame(matchingGame)
+registerGame(complementRaceGame)
+registerGame(cardSortingGame)
+registerGame(yjsDemoGame)
+registerGame(rithmomachiaGame)
diff --git a/apps/web/src/lib/arcade/game-sdk/GameErrorBoundary.tsx b/apps/web/src/lib/arcade/game-sdk/GameErrorBoundary.tsx
index a2d447e6..ee82af52 100644
--- a/apps/web/src/lib/arcade/game-sdk/GameErrorBoundary.tsx
+++ b/apps/web/src/lib/arcade/game-sdk/GameErrorBoundary.tsx
@@ -5,35 +5,35 @@
  * instead of crashing the entire app.
  */
 
-"use client";
+'use client'
 
-import { Component, type ReactNode } from "react";
+import { Component, type ReactNode } from 'react'
 
 interface Props {
-  children: ReactNode;
-  gameName?: string;
+  children: ReactNode
+  gameName?: string
 }
 
 interface State {
-  hasError: boolean;
-  error?: Error;
+  hasError: boolean
+  error?: Error
 }
 
 export class GameErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
-    super(props);
-    this.state = { hasError: false };
+    super(props)
+    this.state = { hasError: false }
   }
 
   static getDerivedStateFromError(error: Error): State {
     return {
       hasError: true,
       error,
-    };
+    }
   }
 
   componentDidCatch(error: Error, errorInfo: unknown) {
-    console.error("Game error:", error, errorInfo);
+    console.error('Game error:', error, errorInfo)
   }
 
   render() {
@@ -41,59 +41,59 @@ export class GameErrorBoundary extends Component<Props, State> {
       return (
         <div
           style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: "40px",
-            textAlign: "center",
-            minHeight: "400px",
-            background: "linear-gradient(135deg, #fef2f2, #fee2e2)",
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '40px',
+            textAlign: 'center',
+            minHeight: '400px',
+            background: 'linear-gradient(135deg, #fef2f2, #fee2e2)',
           }}
         >
           <div
             style={{
-              fontSize: "64px",
-              marginBottom: "20px",
+              fontSize: '64px',
+              marginBottom: '20px',
             }}
           >
             ⚠️
           </div>
           <h2
             style={{
-              fontSize: "24px",
-              fontWeight: "bold",
-              marginBottom: "12px",
-              color: "#dc2626",
+              fontSize: '24px',
+              fontWeight: 'bold',
+              marginBottom: '12px',
+              color: '#dc2626',
             }}
           >
             Game Error
           </h2>
           <p
             style={{
-              fontSize: "16px",
-              color: "#6b7280",
-              marginBottom: "12px",
-              maxWidth: "500px",
+              fontSize: '16px',
+              color: '#6b7280',
+              marginBottom: '12px',
+              maxWidth: '500px',
             }}
           >
             {this.props.gameName
               ? `There was an error loading the game "${this.props.gameName}".`
-              : "There was an error loading the game."}
+              : 'There was an error loading the game.'}
           </p>
           {this.state.error && (
             <pre
               style={{
-                background: "#f9fafb",
-                border: "1px solid #e5e7eb",
-                borderRadius: "8px",
-                padding: "16px",
-                marginTop: "12px",
-                maxWidth: "600px",
-                overflow: "auto",
-                textAlign: "left",
-                fontSize: "12px",
-                color: "#374151",
+                background: '#f9fafb',
+                border: '1px solid #e5e7eb',
+                borderRadius: '8px',
+                padding: '16px',
+                marginTop: '12px',
+                maxWidth: '600px',
+                overflow: 'auto',
+                textAlign: 'left',
+                fontSize: '12px',
+                color: '#374151',
               }}
             >
               {this.state.error.message}
@@ -102,23 +102,23 @@ export class GameErrorBoundary extends Component<Props, State> {
           <button
             onClick={() => window.location.reload()}
             style={{
-              marginTop: "24px",
-              padding: "12px 24px",
-              background: "#3b82f6",
-              color: "white",
-              border: "none",
-              borderRadius: "8px",
-              fontSize: "14px",
-              fontWeight: "600",
-              cursor: "pointer",
+              marginTop: '24px',
+              padding: '12px 24px',
+              background: '#3b82f6',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              fontSize: '14px',
+              fontWeight: '600',
+              cursor: 'pointer',
             }}
           >
             Reload Page
           </button>
         </div>
-      );
+      )
     }
 
-    return this.props.children;
+    return this.props.children
   }
 }
diff --git a/apps/web/src/lib/arcade/game-sdk/define-game.ts b/apps/web/src/lib/arcade/game-sdk/define-game.ts
index 016b2129..58491fd1 100644
--- a/apps/web/src/lib/arcade/game-sdk/define-game.ts
+++ b/apps/web/src/lib/arcade/game-sdk/define-game.ts
@@ -11,8 +11,8 @@ import type {
   GameProviderComponent,
   GameState,
   GameValidator,
-} from "./types";
-import type { GameManifest } from "../manifest-schema";
+} from './types'
+import type { GameManifest } from '../manifest-schema'
 
 /**
  * Options for defining a game
@@ -23,22 +23,22 @@ export interface DefineGameOptions<
   TMove extends GameMove,
 > {
   /** Game manifest (loaded from game.yaml) */
-  manifest: GameManifest;
+  manifest: GameManifest
 
   /** React provider component */
-  Provider: GameProviderComponent;
+  Provider: GameProviderComponent
 
   /** Main game UI component */
-  GameComponent: GameComponent;
+  GameComponent: GameComponent
 
   /** Server-side validator */
-  validator: GameValidator<TState, TMove>;
+  validator: GameValidator<TState, TMove>
 
   /** Default configuration for the game */
-  defaultConfig: TConfig;
+  defaultConfig: TConfig
 
   /** Optional: Runtime config validation function */
-  validateConfig?: (config: unknown) => config is TConfig;
+  validateConfig?: (config: unknown) => config is TConfig
 }
 
 /**
@@ -65,21 +65,12 @@ export function defineGame<
   TConfig extends GameConfig,
   TState extends GameState,
   TMove extends GameMove,
->(
-  options: DefineGameOptions<TConfig, TState, TMove>,
-): GameDefinition<TConfig, TState, TMove> {
-  const {
-    manifest,
-    Provider,
-    GameComponent,
-    validator,
-    defaultConfig,
-    validateConfig,
-  } = options;
+>(options: DefineGameOptions<TConfig, TState, TMove>): GameDefinition<TConfig, TState, TMove> {
+  const { manifest, Provider, GameComponent, validator, defaultConfig, validateConfig } = options
 
   // Validate that manifest.name matches the game identifier
   if (!manifest.name) {
-    throw new Error('Game manifest must have a "name" field');
+    throw new Error('Game manifest must have a "name" field')
   }
 
   return {
@@ -89,5 +80,5 @@ export function defineGame<
     validator,
     defaultConfig,
     validateConfig,
-  };
+  }
 }
diff --git a/apps/web/src/lib/arcade/game-sdk/index.ts b/apps/web/src/lib/arcade/game-sdk/index.ts
index 14a3af66..8468b742 100644
--- a/apps/web/src/lib/arcade/game-sdk/index.ts
+++ b/apps/web/src/lib/arcade/game-sdk/index.ts
@@ -29,11 +29,11 @@ export type {
   ValidationContext,
   ValidationResult,
   TeamMoveSentinel,
-} from "./types";
+} from './types'
 
-export { TEAM_MOVE } from "./types";
+export { TEAM_MOVE } from './types'
 
-export type { GameManifest } from "../manifest-schema";
+export type { GameManifest } from '../manifest-schema'
 
 // ============================================================================
 // React Hooks (Controlled API)
@@ -43,22 +43,22 @@ export type { GameManifest } from "../manifest-schema";
  * Arcade session management hook
  * Handles state synchronization, move validation, and multiplayer sync
  */
-export { useArcadeSession } from "@/hooks/useArcadeSession";
+export { useArcadeSession } from '@/hooks/useArcadeSession'
 
 /**
  * Room data hook - access current room information
  */
-export { useRoomData, useUpdateGameConfig } from "@/hooks/useRoomData";
+export { useRoomData, useUpdateGameConfig } from '@/hooks/useRoomData'
 
 /**
  * Game mode context - access players and game mode
  */
-export { useGameMode } from "@/contexts/GameModeContext";
+export { useGameMode } from '@/contexts/GameModeContext'
 
 /**
  * Viewer ID hook - get current user's ID
  */
-export { useViewerId } from "@/hooks/useViewerId";
+export { useViewerId } from '@/hooks/useViewerId'
 
 // ============================================================================
 // Utilities
@@ -70,24 +70,24 @@ export { useViewerId } from "@/hooks/useViewerId";
 export {
   buildPlayerMetadata,
   buildPlayerOwnershipFromRoomData,
-} from "@/lib/arcade/player-ownership.client";
+} from '@/lib/arcade/player-ownership.client'
 
 /**
  * Helper for loading and validating game manifests
  */
-export { loadManifest } from "./load-manifest";
+export { loadManifest } from './load-manifest'
 
 /**
  * Game definition helper
  */
-export { defineGame } from "./define-game";
+export { defineGame } from './define-game'
 
 /**
  * Standard color themes for game cards
  * Use these to ensure consistent appearance across all games
  */
-export { getGameTheme, GAME_THEMES } from "../game-themes";
-export type { GameTheme, GameThemeName } from "../game-themes";
+export { getGameTheme, GAME_THEMES } from '../game-themes'
+export type { GameTheme, GameThemeName } from '../game-themes'
 
 // ============================================================================
 // Re-exports for convenience
@@ -96,4 +96,4 @@ export type { GameTheme, GameThemeName } from "../game-themes";
 /**
  * Common types from contexts
  */
-export type { Player } from "@/contexts/GameModeContext";
+export type { Player } from '@/contexts/GameModeContext'
diff --git a/apps/web/src/lib/arcade/game-sdk/load-manifest.ts b/apps/web/src/lib/arcade/game-sdk/load-manifest.ts
index d5efff9b..c59ac7a8 100644
--- a/apps/web/src/lib/arcade/game-sdk/load-manifest.ts
+++ b/apps/web/src/lib/arcade/game-sdk/load-manifest.ts
@@ -2,10 +2,10 @@
  * Manifest loading and validation utilities
  */
 
-import yaml from "js-yaml";
-import { readFileSync } from "fs";
-import { join } from "path";
-import { validateManifest, type GameManifest } from "../manifest-schema";
+import yaml from 'js-yaml'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+import { validateManifest, type GameManifest } from '../manifest-schema'
 
 /**
  * Load and validate a game manifest from a YAML file
@@ -16,16 +16,14 @@ import { validateManifest, type GameManifest } from "../manifest-schema";
  */
 export function loadManifest(manifestPath: string): GameManifest {
   try {
-    const fileContents = readFileSync(manifestPath, "utf8");
-    const data = yaml.load(fileContents);
-    return validateManifest(data);
+    const fileContents = readFileSync(manifestPath, 'utf8')
+    const data = yaml.load(fileContents)
+    return validateManifest(data)
   } catch (error) {
     if (error instanceof Error) {
-      throw new Error(
-        `Failed to load manifest from ${manifestPath}: ${error.message}`,
-      );
+      throw new Error(`Failed to load manifest from ${manifestPath}: ${error.message}`)
     }
-    throw error;
+    throw error
   }
 }
 
@@ -36,6 +34,6 @@ export function loadManifest(manifestPath: string): GameManifest {
  * @returns Validated GameManifest object
  */
 export function loadManifestFromDir(gameDir: string): GameManifest {
-  const manifestPath = join(gameDir, "game.yaml");
-  return loadManifest(manifestPath);
+  const manifestPath = join(gameDir, 'game.yaml')
+  return loadManifest(manifestPath)
 }
diff --git a/apps/web/src/lib/arcade/game-sdk/types.ts b/apps/web/src/lib/arcade/game-sdk/types.ts
index 647c3f68..7576a070 100644
--- a/apps/web/src/lib/arcade/game-sdk/types.ts
+++ b/apps/web/src/lib/arcade/game-sdk/types.ts
@@ -3,12 +3,9 @@
  * These types define the contract that all games must implement
  */
 
-import type { ReactNode } from "react";
-import type { GameManifest } from "../manifest-schema";
-import type {
-  GameMove as BaseGameMove,
-  GameValidator,
-} from "../validation/types";
+import type { ReactNode } from 'react'
+import type { GameManifest } from '../manifest-schema'
+import type { GameMove as BaseGameMove, GameValidator } from '../validation/types'
 
 /**
  * Re-export base validation types from arcade system
@@ -18,35 +15,33 @@ export type {
   GameValidator,
   ValidationContext,
   ValidationResult,
-} from "../validation/types";
-export { TEAM_MOVE } from "../validation/types";
-export type { TeamMoveSentinel } from "../validation/types";
+} from '../validation/types'
+export { TEAM_MOVE } from '../validation/types'
+export type { TeamMoveSentinel } from '../validation/types'
 
 /**
  * Generic game configuration
  * Each game defines its own specific config type
  */
-export type GameConfig = Record<string, unknown>;
+export type GameConfig = Record<string, unknown>
 
 /**
  * Generic game state
  * Each game defines its own specific state type
  */
-export type GameState = Record<string, unknown>;
+export type GameState = Record<string, unknown>
 
 /**
  * Provider component interface
  * Each game provides a React context provider that wraps the game UI
  */
-export type GameProviderComponent = (props: {
-  children: ReactNode;
-}) => JSX.Element;
+export type GameProviderComponent = (props: { children: ReactNode }) => JSX.Element
 
 /**
  * Main game component interface
  * The root component that renders the game UI
  */
-export type GameComponent = () => JSX.Element;
+export type GameComponent = () => JSX.Element
 
 /**
  * Complete game definition
@@ -58,19 +53,19 @@ export interface GameDefinition<
   TMove extends BaseGameMove = BaseGameMove,
 > {
   /** Parsed and validated manifest */
-  manifest: GameManifest;
+  manifest: GameManifest
 
   /** React provider component */
-  Provider: GameProviderComponent;
+  Provider: GameProviderComponent
 
   /** Main game UI component */
-  GameComponent: GameComponent;
+  GameComponent: GameComponent
 
   /** Server-side validator */
-  validator: GameValidator<TState, TMove>;
+  validator: GameValidator<TState, TMove>
 
   /** Default configuration */
-  defaultConfig: TConfig;
+  defaultConfig: TConfig
 
   /**
    * Validate a config object at runtime
@@ -79,5 +74,5 @@ export interface GameDefinition<
    * @param config - Configuration object to validate
    * @returns true if valid, false otherwise
    */
-  validateConfig?: (config: unknown) => config is TConfig;
+  validateConfig?: (config: unknown) => config is TConfig
 }
diff --git a/apps/web/src/lib/arcade/game-themes.ts b/apps/web/src/lib/arcade/game-themes.ts
index d33fe304..ff053f0d 100644
--- a/apps/web/src/lib/arcade/game-themes.ts
+++ b/apps/web/src/lib/arcade/game-themes.ts
@@ -8,9 +8,9 @@
  */
 
 export interface GameTheme {
-  color: string;
-  gradient: string;
-  borderColor: string;
+  color: string
+  gradient: string
+  borderColor: string
 }
 
 /**
@@ -19,58 +19,58 @@ export interface GameTheme {
  */
 export const GAME_THEMES = {
   blue: {
-    color: "blue",
-    gradient: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)", // Vibrant cyan
-    borderColor: "#00f2fe",
+    color: 'blue',
+    gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', // Vibrant cyan
+    borderColor: '#00f2fe',
   },
   purple: {
-    color: "purple",
-    gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", // Vibrant purple
-    borderColor: "#764ba2",
+    color: 'purple',
+    gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', // Vibrant purple
+    borderColor: '#764ba2',
   },
   green: {
-    color: "green",
-    gradient: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)", // Vibrant green/teal
-    borderColor: "#38f9d7",
+    color: 'green',
+    gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', // Vibrant green/teal
+    borderColor: '#38f9d7',
   },
   teal: {
-    color: "teal",
-    gradient: "linear-gradient(135deg, #11998e 0%, #38ef7d 100%)", // Vibrant teal
-    borderColor: "#38ef7d",
+    color: 'teal',
+    gradient: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)', // Vibrant teal
+    borderColor: '#38ef7d',
   },
   indigo: {
-    color: "indigo",
-    gradient: "linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)", // Vibrant indigo
-    borderColor: "#9b23ea",
+    color: 'indigo',
+    gradient: 'linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)', // Vibrant indigo
+    borderColor: '#9b23ea',
   },
   pink: {
-    color: "pink",
-    gradient: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)", // Vibrant pink
-    borderColor: "#f5576c",
+    color: 'pink',
+    gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', // Vibrant pink
+    borderColor: '#f5576c',
   },
   orange: {
-    color: "orange",
-    gradient: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)", // Vibrant orange/coral
-    borderColor: "#fee140",
+    color: 'orange',
+    gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', // Vibrant orange/coral
+    borderColor: '#fee140',
   },
   yellow: {
-    color: "yellow",
-    gradient: "linear-gradient(135deg, #ffd89b 0%, #19547b 100%)", // Vibrant yellow/blue
-    borderColor: "#ffd89b",
+    color: 'yellow',
+    gradient: 'linear-gradient(135deg, #ffd89b 0%, #19547b 100%)', // Vibrant yellow/blue
+    borderColor: '#ffd89b',
   },
   red: {
-    color: "red",
-    gradient: "linear-gradient(135deg, #f85032 0%, #e73827 100%)", // Vibrant red
-    borderColor: "#e73827",
+    color: 'red',
+    gradient: 'linear-gradient(135deg, #f85032 0%, #e73827 100%)', // Vibrant red
+    borderColor: '#e73827',
   },
   gray: {
-    color: "gray",
-    gradient: "linear-gradient(135deg, #868f96 0%, #596164 100%)", // Vibrant gray
-    borderColor: "#596164",
+    color: 'gray',
+    gradient: 'linear-gradient(135deg, #868f96 0%, #596164 100%)', // Vibrant gray
+    borderColor: '#596164',
   },
-} as const satisfies Record<string, GameTheme>;
+} as const satisfies Record<string, GameTheme>
 
-export type GameThemeName = keyof typeof GAME_THEMES;
+export type GameThemeName = keyof typeof GAME_THEMES
 
 /**
  * Get a standard theme by name
@@ -84,5 +84,5 @@ export type GameThemeName = keyof typeof GAME_THEMES;
  * }
  */
 export function getGameTheme(themeName: GameThemeName): GameTheme {
-  return GAME_THEMES[themeName];
+  return GAME_THEMES[themeName]
 }
diff --git a/apps/web/src/lib/arcade/manifest-schema.ts b/apps/web/src/lib/arcade/manifest-schema.ts
index c6fe1249..a3594c3a 100644
--- a/apps/web/src/lib/arcade/manifest-schema.ts
+++ b/apps/web/src/lib/arcade/manifest-schema.ts
@@ -3,44 +3,36 @@
  * Validates game.yaml files using Zod
  */
 
-import { z } from "zod";
+import { z } from 'zod'
 
 /**
  * Schema for game manifest (game.yaml)
  */
 export const GameManifestSchema = z.object({
-  name: z
-    .string()
-    .min(1)
-    .describe('Internal game identifier (e.g., "matching")'),
-  displayName: z.string().min(1).describe("Display name shown to users"),
-  icon: z.string().min(1).describe("Emoji icon for the game"),
-  description: z.string().min(1).describe("Short description"),
-  longDescription: z.string().min(1).describe("Detailed description"),
-  maxPlayers: z
-    .number()
-    .int()
-    .min(1)
-    .max(10)
-    .describe("Maximum number of players"),
+  name: z.string().min(1).describe('Internal game identifier (e.g., "matching")'),
+  displayName: z.string().min(1).describe('Display name shown to users'),
+  icon: z.string().min(1).describe('Emoji icon for the game'),
+  description: z.string().min(1).describe('Short description'),
+  longDescription: z.string().min(1).describe('Detailed description'),
+  maxPlayers: z.number().int().min(1).max(10).describe('Maximum number of players'),
   difficulty: z
-    .enum(["Beginner", "Intermediate", "Advanced", "Expert"])
-    .describe("Difficulty level"),
-  chips: z.array(z.string()).describe("Feature chips displayed on game card"),
+    .enum(['Beginner', 'Intermediate', 'Advanced', 'Expert'])
+    .describe('Difficulty level'),
+  chips: z.array(z.string()).describe('Feature chips displayed on game card'),
   color: z.string().min(1).describe('Color theme (e.g., "purple")'),
-  gradient: z.string().min(1).describe("CSS gradient for card background"),
+  gradient: z.string().min(1).describe('CSS gradient for card background'),
   borderColor: z.string().min(1).describe('Border color (e.g., "purple.200")'),
-  available: z.boolean().describe("Whether game is available to play"),
-});
+  available: z.boolean().describe('Whether game is available to play'),
+})
 
 /**
  * Inferred TypeScript type from schema
  */
-export type GameManifest = z.infer<typeof GameManifestSchema>;
+export type GameManifest = z.infer<typeof GameManifestSchema>
 
 /**
  * Validate a parsed manifest object
  */
 export function validateManifest(data: unknown): GameManifest {
-  return GameManifestSchema.parse(data);
+  return GameManifestSchema.parse(data)
 }
diff --git a/apps/web/src/lib/arcade/player-manager.ts b/apps/web/src/lib/arcade/player-manager.ts
index d70119f9..6291deb9 100644
--- a/apps/web/src/lib/arcade/player-manager.ts
+++ b/apps/web/src/lib/arcade/player-manager.ts
@@ -3,15 +3,15 @@
  * Handles fetching and validating player participation in rooms
  */
 
-import { and, eq } from "drizzle-orm";
-import { db, schema } from "@/db";
-import type { Player } from "@/db/schema/players";
+import { and, eq } from 'drizzle-orm'
+import { db, schema } from '@/db'
+import type { Player } from '@/db/schema/players'
 
 // Re-export ownership utilities for convenience
 export {
   buildPlayerOwnershipMap,
   type PlayerOwnershipMap,
-} from "./player-ownership";
+} from './player-ownership'
 
 /**
  * Get all players for a user (regardless of isActive status)
@@ -21,17 +21,17 @@ export async function getAllPlayers(viewerId: string): Promise<Player[]> {
   // First get the user record by guestId
   const user = await db.query.users.findFirst({
     where: eq(schema.users.guestId, viewerId),
-  });
+  })
 
   if (!user) {
-    return [];
+    return []
   }
 
   // Now query all players by the actual user.id (no isActive filter)
   return await db.query.players.findMany({
     where: eq(schema.players.userId, user.id),
     orderBy: schema.players.createdAt,
-  });
+  })
 }
 
 /**
@@ -43,20 +43,17 @@ export async function getActivePlayers(viewerId: string): Promise<Player[]> {
   // First get the user record by guestId
   const user = await db.query.users.findFirst({
     where: eq(schema.users.guestId, viewerId),
-  });
+  })
 
   if (!user) {
-    return [];
+    return []
   }
 
   // Now query players by the actual user.id
   return await db.query.players.findMany({
-    where: and(
-      eq(schema.players.userId, user.id),
-      eq(schema.players.isActive, true),
-    ),
+    where: and(eq(schema.players.userId, user.id), eq(schema.players.isActive, true)),
     orderBy: schema.players.createdAt,
-  });
+  })
 }
 
 /**
@@ -64,22 +61,20 @@ export async function getActivePlayers(viewerId: string): Promise<Player[]> {
  * Returns only players marked isActive=true from each room member
  * Returns a map of userId -> Player[]
  */
-export async function getRoomActivePlayers(
-  roomId: string,
-): Promise<Map<string, Player[]>> {
+export async function getRoomActivePlayers(roomId: string): Promise<Map<string, Player[]>> {
   // Get all room members
   const members = await db.query.roomMembers.findMany({
     where: eq(schema.roomMembers.roomId, roomId),
-  });
+  })
 
   // Fetch active players for each member (respects isActive flag)
-  const playerMap = new Map<string, Player[]>();
+  const playerMap = new Map<string, Player[]>()
   for (const member of members) {
-    const players = await getActivePlayers(member.userId);
-    playerMap.set(member.userId, players);
+    const players = await getActivePlayers(member.userId)
+    playerMap.set(member.userId, players)
   }
 
-  return playerMap;
+  return playerMap
 }
 
 /**
@@ -87,39 +82,33 @@ export async function getRoomActivePlayers(
  * Flattens the player lists from all room members
  */
 export async function getRoomPlayerIds(roomId: string): Promise<string[]> {
-  const playerMap = await getRoomActivePlayers(roomId);
-  const allPlayers: string[] = [];
+  const playerMap = await getRoomActivePlayers(roomId)
+  const allPlayers: string[] = []
 
   for (const players of playerMap.values()) {
-    allPlayers.push(...players.map((p) => p.id));
+    allPlayers.push(...players.map((p) => p.id))
   }
 
-  return allPlayers;
+  return allPlayers
 }
 
 /**
  * Validate that a player ID belongs to a user who is a member of a room
  */
-export async function validatePlayerInRoom(
-  playerId: string,
-  roomId: string,
-): Promise<boolean> {
+export async function validatePlayerInRoom(playerId: string, roomId: string): Promise<boolean> {
   // Get the player
   const player = await db.query.players.findFirst({
     where: eq(schema.players.id, playerId),
-  });
+  })
 
-  if (!player) return false;
+  if (!player) return false
 
   // Check if the player's user is a member of the room
   const member = await db.query.roomMembers.findFirst({
-    where: and(
-      eq(schema.roomMembers.roomId, roomId),
-      eq(schema.roomMembers.userId, player.userId),
-    ),
-  });
+    where: and(eq(schema.roomMembers.roomId, roomId), eq(schema.roomMembers.userId, player.userId)),
+  })
 
-  return !!member;
+  return !!member
 }
 
 /**
@@ -128,22 +117,22 @@ export async function validatePlayerInRoom(
 export async function getPlayer(playerId: string): Promise<Player | undefined> {
   return await db.query.players.findFirst({
     where: eq(schema.players.id, playerId),
-  });
+  })
 }
 
 /**
  * Get multiple players by IDs
  */
 export async function getPlayers(playerIds: string[]): Promise<Player[]> {
-  if (playerIds.length === 0) return [];
+  if (playerIds.length === 0) return []
 
-  const players: Player[] = [];
+  const players: Player[] = []
   for (const id of playerIds) {
-    const player = await getPlayer(id);
-    if (player) players.push(player);
+    const player = await getPlayer(id)
+    if (player) players.push(player)
   }
 
-  return players;
+  return players
 }
 
 /**
@@ -154,12 +143,9 @@ export async function getPlayers(playerIds: string[]): Promise<Player[]> {
  */
 export async function setPlayerActiveStatus(
   playerId: string,
-  isActive: boolean,
+  isActive: boolean
 ): Promise<Player | undefined> {
-  await db
-    .update(schema.players)
-    .set({ isActive })
-    .where(eq(schema.players.id, playerId));
+  await db.update(schema.players).set({ isActive }).where(eq(schema.players.id, playerId))
 
-  return await getPlayer(playerId);
+  return await getPlayer(playerId)
 }
diff --git a/apps/web/src/lib/arcade/player-ownership.client.ts b/apps/web/src/lib/arcade/player-ownership.client.ts
index 7376c34e..f10ff6f3 100644
--- a/apps/web/src/lib/arcade/player-ownership.client.ts
+++ b/apps/web/src/lib/arcade/player-ownership.client.ts
@@ -5,25 +5,25 @@
  * from client components without pulling in database code.
  */
 
-import type { RoomData } from "@/hooks/useRoomData";
+import type { RoomData } from '@/hooks/useRoomData'
 
 /**
  * Map of player IDs to user IDs
  * Key: playerId (database player.id)
  * Value: userId (database user.id)
  */
-export type PlayerOwnershipMap = Record<string, string>;
+export type PlayerOwnershipMap = Record<string, string>
 
 /**
  * Player metadata for display purposes
  * Combines ownership info with display properties
  */
 export interface PlayerMetadata {
-  id: string;
-  name: string;
-  emoji: string;
-  color: string;
-  userId: string;
+  id: string
+  name: string
+  emoji: string
+  color: string
+  userId: string
 }
 
 // ============================================================================
@@ -46,22 +46,22 @@ export interface PlayerMetadata {
  * ```
  */
 export function buildPlayerOwnershipFromRoomData(
-  roomData: RoomData | null | undefined,
+  roomData: RoomData | null | undefined
 ): PlayerOwnershipMap {
   if (!roomData?.memberPlayers) {
-    return {};
+    return {}
   }
 
-  const ownership: PlayerOwnershipMap = {};
+  const ownership: PlayerOwnershipMap = {}
 
   // Iterate over each user's players
   for (const [userId, userPlayers] of Object.entries(roomData.memberPlayers)) {
     for (const player of userPlayers) {
-      ownership[player.id] = userId;
+      ownership[player.id] = userId
     }
   }
 
-  return ownership;
+  return ownership
 }
 
 // ============================================================================
@@ -84,9 +84,9 @@ export function buildPlayerOwnershipFromRoomData(
 export function isPlayerOwnedByUser(
   playerId: string,
   userId: string,
-  ownershipMap: PlayerOwnershipMap,
+  ownershipMap: PlayerOwnershipMap
 ): boolean {
-  return ownershipMap[playerId] === userId;
+  return ownershipMap[playerId] === userId
 }
 
 /**
@@ -106,9 +106,9 @@ export function isPlayerOwnedByUser(
  */
 export function getPlayerOwner(
   playerId: string,
-  ownershipMap: PlayerOwnershipMap,
+  ownershipMap: PlayerOwnershipMap
 ): string | undefined {
-  return ownershipMap[playerId];
+  return ownershipMap[playerId]
 }
 
 /**
@@ -135,15 +135,15 @@ export function buildPlayerMetadata(
   playerIds: string[],
   ownershipMap: PlayerOwnershipMap,
   playersMap: Map<string, { name: string; emoji: string; color: string }>,
-  fallbackUserId?: string,
+  fallbackUserId?: string
 ): Record<string, PlayerMetadata> {
-  const metadata: Record<string, PlayerMetadata> = {};
+  const metadata: Record<string, PlayerMetadata> = {}
 
   for (const playerId of playerIds) {
-    const playerData = playersMap.get(playerId);
+    const playerData = playersMap.get(playerId)
     if (playerData) {
       // Get the actual owner userId from ownership map, or use fallback
-      const ownerUserId = ownershipMap[playerId] || fallbackUserId || "";
+      const ownerUserId = ownershipMap[playerId] || fallbackUserId || ''
 
       metadata[playerId] = {
         id: playerId,
@@ -151,11 +151,11 @@ export function buildPlayerMetadata(
         emoji: playerData.emoji,
         color: playerData.color,
         userId: ownerUserId, // Correct: Use actual owner's userId
-      };
+      }
     }
   }
 
-  return metadata;
+  return metadata
 }
 
 /**
@@ -174,9 +174,9 @@ export function buildPlayerMetadata(
 export function filterPlayersByOwner(
   playerIds: string[],
   userId: string,
-  ownershipMap: PlayerOwnershipMap,
+  ownershipMap: PlayerOwnershipMap
 ): string[] {
-  return playerIds.filter((playerId) => ownershipMap[playerId] === userId);
+  return playerIds.filter((playerId) => ownershipMap[playerId] === userId)
 }
 
 /**
@@ -192,7 +192,7 @@ export function filterPlayersByOwner(
  * ```
  */
 export function getUniqueOwners(ownershipMap: PlayerOwnershipMap): string[] {
-  return Array.from(new Set(Object.values(ownershipMap)));
+  return Array.from(new Set(Object.values(ownershipMap)))
 }
 
 /**
@@ -212,18 +212,18 @@ export function getUniqueOwners(ownershipMap: PlayerOwnershipMap): string[] {
  */
 export function groupPlayersByOwner(
   playerIds: string[],
-  ownershipMap: PlayerOwnershipMap,
+  ownershipMap: PlayerOwnershipMap
 ): Map<string, string[]> {
-  const groups = new Map<string, string[]>();
+  const groups = new Map<string, string[]>()
 
   for (const playerId of playerIds) {
-    const ownerId = ownershipMap[playerId];
+    const ownerId = ownershipMap[playerId]
     if (ownerId) {
-      const existing = groups.get(ownerId) || [];
-      existing.push(playerId);
-      groups.set(ownerId, existing);
+      const existing = groups.get(ownerId) || []
+      existing.push(playerId)
+      groups.set(ownerId, existing)
     }
   }
 
-  return groups;
+  return groups
 }
diff --git a/apps/web/src/lib/arcade/player-ownership.ts b/apps/web/src/lib/arcade/player-ownership.ts
index 4b6cae76..2bc85ae6 100644
--- a/apps/web/src/lib/arcade/player-ownership.ts
+++ b/apps/web/src/lib/arcade/player-ownership.ts
@@ -5,12 +5,12 @@
  * For client-side code, import from player-ownership.client.ts instead.
  */
 
-import { eq } from "drizzle-orm";
-import { db, schema } from "@/db";
-import type { PlayerOwnershipMap } from "./player-ownership.client";
+import { eq } from 'drizzle-orm'
+import { db, schema } from '@/db'
+import type { PlayerOwnershipMap } from './player-ownership.client'
 
 // Re-export all client-safe utilities
-export * from "./player-ownership.client";
+export * from './player-ownership.client'
 
 // ============================================================================
 // SERVER-SIDE UTILITIES (async, database-backed)
@@ -34,33 +34,31 @@ export * from "./player-ownership.client";
  * const roomOwnership = await buildPlayerOwnershipMap('room-123')
  * ```
  */
-export async function buildPlayerOwnershipMap(
-  roomId?: string,
-): Promise<PlayerOwnershipMap> {
-  let players: Array<{ id: string; userId: string }>;
+export async function buildPlayerOwnershipMap(roomId?: string): Promise<PlayerOwnershipMap> {
+  let players: Array<{ id: string; userId: string }>
 
   if (roomId) {
     // Fetch players who belong to users that are members of this room
     const members = await db.query.roomMembers.findMany({
       where: eq(schema.roomMembers.roomId, roomId),
       columns: { userId: true },
-    });
+    })
 
-    const memberUserIds = members.map((m) => m.userId);
+    const memberUserIds = members.map((m) => m.userId)
 
     // Fetch all players belonging to room members
     players = await db.query.players.findMany({
       columns: { id: true, userId: true },
-    });
+    })
 
     // Filter to only players owned by room members
-    players = players.filter((p) => memberUserIds.includes(p.userId));
+    players = players.filter((p) => memberUserIds.includes(p.userId))
   } else {
     // Fetch all players
     players = await db.query.players.findMany({
       columns: { id: true, userId: true },
-    });
+    })
   }
 
-  return Object.fromEntries(players.map((p) => [p.id, p.userId]));
+  return Object.fromEntries(players.map((p) => [p.id, p.userId]))
 }
diff --git a/apps/web/src/lib/arcade/room-code.ts b/apps/web/src/lib/arcade/room-code.ts
index ef9b7f2c..83f48a8f 100644
--- a/apps/web/src/lib/arcade/room-code.ts
+++ b/apps/web/src/lib/arcade/room-code.ts
@@ -3,33 +3,33 @@
  * Generates short, memorable codes for joining rooms
  */
 
-const CHARS = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789"; // Removed ambiguous chars: 0,O,1,I
-const CODE_LENGTH = 6;
+const CHARS = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789' // Removed ambiguous chars: 0,O,1,I
+const CODE_LENGTH = 6
 
 /**
  * Generate a random 6-character room code
  * Format: ABC123 (uppercase letters + numbers, no ambiguous chars)
  */
 export function generateRoomCode(): string {
-  let code = "";
+  let code = ''
   for (let i = 0; i < CODE_LENGTH; i++) {
-    const randomIndex = Math.floor(Math.random() * CHARS.length);
-    code += CHARS[randomIndex];
+    const randomIndex = Math.floor(Math.random() * CHARS.length)
+    code += CHARS[randomIndex]
   }
-  return code;
+  return code
 }
 
 /**
  * Validate a room code format
  */
 export function isValidRoomCode(code: string): boolean {
-  if (code.length !== CODE_LENGTH) return false;
-  return code.split("").every((char) => CHARS.includes(char));
+  if (code.length !== CODE_LENGTH) return false
+  return code.split('').every((char) => CHARS.includes(char))
 }
 
 /**
  * Normalize a room code (uppercase, remove spaces/dashes)
  */
 export function normalizeRoomCode(code: string): string {
-  return code.toUpperCase().replace(/[\s-]/g, "");
+  return code.toUpperCase().replace(/[\s-]/g, '')
 }
diff --git a/apps/web/src/lib/arcade/room-invitations.ts b/apps/web/src/lib/arcade/room-invitations.ts
index 1ccaa40b..cdf6b353 100644
--- a/apps/web/src/lib/arcade/room-invitations.ts
+++ b/apps/web/src/lib/arcade/room-invitations.ts
@@ -3,18 +3,18 @@
  * Handles invitation logic for room members
  */
 
-import { and, eq } from "drizzle-orm";
-import { db, schema } from "@/db";
+import { and, eq } from 'drizzle-orm'
+import { db, schema } from '@/db'
 
 export interface CreateInvitationParams {
-  roomId: string;
-  userId: string;
-  userName: string;
-  invitedBy: string;
-  invitedByName: string;
-  invitationType: "manual" | "auto-unban" | "auto-create";
-  message?: string;
-  expiresAt?: Date;
+  roomId: string
+  userId: string
+  userName: string
+  invitedBy: string
+  invitedByName: string
+  invitationType: 'manual' | 'auto-unban' | 'auto-create'
+  message?: string
+  expiresAt?: Date
 }
 
 /**
@@ -22,9 +22,9 @@ export interface CreateInvitationParams {
  * If a pending invitation exists, it will be replaced
  */
 export async function createInvitation(
-  params: CreateInvitationParams,
+  params: CreateInvitationParams
 ): Promise<schema.RoomInvitation> {
-  const now = new Date();
+  const now = new Date()
 
   // Check if there's an existing invitation
   const existing = await db
@@ -33,10 +33,10 @@ export async function createInvitation(
     .where(
       and(
         eq(schema.roomInvitations.roomId, params.roomId),
-        eq(schema.roomInvitations.userId, params.userId),
-      ),
+        eq(schema.roomInvitations.userId, params.userId)
+      )
     )
-    .limit(1);
+    .limit(1)
 
   if (existing.length > 0) {
     // Update existing invitation
@@ -48,20 +48,20 @@ export async function createInvitation(
         invitedByName: params.invitedByName,
         invitationType: params.invitationType,
         message: params.message,
-        status: "pending", // Reset to pending
+        status: 'pending', // Reset to pending
         createdAt: now, // Update timestamp
         respondedAt: null,
         expiresAt: params.expiresAt,
       })
       .where(eq(schema.roomInvitations.id, existing[0].id))
-      .returning();
+      .returning()
 
-    console.log("[Room Invitations] Updated invitation:", {
+    console.log('[Room Invitations] Updated invitation:', {
       userId: params.userId,
       roomId: params.roomId,
-    });
+    })
 
-    return updated;
+    return updated
   }
 
   // Create new invitation
@@ -75,108 +75,91 @@ export async function createInvitation(
       invitedByName: params.invitedByName,
       invitationType: params.invitationType,
       message: params.message,
-      status: "pending",
+      status: 'pending',
       createdAt: now,
       expiresAt: params.expiresAt,
     })
-    .returning();
+    .returning()
 
-  console.log("[Room Invitations] Created invitation:", {
+  console.log('[Room Invitations] Created invitation:', {
     userId: params.userId,
     roomId: params.roomId,
-  });
+  })
 
-  return invitation;
+  return invitation
 }
 
 /**
  * Get all pending invitations for a user
  */
-export async function getUserPendingInvitations(
-  userId: string,
-): Promise<schema.RoomInvitation[]> {
+export async function getUserPendingInvitations(userId: string): Promise<schema.RoomInvitation[]> {
   return await db
     .select()
     .from(schema.roomInvitations)
     .where(
-      and(
-        eq(schema.roomInvitations.userId, userId),
-        eq(schema.roomInvitations.status, "pending"),
-      ),
+      and(eq(schema.roomInvitations.userId, userId), eq(schema.roomInvitations.status, 'pending'))
     )
-    .orderBy(schema.roomInvitations.createdAt);
+    .orderBy(schema.roomInvitations.createdAt)
 }
 
 /**
  * Get all invitations for a room
  */
-export async function getRoomInvitations(
-  roomId: string,
-): Promise<schema.RoomInvitation[]> {
+export async function getRoomInvitations(roomId: string): Promise<schema.RoomInvitation[]> {
   return await db
     .select()
     .from(schema.roomInvitations)
     .where(eq(schema.roomInvitations.roomId, roomId))
-    .orderBy(schema.roomInvitations.createdAt);
+    .orderBy(schema.roomInvitations.createdAt)
 }
 
 /**
  * Accept an invitation
  */
-export async function acceptInvitation(
-  invitationId: string,
-): Promise<schema.RoomInvitation> {
+export async function acceptInvitation(invitationId: string): Promise<schema.RoomInvitation> {
   const [invitation] = await db
     .update(schema.roomInvitations)
     .set({
-      status: "accepted",
+      status: 'accepted',
       respondedAt: new Date(),
     })
     .where(eq(schema.roomInvitations.id, invitationId))
-    .returning();
+    .returning()
 
-  console.log("[Room Invitations] Accepted invitation:", invitationId);
+  console.log('[Room Invitations] Accepted invitation:', invitationId)
 
-  return invitation;
+  return invitation
 }
 
 /**
  * Decline an invitation
  */
-export async function declineInvitation(
-  invitationId: string,
-): Promise<schema.RoomInvitation> {
+export async function declineInvitation(invitationId: string): Promise<schema.RoomInvitation> {
   const [invitation] = await db
     .update(schema.roomInvitations)
     .set({
-      status: "declined",
+      status: 'declined',
       respondedAt: new Date(),
     })
     .where(eq(schema.roomInvitations.id, invitationId))
-    .returning();
+    .returning()
 
-  console.log("[Room Invitations] Declined invitation:", invitationId);
+  console.log('[Room Invitations] Declined invitation:', invitationId)
 
-  return invitation;
+  return invitation
 }
 
 /**
  * Cancel/delete an invitation
  */
-export async function cancelInvitation(
-  roomId: string,
-  userId: string,
-): Promise<void> {
+export async function cancelInvitation(roomId: string, userId: string): Promise<void> {
   await db
     .delete(schema.roomInvitations)
     .where(
-      and(
-        eq(schema.roomInvitations.roomId, roomId),
-        eq(schema.roomInvitations.userId, userId),
-      ),
-    );
+      and(eq(schema.roomInvitations.roomId, roomId), eq(schema.roomInvitations.userId, userId))
+    )
 
-  console.log("[Room Invitations] Cancelled invitation:", { userId, roomId });
+  console.log('[Room Invitations] Cancelled invitation:', { userId, roomId })
 }
 
 /**
@@ -184,18 +167,15 @@ export async function cancelInvitation(
  */
 export async function getInvitation(
   roomId: string,
-  userId: string,
+  userId: string
 ): Promise<schema.RoomInvitation | undefined> {
   const results = await db
     .select()
     .from(schema.roomInvitations)
     .where(
-      and(
-        eq(schema.roomInvitations.roomId, roomId),
-        eq(schema.roomInvitations.userId, userId),
-      ),
+      and(eq(schema.roomInvitations.roomId, roomId), eq(schema.roomInvitations.userId, userId))
     )
-    .limit(1);
+    .limit(1)
 
-  return results[0];
+  return results[0]
 }
diff --git a/apps/web/src/lib/arcade/room-join-requests.ts b/apps/web/src/lib/arcade/room-join-requests.ts
index 6a130250..9cf6926b 100644
--- a/apps/web/src/lib/arcade/room-join-requests.ts
+++ b/apps/web/src/lib/arcade/room-join-requests.ts
@@ -3,22 +3,22 @@
  * Handles join request logic for approval-only rooms
  */
 
-import { and, eq } from "drizzle-orm";
-import { db, schema } from "@/db";
+import { and, eq } from 'drizzle-orm'
+import { db, schema } from '@/db'
 
 export interface CreateJoinRequestParams {
-  roomId: string;
-  userId: string;
-  userName: string;
+  roomId: string
+  userId: string
+  userName: string
 }
 
 /**
  * Create a join request
  */
 export async function createJoinRequest(
-  params: CreateJoinRequestParams,
+  params: CreateJoinRequestParams
 ): Promise<schema.RoomJoinRequest> {
-  const now = new Date();
+  const now = new Date()
 
   // Check if there's an existing request
   const existing = await db
@@ -27,10 +27,10 @@ export async function createJoinRequest(
     .where(
       and(
         eq(schema.roomJoinRequests.roomId, params.roomId),
-        eq(schema.roomJoinRequests.userId, params.userId),
-      ),
+        eq(schema.roomJoinRequests.userId, params.userId)
+      )
     )
-    .limit(1);
+    .limit(1)
 
   if (existing.length > 0) {
     // Update existing request (reset to pending)
@@ -38,16 +38,16 @@ export async function createJoinRequest(
       .update(schema.roomJoinRequests)
       .set({
         userName: params.userName,
-        status: "pending",
+        status: 'pending',
         requestedAt: now,
         reviewedAt: null,
         reviewedBy: null,
         reviewedByName: null,
       })
       .where(eq(schema.roomJoinRequests.id, existing[0].id))
-      .returning();
+      .returning()
 
-    return updated;
+    return updated
   }
 
   // Create new request
@@ -57,43 +57,36 @@ export async function createJoinRequest(
       roomId: params.roomId,
       userId: params.userId,
       userName: params.userName,
-      status: "pending",
+      status: 'pending',
       requestedAt: now,
     })
-    .returning();
+    .returning()
 
-  return request;
+  return request
 }
 
 /**
  * Get all pending join requests for a room
  */
-export async function getPendingJoinRequests(
-  roomId: string,
-): Promise<schema.RoomJoinRequest[]> {
+export async function getPendingJoinRequests(roomId: string): Promise<schema.RoomJoinRequest[]> {
   return await db
     .select()
     .from(schema.roomJoinRequests)
     .where(
-      and(
-        eq(schema.roomJoinRequests.roomId, roomId),
-        eq(schema.roomJoinRequests.status, "pending"),
-      ),
+      and(eq(schema.roomJoinRequests.roomId, roomId), eq(schema.roomJoinRequests.status, 'pending'))
     )
-    .orderBy(schema.roomJoinRequests.requestedAt);
+    .orderBy(schema.roomJoinRequests.requestedAt)
 }
 
 /**
  * Get all join requests for a room (any status)
  */
-export async function getAllJoinRequests(
-  roomId: string,
-): Promise<schema.RoomJoinRequest[]> {
+export async function getAllJoinRequests(roomId: string): Promise<schema.RoomJoinRequest[]> {
   return await db
     .select()
     .from(schema.roomJoinRequests)
     .where(eq(schema.roomJoinRequests.roomId, roomId))
-    .orderBy(schema.roomJoinRequests.requestedAt);
+    .orderBy(schema.roomJoinRequests.requestedAt)
 }
 
 /**
@@ -102,20 +95,20 @@ export async function getAllJoinRequests(
 export async function approveJoinRequest(
   requestId: string,
   reviewedBy: string,
-  reviewedByName: string,
+  reviewedByName: string
 ): Promise<schema.RoomJoinRequest> {
   const [request] = await db
     .update(schema.roomJoinRequests)
     .set({
-      status: "approved",
+      status: 'approved',
       reviewedAt: new Date(),
       reviewedBy,
       reviewedByName,
     })
     .where(eq(schema.roomJoinRequests.id, requestId))
-    .returning();
+    .returning()
 
-  return request;
+  return request
 }
 
 /**
@@ -124,20 +117,20 @@ export async function approveJoinRequest(
 export async function denyJoinRequest(
   requestId: string,
   reviewedBy: string,
-  reviewedByName: string,
+  reviewedByName: string
 ): Promise<schema.RoomJoinRequest> {
   const [request] = await db
     .update(schema.roomJoinRequests)
     .set({
-      status: "denied",
+      status: 'denied',
       reviewedAt: new Date(),
       reviewedBy,
       reviewedByName,
     })
     .where(eq(schema.roomJoinRequests.id, requestId))
-    .returning();
+    .returning()
 
-  return request;
+  return request
 }
 
 /**
@@ -145,18 +138,15 @@ export async function denyJoinRequest(
  */
 export async function getJoinRequest(
   roomId: string,
-  userId: string,
+  userId: string
 ): Promise<schema.RoomJoinRequest | undefined> {
   const results = await db
     .select()
     .from(schema.roomJoinRequests)
     .where(
-      and(
-        eq(schema.roomJoinRequests.roomId, roomId),
-        eq(schema.roomJoinRequests.userId, userId),
-      ),
+      and(eq(schema.roomJoinRequests.roomId, roomId), eq(schema.roomJoinRequests.userId, userId))
     )
-    .limit(1);
+    .limit(1)
 
-  return results[0];
+  return results[0]
 }
diff --git a/apps/web/src/lib/arcade/room-manager.ts b/apps/web/src/lib/arcade/room-manager.ts
index 8c9abe0b..2b070858 100644
--- a/apps/web/src/lib/arcade/room-manager.ts
+++ b/apps/web/src/lib/arcade/room-manager.ts
@@ -3,58 +3,50 @@
  * Handles database operations for arcade rooms
  */
 
-import { and, desc, eq, or } from "drizzle-orm";
-import { db, schema } from "@/db";
-import { generateRoomCode } from "./room-code";
-import type { GameName } from "./validation";
+import { and, desc, eq, or } from 'drizzle-orm'
+import { db, schema } from '@/db'
+import { generateRoomCode } from './room-code'
+import type { GameName } from './validation'
 
 export interface CreateRoomOptions {
-  name: string | null;
-  createdBy: string; // User/guest ID
-  creatorName: string;
-  gameName: GameName;
-  gameConfig: unknown;
-  ttlMinutes?: number; // Default: 60
-  accessMode?:
-    | "open"
-    | "password"
-    | "approval-only"
-    | "restricted"
-    | "locked"
-    | "retired";
-  password?: string;
+  name: string | null
+  createdBy: string // User/guest ID
+  creatorName: string
+  gameName: GameName
+  gameConfig: unknown
+  ttlMinutes?: number // Default: 60
+  accessMode?: 'open' | 'password' | 'approval-only' | 'restricted' | 'locked' | 'retired'
+  password?: string
 }
 
 export interface UpdateRoomOptions {
-  name?: string;
-  status?: "lobby" | "playing" | "finished";
-  currentSessionId?: string | null;
-  totalGamesPlayed?: number;
+  name?: string
+  status?: 'lobby' | 'playing' | 'finished'
+  currentSessionId?: string | null
+  totalGamesPlayed?: number
 }
 
 /**
  * Create a new arcade room
  * Generates a unique room code and creates the room in the database
  */
-export async function createRoom(
-  options: CreateRoomOptions,
-): Promise<schema.ArcadeRoom> {
-  const now = new Date();
+export async function createRoom(options: CreateRoomOptions): Promise<schema.ArcadeRoom> {
+  const now = new Date()
 
   // Generate unique room code (retry up to 5 times if collision)
-  let code = generateRoomCode();
-  let attempts = 0;
-  const MAX_ATTEMPTS = 5;
+  let code = generateRoomCode()
+  let attempts = 0
+  const MAX_ATTEMPTS = 5
 
   while (attempts < MAX_ATTEMPTS) {
-    const existing = await getRoomByCode(code);
-    if (!existing) break;
-    code = generateRoomCode();
-    attempts++;
+    const existing = await getRoomByCode(code)
+    if (!existing) break
+    code = generateRoomCode()
+    attempts++
   }
 
   if (attempts === MAX_ATTEMPTS) {
-    throw new Error("Failed to generate unique room code");
+    throw new Error('Failed to generate unique room code')
   }
 
   const newRoom: schema.NewArcadeRoom = {
@@ -65,43 +57,36 @@ export async function createRoom(
     createdAt: now,
     lastActivity: now,
     ttlMinutes: options.ttlMinutes || 60,
-    accessMode: options.accessMode || "open", // Default to open access
+    accessMode: options.accessMode || 'open', // Default to open access
     password: options.password || null,
     gameName: options.gameName,
     gameConfig: options.gameConfig as any,
-    status: "lobby",
+    status: 'lobby',
     currentSessionId: null,
     totalGamesPlayed: 0,
-  };
+  }
 
-  const [room] = await db
-    .insert(schema.arcadeRooms)
-    .values(newRoom)
-    .returning();
-  console.log("[Room Manager] Created room:", room.id, "code:", room.code);
-  return room;
+  const [room] = await db.insert(schema.arcadeRooms).values(newRoom).returning()
+  console.log('[Room Manager] Created room:', room.id, 'code:', room.code)
+  return room
 }
 
 /**
  * Get a room by ID
  */
-export async function getRoomById(
-  roomId: string,
-): Promise<schema.ArcadeRoom | undefined> {
+export async function getRoomById(roomId: string): Promise<schema.ArcadeRoom | undefined> {
   return await db.query.arcadeRooms.findFirst({
     where: eq(schema.arcadeRooms.id, roomId),
-  });
+  })
 }
 
 /**
  * Get a room by code
  */
-export async function getRoomByCode(
-  code: string,
-): Promise<schema.ArcadeRoom | undefined> {
+export async function getRoomByCode(code: string): Promise<schema.ArcadeRoom | undefined> {
   return await db.query.arcadeRooms.findFirst({
     where: eq(schema.arcadeRooms.code, code.toUpperCase()),
-  });
+  })
 }
 
 /**
@@ -109,23 +94,23 @@ export async function getRoomByCode(
  */
 export async function updateRoom(
   roomId: string,
-  updates: UpdateRoomOptions,
+  updates: UpdateRoomOptions
 ): Promise<schema.ArcadeRoom | undefined> {
-  const now = new Date();
+  const now = new Date()
 
   // Always update lastActivity on any room update
   const updateData = {
     ...updates,
     lastActivity: now,
-  };
+  }
 
   const [updated] = await db
     .update(schema.arcadeRooms)
     .set(updateData)
     .where(eq(schema.arcadeRooms.id, roomId))
-    .returning();
+    .returning()
 
-  return updated;
+  return updated
 }
 
 /**
@@ -136,7 +121,7 @@ export async function touchRoom(roomId: string): Promise<void> {
   await db
     .update(schema.arcadeRooms)
     .set({ lastActivity: new Date() })
-    .where(eq(schema.arcadeRooms.id, roomId));
+    .where(eq(schema.arcadeRooms.id, roomId))
 }
 
 /**
@@ -144,8 +129,8 @@ export async function touchRoom(roomId: string): Promise<void> {
  * Cascade deletes all room members
  */
 export async function deleteRoom(roomId: string): Promise<void> {
-  await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, roomId));
-  console.log("[Room Manager] Deleted room:", roomId);
+  await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, roomId))
+  console.log('[Room Manager] Deleted room:', roomId)
 }
 
 /**
@@ -153,34 +138,26 @@ export async function deleteRoom(roomId: string): Promise<void> {
  * Returns rooms ordered by most recently active
  * Only returns openly accessible rooms (accessMode: 'open' or 'password')
  */
-export async function listActiveRooms(
-  gameName?: GameName,
-): Promise<schema.ArcadeRoom[]> {
-  const whereConditions = [];
+export async function listActiveRooms(gameName?: GameName): Promise<schema.ArcadeRoom[]> {
+  const whereConditions = []
 
   // Filter by game if specified
   if (gameName) {
-    whereConditions.push(eq(schema.arcadeRooms.gameName, gameName));
+    whereConditions.push(eq(schema.arcadeRooms.gameName, gameName))
   }
 
   // Only return accessible rooms in lobby or playing status
   // Exclude locked, retired, restricted, and approval-only rooms
   whereConditions.push(
-    or(
-      eq(schema.arcadeRooms.accessMode, "open"),
-      eq(schema.arcadeRooms.accessMode, "password"),
-    ),
-    or(
-      eq(schema.arcadeRooms.status, "lobby"),
-      eq(schema.arcadeRooms.status, "playing"),
-    ),
-  );
+    or(eq(schema.arcadeRooms.accessMode, 'open'), eq(schema.arcadeRooms.accessMode, 'password')),
+    or(eq(schema.arcadeRooms.status, 'lobby'), eq(schema.arcadeRooms.status, 'playing'))
+  )
 
   return await db.query.arcadeRooms.findMany({
     where: whereConditions.length > 0 ? and(...whereConditions) : undefined,
     orderBy: [desc(schema.arcadeRooms.lastActivity)],
     limit: 50, // Limit to 50 most recent rooms
-  });
+  })
 }
 
 /**
@@ -188,38 +165,31 @@ export async function listActiveRooms(
  * Delete rooms that have exceeded their TTL
  */
 export async function cleanupExpiredRooms(): Promise<number> {
-  const now = new Date();
+  const now = new Date()
 
   // Find rooms where lastActivity + ttlMinutes < now
   const expiredRooms = await db.query.arcadeRooms.findMany({
     columns: { id: true, ttlMinutes: true, lastActivity: true },
-  });
+  })
 
   const toDelete = expiredRooms.filter((room) => {
-    const expiresAt = new Date(
-      room.lastActivity.getTime() + room.ttlMinutes * 60 * 1000,
-    );
-    return expiresAt < now;
-  });
+    const expiresAt = new Date(room.lastActivity.getTime() + room.ttlMinutes * 60 * 1000)
+    return expiresAt < now
+  })
 
   if (toDelete.length > 0) {
-    const ids = toDelete.map((r) => r.id);
-    await db
-      .delete(schema.arcadeRooms)
-      .where(or(...ids.map((id) => eq(schema.arcadeRooms.id, id))));
-    console.log(`[Room Manager] Cleaned up ${toDelete.length} expired rooms`);
+    const ids = toDelete.map((r) => r.id)
+    await db.delete(schema.arcadeRooms).where(or(...ids.map((id) => eq(schema.arcadeRooms.id, id))))
+    console.log(`[Room Manager] Cleaned up ${toDelete.length} expired rooms`)
   }
 
-  return toDelete.length;
+  return toDelete.length
 }
 
 /**
  * Check if a user is the creator of a room
  */
-export async function isRoomCreator(
-  roomId: string,
-  userId: string,
-): Promise<boolean> {
-  const room = await getRoomById(roomId);
-  return room?.createdBy === userId;
+export async function isRoomCreator(roomId: string, userId: string): Promise<boolean> {
+  const room = await getRoomById(roomId)
+  return room?.createdBy === userId
 }
diff --git a/apps/web/src/lib/arcade/room-member-history.ts b/apps/web/src/lib/arcade/room-member-history.ts
index 967c5bfe..63a67455 100644
--- a/apps/web/src/lib/arcade/room-member-history.ts
+++ b/apps/web/src/lib/arcade/room-member-history.ts
@@ -3,20 +3,20 @@
  * Tracks all users who have ever been in a room
  */
 
-import { and, eq } from "drizzle-orm";
-import { db, schema } from "@/db";
+import { and, eq } from 'drizzle-orm'
+import { db, schema } from '@/db'
 
 /**
  * Record or update a user's membership in room history
  * This is append-only for new users, or updates the lastAction for existing users
  */
 export async function recordRoomMemberHistory(params: {
-  roomId: string;
-  userId: string;
-  displayName: string;
-  action: "active" | "left" | "kicked" | "banned";
+  roomId: string
+  userId: string
+  displayName: string
+  action: 'active' | 'left' | 'kicked' | 'banned'
 }): Promise<schema.RoomMemberHistory> {
-  const now = new Date();
+  const now = new Date()
 
   // Check if this user already has a history entry for this room
   const existing = await db
@@ -25,10 +25,10 @@ export async function recordRoomMemberHistory(params: {
     .where(
       and(
         eq(schema.roomMemberHistory.roomId, params.roomId),
-        eq(schema.roomMemberHistory.userId, params.userId),
-      ),
+        eq(schema.roomMemberHistory.userId, params.userId)
+      )
     )
-    .limit(1);
+    .limit(1)
 
   if (existing.length > 0) {
     // Update existing record
@@ -41,8 +41,8 @@ export async function recordRoomMemberHistory(params: {
         displayName: params.displayName, // Update display name in case it changed
       })
       .where(eq(schema.roomMemberHistory.id, existing[0].id))
-      .returning();
-    return updated;
+      .returning()
+    return updated
   }
 
   // Create new history record
@@ -57,28 +57,26 @@ export async function recordRoomMemberHistory(params: {
       lastAction: params.action,
       lastActionAt: now,
     })
-    .returning();
+    .returning()
 
-  console.log("[Room History] Recorded history:", {
+  console.log('[Room History] Recorded history:', {
     userId: params.userId,
     roomId: params.roomId,
     action: params.action,
-  });
+  })
 
-  return history;
+  return history
 }
 
 /**
  * Get all historical members for a room
  */
-export async function getRoomMemberHistory(
-  roomId: string,
-): Promise<schema.RoomMemberHistory[]> {
+export async function getRoomMemberHistory(roomId: string): Promise<schema.RoomMemberHistory[]> {
   return await db
     .select()
     .from(schema.roomMemberHistory)
     .where(eq(schema.roomMemberHistory.roomId, roomId))
-    .orderBy(schema.roomMemberHistory.firstJoinedAt);
+    .orderBy(schema.roomMemberHistory.firstJoinedAt)
 }
 
 /**
@@ -86,20 +84,17 @@ export async function getRoomMemberHistory(
  */
 export async function getUserRoomHistory(
   roomId: string,
-  userId: string,
+  userId: string
 ): Promise<schema.RoomMemberHistory | undefined> {
   const results = await db
     .select()
     .from(schema.roomMemberHistory)
     .where(
-      and(
-        eq(schema.roomMemberHistory.roomId, roomId),
-        eq(schema.roomMemberHistory.userId, userId),
-      ),
+      and(eq(schema.roomMemberHistory.roomId, roomId), eq(schema.roomMemberHistory.userId, userId))
     )
-    .limit(1);
+    .limit(1)
 
-  return results[0];
+  return results[0]
 }
 
 /**
@@ -108,9 +103,9 @@ export async function getUserRoomHistory(
 export async function updateRoomMemberAction(
   roomId: string,
   userId: string,
-  action: "active" | "left" | "kicked" | "banned",
+  action: 'active' | 'left' | 'kicked' | 'banned'
 ): Promise<void> {
-  const now = new Date();
+  const now = new Date()
 
   await db
     .update(schema.roomMemberHistory)
@@ -120,30 +115,27 @@ export async function updateRoomMemberAction(
       lastSeenAt: now,
     })
     .where(
-      and(
-        eq(schema.roomMemberHistory.roomId, roomId),
-        eq(schema.roomMemberHistory.userId, userId),
-      ),
-    );
+      and(eq(schema.roomMemberHistory.roomId, roomId), eq(schema.roomMemberHistory.userId, userId))
+    )
 
-  console.log("[Room History] Updated action:", { userId, roomId, action });
+  console.log('[Room History] Updated action:', { userId, roomId, action })
 }
 
 export interface HistoricalMemberWithStatus {
-  userId: string;
-  displayName: string;
-  firstJoinedAt: Date;
-  lastSeenAt: Date;
-  status: "active" | "banned" | "kicked" | "left";
-  isCurrentlyInRoom: boolean;
-  isBanned: boolean;
+  userId: string
+  displayName: string
+  firstJoinedAt: Date
+  lastSeenAt: Date
+  status: 'active' | 'banned' | 'kicked' | 'left'
+  isCurrentlyInRoom: boolean
+  isBanned: boolean
   banDetails?: {
-    reason: string;
-    bannedBy: string;
-    bannedByName: string;
-    bannedAt: Date;
-  };
-  invitationStatus?: "pending" | "accepted" | "declined" | "expired" | null;
+    reason: string
+    bannedBy: string
+    bannedByName: string
+    bannedAt: Date
+  }
+  invitationStatus?: 'pending' | 'accepted' | 'declined' | 'expired' | null
 }
 
 /**
@@ -151,49 +143,46 @@ export interface HistoricalMemberWithStatus {
  * Combines data from history, current members, bans, and invitations
  */
 export async function getRoomHistoricalMembersWithStatus(
-  roomId: string,
+  roomId: string
 ): Promise<HistoricalMemberWithStatus[]> {
   // Get all historical members
-  const history = await getRoomMemberHistory(roomId);
+  const history = await getRoomMemberHistory(roomId)
 
   // Get current members
   const currentMembers = await db
     .select()
     .from(schema.roomMembers)
-    .where(eq(schema.roomMembers.roomId, roomId));
+    .where(eq(schema.roomMembers.roomId, roomId))
 
-  const currentMemberIds = new Set(currentMembers.map((m) => m.userId));
+  const currentMemberIds = new Set(currentMembers.map((m) => m.userId))
 
   // Get all bans
-  const bans = await db
-    .select()
-    .from(schema.roomBans)
-    .where(eq(schema.roomBans.roomId, roomId));
+  const bans = await db.select().from(schema.roomBans).where(eq(schema.roomBans.roomId, roomId))
 
-  const banMap = new Map(bans.map((ban) => [ban.userId, ban]));
+  const banMap = new Map(bans.map((ban) => [ban.userId, ban]))
 
   // Get all invitations
   const invitations = await db
     .select()
     .from(schema.roomInvitations)
-    .where(eq(schema.roomInvitations.roomId, roomId));
+    .where(eq(schema.roomInvitations.roomId, roomId))
 
-  const invitationMap = new Map(invitations.map((inv) => [inv.userId, inv]));
+  const invitationMap = new Map(invitations.map((inv) => [inv.userId, inv]))
 
   // Combine into result
   const results: HistoricalMemberWithStatus[] = history.map((h) => {
-    const isCurrentlyInRoom = currentMemberIds.has(h.userId);
-    const ban = banMap.get(h.userId);
-    const invitation = invitationMap.get(h.userId);
+    const isCurrentlyInRoom = currentMemberIds.has(h.userId)
+    const ban = banMap.get(h.userId)
+    const invitation = invitationMap.get(h.userId)
 
     // Determine current status
-    let status: "active" | "banned" | "kicked" | "left";
+    let status: 'active' | 'banned' | 'kicked' | 'left'
     if (ban) {
-      status = "banned";
+      status = 'banned'
     } else if (isCurrentlyInRoom) {
-      status = "active";
+      status = 'active'
     } else {
-      status = h.lastAction; // Use the recorded action from history
+      status = h.lastAction // Use the recorded action from history
     }
 
     return {
@@ -213,8 +202,8 @@ export async function getRoomHistoricalMembersWithStatus(
           }
         : undefined,
       invitationStatus: invitation?.status || null,
-    };
-  });
+    }
+  })
 
-  return results;
+  return results
 }
diff --git a/apps/web/src/lib/arcade/room-membership.ts b/apps/web/src/lib/arcade/room-membership.ts
index c5c43ab1..79d6cf01 100644
--- a/apps/web/src/lib/arcade/room-membership.ts
+++ b/apps/web/src/lib/arcade/room-membership.ts
@@ -3,20 +3,20 @@
  * Handles database operations for room members
  */
 
-import { and, eq } from "drizzle-orm";
-import { db, schema } from "@/db";
-import { recordRoomMemberHistory } from "./room-member-history";
+import { and, eq } from 'drizzle-orm'
+import { db, schema } from '@/db'
+import { recordRoomMemberHistory } from './room-member-history'
 
 export interface AddMemberOptions {
-  roomId: string;
-  userId: string; // User/guest ID
-  displayName: string;
-  isCreator?: boolean;
+  roomId: string
+  userId: string // User/guest ID
+  displayName: string
+  isCreator?: boolean
 }
 
 export interface AutoLeaveResult {
-  leftRooms: string[]; // Room IDs user was removed from
-  previousRoomMembers: Array<{ roomId: string; member: schema.RoomMember }>;
+  leftRooms: string[] // Room IDs user was removed from
+  previousRoomMembers: Array<{ roomId: string; member: schema.RoomMember }>
 }
 
 /**
@@ -25,12 +25,12 @@ export interface AutoLeaveResult {
  * Returns the new membership and info about rooms that were auto-left
  */
 export async function addRoomMember(
-  options: AddMemberOptions,
+  options: AddMemberOptions
 ): Promise<{ member: schema.RoomMember; autoLeaveResult?: AutoLeaveResult }> {
-  const now = new Date();
+  const now = new Date()
 
   // Check if member already exists in THIS room
-  const existing = await getRoomMember(options.roomId, options.userId);
+  const existing = await getRoomMember(options.roomId, options.userId)
   if (existing) {
     // Already in this room - just update status (no auto-leave needed)
     const [updated] = await db
@@ -40,34 +40,32 @@ export async function addRoomMember(
         lastSeen: now,
       })
       .where(eq(schema.roomMembers.id, existing.id))
-      .returning();
-    return { member: updated };
+      .returning()
+    return { member: updated }
   }
 
   // AUTO-LEAVE LOGIC: Remove from all other rooms before joining this one
-  const currentRooms = await getUserRooms(options.userId);
+  const currentRooms = await getUserRooms(options.userId)
   const autoLeaveResult: AutoLeaveResult = {
     leftRooms: [],
     previousRoomMembers: [],
-  };
+  }
 
   for (const roomId of currentRooms) {
     if (roomId !== options.roomId) {
       // Get member info before removing (for socket events)
-      const memberToRemove = await getRoomMember(roomId, options.userId);
+      const memberToRemove = await getRoomMember(roomId, options.userId)
       if (memberToRemove) {
         autoLeaveResult.previousRoomMembers.push({
           roomId,
           member: memberToRemove,
-        });
+        })
       }
 
       // Remove from room
-      await removeMember(roomId, options.userId);
-      autoLeaveResult.leftRooms.push(roomId);
-      console.log(
-        `[Room Membership] Auto-left room ${roomId} for user ${options.userId}`,
-      );
+      await removeMember(roomId, options.userId)
+      autoLeaveResult.leftRooms.push(roomId)
+      console.log(`[Room Membership] Auto-left room ${roomId} for user ${options.userId}`)
     }
   }
 
@@ -80,50 +78,38 @@ export async function addRoomMember(
     joinedAt: now,
     lastSeen: now,
     isOnline: true,
-  };
+  }
 
   try {
-    const [member] = await db
-      .insert(schema.roomMembers)
-      .values(newMember)
-      .returning();
-    console.log(
-      "[Room Membership] Added member:",
-      member.userId,
-      "to room:",
-      member.roomId,
-    );
+    const [member] = await db.insert(schema.roomMembers).values(newMember).returning()
+    console.log('[Room Membership] Added member:', member.userId, 'to room:', member.roomId)
 
     // Record in history
     await recordRoomMemberHistory({
       roomId: options.roomId,
       userId: options.userId,
       displayName: options.displayName,
-      action: "active",
-    });
+      action: 'active',
+    })
 
     return {
       member,
-      autoLeaveResult:
-        autoLeaveResult.leftRooms.length > 0 ? autoLeaveResult : undefined,
-    };
+      autoLeaveResult: autoLeaveResult.leftRooms.length > 0 ? autoLeaveResult : undefined,
+    }
   } catch (error: any) {
     // Handle unique constraint violation
     // This should rarely happen due to auto-leave logic above, but catch it for safety
     if (
-      error.code === "SQLITE_CONSTRAINT" ||
-      error.message?.includes("UNIQUE") ||
-      error.message?.includes("unique")
+      error.code === 'SQLITE_CONSTRAINT' ||
+      error.message?.includes('UNIQUE') ||
+      error.message?.includes('unique')
     ) {
-      console.error(
-        "[Room Membership] Unique constraint violation:",
-        error.message,
-      );
+      console.error('[Room Membership] Unique constraint violation:', error.message)
       throw new Error(
-        "ROOM_MEMBERSHIP_CONFLICT: User is already in another room. This should have been handled by auto-leave logic.",
-      );
+        'ROOM_MEMBERSHIP_CONFLICT: User is already in another room. This should have been handled by auto-leave logic.'
+      )
     }
-    throw error;
+    throw error
   }
 }
 
@@ -132,41 +118,31 @@ export async function addRoomMember(
  */
 export async function getRoomMember(
   roomId: string,
-  userId: string,
+  userId: string
 ): Promise<schema.RoomMember | undefined> {
   return await db.query.roomMembers.findFirst({
-    where: and(
-      eq(schema.roomMembers.roomId, roomId),
-      eq(schema.roomMembers.userId, userId),
-    ),
-  });
+    where: and(eq(schema.roomMembers.roomId, roomId), eq(schema.roomMembers.userId, userId)),
+  })
 }
 
 /**
  * Get all members in a room
  */
-export async function getRoomMembers(
-  roomId: string,
-): Promise<schema.RoomMember[]> {
+export async function getRoomMembers(roomId: string): Promise<schema.RoomMember[]> {
   return await db.query.roomMembers.findMany({
     where: eq(schema.roomMembers.roomId, roomId),
     orderBy: schema.roomMembers.joinedAt,
-  });
+  })
 }
 
 /**
  * Get online members in a room
  */
-export async function getOnlineRoomMembers(
-  roomId: string,
-): Promise<schema.RoomMember[]> {
+export async function getOnlineRoomMembers(roomId: string): Promise<schema.RoomMember[]> {
   return await db.query.roomMembers.findMany({
-    where: and(
-      eq(schema.roomMembers.roomId, roomId),
-      eq(schema.roomMembers.isOnline, true),
-    ),
+    where: and(eq(schema.roomMembers.roomId, roomId), eq(schema.roomMembers.isOnline, true)),
     orderBy: schema.roomMembers.joinedAt,
-  });
+  })
 }
 
 /**
@@ -175,7 +151,7 @@ export async function getOnlineRoomMembers(
 export async function setMemberOnline(
   roomId: string,
   userId: string,
-  isOnline: boolean,
+  isOnline: boolean
 ): Promise<void> {
   await db
     .update(schema.roomMembers)
@@ -183,30 +159,17 @@ export async function setMemberOnline(
       isOnline,
       lastSeen: new Date(),
     })
-    .where(
-      and(
-        eq(schema.roomMembers.roomId, roomId),
-        eq(schema.roomMembers.userId, userId),
-      ),
-    );
+    .where(and(eq(schema.roomMembers.roomId, roomId), eq(schema.roomMembers.userId, userId)))
 }
 
 /**
  * Update member's last seen timestamp
  */
-export async function touchMember(
-  roomId: string,
-  userId: string,
-): Promise<void> {
+export async function touchMember(roomId: string, userId: string): Promise<void> {
   await db
     .update(schema.roomMembers)
     .set({ lastSeen: new Date() })
-    .where(
-      and(
-        eq(schema.roomMembers.roomId, roomId),
-        eq(schema.roomMembers.userId, userId),
-      ),
-    );
+    .where(and(eq(schema.roomMembers.roomId, roomId), eq(schema.roomMembers.userId, userId)))
 }
 
 /**
@@ -214,27 +177,14 @@ export async function touchMember(
  * Note: This only removes from active members. History is preserved.
  * Use updateRoomMemberAction from room-member-history to set the reason (left/kicked/banned)
  */
-export async function removeMember(
-  roomId: string,
-  userId: string,
-): Promise<void> {
+export async function removeMember(roomId: string, userId: string): Promise<void> {
   // Get member info before deleting
-  const member = await getRoomMember(roomId, userId);
+  const member = await getRoomMember(roomId, userId)
 
   await db
     .delete(schema.roomMembers)
-    .where(
-      and(
-        eq(schema.roomMembers.roomId, roomId),
-        eq(schema.roomMembers.userId, userId),
-      ),
-    );
-  console.log(
-    "[Room Membership] Removed member:",
-    userId,
-    "from room:",
-    roomId,
-  );
+    .where(and(eq(schema.roomMembers.roomId, roomId), eq(schema.roomMembers.userId, userId)))
+  console.log('[Room Membership] Removed member:', userId, 'from room:', roomId)
 
   // Update history to show they left (default action)
   // This can be overridden by kick/ban functions
@@ -243,8 +193,8 @@ export async function removeMember(
       roomId,
       userId,
       displayName: member.displayName,
-      action: "left",
-    });
+      action: 'left',
+    })
   }
 }
 
@@ -252,29 +202,24 @@ export async function removeMember(
  * Remove all members from a room
  */
 export async function removeAllMembers(roomId: string): Promise<void> {
-  await db
-    .delete(schema.roomMembers)
-    .where(eq(schema.roomMembers.roomId, roomId));
-  console.log("[Room Membership] Removed all members from room:", roomId);
+  await db.delete(schema.roomMembers).where(eq(schema.roomMembers.roomId, roomId))
+  console.log('[Room Membership] Removed all members from room:', roomId)
 }
 
 /**
  * Get count of online members in a room
  */
 export async function getOnlineMemberCount(roomId: string): Promise<number> {
-  const members = await getOnlineRoomMembers(roomId);
-  return members.length;
+  const members = await getOnlineRoomMembers(roomId)
+  return members.length
 }
 
 /**
  * Check if a user is a member of a room
  */
-export async function isMember(
-  roomId: string,
-  userId: string,
-): Promise<boolean> {
-  const member = await getRoomMember(roomId, userId);
-  return !!member;
+export async function isMember(roomId: string, userId: string): Promise<boolean> {
+  const member = await getRoomMember(roomId, userId)
+  return !!member
 }
 
 /**
@@ -284,6 +229,6 @@ export async function getUserRooms(userId: string): Promise<string[]> {
   const memberships = await db.query.roomMembers.findMany({
     where: eq(schema.roomMembers.userId, userId),
     columns: { roomId: true },
-  });
-  return memberships.map((m) => m.roomId);
+  })
+  return memberships.map((m) => m.roomId)
 }
diff --git a/apps/web/src/lib/arcade/room-moderation.ts b/apps/web/src/lib/arcade/room-moderation.ts
index 03883c97..34a7a6db 100644
--- a/apps/web/src/lib/arcade/room-moderation.ts
+++ b/apps/web/src/lib/arcade/room-moderation.ts
@@ -3,25 +3,22 @@
  * Handles reports, bans, and kicks for arcade rooms
  */
 
-import { and, desc, eq } from "drizzle-orm";
-import { db } from "@/db";
-import { roomBans, roomMembers, roomReports } from "@/db/schema";
-import { recordRoomMemberHistory } from "./room-member-history";
+import { and, desc, eq } from 'drizzle-orm'
+import { db } from '@/db'
+import { roomBans, roomMembers, roomReports } from '@/db/schema'
+import { recordRoomMemberHistory } from './room-member-history'
 
 /**
  * Check if a user is banned from a room
  */
-export async function isUserBanned(
-  roomId: string,
-  userId: string,
-): Promise<boolean> {
+export async function isUserBanned(roomId: string, userId: string): Promise<boolean> {
   const ban = await db
     .select()
     .from(roomBans)
     .where(and(eq(roomBans.roomId, roomId), eq(roomBans.userId, userId)))
-    .limit(1);
+    .limit(1)
 
-  return ban.length > 0;
+  return ban.length > 0
 }
 
 /**
@@ -32,26 +29,20 @@ export async function getRoomBans(roomId: string) {
     .select()
     .from(roomBans)
     .where(eq(roomBans.roomId, roomId))
-    .orderBy(desc(roomBans.createdAt));
+    .orderBy(desc(roomBans.createdAt))
 }
 
 /**
  * Ban a user from a room
  */
 export async function banUserFromRoom(params: {
-  roomId: string;
-  userId: string;
-  userName: string;
-  bannedBy: string;
-  bannedByName: string;
-  reason:
-    | "harassment"
-    | "cheating"
-    | "inappropriate-name"
-    | "spam"
-    | "afk"
-    | "other";
-  notes?: string;
+  roomId: string
+  userId: string
+  userName: string
+  bannedBy: string
+  bannedByName: string
+  reason: 'harassment' | 'cheating' | 'inappropriate-name' | 'spam' | 'afk' | 'other'
+  notes?: string
 }) {
   // Insert ban record (upsert in case they were already banned)
   const [ban] = await db
@@ -75,36 +66,29 @@ export async function banUserFromRoom(params: {
         createdAt: new Date(),
       },
     })
-    .returning();
+    .returning()
 
   // Remove user from room members
   await db
     .delete(roomMembers)
-    .where(
-      and(
-        eq(roomMembers.roomId, params.roomId),
-        eq(roomMembers.userId, params.userId),
-      ),
-    );
+    .where(and(eq(roomMembers.roomId, params.roomId), eq(roomMembers.userId, params.userId)))
 
   // Record in history
   await recordRoomMemberHistory({
     roomId: params.roomId,
     userId: params.userId,
     displayName: params.userName,
-    action: "banned",
-  });
+    action: 'banned',
+  })
 
-  return ban;
+  return ban
 }
 
 /**
  * Unban a user from a room
  */
 export async function unbanUserFromRoom(roomId: string, userId: string) {
-  await db
-    .delete(roomBans)
-    .where(and(eq(roomBans.roomId, roomId), eq(roomBans.userId, userId)));
+  await db.delete(roomBans).where(and(eq(roomBans.roomId, roomId), eq(roomBans.userId, userId)))
 }
 
 /**
@@ -116,11 +100,11 @@ export async function kickUserFromRoom(roomId: string, userId: string) {
     .select()
     .from(roomMembers)
     .where(and(eq(roomMembers.roomId, roomId), eq(roomMembers.userId, userId)))
-    .limit(1);
+    .limit(1)
 
   await db
     .delete(roomMembers)
-    .where(and(eq(roomMembers.roomId, roomId), eq(roomMembers.userId, userId)));
+    .where(and(eq(roomMembers.roomId, roomId), eq(roomMembers.userId, userId)))
 
   // Record in history
   if (member.length > 0) {
@@ -128,8 +112,8 @@ export async function kickUserFromRoom(roomId: string, userId: string) {
       roomId,
       userId,
       displayName: member[0].displayName,
-      action: "kicked",
-    });
+      action: 'kicked',
+    })
   }
 }
 
@@ -137,19 +121,13 @@ export async function kickUserFromRoom(roomId: string, userId: string) {
  * Submit a report
  */
 export async function createReport(params: {
-  roomId: string;
-  reporterId: string;
-  reporterName: string;
-  reportedUserId: string;
-  reportedUserName: string;
-  reason:
-    | "harassment"
-    | "cheating"
-    | "inappropriate-name"
-    | "spam"
-    | "afk"
-    | "other";
-  details?: string;
+  roomId: string
+  reporterId: string
+  reporterName: string
+  reportedUserId: string
+  reportedUserName: string
+  reason: 'harassment' | 'cheating' | 'inappropriate-name' | 'spam' | 'afk' | 'other'
+  details?: string
 }) {
   const [report] = await db
     .insert(roomReports)
@@ -161,11 +139,11 @@ export async function createReport(params: {
       reportedUserName: params.reportedUserName,
       reason: params.reason,
       details: params.details,
-      status: "pending",
+      status: 'pending',
     })
-    .returning();
+    .returning()
 
-  return report;
+  return report
 }
 
 /**
@@ -175,10 +153,8 @@ export async function getPendingReports(roomId: string) {
   return db
     .select()
     .from(roomReports)
-    .where(
-      and(eq(roomReports.roomId, roomId), eq(roomReports.status, "pending")),
-    )
-    .orderBy(desc(roomReports.createdAt));
+    .where(and(eq(roomReports.roomId, roomId), eq(roomReports.status, 'pending')))
+    .orderBy(desc(roomReports.createdAt))
 }
 
 /**
@@ -189,7 +165,7 @@ export async function getAllReports(roomId: string) {
     .select()
     .from(roomReports)
     .where(eq(roomReports.roomId, roomId))
-    .orderBy(desc(roomReports.createdAt));
+    .orderBy(desc(roomReports.createdAt))
 }
 
 /**
@@ -199,11 +175,11 @@ export async function markReportReviewed(reportId: string, reviewedBy: string) {
   await db
     .update(roomReports)
     .set({
-      status: "reviewed",
+      status: 'reviewed',
       reviewedAt: new Date(),
       reviewedBy,
     })
-    .where(eq(roomReports.id, reportId));
+    .where(eq(roomReports.id, reportId))
 }
 
 /**
@@ -213,9 +189,9 @@ export async function dismissReport(reportId: string, reviewedBy: string) {
   await db
     .update(roomReports)
     .set({
-      status: "dismissed",
+      status: 'dismissed',
       reviewedAt: new Date(),
       reviewedBy,
     })
-    .where(eq(roomReports.id, reportId));
+    .where(eq(roomReports.id, reportId))
 }
diff --git a/apps/web/src/lib/arcade/room-ttl-cleanup.ts b/apps/web/src/lib/arcade/room-ttl-cleanup.ts
index ce0204c4..2e7aa9b2 100644
--- a/apps/web/src/lib/arcade/room-ttl-cleanup.ts
+++ b/apps/web/src/lib/arcade/room-ttl-cleanup.ts
@@ -3,12 +3,12 @@
  * Periodically cleans up expired rooms
  */
 
-import { cleanupExpiredRooms } from "./room-manager";
+import { cleanupExpiredRooms } from './room-manager'
 
 // Cleanup interval: run every 5 minutes
-const CLEANUP_INTERVAL_MS = 5 * 60 * 1000;
+const CLEANUP_INTERVAL_MS = 5 * 60 * 1000
 
-let cleanupInterval: NodeJS.Timeout | null = null;
+let cleanupInterval: NodeJS.Timeout | null = null
 
 /**
  * Start the TTL cleanup scheduler
@@ -16,36 +16,34 @@ let cleanupInterval: NodeJS.Timeout | null = null;
  */
 export function startRoomTTLCleanup() {
   if (cleanupInterval) {
-    console.log("[Room TTL] Cleanup scheduler already running");
-    return;
+    console.log('[Room TTL] Cleanup scheduler already running')
+    return
   }
 
-  console.log("[Room TTL] Starting cleanup scheduler (every 5 minutes)");
+  console.log('[Room TTL] Starting cleanup scheduler (every 5 minutes)')
 
   // Run immediately on start
   cleanupExpiredRooms()
     .then((count) => {
       if (count > 0) {
-        console.log(
-          `[Room TTL] Initial cleanup removed ${count} expired rooms`,
-        );
+        console.log(`[Room TTL] Initial cleanup removed ${count} expired rooms`)
       }
     })
     .catch((error) => {
-      console.error("[Room TTL] Initial cleanup failed:", error);
-    });
+      console.error('[Room TTL] Initial cleanup failed:', error)
+    })
 
   // Then run periodically
   cleanupInterval = setInterval(async () => {
     try {
-      const count = await cleanupExpiredRooms();
+      const count = await cleanupExpiredRooms()
       if (count > 0) {
-        console.log(`[Room TTL] Cleanup removed ${count} expired rooms`);
+        console.log(`[Room TTL] Cleanup removed ${count} expired rooms`)
       }
     } catch (error) {
-      console.error("[Room TTL] Cleanup failed:", error);
+      console.error('[Room TTL] Cleanup failed:', error)
     }
-  }, CLEANUP_INTERVAL_MS);
+  }, CLEANUP_INTERVAL_MS)
 }
 
 /**
@@ -53,8 +51,8 @@ export function startRoomTTLCleanup() {
  */
 export function stopRoomTTLCleanup() {
   if (cleanupInterval) {
-    clearInterval(cleanupInterval);
-    cleanupInterval = null;
-    console.log("[Room TTL] Cleanup scheduler stopped");
+    clearInterval(cleanupInterval)
+    cleanupInterval = null
+    console.log('[Room TTL] Cleanup scheduler stopped')
   }
 }
diff --git a/apps/web/src/lib/arcade/session-manager.ts b/apps/web/src/lib/arcade/session-manager.ts
index 8cf51a55..a541aacb 100644
--- a/apps/web/src/lib/arcade/session-manager.ts
+++ b/apps/web/src/lib/arcade/session-manager.ts
@@ -3,45 +3,40 @@
  * Handles database operations and validation for arcade sessions
  */
 
-import { eq, and } from "drizzle-orm";
-import { db, schema } from "@/db";
-import {
-  buildPlayerOwnershipMap,
-  type PlayerOwnershipMap,
-} from "./player-ownership";
-import { getValidator, type GameName } from "./validators";
-import type { GameMove } from "./validation/types";
+import { eq, and } from 'drizzle-orm'
+import { db, schema } from '@/db'
+import { buildPlayerOwnershipMap, type PlayerOwnershipMap } from './player-ownership'
+import { getValidator, type GameName } from './validators'
+import type { GameMove } from './validation/types'
 
 export interface CreateSessionOptions {
-  userId: string; // User who owns/created the session (typically room creator)
-  gameName: GameName;
-  gameUrl: string;
-  initialState: unknown;
-  activePlayers: string[]; // Player IDs (UUIDs)
-  roomId: string; // Required - PRIMARY KEY, one session per room
+  userId: string // User who owns/created the session (typically room creator)
+  gameName: GameName
+  gameUrl: string
+  initialState: unknown
+  activePlayers: string[] // Player IDs (UUIDs)
+  roomId: string // Required - PRIMARY KEY, one session per room
 }
 
 export interface SessionUpdateResult {
-  success: boolean;
-  error?: string;
-  session?: schema.ArcadeSession;
-  versionConflict?: boolean;
+  success: boolean
+  error?: string
+  session?: schema.ArcadeSession
+  versionConflict?: boolean
 }
 
-const TTL_HOURS = 24;
+const TTL_HOURS = 24
 
 /**
  * Helper: Get database user ID from guest ID
  * The API uses guestId (from cookies) but database FKs use the internal user.id
  */
-async function getUserIdFromGuestId(
-  guestId: string,
-): Promise<string | undefined> {
+async function getUserIdFromGuestId(guestId: string): Promise<string | undefined> {
   const user = await db.query.users.findFirst({
     where: eq(schema.users.guestId, guestId),
     columns: { id: true },
-  });
-  return user?.id;
+  })
+  return user?.id
 }
 
 /**
@@ -50,27 +45,25 @@ async function getUserIdFromGuestId(
  * @param roomId - The room ID (primary key)
  */
 export async function getArcadeSessionByRoom(
-  roomId: string,
+  roomId: string
 ): Promise<schema.ArcadeSession | undefined> {
   // roomId is now the PRIMARY KEY, so direct lookup
   const [session] = await db
     .select()
     .from(schema.arcadeSessions)
     .where(eq(schema.arcadeSessions.roomId, roomId))
-    .limit(1);
+    .limit(1)
 
-  if (!session) return undefined;
+  if (!session) return undefined
 
   // Check if session has expired
   if (session.expiresAt < new Date()) {
     // Clean up expired room session
-    await db
-      .delete(schema.arcadeSessions)
-      .where(eq(schema.arcadeSessions.roomId, roomId));
-    return undefined;
+    await db.delete(schema.arcadeSessions).where(eq(schema.arcadeSessions.roomId, roomId))
+    return undefined
   }
 
-  return session;
+  return session
 }
 
 /**
@@ -78,21 +71,21 @@ export async function getArcadeSessionByRoom(
  * For room-based games, roomId is the PRIMARY KEY ensuring one session per room
  */
 export async function createArcadeSession(
-  options: CreateSessionOptions,
+  options: CreateSessionOptions
 ): Promise<schema.ArcadeSession> {
-  const now = new Date();
-  const expiresAt = new Date(now.getTime() + TTL_HOURS * 60 * 60 * 1000);
+  const now = new Date()
+  const expiresAt = new Date(now.getTime() + TTL_HOURS * 60 * 60 * 1000)
 
   // Check if session already exists for this room (roomId is PRIMARY KEY)
-  const existingRoomSession = await getArcadeSessionByRoom(options.roomId);
+  const existingRoomSession = await getArcadeSessionByRoom(options.roomId)
   if (existingRoomSession) {
-    return existingRoomSession;
+    return existingRoomSession
   }
 
   // Find or create user by guest ID
   let user = await db.query.users.findFirst({
     where: eq(schema.users.guestId, options.userId),
-  });
+  })
 
   if (!user) {
     const [newUser] = await db
@@ -101,15 +94,13 @@ export async function createArcadeSession(
         guestId: options.userId, // Let id auto-generate via $defaultFn
         createdAt: now,
       })
-      .returning();
-    user = newUser;
+      .returning()
+    user = newUser
   }
 
   // Delete any existing sessions for this user (to handle UNIQUE constraint on userId)
   // This ensures the user can start a new game session
-  await db
-    .delete(schema.arcadeSessions)
-    .where(eq(schema.arcadeSessions.userId, user.id));
+  await db.delete(schema.arcadeSessions).where(eq(schema.arcadeSessions.userId, user.id))
 
   const newSession: schema.NewArcadeSession = {
     roomId: options.roomId, // PRIMARY KEY - one session per room
@@ -123,28 +114,22 @@ export async function createArcadeSession(
     expiresAt,
     isActive: true,
     version: 1,
-  };
+  }
 
   try {
-    const [session] = await db
-      .insert(schema.arcadeSessions)
-      .values(newSession)
-      .returning();
-    return session;
+    const [session] = await db.insert(schema.arcadeSessions).values(newSession).returning()
+    return session
   } catch (error) {
     // Handle PRIMARY KEY constraint violation (UNIQUE constraint on roomId)
     // This can happen if two users try to create a session for the same room simultaneously
-    if (
-      error instanceof Error &&
-      error.message.includes("UNIQUE constraint failed")
-    ) {
-      const existingSession = await getArcadeSessionByRoom(options.roomId);
+    if (error instanceof Error && error.message.includes('UNIQUE constraint failed')) {
+      const existingSession = await getArcadeSessionByRoom(options.roomId)
       if (existingSession) {
-        return existingSession;
+        return existingSession
       }
     }
     // Re-throw other errors
-    throw error;
+    throw error
   }
 }
 
@@ -154,11 +139,9 @@ export async function createArcadeSession(
  * This function finds sessions where the user is associated
  * @param guestId - The guest ID from the cookie (not the database user.id)
  */
-export async function getArcadeSession(
-  guestId: string,
-): Promise<schema.ArcadeSession | undefined> {
-  const userId = await getUserIdFromGuestId(guestId);
-  if (!userId) return undefined;
+export async function getArcadeSession(guestId: string): Promise<schema.ArcadeSession | undefined> {
+  const userId = await getUserIdFromGuestId(guestId)
+  if (!userId) return undefined
 
   // Query for sessions where this user is associated
   // Since roomId is PRIMARY KEY, there can be multiple rooms but only one session per room
@@ -166,27 +149,27 @@ export async function getArcadeSession(
     .select()
     .from(schema.arcadeSessions)
     .where(eq(schema.arcadeSessions.userId, userId))
-    .limit(1);
+    .limit(1)
 
-  if (!session) return undefined;
+  if (!session) return undefined
 
   // Check if session has expired
   if (session.expiresAt < new Date()) {
-    await deleteArcadeSessionByRoom(session.roomId);
-    return undefined;
+    await deleteArcadeSessionByRoom(session.roomId)
+    return undefined
   }
 
   // Verify the room still exists (roomId is now required/PRIMARY KEY)
   const room = await db.query.arcadeRooms.findFirst({
     where: eq(schema.arcadeRooms.id, session.roomId),
-  });
+  })
 
   if (!room) {
-    await deleteArcadeSessionByRoom(session.roomId);
-    return undefined;
+    await deleteArcadeSessionByRoom(session.roomId)
+    return undefined
   }
 
-  return session;
+  return session
 }
 
 /**
@@ -198,56 +181,48 @@ export async function getArcadeSession(
 export async function applyGameMove(
   userId: string,
   move: GameMove,
-  roomId?: string,
+  roomId?: string
 ): Promise<SessionUpdateResult> {
   // For room-based games, look up the shared room session
   // For solo games, look up the user's personal session
-  const session = roomId
-    ? await getArcadeSessionByRoom(roomId)
-    : await getArcadeSession(userId);
+  const session = roomId ? await getArcadeSessionByRoom(roomId) : await getArcadeSession(userId)
 
   if (!session) {
     return {
       success: false,
-      error: "No active session found",
-    };
+      error: 'No active session found',
+    }
   }
 
   if (!session.isActive) {
     return {
       success: false,
-      error: "Session is not active",
-    };
+      error: 'Session is not active',
+    }
   }
 
   // Get the validator for this game
-  const validator = getValidator(session.currentGame as GameName);
+  const validator = getValidator(session.currentGame as GameName)
 
   // Fetch player ownership for authorization checks (room-based games)
-  let playerOwnership: PlayerOwnershipMap | undefined;
-  let internalUserId: string | undefined;
+  let playerOwnership: PlayerOwnershipMap | undefined
+  let internalUserId: string | undefined
   if (session.roomId) {
     try {
       // Convert guestId to internal userId for ownership comparison
-      internalUserId = await getUserIdFromGuestId(userId);
+      internalUserId = await getUserIdFromGuestId(userId)
       if (!internalUserId) {
-        console.error(
-          "[SessionManager] Failed to convert guestId to userId:",
-          userId,
-        );
+        console.error('[SessionManager] Failed to convert guestId to userId:', userId)
         return {
           success: false,
-          error: "User not found",
-        };
+          error: 'User not found',
+        }
       }
 
       // Use centralized ownership utility
-      playerOwnership = await buildPlayerOwnershipMap(session.roomId);
+      playerOwnership = await buildPlayerOwnershipMap(session.roomId)
     } catch (error) {
-      console.error(
-        "[SessionManager] Failed to fetch player ownership:",
-        error,
-      );
+      console.error('[SessionManager] Failed to fetch player ownership:', error)
     }
   }
 
@@ -255,18 +230,18 @@ export async function applyGameMove(
   const validationResult = validator.validateMove(session.gameState, move, {
     userId: internalUserId || userId, // Use internal userId for room-based games
     playerOwnership,
-  });
+  })
 
   if (!validationResult.valid) {
     return {
       success: false,
-      error: validationResult.error || "Invalid move",
-    };
+      error: validationResult.error || 'Invalid move',
+    }
   }
 
   // Update the session with new state (using optimistic locking)
-  const now = new Date();
-  const expiresAt = new Date(now.getTime() + TTL_HOURS * 60 * 60 * 1000);
+  const now = new Date()
+  const expiresAt = new Date(now.getTime() + TTL_HOURS * 60 * 60 * 1000)
 
   try {
     const [updatedSession] = await db
@@ -280,10 +255,10 @@ export async function applyGameMove(
       .where(
         and(
           eq(schema.arcadeSessions.roomId, session.roomId), // Use roomId (PRIMARY KEY)
-          eq(schema.arcadeSessions.version, session.version), // Optimistic locking
-        ),
+          eq(schema.arcadeSessions.version, session.version) // Optimistic locking
+        )
       )
-      .returning();
+      .returning()
 
     if (!updatedSession) {
       // Version conflict - another move was processed first
@@ -292,31 +267,29 @@ export async function applyGameMove(
         .select()
         .from(schema.arcadeSessions)
         .where(eq(schema.arcadeSessions.roomId, session.roomId))
-        .limit(1);
+        .limit(1)
 
-      const versionDiff = currentSession
-        ? currentSession.version - session.version
-        : "unknown";
+      const versionDiff = currentSession ? currentSession.version - session.version : 'unknown'
       console.warn(
-        `[SessionManager] VERSION_CONFLICT room=${session.roomId} game=${session.currentGame} expected_v=${session.version} actual_v=${currentSession?.version} diff=${versionDiff} move=${move.type} user=${internalUserId || userId}`,
-      );
+        `[SessionManager] VERSION_CONFLICT room=${session.roomId} game=${session.currentGame} expected_v=${session.version} actual_v=${currentSession?.version} diff=${versionDiff} move=${move.type} user=${internalUserId || userId}`
+      )
       return {
         success: false,
-        error: "Version conflict - please retry",
+        error: 'Version conflict - please retry',
         versionConflict: true,
-      };
+      }
     }
 
     return {
       success: true,
       session: updatedSession,
-    };
+    }
   } catch (error) {
-    console.error("Error updating session:", error);
+    console.error('Error updating session:', error)
     return {
       success: false,
-      error: "Database error",
-    };
+      error: 'Database error',
+    }
   }
 }
 
@@ -325,9 +298,7 @@ export async function applyGameMove(
  * @param roomId - The room ID (PRIMARY KEY)
  */
 export async function deleteArcadeSessionByRoom(roomId: string): Promise<void> {
-  await db
-    .delete(schema.arcadeSessions)
-    .where(eq(schema.arcadeSessions.roomId, roomId));
+  await db.delete(schema.arcadeSessions).where(eq(schema.arcadeSessions.roomId, roomId))
 }
 
 /**
@@ -336,11 +307,11 @@ export async function deleteArcadeSessionByRoom(roomId: string): Promise<void> {
  */
 export async function deleteArcadeSession(guestId: string): Promise<void> {
   // First find the session to get its roomId
-  const session = await getArcadeSession(guestId);
-  if (!session) return;
+  const session = await getArcadeSession(guestId)
+  if (!session) return
 
   // Delete by roomId (PRIMARY KEY)
-  await deleteArcadeSessionByRoom(session.roomId);
+  await deleteArcadeSessionByRoom(session.roomId)
 }
 
 /**
@@ -349,11 +320,11 @@ export async function deleteArcadeSession(guestId: string): Promise<void> {
  */
 export async function updateSessionActivity(guestId: string): Promise<void> {
   // First find the session to get its roomId
-  const session = await getArcadeSession(guestId);
-  if (!session) return;
+  const session = await getArcadeSession(guestId)
+  if (!session) return
 
-  const now = new Date();
-  const expiresAt = new Date(now.getTime() + TTL_HOURS * 60 * 60 * 1000);
+  const now = new Date()
+  const expiresAt = new Date(now.getTime() + TTL_HOURS * 60 * 60 * 1000)
 
   // Update using roomId (PRIMARY KEY)
   await db
@@ -362,7 +333,7 @@ export async function updateSessionActivity(guestId: string): Promise<void> {
       lastActivityAt: now,
       expiresAt,
     })
-    .where(eq(schema.arcadeSessions.roomId, session.roomId));
+    .where(eq(schema.arcadeSessions.roomId, session.roomId))
 }
 
 /**
@@ -374,24 +345,24 @@ export async function updateSessionActivity(guestId: string): Promise<void> {
  */
 export async function updateSessionActivePlayers(
   roomId: string,
-  playerIds: string[],
+  playerIds: string[]
 ): Promise<boolean> {
-  const session = await getArcadeSessionByRoom(roomId);
-  if (!session) return false;
+  const session = await getArcadeSessionByRoom(roomId)
+  if (!session) return false
 
   // Only update if game is in setup phase (not started yet)
-  const gameState = session.gameState as any;
-  if (gameState.gamePhase !== "setup") {
-    return false;
+  const gameState = session.gameState as any
+  if (gameState.gamePhase !== 'setup') {
+    return false
   }
 
   // Update both the session's activePlayers field AND the game state
   const updatedGameState = {
     ...gameState,
     activePlayers: playerIds,
-  };
+  }
 
-  const now = new Date();
+  const now = new Date()
   await db
     .update(schema.arcadeSessions)
     .set({
@@ -400,20 +371,20 @@ export async function updateSessionActivePlayers(
       lastActivityAt: now,
       version: session.version + 1,
     })
-    .where(eq(schema.arcadeSessions.roomId, roomId));
+    .where(eq(schema.arcadeSessions.roomId, roomId))
 
-  return true;
+  return true
 }
 
 /**
  * Clean up expired sessions (should be called periodically)
  */
 export async function cleanupExpiredSessions(): Promise<number> {
-  const now = new Date();
+  const now = new Date()
   const result = await db
     .delete(schema.arcadeSessions)
     .where(eq(schema.arcadeSessions.expiresAt, now))
-    .returning();
+    .returning()
 
-  return result.length;
+  return result.length
 }
diff --git a/apps/web/src/lib/arcade/stats/types.ts b/apps/web/src/lib/arcade/stats/types.ts
index c78cd7d0..2aa7004a 100644
--- a/apps/web/src/lib/arcade/stats/types.ts
+++ b/apps/web/src/lib/arcade/stats/types.ts
@@ -7,7 +7,7 @@
  * See: .claude/GAME_STATS_COMPARISON.md for detailed cross-game analysis
  */
 
-import type { GameStatsBreakdown } from "@/db/schema/player-stats";
+import type { GameStatsBreakdown } from '@/db/schema/player-stats'
 
 /**
  * Standard game result that all arcade games must provide
@@ -21,133 +21,133 @@ import type { GameStatsBreakdown } from "@/db/schema/player-stats";
  */
 export interface GameResult {
   // Game identification
-  gameType: string; // e.g., "matching", "complement-race", "memory-quiz"
+  gameType: string // e.g., "matching", "complement-race", "memory-quiz"
 
   // Player results (supports 1-N players)
-  playerResults: PlayerGameResult[];
+  playerResults: PlayerGameResult[]
 
   // Timing
-  completedAt: number; // timestamp
-  duration: number; // milliseconds
+  completedAt: number // timestamp
+  duration: number // milliseconds
 
   // Optional game-specific data
   metadata?: {
     // For cooperative games (Memory Quiz, Card Sorting collaborative)
     // When true: all players share win/loss outcome
-    isTeamVictory?: boolean;
+    isTeamVictory?: boolean
 
     // For specific win conditions (Rithmomachia)
-    winCondition?: string; // e.g., "HARMONY", "POINTS", "TIMEOUT"
+    winCondition?: string // e.g., "HARMONY", "POINTS", "TIMEOUT"
 
     // For game modes
-    gameMode?: string; // e.g., "solo", "competitive", "cooperative"
+    gameMode?: string // e.g., "solo", "competitive", "cooperative"
 
     // Extensible for other game-specific info
-    [key: string]: unknown;
-  };
+    [key: string]: unknown
+  }
 }
 
 /**
  * Individual player result within a game
  */
 export interface PlayerGameResult {
-  playerId: string;
+  playerId: string
 
   // Outcome
-  won: boolean; // For cooperative games: all players have same value
-  placement?: number; // 1st, 2nd, 3rd place (for tournaments with 3+ players)
+  won: boolean // For cooperative games: all players have same value
+  placement?: number // 1st, 2nd, 3rd place (for tournaments with 3+ players)
 
   // Performance
-  score?: number;
-  accuracy?: number; // 0.0 - 1.0
-  completionTime?: number; // milliseconds (player-specific)
+  score?: number
+  accuracy?: number // 0.0 - 1.0
+  completionTime?: number // milliseconds (player-specific)
 
   // Game-specific metrics (stored as JSON in DB)
   metrics?: {
     // Matching
-    moves?: number;
-    matchedPairs?: number;
-    difficulty?: number;
+    moves?: number
+    matchedPairs?: number
+    difficulty?: number
 
     // Complement Race
-    streak?: number;
-    correctAnswers?: number;
-    totalQuestions?: number;
+    streak?: number
+    correctAnswers?: number
+    totalQuestions?: number
 
     // Memory Quiz
-    correct?: number;
-    incorrect?: number;
+    correct?: number
+    incorrect?: number
 
     // Card Sorting
-    exactMatches?: number;
-    inversions?: number;
-    lcsLength?: number;
+    exactMatches?: number
+    inversions?: number
+    lcsLength?: number
 
     // Rithmomachia
-    capturedPieces?: number;
-    points?: number;
+    capturedPieces?: number
+    points?: number
 
     // Extensible for future games
-    [key: string]: unknown;
-  };
+    [key: string]: unknown
+  }
 }
 
 /**
  * Stats update returned from API after recording a game
  */
 export interface StatsUpdate {
-  playerId: string;
-  previousStats: PlayerStatsData;
-  newStats: PlayerStatsData;
+  playerId: string
+  previousStats: PlayerStatsData
+  newStats: PlayerStatsData
   changes: {
-    gamesPlayed: number;
-    wins: number;
-    losses: number;
-  };
+    gamesPlayed: number
+    wins: number
+    losses: number
+  }
 }
 
 /**
  * Complete player stats data (from DB)
  */
 export interface PlayerStatsData {
-  playerId: string;
-  gamesPlayed: number;
-  totalWins: number;
-  totalLosses: number;
-  bestTime: number | null;
-  highestAccuracy: number;
-  favoriteGameType: string | null;
-  gameStats: Record<string, GameStatsBreakdown>;
-  lastPlayedAt: Date | null;
-  createdAt: Date;
-  updatedAt: Date;
+  playerId: string
+  gamesPlayed: number
+  totalWins: number
+  totalLosses: number
+  bestTime: number | null
+  highestAccuracy: number
+  favoriteGameType: string | null
+  gameStats: Record<string, GameStatsBreakdown>
+  lastPlayedAt: Date | null
+  createdAt: Date
+  updatedAt: Date
 }
 
 /**
  * Request body for recording a game result
  */
 export interface RecordGameRequest {
-  gameResult: GameResult;
+  gameResult: GameResult
 }
 
 /**
  * Response from recording a game result
  */
 export interface RecordGameResponse {
-  success: boolean;
-  updates: StatsUpdate[];
+  success: boolean
+  updates: StatsUpdate[]
 }
 
 /**
  * Response from fetching player stats
  */
 export interface GetPlayerStatsResponse {
-  stats: PlayerStatsData;
+  stats: PlayerStatsData
 }
 
 /**
  * Response from fetching all user's player stats
  */
 export interface GetAllPlayerStatsResponse {
-  playerStats: PlayerStatsData[];
+  playerStats: PlayerStatsData[]
 }
diff --git a/apps/web/src/lib/arcade/validation/index.ts b/apps/web/src/lib/arcade/validation/index.ts
index 8a80787a..d26e9994 100644
--- a/apps/web/src/lib/arcade/validation/index.ts
+++ b/apps/web/src/lib/arcade/validation/index.ts
@@ -13,7 +13,7 @@ export {
   matchingGameValidator,
   memoryQuizGameValidator,
   cardSortingValidator,
-} from "../validators";
+} from '../validators'
 
-export type { GameName } from "../validators";
-export * from "./types";
+export type { GameName } from '../validators'
+export * from './types'
diff --git a/apps/web/src/lib/arcade/validation/types.ts b/apps/web/src/lib/arcade/validation/types.ts
index 601fec13..00b53342 100644
--- a/apps/web/src/lib/arcade/validation/types.ts
+++ b/apps/web/src/lib/arcade/validation/types.ts
@@ -3,34 +3,34 @@
  * Used on both client and server for arcade session validation
  */
 
-import type { MemoryPairsState } from "@/arcade-games/matching/types";
-import type { MemoryQuizState as SorobanQuizState } from "@/arcade-games/memory-quiz/types";
+import type { MemoryPairsState } from '@/arcade-games/matching/types'
+import type { MemoryQuizState as SorobanQuizState } from '@/arcade-games/memory-quiz/types'
 
 /**
  * Game name type - auto-derived from validator registry
  * @deprecated Import from '@/lib/arcade/validators' instead
  */
-export type { GameName } from "../validators";
+export type { GameName } from '../validators'
 
 export interface ValidationResult {
-  valid: boolean;
-  error?: string;
-  newState?: unknown;
+  valid: boolean
+  error?: string
+  newState?: unknown
 }
 
 /**
  * Sentinel value for team moves where no specific player can be identified
  * Used in free-for-all games where all of a user's players act as a team
  */
-export const TEAM_MOVE = "__TEAM__" as const;
-export type TeamMoveSentinel = typeof TEAM_MOVE;
+export const TEAM_MOVE = '__TEAM__' as const
+export type TeamMoveSentinel = typeof TEAM_MOVE
 
 export interface GameMove {
-  type: string;
-  playerId: string | TeamMoveSentinel; // Individual player (turn-based) or __TEAM__ (free-for-all)
-  userId: string; // Room member/viewer who made the move
-  timestamp: number;
-  data: unknown;
+  type: string
+  playerId: string | TeamMoveSentinel // Individual player (turn-based) or __TEAM__ (free-for-all)
+  userId: string // Room member/viewer who made the move
+  timestamp: number
+  data: unknown
 }
 
 /**
@@ -38,56 +38,49 @@ export interface GameMove {
  * This maintains a single source of truth (game types) while providing
  * convenient access for validation code.
  */
-export type { MatchingMove } from "@/arcade-games/matching/types";
-export type { MemoryQuizMove } from "@/arcade-games/memory-quiz/types";
-export type { CardSortingMove } from "@/arcade-games/card-sorting/types";
-export type { ComplementRaceMove } from "@/arcade-games/complement-race/types";
+export type { MatchingMove } from '@/arcade-games/matching/types'
+export type { MemoryQuizMove } from '@/arcade-games/memory-quiz/types'
+export type { CardSortingMove } from '@/arcade-games/card-sorting/types'
+export type { ComplementRaceMove } from '@/arcade-games/complement-race/types'
 
 /**
  * Re-export game-specific state types from their respective modules
  */
-export type { MatchingState } from "@/arcade-games/matching/types";
-export type { MemoryQuizState } from "@/arcade-games/memory-quiz/types";
-export type { CardSortingState } from "@/arcade-games/card-sorting/types";
-export type { ComplementRaceState } from "@/arcade-games/complement-race/types";
+export type { MatchingState } from '@/arcade-games/matching/types'
+export type { MemoryQuizState } from '@/arcade-games/memory-quiz/types'
+export type { CardSortingState } from '@/arcade-games/card-sorting/types'
+export type { ComplementRaceState } from '@/arcade-games/complement-race/types'
 
 // Generic game state union (for backwards compatibility)
-export type GameState = MemoryPairsState | SorobanQuizState; // Add other game states as union later
+export type GameState = MemoryPairsState | SorobanQuizState // Add other game states as union later
 
 /**
  * Validation context for authorization checks
  */
 export interface ValidationContext {
-  userId?: string;
-  playerOwnership?: Record<string, string>; // playerId -> userId mapping
+  userId?: string
+  playerOwnership?: Record<string, string> // playerId -> userId mapping
 }
 
 /**
  * Base validator interface that all games must implement
  */
-export interface GameValidator<
-  TState = unknown,
-  TMove extends GameMove = GameMove,
-> {
+export interface GameValidator<TState = unknown, TMove extends GameMove = GameMove> {
   /**
    * Validate a game move and return the new state if valid
    * @param state Current game state
    * @param move The move to validate
    * @param context Optional validation context for authorization checks
    */
-  validateMove(
-    state: TState,
-    move: TMove,
-    context?: ValidationContext,
-  ): ValidationResult;
+  validateMove(state: TState, move: TMove, context?: ValidationContext): ValidationResult
 
   /**
    * Check if the game is in a terminal state (completed)
    */
-  isGameComplete(state: TState): boolean;
+  isGameComplete(state: TState): boolean
 
   /**
    * Get initial state for a new game
    */
-  getInitialState(config: unknown): TState;
+  getInitialState(config: unknown): TState
 }
diff --git a/apps/web/src/lib/arcade/validators.ts b/apps/web/src/lib/arcade/validators.ts
index 85355229..9c4f1898 100644
--- a/apps/web/src/lib/arcade/validators.ts
+++ b/apps/web/src/lib/arcade/validators.ts
@@ -10,13 +10,13 @@
  * 3. GameName type will auto-update
  */
 
-import { matchingGameValidator } from "@/arcade-games/matching/Validator";
-import { memoryQuizGameValidator } from "@/arcade-games/memory-quiz/Validator";
-import { complementRaceValidator } from "@/arcade-games/complement-race/Validator";
-import { cardSortingValidator } from "@/arcade-games/card-sorting/Validator";
-import { yjsDemoValidator } from "@/arcade-games/yjs-demo/Validator";
-import { rithmomachiaValidator } from "@/arcade-games/rithmomachia/Validator";
-import type { GameValidator } from "./validation/types";
+import { matchingGameValidator } from '@/arcade-games/matching/Validator'
+import { memoryQuizGameValidator } from '@/arcade-games/memory-quiz/Validator'
+import { complementRaceValidator } from '@/arcade-games/complement-race/Validator'
+import { cardSortingValidator } from '@/arcade-games/card-sorting/Validator'
+import { yjsDemoValidator } from '@/arcade-games/yjs-demo/Validator'
+import { rithmomachiaValidator } from '@/arcade-games/rithmomachia/Validator'
+import type { GameValidator } from './validation/types'
 
 /**
  * Central registry of all game validators
@@ -25,47 +25,47 @@ import type { GameValidator } from "./validation/types";
  */
 export const validatorRegistry = {
   matching: matchingGameValidator,
-  "memory-quiz": memoryQuizGameValidator,
-  "complement-race": complementRaceValidator,
-  "card-sorting": cardSortingValidator,
-  "yjs-demo": yjsDemoValidator,
+  'memory-quiz': memoryQuizGameValidator,
+  'complement-race': complementRaceValidator,
+  'card-sorting': cardSortingValidator,
+  'yjs-demo': yjsDemoValidator,
   rithmomachia: rithmomachiaValidator,
   // Add new games here - GameName type will auto-update
-} as const;
+} as const
 
 /**
  * Auto-derived game name type from registry
  * No need to manually update this!
  */
-export type GameName = keyof typeof validatorRegistry;
+export type GameName = keyof typeof validatorRegistry
 
 /**
  * Get validator for a game
  * @throws Error if game not found (fail fast)
  */
 export function getValidator(gameName: string): GameValidator {
-  const validator = validatorRegistry[gameName as GameName];
+  const validator = validatorRegistry[gameName as GameName]
   if (!validator) {
     throw new Error(
       `No validator found for game: ${gameName}. ` +
-        `Available games: ${Object.keys(validatorRegistry).join(", ")}`,
-    );
+        `Available games: ${Object.keys(validatorRegistry).join(', ')}`
+    )
   }
-  return validator;
+  return validator
 }
 
 /**
  * Check if a game has a registered validator
  */
 export function hasValidator(gameName: string): gameName is GameName {
-  return gameName in validatorRegistry;
+  return gameName in validatorRegistry
 }
 
 /**
  * Get all registered game names
  */
 export function getRegisteredGameNames(): GameName[] {
-  return Object.keys(validatorRegistry) as GameName[];
+  return Object.keys(validatorRegistry) as GameName[]
 }
 
 /**
@@ -76,7 +76,7 @@ export function getRegisteredGameNames(): GameName[] {
  * @returns true if game has a registered validator
  */
 export function isValidGameName(gameName: unknown): gameName is GameName {
-  return typeof gameName === "string" && hasValidator(gameName);
+  return typeof gameName === 'string' && hasValidator(gameName)
 }
 
 /**
@@ -85,13 +85,11 @@ export function isValidGameName(gameName: unknown): gameName is GameName {
  * @param gameName - Game name to validate
  * @throws Error if game name is invalid
  */
-export function assertValidGameName(
-  gameName: unknown,
-): asserts gameName is GameName {
+export function assertValidGameName(gameName: unknown): asserts gameName is GameName {
   if (!isValidGameName(gameName)) {
     throw new Error(
-      `Invalid game name: ${gameName}. Must be one of: ${getRegisteredGameNames().join(", ")}`,
-    );
+      `Invalid game name: ${gameName}. Must be one of: ${getRegisteredGameNames().join(', ')}`
+    )
   }
 }
 
@@ -105,4 +103,4 @@ export {
   cardSortingValidator,
   yjsDemoValidator,
   rithmomachiaValidator,
-};
+}
diff --git a/apps/web/src/lib/arcade/yjs-persistence.ts b/apps/web/src/lib/arcade/yjs-persistence.ts
index 79329af0..a45cca72 100644
--- a/apps/web/src/lib/arcade/yjs-persistence.ts
+++ b/apps/web/src/lib/arcade/yjs-persistence.ts
@@ -3,8 +3,8 @@
  * Sync Y.Doc state with arcade sessions database
  */
 
-import type * as Y from "yjs";
-import type { GridCell } from "@/arcade-games/yjs-demo/types";
+import type * as Y from 'yjs'
+import type { GridCell } from '@/arcade-games/yjs-demo/types'
 
 /**
  * Extract grid cells from a Y.Doc for persistence
@@ -12,15 +12,15 @@ import type { GridCell } from "@/arcade-games/yjs-demo/types";
  * @param arrayName - Name of the Y.Array containing cells (default: 'cells')
  * @returns Array of grid cells
  */
-export function extractCellsFromDoc(doc: any, arrayName = "cells"): GridCell[] {
-  const cellsArray = doc.getArray(arrayName);
-  if (!cellsArray) return [];
+export function extractCellsFromDoc(doc: any, arrayName = 'cells'): GridCell[] {
+  const cellsArray = doc.getArray(arrayName)
+  if (!cellsArray) return []
 
-  const cells: GridCell[] = [];
+  const cells: GridCell[] = []
   cellsArray.forEach((cell: GridCell) => {
-    cells.push(cell);
-  });
-  return cells;
+    cells.push(cell)
+  })
+  return cells
 }
 
 /**
@@ -29,21 +29,17 @@ export function extractCellsFromDoc(doc: any, arrayName = "cells"): GridCell[] {
  * @param cells - Array of grid cells to restore
  * @param arrayName - Name of the Y.Array to populate (default: 'cells')
  */
-export function populateDocWithCells(
-  doc: any,
-  cells: GridCell[],
-  arrayName = "cells",
-): void {
-  const cellsArray = doc.getArray(arrayName);
+export function populateDocWithCells(doc: any, cells: GridCell[], arrayName = 'cells'): void {
+  const cellsArray = doc.getArray(arrayName)
 
   // Clear existing cells first
-  cellsArray.delete(0, cellsArray.length);
+  cellsArray.delete(0, cellsArray.length)
 
   // Add persisted cells
   if (cells.length > 0) {
     doc.transact(() => {
-      cellsArray.push(cells);
-    });
+      cellsArray.push(cells)
+    })
   }
 }
 
@@ -54,9 +50,9 @@ export function populateDocWithCells(
  * @returns Base64-encoded document state
  */
 export function serializeDoc(doc: any): string {
-  const Y = require("yjs");
-  const state = Y.encodeStateAsUpdate(doc);
-  return Buffer.from(state).toString("base64");
+  const Y = require('yjs')
+  const state = Y.encodeStateAsUpdate(doc)
+  return Buffer.from(state).toString('base64')
 }
 
 /**
@@ -65,7 +61,7 @@ export function serializeDoc(doc: any): string {
  * @param serialized - Base64-encoded document state
  */
 export function deserializeDoc(doc: any, serialized: string): void {
-  const Y = require("yjs");
-  const state = Buffer.from(serialized, "base64");
-  Y.applyUpdate(doc, state);
+  const Y = require('yjs')
+  const state = Buffer.from(serialized, 'base64')
+  Y.applyUpdate(doc, state)
 }
diff --git a/apps/web/src/lib/asset-store.ts b/apps/web/src/lib/asset-store.ts
index def3f65b..26ef867f 100644
--- a/apps/web/src/lib/asset-store.ts
+++ b/apps/web/src/lib/asset-store.ts
@@ -1,112 +1,107 @@
 // File-based asset store for generated files
-import * as fs from "fs";
-import * as path from "path";
-import { promisify } from "util";
+import * as fs from 'fs'
+import * as path from 'path'
+import { promisify } from 'util'
 
-const writeFile = promisify(fs.writeFile);
-const readFile = promisify(fs.readFile);
-const unlink = promisify(fs.unlink);
-const readdir = promisify(fs.readdir);
-const stat = promisify(fs.stat);
+const writeFile = promisify(fs.writeFile)
+const readFile = promisify(fs.readFile)
+const unlink = promisify(fs.unlink)
+const readdir = promisify(fs.readdir)
+const stat = promisify(fs.stat)
 
 export interface StoredAsset {
-  data: Buffer;
-  filename: string;
-  mimeType: string;
-  createdAt: Date;
+  data: Buffer
+  filename: string
+  mimeType: string
+  createdAt: Date
 }
 
 // Use temp directory for storing generated assets
-const ASSETS_DIR = path.join(process.cwd(), ".tmp/assets");
+const ASSETS_DIR = path.join(process.cwd(), '.tmp/assets')
 
 // Ensure assets directory exists
 if (!fs.existsSync(ASSETS_DIR)) {
-  fs.mkdirSync(ASSETS_DIR, { recursive: true });
+  fs.mkdirSync(ASSETS_DIR, { recursive: true })
 }
 
 export const assetStore = {
   async set(id: string, asset: StoredAsset): Promise<void> {
-    const assetPath = path.join(ASSETS_DIR, `${id}.bin`);
-    const metaPath = path.join(ASSETS_DIR, `${id}.meta.json`);
+    const assetPath = path.join(ASSETS_DIR, `${id}.bin`)
+    const metaPath = path.join(ASSETS_DIR, `${id}.meta.json`)
 
     // Store binary data
-    await writeFile(assetPath, asset.data);
+    await writeFile(assetPath, asset.data)
 
     // Store metadata
     const metadata = {
       filename: asset.filename,
       mimeType: asset.mimeType,
       createdAt: asset.createdAt.toISOString(),
-    };
-    await writeFile(metaPath, JSON.stringify(metadata));
-    console.log("💾 Asset stored to file:", assetPath);
+    }
+    await writeFile(metaPath, JSON.stringify(metadata))
+    console.log('💾 Asset stored to file:', assetPath)
   },
 
   async get(id: string): Promise<StoredAsset | undefined> {
-    const assetPath = path.join(ASSETS_DIR, `${id}.bin`);
-    const metaPath = path.join(ASSETS_DIR, `${id}.meta.json`);
+    const assetPath = path.join(ASSETS_DIR, `${id}.bin`)
+    const metaPath = path.join(ASSETS_DIR, `${id}.meta.json`)
 
     try {
-      const data = await readFile(assetPath);
-      const metaData = JSON.parse(await readFile(metaPath, "utf-8"));
+      const data = await readFile(assetPath)
+      const metaData = JSON.parse(await readFile(metaPath, 'utf-8'))
 
       return {
         data,
         filename: metaData.filename,
         mimeType: metaData.mimeType,
         createdAt: new Date(metaData.createdAt),
-      };
+      }
     } catch (_error) {
-      console.log("❌ Asset not found in file system:", assetPath);
-      return undefined;
+      console.log('❌ Asset not found in file system:', assetPath)
+      return undefined
     }
   },
 
   async keys(): Promise<string[]> {
     try {
-      const files = await readdir(ASSETS_DIR);
-      return files
-        .filter((f) => f.endsWith(".bin"))
-        .map((f) => f.replace(".bin", ""));
+      const files = await readdir(ASSETS_DIR)
+      return files.filter((f) => f.endsWith('.bin')).map((f) => f.replace('.bin', ''))
     } catch {
-      return [];
+      return []
     }
   },
 
   get size(): number {
     try {
-      return fs.readdirSync(ASSETS_DIR).filter((f) => f.endsWith(".bin"))
-        .length;
+      return fs.readdirSync(ASSETS_DIR).filter((f) => f.endsWith('.bin')).length
     } catch {
-      return 0;
+      return 0
     }
   },
-};
+}
 
 // Clean up old assets every hour
 setInterval(
   async () => {
-    const cutoff = Date.now() - 60 * 60 * 1000; // 1 hour ago
+    const cutoff = Date.now() - 60 * 60 * 1000 // 1 hour ago
     try {
-      const files = await readdir(ASSETS_DIR);
+      const files = await readdir(ASSETS_DIR)
       for (const file of files) {
-        if (!file.endsWith(".bin")) continue;
+        if (!file.endsWith('.bin')) continue
 
-        const filePath = path.join(ASSETS_DIR, file);
-        const stats = await stat(filePath);
+        const filePath = path.join(ASSETS_DIR, file)
+        const stats = await stat(filePath)
 
         if (stats.mtime.getTime() < cutoff) {
-          const id = file.replace(".bin", "");
-          await unlink(filePath).catch(() => {});
-          await unlink(path.join(ASSETS_DIR, `${id}.meta.json`)).catch(
-            () => {},
-          );
-          console.log("🗑️ Cleaned up old asset:", id);
+          const id = file.replace('.bin', '')
+          await unlink(filePath).catch(() => {})
+          await unlink(path.join(ASSETS_DIR, `${id}.meta.json`)).catch(() => {})
+          console.log('🗑️ Cleaned up old asset:', id)
         }
       }
     } catch (error) {
-      console.error("❌ Error cleaning up assets:", error);
+      console.error('❌ Error cleaning up assets:', error)
     }
   },
-  60 * 60 * 1000,
-);
+  60 * 60 * 1000
+)
diff --git a/apps/web/src/lib/blog.ts b/apps/web/src/lib/blog.ts
index 6af4bf1e..75edd5d1 100644
--- a/apps/web/src/lib/blog.ts
+++ b/apps/web/src/lib/blog.ts
@@ -1,27 +1,27 @@
-import fs from "fs";
-import path from "path";
-import matter from "gray-matter";
-import { remark } from "remark";
-import remarkGfm from "remark-gfm";
-import remarkHtml from "remark-html";
+import fs from 'fs'
+import path from 'path'
+import matter from 'gray-matter'
+import { remark } from 'remark'
+import remarkGfm from 'remark-gfm'
+import remarkHtml from 'remark-html'
 
-const postsDirectory = path.join(process.cwd(), "content", "blog");
+const postsDirectory = path.join(process.cwd(), 'content', 'blog')
 
 export interface BlogPost {
-  slug: string;
-  title: string;
-  description: string;
-  author: string;
-  publishedAt: string;
-  updatedAt: string;
-  tags: string[];
-  featured: boolean;
-  content: string;
-  html: string;
+  slug: string
+  title: string
+  description: string
+  author: string
+  publishedAt: string
+  updatedAt: string
+  tags: string[]
+  featured: boolean
+  content: string
+  html: string
 }
 
-export interface BlogPostMetadata extends Omit<BlogPost, "content" | "html"> {
-  excerpt?: string;
+export interface BlogPostMetadata extends Omit<BlogPost, 'content' | 'html'> {
+  excerpt?: string
 }
 
 /**
@@ -29,13 +29,13 @@ export interface BlogPostMetadata extends Omit<BlogPost, "content" | "html"> {
  */
 export function getAllPostSlugs(): string[] {
   try {
-    const fileNames = fs.readdirSync(postsDirectory);
+    const fileNames = fs.readdirSync(postsDirectory)
     return fileNames
-      .filter((fileName) => fileName.endsWith(".md"))
-      .map((fileName) => fileName.replace(/\.md$/, ""));
+      .filter((fileName) => fileName.endsWith('.md'))
+      .map((fileName) => fileName.replace(/\.md$/, ''))
   } catch {
     // Directory doesn't exist yet or is empty
-    return [];
+    return []
   }
 }
 
@@ -43,70 +43,68 @@ export function getAllPostSlugs(): string[] {
  * Get metadata for all posts (without full content)
  */
 export async function getAllPostsMetadata(): Promise<BlogPostMetadata[]> {
-  const slugs = getAllPostSlugs();
+  const slugs = getAllPostSlugs()
   const posts = await Promise.all(
     slugs.map(async (slug) => {
-      const post = await getPostBySlug(slug);
-      const { content, html, ...metadata } = post;
+      const post = await getPostBySlug(slug)
+      const { content, html, ...metadata } = post
       // Create excerpt from first paragraph
-      const firstPara = content.split("\n\n")[0];
-      const excerpt = `${firstPara.replace(/^#+\s+/, "").substring(0, 200)}...`;
-      return { ...metadata, excerpt };
-    }),
-  );
+      const firstPara = content.split('\n\n')[0]
+      const excerpt = `${firstPara.replace(/^#+\s+/, '').substring(0, 200)}...`
+      return { ...metadata, excerpt }
+    })
+  )
 
   // Sort by published date, newest first
   return posts.sort((a, b) => {
-    return (
-      new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()
-    );
-  });
+    return new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()
+  })
 }
 
 /**
  * Get a single post by slug with full content
  */
 export async function getPostBySlug(slug: string): Promise<BlogPost> {
-  const fullPath = path.join(postsDirectory, `${slug}.md`);
-  const fileContents = fs.readFileSync(fullPath, "utf8");
+  const fullPath = path.join(postsDirectory, `${slug}.md`)
+  const fileContents = fs.readFileSync(fullPath, 'utf8')
 
   // Parse frontmatter
-  const { data, content } = matter(fileContents);
+  const { data, content } = matter(fileContents)
 
   // Convert markdown to HTML
   const processedContent = await remark()
     .use(remarkGfm) // GitHub Flavored Markdown (tables, strikethrough, etc.)
     .use(remarkHtml, { sanitize: false })
-    .process(content);
+    .process(content)
 
-  const html = processedContent.toString();
+  const html = processedContent.toString()
 
   return {
     slug,
-    title: data.title || "Untitled",
-    description: data.description || "",
-    author: data.author || "Anonymous",
+    title: data.title || 'Untitled',
+    description: data.description || '',
+    author: data.author || 'Anonymous',
     publishedAt: data.publishedAt || new Date().toISOString(),
     updatedAt: data.updatedAt || data.publishedAt || new Date().toISOString(),
     tags: data.tags || [],
     featured: data.featured || false,
     content,
     html,
-  };
+  }
 }
 
 /**
  * Get featured posts for homepage
  */
 export async function getFeaturedPosts(): Promise<BlogPostMetadata[]> {
-  const allPosts = await getAllPostsMetadata();
-  return allPosts.filter((post) => post.featured).slice(0, 3);
+  const allPosts = await getAllPostsMetadata()
+  return allPosts.filter((post) => post.featured).slice(0, 3)
 }
 
 /**
  * Get posts by tag
  */
 export async function getPostsByTag(tag: string): Promise<BlogPostMetadata[]> {
-  const allPosts = await getAllPostsMetadata();
-  return allPosts.filter((post) => post.tags.includes(tag));
+  const allPosts = await getAllPostsMetadata()
+  return allPosts.filter((post) => post.tags.includes(tag))
 }
diff --git a/apps/web/src/lib/guest-token.ts b/apps/web/src/lib/guest-token.ts
index 3b8a770f..8e87a1da 100644
--- a/apps/web/src/lib/guest-token.ts
+++ b/apps/web/src/lib/guest-token.ts
@@ -1,4 +1,4 @@
-import { jwtVerify, SignJWT } from "jose";
+import { jwtVerify, SignJWT } from 'jose'
 
 /**
  * Guest token utilities for stateless guest session management
@@ -10,18 +10,17 @@ import { jwtVerify, SignJWT } from "jose";
 // Cookie name with __Host- prefix for security in production
 // __Host- prefix requires: Secure, Path=/, no Domain
 // In development (http://localhost), __Host- won't work without Secure flag
-export const GUEST_COOKIE_NAME =
-  process.env.NODE_ENV === "production" ? "__Host-guest" : "guest";
+export const GUEST_COOKIE_NAME = process.env.NODE_ENV === 'production' ? '__Host-guest' : 'guest'
 
 /**
  * Get the secret key for signing/verifying JWTs
  */
 function getKey(): Uint8Array {
-  const secret = process.env.AUTH_SECRET;
+  const secret = process.env.AUTH_SECRET
   if (!secret) {
-    throw new Error("AUTH_SECRET environment variable is required");
+    throw new Error('AUTH_SECRET environment variable is required')
   }
-  return new TextEncoder().encode(secret);
+  return new TextEncoder().encode(secret)
 }
 
 /**
@@ -33,15 +32,15 @@ function getKey(): Uint8Array {
  */
 export async function createGuestToken(
   sid: string,
-  maxAgeSec = 60 * 60 * 24 * 30, // 30 days
+  maxAgeSec = 60 * 60 * 24 * 30 // 30 days
 ): Promise<string> {
-  const now = Math.floor(Date.now() / 1000);
+  const now = Math.floor(Date.now() / 1000)
 
-  return await new SignJWT({ typ: "guest", sid })
-    .setProtectedHeader({ alg: "HS256" })
+  return await new SignJWT({ typ: 'guest', sid })
+    .setProtectedHeader({ alg: 'HS256' })
     .setIssuedAt(now)
     .setExpirationTime(now + maxAgeSec)
-    .sign(getKey());
+    .sign(getKey())
 }
 
 /**
@@ -52,23 +51,23 @@ export async function createGuestToken(
  * @throws Error if token is invalid or expired
  */
 export async function verifyGuestToken(token: string): Promise<{
-  sid: string;
-  iat: number;
-  exp: number;
+  sid: string
+  iat: number
+  exp: number
 }> {
   try {
-    const { payload } = await jwtVerify(token, getKey());
+    const { payload } = await jwtVerify(token, getKey())
 
-    if (payload.typ !== "guest" || typeof payload.sid !== "string") {
-      throw new Error("Invalid guest token payload");
+    if (payload.typ !== 'guest' || typeof payload.sid !== 'string') {
+      throw new Error('Invalid guest token payload')
     }
 
     return {
       sid: payload.sid as string,
       iat: payload.iat as number,
       exp: payload.exp as number,
-    };
+    }
   } catch (error) {
-    throw new Error(`Guest token verification failed: ${error}`);
+    throw new Error(`Guest token verification failed: ${error}`)
   }
 }
diff --git a/apps/web/src/lib/memory-quiz-utils.test.ts b/apps/web/src/lib/memory-quiz-utils.test.ts
index 6110ebe6..7e539c09 100644
--- a/apps/web/src/lib/memory-quiz-utils.test.ts
+++ b/apps/web/src/lib/memory-quiz-utils.test.ts
@@ -1,272 +1,270 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from 'vitest'
 import {
   couldBePrefix,
   isCompleteWrongNumber,
   isCorrectAndAvailable,
   isPrefix,
   shouldTriggerIncorrectGuess,
-} from "./memory-quiz-utils";
+} from './memory-quiz-utils'
 
-describe("Memory Quiz Utils", () => {
-  describe("isPrefix", () => {
-    it("should return true when input is a prefix of target numbers", () => {
-      const targets = [555, 123, 789];
-      const found: number[] = [];
+describe('Memory Quiz Utils', () => {
+  describe('isPrefix', () => {
+    it('should return true when input is a prefix of target numbers', () => {
+      const targets = [555, 123, 789]
+      const found: number[] = []
 
-      expect(isPrefix("5", targets, found)).toBe(true);
-      expect(isPrefix("55", targets, found)).toBe(true);
-      expect(isPrefix("1", targets, found)).toBe(true);
-      expect(isPrefix("12", targets, found)).toBe(true);
-    });
+      expect(isPrefix('5', targets, found)).toBe(true)
+      expect(isPrefix('55', targets, found)).toBe(true)
+      expect(isPrefix('1', targets, found)).toBe(true)
+      expect(isPrefix('12', targets, found)).toBe(true)
+    })
 
-    it("should return false when input is an exact match", () => {
-      const targets = [555, 123, 789];
-      const found: number[] = [];
+    it('should return false when input is an exact match', () => {
+      const targets = [555, 123, 789]
+      const found: number[] = []
 
-      expect(isPrefix("555", targets, found)).toBe(false);
-      expect(isPrefix("123", targets, found)).toBe(false);
-    });
+      expect(isPrefix('555', targets, found)).toBe(false)
+      expect(isPrefix('123', targets, found)).toBe(false)
+    })
 
-    it("should return false when input is not a prefix", () => {
-      const targets = [555, 123, 789];
-      const found: number[] = [];
+    it('should return false when input is not a prefix', () => {
+      const targets = [555, 123, 789]
+      const found: number[] = []
 
-      expect(isPrefix("6", targets, found)).toBe(false);
-      expect(isPrefix("13", targets, found)).toBe(false);
-      expect(isPrefix("999", targets, found)).toBe(false);
-    });
+      expect(isPrefix('6', targets, found)).toBe(false)
+      expect(isPrefix('13', targets, found)).toBe(false)
+      expect(isPrefix('999', targets, found)).toBe(false)
+    })
 
-    it("should exclude found numbers from prefix checking - BUG FIX: 55/555 scenario", () => {
-      const targets = [55, 555, 123];
-      const found = [55]; // 55 is already found
+    it('should exclude found numbers from prefix checking - BUG FIX: 55/555 scenario', () => {
+      const targets = [55, 555, 123]
+      const found = [55] // 55 is already found
 
       // After finding 55, typing "55" should still be a prefix of unfound 555
-      expect(isPrefix("55", targets, found)).toBe(true); // prefix of 555
+      expect(isPrefix('55', targets, found)).toBe(true) // prefix of 555
 
       // "5" should also be a prefix of 555 (since 555 is not found)
-      expect(isPrefix("5", targets, found)).toBe(true);
-    });
+      expect(isPrefix('5', targets, found)).toBe(true)
+    })
 
-    it("should handle multiple found numbers correctly", () => {
-      const targets = [5, 55, 555, 5555];
-      const found = [5, 55]; // First two are found
+    it('should handle multiple found numbers correctly', () => {
+      const targets = [5, 55, 555, 5555]
+      const found = [5, 55] // First two are found
 
       // Found numbers can still be prefixes of unfound numbers
-      expect(isPrefix("5", targets, found)).toBe(true); // prefix of 555, 5555
-      expect(isPrefix("55", targets, found)).toBe(true); // prefix of 555, 5555
-      expect(isPrefix("555", targets, found)).toBe(true); // prefix of 5555
-    });
+      expect(isPrefix('5', targets, found)).toBe(true) // prefix of 555, 5555
+      expect(isPrefix('55', targets, found)).toBe(true) // prefix of 555, 5555
+      expect(isPrefix('555', targets, found)).toBe(true) // prefix of 5555
+    })
 
-    it("should handle when all potential targets are found", () => {
-      const targets = [5, 55, 555];
-      const found = [55, 555]; // All numbers that start with 5 are found
+    it('should handle when all potential targets are found', () => {
+      const targets = [5, 55, 555]
+      const found = [55, 555] // All numbers that start with 5 are found
 
-      expect(isPrefix("5", targets, found)).toBe(false); // 5 is not found, but exact match
-    });
-  });
+      expect(isPrefix('5', targets, found)).toBe(false) // 5 is not found, but exact match
+    })
+  })
 
-  describe("couldBePrefix", () => {
-    it("should return true for valid prefixes", () => {
-      const targets = [123, 456, 789];
+  describe('couldBePrefix', () => {
+    it('should return true for valid prefixes', () => {
+      const targets = [123, 456, 789]
 
-      expect(couldBePrefix("1", targets)).toBe(true);
-      expect(couldBePrefix("12", targets)).toBe(true);
-      expect(couldBePrefix("4", targets)).toBe(true);
-      expect(couldBePrefix("45", targets)).toBe(true);
-    });
+      expect(couldBePrefix('1', targets)).toBe(true)
+      expect(couldBePrefix('12', targets)).toBe(true)
+      expect(couldBePrefix('4', targets)).toBe(true)
+      expect(couldBePrefix('45', targets)).toBe(true)
+    })
 
-    it("should return false for invalid prefixes", () => {
-      const targets = [123, 456, 789];
+    it('should return false for invalid prefixes', () => {
+      const targets = [123, 456, 789]
 
-      expect(couldBePrefix("2", targets)).toBe(false);
-      expect(couldBePrefix("13", targets)).toBe(false);
-      expect(couldBePrefix("999", targets)).toBe(false);
-    });
+      expect(couldBePrefix('2', targets)).toBe(false)
+      expect(couldBePrefix('13', targets)).toBe(false)
+      expect(couldBePrefix('999', targets)).toBe(false)
+    })
 
-    it("should return true for exact matches", () => {
-      const targets = [123, 456, 789];
+    it('should return true for exact matches', () => {
+      const targets = [123, 456, 789]
 
-      expect(couldBePrefix("123", targets)).toBe(true);
-      expect(couldBePrefix("456", targets)).toBe(true);
-    });
-  });
+      expect(couldBePrefix('123', targets)).toBe(true)
+      expect(couldBePrefix('456', targets)).toBe(true)
+    })
+  })
 
-  describe("isCompleteWrongNumber", () => {
-    it("should return true for clearly wrong numbers with length >= 2", () => {
-      const targets = [123, 456, 789];
+  describe('isCompleteWrongNumber', () => {
+    it('should return true for clearly wrong numbers with length >= 2', () => {
+      const targets = [123, 456, 789]
 
-      expect(isCompleteWrongNumber("99", targets)).toBe(true);
-      expect(isCompleteWrongNumber("999", targets)).toBe(true);
-      expect(isCompleteWrongNumber("13", targets)).toBe(true); // not 123
-    });
+      expect(isCompleteWrongNumber('99', targets)).toBe(true)
+      expect(isCompleteWrongNumber('999', targets)).toBe(true)
+      expect(isCompleteWrongNumber('13', targets)).toBe(true) // not 123
+    })
 
-    it("should return true for single digits that cannot be prefixes", () => {
-      const targets = [123, 456, 789];
+    it('should return true for single digits that cannot be prefixes', () => {
+      const targets = [123, 456, 789]
 
-      expect(isCompleteWrongNumber("2", targets)).toBe(true);
-      expect(isCompleteWrongNumber("9", targets)).toBe(true);
-    });
+      expect(isCompleteWrongNumber('2', targets)).toBe(true)
+      expect(isCompleteWrongNumber('9', targets)).toBe(true)
+    })
 
-    it("should return false for valid prefixes", () => {
-      const targets = [123, 456, 789];
+    it('should return false for valid prefixes', () => {
+      const targets = [123, 456, 789]
 
-      expect(isCompleteWrongNumber("1", targets)).toBe(false); // prefix of 123
-      expect(isCompleteWrongNumber("12", targets)).toBe(false); // prefix of 123
-      expect(isCompleteWrongNumber("4", targets)).toBe(false); // prefix of 456
-    });
+      expect(isCompleteWrongNumber('1', targets)).toBe(false) // prefix of 123
+      expect(isCompleteWrongNumber('12', targets)).toBe(false) // prefix of 123
+      expect(isCompleteWrongNumber('4', targets)).toBe(false) // prefix of 456
+    })
 
-    it("should return false for exact matches", () => {
-      const targets = [123, 456, 789];
+    it('should return false for exact matches', () => {
+      const targets = [123, 456, 789]
 
-      expect(isCompleteWrongNumber("123", targets)).toBe(false);
-      expect(isCompleteWrongNumber("456", targets)).toBe(false);
-    });
+      expect(isCompleteWrongNumber('123', targets)).toBe(false)
+      expect(isCompleteWrongNumber('456', targets)).toBe(false)
+    })
 
-    it("should handle numbers that cannot be prefixes regardless of length", () => {
-      const targets = [123, 456, 789];
+    it('should handle numbers that cannot be prefixes regardless of length', () => {
+      const targets = [123, 456, 789]
 
       // Numbers that can't be prefixes are always wrong regardless of length
-      expect(isCompleteWrongNumber("2", targets)).toBe(true); // can't be prefix of any target
-      expect(isCompleteWrongNumber("99", targets)).toBe(true); // can't be prefix of any target
-      expect(isCompleteWrongNumber("999", targets)).toBe(true); // can't be prefix of any target
-    });
-  });
+      expect(isCompleteWrongNumber('2', targets)).toBe(true) // can't be prefix of any target
+      expect(isCompleteWrongNumber('99', targets)).toBe(true) // can't be prefix of any target
+      expect(isCompleteWrongNumber('999', targets)).toBe(true) // can't be prefix of any target
+    })
+  })
 
-  describe("shouldTriggerIncorrectGuess", () => {
-    it("should not trigger for correct answers", () => {
-      const targets = [55, 555, 123];
-      const found: number[] = [];
+  describe('shouldTriggerIncorrectGuess', () => {
+    it('should not trigger for correct answers', () => {
+      const targets = [55, 555, 123]
+      const found: number[] = []
 
-      expect(shouldTriggerIncorrectGuess("55", targets, found)).toBe(false);
-      expect(shouldTriggerIncorrectGuess("555", targets, found)).toBe(false);
-      expect(shouldTriggerIncorrectGuess("123", targets, found)).toBe(false);
-    });
+      expect(shouldTriggerIncorrectGuess('55', targets, found)).toBe(false)
+      expect(shouldTriggerIncorrectGuess('555', targets, found)).toBe(false)
+      expect(shouldTriggerIncorrectGuess('123', targets, found)).toBe(false)
+    })
 
-    it("should not trigger for correct answers even if already found", () => {
-      const targets = [55, 555, 123];
-      const found = [55];
+    it('should not trigger for correct answers even if already found', () => {
+      const targets = [55, 555, 123]
+      const found = [55]
 
       // Should not trigger even though 55 is already found
-      expect(shouldTriggerIncorrectGuess("55", targets, found)).toBe(false);
-    });
+      expect(shouldTriggerIncorrectGuess('55', targets, found)).toBe(false)
+    })
 
-    it("should trigger for clearly wrong numbers", () => {
-      const targets = [55, 555, 123];
-      const found: number[] = [];
+    it('should trigger for clearly wrong numbers', () => {
+      const targets = [55, 555, 123]
+      const found: number[] = []
 
-      expect(shouldTriggerIncorrectGuess("99", targets, found)).toBe(true);
-      expect(shouldTriggerIncorrectGuess("999", targets, found)).toBe(true);
-      expect(shouldTriggerIncorrectGuess("12", targets, found)).toBe(true); // not 123 or any other target
-    });
+      expect(shouldTriggerIncorrectGuess('99', targets, found)).toBe(true)
+      expect(shouldTriggerIncorrectGuess('999', targets, found)).toBe(true)
+      expect(shouldTriggerIncorrectGuess('12', targets, found)).toBe(true) // not 123 or any other target
+    })
 
-    it("should trigger for single digits that cannot be prefixes", () => {
-      const targets = [123, 456, 789];
-      const found: number[] = [];
+    it('should trigger for single digits that cannot be prefixes', () => {
+      const targets = [123, 456, 789]
+      const found: number[] = []
 
-      expect(shouldTriggerIncorrectGuess("2", targets, found)).toBe(true);
-      expect(shouldTriggerIncorrectGuess("9", targets, found)).toBe(true);
-    });
+      expect(shouldTriggerIncorrectGuess('2', targets, found)).toBe(true)
+      expect(shouldTriggerIncorrectGuess('9', targets, found)).toBe(true)
+    })
 
-    it("should not trigger for valid prefixes", () => {
-      const targets = [555, 123, 789];
-      const found: number[] = [];
+    it('should not trigger for valid prefixes', () => {
+      const targets = [555, 123, 789]
+      const found: number[] = []
 
-      expect(shouldTriggerIncorrectGuess("5", targets, found)).toBe(false);
-      expect(shouldTriggerIncorrectGuess("55", targets, found)).toBe(false);
-      expect(shouldTriggerIncorrectGuess("1", targets, found)).toBe(false);
-    });
+      expect(shouldTriggerIncorrectGuess('5', targets, found)).toBe(false)
+      expect(shouldTriggerIncorrectGuess('55', targets, found)).toBe(false)
+      expect(shouldTriggerIncorrectGuess('1', targets, found)).toBe(false)
+    })
 
-    it("should not trigger when no guesses remaining", () => {
-      const targets = [123, 456, 789];
-      const found: number[] = [];
+    it('should not trigger when no guesses remaining', () => {
+      const targets = [123, 456, 789]
+      const found: number[] = []
 
-      expect(shouldTriggerIncorrectGuess("99", targets, found, false)).toBe(
-        false,
-      );
-    });
+      expect(shouldTriggerIncorrectGuess('99', targets, found, false)).toBe(false)
+    })
 
-    it("should handle the 55/555 bug scenario correctly", () => {
-      const targets = [55, 555, 123];
-      const found = [55]; // 55 already found
+    it('should handle the 55/555 bug scenario correctly', () => {
+      const targets = [55, 555, 123]
+      const found = [55] // 55 already found
 
       // After finding 55, user types "555" - should not trigger incorrect guess
-      expect(shouldTriggerIncorrectGuess("555", targets, found)).toBe(false);
+      expect(shouldTriggerIncorrectGuess('555', targets, found)).toBe(false)
 
       // User types "99" - should trigger incorrect guess
-      expect(shouldTriggerIncorrectGuess("99", targets, found)).toBe(true);
-    });
-  });
+      expect(shouldTriggerIncorrectGuess('99', targets, found)).toBe(true)
+    })
+  })
 
-  describe("isCorrectAndAvailable", () => {
-    it("should return true for correct unfound numbers", () => {
-      const targets = [55, 555, 123];
-      const found: number[] = [];
+  describe('isCorrectAndAvailable', () => {
+    it('should return true for correct unfound numbers', () => {
+      const targets = [55, 555, 123]
+      const found: number[] = []
 
-      expect(isCorrectAndAvailable(55, targets, found)).toBe(true);
-      expect(isCorrectAndAvailable(555, targets, found)).toBe(true);
-      expect(isCorrectAndAvailable(123, targets, found)).toBe(true);
-    });
+      expect(isCorrectAndAvailable(55, targets, found)).toBe(true)
+      expect(isCorrectAndAvailable(555, targets, found)).toBe(true)
+      expect(isCorrectAndAvailable(123, targets, found)).toBe(true)
+    })
 
-    it("should return false for already found numbers", () => {
-      const targets = [55, 555, 123];
-      const found = [55, 123];
+    it('should return false for already found numbers', () => {
+      const targets = [55, 555, 123]
+      const found = [55, 123]
 
-      expect(isCorrectAndAvailable(55, targets, found)).toBe(false);
-      expect(isCorrectAndAvailable(123, targets, found)).toBe(false);
-      expect(isCorrectAndAvailable(555, targets, found)).toBe(true); // still available
-    });
+      expect(isCorrectAndAvailable(55, targets, found)).toBe(false)
+      expect(isCorrectAndAvailable(123, targets, found)).toBe(false)
+      expect(isCorrectAndAvailable(555, targets, found)).toBe(true) // still available
+    })
 
-    it("should return false for incorrect numbers", () => {
-      const targets = [55, 555, 123];
-      const found: number[] = [];
+    it('should return false for incorrect numbers', () => {
+      const targets = [55, 555, 123]
+      const found: number[] = []
 
-      expect(isCorrectAndAvailable(99, targets, found)).toBe(false);
-      expect(isCorrectAndAvailable(999, targets, found)).toBe(false);
-    });
-  });
+      expect(isCorrectAndAvailable(99, targets, found)).toBe(false)
+      expect(isCorrectAndAvailable(999, targets, found)).toBe(false)
+    })
+  })
 
-  describe("Integration scenarios", () => {
-    it("should handle the reported 55/555 bug correctly", () => {
-      const targets = [55, 555, 789];
-      let found: number[] = [];
+  describe('Integration scenarios', () => {
+    it('should handle the reported 55/555 bug correctly', () => {
+      const targets = [55, 555, 789]
+      let found: number[] = []
 
       // User types "55" - should be accepted
-      expect(isCorrectAndAvailable(55, targets, found)).toBe(true);
-      expect(isPrefix("55", targets, found)).toBe(true); // prefix of 555
+      expect(isCorrectAndAvailable(55, targets, found)).toBe(true)
+      expect(isPrefix('55', targets, found)).toBe(true) // prefix of 555
 
       // Accept "55"
-      found = [55];
+      found = [55]
 
       // Now user tries to type "555"
       // First they type "5" - should be valid prefix of 555
-      expect(isPrefix("5", targets, found)).toBe(true); // still prefix of 555
-      expect(shouldTriggerIncorrectGuess("5", targets, found)).toBe(false);
+      expect(isPrefix('5', targets, found)).toBe(true) // still prefix of 555
+      expect(shouldTriggerIncorrectGuess('5', targets, found)).toBe(false)
 
       // Then "55" - should still be considered prefix of 555
-      expect(isPrefix("55", targets, found)).toBe(true); // still prefix of 555
-      expect(shouldTriggerIncorrectGuess("55", targets, found)).toBe(false); // and still correct answer
+      expect(isPrefix('55', targets, found)).toBe(true) // still prefix of 555
+      expect(shouldTriggerIncorrectGuess('55', targets, found)).toBe(false) // and still correct answer
 
       // Finally "555" - should be accepted
-      expect(isCorrectAndAvailable(555, targets, found)).toBe(true);
-      expect(shouldTriggerIncorrectGuess("555", targets, found)).toBe(false);
-    });
+      expect(isCorrectAndAvailable(555, targets, found)).toBe(true)
+      expect(shouldTriggerIncorrectGuess('555', targets, found)).toBe(false)
+    })
 
-    it("should handle multiple overlapping prefixes", () => {
-      const targets = [1, 12, 123, 1234];
-      let found: number[] = [];
+    it('should handle multiple overlapping prefixes', () => {
+      const targets = [1, 12, 123, 1234]
+      let found: number[] = []
 
       // All should be prefixes initially
-      expect(isPrefix("1", targets, found)).toBe(true); // prefix of 12, 123, 1234
-      expect(isPrefix("12", targets, found)).toBe(true); // prefix of 123, 1234
-      expect(isPrefix("123", targets, found)).toBe(true); // prefix of 1234
+      expect(isPrefix('1', targets, found)).toBe(true) // prefix of 12, 123, 1234
+      expect(isPrefix('12', targets, found)).toBe(true) // prefix of 123, 1234
+      expect(isPrefix('123', targets, found)).toBe(true) // prefix of 1234
 
       // Find 1 and 123
-      found = [1, 123];
+      found = [1, 123]
 
       // Check prefixes with some found
-      expect(isPrefix("1", targets, found)).toBe(true); // still prefix of 12, 1234
-      expect(isPrefix("12", targets, found)).toBe(true); // still prefix of 12, 1234
-      expect(isPrefix("123", targets, found)).toBe(true); // still prefix of 1234
-    });
-  });
-});
+      expect(isPrefix('1', targets, found)).toBe(true) // still prefix of 12, 1234
+      expect(isPrefix('12', targets, found)).toBe(true) // still prefix of 12, 1234
+      expect(isPrefix('123', targets, found)).toBe(true) // still prefix of 1234
+    })
+  })
+})
diff --git a/apps/web/src/lib/memory-quiz-utils.ts b/apps/web/src/lib/memory-quiz-utils.ts
index 2f2873e6..8d472353 100644
--- a/apps/web/src/lib/memory-quiz-utils.ts
+++ b/apps/web/src/lib/memory-quiz-utils.ts
@@ -6,22 +6,18 @@
  * Check if an input string is a prefix of any numbers in the target list,
  * excluding already found numbers
  */
-export function isPrefix(
-  input: string,
-  targetNumbers: number[],
-  foundNumbers: number[],
-): boolean {
+export function isPrefix(input: string, targetNumbers: number[], foundNumbers: number[]): boolean {
   // Original logic: check if input is a prefix of any unfound numbers
   return targetNumbers
     .filter((n) => !foundNumbers.includes(n)) // Only consider unfound numbers
-    .some((n) => n.toString().startsWith(input) && n.toString() !== input);
+    .some((n) => n.toString().startsWith(input) && n.toString() !== input)
 }
 
 /**
  * Check if an input could be a valid prefix of any target numbers
  */
 export function couldBePrefix(input: string, targetNumbers: number[]): boolean {
-  return targetNumbers.some((n) => n.toString().startsWith(input));
+  return targetNumbers.some((n) => n.toString().startsWith(input))
 }
 
 /**
@@ -30,16 +26,16 @@ export function couldBePrefix(input: string, targetNumbers: number[]): boolean {
 export function isCompleteWrongNumber(
   input: string,
   targetNumbers: number[],
-  _minLengthForWrong: number = 2,
+  _minLengthForWrong: number = 2
 ): boolean {
-  const number = parseInt(input, 10);
-  if (Number.isNaN(number)) return false;
+  const number = parseInt(input, 10)
+  if (Number.isNaN(number)) return false
 
-  const isNotTarget = !targetNumbers.includes(number);
-  const cannotBePrefix = !couldBePrefix(input, targetNumbers);
+  const isNotTarget = !targetNumbers.includes(number)
+  const cannotBePrefix = !couldBePrefix(input, targetNumbers)
 
   // It's a complete wrong number if it's not a target AND it cannot be a prefix of any target
-  return isNotTarget && cannotBePrefix;
+  return isNotTarget && cannotBePrefix
 }
 
 /**
@@ -49,23 +45,20 @@ export function shouldTriggerIncorrectGuess(
   input: string,
   targetNumbers: number[],
   _foundNumbers: number[],
-  hasGuessesRemaining: boolean = true,
+  hasGuessesRemaining: boolean = true
 ): boolean {
-  if (!hasGuessesRemaining) return false;
+  if (!hasGuessesRemaining) return false
 
-  const number = parseInt(input, 10);
-  if (Number.isNaN(number)) return false;
+  const number = parseInt(input, 10)
+  if (Number.isNaN(number)) return false
 
   // Don't trigger if it's a correct answer (even if already found)
-  if (targetNumbers.includes(number)) return false;
+  if (targetNumbers.includes(number)) return false
 
-  const couldBeValidPrefix = couldBePrefix(input, targetNumbers);
+  const couldBeValidPrefix = couldBePrefix(input, targetNumbers)
 
   // Trigger if it clearly cannot be a valid prefix, OR if it's a multi-digit partial input
-  return (
-    !couldBeValidPrefix ||
-    (input.length >= 2 && !targetNumbers.includes(number))
-  );
+  return !couldBeValidPrefix || (input.length >= 2 && !targetNumbers.includes(number))
 }
 
 /**
@@ -74,7 +67,7 @@ export function shouldTriggerIncorrectGuess(
 export function isCorrectAndAvailable(
   number: number,
   targetNumbers: number[],
-  foundNumbers: number[],
+  foundNumbers: number[]
 ): boolean {
-  return targetNumbers.includes(number) && !foundNumbers.includes(number);
+  return targetNumbers.includes(number) && !foundNumbers.includes(number)
 }
diff --git a/apps/web/src/lib/queryClient.ts b/apps/web/src/lib/queryClient.ts
index ecf6a64c..8215ef0c 100644
--- a/apps/web/src/lib/queryClient.ts
+++ b/apps/web/src/lib/queryClient.ts
@@ -1,4 +1,4 @@
-import { type DefaultOptions, QueryClient } from "@tanstack/react-query";
+import { type DefaultOptions, QueryClient } from '@tanstack/react-query'
 
 const queryConfig: DefaultOptions = {
   queries: {
@@ -7,9 +7,9 @@ const queryConfig: DefaultOptions = {
     // Retry failed requests once
     retry: 1,
     // Refetch on window focus in production only
-    refetchOnWindowFocus: process.env.NODE_ENV === "production",
+    refetchOnWindowFocus: process.env.NODE_ENV === 'production',
   },
-};
+}
 
 /**
  * Creates a new QueryClient instance with default configuration.
@@ -18,7 +18,7 @@ const queryConfig: DefaultOptions = {
 export function createQueryClient() {
   return new QueryClient({
     defaultOptions: queryConfig,
-  });
+  })
 }
 
 /**
@@ -36,8 +36,8 @@ export function createQueryClient() {
  */
 export function apiUrl(path: string): string {
   // Remove leading slash if present to avoid double slashes
-  const cleanPath = path.startsWith("/") ? path.slice(1) : path;
-  return `/api/${cleanPath}`;
+  const cleanPath = path.startsWith('/') ? path.slice(1) : path
+  return `/api/${cleanPath}`
 }
 
 /**
@@ -63,5 +63,5 @@ export function apiUrl(path: string): string {
  * ```
  */
 export function api(path: string, options?: RequestInit): Promise<Response> {
-  return fetch(apiUrl(path), options);
+  return fetch(apiUrl(path), options)
 }
diff --git a/apps/web/src/lib/socket-io.ts b/apps/web/src/lib/socket-io.ts
index 7bcdae28..00d0ba40 100644
--- a/apps/web/src/lib/socket-io.ts
+++ b/apps/web/src/lib/socket-io.ts
@@ -4,10 +4,10 @@
  * to broadcast real-time updates.
  */
 
-import type { Server as SocketIOServerType } from "socket.io";
+import type { Server as SocketIOServerType } from 'socket.io'
 
 // Cache for the socket server module
-let socketServerModule: any = null;
+let socketServerModule: any = null
 
 /**
  * Get the socket.io server instance
@@ -15,31 +15,26 @@ let socketServerModule: any = null;
  */
 export async function getSocketIO(): Promise<SocketIOServerType | null> {
   // Client-side: return null
-  if (typeof window !== "undefined") {
-    return null;
+  if (typeof window !== 'undefined') {
+    return null
   }
 
   // Lazy-load the socket server module on first call
   if (!socketServerModule) {
     try {
       // Dynamic import to avoid bundling issues
-      socketServerModule = await import("../socket-server");
+      socketServerModule = await import('../socket-server')
     } catch (error) {
-      console.error("[Socket IO] Failed to load socket server:", error);
-      return null;
+      console.error('[Socket IO] Failed to load socket server:', error)
+      return null
     }
   }
 
   // Call the exported getSocketIO function from the module
-  if (
-    socketServerModule &&
-    typeof socketServerModule.getSocketIO === "function"
-  ) {
-    return socketServerModule.getSocketIO();
+  if (socketServerModule && typeof socketServerModule.getSocketIO === 'function') {
+    return socketServerModule.getSocketIO()
   }
 
-  console.warn(
-    "[Socket IO] getSocketIO function not found in socket-server module",
-  );
-  return null;
+  console.warn('[Socket IO] getSocketIO function not found in socket-server module')
+  return null
 }
diff --git a/apps/web/src/lib/viewer.ts b/apps/web/src/lib/viewer.ts
index b1da0a92..216eb42e 100644
--- a/apps/web/src/lib/viewer.ts
+++ b/apps/web/src/lib/viewer.ts
@@ -1,6 +1,6 @@
-import { cookies, headers } from "next/headers";
-import { auth } from "@/auth";
-import { GUEST_COOKIE_NAME, verifyGuestToken } from "./guest-token";
+import { cookies, headers } from 'next/headers'
+import { auth } from '@/auth'
+import { GUEST_COOKIE_NAME, verifyGuestToken } from './guest-token'
 
 /**
  * Unified viewer utility for server components
@@ -11,36 +11,36 @@ import { GUEST_COOKIE_NAME, verifyGuestToken } from "./guest-token";
  * @returns Viewer information with discriminated union type
  */
 export async function getViewer(): Promise<
-  | { kind: "user"; session: Awaited<ReturnType<typeof auth>> }
-  | { kind: "guest"; guestId: string }
-  | { kind: "unknown" }
+  | { kind: 'user'; session: Awaited<ReturnType<typeof auth>> }
+  | { kind: 'guest'; guestId: string }
+  | { kind: 'unknown' }
 > {
   // Check if user is authenticated via NextAuth
-  const session = await auth();
+  const session = await auth()
   if (session) {
-    return { kind: "user", session };
+    return { kind: 'user', session }
   }
 
   // Check for guest ID in header (set by middleware)
-  const headerStore = await headers();
-  const headerGuestId = headerStore.get("x-guest-id");
+  const headerStore = await headers()
+  const headerGuestId = headerStore.get('x-guest-id')
   if (headerGuestId) {
-    return { kind: "guest", guestId: headerGuestId };
+    return { kind: 'guest', guestId: headerGuestId }
   }
 
   // Fallback: check for guest cookie
-  const cookieStore = await cookies();
-  const guestCookie = cookieStore.get(GUEST_COOKIE_NAME)?.value;
+  const cookieStore = await cookies()
+  const guestCookie = cookieStore.get(GUEST_COOKIE_NAME)?.value
 
   if (!guestCookie) {
-    return { kind: "unknown" };
+    return { kind: 'unknown' }
   }
 
   try {
-    const { sid } = await verifyGuestToken(guestCookie);
-    return { kind: "guest", guestId: sid };
+    const { sid } = await verifyGuestToken(guestCookie)
+    return { kind: 'guest', guestId: sid }
   } catch {
-    return { kind: "unknown" };
+    return { kind: 'unknown' }
   }
 }
 
@@ -54,14 +54,14 @@ export async function getViewer(): Promise<
  * @throws Error if no valid viewer found
  */
 export async function getViewerId(): Promise<string> {
-  const viewer = await getViewer();
+  const viewer = await getViewer()
 
   switch (viewer.kind) {
-    case "user":
-      return viewer.session!.user!.id;
-    case "guest":
-      return viewer.guestId;
-    case "unknown":
-      throw new Error("No valid viewer session found");
+    case 'user':
+      return viewer.session!.user!.id
+    case 'guest':
+      return viewer.guestId
+    case 'unknown':
+      throw new Error('No valid viewer session found')
   }
 }
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
index ec552e50..5a2dc52d 100644
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/middleware.ts
@@ -1,11 +1,6 @@
-import { type NextRequest, NextResponse } from "next/server";
-import { createGuestToken, GUEST_COOKIE_NAME } from "./lib/guest-token";
-import {
-  defaultLocale,
-  LOCALE_COOKIE_NAME,
-  locales,
-  type Locale,
-} from "./i18n/routing";
+import { type NextRequest, NextResponse } from 'next/server'
+import { createGuestToken, GUEST_COOKIE_NAME } from './lib/guest-token'
+import { defaultLocale, LOCALE_COOKIE_NAME, locales, type Locale } from './i18n/routing'
 
 /**
  * Middleware to:
@@ -14,82 +9,80 @@ import {
  * 3. Add pathname and locale to headers for Server Components
  */
 export async function middleware(request: NextRequest) {
-  const response = NextResponse.next();
+  const response = NextResponse.next()
 
   // Detect locale from cookie or Accept-Language header
-  let locale = request.cookies.get(LOCALE_COOKIE_NAME)?.value as
-    | Locale
-    | undefined;
+  let locale = request.cookies.get(LOCALE_COOKIE_NAME)?.value as Locale | undefined
 
   if (!locale || !locales.includes(locale)) {
     // Parse Accept-Language header
-    const acceptLanguage = request.headers.get("accept-language");
+    const acceptLanguage = request.headers.get('accept-language')
     if (acceptLanguage) {
       const preferred = acceptLanguage
-        .split(",")
-        .map((lang) => lang.split(";")[0].trim().slice(0, 2))
-        .find((lang) => locales.includes(lang as Locale));
-      locale = (preferred as Locale) || defaultLocale;
+        .split(',')
+        .map((lang) => lang.split(';')[0].trim().slice(0, 2))
+        .find((lang) => locales.includes(lang as Locale))
+      locale = (preferred as Locale) || defaultLocale
     } else {
-      locale = defaultLocale;
+      locale = defaultLocale
     }
 
     // Set locale cookie
     response.cookies.set(LOCALE_COOKIE_NAME, locale, {
-      path: "/",
+      path: '/',
       maxAge: 60 * 60 * 24 * 365, // 1 year
-      sameSite: "lax",
-    });
+      sameSite: 'lax',
+    })
   }
 
   // Add locale to headers for Server Components
-  response.headers.set("x-locale", locale);
+  response.headers.set('x-locale', locale)
 
   // Add pathname to headers so Server Components can access it
-  response.headers.set("x-pathname", request.nextUrl.pathname);
+  response.headers.set('x-pathname', request.nextUrl.pathname)
 
   // Check if guest cookie already exists
-  let existing = request.cookies.get(GUEST_COOKIE_NAME)?.value;
-  let guestId: string | null = null;
+  let existing = request.cookies.get(GUEST_COOKIE_NAME)?.value
+  let guestId: string | null = null
 
   if (existing) {
     // Verify and extract guest ID from existing token
     try {
-      const { verifyGuestToken } = await import("./lib/guest-token");
-      const verified = await verifyGuestToken(existing);
-      guestId = verified.sid;
+      const { verifyGuestToken } = await import('./lib/guest-token')
+      const verified = await verifyGuestToken(existing)
+      guestId = verified.sid
     } catch {
       // Invalid token, will create new one
-      existing = undefined;
+      existing = undefined
     }
   }
 
   if (!existing) {
     // Generate new stable session ID
-    const sid = crypto.randomUUID();
-    guestId = sid;
+    const sid = crypto.randomUUID()
+    guestId = sid
 
     // Create signed guest token
-    const token = await createGuestToken(sid);
+    const token = await createGuestToken(sid)
 
     // Set cookie with security flags
     response.cookies.set({
       name: GUEST_COOKIE_NAME,
       value: token,
       httpOnly: true, // Not accessible via JavaScript
-      secure: process.env.NODE_ENV === "production", // HTTPS only in production
-      sameSite: "lax", // CSRF protection
-      path: "/", // Required for __Host- prefix
+      secure: process.env.NODE_ENV === 'production', // HTTPS only in production
+      sameSite: 'lax', // CSRF protection
+      path: '/', // Required for __Host- prefix
       maxAge: 60 * 60 * 24 * 30, // 30 days
-    });
+    })
   }
 
   // Pass guest ID to route handlers via header
   if (guestId) {
-    response.headers.set("x-guest-id", guestId);
+    response.headers.set('x-guest-id', guestId)
   }
 
-  return response;
+  return response
 }
 
 export const config = {
@@ -103,6 +96,6 @@ export const config = {
      *
      * Note: This matcher handles both i18n routing and guest tokens
      */
-    "/((?!api|_next|_vercel|.*\\..*).*)",
+    '/((?!api|_next|_vercel|.*\\..*).*)',
   ],
-};
+}
diff --git a/apps/web/src/socket-server.ts b/apps/web/src/socket-server.ts
index 498872a2..16edb8ac 100644
--- a/apps/web/src/socket-server.ts
+++ b/apps/web/src/socket-server.ts
@@ -1,7 +1,7 @@
-import type { Server as HTTPServer, IncomingMessage } from "http";
-import { Server as SocketIOServer } from "socket.io";
-import type { Server as SocketIOServerType } from "socket.io";
-import { WebSocketServer, type WebSocket } from "ws";
+import type { Server as HTTPServer, IncomingMessage } from 'http'
+import { Server as SocketIOServer } from 'socket.io'
+import type { Server as SocketIOServerType } from 'socket.io'
+import { WebSocketServer, type WebSocket } from 'ws'
 import {
   applyGameMove,
   createArcadeSession,
@@ -10,33 +10,26 @@ import {
   getArcadeSessionByRoom,
   updateSessionActivity,
   updateSessionActivePlayers,
-} from "./lib/arcade/session-manager";
-import { createRoom, getRoomById } from "./lib/arcade/room-manager";
-import {
-  getRoomMembers,
-  getUserRooms,
-  setMemberOnline,
-} from "./lib/arcade/room-membership";
-import {
-  getRoomActivePlayers,
-  getRoomPlayerIds,
-} from "./lib/arcade/player-manager";
-import { getValidator, type GameName } from "./lib/arcade/validators";
-import type { GameMove } from "./lib/arcade/validation/types";
-import { getGameConfig } from "./lib/arcade/game-config-helpers";
+} from './lib/arcade/session-manager'
+import { createRoom, getRoomById } from './lib/arcade/room-manager'
+import { getRoomMembers, getUserRooms, setMemberOnline } from './lib/arcade/room-membership'
+import { getRoomActivePlayers, getRoomPlayerIds } from './lib/arcade/player-manager'
+import { getValidator, type GameName } from './lib/arcade/validators'
+import type { GameMove } from './lib/arcade/validation/types'
+import { getGameConfig } from './lib/arcade/game-config-helpers'
 
 // Yjs server-side imports
-import * as Y from "yjs";
-import * as awarenessProtocol from "y-protocols/awareness";
-import * as syncProtocol from "y-protocols/sync";
-import * as encoding from "lib0/encoding";
-import * as decoding from "lib0/decoding";
+import * as Y from 'yjs'
+import * as awarenessProtocol from 'y-protocols/awareness'
+import * as syncProtocol from 'y-protocols/sync'
+import * as encoding from 'lib0/encoding'
+import * as decoding from 'lib0/decoding'
 
 // Use globalThis to store socket.io instance to avoid module isolation issues
 // This ensures the same instance is accessible across dynamic imports
 declare global {
-  var __socketIO: SocketIOServerType | undefined;
-  var __yjsRooms: Map<string, any> | undefined; // Map<roomId, RoomState>
+  var __socketIO: SocketIOServerType | undefined
+  var __yjsRooms: Map<string, any> | undefined // Map<roomId, RoomState>
 }
 
 /**
@@ -44,7 +37,7 @@ declare global {
  * Returns null if not initialized
  */
 export function getSocketIO(): SocketIOServerType | null {
-  return globalThis.__socketIO || null;
+  return globalThis.__socketIO || null
 }
 
 /**
@@ -56,195 +49,184 @@ export function getSocketIO(): SocketIOServerType | null {
 function initializeYjsServer(io: SocketIOServerType) {
   // Room state storage (keyed by arcade room ID)
   interface RoomState {
-    doc: Y.Doc;
-    awareness: awarenessProtocol.Awareness;
-    connections: Set<string>; // Socket IDs
+    doc: Y.Doc
+    awareness: awarenessProtocol.Awareness
+    connections: Set<string> // Socket IDs
   }
 
-  const rooms = new Map<string, RoomState>(); // Map<arcadeRoomId, RoomState>
-  const socketToRoom = new Map<string, string>(); // Map<socketId, roomId>
+  const rooms = new Map<string, RoomState>() // Map<arcadeRoomId, RoomState>
+  const socketToRoom = new Map<string, string>() // Map<socketId, roomId>
 
   // Store rooms globally for persistence access
-  globalThis.__yjsRooms = rooms;
+  globalThis.__yjsRooms = rooms
 
   function getOrCreateRoom(roomName: string): RoomState {
     if (!rooms.has(roomName)) {
-      const doc = new Y.Doc();
-      const awareness = new awarenessProtocol.Awareness(doc);
+      const doc = new Y.Doc()
+      const awareness = new awarenessProtocol.Awareness(doc)
 
       // Broadcast document updates to all clients via Socket.IO
-      doc.on("update", (update: Uint8Array, origin: any) => {
+      doc.on('update', (update: Uint8Array, origin: any) => {
         // Origin is the socket ID that sent the update, don't echo back to sender
-        const encoder = encoding.createEncoder();
-        encoding.writeVarUint(encoder, 0); // messageSync
-        syncProtocol.writeUpdate(encoder, update);
-        const message = encoding.toUint8Array(encoder);
+        const encoder = encoding.createEncoder()
+        encoding.writeVarUint(encoder, 0) // messageSync
+        syncProtocol.writeUpdate(encoder, update)
+        const message = encoding.toUint8Array(encoder)
 
         // Broadcast to all sockets in this room except origin
         io.to(`yjs:${roomName}`)
           .except(origin as string)
-          .emit("yjs-update", Array.from(message));
-      });
+          .emit('yjs-update', Array.from(message))
+      })
 
       // Broadcast awareness updates to all clients via Socket.IO
-      awareness.on(
-        "update",
-        ({ added, updated, removed }: any, origin: any) => {
-          const changedClients = added.concat(updated).concat(removed);
-          const encoder = encoding.createEncoder();
-          encoding.writeVarUint(encoder, 1); // messageAwareness
-          encoding.writeVarUint8Array(
-            encoder,
-            awarenessProtocol.encodeAwarenessUpdate(awareness, changedClients),
-          );
-          const message = encoding.toUint8Array(encoder);
+      awareness.on('update', ({ added, updated, removed }: any, origin: any) => {
+        const changedClients = added.concat(updated).concat(removed)
+        const encoder = encoding.createEncoder()
+        encoding.writeVarUint(encoder, 1) // messageAwareness
+        encoding.writeVarUint8Array(
+          encoder,
+          awarenessProtocol.encodeAwarenessUpdate(awareness, changedClients)
+        )
+        const message = encoding.toUint8Array(encoder)
 
-          // Broadcast to all sockets in this room except origin
-          io.to(`yjs:${roomName}`)
-            .except(origin as string)
-            .emit("yjs-awareness", Array.from(message));
-        },
-      );
+        // Broadcast to all sockets in this room except origin
+        io.to(`yjs:${roomName}`)
+          .except(origin as string)
+          .emit('yjs-awareness', Array.from(message))
+      })
 
       const roomState: RoomState = {
         doc,
         awareness,
         connections: new Set(),
-      };
-      rooms.set(roomName, roomState);
-      console.log(`✅ Created Y.Doc for room: ${roomName}`);
+      }
+      rooms.set(roomName, roomState)
+      console.log(`✅ Created Y.Doc for room: ${roomName}`)
 
       // Load persisted state asynchronously (don't block connection)
       void loadPersistedYjsState(roomName).catch((err) => {
-        console.error(
-          `Failed to load persisted state for room ${roomName}:`,
-          err,
-        );
-      });
+        console.error(`Failed to load persisted state for room ${roomName}:`, err)
+      })
     }
-    return rooms.get(roomName)!;
+    return rooms.get(roomName)!
   }
 
   // Handle Yjs connections via Socket.IO
-  io.on("connection", (socket) => {
+  io.on('connection', (socket) => {
     // Join Yjs room
-    socket.on("yjs-join", async (roomId: string) => {
-      const room = getOrCreateRoom(roomId);
+    socket.on('yjs-join', async (roomId: string) => {
+      const room = getOrCreateRoom(roomId)
 
       // Join Socket.IO room
-      await socket.join(`yjs:${roomId}`);
-      room.connections.add(socket.id);
-      socketToRoom.set(socket.id, roomId);
+      await socket.join(`yjs:${roomId}`)
+      room.connections.add(socket.id)
+      socketToRoom.set(socket.id, roomId)
 
-      console.log(
-        `🔗 Client connected to Yjs room: ${roomId} (${room.connections.size} clients)`,
-      );
+      console.log(`🔗 Client connected to Yjs room: ${roomId} (${room.connections.size} clients)`)
 
       // Send initial sync (SyncStep1)
-      const encoder = encoding.createEncoder();
-      encoding.writeVarUint(encoder, 0); // messageSync
-      syncProtocol.writeSyncStep1(encoder, room.doc);
-      socket.emit("yjs-sync", Array.from(encoding.toUint8Array(encoder)));
+      const encoder = encoding.createEncoder()
+      encoding.writeVarUint(encoder, 0) // messageSync
+      syncProtocol.writeSyncStep1(encoder, room.doc)
+      socket.emit('yjs-sync', Array.from(encoding.toUint8Array(encoder)))
 
       // Send current awareness state
-      const awarenessStates = room.awareness.getStates();
+      const awarenessStates = room.awareness.getStates()
       if (awarenessStates.size > 0) {
-        const awarenessEncoder = encoding.createEncoder();
-        encoding.writeVarUint(awarenessEncoder, 1); // messageAwareness
+        const awarenessEncoder = encoding.createEncoder()
+        encoding.writeVarUint(awarenessEncoder, 1) // messageAwareness
         encoding.writeVarUint8Array(
           awarenessEncoder,
           awarenessProtocol.encodeAwarenessUpdate(
             room.awareness,
-            Array.from(awarenessStates.keys()),
-          ),
-        );
-        socket.emit(
-          "yjs-awareness",
-          Array.from(encoding.toUint8Array(awarenessEncoder)),
-        );
+            Array.from(awarenessStates.keys())
+          )
+        )
+        socket.emit('yjs-awareness', Array.from(encoding.toUint8Array(awarenessEncoder)))
       }
-    });
+    })
 
     // Handle Yjs sync messages
-    socket.on("yjs-update", (data: number[]) => {
-      const roomId = socketToRoom.get(socket.id);
-      if (!roomId) return;
+    socket.on('yjs-update', (data: number[]) => {
+      const roomId = socketToRoom.get(socket.id)
+      if (!roomId) return
 
-      const room = rooms.get(roomId);
-      if (!room) return;
+      const room = rooms.get(roomId)
+      if (!room) return
 
-      const uint8Data = new Uint8Array(data);
-      const decoder = decoding.createDecoder(uint8Data);
-      const messageType = decoding.readVarUint(decoder);
+      const uint8Data = new Uint8Array(data)
+      const decoder = decoding.createDecoder(uint8Data)
+      const messageType = decoding.readVarUint(decoder)
 
       if (messageType === 0) {
         // Sync protocol
-        const encoder = encoding.createEncoder();
-        encoding.writeVarUint(encoder, 0);
-        syncProtocol.readSyncMessage(decoder, encoder, room.doc, socket.id);
+        const encoder = encoding.createEncoder()
+        encoding.writeVarUint(encoder, 0)
+        syncProtocol.readSyncMessage(decoder, encoder, room.doc, socket.id)
 
         // Send response if there's content
         if (encoding.length(encoder) > 1) {
-          socket.emit("yjs-sync", Array.from(encoding.toUint8Array(encoder)));
+          socket.emit('yjs-sync', Array.from(encoding.toUint8Array(encoder)))
         }
       }
-    });
+    })
 
     // Handle awareness updates
-    socket.on("yjs-awareness", (data: number[]) => {
-      const roomId = socketToRoom.get(socket.id);
-      if (!roomId) return;
+    socket.on('yjs-awareness', (data: number[]) => {
+      const roomId = socketToRoom.get(socket.id)
+      if (!roomId) return
 
-      const room = rooms.get(roomId);
-      if (!room) return;
+      const room = rooms.get(roomId)
+      if (!room) return
 
-      const uint8Data = new Uint8Array(data);
-      const decoder = decoding.createDecoder(uint8Data);
-      const messageType = decoding.readVarUint(decoder);
+      const uint8Data = new Uint8Array(data)
+      const decoder = decoding.createDecoder(uint8Data)
+      const messageType = decoding.readVarUint(decoder)
 
       if (messageType === 1) {
         awarenessProtocol.applyAwarenessUpdate(
           room.awareness,
           decoding.readVarUint8Array(decoder),
-          socket.id,
-        );
+          socket.id
+        )
       }
-    });
+    })
 
     // Cleanup on disconnect
-    socket.on("disconnect", () => {
-      const roomId = socketToRoom.get(socket.id);
+    socket.on('disconnect', () => {
+      const roomId = socketToRoom.get(socket.id)
       if (roomId) {
-        const room = rooms.get(roomId);
+        const room = rooms.get(roomId)
         if (room) {
-          room.connections.delete(socket.id);
+          room.connections.delete(socket.id)
           console.log(
-            `🔌 Client disconnected from Yjs room: ${roomId} (${room.connections.size} remain)`,
-          );
+            `🔌 Client disconnected from Yjs room: ${roomId} (${room.connections.size} remain)`
+          )
 
           // Clean up empty rooms after grace period
           if (room.connections.size === 0) {
             setTimeout(() => {
               if (room.connections.size === 0) {
-                room.awareness.destroy();
-                room.doc.destroy();
-                rooms.delete(roomId);
-                console.log(`🗑️  Cleaned up room: ${roomId}`);
+                room.awareness.destroy()
+                room.doc.destroy()
+                rooms.delete(roomId)
+                console.log(`🗑️  Cleaned up room: ${roomId}`)
               }
-            }, 30000);
+            }, 30000)
           }
         }
-        socketToRoom.delete(socket.id);
+        socketToRoom.delete(socket.id)
       }
-    });
-  });
+    })
+  })
 
-  console.log("✅ Yjs over Socket.IO initialized");
+  console.log('✅ Yjs over Socket.IO initialized')
 
   // Periodic persistence: sync Y.Doc state to arcade_sessions every 30 seconds
   setInterval(async () => {
-    await persistAllYjsRooms();
-  }, 30000);
+    await persistAllYjsRooms()
+  }, 30000)
 }
 
 /**
@@ -252,11 +234,11 @@ function initializeYjsServer(io: SocketIOServerType) {
  * Returns null if room doesn't exist
  */
 export function getYjsDoc(roomId: string): Y.Doc | null {
-  const rooms = globalThis.__yjsRooms;
-  if (!rooms) return null;
+  const rooms = globalThis.__yjsRooms
+  if (!rooms) return null
 
-  const room = rooms.get(roomId);
-  return room ? room.doc : null;
+  const room = rooms.get(roomId)
+  return room ? room.doc : null
 }
 
 /**
@@ -264,23 +246,19 @@ export function getYjsDoc(roomId: string): Y.Doc | null {
  * Should be called when creating a new room that has persisted state
  */
 export async function loadPersistedYjsState(roomId: string): Promise<void> {
-  const { extractCellsFromDoc, populateDocWithCells } = await import(
-    "./lib/arcade/yjs-persistence"
-  );
+  const { extractCellsFromDoc, populateDocWithCells } = await import('./lib/arcade/yjs-persistence')
 
-  const doc = getYjsDoc(roomId);
-  if (!doc) return;
+  const doc = getYjsDoc(roomId)
+  if (!doc) return
 
   // Get the arcade session for this room
-  const session = await getArcadeSessionByRoom(roomId);
-  if (!session) return;
+  const session = await getArcadeSessionByRoom(roomId)
+  if (!session) return
 
-  const gameState = session.gameState as any;
+  const gameState = session.gameState as any
   if (gameState.cells && Array.isArray(gameState.cells)) {
-    console.log(
-      `📥 Loading ${gameState.cells.length} persisted cells for room: ${roomId}`,
-    );
-    populateDocWithCells(doc, gameState.cells);
+    console.log(`📥 Loading ${gameState.cells.length} persisted cells for room: ${roomId}`)
+    populateDocWithCells(doc, gameState.cells)
   }
 }
 
@@ -288,25 +266,25 @@ export async function loadPersistedYjsState(roomId: string): Promise<void> {
  * Persist Y.Doc cells for a specific room to arcade_sessions
  */
 export async function persistYjsRoom(roomId: string): Promise<void> {
-  const { extractCellsFromDoc } = await import("./lib/arcade/yjs-persistence");
-  const { db, schema } = await import("@/db");
-  const { eq } = await import("drizzle-orm");
+  const { extractCellsFromDoc } = await import('./lib/arcade/yjs-persistence')
+  const { db, schema } = await import('@/db')
+  const { eq } = await import('drizzle-orm')
 
-  const doc = getYjsDoc(roomId);
-  if (!doc) return;
+  const doc = getYjsDoc(roomId)
+  if (!doc) return
 
-  const session = await getArcadeSessionByRoom(roomId);
-  if (!session) return;
+  const session = await getArcadeSessionByRoom(roomId)
+  if (!session) return
 
   // Extract cells from Y.Doc
-  const cells = extractCellsFromDoc(doc, "cells");
+  const cells = extractCellsFromDoc(doc, 'cells')
 
   // Update the gameState with current cells
-  const currentState = session.gameState as Record<string, any>;
+  const currentState = session.gameState as Record<string, any>
   const updatedGameState = {
     ...currentState,
     cells,
-  };
+  }
 
   // Save to database
   try {
@@ -316,9 +294,9 @@ export async function persistYjsRoom(roomId: string): Promise<void> {
         gameState: updatedGameState as any,
         lastActivityAt: new Date(),
       })
-      .where(eq(schema.arcadeSessions.roomId, roomId));
+      .where(eq(schema.arcadeSessions.roomId, roomId))
   } catch (error) {
-    console.error(`Error persisting Yjs room ${roomId}:`, error);
+    console.error(`Error persisting Yjs room ${roomId}:`, error)
   }
 }
 
@@ -326,44 +304,44 @@ export async function persistYjsRoom(roomId: string): Promise<void> {
  * Persist all active Yjs rooms
  */
 export async function persistAllYjsRooms(): Promise<void> {
-  const rooms = globalThis.__yjsRooms;
-  if (!rooms || rooms.size === 0) return;
+  const rooms = globalThis.__yjsRooms
+  if (!rooms || rooms.size === 0) return
 
-  const roomIds = Array.from(rooms.keys());
+  const roomIds = Array.from(rooms.keys())
   for (const roomId of roomIds) {
     // Only persist rooms with active connections
-    const room = rooms.get(roomId);
+    const room = rooms.get(roomId)
     if (room && room.connections.size > 0) {
-      await persistYjsRoom(roomId);
+      await persistYjsRoom(roomId)
     }
   }
 }
 
 export function initializeSocketServer(httpServer: HTTPServer) {
   const io = new SocketIOServer(httpServer, {
-    path: "/api/socket",
+    path: '/api/socket',
     cors: {
-      origin: process.env.NEXT_PUBLIC_URL || "http://localhost:3000",
+      origin: process.env.NEXT_PUBLIC_URL || 'http://localhost:3000',
       credentials: true,
     },
-  });
+  })
 
   // Initialize Yjs server over Socket.IO
-  initializeYjsServer(io);
+  initializeYjsServer(io)
 
-  io.on("connection", (socket) => {
-    let currentUserId: string | null = null;
+  io.on('connection', (socket) => {
+    let currentUserId: string | null = null
 
     // Join arcade session room
     socket.on(
-      "join-arcade-session",
+      'join-arcade-session',
       async ({ userId, roomId }: { userId: string; roomId?: string }) => {
-        currentUserId = userId;
-        socket.join(`arcade:${userId}`);
+        currentUserId = userId
+        socket.join(`arcade:${userId}`)
 
         // If this session is part of a room, also join the game room for multi-user sync
         if (roomId) {
-          socket.join(`game:${roomId}`);
+          socket.join(`game:${roomId}`)
         }
 
         // Send current session state if exists
@@ -371,377 +349,348 @@ export function initializeSocketServer(httpServer: HTTPServer) {
         try {
           let session = roomId
             ? await getArcadeSessionByRoom(roomId)
-            : await getArcadeSession(userId);
+            : await getArcadeSession(userId)
 
           // If no session exists for this room, create one in setup phase
           // This allows users to send SET_CONFIG moves before starting the game
           if (!session && roomId) {
             // Get the room to determine game type and config
-            const room = await getRoomById(roomId);
+            const room = await getRoomById(roomId)
             if (room) {
               // Fetch all active player IDs from room members (respects isActive flag)
-              const roomPlayerIds = await getRoomPlayerIds(roomId);
+              const roomPlayerIds = await getRoomPlayerIds(roomId)
 
               // Get initial state from the correct validator based on game type
-              const validator = getValidator(room.gameName as GameName);
+              const validator = getValidator(room.gameName as GameName)
 
               // Get game-specific config from database (type-safe)
-              const gameConfig = await getGameConfig(
-                roomId,
-                room.gameName as GameName,
-              );
-              const initialState = validator.getInitialState(gameConfig);
+              const gameConfig = await getGameConfig(roomId, room.gameName as GameName)
+              const initialState = validator.getInitialState(gameConfig)
 
               session = await createArcadeSession({
                 userId,
                 gameName: room.gameName as GameName,
-                gameUrl: "/arcade",
+                gameUrl: '/arcade',
                 initialState,
                 activePlayers: roomPlayerIds, // Include all room members' active players
                 roomId: room.id,
-              });
+              })
             }
           }
 
           if (session) {
-            socket.emit("session-state", {
+            socket.emit('session-state', {
               gameState: session.gameState,
               currentGame: session.currentGame,
               gameUrl: session.gameUrl,
               activePlayers: session.activePlayers,
               version: session.version,
-            });
+            })
           } else {
-            socket.emit("no-active-session");
+            socket.emit('no-active-session')
           }
         } catch (error) {
-          console.error("Error fetching session:", error);
-          socket.emit("session-error", { error: "Failed to fetch session" });
+          console.error('Error fetching session:', error)
+          socket.emit('session-error', { error: 'Failed to fetch session' })
         }
-      },
-    );
+      }
+    )
 
     // Handle game moves
-    socket.on(
-      "game-move",
-      async (data: { userId: string; move: GameMove; roomId?: string }) => {
-        try {
-          // Special handling for START_GAME - create session if it doesn't exist
-          if (data.move.type === "START_GAME") {
-            // For room-based games, check if room session exists
-            const existingSession = data.roomId
-              ? await getArcadeSessionByRoom(data.roomId)
-              : await getArcadeSession(data.userId);
+    socket.on('game-move', async (data: { userId: string; move: GameMove; roomId?: string }) => {
+      try {
+        // Special handling for START_GAME - create session if it doesn't exist
+        if (data.move.type === 'START_GAME') {
+          // For room-based games, check if room session exists
+          const existingSession = data.roomId
+            ? await getArcadeSessionByRoom(data.roomId)
+            : await getArcadeSession(data.userId)
 
-            if (!existingSession) {
-              // activePlayers must be provided in the START_GAME move data
-              const activePlayers = (data.move.data as any)?.activePlayers;
-              if (!activePlayers || activePlayers.length === 0) {
-                socket.emit("move-rejected", {
-                  error: "START_GAME requires at least one active player",
-                  move: data.move,
-                });
-                return;
+          if (!existingSession) {
+            // activePlayers must be provided in the START_GAME move data
+            const activePlayers = (data.move.data as any)?.activePlayers
+            if (!activePlayers || activePlayers.length === 0) {
+              socket.emit('move-rejected', {
+                error: 'START_GAME requires at least one active player',
+                move: data.move,
+              })
+              return
+            }
+
+            // Get initial state from validator (this code path is matching-game specific)
+            const matchingValidator = getValidator('matching')
+            const initialState = matchingValidator.getInitialState({
+              difficulty: 6,
+              gameType: 'abacus-numeral',
+              turnTimer: 30,
+            })
+
+            // Check if user is already in a room for this game
+            const userRoomIds = await getUserRooms(data.userId)
+            let room = null
+
+            // Look for an existing active room for this game
+            for (const roomId of userRoomIds) {
+              const existingRoom = await getRoomById(roomId)
+              if (
+                existingRoom &&
+                existingRoom.gameName === 'matching' &&
+                existingRoom.status !== 'finished'
+              ) {
+                room = existingRoom
+                break
               }
+            }
 
-              // Get initial state from validator (this code path is matching-game specific)
-              const matchingValidator = getValidator("matching");
-              const initialState = matchingValidator.getInitialState({
-                difficulty: 6,
-                gameType: "abacus-numeral",
-                turnTimer: 30,
-              });
+            // If no suitable room exists, create a new one
+            if (!room) {
+              room = await createRoom({
+                name: 'Auto-generated Room',
+                createdBy: data.userId,
+                creatorName: 'Player',
+                gameName: 'matching' as GameName,
+                gameConfig: {
+                  difficulty: 6,
+                  gameType: 'abacus-numeral',
+                  turnTimer: 30,
+                },
+                ttlMinutes: 60,
+              })
+            }
 
-              // Check if user is already in a room for this game
-              const userRoomIds = await getUserRooms(data.userId);
-              let room = null;
+            // Now create the session linked to the room
+            await createArcadeSession({
+              userId: data.userId,
+              gameName: 'matching',
+              gameUrl: '/arcade', // Room-based sessions use /arcade
+              initialState,
+              activePlayers,
+              roomId: room.id,
+            })
 
-              // Look for an existing active room for this game
-              for (const roomId of userRoomIds) {
-                const existingRoom = await getRoomById(roomId);
-                if (
-                  existingRoom &&
-                  existingRoom.gameName === "matching" &&
-                  existingRoom.status !== "finished"
-                ) {
-                  room = existingRoom;
-                  break;
-                }
-              }
-
-              // If no suitable room exists, create a new one
-              if (!room) {
-                room = await createRoom({
-                  name: "Auto-generated Room",
-                  createdBy: data.userId,
-                  creatorName: "Player",
-                  gameName: "matching" as GameName,
-                  gameConfig: {
-                    difficulty: 6,
-                    gameType: "abacus-numeral",
-                    turnTimer: 30,
-                  },
-                  ttlMinutes: 60,
-                });
-              }
-
-              // Now create the session linked to the room
-              await createArcadeSession({
-                userId: data.userId,
-                gameName: "matching",
-                gameUrl: "/arcade", // Room-based sessions use /arcade
-                initialState,
-                activePlayers,
-                roomId: room.id,
-              });
-
-              // Notify all connected clients about the new session
-              const newSession = await getArcadeSession(data.userId);
-              if (newSession) {
-                io!.to(`arcade:${data.userId}`).emit("session-state", {
-                  gameState: newSession.gameState,
-                  currentGame: newSession.currentGame,
-                  gameUrl: newSession.gameUrl,
-                  activePlayers: newSession.activePlayers,
-                  version: newSession.version,
-                });
-              }
+            // Notify all connected clients about the new session
+            const newSession = await getArcadeSession(data.userId)
+            if (newSession) {
+              io!.to(`arcade:${data.userId}`).emit('session-state', {
+                gameState: newSession.gameState,
+                currentGame: newSession.currentGame,
+                gameUrl: newSession.gameUrl,
+                activePlayers: newSession.activePlayers,
+                version: newSession.version,
+              })
             }
           }
-
-          // Apply game move - use roomId for room-based games to access shared session
-          const result = await applyGameMove(
-            data.userId,
-            data.move,
-            data.roomId,
-          );
-
-          if (result.success && result.session) {
-            const moveAcceptedData = {
-              gameState: result.session.gameState,
-              version: result.session.version,
-              move: data.move,
-            };
-
-            // Broadcast the updated state to all devices for this user
-            io!
-              .to(`arcade:${data.userId}`)
-              .emit("move-accepted", moveAcceptedData);
-
-            // If this is a room-based session, ALSO broadcast to all users in the room
-            if (result.session.roomId) {
-              io!
-                .to(`game:${result.session.roomId}`)
-                .emit("move-accepted", moveAcceptedData);
-            }
-
-            // Update activity timestamp
-            await updateSessionActivity(data.userId);
-          } else {
-            // Send rejection only to the requesting socket
-            if (result.versionConflict) {
-              console.warn(
-                `[SocketServer] VERSION_CONFLICT_REJECTED room=${data.roomId} move=${data.move.type} user=${data.userId} socket=${socket.id}`,
-              );
-            }
-            socket.emit("move-rejected", {
-              error: result.error,
-              move: data.move,
-              versionConflict: result.versionConflict,
-            });
-          }
-        } catch (error) {
-          console.error("Error processing move:", error);
-          socket.emit("move-rejected", {
-            error: "Server error processing move",
-            move: data.move,
-          });
         }
-      },
-    );
+
+        // Apply game move - use roomId for room-based games to access shared session
+        const result = await applyGameMove(data.userId, data.move, data.roomId)
+
+        if (result.success && result.session) {
+          const moveAcceptedData = {
+            gameState: result.session.gameState,
+            version: result.session.version,
+            move: data.move,
+          }
+
+          // Broadcast the updated state to all devices for this user
+          io!.to(`arcade:${data.userId}`).emit('move-accepted', moveAcceptedData)
+
+          // If this is a room-based session, ALSO broadcast to all users in the room
+          if (result.session.roomId) {
+            io!.to(`game:${result.session.roomId}`).emit('move-accepted', moveAcceptedData)
+          }
+
+          // Update activity timestamp
+          await updateSessionActivity(data.userId)
+        } else {
+          // Send rejection only to the requesting socket
+          if (result.versionConflict) {
+            console.warn(
+              `[SocketServer] VERSION_CONFLICT_REJECTED room=${data.roomId} move=${data.move.type} user=${data.userId} socket=${socket.id}`
+            )
+          }
+          socket.emit('move-rejected', {
+            error: result.error,
+            move: data.move,
+            versionConflict: result.versionConflict,
+          })
+        }
+      } catch (error) {
+        console.error('Error processing move:', error)
+        socket.emit('move-rejected', {
+          error: 'Server error processing move',
+          move: data.move,
+        })
+      }
+    })
 
     // Handle session exit
-    socket.on("exit-arcade-session", async ({ userId }: { userId: string }) => {
+    socket.on('exit-arcade-session', async ({ userId }: { userId: string }) => {
       try {
-        await deleteArcadeSession(userId);
-        io!.to(`arcade:${userId}`).emit("session-ended");
+        await deleteArcadeSession(userId)
+        io!.to(`arcade:${userId}`).emit('session-ended')
       } catch (error) {
-        console.error("Error ending session:", error);
-        socket.emit("session-error", { error: "Failed to end session" });
+        console.error('Error ending session:', error)
+        socket.emit('session-error', { error: 'Failed to end session' })
       }
-    });
+    })
 
     // Keep-alive ping
-    socket.on("ping-session", async ({ userId }: { userId: string }) => {
+    socket.on('ping-session', async ({ userId }: { userId: string }) => {
       try {
-        await updateSessionActivity(userId);
-        socket.emit("pong-session");
+        await updateSessionActivity(userId)
+        socket.emit('pong-session')
       } catch (error) {
-        console.error("Error updating activity:", error);
+        console.error('Error updating activity:', error)
       }
-    });
+    })
 
     // Room: Join
-    socket.on(
-      "join-room",
-      async ({ roomId, userId }: { roomId: string; userId: string }) => {
-        try {
-          // Join the socket room
-          socket.join(`room:${roomId}`);
+    socket.on('join-room', async ({ roomId, userId }: { roomId: string; userId: string }) => {
+      try {
+        // Join the socket room
+        socket.join(`room:${roomId}`)
 
-          // Mark member as online
-          await setMemberOnline(roomId, userId, true);
+        // Mark member as online
+        await setMemberOnline(roomId, userId, true)
 
-          // Get room data
-          const members = await getRoomMembers(roomId);
-          const memberPlayers = await getRoomActivePlayers(roomId);
+        // Get room data
+        const members = await getRoomMembers(roomId)
+        const memberPlayers = await getRoomActivePlayers(roomId)
 
-          // Convert memberPlayers Map to object for JSON serialization
-          const memberPlayersObj: Record<string, any[]> = {};
-          for (const [uid, players] of memberPlayers.entries()) {
-            memberPlayersObj[uid] = players;
-          }
-
-          // Update session's activePlayers if game hasn't started yet
-          // This ensures new members' players are included in the session
-          const roomPlayerIds = await getRoomPlayerIds(roomId);
-          const sessionUpdated = await updateSessionActivePlayers(
-            roomId,
-            roomPlayerIds,
-          );
-
-          if (sessionUpdated) {
-            // Broadcast updated session state to all users in the game room
-            const updatedSession = await getArcadeSessionByRoom(roomId);
-            if (updatedSession) {
-              io!.to(`game:${roomId}`).emit("session-state", {
-                gameState: updatedSession.gameState,
-                currentGame: updatedSession.currentGame,
-                gameUrl: updatedSession.gameUrl,
-                activePlayers: updatedSession.activePlayers,
-                version: updatedSession.version,
-              });
-            }
-          }
-
-          // Send current room state to the joining user
-          socket.emit("room-joined", {
-            roomId,
-            members,
-            memberPlayers: memberPlayersObj,
-          });
-
-          // Notify all other members in the room
-          socket.to(`room:${roomId}`).emit("member-joined", {
-            roomId,
-            userId,
-            members,
-            memberPlayers: memberPlayersObj,
-          });
-        } catch (error) {
-          console.error("Error joining room:", error);
-          socket.emit("room-error", { error: "Failed to join room" });
+        // Convert memberPlayers Map to object for JSON serialization
+        const memberPlayersObj: Record<string, any[]> = {}
+        for (const [uid, players] of memberPlayers.entries()) {
+          memberPlayersObj[uid] = players
         }
-      },
-    );
+
+        // Update session's activePlayers if game hasn't started yet
+        // This ensures new members' players are included in the session
+        const roomPlayerIds = await getRoomPlayerIds(roomId)
+        const sessionUpdated = await updateSessionActivePlayers(roomId, roomPlayerIds)
+
+        if (sessionUpdated) {
+          // Broadcast updated session state to all users in the game room
+          const updatedSession = await getArcadeSessionByRoom(roomId)
+          if (updatedSession) {
+            io!.to(`game:${roomId}`).emit('session-state', {
+              gameState: updatedSession.gameState,
+              currentGame: updatedSession.currentGame,
+              gameUrl: updatedSession.gameUrl,
+              activePlayers: updatedSession.activePlayers,
+              version: updatedSession.version,
+            })
+          }
+        }
+
+        // Send current room state to the joining user
+        socket.emit('room-joined', {
+          roomId,
+          members,
+          memberPlayers: memberPlayersObj,
+        })
+
+        // Notify all other members in the room
+        socket.to(`room:${roomId}`).emit('member-joined', {
+          roomId,
+          userId,
+          members,
+          memberPlayers: memberPlayersObj,
+        })
+      } catch (error) {
+        console.error('Error joining room:', error)
+        socket.emit('room-error', { error: 'Failed to join room' })
+      }
+    })
 
     // User Channel: Join (for moderation events)
-    socket.on("join-user-channel", async ({ userId }: { userId: string }) => {
+    socket.on('join-user-channel', async ({ userId }: { userId: string }) => {
       try {
         // Join user-specific channel for moderation notifications
-        socket.join(`user:${userId}`);
+        socket.join(`user:${userId}`)
       } catch (error) {
-        console.error("Error joining user channel:", error);
+        console.error('Error joining user channel:', error)
       }
-    });
+    })
 
     // Room: Leave
-    socket.on(
-      "leave-room",
-      async ({ roomId, userId }: { roomId: string; userId: string }) => {
-        try {
-          // Leave the socket room
-          socket.leave(`room:${roomId}`);
+    socket.on('leave-room', async ({ roomId, userId }: { roomId: string; userId: string }) => {
+      try {
+        // Leave the socket room
+        socket.leave(`room:${roomId}`)
 
-          // Mark member as offline
-          await setMemberOnline(roomId, userId, false);
+        // Mark member as offline
+        await setMemberOnline(roomId, userId, false)
 
-          // Get updated members
-          const members = await getRoomMembers(roomId);
-          const memberPlayers = await getRoomActivePlayers(roomId);
+        // Get updated members
+        const members = await getRoomMembers(roomId)
+        const memberPlayers = await getRoomActivePlayers(roomId)
 
-          // Convert memberPlayers Map to object
-          const memberPlayersObj: Record<string, any[]> = {};
-          for (const [uid, players] of memberPlayers.entries()) {
-            memberPlayersObj[uid] = players;
-          }
-
-          // Notify remaining members
-          io!.to(`room:${roomId}`).emit("member-left", {
-            roomId,
-            userId,
-            members,
-            memberPlayers: memberPlayersObj,
-          });
-        } catch (error) {
-          console.error("Error leaving room:", error);
+        // Convert memberPlayers Map to object
+        const memberPlayersObj: Record<string, any[]> = {}
+        for (const [uid, players] of memberPlayers.entries()) {
+          memberPlayersObj[uid] = players
         }
-      },
-    );
+
+        // Notify remaining members
+        io!.to(`room:${roomId}`).emit('member-left', {
+          roomId,
+          userId,
+          members,
+          memberPlayers: memberPlayersObj,
+        })
+      } catch (error) {
+        console.error('Error leaving room:', error)
+      }
+    })
 
     // Room: Players updated
-    socket.on(
-      "players-updated",
-      async ({ roomId, userId }: { roomId: string; userId: string }) => {
-        try {
-          // Get updated player data
-          const memberPlayers = await getRoomActivePlayers(roomId);
+    socket.on('players-updated', async ({ roomId, userId }: { roomId: string; userId: string }) => {
+      try {
+        // Get updated player data
+        const memberPlayers = await getRoomActivePlayers(roomId)
 
-          // Convert memberPlayers Map to object
-          const memberPlayersObj: Record<string, any[]> = {};
-          for (const [uid, players] of memberPlayers.entries()) {
-            memberPlayersObj[uid] = players;
-          }
-
-          // Update session's activePlayers if game hasn't started yet
-          const roomPlayerIds = await getRoomPlayerIds(roomId);
-          const sessionUpdated = await updateSessionActivePlayers(
-            roomId,
-            roomPlayerIds,
-          );
-
-          if (sessionUpdated) {
-            // Broadcast updated session state to all users in the game room
-            const updatedSession = await getArcadeSessionByRoom(roomId);
-            if (updatedSession) {
-              io!.to(`game:${roomId}`).emit("session-state", {
-                gameState: updatedSession.gameState,
-                currentGame: updatedSession.currentGame,
-                gameUrl: updatedSession.gameUrl,
-                activePlayers: updatedSession.activePlayers,
-                version: updatedSession.version,
-              });
-            }
-          }
-
-          // Broadcast to all members in the room (including sender)
-          io!.to(`room:${roomId}`).emit("room-players-updated", {
-            roomId,
-            memberPlayers: memberPlayersObj,
-          });
-        } catch (error) {
-          console.error("Error updating room players:", error);
-          socket.emit("room-error", { error: "Failed to update players" });
+        // Convert memberPlayers Map to object
+        const memberPlayersObj: Record<string, any[]> = {}
+        for (const [uid, players] of memberPlayers.entries()) {
+          memberPlayersObj[uid] = players
         }
-      },
-    );
 
-    socket.on("disconnect", () => {
+        // Update session's activePlayers if game hasn't started yet
+        const roomPlayerIds = await getRoomPlayerIds(roomId)
+        const sessionUpdated = await updateSessionActivePlayers(roomId, roomPlayerIds)
+
+        if (sessionUpdated) {
+          // Broadcast updated session state to all users in the game room
+          const updatedSession = await getArcadeSessionByRoom(roomId)
+          if (updatedSession) {
+            io!.to(`game:${roomId}`).emit('session-state', {
+              gameState: updatedSession.gameState,
+              currentGame: updatedSession.currentGame,
+              gameUrl: updatedSession.gameUrl,
+              activePlayers: updatedSession.activePlayers,
+              version: updatedSession.version,
+            })
+          }
+        }
+
+        // Broadcast to all members in the room (including sender)
+        io!.to(`room:${roomId}`).emit('room-players-updated', {
+          roomId,
+          memberPlayers: memberPlayersObj,
+        })
+      } catch (error) {
+        console.error('Error updating room players:', error)
+        socket.emit('room-error', { error: 'Failed to update players' })
+      }
+    })
+
+    socket.on('disconnect', () => {
       // Don't delete session on disconnect - it persists across devices
-    });
-  });
+    })
+  })
 
   // Store in globalThis to make accessible across module boundaries
-  globalThis.__socketIO = io;
-  return io;
+  globalThis.__socketIO = io
+  return io
 }
diff --git a/apps/web/src/stories/AbacusReact.progressive-test-suite.stories.tsx b/apps/web/src/stories/AbacusReact.progressive-test-suite.stories.tsx
index 41be34bd..78f15e4d 100644
--- a/apps/web/src/stories/AbacusReact.progressive-test-suite.stories.tsx
+++ b/apps/web/src/stories/AbacusReact.progressive-test-suite.stories.tsx
@@ -1,128 +1,111 @@
-import { AbacusReact } from "@soroban/abacus-react";
-import type { Meta, StoryObj } from "@storybook/react";
-import React, { useCallback, useState } from "react";
-import { generateAbacusInstructions } from "../utils/abacusInstructionGenerator";
+import { AbacusReact } from '@soroban/abacus-react'
+import type { Meta, StoryObj } from '@storybook/react'
+import React, { useCallback, useState } from 'react'
+import { generateAbacusInstructions } from '../utils/abacusInstructionGenerator'
 
 // Use the real instruction generator - much cleaner!
 const _getRealInstructions = (startValue: number, targetValue: number) => {
-  console.log(
-    `🔄 Generating REAL instructions: ${startValue} → ${targetValue}`,
-  );
+  console.log(`🔄 Generating REAL instructions: ${startValue} → ${targetValue}`)
 
-  const realInstruction = generateAbacusInstructions(startValue, targetValue);
+  const realInstruction = generateAbacusInstructions(startValue, targetValue)
 
   return {
     stepBeadHighlights: realInstruction.stepBeadHighlights || [],
     totalSteps: realInstruction.totalSteps || 0,
     multiStepInstructions: realInstruction.multiStepInstructions || [],
-  };
-};
+  }
+}
 
 // Reusable story component
 const ProgressiveTestComponent: React.FC<{
-  title: string;
-  startValue: number;
-  targetValue: number;
-  columns?: number;
-  description?: string;
+  title: string
+  startValue: number
+  targetValue: number
+  columns?: number
+  description?: string
 }> = ({ title, startValue, targetValue, columns = 2, description }) => {
-  const [currentValue, setCurrentValue] = useState(startValue);
-  const [currentStep, setCurrentStep] = useState(0);
+  const [currentValue, setCurrentValue] = useState(startValue)
+  const [currentStep, setCurrentStep] = useState(0)
 
-  const userHasInteracted = React.useRef<boolean>(false);
-  const lastValueForStepAdvancement = React.useRef<number>(currentValue);
+  const userHasInteracted = React.useRef<boolean>(false)
+  const lastValueForStepAdvancement = React.useRef<number>(currentValue)
 
   // Generate expected steps from the real instruction generator
   const fullInstruction = React.useMemo(() => {
-    return generateAbacusInstructions(startValue, targetValue);
-  }, [startValue, targetValue]);
+    return generateAbacusInstructions(startValue, targetValue)
+  }, [startValue, targetValue])
 
   const expectedSteps = React.useMemo(() => {
-    if (
-      !fullInstruction.stepBeadHighlights ||
-      !fullInstruction.multiStepInstructions
-    ) {
-      return [];
+    if (!fullInstruction.stepBeadHighlights || !fullInstruction.multiStepInstructions) {
+      return []
     }
 
     // Extract unique step indices and create milestones by simulating bead movements
     const stepIndices = [
-      ...new Set(
-        fullInstruction.stepBeadHighlights.map((bead) => bead.stepIndex),
-      ),
-    ].sort();
-    const steps = [];
-    let currentAbacusValue = startValue;
+      ...new Set(fullInstruction.stepBeadHighlights.map((bead) => bead.stepIndex)),
+    ].sort()
+    const steps = []
+    let currentAbacusValue = startValue
 
     stepIndices.forEach((stepIndex, i) => {
-      const description =
-        fullInstruction.multiStepInstructions?.[i] || `Step ${i + 1}`;
+      const description = fullInstruction.multiStepInstructions?.[i] || `Step ${i + 1}`
       const stepBeads =
-        fullInstruction.stepBeadHighlights?.filter(
-          (bead) => bead.stepIndex === stepIndex,
-        ) || [];
+        fullInstruction.stepBeadHighlights?.filter((bead) => bead.stepIndex === stepIndex) || []
 
       // Calculate the value change for this step by applying all bead movements
-      let valueChange = 0;
+      let valueChange = 0
       stepBeads.forEach((bead) => {
-        const placeMultiplier = 10 ** bead.placeValue;
+        const placeMultiplier = 10 ** bead.placeValue
 
-        if (bead.beadType === "heaven") {
+        if (bead.beadType === 'heaven') {
           // Heaven bead is worth 5 in its place value
           valueChange +=
-            bead.direction === "activate"
-              ? 5 * placeMultiplier
-              : -(5 * placeMultiplier);
+            bead.direction === 'activate' ? 5 * placeMultiplier : -(5 * placeMultiplier)
         } else {
           // Earth bead is worth 1 in its place value
-          valueChange +=
-            bead.direction === "activate" ? placeMultiplier : -placeMultiplier;
+          valueChange += bead.direction === 'activate' ? placeMultiplier : -placeMultiplier
         }
-      });
+      })
 
-      currentAbacusValue += valueChange;
+      currentAbacusValue += valueChange
 
       steps.push({
         index: i,
         targetValue: currentAbacusValue,
         description: description,
-      });
-    });
+      })
+    })
 
-    console.log("📋 Generated expected steps with calculated values:", steps);
-    return steps;
-  }, [fullInstruction, startValue]);
+    console.log('📋 Generated expected steps with calculated values:', steps)
+    return steps
+  }, [fullInstruction, startValue])
 
   const getCurrentStepBeads = useCallback(() => {
-    if (currentValue === targetValue) return undefined;
+    if (currentValue === targetValue) return undefined
 
-    const currentExpectedStep = expectedSteps[currentStep];
-    if (!currentExpectedStep) return undefined;
+    const currentExpectedStep = expectedSteps[currentStep]
+    if (!currentExpectedStep) return undefined
 
     // CRITICAL FIX: If we've already reached the current step's target, don't show arrows
     if (currentValue === currentExpectedStep.targetValue) {
-      console.log(
-        "🎯 Current step completed, hiding arrows until step advances",
-      );
-      return undefined;
+      console.log('🎯 Current step completed, hiding arrows until step advances')
+      return undefined
     }
 
     try {
       // Generate arrows to get from current value to current expected step's target
       const dynamicInstruction = generateAbacusInstructions(
         currentValue,
-        currentExpectedStep.targetValue,
-      );
+        currentExpectedStep.targetValue
+      )
 
       // CRITICAL FIX: Set all stepIndex to match currentStep for arrow display
-      const adjustedStepBeads = dynamicInstruction.stepBeadHighlights?.map(
-        (bead) => ({
-          ...bead,
-          stepIndex: currentStep, // Force stepIndex to match currentStep
-        }),
-      );
+      const adjustedStepBeads = dynamicInstruction.stepBeadHighlights?.map((bead) => ({
+        ...bead,
+        stepIndex: currentStep, // Force stepIndex to match currentStep
+      }))
 
-      console.log("🔄 Dynamic instruction:", {
+      console.log('🔄 Dynamic instruction:', {
         from: currentValue,
         to: currentExpectedStep.targetValue,
         expectedStepIndex: currentStep,
@@ -130,28 +113,28 @@ const ProgressiveTestComponent: React.FC<{
         originalStepBeads: dynamicInstruction.stepBeadHighlights,
         adjustedStepBeads: adjustedStepBeads,
         stepCount: adjustedStepBeads?.length || 0,
-      });
-      return adjustedStepBeads;
+      })
+      return adjustedStepBeads
     } catch (error) {
-      console.error("Failed to generate dynamic instruction:", error);
-      return undefined;
+      console.error('Failed to generate dynamic instruction:', error)
+      return undefined
     }
-  }, [currentValue, currentStep, expectedSteps, targetValue]);
+  }, [currentValue, currentStep, expectedSteps, targetValue])
 
-  const currentStepBeads = getCurrentStepBeads();
+  const currentStepBeads = getCurrentStepBeads()
 
   const handleValueChange = (newValue: number) => {
-    console.log("👆 User clicked, value changed:", currentValue, "→", newValue);
-    userHasInteracted.current = true;
-    setCurrentValue(newValue);
-  };
+    console.log('👆 User clicked, value changed:', currentValue, '→', newValue)
+    userHasInteracted.current = true
+    setCurrentValue(newValue)
+  }
 
   // Auto-advancement logic (restored from working version)
   React.useEffect(() => {
-    const valueChanged = currentValue !== lastValueForStepAdvancement.current;
-    const currentExpectedStep = expectedSteps[currentStep];
+    const valueChanged = currentValue !== lastValueForStepAdvancement.current
+    const currentExpectedStep = expectedSteps[currentStep]
 
-    console.log("🔍 Expected step advancement check:", {
+    console.log('🔍 Expected step advancement check:', {
       currentValue,
       lastValue: lastValueForStepAdvancement.current,
       valueChanged,
@@ -163,7 +146,7 @@ const ProgressiveTestComponent: React.FC<{
         : false,
       totalExpectedSteps: expectedSteps.length,
       finalTargetReached: currentValue === targetValue,
-    });
+    })
 
     if (
       valueChanged &&
@@ -172,69 +155,58 @@ const ProgressiveTestComponent: React.FC<{
       currentExpectedStep
     ) {
       if (currentValue === currentExpectedStep.targetValue) {
-        const hasMoreExpectedSteps = currentStep < expectedSteps.length - 1;
+        const hasMoreExpectedSteps = currentStep < expectedSteps.length - 1
 
-        console.log("🎯 Expected step completed:", {
+        console.log('🎯 Expected step completed:', {
           completedStep: currentStep,
           targetReached: currentExpectedStep.targetValue,
           hasMoreSteps: hasMoreExpectedSteps,
           willAdvance: hasMoreExpectedSteps,
-        });
+        })
 
         if (hasMoreExpectedSteps) {
           const timeoutId = setTimeout(() => {
-            console.log(
-              "⚡ Advancing to next expected step:",
-              currentStep,
-              "→",
-              currentStep + 1,
-            );
-            setCurrentStep((prev) => prev + 1);
-            lastValueForStepAdvancement.current = currentValue;
-          }, 500); // Reduced delay for better UX
+            console.log('⚡ Advancing to next expected step:', currentStep, '→', currentStep + 1)
+            setCurrentStep((prev) => prev + 1)
+            lastValueForStepAdvancement.current = currentValue
+          }, 500) // Reduced delay for better UX
 
-          return () => clearTimeout(timeoutId);
+          return () => clearTimeout(timeoutId)
         }
       }
     }
-  }, [currentValue, currentStep, expectedSteps, targetValue]);
+  }, [currentValue, currentStep, expectedSteps, targetValue])
 
   // Update reference when step changes
   React.useEffect(() => {
-    lastValueForStepAdvancement.current = currentValue;
-    userHasInteracted.current = false;
-  }, [currentValue]);
+    lastValueForStepAdvancement.current = currentValue
+    userHasInteracted.current = false
+  }, [currentValue])
 
   const resetDemo = () => {
-    setCurrentValue(startValue);
-    setCurrentStep(0);
-    userHasInteracted.current = false;
-    lastValueForStepAdvancement.current = startValue;
-    console.log("🔄 Reset demo");
-  };
+    setCurrentValue(startValue)
+    setCurrentStep(0)
+    userHasInteracted.current = false
+    lastValueForStepAdvancement.current = startValue
+    console.log('🔄 Reset demo')
+  }
 
-  const progress =
-    expectedSteps.length > 0
-      ? ((currentStep + 1) / expectedSteps.length) * 100
-      : 0;
+  const progress = expectedSteps.length > 0 ? ((currentStep + 1) / expectedSteps.length) * 100 : 0
 
   return (
-    <div style={{ textAlign: "center", padding: "20px" }}>
+    <div style={{ textAlign: 'center', padding: '20px' }}>
       <h3>{title}</h3>
       {description && (
-        <p style={{ fontSize: "14px", color: "#666", marginBottom: "20px" }}>
-          {description}
-        </p>
+        <p style={{ fontSize: '14px', color: '#666', marginBottom: '20px' }}>{description}</p>
       )}
 
-      <div style={{ marginBottom: "20px", fontSize: "14px" }}>
+      <div style={{ marginBottom: '20px', fontSize: '14px' }}>
         <p>
-          <strong>Progress:</strong> {currentStep + 1} of{" "}
-          {expectedSteps.length || 1} steps ({Math.round(progress)}%)
+          <strong>Progress:</strong> {currentStep + 1} of {expectedSteps.length || 1} steps (
+          {Math.round(progress)}%)
         </p>
         <p>
-          <strong>Current Value:</strong> {currentValue} |{" "}
-          <strong>Target:</strong> {targetValue}
+          <strong>Current Value:</strong> {currentValue} | <strong>Target:</strong> {targetValue}
         </p>
       </div>
 
@@ -251,16 +223,16 @@ const ProgressiveTestComponent: React.FC<{
         onValueChange={handleValueChange}
       />
 
-      <div style={{ marginTop: "20px" }}>
+      <div style={{ marginTop: '20px' }}>
         <button
           onClick={resetDemo}
           style={{
-            padding: "8px 16px",
-            backgroundColor: "#4A90E2",
-            color: "white",
-            border: "none",
-            borderRadius: "4px",
-            cursor: "pointer",
+            padding: '8px 16px',
+            backgroundColor: '#4A90E2',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
           }}
         >
           Reset
@@ -270,15 +242,15 @@ const ProgressiveTestComponent: React.FC<{
       {/* Debug Info Section */}
       <div
         style={{
-          marginTop: "20px",
-          padding: "12px",
-          backgroundColor: "#663399",
-          color: "white",
-          borderRadius: "8px",
-          fontSize: "11px",
-          textAlign: "left",
-          maxWidth: "500px",
-          margin: "20px auto",
+          marginTop: '20px',
+          padding: '12px',
+          backgroundColor: '#663399',
+          color: 'white',
+          borderRadius: '8px',
+          fontSize: '11px',
+          textAlign: 'left',
+          maxWidth: '500px',
+          margin: '20px auto',
         }}
       >
         <strong>Step Debug Info:</strong>
@@ -291,9 +263,9 @@ const ProgressiveTestComponent: React.FC<{
         <br />
         Show Direction Indicators: {true}
         <br />
-        Expected Step Target: {expectedSteps[currentStep]?.targetValue || "N/A"}
+        Expected Step Target: {expectedSteps[currentStep]?.targetValue || 'N/A'}
         <br />
-        User Has Interacted: {userHasInteracted.current ? "Yes" : "No"}
+        User Has Interacted: {userHasInteracted.current ? 'Yes' : 'No'}
         <br />
         {currentStepBeads && currentStepBeads.length > 0 && (
           <>
@@ -303,9 +275,7 @@ const ProgressiveTestComponent: React.FC<{
             {currentStepBeads.map((bead, i) => (
               <span key={i}>
                 - Place {bead.placeValue} {bead.beadType}
-                {bead.position !== undefined
-                  ? ` pos ${bead.position}`
-                  : ""} → {bead.direction}
+                {bead.position !== undefined ? ` pos ${bead.position}` : ''} → {bead.direction}
                 <br />
               </span>
             ))}
@@ -314,41 +284,38 @@ const ProgressiveTestComponent: React.FC<{
       </div>
 
       {expectedSteps.length > 0 && (
-        <div style={{ marginTop: "20px", fontSize: "12px", color: "#666" }}>
+        <div style={{ marginTop: '20px', fontSize: '12px', color: '#666' }}>
           <p>
             <strong>Expected Steps:</strong>
           </p>
-          <ol
-            style={{ textAlign: "left", maxWidth: "400px", margin: "0 auto" }}
-          >
+          <ol style={{ textAlign: 'left', maxWidth: '400px', margin: '0 auto' }}>
             {expectedSteps.map((step, index) => (
               <li
                 key={index}
                 style={{
-                  backgroundColor:
-                    currentStep === index ? "#e3f2fd" : "transparent",
-                  padding: currentStep === index ? "8px" : "4px",
-                  borderRadius: currentStep === index ? "4px" : "0",
-                  fontWeight: currentStep === index ? "bold" : "normal",
-                  border: currentStep === index ? "2px solid #2196f3" : "none",
+                  backgroundColor: currentStep === index ? '#e3f2fd' : 'transparent',
+                  padding: currentStep === index ? '8px' : '4px',
+                  borderRadius: currentStep === index ? '4px' : '0',
+                  fontWeight: currentStep === index ? 'bold' : 'normal',
+                  border: currentStep === index ? '2px solid #2196f3' : 'none',
                   opacity: currentStep < index ? 0.5 : 1,
                 }}
               >
-                {currentStep === index && "👉 "} {step.description}
+                {currentStep === index && '👉 '} {step.description}
               </li>
             ))}
           </ol>
         </div>
       )}
     </div>
-  );
-};
+  )
+}
 
 const meta: Meta<typeof AbacusReact> = {
-  title: "Progressive/Stress Test Suite",
+  title: 'Progressive/Stress Test Suite',
   component: AbacusReact,
   parameters: {
-    layout: "centered",
+    layout: 'centered',
     docs: {
       description: {
         component: `
@@ -365,11 +332,11 @@ Comprehensive test cases for the progressive multi-step instruction system cover
       },
     },
   },
-  tags: ["autodocs"],
-};
+  tags: ['autodocs'],
+}
 
-export default meta;
-type Story = StoryObj<typeof AbacusReact>;
+export default meta
+type Story = StoryObj<typeof AbacusReact>
 
 // Basic operations
 export const SimpleAddition: Story = {
@@ -382,7 +349,7 @@ export const SimpleAddition: Story = {
       description="Basic earth bead additions, one by one"
     />
   ),
-};
+}
 
 export const HeavenBeadSimple: Story = {
   render: () => (
@@ -394,7 +361,7 @@ export const HeavenBeadSimple: Story = {
       description="Single heaven bead activation"
     />
   ),
-};
+}
 
 // Five complement operations
 export const FiveComplementBasic: Story = {
@@ -407,7 +374,7 @@ export const FiveComplementBasic: Story = {
       description="2 + 3 = 2 + (5 - 2): Add heaven bead, then remove 2 earth beads"
     />
   ),
-};
+}
 
 export const FiveComplementAdvanced: Story = {
   render: () => (
@@ -419,7 +386,7 @@ export const FiveComplementAdvanced: Story = {
       description="3 + 4 = 3 + (5 - 1): Add heaven bead, then remove 1 earth bead"
     />
   ),
-};
+}
 
 // Ten operations
 export const TensAddition: Story = {
@@ -431,7 +398,7 @@ export const TensAddition: Story = {
       description="Simple tens place earth bead addition"
     />
   ),
-};
+}
 
 export const TenComplement: Story = {
   render: () => (
@@ -442,7 +409,7 @@ export const TenComplement: Story = {
       description="8 + 6 = 8 + (10 - 4): Add 10, then remove 4"
     />
   ),
-};
+}
 
 // Subtraction operations
 export const SimpleSubtraction: Story = {
@@ -455,7 +422,7 @@ export const SimpleSubtraction: Story = {
       description="Sequential earth bead removal, one by one"
     />
   ),
-};
+}
 
 // Original working case
 export const ThreePlusFourteen: Story = {
@@ -467,7 +434,7 @@ export const ThreePlusFourteen: Story = {
       description="3 + 14 = 3 + 10 + (5 - 1): Multi-step with tens and five complement"
     />
   ),
-};
+}
 
 // Edge cases and stress tests
 export const ZeroToNine: Story = {
@@ -480,7 +447,7 @@ export const ZeroToNine: Story = {
       description="Activate all beads in ones place (heaven + 4 earth)"
     />
   ),
-};
+}
 
 export const CrossingTens: Story = {
   render: () => (
@@ -491,7 +458,7 @@ export const CrossingTens: Story = {
       description="7 + 8 with ten complement: complex multi-step operation"
     />
   ),
-};
+}
 
 export const LargeSubtraction: Story = {
   render: () => (
@@ -502,39 +469,39 @@ export const LargeSubtraction: Story = {
       description="Complex subtraction across place values"
     />
   ),
-};
+}
 
 // Extract component wrapper for hooks
 function RapidTestsComponent() {
-  const [testIndex, setTestIndex] = useState(0);
+  const [testIndex, setTestIndex] = useState(0)
 
   const rapidTests = [
-    { start: 0, target: 1, title: "0 + 1" },
-    { start: 1, target: 2, title: "1 + 1" },
-    { start: 0, target: 5, title: "0 + 5" },
-    { start: 2, target: 5, title: "2 + 3 (complement)" },
-    { start: 5, target: 15, title: "5 + 10" },
-    { start: 9, target: 5, title: "9 - 4" },
-  ];
+    { start: 0, target: 1, title: '0 + 1' },
+    { start: 1, target: 2, title: '1 + 1' },
+    { start: 0, target: 5, title: '0 + 5' },
+    { start: 2, target: 5, title: '2 + 3 (complement)' },
+    { start: 5, target: 15, title: '5 + 10' },
+    { start: 9, target: 5, title: '9 - 4' },
+  ]
 
-  const currentTest = rapidTests[testIndex];
+  const currentTest = rapidTests[testIndex]
 
   return (
-    <div style={{ textAlign: "center", padding: "20px" }}>
+    <div style={{ textAlign: 'center', padding: '20px' }}>
       <h3>
         Rapid Fire Tests ({testIndex + 1}/{rapidTests.length})
       </h3>
 
-      <div style={{ marginBottom: "20px" }}>
+      <div style={{ marginBottom: '20px' }}>
         <button
           onClick={() => setTestIndex((prev) => (prev + 1) % rapidTests.length)}
           style={{
-            padding: "8px 16px",
-            backgroundColor: "#27ae60",
-            color: "white",
-            border: "none",
-            borderRadius: "4px",
-            cursor: "pointer",
+            padding: '8px 16px',
+            backgroundColor: '#27ae60',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
           }}
         >
           Next Test →
@@ -550,49 +517,49 @@ function RapidTestsComponent() {
         description="Quick succession testing for responsiveness"
       />
     </div>
-  );
+  )
 }
 
 // Rapid-fire simple tests
 export const RapidTests: Story = {
   render: () => <RapidTestsComponent />,
-};
+}
 
 // Advanced challenging problems with pedagogical expansion displays
 export const AdvancedComplement: Story = {
   render: () => {
     // 🎯 COMPLETELY AUTO-GENERATED: Change these numbers and watch the expansion adjust!
-    const startValue = 27;
-    const targetValue = 65; // Changed from 63 to 65 to demonstrate auto-generation
-    const instruction = generateAbacusInstructions(startValue, targetValue);
+    const startValue = 27
+    const targetValue = 65 // Changed from 63 to 65 to demonstrate auto-generation
+    const instruction = generateAbacusInstructions(startValue, targetValue)
 
     return (
-      <div style={{ textAlign: "center", padding: "20px" }}>
+      <div style={{ textAlign: 'center', padding: '20px' }}>
         <h3>
           Advanced: {startValue} + {targetValue - startValue} = {targetValue}
         </h3>
-        <p style={{ fontSize: "14px", color: "#666", marginBottom: "20px" }}>
+        <p style={{ fontSize: '14px', color: '#666', marginBottom: '20px' }}>
           Multi-place operation with multiple complement steps
         </p>
 
         <div
           style={{
-            marginBottom: "20px",
-            padding: "15px",
-            backgroundColor: "#f0f8ff",
-            borderRadius: "8px",
+            marginBottom: '20px',
+            padding: '15px',
+            backgroundColor: '#f0f8ff',
+            borderRadius: '8px',
           }}
         >
           <div
             style={{
-              marginBottom: "10px",
-              padding: "8px",
-              backgroundColor: "#e8f5e8",
-              borderRadius: "4px",
+              marginBottom: '10px',
+              padding: '8px',
+              backgroundColor: '#e8f5e8',
+              borderRadius: '4px',
             }}
           >
-            <strong>🤖 100% AUTO-GENERATED:</strong> Change the numbers above
-            and all content updates automatically!
+            <strong>🤖 100% AUTO-GENERATED:</strong> Change the numbers above and all content
+            updates automatically!
           </div>
 
           <h4>📐 Mathematical Breakdown:</h4>
@@ -603,12 +570,8 @@ export const AdvancedComplement: Story = {
             <em>{instruction.errorMessages.hint}</em>
           </p>
 
-          <h4>
-            📋 Auto-Generated Expected Steps ({instruction.totalSteps} steps):
-          </h4>
-          <ol
-            style={{ textAlign: "left", maxWidth: "500px", margin: "0 auto" }}
-          >
+          <h4>📋 Auto-Generated Expected Steps ({instruction.totalSteps} steps):</h4>
+          <ol style={{ textAlign: 'left', maxWidth: '500px', margin: '0 auto' }}>
             {instruction.multiStepInstructions?.map((step, i) => (
               <li key={i}>{step}</li>
             ))}
@@ -622,27 +585,27 @@ export const AdvancedComplement: Story = {
           description="Follow the steps above to complete this problem"
         />
       </div>
-    );
+    )
   },
-};
+}
 
 export const CrossingHundreds: Story = {
   render: () => {
-    const instruction = generateAbacusInstructions(87, 113);
+    const instruction = generateAbacusInstructions(87, 113)
 
     return (
-      <div style={{ textAlign: "center", padding: "20px" }}>
+      <div style={{ textAlign: 'center', padding: '20px' }}>
         <h3>Crossing Hundreds: 87 + 26 = 113</h3>
-        <p style={{ fontSize: "14px", color: "#666", marginBottom: "20px" }}>
+        <p style={{ fontSize: '14px', color: '#666', marginBottom: '20px' }}>
           Complex operation crossing into hundreds place with complements
         </p>
 
         <div
           style={{
-            marginBottom: "20px",
-            padding: "15px",
-            backgroundColor: "#f0f8ff",
-            borderRadius: "8px",
+            marginBottom: '20px',
+            padding: '15px',
+            backgroundColor: '#f0f8ff',
+            borderRadius: '8px',
           }}
         >
           <h4>📐 Mathematical Breakdown:</h4>
@@ -653,12 +616,8 @@ export const CrossingHundreds: Story = {
             <em>{instruction.errorMessages.hint}</em>
           </p>
 
-          <h4>
-            📋 Auto-Generated Expected Steps ({instruction.totalSteps} steps):
-          </h4>
-          <ol
-            style={{ textAlign: "left", maxWidth: "500px", margin: "0 auto" }}
-          >
+          <h4>📋 Auto-Generated Expected Steps ({instruction.totalSteps} steps):</h4>
+          <ol style={{ textAlign: 'left', maxWidth: '500px', margin: '0 auto' }}>
             {instruction.multiStepInstructions?.map((step, i) => (
               <li key={i}>{step}</li>
             ))}
@@ -672,27 +631,27 @@ export const CrossingHundreds: Story = {
           description="Follow the steps above to complete this problem"
         />
       </div>
-    );
+    )
   },
-};
+}
 
 export const ChallengeNinetyNine: Story = {
   render: () => {
-    const instruction = generateAbacusInstructions(99, 100);
+    const instruction = generateAbacusInstructions(99, 100)
 
     return (
-      <div style={{ textAlign: "center", padding: "20px" }}>
+      <div style={{ textAlign: 'center', padding: '20px' }}>
         <h3>Challenge: 99 + 1 = 100</h3>
-        <p style={{ fontSize: "14px", color: "#666", marginBottom: "20px" }}>
+        <p style={{ fontSize: '14px', color: '#666', marginBottom: '20px' }}>
           Recursive complement: adding 1 when all lower places are at capacity
         </p>
 
         <div
           style={{
-            marginBottom: "20px",
-            padding: "15px",
-            backgroundColor: "#fff5f5",
-            borderRadius: "8px",
+            marginBottom: '20px',
+            padding: '15px',
+            backgroundColor: '#fff5f5',
+            borderRadius: '8px',
           }}
         >
           <h4>📐 Mathematical Breakdown:</h4>
@@ -703,12 +662,8 @@ export const ChallengeNinetyNine: Story = {
             <em>{instruction.errorMessages.hint}</em>
           </p>
 
-          <h4>
-            📋 Auto-Generated Expected Steps ({instruction.totalSteps} steps):
-          </h4>
-          <ol
-            style={{ textAlign: "left", maxWidth: "500px", margin: "0 auto" }}
-          >
+          <h4>📋 Auto-Generated Expected Steps ({instruction.totalSteps} steps):</h4>
+          <ol style={{ textAlign: 'left', maxWidth: '500px', margin: '0 auto' }}>
             {instruction.multiStepInstructions?.map((step, i) => (
               <li key={i}>{step}</li>
             ))}
@@ -722,27 +677,27 @@ export const ChallengeNinetyNine: Story = {
           description="Follow the steps above to complete this problem"
         />
       </div>
-    );
+    )
   },
-};
+}
 
 export const MultiStepChain: Story = {
   render: () => {
-    const instruction = generateAbacusInstructions(45, 112);
+    const instruction = generateAbacusInstructions(45, 112)
 
     return (
-      <div style={{ textAlign: "center", padding: "20px" }}>
+      <div style={{ textAlign: 'center', padding: '20px' }}>
         <h3>Multi-Step Chain: 45 + 67 = 112</h3>
-        <p style={{ fontSize: "14px", color: "#666", marginBottom: "20px" }}>
+        <p style={{ fontSize: '14px', color: '#666', marginBottom: '20px' }}>
           Complex multi-step operation requiring multiple place value operations
         </p>
 
         <div
           style={{
-            marginBottom: "20px",
-            padding: "15px",
-            backgroundColor: "#f5f8ff",
-            borderRadius: "8px",
+            marginBottom: '20px',
+            padding: '15px',
+            backgroundColor: '#f5f8ff',
+            borderRadius: '8px',
           }}
         >
           <h4>📐 Mathematical Breakdown:</h4>
@@ -753,12 +708,8 @@ export const MultiStepChain: Story = {
             <em>{instruction.errorMessages.hint}</em>
           </p>
 
-          <h4>
-            📋 Auto-Generated Expected Steps ({instruction.totalSteps} steps):
-          </h4>
-          <ol
-            style={{ textAlign: "left", maxWidth: "500px", margin: "0 auto" }}
-          >
+          <h4>📋 Auto-Generated Expected Steps ({instruction.totalSteps} steps):</h4>
+          <ol style={{ textAlign: 'left', maxWidth: '500px', margin: '0 auto' }}>
             {instruction.multiStepInstructions?.map((step, i) => (
               <li key={i}>{step}</li>
             ))}
@@ -772,27 +723,27 @@ export const MultiStepChain: Story = {
           description="Follow the steps above to complete this problem"
         />
       </div>
-    );
+    )
   },
-};
+}
 
 export const ExtremeCase: Story = {
   render: () => {
-    const instruction = generateAbacusInstructions(89, 112);
+    const instruction = generateAbacusInstructions(89, 112)
 
     return (
-      <div style={{ textAlign: "center", padding: "20px" }}>
+      <div style={{ textAlign: 'center', padding: '20px' }}>
         <h3>Extreme: 89 + 23 = 112</h3>
-        <p style={{ fontSize: "14px", color: "#666", marginBottom: "20px" }}>
+        <p style={{ fontSize: '14px', color: '#666', marginBottom: '20px' }}>
           Advanced complement operations across multiple place values
         </p>
 
         <div
           style={{
-            marginBottom: "20px",
-            padding: "15px",
-            backgroundColor: "#fff8f0",
-            borderRadius: "8px",
+            marginBottom: '20px',
+            padding: '15px',
+            backgroundColor: '#fff8f0',
+            borderRadius: '8px',
           }}
         >
           <h4>📐 Mathematical Breakdown:</h4>
@@ -803,12 +754,8 @@ export const ExtremeCase: Story = {
             <em>{instruction.errorMessages.hint}</em>
           </p>
 
-          <h4>
-            📋 Auto-Generated Expected Steps ({instruction.totalSteps} steps):
-          </h4>
-          <ol
-            style={{ textAlign: "left", maxWidth: "500px", margin: "0 auto" }}
-          >
+          <h4>📋 Auto-Generated Expected Steps ({instruction.totalSteps} steps):</h4>
+          <ol style={{ textAlign: 'left', maxWidth: '500px', margin: '0 auto' }}>
             {instruction.multiStepInstructions?.map((step, i) => (
               <li key={i}>{step}</li>
             ))}
@@ -822,32 +769,30 @@ export const ExtremeCase: Story = {
           description="Follow the steps above to complete this problem"
         />
       </div>
-    );
+    )
   },
-};
+}
 
 // Pedagogical showcase of our original problem
 export const ShowcaseOriginalProblem: Story = {
   render: () => {
-    const instruction = generateAbacusInstructions(3, 17);
+    const instruction = generateAbacusInstructions(3, 17)
 
     return (
-      <div style={{ textAlign: "center", padding: "20px" }}>
+      <div style={{ textAlign: 'center', padding: '20px' }}>
         <h3>🎯 Showcase: The Original Fixed Problem</h3>
-        <p style={{ fontSize: "14px", color: "#666", marginBottom: "20px" }}>
-          This demonstrates the pedagogical step ordering that was broken and is
-          now fixed.
+        <p style={{ fontSize: '14px', color: '#666', marginBottom: '20px' }}>
+          This demonstrates the pedagogical step ordering that was broken and is now fixed.
           <br />
-          Note the proper ordering: tens place first, then ones place
-          operations.
+          Note the proper ordering: tens place first, then ones place operations.
         </p>
 
         <div
           style={{
-            marginBottom: "20px",
-            padding: "15px",
-            backgroundColor: "#e8f5e8",
-            borderRadius: "8px",
+            marginBottom: '20px',
+            padding: '15px',
+            backgroundColor: '#e8f5e8',
+            borderRadius: '8px',
           }}
         >
           <h4>📐 Auto-Generated Mathematical Breakdown:</h4>
@@ -858,19 +803,14 @@ export const ShowcaseOriginalProblem: Story = {
             <em>{instruction.errorMessages.hint}</em>
           </p>
 
-          <h4>
-            📋 Auto-Generated Expected Steps ({instruction.totalSteps} steps):
-          </h4>
-          <ol
-            style={{ textAlign: "left", maxWidth: "500px", margin: "0 auto" }}
-          >
+          <h4>📋 Auto-Generated Expected Steps ({instruction.totalSteps} steps):</h4>
+          <ol style={{ textAlign: 'left', maxWidth: '500px', margin: '0 auto' }}>
             {instruction.multiStepInstructions?.map((step, i) => (
               <li key={i}>{step}</li>
             ))}
           </ol>
-          <p style={{ fontSize: "12px", color: "#666", marginTop: "10px" }}>
-            This ordering follows proper abacus pedagogy: highest place value
-            operations first.
+          <p style={{ fontSize: '12px', color: '#666', marginTop: '10px' }}>
+            This ordering follows proper abacus pedagogy: highest place value operations first.
           </p>
         </div>
 
@@ -881,39 +821,38 @@ export const ShowcaseOriginalProblem: Story = {
           description="Follow the auto-generated steps above"
         />
       </div>
-    );
+    )
   },
-};
+}
 
 // Extract component wrapper for hooks
 function DynamicAutoGenerationComponent() {
-  const [startValue, setStartValue] = useState(42);
-  const [targetValue, setTargetValue] = useState(89);
+  const [startValue, setStartValue] = useState(42)
+  const [targetValue, setTargetValue] = useState(89)
 
-  const instruction = generateAbacusInstructions(startValue, targetValue);
+  const instruction = generateAbacusInstructions(startValue, targetValue)
 
   return (
-    <div style={{ textAlign: "center", padding: "20px" }}>
+    <div style={{ textAlign: 'center', padding: '20px' }}>
       <h3>🤖 Live Auto-Generation Demo</h3>
-      <p style={{ fontSize: "14px", color: "#666", marginBottom: "20px" }}>
-        Change the numbers below and watch the pedagogical expansion update in
-        real-time!
+      <p style={{ fontSize: '14px', color: '#666', marginBottom: '20px' }}>
+        Change the numbers below and watch the pedagogical expansion update in real-time!
       </p>
 
       <div
         style={{
-          marginBottom: "20px",
-          padding: "15px",
-          backgroundColor: "#f0f0f0",
-          borderRadius: "8px",
+          marginBottom: '20px',
+          padding: '15px',
+          backgroundColor: '#f0f0f0',
+          borderRadius: '8px',
         }}
       >
         <div
           style={{
-            display: "flex",
-            justifyContent: "center",
-            gap: "20px",
-            marginBottom: "15px",
+            display: 'flex',
+            justifyContent: 'center',
+            gap: '20px',
+            marginBottom: '15px',
           }}
         >
           <div>
@@ -922,7 +861,7 @@ function DynamicAutoGenerationComponent() {
               type="number"
               value={startValue}
               onChange={(e) => setStartValue(parseInt(e.target.value, 10) || 0)}
-              style={{ width: "80px", padding: "5px" }}
+              style={{ width: '80px', padding: '5px' }}
               min="0"
               max="99"
             />
@@ -932,10 +871,8 @@ function DynamicAutoGenerationComponent() {
             <input
               type="number"
               value={targetValue}
-              onChange={(e) =>
-                setTargetValue(parseInt(e.target.value, 10) || 0)
-              }
-              style={{ width: "80px", padding: "5px" }}
+              onChange={(e) => setTargetValue(parseInt(e.target.value, 10) || 0)}
+              style={{ width: '80px', padding: '5px' }}
               min="0"
               max="999"
             />
@@ -949,22 +886,22 @@ function DynamicAutoGenerationComponent() {
 
       <div
         style={{
-          marginBottom: "20px",
-          padding: "15px",
-          backgroundColor: "#fff5f5",
-          borderRadius: "8px",
+          marginBottom: '20px',
+          padding: '15px',
+          backgroundColor: '#fff5f5',
+          borderRadius: '8px',
         }}
       >
         <div
           style={{
-            marginBottom: "10px",
-            padding: "8px",
-            backgroundColor: "#ffeeee",
-            borderRadius: "4px",
+            marginBottom: '10px',
+            padding: '8px',
+            backgroundColor: '#ffeeee',
+            borderRadius: '4px',
           }}
         >
-          <strong>⚡ REAL-TIME AUTO-GENERATION:</strong> All content below
-          updates automatically as you change the numbers!
+          <strong>⚡ REAL-TIME AUTO-GENERATION:</strong> All content below updates automatically as
+          you change the numbers!
         </div>
 
         <h4>📐 Mathematical Breakdown:</h4>
@@ -975,10 +912,8 @@ function DynamicAutoGenerationComponent() {
           <em>{instruction.errorMessages.hint}</em>
         </p>
 
-        <h4>
-          📋 Auto-Generated Expected Steps ({instruction.totalSteps} steps):
-        </h4>
-        <ol style={{ textAlign: "left", maxWidth: "500px", margin: "0 auto" }}>
+        <h4>📋 Auto-Generated Expected Steps ({instruction.totalSteps} steps):</h4>
+        <ol style={{ textAlign: 'left', maxWidth: '500px', margin: '0 auto' }}>
           {instruction.multiStepInstructions?.map((step, i) => (
             <li key={i}>{step}</li>
           ))}
@@ -993,62 +928,55 @@ function DynamicAutoGenerationComponent() {
         description="Try the auto-generated steps above!"
       />
     </div>
-  );
+  )
 }
 
 // Dynamic demonstration of auto-generation
 export const DynamicAutoGeneration: Story = {
   render: () => <DynamicAutoGenerationComponent />,
-};
+}
 
 export const ExpectedStatesCalculation: Story = {
   render: () => {
-    const startValue = 3;
-    const targetValue = 17;
-    const instruction = generateAbacusInstructions(startValue, targetValue);
+    const startValue = 3
+    const targetValue = 17
+    const instruction = generateAbacusInstructions(startValue, targetValue)
 
     // Calculate expected states for each step (same logic as tutorial editor)
-    const expectedStates: number[] = [];
+    const expectedStates: number[] = []
     if (instruction.stepBeadHighlights && instruction.multiStepInstructions) {
       const stepIndices = [
-        ...new Set(
-          instruction.stepBeadHighlights.map((bead) => bead.stepIndex),
-        ),
-      ].sort();
-      let currentValue = startValue;
+        ...new Set(instruction.stepBeadHighlights.map((bead) => bead.stepIndex)),
+      ].sort()
+      let currentValue = startValue
 
       stepIndices.forEach((stepIndex, _i) => {
         const stepBeads = instruction.stepBeadHighlights!.filter(
-          (bead) => bead.stepIndex === stepIndex,
-        );
-        let valueChange = 0;
+          (bead) => bead.stepIndex === stepIndex
+        )
+        let valueChange = 0
 
         stepBeads.forEach((bead) => {
-          const placeMultiplier = 10 ** bead.placeValue;
-          if (bead.beadType === "heaven") {
+          const placeMultiplier = 10 ** bead.placeValue
+          if (bead.beadType === 'heaven') {
             valueChange +=
-              bead.direction === "activate"
-                ? 5 * placeMultiplier
-                : -(5 * placeMultiplier);
+              bead.direction === 'activate' ? 5 * placeMultiplier : -(5 * placeMultiplier)
           } else {
-            valueChange +=
-              bead.direction === "activate"
-                ? placeMultiplier
-                : -placeMultiplier;
+            valueChange += bead.direction === 'activate' ? placeMultiplier : -placeMultiplier
           }
-        });
+        })
 
-        currentValue += valueChange;
-        expectedStates.push(currentValue);
-      });
+        currentValue += valueChange
+        expectedStates.push(currentValue)
+      })
     }
 
     return (
-      <div style={{ textAlign: "center", padding: "20px" }}>
+      <div style={{ textAlign: 'center', padding: '20px' }}>
         <h3>🎯 Expected States Calculation Demo</h3>
-        <p style={{ fontSize: "14px", color: "#666", marginBottom: "20px" }}>
-          This demonstrates the expected state calculation feature now available
-          in the tutorial editor
+        <p style={{ fontSize: '14px', color: '#666', marginBottom: '20px' }}>
+          This demonstrates the expected state calculation feature now available in the tutorial
+          editor
         </p>
 
         <p>
@@ -1060,52 +988,48 @@ export const ExpectedStatesCalculation: Story = {
 
         <div
           style={{
-            backgroundColor: "#fff7ed",
-            border: "2px solid #fed7aa",
-            borderRadius: "8px",
-            padding: "15px",
-            margin: "15px 0",
-            maxWidth: "600px",
-            marginLeft: "auto",
-            marginRight: "auto",
+            backgroundColor: '#fff7ed',
+            border: '2px solid #fed7aa',
+            borderRadius: '8px',
+            padding: '15px',
+            margin: '15px 0',
+            maxWidth: '600px',
+            marginLeft: 'auto',
+            marginRight: 'auto',
           }}
         >
-          <h4 style={{ color: "#ea580c", marginTop: 0 }}>
-            📊 Step-by-Step Expected States:
-          </h4>
+          <h4 style={{ color: '#ea580c', marginTop: 0 }}>📊 Step-by-Step Expected States:</h4>
           <div
             style={{
-              display: "grid",
-              gridTemplateColumns: "80px 1fr 120px",
-              gap: "10px",
-              fontSize: "14px",
-              textAlign: "left",
+              display: 'grid',
+              gridTemplateColumns: '80px 1fr 120px',
+              gap: '10px',
+              fontSize: '14px',
+              textAlign: 'left',
             }}
           >
-            <div style={{ fontWeight: "bold" }}>Step</div>
-            <div style={{ fontWeight: "bold" }}>Instruction</div>
-            <div style={{ fontWeight: "bold" }}>Expected State</div>
+            <div style={{ fontWeight: 'bold' }}>Step</div>
+            <div style={{ fontWeight: 'bold' }}>Instruction</div>
+            <div style={{ fontWeight: 'bold' }}>Expected State</div>
 
             <div
               style={{
-                gridColumn: "1 / -1",
-                height: "1px",
-                backgroundColor: "#fed7aa",
+                gridColumn: '1 / -1',
+                height: '1px',
+                backgroundColor: '#fed7aa',
               }}
             ></div>
 
             <div>Initial</div>
             <div>Starting position</div>
-            <div style={{ fontWeight: "bold", color: "#059669" }}>
-              {startValue}
-            </div>
+            <div style={{ fontWeight: 'bold', color: '#059669' }}>{startValue}</div>
 
             {instruction.multiStepInstructions?.map((step, index) => (
               <>
                 <div>Step {index + 1}</div>
                 <div>{step}</div>
-                <div style={{ fontWeight: "bold", color: "#059669" }}>
-                  {expectedStates[index] || "?"}
+                <div style={{ fontWeight: 'bold', color: '#059669' }}>
+                  {expectedStates[index] || '?'}
                 </div>
               </>
             ))}
@@ -1114,17 +1038,17 @@ export const ExpectedStatesCalculation: Story = {
 
         <div
           style={{
-            marginBottom: "20px",
-            padding: "15px",
-            backgroundColor: "#f0f8ff",
-            borderRadius: "8px",
+            marginBottom: '20px',
+            padding: '15px',
+            backgroundColor: '#f0f8ff',
+            borderRadius: '8px',
           }}
         >
           <h4>✨ Tutorial Editor Enhancement:</h4>
-          <p style={{ fontSize: "14px", margin: 0 }}>
-            Fixed major bug: multiStepInstructions now match stepBeadHighlights
-            in pedagogical order. The tutorial editor shows expected states
-            below each multi-step instruction in the correct sequence.
+          <p style={{ fontSize: '14px', margin: 0 }}>
+            Fixed major bug: multiStepInstructions now match stepBeadHighlights in pedagogical
+            order. The tutorial editor shows expected states below each multi-step instruction in
+            the correct sequence.
           </p>
         </div>
 
@@ -1135,6 +1059,6 @@ export const ExpectedStatesCalculation: Story = {
           description="Follow the steps above to see the progression"
         />
       </div>
-    );
+    )
   },
-};
+}
diff --git a/apps/web/src/stories/Button.stories.ts b/apps/web/src/stories/Button.stories.ts
index d0e26710..e01cc6d7 100644
--- a/apps/web/src/stories/Button.stories.ts
+++ b/apps/web/src/stories/Button.stories.ts
@@ -1,54 +1,54 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
+import type { Meta, StoryObj } from '@storybook/nextjs'
 
-import { fn } from "storybook/test";
+import { fn } from 'storybook/test'
 
-import { Button } from "./Button";
+import { Button } from './Button'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: "Example/Button",
+  title: 'Example/Button',
   component: Button,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: "centered",
+    layout: 'centered',
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
-    backgroundColor: { control: "color" },
+    backgroundColor: { control: 'color' },
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
   args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
+} satisfies Meta<typeof Button>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
   args: {
     primary: true,
-    label: "Button",
+    label: 'Button',
   },
-};
+}
 
 export const Secondary: Story = {
   args: {
-    label: "Button",
+    label: 'Button',
   },
-};
+}
 
 export const Large: Story = {
   args: {
-    size: "large",
-    label: "Button",
+    size: 'large',
+    label: 'Button',
   },
-};
+}
 
 export const Small: Story = {
   args: {
-    size: "small",
-    label: "Button",
+    size: 'small',
+    label: 'Button',
   },
-};
+}
diff --git a/apps/web/src/stories/Button.tsx b/apps/web/src/stories/Button.tsx
index 0773d460..a1b1a564 100644
--- a/apps/web/src/stories/Button.tsx
+++ b/apps/web/src/stories/Button.tsx
@@ -1,35 +1,31 @@
-import "./button.css";
+import './button.css'
 
 export interface ButtonProps {
   /** Is this the principal call to action on the page? */
-  primary?: boolean;
+  primary?: boolean
   /** What background color to use */
-  backgroundColor?: string;
+  backgroundColor?: string
   /** How large should the button be? */
-  size?: "small" | "medium" | "large";
+  size?: 'small' | 'medium' | 'large'
   /** Button contents */
-  label: string;
+  label: string
   /** Optional click handler */
-  onClick?: () => void;
+  onClick?: () => void
 }
 
 /** Primary UI component for user interaction */
 export const Button = ({
   primary = false,
-  size = "medium",
+  size = 'medium',
   backgroundColor,
   label,
   ...props
 }: ButtonProps) => {
-  const mode = primary
-    ? "storybook-button--primary"
-    : "storybook-button--secondary";
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'
   return (
     <button
       type="button"
-      className={["storybook-button", `storybook-button--${size}`, mode].join(
-        " ",
-      )}
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
       {...props}
     >
       {label}
@@ -39,5 +35,5 @@ export const Button = ({
         }
       `}</style>
     </button>
-  );
-};
+  )
+}
diff --git a/apps/web/src/stories/Header.stories.ts b/apps/web/src/stories/Header.stories.ts
index c5a31d2d..097c36f6 100644
--- a/apps/web/src/stories/Header.stories.ts
+++ b/apps/web/src/stories/Header.stories.ts
@@ -1,34 +1,34 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
+import type { Meta, StoryObj } from '@storybook/nextjs'
 
-import { fn } from "storybook/test";
+import { fn } from 'storybook/test'
 
-import { Header } from "./Header";
+import { Header } from './Header'
 
 const meta = {
-  title: "Example/Header",
+  title: 'Example/Header',
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
   args: {
     onLogin: fn(),
     onLogout: fn(),
     onCreateAccount: fn(),
   },
-} satisfies Meta<typeof Header>;
+} satisfies Meta<typeof Header>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 export const LoggedIn: Story = {
   args: {
     user: {
-      name: "Jane Doe",
+      name: 'Jane Doe',
     },
   },
-};
+}
 
-export const LoggedOut: Story = {};
+export const LoggedOut: Story = {}
diff --git a/apps/web/src/stories/Header.tsx b/apps/web/src/stories/Header.tsx
index d3f3ccf0..94359e96 100644
--- a/apps/web/src/stories/Header.tsx
+++ b/apps/web/src/stories/Header.tsx
@@ -1,32 +1,22 @@
-import { Button } from "./Button";
-import "./header.css";
+import { Button } from './Button'
+import './header.css'
 
 type User = {
-  name: string;
-};
-
-export interface HeaderProps {
-  user?: User;
-  onLogin?: () => void;
-  onLogout?: () => void;
-  onCreateAccount?: () => void;
+  name: string
 }
 
-export const Header = ({
-  user,
-  onLogin,
-  onLogout,
-  onCreateAccount,
-}: HeaderProps) => (
+export interface HeaderProps {
+  user?: User
+  onLogin?: () => void
+  onLogout?: () => void
+  onCreateAccount?: () => void
+}
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
     <div className="storybook-header">
       <div>
-        <svg
-          width="32"
-          height="32"
-          viewBox="0 0 32 32"
-          xmlns="http://www.w3.org/2000/svg"
-        >
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
             <path
               d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
@@ -55,15 +45,10 @@ export const Header = ({
         ) : (
           <>
             <Button size="small" onClick={onLogin} label="Log in" />
-            <Button
-              primary
-              size="small"
-              onClick={onCreateAccount}
-              label="Sign up"
-            />
+            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
           </>
         )}
       </div>
     </div>
   </header>
-);
+)
diff --git a/apps/web/src/stories/Page.stories.ts b/apps/web/src/stories/Page.stories.ts
index 78d61ea6..65b7a87d 100644
--- a/apps/web/src/stories/Page.stories.ts
+++ b/apps/web/src/stories/Page.stories.ts
@@ -1,33 +1,33 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
+import type { Meta, StoryObj } from '@storybook/nextjs'
 
-import { expect, userEvent, within } from "storybook/test";
+import { expect, userEvent, within } from 'storybook/test'
 
-import { Page } from "./Page";
+import { Page } from './Page'
 
 const meta = {
-  title: "Example/Page",
+  title: 'Example/Page',
   component: Page,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
-} satisfies Meta<typeof Page>;
+} satisfies Meta<typeof Page>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
-export const LoggedOut: Story = {};
+export const LoggedOut: Story = {}
 
 // More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const loginButton = canvas.getByRole("button", { name: /Log in/i });
-    await expect(loginButton).toBeInTheDocument();
-    await userEvent.click(loginButton);
-    await expect(loginButton).not.toBeInTheDocument();
+    const canvas = within(canvasElement)
+    const loginButton = canvas.getByRole('button', { name: /Log in/i })
+    await expect(loginButton).toBeInTheDocument()
+    await userEvent.click(loginButton)
+    await expect(loginButton).not.toBeInTheDocument()
 
-    const logoutButton = canvas.getByRole("button", { name: /Log out/i });
-    await expect(logoutButton).toBeInTheDocument();
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i })
+    await expect(logoutButton).toBeInTheDocument()
   },
-};
+}
diff --git a/apps/web/src/stories/Page.tsx b/apps/web/src/stories/Page.tsx
index 3a9df545..dd2b6b50 100644
--- a/apps/web/src/stories/Page.tsx
+++ b/apps/web/src/stories/Page.tsx
@@ -1,80 +1,62 @@
-import React from "react";
+import React from 'react'
 
-import { Header } from "./Header";
-import "./page.css";
+import { Header } from './Header'
+import './page.css'
 
 type User = {
-  name: string;
-};
+  name: string
+}
 
 export const Page: React.FC = () => {
-  const [user, setUser] = React.useState<User>();
+  const [user, setUser] = React.useState<User>()
 
   return (
     <article>
       <Header
         user={user}
-        onLogin={() => setUser({ name: "Jane Doe" })}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
         onLogout={() => setUser(undefined)}
-        onCreateAccount={() => setUser({ name: "Jane Doe" })}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
       <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
-          We recommend building UIs with a{" "}
-          <a
-            href="https://componentdriven.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
             <strong>component-driven</strong>
-          </a>{" "}
+          </a>{' '}
           process starting with atomic components and ending with pages.
         </p>
         <p>
-          Render pages with mock data. This makes it easy to build and review
-          page states without needing to navigate to them in your app. Here are
-          some handy patterns for managing page data in Storybook:
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
         </p>
         <ul>
           <li>
-            Use a higher-level connected component. Storybook helps you compose
-            such data from the "args" of child component stories
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
           </li>
           <li>
-            Assemble data in the page component from your services. You can mock
-            these services out using Storybook.
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
           </li>
         </ul>
         <p>
-          Get a guided tutorial on component-driven development at{" "}
-          <a
-            href="https://storybook.js.org/tutorials/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          Get a guided tutorial on component-driven development at{' '}
+          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
             Storybook tutorials
           </a>
-          . Read more in the{" "}
-          <a
-            href="https://storybook.js.org/docs"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          . Read more in the{' '}
+          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
             docs
           </a>
           .
         </p>
         <div className="tip-wrapper">
-          <span className="tip">Tip</span> Adjust the width of the canvas with
-          the{" "}
-          <svg
-            width="10"
-            height="10"
-            viewBox="0 0 12 12"
-            xmlns="http://www.w3.org/2000/svg"
-          >
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
             <g fill="none" fillRule="evenodd">
               <path
                 d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
@@ -87,5 +69,5 @@ export const Page: React.FC = () => {
         </div>
       </section>
     </article>
-  );
-};
+  )
+}
diff --git a/apps/web/src/test/setup.ts b/apps/web/src/test/setup.ts
index d0de870d..c44951a6 100644
--- a/apps/web/src/test/setup.ts
+++ b/apps/web/src/test/setup.ts
@@ -1 +1 @@
-import "@testing-library/jest-dom";
+import '@testing-library/jest-dom'
diff --git a/apps/web/src/types/build-info.d.ts b/apps/web/src/types/build-info.d.ts
index f490465d..273af60a 100644
--- a/apps/web/src/types/build-info.d.ts
+++ b/apps/web/src/types/build-info.d.ts
@@ -1,20 +1,20 @@
-declare module "@/generated/build-info.json" {
+declare module '@/generated/build-info.json' {
   interface BuildInfo {
-    version: string;
-    buildTime: string;
-    buildTimestamp: number;
+    version: string
+    buildTime: string
+    buildTimestamp: number
     git: {
-      commit: string | null;
-      commitShort: string | null;
-      branch: string | null;
-      tag: string | null;
-      isDirty: boolean;
-    };
-    environment: string;
-    buildNumber: string | null;
-    nodeVersion: string;
+      commit: string | null
+      commitShort: string | null
+      branch: string | null
+      tag: string | null
+      isDirty: boolean
+    }
+    environment: string
+    buildNumber: string | null
+    nodeVersion: string
   }
 
-  const buildInfo: BuildInfo;
-  export default buildInfo;
+  const buildInfo: BuildInfo
+  export default buildInfo
 }
diff --git a/apps/web/src/types/player.ts b/apps/web/src/types/player.ts
index afeba882..c34ef7fe 100644
--- a/apps/web/src/types/player.ts
+++ b/apps/web/src/types/player.ts
@@ -2,47 +2,45 @@
  * Default player colors (used during player creation)
  */
 export const DEFAULT_PLAYER_COLORS = [
-  "#3b82f6", // Blue
-  "#8b5cf6", // Purple
-  "#10b981", // Green
-  "#f59e0b", // Orange
-  "#ef4444", // Red
-  "#14b8a6", // Teal
-  "#f97316", // Deep Orange
-  "#6366f1", // Indigo
-  "#ec4899", // Pink
-  "#84cc16", // Lime
-];
+  '#3b82f6', // Blue
+  '#8b5cf6', // Purple
+  '#10b981', // Green
+  '#f59e0b', // Orange
+  '#ef4444', // Red
+  '#14b8a6', // Teal
+  '#f97316', // Deep Orange
+  '#6366f1', // Indigo
+  '#ec4899', // Pink
+  '#84cc16', // Lime
+]
 
 /**
  * Client-side Player type (for contexts/components)
  * Matches database Player type but with flexible createdAt
  */
 export interface Player {
-  id: string;
-  name: string;
-  emoji: string;
-  color: string;
-  createdAt: Date | number;
-  isActive?: boolean;
-  isLocal?: boolean;
+  id: string
+  name: string
+  emoji: string
+  color: string
+  createdAt: Date | number
+  isActive?: boolean
+  isLocal?: boolean
 }
 
 /**
  * Get a color for a new player (cycles through defaults)
  */
 export function getNextPlayerColor(existingPlayers: Player[]): string {
-  const usedColors = new Set(existingPlayers.map((p) => p.color));
+  const usedColors = new Set(existingPlayers.map((p) => p.color))
 
   // Find first unused color
   for (const color of DEFAULT_PLAYER_COLORS) {
     if (!usedColors.has(color)) {
-      return color;
+      return color
     }
   }
 
   // If all colors used, cycle back
-  return DEFAULT_PLAYER_COLORS[
-    existingPlayers.length % DEFAULT_PLAYER_COLORS.length
-  ];
+  return DEFAULT_PLAYER_COLORS[existingPlayers.length % DEFAULT_PLAYER_COLORS.length]
 }
diff --git a/apps/web/src/types/soroban-abacus-react.d.ts b/apps/web/src/types/soroban-abacus-react.d.ts
index b0b5a079..6132633c 100644
--- a/apps/web/src/types/soroban-abacus-react.d.ts
+++ b/apps/web/src/types/soroban-abacus-react.d.ts
@@ -1,37 +1,33 @@
-declare module "@soroban/abacus-react" {
+declare module '@soroban/abacus-react' {
   export interface AbacusProps {
-    value: number;
-    style?: string;
-    size?: number;
+    value: number
+    style?: string
+    size?: number
     beadHighlights?: Array<{
-      placeValue: number;
-      beadType: "earth" | "heaven";
-      position?: number;
-    }>;
-    readonly?: boolean;
-    showPlaceValues?: boolean;
-    onBeadClick?: (
-      placeValue: number,
-      beadType: "earth" | "heaven",
-      position: number,
-    ) => void;
+      placeValue: number
+      beadType: 'earth' | 'heaven'
+      position?: number
+    }>
+    readonly?: boolean
+    showPlaceValues?: boolean
+    onBeadClick?: (placeValue: number, beadType: 'earth' | 'heaven', position: number) => void
   }
 
-  export const Abacus: React.ComponentType<AbacusProps>;
+  export const Abacus: React.ComponentType<AbacusProps>
 
   export interface BeadPosition {
-    placeValue: number;
-    beadType: "earth" | "heaven";
-    position?: number;
+    placeValue: number
+    beadType: 'earth' | 'heaven'
+    position?: number
   }
 
   export interface AbacusState {
-    beads: BeadPosition[];
-    value: number;
+    beads: BeadPosition[]
+    value: number
   }
 
-  export function createAbacusState(value: number): AbacusState;
-  export function calculateValue(state: AbacusState): number;
-  export function addToAbacus(state: AbacusState, amount: number): AbacusState;
-  export function resetAbacus(): AbacusState;
+  export function createAbacusState(value: number): AbacusState
+  export function calculateValue(state: AbacusState): number
+  export function addToAbacus(state: AbacusState, amount: number): AbacusState
+  export function resetAbacus(): AbacusState
 }
diff --git a/apps/web/src/types/tutorial.ts b/apps/web/src/types/tutorial.ts
index 3144f02c..c06ba1f9 100644
--- a/apps/web/src/types/tutorial.ts
+++ b/apps/web/src/types/tutorial.ts
@@ -1,98 +1,98 @@
 // Tutorial system type definitions
 export interface TutorialStep {
-  id: string;
-  title: string;
-  problem: string;
-  description: string;
-  startValue: number;
-  targetValue: number;
+  id: string
+  title: string
+  problem: string
+  description: string
+  startValue: number
+  targetValue: number
   highlightBeads?: Array<{
-    placeValue: number;
-    beadType: "heaven" | "earth";
-    position?: number; // for earth beads, 0-3
-  }>;
+    placeValue: number
+    beadType: 'heaven' | 'earth'
+    position?: number // for earth beads, 0-3
+  }>
   // Progressive step-based highlighting with directions
   stepBeadHighlights?: Array<{
-    placeValue: number;
-    beadType: "heaven" | "earth";
-    position?: number; // for earth beads, 0-3
-    stepIndex: number; // Which instruction step this bead belongs to
-    direction: "up" | "down" | "activate" | "deactivate"; // Movement direction
-    order?: number; // Order within the step (for multiple beads per step)
-  }>;
-  totalSteps?: number; // Total number of instruction steps
-  expectedAction: "add" | "remove" | "multi-step";
-  actionDescription: string;
+    placeValue: number
+    beadType: 'heaven' | 'earth'
+    position?: number // for earth beads, 0-3
+    stepIndex: number // Which instruction step this bead belongs to
+    direction: 'up' | 'down' | 'activate' | 'deactivate' // Movement direction
+    order?: number // Order within the step (for multiple beads per step)
+  }>
+  totalSteps?: number // Total number of instruction steps
+  expectedAction: 'add' | 'remove' | 'multi-step'
+  actionDescription: string
   tooltip: {
-    content: string;
-    explanation: string;
-  };
+    content: string
+    explanation: string
+  }
   // errorMessages removed - bead diff tooltip provides better guidance
-  multiStepInstructions?: string[];
-  position?: number; // Position in unified tutorial flow
+  multiStepInstructions?: string[]
+  position?: number // Position in unified tutorial flow
 }
 
 // Skill-based system for practice problem generation
 export interface SkillSet {
   // Five complements (single-column operations)
   fiveComplements: {
-    "4=5-1": boolean;
-    "3=5-2": boolean;
-    "2=5-3": boolean;
-    "1=5-4": boolean;
-  };
+    '4=5-1': boolean
+    '3=5-2': boolean
+    '2=5-3': boolean
+    '1=5-4': boolean
+  }
 
   // Ten complements (carrying operations)
   tenComplements: {
-    "9=10-1": boolean;
-    "8=10-2": boolean;
-    "7=10-3": boolean;
-    "6=10-4": boolean;
-    "5=10-5": boolean;
-    "4=10-6": boolean;
-    "3=10-7": boolean;
-    "2=10-8": boolean;
-    "1=10-9": boolean;
-  };
+    '9=10-1': boolean
+    '8=10-2': boolean
+    '7=10-3': boolean
+    '6=10-4': boolean
+    '5=10-5': boolean
+    '4=10-6': boolean
+    '3=10-7': boolean
+    '2=10-8': boolean
+    '1=10-9': boolean
+  }
 
   // Basic operations
   basic: {
-    directAddition: boolean; // Can add 1-4 directly
-    heavenBead: boolean; // Can use heaven bead (5)
-    simpleCombinations: boolean; // Can do 6-9 without complements
-  };
+    directAddition: boolean // Can add 1-4 directly
+    heavenBead: boolean // Can use heaven bead (5)
+    simpleCombinations: boolean // Can do 6-9 without complements
+  }
 }
 
 export interface PracticeStep {
-  id: string;
-  title: string;
-  description: string;
+  id: string
+  title: string
+  description: string
 
   // Problem generation settings
-  problemCount: number;
-  maxTerms: number; // max numbers to add in a single problem
+  problemCount: number
+  maxTerms: number // max numbers to add in a single problem
 
   // Skill-based constraints
-  requiredSkills: SkillSet; // Skills user must know
-  targetSkills?: Partial<SkillSet>; // Skills to specifically practice (optional)
-  forbiddenSkills?: Partial<SkillSet>; // Skills user hasn't learned yet (optional)
+  requiredSkills: SkillSet // Skills user must know
+  targetSkills?: Partial<SkillSet> // Skills to specifically practice (optional)
+  forbiddenSkills?: Partial<SkillSet> // Skills user hasn't learned yet (optional)
 
   // Advanced constraints (optional)
-  numberRange?: { min: number; max: number };
-  sumConstraints?: { maxSum: number; minSum?: number };
+  numberRange?: { min: number; max: number }
+  sumConstraints?: { maxSum: number; minSum?: number }
 
   // Legacy support for existing system
-  skillLevel?: "basic" | "heaven" | "five-complements" | "mixed";
+  skillLevel?: 'basic' | 'heaven' | 'five-complements' | 'mixed'
 
   // Tutorial integration
-  position?: number; // Where in tutorial flow this appears
+  position?: number // Where in tutorial flow this appears
 }
 
 export interface Problem {
-  id: string;
-  terms: number[];
-  userAnswer?: number;
-  isCorrect?: boolean;
+  id: string
+  terms: number[]
+  userAnswer?: number
+  isCorrect?: boolean
 }
 
 // Utility functions for skill management
@@ -104,23 +104,23 @@ export function createEmptySkillSet(): SkillSet {
       simpleCombinations: false,
     },
     fiveComplements: {
-      "4=5-1": false,
-      "3=5-2": false,
-      "2=5-3": false,
-      "1=5-4": false,
+      '4=5-1': false,
+      '3=5-2': false,
+      '2=5-3': false,
+      '1=5-4': false,
     },
     tenComplements: {
-      "9=10-1": false,
-      "8=10-2": false,
-      "7=10-3": false,
-      "6=10-4": false,
-      "5=10-5": false,
-      "4=10-6": false,
-      "3=10-7": false,
-      "2=10-8": false,
-      "1=10-9": false,
+      '9=10-1': false,
+      '8=10-2': false,
+      '7=10-3': false,
+      '6=10-4': false,
+      '5=10-5': false,
+      '4=10-6': false,
+      '3=10-7': false,
+      '2=10-8': false,
+      '1=10-9': false,
     },
-  };
+  }
 }
 
 export function createBasicSkillSet(): SkillSet {
@@ -131,183 +131,183 @@ export function createBasicSkillSet(): SkillSet {
       simpleCombinations: false,
     },
     fiveComplements: {
-      "4=5-1": false,
-      "3=5-2": false,
-      "2=5-3": false,
-      "1=5-4": false,
+      '4=5-1': false,
+      '3=5-2': false,
+      '2=5-3': false,
+      '1=5-4': false,
     },
     tenComplements: {
-      "9=10-1": false,
-      "8=10-2": false,
-      "7=10-3": false,
-      "6=10-4": false,
-      "5=10-5": false,
-      "4=10-6": false,
-      "3=10-7": false,
-      "2=10-8": false,
-      "1=10-9": false,
+      '9=10-1': false,
+      '8=10-2': false,
+      '7=10-3': false,
+      '6=10-4': false,
+      '5=10-5': false,
+      '4=10-6': false,
+      '3=10-7': false,
+      '2=10-8': false,
+      '1=10-9': false,
     },
-  };
+  }
 }
 
 export interface Tutorial {
-  id: string;
-  title: string;
-  description: string;
-  category: string;
-  difficulty: "beginner" | "intermediate" | "advanced";
-  estimatedDuration: number; // in minutes
-  steps: TutorialStep[];
-  practiceSteps?: PracticeStep[];
-  tags: string[];
-  author: string;
-  version: string;
-  createdAt: Date;
-  updatedAt: Date;
-  isPublished: boolean;
+  id: string
+  title: string
+  description: string
+  category: string
+  difficulty: 'beginner' | 'intermediate' | 'advanced'
+  estimatedDuration: number // in minutes
+  steps: TutorialStep[]
+  practiceSteps?: PracticeStep[]
+  tags: string[]
+  author: string
+  version: string
+  createdAt: Date
+  updatedAt: Date
+  isPublished: boolean
 }
 
 export interface TutorialProgress {
-  tutorialId: string;
-  userId?: string;
-  currentStepIndex: number;
-  completedSteps: string[]; // step ids
-  startedAt: Date;
-  lastAccessedAt: Date;
-  completedAt?: Date;
-  score?: number;
-  timeSpent: number; // in seconds
+  tutorialId: string
+  userId?: string
+  currentStepIndex: number
+  completedSteps: string[] // step ids
+  startedAt: Date
+  lastAccessedAt: Date
+  completedAt?: Date
+  score?: number
+  timeSpent: number // in seconds
 }
 
 export interface TutorialSession {
-  id: string;
-  tutorial: Tutorial;
-  progress: TutorialProgress;
-  currentStep: TutorialStep;
-  isDebugMode: boolean;
+  id: string
+  tutorial: Tutorial
+  progress: TutorialProgress
+  currentStep: TutorialStep
+  isDebugMode: boolean
   debugHistory: Array<{
-    stepId: string;
-    timestamp: Date;
-    action: string;
-    value: number;
-    success: boolean;
-  }>;
+    stepId: string
+    timestamp: Date
+    action: string
+    value: number
+    success: boolean
+  }>
 }
 
 // Editor specific types
 export interface TutorialTemplate {
-  name: string;
-  description: string;
-  defaultSteps: Partial<TutorialStep>[];
+  name: string
+  description: string
+  defaultSteps: Partial<TutorialStep>[]
 }
 
 export interface StepValidationError {
-  stepId: string;
-  field: string;
-  message: string;
-  severity: "error" | "warning";
+  stepId: string
+  field: string
+  message: string
+  severity: 'error' | 'warning'
 }
 
 export interface TutorialValidation {
-  isValid: boolean;
-  errors: StepValidationError[];
-  warnings: StepValidationError[];
+  isValid: boolean
+  errors: StepValidationError[]
+  warnings: StepValidationError[]
 }
 
 // Access control types (future-ready)
 export interface UserRole {
-  id: string;
-  name: string;
-  permissions: Permission[];
+  id: string
+  name: string
+  permissions: Permission[]
 }
 
 export interface Permission {
-  resource: "tutorial" | "step" | "user" | "system";
-  actions: ("create" | "read" | "update" | "delete" | "publish")[];
-  conditions?: Record<string, any>;
+  resource: 'tutorial' | 'step' | 'user' | 'system'
+  actions: ('create' | 'read' | 'update' | 'delete' | 'publish')[]
+  conditions?: Record<string, any>
 }
 
 export interface AccessContext {
-  userId?: string;
-  roles: UserRole[];
-  isAuthenticated: boolean;
-  isAdmin: boolean;
-  canEdit: boolean;
-  canPublish: boolean;
-  canDelete: boolean;
+  userId?: string
+  roles: UserRole[]
+  isAuthenticated: boolean
+  isAdmin: boolean
+  canEdit: boolean
+  canPublish: boolean
+  canDelete: boolean
 }
 
 // Navigation and UI state types
 export interface NavigationState {
-  currentStepIndex: number;
-  canGoNext: boolean;
-  canGoPrevious: boolean;
-  totalSteps: number;
-  completionPercentage: number;
+  currentStepIndex: number
+  canGoNext: boolean
+  canGoPrevious: boolean
+  totalSteps: number
+  completionPercentage: number
 }
 
 export interface UIState {
-  isPlaying: boolean;
-  isPaused: boolean;
-  isEditing: boolean;
-  showDebugPanel: boolean;
-  showStepList: boolean;
-  autoAdvance: boolean;
-  playbackSpeed: number;
+  isPlaying: boolean
+  isPaused: boolean
+  isEditing: boolean
+  showDebugPanel: boolean
+  showStepList: boolean
+  autoAdvance: boolean
+  playbackSpeed: number
 }
 
 // Event types for tutorial interaction
 export type TutorialEvent =
-  | { type: "STEP_STARTED"; stepId: string; timestamp: Date }
+  | { type: 'STEP_STARTED'; stepId: string; timestamp: Date }
   | {
-      type: "STEP_COMPLETED";
-      stepId: string;
-      success: boolean;
-      timestamp: Date;
+      type: 'STEP_COMPLETED'
+      stepId: string
+      success: boolean
+      timestamp: Date
     }
-  | { type: "BEAD_CLICKED"; stepId: string; beadInfo: any; timestamp: Date }
+  | { type: 'BEAD_CLICKED'; stepId: string; beadInfo: any; timestamp: Date }
   | {
-      type: "VALUE_CHANGED";
-      stepId: string;
-      oldValue: number;
-      newValue: number;
-      timestamp: Date;
+      type: 'VALUE_CHANGED'
+      stepId: string
+      oldValue: number
+      newValue: number
+      timestamp: Date
     }
-  | { type: "ERROR_OCCURRED"; stepId: string; error: string; timestamp: Date }
+  | { type: 'ERROR_OCCURRED'; stepId: string; error: string; timestamp: Date }
   | {
-      type: "TUTORIAL_COMPLETED";
-      tutorialId: string;
-      score: number;
-      timestamp: Date;
+      type: 'TUTORIAL_COMPLETED'
+      tutorialId: string
+      score: number
+      timestamp: Date
     }
   | {
-      type: "TUTORIAL_ABANDONED";
-      tutorialId: string;
-      lastStepId: string;
-      timestamp: Date;
-    };
+      type: 'TUTORIAL_ABANDONED'
+      tutorialId: string
+      lastStepId: string
+      timestamp: Date
+    }
 
 // API response types
 export interface TutorialListResponse {
-  tutorials: Tutorial[];
-  total: number;
-  page: number;
-  limit: number;
-  hasMore: boolean;
+  tutorials: Tutorial[]
+  total: number
+  page: number
+  limit: number
+  hasMore: boolean
 }
 
 export interface TutorialDetailResponse {
-  tutorial: Tutorial;
-  userProgress?: TutorialProgress;
-  canEdit: boolean;
-  canDelete: boolean;
+  tutorial: Tutorial
+  userProgress?: TutorialProgress
+  canEdit: boolean
+  canDelete: boolean
 }
 
 export interface SaveTutorialRequest {
-  tutorial: Omit<Tutorial, "id" | "createdAt" | "updatedAt">;
+  tutorial: Omit<Tutorial, 'id' | 'createdAt' | 'updatedAt'>
 }
 
 export interface SaveTutorialResponse {
-  tutorial: Tutorial;
-  validation: TutorialValidation;
+  tutorial: Tutorial
+  validation: TutorialValidation
 }
diff --git a/apps/web/src/types/vitest.d.ts b/apps/web/src/types/vitest.d.ts
index 7d8bb4d3..f717c1fb 100644
--- a/apps/web/src/types/vitest.d.ts
+++ b/apps/web/src/types/vitest.d.ts
@@ -6,4 +6,4 @@ declare global {
   // This file ensures TypeScript recognizes describe, it, expect, etc.
 }
 
-export {};
+export {}
diff --git a/apps/web/src/types/yjs-cjs.d.ts b/apps/web/src/types/yjs-cjs.d.ts
index ba86268d..a2e45f50 100644
--- a/apps/web/src/types/yjs-cjs.d.ts
+++ b/apps/web/src/types/yjs-cjs.d.ts
@@ -3,22 +3,22 @@
  * These packages provide ESM types but we need to import CJS builds for Node.js server compatibility
  */
 
-declare module "y-protocols/dist/sync.cjs" {
-  import type * as syncProtocol from "y-protocols/sync";
-  export = syncProtocol;
+declare module 'y-protocols/dist/sync.cjs' {
+  import type * as syncProtocol from 'y-protocols/sync'
+  export = syncProtocol
 }
 
-declare module "y-protocols/dist/awareness.cjs" {
-  import type * as awarenessProtocol from "y-protocols/awareness";
-  export = awarenessProtocol;
+declare module 'y-protocols/dist/awareness.cjs' {
+  import type * as awarenessProtocol from 'y-protocols/awareness'
+  export = awarenessProtocol
 }
 
-declare module "lib0/dist/encoding.cjs" {
-  import type * as encoding from "lib0/encoding";
-  export = encoding;
+declare module 'lib0/dist/encoding.cjs' {
+  import type * as encoding from 'lib0/encoding'
+  export = encoding
 }
 
-declare module "lib0/dist/decoding.cjs" {
-  import type * as decoding from "lib0/decoding";
-  export = decoding;
+declare module 'lib0/dist/decoding.cjs' {
+  import type * as decoding from 'lib0/decoding'
+  export = decoding
 }
diff --git a/apps/web/src/utils/__tests__/pedagogicalCore.test.ts b/apps/web/src/utils/__tests__/pedagogicalCore.test.ts
index 81257c95..02b1d683 100644
--- a/apps/web/src/utils/__tests__/pedagogicalCore.test.ts
+++ b/apps/web/src/utils/__tests__/pedagogicalCore.test.ts
@@ -1,5 +1,5 @@
-import { describe, expect, it } from "vitest";
-import { generateUnifiedInstructionSequence } from "../unifiedStepGenerator";
+import { describe, expect, it } from 'vitest'
+import { generateUnifiedInstructionSequence } from '../unifiedStepGenerator'
 
 /**
  * Lean, focused tests for pedagogical algorithm with explicit invariants.
@@ -7,9 +7,7 @@ import { generateUnifiedInstructionSequence } from "../unifiedStepGenerator";
  */
 
 // Helper to create stable, lean snapshots
-function createStableSnapshot(
-  result: ReturnType<typeof generateUnifiedInstructionSequence>,
-) {
+function createStableSnapshot(result: ReturnType<typeof generateUnifiedInstructionSequence>) {
   return {
     startValue: result.startValue,
     targetValue: result.targetValue,
@@ -23,304 +21,286 @@ function createStableSnapshot(
       expectedValue: s.expectedValue,
       isValid: s.isValid,
     })),
-  };
+  }
 }
 
 // Helper to validate term-to-position mapping
-function assertTermMapping(
-  seq: ReturnType<typeof generateUnifiedInstructionSequence>,
-) {
-  const text = seq.fullDecomposition;
+function assertTermMapping(seq: ReturnType<typeof generateUnifiedInstructionSequence>) {
+  const text = seq.fullDecomposition
   seq.steps.forEach((step, i) => {
-    const slice = text.slice(
-      step.termPosition.startIndex,
-      step.termPosition.endIndex,
-    );
-    const normalized = step.mathematicalTerm.startsWith("-")
+    const slice = text.slice(step.termPosition.startIndex, step.termPosition.endIndex)
+    const normalized = step.mathematicalTerm.startsWith('-')
       ? step.mathematicalTerm.slice(1)
-      : step.mathematicalTerm;
+      : step.mathematicalTerm
     expect(
       slice,
-      `Step ${i} term "${step.mathematicalTerm}" should map to "${normalized}" but got "${slice}"`,
-    ).toBe(normalized);
-  });
+      `Step ${i} term "${step.mathematicalTerm}" should map to "${normalized}" but got "${slice}"`
+    ).toBe(normalized)
+  })
 }
 
 // Helper to validate arithmetic invariant
-function assertArithmeticInvariant(
-  seq: ReturnType<typeof generateUnifiedInstructionSequence>,
-) {
-  let currentValue = seq.startValue;
+function assertArithmeticInvariant(seq: ReturnType<typeof generateUnifiedInstructionSequence>) {
+  let currentValue = seq.startValue
   seq.steps.forEach((step, i) => {
-    const term = step.mathematicalTerm;
-    const delta = term.startsWith("-")
-      ? -parseInt(term.slice(1), 10)
-      : parseInt(term, 10);
-    currentValue += delta;
+    const term = step.mathematicalTerm
+    const delta = term.startsWith('-') ? -parseInt(term.slice(1), 10) : parseInt(term, 10)
+    currentValue += delta
     expect(
       currentValue,
-      `Step ${i}: ${seq.startValue} + terms should equal ${step.expectedValue}`,
-    ).toBe(step.expectedValue);
-  });
-  expect(currentValue).toBe(seq.targetValue);
+      `Step ${i}: ${seq.startValue} + terms should equal ${step.expectedValue}`
+    ).toBe(step.expectedValue)
+  })
+  expect(currentValue).toBe(seq.targetValue)
 }
 
 // Helper to validate complement shape contract
-function assertComplementShape(
-  seq: ReturnType<typeof generateUnifiedInstructionSequence>,
-) {
-  const decomposition = seq.fullDecomposition;
-  const middlePart = decomposition.split(" = ")[1]?.split(" = ")[0];
+function assertComplementShape(seq: ReturnType<typeof generateUnifiedInstructionSequence>) {
+  const decomposition = seq.fullDecomposition
+  const middlePart = decomposition.split(' = ')[1]?.split(' = ')[0]
 
   // Should contain proper parenthesized complements
-  const complementMatches =
-    middlePart?.match(/\((\d+) - (\d+(?:\s-\s\d+)*)\)/g) || [];
+  const complementMatches = middlePart?.match(/\((\d+) - (\d+(?:\s-\s\d+)*)\)/g) || []
   complementMatches.forEach((match) => {
     // Each complement should start with a power of 10
-    const [, positive] = match.match(/\((\d+)/) || [];
-    const num = parseInt(positive, 10);
-    expect(
-      num,
-      `Complement positive part "${positive}" should be power of 10`,
-    ).toSatisfy((n: number) => {
-      if (n < 10) return n === 5; // Five-complements use 5
-      return /^10+$/.test(n.toString()); // Ten-complements use 10, 100, 1000, etc.
-    });
-  });
+    const [, positive] = match.match(/\((\d+)/) || []
+    const num = parseInt(positive, 10)
+    expect(num, `Complement positive part "${positive}" should be power of 10`).toSatisfy(
+      (n: number) => {
+        if (n < 10) return n === 5 // Five-complements use 5
+        return /^10+$/.test(n.toString()) // Ten-complements use 10, 100, 1000, etc.
+      }
+    )
+  })
 }
 
 // Helper to validate meaningfulness
 function assertMeaningfulness(
   seq: ReturnType<typeof generateUnifiedInstructionSequence>,
-  expectedMeaningful: boolean,
+  expectedMeaningful: boolean
 ) {
   expect(
     seq.isMeaningfulDecomposition,
-    `${seq.startValue}→${seq.targetValue}: "${seq.fullDecomposition}" meaningfulness`,
-  ).toBe(expectedMeaningful);
+    `${seq.startValue}→${seq.targetValue}: "${seq.fullDecomposition}" meaningfulness`
+  ).toBe(expectedMeaningful)
 
   if (expectedMeaningful) {
-    expect(seq.fullDecomposition).toMatch(/\(/); // Should have parentheses for complements
+    expect(seq.fullDecomposition).toMatch(/\(/) // Should have parentheses for complements
   }
 }
 
-describe("Pedagogical Algorithm - Core Validation", () => {
-  describe("Term-Position Mapping Invariants", () => {
+describe('Pedagogical Algorithm - Core Validation', () => {
+  describe('Term-Position Mapping Invariants', () => {
     const criticalCases = [
       [3456, 3500], // Complex complement: "3456 + 44 = 3456 + 40 + (100 - 90 - 6) = 3500"
       [3, 17], // Mixed segments: "3 + 14 = 3 + 10 + (5 - 1) = 17"
       [9999, 10007], // Multi-cascade: "9999 + 8 = 9999 + (10000 - 1000 - 100 - 10 - 1) = 10007"
       [4, 7], // Simple five-complement: "4 + 3 = 4 + (5 - 2) = 7"
       [7, 15], // Simple ten-complement: "7 + 8 = 7 + (10 - 2) = 15"
-    ];
+    ]
 
     criticalCases.forEach(([start, target]) => {
       it(`maps terms correctly for ${start} → ${target}`, () => {
-        const result = generateUnifiedInstructionSequence(start, target);
-        assertTermMapping(result);
-        assertArithmeticInvariant(result);
-        assertComplementShape(result);
-      });
-    });
-  });
+        const result = generateUnifiedInstructionSequence(start, target)
+        assertTermMapping(result)
+        assertArithmeticInvariant(result)
+        assertComplementShape(result)
+      })
+    })
+  })
 
-  describe("Meaningfulness Detection", () => {
-    it("detects non-meaningful decompositions", () => {
+  describe('Meaningfulness Detection', () => {
+    it('detects non-meaningful decompositions', () => {
       const nonMeaningful = [
         [0, 0], // Zero case
         [5, 5], // No change
         [123, 123], // No change multi-digit
-      ];
+      ]
 
       nonMeaningful.forEach(([start, target]) => {
-        const result = generateUnifiedInstructionSequence(start, target);
-        assertMeaningfulness(result, false);
-        expect(result.fullDecomposition).not.toMatch(/\(/); // Should not contain parentheses
-      });
-    });
+        const result = generateUnifiedInstructionSequence(start, target)
+        assertMeaningfulness(result, false)
+        expect(result.fullDecomposition).not.toMatch(/\(/) // Should not contain parentheses
+      })
+    })
 
-    it("detects meaningful decompositions with explicit parentheses check", () => {
+    it('detects meaningful decompositions with explicit parentheses check', () => {
       const meaningful = [
         [4, 7], // Five-complement: (5 - 2)
         [7, 15], // Ten-complement: (10 - 2)
         [99, 107], // Cascading: (100 - 90 - 2)
         [3, 6], // Five-complement: (5 - 2)
         [8, 15], // Ten-complement: (10 - 3)
-      ];
+      ]
 
       meaningful.forEach(([start, target]) => {
-        const result = generateUnifiedInstructionSequence(start, target);
-        assertMeaningfulness(result, true);
+        const result = generateUnifiedInstructionSequence(start, target)
+        assertMeaningfulness(result, true)
         expect(
           result.fullDecomposition,
-          `${start}→${target} should have parentheses for complement`,
-        ).toMatch(/\(/);
-        expect(result.isMeaningfulDecomposition).toBe(true);
-      });
-    });
+          `${start}→${target} should have parentheses for complement`
+        ).toMatch(/\(/)
+        expect(result.isMeaningfulDecomposition).toBe(true)
+      })
+    })
 
-    it("validates specific meaningfulness edge cases", () => {
+    it('validates specific meaningfulness edge cases', () => {
       // Test case that should be meaningful due to complement structure
-      const result = generateUnifiedInstructionSequence(0, 6);
-      if (result.fullDecomposition.includes("(")) {
+      const result = generateUnifiedInstructionSequence(0, 6)
+      if (result.fullDecomposition.includes('(')) {
         // If it uses complements (5 + 1), it should be meaningful
-        expect(result.isMeaningfulDecomposition).toBe(true);
+        expect(result.isMeaningfulDecomposition).toBe(true)
       } else {
         // If it's direct addition, it should be non-meaningful
-        expect(result.isMeaningfulDecomposition).toBe(false);
+        expect(result.isMeaningfulDecomposition).toBe(false)
       }
-    });
-  });
+    })
+  })
 
-  describe("Representative Snapshots (Lean)", () => {
+  describe('Representative Snapshots (Lean)', () => {
     // One golden anchor per major pattern type
 
-    it("direct entry pattern", () => {
-      const result = generateUnifiedInstructionSequence(0, 3);
-      expect(createStableSnapshot(result)).toMatchSnapshot();
-    });
+    it('direct entry pattern', () => {
+      const result = generateUnifiedInstructionSequence(0, 3)
+      expect(createStableSnapshot(result)).toMatchSnapshot()
+    })
 
-    it("five-complement pattern", () => {
-      const result = generateUnifiedInstructionSequence(4, 7);
-      expect(createStableSnapshot(result)).toMatchSnapshot();
-    });
+    it('five-complement pattern', () => {
+      const result = generateUnifiedInstructionSequence(4, 7)
+      expect(createStableSnapshot(result)).toMatchSnapshot()
+    })
 
-    it("ten-complement pattern", () => {
-      const result = generateUnifiedInstructionSequence(7, 15);
-      expect(createStableSnapshot(result)).toMatchSnapshot();
-    });
+    it('ten-complement pattern', () => {
+      const result = generateUnifiedInstructionSequence(7, 15)
+      expect(createStableSnapshot(result)).toMatchSnapshot()
+    })
 
-    it("cascading complement pattern", () => {
-      const result = generateUnifiedInstructionSequence(99, 107);
-      expect(createStableSnapshot(result)).toMatchSnapshot();
-    });
+    it('cascading complement pattern', () => {
+      const result = generateUnifiedInstructionSequence(99, 107)
+      expect(createStableSnapshot(result)).toMatchSnapshot()
+    })
 
-    it("mixed operations pattern", () => {
-      const result = generateUnifiedInstructionSequence(43, 51);
-      expect(createStableSnapshot(result)).toMatchSnapshot();
-    });
+    it('mixed operations pattern', () => {
+      const result = generateUnifiedInstructionSequence(43, 51)
+      expect(createStableSnapshot(result)).toMatchSnapshot()
+    })
 
-    it("complex multi-cascade pattern", () => {
-      const result = generateUnifiedInstructionSequence(9999, 10007);
-      expect(createStableSnapshot(result)).toMatchSnapshot();
-    });
-  });
+    it('complex multi-cascade pattern', () => {
+      const result = generateUnifiedInstructionSequence(9999, 10007)
+      expect(createStableSnapshot(result)).toMatchSnapshot()
+    })
+  })
 
-  describe("Edge Cases & Boundary Conditions", () => {
+  describe('Edge Cases & Boundary Conditions', () => {
     const edgeCases = [
       [0, 0], // Zero operation
       [9, 10], // Place boundary
       [99, 100], // Double place boundary
       [999, 1000], // Triple place boundary
-    ];
+    ]
 
     edgeCases.forEach(([start, target]) => {
       it(`handles edge case ${start} → ${target}`, () => {
-        const result = generateUnifiedInstructionSequence(start, target);
+        const result = generateUnifiedInstructionSequence(start, target)
 
         // Validate basic invariants
-        expect(result.startValue).toBe(start);
-        expect(result.targetValue).toBe(target);
-        expect(result.steps.length).toBeGreaterThanOrEqual(0);
+        expect(result.startValue).toBe(start)
+        expect(result.targetValue).toBe(target)
+        expect(result.steps.length).toBeGreaterThanOrEqual(0)
 
         if (result.steps.length > 0) {
-          assertTermMapping(result);
-          assertArithmeticInvariant(result);
+          assertTermMapping(result)
+          assertArithmeticInvariant(result)
         }
-      });
-    });
-  });
+      })
+    })
+  })
 
-  describe("Micro-Invariant Tests (Critical Behaviors)", () => {
+  describe('Micro-Invariant Tests (Critical Behaviors)', () => {
     // Lock specific invariants without snapshots
 
-    it("validates term substring mapping precision", () => {
+    it('validates term substring mapping precision', () => {
       const cases = [
         [3456, 3500], // Complex complement: "3456 + 44 = 3456 + 40 + (100 - 90 - 6) = 3500"
         [3, 17], // Mixed: "3 + 14 = 3 + 10 + (5 - 1) = 17"
         [9999, 10007], // Multi-cascade: "9999 + 8 = 9999 + (10000 - 9000 - 900 - 90 - 2) = 10007"
-      ];
+      ]
 
       cases.forEach(([start, target]) => {
-        const result = generateUnifiedInstructionSequence(start, target);
-        assertTermMapping(result);
-      });
-    });
+        const result = generateUnifiedInstructionSequence(start, target)
+        assertTermMapping(result)
+      })
+    })
 
-    it("validates arithmetic step-by-step consistency", () => {
-      const result = generateUnifiedInstructionSequence(1234, 1279);
+    it('validates arithmetic step-by-step consistency', () => {
+      const result = generateUnifiedInstructionSequence(1234, 1279)
 
-      let runningValue = result.startValue;
+      let runningValue = result.startValue
       result.steps.forEach((step, i) => {
-        const term = step.mathematicalTerm;
-        const delta = term.startsWith("-")
-          ? -parseInt(term.slice(1), 10)
-          : parseInt(term, 10);
-        runningValue += delta;
+        const term = step.mathematicalTerm
+        const delta = term.startsWith('-') ? -parseInt(term.slice(1), 10) : parseInt(term, 10)
+        runningValue += delta
 
-        expect(
-          runningValue,
-          `Step ${i + 1}: After applying "${term}" to running total`,
-        ).toBe(step.expectedValue);
-      });
+        expect(runningValue, `Step ${i + 1}: After applying "${term}" to running total`).toBe(
+          step.expectedValue
+        )
+      })
 
-      expect(runningValue).toBe(result.targetValue);
-    });
+      expect(runningValue).toBe(result.targetValue)
+    })
 
-    it("validates complement shape contracts", () => {
+    it('validates complement shape contracts', () => {
       const complementCases = [
         [4, 7], // (5 - 2)
         [7, 15], // (10 - 2)
         [99, 107], // (100 - 90 - 2)
         [9999, 10007], // (10000 - 9000 - 900 - 90 - 2)
-      ];
+      ]
 
       complementCases.forEach(([start, target]) => {
-        const result = generateUnifiedInstructionSequence(start, target);
-        const decomp = result.fullDecomposition;
+        const result = generateUnifiedInstructionSequence(start, target)
+        const decomp = result.fullDecomposition
 
         // Extract all complement patterns
-        const complementMatches = decomp.match(/\((\d+) - ([\d\s-]+)\)/g) || [];
+        const complementMatches = decomp.match(/\((\d+) - ([\d\s-]+)\)/g) || []
 
         complementMatches.forEach((match) => {
           // Each complement should start with power of 10 or 5
-          const [, positive] = match.match(/\((\d+)/) || [];
-          const num = parseInt(positive, 10);
+          const [, positive] = match.match(/\((\d+)/) || []
+          const num = parseInt(positive, 10)
 
-          const isValidStart =
-            num === 5 || (num >= 10 && /^10+$/.test(num.toString()));
+          const isValidStart = num === 5 || (num >= 10 && /^10+$/.test(num.toString()))
           expect(
             isValidStart,
-            `Complement "${match}" should start with 5 or power of 10, got ${num}`,
-          ).toBe(true);
+            `Complement "${match}" should start with 5 or power of 10, got ${num}`
+          ).toBe(true)
 
           // All subsequent parts should be subtraction
-          expect(
-            match,
-            "Complement should contain only subtraction after first term",
-          ).toMatch(/\(\d+ - [\d\s-]+\)/);
-        });
-      });
-    });
+          expect(match, 'Complement should contain only subtraction after first term').toMatch(
+            /\(\d+ - [\d\s-]+\)/
+          )
+        })
+      })
+    })
 
-    it("validates step progression consistency", () => {
-      const result = generateUnifiedInstructionSequence(123, 456);
+    it('validates step progression consistency', () => {
+      const result = generateUnifiedInstructionSequence(123, 456)
 
       // Each step should be mathematically valid (arithmetic already tested)
       // and the final value should match target
-      expect(result.steps.length).toBeGreaterThan(0);
+      expect(result.steps.length).toBeGreaterThan(0)
 
-      const finalStep = result.steps[result.steps.length - 1];
-      expect(finalStep.expectedValue).toBe(result.targetValue);
+      const finalStep = result.steps[result.steps.length - 1]
+      expect(finalStep.expectedValue).toBe(result.targetValue)
 
       // All steps should be valid
       result.steps.forEach((step, i) => {
-        expect(step.isValid, `Step ${i + 1} should be valid`).toBe(true);
-      });
-    });
-  });
+        expect(step.isValid, `Step ${i + 1} should be valid`).toBe(true)
+      })
+    })
+  })
 
-  describe("Stress Test Coverage (No Snapshots)", () => {
+  describe('Stress Test Coverage (No Snapshots)', () => {
     // Fast invariant-only validation for broad coverage
     const stressCases = [
       // Various differences from different starting points
@@ -338,210 +318,182 @@ describe("Pedagogical Algorithm - Core Validation", () => {
       [189, 197],
       [1234, 1279],
       [9999, 10017],
-    ];
+    ]
 
     stressCases.forEach(([start, target]) => {
       it(`validates invariants for ${start} → ${target}`, () => {
-        const result = generateUnifiedInstructionSequence(start, target);
+        const result = generateUnifiedInstructionSequence(start, target)
 
         // Fast validation - no snapshots
-        expect(result.startValue).toBe(start);
-        expect(result.targetValue).toBe(target);
+        expect(result.startValue).toBe(start)
+        expect(result.targetValue).toBe(target)
 
         if (result.steps.length > 0) {
-          assertArithmeticInvariant(result);
-          assertTermMapping(result);
+          assertArithmeticInvariant(result)
+          assertTermMapping(result)
         }
 
         // All steps should be valid
         result.steps.forEach((step) => {
-          expect(
-            step.isValid,
-            `Step with term "${step.mathematicalTerm}" should be valid`,
-          ).toBe(true);
-        });
-      });
-    });
-  });
+          expect(step.isValid, `Step with term "${step.mathematicalTerm}" should be valid`).toBe(
+            true
+          )
+        })
+      })
+    })
+  })
 
-  describe("Pedagogical Segments - Basic Validation", () => {
+  describe('Pedagogical Segments - Basic Validation', () => {
     const segmentTestCases = [
       [4, 7], // Five-complement
       [7, 15], // Ten-complement
       [0, 3], // Direct entry
       [99, 107], // Cascading
-    ];
+    ]
 
     segmentTestCases.forEach(([start, target]) => {
       it(`generates valid segments for ${start} → ${target}`, () => {
-        const result = generateUnifiedInstructionSequence(start, target);
+        const result = generateUnifiedInstructionSequence(start, target)
 
         // Basic segment validation
-        expect(result.segments).toBeDefined();
-        expect(Array.isArray(result.segments)).toBe(true);
-        expect(result.segments.length).toBeGreaterThan(0);
+        expect(result.segments).toBeDefined()
+        expect(Array.isArray(result.segments)).toBe(true)
+        expect(result.segments.length).toBeGreaterThan(0)
 
         // Each segment should have required properties
         result.segments.forEach((segment, i) => {
-          expect(segment.id, `Segment ${i} should have id`).toBeDefined();
-          expect(segment.goal, `Segment ${i} should have goal`).toBeDefined();
-          expect(segment.plan, `Segment ${i} should have plan`).toBeDefined();
-          expect(
-            segment.expression,
-            `Segment ${i} should have expression`,
-          ).toBeDefined();
-          expect(
-            segment.startValue,
-            `Segment ${i} should have startValue`,
-          ).toBeTypeOf("number");
-          expect(
-            segment.endValue,
-            `Segment ${i} should have endValue`,
-          ).toBeTypeOf("number");
-          expect(
-            segment.stepIndices,
-            `Segment ${i} should have stepIndices`,
-          ).toBeDefined();
+          expect(segment.id, `Segment ${i} should have id`).toBeDefined()
+          expect(segment.goal, `Segment ${i} should have goal`).toBeDefined()
+          expect(segment.plan, `Segment ${i} should have plan`).toBeDefined()
+          expect(segment.expression, `Segment ${i} should have expression`).toBeDefined()
+          expect(segment.startValue, `Segment ${i} should have startValue`).toBeTypeOf('number')
+          expect(segment.endValue, `Segment ${i} should have endValue`).toBeTypeOf('number')
+          expect(segment.stepIndices, `Segment ${i} should have stepIndices`).toBeDefined()
 
           // Segment progression should be mathematically sound
-          expect(segment.startValue).toBeLessThanOrEqual(segment.endValue);
-        });
+          expect(segment.startValue).toBeLessThanOrEqual(segment.endValue)
+        })
 
         // Segments should cover all operations
-        const allStepIndices = result.segments.flatMap((s) => s.stepIndices);
-        expect(
-          allStepIndices.length,
-          "Segments should cover all steps",
-        ).toEqual(result.steps.length);
-      });
-    });
+        const allStepIndices = result.segments.flatMap((s) => s.stepIndices)
+        expect(allStepIndices.length, 'Segments should cover all steps').toEqual(
+          result.steps.length
+        )
+      })
+    })
 
-    it("validates segment decision rules are coherent", () => {
-      const result = generateUnifiedInstructionSequence(4, 7); // Five-complement case
+    it('validates segment decision rules are coherent', () => {
+      const result = generateUnifiedInstructionSequence(4, 7) // Five-complement case
 
-      const segment = result.segments[0];
-      expect(segment.plan.length).toBeGreaterThan(0);
+      const segment = result.segments[0]
+      expect(segment.plan.length).toBeGreaterThan(0)
 
-      const decision = segment.plan[0];
-      expect(decision.rule).toEqual("FiveComplement");
-      expect(decision.conditions).toBeDefined();
-      expect(decision.explanation).toBeDefined();
-      expect(decision.explanation.length).toBeGreaterThan(0);
-    });
+      const decision = segment.plan[0]
+      expect(decision.rule).toEqual('FiveComplement')
+      expect(decision.conditions).toBeDefined()
+      expect(decision.explanation).toBeDefined()
+      expect(decision.explanation.length).toBeGreaterThan(0)
+    })
 
-    it("validates segment term ranges map to decomposition string", () => {
-      const result = generateUnifiedInstructionSequence(99, 107); // Complex cascading case
+    it('validates segment term ranges map to decomposition string', () => {
+      const result = generateUnifiedInstructionSequence(99, 107) // Complex cascading case
 
       result.segments.forEach((segment, i) => {
-        const { termRange } = segment;
+        const { termRange } = segment
         expect(
           termRange.startIndex,
-          `Segment ${i} should have valid start index`,
-        ).toBeGreaterThanOrEqual(0);
+          `Segment ${i} should have valid start index`
+        ).toBeGreaterThanOrEqual(0)
+        expect(termRange.endIndex, `Segment ${i} should have valid end index`).toBeGreaterThan(
+          termRange.startIndex
+        )
         expect(
           termRange.endIndex,
-          `Segment ${i} should have valid end index`,
-        ).toBeGreaterThan(termRange.startIndex);
-        expect(
-          termRange.endIndex,
-          `Segment ${i} end should not exceed decomposition length`,
-        ).toBeLessThanOrEqual(result.fullDecomposition.length);
+          `Segment ${i} end should not exceed decomposition length`
+        ).toBeLessThanOrEqual(result.fullDecomposition.length)
 
         // The substring should not be empty
-        const substring = result.fullDecomposition.slice(
-          termRange.startIndex,
-          termRange.endIndex,
-        );
-        expect(
-          substring.length,
-          `Segment ${i} should map to non-empty substring`,
-        ).toBeGreaterThan(0);
-      });
-    });
-  });
+        const substring = result.fullDecomposition.slice(termRange.startIndex, termRange.endIndex)
+        expect(substring.length, `Segment ${i} should map to non-empty substring`).toBeGreaterThan(
+          0
+        )
+      })
+    })
+  })
 
-  describe("Pedagogical Segments - Production Pedagogy & Range Tests", () => {
-    it("five-complement at ones (3 + 2 = 5)", () => {
-      const seq = generateUnifiedInstructionSequence(3, 5);
-      const seg = seq.segments.find((s) => s.place === 0)!;
-      expect(seg.plan.some((p) => p.rule === "FiveComplement")).toBe(true);
+  describe('Pedagogical Segments - Production Pedagogy & Range Tests', () => {
+    it('five-complement at ones (3 + 2 = 5)', () => {
+      const seq = generateUnifiedInstructionSequence(3, 5)
+      const seg = seq.segments.find((s) => s.place === 0)!
+      expect(seg.plan.some((p) => p.rule === 'FiveComplement')).toBe(true)
 
-      const txt = seq.fullDecomposition.slice(
-        seg.termRange.startIndex,
-        seg.termRange.endIndex,
-      );
-      expect(txt.startsWith("(") && txt.endsWith(")")).toBe(true);
-    });
+      const txt = seq.fullDecomposition.slice(seg.termRange.startIndex, seg.termRange.endIndex)
+      expect(txt.startsWith('(') && txt.endsWith(')')).toBe(true)
+    })
 
-    it("ten-complement without cascade (19 + 1 = 20)", () => {
-      const seq = generateUnifiedInstructionSequence(19, 20);
-      const seg = seq.segments.find((s) => s.place === 0)!;
-      expect(seg.plan.some((p) => p.rule === "TenComplement")).toBe(true);
-      expect(seg.plan.some((p) => p.rule === "Cascade")).toBe(false);
-    });
+    it('ten-complement without cascade (19 + 1 = 20)', () => {
+      const seq = generateUnifiedInstructionSequence(19, 20)
+      const seg = seq.segments.find((s) => s.place === 0)!
+      expect(seg.plan.some((p) => p.rule === 'TenComplement')).toBe(true)
+      expect(seg.plan.some((p) => p.rule === 'Cascade')).toBe(false)
+    })
 
-    it("ten-complement with cascade (199 + 1 = 200)", () => {
-      const seq = generateUnifiedInstructionSequence(199, 200);
-      const seg = seq.segments.find((s) => s.place === 0)!;
-      expect(seg.plan.some((p) => p.rule === "Cascade")).toBe(true);
-    });
+    it('ten-complement with cascade (199 + 1 = 200)', () => {
+      const seq = generateUnifiedInstructionSequence(199, 200)
+      const seg = seq.segments.find((s) => s.place === 0)!
+      expect(seg.plan.some((p) => p.rule === 'Cascade')).toBe(true)
+    })
 
-    it("segment range covers only its group; steps lie inside range", () => {
-      const seq = generateUnifiedInstructionSequence(3478, 3500); // +22
-      const tensSeg = seq.segments.find((s) => s.place === 1)!;
+    it('segment range covers only its group; steps lie inside range', () => {
+      const seq = generateUnifiedInstructionSequence(3478, 3500) // +22
+      const tensSeg = seq.segments.find((s) => s.place === 1)!
       const segText = seq.fullDecomposition.slice(
         tensSeg.termRange.startIndex,
-        tensSeg.termRange.endIndex,
-      );
-      expect(segText.includes("20")).toBe(true);
+        tensSeg.termRange.endIndex
+      )
+      expect(segText.includes('20')).toBe(true)
 
       tensSeg.stepIndices.forEach((i) => {
-        const { startIndex, endIndex } = seq.steps[i].termPosition;
-        expect(startIndex >= tensSeg.termRange.startIndex).toBe(true);
-        expect(endIndex <= tensSeg.termRange.endIndex).toBe(true);
-      });
-    });
+        const { startIndex, endIndex } = seq.steps[i].termPosition
+        expect(startIndex >= tensSeg.termRange.startIndex).toBe(true)
+        expect(endIndex <= tensSeg.termRange.endIndex).toBe(true)
+      })
+    })
 
-    it("invariant: all steps with segmentId are included in their segments", () => {
-      const seq = generateUnifiedInstructionSequence(9999, 10007);
-      const segMap = new Map(seq.segments.map((s) => [s.id, s]));
+    it('invariant: all steps with segmentId are included in their segments', () => {
+      const seq = generateUnifiedInstructionSequence(9999, 10007)
+      const segMap = new Map(seq.segments.map((s) => [s.id, s]))
 
       seq.steps.forEach((step, i) => {
         if (step.segmentId) {
-          const segment = segMap.get(step.segmentId);
-          expect(
-            segment,
-            `Step ${i} references unknown segment ${step.segmentId}`,
-          ).toBeDefined();
+          const segment = segMap.get(step.segmentId)
+          expect(segment, `Step ${i} references unknown segment ${step.segmentId}`).toBeDefined()
           expect(
             segment!.stepIndices.includes(i),
-            `Step ${i} not included in segment ${step.segmentId}`,
-          ).toBe(true);
+            `Step ${i} not included in segment ${step.segmentId}`
+          ).toBe(true)
         }
-      });
-    });
+      })
+    })
 
-    it("invariant: segment ranges are non-empty and well-formed", () => {
-      const seq = generateUnifiedInstructionSequence(123, 456);
+    it('invariant: segment ranges are non-empty and well-formed', () => {
+      const seq = generateUnifiedInstructionSequence(123, 456)
 
       seq.segments.forEach((seg) => {
-        expect(
-          seg.stepIndices.length,
-          `Segment ${seg.id} should have steps`,
-        ).toBeGreaterThan(0);
+        expect(seg.stepIndices.length, `Segment ${seg.id} should have steps`).toBeGreaterThan(0)
         expect(
           seg.termRange.endIndex,
-          `Segment ${seg.id} should have non-empty range`,
-        ).toBeGreaterThan(seg.termRange.startIndex);
+          `Segment ${seg.id} should have non-empty range`
+        ).toBeGreaterThan(seg.termRange.startIndex)
         expect(
           seg.termRange.startIndex,
-          `Segment ${seg.id} range should be valid`,
-        ).toBeGreaterThanOrEqual(0);
+          `Segment ${seg.id} range should be valid`
+        ).toBeGreaterThanOrEqual(0)
         expect(
           seg.termRange.endIndex,
-          `Segment ${seg.id} range should not exceed decomposition`,
-        ).toBeLessThanOrEqual(seq.fullDecomposition.length);
-      });
-    });
-  });
-});
+          `Segment ${seg.id} range should not exceed decomposition`
+        ).toBeLessThanOrEqual(seq.fullDecomposition.length)
+      })
+    })
+  })
+})
diff --git a/apps/web/src/utils/__tests__/pedagogicalSnapshot.test.ts b/apps/web/src/utils/__tests__/pedagogicalSnapshot.test.ts
index b45d3510..9f3814a9 100644
--- a/apps/web/src/utils/__tests__/pedagogicalSnapshot.test.ts
+++ b/apps/web/src/utils/__tests__/pedagogicalSnapshot.test.ts
@@ -1,5 +1,5 @@
-import { describe, expect, it } from "vitest";
-import { generateUnifiedInstructionSequence } from "../unifiedStepGenerator";
+import { describe, expect, it } from 'vitest'
+import { generateUnifiedInstructionSequence } from '../unifiedStepGenerator'
 
 /**
  * LEGACY: Comprehensive snapshot tests (292 tests, ~40k lines of snapshots)
@@ -10,465 +10,462 @@ import { generateUnifiedInstructionSequence } from "../unifiedStepGenerator";
  * This suite is now gated behind LEGACY_SNAPSHOTS=1 environment variable.
  * Run with: LEGACY_SNAPSHOTS=1 pnpm test pedagogicalSnapshot.test.ts
  */
-const runLegacySnapshots = process.env.LEGACY_SNAPSHOTS === "1";
+const runLegacySnapshots = process.env.LEGACY_SNAPSHOTS === '1'
 
-describe.skipIf(!runLegacySnapshots)(
-  "Pedagogical Algorithm Snapshot Tests (Legacy)",
-  () => {
-    describe("Direct Entry Cases (No Complements)", () => {
-      const directCases = [
-        // Single digits
-        [0, 1],
-        [0, 2],
-        [0, 3],
-        [0, 4],
-        [0, 5],
-        [1, 2],
-        [1, 3],
-        [1, 4],
-        [2, 3],
-        [2, 4],
-        [3, 4],
-        [5, 6],
-        [5, 7],
-        [5, 8],
-        [5, 9],
-        // Tens place
-        [0, 10],
-        [0, 20],
-        [0, 30],
-        [0, 40],
-        [0, 50],
-        [10, 20],
-        [20, 30],
-        [30, 40],
-        [40, 50],
-        // Hundreds place
-        [0, 100],
-        [0, 200],
-        [0, 300],
-        [100, 200],
-        // Multi-place without complements
-        [11, 22],
-        [22, 33],
-        [123, 234],
-      ];
+describe.skipIf(!runLegacySnapshots)('Pedagogical Algorithm Snapshot Tests (Legacy)', () => {
+  describe('Direct Entry Cases (No Complements)', () => {
+    const directCases = [
+      // Single digits
+      [0, 1],
+      [0, 2],
+      [0, 3],
+      [0, 4],
+      [0, 5],
+      [1, 2],
+      [1, 3],
+      [1, 4],
+      [2, 3],
+      [2, 4],
+      [3, 4],
+      [5, 6],
+      [5, 7],
+      [5, 8],
+      [5, 9],
+      // Tens place
+      [0, 10],
+      [0, 20],
+      [0, 30],
+      [0, 40],
+      [0, 50],
+      [10, 20],
+      [20, 30],
+      [30, 40],
+      [40, 50],
+      // Hundreds place
+      [0, 100],
+      [0, 200],
+      [0, 300],
+      [100, 200],
+      // Multi-place without complements
+      [11, 22],
+      [22, 33],
+      [123, 234],
+    ]
 
-      directCases.forEach(([start, target]) => {
-        it(`should handle direct entry: ${start} → ${target}`, () => {
-          const result = generateUnifiedInstructionSequence(start, target);
-          expect(result).toMatchSnapshot();
-        });
-      });
-    });
+    directCases.forEach(([start, target]) => {
+      it(`should handle direct entry: ${start} → ${target}`, () => {
+        const result = generateUnifiedInstructionSequence(start, target)
+        expect(result).toMatchSnapshot()
+      })
+    })
+  })
 
-    describe("Five-Complement Cases", () => {
-      const fiveComplementCases = [
-        // Basic five-complements (ones place)
-        [4, 7],
-        [3, 6],
-        [2, 5],
-        [1, 4],
-        [4, 8],
-        [3, 7],
-        [2, 6],
-        [1, 5],
-        [4, 9],
-        [3, 8],
-        [2, 7],
-        [1, 6],
-        // Multi-place with five-complements
-        [14, 17],
-        [23, 26],
-        [31, 34],
-        [42, 45],
-        [54, 57],
-        [134, 137],
-        [223, 226],
-        [314, 317],
-        [425, 428],
-        // Complex multi-place five-complements
-        [1234, 1237],
-        [2341, 2344],
-        [3452, 3455],
-        // Five-complements in different places
-        [40, 70],
-        [400, 700],
-        [1400, 1700],
-        [24000, 27000],
-      ];
+  describe('Five-Complement Cases', () => {
+    const fiveComplementCases = [
+      // Basic five-complements (ones place)
+      [4, 7],
+      [3, 6],
+      [2, 5],
+      [1, 4],
+      [4, 8],
+      [3, 7],
+      [2, 6],
+      [1, 5],
+      [4, 9],
+      [3, 8],
+      [2, 7],
+      [1, 6],
+      // Multi-place with five-complements
+      [14, 17],
+      [23, 26],
+      [31, 34],
+      [42, 45],
+      [54, 57],
+      [134, 137],
+      [223, 226],
+      [314, 317],
+      [425, 428],
+      // Complex multi-place five-complements
+      [1234, 1237],
+      [2341, 2344],
+      [3452, 3455],
+      // Five-complements in different places
+      [40, 70],
+      [400, 700],
+      [1400, 1700],
+      [24000, 27000],
+    ]
 
-      fiveComplementCases.forEach(([start, target]) => {
-        it(`should handle five-complement: ${start} → ${target}`, () => {
-          const result = generateUnifiedInstructionSequence(start, target);
-          expect(result).toMatchSnapshot();
-        });
-      });
-    });
+    fiveComplementCases.forEach(([start, target]) => {
+      it(`should handle five-complement: ${start} → ${target}`, () => {
+        const result = generateUnifiedInstructionSequence(start, target)
+        expect(result).toMatchSnapshot()
+      })
+    })
+  })
 
-    describe("Ten-Complement Cases", () => {
-      const tenComplementCases = [
-        // Basic ten-complements (ones place)
-        [4, 11],
-        [6, 13],
-        [7, 14],
-        [8, 15],
-        [9, 16],
-        [3, 12],
-        [2, 11],
-        [1, 10],
-        [8, 17],
-        [7, 16],
-        // Ten-complements crossing places
-        [19, 26],
-        [28, 35],
-        [37, 44],
-        [46, 53],
-        [55, 62],
-        [64, 71],
-        [73, 80],
-        [82, 89],
-        [91, 98],
-        // Multi-place ten-complements
-        [94, 101],
-        [193, 200],
-        [294, 301],
-        [395, 402],
-        [496, 503],
-        [597, 604],
-        [698, 705],
-        [799, 806],
-        // Complex ten-complements
-        [1294, 1301],
-        [2395, 2402],
-        [3496, 3503],
-        [4597, 4604],
-      ];
+  describe('Ten-Complement Cases', () => {
+    const tenComplementCases = [
+      // Basic ten-complements (ones place)
+      [4, 11],
+      [6, 13],
+      [7, 14],
+      [8, 15],
+      [9, 16],
+      [3, 12],
+      [2, 11],
+      [1, 10],
+      [8, 17],
+      [7, 16],
+      // Ten-complements crossing places
+      [19, 26],
+      [28, 35],
+      [37, 44],
+      [46, 53],
+      [55, 62],
+      [64, 71],
+      [73, 80],
+      [82, 89],
+      [91, 98],
+      // Multi-place ten-complements
+      [94, 101],
+      [193, 200],
+      [294, 301],
+      [395, 402],
+      [496, 503],
+      [597, 604],
+      [698, 705],
+      [799, 806],
+      // Complex ten-complements
+      [1294, 1301],
+      [2395, 2402],
+      [3496, 3503],
+      [4597, 4604],
+    ]
 
-      tenComplementCases.forEach(([start, target]) => {
-        it(`should handle ten-complement: ${start} → ${target}`, () => {
-          const result = generateUnifiedInstructionSequence(start, target);
-          expect(result).toMatchSnapshot();
-        });
-      });
-    });
+    tenComplementCases.forEach(([start, target]) => {
+      it(`should handle ten-complement: ${start} → ${target}`, () => {
+        const result = generateUnifiedInstructionSequence(start, target)
+        expect(result).toMatchSnapshot()
+      })
+    })
+  })
 
-    describe("Cascading Complement Cases", () => {
-      const cascadingCases = [
-        // Single 9 cascades
-        [99, 107],
-        [199, 207],
-        [299, 307],
-        [399, 407],
-        [499, 507],
-        [599, 607],
-        [699, 707],
-        [799, 807],
-        // Double 9 cascades
-        [999, 1007],
-        [1999, 2007],
-        [2999, 3007],
-        // Triple 9 cascades
-        [9999, 10007],
-        [19999, 20007],
-        // Complex cascading with different digits
-        [89, 97],
-        [189, 197],
-        [289, 297],
-        [389, 397],
-        [98, 105],
-        [198, 205],
-        [298, 305],
-        [398, 405],
-        [979, 986],
-        [1979, 1986],
-        [2979, 2986],
-        [989, 996],
-        [1989, 1996],
-        [2989, 2996],
-        // Mixed place cascading
-        [1899, 1907],
-        [2899, 2907],
-        [12899, 12907],
-        [9899, 9907],
-        [19899, 19907],
-      ];
+  describe('Cascading Complement Cases', () => {
+    const cascadingCases = [
+      // Single 9 cascades
+      [99, 107],
+      [199, 207],
+      [299, 307],
+      [399, 407],
+      [499, 507],
+      [599, 607],
+      [699, 707],
+      [799, 807],
+      // Double 9 cascades
+      [999, 1007],
+      [1999, 2007],
+      [2999, 3007],
+      // Triple 9 cascades
+      [9999, 10007],
+      [19999, 20007],
+      // Complex cascading with different digits
+      [89, 97],
+      [189, 197],
+      [289, 297],
+      [389, 397],
+      [98, 105],
+      [198, 205],
+      [298, 305],
+      [398, 405],
+      [979, 986],
+      [1979, 1986],
+      [2979, 2986],
+      [989, 996],
+      [1989, 1996],
+      [2989, 2996],
+      // Mixed place cascading
+      [1899, 1907],
+      [2899, 2907],
+      [12899, 12907],
+      [9899, 9907],
+      [19899, 19907],
+    ]
 
-      cascadingCases.forEach(([start, target]) => {
-        it(`should handle cascading complement: ${start} → ${target}`, () => {
-          const result = generateUnifiedInstructionSequence(start, target);
-          expect(result).toMatchSnapshot();
-        });
-      });
-    });
+    cascadingCases.forEach(([start, target]) => {
+      it(`should handle cascading complement: ${start} → ${target}`, () => {
+        const result = generateUnifiedInstructionSequence(start, target)
+        expect(result).toMatchSnapshot()
+      })
+    })
+  })
 
-    describe("Mixed Operation Cases", () => {
-      const mixedCases = [
-        // Five + ten complement combinations
-        [43, 51],
-        [134, 142],
-        [243, 251],
-        [352, 360],
-        // Multi-place with various complements
-        [1234, 1279],
-        [2345, 2383],
-        [3456, 3497],
-        [4567, 4605],
-        [5678, 5719],
-        [6789, 6827],
-        // Complex mixed operations
-        [12345, 12389],
-        [23456, 23497],
-        [34567, 34605],
-        [45678, 45719],
-        [56789, 56827],
-        [67890, 67935],
-        // Large number operations
-        [123456, 123497],
-        [234567, 234605],
-        [345678, 345719],
-        [456789, 456827],
-        [567890, 567935],
-        [678901, 678943],
-      ];
+  describe('Mixed Operation Cases', () => {
+    const mixedCases = [
+      // Five + ten complement combinations
+      [43, 51],
+      [134, 142],
+      [243, 251],
+      [352, 360],
+      // Multi-place with various complements
+      [1234, 1279],
+      [2345, 2383],
+      [3456, 3497],
+      [4567, 4605],
+      [5678, 5719],
+      [6789, 6827],
+      // Complex mixed operations
+      [12345, 12389],
+      [23456, 23497],
+      [34567, 34605],
+      [45678, 45719],
+      [56789, 56827],
+      [67890, 67935],
+      // Large number operations
+      [123456, 123497],
+      [234567, 234605],
+      [345678, 345719],
+      [456789, 456827],
+      [567890, 567935],
+      [678901, 678943],
+    ]
 
-      mixedCases.forEach(([start, target]) => {
-        it(`should handle mixed operations: ${start} → ${target}`, () => {
-          const result = generateUnifiedInstructionSequence(start, target);
-          expect(result).toMatchSnapshot();
-        });
-      });
-    });
+    mixedCases.forEach(([start, target]) => {
+      it(`should handle mixed operations: ${start} → ${target}`, () => {
+        const result = generateUnifiedInstructionSequence(start, target)
+        expect(result).toMatchSnapshot()
+      })
+    })
+  })
 
-    describe("Edge Cases and Boundary Conditions", () => {
-      const edgeCases = [
-        // Zero operations
-        [0, 0],
-        [5, 5],
-        [10, 10],
-        [123, 123],
-        // Single unit additions
-        [0, 1],
-        [1, 2],
-        [9, 10],
-        [99, 100],
-        [999, 1000],
-        // Maximum single-place values
-        [0, 9],
-        [10, 19],
-        [90, 99],
-        [900, 909],
-        // Place value boundaries
-        [9, 10],
-        [99, 100],
-        [999, 1000],
-        [9999, 10000],
-        [19, 20],
-        [199, 200],
-        [1999, 2000],
-        [19999, 20000],
-        // All 9s patterns
-        [9, 18],
-        [99, 108],
-        [999, 1008],
-        [9999, 10008],
-        // Alternating patterns
-        [1357, 1369],
-        [2468, 2479],
-        [13579, 13591],
-        // Repeated digit patterns
-        [1111, 1123],
-        [2222, 2234],
-        [3333, 3345],
-        [11111, 11123],
-        [22222, 22234],
-      ];
+  describe('Edge Cases and Boundary Conditions', () => {
+    const edgeCases = [
+      // Zero operations
+      [0, 0],
+      [5, 5],
+      [10, 10],
+      [123, 123],
+      // Single unit additions
+      [0, 1],
+      [1, 2],
+      [9, 10],
+      [99, 100],
+      [999, 1000],
+      // Maximum single-place values
+      [0, 9],
+      [10, 19],
+      [90, 99],
+      [900, 909],
+      // Place value boundaries
+      [9, 10],
+      [99, 100],
+      [999, 1000],
+      [9999, 10000],
+      [19, 20],
+      [199, 200],
+      [1999, 2000],
+      [19999, 20000],
+      // All 9s patterns
+      [9, 18],
+      [99, 108],
+      [999, 1008],
+      [9999, 10008],
+      // Alternating patterns
+      [1357, 1369],
+      [2468, 2479],
+      [13579, 13591],
+      // Repeated digit patterns
+      [1111, 1123],
+      [2222, 2234],
+      [3333, 3345],
+      [11111, 11123],
+      [22222, 22234],
+    ]
 
-      edgeCases.forEach(([start, target]) => {
-        it(`should handle edge case: ${start} → ${target}`, () => {
-          const result = generateUnifiedInstructionSequence(start, target);
-          expect(result).toMatchSnapshot();
-        });
-      });
-    });
+    edgeCases.forEach(([start, target]) => {
+      it(`should handle edge case: ${start} → ${target}`, () => {
+        const result = generateUnifiedInstructionSequence(start, target)
+        expect(result).toMatchSnapshot()
+      })
+    })
+  })
 
-    describe("Large Number Operations", () => {
-      const largeNumberCases = [
-        // Five-digit operations
-        [12345, 12378],
-        [23456, 23489],
-        [34567, 34599],
-        [45678, 45711],
-        [56789, 56822],
-        [67890, 67923],
-        // Six-digit operations
-        [123456, 123489],
-        [234567, 234599],
-        [345678, 345711],
-        [456789, 456822],
-        [567890, 567923],
-        [678901, 678934],
-        // Seven-digit operations (millions)
-        [1234567, 1234599],
-        [2345678, 2345711],
-        [3456789, 3456822],
-      ];
+  describe('Large Number Operations', () => {
+    const largeNumberCases = [
+      // Five-digit operations
+      [12345, 12378],
+      [23456, 23489],
+      [34567, 34599],
+      [45678, 45711],
+      [56789, 56822],
+      [67890, 67923],
+      // Six-digit operations
+      [123456, 123489],
+      [234567, 234599],
+      [345678, 345711],
+      [456789, 456822],
+      [567890, 567923],
+      [678901, 678934],
+      // Seven-digit operations (millions)
+      [1234567, 1234599],
+      [2345678, 2345711],
+      [3456789, 3456822],
+    ]
 
-      largeNumberCases.forEach(([start, target]) => {
-        it(`should handle large numbers: ${start} → ${target}`, () => {
-          const result = generateUnifiedInstructionSequence(start, target);
-          expect(result).toMatchSnapshot();
-        });
-      });
-    });
+    largeNumberCases.forEach(([start, target]) => {
+      it(`should handle large numbers: ${start} → ${target}`, () => {
+        const result = generateUnifiedInstructionSequence(start, target)
+        expect(result).toMatchSnapshot()
+      })
+    })
+  })
 
-    describe("Systematic Coverage by Difference", () => {
-      const systematicCases = [
-        // Difference of 1-9 (various starting points)
-        [0, 1],
-        [5, 6],
-        [9, 10],
-        [15, 16],
-        [99, 100],
-        [0, 2],
-        [3, 5],
-        [8, 10],
-        [14, 16],
-        [98, 100],
-        [0, 3],
-        [2, 5],
-        [7, 10],
-        [13, 16],
-        [97, 100],
-        [0, 4],
-        [1, 5],
-        [6, 10],
-        [12, 16],
-        [96, 100],
-        [0, 5],
-        [0, 6],
-        [0, 7],
-        [0, 8],
-        [0, 9],
+  describe('Systematic Coverage by Difference', () => {
+    const systematicCases = [
+      // Difference of 1-9 (various starting points)
+      [0, 1],
+      [5, 6],
+      [9, 10],
+      [15, 16],
+      [99, 100],
+      [0, 2],
+      [3, 5],
+      [8, 10],
+      [14, 16],
+      [98, 100],
+      [0, 3],
+      [2, 5],
+      [7, 10],
+      [13, 16],
+      [97, 100],
+      [0, 4],
+      [1, 5],
+      [6, 10],
+      [12, 16],
+      [96, 100],
+      [0, 5],
+      [0, 6],
+      [0, 7],
+      [0, 8],
+      [0, 9],
 
-        // Difference of 10-19
-        [0, 10],
-        [5, 15],
-        [90, 100],
-        [195, 205],
-        [0, 11],
-        [4, 15],
-        [89, 100],
-        [194, 205],
-        [0, 12],
-        [3, 15],
-        [88, 100],
-        [193, 205],
-        [0, 13],
-        [2, 15],
-        [87, 100],
-        [192, 205],
-        [0, 14],
-        [1, 15],
-        [86, 100],
-        [191, 205],
-        [0, 15],
-        [0, 16],
-        [0, 17],
-        [0, 18],
-        [0, 19],
+      // Difference of 10-19
+      [0, 10],
+      [5, 15],
+      [90, 100],
+      [195, 205],
+      [0, 11],
+      [4, 15],
+      [89, 100],
+      [194, 205],
+      [0, 12],
+      [3, 15],
+      [88, 100],
+      [193, 205],
+      [0, 13],
+      [2, 15],
+      [87, 100],
+      [192, 205],
+      [0, 14],
+      [1, 15],
+      [86, 100],
+      [191, 205],
+      [0, 15],
+      [0, 16],
+      [0, 17],
+      [0, 18],
+      [0, 19],
 
-        // Difference of 20-29
-        [0, 20],
-        [5, 25],
-        [80, 100],
-        [185, 205],
-        [0, 25],
-        [0, 27],
-        [0, 29],
-        [75, 100],
-        [180, 205],
+      // Difference of 20-29
+      [0, 20],
+      [5, 25],
+      [80, 100],
+      [185, 205],
+      [0, 25],
+      [0, 27],
+      [0, 29],
+      [75, 100],
+      [180, 205],
 
-        // Difference of larger amounts
-        [0, 50],
-        [50, 100],
-        [0, 100],
-        [900, 1000],
-        [0, 123],
-        [100, 223],
-        [877, 1000],
-        [1877, 2000],
-      ];
+      // Difference of larger amounts
+      [0, 50],
+      [50, 100],
+      [0, 100],
+      [900, 1000],
+      [0, 123],
+      [100, 223],
+      [877, 1000],
+      [1877, 2000],
+    ]
 
-      systematicCases.forEach(([start, target]) => {
-        it(`should handle systematic case: ${start} → ${target} (diff: ${target - start})`, () => {
-          const result = generateUnifiedInstructionSequence(start, target);
-          expect(result).toMatchSnapshot();
-        });
-      });
-    });
+    systematicCases.forEach(([start, target]) => {
+      it(`should handle systematic case: ${start} → ${target} (diff: ${target - start})`, () => {
+        const result = generateUnifiedInstructionSequence(start, target)
+        expect(result).toMatchSnapshot()
+      })
+    })
+  })
 
-    describe("Stress Test Cases", () => {
-      const stressCases = [
-        // Maximum complexity cascades
-        [99999, 100008],
-        [199999, 200008],
-        [999999, 1000008],
-        // Multiple cascade triggers
-        [9999, 10017],
-        [99999, 100026],
-        [999999, 1000035],
-        // Complex multi-place with all complement types
-        [49999, 50034],
-        [149999, 150034],
-        [249999, 250034],
-        // Alternating complement patterns
-        [4949, 4983],
-        [14949, 14983],
-        [24949, 24983],
-      ];
+  describe('Stress Test Cases', () => {
+    const stressCases = [
+      // Maximum complexity cascades
+      [99999, 100008],
+      [199999, 200008],
+      [999999, 1000008],
+      // Multiple cascade triggers
+      [9999, 10017],
+      [99999, 100026],
+      [999999, 1000035],
+      // Complex multi-place with all complement types
+      [49999, 50034],
+      [149999, 150034],
+      [249999, 250034],
+      // Alternating complement patterns
+      [4949, 4983],
+      [14949, 14983],
+      [24949, 24983],
+    ]
 
-      stressCases.forEach(([start, target]) => {
-        it(`should handle stress test: ${start} → ${target}`, () => {
-          const result = generateUnifiedInstructionSequence(start, target);
-          expect(result).toMatchSnapshot();
-        });
-      });
-    });
+    stressCases.forEach(([start, target]) => {
+      it(`should handle stress test: ${start} → ${target}`, () => {
+        const result = generateUnifiedInstructionSequence(start, target)
+        expect(result).toMatchSnapshot()
+      })
+    })
+  })
 
-    describe("Regression Prevention Cases", () => {
-      // These are the exact cases from the original pedagogical tests
-      // to ensure we never regress from the current perfect state
-      const regressionCases = [
-        [0, 1],
-        [1, 3],
-        [0, 4],
-        [0, 5],
-        [5, 7],
-        [0, 10],
-        [4, 7],
-        [3, 5],
-        [2, 3],
-        [0, 6],
-        [1, 5],
-        [4, 11],
-        [6, 15],
-        [7, 15],
-        [5, 9],
-        [9, 18],
-        [12, 34],
-        [23, 47],
-        [34, 78],
-        [89, 97],
-        [99, 107],
-      ];
+  describe('Regression Prevention Cases', () => {
+    // These are the exact cases from the original pedagogical tests
+    // to ensure we never regress from the current perfect state
+    const regressionCases = [
+      [0, 1],
+      [1, 3],
+      [0, 4],
+      [0, 5],
+      [5, 7],
+      [0, 10],
+      [4, 7],
+      [3, 5],
+      [2, 3],
+      [0, 6],
+      [1, 5],
+      [4, 11],
+      [6, 15],
+      [7, 15],
+      [5, 9],
+      [9, 18],
+      [12, 34],
+      [23, 47],
+      [34, 78],
+      [89, 97],
+      [99, 107],
+    ]
 
-      regressionCases.forEach(([start, target]) => {
-        it(`should maintain regression case: ${start} → ${target}`, () => {
-          const result = generateUnifiedInstructionSequence(start, target);
-          expect(result).toMatchSnapshot();
-        });
-      });
-    });
-  },
-);
+    regressionCases.forEach(([start, target]) => {
+      it(`should maintain regression case: ${start} → ${target}`, () => {
+        const result = generateUnifiedInstructionSequence(start, target)
+        expect(result).toMatchSnapshot()
+      })
+    })
+  })
+})
diff --git a/apps/web/src/utils/__tests__/playerNames.test.ts b/apps/web/src/utils/__tests__/playerNames.test.ts
index f3ac923a..17300d59 100644
--- a/apps/web/src/utils/__tests__/playerNames.test.ts
+++ b/apps/web/src/utils/__tests__/playerNames.test.ts
@@ -1,94 +1,92 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from 'vitest'
 import {
   generatePlayerName,
   generateUniquePlayerName,
   generateUniquePlayerNames,
-} from "../playerNames";
+} from '../playerNames'
 
-describe("playerNames", () => {
-  describe("generatePlayerName", () => {
-    it("should generate a player name with adjective and noun", () => {
-      const name = generatePlayerName();
-      expect(name).toMatch(/^[A-Z][a-z]+ [A-Z][a-z]+$/); // e.g., "Swift Ninja"
-      expect(name.split(" ")).toHaveLength(2);
-    });
+describe('playerNames', () => {
+  describe('generatePlayerName', () => {
+    it('should generate a player name with adjective and noun', () => {
+      const name = generatePlayerName()
+      expect(name).toMatch(/^[A-Z][a-z]+ [A-Z][a-z]+$/) // e.g., "Swift Ninja"
+      expect(name.split(' ')).toHaveLength(2)
+    })
 
-    it("should generate different names on multiple calls", () => {
-      const names = new Set();
+    it('should generate different names on multiple calls', () => {
+      const names = new Set()
       // Generate 50 names and expect at least some variety
       for (let i = 0; i < 50; i++) {
-        names.add(generatePlayerName());
+        names.add(generatePlayerName())
       }
       // With 50 adjectives and 50 nouns, we should get many unique combinations
-      expect(names.size).toBeGreaterThan(30);
-    });
-  });
+      expect(names.size).toBeGreaterThan(30)
+    })
+  })
 
-  describe("generateUniquePlayerName", () => {
-    it("should generate a unique name not in existing names", () => {
-      const existingNames = ["Swift Ninja", "Cosmic Wizard", "Radiant Dragon"];
-      const newName = generateUniquePlayerName(existingNames);
+  describe('generateUniquePlayerName', () => {
+    it('should generate a unique name not in existing names', () => {
+      const existingNames = ['Swift Ninja', 'Cosmic Wizard', 'Radiant Dragon']
+      const newName = generateUniquePlayerName(existingNames)
 
-      expect(existingNames).not.toContain(newName);
-    });
+      expect(existingNames).not.toContain(newName)
+    })
 
-    it("should be case-insensitive when checking uniqueness", () => {
-      const existingNames = ["swift ninja", "COSMIC WIZARD"];
-      const newName = generateUniquePlayerName(existingNames);
+    it('should be case-insensitive when checking uniqueness', () => {
+      const existingNames = ['swift ninja', 'COSMIC WIZARD']
+      const newName = generateUniquePlayerName(existingNames)
 
-      expect(existingNames.map((n) => n.toLowerCase())).not.toContain(
-        newName.toLowerCase(),
-      );
-    });
+      expect(existingNames.map((n) => n.toLowerCase())).not.toContain(newName.toLowerCase())
+    })
 
-    it("should handle empty existing names array", () => {
-      const name = generateUniquePlayerName([]);
-      expect(name).toMatch(/^[A-Z][a-z]+ [A-Z][a-z]+$/);
-    });
+    it('should handle empty existing names array', () => {
+      const name = generateUniquePlayerName([])
+      expect(name).toMatch(/^[A-Z][a-z]+ [A-Z][a-z]+$/)
+    })
 
-    it("should append number if all combinations are exhausted", () => {
+    it('should append number if all combinations are exhausted', () => {
       // Create a mock with limited attempts
-      const existingNames = ["Swift Ninja"];
-      const name = generateUniquePlayerName(existingNames, undefined, 1);
+      const existingNames = ['Swift Ninja']
+      const name = generateUniquePlayerName(existingNames, undefined, 1)
 
       // Should either be unique or have a number appended
-      expect(name).toBeTruthy();
-      expect(name).not.toBe("Swift Ninja");
-    });
-  });
+      expect(name).toBeTruthy()
+      expect(name).not.toBe('Swift Ninja')
+    })
+  })
 
-  describe("generateUniquePlayerNames", () => {
-    it("should generate the requested number of unique names", () => {
-      const names = generateUniquePlayerNames(4);
-      expect(names).toHaveLength(4);
+  describe('generateUniquePlayerNames', () => {
+    it('should generate the requested number of unique names', () => {
+      const names = generateUniquePlayerNames(4)
+      expect(names).toHaveLength(4)
 
       // All names should be unique
-      const uniqueNames = new Set(names);
-      expect(uniqueNames.size).toBe(4);
-    });
+      const uniqueNames = new Set(names)
+      expect(uniqueNames.size).toBe(4)
+    })
 
-    it("should generate unique names across all entries", () => {
-      const names = generateUniquePlayerNames(10);
-      expect(names).toHaveLength(10);
+    it('should generate unique names across all entries', () => {
+      const names = generateUniquePlayerNames(10)
+      expect(names).toHaveLength(10)
 
       // Check uniqueness (case-insensitive)
-      const uniqueNames = new Set(names.map((n) => n.toLowerCase()));
-      expect(uniqueNames.size).toBe(10);
-    });
+      const uniqueNames = new Set(names.map((n) => n.toLowerCase()))
+      expect(uniqueNames.size).toBe(10)
+    })
 
-    it("should handle generating zero names", () => {
-      const names = generateUniquePlayerNames(0);
-      expect(names).toHaveLength(0);
-      expect(names).toEqual([]);
-    });
+    it('should handle generating zero names', () => {
+      const names = generateUniquePlayerNames(0)
+      expect(names).toHaveLength(0)
+      expect(names).toEqual([])
+    })
 
-    it("should generate names with expected format", () => {
-      const names = generateUniquePlayerNames(5);
+    it('should generate names with expected format', () => {
+      const names = generateUniquePlayerNames(5)
 
       for (const name of names) {
-        expect(name).toMatch(/^[A-Z][a-z]+ [A-Z][a-z]+( \d+)?$/);
-        expect(name.split(" ").length).toBeGreaterThanOrEqual(2);
+        expect(name).toMatch(/^[A-Z][a-z]+ [A-Z][a-z]+( \d+)?$/)
+        expect(name.split(' ').length).toBeGreaterThanOrEqual(2)
       }
-    });
-  });
-});
+    })
+  })
+})
diff --git a/apps/web/src/utils/__tests__/provenance.integration.test.ts b/apps/web/src/utils/__tests__/provenance.integration.test.ts
index e36b6103..8f2ba19d 100644
--- a/apps/web/src/utils/__tests__/provenance.integration.test.ts
+++ b/apps/web/src/utils/__tests__/provenance.integration.test.ts
@@ -1,123 +1,113 @@
-import { describe, expect, it } from "vitest";
-import { generateUnifiedInstructionSequence } from "../unifiedStepGenerator";
+import { describe, expect, it } from 'vitest'
+import { generateUnifiedInstructionSequence } from '../unifiedStepGenerator'
 
-describe("Provenance Integration Test - 3475 + 25 = 3500", () => {
-  it("should generate complete provenance data for the tooltip system", () => {
+describe('Provenance Integration Test - 3475 + 25 = 3500', () => {
+  it('should generate complete provenance data for the tooltip system', () => {
     // Generate the instruction sequence for the exact example from the user
-    const result = generateUnifiedInstructionSequence(3475, 3500);
+    const result = generateUnifiedInstructionSequence(3475, 3500)
 
     // Verify we have steps and segments
-    expect(result.steps.length).toBeGreaterThan(0);
-    expect(result.segments.length).toBeGreaterThan(0);
+    expect(result.steps.length).toBeGreaterThan(0)
+    expect(result.segments.length).toBeGreaterThan(0)
 
     // Log the actual generated data
-    console.log("\n=== Complete Integration Test Results ===");
-    console.log("Full decomposition:", result.fullDecomposition);
-    console.log("Total steps:", result.steps.length);
-    console.log("Total segments:", result.segments.length);
+    console.log('\n=== Complete Integration Test Results ===')
+    console.log('Full decomposition:', result.fullDecomposition)
+    console.log('Total steps:', result.steps.length)
+    console.log('Total segments:', result.segments.length)
 
     // Find the "20" step (tens digit)
-    const twentyStep = result.steps.find(
-      (step) => step.mathematicalTerm === "20",
-    );
-    expect(twentyStep).toBeDefined();
-    expect(twentyStep?.provenance).toBeDefined();
+    const twentyStep = result.steps.find((step) => step.mathematicalTerm === '20')
+    expect(twentyStep).toBeDefined()
+    expect(twentyStep?.provenance).toBeDefined()
 
     if (twentyStep?.provenance) {
-      console.log('\n=== "20" Step Provenance ===');
-      console.log("Mathematical term:", twentyStep.mathematicalTerm);
-      console.log("Provenance data:", twentyStep.provenance);
+      console.log('\n=== "20" Step Provenance ===')
+      console.log('Mathematical term:', twentyStep.mathematicalTerm)
+      console.log('Provenance data:', twentyStep.provenance)
 
       // Verify the provenance data matches our expectations
-      expect(twentyStep.provenance.rhs).toBe(25);
-      expect(twentyStep.provenance.rhsDigit).toBe(2);
-      expect(twentyStep.provenance.rhsPlace).toBe(1);
-      expect(twentyStep.provenance.rhsPlaceName).toBe("tens");
-      expect(twentyStep.provenance.rhsValue).toBe(20);
-      expect(twentyStep.provenance.rhsDigitIndex).toBe(0); // '2' is first char in '25'
+      expect(twentyStep.provenance.rhs).toBe(25)
+      expect(twentyStep.provenance.rhsDigit).toBe(2)
+      expect(twentyStep.provenance.rhsPlace).toBe(1)
+      expect(twentyStep.provenance.rhsPlaceName).toBe('tens')
+      expect(twentyStep.provenance.rhsValue).toBe(20)
+      expect(twentyStep.provenance.rhsDigitIndex).toBe(0) // '2' is first char in '25'
     }
 
     // Find the corresponding segment
-    const tensSegment = result.segments.find(
-      (seg) => seg.place === 1 && seg.digit === 2,
-    );
-    expect(tensSegment).toBeDefined();
+    const tensSegment = result.segments.find((seg) => seg.place === 1 && seg.digit === 2)
+    expect(tensSegment).toBeDefined()
 
     if (tensSegment) {
-      console.log("\n=== Tens Segment ===");
-      console.log("Segment rule:", tensSegment.plan[0]?.rule);
-      console.log("Step indices:", tensSegment.stepIndices);
-      console.log("Readable title:", tensSegment.readable?.title);
+      console.log('\n=== Tens Segment ===')
+      console.log('Segment rule:', tensSegment.plan[0]?.rule)
+      console.log('Step indices:', tensSegment.stepIndices)
+      console.log('Readable title:', tensSegment.readable?.title)
 
       // Verify the segment contains our step
-      expect(tensSegment.stepIndices).toContain(twentyStep!.stepIndex);
-      expect(tensSegment.plan[0]?.rule).toBe("Direct");
+      expect(tensSegment.stepIndices).toContain(twentyStep!.stepIndex)
+      expect(tensSegment.plan[0]?.rule).toBe('Direct')
     }
 
     // Test the tooltip content generation logic
     if (twentyStep?.provenance && tensSegment) {
-      const provenance = twentyStep.provenance;
+      const provenance = twentyStep.provenance
 
       // Generate the enhanced tooltip content (this is what the ReasonTooltip should show)
-      const expectedTitle = `Add the ${provenance.rhsPlaceName} digit — ${provenance.rhsDigit} ${provenance.rhsPlaceName} (${provenance.rhsValue})`;
-      const expectedSubtitle = `From addend ${provenance.rhs}`;
-      const expectedExplanation = `We're adding the ${provenance.rhsPlaceName} digit of ${provenance.rhs} → ${provenance.rhsDigit} ${provenance.rhsPlaceName}.`;
+      const expectedTitle = `Add the ${provenance.rhsPlaceName} digit — ${provenance.rhsDigit} ${provenance.rhsPlaceName} (${provenance.rhsValue})`
+      const expectedSubtitle = `From addend ${provenance.rhs}`
+      const expectedExplanation = `We're adding the ${provenance.rhsPlaceName} digit of ${provenance.rhs} → ${provenance.rhsDigit} ${provenance.rhsPlaceName}.`
 
-      console.log("\n=== Expected Tooltip Content ===");
-      console.log("Title:", expectedTitle);
-      console.log("Subtitle:", expectedSubtitle);
-      console.log("Explanation:", expectedExplanation);
+      console.log('\n=== Expected Tooltip Content ===')
+      console.log('Title:', expectedTitle)
+      console.log('Subtitle:', expectedSubtitle)
+      console.log('Explanation:', expectedExplanation)
 
       // Verify these match what the user is expecting
-      expect(expectedTitle).toBe("Add the tens digit — 2 tens (20)");
-      expect(expectedSubtitle).toBe("From addend 25");
-      expect(expectedExplanation).toBe(
-        "We're adding the tens digit of 25 → 2 tens.",
-      );
+      expect(expectedTitle).toBe('Add the tens digit — 2 tens (20)')
+      expect(expectedSubtitle).toBe('From addend 25')
+      expect(expectedExplanation).toBe("We're adding the tens digit of 25 → 2 tens.")
     }
 
     // Verify equation anchors for digit highlighting
-    expect(result.equationAnchors).toBeDefined();
+    expect(result.equationAnchors).toBeDefined()
     if (result.equationAnchors) {
-      console.log("\n=== Equation Anchors for Highlighting ===");
-      console.log("Difference text:", result.equationAnchors.differenceText);
-      console.log("Digit positions:", result.equationAnchors.rhsDigitPositions);
+      console.log('\n=== Equation Anchors for Highlighting ===')
+      console.log('Difference text:', result.equationAnchors.differenceText)
+      console.log('Digit positions:', result.equationAnchors.rhsDigitPositions)
 
-      expect(result.equationAnchors.differenceText).toBe("25");
-      expect(result.equationAnchors.rhsDigitPositions).toHaveLength(2);
+      expect(result.equationAnchors.differenceText).toBe('25')
+      expect(result.equationAnchors.rhsDigitPositions).toHaveLength(2)
 
       // Position for '2' (tens digit)
-      expect(result.equationAnchors.rhsDigitPositions[0].digitIndex).toBe(0);
+      expect(result.equationAnchors.rhsDigitPositions[0].digitIndex).toBe(0)
       // Position for '5' (ones digit)
-      expect(result.equationAnchors.rhsDigitPositions[1].digitIndex).toBe(1);
+      expect(result.equationAnchors.rhsDigitPositions[1].digitIndex).toBe(1)
     }
 
-    console.log(
-      "\n✅ Integration test complete - all provenance data is correctly generated",
-    );
-  });
+    console.log('\n✅ Integration test complete - all provenance data is correctly generated')
+  })
 
-  it("should provide data for UI requirements", () => {
-    const result = generateUnifiedInstructionSequence(3475, 3500);
-    const twentyStep = result.steps.find(
-      (step) => step.mathematicalTerm === "20",
-    );
+  it('should provide data for UI requirements', () => {
+    const result = generateUnifiedInstructionSequence(3475, 3500)
+    const twentyStep = result.steps.find((step) => step.mathematicalTerm === '20')
 
     // Verify we have all the data needed for the UI requirements
-    expect(twentyStep?.provenance).toBeDefined();
-    expect(result.equationAnchors).toBeDefined();
-    expect(result.segments.length).toBeGreaterThan(0);
+    expect(twentyStep?.provenance).toBeDefined()
+    expect(result.equationAnchors).toBeDefined()
+    expect(result.segments.length).toBeGreaterThan(0)
 
-    console.log("\n=== UI Implementation Ready ===");
-    console.log("✅ Provenance data: Available for enhanced tooltips");
-    console.log("✅ Equation anchors: Available for digit highlighting");
-    console.log("✅ Character positions: Available for visual connectors");
-    console.log("✅ Segment mapping: Available for tooltip content");
+    console.log('\n=== UI Implementation Ready ===')
+    console.log('✅ Provenance data: Available for enhanced tooltips')
+    console.log('✅ Equation anchors: Available for digit highlighting')
+    console.log('✅ Character positions: Available for visual connectors')
+    console.log('✅ Segment mapping: Available for tooltip content')
 
     // The ReasonTooltip component now has all the data it needs to show:
     // - "Add the tens digit — 2 tens (20)" (title)
     // - "From addend 25" (subtitle)
     // - "We're adding the tens digit of 25 → 2 tens." (explanation)
     // - Breadcrumb chips showing the digit transformation
-  });
-});
+  })
+})
diff --git a/apps/web/src/utils/__tests__/provenance.test.ts b/apps/web/src/utils/__tests__/provenance.test.ts
index 396709d4..1885ea1f 100644
--- a/apps/web/src/utils/__tests__/provenance.test.ts
+++ b/apps/web/src/utils/__tests__/provenance.test.ts
@@ -1,162 +1,152 @@
-import { generateUnifiedInstructionSequence } from "../unifiedStepGenerator";
+import { generateUnifiedInstructionSequence } from '../unifiedStepGenerator'
 
-describe("Provenance System", () => {
-  describe("3475 + 25 = 3500 example", () => {
-    let result: ReturnType<typeof generateUnifiedInstructionSequence>;
+describe('Provenance System', () => {
+  describe('3475 + 25 = 3500 example', () => {
+    let result: ReturnType<typeof generateUnifiedInstructionSequence>
 
     beforeAll(() => {
-      result = generateUnifiedInstructionSequence(3475, 3500);
-    });
+      result = generateUnifiedInstructionSequence(3475, 3500)
+    })
 
-    it("should generate steps with provenance data", () => {
-      expect(result.steps.length).toBeGreaterThan(0);
+    it('should generate steps with provenance data', () => {
+      expect(result.steps.length).toBeGreaterThan(0)
 
       // Log for debugging
-      console.log("Generated steps:");
+      console.log('Generated steps:')
       result.steps.forEach((step, index) => {
-        console.log(`Step ${index}: ${step.mathematicalTerm}`);
-        console.log(`  - segmentId: ${step.segmentId}`);
+        console.log(`Step ${index}: ${step.mathematicalTerm}`)
+        console.log(`  - segmentId: ${step.segmentId}`)
         if (step.provenance) {
-          console.log(`  - rhs: ${step.provenance.rhs}`);
-          console.log(`  - rhsDigit: ${step.provenance.rhsDigit}`);
-          console.log(`  - rhsPlace: ${step.provenance.rhsPlace}`);
-          console.log(`  - rhsPlaceName: ${step.provenance.rhsPlaceName}`);
-          console.log(`  - rhsValue: ${step.provenance.rhsValue}`);
+          console.log(`  - rhs: ${step.provenance.rhs}`)
+          console.log(`  - rhsDigit: ${step.provenance.rhsDigit}`)
+          console.log(`  - rhsPlace: ${step.provenance.rhsPlace}`)
+          console.log(`  - rhsPlaceName: ${step.provenance.rhsPlaceName}`)
+          console.log(`  - rhsValue: ${step.provenance.rhsValue}`)
           if (step.provenance.groupId) {
-            console.log(`  - groupId: ${step.provenance.groupId}`);
+            console.log(`  - groupId: ${step.provenance.groupId}`)
           }
         } else {
-          console.log("  - No provenance data");
+          console.log('  - No provenance data')
         }
-      });
+      })
 
       // Log segments to see the rules
-      console.log("\nGenerated segments:");
+      console.log('\nGenerated segments:')
       result.segments.forEach((segment, index) => {
-        console.log(
-          `Segment ${index}: place=${segment.place}, digit=${segment.digit}`,
-        );
-        console.log(`  - rule: ${segment.plan[0]?.rule}`);
-        console.log(`  - stepIndices: [${segment.stepIndices.join(", ")}]`);
-      });
-    });
+        console.log(`Segment ${index}: place=${segment.place}, digit=${segment.digit}`)
+        console.log(`  - rule: ${segment.plan[0]?.rule}`)
+        console.log(`  - stepIndices: [${segment.stepIndices.join(', ')}]`)
+      })
+    })
 
     it('should have provenance for the "20" term (tens digit)', () => {
-      const twentyStep = result.steps.find(
-        (step) => step.mathematicalTerm === "20",
-      );
-      expect(twentyStep).toBeDefined();
-      expect(twentyStep?.provenance).toBeDefined();
+      const twentyStep = result.steps.find((step) => step.mathematicalTerm === '20')
+      expect(twentyStep).toBeDefined()
+      expect(twentyStep?.provenance).toBeDefined()
 
       if (twentyStep?.provenance) {
-        expect(twentyStep.provenance.rhs).toBe(25);
-        expect(twentyStep.provenance.rhsDigit).toBe(2);
-        expect(twentyStep.provenance.rhsPlace).toBe(1);
-        expect(twentyStep.provenance.rhsPlaceName).toBe("tens");
-        expect(twentyStep.provenance.rhsValue).toBe(20);
-        expect(twentyStep.provenance.rhsDigitIndex).toBe(0); // '2' is first digit in '25'
+        expect(twentyStep.provenance.rhs).toBe(25)
+        expect(twentyStep.provenance.rhsDigit).toBe(2)
+        expect(twentyStep.provenance.rhsPlace).toBe(1)
+        expect(twentyStep.provenance.rhsPlaceName).toBe('tens')
+        expect(twentyStep.provenance.rhsValue).toBe(20)
+        expect(twentyStep.provenance.rhsDigitIndex).toBe(0) // '2' is first digit in '25'
       }
-    });
+    })
 
     it('should have provenance for the "5" term (ones digit)', () => {
-      const fiveStep = result.steps.find(
-        (step) => step.mathematicalTerm === "5",
-      );
-      expect(fiveStep).toBeDefined();
-      expect(fiveStep?.provenance).toBeDefined();
+      const fiveStep = result.steps.find((step) => step.mathematicalTerm === '5')
+      expect(fiveStep).toBeDefined()
+      expect(fiveStep?.provenance).toBeDefined()
 
       if (fiveStep?.provenance) {
-        expect(fiveStep.provenance.rhs).toBe(25);
-        expect(fiveStep.provenance.rhsDigit).toBe(5);
-        expect(fiveStep.provenance.rhsPlace).toBe(0);
-        expect(fiveStep.provenance.rhsPlaceName).toBe("ones");
-        expect(fiveStep.provenance.rhsValue).toBe(5);
-        expect(fiveStep.provenance.rhsDigitIndex).toBe(1); // '5' is second digit in '25'
+        expect(fiveStep.provenance.rhs).toBe(25)
+        expect(fiveStep.provenance.rhsDigit).toBe(5)
+        expect(fiveStep.provenance.rhsPlace).toBe(0)
+        expect(fiveStep.provenance.rhsPlaceName).toBe('ones')
+        expect(fiveStep.provenance.rhsValue).toBe(5)
+        expect(fiveStep.provenance.rhsDigitIndex).toBe(1) // '5' is second digit in '25'
       }
-    });
+    })
 
-    it("should generate equation anchors", () => {
-      expect(result.equationAnchors).toBeDefined();
-      expect(result.equationAnchors?.differenceText).toBe("25");
-      expect(result.equationAnchors?.rhsDigitPositions).toHaveLength(2);
+    it('should generate equation anchors', () => {
+      expect(result.equationAnchors).toBeDefined()
+      expect(result.equationAnchors?.differenceText).toBe('25')
+      expect(result.equationAnchors?.rhsDigitPositions).toHaveLength(2)
 
       // First digit (2)
       expect(result.equationAnchors?.rhsDigitPositions[0]).toEqual({
         digitIndex: 0,
         startIndex: expect.any(Number),
         endIndex: expect.any(Number),
-      });
+      })
 
       // Second digit (5)
       expect(result.equationAnchors?.rhsDigitPositions[1]).toEqual({
         digitIndex: 1,
         startIndex: expect.any(Number),
         endIndex: expect.any(Number),
-      });
-    });
+      })
+    })
 
-    it("should have segments with proper step mapping", () => {
-      expect(result.segments.length).toBeGreaterThan(0);
+    it('should have segments with proper step mapping', () => {
+      expect(result.segments.length).toBeGreaterThan(0)
 
       // Find segment for tens place (digit 2)
-      const tensSegment = result.segments.find(
-        (seg) => seg.place === 1 && seg.digit === 2,
-      );
-      expect(tensSegment).toBeDefined();
-      expect(tensSegment?.stepIndices.length).toBeGreaterThan(0);
+      const tensSegment = result.segments.find((seg) => seg.place === 1 && seg.digit === 2)
+      expect(tensSegment).toBeDefined()
+      expect(tensSegment?.stepIndices.length).toBeGreaterThan(0)
 
       // Find segment for ones place (digit 5)
-      const onesSegment = result.segments.find(
-        (seg) => seg.place === 0 && seg.digit === 5,
-      );
-      expect(onesSegment).toBeDefined();
-      expect(onesSegment?.stepIndices.length).toBeGreaterThan(0);
-    });
+      const onesSegment = result.segments.find((seg) => seg.place === 0 && seg.digit === 5)
+      expect(onesSegment).toBeDefined()
+      expect(onesSegment?.stepIndices.length).toBeGreaterThan(0)
+    })
 
-    it("should maintain consistency between steps and segments", () => {
+    it('should maintain consistency between steps and segments', () => {
       result.segments.forEach((segment) => {
         segment.stepIndices.forEach((stepIndex) => {
-          const step = result.steps[stepIndex];
-          expect(step).toBeDefined();
-          expect(step.segmentId).toBe(segment.id);
+          const step = result.steps[stepIndex]
+          expect(step).toBeDefined()
+          expect(step.segmentId).toBe(segment.id)
 
           // Check provenance consistency
           if (step.provenance) {
-            expect(step.provenance.rhsPlace).toBe(segment.place);
-            expect(step.provenance.rhsDigit).toBe(segment.digit);
+            expect(step.provenance.rhsPlace).toBe(segment.place)
+            expect(step.provenance.rhsDigit).toBe(segment.digit)
           }
-        });
-      });
-    });
-  });
+        })
+      })
+    })
+  })
 
-  describe("Edge cases", () => {
-    it("should handle single digit addition", () => {
-      const result = generateUnifiedInstructionSequence(10, 13);
-      const steps = result.steps.filter((step) => step.provenance);
-      expect(steps.length).toBeGreaterThan(0);
+  describe('Edge cases', () => {
+    it('should handle single digit addition', () => {
+      const result = generateUnifiedInstructionSequence(10, 13)
+      const steps = result.steps.filter((step) => step.provenance)
+      expect(steps.length).toBeGreaterThan(0)
 
       steps.forEach((step) => {
-        expect(step.provenance?.rhs).toBe(3);
-        expect(step.provenance?.rhsDigit).toBe(3);
-        expect(step.provenance?.rhsPlace).toBe(0);
-        expect(step.provenance?.rhsPlaceName).toBe("ones");
-      });
-    });
+        expect(step.provenance?.rhs).toBe(3)
+        expect(step.provenance?.rhsDigit).toBe(3)
+        expect(step.provenance?.rhsPlace).toBe(0)
+        expect(step.provenance?.rhsPlaceName).toBe('ones')
+      })
+    })
 
-    it("should handle complement operations with group IDs", () => {
+    it('should handle complement operations with group IDs', () => {
       // This might trigger a complement operation
-      const result = generateUnifiedInstructionSequence(0, 7);
+      const result = generateUnifiedInstructionSequence(0, 7)
       const complementSteps = result.steps.filter((step) =>
-        step.provenance?.groupId?.includes("comp"),
-      );
+        step.provenance?.groupId?.includes('comp')
+      )
 
       if (complementSteps.length > 0) {
-        const firstGroupId = complementSteps[0].provenance?.groupId;
+        const firstGroupId = complementSteps[0].provenance?.groupId
         complementSteps.forEach((step) => {
-          expect(step.provenance?.groupId).toBe(firstGroupId);
-        });
+          expect(step.provenance?.groupId).toBe(firstGroupId)
+        })
       }
-    });
-  });
-});
+    })
+  })
+})
diff --git a/apps/web/src/utils/__tests__/termPositionBuilder.test.ts b/apps/web/src/utils/__tests__/termPositionBuilder.test.ts
index 2529ffdf..0e9ab32e 100644
--- a/apps/web/src/utils/__tests__/termPositionBuilder.test.ts
+++ b/apps/web/src/utils/__tests__/termPositionBuilder.test.ts
@@ -1,130 +1,101 @@
-import { describe, expect, it } from "vitest";
-import { buildFullDecompositionWithPositions } from "../unifiedStepGenerator";
+import { describe, expect, it } from 'vitest'
+import { buildFullDecompositionWithPositions } from '../unifiedStepGenerator'
 
 /**
  * Unit tests for the generalized segment-based term position builder.
  * Verifies that complement grouping and position mapping work correctly.
  */
-describe("buildFullDecompositionWithPositions", () => {
-  it("should correctly group cascading complement terms and map positions", () => {
-    const seq = buildFullDecompositionWithPositions(3456, 3500, [
-      "40",
-      "100",
-      "-90",
-      "-6",
-    ]);
+describe('buildFullDecompositionWithPositions', () => {
+  it('should correctly group cascading complement terms and map positions', () => {
+    const seq = buildFullDecompositionWithPositions(3456, 3500, ['40', '100', '-90', '-6'])
 
     // Verify the full decomposition string format
-    expect(seq.fullDecomposition).toBe(
-      "3456 + 44 = 3456 + 40 + (100 - 90 - 6) = 3500",
-    );
+    expect(seq.fullDecomposition).toBe('3456 + 44 = 3456 + 40 + (100 - 90 - 6) = 3500')
 
     // Verify term position mapping
-    const [p40, p100, p90, p6] = seq.termPositions;
+    const [p40, p100, p90, p6] = seq.termPositions
 
     // Each term should map to the correct substring (exclusive end indices)
-    expect(seq.fullDecomposition.slice(p40.startIndex, p40.endIndex)).toBe(
-      "40",
-    );
-    expect(seq.fullDecomposition.slice(p100.startIndex, p100.endIndex)).toBe(
-      "100",
-    );
-    expect(seq.fullDecomposition.slice(p90.startIndex, p90.endIndex)).toBe(
-      "90",
-    ); // Maps to number only, not "-90"
-    expect(seq.fullDecomposition.slice(p6.startIndex, p6.endIndex)).toBe("6"); // Maps to number only, not "-6"
-  });
+    expect(seq.fullDecomposition.slice(p40.startIndex, p40.endIndex)).toBe('40')
+    expect(seq.fullDecomposition.slice(p100.startIndex, p100.endIndex)).toBe('100')
+    expect(seq.fullDecomposition.slice(p90.startIndex, p90.endIndex)).toBe('90') // Maps to number only, not "-90"
+    expect(seq.fullDecomposition.slice(p6.startIndex, p6.endIndex)).toBe('6') // Maps to number only, not "-6"
+  })
 
-  it("should handle simple five-complement grouping", () => {
-    const seq = buildFullDecompositionWithPositions(4, 7, ["5", "-2"]);
+  it('should handle simple five-complement grouping', () => {
+    const seq = buildFullDecompositionWithPositions(4, 7, ['5', '-2'])
 
-    expect(seq.fullDecomposition).toBe("4 + 3 = 4 + (5 - 2) = 7");
+    expect(seq.fullDecomposition).toBe('4 + 3 = 4 + (5 - 2) = 7')
 
-    const [p5, p2] = seq.termPositions;
-    expect(seq.fullDecomposition.slice(p5.startIndex, p5.endIndex)).toBe("5");
-    expect(seq.fullDecomposition.slice(p2.startIndex, p2.endIndex)).toBe("2");
-  });
+    const [p5, p2] = seq.termPositions
+    expect(seq.fullDecomposition.slice(p5.startIndex, p5.endIndex)).toBe('5')
+    expect(seq.fullDecomposition.slice(p2.startIndex, p2.endIndex)).toBe('2')
+  })
 
-  it("should handle ten-complement grouping", () => {
-    const seq = buildFullDecompositionWithPositions(7, 15, ["10", "-2"]);
+  it('should handle ten-complement grouping', () => {
+    const seq = buildFullDecompositionWithPositions(7, 15, ['10', '-2'])
 
-    expect(seq.fullDecomposition).toBe("7 + 8 = 7 + (10 - 2) = 15");
+    expect(seq.fullDecomposition).toBe('7 + 8 = 7 + (10 - 2) = 15')
 
-    const [p10, p2] = seq.termPositions;
-    expect(seq.fullDecomposition.slice(p10.startIndex, p10.endIndex)).toBe(
-      "10",
-    );
-    expect(seq.fullDecomposition.slice(p2.startIndex, p2.endIndex)).toBe("2");
-  });
+    const [p10, p2] = seq.termPositions
+    expect(seq.fullDecomposition.slice(p10.startIndex, p10.endIndex)).toBe('10')
+    expect(seq.fullDecomposition.slice(p2.startIndex, p2.endIndex)).toBe('2')
+  })
 
-  it("should handle mixed segments (single terms + complements)", () => {
-    const seq = buildFullDecompositionWithPositions(12, 34, ["20", "5", "-3"]);
+  it('should handle mixed segments (single terms + complements)', () => {
+    const seq = buildFullDecompositionWithPositions(12, 34, ['20', '5', '-3'])
 
-    expect(seq.fullDecomposition).toBe("12 + 22 = 12 + 20 + (5 - 3) = 34");
+    expect(seq.fullDecomposition).toBe('12 + 22 = 12 + 20 + (5 - 3) = 34')
 
-    const [p20, p5, p3] = seq.termPositions;
-    expect(seq.fullDecomposition.slice(p20.startIndex, p20.endIndex)).toBe(
-      "20",
-    );
-    expect(seq.fullDecomposition.slice(p5.startIndex, p5.endIndex)).toBe("5");
-    expect(seq.fullDecomposition.slice(p3.startIndex, p3.endIndex)).toBe("3");
-  });
+    const [p20, p5, p3] = seq.termPositions
+    expect(seq.fullDecomposition.slice(p20.startIndex, p20.endIndex)).toBe('20')
+    expect(seq.fullDecomposition.slice(p5.startIndex, p5.endIndex)).toBe('5')
+    expect(seq.fullDecomposition.slice(p3.startIndex, p3.endIndex)).toBe('3')
+  })
 
-  it("should handle standalone negative terms", () => {
-    const seq = buildFullDecompositionWithPositions(10, 5, ["-5"]);
+  it('should handle standalone negative terms', () => {
+    const seq = buildFullDecompositionWithPositions(10, 5, ['-5'])
 
-    expect(seq.fullDecomposition).toBe("10 + -5 = 10 + -5 = 5");
+    expect(seq.fullDecomposition).toBe('10 + -5 = 10 + -5 = 5')
 
-    const [p5] = seq.termPositions;
-    expect(seq.fullDecomposition.slice(p5.startIndex, p5.endIndex)).toBe("5"); // Maps to number only
-  });
+    const [p5] = seq.termPositions
+    expect(seq.fullDecomposition.slice(p5.startIndex, p5.endIndex)).toBe('5') // Maps to number only
+  })
 
-  it("should handle zero difference case", () => {
-    const seq = buildFullDecompositionWithPositions(5, 5, []);
+  it('should handle zero difference case', () => {
+    const seq = buildFullDecompositionWithPositions(5, 5, [])
 
-    expect(seq.fullDecomposition).toBe("5 + 0 = 5");
-    expect(seq.termPositions).toEqual([]);
-  });
+    expect(seq.fullDecomposition).toBe('5 + 0 = 5')
+    expect(seq.termPositions).toEqual([])
+  })
 
-  it("should handle complex cascading with multiple negative terms", () => {
+  it('should handle complex cascading with multiple negative terms', () => {
     const seq = buildFullDecompositionWithPositions(9999, 10007, [
-      "10000",
-      "-1000",
-      "-100",
-      "-10",
-      "-1",
-    ]);
+      '10000',
+      '-1000',
+      '-100',
+      '-10',
+      '-1',
+    ])
 
-    expect(seq.fullDecomposition).toBe(
-      "9999 + 8 = 9999 + (10000 - 1000 - 100 - 10 - 1) = 10007",
-    );
+    expect(seq.fullDecomposition).toBe('9999 + 8 = 9999 + (10000 - 1000 - 100 - 10 - 1) = 10007')
 
-    const [p10000, p1000, p100, p10, p1] = seq.termPositions;
-    expect(
-      seq.fullDecomposition.slice(p10000.startIndex, p10000.endIndex),
-    ).toBe("10000");
-    expect(seq.fullDecomposition.slice(p1000.startIndex, p1000.endIndex)).toBe(
-      "1000",
-    );
-    expect(seq.fullDecomposition.slice(p100.startIndex, p100.endIndex)).toBe(
-      "100",
-    );
-    expect(seq.fullDecomposition.slice(p10.startIndex, p10.endIndex)).toBe(
-      "10",
-    );
-    expect(seq.fullDecomposition.slice(p1.startIndex, p1.endIndex)).toBe("1");
-  });
+    const [p10000, p1000, p100, p10, p1] = seq.termPositions
+    expect(seq.fullDecomposition.slice(p10000.startIndex, p10000.endIndex)).toBe('10000')
+    expect(seq.fullDecomposition.slice(p1000.startIndex, p1000.endIndex)).toBe('1000')
+    expect(seq.fullDecomposition.slice(p100.startIndex, p100.endIndex)).toBe('100')
+    expect(seq.fullDecomposition.slice(p10.startIndex, p10.endIndex)).toBe('10')
+    expect(seq.fullDecomposition.slice(p1.startIndex, p1.endIndex)).toBe('1')
+  })
 
-  it("should handle mixed segments (single term + complement)", () => {
-    const seq = buildFullDecompositionWithPositions(3, 17, ["10", "5", "-1"]);
+  it('should handle mixed segments (single term + complement)', () => {
+    const seq = buildFullDecompositionWithPositions(3, 17, ['10', '5', '-1'])
 
-    expect(seq.fullDecomposition).toBe("3 + 14 = 3 + 10 + (5 - 1) = 17");
+    expect(seq.fullDecomposition).toBe('3 + 14 = 3 + 10 + (5 - 1) = 17')
 
-    const [p10, p5, p1] = seq.termPositions;
-    expect(seq.fullDecomposition.slice(p10.startIndex, p10.endIndex)).toBe(
-      "10",
-    );
-    expect(seq.fullDecomposition.slice(p5.startIndex, p5.endIndex)).toBe("5");
-    expect(seq.fullDecomposition.slice(p1.startIndex, p1.endIndex)).toBe("1");
-  });
-});
+    const [p10, p5, p1] = seq.termPositions
+    expect(seq.fullDecomposition.slice(p10.startIndex, p10.endIndex)).toBe('10')
+    expect(seq.fullDecomposition.slice(p5.startIndex, p5.endIndex)).toBe('5')
+    expect(seq.fullDecomposition.slice(p1.startIndex, p1.endIndex)).toBe('1')
+  })
+})
diff --git a/apps/web/src/utils/__tests__/unifiedStepGenerator.correctness.test.ts b/apps/web/src/utils/__tests__/unifiedStepGenerator.correctness.test.ts
index 394648e7..8ced810e 100644
--- a/apps/web/src/utils/__tests__/unifiedStepGenerator.correctness.test.ts
+++ b/apps/web/src/utils/__tests__/unifiedStepGenerator.correctness.test.ts
@@ -1,84 +1,84 @@
-import { describe, expect, it } from "vitest";
-import { generateUnifiedInstructionSequence } from "../unifiedStepGenerator";
+import { describe, expect, it } from 'vitest'
+import { generateUnifiedInstructionSequence } from '../unifiedStepGenerator'
 
-describe("expressions & rule classification", () => {
+describe('expressions & rule classification', () => {
   it('direct 8 at ones: expression "5 + 3", rule Direct', () => {
-    const seq = generateUnifiedInstructionSequence(0, 8);
-    const seg = seq.segments.find((s) => s.place === 0)!;
-    expect(seg.expression.replace(/\s+/g, "")).toBe("5+3");
-    expect(seg.plan.some((p) => p.rule === "Direct")).toBe(true);
-    expect(seg.plan.some((p) => p.rule === "FiveComplement")).toBe(false);
-    expect(seg.plan.some((p) => p.rule === "TenComplement")).toBe(false);
-  });
+    const seq = generateUnifiedInstructionSequence(0, 8)
+    const seg = seq.segments.find((s) => s.place === 0)!
+    expect(seg.expression.replace(/\s+/g, '')).toBe('5+3')
+    expect(seg.plan.some((p) => p.rule === 'Direct')).toBe(true)
+    expect(seg.plan.some((p) => p.rule === 'FiveComplement')).toBe(false)
+    expect(seg.plan.some((p) => p.rule === 'TenComplement')).toBe(false)
+  })
 
   it('five complement (2 + 3): expression "(5 - 2)" and FiveComplement', () => {
-    const seq = generateUnifiedInstructionSequence(2, 5);
-    const seg = seq.segments.find((s) => s.place === 0)!;
-    expect(seg.expression.replace(/\s+/g, "")).toBe("(5-2)");
-    expect(seg.plan.some((p) => p.rule === "FiveComplement")).toBe(true);
-  });
+    const seq = generateUnifiedInstructionSequence(2, 5)
+    const seg = seq.segments.find((s) => s.place === 0)!
+    expect(seg.expression.replace(/\s+/g, '')).toBe('(5-2)')
+    expect(seg.plan.some((p) => p.rule === 'FiveComplement')).toBe(true)
+  })
 
-  it("ten complement no cascade (19 + 1): TenComplement only", () => {
-    const seq = generateUnifiedInstructionSequence(19, 20);
-    const onesSeg = seq.segments.find((s) => s.place === 0)!;
-    expect(onesSeg.plan.some((p) => p.rule === "TenComplement")).toBe(true);
-    expect(onesSeg.plan.some((p) => p.rule === "Cascade")).toBe(false);
+  it('ten complement no cascade (19 + 1): TenComplement only', () => {
+    const seq = generateUnifiedInstructionSequence(19, 20)
+    const onesSeg = seq.segments.find((s) => s.place === 0)!
+    expect(onesSeg.plan.some((p) => p.rule === 'TenComplement')).toBe(true)
+    expect(onesSeg.plan.some((p) => p.rule === 'Cascade')).toBe(false)
     // Expression should be "(10 - 9)"
-    expect(onesSeg.expression.replace(/\s+/g, "")).toBe("(10-9)");
-  });
+    expect(onesSeg.expression.replace(/\s+/g, '')).toBe('(10-9)')
+  })
 
-  it("ten complement with cascade (99 + 1): TenComplement + Cascade", () => {
-    const seq = generateUnifiedInstructionSequence(99, 100);
-    const onesSeg = seq.segments.find((s) => s.place === 0)!;
-    expect(onesSeg.plan.some((p) => p.rule === "TenComplement")).toBe(true);
-    expect(onesSeg.plan.some((p) => p.rule === "Cascade")).toBe(true);
+  it('ten complement with cascade (99 + 1): TenComplement + Cascade', () => {
+    const seq = generateUnifiedInstructionSequence(99, 100)
+    const onesSeg = seq.segments.find((s) => s.place === 0)!
+    expect(onesSeg.plan.some((p) => p.rule === 'TenComplement')).toBe(true)
+    expect(onesSeg.plan.some((p) => p.rule === 'Cascade')).toBe(true)
     // Expression should be "(100 - 90 - 9)"
-    expect(onesSeg.expression.replace(/\s+/g, "")).toBe("(100-90-9)");
-  });
+    expect(onesSeg.expression.replace(/\s+/g, '')).toBe('(100-90-9)')
+  })
 
-  it("term ranges include all step term positions", () => {
-    const seq = generateUnifiedInstructionSequence(3478, 3500); // +22
-    const tensSeg = seq.segments.find((s) => s.place === 1)!;
+  it('term ranges include all step term positions', () => {
+    const seq = generateUnifiedInstructionSequence(3478, 3500) // +22
+    const tensSeg = seq.segments.find((s) => s.place === 1)!
     tensSeg.stepIndices.forEach((i) => {
-      const r = seq.steps[i].termPosition;
-      expect(r.startIndex >= tensSeg.termRange.startIndex).toBe(true);
-      expect(r.endIndex <= tensSeg.termRange.endIndex).toBe(true);
-    });
-  });
+      const r = seq.steps[i].termPosition
+      expect(r.startIndex >= tensSeg.termRange.startIndex).toBe(true)
+      expect(r.endIndex <= tensSeg.termRange.endIndex).toBe(true)
+    })
+  })
 
   // Guard tests to prevent specific regressions
-  it("prevents false FiveComplement on direct 6-9 adds", () => {
+  it('prevents false FiveComplement on direct 6-9 adds', () => {
     for (let digit = 6; digit <= 9; digit++) {
-      const seq = generateUnifiedInstructionSequence(0, digit);
-      const seg = seq.segments.find((s) => s.place === 0)!;
-      expect(seg.plan.some((p) => p.rule === "Direct")).toBe(true);
-      expect(seg.plan.some((p) => p.rule === "FiveComplement")).toBe(false);
-      expect(seg.expression).toMatch(/^5 \+ \d+$/);
+      const seq = generateUnifiedInstructionSequence(0, digit)
+      const seg = seq.segments.find((s) => s.place === 0)!
+      expect(seg.plan.some((p) => p.rule === 'Direct')).toBe(true)
+      expect(seg.plan.some((p) => p.rule === 'FiveComplement')).toBe(false)
+      expect(seg.expression).toMatch(/^5 \+ \d+$/)
     }
-  });
+  })
 
-  it("validates expressions use correct format (parentheses for complements only)", () => {
+  it('validates expressions use correct format (parentheses for complements only)', () => {
     // Direct additions: no parentheses
-    const directSeq = generateUnifiedInstructionSequence(0, 8);
-    const directSeg = directSeq.segments.find((s) => s.place === 0)!;
-    expect(directSeg.expression).not.toMatch(/^\(.+\)$/);
+    const directSeq = generateUnifiedInstructionSequence(0, 8)
+    const directSeg = directSeq.segments.find((s) => s.place === 0)!
+    expect(directSeg.expression).not.toMatch(/^\(.+\)$/)
 
     // Five complement: parentheses
-    const fiveCompSeq = generateUnifiedInstructionSequence(2, 5);
-    const fiveCompSeg = fiveCompSeq.segments.find((s) => s.place === 0)!;
-    expect(fiveCompSeg.expression).toMatch(/^\(.+\)$/);
+    const fiveCompSeq = generateUnifiedInstructionSequence(2, 5)
+    const fiveCompSeg = fiveCompSeq.segments.find((s) => s.place === 0)!
+    expect(fiveCompSeg.expression).toMatch(/^\(.+\)$/)
 
     // Ten complement: parentheses
-    const tenCompSeq = generateUnifiedInstructionSequence(19, 20);
-    const tenCompSeg = tenCompSeq.segments.find((s) => s.place === 0)!;
-    expect(tenCompSeg.expression).toMatch(/^\(.+\)$/);
-  });
+    const tenCompSeq = generateUnifiedInstructionSequence(19, 20)
+    const tenCompSeg = tenCompSeq.segments.find((s) => s.place === 0)!
+    expect(tenCompSeg.expression).toMatch(/^\(.+\)$/)
+  })
 
-  it("handles more complex cascade scenarios", () => {
+  it('handles more complex cascade scenarios', () => {
     // 999 + 1 = 1000 (cascade through all places)
-    const seq = generateUnifiedInstructionSequence(999, 1000);
-    const onesSeg = seq.segments.find((s) => s.place === 0)!;
-    expect(onesSeg.plan.some((p) => p.rule === "Cascade")).toBe(true);
-    expect(onesSeg.expression).toMatch(/^\(1000 - 900 - 90 - 9\)$/);
-  });
-});
+    const seq = generateUnifiedInstructionSequence(999, 1000)
+    const onesSeg = seq.segments.find((s) => s.place === 0)!
+    expect(onesSeg.plan.some((p) => p.rule === 'Cascade')).toBe(true)
+    expect(onesSeg.expression).toMatch(/^\(1000 - 900 - 90 - 9\)$/)
+  })
+})
diff --git a/apps/web/src/utils/abacusInstructionGenerator.ts b/apps/web/src/utils/abacusInstructionGenerator.ts
index 2378a0fb..209f99e5 100644
--- a/apps/web/src/utils/abacusInstructionGenerator.ts
+++ b/apps/web/src/utils/abacusInstructionGenerator.ts
@@ -1,50 +1,44 @@
 // Automatic instruction generator for abacus tutorial steps
 // Re-exports core types and functions from abacus-react
 
-export type { ValidPlaceValues } from "@soroban/abacus-react";
+export type { ValidPlaceValues } from '@soroban/abacus-react'
 export {
   type BeadState,
   type AbacusState,
   type PlaceValueBasedBead as BeadHighlight,
   numberToAbacusState,
   calculateBeadChanges,
-} from "@soroban/abacus-react";
+} from '@soroban/abacus-react'
 
-import type {
-  ValidPlaceValues,
-  PlaceValueBasedBead,
-} from "@soroban/abacus-react";
-import {
-  numberToAbacusState,
-  calculateBeadChanges,
-} from "@soroban/abacus-react";
+import type { ValidPlaceValues, PlaceValueBasedBead } from '@soroban/abacus-react'
+import { numberToAbacusState, calculateBeadChanges } from '@soroban/abacus-react'
 
 // Type alias for internal use
-type BeadHighlight = PlaceValueBasedBead;
+type BeadHighlight = PlaceValueBasedBead
 
 // App-specific extension for step-based tutorial highlighting
 export interface StepBeadHighlight extends PlaceValueBasedBead {
-  stepIndex: number; // Which instruction step this bead belongs to
-  direction: "up" | "down" | "activate" | "deactivate"; // Movement direction
-  order?: number; // Order within the step (for multiple beads per step)
+  stepIndex: number // Which instruction step this bead belongs to
+  direction: 'up' | 'down' | 'activate' | 'deactivate' // Movement direction
+  order?: number // Order within the step (for multiple beads per step)
 }
 
 export interface GeneratedInstruction {
-  highlightBeads: PlaceValueBasedBead[];
-  expectedAction: "add" | "remove" | "multi-step";
-  actionDescription: string;
-  multiStepInstructions?: string[];
-  stepBeadHighlights?: StepBeadHighlight[]; // NEW: beads grouped by step
-  totalSteps?: number; // NEW: total number of steps
+  highlightBeads: PlaceValueBasedBead[]
+  expectedAction: 'add' | 'remove' | 'multi-step'
+  actionDescription: string
+  multiStepInstructions?: string[]
+  stepBeadHighlights?: StepBeadHighlight[] // NEW: beads grouped by step
+  totalSteps?: number // NEW: total number of steps
   tooltip: {
-    content: string;
-    explanation: string;
-  };
+    content: string
+    explanation: string
+  }
   errorMessages: {
-    wrongBead: string;
-    wrongAction: string;
-    hint: string;
-  };
+    wrongBead: string
+    wrongAction: string
+    hint: string
+  }
 }
 
 // Note: numberToAbacusState and calculateBeadChanges are now re-exported from @soroban/abacus-react above
@@ -54,26 +48,26 @@ function generateProperComplementDescription(
   startValue: number,
   targetValue: number,
   _additions: BeadHighlight[],
-  _removals: BeadHighlight[],
+  _removals: BeadHighlight[]
 ): { description: string; decomposition: any } {
-  const difference = targetValue - startValue;
+  const difference = targetValue - startValue
 
   // Find the optimal complement decomposition with context
-  const decomposition = findOptimalDecomposition(difference, { startValue });
+  const decomposition = findOptimalDecomposition(difference, { startValue })
 
   if (decomposition) {
-    const { addTerm, subtractTerm, compactMath, isRecursive } = decomposition;
+    const { addTerm, subtractTerm, compactMath, isRecursive } = decomposition
     return {
       description: `${startValue} + ${difference} = ${startValue} + ${compactMath} = ${targetValue}`,
       decomposition: { ...decomposition, isRecursive },
-    };
+    }
   }
 
   // Fallback to simple description
   return {
     description: `${startValue} + ${difference} = ${targetValue}`,
     decomposition: null,
-  };
+  }
 }
 
 // Generate enhanced step-by-step instructions with complement explanations
@@ -83,165 +77,139 @@ function generateEnhancedStepInstructions(
   additions: BeadHighlight[],
   removals: BeadHighlight[],
   decomposition: any,
-  stepBeadHighlights?: StepBeadHighlight[],
+  stepBeadHighlights?: StepBeadHighlight[]
 ): string[] {
-  const instructions: string[] = [];
+  const instructions: string[] = []
 
   if (decomposition && stepBeadHighlights) {
-    const { addTerm, subtractTerm, isRecursive } = decomposition;
+    const { addTerm, subtractTerm, isRecursive } = decomposition
 
     // Generate instructions based on step groupings from stepBeadHighlights
-    const stepIndices = [
-      ...new Set(stepBeadHighlights.map((bead) => bead.stepIndex)),
-    ].sort();
+    const stepIndices = [...new Set(stepBeadHighlights.map((bead) => bead.stepIndex))].sort()
 
     stepIndices.forEach((stepIndex) => {
-      const stepBeads = stepBeadHighlights.filter(
-        (bead) => bead.stepIndex === stepIndex,
-      );
+      const stepBeads = stepBeadHighlights.filter((bead) => bead.stepIndex === stepIndex)
 
       // Group beads by place and direction within this step
       const stepByPlace: {
         [place: number]: {
-          additions: StepBeadHighlight[];
-          removals: StepBeadHighlight[];
-        };
-      } = {};
+          additions: StepBeadHighlight[]
+          removals: StepBeadHighlight[]
+        }
+      } = {}
 
       stepBeads.forEach((bead) => {
         if (!stepByPlace[bead.placeValue]) {
-          stepByPlace[bead.placeValue] = { additions: [], removals: [] };
+          stepByPlace[bead.placeValue] = { additions: [], removals: [] }
         }
-        if (bead.direction === "activate") {
-          stepByPlace[bead.placeValue].additions.push(bead);
+        if (bead.direction === 'activate') {
+          stepByPlace[bead.placeValue].additions.push(bead)
         } else {
-          stepByPlace[bead.placeValue].removals.push(bead);
+          stepByPlace[bead.placeValue].removals.push(bead)
         }
-      });
+      })
 
       // Process places in descending order (pedagogical: highest place first)
       const places = Object.keys(stepByPlace)
         .map((p) => parseInt(p, 10))
-        .sort((a, b) => b - a);
+        .sort((a, b) => b - a)
 
       places.forEach((place) => {
         const placeName =
-          place === 0
-            ? "ones"
-            : place === 1
-              ? "tens"
-              : place === 2
-                ? "hundreds"
-                : `place ${place}`;
-        const placeData = stepByPlace[place];
+          place === 0 ? 'ones' : place === 1 ? 'tens' : place === 2 ? 'hundreds' : `place ${place}`
+        const placeData = stepByPlace[place]
 
         // Handle additions for this place
         if (placeData.additions.length > 0) {
-          const beads = placeData.additions;
-          let totalValue = 0;
-          let hasHeaven = false;
-          let earthCount = 0;
+          const beads = placeData.additions
+          let totalValue = 0
+          let hasHeaven = false
+          let earthCount = 0
 
           beads.forEach((bead) => {
-            if (bead.beadType === "heaven") {
-              hasHeaven = true;
-              totalValue += 5 * 10 ** place;
+            if (bead.beadType === 'heaven') {
+              hasHeaven = true
+              totalValue += 5 * 10 ** place
             } else {
-              earthCount++;
-              totalValue += 1 * 10 ** place;
+              earthCount++
+              totalValue += 1 * 10 ** place
             }
-          });
+          })
 
           // Generate consolidated instruction for this place's additions
           if (place === 2 && addTerm === 100) {
-            instructions.push(
-              `Click earth bead 1 in the hundreds column to add it`,
-            );
+            instructions.push(`Click earth bead 1 in the hundreds column to add it`)
           } else if (place === 1 && addTerm === 10) {
-            instructions.push(
-              `Click earth bead 1 in the tens column to add it`,
-            );
+            instructions.push(`Click earth bead 1 in the tens column to add it`)
           } else if (place === 0 && addTerm === 5) {
-            instructions.push(
-              `Click the heaven bead in the ones column to add it`,
-            );
+            instructions.push(`Click the heaven bead in the ones column to add it`)
           } else if (hasHeaven && earthCount > 0) {
             instructions.push(
-              `Add ${totalValue} to ${placeName} column (heaven bead + ${earthCount} earth beads)`,
-            );
+              `Add ${totalValue} to ${placeName} column (heaven bead + ${earthCount} earth beads)`
+            )
           } else if (hasHeaven) {
-            instructions.push(
-              `Click the heaven bead in the ${placeName} column to add it`,
-            );
+            instructions.push(`Click the heaven bead in the ${placeName} column to add it`)
           } else if (earthCount === 1) {
-            instructions.push(
-              `Click earth bead 1 in the ${placeName} column to add it`,
-            );
+            instructions.push(`Click earth bead 1 in the ${placeName} column to add it`)
           } else {
             instructions.push(
-              `Add ${totalValue} to ${placeName} column (${earthCount} earth beads)`,
-            );
+              `Add ${totalValue} to ${placeName} column (${earthCount} earth beads)`
+            )
           }
         }
 
         // Handle removals for this place
         if (placeData.removals.length > 0) {
-          const beads = placeData.removals;
-          let totalValue = 0;
-          let hasHeaven = false;
-          let earthCount = 0;
+          const beads = placeData.removals
+          let totalValue = 0
+          let hasHeaven = false
+          let earthCount = 0
 
           beads.forEach((bead) => {
-            if (bead.beadType === "heaven") {
-              hasHeaven = true;
-              totalValue += 5 * 10 ** place;
+            if (bead.beadType === 'heaven') {
+              hasHeaven = true
+              totalValue += 5 * 10 ** place
             } else {
-              earthCount++;
-              totalValue += 1 * 10 ** place;
+              earthCount++
+              totalValue += 1 * 10 ** place
             }
-          });
+          })
 
           // Generate consolidated instruction for this place's removals
           if (isRecursive && place === 1 && totalValue === 90) {
             instructions.push(
-              `Remove 90 from tens column (subtracting first part of decomposition)`,
-            );
+              `Remove 90 from tens column (subtracting first part of decomposition)`
+            )
           } else if (isRecursive && place === 0 && totalValue === 9) {
             instructions.push(
-              `Remove 9 from ones column (subtracting second part of decomposition)`,
-            );
+              `Remove 9 from ones column (subtracting second part of decomposition)`
+            )
           } else if (place === 0 && totalValue === subtractTerm) {
             instructions.push(
-              `Remove ${subtractTerm} from ones column (subtracting ${subtractTerm} from complement)`,
-            );
+              `Remove ${subtractTerm} from ones column (subtracting ${subtractTerm} from complement)`
+            )
           } else if (hasHeaven && earthCount > 0) {
             instructions.push(
-              `Remove ${totalValue} from ${placeName} column (heaven bead + ${earthCount} earth beads)`,
-            );
+              `Remove ${totalValue} from ${placeName} column (heaven bead + ${earthCount} earth beads)`
+            )
           } else if (hasHeaven) {
-            instructions.push(
-              `Click heaven bead in the ${placeName} column to remove`,
-            );
+            instructions.push(`Click heaven bead in the ${placeName} column to remove`)
           } else if (earthCount === 1) {
-            instructions.push(
-              `Click earth bead 1 in the ${placeName} column to remove`,
-            );
+            instructions.push(`Click earth bead 1 in the ${placeName} column to remove`)
           } else {
             instructions.push(
-              `Remove ${totalValue} from ${placeName} column (${earthCount} earth beads)`,
-            );
+              `Remove ${totalValue} from ${placeName} column (${earthCount} earth beads)`
+            )
           }
         }
-      });
-    });
+      })
+    })
   } else {
     // Fallback to standard instructions
-    return generateStepInstructions(additions, removals, false);
+    return generateStepInstructions(additions, removals, false)
   }
 
-  return instructions.length > 0
-    ? instructions
-    : ["No bead movements required"];
+  return instructions.length > 0 ? instructions : ['No bead movements required']
 }
 
 // Generate step-by-step bead highlighting mapping
@@ -251,60 +219,54 @@ function generateStepBeadMapping(
   additions: BeadHighlight[],
   removals: BeadHighlight[],
   decomposition: any,
-  multiStepInstructions: string[],
+  multiStepInstructions: string[]
 ): StepBeadHighlight[] {
-  const stepBeadHighlights: StepBeadHighlight[] = [];
+  const stepBeadHighlights: StepBeadHighlight[] = []
 
-  if (
-    !decomposition ||
-    !multiStepInstructions ||
-    multiStepInstructions.length === 0
-  ) {
+  if (!decomposition || !multiStepInstructions || multiStepInstructions.length === 0) {
     // Fallback: assign all beads to step 0
     additions.forEach((bead, index) => {
       stepBeadHighlights.push({
         ...bead,
         stepIndex: 0,
-        direction: "activate",
+        direction: 'activate',
         order: index,
-      });
-    });
+      })
+    })
     removals.forEach((bead, index) => {
       stepBeadHighlights.push({
         ...bead,
         stepIndex: 0,
-        direction: "deactivate",
+        direction: 'deactivate',
         order: additions.length + index,
-      });
-    });
-    return stepBeadHighlights;
+      })
+    })
+    return stepBeadHighlights
   }
 
-  const { addTerm, subtractTerm, isRecursive } = decomposition;
+  const { addTerm, subtractTerm, isRecursive } = decomposition
 
   // Group beads by place value for easier processing
-  const additionsByPlace: { [place: number]: BeadHighlight[] } = {};
-  const removalsByPlace: { [place: number]: BeadHighlight[] } = {};
+  const additionsByPlace: { [place: number]: BeadHighlight[] } = {}
+  const removalsByPlace: { [place: number]: BeadHighlight[] } = {}
 
   additions.forEach((bead) => {
-    if (!additionsByPlace[bead.placeValue])
-      additionsByPlace[bead.placeValue] = [];
-    additionsByPlace[bead.placeValue].push(bead);
-  });
+    if (!additionsByPlace[bead.placeValue]) additionsByPlace[bead.placeValue] = []
+    additionsByPlace[bead.placeValue].push(bead)
+  })
 
   removals.forEach((bead) => {
-    if (!removalsByPlace[bead.placeValue])
-      removalsByPlace[bead.placeValue] = [];
-    removalsByPlace[bead.placeValue].push(bead);
-  });
+    if (!removalsByPlace[bead.placeValue]) removalsByPlace[bead.placeValue] = []
+    removalsByPlace[bead.placeValue].push(bead)
+  })
 
-  let currentStepIndex = 0;
-  let currentOrder = 0;
+  let currentStepIndex = 0
+  let currentOrder = 0
 
   // Pedagogical step ordering: Process from highest place value to lowest, separating additions and subtractions
   const placeValues = Object.keys({ ...additionsByPlace, ...removalsByPlace })
     .map((p) => parseInt(p, 10))
-    .sort((a, b) => b - a);
+    .sort((a, b) => b - a)
 
   for (const place of placeValues) {
     // First: Add any additions for this place value
@@ -313,11 +275,11 @@ function generateStepBeadMapping(
         stepBeadHighlights.push({
           ...bead,
           stepIndex: currentStepIndex,
-          direction: "activate",
+          direction: 'activate',
           order: currentOrder++,
-        });
-      });
-      currentStepIndex++;
+        })
+      })
+      currentStepIndex++
     }
   }
 
@@ -328,61 +290,58 @@ function generateStepBeadMapping(
         stepBeadHighlights.push({
           ...bead,
           stepIndex: currentStepIndex,
-          direction: "deactivate",
+          direction: 'deactivate',
           order: currentOrder++,
-        });
-      });
-      currentStepIndex++;
+        })
+      })
+      currentStepIndex++
     }
   }
 
-  return stepBeadHighlights;
+  return stepBeadHighlights
 }
 
 // Find optimal decomposition that maps 1:1 to bead movements
 function findOptimalDecomposition(
   value: number,
-  context?: { startValue?: number; placeCapacity?: number },
+  context?: { startValue?: number; placeCapacity?: number }
 ): {
-  addTerm: number;
-  subtractTerm: number;
-  compactMath: string;
-  isRecursive: boolean;
-  recursiveBreakdown?: string;
-  decompositionTerms?: string[];
+  addTerm: number
+  subtractTerm: number
+  compactMath: string
+  isRecursive: boolean
+  recursiveBreakdown?: string
+  decompositionTerms?: string[]
 } | null {
   // Special case for 99 + 1: Force using recursive breakdown
   if (context?.startValue === 99 && value === 1) {
     return {
       addTerm: 100,
       subtractTerm: 99,
-      compactMath: "(100 - 90) - 9",
+      compactMath: '(100 - 90) - 9',
       isRecursive: true,
-      recursiveBreakdown: "((100 - 90) - 9)",
-      decompositionTerms: ["(100 - 90)", "- 9"],
-    };
+      recursiveBreakdown: '((100 - 90) - 9)',
+      decompositionTerms: ['(100 - 90)', '- 9'],
+    }
   }
 
   // Analyze actual bead movements to determine proper decomposition
   if (context?.startValue !== undefined) {
-    const startState = numberToAbacusState(context.startValue);
-    const targetState = numberToAbacusState(context.startValue + value);
-    const { additions, removals } = calculateBeadChanges(
-      startState,
-      targetState,
-    );
+    const startState = numberToAbacusState(context.startValue)
+    const targetState = numberToAbacusState(context.startValue + value)
+    const { additions, removals } = calculateBeadChanges(startState, targetState)
 
-    const decompositionTerms: string[] = [];
+    const decompositionTerms: string[] = []
 
     // Group changes by place value
     const changesByPlace: {
       [place: number]: {
-        adds: number;
-        removes: number;
-        addHeaven: boolean;
-        removeHeaven: boolean;
-      };
-    } = {};
+        adds: number
+        removes: number
+        addHeaven: boolean
+        removeHeaven: boolean
+      }
+    } = {}
 
     additions.forEach((bead) => {
       if (!changesByPlace[bead.placeValue]) {
@@ -391,15 +350,15 @@ function findOptimalDecomposition(
           removes: 0,
           addHeaven: false,
           removeHeaven: false,
-        };
+        }
       }
-      if (bead.beadType === "heaven") {
-        changesByPlace[bead.placeValue].addHeaven = true;
-        changesByPlace[bead.placeValue].adds += 5 * 10 ** bead.placeValue;
+      if (bead.beadType === 'heaven') {
+        changesByPlace[bead.placeValue].addHeaven = true
+        changesByPlace[bead.placeValue].adds += 5 * 10 ** bead.placeValue
       } else {
-        changesByPlace[bead.placeValue].adds += 1 * 10 ** bead.placeValue;
+        changesByPlace[bead.placeValue].adds += 1 * 10 ** bead.placeValue
       }
-    });
+    })
 
     removals.forEach((bead) => {
       if (!changesByPlace[bead.placeValue]) {
@@ -408,84 +367,84 @@ function findOptimalDecomposition(
           removes: 0,
           addHeaven: false,
           removeHeaven: false,
-        };
+        }
       }
-      if (bead.beadType === "heaven") {
-        changesByPlace[bead.placeValue].removeHeaven = true;
-        changesByPlace[bead.placeValue].removes += 5 * 10 ** bead.placeValue;
+      if (bead.beadType === 'heaven') {
+        changesByPlace[bead.placeValue].removeHeaven = true
+        changesByPlace[bead.placeValue].removes += 5 * 10 ** bead.placeValue
       } else {
-        changesByPlace[bead.placeValue].removes += 1 * 10 ** bead.placeValue;
+        changesByPlace[bead.placeValue].removes += 1 * 10 ** bead.placeValue
       }
-    });
+    })
 
     // Process places in descending order
     const places = Object.keys(changesByPlace)
       .map((p) => parseInt(p, 10))
-      .sort((a, b) => b - a);
+      .sort((a, b) => b - a)
 
     for (const place of places) {
-      const changes = changesByPlace[place];
-      const _netValue = changes.adds - changes.removes;
+      const changes = changesByPlace[place]
+      const _netValue = changes.adds - changes.removes
 
       if (changes.adds > 0 && changes.removes > 0) {
         // Complement operation - show as (add - remove)
-        decompositionTerms.push(`(${changes.adds} - ${changes.removes})`);
+        decompositionTerms.push(`(${changes.adds} - ${changes.removes})`)
       } else if (changes.adds > 0) {
         // Pure addition
         if (place === 1 && changes.adds >= 5) {
           // Five complement in ones place
-          const earthValue = changes.adds % 5;
+          const earthValue = changes.adds % 5
           if (earthValue > 0) {
-            decompositionTerms.push(`(5 - ${5 - earthValue})`);
+            decompositionTerms.push(`(5 - ${5 - earthValue})`)
           } else {
-            decompositionTerms.push(`${changes.adds}`);
+            decompositionTerms.push(`${changes.adds}`)
           }
         } else {
-          decompositionTerms.push(`${changes.adds}`);
+          decompositionTerms.push(`${changes.adds}`)
         }
       } else if (changes.removes > 0) {
         // Pure subtraction
-        decompositionTerms.push(`-${changes.removes}`);
+        decompositionTerms.push(`-${changes.removes}`)
       }
     }
 
     // If we have decomposition terms, format them properly
     if (decompositionTerms.length > 0) {
-      const compactMath = decompositionTerms.join(" + ").replace("+ -", "- ");
+      const compactMath = decompositionTerms.join(' + ').replace('+ -', '- ')
       return {
         addTerm: value,
         subtractTerm: 0,
         compactMath,
         isRecursive: false,
         decompositionTerms,
-      };
+      }
     }
   }
 
   // Fallback: Break down by place value without context
-  const decompositionTerms: string[] = [];
-  let remainingValue = value;
-  const placeValues = [100, 10, 1];
+  const decompositionTerms: string[] = []
+  let remainingValue = value
+  const placeValues = [100, 10, 1]
 
   for (const placeValue of placeValues) {
     if (remainingValue >= placeValue) {
-      const digitNeeded = Math.floor(remainingValue / placeValue);
-      remainingValue = remainingValue % placeValue;
-      decompositionTerms.push(`${digitNeeded * placeValue}`);
+      const digitNeeded = Math.floor(remainingValue / placeValue)
+      remainingValue = remainingValue % placeValue
+      decompositionTerms.push(`${digitNeeded * placeValue}`)
     }
   }
 
   // If we have decomposition terms, format them properly
   if (decompositionTerms.length > 0) {
-    const compactMath = decompositionTerms.join(" + ");
+    const compactMath = decompositionTerms.join(' + ')
 
     // For simple single complement operations, return in the expected format
     if (
       decompositionTerms.length === 1 &&
-      decompositionTerms[0].includes("(") &&
-      decompositionTerms[0].includes(" - ")
+      decompositionTerms[0].includes('(') &&
+      decompositionTerms[0].includes(' - ')
     ) {
-      const match = decompositionTerms[0].match(/\((\d+) - (\d+)\)/);
+      const match = decompositionTerms[0].match(/\((\d+) - (\d+)\)/)
       if (match) {
         return {
           addTerm: parseInt(match[1], 10),
@@ -493,7 +452,7 @@ function findOptimalDecomposition(
           compactMath: decompositionTerms[0],
           isRecursive: false,
           decompositionTerms,
-        };
+        }
       }
     }
 
@@ -503,7 +462,7 @@ function findOptimalDecomposition(
       compactMath,
       isRecursive: false,
       decompositionTerms,
-    };
+    }
   }
 
   // Fallback: use simple complement for small values
@@ -514,10 +473,10 @@ function findOptimalDecomposition(
       compactMath: `(5 - ${5 - value})`,
       isRecursive: false,
       decompositionTerms: [`(5 - ${5 - value})`],
-    };
+    }
   }
 
-  return null;
+  return null
 }
 
 // Generate recursive complement description for complex multi-place operations
@@ -525,67 +484,63 @@ function _generateRecursiveComplementDescription(
   startValue: number,
   targetValue: number,
   _additions: BeadHighlight[],
-  _removals: BeadHighlight[],
+  _removals: BeadHighlight[]
 ): string {
-  const difference = targetValue - startValue;
+  const difference = targetValue - startValue
 
   // Simulate the abacus addition step by step
-  const steps: string[] = [];
-  let carry = 0;
+  const steps: string[] = []
+  let carry = 0
 
   // Process each digit from ones to hundreds
   for (let place = 0; place <= 2; place++) {
-    const placeValue = 10 ** place;
-    const placeName = place === 0 ? "ones" : place === 1 ? "tens" : "hundreds";
+    const placeValue = 10 ** place
+    const placeName = place === 0 ? 'ones' : place === 1 ? 'tens' : 'hundreds'
 
-    const startDigit = Math.floor(startValue / placeValue) % 10;
-    const addDigit = Math.floor(difference / placeValue) % 10;
-    const totalNeeded = startDigit + addDigit + carry;
+    const startDigit = Math.floor(startValue / placeValue) % 10
+    const addDigit = Math.floor(difference / placeValue) % 10
+    const totalNeeded = startDigit + addDigit + carry
 
     if (totalNeeded === 0) {
-      carry = 0;
-      continue;
+      carry = 0
+      continue
     }
 
     if (totalNeeded >= 10) {
       // Need complement in this place
-      const finalDigit = totalNeeded % 10;
-      const newCarry = Math.floor(totalNeeded / 10);
+      const finalDigit = totalNeeded % 10
+      const newCarry = Math.floor(totalNeeded / 10)
 
       if (place === 0 && addDigit > 0) {
         // Ones place - show the actual complement operation
-        const complement = 10 - addDigit;
-        steps.push(
-          `${placeName}: ${addDigit} = 10 - ${complement} (complement creates carry)`,
-        );
+        const complement = 10 - addDigit
+        steps.push(`${placeName}: ${addDigit} = 10 - ${complement} (complement creates carry)`)
       } else if (place > 0) {
         // Higher places - show the carry logic
         if (addDigit > 0 && carry > 0) {
           steps.push(
-            `${placeName}: ${addDigit} + ${carry} carry = ${totalNeeded} = 10 - ${10 - finalDigit} (complement creates carry)`,
-          );
+            `${placeName}: ${addDigit} + ${carry} carry = ${totalNeeded} = 10 - ${10 - finalDigit} (complement creates carry)`
+          )
         } else if (carry > 0) {
-          steps.push(`${placeName}: ${carry} carry creates complement`);
+          steps.push(`${placeName}: ${carry} carry creates complement`)
         }
       }
-      carry = newCarry;
+      carry = newCarry
     } else if (totalNeeded > 0) {
       // Direct addition
       if (addDigit > 0 && carry > 0) {
-        steps.push(
-          `${placeName}: ${addDigit} + ${carry} carry = ${totalNeeded}`,
-        );
+        steps.push(`${placeName}: ${addDigit} + ${carry} carry = ${totalNeeded}`)
       } else if (addDigit > 0) {
-        steps.push(`${placeName}: add ${addDigit}`);
+        steps.push(`${placeName}: add ${addDigit}`)
       } else if (carry > 0) {
-        steps.push(`${placeName}: ${carry} carry`);
+        steps.push(`${placeName}: ${carry} carry`)
       }
-      carry = 0;
+      carry = 0
     }
   }
 
-  const breakdown = steps.join(", ");
-  return `${startValue} + ${difference} requires complements: ${breakdown}, giving us ${targetValue}`;
+  const breakdown = steps.join(', ')
+  return `${startValue} + ${difference} requires complements: ${breakdown}, giving us ${targetValue}`
 }
 
 // Generate comprehensive complement description for multi-place operations
@@ -593,90 +548,79 @@ function _generateMultiPlaceComplementDescription(
   startValue: number,
   targetValue: number,
   additions: BeadHighlight[],
-  removals: BeadHighlight[],
+  removals: BeadHighlight[]
 ): string {
-  const difference = targetValue - startValue;
+  const difference = targetValue - startValue
 
   // For simple five complement
   if (difference <= 4 && startValue < 10 && targetValue < 10) {
-    return `if ${difference} = 5 - ${5 - difference}, then ${startValue} + ${difference} = ${startValue} + (5 - ${5 - difference}) = ${targetValue}`;
+    return `if ${difference} = 5 - ${5 - difference}, then ${startValue} + ${difference} = ${startValue} + (5 - ${5 - difference}) = ${targetValue}`
   }
 
   // For multi-place operations, analyze what's happening in each place
-  const explanations: string[] = [];
+  const explanations: string[] = []
 
   // Group movements by place value
-  const placeMovements: { [place: number]: { adds: number; removes: number } } =
-    {};
+  const placeMovements: { [place: number]: { adds: number; removes: number } } = {}
 
   additions.forEach((bead) => {
-    if (!placeMovements[bead.placeValue])
-      placeMovements[bead.placeValue] = { adds: 0, removes: 0 };
-    placeMovements[bead.placeValue].adds++;
-  });
+    if (!placeMovements[bead.placeValue]) placeMovements[bead.placeValue] = { adds: 0, removes: 0 }
+    placeMovements[bead.placeValue].adds++
+  })
 
   removals.forEach((bead) => {
-    if (!placeMovements[bead.placeValue])
-      placeMovements[bead.placeValue] = { adds: 0, removes: 0 };
-    placeMovements[bead.placeValue].removes++;
-  });
+    if (!placeMovements[bead.placeValue]) placeMovements[bead.placeValue] = { adds: 0, removes: 0 }
+    placeMovements[bead.placeValue].removes++
+  })
 
   // Analyze each place value to understand the complement logic
   Object.keys(placeMovements)
     .sort((a, b) => parseInt(b, 10) - parseInt(a, 10))
     .forEach((placeStr) => {
-      const place = parseInt(placeStr, 10);
-      const movement = placeMovements[place];
+      const place = parseInt(placeStr, 10)
+      const movement = placeMovements[place]
       const placeName =
-        place === 0
-          ? "ones"
-          : place === 1
-            ? "tens"
-            : place === 2
-              ? "hundreds"
-              : `place ${place}`;
+        place === 0 ? 'ones' : place === 1 ? 'tens' : place === 2 ? 'hundreds' : `place ${place}`
 
       if (movement.adds > 0 && movement.removes === 0) {
         // Pure addition - explain why we need this place
         if (place >= 2) {
           explanations.push(
-            `hundreds place needed because we cross from ${Math.floor(startValue / 100) * 100 + 99} to ${Math.floor(targetValue / 100) * 100}`,
-          );
+            `hundreds place needed because we cross from ${Math.floor(startValue / 100) * 100 + 99} to ${Math.floor(targetValue / 100) * 100}`
+          )
         } else if (place === 1) {
-          explanations.push(`tens carry from complement operation`);
+          explanations.push(`tens carry from complement operation`)
         }
       } else if (movement.adds > 0 && movement.removes > 0) {
         // Complement operation in this place
-        const complement = movement.removes;
-        const net = movement.adds - movement.removes;
+        const complement = movement.removes
+        const net = movement.adds - movement.removes
         if (net > 0) {
-          explanations.push(
-            `${placeName}: ${net + complement} = 10 - ${10 - (net + complement)}`,
-          );
+          explanations.push(`${placeName}: ${net + complement} = 10 - ${10 - (net + complement)}`)
         }
       }
-    });
+    })
 
   // For the ones place complement, always include the traditional explanation
-  const onesMovement = placeMovements[0];
+  const onesMovement = placeMovements[0]
   if (onesMovement && onesMovement.removes > 0) {
-    const onesDigitTarget = difference % 10;
+    const onesDigitTarget = difference % 10
     if (onesDigitTarget > 0) {
-      const complement = onesMovement.removes;
-      explanations.push(`ones: ${onesDigitTarget} = 10 - ${complement}`);
+      const complement = onesMovement.removes
+      explanations.push(`ones: ${onesDigitTarget} = 10 - ${complement}`)
     }
   }
 
   // Build final explanation
   if (explanations.length > 0) {
-    const breakdown = explanations.join(", ");
-    return `${startValue} + ${difference} requires complements: ${breakdown}, giving us ${targetValue}`;
+    const breakdown = explanations.join(', ')
+    return `${startValue} + ${difference} requires complements: ${breakdown}, giving us ${targetValue}`
   }
 
   // Fallback for simple ten complement
-  const targetDifference = difference % 10;
-  const complement = 10 - targetDifference;
-  return `if ${targetDifference} = 10 - ${complement}, then ${startValue} + ${targetDifference} = ${startValue} + (10 - ${complement}) = ${startValue + targetDifference}`;
+  const targetDifference = difference % 10
+  const complement = 10 - targetDifference
+  return `if ${targetDifference} = 10 - ${complement}, then ${startValue} + ${targetDifference} = ${startValue} + (10 - ${complement}) = ${startValue + targetDifference}`
 }
 
 // Generate traditional abacus complement description
@@ -684,32 +628,32 @@ function generateComplementDescription(
   startValue: number,
   _targetValue: number,
   difference: number,
-  complementType: "five" | "ten",
+  complementType: 'five' | 'ten',
   _addValue: number,
-  _subtractValue: number,
+  _subtractValue: number
 ): string {
   // Use the same logic as generateProperComplementDescription for consistency
-  const decomposition = findOptimalDecomposition(difference, { startValue });
+  const decomposition = findOptimalDecomposition(difference, { startValue })
 
   if (decomposition) {
-    const { addTerm, subtractTerm, compactMath, isRecursive } = decomposition;
+    const { addTerm, subtractTerm, compactMath, isRecursive } = decomposition
 
     if (isRecursive) {
       // For recursive cases like 99 + 1, provide the full breakdown
-      return `if ${difference} = ${compactMath.replace(/[()]/g, "")}, then ${startValue} + ${difference} = ${startValue} + ${compactMath}`;
+      return `if ${difference} = ${compactMath.replace(/[()]/g, '')}, then ${startValue} + ${difference} = ${startValue} + ${compactMath}`
     } else {
       // For simple complement cases
-      return `if ${difference} = ${addTerm} - ${subtractTerm}, then ${startValue} + ${difference} = ${startValue} + (${addTerm} - ${subtractTerm})`;
+      return `if ${difference} = ${addTerm} - ${subtractTerm}, then ${startValue} + ${difference} = ${startValue} + (${addTerm} - ${subtractTerm})`
     }
   }
 
   // Fallback to old logic if no decomposition found
-  if (complementType === "five") {
-    return `if ${difference} = 5 - ${5 - difference}, then ${startValue} + ${difference} = ${startValue} + (5 - ${5 - difference})`;
+  if (complementType === 'five') {
+    return `if ${difference} = 5 - ${5 - difference}, then ${startValue} + ${difference} = ${startValue} + (5 - ${5 - difference})`
   } else {
-    const targetDifference = difference % 10;
-    const complement = 10 - targetDifference;
-    return `if ${targetDifference} = 10 - ${complement}, then ${startValue} + ${targetDifference} = ${startValue} + (10 - ${complement})`;
+    const targetDifference = difference % 10
+    const complement = 10 - targetDifference
+    return `if ${targetDifference} = 10 - ${complement}, then ${startValue} + ${targetDifference} = ${startValue} + (10 - ${complement})`
   }
 }
 
@@ -717,35 +661,34 @@ function generateComplementDescription(
 export function detectComplementOperation(
   startValue: number,
   targetValue: number,
-  placeValue: number,
+  placeValue: number
 ): {
-  needsComplement: boolean;
-  complementType: "five" | "ten" | "none";
+  needsComplement: boolean
+  complementType: 'five' | 'ten' | 'none'
   complementDetails?: {
-    addValue: number;
-    subtractValue: number;
-    description: string;
-  };
+    addValue: number
+    subtractValue: number
+    description: string
+  }
 } {
-  const difference = targetValue - startValue;
+  const difference = targetValue - startValue
 
   // Ten complement detection (carrying to next place) - check this FIRST
   if (difference > 0) {
     // Check if we're crossing a multiple of 10 boundary
-    const startDigit = startValue % 10;
-    const _targetDigit = targetValue % 10;
+    const startDigit = startValue % 10
+    const _targetDigit = targetValue % 10
 
     // If we go from single digits to teens, or cross any 10s boundary with insufficient space
     if (
       (startValue < 10 && targetValue >= 10) ||
-      (startDigit + difference > 9 &&
-        Math.floor(startValue / 10) !== Math.floor(targetValue / 10))
+      (startDigit + difference > 9 && Math.floor(startValue / 10) !== Math.floor(targetValue / 10))
     ) {
-      const addValue = 10;
-      const subtractValue = 10 - (difference % 10);
+      const addValue = 10
+      const subtractValue = 10 - (difference % 10)
       return {
         needsComplement: true,
-        complementType: "ten",
+        complementType: 'ten',
         complementDetails: {
           addValue,
           subtractValue,
@@ -753,31 +696,26 @@ export function detectComplementOperation(
             startValue,
             targetValue,
             difference,
-            "ten",
+            'ten',
             addValue,
-            subtractValue,
+            subtractValue
           ),
         },
-      };
+      }
     }
   }
 
   // Five complement detection (within same place)
   if (placeValue === 0 && difference > 0) {
-    const startDigit = startValue % 10;
-    const earthSpaceAvailable =
-      4 - (startDigit >= 5 ? startDigit - 5 : startDigit);
+    const startDigit = startValue % 10
+    const earthSpaceAvailable = 4 - (startDigit >= 5 ? startDigit - 5 : startDigit)
 
-    if (
-      difference > earthSpaceAvailable &&
-      difference <= 4 &&
-      targetValue < 10
-    ) {
-      const addValue = 5;
-      const subtractValue = 5 - difference;
+    if (difference > earthSpaceAvailable && difference <= 4 && targetValue < 10) {
+      const addValue = 5
+      const subtractValue = 5 - difference
       return {
         needsComplement: true,
-        complementType: "five",
+        complementType: 'five',
         complementDetails: {
           addValue,
           subtractValue,
@@ -785,211 +723,183 @@ export function detectComplementOperation(
             startValue,
             targetValue,
             difference,
-            "five",
+            'five',
             addValue,
-            subtractValue,
+            subtractValue
           ),
         },
-      };
+      }
     }
   }
 
-  return { needsComplement: false, complementType: "none" };
+  return { needsComplement: false, complementType: 'none' }
 }
 
 // Generate step-by-step instructions
 export function generateStepInstructions(
   additions: BeadHighlight[],
   removals: BeadHighlight[],
-  isComplement: boolean,
+  isComplement: boolean
 ): string[] {
-  const instructions: string[] = [];
+  const instructions: string[] = []
 
   if (isComplement) {
     // For complement operations, order matters: additions first, then removals
     additions.forEach((bead) => {
       const placeDesc =
         bead.placeValue === 0
-          ? "ones"
+          ? 'ones'
           : bead.placeValue === 1
-            ? "tens"
+            ? 'tens'
             : bead.placeValue === 2
-              ? "hundreds"
-              : `place ${bead.placeValue}`;
+              ? 'hundreds'
+              : `place ${bead.placeValue}`
 
-      if (bead.beadType === "heaven") {
-        instructions.push(
-          `Click the heaven bead in the ${placeDesc} column to add it`,
-        );
+      if (bead.beadType === 'heaven') {
+        instructions.push(`Click the heaven bead in the ${placeDesc} column to add it`)
       } else {
         instructions.push(
-          `Click earth bead ${bead.position! + 1} in the ${placeDesc} column to add it`,
-        );
+          `Click earth bead ${bead.position! + 1} in the ${placeDesc} column to add it`
+        )
       }
-    });
+    })
 
     removals.forEach((bead) => {
       const placeDesc =
         bead.placeValue === 0
-          ? "ones"
+          ? 'ones'
           : bead.placeValue === 1
-            ? "tens"
+            ? 'tens'
             : bead.placeValue === 2
-              ? "hundreds"
-              : `place ${bead.placeValue}`;
+              ? 'hundreds'
+              : `place ${bead.placeValue}`
 
-      if (bead.beadType === "heaven") {
-        instructions.push(
-          `Click the heaven bead in the ${placeDesc} column to remove it`,
-        );
+      if (bead.beadType === 'heaven') {
+        instructions.push(`Click the heaven bead in the ${placeDesc} column to remove it`)
       } else {
         instructions.push(
-          `Click earth bead ${bead.position! + 1} in the ${placeDesc} column to remove it`,
-        );
+          `Click earth bead ${bead.position! + 1} in the ${placeDesc} column to remove it`
+        )
       }
-    });
+    })
   } else {
     // For non-complement operations, handle both additions and removals
     additions.forEach((bead) => {
       const placeDesc =
         bead.placeValue === 0
-          ? "ones"
+          ? 'ones'
           : bead.placeValue === 1
-            ? "tens"
+            ? 'tens'
             : bead.placeValue === 2
-              ? "hundreds"
-              : `place ${bead.placeValue}`;
+              ? 'hundreds'
+              : `place ${bead.placeValue}`
 
-      if (bead.beadType === "heaven") {
-        instructions.push(
-          `Click the heaven bead in the ${placeDesc} column to add it`,
-        );
+      if (bead.beadType === 'heaven') {
+        instructions.push(`Click the heaven bead in the ${placeDesc} column to add it`)
       } else {
         instructions.push(
-          `Click earth bead ${bead.position! + 1} in the ${placeDesc} column to add it`,
-        );
+          `Click earth bead ${bead.position! + 1} in the ${placeDesc} column to add it`
+        )
       }
-    });
+    })
 
     removals.forEach((bead) => {
       const placeDesc =
         bead.placeValue === 0
-          ? "ones"
+          ? 'ones'
           : bead.placeValue === 1
-            ? "tens"
+            ? 'tens'
             : bead.placeValue === 2
-              ? "hundreds"
-              : `place ${bead.placeValue}`;
+              ? 'hundreds'
+              : `place ${bead.placeValue}`
 
-      if (bead.beadType === "heaven") {
-        instructions.push(
-          `Click the heaven bead in the ${placeDesc} column to remove it`,
-        );
+      if (bead.beadType === 'heaven') {
+        instructions.push(`Click the heaven bead in the ${placeDesc} column to remove it`)
       } else {
         instructions.push(
-          `Click earth bead ${bead.position! + 1} in the ${placeDesc} column to remove it`,
-        );
+          `Click earth bead ${bead.position! + 1} in the ${placeDesc} column to remove it`
+        )
       }
-    });
+    })
   }
 
   // Always return at least one instruction, even if empty
   if (instructions.length === 0) {
-    instructions.push("No bead movements required");
+    instructions.push('No bead movements required')
   }
 
-  return instructions;
+  return instructions
 }
 
 // Main function to generate complete instructions
 export function generateAbacusInstructions(
   startValue: number,
   targetValue: number,
-  operation?: string,
+  operation?: string
 ): GeneratedInstruction {
-  const startState = numberToAbacusState(startValue);
-  const targetState = numberToAbacusState(targetValue);
-  const { additions, removals, placeValue } = calculateBeadChanges(
-    startState,
-    targetState,
-  );
-  const complement = detectComplementOperation(
-    startValue,
-    targetValue,
-    placeValue,
-  );
+  const startState = numberToAbacusState(startValue)
+  const targetState = numberToAbacusState(targetValue)
+  const { additions, removals, placeValue } = calculateBeadChanges(startState, targetState)
+  const complement = detectComplementOperation(startValue, targetValue, placeValue)
 
-  const difference = targetValue - startValue;
-  const isAddition = difference > 0;
-  const operationSymbol = isAddition ? "+" : "-";
-  const operationWord = isAddition ? "add" : "subtract";
-  const _actualOperation =
-    operation || `${startValue} ${operationSymbol} ${Math.abs(difference)}`;
+  const difference = targetValue - startValue
+  const isAddition = difference > 0
+  const operationSymbol = isAddition ? '+' : '-'
+  const operationWord = isAddition ? 'add' : 'subtract'
+  const _actualOperation = operation || `${startValue} ${operationSymbol} ${Math.abs(difference)}`
   // Always calculate the correct operation for the hint message, regardless of passed operation
-  const correctOperation = `${startValue} ${operationSymbol} ${Math.abs(difference)}`;
+  const correctOperation = `${startValue} ${operationSymbol} ${Math.abs(difference)}`
 
   // Combine all beads that need to be highlighted
-  const allHighlights = [...additions, ...removals];
+  const allHighlights = [...additions, ...removals]
 
   // Handle zero difference case
   if (difference === 0) {
     return {
       highlightBeads: [],
-      expectedAction: "add",
-      actionDescription: "No change needed - already at target value",
+      expectedAction: 'add',
+      actionDescription: 'No change needed - already at target value',
       tooltip: {
-        content: "No Operation Required",
-        explanation: "The abacus already shows the target value",
+        content: 'No Operation Required',
+        explanation: 'The abacus already shows the target value',
       },
       errorMessages: {
-        wrongBead: "No beads need to be moved",
-        wrongAction: "No action required",
+        wrongBead: 'No beads need to be moved',
+        wrongAction: 'No action required',
         hint: `${startValue} is already at the target value`,
       },
-    };
+    }
   }
 
   // Determine action type
-  const actionType =
-    allHighlights.length === 1 ? (isAddition ? "add" : "remove") : "multi-step";
+  const actionType = allHighlights.length === 1 ? (isAddition ? 'add' : 'remove') : 'multi-step'
 
   // Generate action description
-  let actionDescription: string;
-  let stepInstructions: string[];
-  let decomposition: any = null;
-  let stepBeadMapping: StepBeadHighlight[] | undefined;
+  let actionDescription: string
+  let stepInstructions: string[]
+  let decomposition: any = null
+  let stepBeadMapping: StepBeadHighlight[] | undefined
 
   // Check if this is a complex multi-place operation requiring comprehensive explanation
-  const hasMultiplePlaces =
-    new Set(allHighlights.map((bead) => bead.placeValue)).size > 1;
-  const hasComplementMovements = additions.length > 0 && removals.length > 0;
-  const crossesHundreds =
-    Math.floor(startValue / 100) !== Math.floor(targetValue / 100);
+  const hasMultiplePlaces = new Set(allHighlights.map((bead) => bead.placeValue)).size > 1
+  const hasComplementMovements = additions.length > 0 && removals.length > 0
+  const crossesHundreds = Math.floor(startValue / 100) !== Math.floor(targetValue / 100)
 
   if (hasMultiplePlaces && hasComplementMovements && crossesHundreds) {
     // Use proper complement breakdown for complex operations
-    const result = generateProperComplementDescription(
-      startValue,
-      targetValue,
-      additions,
-      removals,
-    );
-    actionDescription = result.description;
-    decomposition = result.decomposition;
+    const result = generateProperComplementDescription(startValue, targetValue, additions, removals)
+    actionDescription = result.description
+    decomposition = result.decomposition
     // First generate step bead mapping to understand step groupings
-    const tempStepInstructions = generateStepInstructions(
-      additions,
-      removals,
-      false,
-    );
+    const tempStepInstructions = generateStepInstructions(additions, removals, false)
     stepBeadMapping = generateStepBeadMapping(
       startValue,
       targetValue,
       additions,
       removals,
       decomposition,
-      tempStepInstructions,
-    );
+      tempStepInstructions
+    )
     // Then generate enhanced instructions based on step groupings
     stepInstructions = generateEnhancedStepInstructions(
       startValue,
@@ -997,32 +907,23 @@ export function generateAbacusInstructions(
       additions,
       removals,
       decomposition,
-      stepBeadMapping,
-    );
+      stepBeadMapping
+    )
   } else if (complement.needsComplement) {
     // Use proper complement breakdown for simple operations too
-    const result = generateProperComplementDescription(
-      startValue,
-      targetValue,
-      additions,
-      removals,
-    );
-    actionDescription = result.description;
-    decomposition = result.decomposition;
+    const result = generateProperComplementDescription(startValue, targetValue, additions, removals)
+    actionDescription = result.description
+    decomposition = result.decomposition
     // First generate step bead mapping to understand step groupings
-    const tempStepInstructions = generateStepInstructions(
-      additions,
-      removals,
-      false,
-    );
+    const tempStepInstructions = generateStepInstructions(additions, removals, false)
     stepBeadMapping = generateStepBeadMapping(
       startValue,
       targetValue,
       additions,
       removals,
       decomposition,
-      tempStepInstructions,
-    );
+      tempStepInstructions
+    )
     // Then generate enhanced instructions based on step groupings
     stepInstructions = generateEnhancedStepInstructions(
       startValue,
@@ -1030,51 +931,43 @@ export function generateAbacusInstructions(
       additions,
       removals,
       decomposition,
-      stepBeadMapping,
-    );
+      stepBeadMapping
+    )
   } else if (additions.length === 1 && removals.length === 0) {
-    const bead = additions[0];
-    actionDescription = `Click the ${bead.beadType} bead to ${operationWord} ${Math.abs(difference)}`;
-    stepInstructions = generateStepInstructions(additions, removals, false);
+    const bead = additions[0]
+    actionDescription = `Click the ${bead.beadType} bead to ${operationWord} ${Math.abs(difference)}`
+    stepInstructions = generateStepInstructions(additions, removals, false)
   } else if (additions.length > 1 && removals.length === 0) {
-    actionDescription = `Click ${additions.length} beads to ${operationWord} ${Math.abs(difference)}`;
-    stepInstructions = generateStepInstructions(additions, removals, false);
+    actionDescription = `Click ${additions.length} beads to ${operationWord} ${Math.abs(difference)}`
+    stepInstructions = generateStepInstructions(additions, removals, false)
   } else {
-    actionDescription = `Multi-step operation: ${operationWord} ${Math.abs(difference)}`;
-    stepInstructions = generateStepInstructions(
-      additions,
-      removals,
-      complement.needsComplement,
-    );
+    actionDescription = `Multi-step operation: ${operationWord} ${Math.abs(difference)}`
+    stepInstructions = generateStepInstructions(additions, removals, complement.needsComplement)
   }
 
   // Generate tooltip
   const tooltip = {
     content: complement.needsComplement
-      ? `${complement.complementType === "five" ? "Five" : "Ten"} Complement Operation`
-      : `Direct ${isAddition ? "Addition" : "Subtraction"}`,
+      ? `${complement.complementType === 'five' ? 'Five' : 'Ten'} Complement Operation`
+      : `Direct ${isAddition ? 'Addition' : 'Subtraction'}`,
     explanation: complement.needsComplement
       ? `When direct ${operationWord} isn't possible, use complement: ${complement.complementDetails!.description}`
-      : `${isAddition ? "Add" : "Remove"} beads directly to represent ${Math.abs(difference)}`,
-  };
+      : `${isAddition ? 'Add' : 'Remove'} beads directly to represent ${Math.abs(difference)}`,
+  }
 
   // Generate error messages
   const errorMessages = {
     wrongBead: complement.needsComplement
-      ? "Follow the complement sequence: " +
-        (additions.length > 0
-          ? "add first, then remove"
-          : "use the highlighted beads")
-      : `Click the highlighted ${allHighlights.length === 1 ? "bead" : "beads"}`,
+      ? 'Follow the complement sequence: ' +
+        (additions.length > 0 ? 'add first, then remove' : 'use the highlighted beads')
+      : `Click the highlighted ${allHighlights.length === 1 ? 'bead' : 'beads'}`,
     wrongAction: complement.needsComplement
       ? `Use ${complement.complementType} complement method`
-      : `${isAddition ? "Move beads UP to add" : "Move beads DOWN to remove"}`,
+      : `${isAddition ? 'Move beads UP to add' : 'Move beads DOWN to remove'}`,
     hint:
       `${correctOperation} = ${targetValue}` +
-      (complement.needsComplement
-        ? `, using ${complement.complementDetails!.description}`
-        : ""),
-  };
+      (complement.needsComplement ? `, using ${complement.complementDetails!.description}` : ''),
+  }
 
   // Generate step-by-step bead mapping for ALL instructions (both single and multi-step)
   const stepBeadHighlights =
@@ -1086,101 +979,97 @@ export function generateAbacusInstructions(
           additions,
           removals,
           decomposition,
-          stepInstructions,
+          stepInstructions
         )
-      : undefined);
+      : undefined)
 
   return {
     highlightBeads: allHighlights,
     expectedAction: actionType,
     actionDescription,
-    multiStepInstructions:
-      actionType === "multi-step" ? stepInstructions : undefined,
+    multiStepInstructions: actionType === 'multi-step' ? stepInstructions : undefined,
     stepBeadHighlights,
     totalSteps: stepInstructions ? stepInstructions.length : undefined,
     tooltip,
     errorMessages,
-  };
+  }
 }
 
 // Utility function to validate generated instructions
 export function validateInstruction(
   instruction: GeneratedInstruction,
   startValue: number,
-  targetValue: number,
+  targetValue: number
 ): {
-  isValid: boolean;
-  issues: string[];
+  isValid: boolean
+  issues: string[]
 } {
-  const issues: string[] = [];
+  const issues: string[] = []
 
   // Check if highlights exist (only if values are different)
   if (
     startValue !== targetValue &&
     (!instruction.highlightBeads || instruction.highlightBeads.length === 0)
   ) {
-    issues.push("No beads highlighted for non-zero operation");
+    issues.push('No beads highlighted for non-zero operation')
   }
 
   // Check for multi-step consistency
-  if (
-    instruction.expectedAction === "multi-step" &&
-    !instruction.multiStepInstructions
-  ) {
-    issues.push("Multi-step action without step instructions");
+  if (instruction.expectedAction === 'multi-step' && !instruction.multiStepInstructions) {
+    issues.push('Multi-step action without step instructions')
   }
 
   // Check place value validity
   instruction.highlightBeads.forEach((bead) => {
     if (bead.placeValue < 0 || bead.placeValue > 4) {
-      issues.push(`Invalid place value: ${bead.placeValue}`);
+      issues.push(`Invalid place value: ${bead.placeValue}`)
     }
 
     if (
-      bead.beadType === "earth" &&
+      bead.beadType === 'earth' &&
       (bead.position === undefined || bead.position < 0 || bead.position > 3)
     ) {
-      issues.push(`Invalid earth bead position: ${bead.position}`);
+      issues.push(`Invalid earth bead position: ${bead.position}`)
     }
-  });
+  })
 
   return {
     isValid: issues.length === 0,
     issues,
-  };
+  }
 }
 
 // Example usage and testing
 export function testInstructionGenerator(): void {
-  console.log("🧪 Testing Automatic Instruction Generator\n");
+  console.log('🧪 Testing Automatic Instruction Generator\n')
 
   const testCases = [
-    { start: 0, target: 1, description: "Basic addition" },
-    { start: 0, target: 5, description: "Heaven bead introduction" },
-    { start: 3, target: 7, description: "Five complement (3+4)" },
-    { start: 2, target: 5, description: "Five complement (2+3)" },
-    { start: 6, target: 8, description: "Direct addition" },
-    { start: 7, target: 11, description: "Ten complement" },
-    { start: 5, target: 2, description: "Subtraction" },
-    { start: 12, target: 25, description: "Multi-place operation" },
-  ];
+    { start: 0, target: 1, description: 'Basic addition' },
+    { start: 0, target: 5, description: 'Heaven bead introduction' },
+    { start: 3, target: 7, description: 'Five complement (3+4)' },
+    { start: 2, target: 5, description: 'Five complement (2+3)' },
+    { start: 6, target: 8, description: 'Direct addition' },
+    { start: 7, target: 11, description: 'Ten complement' },
+    { start: 5, target: 2, description: 'Subtraction' },
+    { start: 12, target: 25, description: 'Multi-place operation' },
+  ]
 
   testCases.forEach(({ start, target, description }, index) => {
-    console.log(`\n${index + 1}. ${description}: ${start} → ${target}`);
-    const instruction = generateAbacusInstructions(start, target);
-    console.log(`   Action: ${instruction.actionDescription}`);
-    console.log(`   Highlights: ${instruction.highlightBeads.length} beads`);
-    console.log(`   Type: ${instruction.expectedAction}`);
+    console.log(`\n${index + 1}. ${description}: ${start} → ${target}`)
+    const instruction = generateAbacusInstructions(start, target)
+    console.log(`   Action: ${instruction.actionDescription}`)
+    console.log(`   Highlights: ${instruction.highlightBeads.length} beads`)
+    console.log(`   Type: ${instruction.expectedAction}`)
 
     if (instruction.multiStepInstructions) {
-      console.log(`   Steps: ${instruction.multiStepInstructions.length}`);
+      console.log(`   Steps: ${instruction.multiStepInstructions.length}`)
     }
 
-    const validation = validateInstruction(instruction, start, target);
-    console.log(`   Valid: ${validation.isValid ? "✅" : "❌"}`);
+    const validation = validateInstruction(instruction, start, target)
+    console.log(`   Valid: ${validation.isValid ? '✅' : '❌'}`)
 
     if (!validation.isValid) {
-      console.log(`   Issues: ${validation.issues.join(", ")}`);
+      console.log(`   Issues: ${validation.issues.join(', ')}`)
     }
-  });
+  })
 }
diff --git a/apps/web/src/utils/beadDiff.ts b/apps/web/src/utils/beadDiff.ts
index f1e58ce4..07745939 100644
--- a/apps/web/src/utils/beadDiff.ts
+++ b/apps/web/src/utils/beadDiff.ts
@@ -9,14 +9,10 @@ export {
   areStatesEqual,
   type AbacusState,
   type BeadState,
-} from "@soroban/abacus-react";
+} from '@soroban/abacus-react'
 
-import type {
-  BeadDiffOutput,
-  BeadDiffResult,
-  AbacusState,
-} from "@soroban/abacus-react";
-import { calculateBeadDiffFromValues } from "@soroban/abacus-react";
+import type { BeadDiffOutput, BeadDiffResult, AbacusState } from '@soroban/abacus-react'
+import { calculateBeadDiffFromValues } from '@soroban/abacus-react'
 
 /**
  * Calculate step-by-step bead diffs for multi-step operations
@@ -27,19 +23,19 @@ import { calculateBeadDiffFromValues } from "@soroban/abacus-react";
  */
 export function calculateMultiStepBeadDiffs(
   startValue: number,
-  steps: Array<{ expectedValue: number; instruction: string }>,
+  steps: Array<{ expectedValue: number; instruction: string }>
 ): Array<{
-  stepIndex: number;
-  instruction: string;
-  diff: BeadDiffOutput;
-  fromValue: number;
-  toValue: number;
+  stepIndex: number
+  instruction: string
+  diff: BeadDiffOutput
+  fromValue: number
+  toValue: number
 }> {
-  const stepDiffs = [];
-  let currentValue = startValue;
+  const stepDiffs = []
+  let currentValue = startValue
 
   steps.forEach((step, index) => {
-    const diff = calculateBeadDiffFromValues(currentValue, step.expectedValue);
+    const diff = calculateBeadDiffFromValues(currentValue, step.expectedValue)
 
     stepDiffs.push({
       stepIndex: index,
@@ -47,12 +43,12 @@ export function calculateMultiStepBeadDiffs(
       diff,
       fromValue: currentValue,
       toValue: step.expectedValue,
-    });
+    })
 
-    currentValue = step.expectedValue;
-  });
+    currentValue = step.expectedValue
+  })
 
-  return stepDiffs;
+  return stepDiffs
 }
 
 /**
@@ -61,51 +57,47 @@ export function calculateMultiStepBeadDiffs(
  * APP-SPECIFIC FUNCTION - not in core abacus-react
  */
 export function validateBeadDiff(diff: BeadDiffOutput): {
-  isValid: boolean;
-  errors: string[];
+  isValid: boolean
+  errors: string[]
 } {
-  const errors: string[] = [];
+  const errors: string[] = []
 
   // Check for impossible earth bead counts
-  const earthChanges = diff.changes.filter((c) => c.beadType === "earth");
-  const earthByPlace = groupByPlace(earthChanges);
+  const earthChanges = diff.changes.filter((c) => c.beadType === 'earth')
+  const earthByPlace = groupByPlace(earthChanges)
 
   Object.entries(earthByPlace).forEach(([place, changes]) => {
-    const activations = changes.filter(
-      (c) => c.direction === "activate",
-    ).length;
-    const deactivations = changes.filter(
-      (c) => c.direction === "deactivate",
-    ).length;
-    const netChange = activations - deactivations;
+    const activations = changes.filter((c) => c.direction === 'activate').length
+    const deactivations = changes.filter((c) => c.direction === 'deactivate').length
+    const netChange = activations - deactivations
 
     if (netChange > 4) {
-      errors.push(`Place ${place}: Cannot have more than 4 earth beads`);
+      errors.push(`Place ${place}: Cannot have more than 4 earth beads`)
     }
     if (netChange < 0) {
-      errors.push(`Place ${place}: Cannot have negative earth beads`);
+      errors.push(`Place ${place}: Cannot have negative earth beads`)
     }
-  });
+  })
 
   return {
     isValid: errors.length === 0,
     errors,
-  };
+  }
 }
 
 // Helper function for validation
 function groupByPlace(changes: BeadDiffResult[]): {
-  [place: string]: BeadDiffResult[];
+  [place: string]: BeadDiffResult[]
 } {
   return changes.reduce(
     (groups, change) => {
-      const place = change.placeValue.toString();
+      const place = change.placeValue.toString()
       if (!groups[place]) {
-        groups[place] = [];
+        groups[place] = []
       }
-      groups[place].push(change);
-      return groups;
+      groups[place].push(change)
+      return groups
     },
-    {} as { [place: string]: BeadDiffResult[] },
-  );
+    {} as { [place: string]: BeadDiffResult[] }
+  )
 }
diff --git a/apps/web/src/utils/calendar/generateCalendarAbacus.tsx b/apps/web/src/utils/calendar/generateCalendarAbacus.tsx
index cc48b172..3ab36c05 100644
--- a/apps/web/src/utils/calendar/generateCalendarAbacus.tsx
+++ b/apps/web/src/utils/calendar/generateCalendarAbacus.tsx
@@ -3,8 +3,8 @@
  * Uses AbacusStatic for server-side rendering (no client hooks)
  */
 
-import React from "react";
-import { AbacusStatic } from "@soroban/abacus-react/static";
+import React from 'react'
+import { AbacusStatic } from '@soroban/abacus-react/static'
 
 export function generateAbacusElement(value: number, columns: number) {
   return (
@@ -15,5 +15,5 @@ export function generateAbacusElement(value: number, columns: number) {
       showNumbers={false}
       frameVisible={true}
     />
-  );
+  )
 }
diff --git a/apps/web/src/utils/calendar/generateCalendarComposite.tsx b/apps/web/src/utils/calendar/generateCalendarComposite.tsx
index 2112ad5f..bd5b4a1f 100644
--- a/apps/web/src/utils/calendar/generateCalendarComposite.tsx
+++ b/apps/web/src/utils/calendar/generateCalendarComposite.tsx
@@ -3,64 +3,59 @@
  * This prevents multi-page overflow - one image scales to fit
  */
 
-import type React from "react";
-import {
-  AbacusStatic,
-  calculateAbacusDimensions,
-} from "@soroban/abacus-react/static";
+import type React from 'react'
+import { AbacusStatic, calculateAbacusDimensions } from '@soroban/abacus-react/static'
 
 interface CalendarCompositeOptions {
-  month: number;
-  year: number;
-  renderToString: (element: React.ReactElement) => string;
+  month: number
+  year: number
+  renderToString: (element: React.ReactElement) => string
 }
 
 const MONTH_NAMES = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December",
-];
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
 
-const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
 
 function getDaysInMonth(year: number, month: number): number {
-  return new Date(year, month, 0).getDate();
+  return new Date(year, month, 0).getDate()
 }
 
 function getFirstDayOfWeek(year: number, month: number): number {
-  return new Date(year, month - 1, 1).getDay();
+  return new Date(year, month - 1, 1).getDay()
 }
 
-export function generateCalendarComposite(
-  options: CalendarCompositeOptions,
-): string {
-  const { month, year, renderToString } = options;
-  const daysInMonth = getDaysInMonth(year, month);
-  const firstDayOfWeek = getFirstDayOfWeek(year, month);
-  const monthName = MONTH_NAMES[month - 1];
+export function generateCalendarComposite(options: CalendarCompositeOptions): string {
+  const { month, year, renderToString } = options
+  const daysInMonth = getDaysInMonth(year, month)
+  const firstDayOfWeek = getFirstDayOfWeek(year, month)
+  const monthName = MONTH_NAMES[month - 1]
 
   // Layout constants for US Letter aspect ratio (8.5 x 11)
-  const WIDTH = 850;
-  const HEIGHT = 1100;
-  const MARGIN = 50;
-  const CONTENT_WIDTH = WIDTH - MARGIN * 2;
-  const CONTENT_HEIGHT = HEIGHT - MARGIN * 2;
+  const WIDTH = 850
+  const HEIGHT = 1100
+  const MARGIN = 50
+  const CONTENT_WIDTH = WIDTH - MARGIN * 2
+  const CONTENT_HEIGHT = HEIGHT - MARGIN * 2
 
   // Abacus natural size is 120x230 at scale=1
-  const ABACUS_NATURAL_WIDTH = 120;
-  const ABACUS_NATURAL_HEIGHT = 230;
+  const ABACUS_NATURAL_WIDTH = 120
+  const ABACUS_NATURAL_HEIGHT = 230
 
   // Calculate how many columns needed for year
-  const yearColumns = Math.max(1, Math.ceil(Math.log10(year + 1)));
+  const yearColumns = Math.max(1, Math.ceil(Math.log10(year + 1)))
 
   // Year abacus dimensions (calculate first to determine header height)
   // Use the shared dimension calculator so we stay in sync with AbacusStatic
@@ -69,56 +64,51 @@ export function generateCalendarComposite(
       columns: yearColumns,
       showNumbers: false,
       columnLabels: [],
-    });
+    })
 
-  const yearAbacusDisplayWidth = WIDTH * 0.15; // Display size on page
+  const yearAbacusDisplayWidth = WIDTH * 0.15 // Display size on page
   const yearAbacusDisplayHeight =
-    (yearAbacusActualHeight / yearAbacusActualWidth) * yearAbacusDisplayWidth;
+    (yearAbacusActualHeight / yearAbacusActualWidth) * yearAbacusDisplayWidth
 
   // Header - sized to fit month name + year abacus
-  const MONTH_NAME_HEIGHT = 40;
-  const HEADER_HEIGHT = MONTH_NAME_HEIGHT + yearAbacusDisplayHeight + 20; // 20px spacing
-  const TITLE_Y = MARGIN + 35;
-  const yearAbacusX = (WIDTH - yearAbacusDisplayWidth) / 2;
-  const yearAbacusY = TITLE_Y + 10;
+  const MONTH_NAME_HEIGHT = 40
+  const HEADER_HEIGHT = MONTH_NAME_HEIGHT + yearAbacusDisplayHeight + 20 // 20px spacing
+  const TITLE_Y = MARGIN + 35
+  const yearAbacusX = (WIDTH - yearAbacusDisplayWidth) / 2
+  const yearAbacusY = TITLE_Y + 10
 
   // Calendar grid
-  const GRID_START_Y = MARGIN + HEADER_HEIGHT;
-  const GRID_HEIGHT = CONTENT_HEIGHT - HEADER_HEIGHT;
-  const WEEKDAY_ROW_HEIGHT = 25;
-  const DAY_GRID_HEIGHT = GRID_HEIGHT - WEEKDAY_ROW_HEIGHT;
+  const GRID_START_Y = MARGIN + HEADER_HEIGHT
+  const GRID_HEIGHT = CONTENT_HEIGHT - HEADER_HEIGHT
+  const WEEKDAY_ROW_HEIGHT = 25
+  const DAY_GRID_HEIGHT = GRID_HEIGHT - WEEKDAY_ROW_HEIGHT
 
   // 7 columns, up to 6 rows (35 cells max = 5 empty + 30 days worst case)
-  const CELL_WIDTH = CONTENT_WIDTH / 7;
-  const DAY_CELL_HEIGHT = DAY_GRID_HEIGHT / 6;
+  const CELL_WIDTH = CONTENT_WIDTH / 7
+  const DAY_CELL_HEIGHT = DAY_GRID_HEIGHT / 6
 
   // Day abacus sizing - fit in cell with padding
-  const CELL_PADDING = 5;
+  const CELL_PADDING = 5
 
   // Calculate max scale to fit in cell
-  const MAX_SCALE_X = (CELL_WIDTH - CELL_PADDING * 2) / ABACUS_NATURAL_WIDTH;
-  const MAX_SCALE_Y =
-    (DAY_CELL_HEIGHT - CELL_PADDING * 2) / ABACUS_NATURAL_HEIGHT;
-  const ABACUS_SCALE = Math.min(MAX_SCALE_X, MAX_SCALE_Y) * 0.9; // 90% to leave breathing room
+  const MAX_SCALE_X = (CELL_WIDTH - CELL_PADDING * 2) / ABACUS_NATURAL_WIDTH
+  const MAX_SCALE_Y = (DAY_CELL_HEIGHT - CELL_PADDING * 2) / ABACUS_NATURAL_HEIGHT
+  const ABACUS_SCALE = Math.min(MAX_SCALE_X, MAX_SCALE_Y) * 0.9 // 90% to leave breathing room
 
-  const SCALED_ABACUS_WIDTH = ABACUS_NATURAL_WIDTH * ABACUS_SCALE;
-  const SCALED_ABACUS_HEIGHT = ABACUS_NATURAL_HEIGHT * ABACUS_SCALE;
+  const SCALED_ABACUS_WIDTH = ABACUS_NATURAL_WIDTH * ABACUS_SCALE
+  const SCALED_ABACUS_HEIGHT = ABACUS_NATURAL_HEIGHT * ABACUS_SCALE
 
   // Generate calendar grid
-  const calendarCells: (number | null)[] = [];
+  const calendarCells: (number | null)[] = []
   for (let i = 0; i < firstDayOfWeek; i++) {
-    calendarCells.push(null);
+    calendarCells.push(null)
   }
   for (let day = 1; day <= daysInMonth; day++) {
-    calendarCells.push(day);
+    calendarCells.push(day)
   }
 
   // Render individual abacus SVGs as complete SVG elements
-  function renderAbacusSVG(
-    value: number,
-    columns: number,
-    scale: number,
-  ): string {
+  function renderAbacusSVG(value: number, columns: number, scale: number): string {
     return renderToString(
       <AbacusStatic
         value={value}
@@ -131,8 +121,8 @@ export function generateCalendarComposite(
         cropToActiveBeads={{
           padding: { top: 8, bottom: 2, left: 5, right: 5 },
         }}
-      />,
-    );
+      />
+    )
   }
 
   // Main composite SVG
@@ -147,14 +137,12 @@ export function generateCalendarComposite(
 
   <!-- Year Abacus (centered below month name) -->
   ${(() => {
-    const yearAbacusSVG = renderAbacusSVG(year, yearColumns, 1);
-    const yearAbacusContent = yearAbacusSVG
-      .replace(/<svg[^>]*>/, "")
-      .replace(/<\/svg>$/, "");
+    const yearAbacusSVG = renderAbacusSVG(year, yearColumns, 1)
+    const yearAbacusContent = yearAbacusSVG.replace(/<svg[^>]*>/, '').replace(/<\/svg>$/, '')
     return `<svg x="${yearAbacusX}" y="${yearAbacusY}" width="${yearAbacusDisplayWidth}" height="${yearAbacusDisplayHeight}"
          viewBox="0 0 ${yearAbacusActualWidth} ${yearAbacusActualHeight}">
     ${yearAbacusContent}
-  </svg>`;
+  </svg>`
   })()}
 
   <!-- Weekday Headers -->
@@ -163,8 +151,8 @@ export function generateCalendarComposite(
   <text x="${MARGIN + i * CELL_WIDTH + CELL_WIDTH / 2}" y="${GRID_START_Y + 18}"
         text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="#555">
     ${day}
-  </text>`,
-  ).join("")}
+  </text>`
+  ).join('')}
 
   <!-- Separator line under weekdays -->
   <line x1="${MARGIN}" y1="${GRID_START_Y + WEEKDAY_ROW_HEIGHT}"
@@ -174,73 +162,67 @@ export function generateCalendarComposite(
   <!-- Calendar Grid Cells -->
   ${calendarCells
     .map((day, index) => {
-      const row = Math.floor(index / 7);
-      const col = index % 7;
-      const cellX = MARGIN + col * CELL_WIDTH;
-      const cellY = GRID_START_Y + WEEKDAY_ROW_HEIGHT + row * DAY_CELL_HEIGHT;
+      const row = Math.floor(index / 7)
+      const col = index % 7
+      const cellX = MARGIN + col * CELL_WIDTH
+      const cellY = GRID_START_Y + WEEKDAY_ROW_HEIGHT + row * DAY_CELL_HEIGHT
 
       return `
   <rect x="${cellX}" y="${cellY}" width="${CELL_WIDTH}" height="${DAY_CELL_HEIGHT}"
-        fill="none" stroke="#333" stroke-width="2"/>`;
+        fill="none" stroke="#333" stroke-width="2"/>`
     })
-    .join("")}
+    .join('')}
 
   <!-- Calendar Day Abaci -->
   ${calendarCells
     .map((day, index) => {
-      if (day === null) return "";
+      if (day === null) return ''
 
-      const row = Math.floor(index / 7);
-      const col = index % 7;
-      const cellX = MARGIN + col * CELL_WIDTH;
-      const cellY = GRID_START_Y + WEEKDAY_ROW_HEIGHT + row * DAY_CELL_HEIGHT;
+      const row = Math.floor(index / 7)
+      const col = index % 7
+      const cellX = MARGIN + col * CELL_WIDTH
+      const cellY = GRID_START_Y + WEEKDAY_ROW_HEIGHT + row * DAY_CELL_HEIGHT
 
       // Render cropped abacus SVG
-      const abacusSVG = renderAbacusSVG(day, 2, 1);
+      const abacusSVG = renderAbacusSVG(day, 2, 1)
 
       // Extract viewBox and dimensions from the cropped SVG
-      const viewBoxMatch = abacusSVG.match(/viewBox="([^"]*)"/);
-      const widthMatch = abacusSVG.match(/width="?([0-9.]+)"?/);
-      const heightMatch = abacusSVG.match(/height="?([0-9.]+)"?/);
+      const viewBoxMatch = abacusSVG.match(/viewBox="([^"]*)"/)
+      const widthMatch = abacusSVG.match(/width="?([0-9.]+)"?/)
+      const heightMatch = abacusSVG.match(/height="?([0-9.]+)"?/)
 
-      const croppedViewBox = viewBoxMatch ? viewBoxMatch[1] : "0 0 120 230";
-      const croppedWidth = widthMatch
-        ? parseFloat(widthMatch[1])
-        : ABACUS_NATURAL_WIDTH;
-      const croppedHeight = heightMatch
-        ? parseFloat(heightMatch[1])
-        : ABACUS_NATURAL_HEIGHT;
+      const croppedViewBox = viewBoxMatch ? viewBoxMatch[1] : '0 0 120 230'
+      const croppedWidth = widthMatch ? parseFloat(widthMatch[1]) : ABACUS_NATURAL_WIDTH
+      const croppedHeight = heightMatch ? parseFloat(heightMatch[1]) : ABACUS_NATURAL_HEIGHT
 
       // Calculate scale to fit cropped abacus in cell
-      const MAX_SCALE_X = (CELL_WIDTH - CELL_PADDING * 2) / croppedWidth;
-      const MAX_SCALE_Y = (DAY_CELL_HEIGHT - CELL_PADDING * 2) / croppedHeight;
-      const fitScale = Math.min(MAX_SCALE_X, MAX_SCALE_Y) * 0.95; // 95% to leave breathing room
+      const MAX_SCALE_X = (CELL_WIDTH - CELL_PADDING * 2) / croppedWidth
+      const MAX_SCALE_Y = (DAY_CELL_HEIGHT - CELL_PADDING * 2) / croppedHeight
+      const fitScale = Math.min(MAX_SCALE_X, MAX_SCALE_Y) * 0.95 // 95% to leave breathing room
 
-      const scaledWidth = croppedWidth * fitScale;
-      const scaledHeight = croppedHeight * fitScale;
+      const scaledWidth = croppedWidth * fitScale
+      const scaledHeight = croppedHeight * fitScale
 
       // Center abacus in cell
-      const abacusCenterX = cellX + CELL_WIDTH / 2;
-      const abacusCenterY = cellY + DAY_CELL_HEIGHT / 2;
+      const abacusCenterX = cellX + CELL_WIDTH / 2
+      const abacusCenterY = cellY + DAY_CELL_HEIGHT / 2
 
       // Offset to top-left corner of abacus
-      const abacusX = abacusCenterX - scaledWidth / 2;
-      const abacusY = abacusCenterY - scaledHeight / 2;
+      const abacusX = abacusCenterX - scaledWidth / 2
+      const abacusY = abacusCenterY - scaledHeight / 2
 
       // Extract SVG content (remove outer <svg> tags)
-      const svgContent = abacusSVG
-        .replace(/<svg[^>]*>/, "")
-        .replace(/<\/svg>$/, "");
+      const svgContent = abacusSVG.replace(/<svg[^>]*>/, '').replace(/<\/svg>$/, '')
 
       return `
   <!-- Day ${day} (row ${row}, col ${col}) -->
   <svg x="${abacusX}" y="${abacusY}" width="${scaledWidth}" height="${scaledHeight}"
        viewBox="${croppedViewBox}">
     ${svgContent}
-  </svg>`;
+  </svg>`
     })
-    .join("")}
-</svg>`;
+    .join('')}
+</svg>`
 
-  return compositeSVG;
+  return compositeSVG
 }
diff --git a/apps/web/src/utils/flashcards/generateFlashcardSvgs.tsx b/apps/web/src/utils/flashcards/generateFlashcardSvgs.tsx
index 24d686a7..4fa8c0dd 100644
--- a/apps/web/src/utils/flashcards/generateFlashcardSvgs.tsx
+++ b/apps/web/src/utils/flashcards/generateFlashcardSvgs.tsx
@@ -3,18 +3,18 @@
  * This replaces Python-based SVG generation for better performance
  */
 
-import type React from "react";
-import { AbacusStatic } from "@soroban/abacus-react/static";
+import type React from 'react'
+import { AbacusStatic } from '@soroban/abacus-react/static'
 
 export interface FlashcardConfig {
-  beadShape?: "diamond" | "circle" | "square";
-  colorScheme?: "monochrome" | "place-value" | "heaven-earth" | "alternating";
-  colorPalette?: "default" | "pastel" | "vibrant" | "earth-tones";
-  hideInactiveBeads?: boolean;
-  showEmptyColumns?: boolean;
-  columns?: number | "auto";
-  scaleFactor?: number;
-  coloredNumerals?: boolean;
+  beadShape?: 'diamond' | 'circle' | 'square'
+  colorScheme?: 'monochrome' | 'place-value' | 'heaven-earth' | 'alternating'
+  colorPalette?: 'default' | 'pastel' | 'vibrant' | 'earth-tones'
+  hideInactiveBeads?: boolean
+  showEmptyColumns?: boolean
+  columns?: number | 'auto'
+  scaleFactor?: number
+  coloredNumerals?: boolean
 }
 
 /**
@@ -22,17 +22,17 @@ export interface FlashcardConfig {
  */
 export function generateFlashcardFront(
   value: number,
-  config: FlashcardConfig = {},
+  config: FlashcardConfig = {}
 ): React.ReactElement {
   const {
-    beadShape = "diamond",
-    colorScheme = "place-value",
-    colorPalette = "default",
+    beadShape = 'diamond',
+    colorScheme = 'place-value',
+    colorPalette = 'default',
     hideInactiveBeads = false,
     showEmptyColumns = false,
-    columns = "auto",
+    columns = 'auto',
     scaleFactor = 0.9,
-  } = config;
+  } = config
 
   return (
     <AbacusStatic
@@ -47,7 +47,7 @@ export function generateFlashcardFront(
       scaleFactor={scaleFactor}
       showEmptyColumns={showEmptyColumns}
     />
-  );
+  )
 }
 
 /**
@@ -55,21 +55,19 @@ export function generateFlashcardFront(
  */
 export function generateFlashcardBack(
   value: number,
-  config: FlashcardConfig = {},
+  config: FlashcardConfig = {}
 ): React.ReactElement {
-  const { coloredNumerals = false, colorScheme = "place-value" } = config;
+  const { coloredNumerals = false, colorScheme = 'place-value' } = config
 
   // For back, we show just the numeral
   // Use a simple SVG with text
-  const fontSize = 120;
-  const width = 300;
-  const height = 200;
+  const fontSize = 120
+  const width = 300
+  const height = 200
 
   // Get color based on place value if colored numerals enabled
   const textColor =
-    coloredNumerals && colorScheme === "place-value"
-      ? getPlaceValueColor(value)
-      : "#000000";
+    coloredNumerals && colorScheme === 'place-value' ? getPlaceValueColor(value) : '#000000'
 
   return (
     <svg
@@ -91,19 +89,19 @@ export function generateFlashcardBack(
         {value}
       </text>
     </svg>
-  );
+  )
 }
 
 function getPlaceValueColor(value: number): string {
   // Simple place value coloring for single digits
   const colors = [
-    "#ef4444", // red - ones
-    "#f59e0b", // amber - tens
-    "#10b981", // emerald - hundreds
-    "#3b82f6", // blue - thousands
-    "#8b5cf6", // purple - ten thousands
-  ];
+    '#ef4444', // red - ones
+    '#f59e0b', // amber - tens
+    '#10b981', // emerald - hundreds
+    '#3b82f6', // blue - thousands
+    '#8b5cf6', // purple - ten thousands
+  ]
 
-  const digits = value.toString().length;
-  return colors[(digits - 1) % colors.length];
+  const digits = value.toString().length
+  return colors[(digits - 1) % colors.length]
 }
diff --git a/apps/web/src/utils/playerNames.ts b/apps/web/src/utils/playerNames.ts
index 42ac61cf..6174229e 100644
--- a/apps/web/src/utils/playerNames.ts
+++ b/apps/web/src/utils/playerNames.ts
@@ -6,171 +6,161 @@
  * Falls back gracefully: emoji-specific → category → generic abacus theme
  */
 
-import {
-  EMOJI_SPECIFIC_WORDS,
-  EMOJI_TO_THEME,
-  THEMED_WORD_LISTS,
-} from "./themedWords";
+import { EMOJI_SPECIFIC_WORDS, EMOJI_TO_THEME, THEMED_WORD_LISTS } from './themedWords'
 
 // Generic abacus-themed words (used as ultimate fallback)
 const ADJECTIVES = [
   // Abacus-themed adjectives
-  "Ancient",
-  "Wooden",
-  "Sliding",
-  "Decimal",
-  "Binary",
-  "Counting",
-  "Soroban",
-  "Chinese",
-  "Japanese",
-  "Nimble",
-  "Clicking",
-  "Beaded",
-  "Columnar",
-  "Vertical",
-  "Horizontal",
-  "Upper",
-  "Lower",
-  "Heaven",
-  "Earth",
-  "Golden",
-  "Jade",
-  "Bamboo",
-  "Polished",
-  "Skilled",
-  "Master",
+  'Ancient',
+  'Wooden',
+  'Sliding',
+  'Decimal',
+  'Binary',
+  'Counting',
+  'Soroban',
+  'Chinese',
+  'Japanese',
+  'Nimble',
+  'Clicking',
+  'Beaded',
+  'Columnar',
+  'Vertical',
+  'Horizontal',
+  'Upper',
+  'Lower',
+  'Heaven',
+  'Earth',
+  'Golden',
+  'Jade',
+  'Bamboo',
+  'Polished',
+  'Skilled',
+  'Master',
   // Arithmetic/calculation adjectives
-  "Adding",
-  "Subtracting",
-  "Multiplying",
-  "Dividing",
-  "Calculating",
-  "Computing",
-  "Estimating",
-  "Rounding",
-  "Summing",
-  "Tallying",
-  "Decimal",
-  "Fractional",
-  "Exponential",
-  "Algebraic",
-  "Geometric",
-  "Prime",
-  "Composite",
-  "Rational",
-  "Digital",
-  "Numeric",
-  "Precise",
-  "Accurate",
-  "Lightning",
-  "Rapid",
-  "Mental",
-];
+  'Adding',
+  'Subtracting',
+  'Multiplying',
+  'Dividing',
+  'Calculating',
+  'Computing',
+  'Estimating',
+  'Rounding',
+  'Summing',
+  'Tallying',
+  'Decimal',
+  'Fractional',
+  'Exponential',
+  'Algebraic',
+  'Geometric',
+  'Prime',
+  'Composite',
+  'Rational',
+  'Digital',
+  'Numeric',
+  'Precise',
+  'Accurate',
+  'Lightning',
+  'Rapid',
+  'Mental',
+]
 
 const NOUNS = [
   // Abacus-themed nouns
-  "Counter",
-  "Abacist",
-  "Calculator",
-  "Bead",
-  "Rod",
-  "Frame",
-  "Slider",
-  "Merchant",
-  "Trader",
-  "Accountant",
-  "Bookkeeper",
-  "Clerk",
-  "Scribe",
-  "Master",
-  "Apprentice",
-  "Scholar",
-  "Student",
-  "Teacher",
-  "Sensei",
-  "Guru",
-  "Expert",
-  "Virtuoso",
-  "Prodigy",
-  "Wizard",
-  "Sage",
+  'Counter',
+  'Abacist',
+  'Calculator',
+  'Bead',
+  'Rod',
+  'Frame',
+  'Slider',
+  'Merchant',
+  'Trader',
+  'Accountant',
+  'Bookkeeper',
+  'Clerk',
+  'Scribe',
+  'Master',
+  'Apprentice',
+  'Scholar',
+  'Student',
+  'Teacher',
+  'Sensei',
+  'Guru',
+  'Expert',
+  'Virtuoso',
+  'Prodigy',
+  'Wizard',
+  'Sage',
   // Arithmetic/calculation nouns
-  "Adder",
-  "Multiplier",
-  "Divider",
-  "Solver",
-  "Mathematician",
-  "Arithmetician",
-  "Analyst",
-  "Computer",
-  "Estimator",
-  "Logician",
-  "Statistician",
-  "Numerologist",
-  "Quantifier",
-  "Tallier",
-  "Sumner",
-  "Keeper",
-  "Reckoner",
-  "Cipher",
-  "Digit",
-  "Figure",
-  "Number",
-  "Brain",
-  "Thinker",
-  "Genius",
-  "Whiz",
-];
+  'Adder',
+  'Multiplier',
+  'Divider',
+  'Solver',
+  'Mathematician',
+  'Arithmetician',
+  'Analyst',
+  'Computer',
+  'Estimator',
+  'Logician',
+  'Statistician',
+  'Numerologist',
+  'Quantifier',
+  'Tallier',
+  'Sumner',
+  'Keeper',
+  'Reckoner',
+  'Cipher',
+  'Digit',
+  'Figure',
+  'Number',
+  'Brain',
+  'Thinker',
+  'Genius',
+  'Whiz',
+]
 
 /**
  * Select a word list tier using weighted random selection
  * Balanced mix: emoji-specific (50%), category (25%), global abacus (25%)
  */
-function selectWordListTier(
-  emoji: string,
-  wordType: "adjectives" | "nouns",
-): string[] {
+function selectWordListTier(emoji: string, wordType: 'adjectives' | 'nouns'): string[] {
   // Collect available tiers
-  const availableTiers: Array<{ weight: number; words: string[] }> = [];
+  const availableTiers: Array<{ weight: number; words: string[] }> = []
 
   // Emoji-specific tier (50% preference)
-  const emojiSpecific = EMOJI_SPECIFIC_WORDS[emoji];
+  const emojiSpecific = EMOJI_SPECIFIC_WORDS[emoji]
   if (emojiSpecific) {
-    availableTiers.push({ weight: 50, words: emojiSpecific[wordType] });
+    availableTiers.push({ weight: 50, words: emojiSpecific[wordType] })
   }
 
   // Category tier (25% preference)
-  const category = EMOJI_TO_THEME[emoji];
+  const category = EMOJI_TO_THEME[emoji]
   if (category) {
-    const categoryTheme = THEMED_WORD_LISTS[category];
+    const categoryTheme = THEMED_WORD_LISTS[category]
     if (categoryTheme) {
-      availableTiers.push({ weight: 25, words: categoryTheme[wordType] });
+      availableTiers.push({ weight: 25, words: categoryTheme[wordType] })
     }
   }
 
   // Global abacus tier (25% preference)
   availableTiers.push({
     weight: 25,
-    words: wordType === "adjectives" ? ADJECTIVES : NOUNS,
-  });
+    words: wordType === 'adjectives' ? ADJECTIVES : NOUNS,
+  })
 
   // Weighted random selection
-  const totalWeight = availableTiers.reduce(
-    (sum, tier) => sum + tier.weight,
-    0,
-  );
-  let random = Math.random() * totalWeight;
+  const totalWeight = availableTiers.reduce((sum, tier) => sum + tier.weight, 0)
+  let random = Math.random() * totalWeight
 
   for (const tier of availableTiers) {
-    random -= tier.weight;
+    random -= tier.weight
     if (random <= 0) {
-      return tier.words;
+      return tier.words
     }
   }
 
   // Fallback (should never reach here)
-  return wordType === "adjectives" ? ADJECTIVES : NOUNS;
+  return wordType === 'adjectives' ? ADJECTIVES : NOUNS
 }
 
 /**
@@ -184,21 +174,20 @@ function selectWordListTier(
 export function generatePlayerName(emoji?: string): string {
   if (!emoji) {
     // No emoji provided, use pure abacus theme
-    const adjective = ADJECTIVES[Math.floor(Math.random() * ADJECTIVES.length)];
-    const noun = NOUNS[Math.floor(Math.random() * NOUNS.length)];
-    return `${adjective} ${noun}`;
+    const adjective = ADJECTIVES[Math.floor(Math.random() * ADJECTIVES.length)]
+    const noun = NOUNS[Math.floor(Math.random() * NOUNS.length)]
+    return `${adjective} ${noun}`
   }
 
   // Select tier independently for each word type
   // This creates natural mixing: adjective might be emoji-specific while noun is global
-  const adjectiveList = selectWordListTier(emoji, "adjectives");
-  const nounList = selectWordListTier(emoji, "nouns");
+  const adjectiveList = selectWordListTier(emoji, 'adjectives')
+  const nounList = selectWordListTier(emoji, 'nouns')
 
-  const adjective =
-    adjectiveList[Math.floor(Math.random() * adjectiveList.length)];
-  const noun = nounList[Math.floor(Math.random() * nounList.length)];
+  const adjective = adjectiveList[Math.floor(Math.random() * adjectiveList.length)]
+  const noun = nounList[Math.floor(Math.random() * nounList.length)]
 
-  return `${adjective} ${noun}`;
+  return `${adjective} ${noun}`
 }
 
 /**
@@ -211,26 +200,24 @@ export function generatePlayerName(emoji?: string): string {
 export function generateUniquePlayerName(
   existingNames: string[],
   emoji?: string,
-  maxAttempts = 50,
+  maxAttempts = 50
 ): string {
-  const existingNamesSet = new Set(
-    existingNames.map((name) => name.toLowerCase()),
-  );
+  const existingNamesSet = new Set(existingNames.map((name) => name.toLowerCase()))
 
   for (let i = 0; i < maxAttempts; i++) {
-    const name = generatePlayerName(emoji);
+    const name = generatePlayerName(emoji)
     if (!existingNamesSet.has(name.toLowerCase())) {
-      return name;
+      return name
     }
   }
 
   // Fallback: if we can't find a unique name, append a number
-  const baseName = generatePlayerName(emoji);
-  let counter = 1;
+  const baseName = generatePlayerName(emoji)
+  let counter = 1
   while (existingNamesSet.has(`${baseName} ${counter}`.toLowerCase())) {
-    counter++;
+    counter++
   }
-  return `${baseName} ${counter}`;
+  return `${baseName} ${counter}`
 }
 
 /**
@@ -239,14 +226,11 @@ export function generateUniquePlayerName(
  * @param emoji - Optional emoji avatar to theme the names around
  * @returns Array of unique player names
  */
-export function generateUniquePlayerNames(
-  count: number,
-  emoji?: string,
-): string[] {
-  const names: string[] = [];
+export function generateUniquePlayerNames(count: number, emoji?: string): string[] {
+  const names: string[] = []
   for (let i = 0; i < count; i++) {
-    const name = generateUniquePlayerName(names, emoji);
-    names.push(name);
+    const name = generateUniquePlayerName(names, emoji)
+    names.push(name)
   }
-  return names;
+  return names
 }
diff --git a/apps/web/src/utils/pluralization.ts b/apps/web/src/utils/pluralization.ts
index d754c8f7..385f25b4 100644
--- a/apps/web/src/utils/pluralization.ts
+++ b/apps/web/src/utils/pluralization.ts
@@ -1,7 +1,7 @@
-import { en } from "make-plural";
+import { en } from 'make-plural'
 
 // Use English pluralization rules from make-plural
-const plural = en;
+const plural = en
 
 /**
  * Pluralize a word based on count using make-plural library
@@ -10,16 +10,12 @@ const plural = en;
  * @param plural - The plural form of the word (optional, will add 's' by default)
  * @returns The properly pluralized word
  */
-export function pluralizeWord(
-  count: number,
-  singular: string,
-  pluralForm?: string,
-): string {
-  const category = plural(count);
-  if (category === "one") {
-    return singular;
+export function pluralizeWord(count: number, singular: string, pluralForm?: string): string {
+  const category = plural(count)
+  if (category === 'one') {
+    return singular
   }
-  return pluralForm || `${singular}s`;
+  return pluralForm || `${singular}s`
 }
 
 /**
@@ -29,24 +25,20 @@ export function pluralizeWord(
  * @param plural - The plural form of the word (optional)
  * @returns Formatted string like "1 pair" or "3 pairs"
  */
-export function pluralizeCount(
-  count: number,
-  singular: string,
-  pluralForm?: string,
-): string {
-  return `${count} ${pluralizeWord(count, singular, pluralForm)}`;
+export function pluralizeCount(count: number, singular: string, pluralForm?: string): string {
+  return `${count} ${pluralizeWord(count, singular, pluralForm)}`
 }
 
 /**
  * Common game-specific pluralization helpers using make-plural
  */
 export const gamePlurals = {
-  pair: (count: number) => pluralizeCount(count, "pair"),
-  pairs: (count: number) => pluralizeCount(count, "pair"),
-  move: (count: number) => pluralizeCount(count, "move"),
-  moves: (count: number) => pluralizeCount(count, "move"),
-  match: (count: number) => pluralizeCount(count, "match", "matches"),
-  matches: (count: number) => pluralizeCount(count, "match", "matches"),
-  player: (count: number) => pluralizeCount(count, "player"),
-  players: (count: number) => pluralizeCount(count, "player"),
-} as const;
+  pair: (count: number) => pluralizeCount(count, 'pair'),
+  pairs: (count: number) => pluralizeCount(count, 'pair'),
+  move: (count: number) => pluralizeCount(count, 'move'),
+  moves: (count: number) => pluralizeCount(count, 'move'),
+  match: (count: number) => pluralizeCount(count, 'match', 'matches'),
+  matches: (count: number) => pluralizeCount(count, 'match', 'matches'),
+  player: (count: number) => pluralizeCount(count, 'player'),
+  players: (count: number) => pluralizeCount(count, 'player'),
+} as const
diff --git a/apps/web/src/utils/problemGenerator.ts b/apps/web/src/utils/problemGenerator.ts
index dbbe8808..5bad288d 100644
--- a/apps/web/src/utils/problemGenerator.ts
+++ b/apps/web/src/utils/problemGenerator.ts
@@ -1,87 +1,67 @@
-import type { PracticeStep, SkillSet } from "../types/tutorial";
+import type { PracticeStep, SkillSet } from '../types/tutorial'
 
 export interface GeneratedProblem {
-  id: string;
-  terms: number[];
-  answer: number;
-  requiredSkills: string[];
-  difficulty: "easy" | "medium" | "hard";
-  explanation?: string;
+  id: string
+  terms: number[]
+  answer: number
+  requiredSkills: string[]
+  difficulty: 'easy' | 'medium' | 'hard'
+  explanation?: string
 }
 
 export interface ProblemConstraints {
-  numberRange: { min: number; max: number };
-  maxSum?: number;
-  minSum?: number;
-  maxTerms: number;
-  problemCount: number;
+  numberRange: { min: number; max: number }
+  maxSum?: number
+  minSum?: number
+  maxTerms: number
+  problemCount: number
 }
 
 /**
  * Analyzes which skills are required during the sequential addition process
  * This simulates adding each term one by one to the abacus
  */
-export function analyzeRequiredSkills(
-  terms: number[],
-  _finalSum: number,
-): string[] {
-  const skills: string[] = [];
-  let currentValue = 0;
+export function analyzeRequiredSkills(terms: number[], _finalSum: number): string[] {
+  const skills: string[] = []
+  let currentValue = 0
 
   // Simulate adding each term sequentially
   for (const term of terms) {
-    const newValue = currentValue + term;
-    const requiredSkillsForStep = analyzeStepSkills(
-      currentValue,
-      term,
-      newValue,
-    );
-    skills.push(...requiredSkillsForStep);
-    currentValue = newValue;
+    const newValue = currentValue + term
+    const requiredSkillsForStep = analyzeStepSkills(currentValue, term, newValue)
+    skills.push(...requiredSkillsForStep)
+    currentValue = newValue
   }
 
-  return [...new Set(skills)]; // Remove duplicates
+  return [...new Set(skills)] // Remove duplicates
 }
 
 /**
  * Analyzes skills needed for a single addition step: currentValue + term = newValue
  */
-function analyzeStepSkills(
-  currentValue: number,
-  term: number,
-  newValue: number,
-): string[] {
-  const skills: string[] = [];
+function analyzeStepSkills(currentValue: number, term: number, newValue: number): string[] {
+  const skills: string[] = []
 
   // Work column by column from right to left
-  const currentDigits = getDigits(currentValue);
-  const termDigits = getDigits(term);
-  const newDigits = getDigits(newValue);
+  const currentDigits = getDigits(currentValue)
+  const termDigits = getDigits(term)
+  const newDigits = getDigits(newValue)
 
-  const maxColumns = Math.max(
-    currentDigits.length,
-    termDigits.length,
-    newDigits.length,
-  );
+  const maxColumns = Math.max(currentDigits.length, termDigits.length, newDigits.length)
 
   for (let column = 0; column < maxColumns; column++) {
-    const currentDigit = currentDigits[column] || 0;
-    const termDigit = termDigits[column] || 0;
-    const newDigit = newDigits[column] || 0;
+    const currentDigit = currentDigits[column] || 0
+    const termDigit = termDigits[column] || 0
+    const newDigit = newDigits[column] || 0
 
-    if (termDigit === 0) continue; // No addition in this column
+    if (termDigit === 0) continue // No addition in this column
 
     // Analyze what happens in this column
-    const columnSkills = analyzeColumnAddition(
-      currentDigit,
-      termDigit,
-      newDigit,
-      column,
-    );
-    skills.push(...columnSkills);
+    const columnSkills = analyzeColumnAddition(currentDigit, termDigit, newDigit, column)
+    skills.push(...columnSkills)
   }
 
-  return skills;
+  return skills
 }
 
 /**
@@ -91,78 +71,78 @@ function analyzeColumnAddition(
   currentDigit: number,
   termDigit: number,
   _resultDigit: number,
-  _column: number,
+  _column: number
 ): string[] {
-  const skills: string[] = [];
+  const skills: string[] = []
 
   // Direct addition (1-4)
   if (termDigit >= 1 && termDigit <= 4) {
     if (currentDigit + termDigit <= 4) {
-      skills.push("basic.directAddition");
+      skills.push('basic.directAddition')
     } else if (currentDigit + termDigit === 5) {
       // Adding to make exactly 5 - could be direct or complement
       if (currentDigit === 0) {
-        skills.push("basic.heavenBead"); // Direct 5
+        skills.push('basic.heavenBead') // Direct 5
       } else {
         // Five complement: need to use 5 - complement
-        skills.push(`fiveComplements.${termDigit}=5-${5 - termDigit}`);
-        skills.push("basic.heavenBead");
+        skills.push(`fiveComplements.${termDigit}=5-${5 - termDigit}`)
+        skills.push('basic.heavenBead')
       }
     } else if (currentDigit + termDigit > 5 && currentDigit + termDigit <= 9) {
       // Results in 6-9: use five complement + simple combination
-      skills.push(`fiveComplements.${termDigit}=5-${5 - termDigit}`);
-      skills.push("basic.heavenBead");
-      skills.push("basic.simpleCombinations");
+      skills.push(`fiveComplements.${termDigit}=5-${5 - termDigit}`)
+      skills.push('basic.heavenBead')
+      skills.push('basic.simpleCombinations')
     } else if (currentDigit + termDigit >= 10) {
       // Ten complement needed
-      const complement = 10 - termDigit;
-      skills.push(`tenComplements.${termDigit}=10-${complement}`);
+      const complement = 10 - termDigit
+      skills.push(`tenComplements.${termDigit}=10-${complement}`)
     }
   }
 
   // Direct heaven bead (5)
   else if (termDigit === 5) {
     if (currentDigit === 0) {
-      skills.push("basic.heavenBead");
+      skills.push('basic.heavenBead')
     } else if (currentDigit + 5 <= 9) {
-      skills.push("basic.heavenBead");
-      skills.push("basic.simpleCombinations");
+      skills.push('basic.heavenBead')
+      skills.push('basic.simpleCombinations')
     } else {
       // Ten complement
-      skills.push(`tenComplements.5=10-5`);
+      skills.push(`tenComplements.5=10-5`)
     }
   }
 
   // Simple combinations (6-9)
   else if (termDigit >= 6 && termDigit <= 9) {
     if (currentDigit === 0) {
-      skills.push("basic.heavenBead");
-      skills.push("basic.simpleCombinations");
+      skills.push('basic.heavenBead')
+      skills.push('basic.simpleCombinations')
     } else if (currentDigit + termDigit <= 9) {
-      skills.push("basic.heavenBead");
-      skills.push("basic.simpleCombinations");
+      skills.push('basic.heavenBead')
+      skills.push('basic.simpleCombinations')
     } else {
       // Ten complement
-      const complement = 10 - termDigit;
-      skills.push(`tenComplements.${termDigit}=10-${complement}`);
+      const complement = 10 - termDigit
+      skills.push(`tenComplements.${termDigit}=10-${complement}`)
     }
   }
 
-  return skills;
+  return skills
 }
 
 /**
  * Converts a number to array of digits (ones, tens, hundreds, etc.)
  */
 function getDigits(num: number): number[] {
-  if (num === 0) return [0];
+  if (num === 0) return [0]
 
-  const digits: number[] = [];
+  const digits: number[] = []
   while (num > 0) {
-    digits.push(num % 10);
-    num = Math.floor(num / 10);
+    digits.push(num % 10)
+    num = Math.floor(num / 10)
   }
-  return digits;
+  return digits
 }
 
 /**
@@ -172,87 +152,66 @@ export function problemMatchesSkills(
   problem: GeneratedProblem,
   requiredSkills: SkillSet,
   targetSkills?: Partial<SkillSet>,
-  forbiddenSkills?: Partial<SkillSet>,
+  forbiddenSkills?: Partial<SkillSet>
 ): boolean {
   // Check required skills - problem must use at least one enabled required skill
   const hasRequiredSkill = problem.requiredSkills.some((skillPath) => {
-    const [category, skill] = skillPath.split(".");
-    if (category === "basic") {
-      return requiredSkills.basic[skill as keyof typeof requiredSkills.basic];
-    } else if (category === "fiveComplements") {
-      return requiredSkills.fiveComplements[
-        skill as keyof typeof requiredSkills.fiveComplements
-      ];
-    } else if (category === "tenComplements") {
-      return requiredSkills.tenComplements[
-        skill as keyof typeof requiredSkills.tenComplements
-      ];
+    const [category, skill] = skillPath.split('.')
+    if (category === 'basic') {
+      return requiredSkills.basic[skill as keyof typeof requiredSkills.basic]
+    } else if (category === 'fiveComplements') {
+      return requiredSkills.fiveComplements[skill as keyof typeof requiredSkills.fiveComplements]
+    } else if (category === 'tenComplements') {
+      return requiredSkills.tenComplements[skill as keyof typeof requiredSkills.tenComplements]
     }
-    return false;
-  });
+    return false
+  })
 
-  if (!hasRequiredSkill) return false;
+  if (!hasRequiredSkill) return false
 
   // Check forbidden skills - problem must not use any forbidden skills
   if (forbiddenSkills) {
     const usesForbiddenSkill = problem.requiredSkills.some((skillPath) => {
-      const [category, skill] = skillPath.split(".");
-      if (category === "basic" && forbiddenSkills.basic) {
-        return forbiddenSkills.basic[
-          skill as keyof typeof forbiddenSkills.basic
-        ];
-      } else if (
-        category === "fiveComplements" &&
-        forbiddenSkills.fiveComplements
-      ) {
+      const [category, skill] = skillPath.split('.')
+      if (category === 'basic' && forbiddenSkills.basic) {
+        return forbiddenSkills.basic[skill as keyof typeof forbiddenSkills.basic]
+      } else if (category === 'fiveComplements' && forbiddenSkills.fiveComplements) {
         return forbiddenSkills.fiveComplements[
           skill as keyof typeof forbiddenSkills.fiveComplements
-        ];
-      } else if (
-        category === "tenComplements" &&
-        forbiddenSkills.tenComplements
-      ) {
-        return forbiddenSkills.tenComplements[
-          skill as keyof typeof forbiddenSkills.tenComplements
-        ];
+        ]
+      } else if (category === 'tenComplements' && forbiddenSkills.tenComplements) {
+        return forbiddenSkills.tenComplements[skill as keyof typeof forbiddenSkills.tenComplements]
       }
-      return false;
-    });
+      return false
+    })
 
-    if (usesForbiddenSkill) return false;
+    if (usesForbiddenSkill) return false
   }
 
   // Check target skills - if specified, problem should use at least one target skill
   if (targetSkills) {
     const hasTargetSkill = problem.requiredSkills.some((skillPath) => {
-      const [category, skill] = skillPath.split(".");
-      if (category === "basic" && targetSkills.basic) {
-        return targetSkills.basic[skill as keyof typeof targetSkills.basic];
-      } else if (
-        category === "fiveComplements" &&
-        targetSkills.fiveComplements
-      ) {
-        return targetSkills.fiveComplements[
-          skill as keyof typeof targetSkills.fiveComplements
-        ];
-      } else if (category === "tenComplements" && targetSkills.tenComplements) {
-        return targetSkills.tenComplements[
-          skill as keyof typeof targetSkills.tenComplements
-        ];
+      const [category, skill] = skillPath.split('.')
+      if (category === 'basic' && targetSkills.basic) {
+        return targetSkills.basic[skill as keyof typeof targetSkills.basic]
+      } else if (category === 'fiveComplements' && targetSkills.fiveComplements) {
+        return targetSkills.fiveComplements[skill as keyof typeof targetSkills.fiveComplements]
+      } else if (category === 'tenComplements' && targetSkills.tenComplements) {
+        return targetSkills.tenComplements[skill as keyof typeof targetSkills.tenComplements]
       }
-      return false;
-    });
+      return false
+    })
 
     // If target skills are specified but none match, reject
     const hasAnyTargetSkill =
       Object.values(targetSkills.basic || {}).some(Boolean) ||
       Object.values(targetSkills.fiveComplements || {}).some(Boolean) ||
-      Object.values(targetSkills.tenComplements || {}).some(Boolean);
+      Object.values(targetSkills.tenComplements || {}).some(Boolean)
 
-    if (hasAnyTargetSkill && !hasTargetSkill) return false;
+    if (hasAnyTargetSkill && !hasTargetSkill) return false
   }
 
-  return true;
+  return true
 }
 
 /**
@@ -263,11 +222,11 @@ export function generateSingleProblem(
   requiredSkills: SkillSet,
   targetSkills?: Partial<SkillSet>,
   forbiddenSkills?: Partial<SkillSet>,
-  attempts: number = 100,
+  attempts: number = 100
 ): GeneratedProblem | null {
   for (let attempt = 0; attempt < attempts; attempt++) {
     // Generate random number of terms (3 to 5 as specified)
-    const termCount = Math.floor(Math.random() * 3) + 3; // 3-5 terms
+    const termCount = Math.floor(Math.random() * 3) + 3 // 3-5 terms
 
     // Generate the sequence of numbers to add
     const terms = generateSequence(
@@ -275,28 +234,26 @@ export function generateSingleProblem(
       termCount,
       requiredSkills,
       targetSkills,
-      forbiddenSkills,
-    );
+      forbiddenSkills
+    )
 
-    if (!terms) continue; // Failed to generate valid sequence
+    if (!terms) continue // Failed to generate valid sequence
 
-    const sum = terms.reduce((acc, term) => acc + term, 0);
+    const sum = terms.reduce((acc, term) => acc + term, 0)
 
     // Check sum constraints
-    if (constraints.maxSum && sum > constraints.maxSum) continue;
-    if (constraints.minSum && sum < constraints.minSum) continue;
+    if (constraints.maxSum && sum > constraints.maxSum) continue
+    if (constraints.minSum && sum < constraints.minSum) continue
 
     // Analyze what skills this sequential addition requires
-    const problemSkills = analyzeRequiredSkills(terms, sum);
+    const problemSkills = analyzeRequiredSkills(terms, sum)
 
     // Determine difficulty based on skills required
-    let difficulty: "easy" | "medium" | "hard" = "easy";
-    if (problemSkills.some((skill) => skill.startsWith("tenComplements"))) {
-      difficulty = "hard";
-    } else if (
-      problemSkills.some((skill) => skill.startsWith("fiveComplements"))
-    ) {
-      difficulty = "medium";
+    let difficulty: 'easy' | 'medium' | 'hard' = 'easy'
+    if (problemSkills.some((skill) => skill.startsWith('tenComplements'))) {
+      difficulty = 'hard'
+    } else if (problemSkills.some((skill) => skill.startsWith('fiveComplements'))) {
+      difficulty = 'medium'
     }
 
     const problem: GeneratedProblem = {
@@ -306,22 +263,15 @@ export function generateSingleProblem(
       requiredSkills: problemSkills,
       difficulty,
       explanation: generateSequentialExplanation(terms, sum, problemSkills),
-    };
+    }
 
     // Check if problem matches skill requirements
-    if (
-      problemMatchesSkills(
-        problem,
-        requiredSkills,
-        targetSkills,
-        forbiddenSkills,
-      )
-    ) {
-      return problem;
+    if (problemMatchesSkills(problem, requiredSkills, targetSkills, forbiddenSkills)) {
+      return problem
     }
   }
 
-  return null; // Failed to generate a suitable problem
+  return null // Failed to generate a suitable problem
 }
 
 /**
@@ -332,10 +282,10 @@ function generateSequence(
   termCount: number,
   requiredSkills: SkillSet,
   targetSkills?: Partial<SkillSet>,
-  forbiddenSkills?: Partial<SkillSet>,
+  forbiddenSkills?: Partial<SkillSet>
 ): number[] | null {
-  const terms: number[] = [];
-  let currentValue = 0;
+  const terms: number[] = []
+  let currentValue = 0
 
   for (let i = 0; i < termCount; i++) {
     // Try to find a valid next term
@@ -345,16 +295,16 @@ function generateSequence(
       requiredSkills,
       targetSkills,
       forbiddenSkills,
-      i === termCount - 1, // isLastTerm
-    );
+      i === termCount - 1 // isLastTerm
+    )
 
-    if (validTerm === null) return null; // Couldn't find valid term
+    if (validTerm === null) return null // Couldn't find valid term
 
-    terms.push(validTerm);
-    currentValue += validTerm;
+    terms.push(validTerm)
+    currentValue += validTerm
   }
 
-  return terms;
+  return terms
 }
 
 /**
@@ -366,177 +316,138 @@ function findValidNextTerm(
   requiredSkills: SkillSet,
   targetSkills?: Partial<SkillSet>,
   forbiddenSkills?: Partial<SkillSet>,
-  isLastTerm: boolean = false,
+  isLastTerm: boolean = false
 ): number | null {
-  const { min, max } = constraints.numberRange;
-  const candidates: number[] = [];
+  const { min, max } = constraints.numberRange
+  const candidates: number[] = []
 
   // Try each possible term value
   for (let term = min; term <= max; term++) {
-    const newValue = currentValue + term;
+    const newValue = currentValue + term
 
     // Check if this addition step is valid
-    const stepSkills = analyzeStepSkills(currentValue, term, newValue);
+    const stepSkills = analyzeStepSkills(currentValue, term, newValue)
 
     // Check if the step uses only allowed skills
     const usesValidSkills = stepSkills.every((skillPath) => {
-      const [category, skill] = skillPath.split(".");
+      const [category, skill] = skillPath.split('.')
 
       // Must use only required skills
-      let hasSkill = false;
-      if (category === "basic") {
+      let hasSkill = false
+      if (category === 'basic') {
+        hasSkill = requiredSkills.basic[skill as keyof typeof requiredSkills.basic]
+      } else if (category === 'fiveComplements') {
         hasSkill =
-          requiredSkills.basic[skill as keyof typeof requiredSkills.basic];
-      } else if (category === "fiveComplements") {
+          requiredSkills.fiveComplements[skill as keyof typeof requiredSkills.fiveComplements]
+      } else if (category === 'tenComplements') {
         hasSkill =
-          requiredSkills.fiveComplements[
-            skill as keyof typeof requiredSkills.fiveComplements
-          ];
-      } else if (category === "tenComplements") {
-        hasSkill =
-          requiredSkills.tenComplements[
-            skill as keyof typeof requiredSkills.tenComplements
-          ];
+          requiredSkills.tenComplements[skill as keyof typeof requiredSkills.tenComplements]
       }
 
-      if (!hasSkill) return false;
+      if (!hasSkill) return false
 
       // Must not use forbidden skills
       if (forbiddenSkills) {
-        let isForbidden = false;
-        if (category === "basic" && forbiddenSkills.basic) {
-          isForbidden =
-            forbiddenSkills.basic[
-              skill as keyof typeof forbiddenSkills.basic
-            ] || false;
-        } else if (
-          category === "fiveComplements" &&
-          forbiddenSkills.fiveComplements
-        ) {
+        let isForbidden = false
+        if (category === 'basic' && forbiddenSkills.basic) {
+          isForbidden = forbiddenSkills.basic[skill as keyof typeof forbiddenSkills.basic] || false
+        } else if (category === 'fiveComplements' && forbiddenSkills.fiveComplements) {
           isForbidden =
             forbiddenSkills.fiveComplements[
               skill as keyof typeof forbiddenSkills.fiveComplements
-            ] || false;
-        } else if (
-          category === "tenComplements" &&
-          forbiddenSkills.tenComplements
-        ) {
+            ] || false
+        } else if (category === 'tenComplements' && forbiddenSkills.tenComplements) {
           isForbidden =
-            forbiddenSkills.tenComplements[
-              skill as keyof typeof forbiddenSkills.tenComplements
-            ] || false;
+            forbiddenSkills.tenComplements[skill as keyof typeof forbiddenSkills.tenComplements] ||
+            false
         }
-        if (isForbidden) return false;
+        if (isForbidden) return false
       }
 
-      return true;
-    });
+      return true
+    })
 
     if (usesValidSkills) {
-      candidates.push(term);
+      candidates.push(term)
     }
   }
 
-  if (candidates.length === 0) return null;
+  if (candidates.length === 0) return null
 
   // If we have target skills and this is not the last term, try to pick a term that uses target skills
   if (targetSkills && !isLastTerm) {
     const targetCandidates = candidates.filter((term) => {
-      const newValue = currentValue + term;
-      const stepSkills = analyzeStepSkills(currentValue, term, newValue);
+      const newValue = currentValue + term
+      const stepSkills = analyzeStepSkills(currentValue, term, newValue)
 
       return stepSkills.some((skillPath) => {
-        const [category, skill] = skillPath.split(".");
-        if (category === "basic" && targetSkills.basic) {
-          return targetSkills.basic[skill as keyof typeof targetSkills.basic];
-        } else if (
-          category === "fiveComplements" &&
-          targetSkills.fiveComplements
-        ) {
-          return targetSkills.fiveComplements[
-            skill as keyof typeof targetSkills.fiveComplements
-          ];
-        } else if (
-          category === "tenComplements" &&
-          targetSkills.tenComplements
-        ) {
-          return targetSkills.tenComplements[
-            skill as keyof typeof targetSkills.tenComplements
-          ];
+        const [category, skill] = skillPath.split('.')
+        if (category === 'basic' && targetSkills.basic) {
+          return targetSkills.basic[skill as keyof typeof targetSkills.basic]
+        } else if (category === 'fiveComplements' && targetSkills.fiveComplements) {
+          return targetSkills.fiveComplements[skill as keyof typeof targetSkills.fiveComplements]
+        } else if (category === 'tenComplements' && targetSkills.tenComplements) {
+          return targetSkills.tenComplements[skill as keyof typeof targetSkills.tenComplements]
         }
-        return false;
-      });
-    });
+        return false
+      })
+    })
 
     if (targetCandidates.length > 0) {
-      return targetCandidates[
-        Math.floor(Math.random() * targetCandidates.length)
-      ];
+      return targetCandidates[Math.floor(Math.random() * targetCandidates.length)]
     }
   }
 
   // Return random valid candidate
-  return candidates[Math.floor(Math.random() * candidates.length)];
+  return candidates[Math.floor(Math.random() * candidates.length)]
 }
 
 /**
  * Generates an explanation for how to solve the sequential addition problem
  */
-function generateSequentialExplanation(
-  terms: number[],
-  sum: number,
-  skills: string[],
-): string {
-  const explanations: string[] = [];
+function generateSequentialExplanation(terms: number[], sum: number, skills: string[]): string {
+  const explanations: string[] = []
 
   // Create vertical display format for explanation
-  const verticalDisplay = `${terms.map((term) => `  ${term}`).join("\n")}\n---\n  ${sum}`;
+  const verticalDisplay = `${terms.map((term) => `  ${term}`).join('\n')}\n---\n  ${sum}`
 
-  explanations.push(
-    `Calculate this problem by adding each number in sequence:\n${verticalDisplay}`,
-  );
+  explanations.push(`Calculate this problem by adding each number in sequence:\n${verticalDisplay}`)
 
   // Skill-specific explanations
-  if (skills.includes("basic.directAddition")) {
-    explanations.push("Use direct addition for numbers 1-4.");
+  if (skills.includes('basic.directAddition')) {
+    explanations.push('Use direct addition for numbers 1-4.')
   }
 
-  if (skills.includes("basic.heavenBead")) {
+  if (skills.includes('basic.heavenBead')) {
+    explanations.push('Use the heaven bead when working with 5 or making totals involving 5.')
+  }
+
+  if (skills.includes('basic.simpleCombinations')) {
+    explanations.push('Use combinations of heaven and earth beads for 6-9.')
+  }
+
+  if (skills.some((skill) => skill.startsWith('fiveComplements'))) {
+    const complements = skills.filter((skill) => skill.startsWith('fiveComplements'))
     explanations.push(
-      "Use the heaven bead when working with 5 or making totals involving 5.",
-    );
+      `Apply five complements: ${complements.map((s) => s.split('.')[1]).join(', ')}.`
+    )
   }
 
-  if (skills.includes("basic.simpleCombinations")) {
-    explanations.push("Use combinations of heaven and earth beads for 6-9.");
-  }
-
-  if (skills.some((skill) => skill.startsWith("fiveComplements"))) {
-    const complements = skills.filter((skill) =>
-      skill.startsWith("fiveComplements"),
-    );
+  if (skills.some((skill) => skill.startsWith('tenComplements'))) {
+    const complements = skills.filter((skill) => skill.startsWith('tenComplements'))
     explanations.push(
-      `Apply five complements: ${complements.map((s) => s.split(".")[1]).join(", ")}.`,
-    );
+      `Apply ten complements: ${complements.map((s) => s.split('.')[1]).join(', ')}.`
+    )
   }
 
-  if (skills.some((skill) => skill.startsWith("tenComplements"))) {
-    const complements = skills.filter((skill) =>
-      skill.startsWith("tenComplements"),
-    );
-    explanations.push(
-      `Apply ten complements: ${complements.map((s) => s.split(".")[1]).join(", ")}.`,
-    );
-  }
-
-  return explanations.join(" ");
+  return explanations.join(' ')
 }
 
 /**
  * Creates a unique signature for a problem to detect duplicates
  */
 function getProblemSignature(terms: number[]): string {
-  return terms.join("-");
+  return terms.join('-')
 }
 
 /**
@@ -544,143 +455,119 @@ function getProblemSignature(terms: number[]): string {
  */
 function isDuplicateProblem(
   problem: GeneratedProblem,
-  existingProblems: GeneratedProblem[],
+  existingProblems: GeneratedProblem[]
 ): boolean {
-  const signature = getProblemSignature(problem.terms);
-  return existingProblems.some(
-    (existing) => getProblemSignature(existing.terms) === signature,
-  );
+  const signature = getProblemSignature(problem.terms)
+  return existingProblems.some((existing) => getProblemSignature(existing.terms) === signature)
 }
 
 /**
  * Generates multiple unique problems for a practice step
  */
-export function generateProblems(
-  practiceStep: PracticeStep,
-): GeneratedProblem[] {
+export function generateProblems(practiceStep: PracticeStep): GeneratedProblem[] {
   const constraints: ProblemConstraints = {
     numberRange: practiceStep.numberRange || { min: 1, max: 9 },
     maxSum: practiceStep.sumConstraints?.maxSum,
     minSum: practiceStep.sumConstraints?.minSum,
     maxTerms: practiceStep.maxTerms,
     problemCount: practiceStep.problemCount,
-  };
+  }
 
-  const problems: GeneratedProblem[] = [];
-  const problemSignatures = new Set<string>();
-  const maxAttempts = practiceStep.problemCount * 50; // Increased attempts for better uniqueness
-  let attempts = 0;
-  let consecutiveFailures = 0;
+  const problems: GeneratedProblem[] = []
+  const problemSignatures = new Set<string>()
+  const maxAttempts = practiceStep.problemCount * 50 // Increased attempts for better uniqueness
+  let attempts = 0
+  let consecutiveFailures = 0
 
-  while (
-    problems.length < practiceStep.problemCount &&
-    attempts < maxAttempts
-  ) {
-    attempts++;
+  while (problems.length < practiceStep.problemCount && attempts < maxAttempts) {
+    attempts++
 
     const problem = generateSingleProblem(
       constraints,
       practiceStep.requiredSkills,
       practiceStep.targetSkills,
       practiceStep.forbiddenSkills,
-      150, // More attempts per problem for uniqueness
-    );
+      150 // More attempts per problem for uniqueness
+    )
 
     if (problem) {
-      const signature = getProblemSignature(problem.terms);
+      const signature = getProblemSignature(problem.terms)
 
       // Check for duplicates using both the signature set and existing problems
-      if (
-        !problemSignatures.has(signature) &&
-        !isDuplicateProblem(problem, problems)
-      ) {
-        problems.push(problem);
-        problemSignatures.add(signature);
-        consecutiveFailures = 0;
+      if (!problemSignatures.has(signature) && !isDuplicateProblem(problem, problems)) {
+        problems.push(problem)
+        problemSignatures.add(signature)
+        consecutiveFailures = 0
       } else {
-        consecutiveFailures++;
+        consecutiveFailures++
 
         // If we're getting too many duplicates, the constraints might be too restrictive
         if (consecutiveFailures > practiceStep.problemCount * 5) {
-          console.warn(
-            "Too many duplicate problems generated. Constraints may be too restrictive.",
-          );
-          break;
+          console.warn('Too many duplicate problems generated. Constraints may be too restrictive.')
+          break
         }
       }
     } else {
-      consecutiveFailures++;
+      consecutiveFailures++
     }
   }
 
   // If we couldn't generate enough unique problems, fill with fallback problems
   // but ensure even fallbacks are unique
-  let fallbackIndex = 0;
+  let fallbackIndex = 0
   while (problems.length < practiceStep.problemCount) {
-    let fallbackProblem;
-    let fallbackAttempts = 0;
+    let fallbackProblem
+    let fallbackAttempts = 0
 
     do {
-      fallbackProblem = generateFallbackProblem(constraints, fallbackIndex++);
-      fallbackAttempts++;
-    } while (
-      fallbackAttempts < 20 &&
-      isDuplicateProblem(fallbackProblem, problems)
-    );
+      fallbackProblem = generateFallbackProblem(constraints, fallbackIndex++)
+      fallbackAttempts++
+    } while (fallbackAttempts < 20 && isDuplicateProblem(fallbackProblem, problems))
 
     // Only add if it's unique or we've exhausted attempts
     if (!isDuplicateProblem(fallbackProblem, problems)) {
-      problems.push(fallbackProblem);
-      problemSignatures.add(getProblemSignature(fallbackProblem.terms));
+      problems.push(fallbackProblem)
+      problemSignatures.add(getProblemSignature(fallbackProblem.terms))
     } else {
       // Last resort: modify the last term slightly to create uniqueness
-      const modifiedProblem = createModifiedUniqueProblem(
-        fallbackProblem,
-        problems,
-        constraints,
-      );
+      const modifiedProblem = createModifiedUniqueProblem(fallbackProblem, problems, constraints)
       if (modifiedProblem) {
-        problems.push(modifiedProblem);
-        problemSignatures.add(getProblemSignature(modifiedProblem.terms));
+        problems.push(modifiedProblem)
+        problemSignatures.add(getProblemSignature(modifiedProblem.terms))
       }
     }
   }
 
-  return problems;
+  return problems
 }
 
 /**
  * Generates a simple fallback problem when constraints are too restrictive
  */
-function generateFallbackProblem(
-  constraints: ProblemConstraints,
-  index: number,
-): GeneratedProblem {
-  const { min, max } = constraints.numberRange;
-  const termCount = 3; // Generate 3-term problems as fallback
+function generateFallbackProblem(constraints: ProblemConstraints, index: number): GeneratedProblem {
+  const { min, max } = constraints.numberRange
+  const termCount = 3 // Generate 3-term problems as fallback
 
   // Use the seed index to create variation
-  const seed = index * 7 + 3; // Prime numbers for better distribution
+  const seed = index * 7 + 3 // Prime numbers for better distribution
 
-  const terms: number[] = [];
+  const terms: number[] = []
   for (let i = 0; i < termCount; i++) {
     // Create pseudo-random but deterministic terms based on index
-    const term = ((seed + i * 5) % (max - min + 1)) + min;
-    terms.push(Math.max(min, Math.min(max, term)));
+    const term = ((seed + i * 5) % (max - min + 1)) + min
+    terms.push(Math.max(min, Math.min(max, term)))
   }
 
-  const sum = terms.reduce((acc, term) => acc + term, 0);
+  const sum = terms.reduce((acc, term) => acc + term, 0)
 
   return {
     id: `fallback_${index}_${Date.now()}_${Math.random().toString(36).substr(2, 4)}`,
     terms,
     answer: sum,
-    requiredSkills: ["basic.directAddition"],
-    difficulty: "easy",
-    explanation: generateSequentialExplanation(terms, sum, [
-      "basic.directAddition",
-    ]),
-  };
+    requiredSkills: ['basic.directAddition'],
+    difficulty: 'easy',
+    explanation: generateSequentialExplanation(terms, sum, ['basic.directAddition']),
+  }
 }
 
 /**
@@ -689,21 +576,21 @@ function generateFallbackProblem(
 function createModifiedUniqueProblem(
   baseProblem: GeneratedProblem,
   existingProblems: GeneratedProblem[],
-  constraints: ProblemConstraints,
+  constraints: ProblemConstraints
 ): GeneratedProblem | null {
-  const { min, max } = constraints.numberRange;
+  const { min, max } = constraints.numberRange
 
   // Try modifying the last term to create uniqueness
   for (let modifier = 1; modifier <= 3; modifier++) {
     for (const direction of [1, -1]) {
-      const newTerms = [...baseProblem.terms];
-      const lastIndex = newTerms.length - 1;
-      const newLastTerm = newTerms[lastIndex] + modifier * direction;
+      const newTerms = [...baseProblem.terms]
+      const lastIndex = newTerms.length - 1
+      const newLastTerm = newTerms[lastIndex] + modifier * direction
 
       // Check if the new term is within constraints
       if (newLastTerm >= min && newLastTerm <= max) {
-        newTerms[lastIndex] = newLastTerm;
-        const newSum = newTerms.reduce((acc, term) => acc + term, 0);
+        newTerms[lastIndex] = newLastTerm
+        const newSum = newTerms.reduce((acc, term) => acc + term, 0)
 
         // Check sum constraints
         if (
@@ -719,89 +606,69 @@ function createModifiedUniqueProblem(
             explanation: generateSequentialExplanation(
               newTerms,
               newSum,
-              baseProblem.requiredSkills,
+              baseProblem.requiredSkills
             ),
-          };
+          }
 
           // Check if this modification creates a unique problem
           if (!isDuplicateProblem(modifiedProblem, existingProblems)) {
-            return modifiedProblem;
+            return modifiedProblem
           }
         }
       }
     }
   }
 
-  return null; // Could not create a unique modification
+  return null // Could not create a unique modification
 }
 
 /**
  * Validates that a practice step configuration can generate problems
  */
 export function validatePracticeStepConfiguration(practiceStep: PracticeStep): {
-  isValid: boolean;
-  warnings: string[];
-  suggestions: string[];
+  isValid: boolean
+  warnings: string[]
+  suggestions: string[]
 } {
-  const warnings: string[] = [];
-  const suggestions: string[] = [];
+  const warnings: string[] = []
+  const suggestions: string[] = []
 
   // Check if any required skills are enabled
   const hasAnyRequiredSkill =
     Object.values(practiceStep.requiredSkills.basic).some(Boolean) ||
     Object.values(practiceStep.requiredSkills.fiveComplements).some(Boolean) ||
-    Object.values(practiceStep.requiredSkills.tenComplements).some(Boolean);
+    Object.values(practiceStep.requiredSkills.tenComplements).some(Boolean)
 
   if (!hasAnyRequiredSkill) {
-    warnings.push(
-      "No required skills are enabled. Problems may be very basic.",
-    );
-    suggestions.push(
-      'Enable at least one skill in the "Required Skills" section.',
-    );
+    warnings.push('No required skills are enabled. Problems may be very basic.')
+    suggestions.push('Enable at least one skill in the "Required Skills" section.')
   }
 
   // Check number range vs sum constraints
   const maxPossibleSum = practiceStep.numberRange?.max
     ? practiceStep.numberRange.max * practiceStep.maxTerms
-    : 9 * practiceStep.maxTerms;
+    : 9 * practiceStep.maxTerms
 
-  if (
-    practiceStep.sumConstraints?.maxSum &&
-    practiceStep.sumConstraints.maxSum > maxPossibleSum
-  ) {
-    warnings.push(
-      "Maximum sum constraint is higher than what the number range allows.",
-    );
-    suggestions.push(
-      "Either increase the number range maximum or decrease the sum constraint.",
-    );
+  if (practiceStep.sumConstraints?.maxSum && practiceStep.sumConstraints.maxSum > maxPossibleSum) {
+    warnings.push('Maximum sum constraint is higher than what the number range allows.')
+    suggestions.push('Either increase the number range maximum or decrease the sum constraint.')
   }
 
   // Check if constraints are too restrictive
-  if (
-    practiceStep.sumConstraints?.maxSum &&
-    practiceStep.sumConstraints.maxSum < 5
-  ) {
-    warnings.push("Very low sum constraint may limit problem variety.");
-    suggestions.push(
-      "Consider increasing the maximum sum to allow more diverse problems.",
-    );
+  if (practiceStep.sumConstraints?.maxSum && practiceStep.sumConstraints.maxSum < 5) {
+    warnings.push('Very low sum constraint may limit problem variety.')
+    suggestions.push('Consider increasing the maximum sum to allow more diverse problems.')
   }
 
   // Check problem count
   if (practiceStep.problemCount > 20) {
-    warnings.push(
-      "High problem count may take a long time to generate and complete.",
-    );
-    suggestions.push(
-      "Consider reducing the problem count for better user experience.",
-    );
+    warnings.push('High problem count may take a long time to generate and complete.')
+    suggestions.push('Consider reducing the problem count for better user experience.')
   }
 
   return {
     isValid: warnings.length === 0,
     warnings,
     suggestions,
-  };
+  }
 }
diff --git a/apps/web/src/utils/room-display.ts b/apps/web/src/utils/room-display.ts
index 78a00e27..8c989125 100644
--- a/apps/web/src/utils/room-display.ts
+++ b/apps/web/src/utils/room-display.ts
@@ -6,15 +6,15 @@ export interface RoomDisplayData {
   /**
    * The room's custom name if provided
    */
-  name: string | null;
+  name: string | null
   /**
    * The room's unique code (e.g., "ABC123")
    */
-  code: string;
+  code: string
   /**
    * The game type (optional, for emoji selection)
    */
-  gameName?: string;
+  gameName?: string
 }
 
 export interface RoomDisplay {
@@ -22,36 +22,36 @@ export interface RoomDisplay {
    * Plain text representation - ALWAYS available
    * Use this for: document titles, logs, notifications, plaintext contexts
    */
-  plaintext: string;
+  plaintext: string
 
   /**
    * Primary display text (without emoji)
    */
-  primary: string;
+  primary: string
 
   /**
    * Secondary/subtitle text (optional)
    */
-  secondary?: string;
+  secondary?: string
 
   /**
    * Emoji/icon for the room (optional)
    */
-  emoji?: string;
+  emoji?: string
 
   /**
    * Whether the name was auto-generated (vs. custom)
    */
-  isGenerated: boolean;
+  isGenerated: boolean
 }
 
 const GAME_EMOJIS: Record<string, string> = {
-  matching: "🃏",
-  "memory-quiz": "🧠",
-  "complement-race": "⚡",
-};
+  matching: '🃏',
+  'memory-quiz': '🧠',
+  'complement-race': '⚡',
+}
 
-const DEFAULT_EMOJI = "🎮";
+const DEFAULT_EMOJI = '🎮'
 
 /**
  * Get structured room display information
@@ -75,11 +75,11 @@ export function getRoomDisplay(room: RoomDisplayData): RoomDisplay {
       secondary: room.code,
       emoji: undefined,
       isGenerated: false,
-    };
+    }
   }
 
   // Auto-generate display
-  const emoji = GAME_EMOJIS[room.gameName || ""] || DEFAULT_EMOJI;
+  const emoji = GAME_EMOJIS[room.gameName || ''] || DEFAULT_EMOJI
 
   return {
     plaintext: `Room ${room.code}`, // Always plaintext fallback
@@ -87,7 +87,7 @@ export function getRoomDisplay(room: RoomDisplayData): RoomDisplay {
     secondary: undefined,
     emoji,
     isGenerated: true,
-  };
+  }
 }
 
 /**
@@ -103,7 +103,7 @@ export function getRoomDisplay(room: RoomDisplayData): RoomDisplay {
  * // => "Room ABC123"
  */
 export function getRoomDisplayName(room: RoomDisplayData): string {
-  return getRoomDisplay(room).plaintext;
+  return getRoomDisplay(room).plaintext
 }
 
 /**
@@ -118,9 +118,9 @@ export function getRoomDisplayName(room: RoomDisplayData): string {
  * // => "🃏 ABC123"
  */
 export function getRoomDisplayWithEmoji(room: RoomDisplayData): string {
-  const display = getRoomDisplay(room);
+  const display = getRoomDisplay(room)
   if (display.emoji) {
-    return `${display.emoji} ${display.primary}`;
+    return `${display.emoji} ${display.primary}`
   }
-  return display.primary;
+  return display.primary
 }
diff --git a/apps/web/src/utils/skillConfiguration.ts b/apps/web/src/utils/skillConfiguration.ts
index 348adc4f..4188f2ba 100644
--- a/apps/web/src/utils/skillConfiguration.ts
+++ b/apps/web/src/utils/skillConfiguration.ts
@@ -1,92 +1,92 @@
-import type { SkillSet } from "../types/tutorial";
+import type { SkillSet } from '../types/tutorial'
 
-export type SkillMode = "off" | "allowed" | "target" | "forbidden";
+export type SkillMode = 'off' | 'allowed' | 'target' | 'forbidden'
 
 export interface SkillConfiguration {
   basic: {
-    directAddition: SkillMode;
-    heavenBead: SkillMode;
-    simpleCombinations: SkillMode;
-  };
+    directAddition: SkillMode
+    heavenBead: SkillMode
+    simpleCombinations: SkillMode
+  }
   fiveComplements: {
-    "4=5-1": SkillMode;
-    "3=5-2": SkillMode;
-    "2=5-3": SkillMode;
-    "1=5-4": SkillMode;
-  };
+    '4=5-1': SkillMode
+    '3=5-2': SkillMode
+    '2=5-3': SkillMode
+    '1=5-4': SkillMode
+  }
   tenComplements: {
-    "9=10-1": SkillMode;
-    "8=10-2": SkillMode;
-    "7=10-3": SkillMode;
-    "6=10-4": SkillMode;
-    "5=10-5": SkillMode;
-    "4=10-6": SkillMode;
-    "3=10-7": SkillMode;
-    "2=10-8": SkillMode;
-    "1=10-9": SkillMode;
-  };
+    '9=10-1': SkillMode
+    '8=10-2': SkillMode
+    '7=10-3': SkillMode
+    '6=10-4': SkillMode
+    '5=10-5': SkillMode
+    '4=10-6': SkillMode
+    '3=10-7': SkillMode
+    '2=10-8': SkillMode
+    '1=10-9': SkillMode
+  }
 }
 
 // Helper functions for new skill configuration
 export function createDefaultSkillConfiguration(): SkillConfiguration {
   return {
     basic: {
-      directAddition: "allowed",
-      heavenBead: "off",
-      simpleCombinations: "off",
+      directAddition: 'allowed',
+      heavenBead: 'off',
+      simpleCombinations: 'off',
     },
     fiveComplements: {
-      "4=5-1": "off",
-      "3=5-2": "off",
-      "2=5-3": "off",
-      "1=5-4": "off",
+      '4=5-1': 'off',
+      '3=5-2': 'off',
+      '2=5-3': 'off',
+      '1=5-4': 'off',
     },
     tenComplements: {
-      "9=10-1": "off",
-      "8=10-2": "off",
-      "7=10-3": "off",
-      "6=10-4": "off",
-      "5=10-5": "off",
-      "4=10-6": "off",
-      "3=10-7": "off",
-      "2=10-8": "off",
-      "1=10-9": "off",
+      '9=10-1': 'off',
+      '8=10-2': 'off',
+      '7=10-3': 'off',
+      '6=10-4': 'off',
+      '5=10-5': 'off',
+      '4=10-6': 'off',
+      '3=10-7': 'off',
+      '2=10-8': 'off',
+      '1=10-9': 'off',
     },
-  };
+  }
 }
 
 export function createBasicAllowedConfiguration(): SkillConfiguration {
   return {
     basic: {
-      directAddition: "allowed",
-      heavenBead: "allowed",
-      simpleCombinations: "off",
+      directAddition: 'allowed',
+      heavenBead: 'allowed',
+      simpleCombinations: 'off',
     },
     fiveComplements: {
-      "4=5-1": "off",
-      "3=5-2": "off",
-      "2=5-3": "off",
-      "1=5-4": "off",
+      '4=5-1': 'off',
+      '3=5-2': 'off',
+      '2=5-3': 'off',
+      '1=5-4': 'off',
     },
     tenComplements: {
-      "9=10-1": "off",
-      "8=10-2": "off",
-      "7=10-3": "off",
-      "6=10-4": "off",
-      "5=10-5": "off",
-      "4=10-6": "off",
-      "3=10-7": "off",
-      "2=10-8": "off",
-      "1=10-9": "off",
+      '9=10-1': 'off',
+      '8=10-2': 'off',
+      '7=10-3': 'off',
+      '6=10-4': 'off',
+      '5=10-5': 'off',
+      '4=10-6': 'off',
+      '3=10-7': 'off',
+      '2=10-8': 'off',
+      '1=10-9': 'off',
     },
-  };
+  }
 }
 
 // Convert between old and new formats
 export function skillConfigurationToSkillSets(config: SkillConfiguration): {
-  required: SkillSet;
-  target: Partial<SkillSet>;
-  forbidden: Partial<SkillSet>;
+  required: SkillSet
+  target: Partial<SkillSet>
+  forbidden: Partial<SkillSet>
 } {
   const required: SkillSet = {
     basic: {
@@ -95,129 +95,122 @@ export function skillConfigurationToSkillSets(config: SkillConfiguration): {
       simpleCombinations: false,
     },
     fiveComplements: {
-      "4=5-1": false,
-      "3=5-2": false,
-      "2=5-3": false,
-      "1=5-4": false,
+      '4=5-1': false,
+      '3=5-2': false,
+      '2=5-3': false,
+      '1=5-4': false,
     },
     tenComplements: {
-      "9=10-1": false,
-      "8=10-2": false,
-      "7=10-3": false,
-      "6=10-4": false,
-      "5=10-5": false,
-      "4=10-6": false,
-      "3=10-7": false,
-      "2=10-8": false,
-      "1=10-9": false,
+      '9=10-1': false,
+      '8=10-2': false,
+      '7=10-3': false,
+      '6=10-4': false,
+      '5=10-5': false,
+      '4=10-6': false,
+      '3=10-7': false,
+      '2=10-8': false,
+      '1=10-9': false,
     },
-  };
+  }
 
-  const target: Partial<SkillSet> = {};
-  const forbidden: Partial<SkillSet> = {};
+  const target: Partial<SkillSet> = {}
+  const forbidden: Partial<SkillSet> = {}
 
   // Basic skills
   Object.entries(config.basic).forEach(([skill, mode]) => {
-    if (mode === "allowed" || mode === "target") {
-      required.basic[skill as keyof typeof required.basic] = true;
+    if (mode === 'allowed' || mode === 'target') {
+      required.basic[skill as keyof typeof required.basic] = true
     }
-    if (mode === "target") {
-      if (!target.basic) target.basic = {} as any;
-      target.basic![skill as keyof typeof required.basic] = true;
+    if (mode === 'target') {
+      if (!target.basic) target.basic = {} as any
+      target.basic![skill as keyof typeof required.basic] = true
     }
-    if (mode === "forbidden") {
-      if (!forbidden.basic) forbidden.basic = {} as any;
-      forbidden.basic![skill as keyof typeof required.basic] = true;
+    if (mode === 'forbidden') {
+      if (!forbidden.basic) forbidden.basic = {} as any
+      forbidden.basic![skill as keyof typeof required.basic] = true
     }
-  });
+  })
 
   // Five complements
   Object.entries(config.fiveComplements).forEach(([skill, mode]) => {
-    if (mode === "allowed" || mode === "target") {
-      required.fiveComplements[skill as keyof typeof required.fiveComplements] =
-        true;
+    if (mode === 'allowed' || mode === 'target') {
+      required.fiveComplements[skill as keyof typeof required.fiveComplements] = true
     }
-    if (mode === "target") {
-      if (!target.fiveComplements) target.fiveComplements = {} as any;
-      target.fiveComplements![skill as keyof typeof required.fiveComplements] =
-        true;
+    if (mode === 'target') {
+      if (!target.fiveComplements) target.fiveComplements = {} as any
+      target.fiveComplements![skill as keyof typeof required.fiveComplements] = true
     }
-    if (mode === "forbidden") {
-      if (!forbidden.fiveComplements) forbidden.fiveComplements = {} as any;
-      forbidden.fiveComplements![
-        skill as keyof typeof required.fiveComplements
-      ] = true;
+    if (mode === 'forbidden') {
+      if (!forbidden.fiveComplements) forbidden.fiveComplements = {} as any
+      forbidden.fiveComplements![skill as keyof typeof required.fiveComplements] = true
     }
-  });
+  })
 
   // Ten complements
   Object.entries(config.tenComplements).forEach(([skill, mode]) => {
-    if (mode === "allowed" || mode === "target") {
-      required.tenComplements[skill as keyof typeof required.tenComplements] =
-        true;
+    if (mode === 'allowed' || mode === 'target') {
+      required.tenComplements[skill as keyof typeof required.tenComplements] = true
     }
-    if (mode === "target") {
-      if (!target.tenComplements) target.tenComplements = {} as any;
-      target.tenComplements![skill as keyof typeof required.tenComplements] =
-        true;
+    if (mode === 'target') {
+      if (!target.tenComplements) target.tenComplements = {} as any
+      target.tenComplements![skill as keyof typeof required.tenComplements] = true
     }
-    if (mode === "forbidden") {
-      if (!forbidden.tenComplements) forbidden.tenComplements = {} as any;
-      forbidden.tenComplements![skill as keyof typeof required.tenComplements] =
-        true;
+    if (mode === 'forbidden') {
+      if (!forbidden.tenComplements) forbidden.tenComplements = {} as any
+      forbidden.tenComplements![skill as keyof typeof required.tenComplements] = true
     }
-  });
+  })
 
-  return { required, target, forbidden };
+  return { required, target, forbidden }
 }
 
 // Convert from old format to new format
 export function skillSetsToConfiguration(
   required: SkillSet,
   target?: Partial<SkillSet>,
-  forbidden?: Partial<SkillSet>,
+  forbidden?: Partial<SkillSet>
 ): SkillConfiguration {
-  const config = createDefaultSkillConfiguration();
+  const config = createDefaultSkillConfiguration()
 
   // Process each skill category
   Object.entries(required.basic).forEach(([skill, isRequired]) => {
-    const skillKey = skill as keyof typeof config.basic;
+    const skillKey = skill as keyof typeof config.basic
     if (forbidden?.basic?.[skillKey]) {
-      config.basic[skillKey] = "forbidden";
+      config.basic[skillKey] = 'forbidden'
     } else if (target?.basic?.[skillKey]) {
-      config.basic[skillKey] = "target";
+      config.basic[skillKey] = 'target'
     } else if (isRequired) {
-      config.basic[skillKey] = "allowed";
+      config.basic[skillKey] = 'allowed'
     } else {
-      config.basic[skillKey] = "off";
+      config.basic[skillKey] = 'off'
     }
-  });
+  })
 
   Object.entries(required.fiveComplements).forEach(([skill, isRequired]) => {
-    const skillKey = skill as keyof typeof config.fiveComplements;
+    const skillKey = skill as keyof typeof config.fiveComplements
     if (forbidden?.fiveComplements?.[skillKey]) {
-      config.fiveComplements[skillKey] = "forbidden";
+      config.fiveComplements[skillKey] = 'forbidden'
     } else if (target?.fiveComplements?.[skillKey]) {
-      config.fiveComplements[skillKey] = "target";
+      config.fiveComplements[skillKey] = 'target'
     } else if (isRequired) {
-      config.fiveComplements[skillKey] = "allowed";
+      config.fiveComplements[skillKey] = 'allowed'
     } else {
-      config.fiveComplements[skillKey] = "off";
+      config.fiveComplements[skillKey] = 'off'
     }
-  });
+  })
 
   Object.entries(required.tenComplements).forEach(([skill, isRequired]) => {
-    const skillKey = skill as keyof typeof config.tenComplements;
+    const skillKey = skill as keyof typeof config.tenComplements
     if (forbidden?.tenComplements?.[skillKey]) {
-      config.tenComplements[skillKey] = "forbidden";
+      config.tenComplements[skillKey] = 'forbidden'
     } else if (target?.tenComplements?.[skillKey]) {
-      config.tenComplements[skillKey] = "target";
+      config.tenComplements[skillKey] = 'target'
     } else if (isRequired) {
-      config.tenComplements[skillKey] = "allowed";
+      config.tenComplements[skillKey] = 'allowed'
     } else {
-      config.tenComplements[skillKey] = "off";
+      config.tenComplements[skillKey] = 'off'
     }
-  });
+  })
 
-  return config;
+  return config
 }
diff --git a/apps/web/src/utils/test/beadDiff.test.ts b/apps/web/src/utils/test/beadDiff.test.ts
index d2f3218b..fd33d91e 100644
--- a/apps/web/src/utils/test/beadDiff.test.ts
+++ b/apps/web/src/utils/test/beadDiff.test.ts
@@ -1,235 +1,233 @@
-import { describe, expect, it } from "vitest";
-import { numberToAbacusState } from "../abacusInstructionGenerator";
+import { describe, expect, it } from 'vitest'
+import { numberToAbacusState } from '../abacusInstructionGenerator'
 import {
   areStatesEqual,
   calculateBeadDiff,
   calculateBeadDiffFromValues,
   calculateMultiStepBeadDiffs,
   validateBeadDiff,
-} from "../beadDiff";
+} from '../beadDiff'
 
-describe("Bead Diff Algorithm", () => {
-  describe("Basic State Transitions", () => {
-    it("should calculate diff for simple addition: 0 + 1", () => {
-      const diff = calculateBeadDiffFromValues(0, 1);
+describe('Bead Diff Algorithm', () => {
+  describe('Basic State Transitions', () => {
+    it('should calculate diff for simple addition: 0 + 1', () => {
+      const diff = calculateBeadDiffFromValues(0, 1)
 
-      expect(diff.hasChanges).toBe(true);
-      expect(diff.changes).toHaveLength(1);
+      expect(diff.hasChanges).toBe(true)
+      expect(diff.changes).toHaveLength(1)
       expect(diff.changes[0]).toEqual({
         placeValue: 0,
-        beadType: "earth",
+        beadType: 'earth',
         position: 0,
-        direction: "activate",
+        direction: 'activate',
         order: 0,
-      });
-      expect(diff.summary).toBe("add 1 earth bead in ones column");
-    });
+      })
+      expect(diff.summary).toBe('add 1 earth bead in ones column')
+    })
 
-    it("should calculate diff for heaven bead: 0 + 5", () => {
-      const diff = calculateBeadDiffFromValues(0, 5);
+    it('should calculate diff for heaven bead: 0 + 5', () => {
+      const diff = calculateBeadDiffFromValues(0, 5)
 
-      expect(diff.hasChanges).toBe(true);
-      expect(diff.changes).toHaveLength(1);
+      expect(diff.hasChanges).toBe(true)
+      expect(diff.changes).toHaveLength(1)
       expect(diff.changes[0]).toEqual({
         placeValue: 0,
-        beadType: "heaven",
-        direction: "activate",
+        beadType: 'heaven',
+        direction: 'activate',
         order: 0,
-      });
-      expect(diff.summary).toBe("add heaven bead in ones column");
-    });
+      })
+      expect(diff.summary).toBe('add heaven bead in ones column')
+    })
 
-    it("should calculate diff for complement operation: 3 + 4 = 7", () => {
-      const diff = calculateBeadDiffFromValues(3, 7);
+    it('should calculate diff for complement operation: 3 + 4 = 7', () => {
+      const diff = calculateBeadDiffFromValues(3, 7)
 
-      expect(diff.hasChanges).toBe(true);
-      expect(diff.changes).toHaveLength(2); // Remove 1 earth, add heaven
+      expect(diff.hasChanges).toBe(true)
+      expect(diff.changes).toHaveLength(2) // Remove 1 earth, add heaven
 
       // Should remove 1 earth bead first (pedagogical order)
-      const removals = diff.changes.filter((c) => c.direction === "deactivate");
-      const additions = diff.changes.filter((c) => c.direction === "activate");
+      const removals = diff.changes.filter((c) => c.direction === 'deactivate')
+      const additions = diff.changes.filter((c) => c.direction === 'activate')
 
-      expect(removals).toHaveLength(1); // Remove 1 earth bead (position 2)
-      expect(additions).toHaveLength(1); // Add heaven bead
+      expect(removals).toHaveLength(1) // Remove 1 earth bead (position 2)
+      expect(additions).toHaveLength(1) // Add heaven bead
 
       // Removals should come first in order
-      expect(removals[0].order).toBeLessThan(additions[0].order);
+      expect(removals[0].order).toBeLessThan(additions[0].order)
 
-      expect(diff.summary).toContain("remove 1 earth bead");
-      expect(diff.summary).toContain("add heaven bead");
-    });
+      expect(diff.summary).toContain('remove 1 earth bead')
+      expect(diff.summary).toContain('add heaven bead')
+    })
 
-    it("should calculate diff for ten transition: 9 + 1 = 10", () => {
-      const diff = calculateBeadDiffFromValues(9, 10);
+    it('should calculate diff for ten transition: 9 + 1 = 10', () => {
+      const diff = calculateBeadDiffFromValues(9, 10)
 
-      expect(diff.hasChanges).toBe(true);
+      expect(diff.hasChanges).toBe(true)
 
       // Should remove heaven + 4 earth in ones, add 1 earth in tens
-      const onesChanges = diff.changes.filter((c) => c.placeValue === 0);
-      const tensChanges = diff.changes.filter((c) => c.placeValue === 1);
+      const onesChanges = diff.changes.filter((c) => c.placeValue === 0)
+      const tensChanges = diff.changes.filter((c) => c.placeValue === 1)
 
-      expect(onesChanges).toHaveLength(5); // Remove heaven + 4 earth
-      expect(tensChanges).toHaveLength(1); // Add 1 earth in tens
+      expect(onesChanges).toHaveLength(5) // Remove heaven + 4 earth
+      expect(tensChanges).toHaveLength(1) // Add 1 earth in tens
 
-      expect(diff.summary).toContain("tens column");
-      expect(diff.summary).toContain("ones column");
-    });
-  });
+      expect(diff.summary).toContain('tens column')
+      expect(diff.summary).toContain('ones column')
+    })
+  })
 
-  describe("Multi-Step Operations", () => {
-    it("should calculate multi-step diff for 3 + 14 = 17", () => {
+  describe('Multi-Step Operations', () => {
+    it('should calculate multi-step diff for 3 + 14 = 17', () => {
       const steps = [
-        { expectedValue: 13, instruction: "Add 10" },
-        { expectedValue: 17, instruction: "Add 4 using complement" },
-      ];
+        { expectedValue: 13, instruction: 'Add 10' },
+        { expectedValue: 17, instruction: 'Add 4 using complement' },
+      ]
 
-      const multiStepDiffs = calculateMultiStepBeadDiffs(3, steps);
+      const multiStepDiffs = calculateMultiStepBeadDiffs(3, steps)
 
-      expect(multiStepDiffs).toHaveLength(2);
+      expect(multiStepDiffs).toHaveLength(2)
 
       // Step 1: 3 → 13 (add 1 earth bead in tens)
-      const step1 = multiStepDiffs[0];
-      expect(step1.fromValue).toBe(3);
-      expect(step1.toValue).toBe(13);
-      expect(step1.diff.changes).toHaveLength(1);
-      expect(step1.diff.changes[0].placeValue).toBe(1); // tens
-      expect(step1.diff.changes[0].beadType).toBe("earth");
-      expect(step1.diff.changes[0].direction).toBe("activate");
+      const step1 = multiStepDiffs[0]
+      expect(step1.fromValue).toBe(3)
+      expect(step1.toValue).toBe(13)
+      expect(step1.diff.changes).toHaveLength(1)
+      expect(step1.diff.changes[0].placeValue).toBe(1) // tens
+      expect(step1.diff.changes[0].beadType).toBe('earth')
+      expect(step1.diff.changes[0].direction).toBe('activate')
 
       // Step 2: 13 → 17 (complement operation in ones)
-      const step2 = multiStepDiffs[1];
-      expect(step2.fromValue).toBe(13);
-      expect(step2.toValue).toBe(17);
-      expect(step2.diff.changes.length).toBeGreaterThan(1); // Multiple bead movements
-    });
-  });
+      const step2 = multiStepDiffs[1]
+      expect(step2.fromValue).toBe(13)
+      expect(step2.toValue).toBe(17)
+      expect(step2.diff.changes.length).toBeGreaterThan(1) // Multiple bead movements
+    })
+  })
 
-  describe("Edge Cases and Validation", () => {
-    it("should return no changes for identical states", () => {
-      const diff = calculateBeadDiffFromValues(5, 5);
+  describe('Edge Cases and Validation', () => {
+    it('should return no changes for identical states', () => {
+      const diff = calculateBeadDiffFromValues(5, 5)
 
-      expect(diff.hasChanges).toBe(false);
-      expect(diff.changes).toHaveLength(0);
-      expect(diff.summary).toBe("No changes needed");
-    });
+      expect(diff.hasChanges).toBe(false)
+      expect(diff.changes).toHaveLength(0)
+      expect(diff.summary).toBe('No changes needed')
+    })
 
-    it("should handle large numbers correctly", () => {
-      const diff = calculateBeadDiffFromValues(0, 999);
+    it('should handle large numbers correctly', () => {
+      const diff = calculateBeadDiffFromValues(0, 999)
 
-      expect(diff.hasChanges).toBe(true);
-      expect(diff.changes.length).toBeGreaterThan(0);
+      expect(diff.hasChanges).toBe(true)
+      expect(diff.changes.length).toBeGreaterThan(0)
 
       // Should have changes in hundreds, tens, and ones places
-      const places = new Set(diff.changes.map((c) => c.placeValue));
-      expect(places).toContain(0); // ones
-      expect(places).toContain(1); // tens
-      expect(places).toContain(2); // hundreds
-    });
+      const places = new Set(diff.changes.map((c) => c.placeValue))
+      expect(places).toContain(0) // ones
+      expect(places).toContain(1) // tens
+      expect(places).toContain(2) // hundreds
+    })
 
-    it("should validate impossible bead states", () => {
+    it('should validate impossible bead states', () => {
       // Create a diff that would result in more than 4 earth beads
-      const fromState = numberToAbacusState(0);
-      const toState = numberToAbacusState(0);
-      toState[0] = { heavenActive: false, earthActive: 5 }; // Invalid: too many earth beads
+      const fromState = numberToAbacusState(0)
+      const toState = numberToAbacusState(0)
+      toState[0] = { heavenActive: false, earthActive: 5 } // Invalid: too many earth beads
 
-      const diff = calculateBeadDiff(fromState, toState);
-      const validation = validateBeadDiff(diff);
+      const diff = calculateBeadDiff(fromState, toState)
+      const validation = validateBeadDiff(diff)
 
-      expect(validation.isValid).toBe(false);
-      expect(validation.errors.length).toBeGreaterThan(0);
-      expect(validation.errors[0]).toContain(
-        "Cannot have more than 4 earth beads",
-      );
-    });
+      expect(validation.isValid).toBe(false)
+      expect(validation.errors.length).toBeGreaterThan(0)
+      expect(validation.errors[0]).toContain('Cannot have more than 4 earth beads')
+    })
 
-    it("should correctly identify equal states", () => {
-      const state1 = numberToAbacusState(42);
-      const state2 = numberToAbacusState(42);
-      const state3 = numberToAbacusState(43);
+    it('should correctly identify equal states', () => {
+      const state1 = numberToAbacusState(42)
+      const state2 = numberToAbacusState(42)
+      const state3 = numberToAbacusState(43)
 
-      expect(areStatesEqual(state1, state2)).toBe(true);
-      expect(areStatesEqual(state1, state3)).toBe(false);
-    });
-  });
+      expect(areStatesEqual(state1, state2)).toBe(true)
+      expect(areStatesEqual(state1, state3)).toBe(false)
+    })
+  })
 
-  describe("Pedagogical Ordering", () => {
-    it("should process removals before additions", () => {
+  describe('Pedagogical Ordering', () => {
+    it('should process removals before additions', () => {
       // Test a case that requires both removing and adding beads
-      const diff = calculateBeadDiffFromValues(7, 2); // 7 → 2: remove heaven, remove 2 earth, add 2 earth
+      const diff = calculateBeadDiffFromValues(7, 2) // 7 → 2: remove heaven, remove 2 earth, add 2 earth
 
-      const removals = diff.changes.filter((c) => c.direction === "deactivate");
-      const additions = diff.changes.filter((c) => c.direction === "activate");
+      const removals = diff.changes.filter((c) => c.direction === 'deactivate')
+      const additions = diff.changes.filter((c) => c.direction === 'activate')
 
       if (removals.length > 0 && additions.length > 0) {
         // All removals should have lower order numbers than additions
-        const maxRemovalOrder = Math.max(...removals.map((r) => r.order));
-        const minAdditionOrder = Math.min(...additions.map((a) => a.order));
+        const maxRemovalOrder = Math.max(...removals.map((r) => r.order))
+        const minAdditionOrder = Math.min(...additions.map((a) => a.order))
 
-        expect(maxRemovalOrder).toBeLessThan(minAdditionOrder);
+        expect(maxRemovalOrder).toBeLessThan(minAdditionOrder)
       }
-    });
+    })
 
-    it("should maintain consistent ordering for animation", () => {
-      const diff = calculateBeadDiffFromValues(0, 23); // Complex operation
+    it('should maintain consistent ordering for animation', () => {
+      const diff = calculateBeadDiffFromValues(0, 23) // Complex operation
 
       // Orders should be consecutive starting from 0
-      const orders = diff.changes.map((c) => c.order).sort((a, b) => a - b);
+      const orders = diff.changes.map((c) => c.order).sort((a, b) => a - b)
 
       for (let i = 0; i < orders.length; i++) {
-        expect(orders[i]).toBe(i);
+        expect(orders[i]).toBe(i)
       }
-    });
-  });
+    })
+  })
 
-  describe("Real Tutorial Examples", () => {
+  describe('Real Tutorial Examples', () => {
     it('should handle the classic "3 + 14 = 17" example', () => {
-      console.log("=== Testing 3 + 14 = 17 ===");
+      console.log('=== Testing 3 + 14 = 17 ===')
 
-      const diff = calculateBeadDiffFromValues(3, 17);
+      const diff = calculateBeadDiffFromValues(3, 17)
 
-      console.log("Changes:", diff.changes);
-      console.log("Summary:", diff.summary);
+      console.log('Changes:', diff.changes)
+      console.log('Summary:', diff.summary)
 
-      expect(diff.hasChanges).toBe(true);
-      expect(diff.summary).toBeDefined();
+      expect(diff.hasChanges).toBe(true)
+      expect(diff.summary).toBeDefined()
 
       // Should involve both tens and ones places
-      const places = new Set(diff.changes.map((c) => c.placeValue));
-      expect(places).toContain(0); // ones
-      expect(places).toContain(1); // tens
-    });
+      const places = new Set(diff.changes.map((c) => c.placeValue))
+      expect(places).toContain(0) // ones
+      expect(places).toContain(1) // tens
+    })
 
     it('should handle "7 + 4 = 11" ten complement', () => {
-      console.log("=== Testing 7 + 4 = 11 ===");
+      console.log('=== Testing 7 + 4 = 11 ===')
 
-      const diff = calculateBeadDiffFromValues(7, 11);
+      const diff = calculateBeadDiffFromValues(7, 11)
 
-      console.log("Changes:", diff.changes);
-      console.log("Summary:", diff.summary);
+      console.log('Changes:', diff.changes)
+      console.log('Summary:', diff.summary)
 
-      expect(diff.hasChanges).toBe(true);
+      expect(diff.hasChanges).toBe(true)
 
       // Should involve both tens and ones places
-      const places = new Set(diff.changes.map((c) => c.placeValue));
-      expect(places).toContain(0); // ones
-      expect(places).toContain(1); // tens
-    });
+      const places = new Set(diff.changes.map((c) => c.placeValue))
+      expect(places).toContain(0) // ones
+      expect(places).toContain(1) // tens
+    })
 
     it('should handle "99 + 1 = 100" boundary crossing', () => {
-      console.log("=== Testing 99 + 1 = 100 ===");
+      console.log('=== Testing 99 + 1 = 100 ===')
 
-      const diff = calculateBeadDiffFromValues(99, 100);
+      const diff = calculateBeadDiffFromValues(99, 100)
 
-      console.log("Changes:", diff.changes);
-      console.log("Summary:", diff.summary);
+      console.log('Changes:', diff.changes)
+      console.log('Summary:', diff.summary)
 
-      expect(diff.hasChanges).toBe(true);
+      expect(diff.hasChanges).toBe(true)
 
       // Should involve ones, tens, and hundreds places
-      const places = new Set(diff.changes.map((c) => c.placeValue));
-      expect(places).toContain(0); // ones
-      expect(places).toContain(1); // tens
-      expect(places).toContain(2); // hundreds
-    });
-  });
-});
+      const places = new Set(diff.changes.map((c) => c.placeValue))
+      expect(places).toContain(0) // ones
+      expect(places).toContain(1) // tens
+      expect(places).toContain(2) // hundreds
+    })
+  })
+})
diff --git a/apps/web/src/utils/test/instructionGenerator.test.ts b/apps/web/src/utils/test/instructionGenerator.test.ts
index 94ab0425..a2d1c719 100644
--- a/apps/web/src/utils/test/instructionGenerator.test.ts
+++ b/apps/web/src/utils/test/instructionGenerator.test.ts
@@ -1,21 +1,21 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from 'vitest'
 import {
   detectComplementOperation,
   generateAbacusInstructions,
   numberToAbacusState,
   validateInstruction,
-} from "../abacusInstructionGenerator";
+} from '../abacusInstructionGenerator'
 
-describe("Automatic Abacus Instruction Generator", () => {
-  describe("numberToAbacusState", () => {
-    it("should convert numbers to correct abacus states", () => {
+describe('Automatic Abacus Instruction Generator', () => {
+  describe('numberToAbacusState', () => {
+    it('should convert numbers to correct abacus states', () => {
       expect(numberToAbacusState(0)).toEqual({
         0: { heavenActive: false, earthActive: 0 },
         1: { heavenActive: false, earthActive: 0 },
         2: { heavenActive: false, earthActive: 0 },
         3: { heavenActive: false, earthActive: 0 },
         4: { heavenActive: false, earthActive: 0 },
-      });
+      })
 
       expect(numberToAbacusState(5)).toEqual({
         0: { heavenActive: true, earthActive: 0 },
@@ -23,7 +23,7 @@ describe("Automatic Abacus Instruction Generator", () => {
         2: { heavenActive: false, earthActive: 0 },
         3: { heavenActive: false, earthActive: 0 },
         4: { heavenActive: false, earthActive: 0 },
-      });
+      })
 
       expect(numberToAbacusState(7)).toEqual({
         0: { heavenActive: true, earthActive: 2 },
@@ -31,7 +31,7 @@ describe("Automatic Abacus Instruction Generator", () => {
         2: { heavenActive: false, earthActive: 0 },
         3: { heavenActive: false, earthActive: 0 },
         4: { heavenActive: false, earthActive: 0 },
-      });
+      })
 
       expect(numberToAbacusState(23)).toEqual({
         0: { heavenActive: false, earthActive: 3 },
@@ -39,277 +39,257 @@ describe("Automatic Abacus Instruction Generator", () => {
         2: { heavenActive: false, earthActive: 0 },
         3: { heavenActive: false, earthActive: 0 },
         4: { heavenActive: false, earthActive: 0 },
-      });
-    });
-  });
+      })
+    })
+  })
 
-  describe("detectComplementOperation", () => {
-    it("should detect five complement operations", () => {
+  describe('detectComplementOperation', () => {
+    it('should detect five complement operations', () => {
       // 3 + 4 = 7 (need complement because only 1 earth space available)
-      const result = detectComplementOperation(3, 7, 0);
-      expect(result.needsComplement).toBe(true);
-      expect(result.complementType).toBe("five");
-      expect(result.complementDetails?.addValue).toBe(5);
-      expect(result.complementDetails?.subtractValue).toBe(1);
-    });
+      const result = detectComplementOperation(3, 7, 0)
+      expect(result.needsComplement).toBe(true)
+      expect(result.complementType).toBe('five')
+      expect(result.complementDetails?.addValue).toBe(5)
+      expect(result.complementDetails?.subtractValue).toBe(1)
+    })
 
-    it("should detect ten complement operations", () => {
+    it('should detect ten complement operations', () => {
       // 7 + 4 = 11 (need to carry to tens place)
-      const result = detectComplementOperation(7, 11, 0);
-      expect(result.needsComplement).toBe(true);
-      expect(result.complementType).toBe("ten");
-    });
+      const result = detectComplementOperation(7, 11, 0)
+      expect(result.needsComplement).toBe(true)
+      expect(result.complementType).toBe('ten')
+    })
 
-    it("should not detect complement for direct operations", () => {
+    it('should not detect complement for direct operations', () => {
       // 1 + 1 = 2 (direct addition)
-      const result = detectComplementOperation(1, 2, 0);
-      expect(result.needsComplement).toBe(false);
-      expect(result.complementType).toBe("none");
-    });
-  });
+      const result = detectComplementOperation(1, 2, 0)
+      expect(result.needsComplement).toBe(false)
+      expect(result.complementType).toBe('none')
+    })
+  })
 
-  describe("generateAbacusInstructions", () => {
-    it("should generate correct instructions for basic addition", () => {
-      const instruction = generateAbacusInstructions(0, 1);
+  describe('generateAbacusInstructions', () => {
+    it('should generate correct instructions for basic addition', () => {
+      const instruction = generateAbacusInstructions(0, 1)
 
-      expect(instruction.highlightBeads).toHaveLength(1);
+      expect(instruction.highlightBeads).toHaveLength(1)
       expect(instruction.highlightBeads[0]).toEqual({
         placeValue: 0,
-        beadType: "earth",
+        beadType: 'earth',
         position: 0,
-      });
-      expect(instruction.expectedAction).toBe("add");
-      expect(instruction.actionDescription).toContain("earth bead");
-    });
+      })
+      expect(instruction.expectedAction).toBe('add')
+      expect(instruction.actionDescription).toContain('earth bead')
+    })
 
-    it("should generate correct instructions for heaven bead", () => {
-      const instruction = generateAbacusInstructions(0, 5);
+    it('should generate correct instructions for heaven bead', () => {
+      const instruction = generateAbacusInstructions(0, 5)
 
-      expect(instruction.highlightBeads).toHaveLength(1);
+      expect(instruction.highlightBeads).toHaveLength(1)
       expect(instruction.highlightBeads[0]).toEqual({
         placeValue: 0,
-        beadType: "heaven",
-      });
-      expect(instruction.expectedAction).toBe("add");
-      expect(instruction.actionDescription).toContain("heaven bead");
-    });
+        beadType: 'heaven',
+      })
+      expect(instruction.expectedAction).toBe('add')
+      expect(instruction.actionDescription).toContain('heaven bead')
+    })
 
-    it("should generate correct instructions for five complement", () => {
-      const instruction = generateAbacusInstructions(3, 7); // 3 + 4
+    it('should generate correct instructions for five complement', () => {
+      const instruction = generateAbacusInstructions(3, 7) // 3 + 4
 
-      expect(instruction.highlightBeads).toHaveLength(2);
-      expect(instruction.expectedAction).toBe("multi-step");
-      expect(instruction.actionDescription).toContain("3 + 4 = 3 + (5 - 1)");
-      expect(instruction.multiStepInstructions).toBeDefined();
-      expect(instruction.multiStepInstructions).toHaveLength(2);
+      expect(instruction.highlightBeads).toHaveLength(2)
+      expect(instruction.expectedAction).toBe('multi-step')
+      expect(instruction.actionDescription).toContain('3 + 4 = 3 + (5 - 1)')
+      expect(instruction.multiStepInstructions).toBeDefined()
+      expect(instruction.multiStepInstructions).toHaveLength(2)
 
       // Should highlight heaven bead to add
-      const heavenBead = instruction.highlightBeads.find(
-        (b) => b.beadType === "heaven",
-      );
-      expect(heavenBead).toBeDefined();
+      const heavenBead = instruction.highlightBeads.find((b) => b.beadType === 'heaven')
+      expect(heavenBead).toBeDefined()
 
       // Should highlight earth bead to remove (the last one in the sequence)
-      const earthBead = instruction.highlightBeads.find(
-        (b) => b.beadType === "earth",
-      );
-      expect(earthBead).toBeDefined();
-      expect(earthBead?.position).toBe(2); // Position 2 (third earth bead) needs to be removed
-    });
+      const earthBead = instruction.highlightBeads.find((b) => b.beadType === 'earth')
+      expect(earthBead).toBeDefined()
+      expect(earthBead?.position).toBe(2) // Position 2 (third earth bead) needs to be removed
+    })
 
-    it("should generate correct instructions for ten complement", () => {
-      const instruction = generateAbacusInstructions(7, 11); // 7 + 4
+    it('should generate correct instructions for ten complement', () => {
+      const instruction = generateAbacusInstructions(7, 11) // 7 + 4
 
-      expect(instruction.highlightBeads).toHaveLength(3); // tens earth + ones heaven + 1 ones earth
-      expect(instruction.expectedAction).toBe("multi-step");
-      expect(instruction.actionDescription).toContain("7 + 4 = 7 + (5 - 1)");
+      expect(instruction.highlightBeads).toHaveLength(3) // tens earth + ones heaven + 1 ones earth
+      expect(instruction.expectedAction).toBe('multi-step')
+      expect(instruction.actionDescription).toContain('7 + 4 = 7 + (5 - 1)')
 
       // Should highlight tens place earth bead (to add 1 in tens place)
       const tensEarth = instruction.highlightBeads.find(
-        (b) => b.placeValue === 1 && b.beadType === "earth",
-      );
-      expect(tensEarth).toBeDefined();
+        (b) => b.placeValue === 1 && b.beadType === 'earth'
+      )
+      expect(tensEarth).toBeDefined()
 
       // Should highlight ones place beads to change
-      const onesBeads = instruction.highlightBeads.filter(
-        (b) => b.placeValue === 0,
-      );
-      expect(onesBeads).toHaveLength(2); // ones heaven + 1 ones earth to remove
-    });
+      const onesBeads = instruction.highlightBeads.filter((b) => b.placeValue === 0)
+      expect(onesBeads).toHaveLength(2) // ones heaven + 1 ones earth to remove
+    })
 
-    it("should generate correct instructions for direct multi-bead addition", () => {
-      const instruction = generateAbacusInstructions(6, 8); // 6 + 2
+    it('should generate correct instructions for direct multi-bead addition', () => {
+      const instruction = generateAbacusInstructions(6, 8) // 6 + 2
 
-      expect(instruction.highlightBeads).toHaveLength(2);
-      expect(instruction.expectedAction).toBe("multi-step");
+      expect(instruction.highlightBeads).toHaveLength(2)
+      expect(instruction.expectedAction).toBe('multi-step')
 
       // Should highlight earth beads at positions 1 and 2
       instruction.highlightBeads.forEach((bead) => {
-        expect(bead.beadType).toBe("earth");
-        expect(bead.placeValue).toBe(0);
-        expect([1, 2]).toContain(bead.position);
-      });
-    });
+        expect(bead.beadType).toBe('earth')
+        expect(bead.placeValue).toBe(0)
+        expect([1, 2]).toContain(bead.position)
+      })
+    })
 
-    it("should generate correct instructions for multi-place operations", () => {
-      const instruction = generateAbacusInstructions(15, 23); // 15 + 8
+    it('should generate correct instructions for multi-place operations', () => {
+      const instruction = generateAbacusInstructions(15, 23) // 15 + 8
 
       // Should involve both ones and tens places
-      const onesBeads = instruction.highlightBeads.filter(
-        (b) => b.placeValue === 0,
-      );
-      const tensBeads = instruction.highlightBeads.filter(
-        (b) => b.placeValue === 1,
-      );
+      const onesBeads = instruction.highlightBeads.filter((b) => b.placeValue === 0)
+      const tensBeads = instruction.highlightBeads.filter((b) => b.placeValue === 1)
 
-      expect(onesBeads.length + tensBeads.length).toBe(
-        instruction.highlightBeads.length,
-      );
-      expect(instruction.expectedAction).toBe("multi-step");
-    });
-  });
+      expect(onesBeads.length + tensBeads.length).toBe(instruction.highlightBeads.length)
+      expect(instruction.expectedAction).toBe('multi-step')
+    })
+  })
 
-  describe("validateInstruction", () => {
-    it("should validate correct instructions", () => {
-      const instruction = generateAbacusInstructions(0, 1);
-      const validation = validateInstruction(instruction, 0, 1);
+  describe('validateInstruction', () => {
+    it('should validate correct instructions', () => {
+      const instruction = generateAbacusInstructions(0, 1)
+      const validation = validateInstruction(instruction, 0, 1)
 
-      expect(validation.isValid).toBe(true);
-      expect(validation.issues).toHaveLength(0);
-    });
+      expect(validation.isValid).toBe(true)
+      expect(validation.issues).toHaveLength(0)
+    })
 
-    it("should catch invalid place values", () => {
-      const instruction = generateAbacusInstructions(0, 1);
+    it('should catch invalid place values', () => {
+      const instruction = generateAbacusInstructions(0, 1)
       // Manually corrupt the instruction
-      instruction.highlightBeads[0].placeValue = 5 as any;
+      instruction.highlightBeads[0].placeValue = 5 as any
 
-      const validation = validateInstruction(instruction, 0, 1);
-      expect(validation.isValid).toBe(false);
-      expect(validation.issues).toContain("Invalid place value: 5");
-    });
+      const validation = validateInstruction(instruction, 0, 1)
+      expect(validation.isValid).toBe(false)
+      expect(validation.issues).toContain('Invalid place value: 5')
+    })
 
-    it("should catch missing multi-step instructions", () => {
-      const instruction = generateAbacusInstructions(3, 7);
+    it('should catch missing multi-step instructions', () => {
+      const instruction = generateAbacusInstructions(3, 7)
       // Manually corrupt the instruction
-      instruction.multiStepInstructions = undefined;
+      instruction.multiStepInstructions = undefined
 
-      const validation = validateInstruction(instruction, 3, 7);
-      expect(validation.isValid).toBe(false);
-      expect(validation.issues).toContain(
-        "Multi-step action without step instructions",
-      );
-    });
-  });
+      const validation = validateInstruction(instruction, 3, 7)
+      expect(validation.isValid).toBe(false)
+      expect(validation.issues).toContain('Multi-step action without step instructions')
+    })
+  })
 
-  describe("Real-world tutorial examples", () => {
+  describe('Real-world tutorial examples', () => {
     const examples = [
-      { start: 0, target: 1, name: "Basic: 0 + 1" },
-      { start: 1, target: 2, name: "Basic: 1 + 1" },
-      { start: 2, target: 3, name: "Basic: 2 + 1" },
-      { start: 3, target: 4, name: "Basic: 3 + 1" },
-      { start: 0, target: 5, name: "Heaven: 0 + 5" },
-      { start: 5, target: 6, name: "Heaven + Earth: 5 + 1" },
-      { start: 3, target: 7, name: "Five complement: 3 + 4" },
-      { start: 2, target: 5, name: "Five complement: 2 + 3" },
-      { start: 6, target: 8, name: "Direct: 6 + 2" },
-      { start: 7, target: 11, name: "Ten complement: 7 + 4" },
-    ];
+      { start: 0, target: 1, name: 'Basic: 0 + 1' },
+      { start: 1, target: 2, name: 'Basic: 1 + 1' },
+      { start: 2, target: 3, name: 'Basic: 2 + 1' },
+      { start: 3, target: 4, name: 'Basic: 3 + 1' },
+      { start: 0, target: 5, name: 'Heaven: 0 + 5' },
+      { start: 5, target: 6, name: 'Heaven + Earth: 5 + 1' },
+      { start: 3, target: 7, name: 'Five complement: 3 + 4' },
+      { start: 2, target: 5, name: 'Five complement: 2 + 3' },
+      { start: 6, target: 8, name: 'Direct: 6 + 2' },
+      { start: 7, target: 11, name: 'Ten complement: 7 + 4' },
+    ]
 
     examples.forEach(({ start, target, name }) => {
       it(`should generate valid instructions for ${name}`, () => {
-        const instruction = generateAbacusInstructions(start, target);
-        const validation = validateInstruction(instruction, start, target);
+        const instruction = generateAbacusInstructions(start, target)
+        const validation = validateInstruction(instruction, start, target)
 
-        expect(validation.isValid).toBe(true);
-        expect(instruction.highlightBeads.length).toBeGreaterThan(0);
-        expect(instruction.actionDescription).toBeTruthy();
-        expect(instruction.tooltip.content).toBeTruthy();
-        expect(instruction.errorMessages.wrongBead).toBeTruthy();
-      });
-    });
-  });
+        expect(validation.isValid).toBe(true)
+        expect(instruction.highlightBeads.length).toBeGreaterThan(0)
+        expect(instruction.actionDescription).toBeTruthy()
+        expect(instruction.tooltip.content).toBeTruthy()
+        expect(instruction.errorMessages.wrongBead).toBeTruthy()
+      })
+    })
+  })
 
-  describe("Edge cases and boundary conditions", () => {
-    it("should handle subtraction operations", () => {
-      const instruction = generateAbacusInstructions(5, 3); // 5 - 2
-      expect(instruction.expectedAction).toBe("multi-step");
-      expect(instruction.actionDescription).toContain("subtract");
+  describe('Edge cases and boundary conditions', () => {
+    it('should handle subtraction operations', () => {
+      const instruction = generateAbacusInstructions(5, 3) // 5 - 2
+      expect(instruction.expectedAction).toBe('multi-step')
+      expect(instruction.actionDescription).toContain('subtract')
 
-      const validation = validateInstruction(instruction, 5, 3);
-      expect(validation.isValid).toBe(true);
-    });
+      const validation = validateInstruction(instruction, 5, 3)
+      expect(validation.isValid).toBe(true)
+    })
 
-    it("should handle zero difference (same start and target)", () => {
-      const instruction = generateAbacusInstructions(7, 7); // 7 - 0
-      expect(instruction.highlightBeads).toHaveLength(0);
-      expect(instruction.expectedAction).toBe("add");
-      expect(instruction.actionDescription).toContain("No change needed");
+    it('should handle zero difference (same start and target)', () => {
+      const instruction = generateAbacusInstructions(7, 7) // 7 - 0
+      expect(instruction.highlightBeads).toHaveLength(0)
+      expect(instruction.expectedAction).toBe('add')
+      expect(instruction.actionDescription).toContain('No change needed')
 
-      const validation = validateInstruction(instruction, 7, 7);
-      expect(validation.isValid).toBe(true);
-    });
+      const validation = validateInstruction(instruction, 7, 7)
+      expect(validation.isValid).toBe(true)
+    })
 
-    it("should handle maximum single-digit values", () => {
-      const instruction = generateAbacusInstructions(0, 9); // 0 + 9
-      expect(instruction.highlightBeads.length).toBeGreaterThan(0);
+    it('should handle maximum single-digit values', () => {
+      const instruction = generateAbacusInstructions(0, 9) // 0 + 9
+      expect(instruction.highlightBeads.length).toBeGreaterThan(0)
 
-      const validation = validateInstruction(instruction, 0, 9);
-      expect(validation.isValid).toBe(true);
-    });
+      const validation = validateInstruction(instruction, 0, 9)
+      expect(validation.isValid).toBe(true)
+    })
 
-    it("should handle maximum two-digit values", () => {
-      const instruction = generateAbacusInstructions(0, 99); // 0 + 99
-      expect(instruction.highlightBeads.length).toBeGreaterThan(0);
+    it('should handle maximum two-digit values', () => {
+      const instruction = generateAbacusInstructions(0, 99) // 0 + 99
+      expect(instruction.highlightBeads.length).toBeGreaterThan(0)
 
       // Should involve both ones and tens places
-      const onesBeads = instruction.highlightBeads.filter(
-        (b) => b.placeValue === 0,
-      );
-      const tensBeads = instruction.highlightBeads.filter(
-        (b) => b.placeValue === 1,
-      );
-      expect(onesBeads.length + tensBeads.length).toBe(
-        instruction.highlightBeads.length,
-      );
+      const onesBeads = instruction.highlightBeads.filter((b) => b.placeValue === 0)
+      const tensBeads = instruction.highlightBeads.filter((b) => b.placeValue === 1)
+      expect(onesBeads.length + tensBeads.length).toBe(instruction.highlightBeads.length)
 
-      const validation = validateInstruction(instruction, 0, 99);
-      expect(validation.isValid).toBe(true);
-    });
+      const validation = validateInstruction(instruction, 0, 99)
+      expect(validation.isValid).toBe(true)
+    })
 
-    it("should handle complex complement operations across place values", () => {
-      const instruction = generateAbacusInstructions(89, 95); // 89 + 6
-      expect(instruction.expectedAction).toBe("multi-step");
+    it('should handle complex complement operations across place values', () => {
+      const instruction = generateAbacusInstructions(89, 95) // 89 + 6
+      expect(instruction.expectedAction).toBe('multi-step')
 
-      const validation = validateInstruction(instruction, 89, 95);
-      expect(validation.isValid).toBe(true);
-    });
+      const validation = validateInstruction(instruction, 89, 95)
+      expect(validation.isValid).toBe(true)
+    })
 
-    it("should handle large subtraction with borrowing", () => {
-      const instruction = generateAbacusInstructions(50, 7); // 50 - 43
-      expect(instruction.expectedAction).toBe("multi-step");
-      expect(instruction.actionDescription).toContain("subtract");
+    it('should handle large subtraction with borrowing', () => {
+      const instruction = generateAbacusInstructions(50, 7) // 50 - 43
+      expect(instruction.expectedAction).toBe('multi-step')
+      expect(instruction.actionDescription).toContain('subtract')
 
-      const validation = validateInstruction(instruction, 50, 7);
-      expect(validation.isValid).toBe(true);
-    });
+      const validation = validateInstruction(instruction, 50, 7)
+      expect(validation.isValid).toBe(true)
+    })
 
-    it("should handle all possible five complement scenarios", () => {
+    it('should handle all possible five complement scenarios', () => {
       const fiveComplementCases = [
         { start: 1, target: 4 }, // 1 + 3 = 4 (no complement needed)
         { start: 1, target: 5 }, // 1 + 4 = 5 (complement needed)
         { start: 2, target: 5 }, // 2 + 3 = 5 (complement needed)
         { start: 3, target: 7 }, // 3 + 4 = 7 (complement needed)
         { start: 4, target: 8 }, // 4 + 4 = 8 (complement needed)
-      ];
+      ]
 
       fiveComplementCases.forEach(({ start, target }) => {
-        const instruction = generateAbacusInstructions(start, target);
-        const validation = validateInstruction(instruction, start, target);
-        expect(validation.isValid).toBe(true);
-      });
-    });
+        const instruction = generateAbacusInstructions(start, target)
+        const validation = validateInstruction(instruction, start, target)
+        expect(validation.isValid).toBe(true)
+      })
+    })
 
-    it("should handle all possible ten complement scenarios", () => {
+    it('should handle all possible ten complement scenarios', () => {
       const tenComplementCases = [
         { start: 6, target: 10 }, // 6 + 4 = 10
         { start: 7, target: 11 }, // 7 + 4 = 11
@@ -317,520 +297,510 @@ describe("Automatic Abacus Instruction Generator", () => {
         { start: 9, target: 13 }, // 9 + 4 = 13
         { start: 19, target: 23 }, // 19 + 4 = 23 (tens place)
         { start: 29, target: 33 }, // 29 + 4 = 33 (tens place)
-      ];
+      ]
 
       tenComplementCases.forEach(({ start, target }) => {
-        const instruction = generateAbacusInstructions(start, target);
-        const validation = validateInstruction(instruction, start, target);
-        expect(validation.isValid).toBe(true);
-      });
-    });
-  });
+        const instruction = generateAbacusInstructions(start, target)
+        const validation = validateInstruction(instruction, start, target)
+        expect(validation.isValid).toBe(true)
+      })
+    })
+  })
 
-  describe("Stress testing with random operations", () => {
-    it("should handle 100 random addition operations", () => {
+  describe('Stress testing with random operations', () => {
+    it('should handle 100 random addition operations', () => {
       const failedCases: Array<{
-        start: number;
-        target: number;
-        error: string;
-      }> = [];
+        start: number
+        target: number
+        error: string
+      }> = []
 
       for (let i = 0; i < 100; i++) {
-        const start = Math.floor(Math.random() * 90); // 0-89
-        const additionAmount = Math.floor(Math.random() * 10) + 1; // 1-10
-        const target = start + additionAmount;
+        const start = Math.floor(Math.random() * 90) // 0-89
+        const additionAmount = Math.floor(Math.random() * 10) + 1 // 1-10
+        const target = start + additionAmount
 
         // Skip if target exceeds our max value
-        if (target > 99) continue;
+        if (target > 99) continue
 
         try {
-          const instruction = generateAbacusInstructions(start, target);
-          const validation = validateInstruction(instruction, start, target);
+          const instruction = generateAbacusInstructions(start, target)
+          const validation = validateInstruction(instruction, start, target)
 
           if (!validation.isValid) {
             failedCases.push({
               start,
               target,
-              error: `Validation failed: ${validation.issues.join(", ")}`,
-            });
+              error: `Validation failed: ${validation.issues.join(', ')}`,
+            })
           }
         } catch (error) {
           failedCases.push({
             start,
             target,
             error: `Exception: ${error instanceof Error ? error.message : String(error)}`,
-          });
+          })
         }
       }
 
       if (failedCases.length > 0) {
-        console.error("Failed stress test cases:", failedCases);
+        console.error('Failed stress test cases:', failedCases)
       }
 
-      expect(failedCases).toHaveLength(0);
-    });
+      expect(failedCases).toHaveLength(0)
+    })
 
-    it("should handle 50 random subtraction operations", () => {
+    it('should handle 50 random subtraction operations', () => {
       const failedCases: Array<{
-        start: number;
-        target: number;
-        error: string;
-      }> = [];
+        start: number
+        target: number
+        error: string
+      }> = []
 
       for (let i = 0; i < 50; i++) {
-        const start = Math.floor(Math.random() * 89) + 10; // 10-98
-        const subtractionAmount =
-          Math.floor(Math.random() * Math.min(start, 10)) + 1; // 1 to min(start, 10)
-        const target = start - subtractionAmount;
+        const start = Math.floor(Math.random() * 89) + 10 // 10-98
+        const subtractionAmount = Math.floor(Math.random() * Math.min(start, 10)) + 1 // 1 to min(start, 10)
+        const target = start - subtractionAmount
 
         try {
-          const instruction = generateAbacusInstructions(start, target);
-          const validation = validateInstruction(instruction, start, target);
+          const instruction = generateAbacusInstructions(start, target)
+          const validation = validateInstruction(instruction, start, target)
 
           if (!validation.isValid) {
             failedCases.push({
               start,
               target,
-              error: `Validation failed: ${validation.issues.join(", ")}`,
-            });
+              error: `Validation failed: ${validation.issues.join(', ')}`,
+            })
           }
         } catch (error) {
           failedCases.push({
             start,
             target,
             error: `Exception: ${error instanceof Error ? error.message : String(error)}`,
-          });
+          })
         }
       }
 
       if (failedCases.length > 0) {
-        console.error("Failed subtraction stress test cases:", failedCases);
+        console.error('Failed subtraction stress test cases:', failedCases)
       }
 
-      expect(failedCases).toHaveLength(0);
-    });
+      expect(failedCases).toHaveLength(0)
+    })
 
-    it("should handle all systematic single-digit operations", () => {
+    it('should handle all systematic single-digit operations', () => {
       const failedCases: Array<{
-        start: number;
-        target: number;
-        error: string;
-      }> = [];
+        start: number
+        target: number
+        error: string
+      }> = []
 
       // Test every possible single-digit to single-digit operation
       for (let start = 0; start <= 9; start++) {
         for (let target = 0; target <= 9; target++) {
-          if (start === target) continue; // Skip no-change operations
+          if (start === target) continue // Skip no-change operations
 
           try {
-            const instruction = generateAbacusInstructions(start, target);
-            const validation = validateInstruction(instruction, start, target);
+            const instruction = generateAbacusInstructions(start, target)
+            const validation = validateInstruction(instruction, start, target)
 
             if (!validation.isValid) {
               failedCases.push({
                 start,
                 target,
-                error: `Validation failed: ${validation.issues.join(", ")}`,
-              });
+                error: `Validation failed: ${validation.issues.join(', ')}`,
+              })
             }
           } catch (error) {
             failedCases.push({
               start,
               target,
               error: `Exception: ${error instanceof Error ? error.message : String(error)}`,
-            });
+            })
           }
         }
       }
 
       if (failedCases.length > 0) {
-        console.error(
-          "Failed systematic single-digit test cases:",
-          failedCases,
-        );
+        console.error('Failed systematic single-digit test cases:', failedCases)
       }
 
-      expect(failedCases).toHaveLength(0);
-    });
-  });
+      expect(failedCases).toHaveLength(0)
+    })
+  })
 
-  describe("Performance benchmarks", () => {
-    it("should generate instructions quickly for simple operations", () => {
-      const start = performance.now();
+  describe('Performance benchmarks', () => {
+    it('should generate instructions quickly for simple operations', () => {
+      const start = performance.now()
 
       for (let i = 0; i < 1000; i++) {
-        generateAbacusInstructions(3, 7); // Five complement operation
+        generateAbacusInstructions(3, 7) // Five complement operation
       }
 
-      const end = performance.now();
-      const timePerOperation = (end - start) / 1000;
+      const end = performance.now()
+      const timePerOperation = (end - start) / 1000
 
       // Should take less than 1ms per operation on average
-      expect(timePerOperation).toBeLessThan(1);
-    });
+      expect(timePerOperation).toBeLessThan(1)
+    })
 
-    it("should generate instructions quickly for complex operations", () => {
-      const start = performance.now();
+    it('should generate instructions quickly for complex operations', () => {
+      const start = performance.now()
 
       for (let i = 0; i < 1000; i++) {
-        generateAbacusInstructions(89, 95); // Complex multi-place operation
+        generateAbacusInstructions(89, 95) // Complex multi-place operation
       }
 
-      const end = performance.now();
-      const timePerOperation = (end - start) / 1000;
+      const end = performance.now()
+      const timePerOperation = (end - start) / 1000
 
       // Should take less than 2ms per operation on average
-      expect(timePerOperation).toBeLessThan(2);
-    });
-  });
+      expect(timePerOperation).toBeLessThan(2)
+    })
+  })
 
-  describe("Input validation and error handling", () => {
-    it("should handle negative start values gracefully", () => {
-      expect(() => generateAbacusInstructions(-1, 5)).not.toThrow();
-    });
+  describe('Input validation and error handling', () => {
+    it('should handle negative start values gracefully', () => {
+      expect(() => generateAbacusInstructions(-1, 5)).not.toThrow()
+    })
 
-    it("should handle negative target values gracefully", () => {
-      expect(() => generateAbacusInstructions(5, -1)).not.toThrow();
-    });
+    it('should handle negative target values gracefully', () => {
+      expect(() => generateAbacusInstructions(5, -1)).not.toThrow()
+    })
 
-    it("should handle values exceeding normal abacus range", () => {
-      expect(() => generateAbacusInstructions(0, 12345)).not.toThrow();
-    });
+    it('should handle values exceeding normal abacus range', () => {
+      expect(() => generateAbacusInstructions(0, 12345)).not.toThrow()
+    })
 
-    it("should handle very large differences", () => {
-      expect(() => generateAbacusInstructions(1, 999)).not.toThrow();
-    });
-  });
+    it('should handle very large differences', () => {
+      expect(() => generateAbacusInstructions(1, 999)).not.toThrow()
+    })
+  })
 
-  describe("Bug fixes", () => {
-    it("should show correct operation in hint message when old operation is passed", () => {
+  describe('Bug fixes', () => {
+    it('should show correct operation in hint message when old operation is passed', () => {
       // Bug: when start=4, target=12, and old operation="0 + 1" is passed,
       // the hint message shows "0 + 1 = 12" instead of "4 + 8 = 12"
-      const instruction = generateAbacusInstructions(4, 12, "0 + 1");
+      const instruction = generateAbacusInstructions(4, 12, '0 + 1')
 
       // The hint message should show the correct operation based on start/target values
       // not the passed operation string
-      expect(instruction.errorMessages.hint).toContain("4 + 8 = 12");
-      expect(instruction.errorMessages.hint).not.toContain("0 + 1 = 12");
-    });
-  });
+      expect(instruction.errorMessages.hint).toContain('4 + 8 = 12')
+      expect(instruction.errorMessages.hint).not.toContain('0 + 1 = 12')
+    })
+  })
 
-  describe("Traditional abacus complement descriptions", () => {
-    it("should use proper mathematical breakdown for five complement", () => {
+  describe('Traditional abacus complement descriptions', () => {
+    it('should use proper mathematical breakdown for five complement', () => {
       // Test five complement: 3 + 4 = 7
-      const instruction = generateAbacusInstructions(3, 7);
-      expect(instruction.actionDescription).toContain("3 + 4 = 3 + (5 - 1)");
-    });
+      const instruction = generateAbacusInstructions(3, 7)
+      expect(instruction.actionDescription).toContain('3 + 4 = 3 + (5 - 1)')
+    })
 
-    it("should use proper mathematical breakdown for ten complement", () => {
+    it('should use proper mathematical breakdown for ten complement', () => {
       // Test ten complement: 7 + 4 = 11
-      const instruction = generateAbacusInstructions(7, 11);
-      expect(instruction.actionDescription).toContain("7 + 4 = 7 + (5 - 1)");
-    });
+      const instruction = generateAbacusInstructions(7, 11)
+      expect(instruction.actionDescription).toContain('7 + 4 = 7 + (5 - 1)')
+    })
 
-    it("should handle large ten complement correctly", () => {
+    it('should handle large ten complement correctly', () => {
       // Test large ten complement: 3 + 98 = 101
       // Now uses recursive complement explanation
-      const instruction = generateAbacusInstructions(3, 101);
+      const instruction = generateAbacusInstructions(3, 101)
 
-      console.log("Multi-place operation (3 + 98 = 101):");
-      console.log("  Action:", instruction.actionDescription);
-      console.log("  Highlighted beads:", instruction.highlightBeads.length);
+      console.log('Multi-place operation (3 + 98 = 101):')
+      console.log('  Action:', instruction.actionDescription)
+      console.log('  Highlighted beads:', instruction.highlightBeads.length)
       instruction.highlightBeads.forEach((bead, i) => {
         console.log(
-          `    ${i + 1}. Place ${bead.placeValue} ${bead.beadType} ${bead.position !== undefined ? `position ${bead.position}` : ""}`,
-        );
-      });
+          `    ${i + 1}. Place ${bead.placeValue} ${bead.beadType} ${bead.position !== undefined ? `position ${bead.position}` : ''}`
+        )
+      })
       if (instruction.multiStepInstructions) {
-        console.log("  Multi-step instructions:");
+        console.log('  Multi-step instructions:')
         instruction.multiStepInstructions.forEach((step, i) => {
-          console.log(`    ${i + 1}. ${step}`);
-        });
+          console.log(`    ${i + 1}. ${step}`)
+        })
       }
-      console.log("  Hint:", instruction.errorMessages.hint);
+      console.log('  Hint:', instruction.errorMessages.hint)
 
       // Should show the compact math format for complement
-      expect(instruction.actionDescription).toContain("3 + 98 = 3 + (100 - 2)");
-      expect(instruction.errorMessages.hint).toContain(
-        "3 + 98 = 101, using if 98 = 100 - 2",
-      );
-    });
+      expect(instruction.actionDescription).toContain('3 + 98 = 3 + (100 - 2)')
+      expect(instruction.errorMessages.hint).toContain('3 + 98 = 101, using if 98 = 100 - 2')
+    })
 
-    it("should provide proper complement breakdown with compact math and simple movements", () => {
+    it('should provide proper complement breakdown with compact math and simple movements', () => {
       // Test case: 3 + 98 = 101
       // Correct breakdown: 3 + 98 = 3 + (100 - 2)
       // This decomposes into simple movements: add 100, subtract 2
-      const instruction = generateAbacusInstructions(3, 101);
+      const instruction = generateAbacusInstructions(3, 101)
 
-      console.log("Proper complement breakdown (3 + 98 = 101):");
-      console.log("  Action:", instruction.actionDescription);
-      console.log("  Multi-step instructions:");
+      console.log('Proper complement breakdown (3 + 98 = 101):')
+      console.log('  Action:', instruction.actionDescription)
+      console.log('  Multi-step instructions:')
       instruction.multiStepInstructions?.forEach((step, i) => {
-        console.log(`    ${i + 1}. ${step}`);
-      });
+        console.log(`    ${i + 1}. ${step}`)
+      })
 
       // Should provide compact math sentence: 3 + 98 = 3 + (100 - 2)
-      expect(instruction.actionDescription).toContain("3 + 98 = 3 + (100 - 2)");
+      expect(instruction.actionDescription).toContain('3 + 98 = 3 + (100 - 2)')
 
       // Multi-step instructions should explain the simple movements
-      expect(instruction.multiStepInstructions).toBeDefined();
+      expect(instruction.multiStepInstructions).toBeDefined()
       expect(
         instruction.multiStepInstructions!.some(
           (step) =>
-            step.includes("add 100") ||
-            step.includes("Add 1 to hundreds") ||
-            step.includes("earth bead 1 in the hundreds column to add"),
-        ),
-      ).toBe(true);
+            step.includes('add 100') ||
+            step.includes('Add 1 to hundreds') ||
+            step.includes('earth bead 1 in the hundreds column to add')
+        )
+      ).toBe(true)
       expect(
         instruction.multiStepInstructions!.some(
-          (step) =>
-            step.includes("subtract 2") || step.includes("Remove 2 from ones"),
-        ),
-      ).toBe(true);
-    });
+          (step) => step.includes('subtract 2') || step.includes('Remove 2 from ones')
+        )
+      ).toBe(true)
+    })
 
-    it("should handle five complement with proper breakdown", () => {
+    it('should handle five complement with proper breakdown', () => {
       // Test case: 3 + 4 = 7
       // Breakdown: 3 + 4 = 3 + (5 - 1)
-      const instruction = generateAbacusInstructions(3, 7);
+      const instruction = generateAbacusInstructions(3, 7)
 
-      console.log("Five complement breakdown (3 + 4 = 7):");
-      console.log("  Action:", instruction.actionDescription);
+      console.log('Five complement breakdown (3 + 4 = 7):')
+      console.log('  Action:', instruction.actionDescription)
 
       // Should provide compact math sentence
-      expect(instruction.actionDescription).toContain("3 + 4 = 3 + (5 - 1)");
-    });
-  });
+      expect(instruction.actionDescription).toContain('3 + 4 = 3 + (5 - 1)')
+    })
+  })
 
-  describe("Comprehensive complement breakdown coverage", () => {
-    describe("Known five complement situations that require complements", () => {
+  describe('Comprehensive complement breakdown coverage', () => {
+    describe('Known five complement situations that require complements', () => {
       // Test cases where we know five complement is actually needed
       const actualFiveComplementCases = [
         {
           start: 3,
           target: 7,
-          description: "3 + 4 where 4 requires five complement",
+          description: '3 + 4 where 4 requires five complement',
         },
         {
           start: 2,
           target: 7,
-          description: "2 + 5 where the 1 part of 5 goes beyond capacity",
+          description: '2 + 5 where the 1 part of 5 goes beyond capacity',
         },
         {
           start: 1,
           target: 7,
-          description: "1 + 6 where 6 requires five complement",
+          description: '1 + 6 where 6 requires five complement',
         },
         {
           start: 0,
           target: 6,
-          description: "0 + 6 where 6 requires five complement",
+          description: '0 + 6 where 6 requires five complement',
         },
         {
           start: 4,
           target: 8,
-          description: "4 + 4 where 4 requires five complement",
+          description: '4 + 4 where 4 requires five complement',
         },
         {
           start: 13,
           target: 17,
-          description: "13 + 4 where 4 requires five complement in ones place",
+          description: '13 + 4 where 4 requires five complement in ones place',
         },
         {
           start: 23,
           target: 27,
-          description: "23 + 4 where 4 requires five complement in ones place",
+          description: '23 + 4 where 4 requires five complement in ones place',
         },
-      ];
+      ]
 
       actualFiveComplementCases.forEach(({ start, target, description }) => {
         it(`should handle five complement: ${description}`, () => {
-          const instruction = generateAbacusInstructions(start, target);
+          const instruction = generateAbacusInstructions(start, target)
           // Check that it generates the proper complement breakdown
-          if (instruction.actionDescription.includes("(5 - ")) {
-            expect(instruction.expectedAction).toBe("multi-step");
-            expect(instruction.actionDescription).toContain("(5 - ");
-            expect(instruction.highlightBeads.length).toBeGreaterThan(1);
+          if (instruction.actionDescription.includes('(5 - ')) {
+            expect(instruction.expectedAction).toBe('multi-step')
+            expect(instruction.actionDescription).toContain('(5 - ')
+            expect(instruction.highlightBeads.length).toBeGreaterThan(1)
           } else {
             // Some operations might not need complement - just verify they work
-            expect(instruction).toBeDefined();
-            expect(instruction.highlightBeads.length).toBeGreaterThan(0);
+            expect(instruction).toBeDefined()
+            expect(instruction.highlightBeads.length).toBeGreaterThan(0)
           }
-        });
-      });
-    });
+        })
+      })
+    })
 
-    describe("Known ten complement situations that require complements", () => {
+    describe('Known ten complement situations that require complements', () => {
       // Test cases where we know ten complement is actually needed
       const actualTenComplementCases = [
         {
           start: 7,
           target: 11,
-          description:
-            "7 + 4 where 4 requires five complement which triggers ten complement",
+          description: '7 + 4 where 4 requires five complement which triggers ten complement',
         },
         {
           start: 6,
           target: 13,
-          description: "6 + 7 where 7 requires complement",
+          description: '6 + 7 where 7 requires complement',
         },
         {
           start: 8,
           target: 15,
-          description: "8 + 7 where 7 requires complement",
+          description: '8 + 7 where 7 requires complement',
         },
         {
           start: 9,
           target: 16,
-          description: "9 + 7 where 7 requires complement",
+          description: '9 + 7 where 7 requires complement',
         },
         {
           start: 17,
           target: 24,
-          description: "17 + 7 where 7 requires complement in ones place",
+          description: '17 + 7 where 7 requires complement in ones place',
         },
         {
           start: 25,
           target: 32,
-          description: "25 + 7 where 7 requires complement in ones place",
+          description: '25 + 7 where 7 requires complement in ones place',
         },
-      ];
+      ]
 
       actualTenComplementCases.forEach(({ start, target, description }) => {
         it(`should handle ten complement: ${description}`, () => {
-          const instruction = generateAbacusInstructions(start, target);
+          const instruction = generateAbacusInstructions(start, target)
           // Check that it generates the proper complement breakdown
           if (instruction.actionDescription.match(/\((?:5|10) - /)) {
-            expect(instruction.expectedAction).toBe("multi-step");
-            expect(instruction.actionDescription).toMatch(/\((?:5|10) - /);
-            expect(instruction.highlightBeads.length).toBeGreaterThan(1);
+            expect(instruction.expectedAction).toBe('multi-step')
+            expect(instruction.actionDescription).toMatch(/\((?:5|10) - /)
+            expect(instruction.highlightBeads.length).toBeGreaterThan(1)
           } else {
             // Some operations might not need complement - just verify they work
-            expect(instruction).toBeDefined();
-            expect(instruction.highlightBeads.length).toBeGreaterThan(0);
+            expect(instruction).toBeDefined()
+            expect(instruction.highlightBeads.length).toBeGreaterThan(0)
           }
-        });
-      });
-    });
+        })
+      })
+    })
 
-    describe("Known hundred complement situations", () => {
+    describe('Known hundred complement situations', () => {
       // Test cases where we know hundred complement is actually needed
       const actualHundredComplementCases = [
         {
           start: 3,
           target: 101,
-          description: "3 + 98 where 98 requires hundred complement",
+          description: '3 + 98 where 98 requires hundred complement',
         },
         {
           start: 5,
           target: 103,
-          description: "5 + 98 where 98 requires hundred complement",
+          description: '5 + 98 where 98 requires hundred complement',
         },
         {
           start: 10,
           target: 108,
-          description: "10 + 98 where 98 requires hundred complement",
+          description: '10 + 98 where 98 requires hundred complement',
         },
         {
           start: 15,
           target: 113,
-          description: "15 + 98 where 98 requires hundred complement",
+          description: '15 + 98 where 98 requires hundred complement',
         },
         {
           start: 20,
           target: 118,
-          description: "20 + 98 where 98 requires hundred complement",
+          description: '20 + 98 where 98 requires hundred complement',
         },
-      ];
+      ]
 
       actualHundredComplementCases.forEach(({ start, target, description }) => {
         it(`should handle hundred complement: ${description}`, () => {
-          const instruction = generateAbacusInstructions(start, target);
+          const instruction = generateAbacusInstructions(start, target)
           // Check that it uses complement methodology
-          expect(instruction.expectedAction).toBe("multi-step");
-          expect(instruction.actionDescription).toContain("(100 - ");
-          expect(instruction.highlightBeads.length).toBeGreaterThan(1);
-        });
-      });
-    });
+          expect(instruction.expectedAction).toBe('multi-step')
+          expect(instruction.actionDescription).toContain('(100 - ')
+          expect(instruction.highlightBeads.length).toBeGreaterThan(1)
+        })
+      })
+    })
 
-    describe("Direct operations that should NOT use complements", () => {
+    describe('Direct operations that should NOT use complements', () => {
       const directOperationCases = [
-        { start: 0, target: 1, description: "0 + 1 direct earth bead" },
-        { start: 0, target: 4, description: "0 + 4 direct earth beads" },
-        { start: 0, target: 5, description: "0 + 5 direct heaven bead" },
-        { start: 1, target: 2, description: "1 + 1 direct earth bead" },
-        { start: 5, target: 9, description: "5 + 4 direct earth beads" },
-        { start: 1, target: 3, description: "1 + 2 direct earth beads" },
-      ];
+        { start: 0, target: 1, description: '0 + 1 direct earth bead' },
+        { start: 0, target: 4, description: '0 + 4 direct earth beads' },
+        { start: 0, target: 5, description: '0 + 5 direct heaven bead' },
+        { start: 1, target: 2, description: '1 + 1 direct earth bead' },
+        { start: 5, target: 9, description: '5 + 4 direct earth beads' },
+        { start: 1, target: 3, description: '1 + 2 direct earth beads' },
+      ]
 
       directOperationCases.forEach(({ start, target, description }) => {
         it(`should handle direct operation: ${description}`, () => {
-          const instruction = generateAbacusInstructions(start, target);
+          const instruction = generateAbacusInstructions(start, target)
           // Accept any action type that doesn't use complement notation
-          expect(instruction.actionDescription).not.toContain("(");
-          expect(instruction.actionDescription).not.toContain(" - ");
-          expect(instruction.highlightBeads.length).toBeGreaterThan(0);
-        });
-      });
-    });
+          expect(instruction.actionDescription).not.toContain('(')
+          expect(instruction.actionDescription).not.toContain(' - ')
+          expect(instruction.highlightBeads.length).toBeGreaterThan(0)
+        })
+      })
+    })
 
-    describe("Edge cases and boundary conditions", () => {
-      it("should handle maximum single place operations", () => {
-        const instruction = generateAbacusInstructions(0, 9);
-        expect(instruction).toBeDefined();
-        expect(instruction.highlightBeads.length).toBeGreaterThan(0);
-      });
+    describe('Edge cases and boundary conditions', () => {
+      it('should handle maximum single place operations', () => {
+        const instruction = generateAbacusInstructions(0, 9)
+        expect(instruction).toBeDefined()
+        expect(instruction.highlightBeads.length).toBeGreaterThan(0)
+      })
 
-      it("should handle operations crossing place boundaries", () => {
-        const instruction = generateAbacusInstructions(9, 10);
-        expect(instruction).toBeDefined();
-        expect(instruction.highlightBeads.length).toBeGreaterThan(0);
-      });
+      it('should handle operations crossing place boundaries', () => {
+        const instruction = generateAbacusInstructions(9, 10)
+        expect(instruction).toBeDefined()
+        expect(instruction.highlightBeads.length).toBeGreaterThan(0)
+      })
 
-      it("should handle large complement operations", () => {
-        const instruction = generateAbacusInstructions(1, 199);
-        expect(instruction).toBeDefined();
-        expect(instruction.highlightBeads.length).toBeGreaterThan(0);
-      });
-    });
+      it('should handle large complement operations', () => {
+        const instruction = generateAbacusInstructions(1, 199)
+        expect(instruction).toBeDefined()
+        expect(instruction.highlightBeads.length).toBeGreaterThan(0)
+      })
+    })
 
-    describe("Step-by-step instruction quality", () => {
-      it("should provide clear step explanations for five complement", () => {
-        const instruction = generateAbacusInstructions(3, 7);
-        expect(instruction.multiStepInstructions).toBeDefined();
-        expect(instruction.multiStepInstructions!.length).toBeGreaterThan(1);
+    describe('Step-by-step instruction quality', () => {
+      it('should provide clear step explanations for five complement', () => {
+        const instruction = generateAbacusInstructions(3, 7)
+        expect(instruction.multiStepInstructions).toBeDefined()
+        expect(instruction.multiStepInstructions!.length).toBeGreaterThan(1)
         expect(
           instruction.multiStepInstructions!.some(
-            (step) => step.includes("Add") || step.includes("Remove"),
-          ),
-        ).toBe(true);
-      });
+            (step) => step.includes('Add') || step.includes('Remove')
+          )
+        ).toBe(true)
+      })
 
-      it("should provide clear step explanations for hundred complement", () => {
-        const instruction = generateAbacusInstructions(3, 101);
-        expect(instruction.multiStepInstructions).toBeDefined();
-        expect(instruction.multiStepInstructions!.length).toBeGreaterThan(1);
+      it('should provide clear step explanations for hundred complement', () => {
+        const instruction = generateAbacusInstructions(3, 101)
+        expect(instruction.multiStepInstructions).toBeDefined()
+        expect(instruction.multiStepInstructions!.length).toBeGreaterThan(1)
         expect(
           instruction.multiStepInstructions!.some(
             (step) =>
-              (step.includes("Add") && step.includes("hundreds")) ||
-              (step.includes("Click") &&
-                step.includes("hundreds") &&
-                step.includes("add")),
-          ),
-        ).toBe(true);
+              (step.includes('Add') && step.includes('hundreds')) ||
+              (step.includes('Click') && step.includes('hundreds') && step.includes('add'))
+          )
+        ).toBe(true)
         expect(
           instruction.multiStepInstructions!.some(
-            (step) => step.includes("Remove") && step.includes("ones"),
-          ),
-        ).toBe(true);
-      });
-    });
+            (step) => step.includes('Remove') && step.includes('ones')
+          )
+        ).toBe(true)
+      })
+    })
 
-    describe("Validation and error handling", () => {
-      it("should validate all generated instructions correctly", () => {
+    describe('Validation and error handling', () => {
+      it('should validate all generated instructions correctly', () => {
         const testCases = [
           { start: 3, target: 7 }, // Five complement
           { start: 7, target: 11 }, // Ten complement (via five)
@@ -838,433 +808,402 @@ describe("Automatic Abacus Instruction Generator", () => {
           { start: 0, target: 1 }, // Direct
           { start: 0, target: 10 }, // Direct tens
           { start: 0, target: 5 }, // Direct heaven
-        ];
+        ]
 
         testCases.forEach(({ start, target }) => {
-          const instruction = generateAbacusInstructions(start, target);
-          const validation = validateInstruction(instruction, start, target);
-          expect(validation.isValid).toBe(true);
-          expect(validation.issues).toHaveLength(0);
-        });
-      });
+          const instruction = generateAbacusInstructions(start, target)
+          const validation = validateInstruction(instruction, start, target)
+          expect(validation.isValid).toBe(true)
+          expect(validation.issues).toHaveLength(0)
+        })
+      })
 
-      it("should handle edge case inputs gracefully", () => {
+      it('should handle edge case inputs gracefully', () => {
         // Test same start and target
-        const instruction1 = generateAbacusInstructions(5, 5);
-        expect(instruction1).toBeDefined();
+        const instruction1 = generateAbacusInstructions(5, 5)
+        expect(instruction1).toBeDefined()
 
         // Test reverse operation (subtraction)
-        const instruction2 = generateAbacusInstructions(10, 5);
-        expect(instruction2).toBeDefined();
+        const instruction2 = generateAbacusInstructions(10, 5)
+        expect(instruction2).toBeDefined()
 
         // Test very large numbers
-        const instruction3 = generateAbacusInstructions(0, 999);
-        expect(instruction3).toBeDefined();
-      });
-    });
+        const instruction3 = generateAbacusInstructions(0, 999)
+        expect(instruction3).toBeDefined()
+      })
+    })
 
-    describe("Complement format consistency", () => {
-      it("should consistently use compact math format for complements", () => {
+    describe('Complement format consistency', () => {
+      it('should consistently use compact math format for complements', () => {
         const complementCases = [
           { start: 3, target: 7 }, // 3 + 4 = 3 + (5 - 1)
           { start: 3, target: 101 }, // 3 + 98 = 3 + (100 - 2)
           { start: 7, target: 11 }, // 7 + 4 = 7 + (5 - 1)
-        ];
+        ]
 
         complementCases.forEach(({ start, target }) => {
-          const instruction = generateAbacusInstructions(start, target);
-          if (instruction.expectedAction === "multi-step") {
+          const instruction = generateAbacusInstructions(start, target)
+          if (instruction.expectedAction === 'multi-step') {
             // Should show the breakdown format without redundant arithmetic
-            expect(instruction.actionDescription).toMatch(
-              /\d+ \+ \d+ = \d+ \+ \(\d+ - \d+\)/,
-            );
+            expect(instruction.actionDescription).toMatch(/\d+ \+ \d+ = \d+ \+ \(\d+ - \d+\)/)
             // Should NOT show the final arithmetic chain
-            expect(instruction.actionDescription).not.toMatch(
-              /= \d+ - \d+ = \d+$/,
-            );
+            expect(instruction.actionDescription).not.toMatch(/= \d+ - \d+ = \d+$/)
           }
-        });
-      });
+        })
+      })
 
-      it("should handle recursive complement breakdown for 99 + 1 = 100", () => {
+      it('should handle recursive complement breakdown for 99 + 1 = 100', () => {
         // This is a critical test case where simple complement explanation fails
         // 99 + 1 requires adding to a column that's already at capacity
-        const instruction = generateAbacusInstructions(99, 100);
+        const instruction = generateAbacusInstructions(99, 100)
 
-        console.log("Complex recursive breakdown (99 + 1 = 100):");
-        console.log("  Action:", instruction.actionDescription);
-        console.log("  Hint:", instruction.errorMessages.hint);
-        console.log("  Multi-step instructions:");
+        console.log('Complex recursive breakdown (99 + 1 = 100):')
+        console.log('  Action:', instruction.actionDescription)
+        console.log('  Hint:', instruction.errorMessages.hint)
+        console.log('  Multi-step instructions:')
         instruction.multiStepInstructions?.forEach((step, i) =>
-          console.log(`    ${i + 1}. ${step}`),
-        );
+          console.log(`    ${i + 1}. ${step}`)
+        )
 
         // Both action description and hint should be consistent
         // And should break down into actual performable operations
-        expect(instruction.actionDescription).toContain("99 + 1");
-        expect(instruction.errorMessages.hint).toContain("99 + 1 = 100");
+        expect(instruction.actionDescription).toContain('99 + 1')
+        expect(instruction.errorMessages.hint).toContain('99 + 1 = 100')
 
         // Should break down the impossible "add 10 to 9" into "add 100, subtract 90"
         const hasRecursiveBreakdown =
-          instruction.actionDescription.includes("((100 - 90) - 9)") ||
-          instruction.errorMessages.hint.includes("100 - 90 - 9");
+          instruction.actionDescription.includes('((100 - 90) - 9)') ||
+          instruction.errorMessages.hint.includes('100 - 90 - 9')
 
-        expect(hasRecursiveBreakdown).toBe(true);
+        expect(hasRecursiveBreakdown).toBe(true)
 
         // The hint and action description should not contradict each other
-        if (instruction.actionDescription.includes("(5 - 4)")) {
-          expect(instruction.errorMessages.hint).not.toContain("(10 - 9)");
+        if (instruction.actionDescription.includes('(5 - 4)')) {
+          expect(instruction.errorMessages.hint).not.toContain('(10 - 9)')
         }
-        if (instruction.errorMessages.hint.includes("(10 - 9)")) {
-          expect(instruction.actionDescription).not.toContain("(5 - 4)");
+        if (instruction.errorMessages.hint.includes('(10 - 9)')) {
+          expect(instruction.actionDescription).not.toContain('(5 - 4)')
         }
-      });
-    });
-  });
+      })
+    })
+  })
 
-  describe("Progressive Step-Bead Mapping", () => {
-    it("should generate correct step-bead mapping for 99 + 1 = 100 recursive case", () => {
-      const instruction = generateAbacusInstructions(99, 100);
+  describe('Progressive Step-Bead Mapping', () => {
+    it('should generate correct step-bead mapping for 99 + 1 = 100 recursive case', () => {
+      const instruction = generateAbacusInstructions(99, 100)
 
-      expect(instruction.stepBeadHighlights).toBeDefined();
-      expect(instruction.totalSteps).toBe(3);
+      expect(instruction.stepBeadHighlights).toBeDefined()
+      expect(instruction.totalSteps).toBe(3)
 
-      const stepBeads = instruction.stepBeadHighlights!;
+      const stepBeads = instruction.stepBeadHighlights!
 
       // Step 0: Add 1 to hundreds column (highest place value first)
-      const step0Beads = stepBeads.filter((b) => b.stepIndex === 0);
-      expect(step0Beads).toHaveLength(1);
+      const step0Beads = stepBeads.filter((b) => b.stepIndex === 0)
+      expect(step0Beads).toHaveLength(1)
       expect(step0Beads[0]).toEqual({
         placeValue: 2, // hundreds place
-        beadType: "earth",
+        beadType: 'earth',
         position: 0,
         stepIndex: 0,
-        direction: "activate",
+        direction: 'activate',
         order: 0,
-      });
+      })
 
       // Step 1: Remove 90 from tens column (1 heaven + 4 earth beads)
-      const step1Beads = stepBeads.filter((b) => b.stepIndex === 1);
-      expect(step1Beads).toHaveLength(5);
+      const step1Beads = stepBeads.filter((b) => b.stepIndex === 1)
+      expect(step1Beads).toHaveLength(5)
       // Should have 1 heaven bead and 4 earth beads, all with 'deactivate' direction
-      const step1Heaven = step1Beads.filter((b) => b.beadType === "heaven");
-      const step1Earth = step1Beads.filter((b) => b.beadType === "earth");
-      expect(step1Heaven).toHaveLength(1);
-      expect(step1Earth).toHaveLength(4);
-      expect(step1Beads.every((b) => b.direction === "deactivate")).toBe(true);
-      expect(step1Beads.every((b) => b.placeValue === 1)).toBe(true); // tens column
+      const step1Heaven = step1Beads.filter((b) => b.beadType === 'heaven')
+      const step1Earth = step1Beads.filter((b) => b.beadType === 'earth')
+      expect(step1Heaven).toHaveLength(1)
+      expect(step1Earth).toHaveLength(4)
+      expect(step1Beads.every((b) => b.direction === 'deactivate')).toBe(true)
+      expect(step1Beads.every((b) => b.placeValue === 1)).toBe(true) // tens column
 
       // Step 2: Remove 9 from ones column (1 heaven + 4 earth beads)
-      const step2Beads = stepBeads.filter((b) => b.stepIndex === 2);
-      expect(step2Beads).toHaveLength(5);
+      const step2Beads = stepBeads.filter((b) => b.stepIndex === 2)
+      expect(step2Beads).toHaveLength(5)
       // Should have 1 heaven bead and 4 earth beads, all with 'deactivate' direction
-      const step2Heaven = step2Beads.filter((b) => b.beadType === "heaven");
-      const step2Earth = step2Beads.filter((b) => b.beadType === "earth");
-      expect(step2Heaven).toHaveLength(1);
-      expect(step2Earth).toHaveLength(4);
-      expect(step2Beads.every((b) => b.direction === "deactivate")).toBe(true);
-      expect(step2Beads.every((b) => b.placeValue === 0)).toBe(true); // ones column
+      const step2Heaven = step2Beads.filter((b) => b.beadType === 'heaven')
+      const step2Earth = step2Beads.filter((b) => b.beadType === 'earth')
+      expect(step2Heaven).toHaveLength(1)
+      expect(step2Earth).toHaveLength(4)
+      expect(step2Beads.every((b) => b.direction === 'deactivate')).toBe(true)
+      expect(step2Beads.every((b) => b.placeValue === 0)).toBe(true) // ones column
 
       // Verify pedagogical ordering: highest place value first, then next highest
-      expect(instruction.multiStepInstructions).toBeDefined();
-      expect(instruction.multiStepInstructions!).toHaveLength(3);
-    });
+      expect(instruction.multiStepInstructions).toBeDefined()
+      expect(instruction.multiStepInstructions!).toHaveLength(3)
+    })
 
-    it("should generate correct step-bead mapping for 3 + 98 = 101 non-recursive case", () => {
-      const instruction = generateAbacusInstructions(3, 101);
+    it('should generate correct step-bead mapping for 3 + 98 = 101 non-recursive case', () => {
+      const instruction = generateAbacusInstructions(3, 101)
 
-      expect(instruction.stepBeadHighlights).toBeDefined();
-      expect(instruction.totalSteps).toBe(2);
+      expect(instruction.stepBeadHighlights).toBeDefined()
+      expect(instruction.totalSteps).toBe(2)
 
-      const stepBeads = instruction.stepBeadHighlights!;
+      const stepBeads = instruction.stepBeadHighlights!
 
       // Step 0: Add 1 to hundreds column
-      const step0Beads = stepBeads.filter((b) => b.stepIndex === 0);
-      expect(step0Beads).toHaveLength(1);
+      const step0Beads = stepBeads.filter((b) => b.stepIndex === 0)
+      expect(step0Beads).toHaveLength(1)
       expect(step0Beads[0]).toEqual({
         placeValue: 2,
-        beadType: "earth",
+        beadType: 'earth',
         position: 0,
         stepIndex: 0,
-        direction: "activate",
+        direction: 'activate',
         order: 0,
-      });
+      })
 
       // Step 1: Remove 2 from ones column (2 earth beads)
-      const step1Beads = stepBeads.filter((b) => b.stepIndex === 1);
-      expect(step1Beads).toHaveLength(2);
-      expect(step1Beads.every((b) => b.beadType === "earth")).toBe(true);
-      expect(step1Beads.every((b) => b.direction === "deactivate")).toBe(true);
-      expect(step1Beads.every((b) => b.placeValue === 0)).toBe(true); // ones column
-    });
+      const step1Beads = stepBeads.filter((b) => b.stepIndex === 1)
+      expect(step1Beads).toHaveLength(2)
+      expect(step1Beads.every((b) => b.beadType === 'earth')).toBe(true)
+      expect(step1Beads.every((b) => b.direction === 'deactivate')).toBe(true)
+      expect(step1Beads.every((b) => b.placeValue === 0)).toBe(true) // ones column
+    })
 
-    it("should handle single-step operations gracefully", () => {
-      const instruction = generateAbacusInstructions(0, 1);
+    it('should handle single-step operations gracefully', () => {
+      const instruction = generateAbacusInstructions(0, 1)
 
       // Single step operations might not have stepBeadHighlights or have them all in step 0
       if (instruction.stepBeadHighlights) {
-        const stepBeads = instruction.stepBeadHighlights;
-        expect(stepBeads.every((b) => b.stepIndex === 0)).toBe(true);
+        const stepBeads = instruction.stepBeadHighlights
+        expect(stepBeads.every((b) => b.stepIndex === 0)).toBe(true)
       }
-    });
+    })
 
     // CRITICAL: Test the 3 + 14 = 17 case that was the focus of our fix
-    it("should generate correct pedagogical step ordering for 3 + 14 = 17 using generic algorithm", () => {
-      const instruction = generateAbacusInstructions(3, 17);
+    it('should generate correct pedagogical step ordering for 3 + 14 = 17 using generic algorithm', () => {
+      const instruction = generateAbacusInstructions(3, 17)
 
-      expect(instruction.stepBeadHighlights).toBeDefined();
-      expect(instruction.totalSteps).toBe(3);
+      expect(instruction.stepBeadHighlights).toBeDefined()
+      expect(instruction.totalSteps).toBe(3)
 
-      const stepBeads = instruction.stepBeadHighlights!;
+      const stepBeads = instruction.stepBeadHighlights!
 
       // Step 0: Add 1 earth bead to tens place (highest place value first)
-      const step0Beads = stepBeads.filter((b) => b.stepIndex === 0);
-      expect(step0Beads).toHaveLength(1);
+      const step0Beads = stepBeads.filter((b) => b.stepIndex === 0)
+      expect(step0Beads).toHaveLength(1)
       expect(step0Beads[0]).toEqual({
         placeValue: 1, // tens place
-        beadType: "earth",
+        beadType: 'earth',
         position: 0,
         stepIndex: 0,
-        direction: "activate",
+        direction: 'activate',
         order: 0,
-      });
+      })
 
       // Step 1: Add heaven bead to ones place (addition for ones place)
-      const step1Beads = stepBeads.filter((b) => b.stepIndex === 1);
-      expect(step1Beads).toHaveLength(1);
+      const step1Beads = stepBeads.filter((b) => b.stepIndex === 1)
+      expect(step1Beads).toHaveLength(1)
       expect(step1Beads[0]).toEqual({
         placeValue: 0, // ones place
-        beadType: "heaven",
+        beadType: 'heaven',
         stepIndex: 1,
-        direction: "activate",
+        direction: 'activate',
         order: 1,
-      });
+      })
 
       // Step 2: Remove 1 earth bead from ones place (subtraction for ones place)
-      const step2Beads = stepBeads.filter((b) => b.stepIndex === 2);
-      expect(step2Beads).toHaveLength(1);
+      const step2Beads = stepBeads.filter((b) => b.stepIndex === 2)
+      expect(step2Beads).toHaveLength(1)
       expect(step2Beads[0]).toEqual({
         placeValue: 0, // ones place
-        beadType: "earth",
+        beadType: 'earth',
         position: 2, // position 2 (3rd earth bead)
         stepIndex: 2,
-        direction: "deactivate",
+        direction: 'deactivate',
         order: 2,
-      });
+      })
 
       // Verify pedagogical ordering: highest place value additions first, then subtractions
-      expect(instruction.multiStepInstructions).toBeDefined();
-      expect(instruction.multiStepInstructions!).toHaveLength(3);
+      expect(instruction.multiStepInstructions).toBeDefined()
+      expect(instruction.multiStepInstructions!).toHaveLength(3)
 
       // FIXED: multiStepInstructions now use PEDAGOGICAL ORDER (highest place first)
       // AND are consolidated to match step groupings
       // For 3+14=17 using 3+(20-6) decomposition: tens first (add 10), then ones (add 5, remove 1)
-      expect(instruction.multiStepInstructions![0]).toContain(
-        "earth bead 1 in the tens column",
-      );
-      expect(instruction.multiStepInstructions![1]).toContain(
-        "heaven bead in the ones column",
-      );
+      expect(instruction.multiStepInstructions![0]).toContain('earth bead 1 in the tens column')
+      expect(instruction.multiStepInstructions![1]).toContain('heaven bead in the ones column')
       // FIXED: Now consolidated - shows "earth bead 1" instead of individual bead references
       expect(instruction.multiStepInstructions![2]).toContain(
-        "earth bead 1 in the ones column to remove",
-      );
-    });
+        'earth bead 1 in the ones column to remove'
+      )
+    })
 
     // Test pedagogical ordering algorithm with various complex cases
-    describe("Pedagogical step ordering algorithm", () => {
-      it("should use generic algorithm for 27 + 36 = 63 (multi-place with complement)", () => {
-        const instruction = generateAbacusInstructions(27, 63);
+    describe('Pedagogical step ordering algorithm', () => {
+      it('should use generic algorithm for 27 + 36 = 63 (multi-place with complement)', () => {
+        const instruction = generateAbacusInstructions(27, 63)
 
-        expect(instruction.stepBeadHighlights).toBeDefined();
-        expect(instruction.totalSteps).toBeGreaterThan(1);
+        expect(instruction.stepBeadHighlights).toBeDefined()
+        expect(instruction.totalSteps).toBeGreaterThan(1)
 
         // Verify steps are ordered from highest to lowest place value
-        const stepBeads = instruction.stepBeadHighlights!;
-        const additionSteps = stepBeads.filter(
-          (b) => b.direction === "activate",
-        );
-        const subtractionSteps = stepBeads.filter(
-          (b) => b.direction === "deactivate",
-        );
+        const stepBeads = instruction.stepBeadHighlights!
+        const additionSteps = stepBeads.filter((b) => b.direction === 'activate')
+        const subtractionSteps = stepBeads.filter((b) => b.direction === 'deactivate')
 
         // All additions should come before subtractions within the same place value
         if (additionSteps.length > 0 && subtractionSteps.length > 0) {
-          const lastAdditionStep = Math.max(
-            ...additionSteps.map((b) => b.stepIndex),
-          );
-          const firstSubtractionStep = Math.min(
-            ...subtractionSteps.map((b) => b.stepIndex),
-          );
-          expect(lastAdditionStep).toBeLessThanOrEqual(firstSubtractionStep);
+          const lastAdditionStep = Math.max(...additionSteps.map((b) => b.stepIndex))
+          const firstSubtractionStep = Math.min(...subtractionSteps.map((b) => b.stepIndex))
+          expect(lastAdditionStep).toBeLessThanOrEqual(firstSubtractionStep)
         }
-      });
+      })
 
-      it("should use generic algorithm for 87 + 26 = 113 (crossing hundreds)", () => {
-        const instruction = generateAbacusInstructions(87, 113);
+      it('should use generic algorithm for 87 + 26 = 113 (crossing hundreds)', () => {
+        const instruction = generateAbacusInstructions(87, 113)
 
-        expect(instruction.stepBeadHighlights).toBeDefined();
-        expect(instruction.totalSteps).toBeGreaterThan(1);
+        expect(instruction.stepBeadHighlights).toBeDefined()
+        expect(instruction.totalSteps).toBeGreaterThan(1)
 
-        const stepBeads = instruction.stepBeadHighlights!;
+        const stepBeads = instruction.stepBeadHighlights!
 
         // Should have steps for hundreds, tens, and ones places
-        const hundredsBeads = stepBeads.filter((b) => b.placeValue === 2);
-        const tensBeads = stepBeads.filter((b) => b.placeValue === 1);
-        const onesBeads = stepBeads.filter((b) => b.placeValue === 0);
+        const hundredsBeads = stepBeads.filter((b) => b.placeValue === 2)
+        const tensBeads = stepBeads.filter((b) => b.placeValue === 1)
+        const onesBeads = stepBeads.filter((b) => b.placeValue === 0)
 
-        expect(hundredsBeads.length).toBeGreaterThan(0);
-        expect(tensBeads.length + onesBeads.length).toBeGreaterThan(0);
+        expect(hundredsBeads.length).toBeGreaterThan(0)
+        expect(tensBeads.length + onesBeads.length).toBeGreaterThan(0)
 
         // Hundreds place operations should come first
-        if (
-          hundredsBeads.length > 0 &&
-          (tensBeads.length > 0 || onesBeads.length > 0)
-        ) {
-          const maxHundredsStep = Math.max(
-            ...hundredsBeads.map((b) => b.stepIndex),
-          );
+        if (hundredsBeads.length > 0 && (tensBeads.length > 0 || onesBeads.length > 0)) {
+          const maxHundredsStep = Math.max(...hundredsBeads.map((b) => b.stepIndex))
           const minLowerPlaceStep = Math.min(
-            ...[...tensBeads, ...onesBeads].map((b) => b.stepIndex),
-          );
-          expect(maxHundredsStep).toBeLessThan(minLowerPlaceStep);
+            ...[...tensBeads, ...onesBeads].map((b) => b.stepIndex)
+          )
+          expect(maxHundredsStep).toBeLessThan(minLowerPlaceStep)
         }
-      });
+      })
 
-      it("should use generic algorithm for 45 + 67 = 112 (complex multi-step)", () => {
-        const instruction = generateAbacusInstructions(45, 112);
+      it('should use generic algorithm for 45 + 67 = 112 (complex multi-step)', () => {
+        const instruction = generateAbacusInstructions(45, 112)
 
-        expect(instruction.stepBeadHighlights).toBeDefined();
-        expect(instruction.totalSteps).toBeGreaterThan(1);
+        expect(instruction.stepBeadHighlights).toBeDefined()
+        expect(instruction.totalSteps).toBeGreaterThan(1)
 
         // Verify the instruction is generated without hard-coded special cases
-        expect(instruction.actionDescription).toContain("45 + 67");
-        expect(instruction.multiStepInstructions).toBeDefined();
-        expect(instruction.multiStepInstructions!.length).toBeGreaterThan(1);
-      });
+        expect(instruction.actionDescription).toContain('45 + 67')
+        expect(instruction.multiStepInstructions).toBeDefined()
+        expect(instruction.multiStepInstructions!.length).toBeGreaterThan(1)
+      })
 
       // Test that no hard-coded special cases exist by testing variations of the original problem
-      it("should handle 4 + 14 = 18 without hard-coded logic", () => {
-        const instruction = generateAbacusInstructions(4, 18);
-        expect(instruction.stepBeadHighlights).toBeDefined();
-        expect(instruction.totalSteps).toBeGreaterThan(1);
-      });
+      it('should handle 4 + 14 = 18 without hard-coded logic', () => {
+        const instruction = generateAbacusInstructions(4, 18)
+        expect(instruction.stepBeadHighlights).toBeDefined()
+        expect(instruction.totalSteps).toBeGreaterThan(1)
+      })
 
-      it("should handle 2 + 14 = 16 without hard-coded logic", () => {
-        const instruction = generateAbacusInstructions(2, 16);
-        expect(instruction.stepBeadHighlights).toBeDefined();
-        expect(instruction.totalSteps).toBeGreaterThan(1);
-      });
+      it('should handle 2 + 14 = 16 without hard-coded logic', () => {
+        const instruction = generateAbacusInstructions(2, 16)
+        expect(instruction.stepBeadHighlights).toBeDefined()
+        expect(instruction.totalSteps).toBeGreaterThan(1)
+      })
 
-      it("should handle 5 + 14 = 19 without hard-coded logic", () => {
-        const instruction = generateAbacusInstructions(5, 19);
-        expect(instruction.stepBeadHighlights).toBeDefined();
-        expect(instruction.totalSteps).toBeGreaterThan(1);
-      });
+      it('should handle 5 + 14 = 19 without hard-coded logic', () => {
+        const instruction = generateAbacusInstructions(5, 19)
+        expect(instruction.stepBeadHighlights).toBeDefined()
+        expect(instruction.totalSteps).toBeGreaterThan(1)
+      })
 
-      it("should handle 13 + 4 = 17 (reverse of original) without hard-coded logic", () => {
-        const instruction = generateAbacusInstructions(13, 17);
-        expect(instruction.stepBeadHighlights).toBeDefined();
-        expect(instruction.totalSteps).toBeGreaterThan(0);
-      });
+      it('should handle 13 + 4 = 17 (reverse of original) without hard-coded logic', () => {
+        const instruction = generateAbacusInstructions(13, 17)
+        expect(instruction.stepBeadHighlights).toBeDefined()
+        expect(instruction.totalSteps).toBeGreaterThan(0)
+      })
 
       // Test systematic variations to ensure generic algorithm
       it('should handle all "X + 14" patterns systematically', () => {
         const failedCases: Array<{
-          start: number;
-          target: number;
-          error: string;
-        }> = [];
+          start: number
+          target: number
+          error: string
+        }> = []
 
         for (let start = 0; start <= 9; start++) {
-          const target = start + 14;
-          if (target > 99) continue;
+          const target = start + 14
+          if (target > 99) continue
 
           try {
-            const instruction = generateAbacusInstructions(start, target);
-            expect(instruction.stepBeadHighlights).toBeDefined();
-            expect(instruction.totalSteps).toBeGreaterThan(0);
+            const instruction = generateAbacusInstructions(start, target)
+            expect(instruction.stepBeadHighlights).toBeDefined()
+            expect(instruction.totalSteps).toBeGreaterThan(0)
 
             // Verify pedagogical ordering if multi-step
             if (instruction.totalSteps && instruction.totalSteps > 1) {
-              const stepBeads = instruction.stepBeadHighlights!;
-              const placeValues = [
-                ...new Set(stepBeads.map((b) => b.placeValue)),
-              ].sort((a, b) => b - a);
+              const stepBeads = instruction.stepBeadHighlights!
+              const placeValues = [...new Set(stepBeads.map((b) => b.placeValue))].sort(
+                (a, b) => b - a
+              )
 
               // For each place value, additions should come before subtractions
               placeValues.forEach((place) => {
-                const placeBeads = stepBeads.filter(
-                  (b) => b.placeValue === place,
-                );
-                const additions = placeBeads.filter(
-                  (b) => b.direction === "activate",
-                );
-                const subtractions = placeBeads.filter(
-                  (b) => b.direction === "deactivate",
-                );
+                const placeBeads = stepBeads.filter((b) => b.placeValue === place)
+                const additions = placeBeads.filter((b) => b.direction === 'activate')
+                const subtractions = placeBeads.filter((b) => b.direction === 'deactivate')
 
                 if (additions.length > 0 && subtractions.length > 0) {
-                  const lastAddition = Math.max(
-                    ...additions.map((b) => b.stepIndex),
-                  );
-                  const firstSubtraction = Math.min(
-                    ...subtractions.map((b) => b.stepIndex),
-                  );
-                  expect(lastAddition).toBeLessThanOrEqual(firstSubtraction);
+                  const lastAddition = Math.max(...additions.map((b) => b.stepIndex))
+                  const firstSubtraction = Math.min(...subtractions.map((b) => b.stepIndex))
+                  expect(lastAddition).toBeLessThanOrEqual(firstSubtraction)
                 }
-              });
+              })
             }
           } catch (error) {
             failedCases.push({
               start,
               target,
               error: `Exception: ${error instanceof Error ? error.message : String(error)}`,
-            });
+            })
           }
         }
 
         if (failedCases.length > 0) {
-          console.error('Failed "X + 14" pattern cases:', failedCases);
+          console.error('Failed "X + 14" pattern cases:', failedCases)
         }
-        expect(failedCases).toHaveLength(0);
-      });
+        expect(failedCases).toHaveLength(0)
+      })
 
       it('should handle all "3 + Y" patterns systematically', () => {
         const failedCases: Array<{
-          start: number;
-          target: number;
-          error: string;
-        }> = [];
+          start: number
+          target: number
+          error: string
+        }> = []
 
         for (let addAmount = 1; addAmount <= 20; addAmount++) {
-          const start = 3;
-          const target = start + addAmount;
-          if (target > 99) continue;
+          const start = 3
+          const target = start + addAmount
+          if (target > 99) continue
 
           try {
-            const instruction = generateAbacusInstructions(start, target);
-            expect(instruction.stepBeadHighlights).toBeDefined();
-            expect(instruction.totalSteps).toBeGreaterThan(0);
+            const instruction = generateAbacusInstructions(start, target)
+            expect(instruction.stepBeadHighlights).toBeDefined()
+            expect(instruction.totalSteps).toBeGreaterThan(0)
           } catch (error) {
             failedCases.push({
               start,
               target,
               error: `Exception: ${error instanceof Error ? error.message : String(error)}`,
-            });
+            })
           }
         }
 
         if (failedCases.length > 0) {
-          console.error('Failed "3 + Y" pattern cases:', failedCases);
+          console.error('Failed "3 + Y" pattern cases:', failedCases)
         }
-        expect(failedCases).toHaveLength(0);
-      });
-    });
+        expect(failedCases).toHaveLength(0)
+      })
+    })
 
     // Anti-cheat tests: ensure no hard-coded special cases
-    describe("Anti-cheat verification", () => {
-      it("should not contain hard-coded special cases for specific problems", () => {
+    describe('Anti-cheat verification', () => {
+      it('should not contain hard-coded special cases for specific problems', () => {
         // Read the source code to verify no hard-coded special cases
         // This test would fail if someone added "if (start === 3 && target === 17)" logic
 
@@ -1274,24 +1213,20 @@ describe("Automatic Abacus Instruction Generator", () => {
           { start: 2, target: 16 },
           { start: 5, target: 19 },
           { start: 13, target: 17 },
-        ];
+        ]
 
         testCases.forEach(({ start, target }) => {
-          const instruction1 = generateAbacusInstructions(start, target);
-          const instruction2 = generateAbacusInstructions(start, target);
+          const instruction1 = generateAbacusInstructions(start, target)
+          const instruction2 = generateAbacusInstructions(start, target)
 
           // Results should be consistent (no randomness or hard-coded switching)
-          expect(instruction1.stepBeadHighlights).toEqual(
-            instruction2.stepBeadHighlights,
-          );
-          expect(instruction1.totalSteps).toBe(instruction2.totalSteps);
-          expect(instruction1.multiStepInstructions).toEqual(
-            instruction2.multiStepInstructions,
-          );
-        });
-      });
+          expect(instruction1.stepBeadHighlights).toEqual(instruction2.stepBeadHighlights)
+          expect(instruction1.totalSteps).toBe(instruction2.totalSteps)
+          expect(instruction1.multiStepInstructions).toEqual(instruction2.multiStepInstructions)
+        })
+      })
 
-      it("should generate identical results for equivalent problems", () => {
+      it('should generate identical results for equivalent problems', () => {
         // Problems with the same structure should have same step count
         const equivalentPairs = [
           [
@@ -1306,236 +1241,204 @@ describe("Automatic Abacus Instruction Generator", () => {
             { start: 4, target: 18 },
             { start: 14, target: 28 },
           ], // Both "4 + 14" in different decades
-        ];
+        ]
 
         equivalentPairs.forEach(([case1, case2]) => {
-          const instruction1 = generateAbacusInstructions(
-            case1.start,
-            case1.target,
-          );
-          const instruction2 = generateAbacusInstructions(
-            case2.start,
-            case2.target,
-          );
+          const instruction1 = generateAbacusInstructions(case1.start, case1.target)
+          const instruction2 = generateAbacusInstructions(case2.start, case2.target)
 
           // Should have same number of steps (structure should be identical)
-          expect(instruction1.totalSteps).toBe(instruction2.totalSteps);
+          expect(instruction1.totalSteps).toBe(instruction2.totalSteps)
 
           // Should have same number of step bead highlights
           expect(instruction1.stepBeadHighlights?.length).toBe(
-            instruction2.stepBeadHighlights?.length,
-          );
-        });
-      });
-    });
-  });
+            instruction2.stepBeadHighlights?.length
+          )
+        })
+      })
+    })
+  })
 
-  describe("Expected States Calculation", () => {
-    it("should correctly calculate expected states for each multi-step instruction", () => {
-      const instruction = generateAbacusInstructions(3, 17);
+  describe('Expected States Calculation', () => {
+    it('should correctly calculate expected states for each multi-step instruction', () => {
+      const instruction = generateAbacusInstructions(3, 17)
 
       // Calculate expected states using the same logic as tutorial editor
-      const expectedStates: number[] = [];
+      const expectedStates: number[] = []
       if (instruction.stepBeadHighlights && instruction.multiStepInstructions) {
         const stepIndices = [
-          ...new Set(
-            instruction.stepBeadHighlights.map((bead) => bead.stepIndex),
-          ),
-        ].sort();
-        let currentValue = 3;
+          ...new Set(instruction.stepBeadHighlights.map((bead) => bead.stepIndex)),
+        ].sort()
+        let currentValue = 3
 
         stepIndices.forEach((stepIndex, _i) => {
           const stepBeads = instruction.stepBeadHighlights!.filter(
-            (bead) => bead.stepIndex === stepIndex,
-          );
-          let valueChange = 0;
+            (bead) => bead.stepIndex === stepIndex
+          )
+          let valueChange = 0
 
           stepBeads.forEach((bead) => {
-            const placeMultiplier = 10 ** bead.placeValue;
-            if (bead.beadType === "heaven") {
+            const placeMultiplier = 10 ** bead.placeValue
+            if (bead.beadType === 'heaven') {
               valueChange +=
-                bead.direction === "activate"
-                  ? 5 * placeMultiplier
-                  : -(5 * placeMultiplier);
+                bead.direction === 'activate' ? 5 * placeMultiplier : -(5 * placeMultiplier)
             } else {
-              valueChange +=
-                bead.direction === "activate"
-                  ? placeMultiplier
-                  : -placeMultiplier;
+              valueChange += bead.direction === 'activate' ? placeMultiplier : -placeMultiplier
             }
-          });
+          })
 
-          currentValue += valueChange;
-          expectedStates.push(currentValue);
-        });
+          currentValue += valueChange
+          expectedStates.push(currentValue)
+        })
       }
 
       // Verify we have the correct number of expected states
-      expect(expectedStates.length).toBe(instruction.totalSteps);
-      expect(expectedStates.length).toBe(
-        instruction.multiStepInstructions?.length || 0,
-      );
+      expect(expectedStates.length).toBe(instruction.totalSteps)
+      expect(expectedStates.length).toBe(instruction.multiStepInstructions?.length || 0)
 
       // Verify the final state matches the target
-      expect(expectedStates[expectedStates.length - 1]).toBe(17);
+      expect(expectedStates[expectedStates.length - 1]).toBe(17)
 
       // Verify all states are progressive (increasing or equal)
-      expect(expectedStates[0]).toBeGreaterThanOrEqual(3); // First step should be >= start value
+      expect(expectedStates[0]).toBeGreaterThanOrEqual(3) // First step should be >= start value
       for (let i = 1; i < expectedStates.length; i++) {
         // Each step should be different from the previous (actual progression)
-        expect(expectedStates[i]).not.toBe(expectedStates[i - 1]);
+        expect(expectedStates[i]).not.toBe(expectedStates[i - 1])
       }
-    });
+    })
 
-    it("should calculate expected states for complex case 99+1=100", () => {
-      const instruction = generateAbacusInstructions(99, 100);
+    it('should calculate expected states for complex case 99+1=100', () => {
+      const instruction = generateAbacusInstructions(99, 100)
 
       // Calculate expected states
-      const expectedStates: number[] = [];
+      const expectedStates: number[] = []
       if (instruction.stepBeadHighlights && instruction.multiStepInstructions) {
         const stepIndices = [
-          ...new Set(
-            instruction.stepBeadHighlights.map((bead) => bead.stepIndex),
-          ),
-        ].sort();
-        let currentValue = 99;
+          ...new Set(instruction.stepBeadHighlights.map((bead) => bead.stepIndex)),
+        ].sort()
+        let currentValue = 99
 
         stepIndices.forEach((stepIndex, _i) => {
           const stepBeads = instruction.stepBeadHighlights!.filter(
-            (bead) => bead.stepIndex === stepIndex,
-          );
-          let valueChange = 0;
+            (bead) => bead.stepIndex === stepIndex
+          )
+          let valueChange = 0
 
           stepBeads.forEach((bead) => {
-            const placeMultiplier = 10 ** bead.placeValue;
-            if (bead.beadType === "heaven") {
+            const placeMultiplier = 10 ** bead.placeValue
+            if (bead.beadType === 'heaven') {
               valueChange +=
-                bead.direction === "activate"
-                  ? 5 * placeMultiplier
-                  : -(5 * placeMultiplier);
+                bead.direction === 'activate' ? 5 * placeMultiplier : -(5 * placeMultiplier)
             } else {
-              valueChange +=
-                bead.direction === "activate"
-                  ? placeMultiplier
-                  : -placeMultiplier;
+              valueChange += bead.direction === 'activate' ? placeMultiplier : -placeMultiplier
             }
-          });
+          })
 
-          currentValue += valueChange;
-          expectedStates.push(currentValue);
-        });
+          currentValue += valueChange
+          expectedStates.push(currentValue)
+        })
       }
 
       // Verify final state is correct
-      expect(expectedStates[expectedStates.length - 1]).toBe(100);
+      expect(expectedStates[expectedStates.length - 1]).toBe(100)
 
       // Verify we have a reasonable number of steps (should be multi-step for this complex case)
-      expect(expectedStates.length).toBeGreaterThan(1);
-    });
+      expect(expectedStates.length).toBeGreaterThan(1)
+    })
 
-    it("should handle edge case where start equals target", () => {
-      const instruction = generateAbacusInstructions(42, 42);
+    it('should handle edge case where start equals target', () => {
+      const instruction = generateAbacusInstructions(42, 42)
 
       // Should have no steps since no change is needed
-      expect(instruction.totalSteps || 0).toBe(0);
-      expect(instruction.multiStepInstructions?.length || 0).toBe(0);
-    });
+      expect(instruction.totalSteps || 0).toBe(0)
+      expect(instruction.multiStepInstructions?.length || 0).toBe(0)
+    })
 
-    it("should calculate expected states that match tutorial progression", () => {
+    it('should calculate expected states that match tutorial progression', () => {
       // Test case from tutorial editor: 27 -> 65
-      const instruction = generateAbacusInstructions(27, 65);
+      const instruction = generateAbacusInstructions(27, 65)
 
-      const expectedStates: number[] = [];
+      const expectedStates: number[] = []
       if (instruction.stepBeadHighlights && instruction.multiStepInstructions) {
         const stepIndices = [
-          ...new Set(
-            instruction.stepBeadHighlights.map((bead) => bead.stepIndex),
-          ),
-        ].sort();
-        let currentValue = 27;
+          ...new Set(instruction.stepBeadHighlights.map((bead) => bead.stepIndex)),
+        ].sort()
+        let currentValue = 27
 
         stepIndices.forEach((stepIndex, _i) => {
           const stepBeads = instruction.stepBeadHighlights!.filter(
-            (bead) => bead.stepIndex === stepIndex,
-          );
-          let valueChange = 0;
+            (bead) => bead.stepIndex === stepIndex
+          )
+          let valueChange = 0
 
           stepBeads.forEach((bead) => {
-            const placeMultiplier = 10 ** bead.placeValue;
-            if (bead.beadType === "heaven") {
+            const placeMultiplier = 10 ** bead.placeValue
+            if (bead.beadType === 'heaven') {
               valueChange +=
-                bead.direction === "activate"
-                  ? 5 * placeMultiplier
-                  : -(5 * placeMultiplier);
+                bead.direction === 'activate' ? 5 * placeMultiplier : -(5 * placeMultiplier)
             } else {
-              valueChange +=
-                bead.direction === "activate"
-                  ? placeMultiplier
-                  : -placeMultiplier;
+              valueChange += bead.direction === 'activate' ? placeMultiplier : -placeMultiplier
             }
-          });
+          })
 
-          currentValue += valueChange;
-          expectedStates.push(currentValue);
-        });
+          currentValue += valueChange
+          expectedStates.push(currentValue)
+        })
       }
 
       // Verify tutorial editor functionality: each state should be reasonable
       // Note: Due to pedagogical ordering, intermediate states may temporarily exceed target
       expectedStates.forEach((state, index) => {
-        expect(state).toBeGreaterThanOrEqual(0); // Must be non-negative
-        expect(state).toBeLessThanOrEqual(200); // Reasonable upper bound
+        expect(state).toBeGreaterThanOrEqual(0) // Must be non-negative
+        expect(state).toBeLessThanOrEqual(200) // Reasonable upper bound
 
         // Should have meaningful step descriptions
-        expect(instruction.multiStepInstructions?.[index]).toBeDefined();
-        expect(instruction.multiStepInstructions?.[index]).not.toBe("");
-      });
+        expect(instruction.multiStepInstructions?.[index]).toBeDefined()
+        expect(instruction.multiStepInstructions?.[index]).not.toBe('')
+      })
 
       // Final verification
-      expect(expectedStates[expectedStates.length - 1]).toBe(65);
-    });
+      expect(expectedStates[expectedStates.length - 1]).toBe(65)
+    })
 
-    it("should correctly consolidate multi-bead instructions for 56 → 104", () => {
+    it('should correctly consolidate multi-bead instructions for 56 → 104', () => {
       // Verifies the fix for consolidated instructions matching expected states
-      const instruction = generateAbacusInstructions(56, 104);
+      const instruction = generateAbacusInstructions(56, 104)
 
       // Verify instruction consolidation
-      expect(instruction.multiStepInstructions).toBeDefined();
+      expect(instruction.multiStepInstructions).toBeDefined()
       expect(instruction.multiStepInstructions![1]).toContain(
-        "Add 3 to ones column (3 earth beads)",
-      );
+        'Add 3 to ones column (3 earth beads)'
+      )
 
       // Calculate expected states step by step like tutorial editor does
-      const expectedStates: number[] = [];
+      const expectedStates: number[] = []
       if (instruction.stepBeadHighlights && instruction.multiStepInstructions) {
         const stepIndices = [
-          ...new Set(
-            instruction.stepBeadHighlights.map((bead) => bead.stepIndex),
-          ),
-        ].sort();
-        let currentValue = 56;
+          ...new Set(instruction.stepBeadHighlights.map((bead) => bead.stepIndex)),
+        ].sort()
+        let currentValue = 56
 
         stepIndices.forEach((stepIndex, _i) => {
           const stepBeads = instruction.stepBeadHighlights!.filter(
-            (bead) => bead.stepIndex === stepIndex,
-          );
-          let valueChange = 0;
+            (bead) => bead.stepIndex === stepIndex
+          )
+          let valueChange = 0
 
           stepBeads.forEach((bead) => {
-            const multiplier = 10 ** bead.placeValue;
-            const value =
-              bead.beadType === "heaven" ? 5 * multiplier : multiplier;
-            const change = bead.direction === "activate" ? value : -value;
-            valueChange += change;
-          });
+            const multiplier = 10 ** bead.placeValue
+            const value = bead.beadType === 'heaven' ? 5 * multiplier : multiplier
+            const change = bead.direction === 'activate' ? value : -value
+            valueChange += change
+          })
 
-          currentValue += valueChange;
-          expectedStates.push(currentValue);
-        });
+          currentValue += valueChange
+          expectedStates.push(currentValue)
+        })
       }
 
       // FIXED: step 1 should be 156 + 3 = 159 (3 earth beads consolidated)
-      expect(expectedStates[1]).toBe(159); // Instruction and expected state now match
-    });
-  });
-});
+      expect(expectedStates[1]).toBe(159) // Instruction and expected state now match
+    })
+  })
+})
diff --git a/apps/web/src/utils/test/pedagogicalDecomposition.test.ts b/apps/web/src/utils/test/pedagogicalDecomposition.test.ts
index a40fd0dd..aed5c2c3 100644
--- a/apps/web/src/utils/test/pedagogicalDecomposition.test.ts
+++ b/apps/web/src/utils/test/pedagogicalDecomposition.test.ts
@@ -1,314 +1,281 @@
-import { describe, expect, it } from "vitest";
-import { generateAbacusInstructions } from "../abacusInstructionGenerator";
+import { describe, expect, it } from 'vitest'
+import { generateAbacusInstructions } from '../abacusInstructionGenerator'
 
-describe("Pedagogical Decomposition", () => {
-  describe("Core Principle: 1:1 Mapping to Bead Movements", () => {
-    it("should map each decomposition term to a specific bead movement", () => {
+describe('Pedagogical Decomposition', () => {
+  describe('Core Principle: 1:1 Mapping to Bead Movements', () => {
+    it('should map each decomposition term to a specific bead movement', () => {
       // Test case: 3 + 14 = 17
-      const instruction = generateAbacusInstructions(3, 17);
+      const instruction = generateAbacusInstructions(3, 17)
 
       // Should show decomposition like "3 + 10 + (5 - 1)" where:
       // - "10" maps to adding 1 earth bead in tens place
       // - "(5 - 1)" maps to adding heaven bead and removing 1 earth bead in ones
-      expect(instruction.actionDescription).toContain("3 + 14 = 3 + 10");
-      expect(instruction.actionDescription).toContain("(5 - 1)");
+      expect(instruction.actionDescription).toContain('3 + 14 = 3 + 10')
+      expect(instruction.actionDescription).toContain('(5 - 1)')
 
       // Verify bead movements match decomposition terms
-      const tensBeads = instruction.highlightBeads.filter(
-        (b) => b.placeValue === 1,
-      );
-      const onesBeads = instruction.highlightBeads.filter(
-        (b) => b.placeValue === 0,
-      );
+      const tensBeads = instruction.highlightBeads.filter((b) => b.placeValue === 1)
+      const onesBeads = instruction.highlightBeads.filter((b) => b.placeValue === 0)
 
-      expect(tensBeads).toHaveLength(1); // One term "10" = 1 tens bead
-      expect(onesBeads).toHaveLength(2); // Term "(5 - 1)" = heaven + 1 earth bead
-    });
+      expect(tensBeads).toHaveLength(1) // One term "10" = 1 tens bead
+      expect(onesBeads).toHaveLength(2) // Term "(5 - 1)" = heaven + 1 earth bead
+    })
 
-    it("should handle ten complement with proper breakdown: 7 + 4 = 11", () => {
-      const instruction = generateAbacusInstructions(7, 11);
+    it('should handle ten complement with proper breakdown: 7 + 4 = 11', () => {
+      const instruction = generateAbacusInstructions(7, 11)
 
       // Should break down as: 7 + 4 = 7 + 10 - 6
       // - "+10" maps to adding 1 earth bead in tens
       // - "-6" maps to removing heaven bead + 1 earth bead in ones
-      expect(instruction.actionDescription).toContain("7 + 4 = 7 + 10 - 6");
+      expect(instruction.actionDescription).toContain('7 + 4 = 7 + 10 - 6')
 
       // Verify bead movements: 1 tens addition + 2 ones removals
-      expect(instruction.highlightBeads).toHaveLength(3);
+      expect(instruction.highlightBeads).toHaveLength(3)
 
-      const tensAdditions = instruction.highlightBeads.filter(
-        (b) => b.placeValue === 1,
-      );
-      const onesBeads = instruction.highlightBeads.filter(
-        (b) => b.placeValue === 0,
-      );
+      const tensAdditions = instruction.highlightBeads.filter((b) => b.placeValue === 1)
+      const onesBeads = instruction.highlightBeads.filter((b) => b.placeValue === 0)
 
-      expect(tensAdditions).toHaveLength(1); // "+10" term
-      expect(onesBeads).toHaveLength(2); // "-6" = heaven + earth removal
-    });
+      expect(tensAdditions).toHaveLength(1) // "+10" term
+      expect(onesBeads).toHaveLength(2) // "-6" = heaven + earth removal
+    })
 
-    it("should handle five complement: 2 + 3 = 5", () => {
-      const instruction = generateAbacusInstructions(2, 5);
+    it('should handle five complement: 2 + 3 = 5', () => {
+      const instruction = generateAbacusInstructions(2, 5)
 
       // Should show: 2 + 3 = 2 + (5 - 2) where:
       // - "+5" maps to adding heaven bead
       // - "-2" maps to removing 2 earth beads
-      expect(instruction.actionDescription).toContain("2 + 3 = 2 + (5 - 2)");
+      expect(instruction.actionDescription).toContain('2 + 3 = 2 + (5 - 2)')
 
       // Verify bead movements match
-      const onesBeads = instruction.highlightBeads.filter(
-        (b) => b.placeValue === 0,
-      );
-      expect(onesBeads).toHaveLength(3); // heaven + 2 earth removals
-    });
-  });
+      const onesBeads = instruction.highlightBeads.filter((b) => b.placeValue === 0)
+      expect(onesBeads).toHaveLength(3) // heaven + 2 earth removals
+    })
+  })
 
-  describe("Complex Multi-Place Operations", () => {
-    it("should decompose 3 + 98 = 101 by place value", () => {
-      const instruction = generateAbacusInstructions(3, 98);
+  describe('Complex Multi-Place Operations', () => {
+    it('should decompose 3 + 98 = 101 by place value', () => {
+      const instruction = generateAbacusInstructions(3, 98)
 
       // Should break down like: 3 + 95 = 3 + 90 + 5
       // Each term should map to place-specific bead movements
-      expect(instruction.actionDescription).toMatch(/3 \+ 95 = 3 \+ \d+/);
+      expect(instruction.actionDescription).toMatch(/3 \+ 95 = 3 \+ \d+/)
 
       // Should have beads in multiple places
-      const places = new Set(
-        instruction.highlightBeads.map((b) => b.placeValue),
-      );
-      expect(places.size).toBeGreaterThan(1);
-    });
+      const places = new Set(instruction.highlightBeads.map((b) => b.placeValue))
+      expect(places.size).toBeGreaterThan(1)
+    })
 
-    it("should handle hundred boundary crossing: 99 + 1 = 100", () => {
-      const instruction = generateAbacusInstructions(99, 100);
+    it('should handle hundred boundary crossing: 99 + 1 = 100', () => {
+      const instruction = generateAbacusInstructions(99, 100)
 
       // Should show recursive breakdown that maps to actual bead movements
-      expect(instruction.actionDescription).toContain(
-        "99 + 1 = 99 + (100 - 90) - 9",
-      );
+      expect(instruction.actionDescription).toContain('99 + 1 = 99 + (100 - 90) - 9')
 
       // Verify step-by-step bead mapping exists
-      expect(instruction.stepBeadHighlights).toBeDefined();
-      expect(instruction.multiStepInstructions).toBeDefined();
-      expect(instruction.multiStepInstructions!.length).toBeGreaterThan(1);
-    });
+      expect(instruction.stepBeadHighlights).toBeDefined()
+      expect(instruction.multiStepInstructions).toBeDefined()
+      expect(instruction.multiStepInstructions!.length).toBeGreaterThan(1)
+    })
 
-    it("should decompose 56 → 104 correctly", () => {
-      const instruction = generateAbacusInstructions(56, 104);
+    it('should decompose 56 → 104 correctly', () => {
+      const instruction = generateAbacusInstructions(56, 104)
 
       // Should break down 48 into place-value components
-      expect(instruction.actionDescription).toMatch(/56 \+ 48/);
+      expect(instruction.actionDescription).toMatch(/56 \+ 48/)
 
       // Verify multi-step instructions are properly consolidated
-      expect(instruction.multiStepInstructions).toBeDefined();
-      expect(instruction.multiStepInstructions!.length).toBeGreaterThan(1);
-    });
-  });
+      expect(instruction.multiStepInstructions).toBeDefined()
+      expect(instruction.multiStepInstructions!.length).toBeGreaterThan(1)
+    })
+  })
 
-  describe("Edge Cases and Boundary Conditions", () => {
-    it("should handle single digit additions", () => {
+  describe('Edge Cases and Boundary Conditions', () => {
+    it('should handle single digit additions', () => {
       const testCases = [
         { start: 1, target: 2, expectedBeads: 1 }, // Add 1 earth bead
         { start: 0, target: 1, expectedBeads: 1 }, // Add 1 earth bead
         { start: 4, target: 5, expectedBeads: 5 }, // Use complement operation (heaven + removals)
-      ];
+      ]
 
       testCases.forEach(({ start, target, expectedBeads }) => {
-        const instruction = generateAbacusInstructions(start, target);
+        const instruction = generateAbacusInstructions(start, target)
         // Simple operations show action descriptions rather than mathematical breakdown
-        expect(instruction.actionDescription).toBeDefined();
-        expect(instruction.highlightBeads).toHaveLength(expectedBeads);
-      });
-    });
+        expect(instruction.actionDescription).toBeDefined()
+        expect(instruction.highlightBeads).toHaveLength(expectedBeads)
+      })
+    })
 
-    it("should handle five complement edge cases", () => {
+    it('should handle five complement edge cases', () => {
       const fiveComplementCases = [
         { start: 1, target: 4 }, // 1 + 3
         { start: 2, target: 6 }, // 2 + 4
         { start: 3, target: 7 }, // 3 + 4
-      ];
+      ]
 
       fiveComplementCases.forEach(({ start, target }) => {
-        const instruction = generateAbacusInstructions(start, target);
+        const instruction = generateAbacusInstructions(start, target)
 
         // Should have mathematical breakdown or action description
-        expect(instruction.actionDescription).toBeDefined();
+        expect(instruction.actionDescription).toBeDefined()
 
         // Should involve bead movements (could be complement or direct)
-        expect(instruction.highlightBeads.length).toBeGreaterThan(0);
-      });
-    });
+        expect(instruction.highlightBeads.length).toBeGreaterThan(0)
+      })
+    })
 
-    it("should handle ten complement edge cases", () => {
+    it('should handle ten complement edge cases', () => {
       const tenComplementCases = [
-        { start: 6, target: 12, description: "6 + 6 crossing tens" },
-        { start: 8, target: 15, description: "8 + 7 crossing tens" },
-        { start: 9, target: 18, description: "9 + 9 crossing tens" },
-      ];
+        { start: 6, target: 12, description: '6 + 6 crossing tens' },
+        { start: 8, target: 15, description: '8 + 7 crossing tens' },
+        { start: 9, target: 18, description: '9 + 9 crossing tens' },
+      ]
 
       tenComplementCases.forEach(({ start, target, description }) => {
-        const instruction = generateAbacusInstructions(start, target);
+        const instruction = generateAbacusInstructions(start, target)
 
         // Should have mathematical breakdown for complex operations
-        expect(instruction.actionDescription).toContain(
-          `${start} + ${target - start}`,
-        );
+        expect(instruction.actionDescription).toContain(`${start} + ${target - start}`)
 
         // Should have beads in both ones and tens places
-        const places = new Set(
-          instruction.highlightBeads.map((b) => b.placeValue),
-        );
-        expect(places).toContain(0); // ones place
-        expect(places).toContain(1); // tens place
-      });
-    });
+        const places = new Set(instruction.highlightBeads.map((b) => b.placeValue))
+        expect(places).toContain(0) // ones place
+        expect(places).toContain(1) // tens place
+      })
+    })
 
-    it("should handle large numbers with multiple complements", () => {
-      const instruction = generateAbacusInstructions(87, 134);
+    it('should handle large numbers with multiple complements', () => {
+      const instruction = generateAbacusInstructions(87, 134)
 
       // 87 + 47 should break down by place value
-      expect(instruction.actionDescription).toContain("87 + 47");
+      expect(instruction.actionDescription).toContain('87 + 47')
 
       // Should have proper multi-step breakdown
-      expect(instruction.multiStepInstructions).toBeDefined();
-      expect(instruction.stepBeadHighlights).toBeDefined();
-    });
-  });
+      expect(instruction.multiStepInstructions).toBeDefined()
+      expect(instruction.stepBeadHighlights).toBeDefined()
+    })
+  })
 
-  describe("Regression Tests for Known Issues", () => {
-    it("should NOT generate unhelpful decompositions like (100 - 86)", () => {
-      const instruction = generateAbacusInstructions(3, 17);
+  describe('Regression Tests for Known Issues', () => {
+    it('should NOT generate unhelpful decompositions like (100 - 86)', () => {
+      const instruction = generateAbacusInstructions(3, 17)
 
       // Should NOT contain large complement subtractions
-      expect(instruction.actionDescription).not.toContain("(100 - 86)");
-      expect(instruction.actionDescription).not.toMatch(/\(100 - \d{2}\)/);
+      expect(instruction.actionDescription).not.toContain('(100 - 86)')
+      expect(instruction.actionDescription).not.toMatch(/\(100 - \d{2}\)/)
 
       // Should contain proper place-value breakdown
-      expect(instruction.actionDescription).toContain("10");
-      expect(instruction.actionDescription).toContain("(5 - 1)");
-    });
+      expect(instruction.actionDescription).toContain('10')
+      expect(instruction.actionDescription).toContain('(5 - 1)')
+    })
 
-    it("should ensure instruction text matches expected state calculations", () => {
-      const instruction = generateAbacusInstructions(56, 104);
+    it('should ensure instruction text matches expected state calculations', () => {
+      const instruction = generateAbacusInstructions(56, 104)
 
       if (instruction.multiStepInstructions && instruction.stepBeadHighlights) {
         // Verify that each instruction corresponds to correct expected state
         // This prevents the "impossible" state bug we fixed
-        expect(instruction.multiStepInstructions.length).toBeGreaterThan(0);
+        expect(instruction.multiStepInstructions.length).toBeGreaterThan(0)
 
         // Each step should have corresponding bead highlights
-        const stepIndices = new Set(
-          instruction.stepBeadHighlights.map((b) => b.stepIndex),
-        );
-        expect(stepIndices.size).toBe(instruction.multiStepInstructions.length);
+        const stepIndices = new Set(instruction.stepBeadHighlights.map((b) => b.stepIndex))
+        expect(stepIndices.size).toBe(instruction.multiStepInstructions.length)
       }
-    });
+    })
 
-    it("should maintain pedagogical ordering (highest place first)", () => {
-      const instruction = generateAbacusInstructions(99, 100);
+    it('should maintain pedagogical ordering (highest place first)', () => {
+      const instruction = generateAbacusInstructions(99, 100)
 
       if (instruction.multiStepInstructions) {
         // First instruction should involve hundreds place
-        expect(instruction.multiStepInstructions[0]).toMatch(/hundreds?/);
+        expect(instruction.multiStepInstructions[0]).toMatch(/hundreds?/)
 
         // Later instructions should involve lower places
-        const hasOnesInstruction = instruction.multiStepInstructions.some(
-          (inst) => inst.includes("ones"),
-        );
-        expect(hasOnesInstruction).toBe(true);
+        const hasOnesInstruction = instruction.multiStepInstructions.some((inst) =>
+          inst.includes('ones')
+        )
+        expect(hasOnesInstruction).toBe(true)
       }
-    });
+    })
 
-    it("should consolidate multiple beads in same step", () => {
-      const instruction = generateAbacusInstructions(56, 104);
+    it('should consolidate multiple beads in same step', () => {
+      const instruction = generateAbacusInstructions(56, 104)
 
       if (instruction.multiStepInstructions) {
         // Instructions should be consolidated (not individual bead references)
-        const hasConsolidatedInstruction =
-          instruction.multiStepInstructions.some(
-            (inst) =>
-              inst.includes("earth beads") || inst.includes("heaven bead"),
-          );
-        expect(hasConsolidatedInstruction).toBe(true);
+        const hasConsolidatedInstruction = instruction.multiStepInstructions.some(
+          (inst) => inst.includes('earth beads') || inst.includes('heaven bead')
+        )
+        expect(hasConsolidatedInstruction).toBe(true)
 
         // Should not have multiple separate instructions for same step
-        expect(instruction.multiStepInstructions.length).toBeLessThan(10);
+        expect(instruction.multiStepInstructions.length).toBeLessThan(10)
       }
-    });
-  });
+    })
+  })
 
-  describe("Decomposition Term Validation", () => {
-    it("should ensure all terms are mathematically valid", () => {
+  describe('Decomposition Term Validation', () => {
+    it('should ensure all terms are mathematically valid', () => {
       const testCases = [
         { start: 3, target: 17 },
         { start: 7, target: 11 },
         { start: 56, target: 104 },
         { start: 99, target: 100 },
-      ];
+      ]
 
       testCases.forEach(({ start, target }) => {
-        const instruction = generateAbacusInstructions(start, target);
-        const difference = target - start;
+        const instruction = generateAbacusInstructions(start, target)
+        const difference = target - start
 
         // Action description should include the correct operation
-        expect(instruction.actionDescription).toContain(
-          `${start} + ${difference}`,
-        );
-        expect(instruction.actionDescription).toContain(`= ${target}`);
-      });
-    });
+        expect(instruction.actionDescription).toContain(`${start} + ${difference}`)
+        expect(instruction.actionDescription).toContain(`= ${target}`)
+      })
+    })
 
-    it("should ensure bead count matches decomposition complexity", () => {
+    it('should ensure bead count matches decomposition complexity', () => {
       // Simple operations should have fewer beads
-      const simple = generateAbacusInstructions(1, 2);
-      expect(simple.highlightBeads.length).toBeLessThanOrEqual(2);
+      const simple = generateAbacusInstructions(1, 2)
+      expect(simple.highlightBeads.length).toBeLessThanOrEqual(2)
 
       // Complex operations should have more beads
-      const complex = generateAbacusInstructions(87, 134);
-      expect(complex.highlightBeads.length).toBeGreaterThan(2);
-    });
+      const complex = generateAbacusInstructions(87, 134)
+      expect(complex.highlightBeads.length).toBeGreaterThan(2)
+    })
 
-    it("should validate step bead mapping consistency", () => {
-      const instruction = generateAbacusInstructions(3, 17);
+    it('should validate step bead mapping consistency', () => {
+      const instruction = generateAbacusInstructions(3, 17)
 
       if (instruction.stepBeadHighlights && instruction.multiStepInstructions) {
         // Total step bead highlights should match total highlights
-        expect(instruction.stepBeadHighlights.length).toBe(
-          instruction.highlightBeads.length,
-        );
+        expect(instruction.stepBeadHighlights.length).toBe(instruction.highlightBeads.length)
 
         // Each step index should be valid
         instruction.stepBeadHighlights.forEach((bead) => {
-          expect(bead.stepIndex).toBeGreaterThanOrEqual(0);
-          expect(bead.stepIndex).toBeLessThan(
-            instruction.multiStepInstructions!.length,
-          );
-        });
+          expect(bead.stepIndex).toBeGreaterThanOrEqual(0)
+          expect(bead.stepIndex).toBeLessThan(instruction.multiStepInstructions!.length)
+        })
       }
-    });
-  });
+    })
+  })
 
-  describe("Performance and Consistency", () => {
-    it("should generate consistent results for equivalent problems", () => {
+  describe('Performance and Consistency', () => {
+    it('should generate consistent results for equivalent problems', () => {
       // Same structure in different decades should have same pattern
-      const pattern3Plus14 = generateAbacusInstructions(3, 17);
-      const pattern13Plus14 = generateAbacusInstructions(13, 27);
+      const pattern3Plus14 = generateAbacusInstructions(3, 17)
+      const pattern13Plus14 = generateAbacusInstructions(13, 27)
 
       // Both should use similar decomposition patterns
-      expect(pattern3Plus14.expectedAction).toBe(
-        pattern13Plus14.expectedAction,
-      );
+      expect(pattern3Plus14.expectedAction).toBe(pattern13Plus14.expectedAction)
 
-      if (
-        pattern3Plus14.multiStepInstructions &&
-        pattern13Plus14.multiStepInstructions
-      ) {
+      if (pattern3Plus14.multiStepInstructions && pattern13Plus14.multiStepInstructions) {
         expect(pattern3Plus14.multiStepInstructions.length).toBe(
-          pattern13Plus14.multiStepInstructions.length,
-        );
+          pattern13Plus14.multiStepInstructions.length
+        )
       }
-    });
+    })
 
-    it("should handle all numbers 0-999 without errors", () => {
+    it('should handle all numbers 0-999 without errors', () => {
       // Spot check various ranges
       const testCases = [
         [0, 9],
@@ -318,19 +285,19 @@ describe("Pedagogical Decomposition", () => {
         [100, 109],
         [500, 509],
         [990, 999],
-      ];
+      ]
 
       testCases.forEach(([start, end]) => {
         for (let i = start; i <= Math.min(end, start + 3); i++) {
-          const target = Math.min(i + Math.floor(Math.random() * 10) + 1, 999);
+          const target = Math.min(i + Math.floor(Math.random() * 10) + 1, 999)
 
           expect(() => {
-            const instruction = generateAbacusInstructions(i, target);
-            expect(instruction.actionDescription).toBeDefined();
-            expect(instruction.highlightBeads).toBeDefined();
-          }).not.toThrow();
+            const instruction = generateAbacusInstructions(i, target)
+            expect(instruction.actionDescription).toBeDefined()
+            expect(instruction.highlightBeads).toBeDefined()
+          }).not.toThrow()
         }
-      });
-    });
-  });
-});
+      })
+    })
+  })
+})
diff --git a/apps/web/src/utils/test/stepIndexRegression.test.ts b/apps/web/src/utils/test/stepIndexRegression.test.ts
index 3c149f92..9667a23e 100644
--- a/apps/web/src/utils/test/stepIndexRegression.test.ts
+++ b/apps/web/src/utils/test/stepIndexRegression.test.ts
@@ -1,5 +1,5 @@
-import { describe, expect, it } from "vitest";
-import { calculateBeadDiffFromValues } from "../beadDiff";
+import { describe, expect, it } from 'vitest'
+import { calculateBeadDiffFromValues } from '../beadDiff'
 
 /**
  * REGRESSION TEST: Prevent stepIndex mismatch in multi-step sequences
@@ -12,22 +12,22 @@ import { calculateBeadDiffFromValues } from "../beadDiff";
  * Key requirement: When generating StepBeadHighlight objects from bead diffs,
  * the stepIndex must match the currentMultiStep to ensure arrows appear.
  */
-describe("StepIndex Regression Prevention", () => {
-  it("should prevent stepIndex mismatch in multi-step arrow display", () => {
+describe('StepIndex Regression Prevention', () => {
+  it('should prevent stepIndex mismatch in multi-step arrow display', () => {
     // This test simulates the exact scenario that caused the bug:
     // Multi-step sequence where currentMultiStep > 0
 
-    const fromValue = 199; // After completing first step (3 + 196 = 199)
-    const toValue = 109; // Second step target (199 - 90 = 109)
-    const currentMultiStep = 1; // We're on the second step (index 1)
+    const fromValue = 199 // After completing first step (3 + 196 = 199)
+    const toValue = 109 // Second step target (199 - 90 = 109)
+    const currentMultiStep = 1 // We're on the second step (index 1)
 
     // Calculate the bead diff (this part was working correctly)
-    const beadDiff = calculateBeadDiffFromValues(fromValue, toValue);
+    const beadDiff = calculateBeadDiffFromValues(fromValue, toValue)
 
     // Verify the calculation produces the expected changes
-    expect(beadDiff.hasChanges).toBe(true);
-    expect(beadDiff.changes.length).toBeGreaterThan(0);
-    expect(beadDiff.summary).toContain("remove"); // Should be removing beads for 199 → 109
+    expect(beadDiff.hasChanges).toBe(true)
+    expect(beadDiff.changes.length).toBeGreaterThan(0)
+    expect(beadDiff.summary).toContain('remove') // Should be removing beads for 199 → 109
 
     // This is the critical test: Simulate how TutorialPlayer.tsx converts
     // bead diff to StepBeadHighlight format
@@ -38,41 +38,41 @@ describe("StepIndex Regression Prevention", () => {
       direction: change.direction,
       stepIndex: currentMultiStep, // ✅ MUST be currentMultiStep, not hardcoded 0
       order: change.order,
-    }));
+    }))
 
     // Verify that ALL generated highlights have the correct stepIndex
     stepBeadHighlights.forEach((highlight) => {
-      expect(highlight.stepIndex).toBe(currentMultiStep);
-      expect(highlight.stepIndex).not.toBe(0); // Prevent hardcoding to 0
-    });
+      expect(highlight.stepIndex).toBe(currentMultiStep)
+      expect(highlight.stepIndex).not.toBe(0) // Prevent hardcoding to 0
+    })
 
     // Simulate AbacusReact's getBeadStepHighlight filtering logic
     // This is what was failing before the fix
-    const currentStep = currentMultiStep; // AbacusReact receives currentStep={currentMultiStep}
+    const currentStep = currentMultiStep // AbacusReact receives currentStep={currentMultiStep}
 
     stepBeadHighlights.forEach((highlight) => {
       // This is the exact logic from AbacusReact.tsx:675
-      const isCurrentStep = highlight.stepIndex === currentStep;
-      const shouldShowArrow = isCurrentStep; // Only show arrows for current step
+      const isCurrentStep = highlight.stepIndex === currentStep
+      const shouldShowArrow = isCurrentStep // Only show arrows for current step
 
       // Before the fix, this would be false for all highlights when currentMultiStep > 0
-      expect(shouldShowArrow).toBe(true);
+      expect(shouldShowArrow).toBe(true)
 
       // Verify direction is preserved for current step
       if (isCurrentStep) {
-        expect(highlight.direction).toBeDefined();
-        expect(["activate", "deactivate"]).toContain(highlight.direction);
+        expect(highlight.direction).toBeDefined()
+        expect(['activate', 'deactivate']).toContain(highlight.direction)
       }
-    });
-  });
+    })
+  })
 
-  it("should work correctly for first step (currentMultiStep = 0)", () => {
+  it('should work correctly for first step (currentMultiStep = 0)', () => {
     // Verify the fix doesn't break the first step
-    const fromValue = 3;
-    const toValue = 199;
-    const currentMultiStep = 0;
+    const fromValue = 3
+    const toValue = 199
+    const currentMultiStep = 0
 
-    const beadDiff = calculateBeadDiffFromValues(fromValue, toValue);
+    const beadDiff = calculateBeadDiffFromValues(fromValue, toValue)
 
     const stepBeadHighlights = beadDiff.changes.map((change) => ({
       placeValue: change.placeValue,
@@ -81,29 +81,29 @@ describe("StepIndex Regression Prevention", () => {
       direction: change.direction,
       stepIndex: currentMultiStep,
       order: change.order,
-    }));
+    }))
 
     stepBeadHighlights.forEach((highlight) => {
-      expect(highlight.stepIndex).toBe(0); // Should be 0 for first step
+      expect(highlight.stepIndex).toBe(0) // Should be 0 for first step
 
       // Verify arrows show for first step
-      const currentStep = currentMultiStep;
-      const isCurrentStep = highlight.stepIndex === currentStep;
-      expect(isCurrentStep).toBe(true);
-    });
-  });
+      const currentStep = currentMultiStep
+      const isCurrentStep = highlight.stepIndex === currentStep
+      expect(isCurrentStep).toBe(true)
+    })
+  })
 
-  it("should work correctly for any arbitrary step index", () => {
+  it('should work correctly for any arbitrary step index', () => {
     // Test with various step indices to ensure the pattern holds
     const testCases = [
       { currentMultiStep: 0, fromValue: 0, toValue: 5 },
       { currentMultiStep: 1, fromValue: 5, toValue: 15 },
       { currentMultiStep: 2, fromValue: 15, toValue: 20 },
       { currentMultiStep: 3, fromValue: 20, toValue: 25 },
-    ];
+    ]
 
     testCases.forEach(({ currentMultiStep, fromValue, toValue }) => {
-      const beadDiff = calculateBeadDiffFromValues(fromValue, toValue);
+      const beadDiff = calculateBeadDiffFromValues(fromValue, toValue)
 
       if (beadDiff.hasChanges) {
         const stepBeadHighlights = beadDiff.changes.map((change) => ({
@@ -113,63 +113,63 @@ describe("StepIndex Regression Prevention", () => {
           direction: change.direction,
           stepIndex: currentMultiStep,
           order: change.order,
-        }));
+        }))
 
         stepBeadHighlights.forEach((highlight) => {
-          expect(highlight.stepIndex).toBe(currentMultiStep);
+          expect(highlight.stepIndex).toBe(currentMultiStep)
 
           // Simulate AbacusReact filtering
-          const currentStep = currentMultiStep;
-          const isCurrentStep = highlight.stepIndex === currentStep;
-          expect(isCurrentStep).toBe(true);
-        });
+          const currentStep = currentMultiStep
+          const isCurrentStep = highlight.stepIndex === currentStep
+          expect(isCurrentStep).toBe(true)
+        })
       }
-    });
-  });
+    })
+  })
 
-  it("should document the exact getBeadStepHighlight logic from AbacusReact", () => {
+  it('should document the exact getBeadStepHighlight logic from AbacusReact', () => {
     // This test documents the filtering logic from AbacusReact.tsx
     // to make the dependency clear and prevent future mismatches
 
     const mockStepBeadHighlights = [
       {
         stepIndex: 0,
-        direction: "activate",
+        direction: 'activate',
         placeValue: 0,
-        beadType: "earth" as const,
+        beadType: 'earth' as const,
       },
       {
         stepIndex: 1,
-        direction: "deactivate",
+        direction: 'deactivate',
         placeValue: 1,
-        beadType: "heaven" as const,
+        beadType: 'heaven' as const,
       },
       {
         stepIndex: 2,
-        direction: "activate",
+        direction: 'activate',
         placeValue: 2,
-        beadType: "earth" as const,
+        beadType: 'earth' as const,
       },
-    ];
+    ]
 
     // Test each step index
-    const stepIndices = [0, 1, 2];
+    const stepIndices = [0, 1, 2]
     stepIndices.forEach((currentStep) => {
       mockStepBeadHighlights.forEach((highlight) => {
         // This is the exact logic from getBeadStepHighlight in AbacusReact.tsx:675
-        const isCurrentStep = highlight.stepIndex === currentStep;
-        const isCompleted = highlight.stepIndex < currentStep;
-        const _isHighlighted = isCurrentStep || isCompleted;
-        const direction = isCurrentStep ? highlight.direction : undefined;
+        const isCurrentStep = highlight.stepIndex === currentStep
+        const isCompleted = highlight.stepIndex < currentStep
+        const _isHighlighted = isCurrentStep || isCompleted
+        const direction = isCurrentStep ? highlight.direction : undefined
 
         if (highlight.stepIndex === currentStep) {
-          expect(isCurrentStep).toBe(true);
-          expect(direction).toBe(highlight.direction); // Arrows only show for current step
+          expect(isCurrentStep).toBe(true)
+          expect(direction).toBe(highlight.direction) // Arrows only show for current step
         } else {
-          expect(isCurrentStep).toBe(false);
-          expect(direction).toBeUndefined(); // No arrows for other steps
+          expect(isCurrentStep).toBe(false)
+          expect(direction).toBeUndefined() // No arrows for other steps
         }
-      });
-    });
-  });
-});
+      })
+    })
+  })
+})
diff --git a/apps/web/src/utils/test/unifiedStepGenerator.test.ts b/apps/web/src/utils/test/unifiedStepGenerator.test.ts
index 6aec10ad..edd841dc 100644
--- a/apps/web/src/utils/test/unifiedStepGenerator.test.ts
+++ b/apps/web/src/utils/test/unifiedStepGenerator.test.ts
@@ -1,196 +1,191 @@
-import { describe, expect, it } from "vitest";
-import { generateUnifiedInstructionSequence } from "../unifiedStepGenerator";
+import { describe, expect, it } from 'vitest'
+import { generateUnifiedInstructionSequence } from '../unifiedStepGenerator'
 
-describe("Unified Step Generator", () => {
-  it("should generate consistent step data for 3 + 14 = 17", () => {
-    const sequence = generateUnifiedInstructionSequence(3, 17);
+describe('Unified Step Generator', () => {
+  it('should generate consistent step data for 3 + 14 = 17', () => {
+    const sequence = generateUnifiedInstructionSequence(3, 17)
 
     // Check overall decomposition
-    expect(sequence.fullDecomposition).toContain("3 + 14 = 3 +");
-    expect(sequence.fullDecomposition).toContain("= 17");
-    expect(sequence.startValue).toBe(3);
-    expect(sequence.targetValue).toBe(17);
+    expect(sequence.fullDecomposition).toContain('3 + 14 = 3 +')
+    expect(sequence.fullDecomposition).toContain('= 17')
+    expect(sequence.startValue).toBe(3)
+    expect(sequence.targetValue).toBe(17)
 
     // Should have multiple steps
-    expect(sequence.steps.length).toBeGreaterThan(1);
+    expect(sequence.steps.length).toBeGreaterThan(1)
 
     // Each step should be valid
     sequence.steps.forEach((step, index) => {
-      expect(step.isValid).toBe(true);
-      expect(step.stepIndex).toBe(index);
-      expect(step.mathematicalTerm).toBeDefined();
-      expect(step.englishInstruction).toBeDefined();
-      expect(step.expectedValue).toBeGreaterThan(3);
-      expect(step.expectedValue).toBeLessThanOrEqual(17);
-      expect(step.beadMovements.length).toBeGreaterThan(0);
-    });
+      expect(step.isValid).toBe(true)
+      expect(step.stepIndex).toBe(index)
+      expect(step.mathematicalTerm).toBeDefined()
+      expect(step.englishInstruction).toBeDefined()
+      expect(step.expectedValue).toBeGreaterThan(3)
+      expect(step.expectedValue).toBeLessThanOrEqual(17)
+      expect(step.beadMovements.length).toBeGreaterThan(0)
+    })
 
     // Steps should progress logically
-    expect(sequence.steps[0].expectedValue).toBeGreaterThan(3);
-    expect(sequence.steps[sequence.steps.length - 1].expectedValue).toBe(17);
+    expect(sequence.steps[0].expectedValue).toBeGreaterThan(3)
+    expect(sequence.steps[sequence.steps.length - 1].expectedValue).toBe(17)
 
-    console.log("3 + 14 = 17 Unified Sequence:");
-    console.log("Full decomposition:", sequence.fullDecomposition);
+    console.log('3 + 14 = 17 Unified Sequence:')
+    console.log('Full decomposition:', sequence.fullDecomposition)
     sequence.steps.forEach((step, i) => {
-      console.log(`Step ${i + 1}:`);
-      console.log(`  Math term: ${step.mathematicalTerm}`);
-      console.log(`  Instruction: ${step.englishInstruction}`);
-      console.log(`  Expected value: ${step.expectedValue}`);
-      console.log(`  Bead movements: ${step.beadMovements.length}`);
-    });
-  });
+      console.log(`Step ${i + 1}:`)
+      console.log(`  Math term: ${step.mathematicalTerm}`)
+      console.log(`  Instruction: ${step.englishInstruction}`)
+      console.log(`  Expected value: ${step.expectedValue}`)
+      console.log(`  Bead movements: ${step.beadMovements.length}`)
+    })
+  })
 
-  it("should generate consistent step data for 7 + 4 = 11 (ten complement)", () => {
-    const sequence = generateUnifiedInstructionSequence(7, 11);
+  it('should generate consistent step data for 7 + 4 = 11 (ten complement)', () => {
+    const sequence = generateUnifiedInstructionSequence(7, 11)
 
-    expect(sequence.fullDecomposition).toContain("7 + 4 = 7 +");
-    expect(sequence.fullDecomposition).toContain("= 11");
+    expect(sequence.fullDecomposition).toContain('7 + 4 = 7 +')
+    expect(sequence.fullDecomposition).toContain('= 11')
 
     // Should have steps involving both tens and ones places
-    const allMovements = sequence.steps.flatMap((step) => step.beadMovements);
-    const places = new Set(allMovements.map((movement) => movement.placeValue));
-    expect(places).toContain(0); // ones place
-    expect(places).toContain(1); // tens place
+    const allMovements = sequence.steps.flatMap((step) => step.beadMovements)
+    const places = new Set(allMovements.map((movement) => movement.placeValue))
+    expect(places).toContain(0) // ones place
+    expect(places).toContain(1) // tens place
 
     // Each step should be valid and consistent
     sequence.steps.forEach((step) => {
-      expect(step.isValid).toBe(true);
-      expect(step.validationIssues).toEqual([]);
-    });
+      expect(step.isValid).toBe(true)
+      expect(step.validationIssues).toEqual([])
+    })
 
-    console.log("7 + 4 = 11 Unified Sequence:");
-    console.log("Full decomposition:", sequence.fullDecomposition);
+    console.log('7 + 4 = 11 Unified Sequence:')
+    console.log('Full decomposition:', sequence.fullDecomposition)
     sequence.steps.forEach((step, i) => {
-      console.log(`Step ${i + 1}:`);
-      console.log(`  Math term: ${step.mathematicalTerm}`);
-      console.log(`  Instruction: ${step.englishInstruction}`);
-      console.log(`  Expected value: ${step.expectedValue}`);
+      console.log(`Step ${i + 1}:`)
+      console.log(`  Math term: ${step.mathematicalTerm}`)
+      console.log(`  Instruction: ${step.englishInstruction}`)
+      console.log(`  Expected value: ${step.expectedValue}`)
       console.log(
-        `  Movements: ${step.beadMovements.map((m) => `${m.placeValue}:${m.beadType}:${m.direction}`).join(", ")}`,
-      );
-    });
-  });
+        `  Movements: ${step.beadMovements.map((m) => `${m.placeValue}:${m.beadType}:${m.direction}`).join(', ')}`
+      )
+    })
+  })
 
-  it("should ensure perfect consistency between all aspects", () => {
+  it('should ensure perfect consistency between all aspects', () => {
     const testCases = [
       { start: 3, target: 17 },
       { start: 7, target: 11 },
       { start: 2, target: 5 },
       { start: 56, target: 104 },
-    ];
+    ]
 
     testCases.forEach(({ start, target }) => {
-      const sequence = generateUnifiedInstructionSequence(start, target);
+      const sequence = generateUnifiedInstructionSequence(start, target)
 
       // All steps must be valid (no inconsistencies)
       sequence.steps.forEach((step, index) => {
-        expect(step.isValid).toBe(true);
+        expect(step.isValid).toBe(true)
 
         if (!step.isValid) {
           console.error(
             `Step ${index} validation failed for ${start} + ${target - start}:`,
-            step.validationIssues,
-          );
+            step.validationIssues
+          )
         }
-      });
+      })
 
       // Final step should reach target value
-      const lastStep = sequence.steps[sequence.steps.length - 1];
-      expect(lastStep.expectedValue).toBe(target);
+      const lastStep = sequence.steps[sequence.steps.length - 1]
+      expect(lastStep.expectedValue).toBe(target)
 
       // No step should have impossible expected values
       sequence.steps.forEach((step) => {
-        expect(step.expectedValue).toBeGreaterThanOrEqual(0);
-        expect(step.expectedValue).toBeLessThan(10000); // reasonable bounds
-      });
-    });
-  });
+        expect(step.expectedValue).toBeGreaterThanOrEqual(0)
+        expect(step.expectedValue).toBeLessThan(10000) // reasonable bounds
+      })
+    })
+  })
 
-  it("should maintain pedagogical ordering", () => {
-    const sequence = generateUnifiedInstructionSequence(99, 100);
+  it('should maintain pedagogical ordering', () => {
+    const sequence = generateUnifiedInstructionSequence(99, 100)
 
     // Should process highest place values first
-    const firstStepMovements = sequence.steps[0].beadMovements;
-    const firstStepPlaces = firstStepMovements.map((m) => m.placeValue);
+    const firstStepMovements = sequence.steps[0].beadMovements
+    const firstStepPlaces = firstStepMovements.map((m) => m.placeValue)
 
     // First step should involve hundreds place for 99 + 1
-    expect(firstStepPlaces).toContain(2); // hundreds place
+    expect(firstStepPlaces).toContain(2) // hundreds place
 
-    console.log("99 + 1 = 100 Unified Sequence:");
-    console.log("Full decomposition:", sequence.fullDecomposition);
+    console.log('99 + 1 = 100 Unified Sequence:')
+    console.log('Full decomposition:', sequence.fullDecomposition)
     sequence.steps.forEach((step, i) => {
-      console.log(`Step ${i + 1}:`);
-      console.log(`  Math term: ${step.mathematicalTerm}`);
-      console.log(`  Instruction: ${step.englishInstruction}`);
-      console.log(`  Expected value: ${step.expectedValue}`);
-    });
-  });
+      console.log(`Step ${i + 1}:`)
+      console.log(`  Math term: ${step.mathematicalTerm}`)
+      console.log(`  Instruction: ${step.englishInstruction}`)
+      console.log(`  Expected value: ${step.expectedValue}`)
+    })
+  })
 
-  it("should handle edge cases without errors", () => {
+  it('should handle edge cases without errors', () => {
     const edgeCases = [
       { start: 0, target: 1 },
       { start: 4, target: 5 },
       { start: 9, target: 10 },
       { start: 99, target: 100 },
-    ];
+    ]
 
     edgeCases.forEach(({ start, target }) => {
       expect(() => {
-        const sequence = generateUnifiedInstructionSequence(start, target);
-        expect(sequence.steps.length).toBeGreaterThan(0);
-        expect(sequence.steps.every((step) => step.isValid)).toBe(true);
-      }).not.toThrow();
-    });
-  });
+        const sequence = generateUnifiedInstructionSequence(start, target)
+        expect(sequence.steps.length).toBeGreaterThan(0)
+        expect(sequence.steps.every((step) => step.isValid)).toBe(true)
+      }).not.toThrow()
+    })
+  })
 
-  it("should generate correct term positions for precise highlighting", () => {
-    const sequence = generateUnifiedInstructionSequence(3, 17);
+  it('should generate correct term positions for precise highlighting', () => {
+    const sequence = generateUnifiedInstructionSequence(3, 17)
 
     // Full decomposition should be "3 + 14 = 3 + 10 + (5 - 1) = 17"
-    expect(sequence.fullDecomposition).toBe("3 + 14 = 3 + 10 + (5 - 1) = 17");
+    expect(sequence.fullDecomposition).toBe('3 + 14 = 3 + 10 + (5 - 1) = 17')
 
     // Each step should have valid position information
     sequence.steps.forEach((step, index) => {
-      expect(step.termPosition).toBeDefined();
-      expect(step.termPosition.startIndex).toBeGreaterThanOrEqual(0);
-      expect(step.termPosition.endIndex).toBeGreaterThan(
-        step.termPosition.startIndex,
-      );
+      expect(step.termPosition).toBeDefined()
+      expect(step.termPosition.startIndex).toBeGreaterThanOrEqual(0)
+      expect(step.termPosition.endIndex).toBeGreaterThan(step.termPosition.startIndex)
 
       // Extract the term using the position and verify it matches
-      const { startIndex, endIndex } = step.termPosition;
-      const extractedTerm = sequence.fullDecomposition.substring(
-        startIndex,
-        endIndex,
-      );
-      expect(extractedTerm).toBe(step.mathematicalTerm);
+      const { startIndex, endIndex } = step.termPosition
+      const extractedTerm = sequence.fullDecomposition.substring(startIndex, endIndex)
+      expect(extractedTerm).toBe(step.mathematicalTerm)
 
       console.log(
-        `Step ${index + 1}: "${step.mathematicalTerm}" at position ${startIndex}-${endIndex} = "${extractedTerm}"`,
-      );
-    });
+        `Step ${index + 1}: "${step.mathematicalTerm}" at position ${startIndex}-${endIndex} = "${extractedTerm}"`
+      )
+    })
 
     // Verify specific positions for known case "3 + 14 = 3 + 10 + (5 - 1) = 17"
     //                                             0123456789012345678901234567890123456
     //                                             0         1         2         3
     // First step should be "10" at position around 13-15
-    const firstStep = sequence.steps[0];
-    expect(firstStep.mathematicalTerm).toBe("10");
+    const firstStep = sequence.steps[0]
+    expect(firstStep.mathematicalTerm).toBe('10')
     expect(
       sequence.fullDecomposition.substring(
         firstStep.termPosition.startIndex,
-        firstStep.termPosition.endIndex,
-      ),
-    ).toBe("10");
+        firstStep.termPosition.endIndex
+      )
+    ).toBe('10')
 
     // Second step should be "(5 - 1)" at position around 18-25
-    const secondStep = sequence.steps[1];
-    expect(secondStep.mathematicalTerm).toBe("(5 - 1)");
+    const secondStep = sequence.steps[1]
+    expect(secondStep.mathematicalTerm).toBe('(5 - 1)')
     expect(
       sequence.fullDecomposition.substring(
         secondStep.termPosition.startIndex,
-        secondStep.termPosition.endIndex,
-      ),
-    ).toBe("(5 - 1)");
-  });
-});
+        secondStep.termPosition.endIndex
+      )
+    ).toBe('(5 - 1)')
+  })
+})
diff --git a/apps/web/src/utils/themedWords.ts b/apps/web/src/utils/themedWords.ts
index e46c857a..5cca47d9 100644
--- a/apps/web/src/utils/themedWords.ts
+++ b/apps/web/src/utils/themedWords.ts
@@ -6,13 +6,13 @@
  */
 
 export interface ThemedWordList {
-  adjectives: string[];
-  nouns: string[];
+  adjectives: string[]
+  nouns: string[]
 }
 
 export interface AvatarTheme {
-  category: string;
-  words: ThemedWordList;
+  category: string
+  words: ThemedWordList
 }
 
 /**
@@ -23,2703 +23,2703 @@ export const THEMED_WORD_LISTS: Record<string, ThemedWordList> = {
   // === ABACUS ===
   abacus: {
     adjectives: [
-      "Ancient",
-      "Wooden",
-      "Sliding",
-      "Decimal",
-      "Binary",
-      "Counting",
-      "Soroban",
-      "Chinese",
-      "Japanese",
-      "Nimble",
-      "Clicking",
-      "Beaded",
-      "Columnar",
-      "Vertical",
-      "Horizontal",
-      "Upper",
-      "Lower",
-      "Heaven",
-      "Earth",
-      "Golden",
-      "Jade",
-      "Bamboo",
-      "Polished",
-      "Skilled",
-      "Master",
-      "Adding",
-      "Subtracting",
-      "Multiplying",
-      "Dividing",
-      "Calculating",
-      "Computing",
-      "Precise",
-      "Accurate",
-      "Lightning",
-      "Rapid",
+      'Ancient',
+      'Wooden',
+      'Sliding',
+      'Decimal',
+      'Binary',
+      'Counting',
+      'Soroban',
+      'Chinese',
+      'Japanese',
+      'Nimble',
+      'Clicking',
+      'Beaded',
+      'Columnar',
+      'Vertical',
+      'Horizontal',
+      'Upper',
+      'Lower',
+      'Heaven',
+      'Earth',
+      'Golden',
+      'Jade',
+      'Bamboo',
+      'Polished',
+      'Skilled',
+      'Master',
+      'Adding',
+      'Subtracting',
+      'Multiplying',
+      'Dividing',
+      'Calculating',
+      'Computing',
+      'Precise',
+      'Accurate',
+      'Lightning',
+      'Rapid',
     ],
     nouns: [
-      "Counter",
-      "Abacist",
-      "Calculator",
-      "Bead",
-      "Rod",
-      "Frame",
-      "Slider",
-      "Merchant",
-      "Trader",
-      "Accountant",
-      "Bookkeeper",
-      "Clerk",
-      "Scribe",
-      "Master",
-      "Apprentice",
-      "Scholar",
-      "Student",
-      "Teacher",
-      "Sensei",
-      "Guru",
-      "Expert",
-      "Virtuoso",
-      "Prodigy",
-      "Wizard",
-      "Sage",
-      "Adder",
-      "Multiplier",
-      "Divider",
-      "Solver",
-      "Mathematician",
-      "Arithmetician",
-      "Analyst",
-      "Computer",
-      "Reckoner",
+      'Counter',
+      'Abacist',
+      'Calculator',
+      'Bead',
+      'Rod',
+      'Frame',
+      'Slider',
+      'Merchant',
+      'Trader',
+      'Accountant',
+      'Bookkeeper',
+      'Clerk',
+      'Scribe',
+      'Master',
+      'Apprentice',
+      'Scholar',
+      'Student',
+      'Teacher',
+      'Sensei',
+      'Guru',
+      'Expert',
+      'Virtuoso',
+      'Prodigy',
+      'Wizard',
+      'Sage',
+      'Adder',
+      'Multiplier',
+      'Divider',
+      'Solver',
+      'Mathematician',
+      'Arithmetician',
+      'Analyst',
+      'Computer',
+      'Reckoner',
     ],
   },
 
   // === HAPPY FACES (😀😃😄😁😆😅🤣😂🙂😉😊😇) ===
   happyFaces: {
     adjectives: [
-      "Cheerful",
-      "Joyful",
-      "Gleeful",
-      "Merry",
-      "Bright",
-      "Sunny",
-      "Radiant",
-      "Beaming",
-      "Grinning",
-      "Smiling",
-      "Laughing",
-      "Giggling",
-      "Chuckling",
-      "Jolly",
-      "Bubbly",
-      "Peppy",
-      "Perky",
-      "Chipper",
-      "Upbeat",
-      "Lively",
-      "Spirited",
-      "Vibrant",
-      "Exuberant",
-      "Jubilant",
-      "Ecstatic",
+      'Cheerful',
+      'Joyful',
+      'Gleeful',
+      'Merry',
+      'Bright',
+      'Sunny',
+      'Radiant',
+      'Beaming',
+      'Grinning',
+      'Smiling',
+      'Laughing',
+      'Giggling',
+      'Chuckling',
+      'Jolly',
+      'Bubbly',
+      'Peppy',
+      'Perky',
+      'Chipper',
+      'Upbeat',
+      'Lively',
+      'Spirited',
+      'Vibrant',
+      'Exuberant',
+      'Jubilant',
+      'Ecstatic',
     ],
     nouns: [
-      "Optimist",
-      "Smiler",
-      "Grinner",
-      "Laugher",
-      "Giggler",
-      "Jokester",
-      "Comedian",
-      "Entertainer",
-      "Cheerleader",
-      "Motivator",
-      "Inspirer",
-      "Brightener",
-      "Sunshine",
-      "Rainbow",
-      "Spark",
-      "Beacon",
-      "Light",
-      "Champ",
-      "Winner",
-      "Star",
-      "Buddy",
-      "Friend",
-      "Pal",
-      "Companion",
+      'Optimist',
+      'Smiler',
+      'Grinner',
+      'Laugher',
+      'Giggler',
+      'Jokester',
+      'Comedian',
+      'Entertainer',
+      'Cheerleader',
+      'Motivator',
+      'Inspirer',
+      'Brightener',
+      'Sunshine',
+      'Rainbow',
+      'Spark',
+      'Beacon',
+      'Light',
+      'Champ',
+      'Winner',
+      'Star',
+      'Buddy',
+      'Friend',
+      'Pal',
+      'Companion',
     ],
   },
 
   // === LOVE & AFFECTION (🥰😍🤩😘😗😚) ===
   loveAndAffection: {
     adjectives: [
-      "Loving",
-      "Caring",
-      "Tender",
-      "Sweet",
-      "Affectionate",
-      "Warm",
-      "Gentle",
-      "Kind",
-      "Compassionate",
-      "Devoted",
-      "Adoring",
-      "Cherishing",
-      "Doting",
-      "Romantic",
-      "Passionate",
-      "Heart-eyed",
-      "Starry-eyed",
-      "Smitten",
-      "Charming",
-      "Endearing",
-      "Delightful",
-      "Adorable",
-      "Precious",
+      'Loving',
+      'Caring',
+      'Tender',
+      'Sweet',
+      'Affectionate',
+      'Warm',
+      'Gentle',
+      'Kind',
+      'Compassionate',
+      'Devoted',
+      'Adoring',
+      'Cherishing',
+      'Doting',
+      'Romantic',
+      'Passionate',
+      'Heart-eyed',
+      'Starry-eyed',
+      'Smitten',
+      'Charming',
+      'Endearing',
+      'Delightful',
+      'Adorable',
+      'Precious',
     ],
     nouns: [
-      "Sweetheart",
-      "Darling",
-      "Beloved",
-      "Admirer",
-      "Romantic",
-      "Lover",
-      "Charmer",
-      "Cupid",
-      "Heart",
-      "Angel",
-      "Treasure",
-      "Gem",
-      "Pearl",
-      "Dreamboat",
-      "Heartthrob",
-      "Cutie",
-      "Honey",
-      "Sugarplum",
-      "Buttercup",
-      "Valentine",
-      "Soulmate",
-      "Companion",
-      "Partner",
+      'Sweetheart',
+      'Darling',
+      'Beloved',
+      'Admirer',
+      'Romantic',
+      'Lover',
+      'Charmer',
+      'Cupid',
+      'Heart',
+      'Angel',
+      'Treasure',
+      'Gem',
+      'Pearl',
+      'Dreamboat',
+      'Heartthrob',
+      'Cutie',
+      'Honey',
+      'Sugarplum',
+      'Buttercup',
+      'Valentine',
+      'Soulmate',
+      'Companion',
+      'Partner',
     ],
   },
 
   // === PLAYFUL (😋😛😝😜🤪) ===
   playful: {
     adjectives: [
-      "Playful",
-      "Silly",
-      "Goofy",
-      "Wacky",
-      "Zany",
-      "Quirky",
-      "Whimsical",
-      "Mischievous",
-      "Cheeky",
-      "Sassy",
-      "Impish",
-      "Teasing",
-      "Joking",
-      "Fun-loving",
-      "Carefree",
-      "Wild",
-      "Crazy",
-      "Nutty",
-      "Loopy",
-      "Bonkers",
-      "Ridiculous",
-      "Absurd",
-      "Hilarious",
-      "Amusing",
+      'Playful',
+      'Silly',
+      'Goofy',
+      'Wacky',
+      'Zany',
+      'Quirky',
+      'Whimsical',
+      'Mischievous',
+      'Cheeky',
+      'Sassy',
+      'Impish',
+      'Teasing',
+      'Joking',
+      'Fun-loving',
+      'Carefree',
+      'Wild',
+      'Crazy',
+      'Nutty',
+      'Loopy',
+      'Bonkers',
+      'Ridiculous',
+      'Absurd',
+      'Hilarious',
+      'Amusing',
     ],
     nouns: [
-      "Jester",
-      "Clown",
-      "Prankster",
-      "Trickster",
-      "Imp",
-      "Rascal",
-      "Scamp",
-      "Goofball",
-      "Nutcase",
-      "Wildcard",
-      "Joker",
-      "Goofster",
-      "Silly-billy",
-      "Cutup",
-      "Character",
-      "Card",
-      "Comedian",
-      "Entertainer",
-      "Performer",
-      "Funster",
-      "Merrymaker",
-      "Reveler",
-      "Buffoon",
+      'Jester',
+      'Clown',
+      'Prankster',
+      'Trickster',
+      'Imp',
+      'Rascal',
+      'Scamp',
+      'Goofball',
+      'Nutcase',
+      'Wildcard',
+      'Joker',
+      'Goofster',
+      'Silly-billy',
+      'Cutup',
+      'Character',
+      'Card',
+      'Comedian',
+      'Entertainer',
+      'Performer',
+      'Funster',
+      'Merrymaker',
+      'Reveler',
+      'Buffoon',
     ],
   },
 
   // === CLEVER (🤨🧐🤓) ===
   clever: {
     adjectives: [
-      "Clever",
-      "Smart",
-      "Intelligent",
-      "Bright",
-      "Brilliant",
-      "Astute",
-      "Sharp",
-      "Keen",
-      "Quick",
-      "Witty",
-      "Shrewd",
-      "Savvy",
-      "Wise",
-      "Sage",
-      "Learned",
-      "Scholarly",
-      "Academic",
-      "Studious",
-      "Intellectual",
-      "Cerebral",
-      "Analytical",
-      "Logical",
-      "Rational",
-      "Thoughtful",
-      "Insightful",
+      'Clever',
+      'Smart',
+      'Intelligent',
+      'Bright',
+      'Brilliant',
+      'Astute',
+      'Sharp',
+      'Keen',
+      'Quick',
+      'Witty',
+      'Shrewd',
+      'Savvy',
+      'Wise',
+      'Sage',
+      'Learned',
+      'Scholarly',
+      'Academic',
+      'Studious',
+      'Intellectual',
+      'Cerebral',
+      'Analytical',
+      'Logical',
+      'Rational',
+      'Thoughtful',
+      'Insightful',
     ],
     nouns: [
-      "Scholar",
-      "Professor",
-      "Genius",
-      "Intellectual",
-      "Thinker",
-      "Philosopher",
-      "Researcher",
-      "Analyst",
-      "Scientist",
-      "Expert",
-      "Specialist",
-      "Authority",
-      "Savant",
-      "Prodigy",
-      "Mastermind",
-      "Brain",
-      "Whiz",
-      "Ace",
-      "Maven",
-      "Pundit",
-      "Sage",
-      "Oracle",
-      "Mentor",
-      "Teacher",
+      'Scholar',
+      'Professor',
+      'Genius',
+      'Intellectual',
+      'Thinker',
+      'Philosopher',
+      'Researcher',
+      'Analyst',
+      'Scientist',
+      'Expert',
+      'Specialist',
+      'Authority',
+      'Savant',
+      'Prodigy',
+      'Mastermind',
+      'Brain',
+      'Whiz',
+      'Ace',
+      'Maven',
+      'Pundit',
+      'Sage',
+      'Oracle',
+      'Mentor',
+      'Teacher',
     ],
   },
 
   // === COOL (😎🥸) ===
   cool: {
     adjectives: [
-      "Cool",
-      "Slick",
-      "Smooth",
-      "Suave",
-      "Stylish",
-      "Chic",
-      "Hip",
-      "Trendy",
-      "Fresh",
-      "Fly",
-      "Dapper",
-      "Sharp",
-      "Snazzy",
-      "Classy",
-      "Sleek",
-      "Rad",
-      "Awesome",
-      "Epic",
-      "Stellar",
-      "Prime",
-      "Boss",
-      "Supreme",
-      "Confident",
-      "Bold",
-      "Daring",
+      'Cool',
+      'Slick',
+      'Smooth',
+      'Suave',
+      'Stylish',
+      'Chic',
+      'Hip',
+      'Trendy',
+      'Fresh',
+      'Fly',
+      'Dapper',
+      'Sharp',
+      'Snazzy',
+      'Classy',
+      'Sleek',
+      'Rad',
+      'Awesome',
+      'Epic',
+      'Stellar',
+      'Prime',
+      'Boss',
+      'Supreme',
+      'Confident',
+      'Bold',
+      'Daring',
     ],
     nouns: [
-      "Dude",
-      "Cat",
-      "Player",
-      "Hotshot",
-      "Rockstar",
-      "Maverick",
-      "Rebel",
-      "Icon",
-      "Legend",
-      "Champion",
-      "Ace",
-      "Pro",
-      "Boss",
-      "Chief",
-      "Superstar",
-      "VIP",
-      "Celebrity",
-      "Trendsetter",
-      "Influencer",
-      "Phenomenon",
-      "Sensation",
-      "Trailblazer",
-      "Pioneer",
+      'Dude',
+      'Cat',
+      'Player',
+      'Hotshot',
+      'Rockstar',
+      'Maverick',
+      'Rebel',
+      'Icon',
+      'Legend',
+      'Champion',
+      'Ace',
+      'Pro',
+      'Boss',
+      'Chief',
+      'Superstar',
+      'VIP',
+      'Celebrity',
+      'Trendsetter',
+      'Influencer',
+      'Phenomenon',
+      'Sensation',
+      'Trailblazer',
+      'Pioneer',
     ],
   },
 
   // === PARTY (🥳) ===
   party: {
     adjectives: [
-      "Festive",
-      "Celebratory",
-      "Jubilant",
-      "Lively",
-      "Energetic",
-      "Exciting",
-      "Thrilling",
-      "Electric",
-      "Pumped",
-      "Hyped",
-      "Enthusiastic",
-      "Spirited",
-      "Vivacious",
-      "Buoyant",
-      "Effervescent",
-      "Sparkling",
-      "Dazzling",
-      "Spectacular",
-      "Magnificent",
-      "Fabulous",
-      "Glitzy",
-      "Glamorous",
+      'Festive',
+      'Celebratory',
+      'Jubilant',
+      'Lively',
+      'Energetic',
+      'Exciting',
+      'Thrilling',
+      'Electric',
+      'Pumped',
+      'Hyped',
+      'Enthusiastic',
+      'Spirited',
+      'Vivacious',
+      'Buoyant',
+      'Effervescent',
+      'Sparkling',
+      'Dazzling',
+      'Spectacular',
+      'Magnificent',
+      'Fabulous',
+      'Glitzy',
+      'Glamorous',
     ],
     nouns: [
-      "Partier",
-      "Celebrator",
-      "Reveler",
-      "Merrymaker",
-      "Socialite",
-      "Host",
-      "Entertainer",
-      "Showstopper",
-      "Star",
-      "Sensation",
-      "Headliner",
-      "Performer",
-      "DJ",
-      "MC",
-      "Maestro",
-      "Conductor",
-      "Director",
-      "Producer",
-      "Coordinator",
-      "Organizer",
-      "Planner",
+      'Partier',
+      'Celebrator',
+      'Reveler',
+      'Merrymaker',
+      'Socialite',
+      'Host',
+      'Entertainer',
+      'Showstopper',
+      'Star',
+      'Sensation',
+      'Headliner',
+      'Performer',
+      'DJ',
+      'MC',
+      'Maestro',
+      'Conductor',
+      'Director',
+      'Producer',
+      'Coordinator',
+      'Organizer',
+      'Planner',
     ],
   },
 
   // === MOODY (😏😒😞😔😟😕) ===
   moody: {
     adjectives: [
-      "Moody",
-      "Brooding",
-      "Pensive",
-      "Thoughtful",
-      "Contemplative",
-      "Reflective",
-      "Introspective",
-      "Deep",
-      "Mysterious",
-      "Enigmatic",
-      "Complex",
-      "Layered",
-      "Nuanced",
-      "Subtle",
-      "Reserved",
-      "Quiet",
-      "Serious",
-      "Somber",
-      "Melancholic",
-      "Wistful",
-      "Nostalgic",
-      "Sentimental",
-      "Emotional",
+      'Moody',
+      'Brooding',
+      'Pensive',
+      'Thoughtful',
+      'Contemplative',
+      'Reflective',
+      'Introspective',
+      'Deep',
+      'Mysterious',
+      'Enigmatic',
+      'Complex',
+      'Layered',
+      'Nuanced',
+      'Subtle',
+      'Reserved',
+      'Quiet',
+      'Serious',
+      'Somber',
+      'Melancholic',
+      'Wistful',
+      'Nostalgic',
+      'Sentimental',
+      'Emotional',
     ],
     nouns: [
-      "Thinker",
-      "Philosopher",
-      "Poet",
-      "Artist",
-      "Dreamer",
-      "Visionary",
-      "Rebel",
-      "Maverick",
-      "Outsider",
-      "Loner",
-      "Wanderer",
-      "Drifter",
-      "Seeker",
-      "Explorer",
-      "Questioner",
-      "Skeptic",
-      "Critic",
-      "Observer",
-      "Watcher",
-      "Witness",
-      "Soul",
-      "Spirit",
-      "Heart",
+      'Thinker',
+      'Philosopher',
+      'Poet',
+      'Artist',
+      'Dreamer',
+      'Visionary',
+      'Rebel',
+      'Maverick',
+      'Outsider',
+      'Loner',
+      'Wanderer',
+      'Drifter',
+      'Seeker',
+      'Explorer',
+      'Questioner',
+      'Skeptic',
+      'Critic',
+      'Observer',
+      'Watcher',
+      'Witness',
+      'Soul',
+      'Spirit',
+      'Heart',
     ],
   },
 
   // === WILD WEST (🤠) ===
   wildWest: {
     adjectives: [
-      "Wild",
-      "Rugged",
-      "Dusty",
-      "Frontier",
-      "Outlaw",
-      "Lawless",
-      "Rough",
-      "Tough",
-      "Hardy",
-      "Gritty",
-      "Weathered",
-      "Leather",
-      "Denim",
-      "Bronzed",
-      "Sun-baked",
-      "Prairie",
-      "Desert",
-      "Mountain",
-      "Canyon",
-      "Trail-blazing",
-      "Pioneer",
-      "Homestead",
-      "Ranch",
-      "Rodeo",
-      "Saddle-worn",
+      'Wild',
+      'Rugged',
+      'Dusty',
+      'Frontier',
+      'Outlaw',
+      'Lawless',
+      'Rough',
+      'Tough',
+      'Hardy',
+      'Gritty',
+      'Weathered',
+      'Leather',
+      'Denim',
+      'Bronzed',
+      'Sun-baked',
+      'Prairie',
+      'Desert',
+      'Mountain',
+      'Canyon',
+      'Trail-blazing',
+      'Pioneer',
+      'Homestead',
+      'Ranch',
+      'Rodeo',
+      'Saddle-worn',
     ],
     nouns: [
-      "Cowboy",
-      "Cowgirl",
-      "Rancher",
-      "Wrangler",
-      "Rustler",
-      "Gunslinger",
-      "Outlaw",
-      "Sheriff",
-      "Marshal",
-      "Deputy",
-      "Ranger",
-      "Scout",
-      "Trapper",
-      "Prospector",
-      "Miner",
-      "Pioneer",
-      "Settler",
-      "Homesteader",
-      "Buckaroo",
-      "Vaquero",
-      "Bronco-buster",
-      "Lasso",
-      "Spur",
-      "Boot",
+      'Cowboy',
+      'Cowgirl',
+      'Rancher',
+      'Wrangler',
+      'Rustler',
+      'Gunslinger',
+      'Outlaw',
+      'Sheriff',
+      'Marshal',
+      'Deputy',
+      'Ranger',
+      'Scout',
+      'Trapper',
+      'Prospector',
+      'Miner',
+      'Pioneer',
+      'Settler',
+      'Homesteader',
+      'Buckaroo',
+      'Vaquero',
+      'Bronco-buster',
+      'Lasso',
+      'Spur',
+      'Boot',
     ],
   },
 
   // === NINJA (🥷) ===
   ninja: {
     adjectives: [
-      "Stealthy",
-      "Silent",
-      "Shadow",
-      "Swift",
-      "Agile",
-      "Quick",
-      "Lightning",
-      "Deadly",
-      "Precise",
-      "Accurate",
-      "Focused",
-      "Disciplined",
-      "Trained",
-      "Skilled",
-      "Expert",
-      "Master",
-      "Ancient",
-      "Mysterious",
-      "Secretive",
-      "Hidden",
-      "Invisible",
-      "Phantom",
-      "Ghostly",
-      "Elusive",
-      "Cunning",
+      'Stealthy',
+      'Silent',
+      'Shadow',
+      'Swift',
+      'Agile',
+      'Quick',
+      'Lightning',
+      'Deadly',
+      'Precise',
+      'Accurate',
+      'Focused',
+      'Disciplined',
+      'Trained',
+      'Skilled',
+      'Expert',
+      'Master',
+      'Ancient',
+      'Mysterious',
+      'Secretive',
+      'Hidden',
+      'Invisible',
+      'Phantom',
+      'Ghostly',
+      'Elusive',
+      'Cunning',
     ],
     nouns: [
-      "Ninja",
-      "Shinobi",
-      "Assassin",
-      "Warrior",
-      "Fighter",
-      "Striker",
-      "Shadow",
-      "Phantom",
-      "Ghost",
-      "Wraith",
-      "Specter",
-      "Spirit",
-      "Blade",
-      "Katana",
-      "Shuriken",
-      "Kunai",
-      "Master",
-      "Sensei",
-      "Apprentice",
-      "Student",
-      "Disciple",
-      "Acolyte",
-      "Initiate",
+      'Ninja',
+      'Shinobi',
+      'Assassin',
+      'Warrior',
+      'Fighter',
+      'Striker',
+      'Shadow',
+      'Phantom',
+      'Ghost',
+      'Wraith',
+      'Specter',
+      'Spirit',
+      'Blade',
+      'Katana',
+      'Shuriken',
+      'Kunai',
+      'Master',
+      'Sensei',
+      'Apprentice',
+      'Student',
+      'Disciple',
+      'Acolyte',
+      'Initiate',
     ],
   },
 
   // === ROYAL (👑) ===
   royal: {
     adjectives: [
-      "Royal",
-      "Regal",
-      "Majestic",
-      "Noble",
-      "Aristocratic",
-      "Imperial",
-      "Sovereign",
-      "Crowned",
-      "Enthroned",
-      "Supreme",
-      "Grand",
-      "Magnificent",
-      "Elegant",
-      "Refined",
-      "Distinguished",
-      "Prestigious",
-      "Esteemed",
-      "Honored",
-      "Dignified",
-      "Stately",
-      "Splendid",
-      "Glorious",
-      "Resplendent",
+      'Royal',
+      'Regal',
+      'Majestic',
+      'Noble',
+      'Aristocratic',
+      'Imperial',
+      'Sovereign',
+      'Crowned',
+      'Enthroned',
+      'Supreme',
+      'Grand',
+      'Magnificent',
+      'Elegant',
+      'Refined',
+      'Distinguished',
+      'Prestigious',
+      'Esteemed',
+      'Honored',
+      'Dignified',
+      'Stately',
+      'Splendid',
+      'Glorious',
+      'Resplendent',
     ],
     nouns: [
-      "King",
-      "Queen",
-      "Prince",
-      "Princess",
-      "Emperor",
-      "Empress",
-      "Monarch",
-      "Sovereign",
-      "Ruler",
-      "Lord",
-      "Lady",
-      "Duke",
-      "Duchess",
-      "Count",
-      "Countess",
-      "Baron",
-      "Baroness",
-      "Noble",
-      "Aristocrat",
-      "Regent",
-      "Throne",
-      "Crown",
-      "Scepter",
-      "Majesty",
+      'King',
+      'Queen',
+      'Prince',
+      'Princess',
+      'Emperor',
+      'Empress',
+      'Monarch',
+      'Sovereign',
+      'Ruler',
+      'Lord',
+      'Lady',
+      'Duke',
+      'Duchess',
+      'Count',
+      'Countess',
+      'Baron',
+      'Baroness',
+      'Noble',
+      'Aristocrat',
+      'Regent',
+      'Throne',
+      'Crown',
+      'Scepter',
+      'Majesty',
     ],
   },
 
   // === THEATER (🎭) ===
   theater: {
     adjectives: [
-      "Dramatic",
-      "Theatrical",
-      "Expressive",
-      "Passionate",
-      "Emotive",
-      "演Technical",
-      "Comedic",
-      "Tragic",
-      "Epic",
-      "Classical",
-      "Modern",
-      "Broadway",
-      "Shakespearean",
-      "Method",
-      "Improvised",
-      "Scripted",
-      "Rehearsed",
-      "Polished",
-      "Raw",
-      "Powerful",
-      "Moving",
-      "Captivating",
-      "Mesmerizing",
-      "Spellbinding",
-      "Riveting",
+      'Dramatic',
+      'Theatrical',
+      'Expressive',
+      'Passionate',
+      'Emotive',
+      '演Technical',
+      'Comedic',
+      'Tragic',
+      'Epic',
+      'Classical',
+      'Modern',
+      'Broadway',
+      'Shakespearean',
+      'Method',
+      'Improvised',
+      'Scripted',
+      'Rehearsed',
+      'Polished',
+      'Raw',
+      'Powerful',
+      'Moving',
+      'Captivating',
+      'Mesmerizing',
+      'Spellbinding',
+      'Riveting',
     ],
     nouns: [
-      "Actor",
-      "Actress",
-      "Performer",
-      "Thespian",
-      "Player",
-      "Star",
-      "Lead",
-      "Supporting",
-      "Understudy",
-      "Director",
-      "Producer",
-      "Playwright",
-      "Dramatist",
-      "Screenwriter",
-      "Character",
-      "Role",
-      "Part",
-      "Scene",
-      "Act",
-      "Stage",
-      "Spotlight",
-      "Curtain",
-      "Encore",
-      "Ovation",
+      'Actor',
+      'Actress',
+      'Performer',
+      'Thespian',
+      'Player',
+      'Star',
+      'Lead',
+      'Supporting',
+      'Understudy',
+      'Director',
+      'Producer',
+      'Playwright',
+      'Dramatist',
+      'Screenwriter',
+      'Character',
+      'Role',
+      'Part',
+      'Scene',
+      'Act',
+      'Stage',
+      'Spotlight',
+      'Curtain',
+      'Encore',
+      'Ovation',
     ],
   },
 
   // === ROBOT (🤖) ===
   robot: {
     adjectives: [
-      "Robotic",
-      "Mechanical",
-      "Automated",
-      "Digital",
-      "Electronic",
-      "Cyber",
-      "Synthetic",
-      "Artificial",
-      "Programmed",
-      "Computed",
-      "Binary",
-      "Circuit",
-      "Metal",
-      "Steel",
-      "Chrome",
-      "Titanium",
-      "Nano",
-      "Micro",
-      "Tech",
-      "Advanced",
-      "Futuristic",
-      "Modern",
-      "Sleek",
-      "Efficient",
-      "Optimal",
+      'Robotic',
+      'Mechanical',
+      'Automated',
+      'Digital',
+      'Electronic',
+      'Cyber',
+      'Synthetic',
+      'Artificial',
+      'Programmed',
+      'Computed',
+      'Binary',
+      'Circuit',
+      'Metal',
+      'Steel',
+      'Chrome',
+      'Titanium',
+      'Nano',
+      'Micro',
+      'Tech',
+      'Advanced',
+      'Futuristic',
+      'Modern',
+      'Sleek',
+      'Efficient',
+      'Optimal',
     ],
     nouns: [
-      "Robot",
-      "Android",
-      "Cyborg",
-      "Bot",
-      "Droid",
-      "Automaton",
-      "Machine",
-      "Computer",
-      "Processor",
-      "CPU",
-      "Algorithm",
-      "Protocol",
-      "System",
-      "Network",
-      "Interface",
-      "Terminal",
-      "Console",
-      "Module",
-      "Unit",
-      "Component",
-      "Circuit",
-      "Chip",
-      "Byte",
-      "Core",
+      'Robot',
+      'Android',
+      'Cyborg',
+      'Bot',
+      'Droid',
+      'Automaton',
+      'Machine',
+      'Computer',
+      'Processor',
+      'CPU',
+      'Algorithm',
+      'Protocol',
+      'System',
+      'Network',
+      'Interface',
+      'Terminal',
+      'Console',
+      'Module',
+      'Unit',
+      'Component',
+      'Circuit',
+      'Chip',
+      'Byte',
+      'Core',
     ],
   },
 
   // === SPOOKY (👻💀) ===
   spooky: {
     adjectives: [
-      "Spooky",
-      "Ghostly",
-      "Haunted",
-      "Eerie",
-      "Creepy",
-      "Scary",
-      "Frightening",
-      "Chilling",
-      "Bone-chilling",
-      "Spine-tingling",
-      "Hair-raising",
-      "Supernatural",
-      "Paranormal",
-      "Spectral",
-      "Phantom",
-      "Ethereal",
-      "Otherworldly",
-      "Mysterious",
-      "Uncanny",
-      "Sinister",
-      "Ominous",
-      "Foreboding",
-      "Dark",
+      'Spooky',
+      'Ghostly',
+      'Haunted',
+      'Eerie',
+      'Creepy',
+      'Scary',
+      'Frightening',
+      'Chilling',
+      'Bone-chilling',
+      'Spine-tingling',
+      'Hair-raising',
+      'Supernatural',
+      'Paranormal',
+      'Spectral',
+      'Phantom',
+      'Ethereal',
+      'Otherworldly',
+      'Mysterious',
+      'Uncanny',
+      'Sinister',
+      'Ominous',
+      'Foreboding',
+      'Dark',
     ],
     nouns: [
-      "Ghost",
-      "Specter",
-      "Phantom",
-      "Spirit",
-      "Wraith",
-      "Apparition",
-      "Poltergeist",
-      "Haunt",
-      "Skeleton",
-      "Bones",
-      "Skull",
-      "Reaper",
-      "Shadow",
-      "Shade",
-      "Banshee",
-      "Ghoul",
-      "Zombie",
-      "Revenant",
-      "Spook",
-      "Phantasm",
-      "Ectoplasm",
-      "Entity",
-      "Presence",
+      'Ghost',
+      'Specter',
+      'Phantom',
+      'Spirit',
+      'Wraith',
+      'Apparition',
+      'Poltergeist',
+      'Haunt',
+      'Skeleton',
+      'Bones',
+      'Skull',
+      'Reaper',
+      'Shadow',
+      'Shade',
+      'Banshee',
+      'Ghoul',
+      'Zombie',
+      'Revenant',
+      'Spook',
+      'Phantasm',
+      'Ectoplasm',
+      'Entity',
+      'Presence',
     ],
   },
 
   // === ALIEN (👽) ===
   alien: {
     adjectives: [
-      "Alien",
-      "Extraterrestrial",
-      "Cosmic",
-      "Galactic",
-      "Interstellar",
-      "Universal",
-      "Celestial",
-      "Astral",
-      "Stellar",
-      "Lunar",
-      "Solar",
-      "Planetary",
-      "Nebular",
-      "Orbital",
-      "Space-faring",
-      "Otherworldly",
-      "Unearthly",
-      "Foreign",
-      "Strange",
-      "Unknown",
-      "Mysterious",
-      "Enigmatic",
-      "Advanced",
+      'Alien',
+      'Extraterrestrial',
+      'Cosmic',
+      'Galactic',
+      'Interstellar',
+      'Universal',
+      'Celestial',
+      'Astral',
+      'Stellar',
+      'Lunar',
+      'Solar',
+      'Planetary',
+      'Nebular',
+      'Orbital',
+      'Space-faring',
+      'Otherworldly',
+      'Unearthly',
+      'Foreign',
+      'Strange',
+      'Unknown',
+      'Mysterious',
+      'Enigmatic',
+      'Advanced',
     ],
     nouns: [
-      "Alien",
-      "Extraterrestrial",
-      "Visitor",
-      "Traveler",
-      "Explorer",
-      "Scout",
-      "Ambassador",
-      "Diplomat",
-      "Envoy",
-      "Emissary",
-      "Being",
-      "Entity",
-      "Creature",
-      "Lifeform",
-      "Species",
-      "Civilization",
-      "Culture",
-      "Society",
-      "UFO",
-      "Saucer",
-      "Craft",
-      "Vessel",
-      "Ship",
-      "Probe",
+      'Alien',
+      'Extraterrestrial',
+      'Visitor',
+      'Traveler',
+      'Explorer',
+      'Scout',
+      'Ambassador',
+      'Diplomat',
+      'Envoy',
+      'Emissary',
+      'Being',
+      'Entity',
+      'Creature',
+      'Lifeform',
+      'Species',
+      'Civilization',
+      'Culture',
+      'Society',
+      'UFO',
+      'Saucer',
+      'Craft',
+      'Vessel',
+      'Ship',
+      'Probe',
     ],
   },
 
   // === CIRCUS (🤡) ===
   circus: {
     adjectives: [
-      "Circus",
-      "Clownish",
-      "Comical",
-      "Amusing",
-      "Entertaining",
-      "Spectacular",
-      "Dazzling",
-      "Amazing",
-      "Astonishing",
-      "Breathtaking",
-      "Thrilling",
-      "Exciting",
-      "Colorful",
-      "Vibrant",
-      "Bright",
-      "Flashy",
-      "Showy",
-      "Acrobatic",
-      "Juggling",
-      "Balancing",
-      "High-flying",
-      "Death-defying",
+      'Circus',
+      'Clownish',
+      'Comical',
+      'Amusing',
+      'Entertaining',
+      'Spectacular',
+      'Dazzling',
+      'Amazing',
+      'Astonishing',
+      'Breathtaking',
+      'Thrilling',
+      'Exciting',
+      'Colorful',
+      'Vibrant',
+      'Bright',
+      'Flashy',
+      'Showy',
+      'Acrobatic',
+      'Juggling',
+      'Balancing',
+      'High-flying',
+      'Death-defying',
     ],
     nouns: [
-      "Clown",
-      "Jester",
-      "Performer",
-      "Acrobat",
-      "Juggler",
-      "Tightrope-walker",
-      "Trapeze-artist",
-      "Ringmaster",
-      "Showman",
-      "Entertainer",
-      "Magician",
-      "Illusionist",
-      "Prestidigitator",
-      "Fire-eater",
-      "Sword-swallower",
-      "Strongman",
-      "Contortionist",
-      "Mime",
-      "Harlequin",
-      "Pierrot",
-      "Buffoon",
+      'Clown',
+      'Jester',
+      'Performer',
+      'Acrobat',
+      'Juggler',
+      'Tightrope-walker',
+      'Trapeze-artist',
+      'Ringmaster',
+      'Showman',
+      'Entertainer',
+      'Magician',
+      'Illusionist',
+      'Prestidigitator',
+      'Fire-eater',
+      'Sword-swallower',
+      'Strongman',
+      'Contortionist',
+      'Mime',
+      'Harlequin',
+      'Pierrot',
+      'Buffoon',
     ],
   },
 
   // === WIZARDS (🧙‍♂️🧙‍♀️) ===
   wizards: {
     adjectives: [
-      "Magical",
-      "Mystical",
-      "Enchanted",
-      "Spellbinding",
-      "Sorcerous",
-      "Arcane",
-      "Occult",
-      "Esoteric",
-      "Mysterious",
-      "Ancient",
-      "Wise",
-      "Powerful",
-      "Potent",
-      "Mighty",
-      "Supreme",
-      "Grand",
-      "High",
-      "Elder",
-      "Venerable",
-      "Bearded",
-      "Robed",
-      "Staffed",
-      "Runic",
-      "Incantatory",
-      "Alchemical",
+      'Magical',
+      'Mystical',
+      'Enchanted',
+      'Spellbinding',
+      'Sorcerous',
+      'Arcane',
+      'Occult',
+      'Esoteric',
+      'Mysterious',
+      'Ancient',
+      'Wise',
+      'Powerful',
+      'Potent',
+      'Mighty',
+      'Supreme',
+      'Grand',
+      'High',
+      'Elder',
+      'Venerable',
+      'Bearded',
+      'Robed',
+      'Staffed',
+      'Runic',
+      'Incantatory',
+      'Alchemical',
     ],
     nouns: [
-      "Wizard",
-      "Sorcerer",
-      "Mage",
-      "Magician",
-      "Warlock",
-      "Enchanter",
-      "Spellcaster",
-      "Conjurer",
-      "Summoner",
-      "Diviner",
-      "Oracle",
-      "Seer",
-      "Prophet",
-      "Sage",
-      "Mystic",
-      "Adept",
-      "Arcanist",
-      "Thaumaturge",
-      "Alchemist",
-      "Elementalist",
-      "Necromancer",
-      "Illusionist",
-      "Staff",
-      "Wand",
+      'Wizard',
+      'Sorcerer',
+      'Mage',
+      'Magician',
+      'Warlock',
+      'Enchanter',
+      'Spellcaster',
+      'Conjurer',
+      'Summoner',
+      'Diviner',
+      'Oracle',
+      'Seer',
+      'Prophet',
+      'Sage',
+      'Mystic',
+      'Adept',
+      'Arcanist',
+      'Thaumaturge',
+      'Alchemist',
+      'Elementalist',
+      'Necromancer',
+      'Illusionist',
+      'Staff',
+      'Wand',
     ],
   },
 
   // === FAIRIES (🧚‍♂️🧚‍♀️) ===
   fairies: {
     adjectives: [
-      "Fairy",
-      "Fae",
-      "Enchanted",
-      "Magical",
-      "Whimsical",
-      "Delicate",
-      "Dainty",
-      "Graceful",
-      "Elegant",
-      "Beautiful",
-      "Lovely",
-      "Pretty",
-      "Charming",
-      "Ethereal",
-      "Gossamer",
-      "Shimmering",
-      "Glittering",
-      "Sparkling",
-      "Twinkling",
-      "Glowing",
-      "Luminous",
-      "Radiant",
-      "Iridescent",
-      "Winged",
+      'Fairy',
+      'Fae',
+      'Enchanted',
+      'Magical',
+      'Whimsical',
+      'Delicate',
+      'Dainty',
+      'Graceful',
+      'Elegant',
+      'Beautiful',
+      'Lovely',
+      'Pretty',
+      'Charming',
+      'Ethereal',
+      'Gossamer',
+      'Shimmering',
+      'Glittering',
+      'Sparkling',
+      'Twinkling',
+      'Glowing',
+      'Luminous',
+      'Radiant',
+      'Iridescent',
+      'Winged',
     ],
     nouns: [
-      "Fairy",
-      "Sprite",
-      "Pixie",
-      "Nymph",
-      "Sylph",
-      "Dryad",
-      "Naiad",
-      "Fae",
-      "Faerie",
-      "Changeling",
-      "Sidhe",
-      "Enchantress",
-      "Spirit",
-      "Being",
-      "Creature",
-      "Guardian",
-      "Protector",
-      "Keeper",
-      "Warden",
-      "Wing",
-      "Dewdrop",
-      "Moonbeam",
-      "Starlight",
-      "Blossom",
+      'Fairy',
+      'Sprite',
+      'Pixie',
+      'Nymph',
+      'Sylph',
+      'Dryad',
+      'Naiad',
+      'Fae',
+      'Faerie',
+      'Changeling',
+      'Sidhe',
+      'Enchantress',
+      'Spirit',
+      'Being',
+      'Creature',
+      'Guardian',
+      'Protector',
+      'Keeper',
+      'Warden',
+      'Wing',
+      'Dewdrop',
+      'Moonbeam',
+      'Starlight',
+      'Blossom',
     ],
   },
 
   // === VAMPIRES (🧛‍♂️🧛‍♀️) ===
   vampires: {
     adjectives: [
-      "Vampiric",
-      "Nocturnal",
-      "Gothic",
-      "Dark",
-      "Shadowy",
-      "Mysterious",
-      "Immortal",
-      "Eternal",
-      "Undead",
-      "Blood-drinking",
-      "Fanged",
-      "Pale",
-      "Aristocratic",
-      "Noble",
-      "Elegant",
-      "Sophisticated",
-      "Cultured",
-      "Ancient",
-      "Old",
-      "Centuries-old",
-      "Timeless",
-      "Ageless",
-      "Supernatural",
+      'Vampiric',
+      'Nocturnal',
+      'Gothic',
+      'Dark',
+      'Shadowy',
+      'Mysterious',
+      'Immortal',
+      'Eternal',
+      'Undead',
+      'Blood-drinking',
+      'Fanged',
+      'Pale',
+      'Aristocratic',
+      'Noble',
+      'Elegant',
+      'Sophisticated',
+      'Cultured',
+      'Ancient',
+      'Old',
+      'Centuries-old',
+      'Timeless',
+      'Ageless',
+      'Supernatural',
     ],
     nouns: [
-      "Vampire",
-      "Vampyre",
-      "Nosferatu",
-      "Count",
-      "Countess",
-      "Lord",
-      "Lady",
-      "Master",
-      "Mistress",
-      "Prince",
-      "Princess",
-      "Noble",
-      "Aristocrat",
-      "Bloodsucker",
-      "Nightcrawler",
-      "Creature",
-      "Immortal",
-      "Undead",
-      "Fang",
-      "Bite",
-      "Shadow",
-      "Night",
-      "Darkness",
-      "Eclipse",
+      'Vampire',
+      'Vampyre',
+      'Nosferatu',
+      'Count',
+      'Countess',
+      'Lord',
+      'Lady',
+      'Master',
+      'Mistress',
+      'Prince',
+      'Princess',
+      'Noble',
+      'Aristocrat',
+      'Bloodsucker',
+      'Nightcrawler',
+      'Creature',
+      'Immortal',
+      'Undead',
+      'Fang',
+      'Bite',
+      'Shadow',
+      'Night',
+      'Darkness',
+      'Eclipse',
     ],
   },
 
   // === MERFOLK (🧜‍♂️🧜‍♀️) ===
   merfolk: {
     adjectives: [
-      "Aquatic",
-      "Oceanic",
-      "Marine",
-      "Nautical",
-      "Seafaring",
-      "Deep-sea",
-      "Underwater",
-      "Submerged",
-      "Diving",
-      "Swimming",
-      "Floating",
-      "Drifting",
-      "Tidal",
-      "Watery",
-      "Liquid",
-      "Flowing",
-      "Rippling",
-      "Shimmering",
-      "Pearl",
-      "Coral",
-      "Seashell",
-      "Tropical",
-      "Temperate",
-      "Arctic",
+      'Aquatic',
+      'Oceanic',
+      'Marine',
+      'Nautical',
+      'Seafaring',
+      'Deep-sea',
+      'Underwater',
+      'Submerged',
+      'Diving',
+      'Swimming',
+      'Floating',
+      'Drifting',
+      'Tidal',
+      'Watery',
+      'Liquid',
+      'Flowing',
+      'Rippling',
+      'Shimmering',
+      'Pearl',
+      'Coral',
+      'Seashell',
+      'Tropical',
+      'Temperate',
+      'Arctic',
     ],
     nouns: [
-      "Mermaid",
-      "Merman",
-      "Merfolk",
-      "Siren",
-      "Selkie",
-      "Nereid",
-      "Triton",
-      "Sea-dweller",
-      "Ocean-dweller",
-      "Deep-sea-dweller",
-      "Swimmer",
-      "Diver",
-      "Sailor",
-      "Navigator",
-      "Explorer",
-      "Guardian",
-      "Protector",
-      "Keeper",
-      "Wave",
-      "Tide",
-      "Current",
-      "Coral",
-      "Pearl",
-      "Shell",
+      'Mermaid',
+      'Merman',
+      'Merfolk',
+      'Siren',
+      'Selkie',
+      'Nereid',
+      'Triton',
+      'Sea-dweller',
+      'Ocean-dweller',
+      'Deep-sea-dweller',
+      'Swimmer',
+      'Diver',
+      'Sailor',
+      'Navigator',
+      'Explorer',
+      'Guardian',
+      'Protector',
+      'Keeper',
+      'Wave',
+      'Tide',
+      'Current',
+      'Coral',
+      'Pearl',
+      'Shell',
     ],
   },
 
   // === ELVES (🧝‍♂️🧝‍♀️) ===
   elves: {
     adjectives: [
-      "Elven",
-      "Elvish",
-      "Forest",
-      "Woodland",
-      "Sylvan",
-      "Arboreal",
-      "Green",
-      "Natural",
-      "Wild",
-      "Ancient",
-      "Ageless",
-      "Immortal",
-      "Graceful",
-      "Elegant",
-      "Nimble",
-      "Swift",
-      "Quick",
-      "Sharp",
-      "Keen",
-      "Perceptive",
-      "Observant",
-      "Wise",
-      "Learned",
-      "Skilled",
-      "Expert",
+      'Elven',
+      'Elvish',
+      'Forest',
+      'Woodland',
+      'Sylvan',
+      'Arboreal',
+      'Green',
+      'Natural',
+      'Wild',
+      'Ancient',
+      'Ageless',
+      'Immortal',
+      'Graceful',
+      'Elegant',
+      'Nimble',
+      'Swift',
+      'Quick',
+      'Sharp',
+      'Keen',
+      'Perceptive',
+      'Observant',
+      'Wise',
+      'Learned',
+      'Skilled',
+      'Expert',
     ],
     nouns: [
-      "Elf",
-      "Ranger",
-      "Archer",
-      "Scout",
-      "Hunter",
-      "Tracker",
-      "Pathfinder",
-      "Wayfarer",
-      "Wanderer",
-      "Guardian",
-      "Protector",
-      "Keeper",
-      "Warden",
-      "Sentinel",
-      "Bow",
-      "Arrow",
-      "Quiver",
-      "Leaf",
-      "Branch",
-      "Tree",
-      "Forest",
-      "Woods",
-      "Grove",
-      "Glade",
-      "Vale",
+      'Elf',
+      'Ranger',
+      'Archer',
+      'Scout',
+      'Hunter',
+      'Tracker',
+      'Pathfinder',
+      'Wayfarer',
+      'Wanderer',
+      'Guardian',
+      'Protector',
+      'Keeper',
+      'Warden',
+      'Sentinel',
+      'Bow',
+      'Arrow',
+      'Quiver',
+      'Leaf',
+      'Branch',
+      'Tree',
+      'Forest',
+      'Woods',
+      'Grove',
+      'Glade',
+      'Vale',
     ],
   },
 
   // === HEROES (🦸‍♂️🦸‍♀️) ===
   heroes: {
     adjectives: [
-      "Heroic",
-      "Brave",
-      "Courageous",
-      "Valiant",
-      "Gallant",
-      "Fearless",
-      "Daring",
-      "Bold",
-      "Intrepid",
-      "Audacious",
-      "Mighty",
-      "Powerful",
-      "Strong",
-      "Robust",
-      "Invincible",
-      "Unbeatable",
-      "Unstoppable",
-      "Super",
-      "Ultra",
-      "Mega",
-      "Hyper",
-      "Supreme",
-      "Ultimate",
-      "Prime",
+      'Heroic',
+      'Brave',
+      'Courageous',
+      'Valiant',
+      'Gallant',
+      'Fearless',
+      'Daring',
+      'Bold',
+      'Intrepid',
+      'Audacious',
+      'Mighty',
+      'Powerful',
+      'Strong',
+      'Robust',
+      'Invincible',
+      'Unbeatable',
+      'Unstoppable',
+      'Super',
+      'Ultra',
+      'Mega',
+      'Hyper',
+      'Supreme',
+      'Ultimate',
+      'Prime',
     ],
     nouns: [
-      "Hero",
-      "Champion",
-      "Defender",
-      "Protector",
-      "Guardian",
-      "Savior",
-      "Rescuer",
-      "Liberator",
-      "Crusader",
-      "Warrior",
-      "Fighter",
-      "Soldier",
-      "Knight",
-      "Paladin",
-      "Avenger",
-      "Justice",
-      "Sentinel",
-      "Shield",
-      "Sword",
-      "Cape",
-      "Mask",
-      "Power",
-      "Force",
-      "Might",
+      'Hero',
+      'Champion',
+      'Defender',
+      'Protector',
+      'Guardian',
+      'Savior',
+      'Rescuer',
+      'Liberator',
+      'Crusader',
+      'Warrior',
+      'Fighter',
+      'Soldier',
+      'Knight',
+      'Paladin',
+      'Avenger',
+      'Justice',
+      'Sentinel',
+      'Shield',
+      'Sword',
+      'Cape',
+      'Mask',
+      'Power',
+      'Force',
+      'Might',
     ],
   },
 
   // === VILLAINS (🦹‍♂️) ===
   villains: {
     adjectives: [
-      "Villainous",
-      "Evil",
-      "Wicked",
-      "Sinister",
-      "Malevolent",
-      "Malicious",
-      "Nefarious",
-      "Diabolical",
-      "Devious",
-      "Cunning",
-      "Scheming",
-      "Plotting",
-      "Dastardly",
-      "Fiendish",
-      "Dark",
-      "Shadow",
-      "Twisted",
-      "Corrupt",
-      "Rogue",
-      "Rebellious",
-      "Defiant",
-      "Anarchic",
-      "Chaotic",
-      "Ruthless",
+      'Villainous',
+      'Evil',
+      'Wicked',
+      'Sinister',
+      'Malevolent',
+      'Malicious',
+      'Nefarious',
+      'Diabolical',
+      'Devious',
+      'Cunning',
+      'Scheming',
+      'Plotting',
+      'Dastardly',
+      'Fiendish',
+      'Dark',
+      'Shadow',
+      'Twisted',
+      'Corrupt',
+      'Rogue',
+      'Rebellious',
+      'Defiant',
+      'Anarchic',
+      'Chaotic',
+      'Ruthless',
     ],
     nouns: [
-      "Villain",
-      "Evildoer",
-      "Wrongdoer",
-      "Malefactor",
-      "Scoundrel",
-      "Rogue",
-      "Rascal",
-      "Knave",
-      "Fiend",
-      "Demon",
-      "Devil",
-      "Monster",
-      "Beast",
-      "Nemesis",
-      "Adversary",
-      "Antagonist",
-      "Rival",
-      "Foe",
-      "Enemy",
-      "Mastermind",
-      "Schemer",
-      "Plotter",
-      "Conspirator",
-      "Overlord",
+      'Villain',
+      'Evildoer',
+      'Wrongdoer',
+      'Malefactor',
+      'Scoundrel',
+      'Rogue',
+      'Rascal',
+      'Knave',
+      'Fiend',
+      'Demon',
+      'Devil',
+      'Monster',
+      'Beast',
+      'Nemesis',
+      'Adversary',
+      'Antagonist',
+      'Rival',
+      'Foe',
+      'Enemy',
+      'Mastermind',
+      'Schemer',
+      'Plotter',
+      'Conspirator',
+      'Overlord',
     ],
   },
 
   // === CANINES (🐶🐺) ===
   canines: {
     adjectives: [
-      "Loyal",
-      "Faithful",
-      "Devoted",
-      "Trusty",
-      "Friendly",
-      "Playful",
-      "Energetic",
-      "Active",
-      "Lively",
-      "Spirited",
-      "Happy",
-      "Joyful",
-      "Enthusiastic",
-      "Eager",
-      "Alert",
-      "Watchful",
-      "Protective",
-      "Guardian",
-      "Wild",
-      "Fierce",
-      "Feral",
-      "Howling",
-      "Pack",
-      "Alpha",
+      'Loyal',
+      'Faithful',
+      'Devoted',
+      'Trusty',
+      'Friendly',
+      'Playful',
+      'Energetic',
+      'Active',
+      'Lively',
+      'Spirited',
+      'Happy',
+      'Joyful',
+      'Enthusiastic',
+      'Eager',
+      'Alert',
+      'Watchful',
+      'Protective',
+      'Guardian',
+      'Wild',
+      'Fierce',
+      'Feral',
+      'Howling',
+      'Pack',
+      'Alpha',
     ],
     nouns: [
-      "Dog",
-      "Pup",
-      "Puppy",
-      "Hound",
-      "Canine",
-      "Pooch",
-      "Mutt",
-      "Doggo",
-      "Pupper",
-      "Wolf",
-      "Wolfhound",
-      "Shepherd",
-      "Retriever",
-      "Terrier",
-      "Spaniel",
-      "Beagle",
-      "Husky",
-      "Malamute",
-      "Corgi",
-      "Dachshund",
-      "Poodle",
-      "Bulldog",
-      "Boxer",
-      "Collie",
-      "Alpha",
+      'Dog',
+      'Pup',
+      'Puppy',
+      'Hound',
+      'Canine',
+      'Pooch',
+      'Mutt',
+      'Doggo',
+      'Pupper',
+      'Wolf',
+      'Wolfhound',
+      'Shepherd',
+      'Retriever',
+      'Terrier',
+      'Spaniel',
+      'Beagle',
+      'Husky',
+      'Malamute',
+      'Corgi',
+      'Dachshund',
+      'Poodle',
+      'Bulldog',
+      'Boxer',
+      'Collie',
+      'Alpha',
     ],
   },
 
   // === FELINES (🐱🐯🦁) ===
   felines: {
     adjectives: [
-      "Feline",
-      "Catlike",
-      "Sleek",
-      "Graceful",
-      "Agile",
-      "Nimble",
-      "Quick",
-      "Stealthy",
-      "Silent",
-      "Sneaky",
-      "Curious",
-      "Independent",
-      "Aloof",
-      "Majestic",
-      "Regal",
-      "Noble",
-      "Wild",
-      "Fierce",
-      "Ferocious",
-      "Striped",
-      "Spotted",
-      "Furry",
-      "Soft",
-      "Purring",
-      "Prowling",
+      'Feline',
+      'Catlike',
+      'Sleek',
+      'Graceful',
+      'Agile',
+      'Nimble',
+      'Quick',
+      'Stealthy',
+      'Silent',
+      'Sneaky',
+      'Curious',
+      'Independent',
+      'Aloof',
+      'Majestic',
+      'Regal',
+      'Noble',
+      'Wild',
+      'Fierce',
+      'Ferocious',
+      'Striped',
+      'Spotted',
+      'Furry',
+      'Soft',
+      'Purring',
+      'Prowling',
     ],
     nouns: [
-      "Cat",
-      "Kitty",
-      "Kitten",
-      "Feline",
-      "Tabby",
-      "Tomcat",
-      "Mouser",
-      "Tiger",
-      "Tigress",
-      "Lion",
-      "Lioness",
-      "Panther",
-      "Leopard",
-      "Cheetah",
-      "Jaguar",
-      "Cougar",
-      "Puma",
-      "Lynx",
-      "Bobcat",
-      "Pride",
-      "Claw",
-      "Paw",
-      "Whisker",
-      "Tail",
-      "Mane",
+      'Cat',
+      'Kitty',
+      'Kitten',
+      'Feline',
+      'Tabby',
+      'Tomcat',
+      'Mouser',
+      'Tiger',
+      'Tigress',
+      'Lion',
+      'Lioness',
+      'Panther',
+      'Leopard',
+      'Cheetah',
+      'Jaguar',
+      'Cougar',
+      'Puma',
+      'Lynx',
+      'Bobcat',
+      'Pride',
+      'Claw',
+      'Paw',
+      'Whisker',
+      'Tail',
+      'Mane',
     ],
   },
 
   // === RODENTS (🐭🐹) ===
   rodents: {
     adjectives: [
-      "Tiny",
-      "Small",
-      "Little",
-      "Miniature",
-      "Petite",
-      "Wee",
-      "Itty-bitty",
-      "Quick",
-      "Speedy",
-      "Swift",
-      "Fast",
-      "Nimble",
-      "Agile",
-      "Scurrying",
-      "Busy",
-      "Active",
-      "Energetic",
-      "Curious",
-      "Inquisitive",
-      "Clever",
-      "Smart",
-      "Resourceful",
-      "Adaptable",
-      "Cute",
-      "Adorable",
+      'Tiny',
+      'Small',
+      'Little',
+      'Miniature',
+      'Petite',
+      'Wee',
+      'Itty-bitty',
+      'Quick',
+      'Speedy',
+      'Swift',
+      'Fast',
+      'Nimble',
+      'Agile',
+      'Scurrying',
+      'Busy',
+      'Active',
+      'Energetic',
+      'Curious',
+      'Inquisitive',
+      'Clever',
+      'Smart',
+      'Resourceful',
+      'Adaptable',
+      'Cute',
+      'Adorable',
     ],
     nouns: [
-      "Mouse",
-      "Mice",
-      "Mousie",
-      "Squeaker",
-      "Hamster",
-      "Hammie",
-      "Gerbil",
-      "Rat",
-      "Ratty",
-      "Rodent",
-      "Critter",
-      "Creature",
-      "Pet",
-      "Pocket-pet",
-      "Nibbler",
-      "Gnawer",
-      "Whisker",
-      "Squeaks",
-      "Cheese-lover",
-      "Burrow",
-      "Den",
-      "Nest",
-      "Hole",
-      "Warren",
-      "Runner",
+      'Mouse',
+      'Mice',
+      'Mousie',
+      'Squeaker',
+      'Hamster',
+      'Hammie',
+      'Gerbil',
+      'Rat',
+      'Ratty',
+      'Rodent',
+      'Critter',
+      'Creature',
+      'Pet',
+      'Pocket-pet',
+      'Nibbler',
+      'Gnawer',
+      'Whisker',
+      'Squeaks',
+      'Cheese-lover',
+      'Burrow',
+      'Den',
+      'Nest',
+      'Hole',
+      'Warren',
+      'Runner',
     ],
   },
 
   // === RABBITS (🐰) ===
   rabbits: {
     adjectives: [
-      "Fluffy",
-      "Soft",
-      "Fuzzy",
-      "Cottony",
-      "Downy",
-      "Cuddly",
-      "Cute",
-      "Adorable",
-      "Sweet",
-      "Gentle",
-      "Timid",
-      "Shy",
-      "Hopping",
-      "Bouncing",
-      "Jumping",
-      "Leaping",
-      "Quick",
-      "Swift",
-      "Fast",
-      "Speedy",
-      "Nimble",
-      "Long-eared",
-      "Twitchy",
-      "Alert",
-      "Watchful",
+      'Fluffy',
+      'Soft',
+      'Fuzzy',
+      'Cottony',
+      'Downy',
+      'Cuddly',
+      'Cute',
+      'Adorable',
+      'Sweet',
+      'Gentle',
+      'Timid',
+      'Shy',
+      'Hopping',
+      'Bouncing',
+      'Jumping',
+      'Leaping',
+      'Quick',
+      'Swift',
+      'Fast',
+      'Speedy',
+      'Nimble',
+      'Long-eared',
+      'Twitchy',
+      'Alert',
+      'Watchful',
     ],
     nouns: [
-      "Rabbit",
-      "Bunny",
-      "Cottontail",
-      "Hare",
-      "Jackrabbit",
-      "Lop",
-      "Rex",
-      "Flemish",
-      "Dutch",
-      "Angora",
-      "Kit",
-      "Leveret",
-      "Hopper",
-      "Thumper",
-      "Cotton",
-      "Fluff",
-      "Whiskers",
-      "Ears",
-      "Tail",
-      "Paw",
-      "Warren",
-      "Burrow",
-      "Hutch",
-      "Carrot",
-      "Clover",
+      'Rabbit',
+      'Bunny',
+      'Cottontail',
+      'Hare',
+      'Jackrabbit',
+      'Lop',
+      'Rex',
+      'Flemish',
+      'Dutch',
+      'Angora',
+      'Kit',
+      'Leveret',
+      'Hopper',
+      'Thumper',
+      'Cotton',
+      'Fluff',
+      'Whiskers',
+      'Ears',
+      'Tail',
+      'Paw',
+      'Warren',
+      'Burrow',
+      'Hutch',
+      'Carrot',
+      'Clover',
     ],
   },
 
   // === FOXES (🦊) ===
   foxes: {
     adjectives: [
-      "Foxy",
-      "Clever",
-      "Cunning",
-      "Sly",
-      "Wily",
-      "Crafty",
-      "Sneaky",
-      "Stealthy",
-      "Quick",
-      "Swift",
-      "Nimble",
-      "Agile",
-      "Alert",
-      "Sharp",
-      "Keen",
-      "Perceptive",
-      "Observant",
-      "Red",
-      "Orange",
-      "Russet",
-      "Tawny",
-      "Bushy-tailed",
-      "Woodland",
-      "Forest",
-      "Wild",
+      'Foxy',
+      'Clever',
+      'Cunning',
+      'Sly',
+      'Wily',
+      'Crafty',
+      'Sneaky',
+      'Stealthy',
+      'Quick',
+      'Swift',
+      'Nimble',
+      'Agile',
+      'Alert',
+      'Sharp',
+      'Keen',
+      'Perceptive',
+      'Observant',
+      'Red',
+      'Orange',
+      'Russet',
+      'Tawny',
+      'Bushy-tailed',
+      'Woodland',
+      'Forest',
+      'Wild',
     ],
     nouns: [
-      "Fox",
-      "Vixen",
-      "Kit",
-      "Reynard",
-      "Tod",
-      "Red-fox",
-      "Arctic-fox",
-      "Silver-fox",
-      "Swift-fox",
-      "Gray-fox",
-      "Fennec",
-      "Corsac",
-      "Kit-fox",
-      "Tail",
-      "Brush",
-      "Muzzle",
-      "Snout",
-      "Den",
-      "Burrow",
-      "Earth",
-      "Skulk",
-      "Leash",
-      "Hunter",
-      "Prowler",
-      "Shadow",
+      'Fox',
+      'Vixen',
+      'Kit',
+      'Reynard',
+      'Tod',
+      'Red-fox',
+      'Arctic-fox',
+      'Silver-fox',
+      'Swift-fox',
+      'Gray-fox',
+      'Fennec',
+      'Corsac',
+      'Kit-fox',
+      'Tail',
+      'Brush',
+      'Muzzle',
+      'Snout',
+      'Den',
+      'Burrow',
+      'Earth',
+      'Skulk',
+      'Leash',
+      'Hunter',
+      'Prowler',
+      'Shadow',
     ],
   },
 
   // === BEARS (🐻🐼🐻‍❄️) ===
   bears: {
     adjectives: [
-      "Bear-like",
-      "Strong",
-      "Mighty",
-      "Powerful",
-      "Robust",
-      "Sturdy",
-      "Hefty",
-      "Burly",
-      "Brawny",
-      "Husky",
-      "Cuddly",
-      "Fuzzy",
-      "Fluffy",
-      "Soft",
-      "Gentle",
-      "Fierce",
-      "Ferocious",
-      "Wild",
-      "Grizzly",
-      "Polar",
-      "Black",
-      "Brown",
-      "White",
-      "Panda",
-      "Hibernating",
+      'Bear-like',
+      'Strong',
+      'Mighty',
+      'Powerful',
+      'Robust',
+      'Sturdy',
+      'Hefty',
+      'Burly',
+      'Brawny',
+      'Husky',
+      'Cuddly',
+      'Fuzzy',
+      'Fluffy',
+      'Soft',
+      'Gentle',
+      'Fierce',
+      'Ferocious',
+      'Wild',
+      'Grizzly',
+      'Polar',
+      'Black',
+      'Brown',
+      'White',
+      'Panda',
+      'Hibernating',
     ],
     nouns: [
-      "Bear",
-      "Cub",
-      "Grizzly",
-      "Brown-bear",
-      "Black-bear",
-      "Polar-bear",
-      "Panda",
-      "Sun-bear",
-      "Moon-bear",
-      "Sloth-bear",
-      "Kodiak",
-      "Ursine",
-      "Bruin",
-      "Teddy",
-      "Mama-bear",
-      "Papa-bear",
-      "Baby-bear",
-      "Den",
-      "Cave",
-      "Forest",
-      "Mountain",
-      "Wilderness",
-      "Salmon",
-      "Honey",
-      "Claw",
+      'Bear',
+      'Cub',
+      'Grizzly',
+      'Brown-bear',
+      'Black-bear',
+      'Polar-bear',
+      'Panda',
+      'Sun-bear',
+      'Moon-bear',
+      'Sloth-bear',
+      'Kodiak',
+      'Ursine',
+      'Bruin',
+      'Teddy',
+      'Mama-bear',
+      'Papa-bear',
+      'Baby-bear',
+      'Den',
+      'Cave',
+      'Forest',
+      'Mountain',
+      'Wilderness',
+      'Salmon',
+      'Honey',
+      'Claw',
     ],
   },
 
   // === KOALAS (🐨) ===
   koalas: {
     adjectives: [
-      "Sleepy",
-      "Drowsy",
-      "Dozy",
-      "Snoozy",
-      "Relaxed",
-      "Calm",
-      "Peaceful",
-      "Tranquil",
-      "Serene",
-      "Laid-back",
-      "Easygoing",
-      "Mellow",
-      "Chill",
-      "Cuddly",
-      "Huggable",
-      "Fuzzy",
-      "Fluffy",
-      "Soft",
-      "Cute",
-      "Adorable",
-      "Australian",
-      "Eucalyptus",
-      "Tree-dwelling",
-      "Marsupial",
-      "Gray",
+      'Sleepy',
+      'Drowsy',
+      'Dozy',
+      'Snoozy',
+      'Relaxed',
+      'Calm',
+      'Peaceful',
+      'Tranquil',
+      'Serene',
+      'Laid-back',
+      'Easygoing',
+      'Mellow',
+      'Chill',
+      'Cuddly',
+      'Huggable',
+      'Fuzzy',
+      'Fluffy',
+      'Soft',
+      'Cute',
+      'Adorable',
+      'Australian',
+      'Eucalyptus',
+      'Tree-dwelling',
+      'Marsupial',
+      'Gray',
     ],
     nouns: [
-      "Koala",
-      "Bear",
-      "Joey",
-      "Marsupial",
-      "Treehugger",
-      "Climber",
-      "Sleeper",
-      "Napper",
-      "Snoozer",
-      "Cuddler",
-      "Eucalyptus",
-      "Gumtree",
-      "Bush",
-      "Outback",
-      "Down-under",
-      "Aussie",
-      "Mate",
-      "Pouch",
-      "Paw",
-      "Claw",
-      "Fur",
-      "Branch",
-      "Leaf",
-      "Tree",
-      "Forest",
+      'Koala',
+      'Bear',
+      'Joey',
+      'Marsupial',
+      'Treehugger',
+      'Climber',
+      'Sleeper',
+      'Napper',
+      'Snoozer',
+      'Cuddler',
+      'Eucalyptus',
+      'Gumtree',
+      'Bush',
+      'Outback',
+      'Down-under',
+      'Aussie',
+      'Mate',
+      'Pouch',
+      'Paw',
+      'Claw',
+      'Fur',
+      'Branch',
+      'Leaf',
+      'Tree',
+      'Forest',
     ],
   },
 
   // === BOVINE (🐮) ===
   bovine: {
     adjectives: [
-      "Bovine",
-      "Pastoral",
-      "Farm",
-      "Country",
-      "Rural",
-      "Agricultural",
-      "Dairy",
-      "Milk",
-      "Gentle",
-      "Docile",
-      "Calm",
-      "Peaceful",
-      "Patient",
-      "Grazing",
-      "Munching",
-      "Chewing",
-      "Mooing",
-      "Spotted",
-      "Black-and-white",
-      "Brown",
-      "Holstein",
-      "Jersey",
-      "Angus",
-      "Hereford",
+      'Bovine',
+      'Pastoral',
+      'Farm',
+      'Country',
+      'Rural',
+      'Agricultural',
+      'Dairy',
+      'Milk',
+      'Gentle',
+      'Docile',
+      'Calm',
+      'Peaceful',
+      'Patient',
+      'Grazing',
+      'Munching',
+      'Chewing',
+      'Mooing',
+      'Spotted',
+      'Black-and-white',
+      'Brown',
+      'Holstein',
+      'Jersey',
+      'Angus',
+      'Hereford',
     ],
     nouns: [
-      "Cow",
-      "Bull",
-      "Calf",
-      "Cattle",
-      "Bovine",
-      "Heifer",
-      "Steer",
-      "Ox",
-      "Oxen",
-      "Dairy",
-      "Milker",
-      "Moo-cow",
-      "Bessie",
-      "Daisy",
-      "Buttercup",
-      "Farm",
-      "Barn",
-      "Pasture",
-      "Meadow",
-      "Field",
-      "Grassland",
-      "Herd",
-      "Udder",
-      "Bell",
-      "Hay",
-      "Grass",
+      'Cow',
+      'Bull',
+      'Calf',
+      'Cattle',
+      'Bovine',
+      'Heifer',
+      'Steer',
+      'Ox',
+      'Oxen',
+      'Dairy',
+      'Milker',
+      'Moo-cow',
+      'Bessie',
+      'Daisy',
+      'Buttercup',
+      'Farm',
+      'Barn',
+      'Pasture',
+      'Meadow',
+      'Field',
+      'Grassland',
+      'Herd',
+      'Udder',
+      'Bell',
+      'Hay',
+      'Grass',
     ],
   },
 
   // === PIGS (🐷) ===
   pigs: {
     adjectives: [
-      "Porcine",
-      "Piggy",
-      "Farm",
-      "Barnyard",
-      "Pink",
-      "Rosy",
-      "Plump",
-      "Round",
-      "Chubby",
-      "Rotund",
-      "Cute",
-      "Adorable",
-      "Happy",
-      "Cheerful",
-      "Snorting",
-      "Oinking",
-      "Snuffling",
-      "Rooting",
-      "Muddy",
-      "Dirty",
-      "Clean",
-      "Smart",
-      "Intelligent",
-      "Clever",
-      "Resourceful",
+      'Porcine',
+      'Piggy',
+      'Farm',
+      'Barnyard',
+      'Pink',
+      'Rosy',
+      'Plump',
+      'Round',
+      'Chubby',
+      'Rotund',
+      'Cute',
+      'Adorable',
+      'Happy',
+      'Cheerful',
+      'Snorting',
+      'Oinking',
+      'Snuffling',
+      'Rooting',
+      'Muddy',
+      'Dirty',
+      'Clean',
+      'Smart',
+      'Intelligent',
+      'Clever',
+      'Resourceful',
     ],
     nouns: [
-      "Pig",
-      "Piglet",
-      "Hog",
-      "Swine",
-      "Porker",
-      "Boar",
-      "Sow",
-      "Piggy",
-      "Oinker",
-      "Snorter",
-      "Hamlet",
-      "Bacon",
-      "Pork",
-      "Farm",
-      "Barnyard",
-      "Sty",
-      "Pen",
-      "Mud",
-      "Slop",
-      "Trough",
-      "Snout",
-      "Tail",
-      "Curly-tail",
-      "Truffle",
-      "Hunter",
+      'Pig',
+      'Piglet',
+      'Hog',
+      'Swine',
+      'Porker',
+      'Boar',
+      'Sow',
+      'Piggy',
+      'Oinker',
+      'Snorter',
+      'Hamlet',
+      'Bacon',
+      'Pork',
+      'Farm',
+      'Barnyard',
+      'Sty',
+      'Pen',
+      'Mud',
+      'Slop',
+      'Trough',
+      'Snout',
+      'Tail',
+      'Curly-tail',
+      'Truffle',
+      'Hunter',
     ],
   },
 
   // === FROGS (🐸) ===
   frogs: {
     adjectives: [
-      "Amphibian",
-      "Hopping",
-      "Jumping",
-      "Leaping",
-      "Bouncing",
-      "Croaking",
-      "Ribbiting",
-      "Green",
-      "Slimy",
-      "Wet",
-      "Moist",
-      "Damp",
-      "Aquatic",
-      "Semi-aquatic",
-      "Pond",
-      "Swamp",
-      "Marsh",
-      "Bog",
-      "Lily-pad",
-      "Spotted",
-      "Speckled",
-      "Smooth",
-      "Bumpy",
-      "Warty",
-      "Webbed",
+      'Amphibian',
+      'Hopping',
+      'Jumping',
+      'Leaping',
+      'Bouncing',
+      'Croaking',
+      'Ribbiting',
+      'Green',
+      'Slimy',
+      'Wet',
+      'Moist',
+      'Damp',
+      'Aquatic',
+      'Semi-aquatic',
+      'Pond',
+      'Swamp',
+      'Marsh',
+      'Bog',
+      'Lily-pad',
+      'Spotted',
+      'Speckled',
+      'Smooth',
+      'Bumpy',
+      'Warty',
+      'Webbed',
     ],
     nouns: [
-      "Frog",
-      "Toad",
-      "Tadpole",
-      "Pollywog",
-      "Bullfrog",
-      "Tree-frog",
-      "Spring-peeper",
-      "Croaker",
-      "Ribbiter",
-      "Hopper",
-      "Jumper",
-      "Leaper",
-      "Amphibian",
-      "Pond",
-      "Lily-pad",
-      "Lotus",
-      "Bog",
-      "Swamp",
-      "Marsh",
-      "Creek",
-      "Stream",
-      "Water",
-      "Tongue",
-      "Leg",
-      "Webfoot",
+      'Frog',
+      'Toad',
+      'Tadpole',
+      'Pollywog',
+      'Bullfrog',
+      'Tree-frog',
+      'Spring-peeper',
+      'Croaker',
+      'Ribbiter',
+      'Hopper',
+      'Jumper',
+      'Leaper',
+      'Amphibian',
+      'Pond',
+      'Lily-pad',
+      'Lotus',
+      'Bog',
+      'Swamp',
+      'Marsh',
+      'Creek',
+      'Stream',
+      'Water',
+      'Tongue',
+      'Leg',
+      'Webfoot',
     ],
   },
 
   // === MONKEYS (🐵🙈🙉🙊🐒) ===
   monkeys: {
     adjectives: [
-      "Monkey",
-      "Simian",
-      "Primate",
-      "Mischievous",
-      "Playful",
-      "Silly",
-      "Goofy",
-      "Funny",
-      "Amusing",
-      "Entertaining",
-      "Clever",
-      "Smart",
-      "Intelligent",
-      "Quick",
-      "Agile",
-      "Nimble",
-      "Acrobatic",
-      "Swinging",
-      "Climbing",
-      "Tree-dwelling",
-      "Jungle",
-      "Tropical",
-      "Curious",
-      "Sneaky",
+      'Monkey',
+      'Simian',
+      'Primate',
+      'Mischievous',
+      'Playful',
+      'Silly',
+      'Goofy',
+      'Funny',
+      'Amusing',
+      'Entertaining',
+      'Clever',
+      'Smart',
+      'Intelligent',
+      'Quick',
+      'Agile',
+      'Nimble',
+      'Acrobatic',
+      'Swinging',
+      'Climbing',
+      'Tree-dwelling',
+      'Jungle',
+      'Tropical',
+      'Curious',
+      'Sneaky',
     ],
     nouns: [
-      "Monkey",
-      "Ape",
-      "Chimp",
-      "Chimpanzee",
-      "Gorilla",
-      "Orangutan",
-      "Baboon",
-      "Macaque",
-      "Capuchin",
-      "Tamarin",
-      "Marmoset",
-      "Howler",
-      "Spider-monkey",
-      "Squirrel-monkey",
-      "Proboscis",
-      "Primate",
-      "Simian",
-      "Tree",
-      "Branch",
-      "Vine",
-      "Jungle",
-      "Canopy",
-      "Tail",
-      "Banana",
-      "Coconut",
+      'Monkey',
+      'Ape',
+      'Chimp',
+      'Chimpanzee',
+      'Gorilla',
+      'Orangutan',
+      'Baboon',
+      'Macaque',
+      'Capuchin',
+      'Tamarin',
+      'Marmoset',
+      'Howler',
+      'Spider-monkey',
+      'Squirrel-monkey',
+      'Proboscis',
+      'Primate',
+      'Simian',
+      'Tree',
+      'Branch',
+      'Vine',
+      'Jungle',
+      'Canopy',
+      'Tail',
+      'Banana',
+      'Coconut',
     ],
   },
 
   // === BIRDS (🦆🐧🐦🐤🐣🐥🦅🦉) ===
   birds: {
     adjectives: [
-      "Avian",
-      "Feathered",
-      "Winged",
-      "Flying",
-      "Soaring",
-      "Gliding",
-      "Fluttering",
-      "Chirping",
-      "Singing",
-      "Tweeting",
-      "Warbling",
-      "Whistling",
-      "Early-bird",
-      "Migratory",
-      "Nesting",
-      "Perched",
-      "Roosting",
-      "Swift",
-      "Fast",
-      "Graceful",
-      "Majestic",
-      "Noble",
-      "Wild",
-      "Free",
-      "Sky-bound",
+      'Avian',
+      'Feathered',
+      'Winged',
+      'Flying',
+      'Soaring',
+      'Gliding',
+      'Fluttering',
+      'Chirping',
+      'Singing',
+      'Tweeting',
+      'Warbling',
+      'Whistling',
+      'Early-bird',
+      'Migratory',
+      'Nesting',
+      'Perched',
+      'Roosting',
+      'Swift',
+      'Fast',
+      'Graceful',
+      'Majestic',
+      'Noble',
+      'Wild',
+      'Free',
+      'Sky-bound',
     ],
     nouns: [
-      "Bird",
-      "Birdie",
-      "Feather",
-      "Wing",
-      "Beak",
-      "Robin",
-      "Sparrow",
-      "Finch",
-      "Warbler",
-      "Thrush",
-      "Cardinal",
-      "Jay",
-      "Crow",
-      "Raven",
-      "Hawk",
-      "Eagle",
-      "Falcon",
-      "Owl",
-      "Hoot",
-      "Penguin",
-      "Duck",
-      "Duckling",
-      "Chick",
-      "Nestling",
-      "Fledgling",
-      "Nest",
-      "Egg",
-      "Sky",
-      "Cloud",
+      'Bird',
+      'Birdie',
+      'Feather',
+      'Wing',
+      'Beak',
+      'Robin',
+      'Sparrow',
+      'Finch',
+      'Warbler',
+      'Thrush',
+      'Cardinal',
+      'Jay',
+      'Crow',
+      'Raven',
+      'Hawk',
+      'Eagle',
+      'Falcon',
+      'Owl',
+      'Hoot',
+      'Penguin',
+      'Duck',
+      'Duckling',
+      'Chick',
+      'Nestling',
+      'Fledgling',
+      'Nest',
+      'Egg',
+      'Sky',
+      'Cloud',
     ],
   },
 
   // === BATS (🦇) ===
   bats: {
     adjectives: [
-      "Nocturnal",
-      "Night-flying",
-      "Dark",
-      "Shadow",
-      "Cave-dwelling",
-      "Echolocating",
-      "Sonar",
-      "Ultrasonic",
-      "Winged",
-      "Flying",
-      "Hanging",
-      "Upside-down",
-      "Mysterious",
-      "Spooky",
-      "Gothic",
-      "Vampiric",
-      "Fruit",
-      "Insect-eating",
-      "Small",
-      "Tiny",
-      "Furry",
-      "Leathery",
-      "Membranous",
-      "Acrobatic",
+      'Nocturnal',
+      'Night-flying',
+      'Dark',
+      'Shadow',
+      'Cave-dwelling',
+      'Echolocating',
+      'Sonar',
+      'Ultrasonic',
+      'Winged',
+      'Flying',
+      'Hanging',
+      'Upside-down',
+      'Mysterious',
+      'Spooky',
+      'Gothic',
+      'Vampiric',
+      'Fruit',
+      'Insect-eating',
+      'Small',
+      'Tiny',
+      'Furry',
+      'Leathery',
+      'Membranous',
+      'Acrobatic',
     ],
     nouns: [
-      "Bat",
-      "Chiroptera",
-      "Microbat",
-      "Megabat",
-      "Fruit-bat",
-      "Flying-fox",
-      "Vampire-bat",
-      "Horseshoe-bat",
-      "Pipistrelle",
-      "Echo",
-      "Sonar",
-      "Wing",
-      "Membrane",
-      "Cave",
-      "Belfry",
-      "Roost",
-      "Colony",
-      "Night",
-      "Dusk",
-      "Dawn",
-      "Twilight",
-      "Moon",
-      "Star",
-      "Shadow",
-      "Hunter",
+      'Bat',
+      'Chiroptera',
+      'Microbat',
+      'Megabat',
+      'Fruit-bat',
+      'Flying-fox',
+      'Vampire-bat',
+      'Horseshoe-bat',
+      'Pipistrelle',
+      'Echo',
+      'Sonar',
+      'Wing',
+      'Membrane',
+      'Cave',
+      'Belfry',
+      'Roost',
+      'Colony',
+      'Night',
+      'Dusk',
+      'Dawn',
+      'Twilight',
+      'Moon',
+      'Star',
+      'Shadow',
+      'Hunter',
     ],
   },
 
   // === BOARS (🐗) ===
   boars: {
     adjectives: [
-      "Wild",
-      "Feral",
-      "Fierce",
-      "Ferocious",
-      "Tough",
-      "Rugged",
-      "Bristly",
-      "Hairy",
-      "Tusked",
-      "Charging",
-      "Rushing",
-      "Rooting",
-      "Foraging",
-      "Forest",
-      "Woodland",
-      "Mountain",
-      "Strong",
-      "Powerful",
-      "Sturdy",
-      "Hardy",
-      "Resilient",
-      "Untamed",
-      "Savage",
-      "Aggressive",
+      'Wild',
+      'Feral',
+      'Fierce',
+      'Ferocious',
+      'Tough',
+      'Rugged',
+      'Bristly',
+      'Hairy',
+      'Tusked',
+      'Charging',
+      'Rushing',
+      'Rooting',
+      'Foraging',
+      'Forest',
+      'Woodland',
+      'Mountain',
+      'Strong',
+      'Powerful',
+      'Sturdy',
+      'Hardy',
+      'Resilient',
+      'Untamed',
+      'Savage',
+      'Aggressive',
     ],
     nouns: [
-      "Boar",
-      "Wild-boar",
-      "Warthog",
-      "Peccary",
-      "Tusker",
-      "Bristle-back",
-      "Hog",
-      "Swine",
-      "Pig",
-      "Hunter",
-      "Forager",
-      "Rooter",
-      "Beast",
-      "Creature",
-      "Forest",
-      "Woods",
-      "Thicket",
-      "Undergrowth",
-      "Tusk",
-      "Snout",
-      "Hide",
-      "Bristle",
-      "Charge",
-      "Rush",
-      "Thunder",
+      'Boar',
+      'Wild-boar',
+      'Warthog',
+      'Peccary',
+      'Tusker',
+      'Bristle-back',
+      'Hog',
+      'Swine',
+      'Pig',
+      'Hunter',
+      'Forager',
+      'Rooter',
+      'Beast',
+      'Creature',
+      'Forest',
+      'Woods',
+      'Thicket',
+      'Undergrowth',
+      'Tusk',
+      'Snout',
+      'Hide',
+      'Bristle',
+      'Charge',
+      'Rush',
+      'Thunder',
     ],
   },
 
   // === HORSES (🐴🦄) ===
   horses: {
     adjectives: [
-      "Equine",
-      "Majestic",
-      "Noble",
-      "Graceful",
-      "Elegant",
-      "Swift",
-      "Fast",
-      "Running",
-      "Galloping",
-      "Trotting",
-      "Cantering",
-      "Prancing",
-      "Wild",
-      "Free",
-      "Spirited",
-      "Untamed",
-      "Strong",
-      "Powerful",
-      "Mighty",
-      "Muscular",
-      "Magical",
-      "Mystical",
-      "Enchanted",
-      "Unicorn",
-      "Pegasus",
+      'Equine',
+      'Majestic',
+      'Noble',
+      'Graceful',
+      'Elegant',
+      'Swift',
+      'Fast',
+      'Running',
+      'Galloping',
+      'Trotting',
+      'Cantering',
+      'Prancing',
+      'Wild',
+      'Free',
+      'Spirited',
+      'Untamed',
+      'Strong',
+      'Powerful',
+      'Mighty',
+      'Muscular',
+      'Magical',
+      'Mystical',
+      'Enchanted',
+      'Unicorn',
+      'Pegasus',
     ],
     nouns: [
-      "Horse",
-      "Mare",
-      "Stallion",
-      "Gelding",
-      "Foal",
-      "Colt",
-      "Filly",
-      "Pony",
-      "Steed",
-      "Charger",
-      "Courser",
-      "Mustang",
-      "Bronco",
-      "Pacer",
-      "Trotter",
-      "Racer",
-      "Unicorn",
-      "Pegasus",
-      "Alicorn",
-      "Mane",
-      "Tail",
-      "Hoof",
-      "Gallop",
-      "Thunder",
-      "Wind",
+      'Horse',
+      'Mare',
+      'Stallion',
+      'Gelding',
+      'Foal',
+      'Colt',
+      'Filly',
+      'Pony',
+      'Steed',
+      'Charger',
+      'Courser',
+      'Mustang',
+      'Bronco',
+      'Pacer',
+      'Trotter',
+      'Racer',
+      'Unicorn',
+      'Pegasus',
+      'Alicorn',
+      'Mane',
+      'Tail',
+      'Hoof',
+      'Gallop',
+      'Thunder',
+      'Wind',
     ],
   },
 
   // === INSECTS (🐝🐛🦋) ===
   insects: {
     adjectives: [
-      "Tiny",
-      "Small",
-      "Miniature",
-      "Micro",
-      "Buzzing",
-      "Humming",
-      "Flying",
-      "Fluttering",
-      "Hovering",
-      "Busy",
-      "Industrious",
-      "Hard-working",
-      "Diligent",
-      "Social",
-      "Colony",
-      "Hive",
-      "Swarm",
-      "Colorful",
-      "Bright",
-      "Beautiful",
-      "Delicate",
-      "Fragile",
-      "Metamorphic",
-      "Transforming",
-      "Emerging",
+      'Tiny',
+      'Small',
+      'Miniature',
+      'Micro',
+      'Buzzing',
+      'Humming',
+      'Flying',
+      'Fluttering',
+      'Hovering',
+      'Busy',
+      'Industrious',
+      'Hard-working',
+      'Diligent',
+      'Social',
+      'Colony',
+      'Hive',
+      'Swarm',
+      'Colorful',
+      'Bright',
+      'Beautiful',
+      'Delicate',
+      'Fragile',
+      'Metamorphic',
+      'Transforming',
+      'Emerging',
     ],
     nouns: [
-      "Bee",
-      "Honeybee",
-      "Bumblebee",
-      "Worker",
-      "Queen",
-      "Drone",
-      "Hive",
-      "Colony",
-      "Swarm",
-      "Buzz",
-      "Caterpillar",
-      "Larva",
-      "Chrysalis",
-      "Cocoon",
-      "Butterfly",
-      "Monarch",
-      "Swallowtail",
-      "Morpho",
-      "Wing",
-      "Flutter",
-      "Nectar",
-      "Pollen",
-      "Flower",
-      "Garden",
-      "Meadow",
+      'Bee',
+      'Honeybee',
+      'Bumblebee',
+      'Worker',
+      'Queen',
+      'Drone',
+      'Hive',
+      'Colony',
+      'Swarm',
+      'Buzz',
+      'Caterpillar',
+      'Larva',
+      'Chrysalis',
+      'Cocoon',
+      'Butterfly',
+      'Monarch',
+      'Swallowtail',
+      'Morpho',
+      'Wing',
+      'Flutter',
+      'Nectar',
+      'Pollen',
+      'Flower',
+      'Garden',
+      'Meadow',
     ],
   },
 
   // === STARS (⭐🌟💫✨) ===
   stars: {
     adjectives: [
-      "Stellar",
-      "Starry",
-      "Celestial",
-      "Cosmic",
-      "Astral",
-      "Heavenly",
-      "Divine",
-      "Radiant",
-      "Shining",
-      "Glowing",
-      "Glittering",
-      "Sparkling",
-      "Twinkling",
-      "Shimmering",
-      "Luminous",
-      "Brilliant",
-      "Dazzling",
-      "Blazing",
-      "Incandescent",
-      "Iridescent",
-      "Opalescent",
-      "Prismatic",
-      "Rainbow",
-      "Bright",
+      'Stellar',
+      'Starry',
+      'Celestial',
+      'Cosmic',
+      'Astral',
+      'Heavenly',
+      'Divine',
+      'Radiant',
+      'Shining',
+      'Glowing',
+      'Glittering',
+      'Sparkling',
+      'Twinkling',
+      'Shimmering',
+      'Luminous',
+      'Brilliant',
+      'Dazzling',
+      'Blazing',
+      'Incandescent',
+      'Iridescent',
+      'Opalescent',
+      'Prismatic',
+      'Rainbow',
+      'Bright',
     ],
     nouns: [
-      "Star",
-      "Starlight",
-      "Supernova",
-      "Nova",
-      "Pulsar",
-      "Quasar",
-      "Nebula",
-      "Galaxy",
-      "Constellation",
-      "Comet",
-      "Meteor",
-      "Shooting-star",
-      "Asteroid",
-      "Celestial",
-      "Cosmos",
-      "Universe",
-      "Heaven",
-      "Sky",
-      "Night-sky",
-      "Twinkle",
-      "Shimmer",
-      "Sparkle",
-      "Glitter",
-      "Shine",
-      "Gleam",
+      'Star',
+      'Starlight',
+      'Supernova',
+      'Nova',
+      'Pulsar',
+      'Quasar',
+      'Nebula',
+      'Galaxy',
+      'Constellation',
+      'Comet',
+      'Meteor',
+      'Shooting-star',
+      'Asteroid',
+      'Celestial',
+      'Cosmos',
+      'Universe',
+      'Heaven',
+      'Sky',
+      'Night-sky',
+      'Twinkle',
+      'Shimmer',
+      'Sparkle',
+      'Glitter',
+      'Shine',
+      'Gleam',
     ],
   },
 
   // === POWER (⚡🔥) ===
   power: {
     adjectives: [
-      "Powerful",
-      "Mighty",
-      "Strong",
-      "Potent",
-      "Intense",
-      "Fierce",
-      "Ferocious",
-      "Electric",
-      "Shocking",
-      "Stunning",
-      "Electrifying",
-      "Charged",
-      "Voltage",
-      "Blazing",
-      "Burning",
-      "Scorching",
-      "Searing",
-      "Flaming",
-      "Fiery",
-      "Hot",
-      "Infernal",
-      "Volcanic",
-      "Explosive",
-      "Dynamic",
-      "Energetic",
+      'Powerful',
+      'Mighty',
+      'Strong',
+      'Potent',
+      'Intense',
+      'Fierce',
+      'Ferocious',
+      'Electric',
+      'Shocking',
+      'Stunning',
+      'Electrifying',
+      'Charged',
+      'Voltage',
+      'Blazing',
+      'Burning',
+      'Scorching',
+      'Searing',
+      'Flaming',
+      'Fiery',
+      'Hot',
+      'Infernal',
+      'Volcanic',
+      'Explosive',
+      'Dynamic',
+      'Energetic',
     ],
     nouns: [
-      "Lightning",
-      "Thunder",
-      "Bolt",
-      "Strike",
-      "Shock",
-      "Voltage",
-      "Current",
-      "Charge",
-      "Spark",
-      "Arc",
-      "Flash",
-      "Fire",
-      "Flame",
-      "Blaze",
-      "Inferno",
-      "Pyre",
-      "Ember",
-      "Cinder",
-      "Ash",
-      "Phoenix",
-      "Dragon",
-      "Salamander",
-      "Power",
-      "Energy",
-      "Force",
-      "Might",
-      "Strength",
+      'Lightning',
+      'Thunder',
+      'Bolt',
+      'Strike',
+      'Shock',
+      'Voltage',
+      'Current',
+      'Charge',
+      'Spark',
+      'Arc',
+      'Flash',
+      'Fire',
+      'Flame',
+      'Blaze',
+      'Inferno',
+      'Pyre',
+      'Ember',
+      'Cinder',
+      'Ash',
+      'Phoenix',
+      'Dragon',
+      'Salamander',
+      'Power',
+      'Energy',
+      'Force',
+      'Might',
+      'Strength',
     ],
   },
 
   // === RAINBOW (🌈) ===
   rainbow: {
     adjectives: [
-      "Rainbow",
-      "Colorful",
-      "Multicolored",
-      "Prismatic",
-      "Spectrum",
-      "Chromatic",
-      "Vibrant",
-      "Vivid",
-      "Bright",
-      "Brilliant",
-      "Radiant",
-      "Luminous",
-      "Glowing",
-      "Shimmering",
-      "Iridescent",
-      "Opalescent",
-      "Pearlescent",
-      "Lustrous",
-      "Happy",
-      "Joyful",
-      "Cheerful",
-      "Optimistic",
-      "Hopeful",
-      "Positive",
-      "Sunny",
+      'Rainbow',
+      'Colorful',
+      'Multicolored',
+      'Prismatic',
+      'Spectrum',
+      'Chromatic',
+      'Vibrant',
+      'Vivid',
+      'Bright',
+      'Brilliant',
+      'Radiant',
+      'Luminous',
+      'Glowing',
+      'Shimmering',
+      'Iridescent',
+      'Opalescent',
+      'Pearlescent',
+      'Lustrous',
+      'Happy',
+      'Joyful',
+      'Cheerful',
+      'Optimistic',
+      'Hopeful',
+      'Positive',
+      'Sunny',
     ],
     nouns: [
-      "Rainbow",
-      "Arc",
-      "Prism",
-      "Spectrum",
-      "Color",
-      "Hue",
-      "Tint",
-      "Shade",
-      "Red",
-      "Orange",
-      "Yellow",
-      "Green",
-      "Blue",
-      "Indigo",
-      "Violet",
-      "Purple",
-      "ROYGBIV",
-      "Light",
-      "Refraction",
-      "Ray",
-      "Beam",
-      "Promise",
-      "Hope",
-      "Dream",
-      "Magic",
-      "Wonder",
+      'Rainbow',
+      'Arc',
+      'Prism',
+      'Spectrum',
+      'Color',
+      'Hue',
+      'Tint',
+      'Shade',
+      'Red',
+      'Orange',
+      'Yellow',
+      'Green',
+      'Blue',
+      'Indigo',
+      'Violet',
+      'Purple',
+      'ROYGBIV',
+      'Light',
+      'Refraction',
+      'Ray',
+      'Beam',
+      'Promise',
+      'Hope',
+      'Dream',
+      'Magic',
+      'Wonder',
     ],
   },
 
   // === ENTERTAINMENT (🎪🎨🎯🎲🎮🕹️) ===
   entertainment: {
     adjectives: [
-      "Entertaining",
-      "Fun",
-      "Playful",
-      "Amusing",
-      "Enjoyable",
-      "Exciting",
-      "Thrilling",
-      "Spectacular",
-      "Amazing",
-      "Awesome",
-      "Epic",
-      "Legendary",
-      "Gaming",
-      "Playing",
-      "Competing",
-      "Winning",
-      "Artistic",
-      "Creative",
-      "Imaginative",
-      "Colorful",
-      "Vibrant",
-      "Expressive",
-      "Skillful",
-      "Expert",
+      'Entertaining',
+      'Fun',
+      'Playful',
+      'Amusing',
+      'Enjoyable',
+      'Exciting',
+      'Thrilling',
+      'Spectacular',
+      'Amazing',
+      'Awesome',
+      'Epic',
+      'Legendary',
+      'Gaming',
+      'Playing',
+      'Competing',
+      'Winning',
+      'Artistic',
+      'Creative',
+      'Imaginative',
+      'Colorful',
+      'Vibrant',
+      'Expressive',
+      'Skillful',
+      'Expert',
     ],
     nouns: [
-      "Player",
-      "Gamer",
-      "Competitor",
-      "Champion",
-      "Winner",
-      "Victor",
-      "Ace",
-      "Pro",
-      "Master",
-      "Expert",
-      "Artist",
-      "Painter",
-      "Creator",
-      "Maker",
-      "Builder",
-      "Designer",
-      "Archer",
-      "Bullseye",
-      "Target",
-      "Dice",
-      "Die",
-      "Cube",
-      "Roller",
-      "Console",
-      "Joystick",
-      "Controller",
-      "Game",
+      'Player',
+      'Gamer',
+      'Competitor',
+      'Champion',
+      'Winner',
+      'Victor',
+      'Ace',
+      'Pro',
+      'Master',
+      'Expert',
+      'Artist',
+      'Painter',
+      'Creator',
+      'Maker',
+      'Builder',
+      'Designer',
+      'Archer',
+      'Bullseye',
+      'Target',
+      'Dice',
+      'Die',
+      'Cube',
+      'Roller',
+      'Console',
+      'Joystick',
+      'Controller',
+      'Game',
     ],
   },
 
   // === MUSIC (🎸🎺🎷🥁🎻🎤🎧) ===
   music: {
     adjectives: [
-      "Musical",
-      "Melodic",
-      "Harmonic",
-      "Rhythmic",
-      "Tuneful",
-      "Lyrical",
-      "Symphonic",
-      "Orchestral",
-      "Jazzy",
-      "Bluesy",
-      "Rockin",
-      "Groovin",
-      "Funky",
-      "Soulful",
-      "Classical",
-      "Modern",
-      "Electric",
-      "Acoustic",
-      "Amplified",
-      "Loud",
-      "Soft",
-      "Gentle",
-      "Powerful",
-      "Passionate",
-      "Expressive",
+      'Musical',
+      'Melodic',
+      'Harmonic',
+      'Rhythmic',
+      'Tuneful',
+      'Lyrical',
+      'Symphonic',
+      'Orchestral',
+      'Jazzy',
+      'Bluesy',
+      'Rockin',
+      'Groovin',
+      'Funky',
+      'Soulful',
+      'Classical',
+      'Modern',
+      'Electric',
+      'Acoustic',
+      'Amplified',
+      'Loud',
+      'Soft',
+      'Gentle',
+      'Powerful',
+      'Passionate',
+      'Expressive',
     ],
     nouns: [
-      "Musician",
-      "Player",
-      "Performer",
-      "Artist",
-      "Maestro",
-      "Virtuoso",
-      "Guitarist",
-      "Bassist",
-      "Drummer",
-      "Percussionist",
-      "Pianist",
-      "Violinist",
-      "Trumpeter",
-      "Saxophonist",
-      "Vocalist",
-      "Singer",
-      "Crooner",
-      "DJ",
-      "Producer",
-      "Composer",
-      "Songwriter",
-      "Melody",
-      "Harmony",
-      "Rhythm",
-      "Beat",
-      "Note",
-      "Chord",
-      "Song",
-      "Tune",
+      'Musician',
+      'Player',
+      'Performer',
+      'Artist',
+      'Maestro',
+      'Virtuoso',
+      'Guitarist',
+      'Bassist',
+      'Drummer',
+      'Percussionist',
+      'Pianist',
+      'Violinist',
+      'Trumpeter',
+      'Saxophonist',
+      'Vocalist',
+      'Singer',
+      'Crooner',
+      'DJ',
+      'Producer',
+      'Composer',
+      'Songwriter',
+      'Melody',
+      'Harmony',
+      'Rhythm',
+      'Beat',
+      'Note',
+      'Chord',
+      'Song',
+      'Tune',
     ],
   },
 
   // === FILM (🎬🎥) ===
   film: {
     adjectives: [
-      "Cinematic",
-      "Theatrical",
-      "Dramatic",
-      "Epic",
-      "Blockbuster",
-      "Award-winning",
-      "Starring",
-      "Featured",
-      "Leading",
-      "Supporting",
-      "Directing",
-      "Producing",
-      "Filming",
-      "Shooting",
-      "Recording",
-      "Documenting",
-      "Action",
-      "Comedy",
-      "Drama",
-      "Thriller",
-      "Suspense",
-      "Mystery",
-      "Romance",
-      "Sci-fi",
-      "Fantasy",
+      'Cinematic',
+      'Theatrical',
+      'Dramatic',
+      'Epic',
+      'Blockbuster',
+      'Award-winning',
+      'Starring',
+      'Featured',
+      'Leading',
+      'Supporting',
+      'Directing',
+      'Producing',
+      'Filming',
+      'Shooting',
+      'Recording',
+      'Documenting',
+      'Action',
+      'Comedy',
+      'Drama',
+      'Thriller',
+      'Suspense',
+      'Mystery',
+      'Romance',
+      'Sci-fi',
+      'Fantasy',
     ],
     nouns: [
-      "Director",
-      "Producer",
-      "Filmmaker",
-      "Cinematographer",
-      "Camera-operator",
-      "Actor",
-      "Actress",
-      "Star",
-      "Lead",
-      "Supporting",
-      "Extra",
-      "Stunt-double",
-      "Editor",
-      "Cutter",
-      "Splicer",
-      "Auteur",
-      "Visionary",
-      "Artist",
-      "Creator",
-      "Scene",
-      "Shot",
-      "Take",
-      "Cut",
-      "Action",
-      "Wrap",
-      "Premiere",
-      "Oscar",
+      'Director',
+      'Producer',
+      'Filmmaker',
+      'Cinematographer',
+      'Camera-operator',
+      'Actor',
+      'Actress',
+      'Star',
+      'Lead',
+      'Supporting',
+      'Extra',
+      'Stunt-double',
+      'Editor',
+      'Cutter',
+      'Splicer',
+      'Auteur',
+      'Visionary',
+      'Artist',
+      'Creator',
+      'Scene',
+      'Shot',
+      'Take',
+      'Cut',
+      'Action',
+      'Wrap',
+      'Premiere',
+      'Oscar',
     ],
   },
 
   // === FRUITS (🍎🍊🍌🍇🍓🥝🍑🥭🍍🥥) ===
   fruits: {
     adjectives: [
-      "Fresh",
-      "Ripe",
-      "Juicy",
-      "Sweet",
-      "Tangy",
-      "Tart",
-      "Zesty",
-      "Citrus",
-      "Tropical",
-      "Exotic",
-      "Luscious",
-      "Succulent",
-      "Delicious",
-      "Tasty",
-      "Yummy",
-      "Scrumptious",
-      "Mouthwatering",
-      "Appetizing",
-      "Organic",
-      "Natural",
-      "Healthy",
-      "Nutritious",
-      "Vitamin-rich",
-      "Colorful",
-      "Vibrant",
+      'Fresh',
+      'Ripe',
+      'Juicy',
+      'Sweet',
+      'Tangy',
+      'Tart',
+      'Zesty',
+      'Citrus',
+      'Tropical',
+      'Exotic',
+      'Luscious',
+      'Succulent',
+      'Delicious',
+      'Tasty',
+      'Yummy',
+      'Scrumptious',
+      'Mouthwatering',
+      'Appetizing',
+      'Organic',
+      'Natural',
+      'Healthy',
+      'Nutritious',
+      'Vitamin-rich',
+      'Colorful',
+      'Vibrant',
     ],
     nouns: [
-      "Apple",
-      "Orange",
-      "Banana",
-      "Grape",
-      "Berry",
-      "Strawberry",
-      "Blueberry",
-      "Raspberry",
-      "Blackberry",
-      "Kiwi",
-      "Peach",
-      "Mango",
-      "Pineapple",
-      "Coconut",
-      "Cherry",
-      "Plum",
-      "Pear",
-      "Watermelon",
-      "Cantaloupe",
-      "Honeydew",
-      "Papaya",
-      "Guava",
-      "Passionfruit",
-      "Lychee",
-      "Dragonfruit",
-      "Smoothie",
+      'Apple',
+      'Orange',
+      'Banana',
+      'Grape',
+      'Berry',
+      'Strawberry',
+      'Blueberry',
+      'Raspberry',
+      'Blackberry',
+      'Kiwi',
+      'Peach',
+      'Mango',
+      'Pineapple',
+      'Coconut',
+      'Cherry',
+      'Plum',
+      'Pear',
+      'Watermelon',
+      'Cantaloupe',
+      'Honeydew',
+      'Papaya',
+      'Guava',
+      'Passionfruit',
+      'Lychee',
+      'Dragonfruit',
+      'Smoothie',
     ],
   },
 
   // === VEGETABLES (🥑🍆🥕🌽🌶️🫑🥒🥬🥦🧄🧅🍄🥜🌰) ===
   vegetables: {
     adjectives: [
-      "Fresh",
-      "Crisp",
-      "Crunchy",
-      "Green",
-      "Leafy",
-      "Healthy",
-      "Nutritious",
-      "Organic",
-      "Natural",
-      "Garden-fresh",
-      "Farm-fresh",
-      "Homegrown",
-      "Local",
-      "Seasonal",
-      "Raw",
-      "Cooked",
-      "Roasted",
-      "Steamed",
-      "Grilled",
-      "Sautéed",
-      "Colorful",
-      "Vibrant",
-      "Vitamin-rich",
-      "Fiber-rich",
-      "Low-calorie",
+      'Fresh',
+      'Crisp',
+      'Crunchy',
+      'Green',
+      'Leafy',
+      'Healthy',
+      'Nutritious',
+      'Organic',
+      'Natural',
+      'Garden-fresh',
+      'Farm-fresh',
+      'Homegrown',
+      'Local',
+      'Seasonal',
+      'Raw',
+      'Cooked',
+      'Roasted',
+      'Steamed',
+      'Grilled',
+      'Sautéed',
+      'Colorful',
+      'Vibrant',
+      'Vitamin-rich',
+      'Fiber-rich',
+      'Low-calorie',
     ],
     nouns: [
-      "Veggie",
-      "Vegetable",
-      "Avocado",
-      "Eggplant",
-      "Carrot",
-      "Corn",
-      "Pepper",
-      "Bell-pepper",
-      "Cucumber",
-      "Lettuce",
-      "Spinach",
-      "Kale",
-      "Broccoli",
-      "Cauliflower",
-      "Cabbage",
-      "Garlic",
-      "Onion",
-      "Mushroom",
-      "Peanut",
-      "Chestnut",
-      "Tomato",
-      "Potato",
-      "Root",
-      "Stem",
-      "Leaf",
-      "Garden",
+      'Veggie',
+      'Vegetable',
+      'Avocado',
+      'Eggplant',
+      'Carrot',
+      'Corn',
+      'Pepper',
+      'Bell-pepper',
+      'Cucumber',
+      'Lettuce',
+      'Spinach',
+      'Kale',
+      'Broccoli',
+      'Cauliflower',
+      'Cabbage',
+      'Garlic',
+      'Onion',
+      'Mushroom',
+      'Peanut',
+      'Chestnut',
+      'Tomato',
+      'Potato',
+      'Root',
+      'Stem',
+      'Leaf',
+      'Garden',
     ],
   },
-};
+}
 
 /**
  * Emoji-specific word lists for ultra-personalized names
@@ -2728,3711 +2728,3700 @@ export const THEMED_WORD_LISTS: Record<string, ThemedWordList> = {
  */
 export const EMOJI_SPECIFIC_WORDS: Record<string, ThemedWordList> = {
   // === ABACUS ===
-  "🧮": {
+  '🧮': {
     adjectives: [
-      "Calculating",
-      "Sliding",
-      "Beaded",
-      "Counting",
-      "Ancient",
-      "Skilled",
-      "Master",
-      "Lightning-fast",
-      "Precise",
-      "Traditional",
+      'Calculating',
+      'Sliding',
+      'Beaded',
+      'Counting',
+      'Ancient',
+      'Skilled',
+      'Master',
+      'Lightning-fast',
+      'Precise',
+      'Traditional',
     ],
     nouns: [
-      "Abacist",
-      "Counter",
-      "Calculator",
-      "Mathematician",
-      "Abacus",
-      "Reckoner",
-      "Comptroller",
-      "Tallier",
-      "Computer",
-      "Prodigy",
+      'Abacist',
+      'Counter',
+      'Calculator',
+      'Mathematician',
+      'Abacus',
+      'Reckoner',
+      'Comptroller',
+      'Tallier',
+      'Computer',
+      'Prodigy',
     ],
   },
 
   // === HAPPY FACES ===
-  "😀": {
+  '😀': {
     adjectives: [
-      "Grinning",
-      "Beaming",
-      "Ear-to-ear",
-      "Big-smiled",
-      "Toothy",
-      "Wide-smiling",
-      "Radiant",
-      "Bright-faced",
-      "Happy-go-lucky",
-      "Exuberant",
+      'Grinning',
+      'Beaming',
+      'Ear-to-ear',
+      'Big-smiled',
+      'Toothy',
+      'Wide-smiling',
+      'Radiant',
+      'Bright-faced',
+      'Happy-go-lucky',
+      'Exuberant',
     ],
     nouns: [
-      "Grinner",
-      "Beamer",
-      "Smiler",
-      "Happy-face",
-      "Sunshine",
-      "Joy",
-      "Grin",
-      "Beam",
-      "Brightener",
-      "Cheermeister",
+      'Grinner',
+      'Beamer',
+      'Smiler',
+      'Happy-face',
+      'Sunshine',
+      'Joy',
+      'Grin',
+      'Beam',
+      'Brightener',
+      'Cheermeister',
     ],
   },
-  "😃": {
+  '😃': {
     adjectives: [
-      "Smiling",
-      "Open-mouthed",
-      "Enthusiastic",
-      "Excited",
-      "Gleeful",
-      "Thrilled",
-      "Delighted",
-      "Elated",
-      "Overjoyed",
-      "Ecstatic",
+      'Smiling',
+      'Open-mouthed',
+      'Enthusiastic',
+      'Excited',
+      'Gleeful',
+      'Thrilled',
+      'Delighted',
+      'Elated',
+      'Overjoyed',
+      'Ecstatic',
     ],
     nouns: [
-      "Smiler",
-      "Enthusiast",
-      "Excitement",
-      "Thrill",
-      "Delight",
-      "Joy-spreader",
-      "Happy-camper",
-      "Cheer",
-      "Spark",
-      "Energizer",
+      'Smiler',
+      'Enthusiast',
+      'Excitement',
+      'Thrill',
+      'Delight',
+      'Joy-spreader',
+      'Happy-camper',
+      'Cheer',
+      'Spark',
+      'Energizer',
     ],
   },
-  "😄": {
+  '😄': {
     adjectives: [
-      "Squinty-eyed",
-      "Crinkle-eyed",
-      "Eye-smiling",
-      "Genuine",
-      "Warm",
-      "Heartfelt",
-      "True",
-      "Real",
-      "Authentic",
-      "Sincere",
+      'Squinty-eyed',
+      'Crinkle-eyed',
+      'Eye-smiling',
+      'Genuine',
+      'Warm',
+      'Heartfelt',
+      'True',
+      'Real',
+      'Authentic',
+      'Sincere',
     ],
     nouns: [
-      "Eye-smiler",
-      "Warmth",
-      "Heart",
-      "Truth",
-      "Genuineness",
-      "Sincerity",
-      "Crinkler",
-      "Twinkler",
-      "Sparkler",
-      "Glower",
+      'Eye-smiler',
+      'Warmth',
+      'Heart',
+      'Truth',
+      'Genuineness',
+      'Sincerity',
+      'Crinkler',
+      'Twinkler',
+      'Sparkler',
+      'Glower',
     ],
   },
-  "😁": {
+  '😁': {
     adjectives: [
-      "Beaming",
-      "Squinting",
-      "Bright",
-      "Radiant",
-      "Luminous",
-      "Glowing",
-      "Dazzling",
-      "Brilliant",
-      "Resplendent",
-      "Shining",
+      'Beaming',
+      'Squinting',
+      'Bright',
+      'Radiant',
+      'Luminous',
+      'Glowing',
+      'Dazzling',
+      'Brilliant',
+      'Resplendent',
+      'Shining',
     ],
     nouns: [
-      "Beamer",
-      "Squinter",
-      "Brightness",
-      "Radiance",
-      "Luminosity",
-      "Glow",
-      "Dazzle",
-      "Brilliance",
-      "Light",
-      "Shine",
+      'Beamer',
+      'Squinter',
+      'Brightness',
+      'Radiance',
+      'Luminosity',
+      'Glow',
+      'Dazzle',
+      'Brilliance',
+      'Light',
+      'Shine',
     ],
   },
-  "😆": {
+  '😆': {
     adjectives: [
-      "Laughing",
-      "Cackling",
-      "Chuckling",
-      "Giggling",
-      "Chortling",
-      "Snickering",
-      "Guffawing",
-      "Howling",
-      "Roaring",
-      "Belly-laughing",
+      'Laughing',
+      'Cackling',
+      'Chuckling',
+      'Giggling',
+      'Chortling',
+      'Snickering',
+      'Guffawing',
+      'Howling',
+      'Roaring',
+      'Belly-laughing',
     ],
     nouns: [
-      "Laugher",
-      "Cackler",
-      "Chuckler",
-      "Giggler",
-      "Chortler",
-      "Snickerer",
-      "Guffawer",
-      "Howler",
-      "Roarer",
-      "Jokester",
+      'Laugher',
+      'Cackler',
+      'Chuckler',
+      'Giggler',
+      'Chortler',
+      'Snickerer',
+      'Guffawer',
+      'Howler',
+      'Roarer',
+      'Jokester',
     ],
   },
-  "😅": {
+  '😅': {
     adjectives: [
-      "Nervous",
-      "Sweaty",
-      "Awkward",
-      "Sheepish",
-      "Embarrassed",
-      "Self-conscious",
-      "Flustered",
-      "Uncomfortable",
-      "Relieved",
-      "Phew",
+      'Nervous',
+      'Sweaty',
+      'Awkward',
+      'Sheepish',
+      'Embarrassed',
+      'Self-conscious',
+      'Flustered',
+      'Uncomfortable',
+      'Relieved',
+      'Phew',
     ],
     nouns: [
-      "Sweater",
-      "Phew-er",
-      "Relief",
-      "Awkwardness",
-      "Embarrassment",
-      "Sheepishness",
-      "Fluster",
-      "Nervousness",
-      "Dropper",
-      "Wiper",
+      'Sweater',
+      'Phew-er',
+      'Relief',
+      'Awkwardness',
+      'Embarrassment',
+      'Sheepishness',
+      'Fluster',
+      'Nervousness',
+      'Dropper',
+      'Wiper',
     ],
   },
-  "🤣": {
+  '🤣': {
     adjectives: [
-      "Rolling",
-      "ROFL",
-      "Floor-rolling",
-      "Hysterical",
-      "Side-splitting",
-      "Tear-jerking",
-      "Hilarious",
-      "Uproarious",
-      "Riotous",
-      "Knee-slapping",
+      'Rolling',
+      'ROFL',
+      'Floor-rolling',
+      'Hysterical',
+      'Side-splitting',
+      'Tear-jerking',
+      'Hilarious',
+      'Uproarious',
+      'Riotous',
+      'Knee-slapping',
     ],
     nouns: [
-      "Roller",
-      "ROFL-er",
-      "Hysterics",
-      "Comedian",
-      "Joker",
-      "Prankster",
-      "Laugher",
-      "Cackler",
-      "Whooper",
-      "Howler",
+      'Roller',
+      'ROFL-er',
+      'Hysterics',
+      'Comedian',
+      'Joker',
+      'Prankster',
+      'Laugher',
+      'Cackler',
+      'Whooper',
+      'Howler',
     ],
   },
-  "😂": {
+  '😂': {
     adjectives: [
-      "Crying-laughing",
-      "Tear-streaming",
-      "Joy-crying",
-      "Weeping-happy",
-      "Tear-filled",
-      "Sobbing-happy",
-      "Blubbering-joy",
-      "Bawling-happy",
-      "Wailing-joy",
-      "Sniffling-happy",
+      'Crying-laughing',
+      'Tear-streaming',
+      'Joy-crying',
+      'Weeping-happy',
+      'Tear-filled',
+      'Sobbing-happy',
+      'Blubbering-joy',
+      'Bawling-happy',
+      'Wailing-joy',
+      'Sniffling-happy',
     ],
     nouns: [
-      "Joy-crier",
-      "Happy-weeper",
-      "Tear-streamer",
-      "Laugher",
-      "Sobber",
-      "Blubberer",
-      "Bawler",
-      "Wailer",
-      "Tear",
-      "Joy",
+      'Joy-crier',
+      'Happy-weeper',
+      'Tear-streamer',
+      'Laugher',
+      'Sobber',
+      'Blubberer',
+      'Bawler',
+      'Wailer',
+      'Tear',
+      'Joy',
     ],
   },
-  "🙂": {
+  '🙂': {
     adjectives: [
-      "Slightly-smiling",
-      "Content",
-      "Satisfied",
-      "Pleasant",
-      "Agreeable",
-      "Nice",
-      "Kind",
-      "Gentle",
-      "Mild",
-      "Soft",
+      'Slightly-smiling',
+      'Content',
+      'Satisfied',
+      'Pleasant',
+      'Agreeable',
+      'Nice',
+      'Kind',
+      'Gentle',
+      'Mild',
+      'Soft',
     ],
     nouns: [
-      "Contenter",
-      "Satisfier",
-      "Pleasantness",
-      "Agreeability",
-      "Niceness",
-      "Kindness",
-      "Gentleness",
-      "Mildness",
-      "Softness",
-      "Ease",
+      'Contenter',
+      'Satisfier',
+      'Pleasantness',
+      'Agreeability',
+      'Niceness',
+      'Kindness',
+      'Gentleness',
+      'Mildness',
+      'Softness',
+      'Ease',
     ],
   },
-  "😉": {
+  '😉': {
     adjectives: [
-      "Winking",
-      "Sly",
-      "Knowing",
-      "Conspiratorial",
-      "In-the-know",
-      "Secretive",
-      "Mysterious",
-      "Playful",
-      "Flirty",
-      "Cheeky",
+      'Winking',
+      'Sly',
+      'Knowing',
+      'Conspiratorial',
+      'In-the-know',
+      'Secretive',
+      'Mysterious',
+      'Playful',
+      'Flirty',
+      'Cheeky',
     ],
     nouns: [
-      "Winker",
-      "Slyster",
-      "Know-it-all",
-      "Conspirator",
-      "Secret-keeper",
-      "Mystery",
-      "Flirt",
-      "Cheek",
-      "Tease",
-      "Charmer",
+      'Winker',
+      'Slyster',
+      'Know-it-all',
+      'Conspirator',
+      'Secret-keeper',
+      'Mystery',
+      'Flirt',
+      'Cheek',
+      'Tease',
+      'Charmer',
     ],
   },
-  "😊": {
+  '😊': {
     adjectives: [
-      "Blushing",
-      "Warm",
-      "Rosy-cheeked",
-      "Flushed",
-      "Pink",
-      "Glowing",
-      "Bashful",
-      "Modest",
-      "Humble",
-      "Sweet",
+      'Blushing',
+      'Warm',
+      'Rosy-cheeked',
+      'Flushed',
+      'Pink',
+      'Glowing',
+      'Bashful',
+      'Modest',
+      'Humble',
+      'Sweet',
     ],
     nouns: [
-      "Blusher",
-      "Warmer",
-      "Rosiness",
-      "Flush",
-      "Pink",
-      "Glow",
-      "Bashfulness",
-      "Modesty",
-      "Humility",
-      "Sweetness",
+      'Blusher',
+      'Warmer',
+      'Rosiness',
+      'Flush',
+      'Pink',
+      'Glow',
+      'Bashfulness',
+      'Modesty',
+      'Humility',
+      'Sweetness',
     ],
   },
-  "😇": {
+  '😇': {
     adjectives: [
-      "Angelic",
-      "Innocent",
-      "Pure",
-      "Holy",
-      "Divine",
-      "Blessed",
-      "Saintly",
-      "Virtuous",
-      "Righteous",
-      "Good",
+      'Angelic',
+      'Innocent',
+      'Pure',
+      'Holy',
+      'Divine',
+      'Blessed',
+      'Saintly',
+      'Virtuous',
+      'Righteous',
+      'Good',
     ],
     nouns: [
-      "Angel",
-      "Innocent",
-      "Pure-heart",
-      "Saint",
-      "Virtue",
-      "Righteousness",
-      "Goodness",
-      "Halo",
-      "Wing",
-      "Heaven",
+      'Angel',
+      'Innocent',
+      'Pure-heart',
+      'Saint',
+      'Virtue',
+      'Righteousness',
+      'Goodness',
+      'Halo',
+      'Wing',
+      'Heaven',
     ],
   },
 
   // === LOVE & AFFECTION ===
-  "🥰": {
+  '🥰': {
     adjectives: [
-      "Heart-eyed",
-      "Loving",
-      "Adoring",
-      "Smitten",
-      "Enamored",
-      "Infatuated",
-      "Besotted",
-      "Head-over-heels",
-      "Lovesick",
-      "Doting",
+      'Heart-eyed',
+      'Loving',
+      'Adoring',
+      'Smitten',
+      'Enamored',
+      'Infatuated',
+      'Besotted',
+      'Head-over-heels',
+      'Lovesick',
+      'Doting',
     ],
     nouns: [
-      "Lover",
-      "Adorer",
-      "Sweetheart",
-      "Heart-eyes",
-      "Cupid",
-      "Love",
-      "Hearts",
-      "Affection",
-      "Devotion",
-      "Romance",
+      'Lover',
+      'Adorer',
+      'Sweetheart',
+      'Heart-eyes',
+      'Cupid',
+      'Love',
+      'Hearts',
+      'Affection',
+      'Devotion',
+      'Romance',
     ],
   },
-  "😍": {
+  '😍': {
     adjectives: [
-      "Starry-eyed",
-      "Awestruck",
-      "Amazed",
-      "Dazzled",
-      "Captivated",
-      "Mesmerized",
-      "Enchanted",
-      "Spellbound",
-      "Enthralled",
-      "Bedazzled",
+      'Starry-eyed',
+      'Awestruck',
+      'Amazed',
+      'Dazzled',
+      'Captivated',
+      'Mesmerized',
+      'Enchanted',
+      'Spellbound',
+      'Enthralled',
+      'Bedazzled',
     ],
     nouns: [
-      "Star-eyes",
-      "Wonder",
-      "Awe",
-      "Dazzle",
-      "Captivation",
-      "Mesmerizer",
-      "Enchantment",
-      "Spell",
-      "Thrall",
-      "Magic",
+      'Star-eyes',
+      'Wonder',
+      'Awe',
+      'Dazzle',
+      'Captivation',
+      'Mesmerizer',
+      'Enchantment',
+      'Spell',
+      'Thrall',
+      'Magic',
     ],
   },
-  "🤩": {
+  '🤩': {
     adjectives: [
-      "Starstruck",
-      "Excited",
-      "Thrilled",
-      "Pumped",
-      "Hyped",
-      "Amped",
-      "Psyched",
-      "Stoked",
-      "Electrified",
-      "Energized",
+      'Starstruck',
+      'Excited',
+      'Thrilled',
+      'Pumped',
+      'Hyped',
+      'Amped',
+      'Psyched',
+      'Stoked',
+      'Electrified',
+      'Energized',
     ],
     nouns: [
-      "Superstar",
-      "Star",
-      "Celebrity",
-      "VIP",
-      "Excitement",
-      "Thrill",
-      "Hype",
-      "Amp",
-      "Energy",
-      "Electricity",
+      'Superstar',
+      'Star',
+      'Celebrity',
+      'VIP',
+      'Excitement',
+      'Thrill',
+      'Hype',
+      'Amp',
+      'Energy',
+      'Electricity',
     ],
   },
-  "😘": {
+  '😘': {
     adjectives: [
-      "Kiss-blowing",
-      "Smooching",
-      "Affectionate",
-      "Tender",
-      "Loving",
-      "Sweet",
-      "Caring",
-      "Gentle",
-      "Romantic",
-      "Amorous",
+      'Kiss-blowing',
+      'Smooching',
+      'Affectionate',
+      'Tender',
+      'Loving',
+      'Sweet',
+      'Caring',
+      'Gentle',
+      'Romantic',
+      'Amorous',
     ],
     nouns: [
-      "Kisser",
-      "Smoocher",
-      "Kiss",
-      "Smooch",
-      "Peck",
-      "Affection",
-      "Tenderness",
-      "Love",
-      "Romance",
-      "Heart",
+      'Kisser',
+      'Smoocher',
+      'Kiss',
+      'Smooch',
+      'Peck',
+      'Affection',
+      'Tenderness',
+      'Love',
+      'Romance',
+      'Heart',
     ],
   },
-  "😗": {
+  '😗': {
     adjectives: [
-      "Puckering",
-      "Kissing",
-      "Smoochy",
-      "Lip-pursing",
-      "Duck-facing",
-      "Pouting",
-      "Pout-lipped",
-      "Bee-stung",
-      "Full-lipped",
-      "Plump-lipped",
+      'Puckering',
+      'Kissing',
+      'Smoochy',
+      'Lip-pursing',
+      'Duck-facing',
+      'Pouting',
+      'Pout-lipped',
+      'Bee-stung',
+      'Full-lipped',
+      'Plump-lipped',
     ],
     nouns: [
-      "Puckerer",
-      "Kissy-face",
-      "Smooch",
-      "Pucker",
-      "Lips",
-      "Pout",
-      "Duck-face",
-      "Bee-sting",
-      "Kiss",
-      "Muah",
+      'Puckerer',
+      'Kissy-face',
+      'Smooch',
+      'Pucker',
+      'Lips',
+      'Pout',
+      'Duck-face',
+      'Bee-sting',
+      'Kiss',
+      'Muah',
     ],
   },
-  "😚": {
+  '😚': {
     adjectives: [
-      "Blushing-kiss",
-      "Shy-kiss",
-      "Sweet-kiss",
-      "Tender-kiss",
-      "Gentle-kiss",
-      "Soft-kiss",
-      "Warm-kiss",
-      "Loving-kiss",
-      "Caring-kiss",
-      "Affectionate-kiss",
+      'Blushing-kiss',
+      'Shy-kiss',
+      'Sweet-kiss',
+      'Tender-kiss',
+      'Gentle-kiss',
+      'Soft-kiss',
+      'Warm-kiss',
+      'Loving-kiss',
+      'Caring-kiss',
+      'Affectionate-kiss',
     ],
     nouns: [
-      "Shy-kisser",
-      "Sweet-kiss",
-      "Tender-kiss",
-      "Blush",
-      "Gentleness",
-      "Softness",
-      "Warmth",
-      "Care",
-      "Affection",
-      "Love",
+      'Shy-kisser',
+      'Sweet-kiss',
+      'Tender-kiss',
+      'Blush',
+      'Gentleness',
+      'Softness',
+      'Warmth',
+      'Care',
+      'Affection',
+      'Love',
     ],
   },
 
   // === PLAYFUL ===
-  "😋": {
+  '😋': {
     adjectives: [
-      "Yummy",
-      "Delicious",
-      "Tasty",
-      "Savory",
-      "Scrumptious",
-      "Delectable",
-      "Mouthwatering",
-      "Appetizing",
-      "Lip-smacking",
-      "Tongue-out",
+      'Yummy',
+      'Delicious',
+      'Tasty',
+      'Savory',
+      'Scrumptious',
+      'Delectable',
+      'Mouthwatering',
+      'Appetizing',
+      'Lip-smacking',
+      'Tongue-out',
     ],
     nouns: [
-      "Foodie",
-      "Taste-tester",
-      "Yum",
-      "Deliciousness",
-      "Flavor",
-      "Taste",
-      "Tongue",
-      "Lick",
-      "Savorer",
-      "Epicure",
+      'Foodie',
+      'Taste-tester',
+      'Yum',
+      'Deliciousness',
+      'Flavor',
+      'Taste',
+      'Tongue',
+      'Lick',
+      'Savorer',
+      'Epicure',
     ],
   },
-  "😛": {
+  '😛': {
     adjectives: [
-      "Tongue-out",
-      "Teasing",
-      "Playful",
-      "Cheeky",
-      "Sassy",
-      "Impish",
-      "Mischievous",
-      "Bratty",
-      "Naughty",
-      "Rascally",
+      'Tongue-out',
+      'Teasing',
+      'Playful',
+      'Cheeky',
+      'Sassy',
+      'Impish',
+      'Mischievous',
+      'Bratty',
+      'Naughty',
+      'Rascally',
     ],
     nouns: [
-      "Teaser",
-      "Cheeky-monkey",
-      "Sassy-pants",
-      "Imp",
-      "Mischief",
-      "Brat",
-      "Rascal",
-      "Tongue",
-      "Raspberry",
-      "Blep",
+      'Teaser',
+      'Cheeky-monkey',
+      'Sassy-pants',
+      'Imp',
+      'Mischief',
+      'Brat',
+      'Rascal',
+      'Tongue',
+      'Raspberry',
+      'Blep',
     ],
   },
-  "😝": {
+  '😝': {
     adjectives: [
-      "Squinty-tongue",
-      "Silly",
-      "Goofy",
-      "Wacky",
-      "Zany",
-      "Absurd",
-      "Ridiculous",
-      "Ludicrous",
-      "Preposterous",
-      "Wild",
+      'Squinty-tongue',
+      'Silly',
+      'Goofy',
+      'Wacky',
+      'Zany',
+      'Absurd',
+      'Ridiculous',
+      'Ludicrous',
+      'Preposterous',
+      'Wild',
     ],
     nouns: [
-      "Goofball",
-      "Silly-billy",
-      "Wacko",
-      "Zany",
-      "Nut",
-      "Kook",
-      "Clown",
-      "Jester",
-      "Fool",
-      "Joker",
+      'Goofball',
+      'Silly-billy',
+      'Wacko',
+      'Zany',
+      'Nut',
+      'Kook',
+      'Clown',
+      'Jester',
+      'Fool',
+      'Joker',
     ],
   },
-  "😜": {
+  '😜': {
     adjectives: [
-      "Winking-tongue",
-      "Playful",
-      "Flirty",
-      "Saucy",
-      "Pert",
-      "Sassy",
-      "Bold",
-      "Daring",
-      "Audacious",
-      "Brazen",
+      'Winking-tongue',
+      'Playful',
+      'Flirty',
+      'Saucy',
+      'Pert',
+      'Sassy',
+      'Bold',
+      'Daring',
+      'Audacious',
+      'Brazen',
     ],
     nouns: [
-      "Flirt",
-      "Winker",
-      "Sassy-pants",
-      "Saucepot",
-      "Tease",
-      "Minx",
-      "Vixen",
-      "Charmer",
-      "Coquette",
-      "Boldness",
+      'Flirt',
+      'Winker',
+      'Sassy-pants',
+      'Saucepot',
+      'Tease',
+      'Minx',
+      'Vixen',
+      'Charmer',
+      'Coquette',
+      'Boldness',
     ],
   },
-  "🤪": {
+  '🤪': {
     adjectives: [
-      "Crazy",
-      "Wild",
-      "Bonkers",
-      "Bananas",
-      "Nuts",
-      "Loopy",
-      "Wacky",
-      "Zany",
-      "Madcap",
-      "Unhinged",
+      'Crazy',
+      'Wild',
+      'Bonkers',
+      'Bananas',
+      'Nuts',
+      'Loopy',
+      'Wacky',
+      'Zany',
+      'Madcap',
+      'Unhinged',
     ],
     nouns: [
-      "Wildcard",
-      "Maniac",
-      "Lunatic",
-      "Madness",
-      "Chaos",
-      "Mayhem",
-      "Havoc",
-      "Pandemonium",
-      "Bedlam",
-      "Nutcase",
+      'Wildcard',
+      'Maniac',
+      'Lunatic',
+      'Madness',
+      'Chaos',
+      'Mayhem',
+      'Havoc',
+      'Pandemonium',
+      'Bedlam',
+      'Nutcase',
     ],
   },
 
   // === CLEVER ===
-  "🤨": {
+  '🤨': {
     adjectives: [
-      "Skeptical",
-      "Doubtful",
-      "Questioning",
-      "Suspicious",
-      "Dubious",
-      "Wary",
-      "Distrustful",
-      "Uncertain",
-      "Raised-eyebrow",
-      "Quizzical",
+      'Skeptical',
+      'Doubtful',
+      'Questioning',
+      'Suspicious',
+      'Dubious',
+      'Wary',
+      'Distrustful',
+      'Uncertain',
+      'Raised-eyebrow',
+      'Quizzical',
     ],
     nouns: [
-      "Skeptic",
-      "Doubter",
-      "Questioner",
-      "Eyebrow",
-      "Suspicion",
-      "Doubt",
-      "Question",
-      "Query",
-      "Inquiry",
-      "Probe",
+      'Skeptic',
+      'Doubter',
+      'Questioner',
+      'Eyebrow',
+      'Suspicion',
+      'Doubt',
+      'Question',
+      'Query',
+      'Inquiry',
+      'Probe',
     ],
   },
-  "🧐": {
+  '🧐': {
     adjectives: [
-      "Monocled",
-      "Sophisticated",
-      "Refined",
-      "Cultured",
-      "Educated",
-      "Learned",
-      "Well-read",
-      "Scholarly",
-      "Academic",
-      "Intellectual",
+      'Monocled',
+      'Sophisticated',
+      'Refined',
+      'Cultured',
+      'Educated',
+      'Learned',
+      'Well-read',
+      'Scholarly',
+      'Academic',
+      'Intellectual',
     ],
     nouns: [
-      "Aristocrat",
-      "Sophisticate",
-      "Intellectual",
-      "Scholar",
-      "Professor",
-      "Monocle",
-      "Gentleman",
-      "Lady",
-      "Connoisseur",
-      "Savant",
+      'Aristocrat',
+      'Sophisticate',
+      'Intellectual',
+      'Scholar',
+      'Professor',
+      'Monocle',
+      'Gentleman',
+      'Lady',
+      'Connoisseur',
+      'Savant',
     ],
   },
-  "🤓": {
+  '🤓': {
     adjectives: [
-      "Nerdy",
-      "Geeky",
-      "Bookish",
-      "Studious",
-      "Academic",
-      "Brainy",
-      "Smart",
-      "Intelligent",
-      "Clever",
-      "Genius",
+      'Nerdy',
+      'Geeky',
+      'Bookish',
+      'Studious',
+      'Academic',
+      'Brainy',
+      'Smart',
+      'Intelligent',
+      'Clever',
+      'Genius',
     ],
     nouns: [
-      "Nerd",
-      "Geek",
-      "Bookworm",
-      "Brain",
-      "Brainiac",
-      "Egghead",
-      "Smarty-pants",
-      "Know-it-all",
-      "Genius",
-      "Whiz",
+      'Nerd',
+      'Geek',
+      'Bookworm',
+      'Brain',
+      'Brainiac',
+      'Egghead',
+      'Smarty-pants',
+      'Know-it-all',
+      'Genius',
+      'Whiz',
     ],
   },
 
   // === COOL ===
-  "😎": {
+  '😎': {
     adjectives: [
-      "Cool",
-      "Sunglassed",
-      "Shaded",
-      "Hip",
-      "Rad",
-      "Fly",
-      "Fresh",
-      "Dope",
-      "Lit",
-      "Fire",
+      'Cool',
+      'Sunglassed',
+      'Shaded',
+      'Hip',
+      'Rad',
+      'Fly',
+      'Fresh',
+      'Dope',
+      'Lit',
+      'Fire',
     ],
     nouns: [
-      "Cool-cat",
-      "Dude",
-      "Shades",
-      "Sunglasses",
-      "Aviators",
-      "Ray-Bans",
-      "Coolness",
-      "Swag",
-      "Style",
-      "Vibe",
+      'Cool-cat',
+      'Dude',
+      'Shades',
+      'Sunglasses',
+      'Aviators',
+      'Ray-Bans',
+      'Coolness',
+      'Swag',
+      'Style',
+      'Vibe',
     ],
   },
-  "🥸": {
+  '🥸': {
     adjectives: [
-      "Disguised",
-      "Incognito",
-      "Undercover",
-      "Secret",
-      "Hidden",
-      "Masked",
-      "Concealed",
-      "Camouflaged",
-      "Stealthy",
-      "Covert",
+      'Disguised',
+      'Incognito',
+      'Undercover',
+      'Secret',
+      'Hidden',
+      'Masked',
+      'Concealed',
+      'Camouflaged',
+      'Stealthy',
+      'Covert',
     ],
     nouns: [
-      "Disguise",
-      "Incognito",
-      "Spy",
-      "Agent",
-      "Detective",
-      "Sleuth",
-      "Investigator",
-      "Nose",
-      "Glasses",
-      "Mustache",
+      'Disguise',
+      'Incognito',
+      'Spy',
+      'Agent',
+      'Detective',
+      'Sleuth',
+      'Investigator',
+      'Nose',
+      'Glasses',
+      'Mustache',
     ],
   },
 
   // === PARTY ===
-  "🥳": {
+  '🥳': {
     adjectives: [
-      "Party",
-      "Celebrating",
-      "Festive",
-      "Birthday",
-      "Anniversary",
-      "Jubilant",
-      "Revelrous",
-      "Merrymaking",
-      "Confetti",
-      "Balloon",
+      'Party',
+      'Celebrating',
+      'Festive',
+      'Birthday',
+      'Anniversary',
+      'Jubilant',
+      'Revelrous',
+      'Merrymaking',
+      'Confetti',
+      'Balloon',
     ],
     nouns: [
-      "Partier",
-      "Celebrator",
-      "Birthday-person",
-      "Guest-of-honor",
-      "VIP",
-      "Confetti",
-      "Balloon",
-      "Streamer",
-      "Cake",
-      "Celebration",
+      'Partier',
+      'Celebrator',
+      'Birthday-person',
+      'Guest-of-honor',
+      'VIP',
+      'Confetti',
+      'Balloon',
+      'Streamer',
+      'Cake',
+      'Celebration',
     ],
   },
 
   // === MOODY ===
-  "😏": {
+  '😏': {
     adjectives: [
-      "Smirking",
-      "Sly",
-      "Devious",
-      "Cunning",
-      "Scheming",
-      "Plotting",
-      "Wily",
-      "Crafty",
-      "Sneaky",
-      "Underhanded",
+      'Smirking',
+      'Sly',
+      'Devious',
+      'Cunning',
+      'Scheming',
+      'Plotting',
+      'Wily',
+      'Crafty',
+      'Sneaky',
+      'Underhanded',
     ],
     nouns: [
-      "Smirker",
-      "Slyster",
-      "Schemer",
-      "Plotter",
-      "Trickster",
-      "Deceiver",
-      "Manipulator",
-      "Smirk",
-      "Scheme",
-      "Plot",
+      'Smirker',
+      'Slyster',
+      'Schemer',
+      'Plotter',
+      'Trickster',
+      'Deceiver',
+      'Manipulator',
+      'Smirk',
+      'Scheme',
+      'Plot',
     ],
   },
-  "😒": {
+  '😒': {
     adjectives: [
-      "Unamused",
-      "Unimpressed",
-      "Bored",
-      "Annoyed",
-      "Irritated",
-      "Miffed",
-      "Peeved",
-      "Displeased",
-      "Side-eyeing",
-      "Done",
+      'Unamused',
+      'Unimpressed',
+      'Bored',
+      'Annoyed',
+      'Irritated',
+      'Miffed',
+      'Peeved',
+      'Displeased',
+      'Side-eyeing',
+      'Done',
     ],
     nouns: [
-      "Side-eye",
-      "Boredom",
-      "Annoyance",
-      "Irritation",
-      "Displeasure",
-      "Miff",
-      "Peeve",
-      "Eye-roll",
-      "Sigh",
-      "Whatever",
+      'Side-eye',
+      'Boredom',
+      'Annoyance',
+      'Irritation',
+      'Displeasure',
+      'Miff',
+      'Peeve',
+      'Eye-roll',
+      'Sigh',
+      'Whatever',
     ],
   },
-  "😞": {
+  '😞': {
     adjectives: [
-      "Disappointed",
-      "Let-down",
-      "Disheartened",
-      "Discouraged",
-      "Deflated",
-      "Crestfallen",
-      "Downcast",
-      "Dejected",
-      "Dispirited",
-      "Sad",
+      'Disappointed',
+      'Let-down',
+      'Disheartened',
+      'Discouraged',
+      'Deflated',
+      'Crestfallen',
+      'Downcast',
+      'Dejected',
+      'Dispirited',
+      'Sad',
     ],
     nouns: [
-      "Disappointment",
-      "Let-down",
-      "Sadness",
-      "Sorrow",
-      "Blues",
-      "Melancholy",
-      "Gloom",
-      "Dejection",
-      "Discouragement",
-      "Frown",
+      'Disappointment',
+      'Let-down',
+      'Sadness',
+      'Sorrow',
+      'Blues',
+      'Melancholy',
+      'Gloom',
+      'Dejection',
+      'Discouragement',
+      'Frown',
     ],
   },
-  "😔": {
+  '😔': {
     adjectives: [
-      "Pensive",
-      "Thoughtful",
-      "Contemplative",
-      "Reflective",
-      "Meditative",
-      "Introspective",
-      "Brooding",
-      "Pondering",
-      "Musing",
-      "Ruminating",
+      'Pensive',
+      'Thoughtful',
+      'Contemplative',
+      'Reflective',
+      'Meditative',
+      'Introspective',
+      'Brooding',
+      'Pondering',
+      'Musing',
+      'Ruminating',
     ],
     nouns: [
-      "Thinker",
-      "Ponderer",
-      "Muser",
-      "Contemplator",
-      "Reflector",
-      "Philosopher",
-      "Sage",
-      "Thought",
-      "Reflection",
-      "Meditation",
+      'Thinker',
+      'Ponderer',
+      'Muser',
+      'Contemplator',
+      'Reflector',
+      'Philosopher',
+      'Sage',
+      'Thought',
+      'Reflection',
+      'Meditation',
     ],
   },
-  "😟": {
+  '😟': {
     adjectives: [
-      "Worried",
-      "Concerned",
-      "Anxious",
-      "Nervous",
-      "Uneasy",
-      "Troubled",
-      "Distressed",
-      "Fretful",
-      "Apprehensive",
-      "Tense",
+      'Worried',
+      'Concerned',
+      'Anxious',
+      'Nervous',
+      'Uneasy',
+      'Troubled',
+      'Distressed',
+      'Fretful',
+      'Apprehensive',
+      'Tense',
     ],
     nouns: [
-      "Worrier",
-      "Fretter",
-      "Concern",
-      "Worry",
-      "Anxiety",
-      "Nervousness",
-      "Unease",
-      "Distress",
-      "Apprehension",
-      "Tension",
+      'Worrier',
+      'Fretter',
+      'Concern',
+      'Worry',
+      'Anxiety',
+      'Nervousness',
+      'Unease',
+      'Distress',
+      'Apprehension',
+      'Tension',
     ],
   },
-  "😕": {
+  '😕': {
     adjectives: [
-      "Confused",
-      "Puzzled",
-      "Perplexed",
-      "Baffled",
-      "Bewildered",
-      "Mystified",
-      "Befuddled",
-      "Flummoxed",
-      "Stumped",
-      "Lost",
+      'Confused',
+      'Puzzled',
+      'Perplexed',
+      'Baffled',
+      'Bewildered',
+      'Mystified',
+      'Befuddled',
+      'Flummoxed',
+      'Stumped',
+      'Lost',
     ],
     nouns: [
-      "Confusion",
-      "Puzzle",
-      "Perplexity",
-      "Bafflement",
-      "Bewilderment",
-      "Mystery",
-      "Befuddlement",
-      "Question-mark",
-      "Enigma",
-      "Riddle",
+      'Confusion',
+      'Puzzle',
+      'Perplexity',
+      'Bafflement',
+      'Bewilderment',
+      'Mystery',
+      'Befuddlement',
+      'Question-mark',
+      'Enigma',
+      'Riddle',
     ],
   },
 
   // === FANTASY & FUN ===
-  "🤠": {
+  '🤠': {
     adjectives: [
-      "Cowboy",
-      "Western",
-      "Frontier",
-      "Wild-west",
-      "Rootin-tootin",
-      "Yeehaw",
-      "Rodeo",
-      "Ranch",
-      "Trail",
-      "Desert",
+      'Cowboy',
+      'Western',
+      'Frontier',
+      'Wild-west',
+      'Rootin-tootin',
+      'Yeehaw',
+      'Rodeo',
+      'Ranch',
+      'Trail',
+      'Desert',
     ],
     nouns: [
-      "Cowboy",
-      "Cowgirl",
-      "Rancher",
-      "Wrangler",
-      "Sheriff",
-      "Deputy",
-      "Outlaw",
-      "Gunslinger",
-      "Buckaroo",
-      "Pardner",
+      'Cowboy',
+      'Cowgirl',
+      'Rancher',
+      'Wrangler',
+      'Sheriff',
+      'Deputy',
+      'Outlaw',
+      'Gunslinger',
+      'Buckaroo',
+      'Pardner',
     ],
   },
-  "🥷": {
+  '🥷': {
     adjectives: [
-      "Ninja",
-      "Stealthy",
-      "Shadow",
-      "Silent",
-      "Deadly",
-      "Swift",
-      "Agile",
-      "Trained",
-      "Skilled",
-      "Martial",
+      'Ninja',
+      'Stealthy',
+      'Shadow',
+      'Silent',
+      'Deadly',
+      'Swift',
+      'Agile',
+      'Trained',
+      'Skilled',
+      'Martial',
     ],
     nouns: [
-      "Ninja",
-      "Shinobi",
-      "Assassin",
-      "Shadow-warrior",
-      "Blade",
-      "Shuriken",
-      "Katana",
-      "Sensei",
-      "Master",
-      "Disciple",
+      'Ninja',
+      'Shinobi',
+      'Assassin',
+      'Shadow-warrior',
+      'Blade',
+      'Shuriken',
+      'Katana',
+      'Sensei',
+      'Master',
+      'Disciple',
     ],
   },
-  "👑": {
+  '👑': {
     adjectives: [
-      "Royal",
-      "Regal",
-      "Majestic",
-      "Noble",
-      "Crowned",
-      "Sovereign",
-      "Imperial",
-      "Kingly",
-      "Queenly",
-      "Princely",
+      'Royal',
+      'Regal',
+      'Majestic',
+      'Noble',
+      'Crowned',
+      'Sovereign',
+      'Imperial',
+      'Kingly',
+      'Queenly',
+      'Princely',
     ],
     nouns: [
-      "King",
-      "Queen",
-      "Monarch",
-      "Sovereign",
-      "Ruler",
-      "Crown",
-      "Throne",
-      "Majesty",
-      "Highness",
-      "Royalty",
+      'King',
+      'Queen',
+      'Monarch',
+      'Sovereign',
+      'Ruler',
+      'Crown',
+      'Throne',
+      'Majesty',
+      'Highness',
+      'Royalty',
     ],
   },
-  "🎭": {
+  '🎭': {
     adjectives: [
-      "Theatrical",
-      "Dramatic",
-      "Thespian",
-      "Acting",
-      "Performing",
-      "Stage",
-      "Broadway",
-      "Shakespearean",
-      "Melodramatic",
-      "Over-the-top",
+      'Theatrical',
+      'Dramatic',
+      'Thespian',
+      'Acting',
+      'Performing',
+      'Stage',
+      'Broadway',
+      'Shakespearean',
+      'Melodramatic',
+      'Over-the-top',
     ],
     nouns: [
-      "Actor",
-      "Actress",
-      "Thespian",
-      "Performer",
-      "Star",
-      "Drama",
-      "Comedy",
-      "Tragedy",
-      "Mask",
-      "Stage",
+      'Actor',
+      'Actress',
+      'Thespian',
+      'Performer',
+      'Star',
+      'Drama',
+      'Comedy',
+      'Tragedy',
+      'Mask',
+      'Stage',
     ],
   },
-  "🤖": {
+  '🤖': {
     adjectives: [
-      "Robotic",
-      "Mechanical",
-      "Automated",
-      "Cyber",
-      "Digital",
-      "Electronic",
-      "Programmed",
-      "Binary",
-      "Tech",
-      "AI",
+      'Robotic',
+      'Mechanical',
+      'Automated',
+      'Cyber',
+      'Digital',
+      'Electronic',
+      'Programmed',
+      'Binary',
+      'Tech',
+      'AI',
     ],
     nouns: [
-      "Robot",
-      "Bot",
-      "Droid",
-      "Android",
-      "Cyborg",
-      "AI",
-      "Machine",
-      "Computer",
-      "Circuit",
-      "Processor",
+      'Robot',
+      'Bot',
+      'Droid',
+      'Android',
+      'Cyborg',
+      'AI',
+      'Machine',
+      'Computer',
+      'Circuit',
+      'Processor',
     ],
   },
-  "👻": {
+  '👻': {
     adjectives: [
-      "Ghostly",
-      "Spectral",
-      "Phantom",
-      "Ethereal",
-      "Transparent",
-      "Floating",
-      "Haunting",
-      "Spooky",
-      "Eerie",
-      "Boo",
+      'Ghostly',
+      'Spectral',
+      'Phantom',
+      'Ethereal',
+      'Transparent',
+      'Floating',
+      'Haunting',
+      'Spooky',
+      'Eerie',
+      'Boo',
     ],
     nouns: [
-      "Ghost",
-      "Specter",
-      "Phantom",
-      "Spirit",
-      "Apparition",
-      "Boo",
-      "Haunt",
-      "Poltergeist",
-      "Wraith",
-      "Shade",
+      'Ghost',
+      'Specter',
+      'Phantom',
+      'Spirit',
+      'Apparition',
+      'Boo',
+      'Haunt',
+      'Poltergeist',
+      'Wraith',
+      'Shade',
     ],
   },
-  "💀": {
+  '💀': {
     adjectives: [
-      "Skeletal",
-      "Bony",
-      "Skull",
-      "Death",
-      "Grim",
-      "Macabre",
-      "Gothic",
-      "Dark",
-      "Spooky",
-      "Hardcore",
+      'Skeletal',
+      'Bony',
+      'Skull',
+      'Death',
+      'Grim',
+      'Macabre',
+      'Gothic',
+      'Dark',
+      'Spooky',
+      'Hardcore',
     ],
     nouns: [
-      "Skeleton",
-      "Skull",
-      "Bones",
-      "Death",
-      "Reaper",
-      "Grim",
-      "Bone-head",
-      "Skull-face",
-      "Ossuary",
-      "Crypt",
+      'Skeleton',
+      'Skull',
+      'Bones',
+      'Death',
+      'Reaper',
+      'Grim',
+      'Bone-head',
+      'Skull-face',
+      'Ossuary',
+      'Crypt',
     ],
   },
-  "👽": {
+  '👽': {
     adjectives: [
-      "Alien",
-      "Extraterrestrial",
-      "UFO",
-      "Martian",
-      "Space",
-      "Cosmic",
-      "Galactic",
-      "Otherworldly",
-      "Unearthly",
-      "Sci-fi",
+      'Alien',
+      'Extraterrestrial',
+      'UFO',
+      'Martian',
+      'Space',
+      'Cosmic',
+      'Galactic',
+      'Otherworldly',
+      'Unearthly',
+      'Sci-fi',
     ],
     nouns: [
-      "Alien",
-      "ET",
-      "Extraterrestrial",
-      "Martian",
-      "Spaceman",
-      "Space-being",
-      "Visitor",
-      "UFO",
-      "Saucer",
-      "Probe",
+      'Alien',
+      'ET',
+      'Extraterrestrial',
+      'Martian',
+      'Spaceman',
+      'Space-being',
+      'Visitor',
+      'UFO',
+      'Saucer',
+      'Probe',
     ],
   },
-  "🤡": {
+  '🤡': {
     adjectives: [
-      "Clownish",
-      "Circus",
-      "Red-nosed",
-      "Face-painted",
-      "Wig-wearing",
-      "Balloon-animal",
-      "Honking",
-      "Juggling",
-      "Pie-throwing",
-      "Slapstick",
+      'Clownish',
+      'Circus',
+      'Red-nosed',
+      'Face-painted',
+      'Wig-wearing',
+      'Balloon-animal',
+      'Honking',
+      'Juggling',
+      'Pie-throwing',
+      'Slapstick',
     ],
     nouns: [
-      "Clown",
-      "Jester",
-      "Bozo",
-      "Pierrot",
-      "Harlequin",
-      "Circus",
-      "Big-top",
-      "Nose",
-      "Wig",
-      "Balloon",
+      'Clown',
+      'Jester',
+      'Bozo',
+      'Pierrot',
+      'Harlequin',
+      'Circus',
+      'Big-top',
+      'Nose',
+      'Wig',
+      'Balloon',
     ],
   },
 
   // === WIZARDS ===
-  "🧙‍♂️": {
+  '🧙‍♂️': {
     adjectives: [
-      "Wizardly",
-      "Magical",
-      "Bearded",
-      "Robed",
-      "Staffed",
-      "Spell-casting",
-      "Potion-brewing",
-      "Wand-waving",
-      "Ancient",
-      "Wise",
+      'Wizardly',
+      'Magical',
+      'Bearded',
+      'Robed',
+      'Staffed',
+      'Spell-casting',
+      'Potion-brewing',
+      'Wand-waving',
+      'Ancient',
+      'Wise',
     ],
     nouns: [
-      "Wizard",
-      "Warlock",
-      "Mage",
-      "Sorcerer",
-      "Merlin",
-      "Gandalf",
-      "Staff",
-      "Wand",
-      "Spell",
-      "Magic",
+      'Wizard',
+      'Warlock',
+      'Mage',
+      'Sorcerer',
+      'Merlin',
+      'Gandalf',
+      'Staff',
+      'Wand',
+      'Spell',
+      'Magic',
     ],
   },
-  "🧙‍♀️": {
+  '🧙‍♀️': {
     adjectives: [
-      "Witch",
-      "Enchanting",
-      "Spell-weaving",
-      "Cauldron-stirring",
-      "Broom-riding",
-      "Hat-wearing",
-      "Moon-powered",
-      "Star-gazing",
-      "Mystical",
-      "Arcane",
+      'Witch',
+      'Enchanting',
+      'Spell-weaving',
+      'Cauldron-stirring',
+      'Broom-riding',
+      'Hat-wearing',
+      'Moon-powered',
+      'Star-gazing',
+      'Mystical',
+      'Arcane',
     ],
     nouns: [
-      "Witch",
-      "Sorceress",
-      "Enchantress",
-      "Spellcaster",
-      "Hermione",
-      "Cauldron",
-      "Broom",
-      "Hat",
-      "Spell",
-      "Charm",
+      'Witch',
+      'Sorceress',
+      'Enchantress',
+      'Spellcaster',
+      'Hermione',
+      'Cauldron',
+      'Broom',
+      'Hat',
+      'Spell',
+      'Charm',
     ],
   },
 
   // === FAIRIES ===
-  "🧚‍♂️": {
+  '🧚‍♂️': {
     adjectives: [
-      "Fairy",
-      "Fae",
-      "Winged",
-      "Flying",
-      "Fluttering",
-      "Magical",
-      "Tiny",
-      "Delicate",
-      "Sprightly",
-      "Nimble",
+      'Fairy',
+      'Fae',
+      'Winged',
+      'Flying',
+      'Fluttering',
+      'Magical',
+      'Tiny',
+      'Delicate',
+      'Sprightly',
+      'Nimble',
     ],
     nouns: [
-      "Fairy",
-      "Sprite",
-      "Pixie",
-      "Fae",
-      "Peter-Pan",
-      "Tinker",
-      "Wing",
-      "Flight",
-      "Magic",
-      "Dust",
+      'Fairy',
+      'Sprite',
+      'Pixie',
+      'Fae',
+      'Peter-Pan',
+      'Tinker',
+      'Wing',
+      'Flight',
+      'Magic',
+      'Dust',
     ],
   },
-  "🧚‍♀️": {
+  '🧚‍♀️': {
     adjectives: [
-      "Fairy",
-      "Fae",
-      "Gossamer",
-      "Delicate",
-      "Graceful",
-      "Ethereal",
-      "Twinkling",
-      "Shimmering",
-      "Glittering",
-      "Sparkling",
+      'Fairy',
+      'Fae',
+      'Gossamer',
+      'Delicate',
+      'Graceful',
+      'Ethereal',
+      'Twinkling',
+      'Shimmering',
+      'Glittering',
+      'Sparkling',
     ],
     nouns: [
-      "Fairy",
-      "Sprite",
-      "Pixie",
-      "Tinkerbell",
-      "Gossamer",
-      "Shimmer",
-      "Glitter",
-      "Sparkle",
-      "Twinkle",
-      "Wing",
+      'Fairy',
+      'Sprite',
+      'Pixie',
+      'Tinkerbell',
+      'Gossamer',
+      'Shimmer',
+      'Glitter',
+      'Sparkle',
+      'Twinkle',
+      'Wing',
     ],
   },
 
   // === VAMPIRES ===
-  "🧛‍♂️": {
+  '🧛‍♂️': {
     adjectives: [
-      "Vampiric",
-      "Fanged",
-      "Blood-drinking",
-      "Nocturnal",
-      "Pale",
-      "Immortal",
-      "Undead",
-      "Gothic",
-      "Aristocratic",
-      "Cape-wearing",
+      'Vampiric',
+      'Fanged',
+      'Blood-drinking',
+      'Nocturnal',
+      'Pale',
+      'Immortal',
+      'Undead',
+      'Gothic',
+      'Aristocratic',
+      'Cape-wearing',
     ],
     nouns: [
-      "Vampire",
-      "Count",
-      "Dracula",
-      "Nosferatu",
-      "Bloodsucker",
-      "Fang",
-      "Cape",
-      "Night",
-      "Bite",
-      "Immortal",
+      'Vampire',
+      'Count',
+      'Dracula',
+      'Nosferatu',
+      'Bloodsucker',
+      'Fang',
+      'Cape',
+      'Night',
+      'Bite',
+      'Immortal',
     ],
   },
-  "🧛‍♀️": {
+  '🧛‍♀️': {
     adjectives: [
-      "Vampiress",
-      "Fanged",
-      "Nocturnal",
-      "Immortal",
-      "Elegant",
-      "Dark",
-      "Mysterious",
-      "Alluring",
-      "Enchanting",
-      "Bewitching",
+      'Vampiress',
+      'Fanged',
+      'Nocturnal',
+      'Immortal',
+      'Elegant',
+      'Dark',
+      'Mysterious',
+      'Alluring',
+      'Enchanting',
+      'Bewitching',
     ],
     nouns: [
-      "Vampiress",
-      "Countess",
-      "Lady",
-      "Night-queen",
-      "Bloodsucker",
-      "Fang",
-      "Enchantress",
-      "Night",
-      "Bite",
-      "Immortal",
+      'Vampiress',
+      'Countess',
+      'Lady',
+      'Night-queen',
+      'Bloodsucker',
+      'Fang',
+      'Enchantress',
+      'Night',
+      'Bite',
+      'Immortal',
     ],
   },
 
   // === MERFOLK ===
-  "🧜‍♂️": {
+  '🧜‍♂️': {
     adjectives: [
-      "Merman",
-      "Aquatic",
-      "Ocean",
-      "Sea",
-      "Underwater",
-      "Swimming",
-      "Diving",
-      "Tailed",
-      "Scaled",
-      "Triton",
+      'Merman',
+      'Aquatic',
+      'Ocean',
+      'Sea',
+      'Underwater',
+      'Swimming',
+      'Diving',
+      'Tailed',
+      'Scaled',
+      'Triton',
     ],
     nouns: [
-      "Merman",
-      "Triton",
-      "Poseidon",
-      "Sea-king",
-      "Ocean-dweller",
-      "Swimmer",
-      "Diver",
-      "Tail",
-      "Scale",
-      "Trident",
+      'Merman',
+      'Triton',
+      'Poseidon',
+      'Sea-king',
+      'Ocean-dweller',
+      'Swimmer',
+      'Diver',
+      'Tail',
+      'Scale',
+      'Trident',
     ],
   },
-  "🧜‍♀️": {
+  '🧜‍♀️': {
     adjectives: [
-      "Mermaid",
-      "Ocean",
-      "Sea",
-      "Coral",
-      "Pearl",
-      "Shell",
-      "Wave",
-      "Tidal",
-      "Aquatic",
-      "Siren",
+      'Mermaid',
+      'Ocean',
+      'Sea',
+      'Coral',
+      'Pearl',
+      'Shell',
+      'Wave',
+      'Tidal',
+      'Aquatic',
+      'Siren',
     ],
     nouns: [
-      "Mermaid",
-      "Siren",
-      "Ariel",
-      "Sea-princess",
-      "Ocean-maiden",
-      "Wave",
-      "Tide",
-      "Coral",
-      "Pearl",
-      "Shell",
+      'Mermaid',
+      'Siren',
+      'Ariel',
+      'Sea-princess',
+      'Ocean-maiden',
+      'Wave',
+      'Tide',
+      'Coral',
+      'Pearl',
+      'Shell',
     ],
   },
 
   // === ELVES ===
-  "🧝‍♂️": {
+  '🧝‍♂️': {
     adjectives: [
-      "Elven",
-      "Forest",
-      "Woodland",
-      "Bow-wielding",
-      "Arrow-shooting",
-      "Sharp-eared",
-      "Keen-eyed",
-      "Swift",
-      "Agile",
-      "Ancient",
+      'Elven',
+      'Forest',
+      'Woodland',
+      'Bow-wielding',
+      'Arrow-shooting',
+      'Sharp-eared',
+      'Keen-eyed',
+      'Swift',
+      'Agile',
+      'Ancient',
     ],
     nouns: [
-      "Elf",
-      "Ranger",
-      "Archer",
-      "Legolas",
-      "Scout",
-      "Hunter",
-      "Bow",
-      "Arrow",
-      "Forest",
-      "Woods",
+      'Elf',
+      'Ranger',
+      'Archer',
+      'Legolas',
+      'Scout',
+      'Hunter',
+      'Bow',
+      'Arrow',
+      'Forest',
+      'Woods',
     ],
   },
-  "🧝‍♀️": {
+  '🧝‍♀️': {
     adjectives: [
-      "Elven",
-      "Graceful",
-      "Elegant",
-      "Forest",
-      "Woodland",
-      "Sylvan",
-      "Ageless",
-      "Immortal",
-      "Beautiful",
-      "Ethereal",
+      'Elven',
+      'Graceful',
+      'Elegant',
+      'Forest',
+      'Woodland',
+      'Sylvan',
+      'Ageless',
+      'Immortal',
+      'Beautiful',
+      'Ethereal',
     ],
     nouns: [
-      "Elf",
-      "Ranger",
-      "Archer",
-      "Galadriel",
-      "Lady",
-      "Princess",
-      "Forest",
-      "Woods",
-      "Bow",
-      "Grace",
+      'Elf',
+      'Ranger',
+      'Archer',
+      'Galadriel',
+      'Lady',
+      'Princess',
+      'Forest',
+      'Woods',
+      'Bow',
+      'Grace',
     ],
   },
 
   // === HEROES ===
-  "🦸‍♂️": {
+  '🦸‍♂️': {
     adjectives: [
-      "Heroic",
-      "Super",
-      "Mighty",
-      "Powerful",
-      "Strong",
-      "Brave",
-      "Courageous",
-      "Caped",
-      "Masked",
-      "Justice",
+      'Heroic',
+      'Super',
+      'Mighty',
+      'Powerful',
+      'Strong',
+      'Brave',
+      'Courageous',
+      'Caped',
+      'Masked',
+      'Justice',
     ],
     nouns: [
-      "Hero",
-      "Superman",
-      "Superhero",
-      "Champion",
-      "Defender",
-      "Protector",
-      "Cape",
-      "Mask",
-      "Justice",
-      "Power",
+      'Hero',
+      'Superman',
+      'Superhero',
+      'Champion',
+      'Defender',
+      'Protector',
+      'Cape',
+      'Mask',
+      'Justice',
+      'Power',
     ],
   },
-  "🦸‍♀️": {
+  '🦸‍♀️': {
     adjectives: [
-      "Heroic",
-      "Super",
-      "Wonder",
-      "Mighty",
-      "Powerful",
-      "Strong",
-      "Brave",
-      "Fierce",
-      "Unstoppable",
-      "Amazing",
+      'Heroic',
+      'Super',
+      'Wonder',
+      'Mighty',
+      'Powerful',
+      'Strong',
+      'Brave',
+      'Fierce',
+      'Unstoppable',
+      'Amazing',
     ],
     nouns: [
-      "Heroine",
-      "Wonder-woman",
-      "Superhero",
-      "Champion",
-      "Defender",
-      "Protector",
-      "Power",
-      "Force",
-      "Justice",
-      "Might",
+      'Heroine',
+      'Wonder-woman',
+      'Superhero',
+      'Champion',
+      'Defender',
+      'Protector',
+      'Power',
+      'Force',
+      'Justice',
+      'Might',
     ],
   },
 
   // === VILLAINS ===
-  "🦹‍♂️": {
+  '🦹‍♂️': {
     adjectives: [
-      "Villainous",
-      "Evil",
-      "Wicked",
-      "Sinister",
-      "Malevolent",
-      "Dastardly",
-      "Nefarious",
-      "Devious",
-      "Cunning",
-      "Dark",
+      'Villainous',
+      'Evil',
+      'Wicked',
+      'Sinister',
+      'Malevolent',
+      'Dastardly',
+      'Nefarious',
+      'Devious',
+      'Cunning',
+      'Dark',
     ],
     nouns: [
-      "Villain",
-      "Evildoer",
-      "Baddie",
-      "Nemesis",
-      "Adversary",
-      "Foe",
-      "Mastermind",
-      "Overlord",
-      "Dark-lord",
-      "Scoundrel",
+      'Villain',
+      'Evildoer',
+      'Baddie',
+      'Nemesis',
+      'Adversary',
+      'Foe',
+      'Mastermind',
+      'Overlord',
+      'Dark-lord',
+      'Scoundrel',
     ],
   },
 
   // === ANIMALS - CANINES ===
-  "🐶": {
+  '🐶': {
     adjectives: [
-      "Doggy",
-      "Puppy",
-      "Playful",
-      "Loyal",
-      "Friendly",
-      "Happy",
-      "Tail-wagging",
-      "Ear-floppy",
-      "Panting",
-      "Barking",
-    ],
-    nouns: [
-      "Dog",
-      "Doggo",
-      "Pupper",
-      "Pup",
-      "Puppy",
-      "Pooch",
-      "Hound",
-      "Canine",
-      "Woofer",
-      "Bork",
+      'Doggy',
+      'Puppy',
+      'Playful',
+      'Loyal',
+      'Friendly',
+      'Happy',
+      'Tail-wagging',
+      'Ear-floppy',
+      'Panting',
+      'Barking',
     ],
+    nouns: ['Dog', 'Doggo', 'Pupper', 'Pup', 'Puppy', 'Pooch', 'Hound', 'Canine', 'Woofer', 'Bork'],
   },
-  "🐺": {
+  '🐺': {
     adjectives: [
-      "Wolf",
-      "Wild",
-      "Pack",
-      "Howling",
-      "Alpha",
-      "Lone",
-      "Moon-howling",
-      "Fierce",
-      "Feral",
-      "Untamed",
+      'Wolf',
+      'Wild',
+      'Pack',
+      'Howling',
+      'Alpha',
+      'Lone',
+      'Moon-howling',
+      'Fierce',
+      'Feral',
+      'Untamed',
     ],
     nouns: [
-      "Wolf",
-      "Alpha",
-      "Pack-leader",
-      "Lone-wolf",
-      "Howler",
-      "Moon-howler",
-      "Hunter",
-      "Predator",
-      "Wild-one",
-      "Fang",
+      'Wolf',
+      'Alpha',
+      'Pack-leader',
+      'Lone-wolf',
+      'Howler',
+      'Moon-howler',
+      'Hunter',
+      'Predator',
+      'Wild-one',
+      'Fang',
     ],
   },
 
   // === ANIMALS - FELINES ===
-  "🐱": {
+  '🐱': {
     adjectives: [
-      "Kitty",
-      "Catty",
-      "Feline",
-      "Purring",
-      "Meowing",
-      "Whiskers",
-      "Fuzzy",
-      "Soft",
-      "Cuddly",
-      "Independent",
+      'Kitty',
+      'Catty',
+      'Feline',
+      'Purring',
+      'Meowing',
+      'Whiskers',
+      'Fuzzy',
+      'Soft',
+      'Cuddly',
+      'Independent',
     ],
     nouns: [
-      "Cat",
-      "Kitty",
-      "Kitten",
-      "Feline",
-      "Meower",
-      "Purrer",
-      "Whiskers",
-      "Paws",
-      "Fur-ball",
-      "Mouser",
+      'Cat',
+      'Kitty',
+      'Kitten',
+      'Feline',
+      'Meower',
+      'Purrer',
+      'Whiskers',
+      'Paws',
+      'Fur-ball',
+      'Mouser',
     ],
   },
-  "🐯": {
+  '🐯': {
     adjectives: [
-      "Tiger",
-      "Striped",
-      "Orange",
-      "Black-striped",
-      "Fierce",
-      "Ferocious",
-      "Prowling",
-      "Stalking",
-      "Hunting",
-      "Roaring",
+      'Tiger',
+      'Striped',
+      'Orange',
+      'Black-striped',
+      'Fierce',
+      'Ferocious',
+      'Prowling',
+      'Stalking',
+      'Hunting',
+      'Roaring',
     ],
     nouns: [
-      "Tiger",
-      "Stripes",
-      "Prowler",
-      "Stalker",
-      "Hunter",
-      "Predator",
-      "Big-cat",
-      "Roarer",
-      "Pouncer",
-      "Jungle-king",
+      'Tiger',
+      'Stripes',
+      'Prowler',
+      'Stalker',
+      'Hunter',
+      'Predator',
+      'Big-cat',
+      'Roarer',
+      'Pouncer',
+      'Jungle-king',
     ],
   },
-  "🦁": {
+  '🦁': {
     adjectives: [
-      "Lion",
-      "Maned",
-      "Golden",
-      "Majestic",
-      "King",
-      "Pride",
-      "Roaring",
-      "Fierce",
-      "Brave",
-      "Noble",
+      'Lion',
+      'Maned',
+      'Golden',
+      'Majestic',
+      'King',
+      'Pride',
+      'Roaring',
+      'Fierce',
+      'Brave',
+      'Noble',
     ],
     nouns: [
-      "Lion",
-      "King",
-      "Mane",
-      "Pride-leader",
-      "Simba",
-      "Roarer",
-      "Savannah",
-      "Jungle-king",
-      "Big-cat",
-      "Monarch",
+      'Lion',
+      'King',
+      'Mane',
+      'Pride-leader',
+      'Simba',
+      'Roarer',
+      'Savannah',
+      'Jungle-king',
+      'Big-cat',
+      'Monarch',
     ],
   },
 
   // === ANIMALS - SMALL CREATURES ===
-  "🐭": {
+  '🐭': {
     adjectives: [
-      "Mousy",
-      "Tiny",
-      "Small",
-      "Scurrying",
-      "Squeaking",
-      "Nibbling",
-      "Quick",
-      "Clever",
-      "Whisker",
-      "Cheese-loving",
+      'Mousy',
+      'Tiny',
+      'Small',
+      'Scurrying',
+      'Squeaking',
+      'Nibbling',
+      'Quick',
+      'Clever',
+      'Whisker',
+      'Cheese-loving',
     ],
     nouns: [
-      "Mouse",
-      "Mousie",
-      "Squeaker",
-      "Mickey",
-      "Minnie",
-      "Nibbler",
-      "Whiskers",
-      "Cheese-lover",
-      "Critter",
-      "Rodent",
+      'Mouse',
+      'Mousie',
+      'Squeaker',
+      'Mickey',
+      'Minnie',
+      'Nibbler',
+      'Whiskers',
+      'Cheese-lover',
+      'Critter',
+      'Rodent',
     ],
   },
-  "🐹": {
+  '🐹': {
     adjectives: [
-      "Hamster",
-      "Fluffy",
-      "Chubby",
-      "Cheek-pouched",
-      "Wheel-running",
-      "Burrowing",
-      "Cute",
-      "Fuzzy",
-      "Round",
-      "Roly-poly",
+      'Hamster',
+      'Fluffy',
+      'Chubby',
+      'Cheek-pouched',
+      'Wheel-running',
+      'Burrowing',
+      'Cute',
+      'Fuzzy',
+      'Round',
+      'Roly-poly',
     ],
     nouns: [
-      "Hamster",
-      "Hammie",
-      "Cheeks",
-      "Pouch",
-      "Wheel-runner",
-      "Burrow",
-      "Fluff",
-      "Fuzz",
-      "Cutie",
-      "Chonk",
+      'Hamster',
+      'Hammie',
+      'Cheeks',
+      'Pouch',
+      'Wheel-runner',
+      'Burrow',
+      'Fluff',
+      'Fuzz',
+      'Cutie',
+      'Chonk',
     ],
   },
-  "🐰": {
+  '🐰': {
     adjectives: [
-      "Bunny",
-      "Fluffy",
-      "Hopping",
-      "Cotton-tailed",
-      "Long-eared",
-      "Twitchy-nosed",
-      "Soft",
-      "Fuzzy",
-      "Cute",
-      "Easter",
+      'Bunny',
+      'Fluffy',
+      'Hopping',
+      'Cotton-tailed',
+      'Long-eared',
+      'Twitchy-nosed',
+      'Soft',
+      'Fuzzy',
+      'Cute',
+      'Easter',
     ],
     nouns: [
-      "Bunny",
-      "Rabbit",
-      "Cottontail",
-      "Thumper",
-      "Peter",
-      "Hopper",
-      "Fluff",
-      "Cotton",
-      "Ears",
-      "Tail",
+      'Bunny',
+      'Rabbit',
+      'Cottontail',
+      'Thumper',
+      'Peter',
+      'Hopper',
+      'Fluff',
+      'Cotton',
+      'Ears',
+      'Tail',
     ],
   },
-  "🦊": {
+  '🦊': {
     adjectives: [
-      "Foxy",
-      "Clever",
-      "Cunning",
-      "Sly",
-      "Red",
-      "Orange",
-      "Bushy-tailed",
-      "Quick",
-      "Swift",
-      "Smart",
+      'Foxy',
+      'Clever',
+      'Cunning',
+      'Sly',
+      'Red',
+      'Orange',
+      'Bushy-tailed',
+      'Quick',
+      'Swift',
+      'Smart',
     ],
     nouns: [
-      "Fox",
-      "Reynard",
-      "Vixen",
-      "Kit",
-      "Red-fox",
-      "Slyster",
-      "Trickster",
-      "Tail",
-      "Brush",
-      "Clever-clogs",
+      'Fox',
+      'Reynard',
+      'Vixen',
+      'Kit',
+      'Red-fox',
+      'Slyster',
+      'Trickster',
+      'Tail',
+      'Brush',
+      'Clever-clogs',
     ],
   },
 
   // === ANIMALS - BEARS ===
-  "🐻": {
+  '🐻': {
     adjectives: [
-      "Bear",
-      "Grizzly",
-      "Brown",
-      "Big",
-      "Burly",
-      "Fuzzy",
-      "Cuddly",
-      "Strong",
-      "Hibernating",
-      "Honey-loving",
+      'Bear',
+      'Grizzly',
+      'Brown',
+      'Big',
+      'Burly',
+      'Fuzzy',
+      'Cuddly',
+      'Strong',
+      'Hibernating',
+      'Honey-loving',
     ],
     nouns: [
-      "Bear",
-      "Grizzly",
-      "Bruin",
-      "Cub",
-      "Teddy",
-      "Honey-bear",
-      "Hugger",
-      "Cuddles",
-      "Fur",
-      "Paws",
+      'Bear',
+      'Grizzly',
+      'Bruin',
+      'Cub',
+      'Teddy',
+      'Honey-bear',
+      'Hugger',
+      'Cuddles',
+      'Fur',
+      'Paws',
     ],
   },
-  "🐼": {
+  '🐼': {
     adjectives: [
-      "Panda",
-      "Bamboo-eating",
-      "Black-and-white",
-      "Cuddly",
-      "Cute",
-      "Gentle",
-      "Lazy",
-      "Sleepy",
-      "Zen",
-      "Chill",
+      'Panda',
+      'Bamboo-eating',
+      'Black-and-white',
+      'Cuddly',
+      'Cute',
+      'Gentle',
+      'Lazy',
+      'Sleepy',
+      'Zen',
+      'Chill',
     ],
     nouns: [
-      "Panda",
-      "Po",
-      "Bamboo-bear",
-      "Bamboo",
-      "Zen-master",
-      "Cuddles",
-      "Fluff",
-      "Chonk",
-      "Monochrome",
-      "Yin-yang",
+      'Panda',
+      'Po',
+      'Bamboo-bear',
+      'Bamboo',
+      'Zen-master',
+      'Cuddles',
+      'Fluff',
+      'Chonk',
+      'Monochrome',
+      'Yin-yang',
     ],
   },
-  "🐻‍❄️": {
+  '🐻‍❄️': {
     adjectives: [
-      "Polar",
-      "White",
-      "Arctic",
-      "Ice",
-      "Snow",
-      "Frozen",
-      "Cold",
-      "Winter",
-      "Frost",
-      "Glacial",
+      'Polar',
+      'White',
+      'Arctic',
+      'Ice',
+      'Snow',
+      'Frozen',
+      'Cold',
+      'Winter',
+      'Frost',
+      'Glacial',
     ],
     nouns: [
-      "Polar-bear",
-      "Ice-bear",
-      "Snow-bear",
-      "Arctic",
-      "Frost",
-      "Ice",
-      "Snow",
-      "Winter",
-      "Glacier",
-      "Tundra",
+      'Polar-bear',
+      'Ice-bear',
+      'Snow-bear',
+      'Arctic',
+      'Frost',
+      'Ice',
+      'Snow',
+      'Winter',
+      'Glacier',
+      'Tundra',
     ],
   },
-  "🐨": {
+  '🐨': {
     adjectives: [
-      "Koala",
-      "Sleepy",
-      "Eucalyptus",
-      "Tree-hugging",
-      "Australian",
-      "Cuddly",
-      "Fuzzy",
-      "Chill",
-      "Relaxed",
-      "Zen",
+      'Koala',
+      'Sleepy',
+      'Eucalyptus',
+      'Tree-hugging',
+      'Australian',
+      'Cuddly',
+      'Fuzzy',
+      'Chill',
+      'Relaxed',
+      'Zen',
     ],
     nouns: [
-      "Koala",
-      "Joey",
-      "Eucalyptus",
-      "Tree-hugger",
-      "Aussie",
-      "Down-under",
-      "Sleeper",
-      "Napper",
-      "Cuddles",
-      "Mate",
+      'Koala',
+      'Joey',
+      'Eucalyptus',
+      'Tree-hugger',
+      'Aussie',
+      'Down-under',
+      'Sleeper',
+      'Napper',
+      'Cuddles',
+      'Mate',
     ],
   },
 
   // === ANIMALS - FARM ===
-  "🐮": {
+  '🐮': {
     adjectives: [
-      "Cow",
-      "Dairy",
-      "Milk",
-      "Moo",
-      "Spotted",
-      "Black-and-white",
-      "Holstein",
-      "Farm",
-      "Pastoral",
-      "Gentle",
+      'Cow',
+      'Dairy',
+      'Milk',
+      'Moo',
+      'Spotted',
+      'Black-and-white',
+      'Holstein',
+      'Farm',
+      'Pastoral',
+      'Gentle',
     ],
     nouns: [
-      "Cow",
-      "Bessie",
-      "Daisy",
-      "Moo-cow",
-      "Dairy",
-      "Milker",
-      "Holstein",
-      "Farm",
-      "Pasture",
-      "Meadow",
+      'Cow',
+      'Bessie',
+      'Daisy',
+      'Moo-cow',
+      'Dairy',
+      'Milker',
+      'Holstein',
+      'Farm',
+      'Pasture',
+      'Meadow',
     ],
   },
-  "🐷": {
+  '🐷': {
     adjectives: [
-      "Pig",
-      "Piggy",
-      "Pink",
-      "Oinking",
-      "Snorting",
-      "Muddy",
-      "Cute",
-      "Chubby",
-      "Round",
-      "Smart",
+      'Pig',
+      'Piggy',
+      'Pink',
+      'Oinking',
+      'Snorting',
+      'Muddy',
+      'Cute',
+      'Chubby',
+      'Round',
+      'Smart',
     ],
     nouns: [
-      "Pig",
-      "Piggy",
-      "Piglet",
-      "Porky",
-      "Hamlet",
-      "Oinker",
-      "Snorter",
-      "Bacon",
-      "Snout",
-      "Curly-tail",
+      'Pig',
+      'Piggy',
+      'Piglet',
+      'Porky',
+      'Hamlet',
+      'Oinker',
+      'Snorter',
+      'Bacon',
+      'Snout',
+      'Curly-tail',
     ],
   },
-  "🐸": {
+  '🐸': {
     adjectives: [
-      "Frog",
-      "Hopping",
-      "Jumping",
-      "Leaping",
-      "Croaking",
-      "Ribbiting",
-      "Green",
-      "Slimy",
-      "Wet",
-      "Pond",
+      'Frog',
+      'Hopping',
+      'Jumping',
+      'Leaping',
+      'Croaking',
+      'Ribbiting',
+      'Green',
+      'Slimy',
+      'Wet',
+      'Pond',
     ],
     nouns: [
-      "Frog",
-      "Froggy",
-      "Kermit",
-      "Tadpole",
-      "Pollywog",
-      "Croaker",
-      "Ribbiter",
-      "Hopper",
-      "Leaper",
-      "Lily-pad",
+      'Frog',
+      'Froggy',
+      'Kermit',
+      'Tadpole',
+      'Pollywog',
+      'Croaker',
+      'Ribbiter',
+      'Hopper',
+      'Leaper',
+      'Lily-pad',
     ],
   },
 
   // === ANIMALS - PRIMATES ===
-  "🐵": {
+  '🐵': {
     adjectives: [
-      "Monkey",
-      "Cheeky",
-      "Mischievous",
-      "Playful",
-      "Swinging",
-      "Climbing",
-      "Tree-dwelling",
-      "Banana-eating",
-      "Curious",
-      "Silly",
+      'Monkey',
+      'Cheeky',
+      'Mischievous',
+      'Playful',
+      'Swinging',
+      'Climbing',
+      'Tree-dwelling',
+      'Banana-eating',
+      'Curious',
+      'Silly',
     ],
     nouns: [
-      "Monkey",
-      "Chimp",
-      "Primate",
-      "Curious-George",
-      "Banana",
-      "Tree-swinger",
-      "Climber",
-      "Tail",
-      "Mischief",
-      "Cheeky-monkey",
+      'Monkey',
+      'Chimp',
+      'Primate',
+      'Curious-George',
+      'Banana',
+      'Tree-swinger',
+      'Climber',
+      'Tail',
+      'Mischief',
+      'Cheeky-monkey',
     ],
   },
-  "🙈": {
+  '🙈': {
     adjectives: [
-      "See-no-evil",
-      "Hiding",
-      "Peeking",
-      "Shy",
-      "Embarrassed",
-      "Covering-eyes",
-      "Bashful",
-      "Modest",
-      "Innocent",
-      "Oops",
+      'See-no-evil',
+      'Hiding',
+      'Peeking',
+      'Shy',
+      'Embarrassed',
+      'Covering-eyes',
+      'Bashful',
+      'Modest',
+      'Innocent',
+      'Oops',
     ],
     nouns: [
-      "See-nothing",
-      "Hide",
-      "Peeker",
-      "Shy-one",
-      "Bashful",
-      "Oops",
-      "Embarrassment",
-      "Modesty",
-      "Innocence",
-      "Cover",
+      'See-nothing',
+      'Hide',
+      'Peeker',
+      'Shy-one',
+      'Bashful',
+      'Oops',
+      'Embarrassment',
+      'Modesty',
+      'Innocence',
+      'Cover',
     ],
   },
-  "🙉": {
+  '🙉': {
     adjectives: [
-      "Hear-no-evil",
-      "Deaf",
-      "Ignoring",
-      "Covering-ears",
-      "La-la-la",
-      "Blocking-out",
-      "Tuning-out",
-      "Unlistening",
-      "Oblivious",
-      "Nope",
+      'Hear-no-evil',
+      'Deaf',
+      'Ignoring',
+      'Covering-ears',
+      'La-la-la',
+      'Blocking-out',
+      'Tuning-out',
+      'Unlistening',
+      'Oblivious',
+      'Nope',
     ],
     nouns: [
-      "Hear-nothing",
-      "Deafness",
-      "Ignorance",
-      "La-la",
-      "Block",
-      "Tune-out",
-      "Nope",
-      "Denial",
-      "Oblivion",
-      "Cover",
+      'Hear-nothing',
+      'Deafness',
+      'Ignorance',
+      'La-la',
+      'Block',
+      'Tune-out',
+      'Nope',
+      'Denial',
+      'Oblivion',
+      'Cover',
     ],
   },
-  "🙊": {
+  '🙊': {
     adjectives: [
-      "Speak-no-evil",
-      "Silent",
-      "Quiet",
-      "Mute",
-      "Shushing",
-      "Covering-mouth",
-      "Secret-keeping",
-      "Whispering",
-      "Hush-hush",
-      "Zip",
+      'Speak-no-evil',
+      'Silent',
+      'Quiet',
+      'Mute',
+      'Shushing',
+      'Covering-mouth',
+      'Secret-keeping',
+      'Whispering',
+      'Hush-hush',
+      'Zip',
     ],
     nouns: [
-      "Speak-nothing",
-      "Silence",
-      "Quiet",
-      "Mute",
-      "Shush",
-      "Secret",
-      "Whisper",
-      "Hush",
-      "Zip",
-      "Lips-sealed",
+      'Speak-nothing',
+      'Silence',
+      'Quiet',
+      'Mute',
+      'Shush',
+      'Secret',
+      'Whisper',
+      'Hush',
+      'Zip',
+      'Lips-sealed',
     ],
   },
-  "🐒": {
+  '🐒': {
     adjectives: [
-      "Monkey",
-      "Hanging",
-      "Tail-hanging",
-      "Swinging",
-      "Dangling",
-      "Acrobatic",
-      "Flexible",
-      "Agile",
-      "Nimble",
-      "Tree",
+      'Monkey',
+      'Hanging',
+      'Tail-hanging',
+      'Swinging',
+      'Dangling',
+      'Acrobatic',
+      'Flexible',
+      'Agile',
+      'Nimble',
+      'Tree',
     ],
     nouns: [
-      "Monkey",
-      "Swinger",
-      "Hanger",
-      "Acrobat",
-      "Tail",
-      "Tree-monkey",
-      "Jungle-monkey",
-      "Branch",
-      "Vine",
-      "Swing",
+      'Monkey',
+      'Swinger',
+      'Hanger',
+      'Acrobat',
+      'Tail',
+      'Tree-monkey',
+      'Jungle-monkey',
+      'Branch',
+      'Vine',
+      'Swing',
     ],
   },
 
   // === ANIMALS - BIRDS ===
-  "🦆": {
+  '🦆': {
     adjectives: [
-      "Duck",
-      "Quacking",
-      "Waddling",
-      "Swimming",
-      "Floating",
-      "Pond",
-      "Water",
-      "Yellow",
-      "Rubber",
-      "Dabbling",
+      'Duck',
+      'Quacking',
+      'Waddling',
+      'Swimming',
+      'Floating',
+      'Pond',
+      'Water',
+      'Yellow',
+      'Rubber',
+      'Dabbling',
     ],
     nouns: [
-      "Duck",
-      "Duckling",
-      "Donald",
-      "Daffy",
-      "Quacker",
-      "Waddler",
-      "Pond",
-      "Water",
-      "Bill",
-      "Webfoot",
+      'Duck',
+      'Duckling',
+      'Donald',
+      'Daffy',
+      'Quacker',
+      'Waddler',
+      'Pond',
+      'Water',
+      'Bill',
+      'Webfoot',
     ],
   },
-  "🐧": {
+  '🐧': {
     adjectives: [
-      "Penguin",
-      "Waddling",
-      "Tuxedo",
-      "Black-and-white",
-      "Antarctic",
-      "Ice",
-      "Snow",
-      "Sliding",
-      "Swimming",
-      "Diving",
+      'Penguin',
+      'Waddling',
+      'Tuxedo',
+      'Black-and-white',
+      'Antarctic',
+      'Ice',
+      'Snow',
+      'Sliding',
+      'Swimming',
+      'Diving',
     ],
     nouns: [
-      "Penguin",
-      "Tux",
-      "Waddle",
-      "Antarctica",
-      "Ice",
-      "Snow",
-      "Slide",
-      "Flipper",
-      "Waddles",
-      "Chilly",
+      'Penguin',
+      'Tux',
+      'Waddle',
+      'Antarctica',
+      'Ice',
+      'Snow',
+      'Slide',
+      'Flipper',
+      'Waddles',
+      'Chilly',
     ],
   },
-  "🐦": {
+  '🐦': {
     adjectives: [
-      "Bird",
-      "Flying",
-      "Singing",
-      "Chirping",
-      "Tweeting",
-      "Perching",
-      "Nesting",
-      "Feathered",
-      "Winged",
-      "Early",
+      'Bird',
+      'Flying',
+      'Singing',
+      'Chirping',
+      'Tweeting',
+      'Perching',
+      'Nesting',
+      'Feathered',
+      'Winged',
+      'Early',
     ],
     nouns: [
-      "Bird",
-      "Birdie",
-      "Tweeter",
-      "Chirper",
-      "Singer",
-      "Flyer",
-      "Wing",
-      "Feather",
-      "Nest",
-      "Song",
+      'Bird',
+      'Birdie',
+      'Tweeter',
+      'Chirper',
+      'Singer',
+      'Flyer',
+      'Wing',
+      'Feather',
+      'Nest',
+      'Song',
     ],
   },
-  "🐤": {
+  '🐤': {
     adjectives: [
-      "Chick",
-      "Baby",
-      "Cute",
-      "Tiny",
-      "Fluffy",
-      "Yellow",
-      "Peeping",
-      "Chirping",
-      "Newly-hatched",
-      "Easter",
+      'Chick',
+      'Baby',
+      'Cute',
+      'Tiny',
+      'Fluffy',
+      'Yellow',
+      'Peeping',
+      'Chirping',
+      'Newly-hatched',
+      'Easter',
     ],
     nouns: [
-      "Chick",
-      "Baby-bird",
-      "Peeper",
-      "Chirper",
-      "Fledgling",
-      "Hatchling",
-      "Fluff",
-      "Downy",
-      "Cutie",
-      "Spring",
+      'Chick',
+      'Baby-bird',
+      'Peeper',
+      'Chirper',
+      'Fledgling',
+      'Hatchling',
+      'Fluff',
+      'Downy',
+      'Cutie',
+      'Spring',
     ],
   },
-  "🐣": {
+  '🐣': {
     adjectives: [
-      "Hatching",
-      "Emerging",
-      "Breaking-out",
-      "Cracking",
-      "New",
-      "Born",
-      "Fresh",
-      "Young",
-      "Baby",
-      "Beginning",
+      'Hatching',
+      'Emerging',
+      'Breaking-out',
+      'Cracking',
+      'New',
+      'Born',
+      'Fresh',
+      'Young',
+      'Baby',
+      'Beginning',
     ],
     nouns: [
-      "Hatchling",
-      "Newborn",
-      "Emergence",
-      "Birth",
-      "Beginning",
-      "Start",
-      "Origin",
-      "Crack",
-      "Shell",
-      "Egg",
+      'Hatchling',
+      'Newborn',
+      'Emergence',
+      'Birth',
+      'Beginning',
+      'Start',
+      'Origin',
+      'Crack',
+      'Shell',
+      'Egg',
     ],
   },
-  "🐥": {
+  '🐥': {
     adjectives: [
-      "Front-facing",
-      "Chick",
-      "Yellow",
-      "Fluffy",
-      "Cute",
-      "Baby",
-      "Little",
-      "Tiny",
-      "Peeping",
-      "Chirping",
+      'Front-facing',
+      'Chick',
+      'Yellow',
+      'Fluffy',
+      'Cute',
+      'Baby',
+      'Little',
+      'Tiny',
+      'Peeping',
+      'Chirping',
     ],
     nouns: [
-      "Chick",
-      "Chickie",
-      "Baby-bird",
-      "Peeper",
-      "Chirper",
-      "Yellow",
-      "Fluff",
-      "Downy",
-      "Cuteness",
-      "Sweetie",
+      'Chick',
+      'Chickie',
+      'Baby-bird',
+      'Peeper',
+      'Chirper',
+      'Yellow',
+      'Fluff',
+      'Downy',
+      'Cuteness',
+      'Sweetie',
     ],
   },
-  "🦅": {
+  '🦅': {
     adjectives: [
-      "Eagle",
-      "Soaring",
-      "Majestic",
-      "Powerful",
-      "Sharp-eyed",
-      "Keen",
-      "High-flying",
-      "Fierce",
-      "Proud",
-      "Free",
+      'Eagle',
+      'Soaring',
+      'Majestic',
+      'Powerful',
+      'Sharp-eyed',
+      'Keen',
+      'High-flying',
+      'Fierce',
+      'Proud',
+      'Free',
     ],
     nouns: [
-      "Eagle",
-      "Bald-eagle",
-      "Golden-eagle",
-      "Soarer",
-      "Hunter",
-      "Predator",
-      "Talon",
-      "Claw",
-      "Beak",
-      "Freedom",
+      'Eagle',
+      'Bald-eagle',
+      'Golden-eagle',
+      'Soarer',
+      'Hunter',
+      'Predator',
+      'Talon',
+      'Claw',
+      'Beak',
+      'Freedom',
     ],
   },
-  "🦉": {
+  '🦉': {
     adjectives: [
-      "Owl",
-      "Wise",
-      "Nocturnal",
-      "Hooting",
-      "Big-eyed",
-      "Night",
-      "Moon",
-      "Hunting",
-      "Silent",
-      "Observant",
+      'Owl',
+      'Wise',
+      'Nocturnal',
+      'Hooting',
+      'Big-eyed',
+      'Night',
+      'Moon',
+      'Hunting',
+      'Silent',
+      'Observant',
     ],
     nouns: [
-      "Owl",
-      "Hoot",
-      "Hooter",
-      "Wise-one",
-      "Night-bird",
-      "Moon-bird",
-      "Hunter",
-      "Watcher",
-      "Observer",
-      "Wisdom",
+      'Owl',
+      'Hoot',
+      'Hooter',
+      'Wise-one',
+      'Night-bird',
+      'Moon-bird',
+      'Hunter',
+      'Watcher',
+      'Observer',
+      'Wisdom',
     ],
   },
-  "🦇": {
+  '🦇': {
     adjectives: [
-      "Bat",
-      "Flying",
-      "Night",
-      "Nocturnal",
-      "Cave",
-      "Echolocating",
-      "Upside-down",
-      "Hanging",
-      "Winged",
-      "Vampiric",
+      'Bat',
+      'Flying',
+      'Night',
+      'Nocturnal',
+      'Cave',
+      'Echolocating',
+      'Upside-down',
+      'Hanging',
+      'Winged',
+      'Vampiric',
     ],
     nouns: [
-      "Bat",
-      "Batty",
-      "Night-flyer",
-      "Cave-dweller",
-      "Echo",
-      "Sonar",
-      "Wing",
-      "Membrane",
-      "Batman",
-      "Night",
+      'Bat',
+      'Batty',
+      'Night-flyer',
+      'Cave-dweller',
+      'Echo',
+      'Sonar',
+      'Wing',
+      'Membrane',
+      'Batman',
+      'Night',
     ],
   },
 
   // === ANIMALS - WILD ===
-  "🐗": {
+  '🐗': {
     adjectives: [
-      "Boar",
-      "Wild",
-      "Tusked",
-      "Fierce",
-      "Charging",
-      "Bristly",
-      "Hairy",
-      "Tough",
-      "Rugged",
-      "Forest",
+      'Boar',
+      'Wild',
+      'Tusked',
+      'Fierce',
+      'Charging',
+      'Bristly',
+      'Hairy',
+      'Tough',
+      'Rugged',
+      'Forest',
     ],
     nouns: [
-      "Boar",
-      "Wild-boar",
-      "Tusker",
-      "Bristleback",
-      "Charger",
-      "Beast",
-      "Tusk",
-      "Snout",
-      "Forest",
-      "Wild",
+      'Boar',
+      'Wild-boar',
+      'Tusker',
+      'Bristleback',
+      'Charger',
+      'Beast',
+      'Tusk',
+      'Snout',
+      'Forest',
+      'Wild',
     ],
   },
-  "🐴": {
+  '🐴': {
     adjectives: [
-      "Horse",
-      "Galloping",
-      "Running",
-      "Swift",
-      "Fast",
-      "Graceful",
-      "Majestic",
-      "Noble",
-      "Wild",
-      "Free",
+      'Horse',
+      'Galloping',
+      'Running',
+      'Swift',
+      'Fast',
+      'Graceful',
+      'Majestic',
+      'Noble',
+      'Wild',
+      'Free',
     ],
     nouns: [
-      "Horse",
-      "Stallion",
-      "Mare",
-      "Steed",
-      "Mustang",
-      "Gallop",
-      "Runner",
-      "Wind",
-      "Thunder",
-      "Freedom",
+      'Horse',
+      'Stallion',
+      'Mare',
+      'Steed',
+      'Mustang',
+      'Gallop',
+      'Runner',
+      'Wind',
+      'Thunder',
+      'Freedom',
     ],
   },
-  "🦄": {
+  '🦄': {
     adjectives: [
-      "Unicorn",
-      "Magical",
-      "Mystical",
-      "Rainbow",
-      "Sparkly",
-      "Glittery",
-      "Horned",
-      "Mythical",
-      "Legendary",
-      "Enchanted",
+      'Unicorn',
+      'Magical',
+      'Mystical',
+      'Rainbow',
+      'Sparkly',
+      'Glittery',
+      'Horned',
+      'Mythical',
+      'Legendary',
+      'Enchanted',
     ],
     nouns: [
-      "Unicorn",
-      "Magic",
-      "Rainbow",
-      "Sparkle",
-      "Glitter",
-      "Horn",
-      "Myth",
-      "Legend",
-      "Dream",
-      "Wonder",
+      'Unicorn',
+      'Magic',
+      'Rainbow',
+      'Sparkle',
+      'Glitter',
+      'Horn',
+      'Myth',
+      'Legend',
+      'Dream',
+      'Wonder',
     ],
   },
 
   // === ANIMALS - INSECTS ===
-  "🐝": {
+  '🐝': {
     adjectives: [
-      "Bee",
-      "Buzzing",
-      "Busy",
-      "Honey-making",
-      "Pollen-gathering",
-      "Hive",
-      "Queen",
-      "Worker",
-      "Striped",
-      "Flying",
+      'Bee',
+      'Buzzing',
+      'Busy',
+      'Honey-making',
+      'Pollen-gathering',
+      'Hive',
+      'Queen',
+      'Worker',
+      'Striped',
+      'Flying',
     ],
     nouns: [
-      "Bee",
-      "Honeybee",
-      "Bumblebee",
-      "Buzzer",
-      "Worker",
-      "Queen",
-      "Hive",
-      "Honey",
-      "Pollen",
-      "Nectar",
+      'Bee',
+      'Honeybee',
+      'Bumblebee',
+      'Buzzer',
+      'Worker',
+      'Queen',
+      'Hive',
+      'Honey',
+      'Pollen',
+      'Nectar',
     ],
   },
-  "🐛": {
+  '🐛': {
     adjectives: [
-      "Caterpillar",
-      "Crawling",
-      "Inch-worming",
-      "Green",
-      "Fuzzy",
-      "Hungry",
-      "Munching",
-      "Leaf-eating",
-      "Transforming",
-      "Metamorphosing",
+      'Caterpillar',
+      'Crawling',
+      'Inch-worming',
+      'Green',
+      'Fuzzy',
+      'Hungry',
+      'Munching',
+      'Leaf-eating',
+      'Transforming',
+      'Metamorphosing',
     ],
     nouns: [
-      "Caterpillar",
-      "Larva",
-      "Inchworm",
-      "Crawler",
-      "Muncher",
-      "Leaf-eater",
-      "Cocoon",
-      "Chrysalis",
-      "Future-butterfly",
-      "Hungry",
+      'Caterpillar',
+      'Larva',
+      'Inchworm',
+      'Crawler',
+      'Muncher',
+      'Leaf-eater',
+      'Cocoon',
+      'Chrysalis',
+      'Future-butterfly',
+      'Hungry',
     ],
   },
-  "🦋": {
+  '🦋': {
     adjectives: [
-      "Butterfly",
-      "Fluttering",
-      "Flying",
-      "Colorful",
-      "Beautiful",
-      "Delicate",
-      "Graceful",
-      "Transformed",
-      "Metamorphosed",
-      "Winged",
+      'Butterfly',
+      'Fluttering',
+      'Flying',
+      'Colorful',
+      'Beautiful',
+      'Delicate',
+      'Graceful',
+      'Transformed',
+      'Metamorphosed',
+      'Winged',
     ],
     nouns: [
-      "Butterfly",
-      "Flutter",
-      "Monarch",
-      "Swallowtail",
-      "Wing",
-      "Flight",
-      "Beauty",
-      "Grace",
-      "Transformation",
-      "Metamorphosis",
+      'Butterfly',
+      'Flutter',
+      'Monarch',
+      'Swallowtail',
+      'Wing',
+      'Flight',
+      'Beauty',
+      'Grace',
+      'Transformation',
+      'Metamorphosis',
     ],
   },
 
   // === OBJECTS - STARS ===
-  "⭐": {
+  '⭐': {
     adjectives: [
-      "Star",
-      "Shining",
-      "Bright",
-      "Glowing",
-      "Stellar",
-      "Celestial",
-      "Five-pointed",
-      "Gold",
-      "Award",
-      "Trophy",
+      'Star',
+      'Shining',
+      'Bright',
+      'Glowing',
+      'Stellar',
+      'Celestial',
+      'Five-pointed',
+      'Gold',
+      'Award',
+      'Trophy',
     ],
     nouns: [
-      "Star",
-      "Gold-star",
-      "Award",
-      "Trophy",
-      "Achievement",
-      "Excellence",
-      "Shine",
-      "Glow",
-      "Brightness",
-      "Winner",
+      'Star',
+      'Gold-star',
+      'Award',
+      'Trophy',
+      'Achievement',
+      'Excellence',
+      'Shine',
+      'Glow',
+      'Brightness',
+      'Winner',
     ],
   },
-  "🌟": {
+  '🌟': {
     adjectives: [
-      "Glowing",
-      "Radiating",
-      "Sparkling",
-      "Twinkling",
-      "Shimmering",
-      "Glittering",
-      "Dazzling",
-      "Brilliant",
-      "Luminous",
-      "Shining",
+      'Glowing',
+      'Radiating',
+      'Sparkling',
+      'Twinkling',
+      'Shimmering',
+      'Glittering',
+      'Dazzling',
+      'Brilliant',
+      'Luminous',
+      'Shining',
     ],
     nouns: [
-      "Glow-star",
-      "Sparkle",
-      "Twinkle",
-      "Shimmer",
-      "Glitter",
-      "Dazzle",
-      "Brilliance",
-      "Luminosity",
-      "Radiance",
-      "Shine",
+      'Glow-star',
+      'Sparkle',
+      'Twinkle',
+      'Shimmer',
+      'Glitter',
+      'Dazzle',
+      'Brilliance',
+      'Luminosity',
+      'Radiance',
+      'Shine',
     ],
   },
-  "💫": {
+  '💫': {
     adjectives: [
-      "Dizzy",
-      "Spinning",
-      "Swirling",
-      "Whirling",
-      "Dazed",
-      "Stunned",
-      "Star-struck",
-      "Woozy",
-      "Disoriented",
-      "Seeing-stars",
+      'Dizzy',
+      'Spinning',
+      'Swirling',
+      'Whirling',
+      'Dazed',
+      'Stunned',
+      'Star-struck',
+      'Woozy',
+      'Disoriented',
+      'Seeing-stars',
     ],
     nouns: [
-      "Dizzy-star",
-      "Swirl",
-      "Spin",
-      "Whirl",
-      "Daze",
-      "Stun",
-      "Wooziness",
-      "Disorientation",
-      "Stars",
-      "Vertigo",
+      'Dizzy-star',
+      'Swirl',
+      'Spin',
+      'Whirl',
+      'Daze',
+      'Stun',
+      'Wooziness',
+      'Disorientation',
+      'Stars',
+      'Vertigo',
     ],
   },
-  "✨": {
+  '✨': {
     adjectives: [
-      "Sparkly",
-      "Glittery",
-      "Shimmery",
-      "Twinkling",
-      "Magical",
-      "Enchanted",
-      "Fairy",
-      "Pixie-dust",
-      "Clean",
-      "New",
+      'Sparkly',
+      'Glittery',
+      'Shimmery',
+      'Twinkling',
+      'Magical',
+      'Enchanted',
+      'Fairy',
+      'Pixie-dust',
+      'Clean',
+      'New',
     ],
     nouns: [
-      "Sparkle",
-      "Glitter",
-      "Shimmer",
-      "Twinkle",
-      "Magic",
-      "Pixie-dust",
-      "Fairy-dust",
-      "Shine",
-      "Gleam",
-      "Glitz",
+      'Sparkle',
+      'Glitter',
+      'Shimmer',
+      'Twinkle',
+      'Magic',
+      'Pixie-dust',
+      'Fairy-dust',
+      'Shine',
+      'Gleam',
+      'Glitz',
     ],
   },
 
   // === OBJECTS - POWER ===
-  "⚡": {
+  '⚡': {
     adjectives: [
-      "Lightning",
-      "Electric",
-      "Shocking",
-      "Bolt",
-      "Thunder",
-      "Storm",
-      "Charged",
-      "High-voltage",
-      "Zapping",
-      "Striking",
+      'Lightning',
+      'Electric',
+      'Shocking',
+      'Bolt',
+      'Thunder',
+      'Storm',
+      'Charged',
+      'High-voltage',
+      'Zapping',
+      'Striking',
     ],
     nouns: [
-      "Lightning",
-      "Thunder",
-      "Bolt",
-      "Shock",
-      "Zap",
-      "Voltage",
-      "Electricity",
-      "Charge",
-      "Storm",
-      "Strike",
+      'Lightning',
+      'Thunder',
+      'Bolt',
+      'Shock',
+      'Zap',
+      'Voltage',
+      'Electricity',
+      'Charge',
+      'Storm',
+      'Strike',
     ],
   },
-  "🔥": {
+  '🔥': {
     adjectives: [
-      "Fiery",
-      "Blazing",
-      "Burning",
-      "Flaming",
-      "Hot",
-      "Scorching",
-      "Searing",
-      "Lit",
-      "On-fire",
-      "Smoking",
+      'Fiery',
+      'Blazing',
+      'Burning',
+      'Flaming',
+      'Hot',
+      'Scorching',
+      'Searing',
+      'Lit',
+      'On-fire',
+      'Smoking',
     ],
     nouns: [
-      "Fire",
-      "Flame",
-      "Blaze",
-      "Inferno",
-      "Heat",
-      "Burn",
-      "Ember",
-      "Ash",
-      "Phoenix",
-      "Hotness",
+      'Fire',
+      'Flame',
+      'Blaze',
+      'Inferno',
+      'Heat',
+      'Burn',
+      'Ember',
+      'Ash',
+      'Phoenix',
+      'Hotness',
     ],
   },
 
   // === OBJECTS - RAINBOW ===
-  "🌈": {
+  '🌈': {
     adjectives: [
-      "Rainbow",
-      "Colorful",
-      "Multicolored",
-      "Prismatic",
-      "Spectrum",
-      "ROYGBIV",
-      "Vibrant",
-      "Bright",
-      "Cheerful",
-      "Hopeful",
+      'Rainbow',
+      'Colorful',
+      'Multicolored',
+      'Prismatic',
+      'Spectrum',
+      'ROYGBIV',
+      'Vibrant',
+      'Bright',
+      'Cheerful',
+      'Hopeful',
     ],
     nouns: [
-      "Rainbow",
-      "Spectrum",
-      "Prism",
-      "Color",
-      "Arc",
-      "Promise",
-      "Hope",
-      "Dream",
-      "Wonder",
-      "Magic",
+      'Rainbow',
+      'Spectrum',
+      'Prism',
+      'Color',
+      'Arc',
+      'Promise',
+      'Hope',
+      'Dream',
+      'Wonder',
+      'Magic',
     ],
   },
 
   // === ENTERTAINMENT ===
-  "🎪": {
+  '🎪': {
     adjectives: [
-      "Circus",
-      "Big-top",
-      "Tent",
-      "Carnival",
-      "Fair",
-      "Show",
-      "Spectacular",
-      "Amazing",
-      "Thrilling",
-      "Exciting",
+      'Circus',
+      'Big-top',
+      'Tent',
+      'Carnival',
+      'Fair',
+      'Show',
+      'Spectacular',
+      'Amazing',
+      'Thrilling',
+      'Exciting',
     ],
     nouns: [
-      "Circus",
-      "Big-top",
-      "Tent",
-      "Carnival",
-      "Fair",
-      "Show",
-      "Ringmaster",
-      "Performance",
-      "Spectacle",
-      "Wonder",
+      'Circus',
+      'Big-top',
+      'Tent',
+      'Carnival',
+      'Fair',
+      'Show',
+      'Ringmaster',
+      'Performance',
+      'Spectacle',
+      'Wonder',
     ],
   },
-  "🎨": {
+  '🎨': {
     adjectives: [
-      "Artistic",
-      "Creative",
-      "Colorful",
-      "Painting",
-      "Drawing",
-      "Sketching",
-      "Imaginative",
-      "Expressive",
-      "Abstract",
-      "Vibrant",
+      'Artistic',
+      'Creative',
+      'Colorful',
+      'Painting',
+      'Drawing',
+      'Sketching',
+      'Imaginative',
+      'Expressive',
+      'Abstract',
+      'Vibrant',
     ],
     nouns: [
-      "Artist",
-      "Painter",
-      "Creator",
-      "Palette",
-      "Brush",
-      "Canvas",
-      "Paint",
-      "Color",
-      "Art",
-      "Masterpiece",
+      'Artist',
+      'Painter',
+      'Creator',
+      'Palette',
+      'Brush',
+      'Canvas',
+      'Paint',
+      'Color',
+      'Art',
+      'Masterpiece',
     ],
   },
-  "🎯": {
+  '🎯': {
     adjectives: [
-      "Target",
-      "Bullseye",
-      "Accurate",
-      "Precise",
-      "Dart",
-      "Arrow",
-      "Aiming",
-      "Focused",
-      "On-target",
-      "Perfect",
+      'Target',
+      'Bullseye',
+      'Accurate',
+      'Precise',
+      'Dart',
+      'Arrow',
+      'Aiming',
+      'Focused',
+      'On-target',
+      'Perfect',
     ],
     nouns: [
-      "Target",
-      "Bullseye",
-      "Dart",
-      "Arrow",
-      "Aim",
-      "Precision",
-      "Accuracy",
-      "Focus",
-      "Goal",
-      "Center",
+      'Target',
+      'Bullseye',
+      'Dart',
+      'Arrow',
+      'Aim',
+      'Precision',
+      'Accuracy',
+      'Focus',
+      'Goal',
+      'Center',
     ],
   },
-  "🎲": {
+  '🎲': {
     adjectives: [
-      "Dice",
-      "Rolling",
-      "Random",
-      "Chance",
-      "Lucky",
-      "Gambling",
-      "Gaming",
-      "Risk-taking",
-      "Board-game",
-      "Six-sided",
+      'Dice',
+      'Rolling',
+      'Random',
+      'Chance',
+      'Lucky',
+      'Gambling',
+      'Gaming',
+      'Risk-taking',
+      'Board-game',
+      'Six-sided',
     ],
     nouns: [
-      "Dice",
-      "Die",
-      "Cube",
-      "Roller",
-      "Gambler",
-      "Risk",
-      "Chance",
-      "Luck",
-      "Fortune",
-      "Roll",
+      'Dice',
+      'Die',
+      'Cube',
+      'Roller',
+      'Gambler',
+      'Risk',
+      'Chance',
+      'Luck',
+      'Fortune',
+      'Roll',
     ],
   },
-  "🎮": {
+  '🎮': {
     adjectives: [
-      "Gaming",
-      "Controller",
-      "Console",
-      "Video-game",
-      "Arcade",
-      "Digital",
-      "Button-mashing",
-      "Level-up",
-      "High-score",
-      "Boss-battle",
+      'Gaming',
+      'Controller',
+      'Console',
+      'Video-game',
+      'Arcade',
+      'Digital',
+      'Button-mashing',
+      'Level-up',
+      'High-score',
+      'Boss-battle',
     ],
     nouns: [
-      "Gamer",
-      "Player",
-      "Controller",
-      "Console",
-      "Game",
-      "Arcade",
-      "Joystick",
-      "Button",
-      "Level",
-      "Score",
+      'Gamer',
+      'Player',
+      'Controller',
+      'Console',
+      'Game',
+      'Arcade',
+      'Joystick',
+      'Button',
+      'Level',
+      'Score',
     ],
   },
-  "🕹️": {
+  '🕹️': {
     adjectives: [
-      "Joystick",
-      "Arcade",
-      "Retro",
-      "Classic",
-      "Old-school",
-      "Vintage",
-      "Atari",
-      "Stick",
-      "Up-down-left-right",
-      "8-bit",
+      'Joystick',
+      'Arcade',
+      'Retro',
+      'Classic',
+      'Old-school',
+      'Vintage',
+      'Atari',
+      'Stick',
+      'Up-down-left-right',
+      '8-bit',
     ],
     nouns: [
-      "Joystick",
-      "Stick",
-      "Arcade",
-      "Controller",
-      "Retro",
-      "Classic",
-      "Vintage",
-      "Gamer",
-      "Arcade-master",
-      "8-bit",
+      'Joystick',
+      'Stick',
+      'Arcade',
+      'Controller',
+      'Retro',
+      'Classic',
+      'Vintage',
+      'Gamer',
+      'Arcade-master',
+      '8-bit',
     ],
   },
 
   // === MUSIC ===
-  "🎸": {
+  '🎸': {
     adjectives: [
-      "Guitar",
-      "Rocking",
-      "Strumming",
-      "Shredding",
-      "Electric",
-      "Acoustic",
-      "String",
-      "Chord",
-      "Solo",
-      "Jamming",
+      'Guitar',
+      'Rocking',
+      'Strumming',
+      'Shredding',
+      'Electric',
+      'Acoustic',
+      'String',
+      'Chord',
+      'Solo',
+      'Jamming',
     ],
     nouns: [
-      "Guitar",
-      "Guitarist",
-      "Rocker",
-      "Strummer",
-      "Shredder",
-      "Axe",
-      "String",
-      "Chord",
-      "Solo",
-      "Jam",
+      'Guitar',
+      'Guitarist',
+      'Rocker',
+      'Strummer',
+      'Shredder',
+      'Axe',
+      'String',
+      'Chord',
+      'Solo',
+      'Jam',
     ],
   },
-  "🎺": {
+  '🎺': {
     adjectives: [
-      "Trumpet",
-      "Brass",
-      "Blowing",
-      "Tooting",
-      "Fanfare",
-      "Jazz",
-      "Herald",
-      "Horn",
-      "Loud",
-      "Bright",
+      'Trumpet',
+      'Brass',
+      'Blowing',
+      'Tooting',
+      'Fanfare',
+      'Jazz',
+      'Herald',
+      'Horn',
+      'Loud',
+      'Bright',
     ],
     nouns: [
-      "Trumpet",
-      "Trumpeter",
-      "Horn",
-      "Brass",
-      "Fanfare",
-      "Jazz",
-      "Herald",
-      "Toot",
-      "Blow",
-      "Sound",
+      'Trumpet',
+      'Trumpeter',
+      'Horn',
+      'Brass',
+      'Fanfare',
+      'Jazz',
+      'Herald',
+      'Toot',
+      'Blow',
+      'Sound',
     ],
   },
-  "🎷": {
+  '🎷': {
     adjectives: [
-      "Saxophone",
-      "Sax",
-      "Jazzy",
-      "Smooth",
-      "Sultry",
-      "Soulful",
-      "Blues",
-      "Tenor",
-      "Alto",
-      "Reed",
+      'Saxophone',
+      'Sax',
+      'Jazzy',
+      'Smooth',
+      'Sultry',
+      'Soulful',
+      'Blues',
+      'Tenor',
+      'Alto',
+      'Reed',
     ],
     nouns: [
-      "Saxophone",
-      "Sax",
-      "Saxophonist",
-      "Jazz",
-      "Blues",
-      "Soul",
-      "Reed",
-      "Horn",
-      "Smooth",
-      "Cool",
+      'Saxophone',
+      'Sax',
+      'Saxophonist',
+      'Jazz',
+      'Blues',
+      'Soul',
+      'Reed',
+      'Horn',
+      'Smooth',
+      'Cool',
     ],
   },
-  "🥁": {
+  '🥁': {
     adjectives: [
-      "Drum",
-      "Drumming",
-      "Beating",
-      "Rhythmic",
-      "Percussion",
-      "Thumping",
-      "Pounding",
-      "Banging",
-      "Rock",
-      "Jazz",
+      'Drum',
+      'Drumming',
+      'Beating',
+      'Rhythmic',
+      'Percussion',
+      'Thumping',
+      'Pounding',
+      'Banging',
+      'Rock',
+      'Jazz',
     ],
     nouns: [
-      "Drum",
-      "Drummer",
-      "Beat",
-      "Rhythm",
-      "Percussion",
-      "Thump",
-      "Pound",
-      "Bang",
-      "Stick",
-      "Roll",
+      'Drum',
+      'Drummer',
+      'Beat',
+      'Rhythm',
+      'Percussion',
+      'Thump',
+      'Pound',
+      'Bang',
+      'Stick',
+      'Roll',
     ],
   },
-  "🎻": {
+  '🎻': {
     adjectives: [
-      "Violin",
-      "String",
-      "Bowing",
-      "Classical",
-      "Orchestra",
-      "Symphony",
-      "Fiddle",
-      "Folk",
-      "Melodic",
-      "Lyrical",
+      'Violin',
+      'String',
+      'Bowing',
+      'Classical',
+      'Orchestra',
+      'Symphony',
+      'Fiddle',
+      'Folk',
+      'Melodic',
+      'Lyrical',
     ],
     nouns: [
-      "Violin",
-      "Violinist",
-      "Fiddle",
-      "Fiddler",
-      "Bow",
-      "String",
-      "Orchestra",
-      "Symphony",
-      "Melody",
-      "Tune",
+      'Violin',
+      'Violinist',
+      'Fiddle',
+      'Fiddler',
+      'Bow',
+      'String',
+      'Orchestra',
+      'Symphony',
+      'Melody',
+      'Tune',
     ],
   },
-  "🎤": {
+  '🎤': {
     adjectives: [
-      "Microphone",
-      "Singing",
-      "Vocal",
-      "Karaoke",
-      "Performance",
-      "Stage",
-      "Crooning",
-      "Belting",
-      "Harmonizing",
-      "Rapping",
+      'Microphone',
+      'Singing',
+      'Vocal',
+      'Karaoke',
+      'Performance',
+      'Stage',
+      'Crooning',
+      'Belting',
+      'Harmonizing',
+      'Rapping',
     ],
     nouns: [
-      "Microphone",
-      "Mic",
-      "Singer",
-      "Vocalist",
-      "Crooner",
-      "Performer",
-      "Star",
-      "Voice",
-      "Song",
-      "Karaoke",
+      'Microphone',
+      'Mic',
+      'Singer',
+      'Vocalist',
+      'Crooner',
+      'Performer',
+      'Star',
+      'Voice',
+      'Song',
+      'Karaoke',
     ],
   },
-  "🎧": {
+  '🎧': {
     adjectives: [
-      "Headphone",
-      "Listening",
-      "Music-loving",
-      "DJ",
-      "Beats",
-      "Bass",
-      "Audio",
-      "Sound",
-      "Jamming",
-      "Vibing",
+      'Headphone',
+      'Listening',
+      'Music-loving',
+      'DJ',
+      'Beats',
+      'Bass',
+      'Audio',
+      'Sound',
+      'Jamming',
+      'Vibing',
     ],
     nouns: [
-      "Headphones",
-      "Headset",
-      "Listener",
-      "DJ",
-      "Music-lover",
-      "Beats",
-      "Bass",
-      "Sound",
-      "Audio",
-      "Vibe",
+      'Headphones',
+      'Headset',
+      'Listener',
+      'DJ',
+      'Music-lover',
+      'Beats',
+      'Bass',
+      'Sound',
+      'Audio',
+      'Vibe',
     ],
   },
 
   // === FILM ===
-  "🎬": {
+  '🎬': {
     adjectives: [
-      "Clapboard",
-      "Action",
-      "Take",
-      "Scene",
-      "Directing",
-      "Filming",
-      "Movie",
-      "Cinema",
-      "Hollywood",
-      "Blockbuster",
+      'Clapboard',
+      'Action',
+      'Take',
+      'Scene',
+      'Directing',
+      'Filming',
+      'Movie',
+      'Cinema',
+      'Hollywood',
+      'Blockbuster',
     ],
     nouns: [
-      "Clapboard",
-      "Clapper",
-      "Director",
-      "Action",
-      "Take",
-      "Scene",
-      "Movie",
-      "Film",
-      "Cinema",
-      "Cut",
+      'Clapboard',
+      'Clapper',
+      'Director',
+      'Action',
+      'Take',
+      'Scene',
+      'Movie',
+      'Film',
+      'Cinema',
+      'Cut',
     ],
   },
-  "🎥": {
+  '🎥': {
     adjectives: [
-      "Camera",
-      "Filming",
-      "Recording",
-      "Shooting",
-      "Video",
-      "Cinematography",
-      "Movie",
-      "Documentary",
-      "Rolling",
-      "Action",
+      'Camera',
+      'Filming',
+      'Recording',
+      'Shooting',
+      'Video',
+      'Cinematography',
+      'Movie',
+      'Documentary',
+      'Rolling',
+      'Action',
     ],
     nouns: [
-      "Camera",
-      "Camcorder",
-      "Filmmaker",
-      "Cinematographer",
-      "Video",
-      "Film",
-      "Movie",
-      "Recording",
-      "Shoot",
-      "Roll",
+      'Camera',
+      'Camcorder',
+      'Filmmaker',
+      'Cinematographer',
+      'Video',
+      'Film',
+      'Movie',
+      'Recording',
+      'Shoot',
+      'Roll',
     ],
   },
 
   // === FRUITS ===
-  "🍎": {
+  '🍎': {
     adjectives: [
-      "Apple",
-      "Red",
-      "Crisp",
-      "Crunchy",
-      "Juicy",
-      "Sweet",
-      "Tart",
-      "Fresh",
-      "Healthy",
-      "Teacher",
+      'Apple',
+      'Red',
+      'Crisp',
+      'Crunchy',
+      'Juicy',
+      'Sweet',
+      'Tart',
+      'Fresh',
+      'Healthy',
+      'Teacher',
     ],
     nouns: [
-      "Apple",
-      "Red-delicious",
-      "Granny-smith",
-      "Fuji",
-      "Gala",
-      "Honeycrisp",
-      "Core",
-      "Seed",
-      "Pie",
-      "Cider",
+      'Apple',
+      'Red-delicious',
+      'Granny-smith',
+      'Fuji',
+      'Gala',
+      'Honeycrisp',
+      'Core',
+      'Seed',
+      'Pie',
+      'Cider',
     ],
   },
-  "🍊": {
+  '🍊': {
     adjectives: [
-      "Orange",
-      "Citrus",
-      "Tangy",
-      "Zesty",
-      "Vitamin-C",
-      "Juicy",
-      "Fresh",
-      "Bright",
-      "Sunny",
-      "Florida",
+      'Orange',
+      'Citrus',
+      'Tangy',
+      'Zesty',
+      'Vitamin-C',
+      'Juicy',
+      'Fresh',
+      'Bright',
+      'Sunny',
+      'Florida',
     ],
     nouns: [
-      "Orange",
-      "Citrus",
-      "Vitamin-C",
-      "Juice",
-      "Zest",
-      "Peel",
-      "Slice",
-      "Segment",
-      "Florida",
-      "Sunshine",
+      'Orange',
+      'Citrus',
+      'Vitamin-C',
+      'Juice',
+      'Zest',
+      'Peel',
+      'Slice',
+      'Segment',
+      'Florida',
+      'Sunshine',
     ],
   },
-  "🍌": {
+  '🍌': {
     adjectives: [
-      "Banana",
-      "Yellow",
-      "Curved",
-      "Peelable",
-      "Potassium",
-      "Tropical",
-      "Smooth",
-      "Sweet",
-      "Monkey",
-      "Split",
+      'Banana',
+      'Yellow',
+      'Curved',
+      'Peelable',
+      'Potassium',
+      'Tropical',
+      'Smooth',
+      'Sweet',
+      'Monkey',
+      'Split',
     ],
     nouns: [
-      "Banana",
-      "Plantain",
-      "Potassium",
-      "Peel",
-      "Bunch",
-      "Split",
-      "Smoothie",
-      "Bread",
-      "Foster",
-      "Monkey-food",
+      'Banana',
+      'Plantain',
+      'Potassium',
+      'Peel',
+      'Bunch',
+      'Split',
+      'Smoothie',
+      'Bread',
+      'Foster',
+      'Monkey-food',
     ],
   },
-  "🍇": {
+  '🍇': {
     adjectives: [
-      "Grape",
-      "Purple",
-      "Green",
-      "Bunch",
-      "Vine",
-      "Wine",
-      "Juicy",
-      "Sweet",
-      "Seedless",
-      "Cluster",
+      'Grape',
+      'Purple',
+      'Green',
+      'Bunch',
+      'Vine',
+      'Wine',
+      'Juicy',
+      'Sweet',
+      'Seedless',
+      'Cluster',
     ],
     nouns: [
-      "Grape",
-      "Grapes",
-      "Bunch",
-      "Cluster",
-      "Vine",
-      "Vineyard",
-      "Wine",
-      "Raisin",
-      "Juice",
-      "Fruit",
+      'Grape',
+      'Grapes',
+      'Bunch',
+      'Cluster',
+      'Vine',
+      'Vineyard',
+      'Wine',
+      'Raisin',
+      'Juice',
+      'Fruit',
     ],
   },
-  "🍓": {
+  '🍓': {
     adjectives: [
-      "Strawberry",
-      "Red",
-      "Sweet",
-      "Juicy",
-      "Berry",
-      "Seeded",
-      "Fresh",
-      "Summer",
-      "Shortcake",
-      "Jam",
+      'Strawberry',
+      'Red',
+      'Sweet',
+      'Juicy',
+      'Berry',
+      'Seeded',
+      'Fresh',
+      'Summer',
+      'Shortcake',
+      'Jam',
     ],
     nouns: [
-      "Strawberry",
-      "Berry",
-      "Seed",
-      "Shortcake",
-      "Jam",
-      "Preserves",
-      "Smoothie",
-      "Patch",
-      "Field",
-      "Summer",
+      'Strawberry',
+      'Berry',
+      'Seed',
+      'Shortcake',
+      'Jam',
+      'Preserves',
+      'Smoothie',
+      'Patch',
+      'Field',
+      'Summer',
     ],
   },
-  "🥝": {
+  '🥝': {
     adjectives: [
-      "Kiwi",
-      "Green",
-      "Fuzzy",
-      "Tart",
-      "Tangy",
-      "Vitamin-C",
-      "New-Zealand",
-      "Tropical",
-      "Exotic",
-      "Hairy",
+      'Kiwi',
+      'Green',
+      'Fuzzy',
+      'Tart',
+      'Tangy',
+      'Vitamin-C',
+      'New-Zealand',
+      'Tropical',
+      'Exotic',
+      'Hairy',
     ],
     nouns: [
-      "Kiwi",
-      "Kiwifruit",
-      "New-Zealand",
-      "Vitamin-C",
-      "Fuzz",
-      "Green",
-      "Slice",
-      "Tropical",
-      "Exotic",
-      "Bird",
+      'Kiwi',
+      'Kiwifruit',
+      'New-Zealand',
+      'Vitamin-C',
+      'Fuzz',
+      'Green',
+      'Slice',
+      'Tropical',
+      'Exotic',
+      'Bird',
     ],
   },
-  "🍑": {
+  '🍑': {
     adjectives: [
-      "Peach",
-      "Fuzzy",
-      "Juicy",
-      "Sweet",
-      "Soft",
-      "Ripe",
-      "Georgia",
-      "Summer",
-      "Pit",
-      "Cobbler",
+      'Peach',
+      'Fuzzy',
+      'Juicy',
+      'Sweet',
+      'Soft',
+      'Ripe',
+      'Georgia',
+      'Summer',
+      'Pit',
+      'Cobbler',
     ],
     nouns: [
-      "Peach",
-      "Fuzz",
-      "Pit",
-      "Stone",
-      "Georgia",
-      "Cobbler",
-      "Pie",
-      "Summer",
-      "Orchard",
-      "Tree",
+      'Peach',
+      'Fuzz',
+      'Pit',
+      'Stone',
+      'Georgia',
+      'Cobbler',
+      'Pie',
+      'Summer',
+      'Orchard',
+      'Tree',
     ],
   },
-  "🥭": {
+  '🥭': {
     adjectives: [
-      "Mango",
-      "Tropical",
-      "Juicy",
-      "Sweet",
-      "Golden",
-      "Exotic",
-      "Ripe",
-      "Succulent",
-      "Luscious",
-      "Island",
+      'Mango',
+      'Tropical',
+      'Juicy',
+      'Sweet',
+      'Golden',
+      'Exotic',
+      'Ripe',
+      'Succulent',
+      'Luscious',
+      'Island',
     ],
     nouns: [
-      "Mango",
-      "Tropical",
-      "Exotic",
-      "Island",
-      "Paradise",
-      "Pit",
-      "Slice",
-      "Smoothie",
-      "Lassi",
-      "Chutney",
+      'Mango',
+      'Tropical',
+      'Exotic',
+      'Island',
+      'Paradise',
+      'Pit',
+      'Slice',
+      'Smoothie',
+      'Lassi',
+      'Chutney',
     ],
   },
-  "🍍": {
+  '🍍': {
     adjectives: [
-      "Pineapple",
-      "Tropical",
-      "Spiky",
-      "Crown",
-      "Golden",
-      "Tangy",
-      "Sweet",
-      "Juicy",
-      "Hawaii",
-      "Island",
+      'Pineapple',
+      'Tropical',
+      'Spiky',
+      'Crown',
+      'Golden',
+      'Tangy',
+      'Sweet',
+      'Juicy',
+      'Hawaii',
+      'Island',
     ],
     nouns: [
-      "Pineapple",
-      "Tropical",
-      "Spikes",
-      "Crown",
-      "Hawaii",
-      "Island",
-      "Paradise",
-      "Juice",
-      "Pizza",
-      "Colada",
+      'Pineapple',
+      'Tropical',
+      'Spikes',
+      'Crown',
+      'Hawaii',
+      'Island',
+      'Paradise',
+      'Juice',
+      'Pizza',
+      'Colada',
     ],
   },
-  "🥥": {
+  '🥥': {
     adjectives: [
-      "Coconut",
-      "Tropical",
-      "Hairy",
-      "Hard-shell",
-      "Island",
-      "Paradise",
-      "Cream",
-      "Milk",
-      "Water",
-      "Palm",
+      'Coconut',
+      'Tropical',
+      'Hairy',
+      'Hard-shell',
+      'Island',
+      'Paradise',
+      'Cream',
+      'Milk',
+      'Water',
+      'Palm',
     ],
     nouns: [
-      "Coconut",
-      "Tropical",
-      "Island",
-      "Palm",
-      "Shell",
-      "Milk",
-      "Water",
-      "Cream",
-      "Oil",
-      "Paradise",
+      'Coconut',
+      'Tropical',
+      'Island',
+      'Palm',
+      'Shell',
+      'Milk',
+      'Water',
+      'Cream',
+      'Oil',
+      'Paradise',
     ],
   },
 
   // === VEGETABLES ===
-  "🥑": {
+  '🥑': {
     adjectives: [
-      "Avocado",
-      "Green",
-      "Creamy",
-      "Healthy",
-      "Millennial",
-      "Guacamole",
-      "Toast",
-      "Ripe",
-      "Pit",
-      "Nutritious",
+      'Avocado',
+      'Green',
+      'Creamy',
+      'Healthy',
+      'Millennial',
+      'Guacamole',
+      'Toast',
+      'Ripe',
+      'Pit',
+      'Nutritious',
     ],
     nouns: [
-      "Avocado",
-      "Guac",
-      "Guacamole",
-      "Toast",
-      "Pit",
-      "Millennial",
-      "Health",
-      "Fat",
-      "Spread",
-      "Green",
+      'Avocado',
+      'Guac',
+      'Guacamole',
+      'Toast',
+      'Pit',
+      'Millennial',
+      'Health',
+      'Fat',
+      'Spread',
+      'Green',
     ],
   },
-  "🍆": {
+  '🍆': {
     adjectives: [
-      "Eggplant",
-      "Purple",
-      "Aubergine",
-      "Shiny",
-      "Glossy",
-      "Vegetable",
-      "Emoji",
-      "Suggestive",
-      "Mediterranean",
-      "Grilled",
+      'Eggplant',
+      'Purple',
+      'Aubergine',
+      'Shiny',
+      'Glossy',
+      'Vegetable',
+      'Emoji',
+      'Suggestive',
+      'Mediterranean',
+      'Grilled',
     ],
     nouns: [
-      "Eggplant",
-      "Aubergine",
-      "Vegetable",
-      "Purple",
-      "Emoji",
-      "Parmesan",
-      "Mediterranean",
-      "Grill",
-      "Roast",
-      "Moussaka",
+      'Eggplant',
+      'Aubergine',
+      'Vegetable',
+      'Purple',
+      'Emoji',
+      'Parmesan',
+      'Mediterranean',
+      'Grill',
+      'Roast',
+      'Moussaka',
     ],
   },
-  "🥕": {
+  '🥕': {
     adjectives: [
-      "Carrot",
-      "Orange",
-      "Crunchy",
-      "Root",
-      "Vegetable",
-      "Vitamin-A",
-      "Bunny",
-      "Healthy",
-      "Fresh",
-      "Garden",
+      'Carrot',
+      'Orange',
+      'Crunchy',
+      'Root',
+      'Vegetable',
+      'Vitamin-A',
+      'Bunny',
+      'Healthy',
+      'Fresh',
+      'Garden',
     ],
     nouns: [
-      "Carrot",
-      "Root",
-      "Vegetable",
-      "Vitamin-A",
-      "Bunny-food",
-      "Orange",
-      "Garden",
-      "Crunch",
-      "Stick",
-      "Top",
+      'Carrot',
+      'Root',
+      'Vegetable',
+      'Vitamin-A',
+      'Bunny-food',
+      'Orange',
+      'Garden',
+      'Crunch',
+      'Stick',
+      'Top',
     ],
   },
-  "🌽": {
+  '🌽': {
     adjectives: [
-      "Corn",
-      "Maize",
-      "Yellow",
-      "Kernel",
-      "Cob",
-      "Sweet",
-      "Buttery",
-      "Pop",
-      "Field",
-      "Farm",
+      'Corn',
+      'Maize',
+      'Yellow',
+      'Kernel',
+      'Cob',
+      'Sweet',
+      'Buttery',
+      'Pop',
+      'Field',
+      'Farm',
     ],
     nouns: [
-      "Corn",
-      "Maize",
-      "Cob",
-      "Kernel",
-      "Pop",
-      "Popcorn",
-      "Field",
-      "Farm",
-      "Butter",
-      "Sweet-corn",
+      'Corn',
+      'Maize',
+      'Cob',
+      'Kernel',
+      'Pop',
+      'Popcorn',
+      'Field',
+      'Farm',
+      'Butter',
+      'Sweet-corn',
     ],
   },
-  "🌶️": {
+  '🌶️': {
     adjectives: [
-      "Pepper",
-      "Chili",
-      "Hot",
-      "Spicy",
-      "Fiery",
-      "Red",
-      "Burning",
-      "Scoville",
-      "Jalapeño",
-      "Habanero",
+      'Pepper',
+      'Chili',
+      'Hot',
+      'Spicy',
+      'Fiery',
+      'Red',
+      'Burning',
+      'Scoville',
+      'Jalapeño',
+      'Habanero',
     ],
     nouns: [
-      "Pepper",
-      "Chili",
-      "Chile",
-      "Jalapeño",
-      "Habanero",
-      "Heat",
-      "Spice",
-      "Fire",
-      "Burn",
-      "Scoville",
+      'Pepper',
+      'Chili',
+      'Chile',
+      'Jalapeño',
+      'Habanero',
+      'Heat',
+      'Spice',
+      'Fire',
+      'Burn',
+      'Scoville',
     ],
   },
-  "🫑": {
+  '🫑': {
     adjectives: [
-      "Bell-pepper",
-      "Sweet",
-      "Crunchy",
-      "Colorful",
-      "Green",
-      "Red",
-      "Yellow",
-      "Fresh",
-      "Crisp",
-      "Stuffed",
+      'Bell-pepper',
+      'Sweet',
+      'Crunchy',
+      'Colorful',
+      'Green',
+      'Red',
+      'Yellow',
+      'Fresh',
+      'Crisp',
+      'Stuffed',
     ],
     nouns: [
-      "Bell-pepper",
-      "Pepper",
-      "Capsicum",
-      "Bell",
-      "Sweet-pepper",
-      "Stuffed",
-      "Fajita",
-      "Garden",
-      "Crunch",
-      "Color",
+      'Bell-pepper',
+      'Pepper',
+      'Capsicum',
+      'Bell',
+      'Sweet-pepper',
+      'Stuffed',
+      'Fajita',
+      'Garden',
+      'Crunch',
+      'Color',
     ],
   },
-  "🥒": {
+  '🥒': {
     adjectives: [
-      "Cucumber",
-      "Green",
-      "Cool",
-      "Crisp",
-      "Crunchy",
-      "Refreshing",
-      "Hydrating",
-      "Pickle",
-      "Garden",
-      "Fresh",
+      'Cucumber',
+      'Green',
+      'Cool',
+      'Crisp',
+      'Crunchy',
+      'Refreshing',
+      'Hydrating',
+      'Pickle',
+      'Garden',
+      'Fresh',
     ],
     nouns: [
-      "Cucumber",
-      "Cuke",
-      "Pickle",
-      "Gherkin",
-      "Cool-cucumber",
-      "Garden",
-      "Salad",
-      "Crunch",
-      "Green",
-      "Spa",
+      'Cucumber',
+      'Cuke',
+      'Pickle',
+      'Gherkin',
+      'Cool-cucumber',
+      'Garden',
+      'Salad',
+      'Crunch',
+      'Green',
+      'Spa',
     ],
   },
-  "🥬": {
+  '🥬': {
     adjectives: [
-      "Leafy",
-      "Green",
-      "Lettuce",
-      "Cabbage",
-      "Bok-choy",
-      "Fresh",
-      "Crisp",
-      "Healthy",
-      "Salad",
-      "Vegetable",
+      'Leafy',
+      'Green',
+      'Lettuce',
+      'Cabbage',
+      'Bok-choy',
+      'Fresh',
+      'Crisp',
+      'Healthy',
+      'Salad',
+      'Vegetable',
     ],
     nouns: [
-      "Lettuce",
-      "Cabbage",
-      "Bok-choy",
-      "Greens",
-      "Leafy",
-      "Salad",
-      "Vegetable",
-      "Garden",
-      "Leaf",
-      "Green",
+      'Lettuce',
+      'Cabbage',
+      'Bok-choy',
+      'Greens',
+      'Leafy',
+      'Salad',
+      'Vegetable',
+      'Garden',
+      'Leaf',
+      'Green',
     ],
   },
-  "🥦": {
+  '🥦': {
     adjectives: [
-      "Broccoli",
-      "Green",
-      "Tree",
-      "Floret",
-      "Healthy",
-      "Vegetable",
-      "Cruciferous",
-      "Steamed",
-      "Nutritious",
-      "Forest",
+      'Broccoli',
+      'Green',
+      'Tree',
+      'Floret',
+      'Healthy',
+      'Vegetable',
+      'Cruciferous',
+      'Steamed',
+      'Nutritious',
+      'Forest',
     ],
     nouns: [
-      "Broccoli",
-      "Tree",
-      "Floret",
-      "Forest",
-      "Mini-tree",
-      "Vegetable",
-      "Green",
-      "Health",
-      "Nutrient",
-      "Crown",
+      'Broccoli',
+      'Tree',
+      'Floret',
+      'Forest',
+      'Mini-tree',
+      'Vegetable',
+      'Green',
+      'Health',
+      'Nutrient',
+      'Crown',
     ],
   },
-  "🧄": {
+  '🧄': {
     adjectives: [
-      "Garlic",
-      "Pungent",
-      "Aromatic",
-      "Stinky",
-      "Clove",
-      "Bulb",
-      "Vampire-repelling",
-      "Flavorful",
-      "Strong",
-      "Italian",
+      'Garlic',
+      'Pungent',
+      'Aromatic',
+      'Stinky',
+      'Clove',
+      'Bulb',
+      'Vampire-repelling',
+      'Flavorful',
+      'Strong',
+      'Italian',
     ],
     nouns: [
-      "Garlic",
-      "Clove",
-      "Bulb",
-      "Vampire-repellent",
-      "Flavor",
-      "Aroma",
-      "Stink",
-      "Italian",
-      "Aioli",
-      "Scampi",
+      'Garlic',
+      'Clove',
+      'Bulb',
+      'Vampire-repellent',
+      'Flavor',
+      'Aroma',
+      'Stink',
+      'Italian',
+      'Aioli',
+      'Scampi',
     ],
   },
-  "🧅": {
+  '🧅': {
     adjectives: [
-      "Onion",
-      "Layered",
-      "Tear-inducing",
-      "Pungent",
-      "Aromatic",
-      "Bulb",
-      "Caramelized",
-      "Red",
-      "White",
-      "Crying",
+      'Onion',
+      'Layered',
+      'Tear-inducing',
+      'Pungent',
+      'Aromatic',
+      'Bulb',
+      'Caramelized',
+      'Red',
+      'White',
+      'Crying',
     ],
     nouns: [
-      "Onion",
-      "Bulb",
-      "Layer",
-      "Tear",
-      "Cry",
-      "Caramelization",
-      "Ring",
-      "Shallot",
-      "Scallion",
-      "Flavor",
+      'Onion',
+      'Bulb',
+      'Layer',
+      'Tear',
+      'Cry',
+      'Caramelization',
+      'Ring',
+      'Shallot',
+      'Scallion',
+      'Flavor',
     ],
   },
-  "🍄": {
+  '🍄': {
     adjectives: [
-      "Mushroom",
-      "Fungus",
-      "Toadstool",
-      "Spotted",
-      "Red",
-      "White",
-      "Forest",
-      "Mario",
-      "Power-up",
-      "Magic",
+      'Mushroom',
+      'Fungus',
+      'Toadstool',
+      'Spotted',
+      'Red',
+      'White',
+      'Forest',
+      'Mario',
+      'Power-up',
+      'Magic',
     ],
     nouns: [
-      "Mushroom",
-      "Fungus",
-      "Toadstool",
-      "Shroom",
-      "Mario",
-      "Power-up",
-      "Forest",
-      "Fairy-ring",
-      "Cap",
-      "Stem",
+      'Mushroom',
+      'Fungus',
+      'Toadstool',
+      'Shroom',
+      'Mario',
+      'Power-up',
+      'Forest',
+      'Fairy-ring',
+      'Cap',
+      'Stem',
     ],
   },
-  "🥜": {
+  '🥜': {
     adjectives: [
-      "Peanut",
-      "Nutty",
-      "Legume",
-      "Shell",
-      "Roasted",
-      "Salty",
-      "Butter",
-      "Allergy",
-      "Baseball",
-      "Circus",
+      'Peanut',
+      'Nutty',
+      'Legume',
+      'Shell',
+      'Roasted',
+      'Salty',
+      'Butter',
+      'Allergy',
+      'Baseball',
+      'Circus',
     ],
     nouns: [
-      "Peanut",
-      "Nut",
-      "Legume",
-      "Shell",
-      "Butter",
-      "PB",
-      "Baseball",
-      "Circus",
-      "Elephant",
-      "Allergy",
+      'Peanut',
+      'Nut',
+      'Legume',
+      'Shell',
+      'Butter',
+      'PB',
+      'Baseball',
+      'Circus',
+      'Elephant',
+      'Allergy',
     ],
   },
-  "🌰": {
+  '🌰': {
     adjectives: [
-      "Chestnut",
-      "Brown",
-      "Roasted",
-      "Nutty",
-      "Fall",
-      "Autumn",
-      "Winter",
-      "Fire",
-      "Open-fire",
-      "Christmas",
+      'Chestnut',
+      'Brown',
+      'Roasted',
+      'Nutty',
+      'Fall',
+      'Autumn',
+      'Winter',
+      'Fire',
+      'Open-fire',
+      'Christmas',
     ],
     nouns: [
-      "Chestnut",
-      "Nut",
-      "Acorn",
-      "Brown",
-      "Roast",
-      "Fall",
-      "Autumn",
-      "Winter",
-      "Fire",
-      "Christmas",
+      'Chestnut',
+      'Nut',
+      'Acorn',
+      'Brown',
+      'Roast',
+      'Fall',
+      'Autumn',
+      'Winter',
+      'Fire',
+      'Christmas',
     ],
   },
-};
+}
 
 /**
  * Map emoji to theme category (for fallback when emoji-specific words don't exist)
@@ -6440,236 +6429,236 @@ export const EMOJI_SPECIFIC_WORDS: Record<string, ThemedWordList> = {
  */
 export const EMOJI_TO_THEME: Record<string, string> = {
   // Abacus
-  "🧮": "abacus",
+  '🧮': 'abacus',
 
   // Happy Faces
-  "😀": "happyFaces",
-  "😃": "happyFaces",
-  "😄": "happyFaces",
-  "😁": "happyFaces",
-  "😆": "happyFaces",
-  "😅": "happyFaces",
-  "🤣": "happyFaces",
-  "😂": "happyFaces",
-  "🙂": "happyFaces",
-  "😉": "happyFaces",
-  "😊": "happyFaces",
-  "😇": "happyFaces",
+  '😀': 'happyFaces',
+  '😃': 'happyFaces',
+  '😄': 'happyFaces',
+  '😁': 'happyFaces',
+  '😆': 'happyFaces',
+  '😅': 'happyFaces',
+  '🤣': 'happyFaces',
+  '😂': 'happyFaces',
+  '🙂': 'happyFaces',
+  '😉': 'happyFaces',
+  '😊': 'happyFaces',
+  '😇': 'happyFaces',
 
   // Love & Affection
-  "🥰": "loveAndAffection",
-  "😍": "loveAndAffection",
-  "🤩": "loveAndAffection",
-  "😘": "loveAndAffection",
-  "😗": "loveAndAffection",
-  "😚": "loveAndAffection",
+  '🥰': 'loveAndAffection',
+  '😍': 'loveAndAffection',
+  '🤩': 'loveAndAffection',
+  '😘': 'loveAndAffection',
+  '😗': 'loveAndAffection',
+  '😚': 'loveAndAffection',
 
   // Playful
-  "😋": "playful",
-  "😛": "playful",
-  "😝": "playful",
-  "😜": "playful",
-  "🤪": "playful",
+  '😋': 'playful',
+  '😛': 'playful',
+  '😝': 'playful',
+  '😜': 'playful',
+  '🤪': 'playful',
 
   // Clever
-  "🤨": "clever",
-  "🧐": "clever",
-  "🤓": "clever",
+  '🤨': 'clever',
+  '🧐': 'clever',
+  '🤓': 'clever',
 
   // Cool
-  "😎": "cool",
-  "🥸": "cool",
+  '😎': 'cool',
+  '🥸': 'cool',
 
   // Party
-  "🥳": "party",
+  '🥳': 'party',
 
   // Moody
-  "😏": "moody",
-  "😒": "moody",
-  "😞": "moody",
-  "😔": "moody",
-  "😟": "moody",
-  "😕": "moody",
+  '😏': 'moody',
+  '😒': 'moody',
+  '😞': 'moody',
+  '😔': 'moody',
+  '😟': 'moody',
+  '😕': 'moody',
 
   // Wild West
-  "🤠": "wildWest",
+  '🤠': 'wildWest',
 
   // Ninja
-  "🥷": "ninja",
+  '🥷': 'ninja',
 
   // Royal
-  "👑": "royal",
+  '👑': 'royal',
 
   // Theater
-  "🎭": "theater",
+  '🎭': 'theater',
 
   // Robot
-  "🤖": "robot",
+  '🤖': 'robot',
 
   // Spooky
-  "👻": "spooky",
-  "💀": "spooky",
+  '👻': 'spooky',
+  '💀': 'spooky',
 
   // Alien
-  "👽": "alien",
+  '👽': 'alien',
 
   // Circus
-  "🤡": "circus",
+  '🤡': 'circus',
 
   // Wizards
-  "🧙‍♂️": "wizards",
-  "🧙‍♀️": "wizards",
+  '🧙‍♂️': 'wizards',
+  '🧙‍♀️': 'wizards',
 
   // Fairies
-  "🧚‍♂️": "fairies",
-  "🧚‍♀️": "fairies",
+  '🧚‍♂️': 'fairies',
+  '🧚‍♀️': 'fairies',
 
   // Vampires
-  "🧛‍♂️": "vampires",
-  "🧛‍♀️": "vampires",
+  '🧛‍♂️': 'vampires',
+  '🧛‍♀️': 'vampires',
 
   // Merfolk
-  "🧜‍♂️": "merfolk",
-  "🧜‍♀️": "merfolk",
+  '🧜‍♂️': 'merfolk',
+  '🧜‍♀️': 'merfolk',
 
   // Elves
-  "🧝‍♂️": "elves",
-  "🧝‍♀️": "elves",
+  '🧝‍♂️': 'elves',
+  '🧝‍♀️': 'elves',
 
   // Heroes
-  "🦸‍♂️": "heroes",
-  "🦸‍♀️": "heroes",
+  '🦸‍♂️': 'heroes',
+  '🦸‍♀️': 'heroes',
 
   // Villains
-  "🦹‍♂️": "villains",
+  '🦹‍♂️': 'villains',
 
   // Canines
-  "🐶": "canines",
-  "🐺": "canines",
+  '🐶': 'canines',
+  '🐺': 'canines',
 
   // Felines
-  "🐱": "felines",
-  "🐯": "felines",
-  "🦁": "felines",
+  '🐱': 'felines',
+  '🐯': 'felines',
+  '🦁': 'felines',
 
   // Rodents
-  "🐭": "rodents",
-  "🐹": "rodents",
+  '🐭': 'rodents',
+  '🐹': 'rodents',
 
   // Rabbits
-  "🐰": "rabbits",
+  '🐰': 'rabbits',
 
   // Foxes
-  "🦊": "foxes",
+  '🦊': 'foxes',
 
   // Bears
-  "🐻": "bears",
-  "🐼": "bears",
-  "🐻‍❄️": "bears",
+  '🐻': 'bears',
+  '🐼': 'bears',
+  '🐻‍❄️': 'bears',
 
   // Koalas
-  "🐨": "koalas",
+  '🐨': 'koalas',
 
   // Bovine
-  "🐮": "bovine",
+  '🐮': 'bovine',
 
   // Pigs
-  "🐷": "pigs",
+  '🐷': 'pigs',
 
   // Frogs
-  "🐸": "frogs",
+  '🐸': 'frogs',
 
   // Monkeys
-  "🐵": "monkeys",
-  "🙈": "monkeys",
-  "🙉": "monkeys",
-  "🙊": "monkeys",
-  "🐒": "monkeys",
+  '🐵': 'monkeys',
+  '🙈': 'monkeys',
+  '🙉': 'monkeys',
+  '🙊': 'monkeys',
+  '🐒': 'monkeys',
 
   // Birds
-  "🦆": "birds",
-  "🐧": "birds",
-  "🐦": "birds",
-  "🐤": "birds",
-  "🐣": "birds",
-  "🐥": "birds",
-  "🦅": "birds",
-  "🦉": "birds",
+  '🦆': 'birds',
+  '🐧': 'birds',
+  '🐦': 'birds',
+  '🐤': 'birds',
+  '🐣': 'birds',
+  '🐥': 'birds',
+  '🦅': 'birds',
+  '🦉': 'birds',
 
   // Bats
-  "🦇": "bats",
+  '🦇': 'bats',
 
   // Boars
-  "🐗": "boars",
+  '🐗': 'boars',
 
   // Horses
-  "🐴": "horses",
-  "🦄": "horses",
+  '🐴': 'horses',
+  '🦄': 'horses',
 
   // Insects
-  "🐝": "insects",
-  "🐛": "insects",
-  "🦋": "insects",
+  '🐝': 'insects',
+  '🐛': 'insects',
+  '🦋': 'insects',
 
   // Stars
-  "⭐": "stars",
-  "🌟": "stars",
-  "💫": "stars",
-  "✨": "stars",
+  '⭐': 'stars',
+  '🌟': 'stars',
+  '💫': 'stars',
+  '✨': 'stars',
 
   // Power
-  "⚡": "power",
-  "🔥": "power",
+  '⚡': 'power',
+  '🔥': 'power',
 
   // Rainbow
-  "🌈": "rainbow",
+  '🌈': 'rainbow',
 
   // Entertainment
-  "🎪": "entertainment",
-  "🎨": "entertainment",
-  "🎯": "entertainment",
-  "🎲": "entertainment",
-  "🎮": "entertainment",
-  "🕹️": "entertainment",
+  '🎪': 'entertainment',
+  '🎨': 'entertainment',
+  '🎯': 'entertainment',
+  '🎲': 'entertainment',
+  '🎮': 'entertainment',
+  '🕹️': 'entertainment',
 
   // Music
-  "🎸": "music",
-  "🎺": "music",
-  "🎷": "music",
-  "🥁": "music",
-  "🎻": "music",
-  "🎤": "music",
-  "🎧": "music",
+  '🎸': 'music',
+  '🎺': 'music',
+  '🎷': 'music',
+  '🥁': 'music',
+  '🎻': 'music',
+  '🎤': 'music',
+  '🎧': 'music',
 
   // Film
-  "🎬": "film",
-  "🎥": "film",
+  '🎬': 'film',
+  '🎥': 'film',
 
   // Fruits
-  "🍎": "fruits",
-  "🍊": "fruits",
-  "🍌": "fruits",
-  "🍇": "fruits",
-  "🍓": "fruits",
-  "🥝": "fruits",
-  "🍑": "fruits",
-  "🥭": "fruits",
-  "🍍": "fruits",
-  "🥥": "fruits",
+  '🍎': 'fruits',
+  '🍊': 'fruits',
+  '🍌': 'fruits',
+  '🍇': 'fruits',
+  '🍓': 'fruits',
+  '🥝': 'fruits',
+  '🍑': 'fruits',
+  '🥭': 'fruits',
+  '🍍': 'fruits',
+  '🥥': 'fruits',
 
   // Vegetables
-  "🥑": "vegetables",
-  "🍆": "vegetables",
-  "🥕": "vegetables",
-  "🌽": "vegetables",
-  "🌶️": "vegetables",
-  "🫑": "vegetables",
-  "🥒": "vegetables",
-  "🥬": "vegetables",
-  "🥦": "vegetables",
-  "🧄": "vegetables",
-  "🧅": "vegetables",
-  "🍄": "vegetables",
-  "🥜": "vegetables",
-  "🌰": "vegetables",
-};
+  '🥑': 'vegetables',
+  '🍆': 'vegetables',
+  '🥕': 'vegetables',
+  '🌽': 'vegetables',
+  '🌶️': 'vegetables',
+  '🫑': 'vegetables',
+  '🥒': 'vegetables',
+  '🥬': 'vegetables',
+  '🥦': 'vegetables',
+  '🧄': 'vegetables',
+  '🧅': 'vegetables',
+  '🍄': 'vegetables',
+  '🥜': 'vegetables',
+  '🌰': 'vegetables',
+}
diff --git a/apps/web/src/utils/tutorialAudit.ts b/apps/web/src/utils/tutorialAudit.ts
index a4112249..90d17f69 100644
--- a/apps/web/src/utils/tutorialAudit.ts
+++ b/apps/web/src/utils/tutorialAudit.ts
@@ -1,314 +1,284 @@
 // Comprehensive audit of tutorial steps for abacus calculation errors
-import { guidedAdditionSteps } from "./tutorialConverter";
+import { guidedAdditionSteps } from './tutorialConverter'
 
 interface AuditIssue {
-  stepId: string;
-  stepTitle: string;
-  issueType: "mathematical" | "highlighting" | "instruction" | "missing_beads";
-  severity: "critical" | "major" | "minor";
-  description: string;
-  currentState: string;
-  expectedState: string;
+  stepId: string
+  stepTitle: string
+  issueType: 'mathematical' | 'highlighting' | 'instruction' | 'missing_beads'
+  severity: 'critical' | 'major' | 'minor'
+  description: string
+  currentState: string
+  expectedState: string
 }
 
 // Helper function to calculate what beads should be active for a given value
 function calculateBeadState(value: number): {
-  heavenActive: boolean;
-  earthActive: number; // 0-4 earth beads
+  heavenActive: boolean
+  earthActive: number // 0-4 earth beads
 } {
-  const heavenActive = value >= 5;
-  const earthActive = heavenActive ? value - 5 : value;
-  return { heavenActive, earthActive };
+  const heavenActive = value >= 5
+  const earthActive = heavenActive ? value - 5 : value
+  return { heavenActive, earthActive }
 }
 
 // Helper to determine what beads need to be highlighted for an operation
-function analyzeOperation(
-  startValue: number,
-  targetValue: number,
-  operation: string,
-) {
-  const startState = calculateBeadState(startValue);
-  const targetState = calculateBeadState(targetValue);
-  const difference = targetValue - startValue;
+function analyzeOperation(startValue: number, targetValue: number, operation: string) {
+  const startState = calculateBeadState(startValue)
+  const targetState = calculateBeadState(targetValue)
+  const difference = targetValue - startValue
 
-  console.log(`\n=== ${operation} ===`);
-  console.log(
-    `Start: ${startValue} -> Target: ${targetValue} (difference: ${difference})`,
-  );
-  console.log(
-    `Start state: heaven=${startState.heavenActive}, earth=${startState.earthActive}`,
-  );
-  console.log(
-    `Target state: heaven=${targetState.heavenActive}, earth=${targetState.earthActive}`,
-  );
+  console.log(`\n=== ${operation} ===`)
+  console.log(`Start: ${startValue} -> Target: ${targetValue} (difference: ${difference})`)
+  console.log(`Start state: heaven=${startState.heavenActive}, earth=${startState.earthActive}`)
+  console.log(`Target state: heaven=${targetState.heavenActive}, earth=${targetState.earthActive}`)
 
   return {
     startState,
     targetState,
     difference,
     needsComplement: false, // Will be determined by specific analysis
-  };
+  }
 }
 
 export function auditTutorialSteps(): AuditIssue[] {
-  const issues: AuditIssue[] = [];
+  const issues: AuditIssue[] = []
 
-  console.log("🔍 Starting comprehensive tutorial audit...\n");
+  console.log('🔍 Starting comprehensive tutorial audit...\n')
 
   guidedAdditionSteps.forEach((step, index) => {
-    console.log(`\n📝 Step ${index + 1}: ${step.title}`);
+    console.log(`\n📝 Step ${index + 1}: ${step.title}`)
 
     // 1. Verify mathematical correctness
-    if (
-      step.startValue + (step.targetValue - step.startValue) !==
-      step.targetValue
-    ) {
+    if (step.startValue + (step.targetValue - step.startValue) !== step.targetValue) {
       issues.push({
         stepId: step.id,
         stepTitle: step.title,
-        issueType: "mathematical",
-        severity: "critical",
-        description: "Mathematical inconsistency in step values",
+        issueType: 'mathematical',
+        severity: 'critical',
+        description: 'Mathematical inconsistency in step values',
         currentState: `${step.startValue} + ? = ${step.targetValue}`,
         expectedState: `Should be mathematically consistent`,
-      });
+      })
     }
 
     // 2. Analyze the operation
-    const _analysis = analyzeOperation(
-      step.startValue,
-      step.targetValue,
-      step.problem,
-    );
-    const _difference = step.targetValue - step.startValue;
+    const _analysis = analyzeOperation(step.startValue, step.targetValue, step.problem)
+    const _difference = step.targetValue - step.startValue
 
     // 3. Check specific operations
     switch (step.id) {
-      case "basic-1": // 0 + 1
+      case 'basic-1': // 0 + 1
         if (!step.highlightBeads || step.highlightBeads.length !== 1) {
           issues.push({
             stepId: step.id,
             stepTitle: step.title,
-            issueType: "highlighting",
-            severity: "major",
-            description: "Should highlight exactly 1 earth bead",
+            issueType: 'highlighting',
+            severity: 'major',
+            description: 'Should highlight exactly 1 earth bead',
             currentState: `Highlights ${step.highlightBeads?.length || 0} beads`,
-            expectedState: "Should highlight 1 earth bead at position 0",
-          });
+            expectedState: 'Should highlight 1 earth bead at position 0',
+          })
         }
-        break;
+        break
 
-      case "basic-2": // 1 + 1
+      case 'basic-2': // 1 + 1
         if (!step.highlightBeads || step.highlightBeads[0]?.position !== 1) {
           issues.push({
             stepId: step.id,
             stepTitle: step.title,
-            issueType: "highlighting",
-            severity: "major",
-            description: "Should highlight second earth bead (position 1)",
+            issueType: 'highlighting',
+            severity: 'major',
+            description: 'Should highlight second earth bead (position 1)',
             currentState: `Highlights position ${step.highlightBeads?.[0]?.position}`,
-            expectedState: "Should highlight earth bead at position 1",
-          });
+            expectedState: 'Should highlight earth bead at position 1',
+          })
         }
-        break;
+        break
 
-      case "basic-3": // 2 + 1
+      case 'basic-3': // 2 + 1
         if (!step.highlightBeads || step.highlightBeads[0]?.position !== 2) {
           issues.push({
             stepId: step.id,
             stepTitle: step.title,
-            issueType: "highlighting",
-            severity: "major",
-            description: "Should highlight third earth bead (position 2)",
+            issueType: 'highlighting',
+            severity: 'major',
+            description: 'Should highlight third earth bead (position 2)',
             currentState: `Highlights position ${step.highlightBeads?.[0]?.position}`,
-            expectedState: "Should highlight earth bead at position 2",
-          });
+            expectedState: 'Should highlight earth bead at position 2',
+          })
         }
-        break;
+        break
 
-      case "basic-4": // 3 + 1
+      case 'basic-4': // 3 + 1
         if (!step.highlightBeads || step.highlightBeads[0]?.position !== 3) {
           issues.push({
             stepId: step.id,
             stepTitle: step.title,
-            issueType: "highlighting",
-            severity: "major",
-            description: "Should highlight fourth earth bead (position 3)",
+            issueType: 'highlighting',
+            severity: 'major',
+            description: 'Should highlight fourth earth bead (position 3)',
             currentState: `Highlights position ${step.highlightBeads?.[0]?.position}`,
-            expectedState: "Should highlight earth bead at position 3",
-          });
+            expectedState: 'Should highlight earth bead at position 3',
+          })
         }
-        break;
+        break
 
-      case "heaven-intro": // 0 + 5
-        if (
-          !step.highlightBeads ||
-          step.highlightBeads[0]?.beadType !== "heaven"
-        ) {
+      case 'heaven-intro': // 0 + 5
+        if (!step.highlightBeads || step.highlightBeads[0]?.beadType !== 'heaven') {
           issues.push({
             stepId: step.id,
             stepTitle: step.title,
-            issueType: "highlighting",
-            severity: "major",
-            description: "Should highlight heaven bead for adding 5",
+            issueType: 'highlighting',
+            severity: 'major',
+            description: 'Should highlight heaven bead for adding 5',
             currentState: `Highlights ${step.highlightBeads?.[0]?.beadType}`,
-            expectedState: "Should highlight heaven bead",
-          });
+            expectedState: 'Should highlight heaven bead',
+          })
         }
-        break;
+        break
 
-      case "heaven-plus-earth": // 5 + 1
+      case 'heaven-plus-earth': // 5 + 1
         if (
           !step.highlightBeads ||
-          step.highlightBeads[0]?.beadType !== "earth" ||
+          step.highlightBeads[0]?.beadType !== 'earth' ||
           step.highlightBeads[0]?.position !== 0
         ) {
           issues.push({
             stepId: step.id,
             stepTitle: step.title,
-            issueType: "highlighting",
-            severity: "major",
-            description:
-              "Should highlight first earth bead to add to existing heaven",
+            issueType: 'highlighting',
+            severity: 'major',
+            description: 'Should highlight first earth bead to add to existing heaven',
             currentState: `Highlights ${step.highlightBeads?.[0]?.beadType} at position ${step.highlightBeads?.[0]?.position}`,
-            expectedState: "Should highlight earth bead at position 0",
-          });
+            expectedState: 'Should highlight earth bead at position 0',
+          })
         }
-        break;
+        break
 
-      case "complement-intro": // 3 + 4 = 7 (using 5 - 1)
-        console.log("🔍 Analyzing complement-intro: 3 + 4");
-        console.log("Start: 3 earth beads active");
-        console.log("Need to add 4, but only 1 earth space remaining");
-        console.log(
-          "Complement: 4 = 5 - 1, so add heaven (5) then remove 1 earth",
-        );
+      case 'complement-intro': // 3 + 4 = 7 (using 5 - 1)
+        console.log('🔍 Analyzing complement-intro: 3 + 4')
+        console.log('Start: 3 earth beads active')
+        console.log('Need to add 4, but only 1 earth space remaining')
+        console.log('Complement: 4 = 5 - 1, so add heaven (5) then remove 1 earth')
 
         if (!step.highlightBeads || step.highlightBeads.length !== 2) {
           issues.push({
             stepId: step.id,
             stepTitle: step.title,
-            issueType: "highlighting",
-            severity: "major",
-            description:
-              "Should highlight heaven bead and first earth bead for 5-1 complement",
+            issueType: 'highlighting',
+            severity: 'major',
+            description: 'Should highlight heaven bead and first earth bead for 5-1 complement',
             currentState: `Highlights ${step.highlightBeads?.length || 0} beads`,
-            expectedState: "Should highlight heaven bead + earth position 0",
-          });
+            expectedState: 'Should highlight heaven bead + earth position 0',
+          })
         }
-        break;
+        break
 
-      case "complement-2": // 2 + 3 = 5 (using 5 - 2)
-        console.log("🔍 Analyzing complement-2: 2 + 3");
-        console.log("Start: 2 earth beads active");
-        console.log("Need to add 3, but only 2 earth spaces remaining");
-        console.log(
-          "Complement: 3 = 5 - 2, so add heaven (5) then remove 2 earth",
-        );
+      case 'complement-2': // 2 + 3 = 5 (using 5 - 2)
+        console.log('🔍 Analyzing complement-2: 2 + 3')
+        console.log('Start: 2 earth beads active')
+        console.log('Need to add 3, but only 2 earth spaces remaining')
+        console.log('Complement: 3 = 5 - 2, so add heaven (5) then remove 2 earth')
 
         if (!step.highlightBeads || step.highlightBeads.length !== 3) {
           issues.push({
             stepId: step.id,
             stepTitle: step.title,
-            issueType: "highlighting",
-            severity: "major",
-            description:
-              "Should highlight heaven bead and 2 earth beads for 5-2 complement",
+            issueType: 'highlighting',
+            severity: 'major',
+            description: 'Should highlight heaven bead and 2 earth beads for 5-2 complement',
             currentState: `Highlights ${step.highlightBeads?.length || 0} beads`,
-            expectedState: "Should highlight heaven bead + earth positions 0,1",
-          });
+            expectedState: 'Should highlight heaven bead + earth positions 0,1',
+          })
         }
-        break;
+        break
 
-      case "complex-1": // 6 + 2 = 8
-        console.log("🔍 Analyzing complex-1: 6 + 2");
-        console.log("Start: heaven + 1 earth (6)");
-        console.log("Add 2 more earth beads directly (space available)");
+      case 'complex-1': // 6 + 2 = 8
+        console.log('🔍 Analyzing complex-1: 6 + 2')
+        console.log('Start: heaven + 1 earth (6)')
+        console.log('Add 2 more earth beads directly (space available)')
 
         if (!step.highlightBeads || step.highlightBeads.length !== 2) {
           issues.push({
             stepId: step.id,
             stepTitle: step.title,
-            issueType: "highlighting",
-            severity: "major",
-            description: "Should highlight 2 earth beads to add directly",
+            issueType: 'highlighting',
+            severity: 'major',
+            description: 'Should highlight 2 earth beads to add directly',
             currentState: `Highlights ${step.highlightBeads?.length || 0} beads`,
-            expectedState: "Should highlight earth positions 1,2",
-          });
+            expectedState: 'Should highlight earth positions 1,2',
+          })
         }
-        break;
+        break
 
-      case "complex-2": {
+      case 'complex-2': {
         // 7 + 4 = 11 (ten complement)
-        console.log("🔍 Analyzing complex-2: 7 + 4");
-        console.log("Start: heaven + 2 earth (7)");
-        console.log("Need to add 4, requires carrying to tens place");
+        console.log('🔍 Analyzing complex-2: 7 + 4')
+        console.log('Start: heaven + 2 earth (7)')
+        console.log('Need to add 4, requires carrying to tens place')
         console.log(
-          "Method: Add 10 (tens heaven), subtract 6 (clear ones: 5+2=7, need to subtract 6)",
-        );
+          'Method: Add 10 (tens heaven), subtract 6 (clear ones: 5+2=7, need to subtract 6)'
+        )
 
         if (!step.highlightBeads || step.highlightBeads.length !== 4) {
           issues.push({
             stepId: step.id,
             stepTitle: step.title,
-            issueType: "highlighting",
-            severity: "major",
-            description:
-              "Should highlight tens heaven + all ones place beads to clear",
+            issueType: 'highlighting',
+            severity: 'major',
+            description: 'Should highlight tens heaven + all ones place beads to clear',
             currentState: `Highlights ${step.highlightBeads?.length || 0} beads`,
-            expectedState:
-              "Should highlight tens heaven + ones heaven + 2 ones earth",
-          });
+            expectedState: 'Should highlight tens heaven + ones heaven + 2 ones earth',
+          })
         }
 
         // Check if it highlights the correct beads
         const hasOnesHeaven = step.highlightBeads?.some(
-          (h) => h.placeValue === 0 && h.beadType === "heaven",
-        );
+          (h) => h.placeValue === 0 && h.beadType === 'heaven'
+        )
         const hasTensHeaven = step.highlightBeads?.some(
-          (h) => h.placeValue === 1 && h.beadType === "heaven",
-        );
+          (h) => h.placeValue === 1 && h.beadType === 'heaven'
+        )
         const onesEarthCount =
-          step.highlightBeads?.filter(
-            (h) => h.placeValue === 0 && h.beadType === "earth",
-          ).length || 0;
+          step.highlightBeads?.filter((h) => h.placeValue === 0 && h.beadType === 'earth').length ||
+          0
 
         if (!hasOnesHeaven) {
           issues.push({
             stepId: step.id,
             stepTitle: step.title,
-            issueType: "missing_beads",
-            severity: "critical",
-            description: "Missing ones place heaven bead in highlighting",
-            currentState: "Ones heaven not highlighted",
-            expectedState: "Should highlight ones heaven bead for removal",
-          });
+            issueType: 'missing_beads',
+            severity: 'critical',
+            description: 'Missing ones place heaven bead in highlighting',
+            currentState: 'Ones heaven not highlighted',
+            expectedState: 'Should highlight ones heaven bead for removal',
+          })
         }
 
         if (!hasTensHeaven) {
           issues.push({
             stepId: step.id,
             stepTitle: step.title,
-            issueType: "missing_beads",
-            severity: "critical",
-            description: "Missing tens place heaven bead in highlighting",
-            currentState: "Tens heaven not highlighted",
-            expectedState: "Should highlight tens heaven bead for addition",
-          });
+            issueType: 'missing_beads',
+            severity: 'critical',
+            description: 'Missing tens place heaven bead in highlighting',
+            currentState: 'Tens heaven not highlighted',
+            expectedState: 'Should highlight tens heaven bead for addition',
+          })
         }
 
         if (onesEarthCount !== 2) {
           issues.push({
             stepId: step.id,
             stepTitle: step.title,
-            issueType: "missing_beads",
-            severity: "major",
-            description: "Wrong number of ones earth beads highlighted",
+            issueType: 'missing_beads',
+            severity: 'major',
+            description: 'Wrong number of ones earth beads highlighted',
             currentState: `${onesEarthCount} ones earth beads highlighted`,
-            expectedState: "Should highlight 2 ones earth beads for removal",
-          });
+            expectedState: 'Should highlight 2 ones earth beads for removal',
+          })
         }
-        break;
+        break
       }
     }
 
@@ -319,67 +289,66 @@ export function auditTutorialSteps(): AuditIssue[] {
           issues.push({
             stepId: step.id,
             stepTitle: step.title,
-            issueType: "highlighting",
-            severity: "major",
-            description: "Invalid place value in highlighting",
+            issueType: 'highlighting',
+            severity: 'major',
+            description: 'Invalid place value in highlighting',
             currentState: `placeValue: ${bead.placeValue}`,
-            expectedState:
-              "Should use placeValue 0 (ones) or 1 (tens) for basic tutorial",
-          });
+            expectedState: 'Should use placeValue 0 (ones) or 1 (tens) for basic tutorial',
+          })
         }
-      });
+      })
     }
-  });
+  })
 
-  return issues;
+  return issues
 }
 
 // Run the audit and log results
 export function runTutorialAudit(): void {
-  console.log("🔍 Running comprehensive tutorial audit...\n");
+  console.log('🔍 Running comprehensive tutorial audit...\n')
 
-  const issues = auditTutorialSteps();
+  const issues = auditTutorialSteps()
 
   if (issues.length === 0) {
-    console.log("✅ No issues found! All tutorial steps appear correct.");
-    return;
+    console.log('✅ No issues found! All tutorial steps appear correct.')
+    return
   }
 
-  console.log(`\n🚨 Found ${issues.length} issues:\n`);
+  console.log(`\n🚨 Found ${issues.length} issues:\n`)
 
   // Group by severity
-  const critical = issues.filter((i) => i.severity === "critical");
-  const major = issues.filter((i) => i.severity === "major");
-  const minor = issues.filter((i) => i.severity === "minor");
+  const critical = issues.filter((i) => i.severity === 'critical')
+  const major = issues.filter((i) => i.severity === 'major')
+  const minor = issues.filter((i) => i.severity === 'minor')
 
   if (critical.length > 0) {
-    console.log("🔴 CRITICAL ISSUES:");
+    console.log('🔴 CRITICAL ISSUES:')
     critical.forEach((issue) => {
-      console.log(`  • ${issue.stepTitle}: ${issue.description}`);
-      console.log(`    Current: ${issue.currentState}`);
-      console.log(`    Expected: ${issue.expectedState}\n`);
-    });
+      console.log(`  • ${issue.stepTitle}: ${issue.description}`)
+      console.log(`    Current: ${issue.currentState}`)
+      console.log(`    Expected: ${issue.expectedState}\n`)
+    })
   }
 
   if (major.length > 0) {
-    console.log("🟠 MAJOR ISSUES:");
+    console.log('🟠 MAJOR ISSUES:')
     major.forEach((issue) => {
-      console.log(`  • ${issue.stepTitle}: ${issue.description}`);
-      console.log(`    Current: ${issue.currentState}`);
-      console.log(`    Expected: ${issue.expectedState}\n`);
-    });
+      console.log(`  • ${issue.stepTitle}: ${issue.description}`)
+      console.log(`    Current: ${issue.currentState}`)
+      console.log(`    Expected: ${issue.expectedState}\n`)
+    })
   }
 
   if (minor.length > 0) {
-    console.log("🟡 MINOR ISSUES:");
+    console.log('🟡 MINOR ISSUES:')
     minor.forEach((issue) => {
-      console.log(`  • ${issue.stepTitle}: ${issue.description}`);
-      console.log(`    Current: ${issue.currentState}`);
-      console.log(`    Expected: ${issue.expectedState}\n`);
-    });
+      console.log(`  • ${issue.stepTitle}: ${issue.description}`)
+      console.log(`    Current: ${issue.currentState}`)
+      console.log(`    Expected: ${issue.expectedState}\n`)
+    })
   }
 
   console.log(
-    `\n📊 Summary: ${critical.length} critical, ${major.length} major, ${minor.length} minor issues`,
-  );
+    `\n📊 Summary: ${critical.length} critical, ${major.length} major, ${minor.length} minor issues`
+  )
 }
diff --git a/apps/web/src/utils/tutorialConverter.ts b/apps/web/src/utils/tutorialConverter.ts
index e7d731a1..c8f84f9e 100644
--- a/apps/web/src/utils/tutorialConverter.ts
+++ b/apps/web/src/utils/tutorialConverter.ts
@@ -1,245 +1,231 @@
 // Utility to extract and convert the existing GuidedAdditionTutorial data
-import type { Tutorial } from "../types/tutorial";
-import type { Locale } from "../i18n/messages";
-import { generateAbacusInstructions } from "./abacusInstructionGenerator";
+import type { Tutorial } from '../types/tutorial'
+import type { Locale } from '../i18n/messages'
+import { generateAbacusInstructions } from './abacusInstructionGenerator'
 
 // Import the existing tutorial step interface to match the current structure
 interface ExistingTutorialStep {
-  id: string;
-  title: string;
-  problem: string;
-  description: string;
-  startValue: number;
-  targetValue: number;
+  id: string
+  title: string
+  problem: string
+  description: string
+  startValue: number
+  targetValue: number
   highlightBeads?: Array<{
-    placeValue: number;
-    beadType: "heaven" | "earth";
-    position?: number;
-  }>;
-  expectedAction: "add" | "remove" | "multi-step";
-  actionDescription: string;
+    placeValue: number
+    beadType: 'heaven' | 'earth'
+    position?: number
+  }>
+  expectedAction: 'add' | 'remove' | 'multi-step'
+  actionDescription: string
   tooltip: {
-    content: string;
-    explanation: string;
-  };
+    content: string
+    explanation: string
+  }
   // errorMessages removed - bead diff tooltip provides better guidance
-  multiStepInstructions?: string[];
+  multiStepInstructions?: string[]
 }
 
 // The tutorial steps from GuidedAdditionTutorial.tsx (extracted from the actual file)
 export const guidedAdditionSteps: ExistingTutorialStep[] = [
   // Phase 1: Basic Addition (1-4)
   {
-    id: "basic-1",
-    title: "Basic Addition: 0 + 1",
-    problem: "0 + 1",
-    description: "Start by adding your first earth bead",
+    id: 'basic-1',
+    title: 'Basic Addition: 0 + 1',
+    problem: '0 + 1',
+    description: 'Start by adding your first earth bead',
     startValue: 0,
     targetValue: 1,
-    highlightBeads: [{ placeValue: 0, beadType: "earth", position: 0 }],
-    expectedAction: "add",
-    actionDescription: "Click the first earth bead to move it up",
+    highlightBeads: [{ placeValue: 0, beadType: 'earth', position: 0 }],
+    expectedAction: 'add',
+    actionDescription: 'Click the first earth bead to move it up',
     tooltip: {
-      content: "Adding earth beads",
-      explanation:
-        "Earth beads (bottom) are worth 1 each. Push them UP to activate them.",
+      content: 'Adding earth beads',
+      explanation: 'Earth beads (bottom) are worth 1 each. Push them UP to activate them.',
     },
   },
   {
-    id: "basic-2",
-    title: "Basic Addition: 1 + 1",
-    problem: "1 + 1",
-    description: "Add the second earth bead to make 2",
+    id: 'basic-2',
+    title: 'Basic Addition: 1 + 1',
+    problem: '1 + 1',
+    description: 'Add the second earth bead to make 2',
     startValue: 1,
     targetValue: 2,
-    highlightBeads: [{ placeValue: 0, beadType: "earth", position: 1 }],
-    expectedAction: "add",
-    actionDescription: "Click the second earth bead to move it up",
+    highlightBeads: [{ placeValue: 0, beadType: 'earth', position: 1 }],
+    expectedAction: 'add',
+    actionDescription: 'Click the second earth bead to move it up',
     tooltip: {
-      content: "Building up earth beads",
-      explanation:
-        "Continue adding earth beads one by one for numbers 2, 3, and 4",
+      content: 'Building up earth beads',
+      explanation: 'Continue adding earth beads one by one for numbers 2, 3, and 4',
     },
   },
   {
-    id: "basic-3",
-    title: "Basic Addition: 2 + 1",
-    problem: "2 + 1",
-    description: "Add the third earth bead to make 3",
+    id: 'basic-3',
+    title: 'Basic Addition: 2 + 1',
+    problem: '2 + 1',
+    description: 'Add the third earth bead to make 3',
     startValue: 2,
     targetValue: 3,
-    highlightBeads: [{ placeValue: 0, beadType: "earth", position: 2 }],
-    expectedAction: "add",
-    actionDescription: "Click the third earth bead to move it up",
+    highlightBeads: [{ placeValue: 0, beadType: 'earth', position: 2 }],
+    expectedAction: 'add',
+    actionDescription: 'Click the third earth bead to move it up',
     tooltip: {
-      content: "Adding earth beads in sequence",
-      explanation: "Continue adding earth beads one by one until you reach 4",
+      content: 'Adding earth beads in sequence',
+      explanation: 'Continue adding earth beads one by one until you reach 4',
     },
   },
   {
-    id: "basic-4",
-    title: "Basic Addition: 3 + 1",
-    problem: "3 + 1",
-    description: "Add the fourth earth bead to make 4",
+    id: 'basic-4',
+    title: 'Basic Addition: 3 + 1',
+    problem: '3 + 1',
+    description: 'Add the fourth earth bead to make 4',
     startValue: 3,
     targetValue: 4,
-    highlightBeads: [{ placeValue: 0, beadType: "earth", position: 3 }],
-    expectedAction: "add",
-    actionDescription: "Click the fourth earth bead to complete 4",
+    highlightBeads: [{ placeValue: 0, beadType: 'earth', position: 3 }],
+    expectedAction: 'add',
+    actionDescription: 'Click the fourth earth bead to complete 4',
     tooltip: {
-      content: "Maximum earth beads",
-      explanation:
-        "Four earth beads is the maximum - next we need a different approach",
+      content: 'Maximum earth beads',
+      explanation: 'Four earth beads is the maximum - next we need a different approach',
     },
   },
 
   // Phase 2: Introduction to Heaven Bead
   {
-    id: "heaven-intro",
-    title: "Heaven Bead: 0 + 5",
-    problem: "0 + 5",
-    description: "Use the heaven bead to represent 5",
+    id: 'heaven-intro',
+    title: 'Heaven Bead: 0 + 5',
+    problem: '0 + 5',
+    description: 'Use the heaven bead to represent 5',
     startValue: 0,
     targetValue: 5,
-    highlightBeads: [{ placeValue: 0, beadType: "heaven" }],
-    expectedAction: "add",
-    actionDescription: "Click the heaven bead to activate it",
+    highlightBeads: [{ placeValue: 0, beadType: 'heaven' }],
+    expectedAction: 'add',
+    actionDescription: 'Click the heaven bead to activate it',
     tooltip: {
-      content: "Heaven bead = 5",
-      explanation: "The single bead above the bar represents 5",
+      content: 'Heaven bead = 5',
+      explanation: 'The single bead above the bar represents 5',
     },
   },
   {
-    id: "heaven-plus-earth",
-    title: "Combining: 5 + 1",
-    problem: "5 + 1",
-    description: "Add 1 to 5 by activating one earth bead",
+    id: 'heaven-plus-earth',
+    title: 'Combining: 5 + 1',
+    problem: '5 + 1',
+    description: 'Add 1 to 5 by activating one earth bead',
     startValue: 5,
     targetValue: 6,
-    highlightBeads: [{ placeValue: 0, beadType: "earth", position: 0 }],
-    expectedAction: "add",
-    actionDescription: "Click the first earth bead to make 6",
+    highlightBeads: [{ placeValue: 0, beadType: 'earth', position: 0 }],
+    expectedAction: 'add',
+    actionDescription: 'Click the first earth bead to make 6',
     tooltip: {
-      content: "Heaven + Earth = 6",
-      explanation:
-        "When you have room in the earth section, simply add directly",
+      content: 'Heaven + Earth = 6',
+      explanation: 'When you have room in the earth section, simply add directly',
     },
   },
 
   // Phase 3: Five Complements (when earth section is full)
   {
-    id: "complement-intro",
-    title: "Five Complement: 3 + 4",
-    problem: "3 + 4",
-    description:
-      "Need to add 4, but only have 1 earth bead space. Use complement: 4 = 5 - 1",
+    id: 'complement-intro',
+    title: 'Five Complement: 3 + 4',
+    problem: '3 + 4',
+    description: 'Need to add 4, but only have 1 earth bead space. Use complement: 4 = 5 - 1',
     startValue: 3,
     targetValue: 7,
     highlightBeads: [
-      { placeValue: 0, beadType: "heaven" },
-      { placeValue: 0, beadType: "earth", position: 0 },
+      { placeValue: 0, beadType: 'heaven' },
+      { placeValue: 0, beadType: 'earth', position: 0 },
     ],
-    expectedAction: "multi-step",
-    actionDescription: "First add heaven bead (5), then remove 1 earth bead",
+    expectedAction: 'multi-step',
+    actionDescription: 'First add heaven bead (5), then remove 1 earth bead',
     multiStepInstructions: [
-      "Click the heaven bead to add 5",
-      "Click the first earth bead to remove 1",
+      'Click the heaven bead to add 5',
+      'Click the first earth bead to remove 1',
     ],
     tooltip: {
-      content: "Five Complement: 4 = 5 - 1",
-      explanation:
-        "When you need to add 4 but only have 1 space, use: add 5, remove 1",
+      content: 'Five Complement: 4 = 5 - 1',
+      explanation: 'When you need to add 4 but only have 1 space, use: add 5, remove 1',
     },
   },
   {
-    id: "complement-2",
-    title: "Five Complement: 2 + 3",
-    problem: "2 + 3",
-    description: "Add 3 to make 5 by using complement: 3 = 5 - 2",
+    id: 'complement-2',
+    title: 'Five Complement: 2 + 3',
+    problem: '2 + 3',
+    description: 'Add 3 to make 5 by using complement: 3 = 5 - 2',
     startValue: 2,
     targetValue: 5,
     highlightBeads: [
-      { placeValue: 0, beadType: "heaven" },
-      { placeValue: 0, beadType: "earth", position: 0 },
-      { placeValue: 0, beadType: "earth", position: 1 },
+      { placeValue: 0, beadType: 'heaven' },
+      { placeValue: 0, beadType: 'earth', position: 0 },
+      { placeValue: 0, beadType: 'earth', position: 1 },
     ],
-    expectedAction: "multi-step",
-    actionDescription: "Add heaven bead (5), then remove 2 earth beads",
+    expectedAction: 'multi-step',
+    actionDescription: 'Add heaven bead (5), then remove 2 earth beads',
     multiStepInstructions: [
-      "Click the heaven bead to add 5",
-      "Click the first earth bead to remove it",
-      "Click the second earth bead to remove it",
+      'Click the heaven bead to add 5',
+      'Click the first earth bead to remove it',
+      'Click the second earth bead to remove it',
     ],
     tooltip: {
-      content: "Five Complement: 3 = 5 - 2",
-      explanation: "To add 3, think: 3 = 5 - 2, so add 5 and take away 2",
+      content: 'Five Complement: 3 = 5 - 2',
+      explanation: 'To add 3, think: 3 = 5 - 2, so add 5 and take away 2',
     },
   },
 
   // Phase 4: More complex combinations
   {
-    id: "complex-1",
-    title: "Complex: 6 + 2",
-    problem: "6 + 2",
-    description: "Add 2 more to 6 (which has heaven + 1 earth)",
+    id: 'complex-1',
+    title: 'Complex: 6 + 2',
+    problem: '6 + 2',
+    description: 'Add 2 more to 6 (which has heaven + 1 earth)',
     startValue: 6,
     targetValue: 8,
     highlightBeads: [
-      { placeValue: 0, beadType: "earth", position: 1 },
-      { placeValue: 0, beadType: "earth", position: 2 },
+      { placeValue: 0, beadType: 'earth', position: 1 },
+      { placeValue: 0, beadType: 'earth', position: 2 },
     ],
-    expectedAction: "add",
-    actionDescription: "Add two more earth beads",
+    expectedAction: 'add',
+    actionDescription: 'Add two more earth beads',
     tooltip: {
-      content: "Direct addition when possible",
-      explanation:
-        "When you have space in the earth section, just add directly",
+      content: 'Direct addition when possible',
+      explanation: 'When you have space in the earth section, just add directly',
     },
   },
   {
-    id: "complex-2",
-    title: "Complex: 7 + 4",
-    problem: "7 + 4",
-    description:
-      "Add 4 to 7, but no room for 4 earth beads. Use complement again",
+    id: 'complex-2',
+    title: 'Complex: 7 + 4',
+    problem: '7 + 4',
+    description: 'Add 4 to 7, but no room for 4 earth beads. Use complement again',
     startValue: 7,
     targetValue: 11,
     highlightBeads: [
-      { placeValue: 1, beadType: "heaven" },
-      { placeValue: 0, beadType: "heaven" },
-      { placeValue: 0, beadType: "earth", position: 0 },
-      { placeValue: 0, beadType: "earth", position: 1 },
+      { placeValue: 1, beadType: 'heaven' },
+      { placeValue: 0, beadType: 'heaven' },
+      { placeValue: 0, beadType: 'earth', position: 0 },
+      { placeValue: 0, beadType: 'earth', position: 1 },
     ],
-    expectedAction: "multi-step",
-    actionDescription:
-      "Add tens heaven, then clear ones place: remove heaven + 2 earth",
+    expectedAction: 'multi-step',
+    actionDescription: 'Add tens heaven, then clear ones place: remove heaven + 2 earth',
     multiStepInstructions: [
-      "Click the heaven bead in the tens column (left)",
-      "Click the heaven bead in the ones column to remove it",
-      "Click the first earth bead to remove it",
-      "Click the second earth bead to remove it",
+      'Click the heaven bead in the tens column (left)',
+      'Click the heaven bead in the ones column to remove it',
+      'Click the first earth bead to remove it',
+      'Click the second earth bead to remove it',
     ],
     tooltip: {
-      content: "Carrying to tens place",
-      explanation: "7 + 4 = 11, which needs the tens column heaven bead",
+      content: 'Carrying to tens place',
+      explanation: '7 + 4 = 11, which needs the tens column heaven bead',
     },
   },
-];
+]
 
 // Convert the existing tutorial format to our new format
-export function convertGuidedAdditionTutorial(
-  tutorialMessages: Record<string, any>,
-): Tutorial {
+export function convertGuidedAdditionTutorial(tutorialMessages: Record<string, any>): Tutorial {
   // Convert existing static steps to progressive step data
   const convertedSteps = guidedAdditionSteps.map((step) => {
     // Generate progressive instruction data
-    const generatedInstruction = generateAbacusInstructions(
-      step.startValue,
-      step.targetValue,
-    );
+    const generatedInstruction = generateAbacusInstructions(step.startValue, step.targetValue)
 
     // Get translated strings for this step
-    const stepTranslations = tutorialMessages.steps?.[step.id] || {};
+    const stepTranslations = tutorialMessages.steps?.[step.id] || {}
 
     return {
       ...step,
@@ -252,8 +238,7 @@ export function convertGuidedAdditionTutorial(
         generatedInstruction.actionDescription,
       tooltip: {
         content: stepTranslations.tooltip?.content || step.tooltip.content,
-        explanation:
-          stepTranslations.tooltip?.explanation || step.tooltip.explanation,
+        explanation: stepTranslations.tooltip?.explanation || step.tooltip.explanation,
       },
       multiStepInstructions:
         stepTranslations.multiStepInstructions ||
@@ -264,104 +249,95 @@ export function convertGuidedAdditionTutorial(
       totalSteps: generatedInstruction.totalSteps,
       // Update action description if multi-step was generated
       expectedAction: generatedInstruction.expectedAction,
-    };
-  });
+    }
+  })
 
   // Create a smaller test set for easier navigation
-  const testSteps = convertedSteps.slice(0, 8); // Just first 8 steps for testing
+  const testSteps = convertedSteps.slice(0, 8) // Just first 8 steps for testing
 
   const tutorial: Tutorial = {
-    id: "guided-addition-tutorial",
-    title: "Progressive Multi-Step Tutorial",
+    id: 'guided-addition-tutorial',
+    title: 'Progressive Multi-Step Tutorial',
     description:
-      "Learn basic addition on the soroban abacus with progressive step-by-step guidance, direction indicators, and pedagogical decomposition",
-    category: "Basic Operations",
-    difficulty: "beginner",
+      'Learn basic addition on the soroban abacus with progressive step-by-step guidance, direction indicators, and pedagogical decomposition',
+    category: 'Basic Operations',
+    difficulty: 'beginner',
     estimatedDuration: 15, // minutes
     steps: testSteps,
     tags: [
-      "addition",
-      "basic",
-      "earth beads",
-      "heaven beads",
-      "complements",
-      "progressive",
-      "step-by-step",
+      'addition',
+      'basic',
+      'earth beads',
+      'heaven beads',
+      'complements',
+      'progressive',
+      'step-by-step',
     ],
-    author: "Soroban Abacus System",
-    version: "2.0.0",
-    createdAt: new Date("2024-01-01"),
+    author: 'Soroban Abacus System',
+    version: '2.0.0',
+    createdAt: new Date('2024-01-01'),
     updatedAt: new Date(),
     isPublished: true,
-  };
+  }
 
-  return tutorial;
+  return tutorial
 }
 
 // Helper to validate that the existing tutorial steps work with our new interfaces
-export function validateTutorialConversion(
-  tutorialMessages: Record<string, any>,
-): {
-  isValid: boolean;
-  errors: string[];
+export function validateTutorialConversion(tutorialMessages: Record<string, any>): {
+  isValid: boolean
+  errors: string[]
 } {
-  const errors: string[] = [];
+  const errors: string[] = []
 
   try {
-    const tutorial = convertGuidedAdditionTutorial(tutorialMessages);
+    const tutorial = convertGuidedAdditionTutorial(tutorialMessages)
 
     // Basic validation
     if (!tutorial.id || !tutorial.title || !tutorial.steps.length) {
-      errors.push("Missing required tutorial fields");
+      errors.push('Missing required tutorial fields')
     }
 
     // Validate each step
     tutorial.steps.forEach((step, index) => {
       if (!step.id || !step.title || !step.problem) {
-        errors.push(`Step ${index + 1}: Missing required fields`);
+        errors.push(`Step ${index + 1}: Missing required fields`)
       }
 
-      if (
-        typeof step.startValue !== "number" ||
-        typeof step.targetValue !== "number"
-      ) {
-        errors.push(`Step ${index + 1}: Invalid start or target value`);
+      if (typeof step.startValue !== 'number' || typeof step.targetValue !== 'number') {
+        errors.push(`Step ${index + 1}: Invalid start or target value`)
       }
 
       if (!step.tooltip?.content || !step.tooltip?.explanation) {
-        errors.push(`Step ${index + 1}: Missing tooltip content`);
+        errors.push(`Step ${index + 1}: Missing tooltip content`)
       }
 
       // errorMessages validation removed - no longer needed
 
       if (
-        step.expectedAction === "multi-step" &&
+        step.expectedAction === 'multi-step' &&
         (!step.multiStepInstructions || step.multiStepInstructions.length === 0)
       ) {
-        errors.push(
-          `Step ${index + 1}: Multi-step action missing instructions`,
-        );
+        errors.push(`Step ${index + 1}: Multi-step action missing instructions`)
       }
-    });
+    })
   } catch (error) {
-    errors.push(`Conversion failed: ${error}`);
+    errors.push(`Conversion failed: ${error}`)
   }
 
   return {
     isValid: errors.length === 0,
     errors,
-  };
+  }
 }
 
 // Helper to export tutorial data for use in the editor
-export function getTutorialForEditor(
-  tutorialMessages: Record<string, any>,
-): Tutorial {
-  const validation = validateTutorialConversion(tutorialMessages);
+export function getTutorialForEditor(tutorialMessages: Record<string, any>): Tutorial {
+  const validation = validateTutorialConversion(tutorialMessages)
 
   if (!validation.isValid) {
-    console.warn("Tutorial validation errors:", validation.errors);
+    console.warn('Tutorial validation errors:', validation.errors)
   }
 
-  return convertGuidedAdditionTutorial(tutorialMessages);
+  return convertGuidedAdditionTutorial(tutorialMessages)
 }
diff --git a/apps/web/src/utils/unifiedStepGenerator.ts b/apps/web/src/utils/unifiedStepGenerator.ts
index cef6e2fa..420b90a9 100644
--- a/apps/web/src/utils/unifiedStepGenerator.ts
+++ b/apps/web/src/utils/unifiedStepGenerator.ts
@@ -7,157 +7,153 @@ import {
   calculateBeadChanges,
   numberToAbacusState,
   type StepBeadHighlight,
-} from "./abacusInstructionGenerator";
+} from './abacusInstructionGenerator'
 
-export type PedagogicalRule =
-  | "Direct"
-  | "FiveComplement"
-  | "TenComplement"
-  | "Cascade";
+export type PedagogicalRule = 'Direct' | 'FiveComplement' | 'TenComplement' | 'Cascade'
 
 export interface SegmentReadable {
-  title: string; // "Make 10 — ones" or "Make 10 (carry) — ones"
-  subtitle?: string; // "Using pairs that make 10"
-  chips: Array<{ label: string; value: string }>;
-  why: string[]; // short, plain bullets
-  carryPath?: string; // "Tens is 9 → hundreds +1; tens → 0"
-  stepsFriendly: string[]; // bead verbs for each subterm
-  showMath?: { lines: string[] }; // ["We take away 5 here (that's 10 minus 5)."]
+  title: string // "Make 10 — ones" or "Make 10 (carry) — ones"
+  subtitle?: string // "Using pairs that make 10"
+  chips: Array<{ label: string; value: string }>
+  why: string[] // short, plain bullets
+  carryPath?: string // "Tens is 9 → hundreds +1; tens → 0"
+  stepsFriendly: string[] // bead verbs for each subterm
+  showMath?: { lines: string[] } // ["We take away 5 here (that's 10 minus 5)."]
   /** NEW: one or two sentences that explain the move in plain language */
-  summary: string;
+  summary: string
   /** NEW: dev-only self-check of the summary against the segment's guards */
-  validation?: { ok: boolean; issues: string[] };
+  validation?: { ok: boolean; issues: string[] }
 }
 
 export interface SegmentDecision {
   /** Short, machine-readable rule fired at this segment */
-  rule: PedagogicalRule;
+  rule: PedagogicalRule
   /** Guard conditions that selected this rule */
-  conditions: string[]; // e.g., ["a+d=6 ≤ 9", "L+d=5 > 4"]
+  conditions: string[] // e.g., ["a+d=6 ≤ 9", "L+d=5 > 4"]
   /** Friendly bullets explaining the why */
-  explanation: string[]; // e.g., ["No room for 3 lowers → use +5 − (5−3)"]
+  explanation: string[] // e.g., ["No room for 3 lowers → use +5 − (5−3)"]
 }
 
 export interface PedagogicalSegment {
-  id: string; // e.g., "P1-d4-#2"
-  place: number; // P
-  digit: number; // d
-  a: number; // digit currently showing at P before the segment
-  L: number; // lowers down at P
-  U: 0 | 1; // upper down?
-  goal: string; // "Increase tens by 4 without carry"
-  plan: SegmentDecision[]; // one or more rules (Cascade includes TenComplement+Cascade)
+  id: string // e.g., "P1-d4-#2"
+  place: number // P
+  digit: number // d
+  a: number // digit currently showing at P before the segment
+  L: number // lowers down at P
+  U: 0 | 1 // upper down?
+  goal: string // "Increase tens by 4 without carry"
+  plan: SegmentDecision[] // one or more rules (Cascade includes TenComplement+Cascade)
   /** Expression for the whole segment, e.g., "40" or "(100 - 90 - 6)" */
-  expression: string;
+  expression: string
   /** Indices into the flat `steps` array that belong to this segment */
-  stepIndices: number[];
+  stepIndices: number[]
   /** Indices into the decompositionTerms list that belong to this segment */
-  termIndices: number[];
+  termIndices: number[]
   /** character range inside `fullDecomposition` spanning the expression */
-  termRange: { startIndex: number; endIndex: number };
+  termRange: { startIndex: number; endIndex: number }
 
   /** Segment start→end snapshot (optional but useful for UI tooltips) */
-  startValue: number;
-  endValue: number;
-  startState: AbacusState;
-  endState: AbacusState;
+  startValue: number
+  endValue: number
+  startState: AbacusState
+  endState: AbacusState
   /** Learner-friendly descriptions without technical variables */
-  readable: SegmentReadable;
+  readable: SegmentReadable
 }
 
 export interface TermProvenance {
-  rhs: number; // the addend (difference), e.g., 25
-  rhsDigit: number; // e.g., 2 (for tens), 5 (for ones)
-  rhsPlace: number; // 1=tens, 0=ones, etc.
-  rhsPlaceName: string; // "tens"
-  rhsDigitIndex: number; // index of the digit in the addend string (for highlighting)
-  rhsValue: number; // digit * 10^place (e.g., 20)
-  groupId?: string; // same id for a complement group (e.g., +100 -90 -5)
+  rhs: number // the addend (difference), e.g., 25
+  rhsDigit: number // e.g., 2 (for tens), 5 (for ones)
+  rhsPlace: number // 1=tens, 0=ones, etc.
+  rhsPlaceName: string // "tens"
+  rhsDigitIndex: number // index of the digit in the addend string (for highlighting)
+  rhsValue: number // digit * 10^place (e.g., 20)
+  groupId?: string // same id for a complement group (e.g., +100 -90 -5)
   // NEW: For terms that affect multiple columns (like complement operations)
-  termPlace?: number; // the actual place this specific term affects (overrides rhsPlace for column mapping)
-  termPlaceName?: string; // the name of the place this term affects
-  termValue?: number; // the actual value of this term (e.g., 100, -90, -5)
+  termPlace?: number // the actual place this specific term affects (overrides rhsPlace for column mapping)
+  termPlaceName?: string // the name of the place this term affects
+  termValue?: number // the actual value of this term (e.g., 100, -90, -5)
 }
 
 export interface UnifiedStepData {
-  stepIndex: number;
+  stepIndex: number
 
   // Pedagogical decomposition - the math term for this step
-  mathematicalTerm: string; // e.g., "10", "(5 - 1)", "-6"
-  termPosition: { startIndex: number; endIndex: number }; // Position in full decomposition
+  mathematicalTerm: string // e.g., "10", "(5 - 1)", "-6"
+  termPosition: { startIndex: number; endIndex: number } // Position in full decomposition
 
   // English instruction - what the user should do
-  englishInstruction: string; // e.g., "Click earth bead 1 in tens column"
+  englishInstruction: string // e.g., "Click earth bead 1 in tens column"
 
   // Expected ending state/value after this step
-  expectedValue: number; // e.g., 13, 17, 11
-  expectedState: AbacusState;
+  expectedValue: number // e.g., 13, 17, 11
+  expectedState: AbacusState
 
   // Bead movements for this step (for arrows/highlights)
-  beadMovements: StepBeadHighlight[];
+  beadMovements: StepBeadHighlight[]
 
   // Validation
-  isValid: boolean;
-  validationIssues?: string[];
+  isValid: boolean
+  validationIssues?: string[]
 
   /** Link to pedagogy segment this step belongs to */
-  segmentId?: string;
+  segmentId?: string
 
   /** NEW: Provenance linking this term to its source digit in the addend */
-  provenance?: TermProvenance;
+  provenance?: TermProvenance
 }
 
 export interface EquationAnchors {
-  differenceText: string; // "25"
+  differenceText: string // "25"
   rhsDigitPositions: Array<{
-    digitIndex: number;
-    startIndex: number;
-    endIndex: number;
-  }>;
+    digitIndex: number
+    startIndex: number
+    endIndex: number
+  }>
 }
 
 export interface UnifiedInstructionSequence {
   // Overall pedagogical decomposition
-  fullDecomposition: string; // e.g., "3 + 14 = 3 + 10 + (5 - 1) = 17"
+  fullDecomposition: string // e.g., "3 + 14 = 3 + 10 + (5 - 1) = 17"
 
   // Whether the decomposition is meaningful (not redundant)
-  isMeaningfulDecomposition: boolean;
+  isMeaningfulDecomposition: boolean
 
   // Step-by-step breakdown
-  steps: UnifiedStepData[];
+  steps: UnifiedStepData[]
 
   // Summary
-  startValue: number;
-  targetValue: number;
-  totalSteps: number;
+  startValue: number
+  targetValue: number
+  totalSteps: number
 
   /** NEW: Schema version for compatibility */
-  schemaVersion?: "1" | "2";
+  schemaVersion?: '1' | '2'
   /** NEW: High-level "chapters" that explain the why */
-  segments: PedagogicalSegment[];
+  segments: PedagogicalSegment[]
 
   /** NEW: Character positions for highlighting addend digits */
-  equationAnchors?: EquationAnchors;
+  equationAnchors?: EquationAnchors
 }
 
 // Internal draft interface for building segments
 interface SegmentDraft {
-  id: string;
-  place: number;
-  digit: number;
-  a: number;
-  L: number;
-  U: 0 | 1;
-  plan: SegmentDecision[];
-  goal: string;
+  id: string
+  place: number
+  digit: number
+  a: number
+  L: number
+  U: 0 | 1
+  plan: SegmentDecision[]
+  goal: string
   /** contiguous indices into steps[] / terms[] for this segment */
-  stepIndices: number[];
-  termIndices: number[];
+  stepIndices: number[]
+  termIndices: number[]
   // Value/state snapshots
-  startValue: number;
-  startState: AbacusState;
-  endValue: number;
-  endState: AbacusState;
+  startValue: number
+  startState: AbacusState
+  endValue: number
+  endState: AbacusState
 }
 
 /**
@@ -165,116 +161,103 @@ interface SegmentDraft {
  */
 
 function isPowerOfTen(n: number): boolean {
-  if (n < 1) return false;
-  return /^10*$/.test(n.toString());
+  if (n < 1) return false
+  return /^10*$/.test(n.toString())
 }
 
-const isPowerOfTenGE10 = (n: number) => n >= 10 && isPowerOfTen(n);
+const isPowerOfTenGE10 = (n: number) => n >= 10 && isPowerOfTen(n)
 function inferGoal(seg: SegmentDraft): string {
-  const placeName = getPlaceName(seg.place);
+  const placeName = getPlaceName(seg.place)
   switch (seg.plan[0]?.rule) {
-    case "Direct":
-      return `Increase ${placeName} by ${seg.digit} without carry`;
-    case "FiveComplement":
-      return `Add ${seg.digit} to ${placeName} using 5's complement`;
-    case "TenComplement":
-      return `Add ${seg.digit} to ${placeName} with a carry`;
-    case "Cascade":
-      return `Carry through ${placeName}+ to nearest non‑9 place`;
+    case 'Direct':
+      return `Increase ${placeName} by ${seg.digit} without carry`
+    case 'FiveComplement':
+      return `Add ${seg.digit} to ${placeName} using 5's complement`
+    case 'TenComplement':
+      return `Add ${seg.digit} to ${placeName} with a carry`
+    case 'Cascade':
+      return `Carry through ${placeName}+ to nearest non‑9 place`
     default:
-      return `Apply operation at ${placeName}`;
+      return `Apply operation at ${placeName}`
   }
 }
 
-function _decisionForDirect(
-  a: number,
-  d: number,
-  L: number,
-): SegmentDecision[] {
+function _decisionForDirect(a: number, d: number, L: number): SegmentDecision[] {
   if (L + d <= 4) {
     return [
       {
-        rule: "Direct",
+        rule: 'Direct',
         conditions: [`a+d=${a}+${d}=${a + d} ≤ 9`],
-        explanation: ["Fits inside this place; add earth beads directly."],
+        explanation: ['Fits inside this place; add earth beads directly.'],
       },
-    ];
+    ]
   } else {
-    const s = 5 - d;
+    const s = 5 - d
     return [
       {
-        rule: "FiveComplement",
-        conditions: [
-          `a+d=${a}+${d}=${a + d} ≤ 9`,
-          `L+d=${L}+${d}=${L + d} > 4`,
-        ],
+        rule: 'FiveComplement',
+        conditions: [`a+d=${a}+${d}=${a + d} ≤ 9`, `L+d=${L}+${d}=${L + d} > 4`],
         explanation: [
-          "No room for that many earth beads.",
+          'No room for that many earth beads.',
           `Use +5 − (5−${d}) = +5 − ${s}; subtraction is possible because lowers ≥ ${s}.`,
         ],
       },
-    ];
+    ]
   }
 }
 
 function decisionForFiveComplement(a: number, d: number): SegmentDecision[] {
-  const s = 5 - d;
+  const s = 5 - d
   return [
     {
-      rule: "FiveComplement",
+      rule: 'FiveComplement',
       conditions: [`a+d=${a}+${d}=${a + d} ≤ 9`, `L+d > 4`],
       explanation: [
-        "No room for that many earth beads.",
+        'No room for that many earth beads.',
         `Use +5 − (5−${d}) = +5 − ${s}; subtraction is possible because lowers ≥ ${s}.`,
       ],
     },
-  ];
+  ]
 }
 
-function decisionForTenComplement(
-  a: number,
-  d: number,
-  nextIs9: boolean,
-): SegmentDecision[] {
+function decisionForTenComplement(a: number, d: number, nextIs9: boolean): SegmentDecision[] {
   const base: SegmentDecision = {
-    rule: "TenComplement",
+    rule: 'TenComplement',
     conditions: [`a+d=${a}+${d}=${a + d} ≥ 10`, `a ≥ 10−d = ${10 - d}`],
     explanation: [
-      "Need a carry to the next higher place.",
+      'Need a carry to the next higher place.',
       `No borrow at this place because a ≥ ${10 - d}.`,
     ],
-  };
-  if (!nextIs9) return [base];
+  }
+  if (!nextIs9) return [base]
   return [
     base,
     {
-      rule: "Cascade",
-      conditions: ["next place is 9 ⇒ ripple carry"],
-      explanation: ["Increment nearest non‑9 place; clear intervening 9s."],
+      rule: 'Cascade',
+      conditions: ['next place is 9 ⇒ ripple carry'],
+      explanation: ['Increment nearest non‑9 place; clear intervening 9s.'],
     },
-  ];
+  ]
 }
 
 function formatSegmentExpression(terms: string[]): string {
-  if (terms.length === 0) return "";
+  if (terms.length === 0) return ''
 
-  const positives = terms.filter((t) => !t.startsWith("-"));
-  const negatives = terms
-    .filter((t) => t.startsWith("-"))
-    .map((t) => t.slice(1));
+  const positives = terms.filter((t) => !t.startsWith('-'))
+  const negatives = terms.filter((t) => t.startsWith('-')).map((t) => t.slice(1))
 
   // All positive → join with pluses (no parentheses)
   if (negatives.length === 0) {
-    return positives.join(" + ");
+    return positives.join(' + ')
   }
 
   // Complement group → (pos - n1 - n2 - …)
-  return `(${positives[0]} - ${negatives.join(" - ")})`;
+  return `(${positives[0]} - ${negatives.join(' - ')})`
 }
 
 function _formatSegmentGoal(digit: number, placeValue: number): string {
-  const placeName = getPlaceName(placeValue);
-  return `Add ${digit} to ${placeName}`;
+  const placeName = getPlaceName(placeValue)
+  return `Add ${digit} to ${placeName}`
 }
 
 function generateSegmentReadable(
@@ -286,142 +269,127 @@ function generateSegmentReadable(
   steps: UnifiedStepData[],
   stepIndices: number[],
   startState: AbacusState,
-  _targetState: AbacusState,
+  _targetState: AbacusState
 ): SegmentReadable {
-  const placeName = getPlaceName(place);
-  const hasCascade = plan.some((p) => p.rule === "Cascade");
+  const placeName = getPlaceName(place)
+  const hasCascade = plan.some((p) => p.rule === 'Cascade')
 
   // Pull first available provenance from this segment's steps
-  const provenance = stepIndices.map((i) => steps[i]?.provenance).find(Boolean);
+  const provenance = stepIndices.map((i) => steps[i]?.provenance).find(Boolean)
 
   // Helper numbers
-  const s5 = 5 - digit;
-  const s10 = 10 - digit;
-  const nextPlaceName = getPlaceName(place + 1);
+  const s5 = 5 - digit
+  const s10 = 10 - digit
+  const nextPlaceName = getPlaceName(place + 1)
 
   // Title is short + kid-friendly
   const title =
-    rule === "Direct"
+    rule === 'Direct'
       ? `Add ${digit} — ${placeName}`
-      : rule === "FiveComplement"
+      : rule === 'FiveComplement'
         ? `Make 5 — ${placeName}`
-        : rule === "TenComplement"
+        : rule === 'TenComplement'
           ? hasCascade
             ? `Make 10 (carry) — ${placeName}`
             : `Make 10 — ${placeName}`
-          : rule === "Cascade"
+          : rule === 'Cascade'
             ? `Carry ripple — ${placeName}`
-            : `Strategy — ${placeName}`;
+            : `Strategy — ${placeName}`
 
   // Minimal chips (0–2), provenance first if present
-  const chips: Array<{ label: string; value: string }> = [];
+  const chips: Array<{ label: string; value: string }> = []
   if (provenance) {
     chips.push({
-      label: "From addend",
+      label: 'From addend',
       value: `${provenance.rhsDigit} ${provenance.rhsPlaceName}`,
-    });
+    })
   }
-  chips.push({ label: "Rod shows", value: `${currentDigit}` });
+  chips.push({ label: 'Rod shows', value: `${currentDigit}` })
 
   // Carry path (kept terse)
-  let carryPath: string | undefined;
-  if (rule === "TenComplement") {
+  let carryPath: string | undefined
+  if (rule === 'TenComplement') {
     if (hasCascade) {
-      const nextPlace = place + 1;
+      const nextPlace = place + 1
       const nextVal =
-        (startState[nextPlace]?.heavenActive ? 5 : 0) +
-        (startState[nextPlace]?.earthActive || 0);
+        (startState[nextPlace]?.heavenActive ? 5 : 0) + (startState[nextPlace]?.earthActive || 0)
       if (nextVal === 9) {
         // Find highest non‑9 to name the landing place
-        const maxPlace =
-          Math.max(0, ...Object.keys(startState).map(Number)) + 2;
-        let k = nextPlace + 1;
+        const maxPlace = Math.max(0, ...Object.keys(startState).map(Number)) + 2
+        let k = nextPlace + 1
         for (; k <= maxPlace; k++) {
-          const v =
-            (startState[k]?.heavenActive ? 5 : 0) +
-            (startState[k]?.earthActive || 0);
-          if (v !== 9) break;
+          const v = (startState[k]?.heavenActive ? 5 : 0) + (startState[k]?.earthActive || 0)
+          if (v !== 9) break
         }
-        const landingIsNewHighest = k > maxPlace;
-        const toName = landingIsNewHighest
-          ? "next higher place"
-          : getPlaceName(k);
-        carryPath = `${getPlaceName(nextPlace)} is 9 ⇒ ${toName} +1; clear 9s`;
+        const landingIsNewHighest = k > maxPlace
+        const toName = landingIsNewHighest ? 'next higher place' : getPlaceName(k)
+        carryPath = `${getPlaceName(nextPlace)} is 9 ⇒ ${toName} +1; clear 9s`
       } else {
-        carryPath = `${nextPlaceName} +1`;
+        carryPath = `${nextPlaceName} +1`
       }
     } else {
-      carryPath = `${nextPlaceName} +1`;
+      carryPath = `${nextPlaceName} +1`
     }
   }
 
   // Steps (kept for the expandable "details" UI)
   const stepsFriendly = stepIndices
     .map((i) => steps[i]?.englishInstruction)
-    .filter(Boolean) as string[];
+    .filter(Boolean) as string[]
 
   // Semantic, 1–2 sentence summary
-  let summary = "";
-  if (rule === "Direct") {
+  let summary = ''
+  if (rule === 'Direct') {
     if (digit <= 4) {
-      summary = `Add ${digit} to the ${placeName}. It fits here, so just move ${digit} lower bead${digit > 1 ? "s" : ""}.`;
+      summary = `Add ${digit} to the ${placeName}. It fits here, so just move ${digit} lower bead${digit > 1 ? 's' : ''}.`
     } else {
-      const rest = digit - 5;
-      summary = `Add ${digit} to the ${placeName} using the heaven bead: +5${rest ? ` + ${rest}` : ""}. No carry needed.`;
+      const rest = digit - 5
+      summary = `Add ${digit} to the ${placeName} using the heaven bead: +5${rest ? ` + ${rest}` : ''}. No carry needed.`
     }
-  } else if (rule === "FiveComplement") {
-    summary = `Add ${digit} to the ${placeName}, but there isn't room for that many lower beads. Use 5's friend: press the heaven bead (5) and lift ${s5} — that's +5 − ${s5}.`;
-  } else if (rule === "TenComplement") {
+  } else if (rule === 'FiveComplement') {
+    summary = `Add ${digit} to the ${placeName}, but there isn't room for that many lower beads. Use 5's friend: press the heaven bead (5) and lift ${s5} — that's +5 − ${s5}.`
+  } else if (rule === 'TenComplement') {
     if (hasCascade) {
-      summary = `Add ${digit} to the ${placeName} to make 10. Carry to ${nextPlaceName}; because the next rod is 9, the carry ripples up, then take ${s10} here (that's +10 − ${s10}).`;
+      summary = `Add ${digit} to the ${placeName} to make 10. Carry to ${nextPlaceName}; because the next rod is 9, the carry ripples up, then take ${s10} here (that's +10 − ${s10}).`
     } else {
-      summary = `Add ${digit} to the ${placeName} to make 10: carry 1 to ${nextPlaceName} and take ${s10} here (that's +10 − ${s10}).`;
+      summary = `Add ${digit} to the ${placeName} to make 10: carry 1 to ${nextPlaceName} and take ${s10} here (that's +10 − ${s10}).`
     }
   } else {
-    summary = `Apply the strategy on the ${placeName}.`;
+    summary = `Apply the strategy on the ${placeName}.`
   }
 
   // Short subtitle (optional, reused from your rule badges)
   const subtitle =
-    rule === "Direct"
+    rule === 'Direct'
       ? digit <= 4
-        ? "Simple move"
-        : "Heaven bead helps"
-      : rule === "FiveComplement"
+        ? 'Simple move'
+        : 'Heaven bead helps'
+      : rule === 'FiveComplement'
         ? "Using 5's friend"
-        : rule === "TenComplement"
+        : rule === 'TenComplement'
           ? "Using 10's friend"
-          : undefined;
+          : undefined
 
   // Tiny, dev-only validation of the summary against the selected rule
-  const issues: string[] = [];
-  const guards = plan.flatMap((p) => p.conditions);
-  if (
-    rule === "FiveComplement" &&
-    !guards.some((g) => /L\s*\+\s*d.*>\s*4/.test(g))
-  ) {
-    issues.push("FiveComplement summary emitted but guard L+d>4 not present");
+  const issues: string[] = []
+  const guards = plan.flatMap((p) => p.conditions)
+  if (rule === 'FiveComplement' && !guards.some((g) => /L\s*\+\s*d.*>\s*4/.test(g))) {
+    issues.push('FiveComplement summary emitted but guard L+d>4 not present')
   }
-  if (
-    rule === "TenComplement" &&
-    !guards.some((g) => /a\s*\+\s*d.*(≥|>=)\s*10/.test(g))
-  ) {
-    issues.push("TenComplement summary emitted but guard a+d≥10 not present");
+  if (rule === 'TenComplement' && !guards.some((g) => /a\s*\+\s*d.*(≥|>=)\s*10/.test(g))) {
+    issues.push('TenComplement summary emitted but guard a+d≥10 not present')
   }
-  if (
-    rule === "Direct" &&
-    !guards.some((g) => /a\s*\+\s*d.*(≤|<=)\s*9/.test(g))
-  ) {
-    issues.push("Direct summary emitted but guard a+d≤9 not present");
+  if (rule === 'Direct' && !guards.some((g) => /a\s*\+\s*d.*(≤|<=)\s*9/.test(g))) {
+    issues.push('Direct summary emitted but guard a+d≤9 not present')
   }
-  const validation = { ok: issues.length === 0, issues };
+  const validation = { ok: issues.length === 0, issues }
 
   // Minimal "show the math" for students who want it
-  const showMathLines: string[] = [];
-  if (rule === "FiveComplement") {
-    showMathLines.push(`+5 − ${s5} = +${digit} (at this rod)`);
-  } else if (rule === "TenComplement") {
-    showMathLines.push(`+10 − ${s10} = +${digit} (with a carry)`);
+  const showMathLines: string[] = []
+  if (rule === 'FiveComplement') {
+    showMathLines.push(`+5 − ${s5} = +${digit} (at this rod)`)
+  } else if (rule === 'TenComplement') {
+    showMathLines.push(`+10 − ${s10} = +${digit} (with a carry)`)
   }
 
   return {
@@ -434,36 +402,36 @@ function generateSegmentReadable(
     showMath: showMathLines.length ? { lines: showMathLines } : undefined,
     summary,
     validation,
-  };
+  }
 }
 
 function buildSegmentsWithPositions(
   segmentsPlan: SegmentDraft[],
   fullDecomposition: string,
-  steps: UnifiedStepData[],
+  steps: UnifiedStepData[]
 ): PedagogicalSegment[] {
   return segmentsPlan.map((draft) => {
     const segmentTerms = draft.stepIndices
       .map((i) => steps[i]?.mathematicalTerm)
-      .filter((t): t is string => !!t);
+      .filter((t): t is string => !!t)
 
     // Range from steps -> exact, no string search
     const ranges = draft.stepIndices
       .map((i) => steps[i]?.termPosition)
-      .filter((r): r is { startIndex: number; endIndex: number } => !!r);
+      .filter((r): r is { startIndex: number; endIndex: number } => !!r)
 
-    let start = Math.min(...ranges.map((r) => r.startIndex));
-    let end = Math.max(...ranges.map((r) => r.endIndex));
+    let start = Math.min(...ranges.map((r) => r.startIndex))
+    let end = Math.max(...ranges.map((r) => r.endIndex))
 
     // Safely include surrounding parentheses for complement groups
-    const before = start > 0 ? fullDecomposition[start - 1] : "";
-    const after = end < fullDecomposition.length ? fullDecomposition[end] : "";
-    if (before === "(" && after === ")") {
-      start -= 1;
-      end += 1;
+    const before = start > 0 ? fullDecomposition[start - 1] : ''
+    const after = end < fullDecomposition.length ? fullDecomposition[end] : ''
+    if (before === '(' && after === ')') {
+      start -= 1
+      end += 1
     }
 
-    const primaryRule = draft.plan[0]?.rule || "Direct";
+    const primaryRule = draft.plan[0]?.rule || 'Direct'
 
     return {
       id: draft.id,
@@ -491,77 +459,73 @@ function buildSegmentsWithPositions(
         steps,
         draft.stepIndices,
         draft.startState,
-        draft.endState,
+        draft.endState
       ),
-    };
-  });
+    }
+  })
 }
 
 function determineSegmentDecisions(
   digit: number,
   place: number,
   currentDigit: number,
-  steps: DecompositionStep[],
+  steps: DecompositionStep[]
 ): SegmentDecision[] {
-  const sum = currentDigit + digit;
+  const sum = currentDigit + digit
 
   // If there is exactly one step and it's positive, it's direct.
-  if (steps.length === 1 && !steps[0].operation.startsWith("-")) {
+  if (steps.length === 1 && !steps[0].operation.startsWith('-')) {
     return [
       {
-        rule: "Direct",
+        rule: 'Direct',
         conditions: [`a+d=${currentDigit}+${digit}=${sum} ≤ 9`],
-        explanation: ["Fits in this place; add beads directly."],
+        explanation: ['Fits in this place; add beads directly.'],
       },
-    ];
+    ]
   }
 
   const positives = steps
-    .filter((s) => !s.operation.startsWith("-"))
-    .map((s) => parseInt(s.operation, 10));
+    .filter((s) => !s.operation.startsWith('-'))
+    .map((s) => parseInt(s.operation, 10))
   const negatives = steps
-    .filter((s) => s.operation.startsWith("-"))
-    .map((s) => Math.abs(parseInt(s.operation, 10)));
+    .filter((s) => s.operation.startsWith('-'))
+    .map((s) => Math.abs(parseInt(s.operation, 10)))
 
   // No negatives → it's a direct (possibly 5+earth remainder) entry, not complement
   if (negatives.length === 0) {
     return [
       {
-        rule: "Direct",
+        rule: 'Direct',
         conditions: [`a+d=${currentDigit}+${digit}=${sum} ≤ 9`],
-        explanation: [
-          "Heaven bead (5) plus lower beads: still direct addition.",
-        ],
+        explanation: ['Heaven bead (5) plus lower beads: still direct addition.'],
       },
-    ];
+    ]
   }
 
   // There are negatives → complement family
-  const hasFiveAdd = positives.some(
-    (v) => Number.isInteger(v / 5) && isPowerOfTen(v / 5),
-  );
-  const tenAdd = positives.find((v) => isPowerOfTenGE10(v));
-  const hasTenAdd = tenAdd !== undefined;
+  const hasFiveAdd = positives.some((v) => Number.isInteger(v / 5) && isPowerOfTen(v / 5))
+  const tenAdd = positives.find((v) => isPowerOfTenGE10(v))
+  const hasTenAdd = tenAdd !== undefined
 
   if (hasTenAdd) {
-    const tenAddPlace = Math.round(Math.log10(tenAdd!));
-    const negPlaces = new Set(negatives.map((v) => Math.floor(Math.log10(v))));
-    const cascades = tenAddPlace > place + 1 || negPlaces.size >= 2;
-    return decisionForTenComplement(currentDigit, digit, cascades);
+    const tenAddPlace = Math.round(Math.log10(tenAdd!))
+    const negPlaces = new Set(negatives.map((v) => Math.floor(Math.log10(v))))
+    const cascades = tenAddPlace > place + 1 || negPlaces.size >= 2
+    return decisionForTenComplement(currentDigit, digit, cascades)
   }
 
   if (hasFiveAdd) {
-    return decisionForFiveComplement(currentDigit, digit);
+    return decisionForFiveComplement(currentDigit, digit)
   }
 
   // Fallback (unlikely with current generators)
   return [
     {
-      rule: "Direct",
+      rule: 'Direct',
       conditions: [`processing digit ${digit} at ${getPlaceName(place)}`],
-      explanation: ["Standard operation."],
+      explanation: ['Standard operation.'],
     },
-  ];
+  ]
 }
 
 /**
@@ -570,60 +534,52 @@ function determineSegmentDecisions(
  */
 export function generateUnifiedInstructionSequence(
   startValue: number,
-  targetValue: number,
+  targetValue: number
 ): UnifiedInstructionSequence {
-  const _difference = targetValue - startValue;
+  const _difference = targetValue - startValue
 
   // Ensure consistent width across all state conversions to prevent place misalignment
-  const digits = (n: number) =>
-    Math.max(1, Math.floor(Math.log10(Math.abs(n))) + 1);
+  const digits = (n: number) => Math.max(1, Math.floor(Math.log10(Math.abs(n))) + 1)
   const width =
-    Math.max(
-      digits(startValue),
-      digits(targetValue),
-      digits(Math.abs(targetValue - startValue)),
-    ) + 1; // +1 to absorb carries
-  const toState = (n: number) => numberToAbacusState(n, width);
+    Math.max(digits(startValue), digits(targetValue), digits(Math.abs(targetValue - startValue))) +
+    1 // +1 to absorb carries
+  const toState = (n: number) => numberToAbacusState(n, width)
 
   // Step 1: Generate pedagogical decomposition terms and segment plan
-  const startState = toState(startValue);
+  const startState = toState(startValue)
   const {
     terms: decompositionTerms,
     segmentsPlan,
     decompositionSteps,
-  } = generateDecompositionTerms(startValue, targetValue, toState);
+  } = generateDecompositionTerms(startValue, targetValue, toState)
 
   // Step 3: Generate unified steps - each step computes ALL aspects simultaneously
-  const steps: UnifiedStepData[] = [];
-  let currentValue = startValue;
-  let currentState = { ...startState };
+  const steps: UnifiedStepData[] = []
+  let currentValue = startValue
+  let currentState = { ...startState }
 
   for (let stepIndex = 0; stepIndex < decompositionTerms.length; stepIndex++) {
-    const term = decompositionTerms[stepIndex];
+    const term = decompositionTerms[stepIndex]
 
     // Calculate what this step should accomplish
-    const stepResult = calculateStepResult(currentValue, term);
-    const newValue = stepResult.newValue;
-    const newState = toState(newValue);
+    const stepResult = calculateStepResult(currentValue, term)
+    const newValue = stepResult.newValue
+    const newState = toState(newValue)
 
     // Find the bead movements for this specific step
-    const stepBeadMovements = calculateStepBeadMovements(
-      currentState,
-      newState,
-      stepIndex,
-    );
+    const stepBeadMovements = calculateStepBeadMovements(currentState, newState, stepIndex)
 
     // Generate English instruction with hybrid approach
     // Use term-based for consistency with tests, bead-movements as validation
     const isComplementContext =
-      term === "5" &&
+      term === '5' &&
       stepIndex + 1 < decompositionTerms.length &&
-      decompositionTerms[stepIndex + 1].startsWith("-");
+      decompositionTerms[stepIndex + 1].startsWith('-')
     const englishInstruction =
       generateInstructionFromTerm(term, stepIndex, isComplementContext) ||
       (stepBeadMovements.length > 0
         ? generateStepInstruction(stepBeadMovements, term, stepResult)
-        : `perform operation: ${term}`);
+        : `perform operation: ${term}`)
 
     // Validate that everything is consistent
     const validation = validateStepConsistency(
@@ -632,8 +588,8 @@ export function generateUnifiedInstructionSequence(
       currentValue,
       newValue,
       stepBeadMovements,
-      toState,
-    );
+      toState
+    )
 
     // Create the unified step data
     const stepData: UnifiedStepData = {
@@ -647,28 +603,27 @@ export function generateUnifiedInstructionSequence(
       isValid: validation.isValid,
       validationIssues: validation.issues,
       provenance: decompositionSteps[stepIndex]?.provenance,
-    };
+    }
 
-    steps.push(stepData);
+    steps.push(stepData)
 
     // Move to next step
-    currentValue = newValue;
-    currentState = { ...newState };
+    currentValue = newValue
+    currentState = { ...newState }
   }
 
   // Step 4: Build full decomposition string and calculate term positions
-  const { fullDecomposition, termPositions } =
-    buildFullDecompositionWithPositions(
-      startValue,
-      targetValue,
-      decompositionTerms,
-    );
+  const { fullDecomposition, termPositions } = buildFullDecompositionWithPositions(
+    startValue,
+    targetValue,
+    decompositionTerms
+  )
 
   // Defensive check: ensure position count matches term count
   if (termPositions.length !== decompositionTerms.length) {
     throw new Error(
-      `Position count mismatch: ${termPositions.length} positions for ${decompositionTerms.length} terms`,
-    );
+      `Position count mismatch: ${termPositions.length} positions for ${decompositionTerms.length} terms`
+    )
   }
 
   // Step 5: Determine if this decomposition is meaningful
@@ -676,37 +631,29 @@ export function generateUnifiedInstructionSequence(
     startValue,
     targetValue,
     decompositionTerms,
-    fullDecomposition,
-  );
+    fullDecomposition
+  )
 
   // Step 6: Attach term positions and segment ids to steps
   steps.forEach((step, idx) => {
-    if (termPositions[idx]) step.termPosition = termPositions[idx];
-  });
+    if (termPositions[idx]) step.termPosition = termPositions[idx]
+  })
 
   // (optional) annotate steps with the segment they belong to
   segmentsPlan.forEach((seg) =>
     seg.stepIndices.forEach((i) => {
-      if (steps[i]) steps[i].segmentId = seg.id;
-    }),
-  );
+      if (steps[i]) steps[i].segmentId = seg.id
+    })
+  )
 
   // Step 7: Build segments using step positions (exact indices, robust)
-  const segments = buildSegmentsWithPositions(
-    segmentsPlan,
-    fullDecomposition,
-    steps,
-  );
+  const segments = buildSegmentsWithPositions(segmentsPlan, fullDecomposition, steps)
 
   // Step 8: Build equation anchors for addend digit highlighting
-  const equationAnchors = buildEquationAnchors(
-    startValue,
-    targetValue,
-    fullDecomposition,
-  );
+  const equationAnchors = buildEquationAnchors(startValue, targetValue, fullDecomposition)
 
   const result = {
-    schemaVersion: "2" as const,
+    schemaVersion: '2' as const,
     fullDecomposition,
     isMeaningfulDecomposition,
     steps,
@@ -715,32 +662,29 @@ export function generateUnifiedInstructionSequence(
     targetValue,
     totalSteps: steps.length,
     equationAnchors,
-  };
-
-  // Development-time invariant checks
-  if (
-    typeof process !== "undefined" &&
-    process.env?.NODE_ENV !== "production"
-  ) {
-    assertSegments(result);
   }
 
-  return result;
+  // Development-time invariant checks
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+    assertSegments(result)
+  }
+
+  return result
 }
 
 /**
  * Generate decomposition terms based on actual bead movements
  */
 interface AbacusPlaceState {
-  heavenActive: boolean;
-  earthActive: number; // 0-4
+  heavenActive: boolean
+  earthActive: number // 0-4
 }
 
 interface DecompositionStep {
-  operation: string; // The mathematical term like "7", "(10 - 3)", etc.
-  description: string; // What this step does pedagogically
-  targetValue: number; // Expected value after this step
-  provenance?: TermProvenance; // NEW: Link to source digit
+  operation: string // The mathematical term like "7", "(10 - 3)", etc.
+  description: string // What this step does pedagogically
+  targetValue: number // Expected value after this step
+  provenance?: TermProvenance // NEW: Link to source digit
 }
 
 /**
@@ -750,39 +694,38 @@ interface DecompositionStep {
 function generateDecompositionTerms(
   startValue: number,
   targetValue: number,
-  toState: (n: number) => AbacusState,
+  toState: (n: number) => AbacusState
 ): {
-  terms: string[];
-  segmentsPlan: SegmentDraft[];
-  decompositionSteps: DecompositionStep[];
+  terms: string[]
+  segmentsPlan: SegmentDraft[]
+  decompositionSteps: DecompositionStep[]
 } {
-  const addend = targetValue - startValue;
-  if (addend === 0)
-    return { terms: [], segmentsPlan: [], decompositionSteps: [] };
+  const addend = targetValue - startValue
+  if (addend === 0) return { terms: [], segmentsPlan: [], decompositionSteps: [] }
   if (addend < 0) {
     // TODO: Handle subtraction in separate sprint
-    throw new Error("Subtraction not implemented yet");
+    throw new Error('Subtraction not implemented yet')
   }
 
   // Convert to abacus state representation with correct dimensions
-  let currentState = toState(startValue);
-  let currentValue = startValue;
-  const steps: DecompositionStep[] = [];
-  const segmentsPlan: SegmentDraft[] = [];
+  let currentState = toState(startValue)
+  let currentValue = startValue
+  const steps: DecompositionStep[] = []
+  const segmentsPlan: SegmentDraft[] = []
 
   // Process addend digit by digit from left to right (highest to lowest place)
-  const addendStr = addend.toString();
-  const addendLength = addendStr.length;
+  const addendStr = addend.toString()
+  const addendLength = addendStr.length
 
   for (let digitIndex = 0; digitIndex < addendLength; digitIndex++) {
-    const digit = parseInt(addendStr[digitIndex], 10);
-    const placeValue = addendLength - 1 - digitIndex;
+    const digit = parseInt(addendStr[digitIndex], 10)
+    const placeValue = addendLength - 1 - digitIndex
 
-    if (digit === 0) continue; // Skip zeros
+    if (digit === 0) continue // Skip zeros
 
     // Get current digit at this place value
-    const currentDigitAtPlace = getDigitAtPlace(currentValue, placeValue);
-    const startStepCount = steps.length;
+    const currentDigitAtPlace = getDigitAtPlace(currentValue, placeValue)
+    const startStepCount = steps.length
 
     // DEBUG: Log the processing for troubleshooting
     // console.log(`Processing place ${placeValue}: digit=${digit}, current=${currentDigitAtPlace}, sum=${currentDigitAtPlace + digit}`)
@@ -795,7 +738,7 @@ function generateDecompositionTerms(
       rhsPlaceName: getPlaceName(placeValue),
       rhsDigitIndex: digitIndex,
       rhsValue: digit * 10 ** placeValue,
-    };
+    }
 
     // Apply the pedagogical algorithm decision tree
     const stepResult = processDigitAtPlace(
@@ -805,42 +748,37 @@ function generateDecompositionTerms(
       currentState,
       addend, // Pass the full addend to determine if it's multi-place
       toState, // Pass consistent state converter
-      baseProvenance, // NEW: Pass provenance info
-    );
+      baseProvenance // NEW: Pass provenance info
+    )
 
-    const segmentId = `place-${placeValue}-digit-${digit}`;
-    const segmentStartValue = currentValue;
-    const segmentStartState = { ...currentState };
+    const segmentId = `place-${placeValue}-digit-${digit}`
+    const segmentStartValue = currentValue
+    const segmentStartState = { ...currentState }
     const placeStart = segmentStartState[placeValue] ?? {
       heavenActive: false,
       earthActive: 0,
-    };
-    const L = placeStart.earthActive;
-    const U: 0 | 1 = placeStart.heavenActive ? 1 : 0;
+    }
+    const L = placeStart.earthActive
+    const U: 0 | 1 = placeStart.heavenActive ? 1 : 0
 
     // Apply the step result
-    steps.push(...stepResult.steps);
-    currentValue = stepResult.newValue;
-    currentState = stepResult.newState;
+    steps.push(...stepResult.steps)
+    currentValue = stepResult.newValue
+    currentState = stepResult.newState
 
-    const endStepCount = steps.length;
+    const endStepCount = steps.length
     const stepIndices = Array.from(
       { length: endStepCount - startStepCount },
-      (_, i) => startStepCount + i,
-    );
+      (_, i) => startStepCount + i
+    )
 
     if (stepIndices.length === 0) {
       // skip building a segment with no terms/steps
-      continue;
+      continue
     }
 
     // Decide pedagogy
-    const plan = determineSegmentDecisions(
-      digit,
-      placeValue,
-      currentDigitAtPlace,
-      stepResult.steps,
-    );
+    const plan = determineSegmentDecisions(digit, placeValue, currentDigitAtPlace, stepResult.steps)
     const goal = inferGoal({
       id: segmentId,
       place: placeValue,
@@ -849,14 +787,14 @@ function generateDecompositionTerms(
       L,
       U,
       plan,
-      goal: "",
+      goal: '',
       stepIndices,
       termIndices: stepIndices,
       startValue: segmentStartValue,
       startState: segmentStartState,
       endValue: currentValue,
       endState: { ...currentState },
-    });
+    })
 
     const segment: SegmentDraft = {
       id: segmentId,
@@ -873,14 +811,14 @@ function generateDecompositionTerms(
       startState: segmentStartState,
       endValue: currentValue,
       endState: { ...currentState },
-    };
+    }
 
-    segmentsPlan.push(segment);
+    segmentsPlan.push(segment)
   }
 
   // Convert steps to string terms for compatibility
-  const terms = steps.map((step) => step.operation);
-  return { terms, segmentsPlan, decompositionSteps: steps };
+  const terms = steps.map((step) => step.operation)
+  return { terms, segmentsPlan, decompositionSteps: steps }
 }
 
 /**
@@ -893,31 +831,18 @@ function processDigitAtPlace(
   currentState: AbacusState,
   addend: number,
   toState: (n: number) => AbacusState,
-  baseProvenance: TermProvenance,
+  baseProvenance: TermProvenance
 ): { steps: DecompositionStep[]; newValue: number; newState: AbacusState } {
-  const a = currentDigitAtPlace;
-  const d = digit;
+  const a = currentDigitAtPlace
+  const d = digit
 
   // Decision: Direct addition vs 10's complement
   if (a + d <= 9) {
     // Case A: Direct addition at this place
-    return processDirectAddition(
-      d,
-      placeValue,
-      currentState,
-      addend,
-      toState,
-      baseProvenance,
-    );
+    return processDirectAddition(d, placeValue, currentState, addend, toState, baseProvenance)
   } else {
     // Case B: 10's complement required
-    return processTensComplement(
-      d,
-      placeValue,
-      currentState,
-      toState,
-      baseProvenance,
-    );
+    return processTensComplement(d, placeValue, currentState, toState, baseProvenance)
   }
 }
 
@@ -930,15 +855,15 @@ function processDirectAddition(
   currentState: AbacusState,
   _addend: number,
   _toState: (n: number) => AbacusState,
-  baseProvenance: TermProvenance,
+  baseProvenance: TermProvenance
 ): { steps: DecompositionStep[]; newValue: number; newState: AbacusState } {
   const placeState = currentState[placeValue] || {
     heavenActive: false,
     earthActive: 0,
-  };
-  const L = placeState.earthActive; // Current earth beads (matches algorithm spec)
-  const steps: DecompositionStep[] = [];
-  const newState = { ...currentState };
+  }
+  const L = placeState.earthActive // Current earth beads (matches algorithm spec)
+  const steps: DecompositionStep[] = []
+  const newState = { ...currentState }
 
   if (digit <= 4) {
     // For digits 1-4: try to add earth beads directly
@@ -946,7 +871,7 @@ function processDirectAddition(
       // Direct earth bead addition
       steps.push({
         operation: (digit * 10 ** placeValue).toString(),
-        description: `Add ${digit} earth bead${digit > 1 ? "s" : ""} at place ${placeValue}`,
+        description: `Add ${digit} earth bead${digit > 1 ? 's' : ''} at place ${placeValue}`,
         targetValue: 0, // Will be calculated later
         provenance: {
           ...baseProvenance,
@@ -954,19 +879,19 @@ function processDirectAddition(
           termPlaceName: getPlaceName(placeValue),
           termValue: digit * 10 ** placeValue,
         },
-      });
+      })
       newState[placeValue] = {
         ...placeState,
         earthActive: L + digit,
-      };
+      }
     } else if (!placeState.heavenActive) {
       // Use 5's complement: digit = (5 - (5 - digit)) when pedagogically valuable
-      const complement = 5 - digit;
-      const groupId = `5comp-${baseProvenance.rhsPlace}-${baseProvenance.rhsDigit}`;
+      const complement = 5 - digit
+      const groupId = `5comp-${baseProvenance.rhsPlace}-${baseProvenance.rhsDigit}`
 
       // Always show five-complement pedagogy as separate steps
-      const fiveValue = 5 * 10 ** placeValue;
-      const subtractValue = complement * 10 ** placeValue;
+      const fiveValue = 5 * 10 ** placeValue
+      const subtractValue = complement * 10 ** placeValue
 
       steps.push({
         operation: fiveValue.toString(),
@@ -979,7 +904,7 @@ function processDirectAddition(
           termPlaceName: getPlaceName(placeValue),
           termValue: fiveValue,
         },
-      });
+      })
 
       steps.push({
         operation: `-${subtractValue}`,
@@ -992,19 +917,19 @@ function processDirectAddition(
           termPlaceName: getPlaceName(placeValue),
           termValue: -subtractValue,
         },
-      });
+      })
 
       newState[placeValue] = {
         heavenActive: true,
         earthActive: placeState.earthActive - complement,
-      };
+      }
     }
   } else {
     // For digits 5-9: always fits under Case A assumption (a + d ≤ 9)
     // Activate heaven bead and add remainder earth beads
-    const earthBeadsNeeded = digit - 5;
-    const fiveValue = 5 * 10 ** placeValue;
-    const remainderValue = earthBeadsNeeded * 10 ** placeValue;
+    const earthBeadsNeeded = digit - 5
+    const fiveValue = 5 * 10 ** placeValue
+    const remainderValue = earthBeadsNeeded * 10 ** placeValue
 
     steps.push({
       operation: fiveValue.toString(),
@@ -1016,7 +941,7 @@ function processDirectAddition(
         termPlaceName: getPlaceName(placeValue),
         termValue: fiveValue,
       },
-    });
+    })
 
     if (earthBeadsNeeded > 0) {
       steps.push({
@@ -1029,20 +954,20 @@ function processDirectAddition(
           termPlaceName: getPlaceName(placeValue),
           termValue: remainderValue,
         },
-      });
+      })
     }
 
     newState[placeValue] = {
       heavenActive: true,
       earthActive: placeState.earthActive + earthBeadsNeeded,
-    };
+    }
   }
 
   // Calculate new total value
-  const _currentValue = abacusStateToNumber(currentState);
-  const newValue = abacusStateToNumber(newState);
+  const _currentValue = abacusStateToNumber(currentState)
+  const newValue = abacusStateToNumber(newState)
 
-  return { steps, newValue, newState };
+  return { steps, newValue, newState }
 }
 
 /**
@@ -1053,17 +978,17 @@ function processTensComplement(
   placeValue: number,
   currentState: AbacusState,
   toState: (n: number) => AbacusState,
-  baseProvenance: TermProvenance,
+  baseProvenance: TermProvenance
 ): { steps: DecompositionStep[]; newValue: number; newState: AbacusState } {
-  const steps: DecompositionStep[] = [];
-  const complementToSubtract = 10 - digit;
-  const currentValue = abacusStateToNumber(currentState);
+  const steps: DecompositionStep[] = []
+  const complementToSubtract = 10 - digit
+  const currentValue = abacusStateToNumber(currentState)
 
   // Check if this requires cascading (next place is 9)
-  const nextPlaceDigit = getDigitAtPlace(currentValue, placeValue + 1);
-  const requiresCascading = nextPlaceDigit === 9;
+  const nextPlaceDigit = getDigitAtPlace(currentValue, placeValue + 1)
+  const requiresCascading = nextPlaceDigit === 9
 
-  const groupId = `10comp-${baseProvenance.rhsPlace}-${baseProvenance.rhsDigit}`;
+  const groupId = `10comp-${baseProvenance.rhsPlace}-${baseProvenance.rhsDigit}`
 
   if (requiresCascading) {
     // Generate cascading complement terms in parenthesized format
@@ -1072,13 +997,13 @@ function processTensComplement(
       placeValue,
       complementToSubtract,
       baseProvenance,
-      groupId,
-    );
-    steps.push(...cascadeSteps);
+      groupId
+    )
+    steps.push(...cascadeSteps)
   } else {
     // Simple ten-complement: generate separate add/subtract steps
-    const higherPlaceValue = 10 ** (placeValue + 1);
-    const subtractValue = complementToSubtract * 10 ** placeValue;
+    const higherPlaceValue = 10 ** (placeValue + 1)
+    const subtractValue = complementToSubtract * 10 ** placeValue
 
     steps.push({
       operation: higherPlaceValue.toString(),
@@ -1091,7 +1016,7 @@ function processTensComplement(
         termPlaceName: getPlaceName(placeValue + 1),
         termValue: higherPlaceValue,
       },
-    });
+    })
 
     steps.push({
       operation: `-${subtractValue}`,
@@ -1104,17 +1029,17 @@ function processTensComplement(
         termPlaceName: getPlaceName(placeValue),
         termValue: -subtractValue,
       },
-    });
+    })
   }
 
   // Calculate new value mathematically
-  const newValue = currentValue + digit * 10 ** placeValue;
+  const newValue = currentValue + digit * 10 ** placeValue
 
   return {
     steps,
     newValue,
     newState: toState(newValue),
-  };
+  }
 }
 
 /**
@@ -1125,23 +1050,19 @@ function generateCascadeComplementSteps(
   startPlace: number,
   onesComplement: number,
   baseProvenance: TermProvenance,
-  groupId: string,
+  groupId: string
 ): DecompositionStep[] {
-  const steps: DecompositionStep[] = [];
+  const steps: DecompositionStep[] = []
 
   // First, add to the highest non-9 place
-  let checkPlace = startPlace + 1;
-  const maxCheck =
-    Math.max(1, Math.floor(Math.log10(Math.max(1, currentValue))) + 1) + 2;
-  while (
-    getDigitAtPlace(currentValue, checkPlace) === 9 &&
-    checkPlace <= maxCheck
-  ) {
-    checkPlace += 1;
+  let checkPlace = startPlace + 1
+  const maxCheck = Math.max(1, Math.floor(Math.log10(Math.max(1, currentValue))) + 1) + 2
+  while (getDigitAtPlace(currentValue, checkPlace) === 9 && checkPlace <= maxCheck) {
+    checkPlace += 1
   }
 
   // Add 1 to the highest place (this creates the cascade)
-  const higherPlaceValue = 10 ** checkPlace;
+  const higherPlaceValue = 10 ** checkPlace
   steps.push({
     operation: higherPlaceValue.toString(),
     description: `Add 1 to ${getPlaceName(checkPlace)} (cascade trigger)`,
@@ -1153,13 +1074,13 @@ function generateCascadeComplementSteps(
       termPlaceName: getPlaceName(checkPlace),
       termValue: higherPlaceValue,
     },
-  });
+  })
 
   // Clear all the 9s in between (working downward)
   for (let clearPlace = checkPlace - 1; clearPlace > startPlace; clearPlace--) {
-    const digitAtClearPlace = getDigitAtPlace(currentValue, clearPlace);
+    const digitAtClearPlace = getDigitAtPlace(currentValue, clearPlace)
     if (digitAtClearPlace === 9) {
-      const clearValue = 9 * 10 ** clearPlace;
+      const clearValue = 9 * 10 ** clearPlace
       steps.push({
         operation: `-${clearValue}`,
         description: `Remove 9 from ${getPlaceName(clearPlace)} (cascade)`,
@@ -1171,12 +1092,12 @@ function generateCascadeComplementSteps(
           termPlaceName: getPlaceName(clearPlace),
           termValue: -clearValue,
         },
-      });
+      })
     }
   }
 
   // Finally, subtract at the original place
-  const onesSubtractValue = onesComplement * 10 ** startPlace;
+  const onesSubtractValue = onesComplement * 10 ** startPlace
   steps.push({
     operation: `-${onesSubtractValue}`,
     description: `Remove ${onesComplement} earth beads (ten's complement)`,
@@ -1188,9 +1109,9 @@ function generateCascadeComplementSteps(
       termPlaceName: getPlaceName(startPlace),
       termValue: -onesSubtractValue,
     },
-  });
+  })
 
-  return steps;
+  return steps
 }
 
 /**
@@ -1199,90 +1120,88 @@ function generateCascadeComplementSteps(
 function generateInstructionFromTerm(
   term: string,
   _stepIndex: number,
-  isComplementContext: boolean = false,
+  isComplementContext: boolean = false
 ): string {
   // Parse the term to determine what instruction to give
 
   // Handle negative numbers FIRST
-  if (term.startsWith("-")) {
-    const value = parseInt(term.substring(1), 10);
+  if (term.startsWith('-')) {
+    const value = parseInt(term.substring(1), 10)
     if (value <= 4) {
-      return `remove ${value} earth bead${value > 1 ? "s" : ""} in ones column`;
+      return `remove ${value} earth bead${value > 1 ? 's' : ''} in ones column`
     } else if (value === 5) {
-      return "deactivate heaven bead";
+      return 'deactivate heaven bead'
     } else if (value >= 6 && value <= 9) {
-      const e = value - 5;
-      return `deactivate heaven bead and remove ${e} earth bead${e > 1 ? "s" : ""} in ones column`;
+      const e = value - 5
+      return `deactivate heaven bead and remove ${e} earth bead${e > 1 ? 's' : ''} in ones column`
     } else if (isPowerOfTenGE10(value)) {
-      const place = Math.round(Math.log10(value));
-      return `remove 1 from ${getPlaceName(place)}`;
+      const place = Math.round(Math.log10(value))
+      return `remove 1 from ${getPlaceName(place)}`
     } else if (value >= 10 && !isPowerOfTenGE10(value)) {
-      const place = Math.floor(Math.log10(value));
-      const digit = Math.floor(value / 10 ** place);
-      if (digit === 5)
-        return `deactivate heaven bead in ${getPlaceName(place)} column`;
+      const place = Math.floor(Math.log10(value))
+      const digit = Math.floor(value / 10 ** place)
+      if (digit === 5) return `deactivate heaven bead in ${getPlaceName(place)} column`
       if (digit > 5)
-        return `deactivate heaven bead and remove ${digit - 5} earth beads in ${getPlaceName(place)} column`;
+        return `deactivate heaven bead and remove ${digit - 5} earth beads in ${getPlaceName(place)} column`
       // (digit 6..9 handled above; digit 1..4 would be rare here)
-      return `remove ${digit} from ${getPlaceName(place)}`;
+      return `remove ${digit} from ${getPlaceName(place)}`
     }
   }
 
   // Handle simple positive numbers
-  const value = parseInt(term, 10);
+  const value = parseInt(term, 10)
   if (!Number.isNaN(value) && value > 0) {
     if (value === 5) {
-      return isComplementContext ? "add 5" : "activate heaven bead";
+      return isComplementContext ? 'add 5' : 'activate heaven bead'
     } else if (value <= 4) {
-      return `add ${value} earth bead${value > 1 ? "s" : ""} in ones column`;
+      return `add ${value} earth bead${value > 1 ? 's' : ''} in ones column`
     } else if (value >= 6 && value <= 9) {
-      const earthBeads = value - 5;
-      return `activate heaven bead and add ${earthBeads} earth beads in ones column`;
+      const earthBeads = value - 5
+      return `activate heaven bead and add ${earthBeads} earth beads in ones column`
     } else if (isPowerOfTenGE10(value)) {
-      const place = Math.round(Math.log10(value));
-      return `add 1 to ${getPlaceName(place)}`;
+      const place = Math.round(Math.log10(value))
+      return `add 1 to ${getPlaceName(place)}`
     } else if (value >= 10 && !isPowerOfTenGE10(value)) {
-      const place = Math.floor(Math.log10(value));
-      const digit = Math.floor(value / 10 ** place);
-      if (digit === 5)
-        return `activate heaven bead in ${getPlaceName(place)} column`;
+      const place = Math.floor(Math.log10(value))
+      const digit = Math.floor(value / 10 ** place)
+      if (digit === 5) return `activate heaven bead in ${getPlaceName(place)} column`
       if (digit > 5)
-        return `activate heaven bead and add ${digit - 5} earth beads in ${getPlaceName(place)} column`;
-      return `add ${digit} to ${getPlaceName(place)}`;
+        return `activate heaven bead and add ${digit - 5} earth beads in ${getPlaceName(place)} column`
+      return `add ${digit} to ${getPlaceName(place)}`
     }
   }
 
-  return `perform operation: ${term}`;
+  return `perform operation: ${term}`
 }
 
 function getPlaceName(place: number): string {
   const names = [
-    "ones",
-    "tens",
-    "hundreds",
-    "thousands",
-    "ten-thousands",
-    "hundred-thousands",
-    "millions",
-  ];
-  return names[place] ?? `${place} place`;
+    'ones',
+    'tens',
+    'hundreds',
+    'thousands',
+    'ten-thousands',
+    'hundred-thousands',
+    'millions',
+  ]
+  return names[place] ?? `${place} place`
 }
 
 /**
  * Helper functions
  */
 function getDigitAtPlace(value: number, placeValue: number): number {
-  return Math.floor(value / 10 ** placeValue) % 10;
+  return Math.floor(value / 10 ** placeValue) % 10
 }
 
 function abacusStateToNumber(state: AbacusState): number {
-  let total = 0;
+  let total = 0
   Object.entries(state).forEach(([place, beadState]) => {
-    const placeNum = parseInt(place, 10);
-    const placeValue = (beadState.heavenActive ? 5 : 0) + beadState.earthActive;
-    total += placeValue * 10 ** placeNum;
-  });
-  return total;
+    const placeNum = parseInt(place, 10)
+    const placeValue = (beadState.heavenActive ? 5 : 0) + beadState.earthActive
+    total += placeValue * 10 ** placeNum
+  })
+  return total
 }
 
 /**
@@ -1290,37 +1209,37 @@ function abacusStateToNumber(state: AbacusState): number {
  */
 function calculateStepResult(
   currentValue: number,
-  term: string,
+  term: string
 ): {
-  newValue: number;
-  operation: "add" | "subtract";
-  addAmount?: number;
-  subtractAmount?: number;
+  newValue: number
+  operation: 'add' | 'subtract'
+  addAmount?: number
+  subtractAmount?: number
 } {
   // Parse the term to understand the operation
-  if (term.startsWith("-")) {
+  if (term.startsWith('-')) {
     // Pure subtraction like "-6"
-    const amount = parseInt(term.substring(1), 10);
+    const amount = parseInt(term.substring(1), 10)
     return {
       newValue: currentValue - amount,
-      operation: "subtract",
+      operation: 'subtract',
       subtractAmount: amount,
-    };
+    }
   } else {
     // Pure addition like "10"
-    const amount = parseInt(term, 10);
+    const amount = parseInt(term, 10)
     return {
       newValue: currentValue + amount,
-      operation: "add",
+      operation: 'add',
       addAmount: amount,
-    };
+    }
   }
 
   // Fallback
   return {
     newValue: currentValue,
-    operation: "add",
-  };
+    operation: 'add',
+  }
 }
 
 /**
@@ -1329,46 +1248,46 @@ function calculateStepResult(
 function calculateStepBeadMovements(
   fromState: AbacusState,
   toState: AbacusState,
-  stepIndex: number,
+  stepIndex: number
 ): StepBeadHighlight[] {
-  const { additions, removals } = calculateBeadChanges(fromState, toState);
-  const movements: StepBeadHighlight[] = [];
+  const { additions, removals } = calculateBeadChanges(fromState, toState)
+  const movements: StepBeadHighlight[] = []
 
   // Convert additions to step bead movements
   additions.forEach((bead, index) => {
     movements.push({
       ...bead,
       stepIndex,
-      direction: "activate",
+      direction: 'activate',
       order: index,
-    });
-  });
+    })
+  })
 
   // Convert removals to step bead movements
   removals.forEach((bead, index) => {
     movements.push({
       ...bead,
       stepIndex,
-      direction: "deactivate",
+      direction: 'deactivate',
       order: additions.length + index,
-    });
-  });
+    })
+  })
 
   // Stabilize movement ordering for consistent UI animations
   // Priority: higher place → heaven beads → activations first
   movements.sort((a, b) => {
-    if (a.placeValue !== b.placeValue) return b.placeValue - a.placeValue;
-    if (a.beadType !== b.beadType) return a.beadType === "heaven" ? -1 : 1;
-    if (a.direction !== b.direction) return a.direction === "activate" ? -1 : 1;
-    return 0;
-  });
+    if (a.placeValue !== b.placeValue) return b.placeValue - a.placeValue
+    if (a.beadType !== b.beadType) return a.beadType === 'heaven' ? -1 : 1
+    if (a.direction !== b.direction) return a.direction === 'activate' ? -1 : 1
+    return 0
+  })
 
   // Reassign order indices after sorting
   movements.forEach((movement, index) => {
-    movement.order = index;
-  });
+    movement.order = index
+  })
 
-  return movements;
+  return movements
 }
 
 /**
@@ -1377,65 +1296,57 @@ function calculateStepBeadMovements(
 function generateStepInstruction(
   beadMovements: StepBeadHighlight[],
   _mathematicalTerm: string,
-  _stepResult: any,
+  _stepResult: any
 ): string {
   if (beadMovements.length === 0) {
-    return "No bead movements required";
+    return 'No bead movements required'
   }
 
   // Group by place and direction
   const byPlace: {
     [place: number]: {
-      adds: StepBeadHighlight[];
-      removes: StepBeadHighlight[];
-    };
-  } = {};
+      adds: StepBeadHighlight[]
+      removes: StepBeadHighlight[]
+    }
+  } = {}
 
   beadMovements.forEach((bead) => {
     if (!byPlace[bead.placeValue]) {
-      byPlace[bead.placeValue] = { adds: [], removes: [] };
+      byPlace[bead.placeValue] = { adds: [], removes: [] }
     }
 
-    if (bead.direction === "activate") {
-      byPlace[bead.placeValue].adds.push(bead);
+    if (bead.direction === 'activate') {
+      byPlace[bead.placeValue].adds.push(bead)
     } else {
-      byPlace[bead.placeValue].removes.push(bead);
+      byPlace[bead.placeValue].removes.push(bead)
     }
-  });
+  })
 
   // Generate instruction for each place
-  const instructions: string[] = [];
+  const instructions: string[] = []
 
   Object.keys(byPlace)
     .map((p) => parseInt(p, 10))
     .sort((a, b) => b - a) // Pedagogical order: highest place first
     .forEach((place) => {
-      const placeName = getPlaceName(place);
+      const placeName = getPlaceName(place)
 
-      const placeData = byPlace[place];
+      const placeData = byPlace[place]
 
       // Handle additions
       if (placeData.adds.length > 0) {
-        const instruction = generatePlaceInstruction(
-          placeData.adds,
-          "add",
-          placeName,
-        );
-        instructions.push(instruction);
+        const instruction = generatePlaceInstruction(placeData.adds, 'add', placeName)
+        instructions.push(instruction)
       }
 
       // Handle removals
       if (placeData.removes.length > 0) {
-        const instruction = generatePlaceInstruction(
-          placeData.removes,
-          "remove",
-          placeName,
-        );
-        instructions.push(instruction);
+        const instruction = generatePlaceInstruction(placeData.removes, 'remove', placeName)
+        instructions.push(instruction)
       }
-    });
+    })
 
-  return instructions.join(", then ");
+  return instructions.join(', then ')
 }
 
 /**
@@ -1443,30 +1354,30 @@ function generateStepInstruction(
  */
 function generatePlaceInstruction(
   beads: StepBeadHighlight[],
-  action: "add" | "remove",
-  placeName: string,
+  action: 'add' | 'remove',
+  placeName: string
 ): string {
-  const heavenBeads = beads.filter((b) => b.beadType === "heaven");
-  const earthBeads = beads.filter((b) => b.beadType === "earth");
+  const heavenBeads = beads.filter((b) => b.beadType === 'heaven')
+  const earthBeads = beads.filter((b) => b.beadType === 'earth')
 
-  const parts: string[] = [];
+  const parts: string[] = []
 
   if (heavenBeads.length > 0) {
     parts.push(
-      action === "add"
+      action === 'add'
         ? `activate heaven bead in ${placeName} column`
-        : `deactivate heaven bead in ${placeName} column`,
-    );
+        : `deactivate heaven bead in ${placeName} column`
+    )
   }
 
   if (earthBeads.length > 0) {
-    const verb = action === "add" ? "add" : "remove";
-    const count = earthBeads.length;
-    const beadText = count === 1 ? "earth bead" : `${count} earth beads`;
-    parts.push(`${verb} ${beadText} in ${placeName} column`);
+    const verb = action === 'add' ? 'add' : 'remove'
+    const count = earthBeads.length
+    const beadText = count === 1 ? 'earth bead' : `${count} earth beads`
+    parts.push(`${verb} ${beadText} in ${placeName} column`)
   }
 
-  return parts.join(" and ");
+  return parts.join(' and ')
 }
 
 /**
@@ -1478,100 +1389,94 @@ function validateStepConsistency(
   startValue: number,
   expectedValue: number,
   beadMovements: StepBeadHighlight[],
-  toState: (n: number) => AbacusState,
+  toState: (n: number) => AbacusState
 ): { isValid: boolean; issues: string[] } {
-  const issues: string[] = [];
+  const issues: string[] = []
 
   // Validate that bead movements produce the expected value
-  const startState = toState(startValue);
-  const expectedState = toState(expectedValue);
+  const startState = toState(startValue)
+  const expectedState = toState(expectedValue)
 
   // Apply bead movements to start state
-  const simulatedState = { ...startState };
+  const simulatedState = { ...startState }
   beadMovements.forEach((movement) => {
     // Ensure place exists before mutating
     if (!simulatedState[movement.placeValue]) {
       simulatedState[movement.placeValue] = {
         heavenActive: false,
         earthActive: 0,
-      };
+      }
     }
-    if (movement.direction === "activate") {
-      if (movement.beadType === "heaven") {
-        simulatedState[movement.placeValue].heavenActive = true;
+    if (movement.direction === 'activate') {
+      if (movement.beadType === 'heaven') {
+        simulatedState[movement.placeValue].heavenActive = true
       } else {
-        simulatedState[movement.placeValue].earthActive++;
+        simulatedState[movement.placeValue].earthActive++
       }
     } else {
-      if (movement.beadType === "heaven") {
-        simulatedState[movement.placeValue].heavenActive = false;
+      if (movement.beadType === 'heaven') {
+        simulatedState[movement.placeValue].heavenActive = false
       } else {
-        simulatedState[movement.placeValue].earthActive--;
+        simulatedState[movement.placeValue].earthActive--
       }
     }
-  });
+  })
 
   // Validate bead ranges after applying movements
   for (const place in simulatedState) {
-    const placeNum = parseInt(place, 10);
-    const state = simulatedState[placeNum];
+    const placeNum = parseInt(place, 10)
+    const state = simulatedState[placeNum]
 
     if (state.earthActive < 0 || state.earthActive > 4) {
-      issues.push(
-        `Place ${place}: earth beads out of range (${state.earthActive})`,
-      );
+      issues.push(`Place ${place}: earth beads out of range (${state.earthActive})`)
     }
 
-    if (typeof state.heavenActive !== "boolean") {
-      issues.push(
-        `Place ${place}: heaven bead state invalid (${state.heavenActive})`,
-      );
+    if (typeof state.heavenActive !== 'boolean') {
+      issues.push(`Place ${place}: heaven bead state invalid (${state.heavenActive})`)
     }
   }
 
   // Check if simulated state matches expected state
   for (const place in expectedState) {
-    const placeNum = parseInt(place, 10);
-    const expected = expectedState[placeNum];
-    const simulated = simulatedState[placeNum];
+    const placeNum = parseInt(place, 10)
+    const expected = expectedState[placeNum]
+    const simulated = simulatedState[placeNum]
 
     if (!simulated) {
-      issues.push(`Place ${place}: missing in simulated state`);
-      continue;
+      issues.push(`Place ${place}: missing in simulated state`)
+      continue
     }
 
     if (expected.heavenActive !== simulated.heavenActive) {
-      issues.push(`Place ${place}: heaven bead mismatch`);
+      issues.push(`Place ${place}: heaven bead mismatch`)
     }
 
     if (expected.earthActive !== simulated.earthActive) {
-      issues.push(`Place ${place}: earth bead count mismatch`);
+      issues.push(`Place ${place}: earth bead count mismatch`)
     }
   }
 
   // Check for extra places in simulated state that shouldn't exist
   for (const place in simulatedState) {
     if (!(place in expectedState)) {
-      const placeNum = parseInt(place, 10);
-      const s = simulatedState[placeNum];
+      const placeNum = parseInt(place, 10)
+      const s = simulatedState[placeNum]
       if (s.heavenActive || s.earthActive > 0) {
-        issues.push(`Place ${place}: unexpected nonzero state in simulation`);
+        issues.push(`Place ${place}: unexpected nonzero state in simulation`)
       }
     }
   }
 
   // Final numeric equivalence check
-  const simulatedValue = abacusStateToNumber(simulatedState);
+  const simulatedValue = abacusStateToNumber(simulatedState)
   if (simulatedValue !== expectedValue) {
-    issues.push(
-      `Numeric mismatch: simulated=${simulatedValue}, expected=${expectedValue}`,
-    );
+    issues.push(`Numeric mismatch: simulated=${simulatedValue}, expected=${expectedValue}`)
   }
 
   return {
     isValid: issues.length === 0,
     issues,
-  };
+  }
 }
 
 /**
@@ -1580,183 +1485,174 @@ function validateStepConsistency(
 export function buildFullDecompositionWithPositions(
   startValue: number,
   targetValue: number,
-  terms: string[],
+  terms: string[]
 ): {
-  fullDecomposition: string;
-  termPositions: Array<{ startIndex: number; endIndex: number }>;
+  fullDecomposition: string
+  termPositions: Array<{ startIndex: number; endIndex: number }>
 } {
-  const difference = targetValue - startValue;
+  const difference = targetValue - startValue
 
   // Handle zero difference special case
   if (difference === 0) {
     return {
       fullDecomposition: `${startValue} + 0 = ${targetValue}`,
       termPositions: [],
-    };
+    }
   }
 
   // Group consecutive complement terms into segments
   const segments: Array<{
-    terms: string[];
-    isComplement: boolean;
-  }> = [];
+    terms: string[]
+    isComplement: boolean
+  }> = []
 
-  let i = 0;
+  let i = 0
   while (i < terms.length) {
-    const currentTerm = terms[i];
+    const currentTerm = terms[i]
 
     // Check if this starts a complement sequence (positive term followed by negative(s))
-    if (
-      i + 1 < terms.length &&
-      !currentTerm.startsWith("-") &&
-      terms[i + 1].startsWith("-")
-    ) {
+    if (i + 1 < terms.length && !currentTerm.startsWith('-') && terms[i + 1].startsWith('-')) {
       // Collect all consecutive negative terms after this positive term
-      const complementTerms = [currentTerm];
-      let j = i + 1;
-      while (j < terms.length && terms[j].startsWith("-")) {
-        complementTerms.push(terms[j]);
-        j++;
+      const complementTerms = [currentTerm]
+      let j = i + 1
+      while (j < terms.length && terms[j].startsWith('-')) {
+        complementTerms.push(terms[j])
+        j++
       }
 
       segments.push({
         terms: complementTerms,
         isComplement: true,
-      });
-      i = j; // Jump past all consumed terms
+      })
+      i = j // Jump past all consumed terms
     } else {
       // Single term (not part of complement)
       segments.push({
         terms: [currentTerm],
         isComplement: false,
-      });
-      i++;
+      })
+      i++
     }
   }
 
   // Build decomposition string with proper segment formatting
-  let termString = "";
-  const termPositions: Array<{ startIndex: number; endIndex: number }> = [];
+  let termString = ''
+  const termPositions: Array<{ startIndex: number; endIndex: number }> = []
 
   segments.forEach((segment, segmentIndex) => {
     if (segment.isComplement) {
       // Format as parenthesized complement: (10 - 3) or (1000 - 900 - 90 - 2)
-      const positiveStr = segment.terms[0];
-      const negativeStrs = segment.terms.slice(1).map((t) => t.substring(1)); // Remove - signs
+      const positiveStr = segment.terms[0]
+      const negativeStrs = segment.terms.slice(1).map((t) => t.substring(1)) // Remove - signs
 
-      const segmentStr = `(${positiveStr} - ${negativeStrs.join(" - ")})`;
+      const segmentStr = `(${positiveStr} - ${negativeStrs.join(' - ')})`
 
       if (segmentIndex === 0) {
-        termString = segmentStr;
+        termString = segmentStr
       } else {
-        termString += ` + ${segmentStr}`;
+        termString += ` + ${segmentStr}`
       }
     } else {
       // Single term
-      const term = segment.terms[0];
+      const term = segment.terms[0]
       if (segmentIndex === 0) {
-        termString = term;
-      } else if (term.startsWith("-")) {
-        termString += ` ${term}`; // Keep negative sign
+        termString = term
+      } else if (term.startsWith('-')) {
+        termString += ` ${term}` // Keep negative sign
       } else {
-        termString += ` + ${term}`;
+        termString += ` + ${term}`
       }
     }
-  });
+  })
 
   // Build full decomposition
-  const leftSide = `${startValue} + ${difference} = ${startValue} + `;
-  const rightSide = ` = ${targetValue}`;
-  const fullDecomposition = leftSide + termString + rightSide;
+  const leftSide = `${startValue} + ${difference} = ${startValue} + `
+  const rightSide = ` = ${targetValue}`
+  const fullDecomposition = leftSide + termString + rightSide
 
   // Calculate precise positions for each original term
-  let currentPos = leftSide.length;
-  let segmentTermIndex = 0;
+  let currentPos = leftSide.length
+  let segmentTermIndex = 0
 
   segments.forEach((segment, segmentIndex) => {
     if (segment.isComplement) {
       // Account for " + " delimiter before complement segments (except first)
       if (segmentIndex > 0) {
-        currentPos += 3; // Skip " + "
+        currentPos += 3 // Skip " + "
       }
 
       // Position within parenthesized complement
-      currentPos += 1; // Skip opening '('
+      currentPos += 1 // Skip opening '('
 
       segment.terms.forEach((term, termInSegmentIndex) => {
-        const startIndex = currentPos;
+        const startIndex = currentPos
 
         if (termInSegmentIndex === 0) {
           // Positive term
           termPositions[segmentTermIndex] = {
             startIndex,
             endIndex: startIndex + term.length,
-          };
-          currentPos += term.length;
+          }
+          currentPos += term.length
         } else {
           // Negative term (but we position on just the number part)
-          currentPos += 3; // Skip ' - '
-          const numberStr = term.substring(1); // Remove '-'
+          currentPos += 3 // Skip ' - '
+          const numberStr = term.substring(1) // Remove '-'
           termPositions[segmentTermIndex] = {
             startIndex: currentPos,
             endIndex: currentPos + numberStr.length,
-          };
-          currentPos += numberStr.length;
+          }
+          currentPos += numberStr.length
         }
-        segmentTermIndex++;
-      });
+        segmentTermIndex++
+      })
 
-      currentPos += 1; // Skip closing ')'
+      currentPos += 1 // Skip closing ')'
     } else {
       // Single term segment
-      const term = segment.terms[0];
+      const term = segment.terms[0]
 
       if (segmentIndex > 0) {
-        if (term.startsWith("-")) {
-          currentPos += 1; // Skip ' ' before negative
+        if (term.startsWith('-')) {
+          currentPos += 1 // Skip ' ' before negative
         } else {
-          currentPos += 3; // Skip ' + '
+          currentPos += 3 // Skip ' + '
         }
       }
 
-      const isNegative = term.startsWith("-");
-      const startIndex = isNegative ? currentPos + 1 : currentPos; // skip the '−' for mapping
-      const endIndex = isNegative
-        ? startIndex + (term.length - 1)
-        : startIndex + term.length;
-      termPositions[segmentTermIndex] = { startIndex, endIndex };
-      currentPos += term.length; // actual text includes the '−'
-      segmentTermIndex++;
+      const isNegative = term.startsWith('-')
+      const startIndex = isNegative ? currentPos + 1 : currentPos // skip the '−' for mapping
+      const endIndex = isNegative ? startIndex + (term.length - 1) : startIndex + term.length
+      termPositions[segmentTermIndex] = { startIndex, endIndex }
+      currentPos += term.length // actual text includes the '−'
+      segmentTermIndex++
     }
-  });
+  })
 
-  return { fullDecomposition, termPositions };
+  return { fullDecomposition, termPositions }
 }
 
 function assertSegments(seq: UnifiedInstructionSequence) {
   // 1) Every step that has a segmentId belongs to a segment that includes it
-  const byId = new Map(seq.segments.map((s) => [s.id, s]));
+  const byId = new Map(seq.segments.map((s) => [s.id, s]))
   seq.steps.forEach((st, i) => {
-    if (!st.segmentId) return;
-    const seg = byId.get(st.segmentId);
-    if (!seg)
-      throw new Error(`step[${i}] has unknown segmentId ${st.segmentId}`);
+    if (!st.segmentId) return
+    const seg = byId.get(st.segmentId)
+    if (!seg) throw new Error(`step[${i}] has unknown segmentId ${st.segmentId}`)
     if (!seg.stepIndices.includes(i)) {
-      throw new Error(
-        `step[${i}] not contained in its segment ${st.segmentId}`,
-      );
+      throw new Error(`step[${i}] not contained in its segment ${st.segmentId}`)
     }
-  });
+  })
 
   // 2) Segment ranges are contiguous and non-empty
   seq.segments.forEach((seg) => {
     if (seg.stepIndices.length === 0) {
-      throw new Error(`segment ${seg.id} has no steps`);
+      throw new Error(`segment ${seg.id} has no steps`)
     }
     if (seg.termRange.endIndex <= seg.termRange.startIndex) {
-      throw new Error(`segment ${seg.id} has empty term range`);
+      throw new Error(`segment ${seg.id} has empty term range`)
     }
-  });
+  })
 }
 
 /**
@@ -1765,22 +1661,22 @@ function assertSegments(seq: UnifiedInstructionSequence) {
 function buildEquationAnchors(
   startValue: number,
   targetValue: number,
-  fullDecomposition: string,
+  fullDecomposition: string
 ): EquationAnchors {
-  const addend = targetValue - startValue;
-  const addendText = addend.toString();
-  const expectedPrefix = `${startValue} + `;
+  const addend = targetValue - startValue
+  const addendText = addend.toString()
+  const expectedPrefix = `${startValue} + `
   // Addend starts immediately after "startValue + "
-  const startIndex = expectedPrefix.length;
+  const startIndex = expectedPrefix.length
 
   // Optional sanity check (no throw in prod)
-  if (process.env.NODE_ENV !== "production") {
-    const head = fullDecomposition.slice(0, startIndex + addendText.length);
+  if (process.env.NODE_ENV !== 'production') {
+    const head = fullDecomposition.slice(0, startIndex + addendText.length)
     if (head !== `${expectedPrefix}${addendText}`) {
       // fall back to a search if format changes
-      const idx = fullDecomposition.indexOf(`${expectedPrefix}${addendText}`);
+      const idx = fullDecomposition.indexOf(`${expectedPrefix}${addendText}`)
       if (idx !== -1) {
-        const start = idx + expectedPrefix.length;
+        const start = idx + expectedPrefix.length
         return {
           differenceText: Math.abs(addend).toString(),
           rhsDigitPositions: Array.from(addendText).map((_, i) => ({
@@ -1788,7 +1684,7 @@ function buildEquationAnchors(
             startIndex: start + i,
             endIndex: start + i + 1,
           })),
-        };
+        }
       }
     }
   }
@@ -1800,7 +1696,7 @@ function buildEquationAnchors(
       startIndex: startIndex + i,
       endIndex: startIndex + i + 1,
     })),
-  };
+  }
 }
 
 /**
@@ -1814,21 +1710,21 @@ function isDecompositionMeaningful(
   startValue: number,
   targetValue: number,
   decompositionTerms: string[],
-  fullDecomposition: string,
+  fullDecomposition: string
 ): boolean {
-  const difference = targetValue - startValue;
+  const difference = targetValue - startValue
 
   // No change = not meaningful
   if (difference === 0) {
-    return false;
+    return false
   }
 
   // Check if we have complement expressions (parentheses)
-  const hasComplementOperations = fullDecomposition.includes("(");
+  const hasComplementOperations = fullDecomposition.includes('(')
 
   // Complement operations are always meaningful (they show soroban technique)
   if (hasComplementOperations) {
-    return true;
+    return true
   }
 
   // Multiple terms without complements can be meaningful for multi-place operations
@@ -1836,38 +1732,32 @@ function isDecompositionMeaningful(
   if (decompositionTerms.length > 1) {
     // Check if it's a simple natural breakdown (like 5 + 1, 5 + 2, 5 + 3, 5 + 4)
     if (decompositionTerms.length === 2) {
-      const [first, second] = decompositionTerms;
-      if (
-        first === "5" &&
-        parseInt(second, 10) >= 1 &&
-        parseInt(second, 10) <= 4
-      ) {
-        return false; // Natural soroban representation, not pedagogically meaningful
+      const [first, second] = decompositionTerms
+      if (first === '5' && parseInt(second, 10) >= 1 && parseInt(second, 10) <= 4) {
+        return false // Natural soroban representation, not pedagogically meaningful
       }
     }
-    return true;
+    return true
   }
 
   // Single term that equals the difference = not meaningful (redundant)
   if (decompositionTerms.length === 1) {
-    const term = decompositionTerms[0];
+    const term = decompositionTerms[0]
     if (term === Math.abs(difference).toString()) {
-      return false;
+      return false
     }
   }
 
   // For complex cases with multiple breakdowns, check if it's just restating
-  const decompositionPart = fullDecomposition.split(" = ")[1]?.split(" = ")[0];
+  const decompositionPart = fullDecomposition.split(' = ')[1]?.split(' = ')[0]
   if (decompositionPart) {
     // If the middle part is just the same as "start + difference", it's redundant
-    const simplePattern = `${startValue} + ${Math.abs(difference)}`;
-    if (
-      decompositionPart.replace(/\s/g, "") === simplePattern.replace(/\s/g, "")
-    ) {
-      return false;
+    const simplePattern = `${startValue} + ${Math.abs(difference)}`
+    if (decompositionPart.replace(/\s/g, '') === simplePattern.replace(/\s/g, '')) {
+      return false
     }
   }
 
   // Default to meaningful
-  return true;
+  return true
 }
diff --git a/apps/web/src/workers/openscad.worker.ts b/apps/web/src/workers/openscad.worker.ts
index 51fa85a5..1a08a049 100644
--- a/apps/web/src/workers/openscad.worker.ts
+++ b/apps/web/src/workers/openscad.worker.ts
@@ -1,109 +1,98 @@
 /// <reference lib="webworker" />
 
-import { createOpenSCAD } from "openscad-wasm-prebuilt";
+import { createOpenSCAD } from 'openscad-wasm-prebuilt'
 
-declare const self: DedicatedWorkerGlobalScope;
+declare const self: DedicatedWorkerGlobalScope
 
-let openscad: Awaited<ReturnType<typeof createOpenSCAD>> | null = null;
-let simplifiedStlData: ArrayBuffer | null = null;
-let isInitializing = false;
-let initPromise: Promise<void> | null = null;
+let openscad: Awaited<ReturnType<typeof createOpenSCAD>> | null = null
+let simplifiedStlData: ArrayBuffer | null = null
+let isInitializing = false
+let initPromise: Promise<void> | null = null
 
 // Message types
 interface RenderRequest {
-  type: "render";
-  columns: number;
-  scaleFactor: number;
+  type: 'render'
+  columns: number
+  scaleFactor: number
 }
 
 interface InitRequest {
-  type: "init";
+  type: 'init'
 }
 
-type WorkerRequest = RenderRequest | InitRequest;
+type WorkerRequest = RenderRequest | InitRequest
 
 // Initialize OpenSCAD instance and load base STL file
 async function initialize() {
-  if (openscad) return; // Already initialized
-  if (isInitializing) return initPromise; // Already initializing, return existing promise
+  if (openscad) return // Already initialized
+  if (isInitializing) return initPromise // Already initializing, return existing promise
 
-  isInitializing = true;
+  isInitializing = true
   initPromise = (async () => {
     try {
-      console.log("[OpenSCAD Worker] Initializing...");
+      console.log('[OpenSCAD Worker] Initializing...')
 
       // Create OpenSCAD instance
-      openscad = await createOpenSCAD();
-      console.log("[OpenSCAD Worker] OpenSCAD WASM loaded");
+      openscad = await createOpenSCAD()
+      console.log('[OpenSCAD Worker] OpenSCAD WASM loaded')
 
       // Fetch the simplified STL file once
-      const stlResponse = await fetch("/3d-models/simplified.abacus.stl");
+      const stlResponse = await fetch('/3d-models/simplified.abacus.stl')
       if (!stlResponse.ok) {
-        throw new Error(`Failed to fetch STL: ${stlResponse.statusText}`);
+        throw new Error(`Failed to fetch STL: ${stlResponse.statusText}`)
       }
-      simplifiedStlData = await stlResponse.arrayBuffer();
-      console.log(
-        "[OpenSCAD Worker] Simplified STL loaded",
-        simplifiedStlData.byteLength,
-        "bytes",
-      );
+      simplifiedStlData = await stlResponse.arrayBuffer()
+      console.log('[OpenSCAD Worker] Simplified STL loaded', simplifiedStlData.byteLength, 'bytes')
 
-      self.postMessage({ type: "ready" });
+      self.postMessage({ type: 'ready' })
     } catch (error) {
-      console.error("[OpenSCAD Worker] Initialization failed:", error);
+      console.error('[OpenSCAD Worker] Initialization failed:', error)
       self.postMessage({
-        type: "error",
-        error: error instanceof Error ? error.message : "Initialization failed",
-      });
-      throw error;
+        type: 'error',
+        error: error instanceof Error ? error.message : 'Initialization failed',
+      })
+      throw error
     } finally {
-      isInitializing = false;
+      isInitializing = false
     }
-  })();
+  })()
 
-  return initPromise;
+  return initPromise
 }
 
 async function render(columns: number, scaleFactor: number) {
   // Wait for initialization if not ready
   if (!openscad || !simplifiedStlData) {
-    await initialize();
+    await initialize()
   }
 
   if (!openscad || !simplifiedStlData) {
-    throw new Error("Worker not initialized");
+    throw new Error('Worker not initialized')
   }
 
   try {
-    console.log(
-      `[OpenSCAD Worker] Rendering with columns=${columns}, scaleFactor=${scaleFactor}`,
-    );
+    console.log(`[OpenSCAD Worker] Rendering with columns=${columns}, scaleFactor=${scaleFactor}`)
 
     // Get low-level instance for filesystem access
-    const instance = openscad.getInstance();
+    const instance = openscad.getInstance()
 
     // Create directory if it doesn't exist
     try {
-      instance.FS.mkdir("/3d-models");
-      console.log("[OpenSCAD Worker] Created /3d-models directory");
+      instance.FS.mkdir('/3d-models')
+      console.log('[OpenSCAD Worker] Created /3d-models directory')
     } catch (e: any) {
       // Check if it's EEXIST (directory already exists) - errno 20
       if (e.errno === 20) {
-        console.log("[OpenSCAD Worker] /3d-models directory already exists");
+        console.log('[OpenSCAD Worker] /3d-models directory already exists')
       } else {
-        console.error("[OpenSCAD Worker] Failed to create directory:", e);
-        throw new Error(
-          `Failed to create /3d-models directory: ${e.message || e}`,
-        );
+        console.error('[OpenSCAD Worker] Failed to create directory:', e)
+        throw new Error(`Failed to create /3d-models directory: ${e.message || e}`)
       }
     }
 
     // Write STL file
-    instance.FS.writeFile(
-      "/3d-models/simplified.abacus.stl",
-      new Uint8Array(simplifiedStlData),
-    );
-    console.log("[OpenSCAD Worker] Wrote simplified STL to filesystem");
+    instance.FS.writeFile('/3d-models/simplified.abacus.stl', new Uint8Array(simplifiedStlData))
+    console.log('[OpenSCAD Worker] Wrote simplified STL to filesystem')
 
     // Generate the SCAD code with parameters
     const scadCode = `
@@ -145,80 +134,76 @@ scale([scale_factor, scale_factor, scale_factor]) {
     translate([column_spacing, 0, 0]) mirror([1,0,0]) half_abacus();
     half_abacus();
 }
-`;
+`
 
     // Use high-level renderToStl API
-    console.log("[OpenSCAD Worker] Calling renderToStl...");
-    const stlBuffer = await openscad.renderToStl(scadCode);
-    console.log(
-      "[OpenSCAD Worker] Rendering complete:",
-      stlBuffer.byteLength,
-      "bytes",
-    );
+    console.log('[OpenSCAD Worker] Calling renderToStl...')
+    const stlBuffer = await openscad.renderToStl(scadCode)
+    console.log('[OpenSCAD Worker] Rendering complete:', stlBuffer.byteLength, 'bytes')
 
     // Send the result back
     self.postMessage(
       {
-        type: "result",
+        type: 'result',
         stl: stlBuffer,
       },
-      [stlBuffer],
-    ); // Transfer ownership of the buffer
+      [stlBuffer]
+    ) // Transfer ownership of the buffer
 
     // Clean up STL file
     try {
-      instance.FS.unlink("/3d-models/simplified.abacus.stl");
+      instance.FS.unlink('/3d-models/simplified.abacus.stl')
     } catch (e) {
       // Ignore cleanup errors
     }
   } catch (error) {
-    console.error("[OpenSCAD Worker] Rendering failed:", error);
+    console.error('[OpenSCAD Worker] Rendering failed:', error)
 
     // Try to get more error details
-    let errorMessage = "Rendering failed";
+    let errorMessage = 'Rendering failed'
     if (error instanceof Error) {
-      errorMessage = error.message;
-      console.error("[OpenSCAD Worker] Error stack:", error.stack);
+      errorMessage = error.message
+      console.error('[OpenSCAD Worker] Error stack:', error.stack)
     }
 
     // Check if it's an Emscripten FS error
-    if (error && typeof error === "object" && "errno" in error) {
-      console.error("[OpenSCAD Worker] FS errno:", (error as any).errno);
-      console.error("[OpenSCAD Worker] FS error details:", error);
+    if (error && typeof error === 'object' && 'errno' in error) {
+      console.error('[OpenSCAD Worker] FS errno:', (error as any).errno)
+      console.error('[OpenSCAD Worker] FS error details:', error)
     }
 
     self.postMessage({
-      type: "error",
+      type: 'error',
       error: errorMessage,
-    });
+    })
   }
 }
 
 // Message handler
 self.onmessage = async (event: MessageEvent<WorkerRequest>) => {
-  const { data } = event;
+  const { data } = event
 
   try {
     switch (data.type) {
-      case "init":
-        await initialize();
-        break;
+      case 'init':
+        await initialize()
+        break
 
-      case "render":
-        await render(data.columns, data.scaleFactor);
-        break;
+      case 'render':
+        await render(data.columns, data.scaleFactor)
+        break
 
       default:
-        console.error("[OpenSCAD Worker] Unknown message type:", data);
+        console.error('[OpenSCAD Worker] Unknown message type:', data)
     }
   } catch (error) {
-    console.error("[OpenSCAD Worker] Message handler error:", error);
+    console.error('[OpenSCAD Worker] Message handler error:', error)
     self.postMessage({
-      type: "error",
-      error: error instanceof Error ? error.message : "Unknown error",
-    });
+      type: 'error',
+      error: error instanceof Error ? error.message : 'Unknown error',
+    })
   }
-};
+}
 
 // Auto-initialize on worker start
-initialize();
+initialize()
diff --git a/apps/web/svg-processing-test.js b/apps/web/svg-processing-test.js
index c03c2ef2..75df392f 100644
--- a/apps/web/svg-processing-test.js
+++ b/apps/web/svg-processing-test.js
@@ -3,110 +3,102 @@
 // Test script to verify SVG processing is working
 // This will test both browser-side and server-side processing
 
-const { generateSorobanSVG } = require("./src/lib/typst-soroban.ts");
+const { generateSorobanSVG } = require('./src/lib/typst-soroban.ts')
 
 async function testSVGProcessing() {
-  console.log("🧪 Testing SVG processing...\n");
+  console.log('🧪 Testing SVG processing...\n')
 
   // Test configuration
   const testConfig = {
     number: 23,
-    width: "120pt",
-    height: "160pt",
-    beadShape: "diamond",
-    colorScheme: "place-value",
+    width: '120pt',
+    height: '160pt',
+    beadShape: 'diamond',
+    colorScheme: 'place-value',
     hideInactiveBeads: false,
     enableServerFallback: false,
-  };
+  }
 
   try {
-    console.log("📋 Test Configuration:");
-    console.log(JSON.stringify(testConfig, null, 2));
-    console.log("\n🚀 Generating SVG...\n");
+    console.log('📋 Test Configuration:')
+    console.log(JSON.stringify(testConfig, null, 2))
+    console.log('\n🚀 Generating SVG...\n')
 
-    const svg = await generateSorobanSVG(testConfig);
+    const svg = await generateSorobanSVG(testConfig)
 
-    console.log("✅ SVG generated successfully!");
-    console.log(`📏 SVG length: ${svg.length} characters`);
+    console.log('✅ SVG generated successfully!')
+    console.log(`📏 SVG length: ${svg.length} characters`)
 
     // Check for processing evidence
-    console.log("\n🔍 Checking for processing evidence:");
+    console.log('\n🔍 Checking for processing evidence:')
 
     // Check viewBox
-    const viewBoxMatch = svg.match(/viewBox="([^"]*)"/);
+    const viewBoxMatch = svg.match(/viewBox="([^"]*)"/)
     if (viewBoxMatch) {
-      console.log(`✓ ViewBox found: ${viewBoxMatch[1]}`);
+      console.log(`✓ ViewBox found: ${viewBoxMatch[1]}`)
     } else {
-      console.log("❌ No viewBox found");
+      console.log('❌ No viewBox found')
     }
 
     // Check for crop marks (should be present but could be removed)
-    const hasCropMarks = svg.includes("crop-mark://");
+    const hasCropMarks = svg.includes('crop-mark://')
     console.log(
-      `${hasCropMarks ? "✓" : "❌"} Crop marks: ${hasCropMarks ? "present" : "not found"}`,
-    );
+      `${hasCropMarks ? '✓' : '❌'} Crop marks: ${hasCropMarks ? 'present' : 'not found'}`
+    )
 
     // Check for bead data attributes (evidence of processing)
-    const hasBeadData = svg.includes("data-bead-");
+    const hasBeadData = svg.includes('data-bead-')
     console.log(
-      `${hasBeadData ? "✓" : "❌"} Bead data attributes: ${hasBeadData ? "present" : "not found"}`,
-    );
+      `${hasBeadData ? '✓' : '❌'} Bead data attributes: ${hasBeadData ? 'present' : 'not found'}`
+    )
 
     // Check for original typst elements vs processed elements
-    const hasTypstGroups = svg.includes('class="typst-group"');
+    const hasTypstGroups = svg.includes('class="typst-group"')
     console.log(
-      `${hasTypstGroups ? "✓" : "❌"} Typst groups: ${hasTypstGroups ? "present" : "not found"}`,
-    );
+      `${hasTypstGroups ? '✓' : '❌'} Typst groups: ${hasTypstGroups ? 'present' : 'not found'}`
+    )
 
     // Extract some sample data attributes to verify processing
-    const dataAttrMatches = svg.match(/data-bead-[^=]+=["'][^"']*["']/g);
+    const dataAttrMatches = svg.match(/data-bead-[^=]+=["'][^"']*["']/g)
     if (dataAttrMatches && dataAttrMatches.length > 0) {
-      console.log(`✓ Found ${dataAttrMatches.length} bead data attributes:`);
+      console.log(`✓ Found ${dataAttrMatches.length} bead data attributes:`)
       dataAttrMatches.slice(0, 3).forEach((attr) => {
-        console.log(`  - ${attr}`);
-      });
+        console.log(`  - ${attr}`)
+      })
       if (dataAttrMatches.length > 3) {
-        console.log(`  - ... and ${dataAttrMatches.length - 3} more`);
+        console.log(`  - ... and ${dataAttrMatches.length - 3} more`)
       }
     }
 
     // Check for size optimization evidence
-    const dimensions = svg.match(/width="([^"]*)".*height="([^"]*)"/);
+    const dimensions = svg.match(/width="([^"]*)".*height="([^"]*)"/)
     if (dimensions) {
-      console.log(`✓ Dimensions: ${dimensions[1]} × ${dimensions[2]}`);
+      console.log(`✓ Dimensions: ${dimensions[1]} × ${dimensions[2]}`)
     }
 
-    console.log("\n📊 Summary:");
-    console.log(`- SVG generation: ✅ SUCCESS`);
-    console.log(`- ViewBox optimization: ${viewBoxMatch ? "✅" : "❌"}`);
-    console.log(`- Bead annotation processing: ${hasBeadData ? "✅" : "❌"}`);
-    console.log(`- Crop mark detection: ${hasCropMarks ? "✅" : "❌"}`);
+    console.log('\n📊 Summary:')
+    console.log(`- SVG generation: ✅ SUCCESS`)
+    console.log(`- ViewBox optimization: ${viewBoxMatch ? '✅' : '❌'}`)
+    console.log(`- Bead annotation processing: ${hasBeadData ? '✅' : '❌'}`)
+    console.log(`- Crop mark detection: ${hasCropMarks ? '✅' : '❌'}`)
 
     if (hasBeadData && viewBoxMatch) {
-      console.log("\n🎯 CONCLUSION: SVG processor is working correctly!");
-      console.log("   - ViewBox has been optimized for cropping");
-      console.log(
-        "   - Bead annotations have been extracted and converted to data attributes",
-      );
+      console.log('\n🎯 CONCLUSION: SVG processor is working correctly!')
+      console.log('   - ViewBox has been optimized for cropping')
+      console.log('   - Bead annotations have been extracted and converted to data attributes')
     } else {
-      console.log(
-        "\n⚠️  CONCLUSION: SVG processor may not be working as expected",
-      );
-      console.log(
-        "   - Check the processSVG function calls in the generation pipeline",
-      );
+      console.log('\n⚠️  CONCLUSION: SVG processor may not be working as expected')
+      console.log('   - Check the processSVG function calls in the generation pipeline')
     }
 
     // Save a sample for manual inspection
-    require("fs").writeFileSync("./sample-processed.svg", svg);
-    console.log(
-      "\n💾 Sample SVG saved to ./sample-processed.svg for manual inspection",
-    );
+    require('fs').writeFileSync('./sample-processed.svg', svg)
+    console.log('\n💾 Sample SVG saved to ./sample-processed.svg for manual inspection')
   } catch (error) {
-    console.error("❌ Test failed:", error.message);
-    console.error("Stack:", error.stack);
+    console.error('❌ Test failed:', error.message)
+    console.error('Stack:', error.stack)
   }
 }
 
 // Run the test
-testSVGProcessing().catch(console.error);
+testSVGProcessing().catch(console.error)
diff --git a/apps/web/vitest.config.ts b/apps/web/vitest.config.ts
index 45ffed28..3ace83c6 100644
--- a/apps/web/vitest.config.ts
+++ b/apps/web/vitest.config.ts
@@ -1,7 +1,7 @@
 /// <reference types="vitest" />
 
-import path from "path";
-import { defineConfig } from "vitest/config";
+import path from 'path'
+import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   esbuild: {
@@ -9,12 +9,12 @@ export default defineConfig({
   },
   test: {
     globals: true,
-    environment: "jsdom",
-    setupFiles: ["./src/test/setup.ts"],
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
   },
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "./src"),
+      '@': path.resolve(__dirname, './src'),
     },
   },
-});
+})